@elliemae/ds-form-combobox 3.6.0-next.5 → 3.6.0-rc.2
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/config/useComboBox.js +6 -3
- package/dist/cjs/config/useComboBox.js.map +2 -2
- package/dist/cjs/config/useCorrectOptions.js +3 -6
- package/dist/cjs/config/useCorrectOptions.js.map +2 -2
- package/dist/cjs/utils/listHelper.js +4 -6
- package/dist/cjs/utils/listHelper.js.map +2 -2
- package/dist/esm/config/useComboBox.js +6 -3
- package/dist/esm/config/useComboBox.js.map +2 -2
- package/dist/esm/config/useCorrectOptions.js +3 -6
- package/dist/esm/config/useCorrectOptions.js.map +2 -2
- package/dist/esm/utils/listHelper.js +4 -6
- package/dist/esm/utils/listHelper.js.map +2 -2
- package/package.json +12 -12
|
@@ -88,12 +88,15 @@ const useComboBox = (props) => {
|
|
|
88
88
|
(0, import_react.useEffect)(() => {
|
|
89
89
|
if (!hasFocus)
|
|
90
90
|
setFocusOptionIdx("");
|
|
91
|
-
if (hasFocus && (!focusOptionIdx ||
|
|
92
|
-
const focusedValue = (0, import_listHelper.getFirstOption)(correctOptions, selectedValues
|
|
91
|
+
if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {
|
|
92
|
+
const focusedValue = (0, import_listHelper.getFirstOption)(correctOptions, selectedValues);
|
|
93
93
|
setFocusOptionIdx(focusedValue);
|
|
94
94
|
scrollOptionIntoView(focusedValue, { align: "center" });
|
|
95
95
|
}
|
|
96
|
-
}, [showPopover, hasFocus, correctOptions, selectedValues
|
|
96
|
+
}, [showPopover, hasFocus, correctOptions, selectedValues]);
|
|
97
|
+
(0, import_react.useEffect)(() => {
|
|
98
|
+
setFocusOptionIdx(correctOptions?.[0]?.dsId ?? "");
|
|
99
|
+
}, [correctOptions, inputValue]);
|
|
97
100
|
(0, import_react.useEffect)(() => {
|
|
98
101
|
if (!showPopover) {
|
|
99
102
|
setFocusOptionIdx("");
|
|
@@ -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 defaultPropsWithInnerRef = {\n ...defaultProps,\n innerRef: useRef(null),\n };\n\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\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 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 ||
|
|
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,2BAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,cAAU,qBAAO,IAAI;AAAA,EACvB;AAEA,QAAM,wBAAoB,kDAA6B,OAAO,wBAAwB;AACtF,0DAA+B,mBAAmB,8CAAiB;AACnE,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAA6B,IAAI;AACjF,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAAkB,KAAK;AAE7E,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAiB,EAAE;AACvD,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAkB,KAAK;AAEvD,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,qBAAiB,qBAAuB,IAAI;AAElD,QAAM,yBAAqB,qBAAuB,IAAI;AACtD,QAAM,yBAAqB,qBAAuB,IAAI;AACtD,QAAM,2BAAuB,qBAAyB,IAAI;AAC1D,QAAM,+BAA2B,qBAA0B,IAAI;AAC/D,QAAM,mBAAe,qBAAuB,IAAI;AAEhD,QAAM,EAAE,gBAAgB,YAAY,aAAa,IAAI;AAErD,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,eAAe;AAAW,aAAO;AACrC,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,QAAM,mBAAe;AAAA,IACnB,CACE,UACA,QACA,MACG;AACH,UAAI,iBAAiB;AAAW,qBAAa,UAAU,QAAQ,CAAC;AAChE,qBAAe,QAAQ;AAAA,IACzB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,QAAM,qBAAiB,4CAAkB,mBAAmB,YAAY,mBAAmB;AAM3F,QAAM,yBAAoD,iCAAW;AAAA,IACnE,MAAM,eAAe;AAAA,IACrB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAKD,QAAM,2BAAuB;AAAA,IAC3B,CAAC,MAAc,OAAO,EAAE,OAAO,SAAS,MAAM;AAC5C,yBAAmB;AAAA,QACjB,eAAe,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAAA,QAEnD;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,kBAAkB;AAAA,EACrC;AAMA,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAiB,EAAE;AAE/D,8BAAU,MAAM;AAId,QAAI,CAAC;AAAU,wBAAkB,EAAE;AACnC,QAAI,aAAa,CAAC,kBAAkB,
|
|
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 defaultPropsWithInnerRef = {\n ...defaultProps,\n innerRef: useRef(null),\n };\n\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\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 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 }),\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 ],\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
|
}
|
|
@@ -35,9 +35,9 @@ var import_listHelper = require("../utils/listHelper");
|
|
|
35
35
|
const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
|
|
36
36
|
const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;
|
|
37
37
|
return (0, import_react.useMemo)(() => {
|
|
38
|
-
const correctFilterOptions = filteredOptions ?? allOptions;
|
|
38
|
+
const correctFilterOptions = filteredOptions ?? (0, import_listHelper.filterOptions)(inputValue, allOptions);
|
|
39
39
|
if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {
|
|
40
|
-
return (0, import_listHelper.selectedValuesWithSections)(correctFilterOptions
|
|
40
|
+
return (0, import_listHelper.selectedValuesWithSections)(correctFilterOptions, selectedValues);
|
|
41
41
|
}
|
|
42
42
|
if (onCreate && inputValue && correctFilterOptions.findIndex(
|
|
43
43
|
(option) => option.type === import_constants.MENU_OPTION_TYPES.OPTION && option.label === inputValue
|
|
@@ -50,10 +50,7 @@ const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) =
|
|
|
50
50
|
};
|
|
51
51
|
return [creatableItem, ...correctFilterOptions];
|
|
52
52
|
}
|
|
53
|
-
|
|
54
|
-
return (0, import_listHelper.filterOptions)(inputValue, allOptions);
|
|
55
|
-
}
|
|
56
|
-
return filteredOptions;
|
|
53
|
+
return correctFilterOptions;
|
|
57
54
|
}, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);
|
|
58
55
|
};
|
|
59
56
|
//# sourceMappingURL=useCorrectOptions.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useCorrectOptions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nimport { selectedValuesWithSections, filterOptions } from '../utils/listHelper';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => {\n const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;\n\n return useMemo(() => {\n const correctFilterOptions = filteredOptions ?? filterOptions(inputValue, allOptions);\n // when show selected toggle is on we return the selected value only as filteredOptions prop\n if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {\n return selectedValuesWithSections(correctFilterOptions, selectedValues);\n }\n\n // whether oncreate is passed we add as first option the creatable action based on input value string\n if (\n onCreate &&\n inputValue &&\n correctFilterOptions.findIndex(\n (option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue,\n ) === -1\n ) {\n const creatableUuid = uid();\n const creatableItem: DSComboboxT.ItemCreatableOption = {\n dsId: `creatable-${creatableUuid}`,\n label: inputValue,\n type: 'creatable',\n };\n\n return [creatableItem, ...correctFilterOptions];\n }\n\n return correctFilterOptions;\n }, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);\n};\n\nexport { useCorrectOptions };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwB;AACxB,iBAAoB;AAEpB,uBAAkC;AAClC,wBAA0D;AAC1D,MAAM,oBAAoB,CAAC,mBAAsC,YAAoB,wBAAiC;AACpH,QAAM,EAAE,iBAAiB,YAAY,gBAAgB,SAAS,IAAI;AAElE,aAAO,sBAAQ,MAAM;AACnB,UAAM,uBAAuB,uBAAmB,iCAAc,YAAY,UAAU;AAEpF,QAAI,uBAAuB,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AACrF,iBAAO,8CAA2B,sBAAsB,cAAc;AAAA,IACxE;AAGA,QACE,YACA,cACA,qBAAqB;AAAA,MACnB,CAAC,WAAW,OAAO,SAAS,mCAAkB,UAAU,OAAO,UAAU;AAAA,IAC3E,MAAM,IACN;AACA,YAAM,oBAAgB,gBAAI;AAC1B,YAAM,gBAAiD;AAAA,QACrD,MAAM,aAAa;AAAA,QACnB,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAEA,aAAO,CAAC,eAAe,GAAG,oBAAoB;AAAA,IAChD;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,YAAY,qBAAqB,gBAAgB,UAAU,UAAU,CAAC;AAC7F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -66,12 +66,10 @@ const getLastValueSelected = (selectedValues) => {
|
|
|
66
66
|
}
|
|
67
67
|
return selectedValues;
|
|
68
68
|
};
|
|
69
|
-
const getFirstOption = (options, selectedValues
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
return lastValue.dsId;
|
|
74
|
-
}
|
|
69
|
+
const getFirstOption = (options, selectedValues) => {
|
|
70
|
+
const lastValue = getLastValueSelected(selectedValues);
|
|
71
|
+
if (lastValue)
|
|
72
|
+
return lastValue.dsId;
|
|
75
73
|
for (let i = 0; i < options.length; i += 1)
|
|
76
74
|
if (!["section", "separator"].includes(options[i].type) && !options[i].disabled) {
|
|
77
75
|
return options[i].dsId;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/listHelper.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n if (isSelectedValueMultiple(value)) {\n const multiValue = value as DSComboboxT.ItemOption[];\n return multiValue.some((item) => item?.value === activeOption?.value);\n }\n const singleValue = value as DSComboboxT.ItemOption;\n return singleValue?.value === activeOption.value;\n};\n\nexport const findInCircularList = (\n list: DSComboboxT.OptionTypes[],\n from: number,\n criteria: (item: DSComboboxT.OptionTypes) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n if (Array.isArray(selectedValues)) {\n return selectedValues[selectedValues.length - 1];\n }\n return selectedValues;\n};\n\nexport const getFirstOption = (\n options: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.SelectedOptionsT,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAkC;AAC3B,MAAM,uBAAuB,CAAC,YACnC,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,mCAAkB,UAAU,CAAC,OAAO,QAAQ;AAElF,MAAM,aAAa,CAAC,YACzB,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,mCAAkB,MAAM;AAE9D,MAAM,uBAAuB,CAAC,UACnC,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAExC,MAAM,0BAA0B,CAAC,UAAiD,MAAM,QAAQ,KAAK;AAErG,MAAM,aAAa,CAAC,OAAqC,iBAAkD;AAChH,MAAI,wBAAwB,KAAK,GAAG;AAClC,UAAM,aAAa;AACnB,WAAO,WAAW,KAAK,CAAC,SAAS,MAAM,UAAU,cAAc,KAAK;AAAA,EACtE;AACA,QAAM,cAAc;AACpB,SAAO,aAAa,UAAU,aAAa;AAC7C;AAEO,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,EAAE;AAAG,aAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,uBAAuB,CAAC,mBAAiD;AACpF,MAAI,MAAM,QAAQ,cAAc,GAAG;AACjC,WAAO,eAAe,eAAe,SAAS;AAAA,EAChD;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAC5B,SACA,
|
|
4
|
+
"sourcesContent": ["import { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n if (isSelectedValueMultiple(value)) {\n const multiValue = value as DSComboboxT.ItemOption[];\n return multiValue.some((item) => item?.value === activeOption?.value);\n }\n const singleValue = value as DSComboboxT.ItemOption;\n return singleValue?.value === activeOption.value;\n};\n\nexport const findInCircularList = (\n list: DSComboboxT.OptionTypes[],\n from: number,\n criteria: (item: DSComboboxT.OptionTypes) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n if (Array.isArray(selectedValues)) {\n return selectedValues[selectedValues.length - 1];\n }\n return selectedValues;\n};\n\nexport const getFirstOption = (\n options: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.SelectedOptionsT,\n): string => {\n const lastValue = getLastValueSelected(selectedValues);\n if (lastValue) return lastValue.dsId;\n\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n return options[i].dsId;\n }\n // list of disabled item results return ''\n return '';\n};\n\nexport const getSuggestedValueOnChange = (\n selectedOption: DSComboboxT.ItemOption,\n selectedValues: DSComboboxT.SelectedOptionsT,\n isNonClearable?: boolean,\n) => {\n if (Array.isArray(selectedValues)) {\n const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n if (isFound) {\n if (isNonClearable) return selectedValues;\n return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n }\n return [...selectedValues, selectedOption];\n }\n if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n if (isNonClearable) return selectedOption;\n return null;\n }\n return selectedOption;\n};\n\nexport const filterOptions = (inputValue: string, options: DSComboboxT.OptionTypes[]) => {\n if (!inputValue) return options;\n return options.filter(\n (option) =>\n option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()),\n );\n};\n\nexport const selectedValuesWithSections = (\n optionsToParse: DSComboboxT.OptionTypes[],\n multiSelectedValue: DSComboboxT.ItemOption[],\n) => {\n const items = [] as DSComboboxT.OptionTypes[];\n\n if (optionsToParse)\n optionsToParse.forEach((option) => {\n // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);\n if (option.type === MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {\n items.push(option);\n }\n\n if (option.type === MENU_OPTION_TYPES.SECTION) {\n if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n items[items.length - 1] = option;\n } else {\n items.push(option);\n }\n }\n });\n if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n items.pop();\n }\n\n return items;\n};\n\nexport const getFilteredOptionsSelected = (\n filteredOption: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.ItemOption[],\n) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));\n\nexport const scrollIfNeeded = (\n elem: HTMLElement,\n options = { behavior: 'smooth', block: 'end', inline: 'nearest' } as ScrollIntoViewOptions | undefined,\n) => {\n const bounding = elem.getBoundingClientRect();\n if (\n !(\n bounding.top >= 0 &&\n bounding.left >= 0 &&\n bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n bounding.right <= (window.innerWidth || document.documentElement.clientWidth)\n )\n )\n elem.scrollIntoView(options);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -59,12 +59,15 @@ const useComboBox = (props) => {
|
|
|
59
59
|
useEffect(() => {
|
|
60
60
|
if (!hasFocus)
|
|
61
61
|
setFocusOptionIdx("");
|
|
62
|
-
if (hasFocus && (!focusOptionIdx ||
|
|
63
|
-
const focusedValue = getFirstOption(correctOptions, selectedValues
|
|
62
|
+
if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {
|
|
63
|
+
const focusedValue = getFirstOption(correctOptions, selectedValues);
|
|
64
64
|
setFocusOptionIdx(focusedValue);
|
|
65
65
|
scrollOptionIntoView(focusedValue, { align: "center" });
|
|
66
66
|
}
|
|
67
|
-
}, [showPopover, hasFocus, correctOptions, selectedValues
|
|
67
|
+
}, [showPopover, hasFocus, correctOptions, selectedValues]);
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
setFocusOptionIdx(correctOptions?.[0]?.dsId ?? "");
|
|
70
|
+
}, [correctOptions, inputValue]);
|
|
68
71
|
useEffect(() => {
|
|
69
72
|
if (!showPopover) {
|
|
70
73
|
setFocusOptionIdx("");
|
|
@@ -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 } 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 defaultPropsWithInnerRef = {\n ...defaultProps,\n innerRef: useRef(null),\n };\n\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\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 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 ||
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,QAAQ,aAAa,iBAAiB;AAClE,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,oBAAoB;AAC7B,SAAsB,yBAAyB;AAE/C,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AACxB,MAAM,cAAc,CAAC,UAAoE;AAC9F,QAAM,2BAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,OAAO,IAAI;AAAA,EACvB;AAEA,QAAM,oBAAoB,6BAA6B,OAAO,wBAAwB;AACtF,iCAA+B,mBAAmB,iBAAiB;AACnE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,IAAI;AACjF,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAkB,KAAK;AAE7E,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,EAAE;AACvD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AAEvD,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,iBAAiB,OAAuB,IAAI;AAElD,QAAM,qBAAqB,OAAuB,IAAI;AACtD,QAAM,qBAAqB,OAAuB,IAAI;AACtD,QAAM,uBAAuB,OAAyB,IAAI;AAC1D,QAAM,2BAA2B,OAA0B,IAAI;AAC/D,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,EAAE,gBAAgB,YAAY,aAAa,IAAI;AAErD,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,eAAe;AAAW,aAAO;AACrC,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,QAAM,eAAe;AAAA,IACnB,CACE,UACA,QACA,MACG;AACH,UAAI,iBAAiB;AAAW,qBAAa,UAAU,QAAQ,CAAC;AAChE,qBAAe,QAAQ;AAAA,IACzB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,QAAM,iBAAiB,kBAAkB,mBAAmB,YAAY,mBAAmB;AAM3F,QAAM,qBAAoD,WAAW;AAAA,IACnE,MAAM,eAAe;AAAA,IACrB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAKD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAc,OAAO,EAAE,OAAO,SAAS,MAAM;AAC5C,yBAAmB;AAAA,QACjB,eAAe,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAAA,QAEnD;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,kBAAkB;AAAA,EACrC;AAMA,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAiB,EAAE;AAE/D,YAAU,MAAM;AAId,QAAI,CAAC;AAAU,wBAAkB,EAAE;AACnC,QAAI,aAAa,CAAC,kBAAkB,
|
|
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 } 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 defaultPropsWithInnerRef = {\n ...defaultProps,\n innerRef: useRef(null),\n };\n\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\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 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 }),\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 ],\n );\n\n return ctx;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,9 +6,9 @@ import { selectedValuesWithSections, filterOptions } from "../utils/listHelper";
|
|
|
6
6
|
const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
|
|
7
7
|
const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;
|
|
8
8
|
return useMemo(() => {
|
|
9
|
-
const correctFilterOptions = filteredOptions ?? allOptions;
|
|
9
|
+
const correctFilterOptions = filteredOptions ?? filterOptions(inputValue, allOptions);
|
|
10
10
|
if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {
|
|
11
|
-
return selectedValuesWithSections(correctFilterOptions
|
|
11
|
+
return selectedValuesWithSections(correctFilterOptions, selectedValues);
|
|
12
12
|
}
|
|
13
13
|
if (onCreate && inputValue && correctFilterOptions.findIndex(
|
|
14
14
|
(option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue
|
|
@@ -21,10 +21,7 @@ const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) =
|
|
|
21
21
|
};
|
|
22
22
|
return [creatableItem, ...correctFilterOptions];
|
|
23
23
|
}
|
|
24
|
-
|
|
25
|
-
return filterOptions(inputValue, allOptions);
|
|
26
|
-
}
|
|
27
|
-
return filteredOptions;
|
|
24
|
+
return correctFilterOptions;
|
|
28
25
|
}, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);
|
|
29
26
|
};
|
|
30
27
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCorrectOptions.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nimport { selectedValuesWithSections, filterOptions } from '../utils/listHelper';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => {\n const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;\n\n return useMemo(() => {\n const correctFilterOptions = filteredOptions ?? filterOptions(inputValue, allOptions);\n // when show selected toggle is on we return the selected value only as filteredOptions prop\n if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {\n return selectedValuesWithSections(correctFilterOptions, selectedValues);\n }\n\n // whether oncreate is passed we add as first option the creatable action based on input value string\n if (\n onCreate &&\n inputValue &&\n correctFilterOptions.findIndex(\n (option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue,\n ) === -1\n ) {\n const creatableUuid = uid();\n const creatableItem: DSComboboxT.ItemCreatableOption = {\n dsId: `creatable-${creatableUuid}`,\n label: inputValue,\n type: 'creatable',\n };\n\n return [creatableItem, ...correctFilterOptions];\n }\n\n return correctFilterOptions;\n }, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);\n};\n\nexport { useCorrectOptions };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe;AACxB,SAAS,WAAW;AAEpB,SAAS,yBAAyB;AAClC,SAAS,4BAA4B,qBAAqB;AAC1D,MAAM,oBAAoB,CAAC,mBAAsC,YAAoB,wBAAiC;AACpH,QAAM,EAAE,iBAAiB,YAAY,gBAAgB,SAAS,IAAI;AAElE,SAAO,QAAQ,MAAM;AACnB,UAAM,uBAAuB,mBAAmB,cAAc,YAAY,UAAU;AAEpF,QAAI,uBAAuB,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AACrF,aAAO,2BAA2B,sBAAsB,cAAc;AAAA,IACxE;AAGA,QACE,YACA,cACA,qBAAqB;AAAA,MACnB,CAAC,WAAW,OAAO,SAAS,kBAAkB,UAAU,OAAO,UAAU;AAAA,IAC3E,MAAM,IACN;AACA,YAAM,gBAAgB,IAAI;AAC1B,YAAM,gBAAiD;AAAA,QACrD,MAAM,aAAa;AAAA,QACnB,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAEA,aAAO,CAAC,eAAe,GAAG,oBAAoB;AAAA,IAChD;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,YAAY,qBAAqB,gBAAgB,UAAU,UAAU,CAAC;AAC7F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,12 +25,10 @@ const getLastValueSelected = (selectedValues) => {
|
|
|
25
25
|
}
|
|
26
26
|
return selectedValues;
|
|
27
27
|
};
|
|
28
|
-
const getFirstOption = (options, selectedValues
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return lastValue.dsId;
|
|
33
|
-
}
|
|
28
|
+
const getFirstOption = (options, selectedValues) => {
|
|
29
|
+
const lastValue = getLastValueSelected(selectedValues);
|
|
30
|
+
if (lastValue)
|
|
31
|
+
return lastValue.dsId;
|
|
34
32
|
for (let i = 0; i < options.length; i += 1)
|
|
35
33
|
if (!["section", "separator"].includes(options[i].type) && !options[i].disabled) {
|
|
36
34
|
return options[i].dsId;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/listHelper.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n if (isSelectedValueMultiple(value)) {\n const multiValue = value as DSComboboxT.ItemOption[];\n return multiValue.some((item) => item?.value === activeOption?.value);\n }\n const singleValue = value as DSComboboxT.ItemOption;\n return singleValue?.value === activeOption.value;\n};\n\nexport const findInCircularList = (\n list: DSComboboxT.OptionTypes[],\n from: number,\n criteria: (item: DSComboboxT.OptionTypes) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n if (Array.isArray(selectedValues)) {\n return selectedValues[selectedValues.length - 1];\n }\n return selectedValues;\n};\n\nexport const getFirstOption = (\n options: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.SelectedOptionsT,\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,yBAAyB;AAC3B,MAAM,uBAAuB,CAAC,YACnC,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,kBAAkB,UAAU,CAAC,OAAO,QAAQ;AAElF,MAAM,aAAa,CAAC,YACzB,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,kBAAkB,MAAM;AAE9D,MAAM,uBAAuB,CAAC,UACnC,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAExC,MAAM,0BAA0B,CAAC,UAAiD,MAAM,QAAQ,KAAK;AAErG,MAAM,aAAa,CAAC,OAAqC,iBAAkD;AAChH,MAAI,wBAAwB,KAAK,GAAG;AAClC,UAAM,aAAa;AACnB,WAAO,WAAW,KAAK,CAAC,SAAS,MAAM,UAAU,cAAc,KAAK;AAAA,EACtE;AACA,QAAM,cAAc;AACpB,SAAO,aAAa,UAAU,aAAa;AAC7C;AAEO,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,EAAE;AAAG,aAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,uBAAuB,CAAC,mBAAiD;AACpF,MAAI,MAAM,QAAQ,cAAc,GAAG;AACjC,WAAO,eAAe,eAAe,SAAS;AAAA,EAChD;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAC5B,SACA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n if (isSelectedValueMultiple(value)) {\n const multiValue = value as DSComboboxT.ItemOption[];\n return multiValue.some((item) => item?.value === activeOption?.value);\n }\n const singleValue = value as DSComboboxT.ItemOption;\n return singleValue?.value === activeOption.value;\n};\n\nexport const findInCircularList = (\n list: DSComboboxT.OptionTypes[],\n from: number,\n criteria: (item: DSComboboxT.OptionTypes) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n if (Array.isArray(selectedValues)) {\n return selectedValues[selectedValues.length - 1];\n }\n return selectedValues;\n};\n\nexport const getFirstOption = (\n options: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.SelectedOptionsT,\n): string => {\n const lastValue = getLastValueSelected(selectedValues);\n if (lastValue) return lastValue.dsId;\n\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n return options[i].dsId;\n }\n // list of disabled item results return ''\n return '';\n};\n\nexport const getSuggestedValueOnChange = (\n selectedOption: DSComboboxT.ItemOption,\n selectedValues: DSComboboxT.SelectedOptionsT,\n isNonClearable?: boolean,\n) => {\n if (Array.isArray(selectedValues)) {\n const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n if (isFound) {\n if (isNonClearable) return selectedValues;\n return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n }\n return [...selectedValues, selectedOption];\n }\n if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n if (isNonClearable) return selectedOption;\n return null;\n }\n return selectedOption;\n};\n\nexport const filterOptions = (inputValue: string, options: DSComboboxT.OptionTypes[]) => {\n if (!inputValue) return options;\n return options.filter(\n (option) =>\n option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()),\n );\n};\n\nexport const selectedValuesWithSections = (\n optionsToParse: DSComboboxT.OptionTypes[],\n multiSelectedValue: DSComboboxT.ItemOption[],\n) => {\n const items = [] as DSComboboxT.OptionTypes[];\n\n if (optionsToParse)\n optionsToParse.forEach((option) => {\n // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);\n if (option.type === MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {\n items.push(option);\n }\n\n if (option.type === MENU_OPTION_TYPES.SECTION) {\n if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n items[items.length - 1] = option;\n } else {\n items.push(option);\n }\n }\n });\n if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n items.pop();\n }\n\n return items;\n};\n\nexport const getFilteredOptionsSelected = (\n filteredOption: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.ItemOption[],\n) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));\n\nexport const scrollIfNeeded = (\n elem: HTMLElement,\n options = { behavior: 'smooth', block: 'end', inline: 'nearest' } as ScrollIntoViewOptions | undefined,\n) => {\n const bounding = elem.getBoundingClientRect();\n if (\n !(\n bounding.top >= 0 &&\n bounding.left >= 0 &&\n bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n bounding.right <= (window.innerWidth || document.documentElement.clientWidth)\n )\n )\n elem.scrollIntoView(options);\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.6.0-
|
|
3
|
+
"version": "3.6.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -35,21 +35,21 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-button": "3.6.0-
|
|
39
|
-
"@elliemae/ds-common": "3.6.0-
|
|
40
|
-
"@elliemae/ds-form-checkbox": "3.6.0-
|
|
41
|
-
"@elliemae/ds-grid": "3.6.0-
|
|
42
|
-
"@elliemae/ds-icons": "3.6.0-
|
|
43
|
-
"@elliemae/ds-pills": "3.6.0-
|
|
44
|
-
"@elliemae/ds-popperjs": "3.6.0-
|
|
45
|
-
"@elliemae/ds-system": "3.6.0-
|
|
46
|
-
"@elliemae/ds-truncated-tooltip-text": "3.6.0-
|
|
47
|
-
"@elliemae/ds-utilities": "3.6.0-
|
|
38
|
+
"@elliemae/ds-button": "3.6.0-rc.2",
|
|
39
|
+
"@elliemae/ds-common": "3.6.0-rc.2",
|
|
40
|
+
"@elliemae/ds-form-checkbox": "3.6.0-rc.2",
|
|
41
|
+
"@elliemae/ds-grid": "3.6.0-rc.2",
|
|
42
|
+
"@elliemae/ds-icons": "3.6.0-rc.2",
|
|
43
|
+
"@elliemae/ds-pills": "3.6.0-rc.2",
|
|
44
|
+
"@elliemae/ds-popperjs": "3.6.0-rc.2",
|
|
45
|
+
"@elliemae/ds-system": "3.6.0-rc.2",
|
|
46
|
+
"@elliemae/ds-truncated-tooltip-text": "3.6.0-rc.2",
|
|
47
|
+
"@elliemae/ds-utilities": "3.6.0-rc.2",
|
|
48
48
|
"react-virtual": "~2.10.4",
|
|
49
49
|
"uid": "~2.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.6.0-
|
|
52
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.6.0-rc.2",
|
|
53
53
|
"@elliemae/pui-theme": "~2.6.0",
|
|
54
54
|
"@testing-library/dom": "~8.13.0",
|
|
55
55
|
"@testing-library/jest-dom": "~5.16.4",
|