@elliemae/ds-dropdownmenu-v2 3.36.0-next.0 → 3.36.0-next.2
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/DSDropdownMenu.js +0 -1
- package/dist/cjs/DSDropdownMenu.js.map +2 -2
- package/dist/cjs/hooks/useDropdownListboxHandlers.js +6 -12
- package/dist/cjs/hooks/useDropdownListboxHandlers.js.map +1 -1
- package/dist/cjs/hooks/useDropdownMenuItemHandlers.js +4 -8
- package/dist/cjs/hooks/useDropdownMenuItemHandlers.js.map +1 -1
- package/dist/cjs/parts/DropdownMenuContent.js.map +1 -1
- package/dist/cjs/parts/DropdownMenuItemFactory.js.map +1 -1
- package/dist/cjs/parts/DropdownMenuListBox.js.map +1 -1
- package/dist/cjs/parts/DropdownMenuLoading.js +1 -2
- package/dist/cjs/parts/DropdownMenuLoading.js.map +1 -1
- package/dist/cjs/parts/DropdownMenuSkeleton.js.map +1 -1
- package/dist/cjs/styled.js.map +1 -1
- package/dist/cjs/utils/findInCircularList.js +1 -2
- package/dist/cjs/utils/findInCircularList.js.map +1 -1
- package/dist/esm/DSDropdownMenu.js +0 -1
- package/dist/esm/DSDropdownMenu.js.map +2 -2
- package/dist/esm/hooks/useDropdownListboxHandlers.js +6 -12
- package/dist/esm/hooks/useDropdownListboxHandlers.js.map +1 -1
- package/dist/esm/hooks/useDropdownMenuItemHandlers.js +4 -8
- package/dist/esm/hooks/useDropdownMenuItemHandlers.js.map +1 -1
- package/dist/esm/parts/DropdownMenuContent.js.map +1 -1
- package/dist/esm/parts/DropdownMenuItemFactory.js.map +1 -1
- package/dist/esm/parts/DropdownMenuListBox.js.map +1 -1
- package/dist/esm/parts/DropdownMenuLoading.js +1 -2
- package/dist/esm/parts/DropdownMenuLoading.js.map +1 -1
- package/dist/esm/parts/DropdownMenuSkeleton.js.map +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/dist/esm/utils/findInCircularList.js +1 -2
- package/dist/esm/utils/findInCircularList.js.map +1 -1
- package/package.json +10 -10
|
@@ -43,7 +43,6 @@ const DSDropdownMenuV2 = (props) => {
|
|
|
43
43
|
const ctx = (0, import_useDropdownMenuConfig.useDropdownMenuConfig)(props, DSDropdownMenuV2);
|
|
44
44
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenuContext.DSDropdownMenuContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenuContent.DropdownMenuContent, {}) });
|
|
45
45
|
};
|
|
46
|
-
DSDropdownMenuV2.propTypes = import_react_desc_prop_types.DSDropdownMenuV2PropTypes;
|
|
47
46
|
DSDropdownMenuV2.displayName = "DSDropdownMenuV2";
|
|
48
47
|
const DSDropdownMenuV2WithSchema = (0, import_ds_props_helpers.describe)(DSDropdownMenuV2).description("Dropdown Menu");
|
|
49
48
|
DSDropdownMenuV2WithSchema.propTypes = import_react_desc_prop_types.DSDropdownMenuV2PropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSDropdownMenu.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSDropdownMenuT } from './react-desc-prop-types.js';\nimport { DSDropdownMenuV2PropTypes } from './react-desc-prop-types.js';\nimport { DSDropdownMenuContext } from './DropdownMenuContext.js';\nimport { useDropdownMenuConfig } from './config/useDropdownMenuConfig.js';\nimport { DropdownMenuContent } from './parts/DropdownMenuContent.js';\n\nconst DSDropdownMenuV2: React.ComponentType<DSDropdownMenuT.Props> = (props) => {\n const ctx = useDropdownMenuConfig(props, DSDropdownMenuV2);\n\n return (\n <DSDropdownMenuContext.Provider value={ctx}>\n <DropdownMenuContent />\n </DSDropdownMenuContext.Provider>\n );\n};\n\nDSDropdownMenuV2.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAZN,8BAAyB;AAEzB,mCAA0C;AAC1C,iCAAsC;AACtC,mCAAsC;AACtC,iCAAoC;AAEpC,MAAM,mBAA+D,CAAC,UAAU;AAC9E,QAAM,UAAM,oDAAsB,OAAO,gBAAgB;AAEzD,SACE,4CAAC,iDAAsB,UAAtB,EAA+B,OAAO,KACrC,sDAAC,kDAAoB,GACvB;AAEJ;AAEA,iBAAiB,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSDropdownMenuT } from './react-desc-prop-types.js';\nimport { DSDropdownMenuV2PropTypes } from './react-desc-prop-types.js';\nimport { DSDropdownMenuContext } from './DropdownMenuContext.js';\nimport { useDropdownMenuConfig } from './config/useDropdownMenuConfig.js';\nimport { DropdownMenuContent } from './parts/DropdownMenuContent.js';\n\nconst DSDropdownMenuV2: React.ComponentType<DSDropdownMenuT.Props> = (props) => {\n const ctx = useDropdownMenuConfig(props, DSDropdownMenuV2);\n\n return (\n <DSDropdownMenuContext.Provider value={ctx}>\n <DropdownMenuContent />\n </DSDropdownMenuContext.Provider>\n );\n};\n\nDSDropdownMenuV2.displayName = 'DSDropdownMenuV2';\nconst DSDropdownMenuV2WithSchema = describe(DSDropdownMenuV2).description('Dropdown Menu');\nDSDropdownMenuV2WithSchema.propTypes = DSDropdownMenuV2PropTypes;\n\nexport { DSDropdownMenuV2, DSDropdownMenuV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAZN,8BAAyB;AAEzB,mCAA0C;AAC1C,iCAAsC;AACtC,mCAAsC;AACtC,iCAAoC;AAEpC,MAAM,mBAA+D,CAAC,UAAU;AAC9E,QAAM,UAAM,oDAAsB,OAAO,gBAAgB;AAEzD,SACE,4CAAC,iDAAsB,UAAtB,EAA+B,OAAO,KACrC,sDAAC,kDAAoB,GACvB;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,iCAA6B,kCAAS,gBAAgB,EAAE,YAAY,eAAe;AACzF,2BAA2B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -57,8 +57,7 @@ const useDropdownListboxHandlers = () => {
|
|
|
57
57
|
const onKeyDown = (0, import_react.useCallback)(
|
|
58
58
|
(e) => {
|
|
59
59
|
const currentItemIndex = options.findIndex((opt) => opt.dsId === activeDescendant);
|
|
60
|
-
if (currentItemIndex === -1)
|
|
61
|
-
return;
|
|
60
|
+
if (currentItemIndex === -1) return;
|
|
62
61
|
const option = options[currentItemIndex];
|
|
63
62
|
e.stopPropagation();
|
|
64
63
|
if (e.code === "ArrowDown") {
|
|
@@ -78,11 +77,9 @@ const useDropdownListboxHandlers = () => {
|
|
|
78
77
|
e.preventDefault();
|
|
79
78
|
const nextSelectedOptions = { ...selectedOptions };
|
|
80
79
|
nextSelectedOptions[option.dsId] = !selectedOptions[option.dsId];
|
|
81
|
-
if (option?.disabled)
|
|
82
|
-
return;
|
|
80
|
+
if (option?.disabled) return;
|
|
83
81
|
onOptionClick(nextSelectedOptions, option, e);
|
|
84
|
-
if (option.onClick)
|
|
85
|
-
option.onClick(e);
|
|
82
|
+
if (option.onClick) option.onClick(e);
|
|
86
83
|
} else if (e.code === "Escape") {
|
|
87
84
|
onClickOutside(e);
|
|
88
85
|
} else if (e.code === "Home") {
|
|
@@ -94,8 +91,7 @@ const useDropdownListboxHandlers = () => {
|
|
|
94
91
|
setActiveDescendant(options[nextItemIndex].dsId);
|
|
95
92
|
scrollOptionIntoView(options[nextItemIndex].dsId);
|
|
96
93
|
}
|
|
97
|
-
if (option.onKeyDown)
|
|
98
|
-
option.onKeyDown(e);
|
|
94
|
+
if (option.onKeyDown) option.onKeyDown(e);
|
|
99
95
|
userOnKeyDown(e);
|
|
100
96
|
},
|
|
101
97
|
[
|
|
@@ -113,10 +109,8 @@ const useDropdownListboxHandlers = () => {
|
|
|
113
109
|
);
|
|
114
110
|
const onMouseEnter = (0, import_react.useCallback)(
|
|
115
111
|
(e) => {
|
|
116
|
-
if (inputReference.current)
|
|
117
|
-
|
|
118
|
-
else
|
|
119
|
-
listboxReference.current?.focus();
|
|
112
|
+
if (inputReference.current) inputReference.current.focus();
|
|
113
|
+
else listboxReference.current?.focus();
|
|
120
114
|
userOnMouseEnter(e);
|
|
121
115
|
},
|
|
122
116
|
[inputReference, listboxReference, userOnMouseEnter]
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useDropdownListboxHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\nimport { findInCircularList, isOptionFocuseable, manageOpenedSubmenus } from '../utils/index.js';\n\ntype UseDropdownListboxHandlersType = () => {\n onKeyDown: React.KeyboardEventHandler;\n onMouseEnter: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n};\n\nexport const useDropdownListboxHandlers: UseDropdownListboxHandlersType = () => {\n const {\n props: {\n options,\n onOptionClick,\n openedSubmenus,\n onSubmenuToggle,\n onKeyDown: userOnKeyDown,\n selectedOptions,\n onClickOutside,\n onMouseEnter: userOnMouseEnter,\n onMouseLeave,\n },\n activeDescendant,\n setActiveDescendant,\n scrollOptionIntoView,\n listboxReference,\n inputReference,\n } = useContext(DSDropdownMenuContext);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const currentItemIndex = options.findIndex((opt) => opt.dsId === activeDescendant);\n if (currentItemIndex === -1) return;\n\n const option = options[currentItemIndex];\n\n e.stopPropagation();\n\n if (e.code === 'ArrowDown') {\n e.preventDefault();\n const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n setActiveDescendant(options[nextItemIndex].dsId);\n scrollOptionIntoView(options[nextItemIndex].dsId);\n } else if (e.code === 'ArrowUp') {\n e.preventDefault();\n const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n setActiveDescendant(options[nextItemIndex].dsId);\n scrollOptionIntoView(options[nextItemIndex].dsId);\n } else if (\n e.code === 'ArrowRight' &&\n ['submenu', 'singleWithSubmenu'].includes(option.type) &&\n !openedSubmenus[option.dsId]\n ) {\n e.preventDefault();\n onSubmenuToggle(manageOpenedSubmenus(options, { ...openedSubmenus, [option.dsId]: true }, option), option, e);\n } else if (['Space', 'Enter'].includes(e.code)) {\n e.preventDefault();\n const nextSelectedOptions = { ...selectedOptions };\n nextSelectedOptions[option.dsId] = !selectedOptions[option.dsId];\n if ((option as DSDropdownMenuT.ItemActionOptions)?.disabled) return; // prevent click when is disabled\n onOptionClick(nextSelectedOptions, option, e);\n if (option.onClick) option.onClick(e);\n } else if (e.code === 'Escape') {\n onClickOutside(e);\n } else if (e.code === 'Home') {\n const nextItemIndex = findInCircularList(options, options.length - 1, isOptionFocuseable);\n setActiveDescendant(options[nextItemIndex].dsId);\n scrollOptionIntoView(options[nextItemIndex].dsId);\n } else if (e.code === 'End') {\n const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);\n setActiveDescendant(options[nextItemIndex].dsId);\n scrollOptionIntoView(options[nextItemIndex].dsId);\n }\n if (option.onKeyDown) option.onKeyDown(e);\n userOnKeyDown(e);\n },\n [\n options,\n openedSubmenus,\n userOnKeyDown,\n activeDescendant,\n setActiveDescendant,\n scrollOptionIntoView,\n onSubmenuToggle,\n selectedOptions,\n onOptionClick,\n onClickOutside,\n ],\n );\n\n const onMouseEnter: React.MouseEventHandler = useCallback(\n (e: React.MouseEvent) => {\n if (inputReference.current) inputReference.current.focus();\n else listboxReference.current?.focus();\n userOnMouseEnter(e);\n },\n [inputReference, listboxReference, userOnMouseEnter],\n );\n return { onKeyDown, onMouseEnter, onMouseLeave };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAwC;AACxC,iCAAsC;AAEtC,mBAA6E;AAQtE,MAAM,6BAA6D,MAAM;AAC9E,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gDAAqB;AAEpC,QAAM,gBAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,mBAAmB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,gBAAgB;AACjF,UAAI,qBAAqB;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAwC;AACxC,iCAAsC;AAEtC,mBAA6E;AAQtE,MAAM,6BAA6D,MAAM;AAC9E,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gDAAqB;AAEpC,QAAM,gBAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,mBAAmB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,gBAAgB;AACjF,UAAI,qBAAqB,GAAI;AAE7B,YAAM,SAAS,QAAQ,gBAAgB;AAEvC,QAAE,gBAAgB;AAElB,UAAI,EAAE,SAAS,aAAa;AAC1B,UAAE,eAAe;AACjB,cAAM,oBAAgB,iCAAmB,SAAS,kBAAkB,+BAAkB;AACtF,4BAAoB,QAAQ,aAAa,EAAE,IAAI;AAC/C,6BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,MAClD,WAAW,EAAE,SAAS,WAAW;AAC/B,UAAE,eAAe;AACjB,cAAM,oBAAgB,iCAAmB,SAAS,kBAAkB,iCAAoB,EAAE;AAC1F,4BAAoB,QAAQ,aAAa,EAAE,IAAI;AAC/C,6BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,MAClD,WACE,EAAE,SAAS,gBACX,CAAC,WAAW,mBAAmB,EAAE,SAAS,OAAO,IAAI,KACrD,CAAC,eAAe,OAAO,IAAI,GAC3B;AACA,UAAE,eAAe;AACjB,4BAAgB,mCAAqB,SAAS,EAAE,GAAG,gBAAgB,CAAC,OAAO,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;AAAA,MAC9G,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9C,UAAE,eAAe;AACjB,cAAM,sBAAsB,EAAE,GAAG,gBAAgB;AACjD,4BAAoB,OAAO,IAAI,IAAI,CAAC,gBAAgB,OAAO,IAAI;AAC/D,YAAK,QAA8C,SAAU;AAC7D,sBAAc,qBAAqB,QAAQ,CAAC;AAC5C,YAAI,OAAO,QAAS,QAAO,QAAQ,CAAC;AAAA,MACtC,WAAW,EAAE,SAAS,UAAU;AAC9B,uBAAe,CAAC;AAAA,MAClB,WAAW,EAAE,SAAS,QAAQ;AAC5B,cAAM,oBAAgB,iCAAmB,SAAS,QAAQ,SAAS,GAAG,+BAAkB;AACxF,4BAAoB,QAAQ,aAAa,EAAE,IAAI;AAC/C,6BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,MAClD,WAAW,EAAE,SAAS,OAAO;AAC3B,cAAM,oBAAgB,iCAAmB,SAAS,GAAG,iCAAoB,EAAE;AAC3E,4BAAoB,QAAQ,aAAa,EAAE,IAAI;AAC/C,6BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,MAClD;AACA,UAAI,OAAO,UAAW,QAAO,UAAU,CAAC;AACxC,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mBAAwC;AAAA,IAC5C,CAAC,MAAwB;AACvB,UAAI,eAAe,QAAS,gBAAe,QAAQ,MAAM;AAAA,UACpD,kBAAiB,SAAS,MAAM;AACrC,uBAAiB,CAAC;AAAA,IACpB;AAAA,IACA,CAAC,gBAAgB,kBAAkB,gBAAgB;AAAA,EACrD;AACA,SAAO,EAAE,WAAW,cAAc,aAAa;AACjD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -63,11 +63,9 @@ const useDropdownMenuItemHandlers = (option) => {
|
|
|
63
63
|
e.preventDefault();
|
|
64
64
|
const nextSelectedOptions = { ...mutableSelectedOptions.current };
|
|
65
65
|
nextSelectedOptions[mutableOption.current.dsId] = !mutableSelectedOptions.current[mutableOption.current.dsId];
|
|
66
|
-
if (mutableOption?.current?.disabled)
|
|
67
|
-
return;
|
|
66
|
+
if (mutableOption?.current?.disabled) return;
|
|
68
67
|
mutableOnOptionClick?.current?.(nextSelectedOptions, mutableOption.current, e);
|
|
69
|
-
if (e.type === "click")
|
|
70
|
-
mutableOption?.current?.onClick?.(e);
|
|
68
|
+
if (e.type === "click") mutableOption?.current?.onClick?.(e);
|
|
71
69
|
},
|
|
72
70
|
[mutableOnOptionClick, mutableOption, mutableSelectedOptions]
|
|
73
71
|
);
|
|
@@ -96,10 +94,8 @@ const useDropdownMenuItemHandlers = (option) => {
|
|
|
96
94
|
mutableOption.current,
|
|
97
95
|
e
|
|
98
96
|
);
|
|
99
|
-
if (inputReference.current)
|
|
100
|
-
|
|
101
|
-
else
|
|
102
|
-
listboxReference.current?.focus();
|
|
97
|
+
if (inputReference.current) inputReference.current.focus();
|
|
98
|
+
else listboxReference.current?.focus();
|
|
103
99
|
},
|
|
104
100
|
[inputReference, listboxReference, mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions]
|
|
105
101
|
);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useDropdownMenuItemHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import type React from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { manageOpenedSubmenus } from '../utils/index.js';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\n\ntype UseDropdownMenuItemHandlersType = (option: DSDropdownMenuT.Item) => {\n onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onSubmenuOpen: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onSubmenuClose: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onDropdownKeyDown: React.KeyboardEventHandler;\n onMouseEnter: React.MouseEventHandler;\n onMouseLeave: React.MouseEventHandler;\n};\n\nexport const useDropdownMenuItemHandlers: UseDropdownMenuItemHandlersType = (option) => {\n const {\n props: {\n options,\n selectedOptions,\n onOptionClick,\n openedSubmenus,\n onSubmenuToggle,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n },\n listboxReference,\n inputReference,\n } = useContext(DSDropdownMenuContext);\n\n // it's vital for the opinionated onSubmenuOpen / onSubmenuClose to\n // - have access to the latest information about openedSubmenus\n // - be as \"pure\" as possible to guarantee that usage with the \"bridge\" pattern\n // will be as \"transparent\" as possible (if nested inside async code, redefing the callback may invoke a stale closure)\n // the whole component is kind of messy so I'm going to implement a quick and dirty solution\n // I'm going to make all the arguments for the callbacks \"mutable\",\n // this is sub-optimal on a performance level but will have to do for now\n const mutableOption = useMakeMutable(option);\n const mutableOptions = useMakeMutable(options);\n const mutableOpenedSubmenus = useMakeMutable(openedSubmenus);\n const mutableOnSubmenuToggle = useMakeMutable(onSubmenuToggle);\n const mutableOnOptionClick = useMakeMutable(onOptionClick);\n const mutableSelectedOptions = useMakeMutable(selectedOptions);\n\n // This callback is used on single / multi items to toggle the selection\n const onClick = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n e.stopPropagation();\n e.preventDefault();\n const nextSelectedOptions = { ...mutableSelectedOptions.current };\n nextSelectedOptions[mutableOption.current.dsId] = !mutableSelectedOptions.current[mutableOption.current.dsId];\n if ((mutableOption?.current as DSDropdownMenuT.ItemActionOptions)?.disabled) return; // prevent click when is disabled\n mutableOnOptionClick?.current?.(nextSelectedOptions, mutableOption.current, e);\n // we avoid invoking \"onClick\" twice when the users \"key-down - enter\" on the item by checking if the event is keyboard related\n if (e.type === 'click') mutableOption?.current?.onClick?.(e);\n },\n [mutableOnOptionClick, mutableOption, mutableSelectedOptions],\n );\n\n // This callback is used on submenu items to open it onMouseEnter\n const onSubmenuOpen = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n mutableOnSubmenuToggle?.current?.(\n manageOpenedSubmenus(\n mutableOptions.current,\n { ...(mutableOpenedSubmenus?.current || {}), [mutableOption.current.dsId]: true },\n mutableOption.current,\n ),\n mutableOption.current,\n e,\n );\n },\n [mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions],\n );\n\n // This callback is used on submenu to close it onMouseLeave\n const onSubmenuClose = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n mutableOnSubmenuToggle?.current?.(\n manageOpenedSubmenus(\n mutableOptions.current,\n { ...(mutableOpenedSubmenus?.current || {}), [mutableOption.current.dsId]: false },\n mutableOption.current,\n ),\n mutableOption.current,\n e,\n );\n if (inputReference.current) inputReference.current.focus();\n else listboxReference.current?.focus();\n },\n [inputReference, listboxReference, mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions],\n );\n\n // This callback is used on child dropdown to close the current opened submenu (which spawned it)\n const onDropdownKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (e.code === 'ArrowLeft') {\n onSubmenuClose(e);\n e.preventDefault();\n }\n },\n [onSubmenuClose],\n );\n\n return useMemo(\n () => ({\n onClick,\n onSubmenuOpen,\n onSubmenuClose,\n onDropdownKeyDown,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n }),\n [onClick, onSubmenuOpen, onSubmenuClose, onDropdownKeyDown, onMouseEnter, onMouseLeave, onMouseDown],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiD;AACjD,0BAA+B;AAC/B,iCAAsC;AACtC,mBAAqC;AAY9B,MAAM,8BAA+D,CAAC,WAAW;AACtF,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gDAAqB;AASpC,QAAM,oBAAgB,oCAAe,MAAM;AAC3C,QAAM,qBAAiB,oCAAe,OAAO;AAC7C,QAAM,4BAAwB,oCAAe,cAAc;AAC3D,QAAM,6BAAyB,oCAAe,eAAe;AAC7D,QAAM,2BAAuB,oCAAe,aAAa;AACzD,QAAM,6BAAyB,oCAAe,eAAe;AAG7D,QAAM,cAAU;AAAA,IACd,CAAC,MAA8C;AAC7C,QAAE,gBAAgB;AAClB,QAAE,eAAe;AACjB,YAAM,sBAAsB,EAAE,GAAG,uBAAuB,QAAQ;AAChE,0BAAoB,cAAc,QAAQ,IAAI,IAAI,CAAC,uBAAuB,QAAQ,cAAc,QAAQ,IAAI;AAC5G,UAAK,eAAe,SAA+C;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiD;AACjD,0BAA+B;AAC/B,iCAAsC;AACtC,mBAAqC;AAY9B,MAAM,8BAA+D,CAAC,WAAW;AACtF,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gDAAqB;AASpC,QAAM,oBAAgB,oCAAe,MAAM;AAC3C,QAAM,qBAAiB,oCAAe,OAAO;AAC7C,QAAM,4BAAwB,oCAAe,cAAc;AAC3D,QAAM,6BAAyB,oCAAe,eAAe;AAC7D,QAAM,2BAAuB,oCAAe,aAAa;AACzD,QAAM,6BAAyB,oCAAe,eAAe;AAG7D,QAAM,cAAU;AAAA,IACd,CAAC,MAA8C;AAC7C,QAAE,gBAAgB;AAClB,QAAE,eAAe;AACjB,YAAM,sBAAsB,EAAE,GAAG,uBAAuB,QAAQ;AAChE,0BAAoB,cAAc,QAAQ,IAAI,IAAI,CAAC,uBAAuB,QAAQ,cAAc,QAAQ,IAAI;AAC5G,UAAK,eAAe,SAA+C,SAAU;AAC7E,4BAAsB,UAAU,qBAAqB,cAAc,SAAS,CAAC;AAE7E,UAAI,EAAE,SAAS,QAAS,gBAAe,SAAS,UAAU,CAAC;AAAA,IAC7D;AAAA,IACA,CAAC,sBAAsB,eAAe,sBAAsB;AAAA,EAC9D;AAGA,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA8C;AAC7C,8BAAwB;AAAA,YACtB;AAAA,UACE,eAAe;AAAA,UACf,EAAE,GAAI,uBAAuB,WAAW,CAAC,GAAI,CAAC,cAAc,QAAQ,IAAI,GAAG,KAAK;AAAA,UAChF,cAAc;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,uBAAuB,eAAe,cAAc;AAAA,EAC/E;AAGA,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA8C;AAC7C,8BAAwB;AAAA,YACtB;AAAA,UACE,eAAe;AAAA,UACf,EAAE,GAAI,uBAAuB,WAAW,CAAC,GAAI,CAAC,cAAc,QAAQ,IAAI,GAAG,MAAM;AAAA,UACjF,cAAc;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AACA,UAAI,eAAe,QAAS,gBAAe,QAAQ,MAAM;AAAA,UACpD,kBAAiB,SAAS,MAAM;AAAA,IACvC;AAAA,IACA,CAAC,gBAAgB,kBAAkB,wBAAwB,uBAAuB,eAAe,cAAc;AAAA,EACjH;AAGA,QAAM,wBAAgD;AAAA,IACpD,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,aAAa;AAC1B,uBAAe,CAAC;AAChB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,eAAe,gBAAgB,mBAAmB,cAAc,cAAc,WAAW;AAAA,EACrG;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/DropdownMenuContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable no-unused-vars */\nimport React, { useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\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 const onClickOutsideHandler = (e: MouseEvent | TouchEvent) => {\n // We need to find out if the click was originated inside a child's dropdownmenu\n const dropdownListboxes = [\n ...document.body.querySelectorAll(`[data-testid=\"${DropdownMenuDataTestId.MENU_WRAPPER}\"]`),\n ];\n if (dropdownListboxes.every((listbox) => !listbox.contains(e.target as Node))) {\n onClickOutside(e);\n }\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 <DSPopperJS\n referenceElement={triggerReferenceElement}\n showPopover={isOpened}\n withoutArrow\n withoutAnimation\n customOffset={customOffset}\n onClickOutside={onClickOutsideHandler}\n startPlacementPreference={startPlacementPreference}\n placementOrderPreference={placementOrderPreference}\n zIndex={zIndex}\n aria-label={(dataPopoverLabel as string) || 'dropdown-menu popover'}\n >\n {isLoading ? <DropdownMenuLoading /> : <DropdownMenuListBox />}\n </DSPopperJS>\n )}\n </StyledTriggerWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CnB;AA1CJ,mBAAkC;AAClC,yBAA2B;AAC3B,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;AAC7E,QAAM,wBAAwB,CAAC,MAA+B;AAE5D,UAAM,oBAAoB;AAAA,MACxB,GAAG,SAAS,KAAK,iBAAiB,iBAAiB,qDAAuB,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CnB;AA1CJ,mBAAkC;AAClC,yBAA2B;AAC3B,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;AAC7E,QAAM,wBAAwB,CAAC,MAA+B;AAE5D,UAAM,oBAAoB;AAAA,MACxB,GAAG,SAAS,KAAK,iBAAiB,iBAAiB,qDAAuB,YAAY,IAAI;AAAA,IAC5F;AACA,QAAI,kBAAkB,MAAM,CAAC,YAAY,CAAC,QAAQ,SAAS,EAAE,MAAc,CAAC,GAAG;AAC7E,qBAAe,CAAC;AAAA,IAClB;AAAA,EACF;AAEA,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,kBAAkB;AAAA,YAClB,aAAa;AAAA,YACb,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB;AAAA,YACA,gBAAgB;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAa,oBAA+B;AAAA,YAE3C,sBAAY,4CAAC,kDAAoB,IAAK,4CAAC,kDAAoB;AAAA;AAAA,QAC9D;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/DropdownMenuItemFactory.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport {\n ActionMenuItem,\n SingleMenuItem,\n MultiMenuItem,\n SubmenuItem,\n Separator,\n Section,\n SingleWithSubmenuItem,\n SkeletonMenuItem,\n} from '@elliemae/ds-menu-items';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { useDropdownMenuItemHandlers } from '../hooks/index.js';\n\nconst menuItemMap = [\n 'action',\n 'single',\n 'checkbox',\n 'submenu',\n 'separator',\n 'section',\n 'singleWithSubmenu',\n 'skeleton',\n] as const;\n\nconst Component = (props: DSDropdownMenuT.Item) => {\n const type = props.type;\n switch (type) {\n case 'action':\n return <ActionMenuItem {...props} />;\n case 'single':\n return <SingleMenuItem {...props} />;\n case 'checkbox':\n return <MultiMenuItem {...props} />;\n case 'submenu':\n return <SubmenuItem {...props} />;\n case 'separator':\n return <Separator {...props} />;\n case 'section':\n return <Section {...props} />;\n case 'singleWithSubmenu':\n return <SingleWithSubmenuItem {...props} />;\n case 'skeleton':\n return <SkeletonMenuItem {...props} />;\n default:\n // The purpose of 'UnexpectedOptionType' is to make sure that whenever we reach the default case, the type must be never\n // If it isn't, we forgot to add a case for a new option type that was added to DSDropdownMenuT.Item\n // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\n const UnexpectedOptionType: never = type;\n // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n throw new Error(`Provided option type (${type}) is not valid. Please provide one of: ${menuItemMap.join(', ')}`);\n }\n};\n\nexport const DropdownMenuItemFactory: React.ComponentType<{\n option: DSDropdownMenuT.Item;\n style?: Record<string, unknown>;\n innerRef?: (el: HTMLElement) => void;\n optionsShouldHavePadding: boolean;\n}> = ({ option, style, innerRef, optionsShouldHavePadding }): JSX.Element => {\n const {\n props: { selectedOptions, onOptionClick, openedSubmenus, onSubmenuToggle, onClickOutside },\n activeDescendant,\n DSDropdownMenuV2,\n } = useContext(DSDropdownMenuContext);\n\n const { onDropdownKeyDown, ...handlers } = useDropdownMenuItemHandlers(option);\n\n const itemProps = useMemo(\n () => ({\n ...handlers,\n innerRef,\n isActive: activeDescendant === option.dsId,\n isSelected: selectedOptions ? !!selectedOptions[option.dsId] : false,\n isSubmenuOpened: openedSubmenus ? !!openedSubmenus[option.dsId] : false,\n tabIndex: -1 as const,\n optionsShouldHavePadding,\n wrapperStyles: style,\n Dropdown: DSDropdownMenuV2,\n dropdownProps: {\n ...option,\n options: option.type === 'submenu' || option.type === 'singleWithSubmenu' ? option.options : [],\n onClickOutside,\n onOptionClick,\n onSubmenuToggle,\n selectedOptions,\n openedSubmenus,\n onKeyDown: onDropdownKeyDown,\n },\n }),\n [\n handlers,\n innerRef,\n activeDescendant,\n option,\n selectedOptions,\n openedSubmenus,\n optionsShouldHavePadding,\n style,\n DSDropdownMenuV2,\n onClickOutside,\n onOptionClick,\n onSubmenuToggle,\n onDropdownKeyDown,\n ],\n );\n\n return <Component {...option} {...itemProps} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BV;AA9Bb,mBAA2C;AAC3C,2BASO;AAEP,iCAAsC;AACtC,mBAA4C;AAE5C,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,YAAY,CAAC,UAAgC;AACjD,QAAM,OAAO,MAAM;AACnB,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,4CAAC,uCAAgB,GAAG,OAAO;AAAA,IACpC,KAAK;AACH,aAAO,4CAAC,uCAAgB,GAAG,OAAO;AAAA,IACpC,KAAK;AACH,aAAO,4CAAC,sCAAe,GAAG,OAAO;AAAA,IACnC,KAAK;AACH,aAAO,4CAAC,oCAAa,GAAG,OAAO;AAAA,IACjC,KAAK;AACH,aAAO,4CAAC,kCAAW,GAAG,OAAO;AAAA,IAC/B,KAAK;AACH,aAAO,4CAAC,gCAAS,GAAG,OAAO;AAAA,IAC7B,KAAK;AACH,aAAO,4CAAC,8CAAuB,GAAG,OAAO;AAAA,IAC3C,KAAK;AACH,aAAO,4CAAC,yCAAkB,GAAG,OAAO;AAAA,IACtC;AAIE,YAAM,uBAA8B;AAEpC,YAAM,IAAI,MAAM,yBAAyB,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BV;AA9Bb,mBAA2C;AAC3C,2BASO;AAEP,iCAAsC;AACtC,mBAA4C;AAE5C,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,YAAY,CAAC,UAAgC;AACjD,QAAM,OAAO,MAAM;AACnB,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,4CAAC,uCAAgB,GAAG,OAAO;AAAA,IACpC,KAAK;AACH,aAAO,4CAAC,uCAAgB,GAAG,OAAO;AAAA,IACpC,KAAK;AACH,aAAO,4CAAC,sCAAe,GAAG,OAAO;AAAA,IACnC,KAAK;AACH,aAAO,4CAAC,oCAAa,GAAG,OAAO;AAAA,IACjC,KAAK;AACH,aAAO,4CAAC,kCAAW,GAAG,OAAO;AAAA,IAC/B,KAAK;AACH,aAAO,4CAAC,gCAAS,GAAG,OAAO;AAAA,IAC7B,KAAK;AACH,aAAO,4CAAC,8CAAuB,GAAG,OAAO;AAAA,IAC3C,KAAK;AACH,aAAO,4CAAC,yCAAkB,GAAG,OAAO;AAAA,IACtC;AAIE,YAAM,uBAA8B;AAEpC,YAAM,IAAI,MAAM,yBAAyB,IAAI,0CAA0C,YAAY,KAAK,IAAI,CAAC,EAAE;AAAA,EACnH;AACF;AAEO,MAAM,0BAKR,CAAC,EAAE,QAAQ,OAAO,UAAU,yBAAyB,MAAmB;AAC3E,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,eAAe,gBAAgB,iBAAiB,eAAe;AAAA,IACzF;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gDAAqB;AAEpC,QAAM,EAAE,mBAAmB,GAAG,SAAS,QAAI,0CAA4B,MAAM;AAE7E,QAAM,gBAAY;AAAA,IAChB,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA,UAAU,qBAAqB,OAAO;AAAA,MACtC,YAAY,kBAAkB,CAAC,CAAC,gBAAgB,OAAO,IAAI,IAAI;AAAA,MAC/D,iBAAiB,iBAAiB,CAAC,CAAC,eAAe,OAAO,IAAI,IAAI;AAAA,MAClE,UAAU;AAAA,MACV;AAAA,MACA,eAAe;AAAA,MACf,UAAU;AAAA,MACV,eAAe;AAAA,QACb,GAAG;AAAA,QACH,SAAS,OAAO,SAAS,aAAa,OAAO,SAAS,sBAAsB,OAAO,UAAU,CAAC;AAAA,QAC9F;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,4CAAC,aAAW,GAAG,QAAS,GAAG,WAAW;AAC/C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/DropdownMenuListBox.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { DropdownMenuDataTestId } from '../DropdownMenuDataTestId.js';\nimport { useDropdownListboxHandlers } from '../hooks/useDropdownListboxHandlers.js';\nimport { StyledInputWrapper, StyledListBoxWrapper, StyledHeaderWrapper, StyledOptionListWrapper } from '../styled.js';\nimport { DropdownMenuEmptyState } from './DropdownMenuEmptyState.js';\nimport { DropdownMenuItemFactory } from './DropdownMenuItemFactory.js';\nimport { DropdownMenuSkeleton } from './DropdownMenuSkeleton.js';\n\nimport { useAutofocusContainerOnOpen, useGetOptionSpecialAttributes } from '../hooks/index.js';\n\nexport const DropdownMenuListBox: React.ComponentType<Record<string, never>> = () => {\n const ctx = useContext(DSDropdownMenuContext);\n const {\n triggerReferenceElement,\n props: {\n isSkeleton,\n options,\n hasInput,\n inputValue,\n onInputChange,\n HeaderComp,\n minWidth: userMinWidth,\n maxHeight: userMaxHeight,\n },\n activeDescendant,\n listboxReference,\n inputReference,\n virtualListHelpers: { totalSize, virtualItems },\n } = ctx;\n\n useAutofocusContainerOnOpen();\n\n const { onKeyDown, onMouseEnter, onMouseLeave } = useDropdownListboxHandlers();\n\n const { optionsShouldHavePadding } = useGetOptionSpecialAttributes();\n\n const minWidth = useMemo(\n () => (userMinWidth !== undefined ? userMinWidth : Math.max(triggerReferenceElement?.offsetWidth ?? 0, 162)),\n [triggerReferenceElement?.offsetWidth, userMinWidth],\n );\n\n return useMemo(() => {\n if (virtualItems.length === 0) {\n return <DropdownMenuEmptyState minWidth={minWidth} maxHeight={userMaxHeight || 400} />;\n }\n return (\n <StyledListBoxWrapper\n minWidth={minWidth}\n maxHeight={userMaxHeight || 400}\n innerRef={listboxReference}\n tabIndex={0}\n data-testid={DropdownMenuDataTestId.MENU_WRAPPER}\n onKeyDown={onKeyDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n hasHeader={!!HeaderComp}\n >\n {isSkeleton ? (\n <DropdownMenuSkeleton />\n ) : (\n <>\n {HeaderComp && (\n <StyledHeaderWrapper alignItems=\"center\">\n <HeaderComp ctx={ctx} />\n </StyledHeaderWrapper>\n )}\n {hasInput && (\n <StyledInputWrapper key=\"dropdown-listbox-input-wrapper\" hasHeader={!!HeaderComp}>\n <DSInputText value={inputValue} onChange={onInputChange} innerRef={inputReference} />\n </StyledInputWrapper>\n )}\n <StyledOptionListWrapper\n aria-activedescendant={activeDescendant}\n data-testid={DropdownMenuDataTestId.LISTBOX}\n role=\"listbox\"\n aria-label=\"List of options\"\n style={{ height: totalSize || 16 }}\n >\n {virtualItems.map((vItem) => (\n <DropdownMenuItemFactory\n option={options[vItem.index]}\n style={{ position: 'absolute', top: vItem.start, left: 0, width: '100%' }}\n key={`dropdown-listbox-option-${options[vItem.index].dsId}`}\n innerRef={vItem.measureRef}\n optionsShouldHavePadding={optionsShouldHavePadding}\n />\n ))}\n </StyledOptionListWrapper>\n </>\n )}\n </StyledListBoxWrapper>\n );\n }, [\n HeaderComp,\n activeDescendant,\n ctx,\n hasInput,\n inputReference,\n inputValue,\n isSkeleton,\n listboxReference,\n minWidth,\n onInputChange,\n onKeyDown,\n onMouseEnter,\n onMouseLeave,\n options,\n optionsShouldHavePadding,\n totalSize,\n userMaxHeight,\n virtualItems,\n ]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6CV;AA7Cb,mBAA2C;AAC3C,gCAA4B;AAC5B,iCAAsC;AACtC,oCAAuC;AACvC,wCAA2C;AAC3C,oBAAuG;AACvG,oCAAuC;AACvC,qCAAwC;AACxC,kCAAqC;AAErC,mBAA2E;AAEpE,MAAM,sBAAkE,MAAM;AACnF,QAAM,UAAM,yBAAW,gDAAqB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,aAAa;AAAA,EAChD,IAAI;AAEJ,gDAA4B;AAE5B,QAAM,EAAE,WAAW,cAAc,aAAa,QAAI,8DAA2B;AAE7E,QAAM,EAAE,yBAAyB,QAAI,4CAA8B;AAEnE,QAAM,eAAW;AAAA,IACf,MAAO,iBAAiB,SAAY,eAAe,KAAK,IAAI,yBAAyB,eAAe,GAAG,GAAG;AAAA,IAC1G,CAAC,yBAAyB,aAAa,YAAY;AAAA,EACrD;AAEA,aAAO,sBAAQ,MAAM;AACnB,QAAI,aAAa,WAAW,GAAG;AAC7B,aAAO,4CAAC,wDAAuB,UAAoB,WAAW,iBAAiB,KAAK;AAAA,IACtF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,iBAAiB;AAAA,QAC5B,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAa,qDAAuB;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,CAAC,CAAC;AAAA,QAEZ,uBACC,4CAAC,oDAAqB,IAEtB,4EACG;AAAA,wBACC,4CAAC,qCAAoB,YAAW,UAC9B,sDAAC,cAAW,KAAU,GACxB;AAAA,UAED,YACC,4CAAC,oCAAwD,WAAW,CAAC,CAAC,YACpE,sDAAC,yCAAY,OAAO,YAAY,UAAU,eAAe,UAAU,gBAAgB,KAD7D,gCAExB;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,yBAAuB;AAAA,cACvB,eAAa,qDAAuB;AAAA,cACpC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,OAAO,EAAE,QAAQ,aAAa,GAAG;AAAA,cAEhC,uBAAa,IAAI,CAAC,UACjB;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAQ,QAAQ,MAAM,KAAK;AAAA,kBAC3B,OAAO,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO,OAAO;AAAA,kBAExE,UAAU,MAAM;AAAA,kBAChB;AAAA;AAAA,gBAFK,2BAA2B,QAAQ,MAAM,KAAK,EAAE;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6CV;AA7Cb,mBAA2C;AAC3C,gCAA4B;AAC5B,iCAAsC;AACtC,oCAAuC;AACvC,wCAA2C;AAC3C,oBAAuG;AACvG,oCAAuC;AACvC,qCAAwC;AACxC,kCAAqC;AAErC,mBAA2E;AAEpE,MAAM,sBAAkE,MAAM;AACnF,QAAM,UAAM,yBAAW,gDAAqB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,aAAa;AAAA,EAChD,IAAI;AAEJ,gDAA4B;AAE5B,QAAM,EAAE,WAAW,cAAc,aAAa,QAAI,8DAA2B;AAE7E,QAAM,EAAE,yBAAyB,QAAI,4CAA8B;AAEnE,QAAM,eAAW;AAAA,IACf,MAAO,iBAAiB,SAAY,eAAe,KAAK,IAAI,yBAAyB,eAAe,GAAG,GAAG;AAAA,IAC1G,CAAC,yBAAyB,aAAa,YAAY;AAAA,EACrD;AAEA,aAAO,sBAAQ,MAAM;AACnB,QAAI,aAAa,WAAW,GAAG;AAC7B,aAAO,4CAAC,wDAAuB,UAAoB,WAAW,iBAAiB,KAAK;AAAA,IACtF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,iBAAiB;AAAA,QAC5B,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAa,qDAAuB;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,CAAC,CAAC;AAAA,QAEZ,uBACC,4CAAC,oDAAqB,IAEtB,4EACG;AAAA,wBACC,4CAAC,qCAAoB,YAAW,UAC9B,sDAAC,cAAW,KAAU,GACxB;AAAA,UAED,YACC,4CAAC,oCAAwD,WAAW,CAAC,CAAC,YACpE,sDAAC,yCAAY,OAAO,YAAY,UAAU,eAAe,UAAU,gBAAgB,KAD7D,gCAExB;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,yBAAuB;AAAA,cACvB,eAAa,qDAAuB;AAAA,cACpC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,OAAO,EAAE,QAAQ,aAAa,GAAG;AAAA,cAEhC,uBAAa,IAAI,CAAC,UACjB;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAQ,QAAQ,MAAM,KAAK;AAAA,kBAC3B,OAAO,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO,OAAO;AAAA,kBAExE,UAAU,MAAM;AAAA,kBAChB;AAAA;AAAA,gBAFK,2BAA2B,QAAQ,MAAM,KAAK,EAAE,IAAI;AAAA,cAG3D,CACD;AAAA;AAAA,UACH;AAAA,WACF;AAAA;AAAA,IAEJ;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -49,8 +49,7 @@ const DropdownMenuLoading = () => {
|
|
|
49
49
|
}, [loadingRef]);
|
|
50
50
|
const onKeyDown = (0, import_react.useCallback)(
|
|
51
51
|
(e) => {
|
|
52
|
-
if (e.code === "Escape" || e.code === "ArrowLeft")
|
|
53
|
-
onClickOutside(e);
|
|
52
|
+
if (e.code === "Escape" || e.code === "ArrowLeft") onClickOutside(e);
|
|
54
53
|
},
|
|
55
54
|
[onClickOutside]
|
|
56
55
|
);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/DropdownMenuLoading.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useCallback, useContext, useLayoutEffect, useRef } from 'react';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { DropdownMenuDataTestId } from '../DropdownMenuDataTestId.js';\nimport { StyledLoadingWrapper } from '../styled.js';\n\nexport const DropdownMenuLoading: React.ComponentType<Record<string, never>> = () => {\n const {\n props: { onClickOutside },\n triggerReferenceElement,\n } = useContext(DSDropdownMenuContext);\n\n const loadingRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n loadingRef.current?.focus();\n }, [loadingRef]);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (e.code === 'Escape' || e.code === 'ArrowLeft') onClickOutside(e);\n },\n [onClickOutside],\n );\n\n return (\n <StyledLoadingWrapper\n minWidth={triggerReferenceElement?.offsetWidth ?? 0}\n justifyContent=\"center\"\n alignItems=\"center\"\n data-testid={DropdownMenuDataTestId.LOADING}\n tabIndex={0}\n role=\"status\"\n innerRef={loadingRef}\n aria-busy=\"true\"\n onKeyDown={onKeyDown}\n >\n <DSCircularProgressIndicator size=\"l\" />\n </StyledLoadingWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCjB;AArCN,mBAAwE;AACxE,4CAA4C;AAC5C,iCAAsC;AACtC,oCAAuC;AACvC,oBAAqC;AAE9B,MAAM,sBAAkE,MAAM;AACnF,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,IACxB;AAAA,EACF,QAAI,yBAAW,gDAAqB;AAEpC,QAAM,iBAAa,qBAAuB,IAAI;AAE9C,oCAAgB,MAAM;AACpB,eAAW,SAAS,MAAM;AAAA,EAC5B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,YAAY,EAAE,SAAS
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCjB;AArCN,mBAAwE;AACxE,4CAA4C;AAC5C,iCAAsC;AACtC,oCAAuC;AACvC,oBAAqC;AAE9B,MAAM,sBAAkE,MAAM;AACnF,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,IACxB;AAAA,EACF,QAAI,yBAAW,gDAAqB;AAEpC,QAAM,iBAAa,qBAAuB,IAAI;AAE9C,oCAAgB,MAAM;AACpB,eAAW,SAAS,MAAM;AAAA,EAC5B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,YAAY,EAAE,SAAS,YAAa,gBAAe,CAAC;AAAA,IACrE;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,yBAAyB,eAAe;AAAA,MAClD,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,eAAa,qDAAuB;AAAA,MACpC,UAAU;AAAA,MACV,MAAK;AAAA,MACL,UAAU;AAAA,MACV,aAAU;AAAA,MACV;AAAA,MAEA,sDAAC,qEAA4B,MAAK,KAAI;AAAA;AAAA,EACxC;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/DropdownMenuSkeleton.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const DropdownMenuSkeleton = () => {\n const SKELETON_AMOUNT = 5;\n\n return (\n <Grid>\n {Array(SKELETON_AMOUNT)\n .fill(0)\n .map((_, index) => (\n <SkeletonMenuItem key={index} dsId={`${index}-skeleton`} />\n ))}\n </Grid>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYb;AAXV,2BAAiC;AACjC,qBAAqB;AAEd,MAAM,uBAAuB,MAAM;AACxC,QAAM,kBAAkB;AAExB,SACE,4CAAC,uBACE,gBAAM,eAAe,EACnB,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UACP,4CAAC,yCAA6B,MAAM,GAAG,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYb;AAXV,2BAAiC;AACjC,qBAAqB;AAEd,MAAM,uBAAuB,MAAM;AACxC,QAAM,kBAAkB;AAExB,SACE,4CAAC,uBACE,gBAAM,eAAe,EACnB,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UACP,4CAAC,yCAA6B,MAAM,GAAG,KAAK,eAArB,KAAkC,CAC1D,GACL;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { styled, space, sizing, position, layout } from '@elliemae/ds-system';\nimport type { LayoutProps, SpaceProps, SizingProps, PositionProps } from '@elliemae/ds-system';\nimport { DSDropdownMenuName, DSDropdownMenuSlots } from './exported-related/index.js';\n\nexport const StyledTriggerWrapper = styled('div', { name: DSDropdownMenuName, slot: DSDropdownMenuSlots.ROOT })<\n LayoutProps & SpaceProps & SizingProps & PositionProps\n>`\n width: fit-content;\n ${space}\n ${sizing}\n ${position}\n ${layout}\n`;\n\nexport const StyledListBoxWrapper = styled('div', {\n name: DSDropdownMenuName,\n slot: DSDropdownMenuSlots.LISTBOX_WRAPPER,\n})<{ minWidth: SizingProps['minWidth']; maxHeight: SizingProps['maxHeight']; hasHeader: boolean }>`\n ${sizing}\n padding: ${(props) => (props.hasHeader ? 0 : '4px')} 0 4px 0;\n overflow-y: auto;\n background-color: white;\n outline: none;\n list-style: none;\n`;\n\nexport const StyledOptionListWrapper = styled('ul', {\n name: DSDropdownMenuName,\n slot: DSDropdownMenuSlots.OPTION_LIST_WRAPPER,\n})`\n position: relative;\n margin: 0;\n padding: 0;\n list-style: none;\n outline: none;\n`;\n\nexport const StyledLoadingWrapper = styled(Grid, {\n name: DSDropdownMenuName,\n slot: DSDropdownMenuSlots.LOADING_WRAPPER,\n})<{ minWidth: number }>`\n height: ${(props) => props.theme.space.xxl};\n min-width: ${(props) => props.minWidth}px;\n background-color: white;\n outline: none;\n`;\n\nexport const StyledEmptyStateWrapper = styled(Grid, {\n name: DSDropdownMenuName,\n slot: DSDropdownMenuSlots.EMPTY_STATE_WRAPPER,\n})<{ minWidth: SizingProps['minWidth']; maxHeight: SizingProps['maxHeight'] }>`\n font-weight: ${(props) => props.theme.fontWeights.regular};\n font-size: ${(props) => props.theme.fontSizes.value[500]};\n color: ${(props) => props.theme.colors.neutral[500]};\n`;\n\nexport const StyledInputWrapper = styled(Grid)<{ hasHeader: boolean }>`\n padding-top: ${(props) => (props.hasHeader ? props.theme.space.xxs : 0)};\n padding-left: ${(props) => props.theme.space.xxs};\n padding-right: ${(props) => props.theme.space.xxs};\n padding-bottom: ${(props) => props.theme.space.xxs};\n\n .em-ds-input {\n :focus,\n :hover {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n }\n :focus {\n border: 1px solid ${(props) => props.theme.colors.brand[700]} !important;\n box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]} !important;\n }\n }\n`;\n\nexport const StyledHeaderWrapper = styled(Grid, { name: DSDropdownMenuName, slot: DSDropdownMenuSlots.HEADER_WRAPPER })`\n width: 100%;\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral[300]};\n color: ${(props) => props.theme.colors.neutral[500]};\n font-size: 12px;\n padding-left: ${(props) => props.theme.space.xxxs};\n position: sticky;\n top: 0;\n z-index: 20;\n background-color: white;\n min-height: 16px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAAwD;AAExD,8BAAwD;AAEjD,MAAM,2BAAuB,yBAAO,OAAO,EAAE,MAAM,4CAAoB,MAAM,4CAAoB,KAAK,CAAC;AAAA;AAAA,IAI1G;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAAwD;AAExD,8BAAwD;AAEjD,MAAM,2BAAuB,yBAAO,OAAO,EAAE,MAAM,4CAAoB,MAAM,4CAAoB,KAAK,CAAC;AAAA;AAAA,IAI1G,sBAAK;AAAA,IACL,uBAAM;AAAA,IACN,yBAAQ;AAAA,IACR,uBAAM;AAAA;AAGH,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,4CAAoB;AAC5B,CAAC;AAAA,IACG,uBAAM;AAAA,aACG,CAAC,UAAW,MAAM,YAAY,IAAI,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,8BAA0B,yBAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,4CAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,4CAAoB;AAC5B,CAAC;AAAA,YACW,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,eAC7B,CAAC,UAAU,MAAM,QAAQ;AAAA;AAAA;AAAA;AAKjC,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,4CAAoB;AAC5B,CAAC;AAAA,iBACgB,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA,eAC5C,CAAC,UAAU,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,WAC/C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG9C,MAAM,yBAAqB,yBAAO,mBAAI;AAAA,iBAC5B,CAAC,UAAW,MAAM,YAAY,MAAM,MAAM,MAAM,MAAM,CAAE;AAAA,kBACvD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,mBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,oBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAU1B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,oCAC9B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKrE,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,4CAAoB,MAAM,4CAAoB,eAAe,CAAC;AAAA;AAAA,6BAEzF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,WAC5D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,kBAEnC,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,8 +34,7 @@ module.exports = __toCommonJS(findInCircularList_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
const findInCircularList = (list, from, criteria, step = 1) => {
|
|
36
36
|
for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
|
|
37
|
-
if (criteria(list[i]))
|
|
38
|
-
return i;
|
|
37
|
+
if (criteria(list[i])) return i;
|
|
39
38
|
}
|
|
40
39
|
return from;
|
|
41
40
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/findInCircularList.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const findInCircularList = <T>(list: T[], from: number, criteria: (item: T) => boolean, step = 1): number => {\n for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB,CAAI,MAAW,MAAc,UAAgC,OAAO,MAAc;AAClH,WAAS,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAAQ,MAAM,MAAM,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QAAQ;AAC9G,QAAI,SAAS,KAAK,CAAC,CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB,CAAI,MAAW,MAAc,UAAgC,OAAO,MAAc;AAClH,WAAS,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAAQ,MAAM,MAAM,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QAAQ;AAC9G,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAAA,EAChC;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,7 +9,6 @@ const DSDropdownMenuV2 = (props) => {
|
|
|
9
9
|
const ctx = useDropdownMenuConfig(props, DSDropdownMenuV2);
|
|
10
10
|
return /* @__PURE__ */ jsx(DSDropdownMenuContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(DropdownMenuContent, {}) });
|
|
11
11
|
};
|
|
12
|
-
DSDropdownMenuV2.propTypes = DSDropdownMenuV2PropTypes;
|
|
13
12
|
DSDropdownMenuV2.displayName = "DSDropdownMenuV2";
|
|
14
13
|
const DSDropdownMenuV2WithSchema = describe(DSDropdownMenuV2).description("Dropdown Menu");
|
|
15
14
|
DSDropdownMenuV2WithSchema.propTypes = DSDropdownMenuV2PropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSDropdownMenu.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSDropdownMenuT } from './react-desc-prop-types.js';\nimport { DSDropdownMenuV2PropTypes } from './react-desc-prop-types.js';\nimport { DSDropdownMenuContext } from './DropdownMenuContext.js';\nimport { useDropdownMenuConfig } from './config/useDropdownMenuConfig.js';\nimport { DropdownMenuContent } from './parts/DropdownMenuContent.js';\n\nconst DSDropdownMenuV2: React.ComponentType<DSDropdownMenuT.Props> = (props) => {\n const ctx = useDropdownMenuConfig(props, DSDropdownMenuV2);\n\n return (\n <DSDropdownMenuContext.Provider value={ctx}>\n <DropdownMenuContent />\n </DSDropdownMenuContext.Provider>\n );\n};\n\nDSDropdownMenuV2.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACajB;AAZN,SAAS,gBAAgB;AAEzB,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AAEpC,MAAM,mBAA+D,CAAC,UAAU;AAC9E,QAAM,MAAM,sBAAsB,OAAO,gBAAgB;AAEzD,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,KACrC,8BAAC,uBAAoB,GACvB;AAEJ;AAEA,iBAAiB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSDropdownMenuT } from './react-desc-prop-types.js';\nimport { DSDropdownMenuV2PropTypes } from './react-desc-prop-types.js';\nimport { DSDropdownMenuContext } from './DropdownMenuContext.js';\nimport { useDropdownMenuConfig } from './config/useDropdownMenuConfig.js';\nimport { DropdownMenuContent } from './parts/DropdownMenuContent.js';\n\nconst DSDropdownMenuV2: React.ComponentType<DSDropdownMenuT.Props> = (props) => {\n const ctx = useDropdownMenuConfig(props, DSDropdownMenuV2);\n\n return (\n <DSDropdownMenuContext.Provider value={ctx}>\n <DropdownMenuContent />\n </DSDropdownMenuContext.Provider>\n );\n};\n\nDSDropdownMenuV2.displayName = 'DSDropdownMenuV2';\nconst DSDropdownMenuV2WithSchema = describe(DSDropdownMenuV2).description('Dropdown Menu');\nDSDropdownMenuV2WithSchema.propTypes = DSDropdownMenuV2PropTypes;\n\nexport { DSDropdownMenuV2, DSDropdownMenuV2WithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACajB;AAZN,SAAS,gBAAgB;AAEzB,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AAEpC,MAAM,mBAA+D,CAAC,UAAU;AAC9E,QAAM,MAAM,sBAAsB,OAAO,gBAAgB;AAEzD,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,KACrC,8BAAC,uBAAoB,GACvB;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB,EAAE,YAAY,eAAe;AACzF,2BAA2B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -24,8 +24,7 @@ const useDropdownListboxHandlers = () => {
|
|
|
24
24
|
const onKeyDown = useCallback(
|
|
25
25
|
(e) => {
|
|
26
26
|
const currentItemIndex = options.findIndex((opt) => opt.dsId === activeDescendant);
|
|
27
|
-
if (currentItemIndex === -1)
|
|
28
|
-
return;
|
|
27
|
+
if (currentItemIndex === -1) return;
|
|
29
28
|
const option = options[currentItemIndex];
|
|
30
29
|
e.stopPropagation();
|
|
31
30
|
if (e.code === "ArrowDown") {
|
|
@@ -45,11 +44,9 @@ const useDropdownListboxHandlers = () => {
|
|
|
45
44
|
e.preventDefault();
|
|
46
45
|
const nextSelectedOptions = { ...selectedOptions };
|
|
47
46
|
nextSelectedOptions[option.dsId] = !selectedOptions[option.dsId];
|
|
48
|
-
if (option?.disabled)
|
|
49
|
-
return;
|
|
47
|
+
if (option?.disabled) return;
|
|
50
48
|
onOptionClick(nextSelectedOptions, option, e);
|
|
51
|
-
if (option.onClick)
|
|
52
|
-
option.onClick(e);
|
|
49
|
+
if (option.onClick) option.onClick(e);
|
|
53
50
|
} else if (e.code === "Escape") {
|
|
54
51
|
onClickOutside(e);
|
|
55
52
|
} else if (e.code === "Home") {
|
|
@@ -61,8 +58,7 @@ const useDropdownListboxHandlers = () => {
|
|
|
61
58
|
setActiveDescendant(options[nextItemIndex].dsId);
|
|
62
59
|
scrollOptionIntoView(options[nextItemIndex].dsId);
|
|
63
60
|
}
|
|
64
|
-
if (option.onKeyDown)
|
|
65
|
-
option.onKeyDown(e);
|
|
61
|
+
if (option.onKeyDown) option.onKeyDown(e);
|
|
66
62
|
userOnKeyDown(e);
|
|
67
63
|
},
|
|
68
64
|
[
|
|
@@ -80,10 +76,8 @@ const useDropdownListboxHandlers = () => {
|
|
|
80
76
|
);
|
|
81
77
|
const onMouseEnter = useCallback(
|
|
82
78
|
(e) => {
|
|
83
|
-
if (inputReference.current)
|
|
84
|
-
|
|
85
|
-
else
|
|
86
|
-
listboxReference.current?.focus();
|
|
79
|
+
if (inputReference.current) inputReference.current.focus();
|
|
80
|
+
else listboxReference.current?.focus();
|
|
87
81
|
userOnMouseEnter(e);
|
|
88
82
|
},
|
|
89
83
|
[inputReference, listboxReference, userOnMouseEnter]
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useDropdownListboxHandlers.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\nimport { findInCircularList, isOptionFocuseable, manageOpenedSubmenus } from '../utils/index.js';\n\ntype UseDropdownListboxHandlersType = () => {\n onKeyDown: React.KeyboardEventHandler;\n onMouseEnter: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n};\n\nexport const useDropdownListboxHandlers: UseDropdownListboxHandlersType = () => {\n const {\n props: {\n options,\n onOptionClick,\n openedSubmenus,\n onSubmenuToggle,\n onKeyDown: userOnKeyDown,\n selectedOptions,\n onClickOutside,\n onMouseEnter: userOnMouseEnter,\n onMouseLeave,\n },\n activeDescendant,\n setActiveDescendant,\n scrollOptionIntoView,\n listboxReference,\n inputReference,\n } = useContext(DSDropdownMenuContext);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const currentItemIndex = options.findIndex((opt) => opt.dsId === activeDescendant);\n if (currentItemIndex === -1) return;\n\n const option = options[currentItemIndex];\n\n e.stopPropagation();\n\n if (e.code === 'ArrowDown') {\n e.preventDefault();\n const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n setActiveDescendant(options[nextItemIndex].dsId);\n scrollOptionIntoView(options[nextItemIndex].dsId);\n } else if (e.code === 'ArrowUp') {\n e.preventDefault();\n const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n setActiveDescendant(options[nextItemIndex].dsId);\n scrollOptionIntoView(options[nextItemIndex].dsId);\n } else if (\n e.code === 'ArrowRight' &&\n ['submenu', 'singleWithSubmenu'].includes(option.type) &&\n !openedSubmenus[option.dsId]\n ) {\n e.preventDefault();\n onSubmenuToggle(manageOpenedSubmenus(options, { ...openedSubmenus, [option.dsId]: true }, option), option, e);\n } else if (['Space', 'Enter'].includes(e.code)) {\n e.preventDefault();\n const nextSelectedOptions = { ...selectedOptions };\n nextSelectedOptions[option.dsId] = !selectedOptions[option.dsId];\n if ((option as DSDropdownMenuT.ItemActionOptions)?.disabled) return; // prevent click when is disabled\n onOptionClick(nextSelectedOptions, option, e);\n if (option.onClick) option.onClick(e);\n } else if (e.code === 'Escape') {\n onClickOutside(e);\n } else if (e.code === 'Home') {\n const nextItemIndex = findInCircularList(options, options.length - 1, isOptionFocuseable);\n setActiveDescendant(options[nextItemIndex].dsId);\n scrollOptionIntoView(options[nextItemIndex].dsId);\n } else if (e.code === 'End') {\n const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);\n setActiveDescendant(options[nextItemIndex].dsId);\n scrollOptionIntoView(options[nextItemIndex].dsId);\n }\n if (option.onKeyDown) option.onKeyDown(e);\n userOnKeyDown(e);\n },\n [\n options,\n openedSubmenus,\n userOnKeyDown,\n activeDescendant,\n setActiveDescendant,\n scrollOptionIntoView,\n onSubmenuToggle,\n selectedOptions,\n onOptionClick,\n onClickOutside,\n ],\n );\n\n const onMouseEnter: React.MouseEventHandler = useCallback(\n (e: React.MouseEvent) => {\n if (inputReference.current) inputReference.current.focus();\n else listboxReference.current?.focus();\n userOnMouseEnter(e);\n },\n [inputReference, listboxReference, userOnMouseEnter],\n );\n return { onKeyDown, onMouseEnter, onMouseLeave };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,6BAA6B;AAEtC,SAAS,oBAAoB,oBAAoB,4BAA4B;AAQtE,MAAM,6BAA6D,MAAM;AAC9E,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,mBAAmB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,gBAAgB;AACjF,UAAI,qBAAqB;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,6BAA6B;AAEtC,SAAS,oBAAoB,oBAAoB,4BAA4B;AAQtE,MAAM,6BAA6D,MAAM;AAC9E,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,mBAAmB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,gBAAgB;AACjF,UAAI,qBAAqB,GAAI;AAE7B,YAAM,SAAS,QAAQ,gBAAgB;AAEvC,QAAE,gBAAgB;AAElB,UAAI,EAAE,SAAS,aAAa;AAC1B,UAAE,eAAe;AACjB,cAAM,gBAAgB,mBAAmB,SAAS,kBAAkB,kBAAkB;AACtF,4BAAoB,QAAQ,aAAa,EAAE,IAAI;AAC/C,6BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,MAClD,WAAW,EAAE,SAAS,WAAW;AAC/B,UAAE,eAAe;AACjB,cAAM,gBAAgB,mBAAmB,SAAS,kBAAkB,oBAAoB,EAAE;AAC1F,4BAAoB,QAAQ,aAAa,EAAE,IAAI;AAC/C,6BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,MAClD,WACE,EAAE,SAAS,gBACX,CAAC,WAAW,mBAAmB,EAAE,SAAS,OAAO,IAAI,KACrD,CAAC,eAAe,OAAO,IAAI,GAC3B;AACA,UAAE,eAAe;AACjB,wBAAgB,qBAAqB,SAAS,EAAE,GAAG,gBAAgB,CAAC,OAAO,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;AAAA,MAC9G,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9C,UAAE,eAAe;AACjB,cAAM,sBAAsB,EAAE,GAAG,gBAAgB;AACjD,4BAAoB,OAAO,IAAI,IAAI,CAAC,gBAAgB,OAAO,IAAI;AAC/D,YAAK,QAA8C,SAAU;AAC7D,sBAAc,qBAAqB,QAAQ,CAAC;AAC5C,YAAI,OAAO,QAAS,QAAO,QAAQ,CAAC;AAAA,MACtC,WAAW,EAAE,SAAS,UAAU;AAC9B,uBAAe,CAAC;AAAA,MAClB,WAAW,EAAE,SAAS,QAAQ;AAC5B,cAAM,gBAAgB,mBAAmB,SAAS,QAAQ,SAAS,GAAG,kBAAkB;AACxF,4BAAoB,QAAQ,aAAa,EAAE,IAAI;AAC/C,6BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,MAClD,WAAW,EAAE,SAAS,OAAO;AAC3B,cAAM,gBAAgB,mBAAmB,SAAS,GAAG,oBAAoB,EAAE;AAC3E,4BAAoB,QAAQ,aAAa,EAAE,IAAI;AAC/C,6BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,MAClD;AACA,UAAI,OAAO,UAAW,QAAO,UAAU,CAAC;AACxC,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,eAAwC;AAAA,IAC5C,CAAC,MAAwB;AACvB,UAAI,eAAe,QAAS,gBAAe,QAAQ,MAAM;AAAA,UACpD,kBAAiB,SAAS,MAAM;AACrC,uBAAiB,CAAC;AAAA,IACpB;AAAA,IACA,CAAC,gBAAgB,kBAAkB,gBAAgB;AAAA,EACrD;AACA,SAAO,EAAE,WAAW,cAAc,aAAa;AACjD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,11 +30,9 @@ const useDropdownMenuItemHandlers = (option) => {
|
|
|
30
30
|
e.preventDefault();
|
|
31
31
|
const nextSelectedOptions = { ...mutableSelectedOptions.current };
|
|
32
32
|
nextSelectedOptions[mutableOption.current.dsId] = !mutableSelectedOptions.current[mutableOption.current.dsId];
|
|
33
|
-
if (mutableOption?.current?.disabled)
|
|
34
|
-
return;
|
|
33
|
+
if (mutableOption?.current?.disabled) return;
|
|
35
34
|
mutableOnOptionClick?.current?.(nextSelectedOptions, mutableOption.current, e);
|
|
36
|
-
if (e.type === "click")
|
|
37
|
-
mutableOption?.current?.onClick?.(e);
|
|
35
|
+
if (e.type === "click") mutableOption?.current?.onClick?.(e);
|
|
38
36
|
},
|
|
39
37
|
[mutableOnOptionClick, mutableOption, mutableSelectedOptions]
|
|
40
38
|
);
|
|
@@ -63,10 +61,8 @@ const useDropdownMenuItemHandlers = (option) => {
|
|
|
63
61
|
mutableOption.current,
|
|
64
62
|
e
|
|
65
63
|
);
|
|
66
|
-
if (inputReference.current)
|
|
67
|
-
|
|
68
|
-
else
|
|
69
|
-
listboxReference.current?.focus();
|
|
64
|
+
if (inputReference.current) inputReference.current.focus();
|
|
65
|
+
else listboxReference.current?.focus();
|
|
70
66
|
},
|
|
71
67
|
[inputReference, listboxReference, mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions]
|
|
72
68
|
);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useDropdownMenuItemHandlers.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { manageOpenedSubmenus } from '../utils/index.js';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\n\ntype UseDropdownMenuItemHandlersType = (option: DSDropdownMenuT.Item) => {\n onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onSubmenuOpen: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onSubmenuClose: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onDropdownKeyDown: React.KeyboardEventHandler;\n onMouseEnter: React.MouseEventHandler;\n onMouseLeave: React.MouseEventHandler;\n};\n\nexport const useDropdownMenuItemHandlers: UseDropdownMenuItemHandlersType = (option) => {\n const {\n props: {\n options,\n selectedOptions,\n onOptionClick,\n openedSubmenus,\n onSubmenuToggle,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n },\n listboxReference,\n inputReference,\n } = useContext(DSDropdownMenuContext);\n\n // it's vital for the opinionated onSubmenuOpen / onSubmenuClose to\n // - have access to the latest information about openedSubmenus\n // - be as \"pure\" as possible to guarantee that usage with the \"bridge\" pattern\n // will be as \"transparent\" as possible (if nested inside async code, redefing the callback may invoke a stale closure)\n // the whole component is kind of messy so I'm going to implement a quick and dirty solution\n // I'm going to make all the arguments for the callbacks \"mutable\",\n // this is sub-optimal on a performance level but will have to do for now\n const mutableOption = useMakeMutable(option);\n const mutableOptions = useMakeMutable(options);\n const mutableOpenedSubmenus = useMakeMutable(openedSubmenus);\n const mutableOnSubmenuToggle = useMakeMutable(onSubmenuToggle);\n const mutableOnOptionClick = useMakeMutable(onOptionClick);\n const mutableSelectedOptions = useMakeMutable(selectedOptions);\n\n // This callback is used on single / multi items to toggle the selection\n const onClick = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n e.stopPropagation();\n e.preventDefault();\n const nextSelectedOptions = { ...mutableSelectedOptions.current };\n nextSelectedOptions[mutableOption.current.dsId] = !mutableSelectedOptions.current[mutableOption.current.dsId];\n if ((mutableOption?.current as DSDropdownMenuT.ItemActionOptions)?.disabled) return; // prevent click when is disabled\n mutableOnOptionClick?.current?.(nextSelectedOptions, mutableOption.current, e);\n // we avoid invoking \"onClick\" twice when the users \"key-down - enter\" on the item by checking if the event is keyboard related\n if (e.type === 'click') mutableOption?.current?.onClick?.(e);\n },\n [mutableOnOptionClick, mutableOption, mutableSelectedOptions],\n );\n\n // This callback is used on submenu items to open it onMouseEnter\n const onSubmenuOpen = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n mutableOnSubmenuToggle?.current?.(\n manageOpenedSubmenus(\n mutableOptions.current,\n { ...(mutableOpenedSubmenus?.current || {}), [mutableOption.current.dsId]: true },\n mutableOption.current,\n ),\n mutableOption.current,\n e,\n );\n },\n [mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions],\n );\n\n // This callback is used on submenu to close it onMouseLeave\n const onSubmenuClose = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n mutableOnSubmenuToggle?.current?.(\n manageOpenedSubmenus(\n mutableOptions.current,\n { ...(mutableOpenedSubmenus?.current || {}), [mutableOption.current.dsId]: false },\n mutableOption.current,\n ),\n mutableOption.current,\n e,\n );\n if (inputReference.current) inputReference.current.focus();\n else listboxReference.current?.focus();\n },\n [inputReference, listboxReference, mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions],\n );\n\n // This callback is used on child dropdown to close the current opened submenu (which spawned it)\n const onDropdownKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (e.code === 'ArrowLeft') {\n onSubmenuClose(e);\n e.preventDefault();\n }\n },\n [onSubmenuClose],\n );\n\n return useMemo(\n () => ({\n onClick,\n onSubmenuOpen,\n onSubmenuClose,\n onDropdownKeyDown,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n }),\n [onClick, onSubmenuOpen, onSubmenuClose, onDropdownKeyDown, onMouseEnter, onMouseLeave, onMouseDown],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,YAAY,eAAe;AACjD,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAY9B,MAAM,8BAA+D,CAAC,WAAW;AACtF,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AASpC,QAAM,gBAAgB,eAAe,MAAM;AAC3C,QAAM,iBAAiB,eAAe,OAAO;AAC7C,QAAM,wBAAwB,eAAe,cAAc;AAC3D,QAAM,yBAAyB,eAAe,eAAe;AAC7D,QAAM,uBAAuB,eAAe,aAAa;AACzD,QAAM,yBAAyB,eAAe,eAAe;AAG7D,QAAM,UAAU;AAAA,IACd,CAAC,MAA8C;AAC7C,QAAE,gBAAgB;AAClB,QAAE,eAAe;AACjB,YAAM,sBAAsB,EAAE,GAAG,uBAAuB,QAAQ;AAChE,0BAAoB,cAAc,QAAQ,IAAI,IAAI,CAAC,uBAAuB,QAAQ,cAAc,QAAQ,IAAI;AAC5G,UAAK,eAAe,SAA+C;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,YAAY,eAAe;AACjD,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAY9B,MAAM,8BAA+D,CAAC,WAAW;AACtF,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AASpC,QAAM,gBAAgB,eAAe,MAAM;AAC3C,QAAM,iBAAiB,eAAe,OAAO;AAC7C,QAAM,wBAAwB,eAAe,cAAc;AAC3D,QAAM,yBAAyB,eAAe,eAAe;AAC7D,QAAM,uBAAuB,eAAe,aAAa;AACzD,QAAM,yBAAyB,eAAe,eAAe;AAG7D,QAAM,UAAU;AAAA,IACd,CAAC,MAA8C;AAC7C,QAAE,gBAAgB;AAClB,QAAE,eAAe;AACjB,YAAM,sBAAsB,EAAE,GAAG,uBAAuB,QAAQ;AAChE,0BAAoB,cAAc,QAAQ,IAAI,IAAI,CAAC,uBAAuB,QAAQ,cAAc,QAAQ,IAAI;AAC5G,UAAK,eAAe,SAA+C,SAAU;AAC7E,4BAAsB,UAAU,qBAAqB,cAAc,SAAS,CAAC;AAE7E,UAAI,EAAE,SAAS,QAAS,gBAAe,SAAS,UAAU,CAAC;AAAA,IAC7D;AAAA,IACA,CAAC,sBAAsB,eAAe,sBAAsB;AAAA,EAC9D;AAGA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA8C;AAC7C,8BAAwB;AAAA,QACtB;AAAA,UACE,eAAe;AAAA,UACf,EAAE,GAAI,uBAAuB,WAAW,CAAC,GAAI,CAAC,cAAc,QAAQ,IAAI,GAAG,KAAK;AAAA,UAChF,cAAc;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,uBAAuB,eAAe,cAAc;AAAA,EAC/E;AAGA,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA8C;AAC7C,8BAAwB;AAAA,QACtB;AAAA,UACE,eAAe;AAAA,UACf,EAAE,GAAI,uBAAuB,WAAW,CAAC,GAAI,CAAC,cAAc,QAAQ,IAAI,GAAG,MAAM;AAAA,UACjF,cAAc;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AACA,UAAI,eAAe,QAAS,gBAAe,QAAQ,MAAM;AAAA,UACpD,kBAAiB,SAAS,MAAM;AAAA,IACvC;AAAA,IACA,CAAC,gBAAgB,kBAAkB,wBAAwB,uBAAuB,eAAe,cAAc;AAAA,EACjH;AAGA,QAAM,oBAAgD;AAAA,IACpD,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,aAAa;AAC1B,uBAAe,CAAC;AAChB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,eAAe,gBAAgB,mBAAmB,cAAc,cAAc,WAAW;AAAA,EACrG;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownMenuContent.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport React, { useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\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 const onClickOutsideHandler = (e: MouseEvent | TouchEvent) => {\n // We need to find out if the click was originated inside a child's dropdownmenu\n const dropdownListboxes = [\n ...document.body.querySelectorAll(`[data-testid=\"${DropdownMenuDataTestId.MENU_WRAPPER}\"]`),\n ];\n if (dropdownListboxes.every((listbox) => !listbox.contains(e.target as Node))) {\n onClickOutside(e);\n }\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 <DSPopperJS\n referenceElement={triggerReferenceElement}\n showPopover={isOpened}\n withoutArrow\n withoutAnimation\n customOffset={customOffset}\n onClickOutside={onClickOutsideHandler}\n startPlacementPreference={startPlacementPreference}\n placementOrderPreference={placementOrderPreference}\n zIndex={zIndex}\n aria-label={(dataPopoverLabel as string) || 'dropdown-menu popover'}\n >\n {isLoading ? <DropdownMenuLoading /> : <DropdownMenuListBox />}\n </DSPopperJS>\n )}\n </StyledTriggerWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC2CnB,SAuBmB,KAvBnB;AA1CJ,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,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;AAC7E,QAAM,wBAAwB,CAAC,MAA+B;AAE5D,UAAM,oBAAoB;AAAA,MACxB,GAAG,SAAS,KAAK,iBAAiB,iBAAiB,uBAAuB,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC2CnB,SAuBmB,KAvBnB;AA1CJ,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,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;AAC7E,QAAM,wBAAwB,CAAC,MAA+B;AAE5D,UAAM,oBAAoB;AAAA,MACxB,GAAG,SAAS,KAAK,iBAAiB,iBAAiB,uBAAuB,YAAY,IAAI;AAAA,IAC5F;AACA,QAAI,kBAAkB,MAAM,CAAC,YAAY,CAAC,QAAQ,SAAS,EAAE,MAAc,CAAC,GAAG;AAC7E,qBAAe,CAAC;AAAA,IAClB;AAAA,EACF;AAEA,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,kBAAkB;AAAA,YAClB,aAAa;AAAA,YACb,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB;AAAA,YACA,gBAAgB;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAa,oBAA+B;AAAA,YAE3C,sBAAY,oBAAC,uBAAoB,IAAK,oBAAC,uBAAoB;AAAA;AAAA,QAC9D;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownMenuItemFactory.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport {\n ActionMenuItem,\n SingleMenuItem,\n MultiMenuItem,\n SubmenuItem,\n Separator,\n Section,\n SingleWithSubmenuItem,\n SkeletonMenuItem,\n} from '@elliemae/ds-menu-items';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { useDropdownMenuItemHandlers } from '../hooks/index.js';\n\nconst menuItemMap = [\n 'action',\n 'single',\n 'checkbox',\n 'submenu',\n 'separator',\n 'section',\n 'singleWithSubmenu',\n 'skeleton',\n] as const;\n\nconst Component = (props: DSDropdownMenuT.Item) => {\n const type = props.type;\n switch (type) {\n case 'action':\n return <ActionMenuItem {...props} />;\n case 'single':\n return <SingleMenuItem {...props} />;\n case 'checkbox':\n return <MultiMenuItem {...props} />;\n case 'submenu':\n return <SubmenuItem {...props} />;\n case 'separator':\n return <Separator {...props} />;\n case 'section':\n return <Section {...props} />;\n case 'singleWithSubmenu':\n return <SingleWithSubmenuItem {...props} />;\n case 'skeleton':\n return <SkeletonMenuItem {...props} />;\n default:\n // The purpose of 'UnexpectedOptionType' is to make sure that whenever we reach the default case, the type must be never\n // If it isn't, we forgot to add a case for a new option type that was added to DSDropdownMenuT.Item\n // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\n const UnexpectedOptionType: never = type;\n // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n throw new Error(`Provided option type (${type}) is not valid. Please provide one of: ${menuItemMap.join(', ')}`);\n }\n};\n\nexport const DropdownMenuItemFactory: React.ComponentType<{\n option: DSDropdownMenuT.Item;\n style?: Record<string, unknown>;\n innerRef?: (el: HTMLElement) => void;\n optionsShouldHavePadding: boolean;\n}> = ({ option, style, innerRef, optionsShouldHavePadding }): JSX.Element => {\n const {\n props: { selectedOptions, onOptionClick, openedSubmenus, onSubmenuToggle, onClickOutside },\n activeDescendant,\n DSDropdownMenuV2,\n } = useContext(DSDropdownMenuContext);\n\n const { onDropdownKeyDown, ...handlers } = useDropdownMenuItemHandlers(option);\n\n const itemProps = useMemo(\n () => ({\n ...handlers,\n innerRef,\n isActive: activeDescendant === option.dsId,\n isSelected: selectedOptions ? !!selectedOptions[option.dsId] : false,\n isSubmenuOpened: openedSubmenus ? !!openedSubmenus[option.dsId] : false,\n tabIndex: -1 as const,\n optionsShouldHavePadding,\n wrapperStyles: style,\n Dropdown: DSDropdownMenuV2,\n dropdownProps: {\n ...option,\n options: option.type === 'submenu' || option.type === 'singleWithSubmenu' ? option.options : [],\n onClickOutside,\n onOptionClick,\n onSubmenuToggle,\n selectedOptions,\n openedSubmenus,\n onKeyDown: onDropdownKeyDown,\n },\n }),\n [\n handlers,\n innerRef,\n activeDescendant,\n option,\n selectedOptions,\n openedSubmenus,\n optionsShouldHavePadding,\n style,\n DSDropdownMenuV2,\n onClickOutside,\n onOptionClick,\n onSubmenuToggle,\n onDropdownKeyDown,\n ],\n );\n\n return <Component {...option} {...itemProps} />;\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC8BV;AA9Bb,SAAgB,YAAY,eAAe;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,6BAA6B;AACtC,SAAS,mCAAmC;AAE5C,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,YAAY,CAAC,UAAgC;AACjD,QAAM,OAAO,MAAM;AACnB,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,oBAAC,kBAAgB,GAAG,OAAO;AAAA,IACpC,KAAK;AACH,aAAO,oBAAC,kBAAgB,GAAG,OAAO;AAAA,IACpC,KAAK;AACH,aAAO,oBAAC,iBAAe,GAAG,OAAO;AAAA,IACnC,KAAK;AACH,aAAO,oBAAC,eAAa,GAAG,OAAO;AAAA,IACjC,KAAK;AACH,aAAO,oBAAC,aAAW,GAAG,OAAO;AAAA,IAC/B,KAAK;AACH,aAAO,oBAAC,WAAS,GAAG,OAAO;AAAA,IAC7B,KAAK;AACH,aAAO,oBAAC,yBAAuB,GAAG,OAAO;AAAA,IAC3C,KAAK;AACH,aAAO,oBAAC,oBAAkB,GAAG,OAAO;AAAA,IACtC;AAIE,YAAM,uBAA8B;AAEpC,YAAM,IAAI,MAAM,yBAAyB,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8BV;AA9Bb,SAAgB,YAAY,eAAe;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,6BAA6B;AACtC,SAAS,mCAAmC;AAE5C,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,YAAY,CAAC,UAAgC;AACjD,QAAM,OAAO,MAAM;AACnB,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,oBAAC,kBAAgB,GAAG,OAAO;AAAA,IACpC,KAAK;AACH,aAAO,oBAAC,kBAAgB,GAAG,OAAO;AAAA,IACpC,KAAK;AACH,aAAO,oBAAC,iBAAe,GAAG,OAAO;AAAA,IACnC,KAAK;AACH,aAAO,oBAAC,eAAa,GAAG,OAAO;AAAA,IACjC,KAAK;AACH,aAAO,oBAAC,aAAW,GAAG,OAAO;AAAA,IAC/B,KAAK;AACH,aAAO,oBAAC,WAAS,GAAG,OAAO;AAAA,IAC7B,KAAK;AACH,aAAO,oBAAC,yBAAuB,GAAG,OAAO;AAAA,IAC3C,KAAK;AACH,aAAO,oBAAC,oBAAkB,GAAG,OAAO;AAAA,IACtC;AAIE,YAAM,uBAA8B;AAEpC,YAAM,IAAI,MAAM,yBAAyB,IAAI,0CAA0C,YAAY,KAAK,IAAI,CAAC,EAAE;AAAA,EACnH;AACF;AAEO,MAAM,0BAKR,CAAC,EAAE,QAAQ,OAAO,UAAU,yBAAyB,MAAmB;AAC3E,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,eAAe,gBAAgB,iBAAiB,eAAe;AAAA,IACzF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,EAAE,mBAAmB,GAAG,SAAS,IAAI,4BAA4B,MAAM;AAE7E,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA,UAAU,qBAAqB,OAAO;AAAA,MACtC,YAAY,kBAAkB,CAAC,CAAC,gBAAgB,OAAO,IAAI,IAAI;AAAA,MAC/D,iBAAiB,iBAAiB,CAAC,CAAC,eAAe,OAAO,IAAI,IAAI;AAAA,MAClE,UAAU;AAAA,MACV;AAAA,MACA,eAAe;AAAA,MACf,UAAU;AAAA,MACV,eAAe;AAAA,QACb,GAAG;AAAA,QACH,SAAS,OAAO,SAAS,aAAa,OAAO,SAAS,sBAAsB,OAAO,UAAU,CAAC;AAAA,QAC9F;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,oBAAC,aAAW,GAAG,QAAS,GAAG,WAAW;AAC/C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownMenuListBox.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { DropdownMenuDataTestId } from '../DropdownMenuDataTestId.js';\nimport { useDropdownListboxHandlers } from '../hooks/useDropdownListboxHandlers.js';\nimport { StyledInputWrapper, StyledListBoxWrapper, StyledHeaderWrapper, StyledOptionListWrapper } from '../styled.js';\nimport { DropdownMenuEmptyState } from './DropdownMenuEmptyState.js';\nimport { DropdownMenuItemFactory } from './DropdownMenuItemFactory.js';\nimport { DropdownMenuSkeleton } from './DropdownMenuSkeleton.js';\n\nimport { useAutofocusContainerOnOpen, useGetOptionSpecialAttributes } from '../hooks/index.js';\n\nexport const DropdownMenuListBox: React.ComponentType<Record<string, never>> = () => {\n const ctx = useContext(DSDropdownMenuContext);\n const {\n triggerReferenceElement,\n props: {\n isSkeleton,\n options,\n hasInput,\n inputValue,\n onInputChange,\n HeaderComp,\n minWidth: userMinWidth,\n maxHeight: userMaxHeight,\n },\n activeDescendant,\n listboxReference,\n inputReference,\n virtualListHelpers: { totalSize, virtualItems },\n } = ctx;\n\n useAutofocusContainerOnOpen();\n\n const { onKeyDown, onMouseEnter, onMouseLeave } = useDropdownListboxHandlers();\n\n const { optionsShouldHavePadding } = useGetOptionSpecialAttributes();\n\n const minWidth = useMemo(\n () => (userMinWidth !== undefined ? userMinWidth : Math.max(triggerReferenceElement?.offsetWidth ?? 0, 162)),\n [triggerReferenceElement?.offsetWidth, userMinWidth],\n );\n\n return useMemo(() => {\n if (virtualItems.length === 0) {\n return <DropdownMenuEmptyState minWidth={minWidth} maxHeight={userMaxHeight || 400} />;\n }\n return (\n <StyledListBoxWrapper\n minWidth={minWidth}\n maxHeight={userMaxHeight || 400}\n innerRef={listboxReference}\n tabIndex={0}\n data-testid={DropdownMenuDataTestId.MENU_WRAPPER}\n onKeyDown={onKeyDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n hasHeader={!!HeaderComp}\n >\n {isSkeleton ? (\n <DropdownMenuSkeleton />\n ) : (\n <>\n {HeaderComp && (\n <StyledHeaderWrapper alignItems=\"center\">\n <HeaderComp ctx={ctx} />\n </StyledHeaderWrapper>\n )}\n {hasInput && (\n <StyledInputWrapper key=\"dropdown-listbox-input-wrapper\" hasHeader={!!HeaderComp}>\n <DSInputText value={inputValue} onChange={onInputChange} innerRef={inputReference} />\n </StyledInputWrapper>\n )}\n <StyledOptionListWrapper\n aria-activedescendant={activeDescendant}\n data-testid={DropdownMenuDataTestId.LISTBOX}\n role=\"listbox\"\n aria-label=\"List of options\"\n style={{ height: totalSize || 16 }}\n >\n {virtualItems.map((vItem) => (\n <DropdownMenuItemFactory\n option={options[vItem.index]}\n style={{ position: 'absolute', top: vItem.start, left: 0, width: '100%' }}\n key={`dropdown-listbox-option-${options[vItem.index].dsId}`}\n innerRef={vItem.measureRef}\n optionsShouldHavePadding={optionsShouldHavePadding}\n />\n ))}\n </StyledOptionListWrapper>\n </>\n )}\n </StyledListBoxWrapper>\n );\n }, [\n HeaderComp,\n activeDescendant,\n ctx,\n hasInput,\n inputReference,\n inputValue,\n isSkeleton,\n listboxReference,\n minWidth,\n onInputChange,\n onKeyDown,\n onMouseEnter,\n onMouseLeave,\n options,\n optionsShouldHavePadding,\n totalSize,\n userMaxHeight,\n virtualItems,\n ]);\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC6CV,SAiBH,UAjBG,KAiBH,YAjBG;AA7Cb,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB,sBAAsB,qBAAqB,+BAA+B;AACvG,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AACxC,SAAS,4BAA4B;AAErC,SAAS,6BAA6B,qCAAqC;AAEpE,MAAM,sBAAkE,MAAM;AACnF,QAAM,MAAM,WAAW,qBAAqB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,aAAa;AAAA,EAChD,IAAI;AAEJ,8BAA4B;AAE5B,QAAM,EAAE,WAAW,cAAc,aAAa,IAAI,2BAA2B;AAE7E,QAAM,EAAE,yBAAyB,IAAI,8BAA8B;AAEnE,QAAM,WAAW;AAAA,IACf,MAAO,iBAAiB,SAAY,eAAe,KAAK,IAAI,yBAAyB,eAAe,GAAG,GAAG;AAAA,IAC1G,CAAC,yBAAyB,aAAa,YAAY;AAAA,EACrD;AAEA,SAAO,QAAQ,MAAM;AACnB,QAAI,aAAa,WAAW,GAAG;AAC7B,aAAO,oBAAC,0BAAuB,UAAoB,WAAW,iBAAiB,KAAK;AAAA,IACtF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,iBAAiB;AAAA,QAC5B,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAa,uBAAuB;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,CAAC,CAAC;AAAA,QAEZ,uBACC,oBAAC,wBAAqB,IAEtB,iCACG;AAAA,wBACC,oBAAC,uBAAoB,YAAW,UAC9B,8BAAC,cAAW,KAAU,GACxB;AAAA,UAED,YACC,oBAAC,sBAAwD,WAAW,CAAC,CAAC,YACpE,8BAAC,eAAY,OAAO,YAAY,UAAU,eAAe,UAAU,gBAAgB,KAD7D,gCAExB;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,yBAAuB;AAAA,cACvB,eAAa,uBAAuB;AAAA,cACpC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,OAAO,EAAE,QAAQ,aAAa,GAAG;AAAA,cAEhC,uBAAa,IAAI,CAAC,UACjB;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAQ,QAAQ,MAAM,KAAK;AAAA,kBAC3B,OAAO,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO,OAAO;AAAA,kBAExE,UAAU,MAAM;AAAA,kBAChB;AAAA;AAAA,gBAFK,2BAA2B,QAAQ,MAAM,KAAK,EAAE;AAAA,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6CV,SAiBH,UAjBG,KAiBH,YAjBG;AA7Cb,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB,sBAAsB,qBAAqB,+BAA+B;AACvG,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AACxC,SAAS,4BAA4B;AAErC,SAAS,6BAA6B,qCAAqC;AAEpE,MAAM,sBAAkE,MAAM;AACnF,QAAM,MAAM,WAAW,qBAAqB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,aAAa;AAAA,EAChD,IAAI;AAEJ,8BAA4B;AAE5B,QAAM,EAAE,WAAW,cAAc,aAAa,IAAI,2BAA2B;AAE7E,QAAM,EAAE,yBAAyB,IAAI,8BAA8B;AAEnE,QAAM,WAAW;AAAA,IACf,MAAO,iBAAiB,SAAY,eAAe,KAAK,IAAI,yBAAyB,eAAe,GAAG,GAAG;AAAA,IAC1G,CAAC,yBAAyB,aAAa,YAAY;AAAA,EACrD;AAEA,SAAO,QAAQ,MAAM;AACnB,QAAI,aAAa,WAAW,GAAG;AAC7B,aAAO,oBAAC,0BAAuB,UAAoB,WAAW,iBAAiB,KAAK;AAAA,IACtF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,iBAAiB;AAAA,QAC5B,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAa,uBAAuB;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,CAAC,CAAC;AAAA,QAEZ,uBACC,oBAAC,wBAAqB,IAEtB,iCACG;AAAA,wBACC,oBAAC,uBAAoB,YAAW,UAC9B,8BAAC,cAAW,KAAU,GACxB;AAAA,UAED,YACC,oBAAC,sBAAwD,WAAW,CAAC,CAAC,YACpE,8BAAC,eAAY,OAAO,YAAY,UAAU,eAAe,UAAU,gBAAgB,KAD7D,gCAExB;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,yBAAuB;AAAA,cACvB,eAAa,uBAAuB;AAAA,cACpC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,OAAO,EAAE,QAAQ,aAAa,GAAG;AAAA,cAEhC,uBAAa,IAAI,CAAC,UACjB;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAQ,QAAQ,MAAM,KAAK;AAAA,kBAC3B,OAAO,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO,OAAO;AAAA,kBAExE,UAAU,MAAM;AAAA,kBAChB;AAAA;AAAA,gBAFK,2BAA2B,QAAQ,MAAM,KAAK,EAAE,IAAI;AAAA,cAG3D,CACD;AAAA;AAAA,UACH;AAAA,WACF;AAAA;AAAA,IAEJ;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,8 +16,7 @@ const DropdownMenuLoading = () => {
|
|
|
16
16
|
}, [loadingRef]);
|
|
17
17
|
const onKeyDown = useCallback(
|
|
18
18
|
(e) => {
|
|
19
|
-
if (e.code === "Escape" || e.code === "ArrowLeft")
|
|
20
|
-
onClickOutside(e);
|
|
19
|
+
if (e.code === "Escape" || e.code === "ArrowLeft") onClickOutside(e);
|
|
21
20
|
},
|
|
22
21
|
[onClickOutside]
|
|
23
22
|
);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownMenuLoading.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useLayoutEffect, useRef } from 'react';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { DropdownMenuDataTestId } from '../DropdownMenuDataTestId.js';\nimport { StyledLoadingWrapper } from '../styled.js';\n\nexport const DropdownMenuLoading: React.ComponentType<Record<string, never>> = () => {\n const {\n props: { onClickOutside },\n triggerReferenceElement,\n } = useContext(DSDropdownMenuContext);\n\n const loadingRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n loadingRef.current?.focus();\n }, [loadingRef]);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (e.code === 'Escape' || e.code === 'ArrowLeft') onClickOutside(e);\n },\n [onClickOutside],\n );\n\n return (\n <StyledLoadingWrapper\n minWidth={triggerReferenceElement?.offsetWidth ?? 0}\n justifyContent=\"center\"\n alignItems=\"center\"\n data-testid={DropdownMenuDataTestId.LOADING}\n tabIndex={0}\n role=\"status\"\n innerRef={loadingRef}\n aria-busy=\"true\"\n onKeyDown={onKeyDown}\n >\n <DSCircularProgressIndicator size=\"l\" />\n </StyledLoadingWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACqCjB;AArCN,SAAgB,aAAa,YAAY,iBAAiB,cAAc;AACxE,SAAS,mCAAmC;AAC5C,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AAE9B,MAAM,sBAAkE,MAAM;AACnF,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,IACxB;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,aAAa,OAAuB,IAAI;AAE9C,kBAAgB,MAAM;AACpB,eAAW,SAAS,MAAM;AAAA,EAC5B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,YAAY,EAAE,SAAS
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACqCjB;AArCN,SAAgB,aAAa,YAAY,iBAAiB,cAAc;AACxE,SAAS,mCAAmC;AAC5C,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AAE9B,MAAM,sBAAkE,MAAM;AACnF,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,IACxB;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,aAAa,OAAuB,IAAI;AAE9C,kBAAgB,MAAM;AACpB,eAAW,SAAS,MAAM;AAAA,EAC5B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,YAAY,EAAE,SAAS,YAAa,gBAAe,CAAC;AAAA,IACrE;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,yBAAyB,eAAe;AAAA,MAClD,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,eAAa,uBAAuB;AAAA,MACpC,UAAU;AAAA,MACV,MAAK;AAAA,MACL,UAAU;AAAA,MACV,aAAU;AAAA,MACV;AAAA,MAEA,8BAAC,+BAA4B,MAAK,KAAI;AAAA;AAAA,EACxC;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownMenuSkeleton.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const DropdownMenuSkeleton = () => {\n const SKELETON_AMOUNT = 5;\n\n return (\n <Grid>\n {Array(SKELETON_AMOUNT)\n .fill(0)\n .map((_, index) => (\n <SkeletonMenuItem key={index} dsId={`${index}-skeleton`} />\n ))}\n </Grid>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACYb;AAXV,SAAS,wBAAwB;AACjC,SAAS,YAAY;AAEd,MAAM,uBAAuB,MAAM;AACxC,QAAM,kBAAkB;AAExB,SACE,oBAAC,QACE,gBAAM,eAAe,EACnB,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UACP,oBAAC,oBAA6B,MAAM,GAAG,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACYb;AAXV,SAAS,wBAAwB;AACjC,SAAS,YAAY;AAEd,MAAM,uBAAuB,MAAM;AACxC,QAAM,kBAAkB;AAExB,SACE,oBAAC,QACE,gBAAM,eAAe,EACnB,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UACP,oBAAC,oBAA6B,MAAM,GAAG,KAAK,eAArB,KAAkC,CAC1D,GACL;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { styled, space, sizing, position, layout } from '@elliemae/ds-system';\nimport type { LayoutProps, SpaceProps, SizingProps, PositionProps } from '@elliemae/ds-system';\nimport { DSDropdownMenuName, DSDropdownMenuSlots } from './exported-related/index.js';\n\nexport const StyledTriggerWrapper = styled('div', { name: DSDropdownMenuName, slot: DSDropdownMenuSlots.ROOT })<\n LayoutProps & SpaceProps & SizingProps & PositionProps\n>`\n width: fit-content;\n ${space}\n ${sizing}\n ${position}\n ${layout}\n`;\n\nexport const StyledListBoxWrapper = styled('div', {\n name: DSDropdownMenuName,\n slot: DSDropdownMenuSlots.LISTBOX_WRAPPER,\n})<{ minWidth: SizingProps['minWidth']; maxHeight: SizingProps['maxHeight']; hasHeader: boolean }>`\n ${sizing}\n padding: ${(props) => (props.hasHeader ? 0 : '4px')} 0 4px 0;\n overflow-y: auto;\n background-color: white;\n outline: none;\n list-style: none;\n`;\n\nexport const StyledOptionListWrapper = styled('ul', {\n name: DSDropdownMenuName,\n slot: DSDropdownMenuSlots.OPTION_LIST_WRAPPER,\n})`\n position: relative;\n margin: 0;\n padding: 0;\n list-style: none;\n outline: none;\n`;\n\nexport const StyledLoadingWrapper = styled(Grid, {\n name: DSDropdownMenuName,\n slot: DSDropdownMenuSlots.LOADING_WRAPPER,\n})<{ minWidth: number }>`\n height: ${(props) => props.theme.space.xxl};\n min-width: ${(props) => props.minWidth}px;\n background-color: white;\n outline: none;\n`;\n\nexport const StyledEmptyStateWrapper = styled(Grid, {\n name: DSDropdownMenuName,\n slot: DSDropdownMenuSlots.EMPTY_STATE_WRAPPER,\n})<{ minWidth: SizingProps['minWidth']; maxHeight: SizingProps['maxHeight'] }>`\n font-weight: ${(props) => props.theme.fontWeights.regular};\n font-size: ${(props) => props.theme.fontSizes.value[500]};\n color: ${(props) => props.theme.colors.neutral[500]};\n`;\n\nexport const StyledInputWrapper = styled(Grid)<{ hasHeader: boolean }>`\n padding-top: ${(props) => (props.hasHeader ? props.theme.space.xxs : 0)};\n padding-left: ${(props) => props.theme.space.xxs};\n padding-right: ${(props) => props.theme.space.xxs};\n padding-bottom: ${(props) => props.theme.space.xxs};\n\n .em-ds-input {\n :focus,\n :hover {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n }\n :focus {\n border: 1px solid ${(props) => props.theme.colors.brand[700]} !important;\n box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]} !important;\n }\n }\n`;\n\nexport const StyledHeaderWrapper = styled(Grid, { name: DSDropdownMenuName, slot: DSDropdownMenuSlots.HEADER_WRAPPER })`\n width: 100%;\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral[300]};\n color: ${(props) => props.theme.colors.neutral[500]};\n font-size: 12px;\n padding-left: ${(props) => props.theme.space.xxxs};\n position: sticky;\n top: 0;\n z-index: 20;\n background-color: white;\n min-height: 16px;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,QAAQ,OAAO,QAAQ,UAAU,cAAc;AAExD,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,uBAAuB,OAAO,OAAO,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,KAAK,CAAC;AAAA;AAAA,IAI1G;AAAA,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,QAAQ,OAAO,QAAQ,UAAU,cAAc;AAExD,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,uBAAuB,OAAO,OAAO,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,KAAK,CAAC;AAAA;AAAA,IAI1G,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA;AAGH,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,IACG,MAAM;AAAA,aACG,CAAC,UAAW,MAAM,YAAY,IAAI,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,YACW,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,eAC7B,CAAC,UAAU,MAAM,QAAQ;AAAA;AAAA;AAAA;AAKjC,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,iBACgB,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA,eAC5C,CAAC,UAAU,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,WAC/C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG9C,MAAM,qBAAqB,OAAO,IAAI;AAAA,iBAC5B,CAAC,UAAW,MAAM,YAAY,MAAM,MAAM,MAAM,MAAM,CAAE;AAAA,kBACvD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,mBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,oBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAU1B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,oCAC9B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKrE,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,eAAe,CAAC;AAAA;AAAA,6BAEzF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,WAC5D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,kBAEnC,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
const findInCircularList = (list, from, criteria, step = 1) => {
|
|
3
3
|
for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
|
|
4
|
-
if (criteria(list[i]))
|
|
5
|
-
return i;
|
|
4
|
+
if (criteria(list[i])) return i;
|
|
6
5
|
}
|
|
7
6
|
return from;
|
|
8
7
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/findInCircularList.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const findInCircularList = <T>(list: T[], from: number, criteria: (item: T) => boolean, step = 1): number => {\n for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB,CAAI,MAAW,MAAc,UAAgC,OAAO,MAAc;AAClH,WAAS,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAAQ,MAAM,MAAM,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QAAQ;AAC9G,QAAI,SAAS,KAAK,CAAC,CAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB,CAAI,MAAW,MAAc,UAAgC,OAAO,MAAc;AAClH,WAAS,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAAQ,MAAM,MAAM,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QAAQ;AAC9G,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAAA,EAChC;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dropdownmenu-v2",
|
|
3
|
-
"version": "3.36.0-next.
|
|
3
|
+
"version": "3.36.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Dropdown Menu V2",
|
|
6
6
|
"files": [
|
|
@@ -38,19 +38,19 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@xstyled/system": "~3.7.3",
|
|
40
40
|
"react-virtual": "~2.10.4",
|
|
41
|
-
"@elliemae/ds-circular-progress-indicator": "3.36.0-next.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-popperjs": "3.36.0-next.
|
|
45
|
-
"@elliemae/ds-system": "3.36.0-next.
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-utilities": "3.36.0-next.
|
|
41
|
+
"@elliemae/ds-circular-progress-indicator": "3.36.0-next.2",
|
|
42
|
+
"@elliemae/ds-form-input-text": "3.36.0-next.2",
|
|
43
|
+
"@elliemae/ds-menu-items": "3.36.0-next.2",
|
|
44
|
+
"@elliemae/ds-popperjs": "3.36.0-next.2",
|
|
45
|
+
"@elliemae/ds-system": "3.36.0-next.2",
|
|
46
|
+
"@elliemae/ds-props-helpers": "3.36.0-next.2",
|
|
47
|
+
"@elliemae/ds-grid": "3.36.0-next.2",
|
|
48
|
+
"@elliemae/ds-utilities": "3.36.0-next.2"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
52
52
|
"styled-components": "~5.3.9",
|
|
53
|
-
"@elliemae/ds-monorepo-devops": "3.36.0-next.
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.36.0-next.2"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"@xstyled/styled-components": "~3.6.0",
|