@elliemae/ds-form-layout-autocomplete 3.4.3-rc.1 → 3.4.4-rc.0
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/Autocomplete.js +9 -5
- package/dist/cjs/Autocomplete.js.map +1 -1
- package/dist/cjs/AutocompleteCTX.js +4 -1
- package/dist/cjs/AutocompleteCTX.js.map +1 -1
- package/dist/cjs/AutocompleteDataTestids.js +4 -1
- package/dist/cjs/AutocompleteDataTestids.js.map +1 -1
- package/dist/cjs/config/useAutocomplete.js +38 -26
- package/dist/cjs/config/useAutocomplete.js.map +1 -1
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/parts/A11yFocusedOption.js +11 -6
- package/dist/cjs/parts/A11yFocusedOption.js.map +2 -2
- package/dist/cjs/parts/container/Container.js +41 -26
- package/dist/cjs/parts/container/Container.js.map +2 -2
- package/dist/cjs/parts/container/index.js +4 -1
- package/dist/cjs/parts/container/index.js.map +1 -1
- package/dist/cjs/parts/container/styled.js +4 -1
- package/dist/cjs/parts/container/styled.js.map +1 -1
- package/dist/cjs/parts/container/useKeyboardNavigation.js +47 -39
- package/dist/cjs/parts/container/useKeyboardNavigation.js.map +2 -2
- package/dist/cjs/parts/menu-list/MenuList.js +21 -14
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/parts/menu-list/index.js +4 -1
- package/dist/cjs/parts/menu-list/index.js.map +1 -1
- package/dist/cjs/parts/menu-list/styled.js +4 -1
- package/dist/cjs/parts/menu-list/styled.js.map +1 -1
- package/dist/cjs/parts/menu-list/useItemRenderer.js +18 -11
- package/dist/cjs/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +4 -1
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/sharedTypes.js +4 -1
- package/dist/cjs/sharedTypes.js.map +1 -1
- package/dist/cjs/tests/utils.js +4 -1
- package/dist/cjs/tests/utils.js.map +1 -1
- package/dist/cjs/utils/listHelper.js +4 -1
- package/dist/cjs/utils/listHelper.js.map +1 -1
- package/dist/esm/Autocomplete.js +5 -4
- package/dist/esm/Autocomplete.js.map +1 -1
- package/dist/esm/AutocompleteCTX.js.map +1 -1
- package/dist/esm/AutocompleteDataTestids.js.map +1 -1
- package/dist/esm/config/useAutocomplete.js +34 -25
- package/dist/esm/config/useAutocomplete.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/parts/A11yFocusedOption.js +7 -5
- package/dist/esm/parts/A11yFocusedOption.js.map +1 -1
- package/dist/esm/parts/container/Container.js +37 -25
- package/dist/esm/parts/container/Container.js.map +2 -2
- package/dist/esm/parts/container/index.js.map +1 -1
- package/dist/esm/parts/container/styled.js.map +1 -1
- package/dist/esm/parts/container/useKeyboardNavigation.js +43 -38
- package/dist/esm/parts/container/useKeyboardNavigation.js.map +1 -1
- package/dist/esm/parts/menu-list/MenuList.js +17 -13
- package/dist/esm/parts/menu-list/MenuList.js.map +1 -1
- package/dist/esm/parts/menu-list/index.js.map +1 -1
- package/dist/esm/parts/menu-list/styled.js.map +1 -1
- package/dist/esm/parts/menu-list/useItemRenderer.js +14 -10
- package/dist/esm/parts/menu-list/useItemRenderer.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/sharedTypes.js.map +1 -1
- package/dist/esm/tests/utils.js.map +1 -1
- package/dist/esm/utils/listHelper.js.map +1 -1
- package/package.json +6 -6
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { MenuList } from '../menu-list';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nexport const Container = (): JSX.Element => {\n const {\n props: { id, startPlacementPreference, children, filter, placementOrderPreference },\n showPopover,\n setReferenceElement,\n setShowPopover,\n focusOptionIdx,\n referenceElement,\n } = useContext(AutocompleteContext);\n\n useEffect(() => {\n const closePopper = () => {\n setShowPopover(false);\n };\n window.addEventListener('blur', closePopper);\n\n return () => {\n window.removeEventListener('blur', closePopper);\n };\n }, [setShowPopover]);\n\n const handleCloseMenu = useCallback(() => {\n setShowPopover(false);\n }, [setShowPopover]);\n\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = React.Children.only(children);\n\n const childrenWithProps = React.isValidElement(input)\n ? React.cloneElement(input, { 'aria-activedescendant': focusOptionIdx })\n : input;\n\n const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\n\n return (\n <>\n <A11yFocusedOption />\n\n <StyledContainer\n id={id}\n ref={setReferenceElement}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-controls=\"autocomplete-listbox\"\n aria-expanded={showPopover}\n aria-haspopup=\"listbox\"\n aria-owns={idList}\n onKeyDown={onInputKeyDown}\n data-testid={AutocompleteDataTestid.CONTAINER}\n >\n {childrenWithProps}\n {filter && (\n <DSPopperJS\n customOffset={[0, 5]}\n closeContextMenu={handleCloseMenu}\n referenceElement={referenceElement}\n showPopover={showPopover}\n startPlacementPreference={startPlacementPreference}\n placementOrderPreference={placementOrderPreference}\n withoutPortal\n withoutArrow\n withoutAnimation\n zIndex={10}\n >\n <StyledPopperWrapper tabIndex={-1}>\n <MenuList />\n </StyledPopperWrapper>\n </DSPopperJS>\n )}\n </StyledContainer>\n </>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,OAAOA,UAAS,aAAa,SAAS,WAAW,kBAAkB;AACnE,SAAS,kBAAkB;AAC3B,OAAO,yBAAyB;AAChC,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAC3B,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO,EAAE,IAAI,0BAA0B,UAAU,QAAQ,yBAAyB;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,YAAU,MAAM;AACd,UAAM,cAAc,MAAM;AACxB,qBAAe,KAAK;AAAA,IACtB;AACA,WAAO,iBAAiB,QAAQ,WAAW;AAE3C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,WAAW;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,kBAAkB,YAAY,MAAM;AACxC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,EAAE,eAAe,IAAI,sBAAsB;AAEjD,QAAM,QAAQA,OAAM,SAAS,KAAK,QAAQ;AAE1C,QAAM,oBAAoBA,OAAM,eAAe,KAAK,IAChDA,OAAM,aAAa,OAAO,EAAE,yBAAyB,eAAe,CAAC,IACrE;AAEJ,QAAM,SAAS,QAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AAEjE,SACE;AAAA,IACE;AAAA,0BAAC,qBAAkB;AAAA,MAEnB,qBAAC;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,QACL,qBAAkB;AAAA,QAClB,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,WAAW;AAAA,QACX,eAAa,uBAAuB;AAAA,QAEnC;AAAA;AAAA,UACA,UACC,oBAAC;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB,QAAQ;AAAA,YAER,8BAAC;AAAA,cAAoB,UAAU;AAAA,cAC7B,8BAAC,YAAS;AAAA,aACZ;AAAA,WACF;AAAA;AAAA,OAEJ;AAAA;AAAA,GACF;AAEJ;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { Container } from './Container';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/styled.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledContainer = styled.div`\n width: 100%;\n height: 28px;\n position: relative;\n`;\n\nexport const StyledPopperWrapper = styled.div`\n background: #fff;\n overflow: auto;\n position: relative;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -13,46 +13,51 @@ const useKeyboardNavigation = () => {
|
|
|
13
13
|
scrollOptionIntoView
|
|
14
14
|
} = useContext(AutocompleteContext);
|
|
15
15
|
const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);
|
|
16
|
-
const currentItem = options.find(
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
e.
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
if (showPopover) {
|
|
30
|
-
const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
|
|
31
|
-
setCurrentOption(options[nextItemIndex].dsId);
|
|
32
|
-
scrollOptionIntoView(options[nextItemIndex].dsId);
|
|
16
|
+
const currentItem = options.find(
|
|
17
|
+
(item) => item.type === "option" && item.dsId === focusOptionIdx
|
|
18
|
+
);
|
|
19
|
+
const onInputKeyDown = useCallback(
|
|
20
|
+
(e) => {
|
|
21
|
+
if ((e.keyCode >= 48 && e.keyCode <= 90 || e.key === "Backspace") && !showPopover) {
|
|
22
|
+
setShowPopover(true);
|
|
23
|
+
} else if (e.key === "Tab")
|
|
24
|
+
setShowPopover(false);
|
|
25
|
+
if (e.key === "Enter" && showPopover) {
|
|
26
|
+
e.preventDefault();
|
|
27
|
+
onSelect(currentItem?.label, e);
|
|
28
|
+
setShowPopover(false);
|
|
33
29
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
30
|
+
if (e.key === "ArrowDown") {
|
|
31
|
+
e.preventDefault();
|
|
32
|
+
if (showPopover) {
|
|
33
|
+
const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
|
|
34
|
+
setCurrentOption(options[nextItemIndex].dsId);
|
|
35
|
+
scrollOptionIntoView(options[nextItemIndex].dsId);
|
|
36
|
+
}
|
|
41
37
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
38
|
+
if (e.key === "ArrowUp") {
|
|
39
|
+
e.preventDefault();
|
|
40
|
+
if (showPopover) {
|
|
41
|
+
const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
|
|
42
|
+
setCurrentOption(options[nextItemIndex].dsId);
|
|
43
|
+
scrollOptionIntoView(options[nextItemIndex].dsId);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
if (e.key === "Escape") {
|
|
47
|
+
setShowPopover(false);
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
[
|
|
51
|
+
currentItem?.label,
|
|
52
|
+
currentItemIndex,
|
|
53
|
+
onSelect,
|
|
54
|
+
options,
|
|
55
|
+
scrollOptionIntoView,
|
|
56
|
+
setCurrentOption,
|
|
57
|
+
setShowPopover,
|
|
58
|
+
showPopover
|
|
59
|
+
]
|
|
60
|
+
);
|
|
56
61
|
return { onInputKeyDown };
|
|
57
62
|
};
|
|
58
63
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/useKeyboardNavigation.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 { DSAutocompleteT } from '../../react-desc-prop-types';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { findInCircularList } from '../../utils/listHelper';\n\nconst isOptionFocuseable = (opt: DSAutocompleteT.OptionTypes): boolean => !['section', 'separator'].includes(opt.type);\n\nexport const useKeyboardNavigation = () => {\n const {\n props: { onSelect, options },\n setShowPopover,\n showPopover,\n focusOptionIdx,\n setCurrentOption,\n scrollOptionIntoView,\n } = useContext(AutocompleteContext);\n\n const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);\n const currentItem = options.find(\n (item) => item.type === 'option' && item.dsId === focusOptionIdx,\n ) as DSAutocompleteT.ItemOption;\n\n const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n if (((e.keyCode >= 48 && e.keyCode <= 90) || e.key === 'Backspace') && !showPopover) {\n setShowPopover(true);\n } else if (e.key === 'Tab') setShowPopover(false);\n\n // =============================================================================\n // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER\n // =============================================================================\n if (e.key === 'Enter' && showPopover) {\n e.preventDefault();\n onSelect(currentItem?.label, e);\n setShowPopover(false);\n }\n\n // =============================================================================\n // ARROWS UP AND DOWN\n // =============================================================================\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n if (showPopover) {\n const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n setCurrentOption(options[nextItemIndex].dsId);\n scrollOptionIntoView(options[nextItemIndex].dsId);\n }\n }\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n if (showPopover) {\n const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n setCurrentOption(options[nextItemIndex].dsId);\n scrollOptionIntoView(options[nextItemIndex].dsId);\n }\n }\n // =============================================================================\n // ESCAPE\n // =============================================================================\n if (e.key === 'Escape') {\n setShowPopover(false);\n }\n },\n [\n currentItem?.label,\n currentItemIndex,\n onSelect,\n options,\n scrollOptionIntoView,\n setCurrentOption,\n setShowPopover,\n showPopover,\n ],\n );\n\n return { onInputKeyDown };\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAgB,aAAa,kBAAkB;AAE/C,OAAO,yBAAyB;AAChC,SAAS,0BAA0B;AAEnC,MAAM,qBAAqB,CAAC,QAA8C,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;AAE9G,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,QAAQ;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,QAAM,mBAAmB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,cAAc;AAC/E,QAAM,cAAc,QAAQ;AAAA,IAC1B,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,SAAS;AAAA,EACpD;AAEA,QAAM,iBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,WAAM,EAAE,WAAW,MAAM,EAAE,WAAW,MAAO,EAAE,QAAQ,gBAAgB,CAAC,aAAa;AACnF,uBAAe,IAAI;AAAA,MACrB,WAAW,EAAE,QAAQ;AAAO,uBAAe,KAAK;AAKhD,UAAI,EAAE,QAAQ,WAAW,aAAa;AACpC,UAAE,eAAe;AACjB,iBAAS,aAAa,OAAO,CAAC;AAC9B,uBAAe,KAAK;AAAA,MACtB;AAKA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,YAAI,aAAa;AACf,gBAAM,gBAAgB,mBAAmB,SAAS,kBAAkB,kBAAkB;AACtF,2BAAiB,QAAQ,eAAe,IAAI;AAC5C,+BAAqB,QAAQ,eAAe,IAAI;AAAA,QAClD;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,YAAI,aAAa;AACf,gBAAM,gBAAgB,mBAAmB,SAAS,kBAAkB,oBAAoB,EAAE;AAC1F,2BAAiB,QAAQ,eAAe,IAAI;AAC5C,+BAAqB,QAAQ,eAAe,IAAI;AAAA,QAClD;AAAA,MACF;AAIA,UAAI,EAAE,QAAQ,UAAU;AACtB,uBAAe,KAAK;AAAA,MACtB;AAAA,IACF;AAAA,IACA;AAAA,MACE,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,eAAe;AAC1B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useContext, useMemo, useCallback } from "react";
|
|
3
4
|
import { StyledListWrapper, StyledList, StyledVirtualListWrapper } from "./styled";
|
|
4
5
|
import { AutocompleteDataTestid } from "../../AutocompleteDataTestids";
|
|
5
6
|
import AutocompleteContext from "../../AutocompleteCTX";
|
|
@@ -18,22 +19,25 @@ const MenuList = () => {
|
|
|
18
19
|
inputRef.current?.focus();
|
|
19
20
|
}, [inputRef]);
|
|
20
21
|
const idList = useMemo(() => `${id ? `${id}-` : ""}listbox`, [id]);
|
|
21
|
-
return /* @__PURE__ */
|
|
22
|
+
return /* @__PURE__ */ jsx(StyledListWrapper, {
|
|
22
23
|
tabIndex: -1,
|
|
23
24
|
onMouseDown: (e) => e.preventDefault(),
|
|
24
25
|
minWidth: referenceElement?.offsetWidth,
|
|
25
26
|
id: idList,
|
|
26
|
-
role: "listbox"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
27
|
+
role: "listbox",
|
|
28
|
+
children: options.length > 0 && /* @__PURE__ */ jsx(StyledVirtualListWrapper, {
|
|
29
|
+
tabIndex: -1,
|
|
30
|
+
ref: listRef,
|
|
31
|
+
children: /* @__PURE__ */ jsx(StyledList, {
|
|
32
|
+
tabIndex: -1,
|
|
33
|
+
"aria-expanded": showPopover,
|
|
34
|
+
onFocus: handleOnFocus,
|
|
35
|
+
"data-testid": AutocompleteDataTestid.LIST,
|
|
36
|
+
style: { height: totalSize, margin: "8px 0px" },
|
|
37
|
+
children: ItemRenderer
|
|
38
|
+
})
|
|
39
|
+
})
|
|
40
|
+
});
|
|
37
41
|
};
|
|
38
42
|
export {
|
|
39
43
|
MenuList
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { useItemRenderer } from './useItemRenderer';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { options, id },\n referenceElement,\n inputRef,\n listRef,\n showPopover,\n virtualListHelpers: { totalSize },\n } = useContext(AutocompleteContext);\n\n const ItemRenderer = useItemRenderer();\n\n const handleOnFocus = useCallback(() => {\n inputRef.current?.focus();\n }, [inputRef]);\n\n const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\n return (\n <StyledListWrapper\n tabIndex={-1}\n onMouseDown={(e) => e.preventDefault()}\n minWidth={referenceElement?.offsetWidth}\n id={idList}\n role=\"listbox\"\n >\n {options.length > 0 && (\n <StyledVirtualListWrapper tabIndex={-1} ref={listRef}>\n <StyledList\n tabIndex={-1}\n aria-expanded={showPopover}\n onFocus={handleOnFocus}\n data-testid={AutocompleteDataTestid.LIST}\n style={{ height: totalSize, margin: '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n )}\n </StyledListWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,mBAAmB,YAAY,gCAAgC;AACxE,SAAS,8BAA8B;AACvC,OAAO,yBAAyB;AAChC,SAAS,uBAAuB;AAGzB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,GAAG;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,UAAU;AAAA,EAClC,IAAI,WAAW,mBAAmB;AAElC,QAAM,eAAe,gBAAgB;AAErC,QAAM,gBAAgB,YAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,SAAS,QAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AACjE,SACE,oBAAC;AAAA,IACC,UAAU;AAAA,IACV,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,IACrC,UAAU,kBAAkB;AAAA,IAC5B,IAAI;AAAA,IACJ,MAAK;AAAA,IAEJ,kBAAQ,SAAS,KAChB,oBAAC;AAAA,MAAyB,UAAU;AAAA,MAAI,KAAK;AAAA,MAC3C,8BAAC;AAAA,QACC,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,SAAS;AAAA,QACT,eAAa,uBAAuB;AAAA,QACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,QAE7C;AAAA,OACH;AAAA,KACF;AAAA,GAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { MenuList } from './MenuList';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/styled.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledListWrapper = styled.div<{ minWidth?: number | string }>`\n min-width: ${({ minWidth }) => (minWidth ? `${minWidth}px` : '100%')};\n`;\n\nexport const StyledList = styled.ul`\n position: relative;\n padding: 0;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n maxHeight: number;\n}>`\n overflow-y: auto;\n max-height: ${({ maxHeight }) => `${!maxHeight ? '400' : maxHeight}px`};\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,oBAAoB,OAAO;AAAA,eACzB,CAAC,EAAE,SAAS,MAAO,WAAW,GAAG,eAAe;AAAA;AAGxD,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,2BAA2B,OAAO;AAAA;AAAA,gBAI/B,CAAC,EAAE,UAAU,MAAM,GAAG,CAAC,YAAY,QAAQ;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo, useContext, useCallback } from "react";
|
|
3
4
|
import { SingleMenuItem, Section } from "@elliemae/ds-common";
|
|
4
5
|
import AutocompleteContext from "../../AutocompleteCTX";
|
|
5
6
|
import { AutocompleteDataTestid } from "../../AutocompleteDataTestids";
|
|
@@ -11,12 +12,15 @@ const useItemRenderer = () => {
|
|
|
11
12
|
focusOptionIdx,
|
|
12
13
|
virtualListHelpers
|
|
13
14
|
} = useContext(AutocompleteContext);
|
|
14
|
-
const handleClick = useCallback(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
const handleClick = useCallback(
|
|
16
|
+
(option, e) => {
|
|
17
|
+
onSelect(option.label, e);
|
|
18
|
+
setShowPopover(false);
|
|
19
|
+
e.stopPropagation();
|
|
20
|
+
e.preventDefault();
|
|
21
|
+
},
|
|
22
|
+
[onSelect, setShowPopover]
|
|
23
|
+
);
|
|
20
24
|
return useMemo(() => {
|
|
21
25
|
if (virtualListHelpers) {
|
|
22
26
|
return virtualListHelpers.virtualItems.map((vItem) => {
|
|
@@ -27,13 +31,13 @@ const useItemRenderer = () => {
|
|
|
27
31
|
innerRef: vItem.measureRef
|
|
28
32
|
};
|
|
29
33
|
if (option.type === "section") {
|
|
30
|
-
return /* @__PURE__ */
|
|
34
|
+
return /* @__PURE__ */ jsx(Section, {
|
|
31
35
|
label: option.label,
|
|
32
36
|
...generalProps
|
|
33
37
|
});
|
|
34
38
|
}
|
|
35
39
|
if (option.type === "option") {
|
|
36
|
-
return /* @__PURE__ */
|
|
40
|
+
return /* @__PURE__ */ jsx(SingleMenuItem, {
|
|
37
41
|
...generalProps,
|
|
38
42
|
value: option.value,
|
|
39
43
|
label: option.label,
|
|
@@ -43,7 +47,7 @@ const useItemRenderer = () => {
|
|
|
43
47
|
isActive: option.dsId === focusOptionIdx
|
|
44
48
|
});
|
|
45
49
|
}
|
|
46
|
-
return /* @__PURE__ */
|
|
50
|
+
return /* @__PURE__ */ jsx(Fragment, {});
|
|
47
51
|
});
|
|
48
52
|
}
|
|
49
53
|
return null;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/useItemRenderer.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { SingleMenuItem, Section } from '@elliemae/ds-common';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport { DSAutocompleteT } from '../../react-desc-prop-types';\n\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n const {\n props: { options, onSelect },\n inputRef,\n setShowPopover,\n focusOptionIdx,\n virtualListHelpers,\n } = useContext(AutocompleteContext);\n\n const handleClick = useCallback(\n (option: DSAutocompleteT.ItemOption, e: React.ChangeEvent<HTMLInputElement>) => {\n onSelect(option.label, e);\n setShowPopover(false);\n e.stopPropagation();\n e.preventDefault();\n },\n [onSelect, setShowPopover],\n );\n\n return useMemo(() => {\n if (virtualListHelpers) {\n return virtualListHelpers.virtualItems.map((vItem) => {\n const option = options[vItem.index];\n const generalProps = {\n wrapperStyles: { position: 'absolute', top: vItem.start, left: 0, width: '100%' },\n key: `${option.dsId}`,\n innerRef: vItem.measureRef,\n };\n if (option.type === 'section') {\n return <Section label={option.label} {...generalProps} />;\n }\n if (option.type === 'option') {\n return (\n <SingleMenuItem\n {...generalProps}\n value={option.value}\n label={option.label}\n dataTestid={AutocompleteDataTestid.OPTION}\n disabled={option.disabled}\n onClick={(e: React.ChangeEvent<HTMLInputElement>) => handleClick(option, e)}\n isActive={option.dsId === focusOptionIdx}\n />\n );\n }\n return <></>;\n });\n }\n return null;\n }, [options, focusOptionIdx, inputRef, virtualListHelpers]);\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,SAAS,YAAY,mBAAmB;AACxD,SAAS,gBAAgB,eAAe;AACxC,OAAO,yBAAyB;AAChC,SAAS,8BAA8B;AAGhC,MAAM,kBAAkB,MAAiC;AAC9D,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,SAAS;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,QAAM,cAAc;AAAA,IAClB,CAAC,QAAoC,MAA2C;AAC9E,eAAS,OAAO,OAAO,CAAC;AACxB,qBAAe,KAAK;AACpB,QAAE,gBAAgB;AAClB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,cAAc;AAAA,EAC3B;AAEA,SAAO,QAAQ,MAAM;AACnB,QAAI,oBAAoB;AACtB,aAAO,mBAAmB,aAAa,IAAI,CAAC,UAAU;AACpD,cAAM,SAAS,QAAQ,MAAM;AAC7B,cAAM,eAAe;AAAA,UACnB,eAAe,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO,OAAO;AAAA,UAChF,KAAK,GAAG,OAAO;AAAA,UACf,UAAU,MAAM;AAAA,QAClB;AACA,YAAI,OAAO,SAAS,WAAW;AAC7B,iBAAO,oBAAC;AAAA,YAAQ,OAAO,OAAO;AAAA,YAAQ,GAAG;AAAA,WAAc;AAAA,QACzD;AACA,YAAI,OAAO,SAAS,UAAU;AAC5B,iBACE,oBAAC;AAAA,YACE,GAAG;AAAA,YACJ,OAAO,OAAO;AAAA,YACd,OAAO,OAAO;AAAA,YACd,YAAY,uBAAuB;AAAA,YACnC,UAAU,OAAO;AAAA,YACjB,SAAS,CAAC,MAA2C,YAAY,QAAQ,CAAC;AAAA,YAC1E,UAAU,OAAO,SAAS;AAAA,WAC5B;AAAA,QAEJ;AACA,eAAO,gCAAE;AAAA,MACX,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,gBAAgB,UAAU,kBAAkB,CAAC;AAC5D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSAutocompleteT {\n export interface CommonItemOptions {\n dsId: string;\n disabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n }\n\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n\n export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n export interface RequiredProps {\n options: OptionTypes[];\n children: React.ReactChild;\n filter: string;\n onSelect: (suggestedValue: string | number, e: React.KeyboardEvent<HTMLInputElement>) => void;\n }\n export interface DefaultProps {\n startPlacementPreference: string;\n placementOrderPreference: string[];\n withoutPortal: boolean;\n zIndex: number;\n }\n\n export interface Props extends Partial<DefaultProps>, RequiredProps {}\n\n export interface InternalProps extends DefaultProps, RequiredProps {}\n}\n\nexport const propTypes = {\n options: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .isRequired.description('List of options')\n .defaultValue([]),\n filter: PropTypes.string.isRequired.description('String value to filter the options').defaultValue(''),\n onSelect: PropTypes.func.isRequired\n .description('function triggered when an option is selected it will send the options selected')\n .defaultValue(''),\n children: PropTypes.node.isRequired\n .description('React component to apply autocomplete functionality')\n .defaultValue(''),\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,iBAAiB;AA6CnB,MAAM,YAAY;AAAA,EACvB,SAAS,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,UAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,UAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,UAAU,KAAK,WACtB,YAAY,qDAAqD,EACjE,aAAa,EAAE;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tests/utils.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const basicOptions = [\n {\n dsId: '12',\n type: 'section',\n label: 'Please Select the appropriate city',\n },\n {\n dsId: '1',\n type: 'option',\n label: '44444-4444',\n },\n {\n dsId: '2',\n type: 'option',\n label: '44444-5555',\n },\n {\n dsId: '3',\n type: 'option',\n label: '44444-6666',\n },\n];\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAAA,EAC1B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/listHelper.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSAutocompleteT } from '../react-desc-prop-types';\n\nexport const getSelectableOptions = (options: Array<DSAutocompleteT.OptionTypes>): Array<DSAutocompleteT.OptionTypes> =>\n options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<DSAutocompleteT.OptionTypes>): Array<DSAutocompleteT.OptionTypes> =>\n options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (\n value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => (Array.isArray(value) ? value.length === 0 : !value);\n\nexport const isSelectedValueMultiple = (\n value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => Array.isArray(value);\n\nexport const findInCircularList = (\n list: DSAutocompleteT.OptionTypes[],\n from: number,\n criteria: (item: DSAutocompleteT.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 getFirstOption = (options: DSAutocompleteT.OptionTypes[]) => {\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type)) {\n return options[i].dsId;\n }\n return '';\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEhB,MAAM,uBAAuB,CAAC,YACnC,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ,IAAI,CAAC;AAEjF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,QAAQ,IAAI,CAAC;AAE7D,MAAM,uBAAuB,CAClC,UACa,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAErD,MAAM,0BAA0B,CACrC,UACY,MAAM,QAAQ,KAAK;AAE1B,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,iBAAiB,CAAC,YAA2C;AACxE,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,GAAG,IAAI,GAAG;AACvD,aAAO,QAAQ,GAAG;AAAA,IACpB;AACF,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-layout-autocomplete",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.4-rc.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Form Layout - Autocomplete",
|
|
6
6
|
"files": [
|
|
@@ -35,15 +35,15 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-common": "3.4.
|
|
39
|
-
"@elliemae/ds-popperjs": "3.4.
|
|
40
|
-
"@elliemae/ds-system": "3.4.
|
|
41
|
-
"@elliemae/ds-utilities": "3.4.
|
|
38
|
+
"@elliemae/ds-common": "3.4.4-rc.0",
|
|
39
|
+
"@elliemae/ds-popperjs": "3.4.4-rc.0",
|
|
40
|
+
"@elliemae/ds-system": "3.4.4-rc.0",
|
|
41
|
+
"@elliemae/ds-utilities": "3.4.4-rc.0",
|
|
42
42
|
"react-virtual": "~2.10.4",
|
|
43
43
|
"styled-components": "~5.3.5"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@elliemae/ds-form-input-text": "3.4.
|
|
46
|
+
"@elliemae/ds-form-input-text": "3.4.4-rc.0",
|
|
47
47
|
"@elliemae/pui-theme": "~2.6.0",
|
|
48
48
|
"@testing-library/dom": "~8.13.0",
|
|
49
49
|
"@testing-library/jest-dom": "~5.16.4",
|