@elliemae/ds-form-layout-autocomplete 3.61.5-rc.6 → 3.61.5
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 +10 -13
- package/dist/cjs/parts/container/Container.js.map +2 -2
- package/dist/cjs/parts/menu-list/MenuList.js +3 -1
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/parts/container/Container.js +11 -14
- package/dist/esm/parts/container/Container.js.map +2 -2
- package/dist/esm/parts/menu-list/MenuList.js +3 -1
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/types/tests/playwright/DSAutocomplete.pui18470.test.playwright.d.ts +1 -0
- package/dist/types/tests/playwright/NearBottomStory.d.ts +2 -0
- 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
|
@@ -43,7 +43,6 @@ var import_styled = require("./styled.js");
|
|
|
43
43
|
var import_menu_list = require("../menu-list/index.js");
|
|
44
44
|
var import_useKeyboardNavigation = require("./useKeyboardNavigation.js");
|
|
45
45
|
var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js");
|
|
46
|
-
var import_useClickOutside = require("../../config/useClickOutside.js");
|
|
47
46
|
var import_constants = require("../../constants/index.js");
|
|
48
47
|
const StyledInputText = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, {
|
|
49
48
|
name: import_constants.DSAutocompleteName,
|
|
@@ -73,13 +72,13 @@ const Container = () => {
|
|
|
73
72
|
autoCompleteId,
|
|
74
73
|
focusOptionIdx
|
|
75
74
|
} = (0, import_react.useContext)(import_AutocompleteCTX.default);
|
|
76
|
-
const handleCloseMenu = (0, import_react.useCallback)(() => {
|
|
77
|
-
setForceClosePopover(true);
|
|
78
|
-
}, [setForceClosePopover]);
|
|
79
75
|
const { onSelect, id, ...globalsAttrs } = (0, import_ds_props_helpers.useGetGlobalAttributes)(restProps);
|
|
80
76
|
const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(restProps);
|
|
81
77
|
const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
|
|
82
78
|
const input = !onValueChange && !renderInput ? import_react.default.Children.only(children) : null;
|
|
79
|
+
const hideTooltip = (0, import_react.useCallback)(() => {
|
|
80
|
+
setForceClosePopover(true);
|
|
81
|
+
}, [setForceClosePopover]);
|
|
83
82
|
const config = (0, import_react.useMemo)(
|
|
84
83
|
() => ({
|
|
85
84
|
placement: "bottom",
|
|
@@ -88,17 +87,15 @@ const Container = () => {
|
|
|
88
87
|
placementOrderPreference,
|
|
89
88
|
zIndex,
|
|
90
89
|
customOffset: [0, 5],
|
|
91
|
-
|
|
92
|
-
|
|
90
|
+
externallyControlledIsOpen: isShowingPopover,
|
|
91
|
+
// referenceElement comes from context as state — pass it directly so position can be
|
|
92
|
+
// computed on the first render (no useEffect round-trip, no visibility:hidden race).
|
|
93
|
+
externalReferenceElement: referenceElement,
|
|
94
|
+
onClickOutside: hideTooltip
|
|
93
95
|
}),
|
|
94
|
-
[startPlacementPreference, placementOrderPreference, zIndex,
|
|
96
|
+
[startPlacementPreference, placementOrderPreference, zIndex, isShowingPopover, referenceElement, hideTooltip]
|
|
95
97
|
);
|
|
96
98
|
const { refs, floatingStyles, context } = (0, import_ds_floating_context.useFloatingContext)(config);
|
|
97
|
-
const autoCompleteRef = (0, import_ds_system.mergeRefs)(setReferenceElement, refs.setReference);
|
|
98
|
-
const hideTooltip = (0, import_react.useCallback)(() => {
|
|
99
|
-
setForceClosePopover(true);
|
|
100
|
-
}, [setForceClosePopover]);
|
|
101
|
-
(0, import_useClickOutside.useOnClickOutside)(referenceElement, hideTooltip, refs.floating);
|
|
102
99
|
const onFocusPopoverStatusSync = (0, import_react.useCallback)(() => {
|
|
103
100
|
setForceClosePopover(false);
|
|
104
101
|
setUserJustSelectedAnOption(false);
|
|
@@ -109,7 +106,7 @@ const Container = () => {
|
|
|
109
106
|
import_styled.StyledContainer,
|
|
110
107
|
{
|
|
111
108
|
id,
|
|
112
|
-
innerRef:
|
|
109
|
+
innerRef: setReferenceElement,
|
|
113
110
|
onKeyDown: onInputKeyDown,
|
|
114
111
|
onFocus: onFocusPopoverStatusSync,
|
|
115
112
|
"data-testid": import_AutocompleteDataTestids.AutocompleteDataTestid.CONTAINER,
|
|
@@ -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, useMemo, useContext } from 'react';\nimport { styled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\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';\nimport { DSAutocompleteName, DSAutocompleteSlots } from '../../constants/index.js';\n\nconst StyledInputText = styled(DSInputText, {\n name: DSAutocompleteName,\n slot: DSAutocompleteSlots.INPUT,\n})``;\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 zIndex,\n ...restProps\n },\n isShowingPopover,\n referenceElement,\n getOwnerProps,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n focusOptionIdx,\n } = useContext(AutocompleteContext);\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 hideTooltip = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const config = useMemo(\n () => ({\n placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n withoutAnimation: true,\n startPlacementPreference,\n placementOrderPreference,\n zIndex,\n customOffset: [0, 5] as [number, number],\n externallyControlledIsOpen: isShowingPopover,\n // referenceElement comes from context as state \u2014 pass it directly so position can be\n // computed on the first render (no useEffect round-trip, no visibility:hidden race).\n externalReferenceElement: referenceElement,\n onClickOutside: hideTooltip,\n }),\n [startPlacementPreference, placementOrderPreference, zIndex, isShowingPopover, referenceElement, hideTooltip],\n );\n\n const { refs, floatingStyles, context } = useFloatingContext(config);\n\n const onFocusPopoverStatusSync = useCallback(() => {\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n setUserTypedSomething(false);\n setUserIsNavigatingWithArrows(false);\n }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\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 getOwnerProps={getOwnerProps}\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 <StyledInputText\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 getOwnerProps={getOwnerProps}\n />\n )}\n {filter && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n floatingStyles={floatingStyles}\n isOpen={isShowingPopover}\n context={context}\n >\n <StyledPopperWrapper tabIndex={-1}>\n <MenuList />\n </StyledPopperWrapper>\n </FloatingWrapper>\n )}\n </StyledContainer>\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["AutocompleteContext", "React"]
|
|
7
7
|
}
|
|
@@ -58,7 +58,9 @@ const MenuList = () => {
|
|
|
58
58
|
e.preventDefault();
|
|
59
59
|
}, []);
|
|
60
60
|
(0, import_react.useEffect)(() => {
|
|
61
|
-
if (measure)
|
|
61
|
+
if (!measure) return void 0;
|
|
62
|
+
const rafId = requestAnimationFrame(() => measure());
|
|
63
|
+
return () => cancelAnimationFrame(rafId);
|
|
62
64
|
}, [width]);
|
|
63
65
|
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)(
|
|
64
66
|
import_styled.StyledList,
|
|
@@ -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, useEffect } 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 getOwnerProps,\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 useEffect(() => {\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 getOwnerProps={getOwnerProps}\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;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useCallback, useEffect } 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 getOwnerProps,\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 useEffect(() => {\n if (!measure) return undefined;\n // Defer measure() to the next animation frame so it never runs inside an active\n // React sync flush (React 17 / legacy mode). Without the deferral, the call chain\n // outputsize \u2192 setWidth \u2192 [flushSyncCallbackQueue] \u2192 commit \u2192 measureRef \u2192\n // setMeasuredCache \u2192 [new syncQueue entry] \u2192 commit \u2192 measureRef \u2192 \u2026\n // keeps adding entries to the live syncQueue array that flushSyncCallbackQueue\n // is iterating over, producing 25+ nested commits and the\n // \"Maximum update depth exceeded\" crash. requestAnimationFrame breaks that chain\n // by scheduling measure() for after the current flush completes.\n const rafId = requestAnimationFrame(() => measure());\n return () => cancelAnimationFrame(rafId);\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 getOwnerProps={getOwnerProps}\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;ADgDb;AAhDV,mBAA0D;AAC1D,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;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,8BAAU,MAAM;AACd,QAAI,CAAC,QAAS,QAAO;AASrB,UAAM,QAAQ,sBAAsB,MAAM,QAAQ,CAAC;AACnD,WAAO,MAAM,qBAAqB,KAAK;AAAA,EAEzC,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,MAC9C;AAAA,MAEC;AAAA;AAAA,IAXI,QAAQ;AAAA,EAYf,GACF,GAEJ;AAEJ;",
|
|
6
6
|
"names": ["AutocompleteContext"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React2, { useCallback, useMemo, useContext } from "react";
|
|
4
|
-
import { styled
|
|
4
|
+
import { styled } from "@elliemae/ds-system";
|
|
5
5
|
import { DSInputText } from "@elliemae/ds-form-input-text";
|
|
6
6
|
import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
|
|
7
7
|
import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
|
|
@@ -10,7 +10,6 @@ import { StyledContainer, StyledPopperWrapper } from "./styled.js";
|
|
|
10
10
|
import { MenuList } from "../menu-list/index.js";
|
|
11
11
|
import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
|
|
12
12
|
import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
|
|
13
|
-
import { useOnClickOutside } from "../../config/useClickOutside.js";
|
|
14
13
|
import { DSAutocompleteName, DSAutocompleteSlots } from "../../constants/index.js";
|
|
15
14
|
const StyledInputText = styled(DSInputText, {
|
|
16
15
|
name: DSAutocompleteName,
|
|
@@ -40,13 +39,13 @@ const Container = () => {
|
|
|
40
39
|
autoCompleteId,
|
|
41
40
|
focusOptionIdx
|
|
42
41
|
} = useContext(AutocompleteContext);
|
|
43
|
-
const handleCloseMenu = useCallback(() => {
|
|
44
|
-
setForceClosePopover(true);
|
|
45
|
-
}, [setForceClosePopover]);
|
|
46
42
|
const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);
|
|
47
43
|
const xStyledProps = useGetXstyledProps(restProps);
|
|
48
44
|
const { onInputKeyDown } = useKeyboardNavigation();
|
|
49
45
|
const input = !onValueChange && !renderInput ? React2.Children.only(children) : null;
|
|
46
|
+
const hideTooltip = useCallback(() => {
|
|
47
|
+
setForceClosePopover(true);
|
|
48
|
+
}, [setForceClosePopover]);
|
|
50
49
|
const config = useMemo(
|
|
51
50
|
() => ({
|
|
52
51
|
placement: "bottom",
|
|
@@ -55,17 +54,15 @@ const Container = () => {
|
|
|
55
54
|
placementOrderPreference,
|
|
56
55
|
zIndex,
|
|
57
56
|
customOffset: [0, 5],
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
externallyControlledIsOpen: isShowingPopover,
|
|
58
|
+
// referenceElement comes from context as state — pass it directly so position can be
|
|
59
|
+
// computed on the first render (no useEffect round-trip, no visibility:hidden race).
|
|
60
|
+
externalReferenceElement: referenceElement,
|
|
61
|
+
onClickOutside: hideTooltip
|
|
60
62
|
}),
|
|
61
|
-
[startPlacementPreference, placementOrderPreference, zIndex,
|
|
63
|
+
[startPlacementPreference, placementOrderPreference, zIndex, isShowingPopover, referenceElement, hideTooltip]
|
|
62
64
|
);
|
|
63
65
|
const { refs, floatingStyles, context } = useFloatingContext(config);
|
|
64
|
-
const autoCompleteRef = mergeRefs(setReferenceElement, refs.setReference);
|
|
65
|
-
const hideTooltip = useCallback(() => {
|
|
66
|
-
setForceClosePopover(true);
|
|
67
|
-
}, [setForceClosePopover]);
|
|
68
|
-
useOnClickOutside(referenceElement, hideTooltip, refs.floating);
|
|
69
66
|
const onFocusPopoverStatusSync = useCallback(() => {
|
|
70
67
|
setForceClosePopover(false);
|
|
71
68
|
setUserJustSelectedAnOption(false);
|
|
@@ -76,7 +73,7 @@ const Container = () => {
|
|
|
76
73
|
StyledContainer,
|
|
77
74
|
{
|
|
78
75
|
id,
|
|
79
|
-
innerRef:
|
|
76
|
+
innerRef: setReferenceElement,
|
|
80
77
|
onKeyDown: onInputKeyDown,
|
|
81
78
|
onFocus: onFocusPopoverStatusSync,
|
|
82
79
|
"data-testid": AutocompleteDataTestid.CONTAINER,
|
|
@@ -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, useMemo, useContext } from 'react';\nimport { styled
|
|
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, useMemo, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\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';\nimport { DSAutocompleteName, DSAutocompleteSlots } from '../../constants/index.js';\n\nconst StyledInputText = styled(DSInputText, {\n name: DSAutocompleteName,\n slot: DSAutocompleteSlots.INPUT,\n})``;\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 zIndex,\n ...restProps\n },\n isShowingPopover,\n referenceElement,\n getOwnerProps,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n focusOptionIdx,\n } = useContext(AutocompleteContext);\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 hideTooltip = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const config = useMemo(\n () => ({\n placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n withoutAnimation: true,\n startPlacementPreference,\n placementOrderPreference,\n zIndex,\n customOffset: [0, 5] as [number, number],\n externallyControlledIsOpen: isShowingPopover,\n // referenceElement comes from context as state \u2014 pass it directly so position can be\n // computed on the first render (no useEffect round-trip, no visibility:hidden race).\n externalReferenceElement: referenceElement,\n onClickOutside: hideTooltip,\n }),\n [startPlacementPreference, placementOrderPreference, zIndex, isShowingPopover, referenceElement, hideTooltip],\n );\n\n const { refs, floatingStyles, context } = useFloatingContext(config);\n\n const onFocusPopoverStatusSync = useCallback(() => {\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n setUserTypedSomething(false);\n setUserIsNavigatingWithArrows(false);\n }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\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 getOwnerProps={getOwnerProps}\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 <StyledInputText\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 getOwnerProps={getOwnerProps}\n />\n )}\n {filter && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n floatingStyles={floatingStyles}\n isOpen={isShowingPopover}\n context={context}\n >\n <StyledPopperWrapper tabIndex={-1}>\n <MenuList />\n </StyledPopperWrapper>\n </FloatingWrapper>\n )}\n </StyledContainer>\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -25,7 +25,9 @@ const MenuList = () => {
|
|
|
25
25
|
e.preventDefault();
|
|
26
26
|
}, []);
|
|
27
27
|
useEffect(() => {
|
|
28
|
-
if (measure)
|
|
28
|
+
if (!measure) return void 0;
|
|
29
|
+
const rafId = requestAnimationFrame(() => measure());
|
|
30
|
+
return () => cancelAnimationFrame(rafId);
|
|
29
31
|
}, [width]);
|
|
30
32
|
return /* @__PURE__ */ jsx(StyledListWrapper, { onMouseDown: preventMouseDown, minWidth: referenceElement?.offsetWidth, children: options.length > 0 && /* @__PURE__ */ jsx(StyledVirtualListWrapper, { tabIndex: -1, innerRef: listRef, children: /* @__PURE__ */ jsx(
|
|
31
33
|
StyledList,
|
|
@@ -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, useEffect } 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 getOwnerProps,\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 useEffect(() => {\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 getOwnerProps={getOwnerProps}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n )}\n </StyledListWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useEffect } 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 getOwnerProps,\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 useEffect(() => {\n if (!measure) return undefined;\n // Defer measure() to the next animation frame so it never runs inside an active\n // React sync flush (React 17 / legacy mode). Without the deferral, the call chain\n // outputsize \u2192 setWidth \u2192 [flushSyncCallbackQueue] \u2192 commit \u2192 measureRef \u2192\n // setMeasuredCache \u2192 [new syncQueue entry] \u2192 commit \u2192 measureRef \u2192 \u2026\n // keeps adding entries to the live syncQueue array that flushSyncCallbackQueue\n // is iterating over, producing 25+ nested commits and the\n // \"Maximum update depth exceeded\" crash. requestAnimationFrame breaks that chain\n // by scheduling measure() for after the current flush completes.\n const rafId = requestAnimationFrame(() => measure());\n return () => cancelAnimationFrame(rafId);\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 getOwnerProps={getOwnerProps}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n )}\n </StyledListWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgDb;AAhDV,SAAgB,YAAY,aAAa,iBAAiB;AAC1D,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;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,YAAU,MAAM;AACd,QAAI,CAAC,QAAS,QAAO;AASrB,UAAM,QAAQ,sBAAsB,MAAM,QAAQ,CAAC;AACnD,WAAO,MAAM,qBAAqB,KAAK;AAAA,EAEzC,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,MAC9C;AAAA,MAEC;AAAA;AAAA,IAXI,QAAQ;AAAA,EAYf,GACF,GAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-layout-autocomplete",
|
|
3
|
-
"version": "3.61.5
|
|
3
|
+
"version": "3.61.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Form Layout - Autocomplete",
|
|
6
6
|
"files": [
|
|
@@ -38,21 +38,21 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"uid": "^2.0.2",
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-system": "3.61.5
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
41
|
+
"@elliemae/ds-menu-items": "3.61.5",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.61.5",
|
|
43
|
+
"@elliemae/ds-system": "3.61.5",
|
|
44
|
+
"@elliemae/ds-form-input-text": "3.61.5",
|
|
45
|
+
"@elliemae/ds-grid": "3.61.5",
|
|
46
|
+
"@elliemae/ds-floating-context": "3.61.5"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@elliemae/pui-theme": "~2.13.0",
|
|
50
50
|
"jest": "^30.0.0",
|
|
51
51
|
"styled-components": "~5.3.9",
|
|
52
52
|
"styled-system": "^5.1.5",
|
|
53
|
-
"@elliemae/ds-form-input-text": "3.61.5
|
|
54
|
-
"@elliemae/ds-test-utils": "3.61.5
|
|
55
|
-
"@elliemae/ds-monorepo-devops": "3.61.5
|
|
53
|
+
"@elliemae/ds-form-input-text": "3.61.5",
|
|
54
|
+
"@elliemae/ds-test-utils": "3.61.5",
|
|
55
|
+
"@elliemae/ds-monorepo-devops": "3.61.5"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@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;
|