@elliemae/ds-form-combobox 3.49.2 → 3.49.3
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.
|
@@ -71,6 +71,10 @@ const useComboBox = (props) => {
|
|
|
71
71
|
});
|
|
72
72
|
const scrollOptionIntoView = (0, import_react.useCallback)(
|
|
73
73
|
(dsId, opts = { align: "center" }) => {
|
|
74
|
+
virtualListHelpers.scrollToIndex(
|
|
75
|
+
correctOptions.findIndex((opt) => opt.dsId === dsId),
|
|
76
|
+
opts
|
|
77
|
+
);
|
|
74
78
|
requestAnimationFrame(() => {
|
|
75
79
|
virtualListHelpers.scrollToIndex(
|
|
76
80
|
correctOptions.findIndex((opt) => opt.dsId === dsId),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useComboBox.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [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 listRef = useRef<HTMLDivElement>(null);\n const wrapperListRef = useRef<HTMLDivElement>(null);\n\n const selectedOptionsRef = useRef<HTMLDivElement>(null);\n const controlsWrapperRef = useRef<HTMLDivElement>(null);\n const pillGroupRef = useRef<HTMLDivElement>(null);\n\n const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n const instanceUid = useMemo(() => id || uid(5), [id]);\n\n const menuState = useMemo(() => {\n if (isMenuOpen !== undefined) return isMenuOpen;\n return showPopover;\n }, [showPopover, isMenuOpen]);\n\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n const optionsPerSection = useOptionsPerSection(correctOptions);\n\n // ===========================================================================\n // Virtualization setup\n // ===========================================================================\n\n const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n size: optionsPerSection.length,\n parentRef: listRef,\n overscan: 15,\n paddingStart: 0,\n });\n\n // ===========================================================================\n // Scroll into view function\n // ===========================================================================\n const scrollOptionIntoView = useCallback(\n (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n requestAnimationFrame(() => {\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n });\n },\n [correctOptions, virtualListHelpers],\n );\n\n // ===========================================================================\n // Init focused option when opening the menu list\n // ===========================================================================\n\n const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n const setMenuState = useCallback(\n (\n newState: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (applyAriaDisabled) return;\n if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n setShowPopover(newState);\n\n if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n const focusedValue = getFirstOption(correctOptions, selectedValues);\n setFocusOptionIdx(focusedValue);\n scrollOptionIntoView(focusedValue, { align: 'center' });\n } else {\n setFocusOptionIdx('');\n }\n },\n [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n );\n\n // We need to force the auto focus for the inline since we dont control the floating wrapper.\n useEffect(() => {\n if (propsWithDefaults.inline) {\n setMenuState(true, 'inline');\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefaults },\n virtualListHelpers,\n menuState,\n 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 virtualListHelpers,\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkE;AAClE,2BAAsD;AACtD,iBAAoB;AACpB,8BAA6E;AAC7E,yBAA6B;AAE7B,mCAAkC;AAElC,+BAAkC;AAClC,wBAAqD;AACrD,qBAA+B;AAC/B,kCAAqC;AAE9B,MAAM,cAAc,CAAC,UAAoE;AAC9F,QAAM,wBAAoB,sDAAwD,OAAO,+BAAY;AACrG,8DAA+B,mBAAmB,gDAAmB,6BAAc;AACnF,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAA6B,IAAI;AAEjF,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAiB,EAAE;AACvD,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAkB,KAAK;AAEvD,QAAM,kBAAc,qBAAyB,IAAI;AACjD,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,qBAAiB,qBAAuB,IAAI;AAElD,QAAM,yBAAqB,qBAAuB,IAAI;AACtD,QAAM,yBAAqB,qBAAuB,IAAI;AACtD,QAAM,mBAAe,qBAAuB,IAAI;AAEhD,QAAM,EAAE,IAAI,gBAAgB,YAAY,cAAc,kBAAkB,IAAI;AAE5E,QAAM,kBAAc,sBAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,eAAe,OAAW,QAAO;AACrC,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,UAAU,CAAC;AAU5B,QAAM,qBAAiB,4CAAkB,mBAAmB,UAAU;AAEtE,QAAM,wBAAoB,kDAAqB,cAAc;AAM7D,QAAM,yBAAoD,iCAAW;AAAA,IACnE,MAAM,kBAAkB;AAAA,IACxB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAKD,QAAM,2BAAuB;AAAA,IAC3B,CAAC,MAAc,OAA6B,EAAE,OAAO,SAAS,MAAM;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [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 listRef = useRef<HTMLDivElement>(null);\n const wrapperListRef = useRef<HTMLDivElement>(null);\n\n const selectedOptionsRef = useRef<HTMLDivElement>(null);\n const controlsWrapperRef = useRef<HTMLDivElement>(null);\n const pillGroupRef = useRef<HTMLDivElement>(null);\n\n const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n const instanceUid = useMemo(() => id || uid(5), [id]);\n\n const menuState = useMemo(() => {\n if (isMenuOpen !== undefined) return isMenuOpen;\n return showPopover;\n }, [showPopover, isMenuOpen]);\n\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n const optionsPerSection = useOptionsPerSection(correctOptions);\n\n // ===========================================================================\n // Virtualization setup\n // ===========================================================================\n\n const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n size: optionsPerSection.length,\n parentRef: listRef,\n overscan: 15,\n paddingStart: 0,\n });\n\n // ===========================================================================\n // Scroll into view function\n // ===========================================================================\n const scrollOptionIntoView = useCallback(\n (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n // tentative fix to https://jira.elliemae.io/browse/PUI-15374\n // in some scenarios (very specific and with iframes that we can't replicate)\n // the first render positions the list in the wrong place\n // executing this code right away seems to for some reason make the first placement correct in the first render\n // fix is fragile but we can't replicate the issue so we can't test a more robust fix.\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n // executing in new animation frames instead fixes https://jira.elliemae.io/browse/PUI-15252\n // so practically speaking we are scrolling twice in two different frames\n // it's not per-se bad given the underlying virtualization library + browser scroll + dynamic heights\n // actually sometimes need to do a first scroll to calculate new heights/scroll position\n // and then a second one to actually position the scroll in the list correctly,\n // making fix to 15252 potentially more robust.\n requestAnimationFrame(() => {\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n });\n },\n [correctOptions, virtualListHelpers],\n );\n\n // ===========================================================================\n // Init focused option when opening the menu list\n // ===========================================================================\n\n const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n const setMenuState = useCallback(\n (\n newState: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (applyAriaDisabled) return;\n if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n setShowPopover(newState);\n\n if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n const focusedValue = getFirstOption(correctOptions, selectedValues);\n setFocusOptionIdx(focusedValue);\n scrollOptionIntoView(focusedValue, { align: 'center' });\n } else {\n setFocusOptionIdx('');\n }\n },\n [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n );\n\n // We need to force the auto focus for the inline since we dont control the floating wrapper.\n useEffect(() => {\n if (propsWithDefaults.inline) {\n setMenuState(true, 'inline');\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefaults },\n virtualListHelpers,\n menuState,\n 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 virtualListHelpers,\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
|
}
|
|
@@ -38,6 +38,10 @@ const useComboBox = (props) => {
|
|
|
38
38
|
});
|
|
39
39
|
const scrollOptionIntoView = useCallback(
|
|
40
40
|
(dsId, opts = { align: "center" }) => {
|
|
41
|
+
virtualListHelpers.scrollToIndex(
|
|
42
|
+
correctOptions.findIndex((opt) => opt.dsId === dsId),
|
|
43
|
+
opts
|
|
44
|
+
);
|
|
41
45
|
requestAnimationFrame(() => {
|
|
42
46
|
virtualListHelpers.scrollToIndex(
|
|
43
47
|
correctOptions.findIndex((opt) => opt.dsId === dsId),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useComboBox.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [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 listRef = useRef<HTMLDivElement>(null);\n const wrapperListRef = useRef<HTMLDivElement>(null);\n\n const selectedOptionsRef = useRef<HTMLDivElement>(null);\n const controlsWrapperRef = useRef<HTMLDivElement>(null);\n const pillGroupRef = useRef<HTMLDivElement>(null);\n\n const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n const instanceUid = useMemo(() => id || uid(5), [id]);\n\n const menuState = useMemo(() => {\n if (isMenuOpen !== undefined) return isMenuOpen;\n return showPopover;\n }, [showPopover, isMenuOpen]);\n\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n const optionsPerSection = useOptionsPerSection(correctOptions);\n\n // ===========================================================================\n // Virtualization setup\n // ===========================================================================\n\n const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n size: optionsPerSection.length,\n parentRef: listRef,\n overscan: 15,\n paddingStart: 0,\n });\n\n // ===========================================================================\n // Scroll into view function\n // ===========================================================================\n const scrollOptionIntoView = useCallback(\n (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n requestAnimationFrame(() => {\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n });\n },\n [correctOptions, virtualListHelpers],\n );\n\n // ===========================================================================\n // Init focused option when opening the menu list\n // ===========================================================================\n\n const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n const setMenuState = useCallback(\n (\n newState: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (applyAriaDisabled) return;\n if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n setShowPopover(newState);\n\n if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n const focusedValue = getFirstOption(correctOptions, selectedValues);\n setFocusOptionIdx(focusedValue);\n scrollOptionIntoView(focusedValue, { align: 'center' });\n } else {\n setFocusOptionIdx('');\n }\n },\n [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n );\n\n // We need to force the auto focus for the inline since we dont control the floating wrapper.\n useEffect(() => {\n if (propsWithDefaults.inline) {\n setMenuState(true, 'inline');\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefaults },\n virtualListHelpers,\n menuState,\n 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 virtualListHelpers,\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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,QAAQ,aAAa,iBAAiB;AAClE,SAAS,kBAA6C;AACtD,SAAS,WAAW;AACpB,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,oBAAoB;AAE7B,SAAS,yBAAyB;AAElC,SAAS,yBAAyB;AAClC,SAAS,gBAAgB,4BAA4B;AACrD,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAE9B,MAAM,cAAc,CAAC,UAAoE;AAC9F,QAAM,oBAAoB,6BAAwD,OAAO,YAAY;AACrG,iCAA+B,mBAAmB,mBAAmB,cAAc;AACnF,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,IAAI;AAEjF,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,EAAE;AACvD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AAEvD,QAAM,cAAc,OAAyB,IAAI;AACjD,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,iBAAiB,OAAuB,IAAI;AAElD,QAAM,qBAAqB,OAAuB,IAAI;AACtD,QAAM,qBAAqB,OAAuB,IAAI;AACtD,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,EAAE,IAAI,gBAAgB,YAAY,cAAc,kBAAkB,IAAI;AAE5E,QAAM,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,eAAe,OAAW,QAAO;AACrC,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,UAAU,CAAC;AAU5B,QAAM,iBAAiB,kBAAkB,mBAAmB,UAAU;AAEtE,QAAM,oBAAoB,qBAAqB,cAAc;AAM7D,QAAM,qBAAoD,WAAW;AAAA,IACnE,MAAM,kBAAkB;AAAA,IACxB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAKD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAc,OAA6B,EAAE,OAAO,SAAS,MAAM;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [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 listRef = useRef<HTMLDivElement>(null);\n const wrapperListRef = useRef<HTMLDivElement>(null);\n\n const selectedOptionsRef = useRef<HTMLDivElement>(null);\n const controlsWrapperRef = useRef<HTMLDivElement>(null);\n const pillGroupRef = useRef<HTMLDivElement>(null);\n\n const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n const instanceUid = useMemo(() => id || uid(5), [id]);\n\n const menuState = useMemo(() => {\n if (isMenuOpen !== undefined) return isMenuOpen;\n return showPopover;\n }, [showPopover, isMenuOpen]);\n\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n const optionsPerSection = useOptionsPerSection(correctOptions);\n\n // ===========================================================================\n // Virtualization setup\n // ===========================================================================\n\n const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n size: optionsPerSection.length,\n parentRef: listRef,\n overscan: 15,\n paddingStart: 0,\n });\n\n // ===========================================================================\n // Scroll into view function\n // ===========================================================================\n const scrollOptionIntoView = useCallback(\n (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n // tentative fix to https://jira.elliemae.io/browse/PUI-15374\n // in some scenarios (very specific and with iframes that we can't replicate)\n // the first render positions the list in the wrong place\n // executing this code right away seems to for some reason make the first placement correct in the first render\n // fix is fragile but we can't replicate the issue so we can't test a more robust fix.\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n // executing in new animation frames instead fixes https://jira.elliemae.io/browse/PUI-15252\n // so practically speaking we are scrolling twice in two different frames\n // it's not per-se bad given the underlying virtualization library + browser scroll + dynamic heights\n // actually sometimes need to do a first scroll to calculate new heights/scroll position\n // and then a second one to actually position the scroll in the list correctly,\n // making fix to 15252 potentially more robust.\n requestAnimationFrame(() => {\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n });\n },\n [correctOptions, virtualListHelpers],\n );\n\n // ===========================================================================\n // Init focused option when opening the menu list\n // ===========================================================================\n\n const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n const setMenuState = useCallback(\n (\n newState: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (applyAriaDisabled) return;\n if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n setShowPopover(newState);\n\n if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n const focusedValue = getFirstOption(correctOptions, selectedValues);\n setFocusOptionIdx(focusedValue);\n scrollOptionIntoView(focusedValue, { align: 'center' });\n } else {\n setFocusOptionIdx('');\n }\n },\n [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n );\n\n // We need to force the auto focus for the inline since we dont control the floating wrapper.\n useEffect(() => {\n if (propsWithDefaults.inline) {\n setMenuState(true, 'inline');\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefaults },\n virtualListHelpers,\n menuState,\n 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 virtualListHelpers,\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.49.
|
|
3
|
+
"version": "3.49.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -38,17 +38,17 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"uid": "~2.0.1",
|
|
41
|
-
"@elliemae/ds-button-v2": "3.49.
|
|
42
|
-
"@elliemae/ds-circular-progress-indicator": "3.49.
|
|
43
|
-
"@elliemae/ds-floating-context": "3.49.
|
|
44
|
-
"@elliemae/ds-form-checkbox": "3.49.
|
|
45
|
-
"@elliemae/ds-grid": "3.49.
|
|
46
|
-
"@elliemae/ds-menu-items": "3.49.
|
|
47
|
-
"@elliemae/ds-icons": "3.49.
|
|
48
|
-
"@elliemae/ds-pills-v2": "3.49.
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-
|
|
41
|
+
"@elliemae/ds-button-v2": "3.49.3",
|
|
42
|
+
"@elliemae/ds-circular-progress-indicator": "3.49.3",
|
|
43
|
+
"@elliemae/ds-floating-context": "3.49.3",
|
|
44
|
+
"@elliemae/ds-form-checkbox": "3.49.3",
|
|
45
|
+
"@elliemae/ds-grid": "3.49.3",
|
|
46
|
+
"@elliemae/ds-menu-items": "3.49.3",
|
|
47
|
+
"@elliemae/ds-icons": "3.49.3",
|
|
48
|
+
"@elliemae/ds-pills-v2": "3.49.3",
|
|
49
|
+
"@elliemae/ds-system": "3.49.3",
|
|
50
|
+
"@elliemae/ds-truncated-tooltip-text": "3.49.3",
|
|
51
|
+
"@elliemae/ds-props-helpers": "3.49.3"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"jest-cli": "~29.7.0",
|
|
58
58
|
"styled-components": "~5.3.9",
|
|
59
59
|
"styled-system": "~5.1.5",
|
|
60
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.49.
|
|
61
|
-
"@elliemae/ds-monorepo-devops": "3.49.
|
|
60
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.49.3",
|
|
61
|
+
"@elliemae/ds-monorepo-devops": "3.49.3"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
64
|
"@elliemae/pui-theme": "~2.10.0",
|