@elliemae/ds-form-layout-autocomplete 3.55.0-next.8 → 3.55.1
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/parts/container/Container.js +14 -31
- package/dist/cjs/parts/container/Container.js.map +2 -2
- package/dist/cjs/parts/menu-list/MenuList.js +1 -1
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +1 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/utils/listHelper.js +1 -3
- package/dist/cjs/utils/listHelper.js.map +2 -2
- package/dist/esm/parts/container/Container.js +15 -32
- package/dist/esm/parts/container/Container.js.map +2 -2
- package/dist/esm/parts/menu-list/MenuList.js +2 -2
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/utils/listHelper.js +1 -3
- package/dist/esm/utils/listHelper.js.map +2 -2
- package/dist/types/react-desc-prop-types.d.ts +1 -2
- package/package.json +10 -10
- package/dist/cjs/config/useClickOutside.js +0 -52
- package/dist/cjs/config/useClickOutside.js.map +0 -7
- package/dist/esm/config/useClickOutside.js +0 -22
- package/dist/esm/config/useClickOutside.js.map +0 -7
- package/dist/types/config/useClickOutside.d.ts +0 -1
|
@@ -34,16 +34,14 @@ module.exports = __toCommonJS(Container_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_ds_popperjs = require("@elliemae/ds-popperjs");
|
|
37
38
|
var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
|
|
38
|
-
var import_ds_floating_context = require("@elliemae/ds-floating-context");
|
|
39
|
-
var import_ds_system = require("@elliemae/ds-system");
|
|
40
39
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
41
40
|
var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX.js"));
|
|
42
41
|
var import_styled = require("./styled.js");
|
|
43
42
|
var import_menu_list = require("../menu-list/index.js");
|
|
44
43
|
var import_useKeyboardNavigation = require("./useKeyboardNavigation.js");
|
|
45
44
|
var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js");
|
|
46
|
-
var import_useClickOutside = require("../../config/useClickOutside.js");
|
|
47
45
|
const Container = () => {
|
|
48
46
|
const {
|
|
49
47
|
props: {
|
|
@@ -54,17 +52,16 @@ const Container = () => {
|
|
|
54
52
|
filter,
|
|
55
53
|
placementOrderPreference,
|
|
56
54
|
renderInput,
|
|
57
|
-
zIndex,
|
|
58
55
|
...restProps
|
|
59
56
|
},
|
|
60
57
|
isShowingPopover,
|
|
61
|
-
referenceElement,
|
|
62
58
|
setReferenceElement,
|
|
63
59
|
setUserJustSelectedAnOption,
|
|
64
60
|
setUserTypedSomething,
|
|
65
61
|
setUserIsNavigatingWithArrows,
|
|
66
62
|
setForceClosePopover,
|
|
67
63
|
autoCompleteId,
|
|
64
|
+
referenceElement,
|
|
68
65
|
focusOptionIdx
|
|
69
66
|
} = (0, import_react.useContext)(import_AutocompleteCTX.default);
|
|
70
67
|
const handleCloseMenu = (0, import_react.useCallback)(() => {
|
|
@@ -74,26 +71,6 @@ const Container = () => {
|
|
|
74
71
|
const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(restProps);
|
|
75
72
|
const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
|
|
76
73
|
const input = !onValueChange && !renderInput ? import_react.default.Children.only(children) : null;
|
|
77
|
-
const config = (0, import_react.useMemo)(
|
|
78
|
-
() => ({
|
|
79
|
-
placement: "bottom",
|
|
80
|
-
withoutAnimation: true,
|
|
81
|
-
startPlacementPreference,
|
|
82
|
-
placementOrderPreference,
|
|
83
|
-
zIndex,
|
|
84
|
-
customOffset: [0, 5],
|
|
85
|
-
handleCloseMenu,
|
|
86
|
-
portalDOMContainer: document.body,
|
|
87
|
-
externallyControlledIsOpen: isShowingPopover
|
|
88
|
-
}),
|
|
89
|
-
[startPlacementPreference, placementOrderPreference, zIndex, handleCloseMenu, isShowingPopover]
|
|
90
|
-
);
|
|
91
|
-
const { refs, floatingStyles, context } = (0, import_ds_floating_context.useFloatingContext)(config);
|
|
92
|
-
const autoCompleteRef = (0, import_ds_system.mergeRefs)(setReferenceElement, refs.setReference);
|
|
93
|
-
const hideTooltip = (0, import_react.useCallback)(() => {
|
|
94
|
-
setForceClosePopover(true);
|
|
95
|
-
}, [setForceClosePopover]);
|
|
96
|
-
(0, import_useClickOutside.useOnClickOutside)(referenceElement, hideTooltip, refs.floating);
|
|
97
74
|
const onFocusPopoverStatusSync = (0, import_react.useCallback)(() => {
|
|
98
75
|
setForceClosePopover(false);
|
|
99
76
|
setUserJustSelectedAnOption(false);
|
|
@@ -104,7 +81,7 @@ const Container = () => {
|
|
|
104
81
|
import_styled.StyledContainer,
|
|
105
82
|
{
|
|
106
83
|
id,
|
|
107
|
-
innerRef:
|
|
84
|
+
innerRef: setReferenceElement,
|
|
108
85
|
onKeyDown: onInputKeyDown,
|
|
109
86
|
onFocus: onFocusPopoverStatusSync,
|
|
110
87
|
"data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.CONTAINER,
|
|
@@ -139,12 +116,18 @@ const Container = () => {
|
|
|
139
116
|
}
|
|
140
117
|
),
|
|
141
118
|
filter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
142
|
-
|
|
119
|
+
import_ds_popperjs.DSPopperJS,
|
|
143
120
|
{
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
121
|
+
customOffset: [0, 5],
|
|
122
|
+
closeContextMenu: handleCloseMenu,
|
|
123
|
+
referenceElement,
|
|
124
|
+
showPopover: isShowingPopover,
|
|
125
|
+
startPlacementPreference,
|
|
126
|
+
placementOrderPreference,
|
|
127
|
+
withoutPortal: true,
|
|
128
|
+
withoutArrow: true,
|
|
129
|
+
withoutAnimation: true,
|
|
130
|
+
zIndex: 10,
|
|
148
131
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPopperWrapper, { tabIndex: -1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {}) })
|
|
149
132
|
}
|
|
150
133
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\n\nexport const Container = (): JSX.Element => {\n const {\n props: {\n startPlacementPreference,\n onValueChange,\n inputProps,\n children,\n filter,\n placementOrderPreference,\n renderInput,\n ...restProps\n },\n isShowingPopover,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n referenceElement,\n focusOptionIdx,\n } = useContext(AutocompleteContext);\n\n const handleCloseMenu = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n const xStyledProps = useGetXstyledProps(restProps);\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\n\n const onFocusPopoverStatusSync = useCallback(() => {\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n setUserTypedSomething(false);\n setUserIsNavigatingWithArrows(false);\n }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n\n return (\n <>\n {/* The purpose of this div is to always have the 'menu-list-{autoCompleteId}' present in the DOM */}\n {/* Fix for PUI-11627 */}\n {/* {isShowingPopover === false ? <StyledHiddenDiv id={`menu-list-${autoCompleteId}`} /> : null} */}\n\n <StyledContainer\n id={id}\n innerRef={setReferenceElement}\n onKeyDown={onInputKeyDown}\n onFocus={onFocusPopoverStatusSync}\n // aria-owns={`menu-list-${autoCompleteId}`}\n data-testid={AutocompleteDataTestid.CONTAINER}\n {...globalsAttrs}\n {...xStyledProps}\n >\n {input ||\n (renderInput &&\n renderInput({\n value: filter,\n role: 'combobox',\n 'aria-expanded': isShowingPopover,\n 'aria-controls': `menu-list-${autoCompleteId}`,\n 'aria-activedescendant': isShowingPopover ? focusOptionIdx : undefined,\n 'aria-autocomplete': 'list',\n autoComplete: 'off',\n autoCorrect: 'off',\n spellCheck: 'false',\n ...inputProps,\n })) || (\n <DSInputText\n onValueChange={onValueChange}\n value={filter}\n role=\"combobox\"\n aria-expanded={isShowingPopover}\n aria-controls={`menu-list-${autoCompleteId}`}\n aria-activedescendant={isShowingPopover ? focusOptionIdx : undefined}\n aria-autocomplete=\"list\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck=\"false\"\n {...inputProps}\n />\n )}\n {filter && (\n <DSPopperJS\n customOffset={[0, 5]}\n closeContextMenu={handleCloseMenu}\n referenceElement={referenceElement as HTMLElement}\n showPopover={isShowingPopover}\n startPlacementPreference={startPlacementPreference as DSPopperJST.PopperPlacementsT}\n placementOrderPreference={placementOrderPreference as DSPopperJST.PopperPlacementsT[]}\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDnB;AApDJ,mBAA+C;AAC/C,yBAA2B;AAE3B,gCAA4B;AAC5B,8BAA2D;AAC3D,6BAAgC;AAChC,oBAAqD;AACrD,uBAAyB;AACzB,mCAAsC;AACtC,qCAAuC;AAEhC,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,sBAAkB,0BAAY,MAAM;AACxC,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,EAAE,UAAU,IAAI,GAAG,aAAa,QAAI,gDAAuB,SAAS;AAC1E,QAAM,mBAAe,4CAAmB,SAAS;AACjD,QAAM,EAAE,eAAe,QAAI,oDAAsB;AAEjD,QAAM,QAAQ,CAAC,iBAAiB,CAAC,cAAc,aAAAC,QAAM,SAAS,KAAK,QAAQ,IAAI;AAE/E,QAAM,+BAA2B,0BAAY,MAAM;AACjD,yBAAqB,KAAK;AAC1B,gCAA4B,KAAK;AACjC,0BAAsB,KAAK;AAC3B,kCAA8B,KAAK;AAAA,EACrC,GAAG,CAAC,sBAAsB,+BAA+B,6BAA6B,qBAAqB,CAAC;AAE5G,SACE,2EAKE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MAET,eAAa,sDAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,iBACE,eACC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,MAAM;AAAA,UACN,iBAAiB;AAAA,UACjB,iBAAiB,aAAa,cAAc;AAAA,UAC5C,yBAAyB,mBAAmB,iBAAiB;AAAA,UAC7D,qBAAqB;AAAA,UACrB,cAAc;AAAA,UACd,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,GAAG;AAAA,QACL,CAAC,KACD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe,aAAa,cAAc;AAAA,YAC1C,yBAAuB,mBAAmB,iBAAiB;AAAA,YAC3D,qBAAkB;AAAA,YAClB,cAAa;AAAA,YACb,aAAY;AAAA,YACZ,YAAW;AAAA,YACV,GAAG;AAAA;AAAA,QACN;AAAA,QAEH,UACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB,kBAAkB;AAAA,YAClB;AAAA,YACA,aAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB,QAAQ;AAAA,YAER,sDAAC,qCAAoB,UAAU,IAC7B,sDAAC,6BAAS,GACZ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;",
|
|
6
6
|
"names": ["AutocompleteContext", "React"]
|
|
7
7
|
}
|
|
@@ -56,7 +56,7 @@ const MenuList = () => {
|
|
|
56
56
|
const preventMouseDown = (0, import_react.useCallback)((e) => {
|
|
57
57
|
e.preventDefault();
|
|
58
58
|
}, []);
|
|
59
|
-
(0, import_react.
|
|
59
|
+
(0, import_react.useLayoutEffect)(() => {
|
|
60
60
|
if (measure) measure();
|
|
61
61
|
}, [width]);
|
|
62
62
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledListWrapper, { onMouseDown: preventMouseDown, minWidth: referenceElement?.offsetWidth, children: options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVirtualListWrapper, { tabIndex: -1, innerRef: listRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useCallback,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCb;AArCV,
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { options },\n referenceElement,\n inputRef,\n listRef,\n autoCompleteId,\n virtualListHelpers: { totalSize, measure },\n } = useContext(AutocompleteContext);\n\n const ItemRenderer = useItemRenderer();\n const { width } = useOnElementResize(referenceElement);\n\n const handleOnFocus = useCallback(() => {\n inputRef.current?.focus();\n }, [inputRef]);\n\n const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n useLayoutEffect(() => {\n if (measure) measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [width]);\n\n return (\n <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n {options.length > 0 && (\n <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n <StyledList\n // recalculate the key to force the re-render of the list and update virtualization\n key={options.length}\n role=\"listbox\"\n id={`menu-list-${autoCompleteId}`}\n // default aria label until we integrate the aria props on autocomplete\n // this is for the axe core to pass\n aria-label=\"autocomplete option lists\"\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCb;AArCV,mBAAgE;AAChE,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;AAChC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,QAAQ;AAAA,EAC3C,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,gBAAgB;AAErD,QAAM,oBAAgB,0BAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,uBAA4D,0BAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,oCAAgB,MAAM;AACpB,QAAI,QAAS,SAAQ;AAAA,EAEvB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,4CAAC,mCAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,4CAAC,0CAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,sDAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
|
|
6
6
|
"names": ["AutocompleteContext"]
|
|
7
7
|
}
|
|
@@ -40,7 +40,7 @@ const defaultProps = {
|
|
|
40
40
|
withoutPortal: false,
|
|
41
41
|
forceFocusFirstOptionOnType: false,
|
|
42
42
|
startPlacementPreference: "bottom-start",
|
|
43
|
-
placementOrderPreference: ["bottom-start", "
|
|
43
|
+
placementOrderPreference: ["bottom-start", "bottom-end"]
|
|
44
44
|
};
|
|
45
45
|
const DSAutocompletePropTypes = {
|
|
46
46
|
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSInputTextT } from '@elliemae/ds-form-input-text';\n\nexport declare namespace DSAutocompleteT {\n export interface CommonItemOptions {\n dsId: string;\n disabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n // this was never implemented?\n // packages/forms/ds-form-layout-autocomplete/src/parts/menu-list/useItemRenderer.tsx\n // only have code for ItemOption and ItemSectionOptions...\n // export interface ItemSeparatorOptions extends CommonItemOptions {\n // type: 'separator';\n // }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n options: ItemOption[];\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;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n export interface RequiredProps {\n options: OptionTypes[];\n filter: string;\n onSelect: (\n suggestedValue: string,\n e: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement>,\n ) => void;\n }\n export interface DefaultProps {\n startPlacementPreference: string;\n placementOrderPreference: string[];\n withoutPortal: boolean;\n zIndex: number;\n forceFocusFirstOptionOnType: boolean;\n }\n\n export interface OptionalProps {\n children?: React.ReactNode;\n inputProps?: DSInputTextT.Props;\n onValueChange?: (nextValue: string | number, e: React.ChangeEvent<HTMLInputElement>) => void;\n renderInput?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n RequiredProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n Omit<XstyledProps, keyof DefaultProps> {}\n\n export interface InternalProps\n extends DefaultProps,\n RequiredProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n Omit<XstyledProps, keyof DefaultProps> {}\n}\n\nexport const defaultProps: DSAutocompleteT.DefaultProps = {\n zIndex: 10,\n withoutPortal: false,\n forceFocusFirstOptionOnType: false,\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'bottom-end'],\n};\n\nexport const DSAutocompletePropTypes: DSPropTypesSchema<DSAutocompleteT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\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\n .description('React component to apply autocomplete functionality')\n .defaultValue('')\n .deprecated({ version: '3.x' }),\n inputProps: PropTypes.object.description('Props to pass to the input component').defaultValue({}),\n onValueChange: PropTypes.func.description('Function triggered when the value of the input changes').defaultValue(''),\n renderInput: PropTypes.func.description('Function to render the input').defaultValue(''),\n startPlacementPreference: PropTypes.string\n .description('Ideal preference for context placement')\n .defaultValue('bottom-start'),\n placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n .description('Placement preferences for the context menu in order of most preferred to least preferred')\n .defaultValue(\"['bottom-start', 'bottom-end']\"),\n withoutPortal: PropTypes.bool\n .description('Whether to render the context menu in a react portal or next to the input DOM element')\n .defaultValue('false (next to the input)'),\n forceFocusFirstOptionOnType: PropTypes.bool\n .description(\n 'Whether to focus the first option when typing (NOT RECOMMENDED AND BREAKING A11Y STANDARDS + ALL USERS USABILITY)',\n )\n .defaultValue('false'),\n};\n\nexport const DSAutocompletePropTypesSchema = DSAutocompletePropTypes as unknown as ValidationMap<DSAutocompleteT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAAuE;AA0EhE,MAAM,eAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,6BAA6B;AAAA,EAC7B,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,YAAY;AACzD;AAEO,MAAM,0BAAoE;AAAA,EAC/E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,kCAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,kCAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,kCAAU,KACjB,YAAY,qDAAqD,EACjE,aAAa,EAAE,EACf,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,YAAY,kCAAU,OAAO,YAAY,sCAAsC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChG,eAAe,kCAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,EAAE;AAAA,EACnH,aAAa,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,EAAE;AAAA,EACvF,0BAA0B,kCAAU,OACjC,YAAY,wCAAwC,EACpD,aAAa,cAAc;AAAA,EAC9B,0BAA0B,kCAAU,QAAQ,kCAAU,MAAM,EACzD,YAAY,0FAA0F,EACtG,aAAa,gCAAgC;AAAA,EAChD,eAAe,kCAAU,KACtB,YAAY,uFAAuF,EACnG,aAAa,2BAA2B;AAAA,EAC3C,6BAA6B,kCAAU,KACpC;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AACzB;AAEO,MAAM,gCAAgC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,10 +43,8 @@ const getOptions = (options) => options ? options.filter((option) => option.type
|
|
|
43
43
|
const isSelectedValueEmpty = (value) => Array.isArray(value) ? value.length === 0 : !value;
|
|
44
44
|
const isSelectedValueMultiple = (value) => Array.isArray(value);
|
|
45
45
|
const findInCircularList = (list, from, criteria, step = 1) => {
|
|
46
|
-
let i = from
|
|
47
|
-
while (i !== from) {
|
|
46
|
+
for (let i = (from + step + list.length) % list.length; i !== from && from >= -1; i = (i + step + list.length) % list.length) {
|
|
48
47
|
if (criteria(list[i])) return i;
|
|
49
|
-
i = (i + step + list.length) % list.length;
|
|
50
48
|
}
|
|
51
49
|
return from;
|
|
52
50
|
};
|
|
@@ -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": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const getSelectableOptions = (\n options: Array<DSAutocompleteT.OptionTypes>,\n): 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\nexport const isOptionFocuseable = (opt: DSAutocompleteT.OptionTypes): boolean =>\n !['section', 'separator'].includes(opt.type);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,uBAAuB,CAClC,YAEA,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,QAAQ,IACtB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;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,CAAC,EAAE,IAAI,GAAG;AACvD,aAAO,QAAQ,CAAC,EAAE;AAAA,IACpB;AACF,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,QACjC,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import React2, { useCallback,
|
|
3
|
+
import React2, { useCallback, useContext } from "react";
|
|
4
|
+
import { DSPopperJS } from "@elliemae/ds-popperjs";
|
|
4
5
|
import { DSInputText } from "@elliemae/ds-form-input-text";
|
|
5
|
-
import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
|
|
6
|
-
import { mergeRefs } from "@elliemae/ds-system";
|
|
7
6
|
import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
|
|
8
7
|
import AutocompleteContext from "../../AutocompleteCTX.js";
|
|
9
8
|
import { StyledContainer, StyledPopperWrapper } from "./styled.js";
|
|
10
9
|
import { MenuList } from "../menu-list/index.js";
|
|
11
10
|
import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
|
|
12
11
|
import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
|
|
13
|
-
import { useOnClickOutside } from "../../config/useClickOutside.js";
|
|
14
12
|
const Container = () => {
|
|
15
13
|
const {
|
|
16
14
|
props: {
|
|
@@ -21,17 +19,16 @@ const Container = () => {
|
|
|
21
19
|
filter,
|
|
22
20
|
placementOrderPreference,
|
|
23
21
|
renderInput,
|
|
24
|
-
zIndex,
|
|
25
22
|
...restProps
|
|
26
23
|
},
|
|
27
24
|
isShowingPopover,
|
|
28
|
-
referenceElement,
|
|
29
25
|
setReferenceElement,
|
|
30
26
|
setUserJustSelectedAnOption,
|
|
31
27
|
setUserTypedSomething,
|
|
32
28
|
setUserIsNavigatingWithArrows,
|
|
33
29
|
setForceClosePopover,
|
|
34
30
|
autoCompleteId,
|
|
31
|
+
referenceElement,
|
|
35
32
|
focusOptionIdx
|
|
36
33
|
} = useContext(AutocompleteContext);
|
|
37
34
|
const handleCloseMenu = useCallback(() => {
|
|
@@ -41,26 +38,6 @@ const Container = () => {
|
|
|
41
38
|
const xStyledProps = useGetXstyledProps(restProps);
|
|
42
39
|
const { onInputKeyDown } = useKeyboardNavigation();
|
|
43
40
|
const input = !onValueChange && !renderInput ? React2.Children.only(children) : null;
|
|
44
|
-
const config = useMemo(
|
|
45
|
-
() => ({
|
|
46
|
-
placement: "bottom",
|
|
47
|
-
withoutAnimation: true,
|
|
48
|
-
startPlacementPreference,
|
|
49
|
-
placementOrderPreference,
|
|
50
|
-
zIndex,
|
|
51
|
-
customOffset: [0, 5],
|
|
52
|
-
handleCloseMenu,
|
|
53
|
-
portalDOMContainer: document.body,
|
|
54
|
-
externallyControlledIsOpen: isShowingPopover
|
|
55
|
-
}),
|
|
56
|
-
[startPlacementPreference, placementOrderPreference, zIndex, handleCloseMenu, isShowingPopover]
|
|
57
|
-
);
|
|
58
|
-
const { refs, floatingStyles, context } = useFloatingContext(config);
|
|
59
|
-
const autoCompleteRef = mergeRefs(setReferenceElement, refs.setReference);
|
|
60
|
-
const hideTooltip = useCallback(() => {
|
|
61
|
-
setForceClosePopover(true);
|
|
62
|
-
}, [setForceClosePopover]);
|
|
63
|
-
useOnClickOutside(referenceElement, hideTooltip, refs.floating);
|
|
64
41
|
const onFocusPopoverStatusSync = useCallback(() => {
|
|
65
42
|
setForceClosePopover(false);
|
|
66
43
|
setUserJustSelectedAnOption(false);
|
|
@@ -71,7 +48,7 @@ const Container = () => {
|
|
|
71
48
|
StyledContainer,
|
|
72
49
|
{
|
|
73
50
|
id,
|
|
74
|
-
innerRef:
|
|
51
|
+
innerRef: setReferenceElement,
|
|
75
52
|
onKeyDown: onInputKeyDown,
|
|
76
53
|
onFocus: onFocusPopoverStatusSync,
|
|
77
54
|
"data-testid": AutocompleteDataTestid.CONTAINER,
|
|
@@ -106,12 +83,18 @@ const Container = () => {
|
|
|
106
83
|
}
|
|
107
84
|
),
|
|
108
85
|
filter && /* @__PURE__ */ jsx(
|
|
109
|
-
|
|
86
|
+
DSPopperJS,
|
|
110
87
|
{
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
88
|
+
customOffset: [0, 5],
|
|
89
|
+
closeContextMenu: handleCloseMenu,
|
|
90
|
+
referenceElement,
|
|
91
|
+
showPopover: isShowingPopover,
|
|
92
|
+
startPlacementPreference,
|
|
93
|
+
placementOrderPreference,
|
|
94
|
+
withoutPortal: true,
|
|
95
|
+
withoutArrow: true,
|
|
96
|
+
withoutAnimation: true,
|
|
97
|
+
zIndex: 10,
|
|
115
98
|
children: /* @__PURE__ */ jsx(StyledPopperWrapper, { tabIndex: -1, children: /* @__PURE__ */ jsx(MenuList, {}) })
|
|
116
99
|
}
|
|
117
100
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\n\nexport const Container = (): JSX.Element => {\n const {\n props: {\n startPlacementPreference,\n onValueChange,\n inputProps,\n children,\n filter,\n placementOrderPreference,\n renderInput,\n ...restProps\n },\n isShowingPopover,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n referenceElement,\n focusOptionIdx,\n } = useContext(AutocompleteContext);\n\n const handleCloseMenu = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n const xStyledProps = useGetXstyledProps(restProps);\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\n\n const onFocusPopoverStatusSync = useCallback(() => {\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n setUserTypedSomething(false);\n setUserIsNavigatingWithArrows(false);\n }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n\n return (\n <>\n {/* The purpose of this div is to always have the 'menu-list-{autoCompleteId}' present in the DOM */}\n {/* Fix for PUI-11627 */}\n {/* {isShowingPopover === false ? <StyledHiddenDiv id={`menu-list-${autoCompleteId}`} /> : null} */}\n\n <StyledContainer\n id={id}\n innerRef={setReferenceElement}\n onKeyDown={onInputKeyDown}\n onFocus={onFocusPopoverStatusSync}\n // aria-owns={`menu-list-${autoCompleteId}`}\n data-testid={AutocompleteDataTestid.CONTAINER}\n {...globalsAttrs}\n {...xStyledProps}\n >\n {input ||\n (renderInput &&\n renderInput({\n value: filter,\n role: 'combobox',\n 'aria-expanded': isShowingPopover,\n 'aria-controls': `menu-list-${autoCompleteId}`,\n 'aria-activedescendant': isShowingPopover ? focusOptionIdx : undefined,\n 'aria-autocomplete': 'list',\n autoComplete: 'off',\n autoCorrect: 'off',\n spellCheck: 'false',\n ...inputProps,\n })) || (\n <DSInputText\n onValueChange={onValueChange}\n value={filter}\n role=\"combobox\"\n aria-expanded={isShowingPopover}\n aria-controls={`menu-list-${autoCompleteId}`}\n aria-activedescendant={isShowingPopover ? focusOptionIdx : undefined}\n aria-autocomplete=\"list\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck=\"false\"\n {...inputProps}\n />\n )}\n {filter && (\n <DSPopperJS\n customOffset={[0, 5]}\n closeContextMenu={handleCloseMenu}\n referenceElement={referenceElement as HTMLElement}\n showPopover={isShowingPopover}\n startPlacementPreference={startPlacementPreference as DSPopperJST.PopperPlacementsT}\n placementOrderPreference={placementOrderPreference as DSPopperJST.PopperPlacementsT[]}\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,YAAY,WAAW;ACsDnB,mBA6BQ,KAxBN,YALF;AApDJ,OAAOA,UAAS,aAAa,kBAAkB;AAC/C,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB,0BAA0B;AAC3D,OAAO,yBAAyB;AAChC,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AAEhC,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,QAAM,kBAAkB,YAAY,MAAM;AACxC,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,EAAE,UAAU,IAAI,GAAG,aAAa,IAAI,uBAAuB,SAAS;AAC1E,QAAM,eAAe,mBAAmB,SAAS;AACjD,QAAM,EAAE,eAAe,IAAI,sBAAsB;AAEjD,QAAM,QAAQ,CAAC,iBAAiB,CAAC,cAAcA,OAAM,SAAS,KAAK,QAAQ,IAAI;AAE/E,QAAM,2BAA2B,YAAY,MAAM;AACjD,yBAAqB,KAAK;AAC1B,gCAA4B,KAAK;AACjC,0BAAsB,KAAK;AAC3B,kCAA8B,KAAK;AAAA,EACrC,GAAG,CAAC,sBAAsB,+BAA+B,6BAA6B,qBAAqB,CAAC;AAE5G,SACE,gCAKE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MAET,eAAa,uBAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,iBACE,eACC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,MAAM;AAAA,UACN,iBAAiB;AAAA,UACjB,iBAAiB,aAAa,cAAc;AAAA,UAC5C,yBAAyB,mBAAmB,iBAAiB;AAAA,UAC7D,qBAAqB;AAAA,UACrB,cAAc;AAAA,UACd,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,GAAG;AAAA,QACL,CAAC,KACD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe,aAAa,cAAc;AAAA,YAC1C,yBAAuB,mBAAmB,iBAAiB;AAAA,YAC3D,qBAAkB;AAAA,YAClB,cAAa;AAAA,YACb,aAAY;AAAA,YACZ,YAAW;AAAA,YACV,GAAG;AAAA;AAAA,QACN;AAAA,QAEH,UACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB,kBAAkB;AAAA,YAClB;AAAA,YACA,aAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB,QAAQ;AAAA,YAER,8BAAC,uBAAoB,UAAU,IAC7B,8BAAC,YAAS,GACZ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useContext, useCallback,
|
|
3
|
+
import { useContext, useCallback, useLayoutEffect } from "react";
|
|
4
4
|
import { StyledListWrapper, StyledList, StyledVirtualListWrapper } from "./styled.js";
|
|
5
5
|
import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
|
|
6
6
|
import AutocompleteContext from "../../AutocompleteCTX.js";
|
|
@@ -23,7 +23,7 @@ const MenuList = () => {
|
|
|
23
23
|
const preventMouseDown = useCallback((e) => {
|
|
24
24
|
e.preventDefault();
|
|
25
25
|
}, []);
|
|
26
|
-
|
|
26
|
+
useLayoutEffect(() => {
|
|
27
27
|
if (measure) measure();
|
|
28
28
|
}, [width]);
|
|
29
29
|
return /* @__PURE__ */ jsx(StyledListWrapper, { onMouseDown: preventMouseDown, minWidth: referenceElement?.offsetWidth, children: options.length > 0 && /* @__PURE__ */ jsx(StyledVirtualListWrapper, { tabIndex: -1, innerRef: listRef, children: /* @__PURE__ */ jsx(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACqCb;AArCV,SAAgB,YAAY,aAAa,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { options },\n referenceElement,\n inputRef,\n listRef,\n autoCompleteId,\n virtualListHelpers: { totalSize, measure },\n } = useContext(AutocompleteContext);\n\n const ItemRenderer = useItemRenderer();\n const { width } = useOnElementResize(referenceElement);\n\n const handleOnFocus = useCallback(() => {\n inputRef.current?.focus();\n }, [inputRef]);\n\n const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n useLayoutEffect(() => {\n if (measure) measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [width]);\n\n return (\n <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n {options.length > 0 && (\n <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n <StyledList\n // recalculate the key to force the re-render of the list and update virtualization\n key={options.length}\n role=\"listbox\"\n id={`menu-list-${autoCompleteId}`}\n // default aria label until we integrate the aria props on autocomplete\n // this is for the axe core to pass\n aria-label=\"autocomplete option lists\"\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,YAAY,WAAW;ACqCb;AArCV,SAAgB,YAAY,aAAa,uBAAuB;AAChE,SAAS,mBAAmB,YAAY,gCAAgC;AACxE,SAAS,8BAA8B;AACvC,OAAO,yBAAyB;AAChC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,QAAQ;AAAA,EAC3C,IAAI,WAAW,mBAAmB;AAElC,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,MAAM,IAAI,mBAAmB,gBAAgB;AAErD,QAAM,gBAAgB,YAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,mBAA4D,YAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,kBAAgB,MAAM;AACpB,QAAI,QAAS,SAAQ;AAAA,EAEvB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,oBAAC,qBAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,oBAAC,4BAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,uBAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,7 @@ const defaultProps = {
|
|
|
5
5
|
withoutPortal: false,
|
|
6
6
|
forceFocusFirstOptionOnType: false,
|
|
7
7
|
startPlacementPreference: "bottom-start",
|
|
8
|
-
placementOrderPreference: ["bottom-start", "
|
|
8
|
+
placementOrderPreference: ["bottom-start", "bottom-end"]
|
|
9
9
|
};
|
|
10
10
|
const DSAutocompletePropTypes = {
|
|
11
11
|
...globalAttributesPropTypes,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSInputTextT } from '@elliemae/ds-form-input-text';\n\nexport declare namespace DSAutocompleteT {\n export interface CommonItemOptions {\n dsId: string;\n disabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n // this was never implemented?\n // packages/forms/ds-form-layout-autocomplete/src/parts/menu-list/useItemRenderer.tsx\n // only have code for ItemOption and ItemSectionOptions...\n // export interface ItemSeparatorOptions extends CommonItemOptions {\n // type: 'separator';\n // }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n options: ItemOption[];\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;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n export interface RequiredProps {\n options: OptionTypes[];\n filter: string;\n onSelect: (\n suggestedValue: string,\n e: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement>,\n ) => void;\n }\n export interface DefaultProps {\n startPlacementPreference: string;\n placementOrderPreference: string[];\n withoutPortal: boolean;\n zIndex: number;\n forceFocusFirstOptionOnType: boolean;\n }\n\n export interface OptionalProps {\n children?: React.ReactNode;\n inputProps?: DSInputTextT.Props;\n onValueChange?: (nextValue: string | number, e: React.ChangeEvent<HTMLInputElement>) => void;\n renderInput?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n RequiredProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n Omit<XstyledProps, keyof DefaultProps> {}\n\n export interface InternalProps\n extends DefaultProps,\n RequiredProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n Omit<XstyledProps, keyof DefaultProps> {}\n}\n\nexport const defaultProps: DSAutocompleteT.DefaultProps = {\n zIndex: 10,\n withoutPortal: false,\n forceFocusFirstOptionOnType: false,\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'bottom-end'],\n};\n\nexport const DSAutocompletePropTypes: DSPropTypesSchema<DSAutocompleteT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\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\n .description('React component to apply autocomplete functionality')\n .defaultValue('')\n .deprecated({ version: '3.x' }),\n inputProps: PropTypes.object.description('Props to pass to the input component').defaultValue({}),\n onValueChange: PropTypes.func.description('Function triggered when the value of the input changes').defaultValue(''),\n renderInput: PropTypes.func.description('Function to render the input').defaultValue(''),\n startPlacementPreference: PropTypes.string\n .description('Ideal preference for context placement')\n .defaultValue('bottom-start'),\n placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n .description('Placement preferences for the context menu in order of most preferred to least preferred')\n .defaultValue(\"['bottom-start', 'bottom-end']\"),\n withoutPortal: PropTypes.bool\n .description('Whether to render the context menu in a react portal or next to the input DOM element')\n .defaultValue('false (next to the input)'),\n forceFocusFirstOptionOnType: PropTypes.bool\n .description(\n 'Whether to focus the first option when typing (NOT RECOMMENDED AND BREAKING A11Y STANDARDS + ALL USERS USABILITY)',\n )\n .defaultValue('false'),\n};\n\nexport const DSAutocompletePropTypesSchema = DSAutocompletePropTypes as unknown as ValidationMap<DSAutocompleteT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,2BAA2B,WAAW,wBAAwB;AA0EhE,MAAM,eAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,6BAA6B;AAAA,EAC7B,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,YAAY;AACzD;AAEO,MAAM,0BAAoE;AAAA,EAC/E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,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,KACjB,YAAY,qDAAqD,EACjE,aAAa,EAAE,EACf,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,YAAY,UAAU,OAAO,YAAY,sCAAsC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChG,eAAe,UAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,EAAE;AAAA,EACnH,aAAa,UAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,EAAE;AAAA,EACvF,0BAA0B,UAAU,OACjC,YAAY,wCAAwC,EACpD,aAAa,cAAc;AAAA,EAC9B,0BAA0B,UAAU,QAAQ,UAAU,MAAM,EACzD,YAAY,0FAA0F,EACtG,aAAa,gCAAgC;AAAA,EAChD,eAAe,UAAU,KACtB,YAAY,uFAAuF,EACnG,aAAa,2BAA2B;AAAA,EAC3C,6BAA6B,UAAU,KACpC;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AACzB;AAEO,MAAM,gCAAgC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,10 +4,8 @@ const getOptions = (options) => options ? options.filter((option) => option.type
|
|
|
4
4
|
const isSelectedValueEmpty = (value) => Array.isArray(value) ? value.length === 0 : !value;
|
|
5
5
|
const isSelectedValueMultiple = (value) => Array.isArray(value);
|
|
6
6
|
const findInCircularList = (list, from, criteria, step = 1) => {
|
|
7
|
-
let i = from
|
|
8
|
-
while (i !== from) {
|
|
7
|
+
for (let i = (from + step + list.length) % list.length; i !== from && from >= -1; i = (i + step + list.length) % list.length) {
|
|
9
8
|
if (criteria(list[i])) return i;
|
|
10
|
-
i = (i + step + list.length) % list.length;
|
|
11
9
|
}
|
|
12
10
|
return from;
|
|
13
11
|
};
|
|
@@ -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", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const getSelectableOptions = (\n options: Array<DSAutocompleteT.OptionTypes>,\n): 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\nexport const isOptionFocuseable = (opt: DSAutocompleteT.OptionTypes): boolean =>\n !['section', 'separator'].includes(opt.type);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEhB,MAAM,uBAAuB,CAClC,YAEA,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,QAAQ,IACtB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;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,CAAC,EAAE,IAAI,GAAG;AACvD,aAAO,QAAQ,CAAC,EAAE;AAAA,IACpB;AACF,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,QACjC,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
|
|
3
|
-
import type { DSHookFloatingContextT } from '@elliemae/ds-floating-context';
|
|
4
3
|
import type { DSInputTextT } from '@elliemae/ds-form-input-text';
|
|
5
4
|
export declare namespace DSAutocompleteT {
|
|
6
5
|
interface CommonItemOptions {
|
|
@@ -30,7 +29,7 @@ export declare namespace DSAutocompleteT {
|
|
|
30
29
|
}
|
|
31
30
|
interface DefaultProps {
|
|
32
31
|
startPlacementPreference: string;
|
|
33
|
-
placementOrderPreference:
|
|
32
|
+
placementOrderPreference: string[];
|
|
34
33
|
withoutPortal: boolean;
|
|
35
34
|
zIndex: number;
|
|
36
35
|
forceFocusFirstOptionOnType: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-layout-autocomplete",
|
|
3
|
-
"version": "3.55.
|
|
3
|
+
"version": "3.55.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Form Layout - Autocomplete",
|
|
6
6
|
"files": [
|
|
@@ -39,12 +39,12 @@
|
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"styled-components": "~5.3.9",
|
|
41
41
|
"uid": "~2.0.1",
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-system": "3.55.
|
|
47
|
-
"@elliemae/ds-
|
|
42
|
+
"@elliemae/ds-grid": "3.55.1",
|
|
43
|
+
"@elliemae/ds-form-input-text": "3.55.1",
|
|
44
|
+
"@elliemae/ds-menu-items": "3.55.1",
|
|
45
|
+
"@elliemae/ds-props-helpers": "3.55.1",
|
|
46
|
+
"@elliemae/ds-system": "3.55.1",
|
|
47
|
+
"@elliemae/ds-popperjs": "3.55.1"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@elliemae/pui-cli": "9.0.0-next.65",
|
|
@@ -52,9 +52,9 @@
|
|
|
52
52
|
"jest": "~29.7.0",
|
|
53
53
|
"styled-components": "~5.3.9",
|
|
54
54
|
"styled-system": "^5.1.5",
|
|
55
|
-
"@elliemae/ds-form-input-text": "3.55.
|
|
56
|
-
"@elliemae/ds-
|
|
57
|
-
"@elliemae/ds-
|
|
55
|
+
"@elliemae/ds-form-input-text": "3.55.1",
|
|
56
|
+
"@elliemae/ds-test-utils": "3.55.1",
|
|
57
|
+
"@elliemae/ds-monorepo-devops": "3.55.1"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
60
|
"@elliemae/pui-theme": "~2.13.0",
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var useClickOutside_exports = {};
|
|
30
|
-
__export(useClickOutside_exports, {
|
|
31
|
-
useOnClickOutside: () => useOnClickOutside
|
|
32
|
-
});
|
|
33
|
-
module.exports = __toCommonJS(useClickOutside_exports);
|
|
34
|
-
var React = __toESM(require("react"));
|
|
35
|
-
var import_react = require("react");
|
|
36
|
-
function useOnClickOutside(ref, cb, excludeNode) {
|
|
37
|
-
(0, import_react.useEffect)(() => {
|
|
38
|
-
const listener = (event) => {
|
|
39
|
-
if (!ref || ref?.contains?.(event.target) || excludeNode && excludeNode.contains(event.target)) {
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
cb(event);
|
|
43
|
-
};
|
|
44
|
-
document.addEventListener("mousedown", listener);
|
|
45
|
-
document.addEventListener("touchstart", listener);
|
|
46
|
-
return () => {
|
|
47
|
-
document.removeEventListener("mousedown", listener);
|
|
48
|
-
document.removeEventListener("touchstart", listener);
|
|
49
|
-
};
|
|
50
|
-
}, [ref, cb, excludeNode]);
|
|
51
|
-
}
|
|
52
|
-
//# sourceMappingURL=useClickOutside.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/config/useClickOutside.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useEffect } from 'react';\n\nexport function useOnClickOutside<T extends Node, CbT extends (event: Event) => void, Z extends Node>(\n ref: T | null,\n cb: CbT,\n excludeNode: Z | null,\n): void {\n useEffect(() => {\n const listener = (event: MouseEvent | TouchEvent) => {\n if (\n !ref ||\n ref?.contains?.(event.target as Node) ||\n (excludeNode && excludeNode.contains(event.target as Node))\n ) {\n return;\n }\n cb(event);\n };\n document.addEventListener('mousedown', listener);\n document.addEventListener('touchstart', listener);\n return () => {\n document.removeEventListener('mousedown', listener);\n document.removeEventListener('touchstart', listener);\n };\n }, [ref, cb, excludeNode]);\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0B;AAEnB,SAAS,kBACd,KACA,IACA,aACM;AACN,8BAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAmC;AACnD,UACE,CAAC,OACD,KAAK,WAAW,MAAM,MAAc,KACnC,eAAe,YAAY,SAAS,MAAM,MAAc,GACzD;AACA;AAAA,MACF;AACA,SAAG,KAAK;AAAA,IACV;AACA,aAAS,iBAAiB,aAAa,QAAQ;AAC/C,aAAS,iBAAiB,cAAc,QAAQ;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,QAAQ;AAClD,eAAS,oBAAoB,cAAc,QAAQ;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,IAAI,WAAW,CAAC;AAC3B;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { useEffect } from "react";
|
|
3
|
-
function useOnClickOutside(ref, cb, excludeNode) {
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
const listener = (event) => {
|
|
6
|
-
if (!ref || ref?.contains?.(event.target) || excludeNode && excludeNode.contains(event.target)) {
|
|
7
|
-
return;
|
|
8
|
-
}
|
|
9
|
-
cb(event);
|
|
10
|
-
};
|
|
11
|
-
document.addEventListener("mousedown", listener);
|
|
12
|
-
document.addEventListener("touchstart", listener);
|
|
13
|
-
return () => {
|
|
14
|
-
document.removeEventListener("mousedown", listener);
|
|
15
|
-
document.removeEventListener("touchstart", listener);
|
|
16
|
-
};
|
|
17
|
-
}, [ref, cb, excludeNode]);
|
|
18
|
-
}
|
|
19
|
-
export {
|
|
20
|
-
useOnClickOutside
|
|
21
|
-
};
|
|
22
|
-
//# sourceMappingURL=useClickOutside.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useClickOutside.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect } from 'react';\n\nexport function useOnClickOutside<T extends Node, CbT extends (event: Event) => void, Z extends Node>(\n ref: T | null,\n cb: CbT,\n excludeNode: Z | null,\n): void {\n useEffect(() => {\n const listener = (event: MouseEvent | TouchEvent) => {\n if (\n !ref ||\n ref?.contains?.(event.target as Node) ||\n (excludeNode && excludeNode.contains(event.target as Node))\n ) {\n return;\n }\n cb(event);\n };\n document.addEventListener('mousedown', listener);\n document.addEventListener('touchstart', listener);\n return () => {\n document.removeEventListener('mousedown', listener);\n document.removeEventListener('touchstart', listener);\n };\n }, [ref, cb, excludeNode]);\n}\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAEnB,SAAS,kBACd,KACA,IACA,aACM;AACN,YAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAmC;AACnD,UACE,CAAC,OACD,KAAK,WAAW,MAAM,MAAc,KACnC,eAAe,YAAY,SAAS,MAAM,MAAc,GACzD;AACA;AAAA,MACF;AACA,SAAG,KAAK;AAAA,IACV;AACA,aAAS,iBAAiB,aAAa,QAAQ;AAC/C,aAAS,iBAAiB,cAAc,QAAQ;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,QAAQ;AAClD,eAAS,oBAAoB,cAAc,QAAQ;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,IAAI,WAAW,CAAC;AAC3B;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function useOnClickOutside<T extends Node, CbT extends (event: Event) => void, Z extends Node>(ref: T | null, cb: CbT, excludeNode: Z | null): void;
|