@elliemae/ds-menu-button 3.39.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSMenuButton.js +50 -0
- package/dist/cjs/DSMenuButton.js.map +7 -0
- package/dist/cjs/DSMenuButtonCTX.js +38 -0
- package/dist/cjs/DSMenuButtonCTX.js.map +7 -0
- package/dist/cjs/config/useMenuButton.js +55 -0
- package/dist/cjs/config/useMenuButton.js.map +7 -0
- package/dist/cjs/config/useValidateProps.js +40 -0
- package/dist/cjs/config/useValidateProps.js.map +7 -0
- package/dist/cjs/constants/index.js +43 -0
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/index.js +41 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/package.json +7 -0
- package/dist/cjs/parts/ItemFactory.js +66 -0
- package/dist/cjs/parts/ItemFactory.js.map +7 -0
- package/dist/cjs/parts/MenuButtonContent.js +157 -0
- package/dist/cjs/parts/MenuButtonContent.js.map +7 -0
- package/dist/cjs/parts/MenuItem.js +244 -0
- package/dist/cjs/parts/MenuItem.js.map +7 -0
- package/dist/cjs/parts/SubMenu.js +126 -0
- package/dist/cjs/parts/SubMenu.js.map +7 -0
- package/dist/cjs/react-desc-prop-types.js +64 -0
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/styled.js +128 -0
- package/dist/cjs/styled.js.map +7 -0
- package/dist/esm/DSMenuButton.js +20 -0
- package/dist/esm/DSMenuButton.js.map +7 -0
- package/dist/esm/DSMenuButtonCTX.js +8 -0
- package/dist/esm/DSMenuButtonCTX.js.map +7 -0
- package/dist/esm/config/useMenuButton.js +25 -0
- package/dist/esm/config/useMenuButton.js.map +7 -0
- package/dist/esm/config/useValidateProps.js +10 -0
- package/dist/esm/config/useValidateProps.js.map +7 -0
- package/dist/esm/constants/index.js +13 -0
- package/dist/esm/constants/index.js.map +7 -0
- package/dist/esm/index.js +11 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/package.json +7 -0
- package/dist/esm/parts/ItemFactory.js +36 -0
- package/dist/esm/parts/ItemFactory.js.map +7 -0
- package/dist/esm/parts/MenuButtonContent.js +127 -0
- package/dist/esm/parts/MenuButtonContent.js.map +7 -0
- package/dist/esm/parts/MenuItem.js +227 -0
- package/dist/esm/parts/MenuItem.js.map +7 -0
- package/dist/esm/parts/SubMenu.js +96 -0
- package/dist/esm/parts/SubMenu.js.map +7 -0
- package/dist/esm/react-desc-prop-types.js +34 -0
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/dist/esm/styled.js +98 -0
- package/dist/esm/styled.js.map +7 -0
- package/dist/types/DSMenuButton.d.ts +7 -0
- package/dist/types/DSMenuButtonCTX.d.ts +11 -0
- package/dist/types/config/useMenuButton.d.ts +9 -0
- package/dist/types/config/useValidateProps.d.ts +3 -0
- package/dist/types/constants/index.d.ts +5 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/parts/ItemFactory.d.ts +14 -0
- package/dist/types/parts/MenuButtonContent.d.ts +1 -0
- package/dist/types/parts/MenuItem.d.ts +21 -0
- package/dist/types/parts/SubMenu.d.ts +14 -0
- package/dist/types/react-desc-prop-types.d.ts +51 -0
- package/dist/types/styled.d.ts +15 -0
- package/package.json +76 -0
@@ -0,0 +1,244 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __create = Object.create;
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
8
|
+
var __export = (target, all) => {
|
9
|
+
for (var name in all)
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
11
|
+
};
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
14
|
+
for (let key of __getOwnPropNames(from))
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
17
|
+
}
|
18
|
+
return to;
|
19
|
+
};
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
26
|
+
mod
|
27
|
+
));
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
29
|
+
var MenuItem_exports = {};
|
30
|
+
__export(MenuItem_exports, {
|
31
|
+
MenuItem: () => MenuItem,
|
32
|
+
MenuItemAddon: () => MenuItemAddon,
|
33
|
+
Section: () => Section,
|
34
|
+
Separator: () => Separator
|
35
|
+
});
|
36
|
+
module.exports = __toCommonJS(MenuItem_exports);
|
37
|
+
var React = __toESM(require("react"));
|
38
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
39
|
+
var import_react = __toESM(require("react"));
|
40
|
+
var import_ds_icons = require("@elliemae/ds-icons");
|
41
|
+
var import_ds_system = require("@elliemae/ds-system");
|
42
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
43
|
+
var import_DSMenuButtonCTX = require("../DSMenuButtonCTX.js");
|
44
|
+
var import_styled = require("../styled.js");
|
45
|
+
var import_SubMenu = require("./SubMenu.js");
|
46
|
+
const MenuItemAddon = import_react.default.memo(({ level, isOpen }) => {
|
47
|
+
if (level === 0)
|
48
|
+
return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.TriangleUpSmall, { color: ["brand-primary", "600"] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.TriangleDownSmall, { color: ["brand-primary", "600"] });
|
49
|
+
return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { size: "m", color: ["brand-primary", "600"] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallRight, { size: "m", color: ["brand-primary", "600"] });
|
50
|
+
});
|
51
|
+
const MenuItem = ({
|
52
|
+
innerRef,
|
53
|
+
tabIndex,
|
54
|
+
onFocus,
|
55
|
+
selectionMode,
|
56
|
+
item,
|
57
|
+
level,
|
58
|
+
parentId,
|
59
|
+
isVertical
|
60
|
+
}) => {
|
61
|
+
const {
|
62
|
+
setFocusedOption,
|
63
|
+
focusedOption,
|
64
|
+
selectedKeys,
|
65
|
+
onSelectionChange,
|
66
|
+
propsWithDefault: { ItemRenderer }
|
67
|
+
} = import_react.default.useContext(import_DSMenuButtonCTX.MenuButtonContext);
|
68
|
+
const listRef = import_react.default.useRef(null);
|
69
|
+
const [showSubMenu, setShowSubMenu] = (0, import_react.useState)(false);
|
70
|
+
const [referenceElement, setReferenceElement] = import_react.default.useState(null);
|
71
|
+
const itemRef = (0, import_react.useCallback)(
|
72
|
+
(node) => {
|
73
|
+
if (node !== null) {
|
74
|
+
if (focusedOption === item.dsId) node.focus();
|
75
|
+
}
|
76
|
+
return node;
|
77
|
+
},
|
78
|
+
[focusedOption, item.dsId]
|
79
|
+
);
|
80
|
+
const selectionLogic = (0, import_react.useCallback)(() => {
|
81
|
+
if (selectionMode === "single") {
|
82
|
+
const newValue = item.dsId === selectedKeys[0] ? [] : [item.dsId];
|
83
|
+
onSelectionChange(newValue, parentId || "root", item);
|
84
|
+
}
|
85
|
+
if (selectionMode === "multiple") {
|
86
|
+
const newValue = selectedKeys.includes(item.dsId) ? selectedKeys.filter((key) => key !== item.dsId) : [...selectedKeys, item.dsId];
|
87
|
+
onSelectionChange(newValue, parentId || "root", item);
|
88
|
+
}
|
89
|
+
}, [item, onSelectionChange, parentId, selectedKeys, selectionMode]);
|
90
|
+
const handleOnClick = (0, import_react.useCallback)(
|
91
|
+
(e) => {
|
92
|
+
if (selectionMode === "multiple") {
|
93
|
+
e.stopPropagation();
|
94
|
+
}
|
95
|
+
selectionLogic();
|
96
|
+
},
|
97
|
+
[selectionLogic, selectionMode]
|
98
|
+
);
|
99
|
+
const onItemKeyDown = (0, import_react.useCallback)(
|
100
|
+
(event) => {
|
101
|
+
if (event.key === "Enter" || event.key === " ") {
|
102
|
+
event.preventDefault();
|
103
|
+
selectionLogic();
|
104
|
+
}
|
105
|
+
if ((event.key === "ArrowDown" && level === 0 || event.key === "ArrowRight" && level !== 0) && item.subitems) {
|
106
|
+
event.preventDefault();
|
107
|
+
event.stopPropagation();
|
108
|
+
setShowSubMenu(true);
|
109
|
+
setFocusedOption(item.subitems[0].dsId);
|
110
|
+
}
|
111
|
+
if (event.key === "ArrowLeft" && level >= 2) {
|
112
|
+
event.preventDefault();
|
113
|
+
event.stopPropagation();
|
114
|
+
if (parentId) setFocusedOption(parentId);
|
115
|
+
}
|
116
|
+
if (event.key === "Escape" && level > 0) {
|
117
|
+
if (parentId !== void 0) {
|
118
|
+
setFocusedOption(parentId);
|
119
|
+
}
|
120
|
+
}
|
121
|
+
},
|
122
|
+
[level, item.subitems, selectionLogic, setFocusedOption, parentId]
|
123
|
+
);
|
124
|
+
const handleOnLIKeyDown = (0, import_react.useCallback)(
|
125
|
+
(e) => {
|
126
|
+
if (e.key === "Enter") {
|
127
|
+
setShowSubMenu(false);
|
128
|
+
if (level === 0) {
|
129
|
+
setFocusedOption(item.dsId);
|
130
|
+
}
|
131
|
+
}
|
132
|
+
},
|
133
|
+
[item.dsId, level, setFocusedOption]
|
134
|
+
);
|
135
|
+
const handleOnMouseEnter = (0, import_react.useCallback)(() => {
|
136
|
+
setShowSubMenu(true);
|
137
|
+
setFocusedOption(item.dsId);
|
138
|
+
}, [item.dsId, setFocusedOption]);
|
139
|
+
const handleOnMouseLeave = (0, import_react.useCallback)(() => {
|
140
|
+
setShowSubMenu(false);
|
141
|
+
}, []);
|
142
|
+
const ariaExpanded = (0, import_react.useMemo)(() => {
|
143
|
+
if (item.subitems) {
|
144
|
+
return showSubMenu ? "true" : "false";
|
145
|
+
}
|
146
|
+
return void 0;
|
147
|
+
}, [item.subitems, showSubMenu]);
|
148
|
+
const role = (0, import_react.useMemo)(() => {
|
149
|
+
if (selectionMode === "single") {
|
150
|
+
return "menuitemradio";
|
151
|
+
}
|
152
|
+
if (selectionMode === "multiple") {
|
153
|
+
return "menuitemcheckbox";
|
154
|
+
}
|
155
|
+
return "menuitem";
|
156
|
+
}, [selectionMode]);
|
157
|
+
const ariaChecked = (0, import_react.useMemo)(() => {
|
158
|
+
if (selectionMode === "multiple" || selectionMode === "single") {
|
159
|
+
return selectedKeys.includes(item.dsId) ? "true" : "false";
|
160
|
+
}
|
161
|
+
return void 0;
|
162
|
+
}, [item.dsId, selectionMode, selectedKeys]);
|
163
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
164
|
+
import_styled.StyledMenuItem,
|
165
|
+
{
|
166
|
+
role: "none",
|
167
|
+
innerRef: listRef,
|
168
|
+
onMouseEnter: handleOnMouseEnter,
|
169
|
+
onMouseLeave: handleOnMouseLeave,
|
170
|
+
onKeyDown: handleOnLIKeyDown,
|
171
|
+
isOpen: showSubMenu,
|
172
|
+
level,
|
173
|
+
isVertical,
|
174
|
+
children: [
|
175
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
176
|
+
import_styled.StyledMenuItemContent,
|
177
|
+
{
|
178
|
+
role,
|
179
|
+
"aria-checked": ariaChecked,
|
180
|
+
"aria-haspopup": item.subitems ? "true" : "false",
|
181
|
+
"aria-expanded": ariaExpanded,
|
182
|
+
innerRef: (0, import_ds_system.mergeRefs)(innerRef, itemRef, setReferenceElement),
|
183
|
+
onKeyDown: onItemKeyDown,
|
184
|
+
onClick: handleOnClick,
|
185
|
+
hasChildren: item.subitems !== void 0,
|
186
|
+
onFocus,
|
187
|
+
tabIndex,
|
188
|
+
children: ItemRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemRenderer, { item, isSelected: selectedKeys.includes(item.dsId) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
189
|
+
MenuItemContent,
|
190
|
+
{
|
191
|
+
item,
|
192
|
+
selectionMode,
|
193
|
+
selectedKeys,
|
194
|
+
showSubMenu,
|
195
|
+
level
|
196
|
+
}
|
197
|
+
)
|
198
|
+
}
|
199
|
+
),
|
200
|
+
item.subitems && showSubMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
201
|
+
import_SubMenu.SubMenu,
|
202
|
+
{
|
203
|
+
level: level + 1,
|
204
|
+
items: item.subitems,
|
205
|
+
showSubMenu,
|
206
|
+
setShowSubMenu,
|
207
|
+
referenceElement,
|
208
|
+
parentId: item.dsId,
|
209
|
+
selectionMode: item.selectionMode,
|
210
|
+
minWidth: item.minWidth
|
211
|
+
}
|
212
|
+
)
|
213
|
+
]
|
214
|
+
}
|
215
|
+
);
|
216
|
+
};
|
217
|
+
const MenuItemContent = import_react.default.memo(
|
218
|
+
({
|
219
|
+
item,
|
220
|
+
selectionMode,
|
221
|
+
selectedKeys,
|
222
|
+
showSubMenu,
|
223
|
+
level
|
224
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
225
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledLeftContent, { children: [
|
226
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectionAddon, { selectionMode, item, selectedKeys }),
|
227
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { lineHeight: 1.15 }, children: item.label })
|
228
|
+
] }),
|
229
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRightContent, { children: item.subitems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItemAddon, { isOpen: showSubMenu, level }) : null })
|
230
|
+
] })
|
231
|
+
);
|
232
|
+
const SelectionAddon = ({
|
233
|
+
item,
|
234
|
+
selectedKeys,
|
235
|
+
selectionMode
|
236
|
+
}) => {
|
237
|
+
if (selectionMode) {
|
238
|
+
return selectedKeys.includes(item.dsId) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CheckmarkXsmall, { size: "m", color: ["brand-primary", "600"] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "24px" } });
|
239
|
+
}
|
240
|
+
return null;
|
241
|
+
};
|
242
|
+
const Separator = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { role: "none", style: { padding: "0px 16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSeparator, { role: "separator" }) });
|
243
|
+
const Section = ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { role: "none", style: { padding: "0px 16px", minHeight: 24, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSection, { role: "presentation", children: item.label }) });
|
244
|
+
//# sourceMappingURL=MenuItem.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../src/parts/MenuItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport {\n TriangleUpSmall,\n CheckmarkXsmall,\n TriangleDownSmall,\n ChevronSmallDown,\n ChevronSmallRight,\n} from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport {\n StyledMenuItem,\n StyledMenuItemContent,\n StyledLeftContent,\n StyledRightContent,\n StyledSeparator,\n StyledSection,\n} from '../styled.js';\nimport { SubMenu } from './SubMenu.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\n\nexport const MenuItemAddon = React.memo(({ level, isOpen }: { level: number; isOpen: boolean }) => {\n if (level === 0)\n return isOpen ? (\n <TriangleUpSmall color={['brand-primary', '600']} />\n ) : (\n <TriangleDownSmall color={['brand-primary', '600']} />\n );\n return isOpen ? (\n <ChevronSmallDown size=\"m\" color={['brand-primary', '600']} />\n ) : (\n <ChevronSmallRight size=\"m\" color={['brand-primary', '600']} />\n );\n});\n\nexport const MenuItem = ({\n innerRef,\n tabIndex,\n onFocus,\n selectionMode,\n item,\n level,\n parentId,\n isVertical,\n}: {\n selectionMode?: 'single' | 'multiple';\n item: MenuButtonT.Item;\n level: number;\n parentId: string | undefined;\n isVertical?: boolean;\n tabIndex: number;\n onFocus: React.FocusEventHandler;\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n}) => {\n const {\n setFocusedOption,\n focusedOption,\n selectedKeys,\n onSelectionChange,\n propsWithDefault: { ItemRenderer },\n } = React.useContext(MenuButtonContext);\n const listRef = React.useRef(null);\n const [showSubMenu, setShowSubMenu] = useState(false);\n const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n const itemRef = useCallback(\n (node: HTMLElement | null) => {\n if (node !== null) {\n if (focusedOption === item.dsId) node.focus();\n }\n return node;\n },\n [focusedOption, item.dsId],\n );\n\n const selectionLogic = useCallback(() => {\n if (selectionMode === 'single') {\n const newValue = item.dsId === selectedKeys[0] ? [] : [item.dsId];\n onSelectionChange(newValue, parentId || 'root', item);\n }\n if (selectionMode === 'multiple') {\n const newValue = selectedKeys.includes(item.dsId)\n ? selectedKeys.filter((key: string) => key !== item.dsId)\n : [...selectedKeys, item.dsId];\n onSelectionChange(newValue, parentId || 'root', item);\n }\n }, [item, onSelectionChange, parentId, selectedKeys, selectionMode]);\n\n const handleOnClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (selectionMode === 'multiple') {\n e.stopPropagation();\n }\n selectionLogic();\n },\n [selectionLogic, selectionMode],\n );\n const onItemKeyDown: React.KeyboardEventHandler = useCallback(\n (event) => {\n // selection\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n selectionLogic();\n }\n // open submenu logic\n if (\n ((event.key === 'ArrowDown' && level === 0) || (event.key === 'ArrowRight' && level !== 0)) &&\n item.subitems\n ) {\n event.preventDefault();\n event.stopPropagation();\n setShowSubMenu(true);\n setFocusedOption(item.subitems[0].dsId);\n }\n\n // close submenu logic\n if (event.key === 'ArrowLeft' && level >= 2) {\n event.preventDefault();\n event.stopPropagation();\n if (parentId) setFocusedOption(parentId);\n }\n if (event.key === 'Escape' && level > 0) {\n if (parentId !== undefined) {\n setFocusedOption(parentId);\n }\n }\n },\n [level, item.subitems, selectionLogic, setFocusedOption, parentId],\n );\n\n const handleOnLIKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n // logic to close all submenus and focus on parent\n if (e.key === 'Enter') {\n setShowSubMenu(false);\n if (level === 0) {\n setFocusedOption(item.dsId);\n }\n }\n },\n [item.dsId, level, setFocusedOption],\n );\n\n const handleOnMouseEnter = useCallback(() => {\n setShowSubMenu(true);\n setFocusedOption(item.dsId);\n }, [item.dsId, setFocusedOption]);\n\n const handleOnMouseLeave = useCallback(() => {\n setShowSubMenu(false);\n }, []);\n\n const ariaExpanded = useMemo(() => {\n if (item.subitems) {\n return showSubMenu ? 'true' : 'false';\n }\n return undefined;\n }, [item.subitems, showSubMenu]);\n\n const role = useMemo(() => {\n if (selectionMode === 'single') {\n return 'menuitemradio';\n }\n if (selectionMode === 'multiple') {\n return 'menuitemcheckbox';\n }\n return 'menuitem';\n }, [selectionMode]);\n\n const ariaChecked = useMemo(() => {\n if (selectionMode === 'multiple' || selectionMode === 'single') {\n return selectedKeys.includes(item.dsId) ? 'true' : 'false';\n }\n return undefined;\n }, [item.dsId, selectionMode, selectedKeys]);\n\n return (\n <StyledMenuItem\n role=\"none\"\n innerRef={listRef}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\n onKeyDown={handleOnLIKeyDown}\n isOpen={showSubMenu}\n level={level}\n isVertical={isVertical}\n >\n <StyledMenuItemContent\n role={role}\n aria-checked={ariaChecked}\n aria-haspopup={item.subitems ? 'true' : 'false'}\n aria-expanded={ariaExpanded}\n innerRef={mergeRefs(innerRef, itemRef, setReferenceElement)}\n onKeyDown={onItemKeyDown}\n onClick={handleOnClick}\n hasChildren={item.subitems !== undefined}\n onFocus={onFocus}\n tabIndex={tabIndex}\n >\n {ItemRenderer ? (\n <ItemRenderer item={item} isSelected={selectedKeys.includes(item.dsId)} />\n ) : (\n <MenuItemContent\n item={item}\n selectionMode={selectionMode}\n selectedKeys={selectedKeys}\n showSubMenu={showSubMenu}\n level={level}\n />\n )}\n </StyledMenuItemContent>\n {item.subitems && showSubMenu && (\n <SubMenu\n level={level + 1}\n items={item.subitems}\n showSubMenu={showSubMenu}\n setShowSubMenu={setShowSubMenu}\n referenceElement={referenceElement}\n parentId={item.dsId}\n selectionMode={item.selectionMode}\n minWidth={item.minWidth}\n />\n )}\n </StyledMenuItem>\n );\n};\n\nconst MenuItemContent = React.memo(\n ({\n item,\n selectionMode,\n selectedKeys,\n showSubMenu,\n level,\n }: {\n item: MenuButtonT.Item;\n selectionMode?: 'single' | 'multiple';\n selectedKeys: string[];\n showSubMenu: boolean;\n level: number;\n }) => (\n <>\n <StyledLeftContent>\n <SelectionAddon selectionMode={selectionMode} item={item} selectedKeys={selectedKeys} />\n <span style={{ lineHeight: 1.15 }}>{item.label}</span>\n </StyledLeftContent>\n <StyledRightContent>\n {item.subitems ? <MenuItemAddon isOpen={showSubMenu} level={level} /> : null}\n </StyledRightContent>\n </>\n ),\n);\n\nconst SelectionAddon = ({\n item,\n selectedKeys,\n selectionMode,\n}: {\n item: MenuButtonT.Item;\n selectedKeys: string[];\n selectionMode?: 'single' | 'multiple';\n}) => {\n if (selectionMode) {\n return selectedKeys.includes(item.dsId) ? (\n <Grid>\n <CheckmarkXsmall size=\"m\" color={['brand-primary', '600']} />\n </Grid>\n ) : (\n <div style={{ width: '24px' }} />\n );\n }\n return null;\n};\n\nexport const Separator = () => (\n <li role=\"none\" style={{ padding: '0px 16px' }}>\n <StyledSeparator role=\"separator\" />\n </li>\n);\n\nexport const Section = ({ item }: { item: MenuButtonT.Item }) => (\n <li role=\"none\" style={{ padding: '0px 16px', minHeight: 24, display: 'flex', alignItems: 'center' }}>\n <StyledSection role=\"presentation\">{item.label}</StyledSection>\n </li>\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": ["React"]
|
7
|
+
}
|
@@ -0,0 +1,126 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __create = Object.create;
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
8
|
+
var __export = (target, all) => {
|
9
|
+
for (var name in all)
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
11
|
+
};
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
14
|
+
for (let key of __getOwnPropNames(from))
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
17
|
+
}
|
18
|
+
return to;
|
19
|
+
};
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
26
|
+
mod
|
27
|
+
));
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
29
|
+
var SubMenu_exports = {};
|
30
|
+
__export(SubMenu_exports, {
|
31
|
+
SubMenu: () => SubMenu
|
32
|
+
});
|
33
|
+
module.exports = __toCommonJS(SubMenu_exports);
|
34
|
+
var React = __toESM(require("react"));
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
36
|
+
var import_react = __toESM(require("react"));
|
37
|
+
var import_ds_hooks_keyboard_navigation = require("@elliemae/ds-hooks-keyboard-navigation");
|
38
|
+
var import_DSMenuButtonCTX = require("../DSMenuButtonCTX.js");
|
39
|
+
var import_styled = require("../styled.js");
|
40
|
+
var import_ItemFactory = require("./ItemFactory.js");
|
41
|
+
const SubMenu = (props) => {
|
42
|
+
const { referenceElement, showSubMenu, selectionMode, setShowSubMenu, parentId, level, items, minWidth } = props;
|
43
|
+
const { focusedOption, setFocusedOption } = (0, import_react.useContext)(import_DSMenuButtonCTX.MenuButtonContext);
|
44
|
+
const listRef = import_react.default.useRef(null);
|
45
|
+
const rect = referenceElement?.getBoundingClientRect();
|
46
|
+
const [coords, setCoords] = (0, import_react.useState)({ x: rect?.width ?? 0, y: 0 });
|
47
|
+
import_react.default.useLayoutEffect(() => {
|
48
|
+
const listRect = listRef?.current?.getBoundingClientRect();
|
49
|
+
if (!listRect) return;
|
50
|
+
if (level === 1) {
|
51
|
+
if (listRect.bottom < window.innerHeight) {
|
52
|
+
setCoords({ x: 0, y: rect?.height || 0 });
|
53
|
+
} else {
|
54
|
+
setCoords({ x: 0, y: -listRect.height });
|
55
|
+
}
|
56
|
+
return;
|
57
|
+
}
|
58
|
+
if (listRect.right > window.innerWidth) {
|
59
|
+
setCoords({ x: -(rect?.width || 0), y: 0 });
|
60
|
+
} else {
|
61
|
+
setCoords({ x: rect?.width || 0, y: 0 });
|
62
|
+
}
|
63
|
+
}, [level, rect?.height, rect?.width, referenceElement]);
|
64
|
+
const config = {
|
65
|
+
options: items.filter((item) => item.type !== "separator" && item.type !== "section").map((item) => item.dsId),
|
66
|
+
direction: import_ds_hooks_keyboard_navigation.DIRECTIONS.VERTICAL,
|
67
|
+
focusedOption,
|
68
|
+
setFocusedOption
|
69
|
+
};
|
70
|
+
const { getWrapperProps, getItemProps } = (0, import_ds_hooks_keyboard_navigation.useKeyboardNavigation)(config);
|
71
|
+
const { onKeyDown, onBlur } = getWrapperProps();
|
72
|
+
const handleOnMenuKeyDown = (0, import_react.useCallback)(
|
73
|
+
(event) => {
|
74
|
+
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
75
|
+
event.stopPropagation();
|
76
|
+
}
|
77
|
+
onKeyDown(event);
|
78
|
+
},
|
79
|
+
[onKeyDown]
|
80
|
+
);
|
81
|
+
const handleOnBlur = (0, import_react.useCallback)(
|
82
|
+
(e) => {
|
83
|
+
setTimeout(() => {
|
84
|
+
if (!listRef.current?.contains(document.activeElement)) {
|
85
|
+
setShowSubMenu(false);
|
86
|
+
}
|
87
|
+
});
|
88
|
+
onBlur(e);
|
89
|
+
},
|
90
|
+
[onBlur, setShowSubMenu]
|
91
|
+
);
|
92
|
+
console.log(minWidth, "minWidth");
|
93
|
+
const subMenuStyles = (0, import_react.useMemo)(
|
94
|
+
() => ({
|
95
|
+
position: "absolute",
|
96
|
+
top: coords.y,
|
97
|
+
left: coords.x,
|
98
|
+
zIndex: 1001 + level,
|
99
|
+
minWidth
|
100
|
+
}),
|
101
|
+
[coords, level, minWidth]
|
102
|
+
);
|
103
|
+
if (!referenceElement || !showSubMenu) return null;
|
104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
105
|
+
import_styled.StyledMenu,
|
106
|
+
{
|
107
|
+
innerRef: listRef,
|
108
|
+
role: "menu",
|
109
|
+
onKeyDown: handleOnMenuKeyDown,
|
110
|
+
onBlur: handleOnBlur,
|
111
|
+
style: subMenuStyles,
|
112
|
+
children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
113
|
+
import_ItemFactory.ItemFactory,
|
114
|
+
{
|
115
|
+
item,
|
116
|
+
selectionMode,
|
117
|
+
level,
|
118
|
+
parentId,
|
119
|
+
...getItemProps(item.dsId)
|
120
|
+
},
|
121
|
+
item.dsId
|
122
|
+
))
|
123
|
+
}
|
124
|
+
);
|
125
|
+
};
|
126
|
+
//# sourceMappingURL=SubMenu.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../src/parts/SubMenu.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-cycle */\nimport React, { useState, useMemo, useCallback, useContext } from 'react';\nimport { useKeyboardNavigation, DIRECTIONS } from '@elliemae/ds-hooks-keyboard-navigation';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\nimport { StyledMenu } from '../styled.js';\nimport { ItemFactory } from './ItemFactory.js';\n\ninterface SubMenuProps {\n referenceElement: HTMLElement | null;\n showSubMenu: boolean;\n selectionMode?: 'single' | 'multiple';\n setShowSubMenu: React.Dispatch<React.SetStateAction<boolean>>;\n parentId?: string;\n level: number;\n items: MenuButtonT.Item[];\n minWidth?: string | number;\n}\n\nexport const SubMenu: React.FC<SubMenuProps> = (props) => {\n const { referenceElement, showSubMenu, selectionMode, setShowSubMenu, parentId, level, items, minWidth } = props;\n const { focusedOption, setFocusedOption } = useContext(MenuButtonContext);\n const listRef = React.useRef<HTMLDivElement>(null);\n const rect = referenceElement?.getBoundingClientRect();\n const [coords, setCoords] = useState<{ x: number; y: number }>({ x: rect?.width ?? 0, y: 0 });\n\n // this logic will be part of the new popper custom hook\n React.useLayoutEffect(() => {\n const listRect = listRef?.current?.getBoundingClientRect();\n if (!listRect) return;\n if (level === 1) {\n if (listRect.bottom < window.innerHeight) {\n setCoords({ x: 0, y: rect?.height || 0 });\n } else {\n setCoords({ x: 0, y: -listRect.height });\n }\n return;\n }\n if (listRect.right > window.innerWidth) {\n setCoords({ x: -(rect?.width || 0), y: 0 });\n } else {\n setCoords({ x: rect?.width || 0, y: 0 });\n }\n }, [level, rect?.height, rect?.width, referenceElement]);\n\n const config = {\n options: items.filter((item) => item.type !== 'separator' && item.type !== 'section').map((item) => item.dsId),\n direction: DIRECTIONS.VERTICAL,\n focusedOption,\n setFocusedOption,\n };\n\n const { getWrapperProps, getItemProps } = useKeyboardNavigation(config);\n\n const { onKeyDown, onBlur } = getWrapperProps();\n\n const handleOnMenuKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.stopPropagation();\n }\n onKeyDown(event);\n },\n [onKeyDown],\n );\n\n const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n setTimeout(() => {\n if (!listRef.current?.contains(document.activeElement)) {\n setShowSubMenu(false);\n }\n });\n onBlur(e);\n },\n [onBlur, setShowSubMenu],\n );\n\n console.log(minWidth, 'minWidth');\n\n const subMenuStyles = useMemo(\n () => ({\n position: 'absolute',\n top: coords.y,\n left: coords.x,\n zIndex: 1001 + level,\n minWidth,\n }),\n [coords, level, minWidth],\n );\n\n if (!referenceElement || !showSubMenu) return null;\n\n return (\n <StyledMenu\n innerRef={listRef}\n role=\"menu\"\n onKeyDown={handleOnMenuKeyDown}\n onBlur={handleOnBlur}\n style={subMenuStyles}\n >\n {items.map((item) => (\n <ItemFactory\n key={item.dsId}\n item={item}\n selectionMode={selectionMode}\n level={level}\n parentId={parentId}\n {...getItemProps(item.dsId)}\n />\n ))}\n </StyledMenu>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": ["React"]
|
7
|
+
}
|
@@ -0,0 +1,64 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __create = Object.create;
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
8
|
+
var __export = (target, all) => {
|
9
|
+
for (var name in all)
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
11
|
+
};
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
14
|
+
for (let key of __getOwnPropNames(from))
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
17
|
+
}
|
18
|
+
return to;
|
19
|
+
};
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
26
|
+
mod
|
27
|
+
));
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
29
|
+
var react_desc_prop_types_exports = {};
|
30
|
+
__export(react_desc_prop_types_exports, {
|
31
|
+
DSDMenuButtonPropTypes: () => DSDMenuButtonPropTypes,
|
32
|
+
DSDMenuButtonPropTypesSchema: () => DSDMenuButtonPropTypesSchema,
|
33
|
+
defaultProps: () => defaultProps
|
34
|
+
});
|
35
|
+
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
36
|
+
var React = __toESM(require("react"));
|
37
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
38
|
+
const defaultProps = {
|
39
|
+
selectedKeys: [],
|
40
|
+
onSelectionChange: () => {
|
41
|
+
}
|
42
|
+
};
|
43
|
+
const DSDMenuButtonPropTypes = {
|
44
|
+
...import_ds_props_helpers.globalAttributesPropTypes,
|
45
|
+
...import_ds_props_helpers.xstyledPropTypes,
|
46
|
+
items: import_ds_props_helpers.PropTypes.arrayOf(
|
47
|
+
import_ds_props_helpers.PropTypes.shape({
|
48
|
+
dsId: import_ds_props_helpers.PropTypes.string.isRequired,
|
49
|
+
label: import_ds_props_helpers.PropTypes.string,
|
50
|
+
type: import_ds_props_helpers.PropTypes.oneOf(["separator", "section", "single", "multiple", void 0])
|
51
|
+
})
|
52
|
+
).description("Array of items to be displayed in the dropdown").isRequired,
|
53
|
+
TriggerElement: import_ds_props_helpers.PropTypes.node.description("Component to be used as the trigger element").isRequired,
|
54
|
+
selectedKeys: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.string).description("Array of selected keys"),
|
55
|
+
onSelectionChange: import_ds_props_helpers.PropTypes.func.description("Function to be called when selection changes"),
|
56
|
+
triggerElementProps: import_ds_props_helpers.PropTypes.object.description("Props to be passed to the trigger element"),
|
57
|
+
selectionMode: import_ds_props_helpers.PropTypes.oneOf(["single", "multiple"]).description("Selection mode"),
|
58
|
+
menuMinWidth: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.number]).description(
|
59
|
+
"Minimum width of the main dropdown"
|
60
|
+
),
|
61
|
+
ItemRenderer: import_ds_props_helpers.PropTypes.node.description("Component to be used to render the items")
|
62
|
+
};
|
63
|
+
const DSDMenuButtonPropTypesSchema = DSDMenuButtonPropTypes;
|
64
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace MenuButtonT {\n export interface RequiredProps {\n items: Item[];\n TriggerElement: React.ComponentType<TriggerElementProps>;\n }\n\n export interface DefaultProps {\n selectedKeys: string[];\n onSelectionChange: (selectedKeys: string[]) => void;\n }\n\n export interface OptionalProps<T extends object = object> {\n triggerElementProps?: T;\n selectionMode?: 'single' | 'multiple';\n menuMinWidth?: string | number;\n ItemRenderer?: React.ComponentType<{ item: Item; isSelected: boolean }>;\n }\n\n export interface Props<T extends object = object>\n extends Partial<DefaultProps>,\n OptionalProps<T>,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps<T> | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps<T extends object = object>\n extends DefaultProps,\n OptionalProps<T>,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps<T> | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export type Item = {\n dsId: string;\n label: string;\n type?: 'separator' | 'section';\n childrens?: Item[];\n subitems: Item[];\n selectionMode?: 'single' | 'multiple';\n minWidth?: string;\n };\n\n export interface TriggerElementProps {\n isOpen: boolean;\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n attributes: {\n 'aria-haspopup': string;\n 'aria-expanded': boolean;\n };\n listeners: {\n onKeyDown: (e: React.KeyboardEvent) => void;\n };\n triggerElementProps?: OptionalProps['triggerElementProps'];\n }\n}\n\nexport const defaultProps: MenuButtonT.DefaultProps = {\n selectedKeys: [],\n onSelectionChange: () => {},\n};\n\nexport const DSDMenuButtonPropTypes: DSPropTypesSchema<MenuButtonT.Props<object>> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n items: PropTypes.arrayOf(\n PropTypes.shape({\n dsId: PropTypes.string.isRequired,\n label: PropTypes.string,\n type: PropTypes.oneOf(['separator', 'section', 'single', 'multiple', undefined]),\n }),\n ).description('Array of items to be displayed in the dropdown').isRequired,\n TriggerElement: PropTypes.node.description('Component to be used as the trigger element').isRequired,\n selectedKeys: PropTypes.arrayOf(PropTypes.string).description('Array of selected keys'),\n onSelectionChange: PropTypes.func.description('Function to be called when selection changes'),\n triggerElementProps: PropTypes.object.description('Props to be passed to the trigger element'),\n selectionMode: PropTypes.oneOf(['single', 'multiple']).description('Selection mode'),\n menuMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n 'Minimum width of the main dropdown',\n ),\n ItemRenderer: PropTypes.node.description('Component to be used to render the items'),\n};\n\nexport const DSDMenuButtonPropTypesSchema = DSDMenuButtonPropTypes as unknown as WeakValidationMap<\n MenuButtonT.Props<object>\n>;\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AA6DhE,MAAM,eAAyC;AAAA,EACpD,cAAc,CAAC;AAAA,EACf,mBAAmB,MAAM;AAAA,EAAC;AAC5B;AAEO,MAAM,yBAAuE;AAAA,EAClF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU;AAAA,IACf,kCAAU,MAAM;AAAA,MACd,MAAM,kCAAU,OAAO;AAAA,MACvB,OAAO,kCAAU;AAAA,MACjB,MAAM,kCAAU,MAAM,CAAC,aAAa,WAAW,UAAU,YAAY,MAAS,CAAC;AAAA,IACjF,CAAC;AAAA,EACH,EAAE,YAAY,gDAAgD,EAAE;AAAA,EAChE,gBAAgB,kCAAU,KAAK,YAAY,6CAA6C,EAAE;AAAA,EAC1F,cAAc,kCAAU,QAAQ,kCAAU,MAAM,EAAE,YAAY,wBAAwB;AAAA,EACtF,mBAAmB,kCAAU,KAAK,YAAY,8CAA8C;AAAA,EAC5F,qBAAqB,kCAAU,OAAO,YAAY,2CAA2C;AAAA,EAC7F,eAAe,kCAAU,MAAM,CAAC,UAAU,UAAU,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnF,cAAc,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE;AAAA,IACtE;AAAA,EACF;AAAA,EACA,cAAc,kCAAU,KAAK,YAAY,0CAA0C;AACrF;AAEO,MAAM,+BAA+B;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,128 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __create = Object.create;
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
8
|
+
var __export = (target, all) => {
|
9
|
+
for (var name in all)
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
11
|
+
};
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
14
|
+
for (let key of __getOwnPropNames(from))
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
17
|
+
}
|
18
|
+
return to;
|
19
|
+
};
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
26
|
+
mod
|
27
|
+
));
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
29
|
+
var styled_exports = {};
|
30
|
+
__export(styled_exports, {
|
31
|
+
StyledLeftContent: () => StyledLeftContent,
|
32
|
+
StyledMenu: () => StyledMenu,
|
33
|
+
StyledMenuButtonWrapper: () => StyledMenuButtonWrapper,
|
34
|
+
StyledMenuItem: () => StyledMenuItem,
|
35
|
+
StyledMenuItemContent: () => StyledMenuItemContent,
|
36
|
+
StyledRightContent: () => StyledRightContent,
|
37
|
+
StyledSection: () => StyledSection,
|
38
|
+
StyledSectionLabel: () => StyledSectionLabel,
|
39
|
+
StyledSeparator: () => StyledSeparator
|
40
|
+
});
|
41
|
+
module.exports = __toCommonJS(styled_exports);
|
42
|
+
var React = __toESM(require("react"));
|
43
|
+
var import_ds_system = require("@elliemae/ds-system");
|
44
|
+
const StyledMenuButtonWrapper = (0, import_ds_system.styled)("div")`
|
45
|
+
position: relative;
|
46
|
+
`;
|
47
|
+
const StyledMenu = (0, import_ds_system.styled)("ul")`
|
48
|
+
display: flex;
|
49
|
+
flex-direction: column;
|
50
|
+
gap: 1px;
|
51
|
+
list-style-type: none;
|
52
|
+
padding: 0;
|
53
|
+
margin: 0;
|
54
|
+
background-color: white;
|
55
|
+
/* height: 100%; */
|
56
|
+
${import_ds_system.xStyledCommonProps}
|
57
|
+
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),
|
58
|
+
0 2px 4px rgba(16, 22, 26, 0.2),
|
59
|
+
0 8px 24px rgba(16, 22, 26, 0.2);
|
60
|
+
`;
|
61
|
+
const StyledMenuItem = (0, import_ds_system.styled)("li")`
|
62
|
+
position: relative;
|
63
|
+
background-color: white;
|
64
|
+
display: flex;
|
65
|
+
margin: 0;
|
66
|
+
min-height: 32px;
|
67
|
+
width: ${({ isVertical, level }) => !isVertical && level === 0 ? "auto" : "100%"};
|
68
|
+
cursor: pointer;
|
69
|
+
|
70
|
+
ul li {
|
71
|
+
min-width: 200px;
|
72
|
+
}
|
73
|
+
|
74
|
+
&:hover {
|
75
|
+
background-color: brand-200;
|
76
|
+
}
|
77
|
+
|
78
|
+
a:focus {
|
79
|
+
outline: 1px solid brand-500;
|
80
|
+
background-color: brand-200;
|
81
|
+
}
|
82
|
+
|
83
|
+
${({ isOpen, theme }) => isOpen ? `background-color: ${theme.colors.brand["200"]}` : ""}
|
84
|
+
`;
|
85
|
+
const StyledMenuItemContent = (0, import_ds_system.styled)("a")`
|
86
|
+
display: flex;
|
87
|
+
align-items: center;
|
88
|
+
justify-content: space-between;
|
89
|
+
width: 100%;
|
90
|
+
text-decoration: none;
|
91
|
+
color: black;
|
92
|
+
&:focus {
|
93
|
+
outline: none;
|
94
|
+
}
|
95
|
+
${({ hasChildren }) => hasChildren ? "padding-left: 16px;" : "padding: 0 16px;"}
|
96
|
+
${import_ds_system.xStyledCommonProps}
|
97
|
+
`;
|
98
|
+
const StyledLeftContent = (0, import_ds_system.styled)("div")`
|
99
|
+
display: flex;
|
100
|
+
align-items: center;
|
101
|
+
gap: 4px;
|
102
|
+
height: 100%;
|
103
|
+
`;
|
104
|
+
const StyledRightContent = (0, import_ds_system.styled)("div")`
|
105
|
+
display: flex;
|
106
|
+
align-items: center;
|
107
|
+
`;
|
108
|
+
const StyledSeparator = (0, import_ds_system.styled)("hr")`
|
109
|
+
border: 0;
|
110
|
+
border-top: 1px solid #697489;
|
111
|
+
margin: 4px 0px;
|
112
|
+
padding: 0;
|
113
|
+
`;
|
114
|
+
const StyledSectionLabel = (0, import_ds_system.styled)("div")`
|
115
|
+
color: neutral-500;
|
116
|
+
display: flex;
|
117
|
+
flex-direction: column;
|
118
|
+
gap: 1px;
|
119
|
+
padding: 0 16px;
|
120
|
+
min-height: 24px;
|
121
|
+
justify-content: center;
|
122
|
+
`;
|
123
|
+
const StyledSection = (0, import_ds_system.styled)("div")`
|
124
|
+
display: flex;
|
125
|
+
flex-direction: column;
|
126
|
+
gap: 1px;
|
127
|
+
`;
|
128
|
+
//# sourceMappingURL=styled.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
+
"sourcesContent": ["import { xStyledCommonProps, styled } from '@elliemae/ds-system';\n\nexport const StyledMenuButtonWrapper = styled('div')`\n position: relative;\n`;\n\nexport const StyledMenu = styled('ul')`\n display: flex;\n flex-direction: column;\n gap: 1px;\n list-style-type: none;\n padding: 0;\n margin: 0;\n background-color: white;\n /* height: 100%; */\n ${xStyledCommonProps}\n box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),\n 0 2px 4px rgba(16, 22, 26, 0.2),\n 0 8px 24px rgba(16, 22, 26, 0.2);\n`;\n\nexport const StyledMenuItem = styled('li')<{ isVertical?: boolean; level?: number; isOpen?: boolean }>`\n position: relative;\n background-color: white;\n display: flex;\n margin: 0;\n min-height: 32px;\n width: ${({ isVertical, level }) => (!isVertical && level === 0 ? 'auto' : '100%')};\n cursor: pointer;\n\n ul li {\n min-width: 200px;\n }\n\n &:hover {\n background-color: brand-200;\n }\n\n a:focus {\n outline: 1px solid brand-500;\n background-color: brand-200;\n }\n\n ${({ isOpen, theme }) => (isOpen ? `background-color: ${theme.colors.brand['200']}` : '')}\n`;\n\nexport const StyledMenuItemContent = styled('a')<{ hasChildren?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n text-decoration: none;\n color: black;\n &:focus {\n outline: none;\n }\n ${({ hasChildren }) => (hasChildren ? 'padding-left: 16px;' : 'padding: 0 16px;')}\n ${xStyledCommonProps}\n`;\n\nexport const StyledLeftContent = styled('div')`\n display: flex;\n align-items: center;\n gap: 4px;\n height: 100%;\n`;\n\nexport const StyledRightContent = styled('div')`\n display: flex;\n align-items: center;\n`;\n\nexport const StyledSeparator = styled('hr')`\n border: 0;\n border-top: 1px solid #697489;\n margin: 4px 0px;\n padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('div')`\n color: neutral-500;\n display: flex;\n flex-direction: column;\n gap: 1px;\n padding: 0 16px;\n min-height: 24px;\n justify-content: center;\n`;\n\nexport const StyledSection = styled('div')`\n display: flex;\n flex-direction: column;\n gap: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAEpC,MAAM,8BAA0B,yBAAO,KAAK;AAAA;AAAA;AAI5C,MAAM,iBAAa,yBAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjC,mCAAkB;AAAA;AAAA;AAAA;AAAA;AAMf,MAAM,qBAAiB,yBAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM9B,CAAC,EAAE,YAAY,MAAM,MAAO,CAAC,cAAc,UAAU,IAAI,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBhF,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,qBAAqB,MAAM,OAAO,MAAM,KAAK,CAAC,KAAK,EAAG;AAAA;AAGpF,MAAM,4BAAwB,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU3C,CAAC,EAAE,YAAY,MAAO,cAAc,wBAAwB,kBAAmB;AAAA,IAC/E,mCAAkB;AAAA;AAGf,MAAM,wBAAoB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAKvC,MAAM,sBAAkB,yBAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvC,MAAM,oBAAgB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;",
|
6
|
+
"names": []
|
7
|
+
}
|