@launchpad-ui/menu 0.13.56 → 0.13.58
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/index.es.js +355 -418
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +382 -419
- package/dist/index.js.map +1 -1
- package/dist/style.css +1 -0
- package/package.json +3 -3
package/dist/index.js
CHANGED
@@ -1,441 +1,403 @@
|
|
1
1
|
require('./style.css');
|
2
2
|
"use strict";
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
3
|
+
var __create = Object.create;
|
4
|
+
var __defProp = Object.defineProperty;
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
11
|
+
key = keys[i];
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
13
|
+
get: ((k) => from[k]).bind(null, key),
|
14
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
15
|
+
});
|
16
|
+
}
|
17
|
+
return to;
|
18
|
+
};
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
20
|
+
value: mod,
|
21
|
+
enumerable: true
|
22
|
+
}) : target, mod));
|
23
|
+
const classix = __toESM(require("classix"));
|
24
|
+
const react = __toESM(require("react"));
|
25
|
+
const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
|
26
|
+
const __react_aria_separator = __toESM(require("@react-aria/separator"));
|
27
|
+
const __launchpad_ui_tooltip = __toESM(require("@launchpad-ui/tooltip"));
|
28
|
+
const __radix_ui_react_slot = __toESM(require("@radix-ui/react-slot"));
|
29
|
+
const __react_aria_focus = __toESM(require("@react-aria/focus"));
|
30
|
+
const __launchpad_ui_form = __toESM(require("@launchpad-ui/form"));
|
31
|
+
const react_virtual = __toESM(require("react-virtual"));
|
13
32
|
const Menu$1 = "C73R2W_Menu";
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
+
var Menu_module_default = {
|
34
|
+
"has-focus": "C73R2W_has-focus",
|
35
|
+
"is-highlighted": "C73R2W_is-highlighted",
|
36
|
+
Menu: Menu$1,
|
37
|
+
"Menu--isVirtual": "C73R2W_Menu--isVirtual",
|
38
|
+
"Menu-divider": "C73R2W_Menu-divider",
|
39
|
+
"Menu-item": "C73R2W_Menu-item",
|
40
|
+
"Menu-item--header": "C73R2W_Menu-item--header",
|
41
|
+
"Menu-item--nested": "C73R2W_Menu-item--nested",
|
42
|
+
"Menu-item-icon": "C73R2W_Menu-item-icon",
|
43
|
+
"Menu-item-list": "C73R2W_Menu-item-list",
|
44
|
+
"Menu-search": "C73R2W_Menu-search",
|
45
|
+
"Menu-search-hidden-placeholder": "C73R2W_Menu-search-hidden-placeholder",
|
46
|
+
"MenuSize--lg": "C73R2W_MenuSize--lg",
|
47
|
+
"MenuSize--md": "C73R2W_MenuSize--md",
|
48
|
+
"MenuSize--sm": "C73R2W_MenuSize--sm",
|
49
|
+
"MenuSize--xl": "C73R2W_MenuSize--xl",
|
50
|
+
"VirtualMenu-item": "C73R2W_VirtualMenu-item",
|
51
|
+
"VirtualMenu-item-list": "C73R2W_VirtualMenu-item-list"
|
33
52
|
};
|
34
|
-
const MenuBase = /* @__PURE__ */ react.forwardRef(
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
);
|
53
|
+
const MenuBase = /* @__PURE__ */ (0, react.forwardRef)(({ children, size, isVirtual,...props }, ref) => {
|
54
|
+
const classes = (0, classix.cx)(Menu_module_default.Menu, isVirtual && Menu_module_default["Menu--isVirtual"], size && Menu_module_default[`MenuSize--${size}`]);
|
55
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
56
|
+
...props,
|
57
|
+
role: "menu",
|
58
|
+
className: classes,
|
59
|
+
ref,
|
60
|
+
children
|
61
|
+
});
|
62
|
+
});
|
44
63
|
MenuBase.displayName = "MenuBase";
|
45
|
-
const MenuDivider = ({
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
"div",
|
57
|
-
{
|
58
|
-
...separatorProps,
|
59
|
-
"data-test-id": testId,
|
60
|
-
ref: innerRef,
|
61
|
-
className: styles["Menu-divider"]
|
62
|
-
}
|
63
|
-
);
|
64
|
+
const MenuDivider = ({ elementType = "div", orientation, innerRef, "data-test-id": testId = "menu-divider" }) => {
|
65
|
+
const { separatorProps } = (0, __react_aria_separator.useSeparator)({
|
66
|
+
orientation,
|
67
|
+
elementType
|
68
|
+
});
|
69
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
70
|
+
...separatorProps,
|
71
|
+
"data-test-id": testId,
|
72
|
+
ref: innerRef,
|
73
|
+
className: Menu_module_default["Menu-divider"]
|
74
|
+
});
|
64
75
|
};
|
65
76
|
const defaultElement = "button";
|
66
|
-
const MenuItem = ({
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
disabled,
|
96
|
-
"aria-disabled": disabled ? disabled : void 0,
|
97
|
-
className: classix.cx(
|
98
|
-
styles["Menu-item"],
|
99
|
-
className,
|
100
|
-
isHighlighted && styles["is-highlighted"],
|
101
|
-
nested && styles["Menu-item--nested"],
|
102
|
-
groupHeader && styles["Menu-item--header"]
|
103
|
-
),
|
104
|
-
"data-test-id": testId,
|
105
|
-
role,
|
106
|
-
onKeyDown,
|
107
|
-
children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
108
|
-
icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles["Menu-item-icon"], children: renderIcon }),
|
109
|
-
children
|
110
|
-
] })
|
111
|
-
}
|
112
|
-
) });
|
113
|
-
if (tooltip$1) {
|
114
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
115
|
-
tooltip.Tooltip,
|
116
|
-
{
|
117
|
-
content: tooltip$1,
|
118
|
-
rootElementStyle: { display: "block" },
|
119
|
-
allowBoundaryElementOverflow: true,
|
120
|
-
placement: tooltipPlacement ? tooltipPlacement : "bottom",
|
121
|
-
...tooltipOptions || {},
|
122
|
-
children: renderedItem
|
123
|
-
}
|
124
|
-
);
|
125
|
-
}
|
126
|
-
return renderedItem;
|
77
|
+
const MenuItem = ({ ...props }) => {
|
78
|
+
const { component, children, isHighlighted, icon, nested, groupHeader, item, disabled, className, tooltip, role = "menuitem", tooltipPlacement, onKeyDown, tooltipOptions, asChild, "data-test-id": testId = "menu-item",...rest } = props;
|
79
|
+
const Component = component || (asChild ? __radix_ui_react_slot.Slot : defaultElement);
|
80
|
+
const renderIcon = icon && /* @__PURE__ */ (0, react.cloneElement)(icon, { size: "small" });
|
81
|
+
const renderedItem = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_aria_focus.FocusRing, {
|
82
|
+
focusRingClass: Menu_module_default["has-focus"],
|
83
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
|
84
|
+
...rest,
|
85
|
+
disabled,
|
86
|
+
"aria-disabled": disabled ? disabled : void 0,
|
87
|
+
className: (0, classix.cx)(Menu_module_default["Menu-item"], className, isHighlighted && Menu_module_default["is-highlighted"], nested && Menu_module_default["Menu-item--nested"], groupHeader && Menu_module_default["Menu-item--header"]),
|
88
|
+
"data-test-id": testId,
|
89
|
+
role,
|
90
|
+
onKeyDown,
|
91
|
+
children: asChild ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
92
|
+
className: Menu_module_default["Menu-item-icon"],
|
93
|
+
children: renderIcon
|
94
|
+
}), children] })
|
95
|
+
})
|
96
|
+
});
|
97
|
+
if (tooltip) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_tooltip.Tooltip, {
|
98
|
+
content: tooltip,
|
99
|
+
rootElementStyle: { display: "block" },
|
100
|
+
allowBoundaryElementOverflow: true,
|
101
|
+
placement: tooltipPlacement ? tooltipPlacement : "bottom",
|
102
|
+
...tooltipOptions || {},
|
103
|
+
children: renderedItem
|
104
|
+
});
|
105
|
+
return renderedItem;
|
127
106
|
};
|
128
|
-
const MenuItemList = /* @__PURE__ */ react.forwardRef(({ children
|
107
|
+
const MenuItemList = /* @__PURE__ */ (0, react.forwardRef)(({ children,...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
108
|
+
...rest,
|
109
|
+
ref,
|
110
|
+
"data-test-id": "menu-item-list",
|
111
|
+
className: Menu_module_default["Menu-item-list"],
|
112
|
+
children
|
113
|
+
}));
|
129
114
|
MenuItemList.displayName = "MenuItemList";
|
130
|
-
const MenuSearch = /* @__PURE__ */ react.forwardRef((props, ref) => {
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
"data-test-id": testId,
|
148
|
-
autoComplete: "off",
|
149
|
-
placeholder,
|
150
|
-
"aria-label": ariaLabel || "Search"
|
151
|
-
}
|
152
|
-
) });
|
115
|
+
const MenuSearch = /* @__PURE__ */ (0, react.forwardRef)((props, ref) => {
|
116
|
+
const { ariaLabel, placeholder, id, "data-test-id": testId = "menu-search",...finalProps } = props;
|
117
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
118
|
+
className: Menu_module_default["Menu-search"],
|
119
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_form.TextField, {
|
120
|
+
...finalProps,
|
121
|
+
ref,
|
122
|
+
className: Menu_module_default["Menu-search-input"],
|
123
|
+
tiny: true,
|
124
|
+
id,
|
125
|
+
type: "search",
|
126
|
+
"data-test-id": testId,
|
127
|
+
autoComplete: "off",
|
128
|
+
placeholder,
|
129
|
+
"aria-label": ariaLabel || "Search"
|
130
|
+
})
|
131
|
+
});
|
153
132
|
});
|
154
133
|
MenuSearch.displayName = "MenuSearch";
|
155
134
|
const createItemId = (index, id) => `${id}-item-${index}`;
|
156
135
|
const getNodeForIndex = (index, menuId) => index === null ? index : document.getElementById(createItemId(index, menuId));
|
157
136
|
const handleKeyboardInteractions = (event, keyHandlers) => {
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
(_a = ops[event.key]) == null ? void 0 : _a.call(globalThis, event);
|
168
|
-
}
|
137
|
+
const ops = {
|
138
|
+
ArrowUp: keyHandlers.handleUp,
|
139
|
+
ArrowDown: keyHandlers.handleDown,
|
140
|
+
Enter: keyHandlers.handleEnter
|
141
|
+
};
|
142
|
+
if (ops[event.key]) {
|
143
|
+
event.preventDefault();
|
144
|
+
ops[event.key]?.call(globalThis, event);
|
145
|
+
}
|
169
146
|
};
|
170
147
|
const chainEventHandlers = (...handlers) => (event) => {
|
171
|
-
|
172
|
-
typeof h === "function" && h(event);
|
173
|
-
}
|
148
|
+
for (const h of handlers) typeof h === "function" && h(event);
|
174
149
|
};
|
150
|
+
/**
|
151
|
+
* @deprecated use `Menu` or `ListBox` from `@launchpad-ui/components` instead
|
152
|
+
*
|
153
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs
|
154
|
+
*/
|
175
155
|
const Menu = (props) => {
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
156
|
+
const { children, menuItemClassName, onSelect, enableVirtualization, itemHeight, size, overscan = 1, "data-test-id": testId = "menu" } = props;
|
157
|
+
const focusManager = (0, __react_aria_focus.useFocusManager)();
|
158
|
+
const handleArrowDown = (0, react.useCallback)(() => {
|
159
|
+
focusManager?.focusNext({ wrap: true });
|
160
|
+
}, [focusManager]);
|
161
|
+
const handleArrowUp = (0, react.useCallback)(() => {
|
162
|
+
focusManager?.focusPrevious({ wrap: true });
|
163
|
+
}, [focusManager]);
|
164
|
+
const reduceItems = (0, react.useMemo)(() => {
|
165
|
+
const childrenProps = react.Children.toArray(children);
|
166
|
+
if (enableVirtualization) {
|
167
|
+
let searchElem = null;
|
168
|
+
let elements = [];
|
169
|
+
for (const child of childrenProps) switch (child.type) {
|
170
|
+
case MenuSearch:
|
171
|
+
searchElem = child;
|
172
|
+
break;
|
173
|
+
case MenuItem:
|
174
|
+
case MenuDivider:
|
175
|
+
elements = elements.concat(child);
|
176
|
+
break;
|
177
|
+
default: break;
|
178
|
+
}
|
179
|
+
return {
|
180
|
+
items: elements,
|
181
|
+
searchElement: searchElem
|
182
|
+
};
|
183
|
+
}
|
184
|
+
return childrenProps.reduce(({ items, searchElement }, child) => {
|
185
|
+
switch (child.type) {
|
186
|
+
case MenuSearch: return {
|
187
|
+
items,
|
188
|
+
searchElement: /* @__PURE__ */ (0, react.cloneElement)(child, { onKeyDown: (e) => handleKeyboardInteractions(e, {
|
189
|
+
handleDown: handleArrowDown,
|
190
|
+
handleUp: handleArrowUp
|
191
|
+
}) })
|
192
|
+
};
|
193
|
+
case MenuItem: return {
|
194
|
+
items: items.concat(child.props.disabled ? /* @__PURE__ */ (0, react.cloneElement)(child, {
|
195
|
+
className: (0, classix.cx)(child.props.className, menuItemClassName),
|
196
|
+
onClick: () => void 0,
|
197
|
+
onKeyDown: () => void 0,
|
198
|
+
tabIndex: -1,
|
199
|
+
disabled: true
|
200
|
+
}) : /* @__PURE__ */ (0, react.cloneElement)(child, {
|
201
|
+
className: (0, classix.cx)(child.props.className, menuItemClassName),
|
202
|
+
item: child.props.item ?? items.length,
|
203
|
+
onClick: chainEventHandlers(child.props.onClick, () => {
|
204
|
+
onSelect?.(child.props.item ?? items.length);
|
205
|
+
}),
|
206
|
+
onKeyDown: (e) => handleKeyboardInteractions(e, {
|
207
|
+
handleDown: handleArrowDown,
|
208
|
+
handleUp: handleArrowUp
|
209
|
+
})
|
210
|
+
})),
|
211
|
+
searchElement
|
212
|
+
};
|
213
|
+
case MenuDivider: return {
|
214
|
+
items: items.concat(child),
|
215
|
+
searchElement
|
216
|
+
};
|
217
|
+
default: return {
|
218
|
+
items,
|
219
|
+
searchElement
|
220
|
+
};
|
221
|
+
}
|
222
|
+
}, {
|
223
|
+
items: [],
|
224
|
+
searchElement: null
|
225
|
+
});
|
226
|
+
}, [
|
227
|
+
children,
|
228
|
+
enableVirtualization,
|
229
|
+
menuItemClassName,
|
230
|
+
handleArrowDown,
|
231
|
+
handleArrowUp,
|
232
|
+
onSelect
|
233
|
+
]);
|
234
|
+
if (enableVirtualization) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuBase, {
|
235
|
+
"data-test-id": testId,
|
236
|
+
isVirtual: true,
|
237
|
+
size,
|
238
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemVirtualizer, {
|
239
|
+
items: react.Children.toArray(reduceItems.items),
|
240
|
+
searchElement: reduceItems.searchElement,
|
241
|
+
overscan,
|
242
|
+
menuItemClassName,
|
243
|
+
onSelect,
|
244
|
+
itemHeight,
|
245
|
+
focusManager
|
246
|
+
})
|
247
|
+
});
|
248
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MenuBase, {
|
249
|
+
"data-test-id": testId,
|
250
|
+
size,
|
251
|
+
children: [reduceItems.searchElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItemList, {
|
252
|
+
role: "presentation",
|
253
|
+
children: reduceItems.items
|
254
|
+
})]
|
255
|
+
});
|
275
256
|
};
|
276
257
|
const ItemVirtualizer = (props) => {
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
virtualRow.index
|
421
|
-
);
|
422
|
-
}),
|
423
|
-
[rowVirtualizer.virtualItems, items, getItemProps]
|
424
|
-
);
|
425
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
426
|
-
renderSearch,
|
427
|
-
/* @__PURE__ */ jsxRuntime.jsx(MenuItemList, { ref: parentRef, role: "presentation", children: /* @__PURE__ */ jsxRuntime.jsx(
|
428
|
-
"div",
|
429
|
-
{
|
430
|
-
role: "presentation",
|
431
|
-
className: styles["VirtualMenu-item-list"],
|
432
|
-
style: {
|
433
|
-
height: `${rowVirtualizer.totalSize}px`
|
434
|
-
},
|
435
|
-
children: renderItems
|
436
|
-
}
|
437
|
-
) })
|
438
|
-
] });
|
258
|
+
const { overscan, searchElement, itemHeight = 31.5, menuItemClassName, items, focusManager, onSelect } = props;
|
259
|
+
const menuId = (0, react.useRef)(`menu-ctrl-${(0, react.useId)()}`);
|
260
|
+
const focusedItemIndex = (0, react.useRef)(null);
|
261
|
+
const parentRef = (0, react.useRef)(null);
|
262
|
+
const searchRef = (0, react.useRef)(null);
|
263
|
+
const [nextFocusValue, setNextFocusValue] = (0, react.useState)(null);
|
264
|
+
const hasSearch = !!searchElement;
|
265
|
+
const lastVirtualItemIndex = items ? items.length - 1 : 0;
|
266
|
+
const rowVirtualizer = (0, react_virtual.useVirtual)({
|
267
|
+
size: items !== null ? items.length : 0,
|
268
|
+
parentRef,
|
269
|
+
estimateSize: (0, react.useCallback)(() => itemHeight, [itemHeight]),
|
270
|
+
overscan
|
271
|
+
});
|
272
|
+
const focusSearchBar = (0, react.useCallback)(() => {
|
273
|
+
rowVirtualizer.scrollToIndex(0);
|
274
|
+
searchRef.current?.focus?.();
|
275
|
+
}, [rowVirtualizer]);
|
276
|
+
/**
|
277
|
+
* Scrolls to the menu item with the index provided and
|
278
|
+
* then manually focuses it using a side effect in useEffect
|
279
|
+
*/
|
280
|
+
const focusMenuItem = (0, react.useCallback)((index) => {
|
281
|
+
rowVirtualizer.scrollToIndex(index);
|
282
|
+
setNextFocusValue(index);
|
283
|
+
}, [rowVirtualizer]);
|
284
|
+
const handleKeyboardFocusInteraction = (0, react.useCallback)((direction) => {
|
285
|
+
if (focusedItemIndex.current === null || focusedItemIndex.current === void 0) return;
|
286
|
+
const nextIndex = direction === "next" ? focusedItemIndex.current + 1 : focusedItemIndex.current - 1;
|
287
|
+
const shouldWrap = direction === "next" && focusedItemIndex.current === lastVirtualItemIndex || direction === "previous" && focusedItemIndex.current === 0;
|
288
|
+
if (shouldWrap) {
|
289
|
+
if (hasSearch) focusSearchBar();
|
290
|
+
else focusMenuItem(direction === "next" ? 0 : lastVirtualItemIndex);
|
291
|
+
return;
|
292
|
+
}
|
293
|
+
switch (direction) {
|
294
|
+
case "next":
|
295
|
+
rowVirtualizer.scrollToIndex(nextIndex);
|
296
|
+
focusManager?.focusNext();
|
297
|
+
break;
|
298
|
+
case "previous":
|
299
|
+
rowVirtualizer.scrollToIndex(nextIndex);
|
300
|
+
focusManager?.focusPrevious();
|
301
|
+
break;
|
302
|
+
default: break;
|
303
|
+
}
|
304
|
+
}, [
|
305
|
+
focusManager,
|
306
|
+
focusMenuItem,
|
307
|
+
focusSearchBar,
|
308
|
+
hasSearch,
|
309
|
+
lastVirtualItemIndex,
|
310
|
+
rowVirtualizer
|
311
|
+
]);
|
312
|
+
const getItemProps = (0, react.useCallback)((itemElem, index) => {
|
313
|
+
const childProps = itemElem.props;
|
314
|
+
switch (itemElem.type) {
|
315
|
+
case MenuItem: return {
|
316
|
+
className: (0, classix.cx)(childProps.className, menuItemClassName),
|
317
|
+
onKeyDown: childProps.disabled ? () => void 0 : (e) => handleKeyboardFocusKeydown(e, {
|
318
|
+
handleFocusBackward: handleKeyboardFocusInteraction,
|
319
|
+
handleFocusForward: handleKeyboardFocusInteraction
|
320
|
+
}),
|
321
|
+
onFocus: chainEventHandlers(childProps.onFocus, () => {
|
322
|
+
focusedItemIndex.current = index;
|
323
|
+
}),
|
324
|
+
id: createItemId(index, menuId.current),
|
325
|
+
onBlur: chainEventHandlers(childProps.onBlur, () => {
|
326
|
+
focusedItemIndex.current = null;
|
327
|
+
}),
|
328
|
+
onClick: childProps.disabled ? () => void 0 : chainEventHandlers(childProps.onClick, () => {
|
329
|
+
onSelect?.(childProps.item);
|
330
|
+
})
|
331
|
+
};
|
332
|
+
default: return {};
|
333
|
+
}
|
334
|
+
}, [
|
335
|
+
handleKeyboardFocusInteraction,
|
336
|
+
menuItemClassName,
|
337
|
+
onSelect
|
338
|
+
]);
|
339
|
+
(0, react.useEffect)(() => {
|
340
|
+
if (nextFocusValue !== null) {
|
341
|
+
requestAnimationFrame(() => {
|
342
|
+
const element = getNodeForIndex(nextFocusValue, menuId.current);
|
343
|
+
element?.focus();
|
344
|
+
});
|
345
|
+
setNextFocusValue(null);
|
346
|
+
}
|
347
|
+
}, [nextFocusValue]);
|
348
|
+
/**
|
349
|
+
* Calls handleFocusForward when the user is attempting to focus forward using
|
350
|
+
* tab or arrow keys. Calls handleFocusBackward when the users wants to move backward.
|
351
|
+
*/
|
352
|
+
const handleKeyboardFocusKeydown = (e, callbacks) => {
|
353
|
+
const keyOps = [
|
354
|
+
"Tab",
|
355
|
+
"ArrowUp",
|
356
|
+
"ArrowDown"
|
357
|
+
];
|
358
|
+
if (keyOps.includes(e.key)) {
|
359
|
+
e.preventDefault();
|
360
|
+
e.stopPropagation();
|
361
|
+
if (e.key === "Tab" && e.shiftKey || e.key === "ArrowUp") callbacks.handleFocusBackward?.("previous");
|
362
|
+
else if (e.key === "ArrowDown" || e.key === "Tab") callbacks.handleFocusForward?.("next");
|
363
|
+
}
|
364
|
+
};
|
365
|
+
const renderSearch = (0, react.useMemo)(() => searchElement ? /* @__PURE__ */ (0, react.cloneElement)(searchElement, {
|
366
|
+
onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
|
367
|
+
handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
|
368
|
+
handleFocusForward: () => focusMenuItem(0)
|
369
|
+
}),
|
370
|
+
ref: searchRef
|
371
|
+
}) : null, [
|
372
|
+
searchElement,
|
373
|
+
lastVirtualItemIndex,
|
374
|
+
focusMenuItem
|
375
|
+
]);
|
376
|
+
const renderItems = (0, react.useMemo)(() => rowVirtualizer.virtualItems.map((virtualRow) => {
|
377
|
+
if (!items) return null;
|
378
|
+
const elem = items[virtualRow.index];
|
379
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
380
|
+
ref: virtualRow.measureRef,
|
381
|
+
role: "presentation",
|
382
|
+
className: Menu_module_default["VirtualMenu-item"],
|
383
|
+
style: { transform: `translateY(${virtualRow.start}px)` },
|
384
|
+
children: /* @__PURE__ */ (0, react.cloneElement)(elem, getItemProps(elem, virtualRow.index))
|
385
|
+
}, virtualRow.index);
|
386
|
+
}), [
|
387
|
+
rowVirtualizer.virtualItems,
|
388
|
+
items,
|
389
|
+
getItemProps
|
390
|
+
]);
|
391
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderSearch, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItemList, {
|
392
|
+
ref: parentRef,
|
393
|
+
role: "presentation",
|
394
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
395
|
+
role: "presentation",
|
396
|
+
className: Menu_module_default["VirtualMenu-item-list"],
|
397
|
+
style: { height: `${rowVirtualizer.totalSize}px` },
|
398
|
+
children: renderItems
|
399
|
+
})
|
400
|
+
})] });
|
439
401
|
};
|
440
402
|
exports.Menu = Menu;
|
441
403
|
exports.MenuBase = MenuBase;
|
@@ -443,4 +405,5 @@ exports.MenuDivider = MenuDivider;
|
|
443
405
|
exports.MenuItem = MenuItem;
|
444
406
|
exports.MenuItemList = MenuItemList;
|
445
407
|
exports.MenuSearch = MenuSearch;
|
446
|
-
|
408
|
+
|
409
|
+
//# sourceMappingURL=index.js.map
|