@elliemae/ds-form-combobox 3.49.2 → 3.49.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ComboBoxCTX.js +0 -1
- package/dist/cjs/ComboBoxCTX.js.map +2 -2
- package/dist/cjs/config/useComboBox.js +4 -4
- package/dist/cjs/config/useComboBox.js.map +2 -2
- package/dist/cjs/parts/container/Container.js +6 -4
- package/dist/cjs/parts/container/Container.js.map +3 -3
- package/dist/cjs/sharedTypes.js.map +2 -2
- package/dist/esm/ComboBoxCTX.js +0 -1
- package/dist/esm/ComboBoxCTX.js.map +2 -2
- package/dist/esm/config/useComboBox.js +4 -4
- package/dist/esm/config/useComboBox.js.map +2 -2
- package/dist/esm/parts/container/Container.js +6 -4
- package/dist/esm/parts/container/Container.js.map +3 -3
- package/dist/esm/sharedTypes.js.map +2 -2
- package/dist/types/sharedTypes.d.ts +0 -2
- package/package.json +14 -14
package/dist/cjs/ComboBoxCTX.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ComboBoxCTX.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { createContext, createRef } from 'react';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from './sharedTypes.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n hasError: false,\n inline: false,\n withoutPortal: false,\n disabled: false,\n useMask: noop,\n innerRef: createRef(),\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'top-start'],\n noOptionsMessage: 'No Matches Found',\n isNonClearable: false,\n onlySelectable: false,\n isSkeleton: false,\n // override in useCombobox to avoid ref duplications when more than one cb is used\n applyAriaDisabled: false,\n readOnly: false,\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n props: defaultProps as DSComboboxT.InternalProps,\n menuState: false,\n hasFocus: false,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AAMlC,SAAS,QAA6B,OAAgB;AAAC;AAEvD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,cAAU,wBAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,
|
|
4
|
+
"sourcesContent": ["import { createContext, createRef } from 'react';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from './sharedTypes.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n hasError: false,\n inline: false,\n withoutPortal: false,\n disabled: false,\n useMask: noop,\n innerRef: createRef(),\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'top-start'],\n noOptionsMessage: 'No Matches Found',\n isNonClearable: false,\n onlySelectable: false,\n isSkeleton: false,\n // override in useCombobox to avoid ref duplications when more than one cb is used\n applyAriaDisabled: false,\n readOnly: false,\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n props: defaultProps as DSComboboxT.InternalProps,\n menuState: false,\n hasFocus: false,\n inputValue: '',\n focusOptionIdx: '',\n pillGroupRef: createRef<HTMLDivElement>(),\n listRef: createRef<HTMLDivElement>(),\n wrapperListRef: createRef<HTMLDivElement>(),\n controlsWrapperRef: createRef<HTMLInputElement>(),\n selectedOptionsRef: createRef<HTMLInputElement>(),\n setShowPopover: noop,\n scrollOptionIntoView: noop,\n setHasFocus: noop,\n setInputValue: noop,\n setReferenceElement: noop,\n setFocusOptionIdx: noop,\n setMenuState: noop,\n internalRef: createRef<HTMLInputElement>(),\n correctOptions: [],\n instanceUid: '',\n optionsPerSection: [],\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AAMlC,SAAS,QAA6B,OAAgB;AAAC;AAEvD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,cAAU,wBAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,kBAAc,wBAA0B;AAAA,EACxC,aAAS,wBAA0B;AAAA,EACnC,oBAAgB,wBAA0B;AAAA,EAC1C,wBAAoB,wBAA4B;AAAA,EAChD,wBAAoB,wBAA4B;AAAA,EAChD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,iBAAa,wBAA4B;AAAA,EACzC,gBAAgB,CAAC;AAAA,EACjB,aAAa;AAAA,EACb,mBAAmB,CAAC;AACtB;AAEO,MAAM,sBAAkB,4BAAc,cAAc;AAE3D,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -46,7 +46,6 @@ const useComboBox = (props) => {
|
|
|
46
46
|
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_ComboBoxCTX.defaultProps);
|
|
47
47
|
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.ComboboxPropTypes, import_theming.DSComboBoxName);
|
|
48
48
|
const [showPopover, setShowPopover] = (0, import_react.useState)(false);
|
|
49
|
-
const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
|
|
50
49
|
const [inputValue, setInputValue] = (0, import_react.useState)("");
|
|
51
50
|
const [hasFocus, setHasFocus] = (0, import_react.useState)(false);
|
|
52
51
|
const internalRef = (0, import_react.useRef)(null);
|
|
@@ -71,6 +70,10 @@ const useComboBox = (props) => {
|
|
|
71
70
|
});
|
|
72
71
|
const scrollOptionIntoView = (0, import_react.useCallback)(
|
|
73
72
|
(dsId, opts = { align: "center" }) => {
|
|
73
|
+
virtualListHelpers.scrollToIndex(
|
|
74
|
+
correctOptions.findIndex((opt) => opt.dsId === dsId),
|
|
75
|
+
opts
|
|
76
|
+
);
|
|
74
77
|
requestAnimationFrame(() => {
|
|
75
78
|
virtualListHelpers.scrollToIndex(
|
|
76
79
|
correctOptions.findIndex((opt) => opt.dsId === dsId),
|
|
@@ -106,7 +109,6 @@ const useComboBox = (props) => {
|
|
|
106
109
|
props: { ...propsWithDefaults },
|
|
107
110
|
virtualListHelpers,
|
|
108
111
|
menuState,
|
|
109
|
-
referenceElement,
|
|
110
112
|
listRef,
|
|
111
113
|
focusOptionIdx,
|
|
112
114
|
selectedOptionsRef,
|
|
@@ -120,7 +122,6 @@ const useComboBox = (props) => {
|
|
|
120
122
|
setHasFocus,
|
|
121
123
|
setFocusOptionIdx,
|
|
122
124
|
scrollOptionIntoView,
|
|
123
|
-
setReferenceElement,
|
|
124
125
|
setShowPopover,
|
|
125
126
|
internalRef,
|
|
126
127
|
correctOptions,
|
|
@@ -139,7 +140,6 @@ const useComboBox = (props) => {
|
|
|
139
140
|
wrapperListRef,
|
|
140
141
|
menuState,
|
|
141
142
|
pillGroupRef,
|
|
142
|
-
referenceElement,
|
|
143
143
|
selectedOptionsRef,
|
|
144
144
|
controlsWrapperRef,
|
|
145
145
|
listRef,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useComboBox.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkE;AAClE,2BAAsD;AACtD,iBAAoB;AACpB,8BAA6E;AAC7E,yBAA6B;AAE7B,mCAAkC;AAElC,+BAAkC;AAClC,wBAAqD;AACrD,qBAA+B;AAC/B,kCAAqC;AAE9B,MAAM,cAAc,CAAC,UAAoE;AAC9F,QAAM,wBAAoB,sDAAwD,OAAO,+BAAY;AACrG,8DAA+B,mBAAmB,gDAAmB,6BAAc;AACnF,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAkB,KAAK;AAC7D,QAAM,CAAC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [inputValue, setInputValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n const internalRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const wrapperListRef = useRef<HTMLDivElement>(null);\n\n const selectedOptionsRef = useRef<HTMLDivElement>(null);\n const controlsWrapperRef = useRef<HTMLDivElement>(null);\n const pillGroupRef = useRef<HTMLDivElement>(null);\n\n const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n const instanceUid = useMemo(() => id || uid(5), [id]);\n\n const menuState = useMemo(() => {\n if (isMenuOpen !== undefined) return isMenuOpen;\n return showPopover;\n }, [showPopover, isMenuOpen]);\n\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n const optionsPerSection = useOptionsPerSection(correctOptions);\n\n // ===========================================================================\n // Virtualization setup\n // ===========================================================================\n\n const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n size: optionsPerSection.length,\n parentRef: listRef,\n overscan: 15,\n paddingStart: 0,\n });\n\n // ===========================================================================\n // Scroll into view function\n // ===========================================================================\n const scrollOptionIntoView = useCallback(\n (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n // tentative fix to https://jira.elliemae.io/browse/PUI-15374\n // in some scenarios (very specific and with iframes that we can't replicate)\n // the first render positions the list in the wrong place\n // executing this code right away seems to for some reason make the first placement correct in the first render\n // fix is fragile but we can't replicate the issue so we can't test a more robust fix.\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n // executing in new animation frames instead fixes https://jira.elliemae.io/browse/PUI-15252\n // so practically speaking we are scrolling twice in two different frames\n // it's not per-se bad given the underlying virtualization library + browser scroll + dynamic heights\n // actually sometimes need to do a first scroll to calculate new heights/scroll position\n // and then a second one to actually position the scroll in the list correctly,\n // making fix to 15252 potentially more robust.\n requestAnimationFrame(() => {\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n });\n },\n [correctOptions, virtualListHelpers],\n );\n\n // ===========================================================================\n // Init focused option when opening the menu list\n // ===========================================================================\n\n const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n const setMenuState = useCallback(\n (\n newState: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (applyAriaDisabled) return;\n if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n setShowPopover(newState);\n\n if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n const focusedValue = getFirstOption(correctOptions, selectedValues);\n setFocusOptionIdx(focusedValue);\n scrollOptionIntoView(focusedValue, { align: 'center' });\n } else {\n setFocusOptionIdx('');\n }\n },\n [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n );\n\n // We need to force the auto focus for the inline since we dont control the floating wrapper.\n useEffect(() => {\n if (propsWithDefaults.inline) {\n setMenuState(true, 'inline');\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefaults },\n virtualListHelpers,\n menuState,\n listRef,\n focusOptionIdx,\n selectedOptionsRef,\n controlsWrapperRef,\n inputValue,\n setInputValue,\n setMenuState,\n hasFocus,\n pillGroupRef,\n wrapperListRef,\n setHasFocus,\n setFocusOptionIdx,\n scrollOptionIntoView,\n setShowPopover,\n internalRef,\n correctOptions,\n instanceUid,\n optionsPerSection,\n }),\n [\n scrollOptionIntoView,\n setMenuState,\n correctOptions,\n hasFocus,\n propsWithDefaults,\n virtualListHelpers,\n inputValue,\n focusOptionIdx,\n wrapperListRef,\n menuState,\n pillGroupRef,\n selectedOptionsRef,\n controlsWrapperRef,\n listRef,\n internalRef,\n instanceUid,\n optionsPerSection,\n ],\n );\n\n return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(Container_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(Container_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = require("react");
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
39
|
var import_ds_floating_context = require("@elliemae/ds-floating-context");
|
|
@@ -45,7 +45,8 @@ var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
|
|
|
45
45
|
var import_LiveRegion = require("../LiveRegion.js");
|
|
46
46
|
var import_useClickOutside = require("../../config/useClickOutside.js");
|
|
47
47
|
const Container = () => {
|
|
48
|
-
const
|
|
48
|
+
const [referenceElement, setReferenceElement] = import_react.default.useState(null);
|
|
49
|
+
const { props, internalRef, setMenuState, menuState } = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
49
50
|
const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;
|
|
50
51
|
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
51
52
|
const { zIndex, ...xStyledProps } = (0, import_ds_props_helpers.useGetXstyledProps)(props);
|
|
@@ -101,7 +102,8 @@ const Container = () => {
|
|
|
101
102
|
inline ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
102
103
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
|
|
103
104
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {})
|
|
104
|
-
] }) :
|
|
105
|
+
] }) : null,
|
|
106
|
+
!inline ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
105
107
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
|
|
106
108
|
referenceElement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
107
109
|
import_ds_floating_context.FloatingWrapper,
|
|
@@ -113,7 +115,7 @@ const Container = () => {
|
|
|
113
115
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {}) })
|
|
114
116
|
}
|
|
115
117
|
) : null
|
|
116
|
-
] })
|
|
118
|
+
] }) : null
|
|
117
119
|
]
|
|
118
120
|
}
|
|
119
121
|
) })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n const { props, internalRef, setMenuState, menuState
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiFf;AAhFR,mBAAmE;AACnE,8BAA2D;AAC3D,uBAA0B;AAC1B,iCAAiF;AACjF,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AACnC,wBAA2B;AAC3B,6BAAkC;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,
|
|
6
|
-
"names": ["ComboBoxContext"]
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n 'data-testid'?: string;\n };\n const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n\n const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n // Removing possible collisionable props\n const { className, 'data-testid': dataTestId } = globalAttributes;\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n const handleCloseMenu = useCallback(() => {\n setMenuState(false, 'blur');\n if (internalRef?.current) internalRef.current.blur();\n }, [internalRef, setMenuState]);\n\n useEffect(() => {\n const closeMenuOnWindowBlur = () => {\n if (menuState) setMenuState(false, 'blur');\n };\n\n window.addEventListener('blur', closeMenuOnWindowBlur);\n\n return () => {\n window.removeEventListener('blur', closeMenuOnWindowBlur);\n };\n }, [menuState, setMenuState]);\n\n const config = useMemo(\n () => ({\n placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n withoutAnimation: true,\n startPlacementPreference,\n placementOrderPreference,\n zIndex: correctZIndex,\n customOffset: [0, 5] as [number, number],\n handleCloseMenu,\n portalDOMContainer: document.body,\n }),\n [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu],\n );\n\n const { refs, floatingStyles, context } = useFloatingContext(config);\n\n const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n const hideTooltip = useCallback(() => {\n setMenuState(false, 'blur');\n }, [setMenuState]);\n\n useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n return (\n // eslint-disable-next-line react/jsx-no-useless-fragment\n <>\n <StyledContainer\n data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n innerRef={comboboxRef}\n className={className}\n applyAriaDisabled={applyAriaDisabled}\n {...xStyledProps}\n >\n <LiveRegion />\n\n {inline ? (\n <>\n <Controls />\n <MenuList />\n </>\n ) : null}\n {!inline ? (\n <>\n <Controls />\n {referenceElement ? (\n <FloatingWrapper\n innerRef={refs.setFloating}\n floatingStyles={floatingStyles}\n isOpen={menuState}\n context={context}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n <MenuList />\n </StyledPopperWrapper>\n </FloatingWrapper>\n ) : null}\n </>\n ) : null}\n </StyledContainer>\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiFf;AAhFR,mBAAmE;AACnE,8BAA2D;AAC3D,uBAA0B;AAC1B,iCAAiF;AACjF,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AACnC,wBAA2B;AAC3B,6BAAkC;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,aAAAA,QAAM,SAA6B,IAAI;AACvF,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,QAAI,yBAAW,mBAAAC,OAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,uBAAmB,gDAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,QAAI,4CAAmB,KAAK;AAE5D,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,sBAAkB,0BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,8BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,aAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,IAC/B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,eAAe;AAAA,EACrF;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,QAAI,+CAAmB,MAAM;AAEnE,QAAM,kBAAc,4BAAU,qBAAqB,KAAK,YAAY;AAEpE,QAAM,kBAAc,0BAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,gDAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D;AAAA;AAAA,IAEE,2EACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,cAAc,8CAAmB;AAAA,QAC9C,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,sDAAC,gCAAW;AAAA,UAEX,SACC,4EACE;AAAA,wDAAC,4BAAS;AAAA,YACV,4CAAC,6BAAS;AAAA,aACZ,IACE;AAAA,UACH,CAAC,SACA,4EACE;AAAA,wDAAC,4BAAS;AAAA,YACT,mBACC;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU,KAAK;AAAA,gBACf;AAAA,gBACA,QAAQ;AAAA,gBACR;AAAA,gBAEA,sDAAC,qCAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,sDAAC,6BAAS,GACZ;AAAA;AAAA,YACF,IACE;AAAA,aACN,IACE;AAAA;AAAA;AAAA,IACN,GACF;AAAA;AAEJ;",
|
|
6
|
+
"names": ["React", "ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/sharedTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n virtualListHelpers?: ReturnType<typeof useVirtual>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAkC;
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n virtualListHelpers?: ReturnType<typeof useVirtual>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string) => void;\n setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n hasFocus: boolean;\n listRef: React.RefObject<HTMLDivElement>;\n wrapperListRef: React.RefObject<HTMLDivElement>;\n inputValue: string;\n setInputValue: React.Dispatch<React.SetStateAction<string>>;\n selectedOptionsRef: React.RefObject<HTMLDivElement>;\n controlsWrapperRef: React.RefObject<HTMLDivElement>;\n focusOptionIdx: string;\n setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n setMenuState: (\n newState: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n correctOptions: DSComboboxT.OptionTypes[];\n instanceUid: string;\n optionsPerSection: DSComboboxT.OptionTypes[];\n }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n el?.type === MENU_OPTION_TYPES.OPTION;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAkC;AA+B3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,mCAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,mCAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/ComboBoxCTX.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ComboBoxCTX.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from './sharedTypes.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n hasError: false,\n inline: false,\n withoutPortal: false,\n disabled: false,\n useMask: noop,\n innerRef: createRef(),\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'top-start'],\n noOptionsMessage: 'No Matches Found',\n isNonClearable: false,\n onlySelectable: false,\n isSkeleton: false,\n // override in useCombobox to avoid ref duplications when more than one cb is used\n applyAriaDisabled: false,\n readOnly: false,\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n props: defaultProps as DSComboboxT.InternalProps,\n menuState: false,\n hasFocus: false,\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AAMlC,SAAS,QAA6B,OAAgB;AAAC;AAEvD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU,UAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from './sharedTypes.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n hasError: false,\n inline: false,\n withoutPortal: false,\n disabled: false,\n useMask: noop,\n innerRef: createRef(),\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'top-start'],\n noOptionsMessage: 'No Matches Found',\n isNonClearable: false,\n onlySelectable: false,\n isSkeleton: false,\n // override in useCombobox to avoid ref duplications when more than one cb is used\n applyAriaDisabled: false,\n readOnly: false,\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n props: defaultProps as DSComboboxT.InternalProps,\n menuState: false,\n hasFocus: false,\n inputValue: '',\n focusOptionIdx: '',\n pillGroupRef: createRef<HTMLDivElement>(),\n listRef: createRef<HTMLDivElement>(),\n wrapperListRef: createRef<HTMLDivElement>(),\n controlsWrapperRef: createRef<HTMLInputElement>(),\n selectedOptionsRef: createRef<HTMLInputElement>(),\n setShowPopover: noop,\n scrollOptionIntoView: noop,\n setHasFocus: noop,\n setInputValue: noop,\n setReferenceElement: noop,\n setFocusOptionIdx: noop,\n setMenuState: noop,\n internalRef: createRef<HTMLInputElement>(),\n correctOptions: [],\n instanceUid: '',\n optionsPerSection: [],\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AAMlC,SAAS,QAA6B,OAAgB;AAAC;AAEvD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU,UAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,cAAc,UAA0B;AAAA,EACxC,SAAS,UAA0B;AAAA,EACnC,gBAAgB,UAA0B;AAAA,EAC1C,oBAAoB,UAA4B;AAAA,EAChD,oBAAoB,UAA4B;AAAA,EAChD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,aAAa,UAA4B;AAAA,EACzC,gBAAgB,CAAC;AAAA,EACjB,aAAa;AAAA,EACb,mBAAmB,CAAC;AACtB;AAEO,MAAM,kBAAkB,cAAc,cAAc;AAE3D,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -13,7 +13,6 @@ const useComboBox = (props) => {
|
|
|
13
13
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
|
|
14
14
|
useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);
|
|
15
15
|
const [showPopover, setShowPopover] = useState(false);
|
|
16
|
-
const [referenceElement, setReferenceElement] = useState(null);
|
|
17
16
|
const [inputValue, setInputValue] = useState("");
|
|
18
17
|
const [hasFocus, setHasFocus] = useState(false);
|
|
19
18
|
const internalRef = useRef(null);
|
|
@@ -38,6 +37,10 @@ const useComboBox = (props) => {
|
|
|
38
37
|
});
|
|
39
38
|
const scrollOptionIntoView = useCallback(
|
|
40
39
|
(dsId, opts = { align: "center" }) => {
|
|
40
|
+
virtualListHelpers.scrollToIndex(
|
|
41
|
+
correctOptions.findIndex((opt) => opt.dsId === dsId),
|
|
42
|
+
opts
|
|
43
|
+
);
|
|
41
44
|
requestAnimationFrame(() => {
|
|
42
45
|
virtualListHelpers.scrollToIndex(
|
|
43
46
|
correctOptions.findIndex((opt) => opt.dsId === dsId),
|
|
@@ -73,7 +76,6 @@ const useComboBox = (props) => {
|
|
|
73
76
|
props: { ...propsWithDefaults },
|
|
74
77
|
virtualListHelpers,
|
|
75
78
|
menuState,
|
|
76
|
-
referenceElement,
|
|
77
79
|
listRef,
|
|
78
80
|
focusOptionIdx,
|
|
79
81
|
selectedOptionsRef,
|
|
@@ -87,7 +89,6 @@ const useComboBox = (props) => {
|
|
|
87
89
|
setHasFocus,
|
|
88
90
|
setFocusOptionIdx,
|
|
89
91
|
scrollOptionIntoView,
|
|
90
|
-
setReferenceElement,
|
|
91
92
|
setShowPopover,
|
|
92
93
|
internalRef,
|
|
93
94
|
correctOptions,
|
|
@@ -106,7 +107,6 @@ const useComboBox = (props) => {
|
|
|
106
107
|
wrapperListRef,
|
|
107
108
|
menuState,
|
|
108
109
|
pillGroupRef,
|
|
109
|
-
referenceElement,
|
|
110
110
|
selectedOptionsRef,
|
|
111
111
|
controlsWrapperRef,
|
|
112
112
|
listRef,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useComboBox.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,QAAQ,aAAa,iBAAiB;AAClE,SAAS,kBAA6C;AACtD,SAAS,WAAW;AACpB,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,oBAAoB;AAE7B,SAAS,yBAAyB;AAElC,SAAS,yBAAyB;AAClC,SAAS,gBAAgB,4BAA4B;AACrD,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAE9B,MAAM,cAAc,CAAC,UAAoE;AAC9F,QAAM,oBAAoB,6BAAwD,OAAO,YAAY;AACrG,iCAA+B,mBAAmB,mBAAmB,cAAc;AACnF,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,CAAC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [inputValue, setInputValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n const internalRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const wrapperListRef = useRef<HTMLDivElement>(null);\n\n const selectedOptionsRef = useRef<HTMLDivElement>(null);\n const controlsWrapperRef = useRef<HTMLDivElement>(null);\n const pillGroupRef = useRef<HTMLDivElement>(null);\n\n const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n const instanceUid = useMemo(() => id || uid(5), [id]);\n\n const menuState = useMemo(() => {\n if (isMenuOpen !== undefined) return isMenuOpen;\n return showPopover;\n }, [showPopover, isMenuOpen]);\n\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n const optionsPerSection = useOptionsPerSection(correctOptions);\n\n // ===========================================================================\n // Virtualization setup\n // ===========================================================================\n\n const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n size: optionsPerSection.length,\n parentRef: listRef,\n overscan: 15,\n paddingStart: 0,\n });\n\n // ===========================================================================\n // Scroll into view function\n // ===========================================================================\n const scrollOptionIntoView = useCallback(\n (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n // tentative fix to https://jira.elliemae.io/browse/PUI-15374\n // in some scenarios (very specific and with iframes that we can't replicate)\n // the first render positions the list in the wrong place\n // executing this code right away seems to for some reason make the first placement correct in the first render\n // fix is fragile but we can't replicate the issue so we can't test a more robust fix.\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n // executing in new animation frames instead fixes https://jira.elliemae.io/browse/PUI-15252\n // so practically speaking we are scrolling twice in two different frames\n // it's not per-se bad given the underlying virtualization library + browser scroll + dynamic heights\n // actually sometimes need to do a first scroll to calculate new heights/scroll position\n // and then a second one to actually position the scroll in the list correctly,\n // making fix to 15252 potentially more robust.\n requestAnimationFrame(() => {\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n });\n },\n [correctOptions, virtualListHelpers],\n );\n\n // ===========================================================================\n // Init focused option when opening the menu list\n // ===========================================================================\n\n const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n const setMenuState = useCallback(\n (\n newState: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (applyAriaDisabled) return;\n if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n setShowPopover(newState);\n\n if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n const focusedValue = getFirstOption(correctOptions, selectedValues);\n setFocusOptionIdx(focusedValue);\n scrollOptionIntoView(focusedValue, { align: 'center' });\n } else {\n setFocusOptionIdx('');\n }\n },\n [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n );\n\n // We need to force the auto focus for the inline since we dont control the floating wrapper.\n useEffect(() => {\n if (propsWithDefaults.inline) {\n setMenuState(true, 'inline');\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefaults },\n virtualListHelpers,\n menuState,\n listRef,\n focusOptionIdx,\n selectedOptionsRef,\n controlsWrapperRef,\n inputValue,\n setInputValue,\n setMenuState,\n hasFocus,\n pillGroupRef,\n wrapperListRef,\n setHasFocus,\n setFocusOptionIdx,\n scrollOptionIntoView,\n setShowPopover,\n internalRef,\n correctOptions,\n instanceUid,\n optionsPerSection,\n }),\n [\n scrollOptionIntoView,\n setMenuState,\n correctOptions,\n hasFocus,\n propsWithDefaults,\n virtualListHelpers,\n inputValue,\n focusOptionIdx,\n wrapperListRef,\n menuState,\n pillGroupRef,\n selectedOptionsRef,\n controlsWrapperRef,\n listRef,\n internalRef,\n instanceUid,\n optionsPerSection,\n ],\n );\n\n return ctx;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useCallback, useMemo, useEffect, useContext } from "react";
|
|
3
|
+
import React2, { useCallback, useMemo, useEffect, useContext } from "react";
|
|
4
4
|
import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { mergeRefs } from "@elliemae/ds-system";
|
|
6
6
|
import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
|
|
@@ -12,7 +12,8 @@ import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
|
|
|
12
12
|
import { LiveRegion } from "../LiveRegion.js";
|
|
13
13
|
import { useOnClickOutside } from "../../config/useClickOutside.js";
|
|
14
14
|
const Container = () => {
|
|
15
|
-
const
|
|
15
|
+
const [referenceElement, setReferenceElement] = React2.useState(null);
|
|
16
|
+
const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);
|
|
16
17
|
const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;
|
|
17
18
|
const globalAttributes = useGetGlobalAttributes(props);
|
|
18
19
|
const { zIndex, ...xStyledProps } = useGetXstyledProps(props);
|
|
@@ -68,7 +69,8 @@ const Container = () => {
|
|
|
68
69
|
inline ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
69
70
|
/* @__PURE__ */ jsx(Controls, {}),
|
|
70
71
|
/* @__PURE__ */ jsx(MenuList, {})
|
|
71
|
-
] }) :
|
|
72
|
+
] }) : null,
|
|
73
|
+
!inline ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
72
74
|
/* @__PURE__ */ jsx(Controls, {}),
|
|
73
75
|
referenceElement ? /* @__PURE__ */ jsx(
|
|
74
76
|
FloatingWrapper,
|
|
@@ -80,7 +82,7 @@ const Container = () => {
|
|
|
80
82
|
children: /* @__PURE__ */ jsx(StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ jsx(MenuList, {}) })
|
|
81
83
|
}
|
|
82
84
|
) : null
|
|
83
|
-
] })
|
|
85
|
+
] }) : null
|
|
84
86
|
]
|
|
85
87
|
}
|
|
86
88
|
) })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n const { props, internalRef, setMenuState, menuState
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACiFf,SAGE,UAHF,KAGE,YAHF;AAhFR,
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n 'data-testid'?: string;\n };\n const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n\n const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n // Removing possible collisionable props\n const { className, 'data-testid': dataTestId } = globalAttributes;\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n const handleCloseMenu = useCallback(() => {\n setMenuState(false, 'blur');\n if (internalRef?.current) internalRef.current.blur();\n }, [internalRef, setMenuState]);\n\n useEffect(() => {\n const closeMenuOnWindowBlur = () => {\n if (menuState) setMenuState(false, 'blur');\n };\n\n window.addEventListener('blur', closeMenuOnWindowBlur);\n\n return () => {\n window.removeEventListener('blur', closeMenuOnWindowBlur);\n };\n }, [menuState, setMenuState]);\n\n const config = useMemo(\n () => ({\n placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n withoutAnimation: true,\n startPlacementPreference,\n placementOrderPreference,\n zIndex: correctZIndex,\n customOffset: [0, 5] as [number, number],\n handleCloseMenu,\n portalDOMContainer: document.body,\n }),\n [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu],\n );\n\n const { refs, floatingStyles, context } = useFloatingContext(config);\n\n const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n const hideTooltip = useCallback(() => {\n setMenuState(false, 'blur');\n }, [setMenuState]);\n\n useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n return (\n // eslint-disable-next-line react/jsx-no-useless-fragment\n <>\n <StyledContainer\n data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n innerRef={comboboxRef}\n className={className}\n applyAriaDisabled={applyAriaDisabled}\n {...xStyledProps}\n >\n <LiveRegion />\n\n {inline ? (\n <>\n <Controls />\n <MenuList />\n </>\n ) : null}\n {!inline ? (\n <>\n <Controls />\n {referenceElement ? (\n <FloatingWrapper\n innerRef={refs.setFloating}\n floatingStyles={floatingStyles}\n isOpen={menuState}\n context={context}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n <MenuList />\n </StyledPopperWrapper>\n </FloatingWrapper>\n ) : null}\n </>\n ) : null}\n </StyledContainer>\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiFf,SAGE,UAHF,KAGE,YAHF;AAhFR,OAAOA,UAAS,aAAa,SAAS,WAAW,kBAAkB;AACnE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB,uBAAoD;AACjF,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,OAAM,SAA6B,IAAI;AACvF,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,IAAI,WAAW,eAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,mBAAmB,uBAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI,mBAAmB,KAAK;AAE5D,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,IAC/B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,eAAe;AAAA,EACrF;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,IAAI,mBAAmB,MAAM;AAEnE,QAAM,cAAc,UAAU,qBAAqB,KAAK,YAAY;AAEpE,QAAM,cAAc,YAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,oBAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D;AAAA;AAAA,IAEE,gCACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,cAAc,mBAAmB;AAAA,QAC9C,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,cAAW;AAAA,UAEX,SACC,iCACE;AAAA,gCAAC,YAAS;AAAA,YACV,oBAAC,YAAS;AAAA,aACZ,IACE;AAAA,UACH,CAAC,SACA,iCACE;AAAA,gCAAC,YAAS;AAAA,YACT,mBACC;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU,KAAK;AAAA,gBACf;AAAA,gBACA,QAAQ;AAAA,gBACR;AAAA,gBAEA,8BAAC,uBAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,8BAAC,YAAS,GACZ;AAAA;AAAA,YACF,IACE;AAAA,aACN,IACE;AAAA;AAAA;AAAA,IACN,GACF;AAAA;AAEJ;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/sharedTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n virtualListHelpers?: ReturnType<typeof useVirtual>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,yBAAyB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n virtualListHelpers?: ReturnType<typeof useVirtual>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string) => void;\n setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n hasFocus: boolean;\n listRef: React.RefObject<HTMLDivElement>;\n wrapperListRef: React.RefObject<HTMLDivElement>;\n inputValue: string;\n setInputValue: React.Dispatch<React.SetStateAction<string>>;\n selectedOptionsRef: React.RefObject<HTMLDivElement>;\n controlsWrapperRef: React.RefObject<HTMLDivElement>;\n focusOptionIdx: string;\n setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n setMenuState: (\n newState: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n correctOptions: DSComboboxT.OptionTypes[];\n instanceUid: string;\n optionsPerSection: DSComboboxT.OptionTypes[];\n }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n el?.type === MENU_OPTION_TYPES.OPTION;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,yBAAyB;AA+B3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,8 +8,6 @@ export declare namespace DSComboboxInternalsT {
|
|
|
8
8
|
virtualListHelpers?: ReturnType<typeof useVirtual>;
|
|
9
9
|
menuState: boolean;
|
|
10
10
|
setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;
|
|
11
|
-
referenceElement: HTMLElement | null;
|
|
12
|
-
setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
|
|
13
11
|
pillGroupRef: React.RefObject<HTMLDivElement>;
|
|
14
12
|
scrollOptionIntoView: (dsId: string) => void;
|
|
15
13
|
setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.49.
|
|
3
|
+
"version": "3.49.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -38,17 +38,17 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"uid": "~2.0.1",
|
|
41
|
-
"@elliemae/ds-button-v2": "3.49.
|
|
42
|
-
"@elliemae/ds-circular-progress-indicator": "3.49.
|
|
43
|
-
"@elliemae/ds-floating-context": "3.49.
|
|
44
|
-
"@elliemae/ds-form-checkbox": "3.49.
|
|
45
|
-
"@elliemae/ds-grid": "3.49.
|
|
46
|
-
"@elliemae/ds-menu-items": "3.49.
|
|
47
|
-
"@elliemae/ds-icons": "3.49.
|
|
48
|
-
"@elliemae/ds-pills-v2": "3.49.
|
|
49
|
-
"@elliemae/ds-props-helpers": "3.49.
|
|
50
|
-
"@elliemae/ds-system": "3.49.
|
|
51
|
-
"@elliemae/ds-truncated-tooltip-text": "3.49.
|
|
41
|
+
"@elliemae/ds-button-v2": "3.49.4",
|
|
42
|
+
"@elliemae/ds-circular-progress-indicator": "3.49.4",
|
|
43
|
+
"@elliemae/ds-floating-context": "3.49.4",
|
|
44
|
+
"@elliemae/ds-form-checkbox": "3.49.4",
|
|
45
|
+
"@elliemae/ds-grid": "3.49.4",
|
|
46
|
+
"@elliemae/ds-menu-items": "3.49.4",
|
|
47
|
+
"@elliemae/ds-icons": "3.49.4",
|
|
48
|
+
"@elliemae/ds-pills-v2": "3.49.4",
|
|
49
|
+
"@elliemae/ds-props-helpers": "3.49.4",
|
|
50
|
+
"@elliemae/ds-system": "3.49.4",
|
|
51
|
+
"@elliemae/ds-truncated-tooltip-text": "3.49.4"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"jest-cli": "~29.7.0",
|
|
58
58
|
"styled-components": "~5.3.9",
|
|
59
59
|
"styled-system": "~5.1.5",
|
|
60
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.49.
|
|
61
|
-
"@elliemae/ds-monorepo-devops": "3.49.
|
|
60
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.49.4",
|
|
61
|
+
"@elliemae/ds-monorepo-devops": "3.49.4"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
64
|
"@elliemae/pui-theme": "~2.10.0",
|