@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
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var MenuList_exports = {};
|
|
23
26
|
__export(MenuList_exports, {
|
|
@@ -25,7 +28,8 @@ __export(MenuList_exports, {
|
|
|
25
28
|
});
|
|
26
29
|
module.exports = __toCommonJS(MenuList_exports);
|
|
27
30
|
var React = __toESM(require("react"));
|
|
28
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
+
var import_react = require("react");
|
|
29
33
|
var import_styled = require("./styled");
|
|
30
34
|
var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids");
|
|
31
35
|
var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX"));
|
|
@@ -44,21 +48,24 @@ const MenuList = () => {
|
|
|
44
48
|
inputRef.current?.focus();
|
|
45
49
|
}, [inputRef]);
|
|
46
50
|
const idList = (0, import_react.useMemo)(() => `${id ? `${id}-` : ""}listbox`, [id]);
|
|
47
|
-
return /* @__PURE__ */
|
|
51
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledListWrapper, {
|
|
48
52
|
tabIndex: -1,
|
|
49
53
|
onMouseDown: (e) => e.preventDefault(),
|
|
50
54
|
minWidth: referenceElement?.offsetWidth,
|
|
51
55
|
id: idList,
|
|
52
|
-
role: "listbox"
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
role: "listbox",
|
|
57
|
+
children: options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVirtualListWrapper, {
|
|
58
|
+
tabIndex: -1,
|
|
59
|
+
ref: listRef,
|
|
60
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledList, {
|
|
61
|
+
tabIndex: -1,
|
|
62
|
+
"aria-expanded": showPopover,
|
|
63
|
+
onFocus: handleOnFocus,
|
|
64
|
+
"data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.LIST,
|
|
65
|
+
style: { height: totalSize, margin: "8px 0px" },
|
|
66
|
+
children: ItemRenderer
|
|
67
|
+
})
|
|
68
|
+
})
|
|
69
|
+
});
|
|
63
70
|
};
|
|
64
71
|
//# sourceMappingURL=MenuList.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAwD;AACxD,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;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,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAe,wCAAgB;AAErC,QAAM,oBAAgB,0BAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,aAAS,sBAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AACjE,SACE,4CAAC;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,4CAAC;AAAA,MAAyB,UAAU;AAAA,MAAI,KAAK;AAAA,MAC3C,sDAAC;AAAA,QACC,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,SAAS;AAAA,QACT,eAAa,sDAAuB;AAAA,QACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,QAE7C;AAAA,OACH;AAAA,KACF;AAAA,GAEJ;AAEJ;",
|
|
6
|
+
"names": ["AutocompleteContext"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var menu_list_exports = {};
|
|
23
26
|
__export(menu_list_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export { MenuList } from './MenuList';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAAyB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var styled_exports = {};
|
|
23
26
|
__export(styled_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,SAAS,MAAO,WAAW,GAAG,eAAe;AAAA;AAGxD,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAI/B,CAAC,EAAE,UAAU,MAAM,GAAG,CAAC,YAAY,QAAQ;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var useItemRenderer_exports = {};
|
|
23
26
|
__export(useItemRenderer_exports, {
|
|
@@ -25,7 +28,8 @@ __export(useItemRenderer_exports, {
|
|
|
25
28
|
});
|
|
26
29
|
module.exports = __toCommonJS(useItemRenderer_exports);
|
|
27
30
|
var React = __toESM(require("react"));
|
|
28
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
+
var import_react = require("react");
|
|
29
33
|
var import_ds_common = require("@elliemae/ds-common");
|
|
30
34
|
var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX"));
|
|
31
35
|
var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids");
|
|
@@ -37,12 +41,15 @@ const useItemRenderer = () => {
|
|
|
37
41
|
focusOptionIdx,
|
|
38
42
|
virtualListHelpers
|
|
39
43
|
} = (0, import_react.useContext)(import_AutocompleteCTX.default);
|
|
40
|
-
const handleClick = (0, import_react.useCallback)(
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
const handleClick = (0, import_react.useCallback)(
|
|
45
|
+
(option, e) => {
|
|
46
|
+
onSelect(option.label, e);
|
|
47
|
+
setShowPopover(false);
|
|
48
|
+
e.stopPropagation();
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
},
|
|
51
|
+
[onSelect, setShowPopover]
|
|
52
|
+
);
|
|
46
53
|
return (0, import_react.useMemo)(() => {
|
|
47
54
|
if (virtualListHelpers) {
|
|
48
55
|
return virtualListHelpers.virtualItems.map((vItem) => {
|
|
@@ -53,13 +60,13 @@ const useItemRenderer = () => {
|
|
|
53
60
|
innerRef: vItem.measureRef
|
|
54
61
|
};
|
|
55
62
|
if (option.type === "section") {
|
|
56
|
-
return /* @__PURE__ */
|
|
63
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_common.Section, {
|
|
57
64
|
label: option.label,
|
|
58
65
|
...generalProps
|
|
59
66
|
});
|
|
60
67
|
}
|
|
61
68
|
if (option.type === "option") {
|
|
62
|
-
return /* @__PURE__ */
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_common.SingleMenuItem, {
|
|
63
70
|
...generalProps,
|
|
64
71
|
value: option.value,
|
|
65
72
|
label: option.label,
|
|
@@ -69,7 +76,7 @@ const useItemRenderer = () => {
|
|
|
69
76
|
isActive: option.dsId === focusOptionIdx
|
|
70
77
|
});
|
|
71
78
|
}
|
|
72
|
-
return /* @__PURE__ */
|
|
79
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
|
|
73
80
|
});
|
|
74
81
|
}
|
|
75
82
|
return null;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/useItemRenderer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAwD;AACxD,uBAAwC;AACxC,6BAAgC;AAChC,qCAAuC;AAGhC,MAAM,kBAAkB,MAAiC;AAC9D,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,SAAS;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,kBAAc;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,aAAO,sBAAQ,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,4CAAC;AAAA,YAAQ,OAAO,OAAO;AAAA,YAAQ,GAAG;AAAA,WAAc;AAAA,QACzD;AACA,YAAI,OAAO,SAAS,UAAU;AAC5B,iBACE,4CAAC;AAAA,YACE,GAAG;AAAA,YACJ,OAAO,OAAO;AAAA,YACd,OAAO,OAAO;AAAA,YACd,YAAY,sDAAuB;AAAA,YACnC,UAAU,OAAO;AAAA,YACjB,SAAS,CAAC,MAA2C,YAAY,QAAQ,CAAC;AAAA,YAC1E,UAAU,OAAO,SAAS;AAAA,WAC5B;AAAA,QAEJ;AACA,eAAO,2EAAE;AAAA,MACX,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,gBAAgB,UAAU,kBAAkB,CAAC;AAC5D;",
|
|
6
|
+
"names": ["AutocompleteContext"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var react_desc_prop_types_exports = {};
|
|
23
26
|
__export(react_desc_prop_types_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAA0B;AA6CnB,MAAM,YAAY;AAAA,EACvB,SAAS,8BAAU,UAAU,CAAC,8BAAU,OAAO,8BAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,8BAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,8BAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,8BAAU,KAAK,WACtB,YAAY,qDAAqD,EACjE,aAAa,EAAE;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/sharedTypes.js
CHANGED
|
@@ -13,7 +13,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
13
13
|
}
|
|
14
14
|
return to;
|
|
15
15
|
};
|
|
16
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
18
|
+
mod
|
|
19
|
+
));
|
|
17
20
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
21
|
var sharedTypes_exports = {};
|
|
19
22
|
module.exports = __toCommonJS(sharedTypes_exports);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/sharedTypes.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { DSAutocompleteT } from './react-desc-prop-types';\n\nexport declare namespace DSAutoCompleteInternalsT {\n export interface AutocompleteContext {\n props: DSAutocompleteT.InternalProps;\n virtualListHelpers?: ReturnType<typeof useVirtual>;\n showPopover: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n referenceElement: HTMLElement | null;\n setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n scrollOptionIntoView: (dsId: string, opts?: any) => void;\n inputRef: React.RefObject<HTMLInputElement>;\n listRef: React.RefObject<HTMLDivElement>;\n focusOptionIdx: string;\n setCurrentOption: React.Dispatch<React.SetStateAction<string>>;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/tests/utils.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var utils_exports = {};
|
|
23
26
|
__export(utils_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/tests/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,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
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var listHelper_exports = {};
|
|
23
26
|
__export(listHelper_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/listHelper.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,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/dist/esm/Autocomplete.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useMemoMergePropsWithDefault, describe, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
|
|
4
4
|
import { useAutocomplete } from "./config/useAutocomplete";
|
|
5
5
|
import { Container } from "./parts/container";
|
|
@@ -9,9 +9,10 @@ const DSAutocomplete = (props) => {
|
|
|
9
9
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
10
10
|
useValidateTypescriptPropTypes(propsWithDefault, propTypes);
|
|
11
11
|
const ctx = useAutocomplete(props);
|
|
12
|
-
return /* @__PURE__ */
|
|
13
|
-
value: ctx
|
|
14
|
-
|
|
12
|
+
return /* @__PURE__ */ jsx(AutocompleteContext.Provider, {
|
|
13
|
+
value: ctx,
|
|
14
|
+
children: /* @__PURE__ */ jsx(Container, {})
|
|
15
|
+
});
|
|
15
16
|
};
|
|
16
17
|
DSAutocomplete.propTypes = propTypes;
|
|
17
18
|
DSAutocomplete.displayName = "DSAutocomplete";
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Autocomplete.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { useMemoMergePropsWithDefault, describe, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { useAutocomplete } from './config/useAutocomplete';\nimport { Container } from './parts/container';\nimport { AutocompleteContext, defaultProps } from './AutocompleteCTX';\nimport { DSAutocompleteT, propTypes } from './react-desc-prop-types';\n\nconst DSAutocomplete: React.ComponentType<DSAutocompleteT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n const ctx = useAutocomplete(props);\n return (\n <AutocompleteContext.Provider value={ctx}>\n <Container />\n </AutocompleteContext.Provider>\n );\n};\nDSAutocomplete.propTypes = propTypes as WeakValidationMap<unknown>;\nDSAutocomplete.displayName = 'DSAutocomplete';\nconst DSAutocompleteWithSchema = describe(DSAutocomplete);\nDSAutocompleteWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSAutocomplete, DSAutocompleteWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,8BAA8B,UAAU,sCAAsC;AACvF,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB,oBAAoB;AAClD,SAA0B,iBAAiB;AAE3C,MAAM,iBAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AAEzE,iCAA+B,kBAAkB,SAAS;AAC1D,QAAM,MAAM,gBAAgB,KAAK;AACjC,SACE,oBAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IACnC,8BAAC,aAAU;AAAA,GACb;AAEJ;AACA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/AutocompleteCTX.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { DSAutocompleteT } from './react-desc-prop-types';\nimport { DSAutoCompleteInternalsT } from './sharedTypes';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\nexport const defaultProps: DSAutocompleteT.DefaultProps = {\n zIndex: 10,\n withoutPortal: false,\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'bottom-end'],\n};\nconst defaultContext = {\n props: defaultProps as DSAutocompleteT.InternalProps,\n showPopover: false,\n setShowPopover: noop,\n scrollOptionIntoView: noop,\n referenceElement: null,\n setReferenceElement: noop,\n inputRef: createRef<HTMLInputElement>(),\n listRef: createRef<HTMLDivElement>(),\n focusOptionIdx: '',\n setCurrentOption: noop,\n};\n/** Context for cross component communication */\nexport const AutocompleteContext = createContext<DSAutoCompleteInternalsT.AutocompleteContext>(defaultContext);\n\nexport default AutocompleteContext;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AAIzC,MAAM,OAAO,MAAM;AAAC;AACb,MAAM,eAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,YAAY;AACzD;AACA,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,UAAU,UAA4B;AAAA,EACtC,SAAS,UAA0B;AAAA,EACnC,gBAAgB;AAAA,EAChB,kBAAkB;AACpB;AAEO,MAAM,sBAAsB,cAA4D,cAAc;AAE7G,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/AutocompleteDataTestids.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const AutocompleteDataTestid = {\n LIST: 'autocomplete-menu-list',\n OPTION: 'autocomplete-option',\n CONTAINER: 'autocomplete-container',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AACb;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -24,9 +24,15 @@ const useAutocomplete = (props) => {
|
|
|
24
24
|
overscan: 15,
|
|
25
25
|
paddingStart: 0
|
|
26
26
|
});
|
|
27
|
-
const scrollOptionIntoView = useCallback(
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
const scrollOptionIntoView = useCallback(
|
|
28
|
+
(dsId, opts = { align: "center" }) => {
|
|
29
|
+
virtualListHelpers.scrollToIndex(
|
|
30
|
+
options.findIndex((opt) => opt.dsId === dsId),
|
|
31
|
+
opts
|
|
32
|
+
);
|
|
33
|
+
},
|
|
34
|
+
[options, virtualListHelpers]
|
|
35
|
+
);
|
|
30
36
|
useEffect(() => {
|
|
31
37
|
if (filter.length === 0 || options.length === 0) {
|
|
32
38
|
setShowPopover(false);
|
|
@@ -35,28 +41,31 @@ const useAutocomplete = (props) => {
|
|
|
35
41
|
useEffect(() => {
|
|
36
42
|
setCurrentOption(getFirstOption(options));
|
|
37
43
|
}, [options, showPopover]);
|
|
38
|
-
const ctx = useMemo(
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
44
|
+
const ctx = useMemo(
|
|
45
|
+
() => ({
|
|
46
|
+
props: { ...propsWithDefault },
|
|
47
|
+
virtualListHelpers,
|
|
48
|
+
showPopover,
|
|
49
|
+
referenceElement,
|
|
50
|
+
inputRef,
|
|
51
|
+
listRef,
|
|
52
|
+
focusOptionIdx,
|
|
53
|
+
setCurrentOption,
|
|
54
|
+
scrollOptionIntoView,
|
|
55
|
+
setReferenceElement,
|
|
56
|
+
setShowPopover
|
|
57
|
+
}),
|
|
58
|
+
[
|
|
59
|
+
scrollOptionIntoView,
|
|
60
|
+
propsWithDefault,
|
|
61
|
+
virtualListHelpers,
|
|
62
|
+
focusOptionIdx,
|
|
63
|
+
showPopover,
|
|
64
|
+
referenceElement,
|
|
65
|
+
inputRef,
|
|
66
|
+
listRef
|
|
67
|
+
]
|
|
68
|
+
);
|
|
60
69
|
return ctx;
|
|
61
70
|
};
|
|
62
71
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAutocomplete.ts"],
|
|
4
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, useEffect, useRef, useCallback } from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\n\nimport { useVirtual } from 'react-virtual';\nimport { DSAutocompleteT, propTypes } from '../react-desc-prop-types';\nimport { DSAutoCompleteInternalsT } from '../sharedTypes';\nimport { defaultProps } from '../AutocompleteCTX';\nimport { getFirstOption } from '../utils/listHelper';\n\nexport const useAutocomplete = (props: DSAutocompleteT.Props): DSAutoCompleteInternalsT.AutocompleteContext => {\n const defaultPropsWithInnerRef = {\n ...defaultProps,\n innerRef: useRef(null),\n };\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n const [focusOptionIdx, setCurrentOption] = useState<string>('');\n\n const inputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n\n const { options, filter } = propsWithDefault;\n\n // ===========================================================================\n // Virtualization setup\n // ===========================================================================\n\n const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n size: options.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 options.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n },\n [options, virtualListHelpers],\n );\n\n useEffect(() => {\n if (filter.length === 0 || options.length === 0) {\n setShowPopover(false);\n }\n }, [filter, options.length, setShowPopover]);\n\n useEffect(() => {\n setCurrentOption(getFirstOption(options));\n }, [options, showPopover]);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefault },\n virtualListHelpers,\n showPopover,\n referenceElement,\n inputRef,\n listRef,\n focusOptionIdx,\n setCurrentOption,\n scrollOptionIntoView,\n setReferenceElement,\n setShowPopover,\n }),\n [\n scrollOptionIntoView,\n propsWithDefault,\n virtualListHelpers,\n focusOptionIdx,\n showPopover,\n referenceElement,\n inputRef,\n listRef,\n ],\n );\n\n return ctx;\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,WAAW,QAAQ,mBAAmB;AAClE,SAAS,8BAA8B,sCAAsC;AAE7E,SAAS,kBAAkB;AAC3B,SAA0B,iBAAiB;AAE3C,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,CAAC,UAA+E;AAC7G,QAAM,2BAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,OAAO,IAAI;AAAA,EACvB;AACA,QAAM,mBAAmB,6BAA6B,OAAO,wBAAwB;AACrF,iCAA+B,kBAAkB,SAAS;AAC1D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,IAAI;AAEjF,QAAM,CAAC,gBAAgB,gBAAgB,IAAI,SAAiB,EAAE;AAE9D,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,EAAE,SAAS,OAAO,IAAI;AAM5B,QAAM,qBAAoD,WAAW;AAAA,IACnE,MAAM,QAAQ;AAAA,IACd,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,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAAA,QAC5C;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS,kBAAkB;AAAA,EAC9B;AAEA,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,KAAK,QAAQ,WAAW,GAAG;AAC/C,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,QAAQ,cAAc,CAAC;AAE3C,YAAU,MAAM;AACd,qBAAiB,eAAe,OAAO,CAAC;AAAA,EAC1C,GAAG,CAAC,SAAS,WAAW,CAAC;AAEzB,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,iBAAiB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// export { CBContainer, CBContainerWithSchema } from './parts/cb-container';\nexport * from './Autocomplete';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,cAAc;",
|
|
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 } from "react";
|
|
3
4
|
import { styled } from "@elliemae/ds-system";
|
|
4
5
|
import AutocompleteContext from "../AutocompleteCTX";
|
|
5
6
|
import { getSelectableOptions } from "../utils/listHelper";
|
|
@@ -20,10 +21,11 @@ const A11yFocusedOption = () => {
|
|
|
20
21
|
const selectabledOptions = getSelectableOptions(options);
|
|
21
22
|
const focusOption = options.find((option) => !isSeparator(option) && option.dsId === focusOptionIdx);
|
|
22
23
|
const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);
|
|
23
|
-
return /* @__PURE__ */
|
|
24
|
-
"aria-live": "polite"
|
|
25
|
-
|
|
26
|
-
`
|
|
24
|
+
return /* @__PURE__ */ jsx(StyledA11ySelectedValues, {
|
|
25
|
+
"aria-live": "polite",
|
|
26
|
+
children: !isSeparator(focusOption) && showPopover && focusOption && `option ${focusOption.label} focused.${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}
|
|
27
|
+
`
|
|
28
|
+
});
|
|
27
29
|
}, [options, showPopover, focusOptionIdx]);
|
|
28
30
|
};
|
|
29
31
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/A11yFocusedOption.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport AutocompleteContext from '../AutocompleteCTX';\nimport { getSelectableOptions } from '../utils/listHelper';\nimport { DSAutocompleteT } from '../react-desc-prop-types';\nexport const isSeparator = (el: DSAutocompleteT.OptionTypes | undefined): el is DSAutocompleteT.ItemSeparatorOptions =>\n el?.type === 'separator';\n\nexport const StyledA11ySelectedValues = styled.span`\n width: 1px;\n height: 1px;\n position: absolute;\n clip: rect(1px, 1px, 1px, 1px);\n`;\n\nexport const A11yFocusedOption: React.ComponentType = () => {\n const {\n props: { options },\n focusOptionIdx,\n showPopover,\n } = useContext(AutocompleteContext);\n\n return useMemo(() => {\n const selectabledOptions = getSelectableOptions(options);\n const focusOption = options.find((option) => !isSeparator(option) && option.dsId === focusOptionIdx);\n const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n return (\n <StyledA11ySelectedValues aria-live=\"polite\">\n {!isSeparator(focusOption) &&\n showPopover &&\n focusOption &&\n `option ${focusOption.label} focused.${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}\n `}\n </StyledA11ySelectedValues>\n );\n }, [options, showPopover, focusOptionIdx]);\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,cAAc;AACvB,OAAO,yBAAyB;AAChC,SAAS,4BAA4B;AAE9B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS;AAER,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,SAAO,QAAQ,MAAM;AACnB,UAAM,qBAAqB,qBAAqB,OAAO;AACvD,UAAM,cAAc,QAAQ,KAAK,CAAC,WAAW,CAAC,YAAY,MAAM,KAAK,OAAO,SAAS,cAAc;AACnG,UAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,WACE,oBAAC;AAAA,MAAyB,aAAU;AAAA,MACjC,WAAC,YAAY,WAAW,KACvB,eACA,eACA,UAAU,YAAY,iBAAiB,2BAA2B,QAAQ,mBAAmB;AAAA;AAAA,KAEjG;AAAA,EAEJ,GAAG,CAAC,SAAS,aAAa,cAAc,CAAC;AAC3C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import React2, { useCallback, useMemo, useEffect, useContext } from "react";
|
|
3
4
|
import { DSPopperJS } from "@elliemae/ds-popperjs";
|
|
4
5
|
import AutocompleteContext from "../../AutocompleteCTX";
|
|
@@ -32,31 +33,42 @@ const Container = () => {
|
|
|
32
33
|
const input = React2.Children.only(children);
|
|
33
34
|
const childrenWithProps = React2.isValidElement(input) ? React2.cloneElement(input, { "aria-activedescendant": focusOptionIdx }) : input;
|
|
34
35
|
const idList = useMemo(() => `${id ? `${id}-` : ""}listbox`, [id]);
|
|
35
|
-
return /* @__PURE__ */
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
36
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
37
|
+
children: [
|
|
38
|
+
/* @__PURE__ */ jsx(A11yFocusedOption, {}),
|
|
39
|
+
/* @__PURE__ */ jsxs(StyledContainer, {
|
|
40
|
+
id,
|
|
41
|
+
ref: setReferenceElement,
|
|
42
|
+
role: "combobox",
|
|
43
|
+
"aria-autocomplete": "list",
|
|
44
|
+
"aria-controls": "autocomplete-listbox",
|
|
45
|
+
"aria-expanded": showPopover,
|
|
46
|
+
"aria-haspopup": "listbox",
|
|
47
|
+
"aria-owns": idList,
|
|
48
|
+
onKeyDown: onInputKeyDown,
|
|
49
|
+
"data-testid": AutocompleteDataTestid.CONTAINER,
|
|
50
|
+
children: [
|
|
51
|
+
childrenWithProps,
|
|
52
|
+
filter && /* @__PURE__ */ jsx(DSPopperJS, {
|
|
53
|
+
customOffset: [0, 5],
|
|
54
|
+
closeContextMenu: handleCloseMenu,
|
|
55
|
+
referenceElement,
|
|
56
|
+
showPopover,
|
|
57
|
+
startPlacementPreference,
|
|
58
|
+
placementOrderPreference,
|
|
59
|
+
withoutPortal: true,
|
|
60
|
+
withoutArrow: true,
|
|
61
|
+
withoutAnimation: true,
|
|
62
|
+
zIndex: 10,
|
|
63
|
+
children: /* @__PURE__ */ jsx(StyledPopperWrapper, {
|
|
64
|
+
tabIndex: -1,
|
|
65
|
+
children: /* @__PURE__ */ jsx(MenuList, {})
|
|
66
|
+
})
|
|
67
|
+
})
|
|
68
|
+
]
|
|
69
|
+
})
|
|
70
|
+
]
|
|
71
|
+
});
|
|
60
72
|
};
|
|
61
73
|
export {
|
|
62
74
|
Container
|