@elliemae/ds-menu 2.1.0 → 2.2.0-alpha.3
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/cjs/Menu.js +137 -181
- package/cjs/Menu.js.map +7 -0
- package/cjs/MenuCombobox.js +67 -53
- package/cjs/MenuCombobox.js.map +7 -0
- package/cjs/MenuContext.js +38 -11
- package/cjs/MenuContext.js.map +7 -0
- package/cjs/MenuExports.js +28 -0
- package/cjs/MenuExports.js.map +7 -0
- package/cjs/MenuItems/CheckboxGroup.js +49 -42
- package/cjs/MenuItems/CheckboxGroup.js.map +7 -0
- package/cjs/MenuItems/MenuItem.js +116 -163
- package/cjs/MenuItems/MenuItem.js.map +7 -0
- package/cjs/MenuItems/MenuItemCheckable.js +77 -108
- package/cjs/MenuItems/MenuItemCheckable.js.map +7 -0
- package/cjs/MenuItems/MenuItemCheckbox.js +47 -41
- package/cjs/MenuItems/MenuItemCheckbox.js.map +7 -0
- package/cjs/MenuItems/MenuItemRadio.js +50 -38
- package/cjs/MenuItems/MenuItemRadio.js.map +7 -0
- package/cjs/MenuItems/RadioGroup.js +48 -39
- package/cjs/MenuItems/RadioGroup.js.map +7 -0
- package/cjs/MenuItems/SearchableGroup.js +88 -92
- package/cjs/MenuItems/SearchableGroup.js.map +7 -0
- package/cjs/MenuItems/SearchableList.js +92 -95
- package/cjs/MenuItems/SearchableList.js.map +7 -0
- package/cjs/MenuItems/SelectionGroup.js +85 -90
- package/cjs/MenuItems/SelectionGroup.js.map +7 -0
- package/cjs/MenuItems/Separator.js +55 -40
- package/cjs/MenuItems/Separator.js.map +7 -0
- package/cjs/MenuItems/SubMenu.js +143 -160
- package/cjs/MenuItems/SubMenu.js.map +7 -0
- package/cjs/MenuItems/menuItemFactory.js +38 -68
- package/cjs/MenuItems/menuItemFactory.js.map +7 -0
- package/cjs/MenuItems/renderMenuItems.js +53 -0
- package/cjs/MenuItems/renderMenuItems.js.map +7 -0
- package/cjs/VirtualMenuList.js +69 -39
- package/cjs/VirtualMenuList.js.map +7 -0
- package/cjs/index.js +63 -36
- package/cjs/index.js.map +7 -0
- package/cjs/utils/useHeightByAmountOfItems.js +43 -14
- package/cjs/utils/useHeightByAmountOfItems.js.map +7 -0
- package/esm/Menu.js +91 -149
- package/esm/Menu.js.map +7 -0
- package/esm/MenuCombobox.js +38 -45
- package/esm/MenuCombobox.js.map +7 -0
- package/esm/MenuContext.js +9 -5
- package/esm/MenuContext.js.map +7 -0
- package/esm/MenuExports.js +3 -0
- package/esm/MenuExports.js.map +7 -0
- package/esm/MenuItems/CheckboxGroup.js +19 -31
- package/esm/MenuItems/CheckboxGroup.js.map +7 -0
- package/esm/MenuItems/MenuItem.js +84 -148
- package/esm/MenuItems/MenuItem.js.map +7 -0
- package/esm/MenuItems/MenuItemCheckable.js +47 -96
- package/esm/MenuItems/MenuItemCheckable.js.map +7 -0
- package/esm/MenuItems/MenuItemCheckbox.js +18 -33
- package/esm/MenuItems/MenuItemCheckbox.js.map +7 -0
- package/esm/MenuItems/MenuItemRadio.js +20 -28
- package/esm/MenuItems/MenuItemRadio.js.map +7 -0
- package/esm/MenuItems/RadioGroup.js +18 -28
- package/esm/MenuItems/RadioGroup.js.map +7 -0
- package/esm/MenuItems/SearchableGroup.js +53 -76
- package/esm/MenuItems/SearchableGroup.js.map +7 -0
- package/esm/MenuItems/SearchableList.js +59 -82
- package/esm/MenuItems/SearchableList.js.map +7 -0
- package/esm/MenuItems/SelectionGroup.js +54 -78
- package/esm/MenuItems/SelectionGroup.js.map +7 -0
- package/esm/MenuItems/Separator.js +26 -29
- package/esm/MenuItems/Separator.js.map +7 -0
- package/esm/MenuItems/SubMenu.js +107 -140
- package/esm/MenuItems/SubMenu.js.map +7 -0
- package/esm/MenuItems/menuItemFactory.js +10 -60
- package/esm/MenuItems/menuItemFactory.js.map +7 -0
- package/esm/MenuItems/renderMenuItems.js +24 -0
- package/esm/MenuItems/renderMenuItems.js.map +7 -0
- package/esm/VirtualMenuList.js +39 -32
- package/esm/VirtualMenuList.js.map +7 -0
- package/esm/index.js +34 -13
- package/esm/index.js.map +7 -0
- package/esm/utils/useHeightByAmountOfItems.js +13 -11
- package/esm/utils/useHeightByAmountOfItems.js.map +7 -0
- package/package.json +19 -11
- package/types/Menu.d.ts +3 -2
- package/types/MenuContext.d.ts +3 -2
- package/types/MenuExports.d.ts +1 -0
- package/types/MenuItems/CheckboxGroup.d.ts +5 -5
- package/types/MenuItems/MenuItem.d.ts +5 -5
- package/types/MenuItems/MenuItemCheckable.d.ts +15 -15
- package/types/MenuItems/MenuItemCheckbox.d.ts +3 -2
- package/types/MenuItems/MenuItemRadio.d.ts +5 -5
- package/types/MenuItems/RadioGroup.d.ts +5 -5
- package/types/MenuItems/SearchableGroup.d.ts +3 -3
- package/types/MenuItems/SearchableList.d.ts +16 -16
- package/types/MenuItems/SelectionGroup.d.ts +16 -16
- package/types/MenuItems/Separator.d.ts +2 -1
- package/types/MenuItems/SubMenu.d.ts +18 -18
- package/types/MenuItems/menuItemFactory.d.ts +2 -3
- package/types/MenuItems/renderMenuItems.d.ts +1 -0
- package/types/VirtualMenuList.d.ts +3 -1
- package/types/index.d.ts +3 -2
- package/types/utils/useHeightByAmountOfItems.d.ts +3 -1
package/cjs/VirtualMenuList.js
CHANGED
|
@@ -1,48 +1,78 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
return
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var VirtualMenuList_exports = {};
|
|
29
|
+
__export(VirtualMenuList_exports, {
|
|
30
|
+
VirtualMenuList: () => VirtualMenuList,
|
|
31
|
+
default: () => VirtualMenuList_default
|
|
32
|
+
});
|
|
33
|
+
var React = __toESM(require("react"));
|
|
34
|
+
var import_react = __toESM(require("react"));
|
|
35
|
+
var import_react_window = __toESM(require("react-window"));
|
|
36
|
+
var import_useHeightByAmountOfItems = __toESM(require("./utils/useHeightByAmountOfItems"));
|
|
37
|
+
const MenuItem = ({ data, index, style }) => /* @__PURE__ */ import_react.default.createElement("div", {
|
|
38
|
+
key: index,
|
|
39
|
+
style
|
|
40
|
+
}, data && data[index] ? data[index] : "");
|
|
41
|
+
function resolveComputation(items, cb, timeout = 1e3) {
|
|
42
|
+
return () => new Promise((resolve) => {
|
|
43
|
+
const doResolve = (result2) => {
|
|
44
|
+
cb(result2);
|
|
45
|
+
resolve(result2);
|
|
46
|
+
};
|
|
47
|
+
let result = 0;
|
|
48
|
+
const timer = setTimeout(() => doResolve(result), timeout);
|
|
49
|
+
items.forEach((option) => {
|
|
50
|
+
result = option.props.label.length > result ? option.props.label.length : result;
|
|
51
|
+
});
|
|
52
|
+
clearTimeout(timer);
|
|
53
|
+
doResolve(result);
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
function VirtualMenuList({
|
|
57
|
+
items,
|
|
58
|
+
itemHeight = 32,
|
|
59
|
+
amountItemsInWindow = 5,
|
|
60
|
+
width,
|
|
61
|
+
height
|
|
62
|
+
}) {
|
|
63
|
+
const computedListHeight = (0, import_useHeightByAmountOfItems.useHeightByAmountOfItems)({
|
|
35
64
|
amountItems: amountItemsInWindow,
|
|
36
65
|
itemHeight,
|
|
37
66
|
items
|
|
38
67
|
});
|
|
39
|
-
return
|
|
68
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react_window.FixedSizeList, {
|
|
40
69
|
height: height || computedListHeight,
|
|
41
70
|
itemCount: items.length,
|
|
42
71
|
itemData: items,
|
|
43
72
|
itemSize: itemHeight,
|
|
44
|
-
width
|
|
45
|
-
},
|
|
73
|
+
width
|
|
74
|
+
}, MenuItem);
|
|
46
75
|
}
|
|
47
|
-
|
|
48
|
-
module.exports =
|
|
76
|
+
var VirtualMenuList_default = VirtualMenuList;
|
|
77
|
+
module.exports = __toCommonJS(VirtualMenuList_exports);
|
|
78
|
+
//# sourceMappingURL=VirtualMenuList.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/VirtualMenuList.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { FixedSizeList as List } from 'react-window';\nimport { useHeightByAmountOfItems } from './utils/useHeightByAmountOfItems';\n\nconst MenuItem = ({ data, index, style }) => (\n <div key={index} style={style}>\n {data && data[index] ? data[index] : ''}\n </div>\n);\n\n// eslint-disable-next-line no-unused-vars\nfunction resolveComputation(items, cb, timeout = 1000) {\n return () =>\n new Promise(resolve => {\n const doResolve = result => {\n cb(result);\n resolve(result);\n };\n let result = 0;\n const timer = setTimeout(() => doResolve(result), timeout);\n items.forEach(option => {\n result =\n option.props.label.length > result\n ? option.props.label.length\n : result;\n });\n\n clearTimeout(timer);\n doResolve(result);\n });\n}\n\nfunction VirtualMenuList({\n items,\n itemHeight = 32,\n amountItemsInWindow = 5,\n width,\n height,\n}) {\n const computedListHeight = useHeightByAmountOfItems({\n amountItems: amountItemsInWindow,\n itemHeight,\n items,\n });\n\n return (\n <List\n height={height || computedListHeight}\n itemCount={items.length}\n itemData={items}\n itemSize={itemHeight}\n width={width}\n >\n {MenuItem}\n </List>\n );\n}\n\nexport { VirtualMenuList };\nexport default VirtualMenuList;", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAsC;AACtC,sCAAyC;AAEzC,MAAM,WAAW,CAAC,EAAE,MAAM,OAAO,YAC/B,mDAAC,OAAD;AAAA,EAAK,KAAK;AAAA,EAAO;AAAA,GACd,QAAQ,KAAK,SAAS,KAAK,SAAS;AAKzC,4BAA4B,OAAO,IAAI,UAAU,KAAM;AACrD,SAAO,MACL,IAAI,QAAQ,aAAW;AACrB,UAAM,YAAY,aAAU;AAC1B,SAAG;AACH,cAAQ;AAAA;AAEV,QAAI,SAAS;AACb,UAAM,QAAQ,WAAW,MAAM,UAAU,SAAS;AAClD,UAAM,QAAQ,YAAU;AACtB,eACE,OAAO,MAAM,MAAM,SAAS,SACxB,OAAO,MAAM,MAAM,SACnB;AAAA;AAGR,iBAAa;AACb,cAAU;AAAA;AAAA;AAIhB,yBAAyB;AAAA,EACvB;AAAA,EACA,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB;AAAA,EACA;AAAA,GACC;AACD,QAAM,qBAAqB,8DAAyB;AAAA,IAClD,aAAa;AAAA,IACb;AAAA,IACA;AAAA;AAGF,SACE,mDAAC,mCAAD;AAAA,IACE,QAAQ,UAAU;AAAA,IAClB,WAAW,MAAM;AAAA,IACjB,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,KAEC;AAAA;AAMP,IAAO,0BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/cjs/index.js
CHANGED
|
@@ -1,36 +1,63 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var src_exports = {};
|
|
29
|
+
__export(src_exports, {
|
|
30
|
+
DSMenuCheckboxGroupWithSchema: () => import_CheckboxGroup.DSMenuCheckboxGroupWithSchema,
|
|
31
|
+
DSMenuItemCheckeableWithSchema: () => import_MenuItemCheckable.DSMenuItemCheckeableWithSchema,
|
|
32
|
+
DSMenuItemRadioWithSchema: () => import_MenuItemRadio.DSMenuItemRadioWithSchema,
|
|
33
|
+
DSMenuItemWithSchema: () => import_MenuItem.DSMenuItemWithSchema,
|
|
34
|
+
DSMenuRadioGroupWithSchema: () => import_RadioGroup.DSMenuRadioGroupWithSchema,
|
|
35
|
+
DSMenuSearchableGroupWithSchema: () => import_SearchableGroup.DSMenuSearchableGroupWithSchema,
|
|
36
|
+
DSMenuSearchableListWithSchema: () => import_SearchableList.DSMenuSearchableListWithSchema,
|
|
37
|
+
DSMenuSelectionGroupWithSchema: () => import_SelectionGroup.DSMenuSelectionGroupWithSchema,
|
|
38
|
+
DSMenuSeparatorWithSchema: () => import_Separator.DSMenuSeparatorWithSchema,
|
|
39
|
+
DSMenuWithSchema: () => import_Menu.DSMenuWithSchema,
|
|
40
|
+
DSSubMenuWithSchema: () => import_SubMenu.DSSubMenuWithSchema,
|
|
41
|
+
Menu: () => import_Menu.Menu,
|
|
42
|
+
MenuCombobox: () => import_MenuCombobox.default,
|
|
43
|
+
default: () => import_Menu.Menu,
|
|
44
|
+
menuItemFactory: () => import_menuItemFactory.menuItemFactory,
|
|
45
|
+
renderMenuItems: () => import_renderMenuItems.renderMenuItems
|
|
46
|
+
});
|
|
47
|
+
var React = __toESM(require("react"));
|
|
48
|
+
var import_MenuItem = __toESM(require("./MenuItems/MenuItem"));
|
|
49
|
+
var import_SubMenu = __toESM(require("./MenuItems/SubMenu"));
|
|
50
|
+
var import_CheckboxGroup = __toESM(require("./MenuItems/CheckboxGroup"));
|
|
51
|
+
var import_MenuItemCheckable = __toESM(require("./MenuItems/MenuItemCheckable"));
|
|
52
|
+
var import_MenuItemRadio = __toESM(require("./MenuItems/MenuItemRadio"));
|
|
53
|
+
var import_RadioGroup = __toESM(require("./MenuItems/RadioGroup"));
|
|
54
|
+
var import_SearchableGroup = __toESM(require("./MenuItems/SearchableGroup"));
|
|
55
|
+
var import_SearchableList = __toESM(require("./MenuItems/SearchableList"));
|
|
56
|
+
var import_Separator = __toESM(require("./MenuItems/Separator"));
|
|
57
|
+
var import_SelectionGroup = __toESM(require("./MenuItems/SelectionGroup"));
|
|
58
|
+
var import_MenuCombobox = __toESM(require("./MenuCombobox"));
|
|
59
|
+
var import_menuItemFactory = __toESM(require("./MenuItems/menuItemFactory"));
|
|
60
|
+
var import_renderMenuItems = __toESM(require("./MenuItems/renderMenuItems"));
|
|
61
|
+
var import_Menu = __toESM(require("./Menu"));
|
|
62
|
+
module.exports = __toCommonJS(src_exports);
|
|
63
|
+
//# sourceMappingURL=index.js.map
|
package/cjs/index.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export { DSMenuItemWithSchema } from './MenuItems/MenuItem';\nexport { DSSubMenuWithSchema } from './MenuItems/SubMenu';\nexport { DSMenuCheckboxGroupWithSchema } from './MenuItems/CheckboxGroup';\nexport { DSMenuItemCheckeableWithSchema } from './MenuItems/MenuItemCheckable';\nexport { DSMenuItemRadioWithSchema } from './MenuItems/MenuItemRadio';\nexport { DSMenuRadioGroupWithSchema } from './MenuItems/RadioGroup';\nexport { DSMenuSearchableGroupWithSchema } from './MenuItems/SearchableGroup';\nexport { DSMenuSearchableListWithSchema } from './MenuItems/SearchableList';\nexport { DSMenuSeparatorWithSchema } from './MenuItems/Separator';\nexport { DSMenuSelectionGroupWithSchema } from './MenuItems/SelectionGroup';\n\nexport { default as MenuCombobox } from './MenuCombobox';\nexport { menuItemFactory } from './MenuItems/menuItemFactory';\nexport { renderMenuItems } from './MenuItems/renderMenuItems';\nexport { DSMenuWithSchema, Menu, Menu as default } from './Menu';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAAqC;AACrC,qBAAoC;AACpC,2BAA8C;AAC9C,+BAA+C;AAC/C,2BAA0C;AAC1C,wBAA2C;AAC3C,6BAAgD;AAChD,4BAA+C;AAC/C,uBAA0C;AAC1C,4BAA+C;AAE/C,0BAAwC;AACxC,6BAAgC;AAChC,6BAAgC;AAChC,kBAAwD;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,20 +1,49 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var useHeightByAmountOfItems_exports = {};
|
|
29
|
+
__export(useHeightByAmountOfItems_exports, {
|
|
30
|
+
default: () => useHeightByAmountOfItems_default,
|
|
31
|
+
useHeightByAmountOfItems: () => useHeightByAmountOfItems
|
|
32
|
+
});
|
|
33
|
+
var React = __toESM(require("react"));
|
|
34
|
+
var import_react = __toESM(require("react"));
|
|
5
35
|
const calculateHeight = (itemHeight, amountItemsInWindow, itemsLength) => {
|
|
6
36
|
const realAmountItemsInWindow = itemsLength < amountItemsInWindow ? itemsLength : amountItemsInWindow;
|
|
7
37
|
return itemHeight * realAmountItemsInWindow;
|
|
8
38
|
};
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = _ref;
|
|
16
|
-
const calculatedHeight = React.useMemo(() => calculateHeight(itemHeight, amountItems, items.length), [amountItems, items]);
|
|
39
|
+
function useHeightByAmountOfItems({
|
|
40
|
+
itemHeight,
|
|
41
|
+
amountItems,
|
|
42
|
+
items
|
|
43
|
+
}) {
|
|
44
|
+
const calculatedHeight = (0, import_react.useMemo)(() => calculateHeight(itemHeight, amountItems, items.length), [amountItems, items]);
|
|
17
45
|
return calculatedHeight;
|
|
18
46
|
}
|
|
19
|
-
|
|
20
|
-
module.exports =
|
|
47
|
+
var useHeightByAmountOfItems_default = useHeightByAmountOfItems;
|
|
48
|
+
module.exports = __toCommonJS(useHeightByAmountOfItems_exports);
|
|
49
|
+
//# sourceMappingURL=useHeightByAmountOfItems.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/useHeightByAmountOfItems.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { useMemo } from 'react';\n\nconst calculateHeight = (itemHeight, amountItemsInWindow, itemsLength) => {\n const realAmountItemsInWindow =\n itemsLength < amountItemsInWindow ? itemsLength : amountItemsInWindow;\n return itemHeight * realAmountItemsInWindow;\n};\n\nfunction useHeightByAmountOfItems({\n itemHeight,\n amountItems,\n items,\n}) {\n const calculatedHeight = useMemo(\n () => calculateHeight(itemHeight, amountItems, items.length),\n [amountItems, items],\n );\n\n return calculatedHeight;\n}\n\nexport { useHeightByAmountOfItems };\nexport default useHeightByAmountOfItems;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAExB,MAAM,kBAAkB,CAAC,YAAY,qBAAqB,gBAAgB;AACxE,QAAM,0BACJ,cAAc,sBAAsB,cAAc;AACpD,SAAO,aAAa;AAAA;AAGtB,kCAAkC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,GACC;AACD,QAAM,mBAAmB,0BACvB,MAAM,gBAAgB,YAAY,aAAa,MAAM,SACrD,CAAC,aAAa;AAGhB,SAAO;AAAA;AAIT,IAAO,mCAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/Menu.js
CHANGED
|
@@ -1,106 +1,61 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import { focusGroupManagerHoc, FocusGroupContext } from '@elliemae/ds-shared/FocusGroup';
|
|
24
|
-
import { useHiddenTransition } from '@elliemae/ds-hidden';
|
|
25
|
-
import MenuItemRadio from './MenuItems/MenuItemRadio.js';
|
|
26
|
-
import MenuItemCheckbox from './MenuItems/MenuItemCheckbox.js';
|
|
27
|
-
import CheckboxGroup from './MenuItems/CheckboxGroup.js';
|
|
28
|
-
import RadioGroup from './MenuItems/RadioGroup.js';
|
|
29
|
-
import MenuSeparator from './MenuItems/Separator.js';
|
|
30
|
-
import MenuItem from './MenuItems/MenuItem.js';
|
|
31
|
-
import SubMenu from './MenuItems/SubMenu.js';
|
|
32
|
-
import SearchableGroup from './MenuItems/SearchableGroup.js';
|
|
33
|
-
import SelectionGroup from './MenuItems/SelectionGroup.js';
|
|
34
|
-
export { menuItemFactory, renderMenuItems } from './MenuItems/menuItemFactory.js';
|
|
35
|
-
import MenuContext from './MenuContext.js';
|
|
36
|
-
import { jsx } from 'react/jsx-runtime';
|
|
37
|
-
|
|
38
|
-
const _excluded = ["containerProps", "innerRef", "as", "children", "onClickOutside", "visible", "focusOnOpen", "maxOption", "style", "minWidth", "maxWidth", "closeMenu", "responsiveHeight"],
|
|
39
|
-
_excluded2 = ["destroyed"];
|
|
40
|
-
|
|
41
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
42
|
-
|
|
43
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useContext, useEffect, useMemo, useRef } from "react";
|
|
3
|
+
import { PropTypes, describe } from "react-desc";
|
|
4
|
+
import { omit } from "lodash";
|
|
5
|
+
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
6
|
+
import { animated } from "react-spring/web";
|
|
7
|
+
import { useOnClickOutside } from "@elliemae/ds-utilities/hooks";
|
|
8
|
+
import { mergeRefs } from "@elliemae/ds-utilities/system";
|
|
9
|
+
import { focusGroupManagerHoc, FocusGroupContext } from "@elliemae/ds-shared/FocusGroup";
|
|
10
|
+
import { useHiddenTransition } from "@elliemae/ds-hidden";
|
|
11
|
+
import { MenuItemRadio } from "./MenuItems/MenuItemRadio";
|
|
12
|
+
import { MenuItemCheckbox } from "./MenuItems/MenuItemCheckbox";
|
|
13
|
+
import { CheckboxGroup } from "./MenuItems/CheckboxGroup";
|
|
14
|
+
import { RadioGroup } from "./MenuItems/RadioGroup";
|
|
15
|
+
import { MenuSeparator } from "./MenuItems/Separator";
|
|
16
|
+
import { MenuItem } from "./MenuItems/MenuItem";
|
|
17
|
+
import { SubMenu } from "./MenuItems/SubMenu";
|
|
18
|
+
import { SearchableGroup } from "./MenuItems/SearchableGroup";
|
|
19
|
+
import { SelectionGroup } from "./MenuItems/SelectionGroup";
|
|
20
|
+
import { menuItemFactory } from "./MenuItems/menuItemFactory";
|
|
21
|
+
import { renderMenuItems } from "./MenuItems/renderMenuItems";
|
|
22
|
+
import { MenuContext } from "./MenuContext";
|
|
44
23
|
const RESPONSIVE_HEIHGT_MARGIN = 120;
|
|
45
|
-
const blockName =
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
type
|
|
53
|
-
} = _ref;
|
|
54
|
-
return {
|
|
55
|
-
'menu-combo-box': menuComboBox,
|
|
56
|
-
["type-".concat(type)]: type
|
|
57
|
-
};
|
|
58
|
-
});
|
|
59
|
-
/**
|
|
60
|
-
* todo: -- IDEA -- each menu could have an overlay based on an overlay stack context so we can
|
|
61
|
-
* capture the context of the clicks on very nested components
|
|
62
|
-
*/
|
|
63
|
-
|
|
24
|
+
const blockName = "menu";
|
|
25
|
+
const noop = () => {
|
|
26
|
+
};
|
|
27
|
+
const MenuComponent = aggregatedClasses("div")(blockName, "", ({ menuComboBox, type }) => ({
|
|
28
|
+
"menu-combo-box": menuComboBox,
|
|
29
|
+
[`type-${type}`]: type
|
|
30
|
+
}));
|
|
64
31
|
const isChildOfType = (child, type) => child.type.name === type;
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
responsiveHeight = false
|
|
82
|
-
} = _ref2,
|
|
83
|
-
otherProps = _objectWithoutProperties(_ref2, _excluded);
|
|
84
|
-
|
|
32
|
+
const DSMenu = ({
|
|
33
|
+
containerProps = {},
|
|
34
|
+
innerRef,
|
|
35
|
+
as: MenuTag = animated.ul,
|
|
36
|
+
children = void 0,
|
|
37
|
+
onClickOutside = noop,
|
|
38
|
+
visible = void 0,
|
|
39
|
+
focusOnOpen = false,
|
|
40
|
+
maxOption = 0,
|
|
41
|
+
style = {},
|
|
42
|
+
minWidth = void 0,
|
|
43
|
+
maxWidth = void 0,
|
|
44
|
+
closeMenu,
|
|
45
|
+
responsiveHeight = false,
|
|
46
|
+
...otherProps
|
|
47
|
+
}) => {
|
|
85
48
|
const menuRef = useRef(null);
|
|
86
|
-
const {
|
|
87
|
-
|
|
88
|
-
} = useContext(FocusGroupContext);
|
|
89
|
-
|
|
90
|
-
const _useHiddenTransition = useHiddenTransition({
|
|
91
|
-
visible,
|
|
92
|
-
style
|
|
93
|
-
}),
|
|
94
|
-
hiddenProps = _objectWithoutProperties(_useHiddenTransition, _excluded2); // force no addon to the children if the menu doesn't have any item with leftAddon like SelectionGroup
|
|
95
|
-
|
|
96
|
-
|
|
49
|
+
const { focusFirst } = useContext(FocusGroupContext);
|
|
50
|
+
const { destroyed, ...hiddenProps } = useHiddenTransition({ visible, style });
|
|
97
51
|
const nextChildren = useMemo(() => {
|
|
98
|
-
const forceLeftAddon =
|
|
99
|
-
return
|
|
100
|
-
|
|
52
|
+
const forceLeftAddon = React2.Children.toArray(children).some((child) => isChildOfType(child, "SelectionGroup") || isChildOfType(child, "MenuItemCheckbox") || isChildOfType(child, "MenuItemRadio") || child.props.leftAddon);
|
|
53
|
+
return React2.Children.map(children, (child) => child && React2.cloneElement(child, {
|
|
54
|
+
...child.props,
|
|
55
|
+
noAddon: !forceLeftAddon ? true : void 0,
|
|
101
56
|
maxOption,
|
|
102
57
|
closeMenu
|
|
103
|
-
}))
|
|
58
|
+
}));
|
|
104
59
|
}, [children]);
|
|
105
60
|
useOnClickOutside(menuRef, onClickOutside);
|
|
106
61
|
useEffect(() => {
|
|
@@ -109,64 +64,44 @@ function DSMenu(_ref2) {
|
|
|
109
64
|
focusFirst();
|
|
110
65
|
}, 0);
|
|
111
66
|
}
|
|
112
|
-
}, [visible, focusOnOpen]);
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
}, void 0, /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
120
|
-
"data-testid": containerProps !== null && containerProps !== void 0 && containerProps['data-testid'] ? containerProps['data-testid'] : "em-ds-menu"
|
|
121
|
-
}, containerProps), {}, {
|
|
67
|
+
}, [visible, focusOnOpen]);
|
|
68
|
+
return !hiddenProps.destroyed ? /* @__PURE__ */ React2.createElement(MenuContext.Provider, {
|
|
69
|
+
value: { visible, closeMenu }
|
|
70
|
+
}, /* @__PURE__ */ React2.createElement(MenuComponent, {
|
|
71
|
+
"data-testid": containerProps?.["data-testid"] ? containerProps["data-testid"] : "em-ds-menu",
|
|
72
|
+
...containerProps,
|
|
122
73
|
as: MenuTag,
|
|
123
|
-
classProps:
|
|
124
|
-
type: otherProps.type
|
|
125
|
-
}),
|
|
74
|
+
classProps: { ...otherProps.classProps || {}, type: otherProps.type },
|
|
126
75
|
innerRef: mergeRefs(innerRef, menuRef),
|
|
127
|
-
role: "menu"
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
});
|
|
76
|
+
role: "menu",
|
|
77
|
+
...omit(otherProps, ["scheduleUpdate"]),
|
|
78
|
+
...hiddenProps
|
|
79
|
+
}, /* @__PURE__ */ React2.createElement("div", {
|
|
80
|
+
className: "menu-component-internal-wrapper",
|
|
81
|
+
style: {
|
|
82
|
+
...style,
|
|
83
|
+
minWidth,
|
|
84
|
+
maxWidth,
|
|
85
|
+
...responsiveHeight ? {
|
|
86
|
+
overflowY: "scroll",
|
|
87
|
+
maxHeight: responsiveHeight ? `${window.innerHeight - RESPONSIVE_HEIHGT_MARGIN}px` : void 0
|
|
88
|
+
} : {}
|
|
89
|
+
}
|
|
90
|
+
}, nextChildren))) : null;
|
|
91
|
+
};
|
|
92
|
+
const Menu = focusGroupManagerHoc(DSMenu, { loop: true });
|
|
145
93
|
const props = {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
as: PropTypes.element.description('Renders the menu with a specific html element'),
|
|
151
|
-
|
|
152
|
-
/** Handler when a user clicks outside the menu */
|
|
153
|
-
onClickOutside: PropTypes.func.description('Handler when a user clicks outside the menu'),
|
|
154
|
-
|
|
155
|
-
/** Whether the menu is visible or not */
|
|
156
|
-
visible: PropTypes.bool.description('Whether the menu is visible or not'),
|
|
157
|
-
|
|
158
|
-
/** When set to true, it's going to focus the first item */
|
|
94
|
+
containerProps: PropTypes.object.description("Injected props to wrapper element of component"),
|
|
95
|
+
as: PropTypes.element.description("Renders the menu with a specific html element"),
|
|
96
|
+
onClickOutside: PropTypes.func.description("Handler when a user clicks outside the menu"),
|
|
97
|
+
visible: PropTypes.bool.description("Whether the menu is visible or not"),
|
|
159
98
|
focusOnOpen: PropTypes.bool.description("When set to true, it's going to focus the first item"),
|
|
160
|
-
|
|
161
|
-
/** Customize menu minWidth. Can be undefined or 'number' */
|
|
162
99
|
minWidth: PropTypes.number.description("Customize menu minWidth. Can be undefined or 'number'"),
|
|
163
|
-
|
|
164
|
-
/** Customize menu maxWidth. Can be undefined or 'number' */
|
|
165
100
|
maxWidth: PropTypes.number.description("Customize menu maxWidth. Can be undefined or 'number'")
|
|
166
101
|
};
|
|
102
|
+
DSMenu.propTypes = props;
|
|
167
103
|
const DSMenuWithSchema = describe(DSMenu);
|
|
168
|
-
DSMenuWithSchema.propTypes = props;
|
|
169
|
-
|
|
104
|
+
DSMenuWithSchema.propTypes = props;
|
|
170
105
|
Menu.Item = MenuItem;
|
|
171
106
|
Menu.ItemCheckbox = MenuItemCheckbox;
|
|
172
107
|
Menu.ItemRadio = MenuItemRadio;
|
|
@@ -176,5 +111,12 @@ Menu.CheckboxGroup = CheckboxGroup;
|
|
|
176
111
|
Menu.RadioGroup = RadioGroup;
|
|
177
112
|
Menu.SearchableGroup = SearchableGroup;
|
|
178
113
|
Menu.SelectionGroup = SelectionGroup;
|
|
179
|
-
|
|
180
|
-
export {
|
|
114
|
+
var Menu_default = Menu;
|
|
115
|
+
export {
|
|
116
|
+
DSMenuWithSchema,
|
|
117
|
+
Menu,
|
|
118
|
+
Menu_default as default,
|
|
119
|
+
menuItemFactory,
|
|
120
|
+
renderMenuItems
|
|
121
|
+
};
|
|
122
|
+
//# sourceMappingURL=Menu.js.map
|
package/esm/Menu.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Menu.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { omit } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { animated } from 'react-spring/web';\nimport { useOnClickOutside } from '@elliemae/ds-utilities/hooks';\nimport { mergeRefs } from '@elliemae/ds-utilities/system';\nimport { focusGroupManagerHoc, FocusGroupContext } from '@elliemae/ds-shared/FocusGroup';\nimport { useHiddenTransition } from '@elliemae/ds-hidden';\nimport { MenuItemRadio } from './MenuItems/MenuItemRadio';\nimport { MenuItemCheckbox } from './MenuItems/MenuItemCheckbox';\nimport { CheckboxGroup } from './MenuItems/CheckboxGroup';\nimport { RadioGroup } from './MenuItems/RadioGroup';\nimport { MenuSeparator } from './MenuItems/Separator';\nimport { MenuItem } from './MenuItems/MenuItem';\nimport { SubMenu } from './MenuItems/SubMenu';\nimport { SearchableGroup } from './MenuItems/SearchableGroup';\nimport { SelectionGroup } from './MenuItems/SelectionGroup';\nimport { menuItemFactory } from './MenuItems/menuItemFactory';\nimport { renderMenuItems } from './MenuItems/renderMenuItems';\nimport { MenuContext } from './MenuContext';\n\nconst RESPONSIVE_HEIHGT_MARGIN = 120;\n\nconst blockName = 'menu';\n\nconst noop = () => {};\n\nconst MenuComponent = aggregatedClasses('div')(blockName, '', ({ menuComboBox, type }) => ({\n 'menu-combo-box': menuComboBox,\n [`type-${type}`]: type,\n}));\n\n/**\n * todo: -- IDEA -- each menu could have an overlay based on an overlay stack context so we can\n * capture the context of the clicks on very nested components\n */\n\nconst isChildOfType = (child, type) => child.type.name === type;\n\nconst DSMenu = ({\n containerProps = {},\n innerRef,\n as: MenuTag = animated.ul,\n children = undefined,\n onClickOutside = noop,\n // handlers from hidden\n visible = undefined,\n focusOnOpen = false,\n maxOption = 0,\n style = {},\n minWidth = undefined,\n maxWidth = undefined,\n closeMenu,\n responsiveHeight = false,\n ...otherProps\n}) => {\n const menuRef = useRef(null);\n const { focusFirst } = useContext(FocusGroupContext);\n const { destroyed, ...hiddenProps } = useHiddenTransition({ visible, style });\n\n // force no addon to the children if the menu doesn't have any item with leftAddon like SelectionGroup\n const nextChildren = useMemo(() => {\n const forceLeftAddon = React.Children.toArray(children).some(\n (child) =>\n isChildOfType(child, 'SelectionGroup') ||\n isChildOfType(child, 'MenuItemCheckbox') ||\n isChildOfType(child, 'MenuItemRadio') ||\n child.props.leftAddon,\n );\n\n return React.Children.map(\n children,\n (child) =>\n child &&\n React.cloneElement(child, {\n ...child.props,\n noAddon: !forceLeftAddon ? true : undefined,\n maxOption,\n closeMenu,\n }),\n );\n }, [children]);\n\n useOnClickOutside(menuRef, onClickOutside);\n\n useEffect(() => {\n if (focusOnOpen && visible) {\n setTimeout(() => {\n focusFirst();\n }, 0);\n }\n }, [visible, focusOnOpen]);\n // todo: find out a better approach to this\n return !hiddenProps.destroyed ? (\n <MenuContext.Provider value={{ visible, closeMenu }}>\n <MenuComponent\n data-testid={containerProps?.['data-testid'] ? containerProps['data-testid'] : 'em-ds-menu'}\n {...containerProps}\n as={MenuTag}\n classProps={{ ...(otherProps.classProps || {}), type: otherProps.type }}\n innerRef={mergeRefs(innerRef, menuRef)}\n role=\"menu\"\n {...omit(otherProps, ['scheduleUpdate'])}\n {...hiddenProps}\n >\n {/* eslint-disable indent */}\n <div\n className=\"menu-component-internal-wrapper\"\n style={{\n ...style,\n minWidth,\n maxWidth,\n ...(responsiveHeight\n ? {\n overflowY: 'scroll',\n maxHeight: responsiveHeight ? `${window.innerHeight - RESPONSIVE_HEIHGT_MARGIN}px` : undefined,\n }\n : {}),\n }}\n >\n {/* eslint-enable indent */}\n {nextChildren}\n </div>\n </MenuComponent>\n </MenuContext.Provider>\n ) : null;\n};\n\nconst Menu = focusGroupManagerHoc(DSMenu, { loop: true });\n\nconst props = {\n /** Injected props to wrapper element of component */\n containerProps: PropTypes.object.description('Injected props to wrapper element of component'),\n /** Renders the menu with a specific html element */\n as: PropTypes.element.description('Renders the menu with a specific html element'),\n /** Handler when a user clicks outside the menu */\n onClickOutside: PropTypes.func.description('Handler when a user clicks outside the menu'),\n /** Whether the menu is visible or not */\n visible: PropTypes.bool.description('Whether the menu is visible or not'),\n /** When set to true, it's going to focus the first item */\n focusOnOpen: PropTypes.bool.description(\"When set to true, it's going to focus the first item\"),\n /** Customize menu minWidth. Can be undefined or 'number' */\n minWidth: PropTypes.number.description(\"Customize menu minWidth. Can be undefined or 'number'\"),\n /** Customize menu maxWidth. Can be undefined or 'number' */\n maxWidth: PropTypes.number.description(\"Customize menu maxWidth. Can be undefined or 'number'\"),\n};\n\nDSMenu.propTypes = props;\n\nconst DSMenuWithSchema = describe(DSMenu);\n\nDSMenuWithSchema.propTypes = props;\n// todo: add a handler to get this kind of exports for documentation\nMenu.Item = MenuItem;\nMenu.ItemCheckbox = MenuItemCheckbox;\nMenu.ItemRadio = MenuItemRadio;\nMenu.SubMenu = SubMenu;\nMenu.Separator = MenuSeparator;\nMenu.CheckboxGroup = CheckboxGroup;\nMenu.RadioGroup = RadioGroup;\nMenu.SearchableGroup = SearchableGroup;\nMenu.SelectionGroup = SelectionGroup;\n\nexport { menuItemFactory, renderMenuItems, DSMenuWithSchema, Menu };\nexport default Menu;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|