@elliemae/ds-dropdownmenu-v2 3.70.0-next.4 → 3.70.0-next.41
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/index.js.map +1 -1
- package/dist/cjs/parts/DropdownMenuContent.js +34 -19
- package/dist/cjs/parts/DropdownMenuContent.js.map +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/parts/DropdownMenuContent.js +35 -20
- package/dist/esm/parts/DropdownMenuContent.js.map +2 -2
- package/dist/types/index.d.ts +1 -0
- package/package.json +11 -11
- package/dist/types/tests/DSDropdownMenuV2.a11y.test.d.ts +0 -1
- package/dist/types/tests/DSDropdownMenuV2.keyboardEvents.test.d.ts +0 -1
- package/dist/types/tests/DSDropdownMenuV2.pointerEvents.test.d.ts +0 -1
- package/dist/types/typescript-testing/typescript-dropdown-v2-valid.d.ts +0 -1
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type {} from '@xstyled/system';\n\nexport { checkAndConvertOptions } from './exported-related/conversion-utils/index.js';\nexport { DSDropdownMenuV2, DSDropdownMenuV2WithSchema } from './DSDropdownMenu.js';\nexport { DropdownMenuDataTestId } from './DropdownMenuDataTestId.js';\nexport { DSDropdownMenuName, DSDropdownMenuPlacements, DSDropdownMenuSlots } from './exported-related/index.js';\nexport {\n defaultProps as DSDropdownMenuV2DefaultProps,\n DSDropdownMenuV2PropTypes,\n actionOptionSchema,\n checkboxOptionSchema,\n optionTypesSchemas,\n sectionOptionSchema,\n separatorOptionSchema,\n singleOptionSchema,\n singleWithSubmenuOptionSchema,\n submenuOptionSchema,\n} from './react-desc-prop-types.js';\nexport type { DSDropdownMenuT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["import type {} from '@xstyled/system';\n\nexport { checkAndConvertOptions } from './exported-related/conversion-utils/index.js';\nexport { DSDropdownMenuV2, DSDropdownMenuV2WithSchema } from './DSDropdownMenu.js';\nexport { DropdownMenuDataTestId } from './DropdownMenuDataTestId.js';\nexport { DSDropdownMenuName, DSDropdownMenuPlacements, DSDropdownMenuSlots } from './exported-related/index.js';\nexport {\n defaultProps as DSDropdownMenuV2DefaultProps,\n DSDropdownMenuV2PropTypes,\n actionOptionSchema,\n checkboxOptionSchema,\n optionTypesSchemas,\n sectionOptionSchema,\n separatorOptionSchema,\n singleOptionSchema,\n singleWithSubmenuOptionSchema,\n submenuOptionSchema,\n} from './react-desc-prop-types.js';\nexport type { DSDropdownMenuT } from './react-desc-prop-types.js';\nexport type { DSDropdownV2BridgeT } from './exported-related/conversion-utils/types.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuC;AACvC,4BAA6D;AAC7D,oCAAuC;AACvC,8BAAkF;AAClF,mCAWO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,7 +34,7 @@ module.exports = __toCommonJS(DropdownMenuContent_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
-
var
|
|
37
|
+
var import_ds_floating_context = require("@elliemae/ds-floating-context");
|
|
38
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
39
|
var import_DropdownMenuDataTestId = require("../DropdownMenuDataTestId.js");
|
|
40
40
|
var import_styled = require("../styled.js");
|
|
@@ -60,14 +60,33 @@ const DropdownMenuContent = () => {
|
|
|
60
60
|
...globalAttributes
|
|
61
61
|
} = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
62
62
|
const { minWidth, minHeight, ...restXstyledProps } = (0, import_ds_props_helpers.useGetXstyledProps)(props);
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
63
|
+
const handleClickOutside = (0, import_react.useCallback)(
|
|
64
|
+
(event) => {
|
|
65
|
+
const target = event.target;
|
|
66
|
+
if (!target) return;
|
|
67
|
+
const dropdownListboxes = [
|
|
68
|
+
...document.body.querySelectorAll(`[data-testid="${import_DropdownMenuDataTestId.DropdownMenuDataTestId.MENU_WRAPPER}"]`)
|
|
69
|
+
];
|
|
70
|
+
if (dropdownListboxes.every((listbox) => !listbox.contains(target))) {
|
|
71
|
+
onClickOutside(event);
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
[onClickOutside]
|
|
75
|
+
);
|
|
76
|
+
const {
|
|
77
|
+
refs,
|
|
78
|
+
floatingStyles,
|
|
79
|
+
context,
|
|
80
|
+
isOpen: isFloatingOpen
|
|
81
|
+
} = (0, import_ds_floating_context.useFloatingContext)({
|
|
82
|
+
externallyControlledIsOpen: isOpened,
|
|
83
|
+
externalReferenceElement: triggerReferenceElement,
|
|
84
|
+
withoutAnimation: true,
|
|
85
|
+
customOffset,
|
|
86
|
+
placement: startPlacementPreference,
|
|
87
|
+
placementOrderPreference,
|
|
88
|
+
onClickOutside: handleClickOutside
|
|
89
|
+
});
|
|
71
90
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
72
91
|
import_styled.StyledTriggerWrapper,
|
|
73
92
|
{
|
|
@@ -81,17 +100,13 @@ const DropdownMenuContent = () => {
|
|
|
81
100
|
children: [
|
|
82
101
|
children,
|
|
83
102
|
triggerReferenceElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
84
|
-
|
|
103
|
+
import_ds_floating_context.FloatingWrapper,
|
|
85
104
|
{
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
onClickOutside: onClickOutsideHandler,
|
|
92
|
-
startPlacementPreference,
|
|
93
|
-
placementOrderPreference,
|
|
94
|
-
zIndex,
|
|
105
|
+
innerRef: refs.setFloating,
|
|
106
|
+
isOpen: isFloatingOpen,
|
|
107
|
+
floatingStyles: { ...floatingStyles, ...zIndex !== void 0 && { zIndex } },
|
|
108
|
+
context,
|
|
109
|
+
role: "region",
|
|
95
110
|
"aria-label": dataPopoverLabel || "dropdown-menu popover",
|
|
96
111
|
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenuLoading.DropdownMenuLoading, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenuListBox.DropdownMenuListBox, {})
|
|
97
112
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/DropdownMenuContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-unused-vars */\nimport React, { useContext } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-unused-vars */\nimport React, { useCallback, useContext } from 'react';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { DropdownMenuDataTestId } from '../DropdownMenuDataTestId.js';\nimport { StyledTriggerWrapper } from '../styled.js';\nimport { DropdownMenuListBox } from './DropdownMenuListBox.js';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { DropdownMenuLoading } from './DropdownMenuLoading.js';\n\nexport const DropdownMenuContent: React.ComponentType<Record<string, never>> = () => {\n const { props, triggerReferenceElement, setTriggerReferenceElement } = useContext(DSDropdownMenuContext);\n\n const {\n children,\n isOpened,\n onClickOutside,\n startPlacementPreference,\n placementOrderPreference,\n customOffset,\n wrapperStyles,\n isLoading,\n zIndex,\n as,\n } = props;\n const {\n 'data-popover-label': dataPopoverLabel,\n ...globalAttributes\n }: ReturnType<typeof useGetGlobalAttributes> & { 'data-popover-label'?: string } = useGetGlobalAttributes(props);\n // we need to exclude this props from the xstyled props because there is a conflict\n // using submenus items with the name of the prop of ddmenu and xstyled\n const { minWidth, minHeight, ...restXstyledProps } = useGetXstyledProps(props);\n\n // Click-outside: close only when the click is not inside any child dropdown listbox.\n // The hook's onClickOutside already excludes the floating + reference elements; we add\n // a check for sibling submenu listboxes that may be portaled elsewhere in the document.\n const handleClickOutside = useCallback(\n (event: MouseEvent | TouchEvent) => {\n const target = event.target as Node | null;\n if (!target) return;\n const dropdownListboxes = [\n ...document.body.querySelectorAll(`[data-testid=\"${DropdownMenuDataTestId.MENU_WRAPPER}\"]`),\n ];\n if (dropdownListboxes.every((listbox) => !listbox.contains(target))) {\n onClickOutside(event);\n }\n },\n [onClickOutside],\n );\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: isOpened,\n externalReferenceElement: triggerReferenceElement,\n withoutAnimation: true,\n customOffset,\n placement: startPlacementPreference,\n placementOrderPreference,\n onClickOutside: handleClickOutside,\n });\n\n return (\n <StyledTriggerWrapper\n data-testid={`${DropdownMenuDataTestId.TRIGGER_WRAPPER}`}\n innerRef={setTriggerReferenceElement}\n aria-haspopup=\"listbox\"\n {...wrapperStyles}\n {...globalAttributes}\n {...restXstyledProps}\n as={as}\n >\n {children}\n {triggerReferenceElement && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={{ ...floatingStyles, ...(zIndex !== undefined && { zIndex }) }}\n context={context}\n role=\"region\"\n aria-label={(dataPopoverLabel as string) || 'dropdown-menu popover'}\n >\n {isLoading ? <DropdownMenuLoading /> : <DropdownMenuListBox />}\n </FloatingWrapper>\n )}\n </StyledTriggerWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkEnB;AAjEJ,mBAA+C;AAC/C,iCAAoD;AACpD,8BAA2D;AAC3D,oCAAuC;AACvC,oBAAqC;AACrC,iCAAoC;AACpC,iCAAsC;AACtC,iCAAoC;AAE7B,MAAM,sBAAkE,MAAM;AACnF,QAAM,EAAE,OAAO,yBAAyB,2BAA2B,QAAI,yBAAW,gDAAqB;AAEvG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM;AAAA,IACJ,sBAAsB;AAAA,IACtB,GAAG;AAAA,EACL,QAAmF,gDAAuB,KAAK;AAG/G,QAAM,EAAE,UAAU,WAAW,GAAG,iBAAiB,QAAI,4CAAmB,KAAK;AAK7E,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAmC;AAClC,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,OAAQ;AACb,YAAM,oBAAoB;AAAA,QACxB,GAAG,SAAS,KAAK,iBAAiB,iBAAiB,qDAAuB,YAAY,IAAI;AAAA,MAC5F;AACA,UAAI,kBAAkB,MAAM,CAAC,YAAY,CAAC,QAAQ,SAAS,MAAM,CAAC,GAAG;AACnE,uBAAe,KAAK;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,QAAI,+CAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,gBAAgB;AAAA,EAClB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,GAAG,qDAAuB,eAAe;AAAA,MACtD,UAAU;AAAA,MACV,iBAAc;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA;AAAA,QACA,2BACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ;AAAA,YACR,gBAAgB,EAAE,GAAG,gBAAgB,GAAI,WAAW,UAAa,EAAE,OAAO,EAAG;AAAA,YAC7E;AAAA,YACA,MAAK;AAAA,YACL,cAAa,oBAA+B;AAAA,YAE3C,sBAAY,4CAAC,kDAAoB,IAAK,4CAAC,kDAAoB;AAAA;AAAA,QAC9D;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@xstyled/system';\n\nexport { checkAndConvertOptions } from './exported-related/conversion-utils/index.js';\nexport { DSDropdownMenuV2, DSDropdownMenuV2WithSchema } from './DSDropdownMenu.js';\nexport { DropdownMenuDataTestId } from './DropdownMenuDataTestId.js';\nexport { DSDropdownMenuName, DSDropdownMenuPlacements, DSDropdownMenuSlots } from './exported-related/index.js';\nexport {\n defaultProps as DSDropdownMenuV2DefaultProps,\n DSDropdownMenuV2PropTypes,\n actionOptionSchema,\n checkboxOptionSchema,\n optionTypesSchemas,\n sectionOptionSchema,\n separatorOptionSchema,\n singleOptionSchema,\n singleWithSubmenuOptionSchema,\n submenuOptionSchema,\n} from './react-desc-prop-types.js';\nexport type { DSDropdownMenuT } from './react-desc-prop-types.js';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@xstyled/system';\n\nexport { checkAndConvertOptions } from './exported-related/conversion-utils/index.js';\nexport { DSDropdownMenuV2, DSDropdownMenuV2WithSchema } from './DSDropdownMenu.js';\nexport { DropdownMenuDataTestId } from './DropdownMenuDataTestId.js';\nexport { DSDropdownMenuName, DSDropdownMenuPlacements, DSDropdownMenuSlots } from './exported-related/index.js';\nexport {\n defaultProps as DSDropdownMenuV2DefaultProps,\n DSDropdownMenuV2PropTypes,\n actionOptionSchema,\n checkboxOptionSchema,\n optionTypesSchemas,\n sectionOptionSchema,\n separatorOptionSchema,\n singleOptionSchema,\n singleWithSubmenuOptionSchema,\n submenuOptionSchema,\n} from './react-desc-prop-types.js';\nexport type { DSDropdownMenuT } from './react-desc-prop-types.js';\nexport type { DSDropdownV2BridgeT } from './exported-related/conversion-utils/types.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,8BAA8B;AACvC,SAAS,kBAAkB,kCAAkC;AAC7D,SAAS,8BAA8B;AACvC,SAAS,oBAAoB,0BAA0B,2BAA2B;AAClF;AAAA,EACkB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useContext } from "react";
|
|
4
|
-
import {
|
|
3
|
+
import { useCallback, useContext } from "react";
|
|
4
|
+
import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
|
|
5
5
|
import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
|
|
6
6
|
import { DropdownMenuDataTestId } from "../DropdownMenuDataTestId.js";
|
|
7
7
|
import { StyledTriggerWrapper } from "../styled.js";
|
|
@@ -27,14 +27,33 @@ const DropdownMenuContent = () => {
|
|
|
27
27
|
...globalAttributes
|
|
28
28
|
} = useGetGlobalAttributes(props);
|
|
29
29
|
const { minWidth, minHeight, ...restXstyledProps } = useGetXstyledProps(props);
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
30
|
+
const handleClickOutside = useCallback(
|
|
31
|
+
(event) => {
|
|
32
|
+
const target = event.target;
|
|
33
|
+
if (!target) return;
|
|
34
|
+
const dropdownListboxes = [
|
|
35
|
+
...document.body.querySelectorAll(`[data-testid="${DropdownMenuDataTestId.MENU_WRAPPER}"]`)
|
|
36
|
+
];
|
|
37
|
+
if (dropdownListboxes.every((listbox) => !listbox.contains(target))) {
|
|
38
|
+
onClickOutside(event);
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
[onClickOutside]
|
|
42
|
+
);
|
|
43
|
+
const {
|
|
44
|
+
refs,
|
|
45
|
+
floatingStyles,
|
|
46
|
+
context,
|
|
47
|
+
isOpen: isFloatingOpen
|
|
48
|
+
} = useFloatingContext({
|
|
49
|
+
externallyControlledIsOpen: isOpened,
|
|
50
|
+
externalReferenceElement: triggerReferenceElement,
|
|
51
|
+
withoutAnimation: true,
|
|
52
|
+
customOffset,
|
|
53
|
+
placement: startPlacementPreference,
|
|
54
|
+
placementOrderPreference,
|
|
55
|
+
onClickOutside: handleClickOutside
|
|
56
|
+
});
|
|
38
57
|
return /* @__PURE__ */ jsxs(
|
|
39
58
|
StyledTriggerWrapper,
|
|
40
59
|
{
|
|
@@ -48,17 +67,13 @@ const DropdownMenuContent = () => {
|
|
|
48
67
|
children: [
|
|
49
68
|
children,
|
|
50
69
|
triggerReferenceElement && /* @__PURE__ */ jsx(
|
|
51
|
-
|
|
70
|
+
FloatingWrapper,
|
|
52
71
|
{
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
onClickOutside: onClickOutsideHandler,
|
|
59
|
-
startPlacementPreference,
|
|
60
|
-
placementOrderPreference,
|
|
61
|
-
zIndex,
|
|
72
|
+
innerRef: refs.setFloating,
|
|
73
|
+
isOpen: isFloatingOpen,
|
|
74
|
+
floatingStyles: { ...floatingStyles, ...zIndex !== void 0 && { zIndex } },
|
|
75
|
+
context,
|
|
76
|
+
role: "region",
|
|
62
77
|
"aria-label": dataPopoverLabel || "dropdown-menu popover",
|
|
63
78
|
children: isLoading ? /* @__PURE__ */ jsx(DropdownMenuLoading, {}) : /* @__PURE__ */ jsx(DropdownMenuListBox, {})
|
|
64
79
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownMenuContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport React, { useContext } from 'react';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport React, { useCallback, useContext } from 'react';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { DropdownMenuDataTestId } from '../DropdownMenuDataTestId.js';\nimport { StyledTriggerWrapper } from '../styled.js';\nimport { DropdownMenuListBox } from './DropdownMenuListBox.js';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { DropdownMenuLoading } from './DropdownMenuLoading.js';\n\nexport const DropdownMenuContent: React.ComponentType<Record<string, never>> = () => {\n const { props, triggerReferenceElement, setTriggerReferenceElement } = useContext(DSDropdownMenuContext);\n\n const {\n children,\n isOpened,\n onClickOutside,\n startPlacementPreference,\n placementOrderPreference,\n customOffset,\n wrapperStyles,\n isLoading,\n zIndex,\n as,\n } = props;\n const {\n 'data-popover-label': dataPopoverLabel,\n ...globalAttributes\n }: ReturnType<typeof useGetGlobalAttributes> & { 'data-popover-label'?: string } = useGetGlobalAttributes(props);\n // we need to exclude this props from the xstyled props because there is a conflict\n // using submenus items with the name of the prop of ddmenu and xstyled\n const { minWidth, minHeight, ...restXstyledProps } = useGetXstyledProps(props);\n\n // Click-outside: close only when the click is not inside any child dropdown listbox.\n // The hook's onClickOutside already excludes the floating + reference elements; we add\n // a check for sibling submenu listboxes that may be portaled elsewhere in the document.\n const handleClickOutside = useCallback(\n (event: MouseEvent | TouchEvent) => {\n const target = event.target as Node | null;\n if (!target) return;\n const dropdownListboxes = [\n ...document.body.querySelectorAll(`[data-testid=\"${DropdownMenuDataTestId.MENU_WRAPPER}\"]`),\n ];\n if (dropdownListboxes.every((listbox) => !listbox.contains(target))) {\n onClickOutside(event);\n }\n },\n [onClickOutside],\n );\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: isOpened,\n externalReferenceElement: triggerReferenceElement,\n withoutAnimation: true,\n customOffset,\n placement: startPlacementPreference,\n placementOrderPreference,\n onClickOutside: handleClickOutside,\n });\n\n return (\n <StyledTriggerWrapper\n data-testid={`${DropdownMenuDataTestId.TRIGGER_WRAPPER}`}\n innerRef={setTriggerReferenceElement}\n aria-haspopup=\"listbox\"\n {...wrapperStyles}\n {...globalAttributes}\n {...restXstyledProps}\n as={as}\n >\n {children}\n {triggerReferenceElement && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={{ ...floatingStyles, ...(zIndex !== undefined && { zIndex }) }}\n context={context}\n role=\"region\"\n aria-label={(dataPopoverLabel as string) || 'dropdown-menu popover'}\n >\n {isLoading ? <DropdownMenuLoading /> : <DropdownMenuListBox />}\n </FloatingWrapper>\n )}\n </StyledTriggerWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkEnB,SAmBmB,KAnBnB;AAjEJ,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AAE7B,MAAM,sBAAkE,MAAM;AACnF,QAAM,EAAE,OAAO,yBAAyB,2BAA2B,IAAI,WAAW,qBAAqB;AAEvG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM;AAAA,IACJ,sBAAsB;AAAA,IACtB,GAAG;AAAA,EACL,IAAmF,uBAAuB,KAAK;AAG/G,QAAM,EAAE,UAAU,WAAW,GAAG,iBAAiB,IAAI,mBAAmB,KAAK;AAK7E,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAmC;AAClC,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,OAAQ;AACb,YAAM,oBAAoB;AAAA,QACxB,GAAG,SAAS,KAAK,iBAAiB,iBAAiB,uBAAuB,YAAY,IAAI;AAAA,MAC5F;AACA,UAAI,kBAAkB,MAAM,CAAC,YAAY,CAAC,QAAQ,SAAS,MAAM,CAAC,GAAG;AACnE,uBAAe,KAAK;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI,mBAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,gBAAgB;AAAA,EAClB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,GAAG,uBAAuB,eAAe;AAAA,MACtD,UAAU;AAAA,MACV,iBAAc;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA;AAAA,QACA,2BACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ;AAAA,YACR,gBAAgB,EAAE,GAAG,gBAAgB,GAAI,WAAW,UAAa,EAAE,OAAO,EAAG;AAAA,YAC7E;AAAA,YACA,MAAK;AAAA,YACL,cAAa,oBAA+B;AAAA,YAE3C,sBAAY,oBAAC,uBAAoB,IAAK,oBAAC,uBAAoB;AAAA;AAAA,QAC9D;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -4,3 +4,4 @@ export { DropdownMenuDataTestId } from './DropdownMenuDataTestId.js';
|
|
|
4
4
|
export { DSDropdownMenuName, DSDropdownMenuPlacements, DSDropdownMenuSlots } from './exported-related/index.js';
|
|
5
5
|
export { defaultProps as DSDropdownMenuV2DefaultProps, DSDropdownMenuV2PropTypes, actionOptionSchema, checkboxOptionSchema, optionTypesSchemas, sectionOptionSchema, separatorOptionSchema, singleOptionSchema, singleWithSubmenuOptionSchema, submenuOptionSchema, } from './react-desc-prop-types.js';
|
|
6
6
|
export type { DSDropdownMenuT } from './react-desc-prop-types.js';
|
|
7
|
+
export type { DSDropdownV2BridgeT } from './exported-related/conversion-utils/types.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dropdownmenu-v2",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.41",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Dropdown Menu V2",
|
|
6
6
|
"files": [
|
|
@@ -38,20 +38,20 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@xstyled/system": "~3.8.1",
|
|
40
40
|
"react-virtual": "~2.10.4",
|
|
41
|
-
"@elliemae/ds-circular-progress-indicator": "3.70.0-next.
|
|
42
|
-
"@elliemae/ds-form-input-text": "3.70.0-next.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-menu-
|
|
47
|
-
"@elliemae/ds-props-helpers": "3.70.0-next.
|
|
48
|
-
"@elliemae/ds-system": "3.70.0-next.
|
|
41
|
+
"@elliemae/ds-circular-progress-indicator": "3.70.0-next.41",
|
|
42
|
+
"@elliemae/ds-form-input-text": "3.70.0-next.41",
|
|
43
|
+
"@elliemae/ds-floating-context": "3.70.0-next.41",
|
|
44
|
+
"@elliemae/ds-grid": "3.70.0-next.41",
|
|
45
|
+
"@elliemae/ds-menu-items": "3.70.0-next.41",
|
|
46
|
+
"@elliemae/ds-menu-button": "3.70.0-next.41",
|
|
47
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.41",
|
|
48
|
+
"@elliemae/ds-system": "3.70.0-next.41"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"jest": "^30.0.0",
|
|
52
52
|
"styled-components": "~5.3.9",
|
|
53
|
-
"@elliemae/ds-
|
|
54
|
-
"@elliemae/ds-
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.41",
|
|
54
|
+
"@elliemae/ds-test-utils": "3.70.0-next.41"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
57
|
"react": "^18.3.1",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|