@elliemae/ds-form-combobox 3.50.0-rc.3 → 3.50.0-rc.5
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 +11 -12
- package/dist/cjs/config/useComboBox.js.map +2 -2
- package/dist/cjs/parts/container/Container.js +31 -35
- package/dist/cjs/parts/container/Container.js.map +3 -3
- package/dist/cjs/parts/controls/Controls.js +1 -1
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/menu-list/MenuList.js +18 -26
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/parts/menu-list/styled.js +3 -15
- package/dist/cjs/parts/menu-list/styled.js.map +2 -2
- package/dist/cjs/parts/menu-list/useItemRenderer.js +24 -38
- package/dist/cjs/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- 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 +11 -12
- package/dist/esm/config/useComboBox.js.map +2 -2
- package/dist/esm/parts/container/Container.js +32 -36
- package/dist/esm/parts/container/Container.js.map +3 -3
- package/dist/esm/parts/controls/Controls.js +1 -1
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/menu-list/MenuList.js +21 -29
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/parts/menu-list/styled.js +3 -15
- package/dist/esm/parts/menu-list/styled.js.map +2 -2
- package/dist/esm/parts/menu-list/useItemRenderer.js +24 -38
- package/dist/esm/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +2 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/sharedTypes.js.map +2 -2
- package/dist/types/parts/menu-list/styled.d.ts +2 -6
- package/dist/types/parts/menu-list/useItemRenderer.d.ts +9 -1
- package/dist/types/react-desc-prop-types.d.ts +7 -0
- package/dist/types/sharedTypes.d.ts +3 -6
- package/package.json +15 -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
|
}
|
|
@@ -33,7 +33,6 @@ __export(useComboBox_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(useComboBox_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = require("react");
|
|
36
|
-
var import_react_virtual = require("react-virtual");
|
|
37
36
|
var import_uid = require("uid");
|
|
38
37
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
38
|
var import_ComboBoxCTX = require("../ComboBoxCTX.js");
|
|
@@ -50,7 +49,6 @@ const useComboBox = (props) => {
|
|
|
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);
|
|
53
|
-
const listRef = (0, import_react.useRef)(null);
|
|
54
52
|
const wrapperListRef = (0, import_react.useRef)(null);
|
|
55
53
|
const selectedOptionsRef = (0, import_react.useRef)(null);
|
|
56
54
|
const controlsWrapperRef = (0, import_react.useRef)(null);
|
|
@@ -63,22 +61,25 @@ const useComboBox = (props) => {
|
|
|
63
61
|
}, [showPopover, isMenuOpen]);
|
|
64
62
|
const correctOptions = (0, import_useCorrectOptions.useCorrectOptions)(propsWithDefaults, inputValue);
|
|
65
63
|
const optionsPerSection = (0, import_useOptionsPerSection.useOptionsPerSection)(correctOptions);
|
|
66
|
-
const
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
});
|
|
64
|
+
const actionRef = {
|
|
65
|
+
scrollTo: () => {
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
const listRef = (0, import_react.useRef)(actionRef);
|
|
72
69
|
const scrollOptionIntoView = (0, import_react.useCallback)(
|
|
73
70
|
(dsId, opts = { align: "center" }) => {
|
|
71
|
+
listRef.current.scrollTo(
|
|
72
|
+
correctOptions.findIndex((opt) => opt.dsId === dsId),
|
|
73
|
+
opts
|
|
74
|
+
);
|
|
74
75
|
requestAnimationFrame(() => {
|
|
75
|
-
|
|
76
|
+
listRef.current.scrollTo(
|
|
76
77
|
correctOptions.findIndex((opt) => opt.dsId === dsId),
|
|
77
78
|
opts
|
|
78
79
|
);
|
|
79
80
|
});
|
|
80
81
|
},
|
|
81
|
-
[correctOptions
|
|
82
|
+
[correctOptions]
|
|
82
83
|
);
|
|
83
84
|
const [focusOptionIdx, setFocusOptionIdx] = (0, import_react.useState)("");
|
|
84
85
|
const setMenuState = (0, import_react.useCallback)(
|
|
@@ -104,7 +105,6 @@ const useComboBox = (props) => {
|
|
|
104
105
|
const ctx = (0, import_react.useMemo)(
|
|
105
106
|
() => ({
|
|
106
107
|
props: { ...propsWithDefaults },
|
|
107
|
-
virtualListHelpers,
|
|
108
108
|
menuState,
|
|
109
109
|
referenceElement,
|
|
110
110
|
listRef,
|
|
@@ -133,7 +133,6 @@ const useComboBox = (props) => {
|
|
|
133
133
|
correctOptions,
|
|
134
134
|
hasFocus,
|
|
135
135
|
propsWithDefaults,
|
|
136
|
-
virtualListHelpers,
|
|
137
136
|
inputValue,
|
|
138
137
|
focusOptionIdx,
|
|
139
138
|
wrapperListRef,
|
|
@@ -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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkE;AAClE,
|
|
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 { uid } from 'uid';\nimport { type DSFastListT } from '@elliemae/ds-fast-list';\n\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 [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n const internalRef = useRef<HTMLInputElement>(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 const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n const optionsPerSection = useOptionsPerSection(correctOptions);\n\n const actionRef: DSComboboxT.ActionRefVirtualized = {\n scrollTo: () => {},\n };\n\n const listRef = useRef<DSComboboxT.ActionRefVirtualized>(actionRef);\n\n // ===========================================================================\n // Scroll into view function\n // ===========================================================================\n const scrollOptionIntoView = useCallback(\n (dsId: string, opts: DSFastListT.ScrollToOptions = { align: 'center' } as DSFastListT.ScrollToOptions) => {\n listRef.current.scrollTo(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n requestAnimationFrame(() => {\n listRef.current.scrollTo(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n });\n },\n [correctOptions],\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 menuState,\n referenceElement,\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 setReferenceElement,\n setShowPopover,\n internalRef,\n correctOptions,\n instanceUid,\n optionsPerSection,\n }),\n [\n scrollOptionIntoView,\n setMenuState,\n correctOptions,\n hasFocus,\n propsWithDefaults,\n inputValue,\n focusOptionIdx,\n wrapperListRef,\n menuState,\n pillGroupRef,\n referenceElement,\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);
|
|
@@ -76,9 +77,10 @@ const Container = () => {
|
|
|
76
77
|
zIndex: correctZIndex,
|
|
77
78
|
customOffset: [0, 5],
|
|
78
79
|
handleCloseMenu,
|
|
79
|
-
portalDOMContainer: document.body
|
|
80
|
+
portalDOMContainer: document.body,
|
|
81
|
+
externallyControlledIsOpen: menuState
|
|
80
82
|
}),
|
|
81
|
-
[startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu]
|
|
83
|
+
[startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState]
|
|
82
84
|
);
|
|
83
85
|
const { refs, floatingStyles, context } = (0, import_ds_floating_context.useFloatingContext)(config);
|
|
84
86
|
const comboboxRef = (0, import_ds_system.mergeRefs)(setReferenceElement, refs.setReference);
|
|
@@ -86,37 +88,31 @@ const Container = () => {
|
|
|
86
88
|
setMenuState(false, "blur");
|
|
87
89
|
}, [setMenuState]);
|
|
88
90
|
(0, import_useClickOutside.useOnClickOutside)(referenceElement, hideTooltip, refs.floating);
|
|
89
|
-
return (
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
) : null
|
|
116
|
-
] })
|
|
117
|
-
]
|
|
118
|
-
}
|
|
119
|
-
) })
|
|
91
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
92
|
+
import_styled.StyledContainer,
|
|
93
|
+
{
|
|
94
|
+
"data-testid": dataTestId ?? import_ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
|
|
95
|
+
innerRef: comboboxRef,
|
|
96
|
+
className,
|
|
97
|
+
applyAriaDisabled,
|
|
98
|
+
...xStyledProps,
|
|
99
|
+
children: [
|
|
100
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveRegion.LiveRegion, {}),
|
|
101
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
|
|
102
|
+
menuState && inline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {}) : null,
|
|
103
|
+
menuState && !inline && referenceElement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
104
|
+
import_ds_floating_context.FloatingWrapper,
|
|
105
|
+
{
|
|
106
|
+
innerRef: refs.setFloating,
|
|
107
|
+
floatingStyles,
|
|
108
|
+
isOpen: menuState,
|
|
109
|
+
context,
|
|
110
|
+
...props.popperProps,
|
|
111
|
+
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, {}) })
|
|
112
|
+
}
|
|
113
|
+
) : null
|
|
114
|
+
]
|
|
115
|
+
}
|
|
120
116
|
);
|
|
121
117
|
};
|
|
122
118
|
//# sourceMappingURL=Container.js.map
|
|
@@ -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;
|
|
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 externallyControlledIsOpen: menuState,\n }),\n [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\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 <StyledContainer\n data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n innerRef={comboboxRef}\n className={className}\n applyAriaDisabled={applyAriaDisabled}\n {...xStyledProps}\n >\n <LiveRegion />\n <Controls />\n\n {menuState && inline ? <MenuList /> : null}\n {menuState && !inline && referenceElement ? (\n <FloatingWrapper\n innerRef={refs.setFloating}\n floatingStyles={floatingStyles}\n isOpen={menuState}\n context={context}\n {...props.popperProps}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n <MenuList />\n </StyledPopperWrapper>\n </FloatingWrapper>\n ) : null}\n </StyledContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyEnB;AAxEJ,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,MAC7B,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,8CAAmB;AAAA,MAC9C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,oDAAC,gCAAW;AAAA,QACZ,4CAAC,4BAAS;AAAA,QAET,aAAa,SAAS,4CAAC,6BAAS,IAAK;AAAA,QACrC,aAAa,CAAC,UAAU,mBACvB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACC,GAAG,MAAM;AAAA,YAEV,sDAAC,qCAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,sDAAC,6BAAS,GACZ;AAAA;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
|
|
6
|
+
"names": ["React", "ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -57,7 +57,7 @@ const Controls = () => {
|
|
|
57
57
|
internalRef
|
|
58
58
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
59
59
|
const handleOnClick = (0, import_react.useCallback)(() => {
|
|
60
|
-
if (disabled
|
|
60
|
+
if (disabled) return;
|
|
61
61
|
if (applyAriaDisabled) {
|
|
62
62
|
internalRef.current?.focus();
|
|
63
63
|
return;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls/Controls.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues, applyAriaDisabled, readOnly },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoGX;AAlGZ,mBAAwD;AACxD,uCAA2C;AAC3C,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAE5B,oBAMO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AAC9B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB,mBAAmB,SAAS;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues, applyAriaDisabled, readOnly },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (applyAriaDisabled) {\n internalRef.current?.focus();\n return;\n }\n if (hasFocus && menuState && !inline) {\n setMenuState(false, 'click');\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true, 'click');\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (applyAriaDisabled) return;\n if (menuState || disabled || readOnly) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [applyAriaDisabled, menuState, disabled, readOnly, internalRef, setMenuState],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '2.231rem'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n innerRef={controlsWrapperRef}\n readOnly={readOnly}\n cols={cols}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n minWidth={inputMinWidth}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n aria-disabled={applyAriaDisabled}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <StyledSingleSelectWraper\n readOnly={readOnly}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n >\n {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n </StyledSingleSelectWraper>\n )}\n </StyledSelection>\n )}\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper\n justifyItems=\"center\"\n cols={['min-content', 'minmax(28px,max-content)']}\n justifyContent=\"flex-end\"\n >\n <StyleHeaderActionsSeparator disabled={disabled} applyAriaDisabled={applyAriaDisabled} readOnly={readOnly} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoGX;AAlGZ,mBAAwD;AACxD,uCAA2C;AAC3C,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAE5B,oBAMO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AAC9B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB,mBAAmB,SAAS;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI,SAAU;AACd,QAAI,mBAAmB;AACrB,kBAAY,SAAS,MAAM;AAC3B;AAAA,IACF;AACA,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,OAAO,OAAO;AAC3B,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,MAAM,OAAO;AAAA,EAG5B,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,kBAAmB;AACvB,UAAI,aAAa,YAAY,UAAU;AACrC,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,MAAM,YAAY;AAAA,MACjC;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,WAAW,UAAU,UAAU,aAAa,YAAY;AAAA,EAC9E;AAGA,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,eAAe,QAAI,kDAAqB;AAEhD,QAAM,WAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,UAAU,IAAI,CAAC,mBAAmB;AAAA,IACrG,CAAC,MAAM;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,iBAAe;AAAA,MACf,eAAa,8CAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,4CAAC,iCAAgB,UAAU,oBAAoB,SAAS,oBACrD,gBAAM,QAAQ,cAAc,IAC3B,4CAAC,uEAA6B,IAE9B;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa,8CAAmB;AAAA,YAChC;AAAA,YACA;AAAA,YAEC,4BAAkB,eAAe,KAAK,4CAAC,+DAA2B,OAAO,eAAe,OAAO,IAAK;AAAA;AAAA,QACvG,GAEJ;AAAA,QAGF,4CAAC,sCAAc;AAAA,QACd,CAAC,UACA;AAAA,UAAC;AAAA;AAAA,YACC,cAAa;AAAA,YACb,MAAM,CAAC,eAAe,0BAA0B;AAAA,YAChD,gBAAe;AAAA,YAEf;AAAA,0DAAC,6CAA4B,UAAoB,mBAAsC,UAAoB;AAAA,cAC3G,4CAAC,8CAAkB;AAAA;AAAA;AAAA,QACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -34,6 +34,9 @@ module.exports = __toCommonJS(MenuList_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
+
var import_ds_fast_list = require("@elliemae/ds-fast-list");
|
|
38
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
39
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
37
40
|
var import_styled = require("./styled.js");
|
|
38
41
|
var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
|
|
39
42
|
var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
|
|
@@ -41,17 +44,19 @@ var import_useItemRenderer = require("./useItemRenderer.js");
|
|
|
41
44
|
var import_LoadingContainer = require("./LoadingContainer.js");
|
|
42
45
|
var import_SkeletonContainer = require("./SkeletonContainer.js");
|
|
43
46
|
var import_useOnElementResize = require("../../utils/useOnElementResize.js");
|
|
47
|
+
const StyledItemsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
48
|
+
max-height: ${({ maxHeight }) => maxHeight ? `${String(maxHeight)}px` : "300px"};
|
|
49
|
+
`;
|
|
50
|
+
const estimatedSize = () => 32;
|
|
44
51
|
const MenuList = () => {
|
|
45
52
|
const {
|
|
46
53
|
props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },
|
|
47
54
|
controlsWrapperRef,
|
|
48
55
|
listRef,
|
|
49
56
|
wrapperListRef,
|
|
50
|
-
virtualListHelpers,
|
|
51
57
|
correctOptions: filteredOptions,
|
|
52
58
|
instanceUid
|
|
53
59
|
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
54
|
-
const ItemRenderer = (0, import_useItemRenderer.useItemRenderer)();
|
|
55
60
|
const { width } = (0, import_useOnElementResize.useOnElementResize)(controlsWrapperRef);
|
|
56
61
|
const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
|
|
57
62
|
e.preventDefault();
|
|
@@ -60,15 +65,17 @@ const MenuList = () => {
|
|
|
60
65
|
if (isSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid });
|
|
61
66
|
if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, {});
|
|
62
67
|
if (filteredOptions && filteredOptions.length > 0 || onCreate) {
|
|
63
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
|
-
|
|
68
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
|
+
import_ds_fast_list.DSFastList,
|
|
65
70
|
{
|
|
66
|
-
"aria-label": "listbox",
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
dsFastlistWrapperList: { role: "listbox", "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST, "aria-label": "listbox" },
|
|
72
|
+
dsFastlistItem: { role: "none" },
|
|
73
|
+
actionRef: listRef,
|
|
74
|
+
count: filteredOptions.length,
|
|
75
|
+
ItemRenderer: import_useItemRenderer.ItemRenderer,
|
|
76
|
+
extraItemProps: { itemList: filteredOptions },
|
|
77
|
+
getId: (index) => filteredOptions[index].dsId,
|
|
78
|
+
estimateSize: estimatedSize
|
|
72
79
|
}
|
|
73
80
|
) });
|
|
74
81
|
}
|
|
@@ -81,22 +88,7 @@ const MenuList = () => {
|
|
|
81
88
|
children: noOptionsMessage
|
|
82
89
|
}
|
|
83
90
|
);
|
|
84
|
-
}, [
|
|
85
|
-
instanceUid,
|
|
86
|
-
isSkeleton,
|
|
87
|
-
isLoading,
|
|
88
|
-
filteredOptions,
|
|
89
|
-
onCreate,
|
|
90
|
-
inline,
|
|
91
|
-
menuMaxHeight,
|
|
92
|
-
listRef,
|
|
93
|
-
virtualListHelpers?.totalSize,
|
|
94
|
-
ItemRenderer,
|
|
95
|
-
noOptionsMessage
|
|
96
|
-
]);
|
|
97
|
-
(0, import_react.useLayoutEffect)(() => {
|
|
98
|
-
virtualListHelpers?.measure();
|
|
99
|
-
}, [width]);
|
|
91
|
+
}, [isSkeleton, instanceUid, isLoading, filteredOptions, onCreate, noOptionsMessage, menuMaxHeight, listRef]);
|
|
100
92
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
101
93
|
import_styled.StyledListWrapper,
|
|
102
94
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo, useCallback,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nconst StyledItemsWrapper = styled(Grid)<{ maxHeight: SizingProps['maxHeight'] }>`\n max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\nexport const MenuList = (): JSX.Element => {\n const {\n props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n controlsWrapperRef,\n listRef,\n wrapperListRef,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n // removing the header list if we are filtering or is inline cb or we have no options to show\n\n const { width } = useOnElementResize(controlsWrapperRef);\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const menuListRender = useMemo(() => {\n if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} />;\n\n if (isLoading) return <LoadingContainer />;\n\n if ((filteredOptions && filteredOptions.length > 0) || onCreate) {\n return (\n <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n <DSFastList\n dsFastlistWrapperList={{ role: 'listbox', 'data-testid': ComboboxDataTestid.LIST, 'aria-label': 'listbox' }}\n dsFastlistItem={{ role: 'none' }}\n actionRef={listRef}\n count={filteredOptions.length}\n ItemRenderer={ItemRenderer}\n extraItemProps={{ itemList: filteredOptions }}\n getId={(index: number) => filteredOptions[index].dsId}\n estimateSize={estimatedSize}\n />\n </StyledItemsWrapper>\n );\n }\n\n return (\n <StyledNoResultsWrapper\n id={`combo-listbox-${instanceUid}`}\n data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n role=\"alert\"\n >\n {noOptionsMessage}\n </StyledNoResultsWrapper>\n );\n }, [isSkeleton, instanceUid, isLoading, filteredOptions, onCreate, noOptionsMessage, menuMaxHeight, listRef]);\n\n return (\n <StyledListWrapper\n innerRef={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n >\n {menuListRender}\n </StyledListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCI;AAnC3B,mBAAwD;AACxD,0BAA2B;AAC3B,uBAAyC;AACzC,qBAAqB;AACrB,oBAA0D;AAC1D,iCAAmC;AACnC,yBAAgC;AAChC,6BAA6B;AAC7B,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AAEnC,MAAM,yBAAqB,yBAAO,mBAAI;AAAA,gBACtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AACrB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAI9B,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B;AAEpE,QAAI,UAAW,QAAO,4CAAC,4CAAiB;AAExC,QAAK,mBAAmB,gBAAgB,SAAS,KAAM,UAAU;AAC/D,aACE,4CAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,QAAC;AAAA;AAAA,UACC,uBAAuB,EAAE,MAAM,WAAW,eAAe,8CAAmB,MAAM,cAAc,UAAU;AAAA,UAC1G,gBAAgB,EAAE,MAAM,OAAO;AAAA,UAC/B,WAAW;AAAA,UACX,OAAO,gBAAgB;AAAA,UACvB,cAAc;AAAA,UACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,UAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,UACjD,cAAc;AAAA;AAAA,MAChB,GACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ,GAAG,CAAC,YAAY,aAAa,WAAW,iBAAiB,UAAU,kBAAkB,eAAe,OAAO,CAAC;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,31 +30,19 @@ var styled_exports = {};
|
|
|
30
30
|
__export(styled_exports, {
|
|
31
31
|
StyledCreatableLabel: () => StyledCreatableLabel,
|
|
32
32
|
StyledCreatableValue: () => StyledCreatableValue,
|
|
33
|
-
StyledList: () => StyledList,
|
|
34
33
|
StyledListWrapper: () => StyledListWrapper,
|
|
35
|
-
StyledNoResultsWrapper: () => StyledNoResultsWrapper
|
|
36
|
-
StyledVirtualListWrapper: () => StyledVirtualListWrapper
|
|
34
|
+
StyledNoResultsWrapper: () => StyledNoResultsWrapper
|
|
37
35
|
});
|
|
38
36
|
module.exports = __toCommonJS(styled_exports);
|
|
39
37
|
var React = __toESM(require("react"));
|
|
40
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
41
|
-
|
|
39
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
40
|
+
const StyledListWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
42
41
|
min-width: ${({ inline, minWidth }) => inline ? "100%" : `${String(minWidth)}px`};
|
|
43
42
|
width: ${({ width }) => `${width}px`};
|
|
44
43
|
background-color: #ffffff;
|
|
45
|
-
max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};
|
|
46
44
|
z-index: 100;
|
|
47
45
|
`;
|
|
48
|
-
const StyledList = import_ds_system.styled.ul`
|
|
49
|
-
position: relative;
|
|
50
|
-
padding: 0;
|
|
51
|
-
background-color: #ffffff;
|
|
52
|
-
overflow: hidden;
|
|
53
|
-
`;
|
|
54
|
-
const StyledVirtualListWrapper = import_ds_system.styled.div`
|
|
55
|
-
overflow-y: auto;
|
|
56
|
-
max-height: ${({ maxHeight }) => maxHeight ? `${String(maxHeight)}px` : "300px"};
|
|
57
|
-
`;
|
|
58
46
|
const StyledCreatableLabel = import_ds_system.styled.span`
|
|
59
47
|
font-weight: bold;
|
|
60
48
|
font-style: italic;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\n\ninterface StyledListWrapperT {\n minWidth: SizingProps['minWidth'];\n maxHeight?: SizingProps['maxHeight'];\n width: number | string;\n inline?: boolean;\n}\nexport const StyledListWrapper = styled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\ninterface StyledListWrapperT {\n minWidth: SizingProps['minWidth'];\n maxHeight?: SizingProps['maxHeight'];\n width: number | string;\n inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid)<StyledListWrapperT>`\n min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n width: ${({ width }) => `${width}px`};\n background-color: #ffffff;\n z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled.span`\n font-weight: bold;\n font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n padding: 16px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEvB,qBAAqB;AAQd,MAAM,wBAAoB,yBAAO,mBAAI;AAAA,eAC7B,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA;AAAA;AAK/B,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|