@elliemae/ds-form-combobox 3.9.1-rc.1 → 3.9.1-rc.10
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 +2 -1
- package/dist/cjs/ComboBoxCTX.js.map +2 -2
- package/dist/cjs/config/useComboBox.js +6 -7
- package/dist/cjs/config/useComboBox.js.map +2 -2
- package/dist/cjs/parts/container/Container.js +5 -5
- package/dist/cjs/parts/container/Container.js.map +2 -2
- package/dist/cjs/parts/controls/Controls.js +10 -9
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/controls/useOnPillsNavigation.js +4 -10
- package/dist/cjs/parts/controls/useOnPillsNavigation.js.map +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js +14 -4
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/cjs/parts/header-list/useHeaderListHandlers.js +8 -7
- package/dist/cjs/parts/header-list/useHeaderListHandlers.js.map +2 -2
- package/dist/cjs/parts/menu-list/useItemRenderer.js +5 -5
- package/dist/cjs/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js +3 -2
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +2 -2
- package/dist/esm/ComboBoxCTX.js +2 -1
- package/dist/esm/ComboBoxCTX.js.map +2 -2
- package/dist/esm/config/useComboBox.js +6 -7
- package/dist/esm/config/useComboBox.js.map +2 -2
- package/dist/esm/parts/container/Container.js +5 -5
- package/dist/esm/parts/container/Container.js.map +2 -2
- package/dist/esm/parts/controls/Controls.js +10 -9
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/controls/useOnPillsNavigation.js +4 -10
- package/dist/esm/parts/controls/useOnPillsNavigation.js.map +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js +15 -5
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/parts/header-list/useHeaderListHandlers.js +8 -7
- package/dist/esm/parts/header-list/useHeaderListHandlers.js.map +2 -2
- package/dist/esm/parts/menu-list/useItemRenderer.js +1 -1
- package/dist/esm/parts/menu-list/useItemRenderer.js.map +1 -1
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js +3 -2
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +2 -2
- package/dist/esm/sharedTypes.js.map +2 -2
- package/package.json +12 -12
package/dist/cjs/ComboBoxCTX.js
CHANGED
|
@@ -69,7 +69,8 @@ const defaultContext = {
|
|
|
69
69
|
setReferenceElement: noop,
|
|
70
70
|
setFocusOptionIdx: noop,
|
|
71
71
|
setShowSelectedOptions: noop,
|
|
72
|
-
setMenuState: noop
|
|
72
|
+
setMenuState: noop,
|
|
73
|
+
internalRef: (0, import_react.createRef)()
|
|
73
74
|
};
|
|
74
75
|
const ComboBoxContext = (0, import_react.createContext)(defaultContext);
|
|
75
76
|
var ComboBoxCTX_default = ComboBoxContext;
|
|
@@ -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 { DSComboboxT } from './react-desc-prop-types';\nimport { DSComboboxInternalsT } from './sharedTypes';\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 // override in useCombobox to avoid ref duplications when more than one cb is used\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n props: defaultProps as DSComboboxT.InternalProps,\n menuState: false,\n hasFocus: false,\n referenceElement: null,\n inputValue: '',\n focusOptionIdx: '',\n showSelectedOptions: false,\n pillGroupRef: createRef<HTMLDivElement>(),\n listRef: createRef<HTMLDivElement>(),\n wrapperListRef: createRef<HTMLDivElement>(),\n controlsWrapperRef: createRef<HTMLInputElement>(),\n selectedOptionsRef: createRef<HTMLInputElement>(),\n selectAllCheckboxRef: createRef<HTMLInputElement>(),\n toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n setShowPopover: noop,\n scrollOptionIntoView: noop,\n setHasFocus: noop,\n setInputValue: noop,\n setReferenceElement: noop,\n setFocusOptionIdx: noop,\n setShowSelectedOptions: noop,\n setMenuState: noop,\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;AAElB;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,kBAAc,wBAA0B;AAAA,EACxC,aAAS,wBAA0B;AAAA,EACnC,oBAAgB,wBAA0B;AAAA,EAC1C,wBAAoB,wBAA4B;AAAA,EAChD,wBAAoB,wBAA4B;AAAA,EAChD,0BAAsB,wBAA4B;AAAA,EAClD,8BAA0B,wBAA6B;AAAA,EACvD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,cAAc;
|
|
4
|
+
"sourcesContent": ["import { createContext, createRef } from 'react';\nimport { DSComboboxT } from './react-desc-prop-types';\nimport { DSComboboxInternalsT } from './sharedTypes';\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 // override in useCombobox to avoid ref duplications when more than one cb is used\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n props: defaultProps as DSComboboxT.InternalProps,\n menuState: false,\n hasFocus: false,\n referenceElement: null,\n inputValue: '',\n focusOptionIdx: '',\n showSelectedOptions: false,\n pillGroupRef: createRef<HTMLDivElement>(),\n listRef: createRef<HTMLDivElement>(),\n wrapperListRef: createRef<HTMLDivElement>(),\n controlsWrapperRef: createRef<HTMLInputElement>(),\n selectedOptionsRef: createRef<HTMLInputElement>(),\n selectAllCheckboxRef: createRef<HTMLInputElement>(),\n toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n setShowPopover: noop,\n scrollOptionIntoView: noop,\n setHasFocus: noop,\n setInputValue: noop,\n setReferenceElement: noop,\n setFocusOptionIdx: noop,\n setShowSelectedOptions: noop,\n setMenuState: noop,\n internalRef: createRef<HTMLInputElement>(),\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;AAElB;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,kBAAc,wBAA0B;AAAA,EACxC,aAAS,wBAA0B;AAAA,EACnC,oBAAgB,wBAA0B;AAAA,EAC1C,wBAAoB,wBAA4B;AAAA,EAChD,wBAAoB,wBAA4B;AAAA,EAChD,0BAAsB,wBAA4B;AAAA,EAClD,8BAA0B,wBAA6B;AAAA,EACvD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,cAAc;AAAA,EACd,iBAAa,wBAA4B;AAC3C;AAEO,MAAM,sBAAkB,4BAAc,cAAc;AAE3D,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,17 +36,14 @@ var import_react_desc_prop_types = require("../react-desc-prop-types");
|
|
|
36
36
|
var import_useCorrectOptions = require("./useCorrectOptions");
|
|
37
37
|
var import_listHelper = require("../utils/listHelper");
|
|
38
38
|
const useComboBox = (props) => {
|
|
39
|
-
const
|
|
40
|
-
...import_ComboBoxCTX.defaultProps,
|
|
41
|
-
innerRef: (0, import_react.useRef)(null)
|
|
42
|
-
};
|
|
43
|
-
const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, defaultPropsWithInnerRef);
|
|
39
|
+
const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_ComboBoxCTX.defaultProps);
|
|
44
40
|
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.ComboboxPropTypes);
|
|
45
41
|
const [showPopover, setShowPopover] = (0, import_react.useState)(false);
|
|
46
42
|
const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
|
|
47
43
|
const [showSelectedOptions, setShowSelectedOptions] = (0, import_react.useState)(false);
|
|
48
44
|
const [inputValue, setInputValue] = (0, import_react.useState)("");
|
|
49
45
|
const [hasFocus, setHasFocus] = (0, import_react.useState)(false);
|
|
46
|
+
const internalRef = (0, import_react.useRef)(null);
|
|
50
47
|
const listRef = (0, import_react.useRef)(null);
|
|
51
48
|
const wrapperListRef = (0, import_react.useRef)(null);
|
|
52
49
|
const selectedOptionsRef = (0, import_react.useRef)(null);
|
|
@@ -127,7 +124,8 @@ const useComboBox = (props) => {
|
|
|
127
124
|
setFocusOptionIdx,
|
|
128
125
|
scrollOptionIntoView,
|
|
129
126
|
setReferenceElement,
|
|
130
|
-
setShowPopover
|
|
127
|
+
setShowPopover,
|
|
128
|
+
internalRef
|
|
131
129
|
}),
|
|
132
130
|
[
|
|
133
131
|
scrollOptionIntoView,
|
|
@@ -147,7 +145,8 @@ const useComboBox = (props) => {
|
|
|
147
145
|
controlsWrapperRef,
|
|
148
146
|
selectAllCheckboxRef,
|
|
149
147
|
toggleSelectionButtonRef,
|
|
150
|
-
listRef
|
|
148
|
+
listRef,
|
|
149
|
+
internalRef
|
|
151
150
|
]
|
|
152
151
|
);
|
|
153
152
|
return ctx;
|
|
@@ -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 } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../ComboBoxCTX';\nimport { DSComboboxT, ComboboxPropTypes } from '../react-desc-prop-types';\nimport { DSComboboxInternalsT } from '../sharedTypes';\nimport { useCorrectOptions } from './useCorrectOptions';\nimport { getFirstOption } from '../utils/listHelper';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkE;AAClE,2BAA2B;AAC3B,0BAA6E;AAC7E,yBAA6B;AAC7B,mCAA+C;AAE/C,+BAAkC;AAClC,wBAA+B;AACxB,MAAM,cAAc,CAAC,UAAoE;AAC9F,QAAM,
|
|
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 } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../ComboBoxCTX';\nimport { DSComboboxT, ComboboxPropTypes } from '../react-desc-prop-types';\nimport { DSComboboxInternalsT } from '../sharedTypes';\nimport { useCorrectOptions } from './useCorrectOptions';\nimport { getFirstOption } from '../utils/listHelper';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\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 selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n const pillGroupRef = useRef<HTMLDivElement>(null);\n\n const { selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n const menuState = useMemo(() => {\n if (isMenuOpen !== undefined) return isMenuOpen;\n return showPopover;\n }, [showPopover, isMenuOpen]);\n\n const setMenuState = useCallback(\n (\n newState: boolean,\n reason: string,\n e: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n setShowPopover(newState);\n },\n [onMenuChange],\n );\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\n\n // ===========================================================================\n // Virtualization setup\n // ===========================================================================\n\n const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n size: correctOptions.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 = { align: 'center' }) => {\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n opts,\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 useEffect(() => {\n // this code calculate the option to be focused when opening the menu\n // when losing focus we remove the focused one\n // when focus adquired again getFirstOption calculate the correct one\n if (!hasFocus) setFocusOptionIdx('');\n if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n const focusedValue = getFirstOption(correctOptions, selectedValues);\n setFocusOptionIdx(focusedValue);\n scrollOptionIntoView(focusedValue, { align: 'center' });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n // focus first option when typing\n useEffect(() => {\n setFocusOptionIdx(correctOptions?.[0]?.dsId ?? '');\n }, [correctOptions, inputValue]);\n\n useEffect(() => {\n if (!showPopover) {\n setFocusOptionIdx('');\n setShowSelectedOptions(false);\n }\n }, [showPopover]);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefaults, filteredOptions: correctOptions },\n virtualListHelpers,\n menuState,\n referenceElement,\n listRef,\n focusOptionIdx,\n selectedOptionsRef,\n controlsWrapperRef,\n selectAllCheckboxRef,\n inputValue,\n setInputValue,\n setMenuState,\n hasFocus,\n toggleSelectionButtonRef,\n pillGroupRef,\n showSelectedOptions,\n wrapperListRef,\n setShowSelectedOptions,\n setHasFocus,\n setFocusOptionIdx,\n scrollOptionIntoView,\n setReferenceElement,\n setShowPopover,\n internalRef,\n }),\n [\n scrollOptionIntoView,\n setMenuState,\n correctOptions,\n hasFocus,\n propsWithDefaults,\n virtualListHelpers,\n inputValue,\n focusOptionIdx,\n wrapperListRef,\n showSelectedOptions,\n menuState,\n pillGroupRef,\n referenceElement,\n selectedOptionsRef,\n controlsWrapperRef,\n selectAllCheckboxRef,\n toggleSelectionButtonRef,\n listRef,\n internalRef,\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
|
}
|
|
@@ -38,8 +38,8 @@ var import_controls = require("../controls");
|
|
|
38
38
|
var import_menu_list = require("../menu-list");
|
|
39
39
|
var import_ComboboxDataTestids = require("../../ComboboxDataTestids");
|
|
40
40
|
const Container = () => {
|
|
41
|
-
const { props, setMenuState, menuState, setReferenceElement, referenceElement } = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
42
|
-
const { inline,
|
|
41
|
+
const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
42
|
+
const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;
|
|
43
43
|
const globalAttributes = (0, import_ds_utilities.useGetGlobalAttributes)(props);
|
|
44
44
|
const xStyledProps = (0, import_ds_utilities.useGetXstyledProps)(props);
|
|
45
45
|
const { className, "data-testid": dataTestId, ...containerGlobals } = globalAttributes;
|
|
@@ -48,9 +48,9 @@ const Container = () => {
|
|
|
48
48
|
}, []);
|
|
49
49
|
const handleCloseMenu = (0, import_react.useCallback)(() => {
|
|
50
50
|
setMenuState(false, "blur");
|
|
51
|
-
if (
|
|
52
|
-
|
|
53
|
-
}, [
|
|
51
|
+
if (internalRef?.current)
|
|
52
|
+
internalRef.current.blur();
|
|
53
|
+
}, [internalRef, setMenuState]);
|
|
54
54
|
(0, import_react.useEffect)(() => {
|
|
55
55
|
const closeMenuOnWindowBlur = () => {
|
|
56
56
|
setMenuState(false, "blur");
|
|
@@ -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, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n const { props, setMenuState, menuState, setReferenceElement, referenceElement }
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAmE;AACnE,0BAA2D;AAC3D,yBAA2B;AAC3B,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AAE5B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,cAAc,WAAW,qBAAqB,iBAAiB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } =\n useContext(ComboBoxContext);\n\n const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n const globalAttributes = useGetGlobalAttributes(props);\n const xStyledProps = useGetXstyledProps(props);\n // Removing possible collisionable props\n const { className, 'data-testid': dataTestId, ...containerGlobals } = 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 setMenuState(false, 'blur');\n };\n\n window.addEventListener('blur', closeMenuOnWindowBlur);\n\n return () => {\n window.removeEventListener('blur', closeMenuOnWindowBlur);\n };\n }, [setMenuState]);\n\n return useMemo(\n () => (\n <StyledContainer\n data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n ref={setReferenceElement}\n className={className}\n {...xStyledProps}\n >\n {inline ? (\n <>\n <Controls />\n <MenuList />\n </>\n ) : (\n <>\n <Controls />\n <DSPopperJS\n customOffset={[0, 5]}\n referenceElement={referenceElement}\n showPopover={menuState}\n closeContextMenu={handleCloseMenu}\n startPlacementPreference={startPlacementPreference}\n placementOrderPreference={placementOrderPreference}\n withoutPortal={withoutPortal}\n withoutArrow\n withoutAnimation\n zIndex={zIndex}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n <MenuList />\n </StyledPopperWrapper>\n </DSPopperJS>\n </>\n )}\n </StyledContainer>\n ),\n [\n inline,\n setReferenceElement,\n containerGlobals,\n referenceElement,\n menuState,\n xStyledProps,\n handleCloseMenu,\n startPlacementPreference,\n placementOrderPreference,\n withoutPortal,\n zIndex,\n handleMouseDown,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAmE;AACnE,0BAA2D;AAC3D,yBAA2B;AAC3B,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AAE5B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,QACzF,yBAAW,mBAAAA,OAAe;AAE5B,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,eAAe,OAAO,IAAI;AAC9F,QAAM,uBAAmB,4CAAuB,KAAK;AACrD,QAAM,mBAAe,wCAAmB,KAAK;AAE7C,QAAM,EAAE,WAAW,eAAe,eAAe,iBAAiB,IAAI;AACtE,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;AAAS,kBAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,8BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,mBAAa,OAAO,MAAM;AAAA,IAC5B;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MACC,eAAa,cAAc,8CAAmB;AAAA,MAC9C,KAAK;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,mBACC;AAAA,QACE;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC,6BAAS;AAAA;AAAA,OACZ,IAEA;AAAA,QACE;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB;AAAA,YAEA,sDAAC;AAAA,cAAoB,UAAU;AAAA,cAAI,aAAa;AAAA,cAC9C,sDAAC,6BAAS;AAAA,aACZ;AAAA,WACF;AAAA;AAAA,OACF;AAAA,KAEJ;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -42,7 +42,7 @@ var import_A11ySelectedValues = require("../A11ySelectedValues");
|
|
|
42
42
|
var import_RemovableSelectedValuePill = require("../multi-selected-values-container/RemovableSelectedValuePill");
|
|
43
43
|
const Controls = () => {
|
|
44
44
|
const {
|
|
45
|
-
props: { inline, disabled, inputMinWidth, hasError, selectedValues
|
|
45
|
+
props: { inline, disabled, inputMinWidth, hasError, selectedValues },
|
|
46
46
|
selectedOptionsRef,
|
|
47
47
|
setMenuState,
|
|
48
48
|
setFocusOptionIdx,
|
|
@@ -50,7 +50,8 @@ const Controls = () => {
|
|
|
50
50
|
listRef,
|
|
51
51
|
focusOptionIdx,
|
|
52
52
|
menuState,
|
|
53
|
-
controlsWrapperRef
|
|
53
|
+
controlsWrapperRef,
|
|
54
|
+
internalRef
|
|
54
55
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
55
56
|
const handleOnClick = (0, import_react.useCallback)(() => {
|
|
56
57
|
if (disabled)
|
|
@@ -58,30 +59,30 @@ const Controls = () => {
|
|
|
58
59
|
if (hasFocus && menuState && !inline) {
|
|
59
60
|
setMenuState(false);
|
|
60
61
|
setFocusOptionIdx("");
|
|
61
|
-
|
|
62
|
+
internalRef.current?.blur();
|
|
62
63
|
return;
|
|
63
64
|
}
|
|
64
|
-
|
|
65
|
+
internalRef.current?.focus();
|
|
65
66
|
setMenuState(true);
|
|
66
|
-
}, [disabled, listRef, hasFocus, menuState, inline,
|
|
67
|
+
}, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);
|
|
67
68
|
const handleOnPillsClick = (0, import_react.useCallback)(
|
|
68
69
|
(e) => {
|
|
69
70
|
if (menuState || disabled) {
|
|
70
71
|
e.stopPropagation();
|
|
71
72
|
} else {
|
|
72
|
-
|
|
73
|
+
internalRef.current?.focus();
|
|
73
74
|
setMenuState(true);
|
|
74
75
|
}
|
|
75
76
|
},
|
|
76
|
-
[menuState,
|
|
77
|
+
[menuState, internalRef, disabled, setMenuState]
|
|
77
78
|
);
|
|
78
79
|
const handleOnMouseDown = (0, import_react.useCallback)(
|
|
79
80
|
(e) => {
|
|
80
|
-
if (document.activeElement ===
|
|
81
|
+
if (document.activeElement === internalRef.current || inline) {
|
|
81
82
|
e.preventDefault();
|
|
82
83
|
}
|
|
83
84
|
},
|
|
84
|
-
[
|
|
85
|
+
[internalRef, inline]
|
|
85
86
|
);
|
|
86
87
|
const { onKeyDownPills } = (0, import_useOnPillsNavigation.useOnPillsNavigation)();
|
|
87
88
|
const cols = (0, import_react.useMemo)(
|
|
@@ -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 { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,+BAAkC;AAClC,gCAAmC;AACnC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false);\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true);\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 (menuState || disabled) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true);\n }\n },\n [menuState, internalRef, disabled, 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)', '29px'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n ref={controlsWrapperRef}\n cols={cols}\n disabled={disabled}\n minWidth={inputMinWidth}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n {hasFocus && <A11ySelectedValues />}\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n </div>\n )}\n </StyledSelection>\n )}\n <A11yFocusedOption />\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n <StyleHeaderActionsSeparator disabled={disabled} />\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;ADAvB;AAEA,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,+BAAkC;AAClC,gCAAmC;AACnC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;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;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;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,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE,6CAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,8CAAmB;AAAA,IAE/B;AAAA,OAAC,UACA,6CAAC;AAAA,QAAgB,KAAK;AAAA,QAAoB,SAAS;AAAA,QAChD;AAAA,sBAAY,4CAAC,gDAAmB;AAAA,UAChC,MAAM,QAAQ,cAAc,IAC3B,4CAAC,uEAA6B,IAE9B,4CAAC;AAAA,YAAI,eAAa,8CAAmB;AAAA,YAClC,4BAAkB,4CAAC;AAAA,cAA2B,MAAM;AAAA,aAAgB;AAAA,WACvE;AAAA;AAAA,OAEJ;AAAA,MAEF,4CAAC,8CAAkB;AAAA,MAEnB,4CAAC,sCAAc;AAAA,MACd,CAAC,UACA,6CAAC;AAAA,QAA2B,gBAAe;AAAA,QAAS,MAAM,CAAC,eAAe,aAAa;AAAA,QACrF;AAAA,sDAAC;AAAA,YAA4B;AAAA,WAAoB;AAAA,UACjD,4CAAC,8CAAkB;AAAA;AAAA,OACrB;AAAA;AAAA,GAEJ;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -31,19 +31,13 @@ var React = __toESM(require("react"));
|
|
|
31
31
|
var import_react = require("react");
|
|
32
32
|
var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
|
|
33
33
|
const useOnPillsNavigation = () => {
|
|
34
|
-
const {
|
|
35
|
-
props: { innerRef },
|
|
36
|
-
inputValue,
|
|
37
|
-
hasFocus,
|
|
38
|
-
setMenuState,
|
|
39
|
-
selectedOptionsRef
|
|
40
|
-
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
34
|
+
const { internalRef, inputValue, hasFocus, setMenuState, selectedOptionsRef } = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
41
35
|
const REMOVABLE_PILL_SELECTOR = ".ds-pill-wrapper-removable button";
|
|
42
36
|
const onKeyDownPills = (0, import_react.useCallback)(
|
|
43
37
|
(e) => {
|
|
44
38
|
if ((e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") && inputValue === "") {
|
|
45
39
|
if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
|
46
|
-
|
|
40
|
+
internalRef.current?.focus();
|
|
47
41
|
setMenuState(true, "open", e);
|
|
48
42
|
return;
|
|
49
43
|
}
|
|
@@ -55,11 +49,11 @@ const useOnPillsNavigation = () => {
|
|
|
55
49
|
}
|
|
56
50
|
if (e.key === "ArrowRight") {
|
|
57
51
|
e.preventDefault();
|
|
58
|
-
|
|
52
|
+
internalRef.current?.focus();
|
|
59
53
|
}
|
|
60
54
|
}
|
|
61
55
|
},
|
|
62
|
-
[inputValue,
|
|
56
|
+
[inputValue, internalRef, setMenuState, selectedOptionsRef, hasFocus]
|
|
63
57
|
);
|
|
64
58
|
return { onKeyDownPills };
|
|
65
59
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls/useOnPillsNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nexport const useOnPillsNavigation = () => {\n const {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAA+C;AAC/C,yBAA4B;AAErB,MAAM,uBAAuB,MAAM;AACxC,QAAM
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nexport const useOnPillsNavigation = () => {\n const { internalRef, inputValue, hasFocus, setMenuState, selectedOptionsRef } = useContext(ComboBoxContext);\n\n // todo: constant must be defined on pills component\n const REMOVABLE_PILL_SELECTOR = '.ds-pill-wrapper-removable button';\n\n const onKeyDownPills: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n if (\n (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') &&\n inputValue === ''\n ) {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n internalRef.current?.focus();\n setMenuState(true, 'open', e);\n return;\n }\n if (e.key === 'ArrowLeft') {\n const removablePills: NodeListOf<HTMLButtonElement> | undefined =\n selectedOptionsRef.current?.querySelectorAll(REMOVABLE_PILL_SELECTOR);\n\n if (hasFocus && removablePills) {\n removablePills[removablePills.length - 1]?.focus();\n }\n }\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n internalRef.current?.focus();\n }\n }\n },\n [inputValue, internalRef, setMenuState, selectedOptionsRef, hasFocus],\n );\n\n return { onKeyDownPills };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAA+C;AAC/C,yBAA4B;AAErB,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,aAAa,YAAY,UAAU,cAAc,mBAAmB,QAAI,yBAAW,mBAAAA,OAAe;AAG1G,QAAM,0BAA0B;AAEhC,QAAM,qBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,WACG,EAAE,QAAQ,eAAe,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa,EAAE,QAAQ,gBACrF,eAAe,IACf;AACA,YAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AAChD,sBAAY,SAAS,MAAM;AAC3B,uBAAa,MAAM,QAAQ,CAAC;AAC5B;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,aAAa;AACzB,gBAAM,iBACJ,mBAAmB,SAAS,iBAAiB,uBAAuB;AAEtE,cAAI,YAAY,gBAAgB;AAC9B,2BAAe,eAAe,SAAS,IAAI,MAAM;AAAA,UACnD;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,cAAc;AAC1B,YAAE,eAAe;AACjB,sBAAY,SAAS,MAAM;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY,aAAa,cAAc,oBAAoB,QAAQ;AAAA,EACtE;AAEA,SAAO,EAAE,eAAe;AAC1B;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -41,12 +41,22 @@ const ControlsInput = () => {
|
|
|
41
41
|
const {
|
|
42
42
|
props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },
|
|
43
43
|
focusOptionIdx,
|
|
44
|
+
internalRef,
|
|
44
45
|
inputValue,
|
|
45
46
|
menuState
|
|
46
47
|
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
47
48
|
const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
|
|
48
49
|
const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = (0, import_useControlsInput.useControlsInput)();
|
|
49
|
-
const {
|
|
50
|
+
const {
|
|
51
|
+
className,
|
|
52
|
+
tabIndex,
|
|
53
|
+
"data-testid": dataTestId,
|
|
54
|
+
id,
|
|
55
|
+
...globalAttrs
|
|
56
|
+
} = (0, import_ds_utilities.useGetGlobalAttributes)(restProps, {
|
|
57
|
+
onFocus: handleOnFocus,
|
|
58
|
+
onBlur: handleOnBlur
|
|
59
|
+
});
|
|
50
60
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledInputWrapper, {
|
|
51
61
|
children: [
|
|
52
62
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInputWidthReference, {
|
|
@@ -59,6 +69,8 @@ const ControlsInput = () => {
|
|
|
59
69
|
})
|
|
60
70
|
}),
|
|
61
71
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInput, {
|
|
72
|
+
onBlur: handleOnBlur,
|
|
73
|
+
onFocus: handleOnFocus,
|
|
62
74
|
...globalAttrs,
|
|
63
75
|
id,
|
|
64
76
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.INPUT,
|
|
@@ -72,13 +84,11 @@ const ControlsInput = () => {
|
|
|
72
84
|
role: "combobox",
|
|
73
85
|
disabled,
|
|
74
86
|
style: { width },
|
|
75
|
-
ref: innerRef,
|
|
87
|
+
ref: (0, import_ds_utilities.mergeRefs)(innerRef, internalRef),
|
|
76
88
|
value: inputValue,
|
|
77
89
|
type: "text",
|
|
78
90
|
onKeyDown: onInputKeyDown,
|
|
79
91
|
onChange: handleOnChange,
|
|
80
|
-
onBlur: handleOnBlur,
|
|
81
|
-
onFocus: handleOnFocus,
|
|
82
92
|
tabIndex,
|
|
83
93
|
withoutCaret: onlySelectable
|
|
84
94
|
})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/ControlsInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },\n focusOptionIdx,\n inputValue,\n menuState,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useGetGlobalAttributes, mergeRefs } from '@elliemae/ds-utilities';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },\n focusOptionIdx,\n internalRef,\n inputValue,\n menuState,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const {\n className,\n tabIndex,\n 'data-testid': dataTestId,\n id,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n return (\n <StyledInputWrapper>\n <StyledInputWidthReference ref={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder>\n <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n </StyledInputPlaceHolder>\n )}\n\n <StyledInput\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n {...globalAttrs}\n id={id}\n data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={showPlaceholder ? placeholder : ''}\n aria-controls=\"combo-listbox\"\n aria-activedescendant={focusOptionIdx}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-describedby={`combobox-selected-items ${id !== undefined ? `${id}_feedback_message` : ''}`}\n role=\"combobox\"\n disabled={disabled}\n style={{ width }}\n ref={mergeRefs(innerRef, internalRef)}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n tabIndex={tabIndex}\n withoutCaret={onlySelectable}\n />\n </StyledInputWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+C;AAC/C,uCAA2C;AAC3C,0BAAkD;AAElD,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,OACG;AAAA,EACL,QAAI,4CAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,SACE,6CAAC;AAAA,IACC;AAAA,kDAAC;AAAA,QAA0B,KAAK;AAAA,QAAgB;AAAA,OAAkB;AAAA,MACjE,mBACC,4CAAC;AAAA,QACC,sDAAC;AAAA,UAA2B,OAAO;AAAA,SAAiB;AAAA,OACtD;AAAA,MAGF,4CAAC;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,8CAAmB;AAAA,QAChC;AAAA,QACA,aAAa,kBAAkB,cAAc;AAAA,QAC7C,iBAAc;AAAA,QACd,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB,2BAA2B,OAAO,SAAY,GAAG,wBAAwB;AAAA,QAC3F,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,SAAK,+BAAU,UAAU,WAAW;AAAA,QACpC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,OAChB;AAAA;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,8 +33,9 @@ var import_listHelper = require("../../utils/listHelper");
|
|
|
33
33
|
var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
|
|
34
34
|
const useHeaderListHandlers = () => {
|
|
35
35
|
const {
|
|
36
|
-
props: { selectedValues, filteredOptions, onSelectAll
|
|
36
|
+
props: { selectedValues, filteredOptions, onSelectAll },
|
|
37
37
|
showSelectedOptions,
|
|
38
|
+
internalRef,
|
|
38
39
|
setShowSelectedOptions,
|
|
39
40
|
setMenuState
|
|
40
41
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
@@ -82,28 +83,28 @@ const useHeaderListHandlers = () => {
|
|
|
82
83
|
(e) => {
|
|
83
84
|
if (e.key === "Escape") {
|
|
84
85
|
setMenuState(false, "close", e);
|
|
85
|
-
|
|
86
|
+
internalRef.current?.focus();
|
|
86
87
|
}
|
|
87
88
|
},
|
|
88
|
-
[setMenuState,
|
|
89
|
+
[setMenuState, internalRef]
|
|
89
90
|
);
|
|
90
91
|
const handleFilterSelectionBtnOnTab = (0, import_react.useCallback)(
|
|
91
92
|
(e) => {
|
|
92
93
|
if (e.key === "Tab" && !e.shiftKey) {
|
|
93
94
|
e.preventDefault();
|
|
94
|
-
|
|
95
|
+
internalRef.current?.focus();
|
|
95
96
|
}
|
|
96
97
|
},
|
|
97
|
-
[
|
|
98
|
+
[internalRef]
|
|
98
99
|
);
|
|
99
100
|
const handleCheckAllOnTab = (0, import_react.useCallback)(
|
|
100
101
|
(e) => {
|
|
101
102
|
if (e.key === "Tab" && !e.shiftKey && multiSelectedValues.length === 0) {
|
|
102
103
|
e.preventDefault();
|
|
103
|
-
|
|
104
|
+
internalRef.current?.focus();
|
|
104
105
|
}
|
|
105
106
|
},
|
|
106
|
-
[
|
|
107
|
+
[internalRef, multiSelectedValues]
|
|
107
108
|
);
|
|
108
109
|
(0, import_react.useEffect)(() => {
|
|
109
110
|
if (multiSelectedValues.length === 0) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/header-list/useHeaderListHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSelectableOptions } from '../../utils/listHelper';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nconst useHeaderListHandlers = () => {\n const {\n props: { selectedValues, filteredOptions, onSelectAll
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6E;AAE7E,wBAAqC;AACrC,yBAA4B;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSelectableOptions } from '../../utils/listHelper';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nconst useHeaderListHandlers = () => {\n const {\n props: { selectedValues, filteredOptions, onSelectAll },\n showSelectedOptions,\n internalRef,\n setShowSelectedOptions,\n setMenuState,\n } = useContext(ComboBoxContext);\n\n const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n const selectableOptions = getSelectableOptions(filteredOptions);\n\n const getCheckboxStatus = useMemo(() => {\n if (multiSelectedValues.length === selectableOptions.length) {\n return true;\n }\n if (multiSelectedValues?.length === 0) {\n return false;\n }\n return 'mixed';\n }, [multiSelectedValues.length, selectableOptions.length]);\n\n const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n useEffect(() => {\n setCheckboxStatus(getCheckboxStatus);\n }, [getCheckboxStatus, multiSelectedValues]);\n\n const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n // this prevent the input control to lose focus\n }, []);\n\n const handleSelectAllCheckboxChange = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n onSelectAll(\n filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n e,\n );\n setCheckboxStatus(true);\n } else if (onSelectAll) {\n onSelectAll([], e);\n setCheckboxStatus(false);\n }\n },\n [checkboxStatus, onSelectAll, filteredOptions],\n );\n\n const handleToggleSelectedValuesFilter: React.MouseEventHandler = useCallback(\n (e) => {\n e.preventDefault();\n setShowSelectedOptions(!showSelectedOptions);\n },\n [setShowSelectedOptions, showSelectedOptions],\n );\n\n // when pressing escape on each header list button we close the menu\n // and set focus on input\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setMenuState(false, 'close', e);\n internalRef.current?.focus();\n }\n },\n [setMenuState, internalRef],\n );\n\n // when hitting tab on selected values button filter we target the input again\n const handleFilterSelectionBtnOnTab = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Tab' && !e.shiftKey) {\n e.preventDefault();\n internalRef.current?.focus();\n }\n },\n [internalRef],\n );\n\n const handleCheckAllOnTab = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n e.preventDefault();\n internalRef.current?.focus();\n }\n },\n [internalRef, multiSelectedValues],\n );\n\n useEffect(() => {\n // toggle off selected values filter when removing all of them\n if (multiSelectedValues.length === 0) {\n setShowSelectedOptions(false);\n }\n }, [multiSelectedValues, setShowSelectedOptions]);\n\n return useMemo(\n () => ({\n handleKeyDown,\n handleToggleSelectedValuesFilter,\n handleFilterSelectionBtnOnTab,\n handleOnMouseDown,\n handleCheckAllOnTab,\n handleSelectAllCheckboxChange,\n checkboxStatus,\n }),\n [\n handleKeyDown,\n handleFilterSelectionBtnOnTab,\n handleToggleSelectedValuesFilter,\n handleOnMouseDown,\n handleCheckAllOnTab,\n handleSelectAllCheckboxChange,\n checkboxStatus,\n ],\n );\n};\n\nexport { useHeaderListHandlers };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6E;AAE7E,wBAAqC;AACrC,yBAA4B;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,YAAY;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM,wBAAoB,wCAAqB,eAAe;AAE9D,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA,IACT;AACA,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,QAAQ,kBAAkB,MAAM,CAAC;AAEzD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA4B,KAAK;AAE7E,8BAAU,MAAM;AACd,sBAAkB,iBAAiB;AAAA,EACrC,GAAG,CAAC,mBAAmB,mBAAmB,CAAC;AAE3C,QAAM,wBAAoB,0BAAY,CAAC,MAAwB;AAC7D,MAAE,eAAe;AAAA,EAEnB,GAAG,CAAC,CAAC;AAEL,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA8C;AAC7C,WAAK,CAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE;AAAA,UACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ;AAAA,UAC/E;AAAA,QACF;AACA,0BAAkB,IAAI;AAAA,MACxB,WAAW,aAAa;AACtB,oBAAY,CAAC,GAAG,CAAC;AACjB,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,aAAa,eAAe;AAAA,EAC/C;AAEA,QAAM,uCAA4D;AAAA,IAChE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,6BAAuB,CAAC,mBAAmB;AAAA,IAC7C;AAAA,IACA,CAAC,wBAAwB,mBAAmB;AAAA,EAC9C;AAIA,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,qBAAa,OAAO,SAAS,CAAC;AAC9B,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAGA,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,mBAAmB;AAAA,EACnC;AAEA,8BAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,qBAAqB,sBAAsB,CAAC;AAEhD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -31,7 +31,7 @@ var React = __toESM(require("react"));
|
|
|
31
31
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_react = require("react");
|
|
33
33
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
34
|
-
var
|
|
34
|
+
var import_ds_menu_items = require("@elliemae/ds-menu-items");
|
|
35
35
|
var import_ComboBoxCTX = require("../../ComboBoxCTX");
|
|
36
36
|
var import_styled = require("./styled");
|
|
37
37
|
var import_listHelper = require("../../utils/listHelper");
|
|
@@ -47,7 +47,7 @@ const useItemRenderer = () => {
|
|
|
47
47
|
virtualListHelpers
|
|
48
48
|
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
49
49
|
const multiple = Array.isArray(selectedValues);
|
|
50
|
-
const CBItem = multiple ?
|
|
50
|
+
const CBItem = multiple ? import_ds_menu_items.MultiMenuItem : import_ds_menu_items.SingleMenuItem;
|
|
51
51
|
const handleOnCreateClick = (0, import_react.useCallback)(() => {
|
|
52
52
|
if (inputValue && onCreate) {
|
|
53
53
|
onCreate(inputValue);
|
|
@@ -96,13 +96,13 @@ const useItemRenderer = () => {
|
|
|
96
96
|
innerRef: vItem.measureRef
|
|
97
97
|
};
|
|
98
98
|
if (option.type === import_constants.MENU_OPTION_TYPES.SECTION) {
|
|
99
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
99
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items.Section, {
|
|
100
100
|
label: option.label,
|
|
101
101
|
...generalProps
|
|
102
102
|
});
|
|
103
103
|
}
|
|
104
104
|
if (option.type === import_constants.MENU_OPTION_TYPES.SEPARATOR) {
|
|
105
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items.Separator, {
|
|
106
106
|
...generalProps
|
|
107
107
|
});
|
|
108
108
|
}
|
|
@@ -123,7 +123,7 @@ const useItemRenderer = () => {
|
|
|
123
123
|
});
|
|
124
124
|
}
|
|
125
125
|
if (type === import_constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE) {
|
|
126
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items.SingleMenuItem, {
|
|
127
127
|
dataTestid: import_ComboboxDataTestids.ComboboxDataTestid.OPTION,
|
|
128
128
|
isActive: dsId === focusOptionIdx,
|
|
129
129
|
...generalProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/useItemRenderer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Section, Separator } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,mBAAwD;AACxD,qBAAqB;AACrB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Section, Separator } from '@elliemae/ds-menu-items';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants';\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n const {\n props: { filteredOptions, onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions },\n setMenuState,\n inputValue,\n focusOptionIdx,\n setInputValue,\n virtualListHelpers,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n const handleOnCreateClick = useCallback(() => {\n if (inputValue && onCreate) {\n onCreate(inputValue);\n setInputValue('');\n if (onFilter) onFilter(allOptions, inputValue);\n }\n }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n const handleClick = useCallback(\n (option: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n if (option.type === MENU_OPTION_TYPES.OPTION) {\n if (!option.disabled) {\n if (onFilter) onFilter(allOptions, inputValue);\n setInputValue('');\n if (!multiple) {\n setMenuState(false, 'selectOption', e);\n }\n onChange(getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);\n }\n }\n // prevent for loosing focus on input control\n e.stopPropagation();\n e.preventDefault();\n },\n [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n );\n\n // prevent blur from controls input\n const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n e.preventDefault();\n }, []);\n\n return useMemo(() => {\n if (!virtualListHelpers) {\n return null;\n }\n return virtualListHelpers.virtualItems.map((vItem) => {\n const option = filteredOptions[vItem.index];\n const { dsId, type, disabled } = option;\n const generalProps = {\n wrapperStyles: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n transform: `translateY(${vItem.start}px)`,\n },\n\n key: `${dsId}`,\n innerRef: vItem.measureRef,\n };\n if (option.type === MENU_OPTION_TYPES.SECTION) {\n return <Section label={option.label} {...generalProps} />;\n }\n if (option.type === MENU_OPTION_TYPES.SEPARATOR) {\n return <Separator {...generalProps} />;\n }\n if (option.type === MENU_OPTION_TYPES.OPTION) {\n return (\n <CBItem\n {...generalProps}\n value={option.value}\n label={option.label}\n dataTestid={ComboboxDataTestid.OPTION}\n disabled={disabled}\n onClick={(e: React.MouseEvent) => {\n handleClick(option, e);\n }}\n onMouseDown={handleOnMouseDown}\n isActive={dsId === focusOptionIdx}\n isSelected={isSelected(selectedValues, option)}\n tabIndex={-1}\n />\n );\n }\n if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n return (\n <SingleMenuItem\n dataTestid={ComboboxDataTestid.OPTION}\n isActive={dsId === focusOptionIdx}\n {...generalProps}\n render={({ label: labelCreatable }: { label: string }) => (\n <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n <StyledCreatableLabel>Add:</StyledCreatableLabel>\n <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n </Grid>\n )}\n label={option.label}\n onClick={handleOnCreateClick}\n />\n );\n }\n return <></>;\n });\n }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,mBAAwD;AACxD,qBAAqB;AACrB,2BAAkE;AAClE,yBAAgC;AAChC,oBAA2D;AAC3D,wBAAsD;AACtD,iCAAmC;AAEnC,uBAA8D;AACvD,MAAM,kBAAkB,MAAiC;AAC9D,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,UAAU,UAAU,gBAAgB,gBAAgB,UAAU,WAAW;AAAA,IACnG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAC7C,QAAM,SAAS,WAAW,qCAAgB;AAE1C,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,QAAI,cAAc,UAAU;AAC1B,eAAS,UAAU;AACnB,oBAAc,EAAE;AAChB,UAAI;AAAU,iBAAS,YAAY,UAAU;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,UAAU,UAAU,YAAY,YAAY,aAAa,CAAC;AAC9D,QAAM,kBAAc;AAAA,IAClB,CAAC,QAAgC,MAAwB;AACvD,UAAI,OAAO,SAAS,mCAAkB,QAAQ;AAC5C,YAAI,CAAC,OAAO,UAAU;AACpB,cAAI;AAAU,qBAAS,YAAY,UAAU;AAC7C,wBAAc,EAAE;AAChB,cAAI,CAAC,UAAU;AACb,yBAAa,OAAO,gBAAgB,CAAC;AAAA,UACvC;AACA,uBAAS,6CAA0B,QAAQ,gBAAgB,cAAc,GAAG,QAAQ,CAAC;AAAA,QACvF;AAAA,MACF;AAEA,QAAE,gBAAgB;AAClB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,gBAAgB,YAAY,UAAU,cAAc,QAAQ;AAAA,EACzE;AAGA,QAAM,wBAAoB,0BAAY,CAAC,MAAuC;AAC5E,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,aAAO,sBAAQ,MAAM;AACnB,QAAI,CAAC,oBAAoB;AACvB,aAAO;AAAA,IACT;AACA,WAAO,mBAAmB,aAAa,IAAI,CAAC,UAAU;AACpD,YAAM,SAAS,gBAAgB,MAAM;AACrC,YAAM,EAAE,MAAM,MAAM,SAAS,IAAI;AACjC,YAAM,eAAe;AAAA,QACnB,eAAe;AAAA,UACb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,WAAW,cAAc,MAAM;AAAA,QACjC;AAAA,QAEA,KAAK,GAAG;AAAA,QACR,UAAU,MAAM;AAAA,MAClB;AACA,UAAI,OAAO,SAAS,mCAAkB,SAAS;AAC7C,eAAO,4CAAC;AAAA,UAAQ,OAAO,OAAO;AAAA,UAAQ,GAAG;AAAA,SAAc;AAAA,MACzD;AACA,UAAI,OAAO,SAAS,mCAAkB,WAAW;AAC/C,eAAO,4CAAC;AAAA,UAAW,GAAG;AAAA,SAAc;AAAA,MACtC;AACA,UAAI,OAAO,SAAS,mCAAkB,QAAQ;AAC5C,eACE,4CAAC;AAAA,UACE,GAAG;AAAA,UACJ,OAAO,OAAO;AAAA,UACd,OAAO,OAAO;AAAA,UACd,YAAY,8CAAmB;AAAA,UAC/B;AAAA,UACA,SAAS,CAAC,MAAwB;AAChC,wBAAY,QAAQ,CAAC;AAAA,UACvB;AAAA,UACA,aAAa;AAAA,UACb,UAAU,SAAS;AAAA,UACnB,gBAAY,8BAAW,gBAAgB,MAAM;AAAA,UAC7C,UAAU;AAAA,SACZ;AAAA,MAEJ;AACA,UAAI,SAAS,4CAA2B,WAAW;AACjD,eACE,4CAAC;AAAA,UACC,YAAY,8CAAmB;AAAA,UAC/B,UAAU,SAAS;AAAA,UAClB,GAAG;AAAA,UACJ,QAAQ,CAAC,EAAE,OAAO,eAAe,MAC/B,6CAAC;AAAA,YAAK,GAAE;AAAA,YAAM,MAAM,CAAC,eAAe,MAAM;AAAA,YAAG,QAAO;AAAA,YAAM,YAAW;AAAA,YACnE;AAAA,0DAAC;AAAA,gBAAqB;AAAA,eAAI;AAAA,cAC1B,4CAAC;AAAA,gBAAsB,cAAI;AAAA,eAAkB;AAAA;AAAA,WAC/C;AAAA,UAEF,OAAO,OAAO;AAAA,UACd,SAAS;AAAA,SACX;AAAA,MAEJ;AACA,aAAO,2EAAE;AAAA,IACX,CAAC;AAAA,EACH,GAAG,CAAC,iBAAiB,gBAAgB,gBAAgB,kBAAkB,CAAC;AAC1E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,7 +36,8 @@ var import_listHelper = require("../../utils/listHelper");
|
|
|
36
36
|
const RemovableSelectedValuePill = (props) => {
|
|
37
37
|
const { pill } = props;
|
|
38
38
|
const {
|
|
39
|
-
props: { onChange, isNonClearable, disabled, selectedValues
|
|
39
|
+
props: { onChange, isNonClearable, disabled, selectedValues },
|
|
40
|
+
internalRef
|
|
40
41
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
41
42
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_pills.DSPillV2, {
|
|
42
43
|
size: "s",
|
|
@@ -47,7 +48,7 @@ const RemovableSelectedValuePill = (props) => {
|
|
|
47
48
|
onRemove: (e) => {
|
|
48
49
|
e.stopPropagation();
|
|
49
50
|
onChange((0, import_listHelper.getSuggestedValueOnChange)(pill, selectedValues), pill, e);
|
|
50
|
-
|
|
51
|
+
internalRef.current?.focus();
|
|
51
52
|
}
|
|
52
53
|
}, pill.value);
|
|
53
54
|
};
|