@radix-ui/react-menubar 1.1.0-rc.2 → 1.1.0-rc.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/dist/index.js +473 -435
- package/dist/index.js.map +4 -4
- package/package.json +11 -11
package/dist/index.js
CHANGED
|
@@ -1,462 +1,500 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
"use client";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
mod
|
|
31
|
-
));
|
|
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 __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
32
30
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
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
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
var [MenubarMenuProvider, useMenubarMenuContext] = createMenubarContext(MENU_NAME);
|
|
118
|
-
var MenubarMenu = (props) => {
|
|
119
|
-
const { __scopeMenubar, value: valueProp, ...menuProps } = props;
|
|
120
|
-
const autoValue = (0, import_react_id.useId)();
|
|
121
|
-
const value = valueProp || autoValue || "LEGACY_REACT_AUTO_VALUE";
|
|
122
|
-
const context = useMenubarContext(MENU_NAME, __scopeMenubar);
|
|
123
|
-
const menuScope = useMenuScope(__scopeMenubar);
|
|
124
|
-
const triggerRef = React.useRef(null);
|
|
125
|
-
const wasKeyboardTriggerOpenRef = React.useRef(false);
|
|
126
|
-
const open = context.value === value;
|
|
127
|
-
React.useEffect(() => {
|
|
128
|
-
if (!open) wasKeyboardTriggerOpenRef.current = false;
|
|
129
|
-
}, [open]);
|
|
31
|
+
// packages/react/menubar/src/index.ts
|
|
32
|
+
var src_exports = {};
|
|
33
|
+
__export(src_exports, {
|
|
34
|
+
Arrow: () => Arrow2,
|
|
35
|
+
CheckboxItem: () => CheckboxItem2,
|
|
36
|
+
Content: () => Content2,
|
|
37
|
+
Group: () => Group2,
|
|
38
|
+
Item: () => Item3,
|
|
39
|
+
ItemIndicator: () => ItemIndicator2,
|
|
40
|
+
Label: () => Label2,
|
|
41
|
+
Menu: () => Menu,
|
|
42
|
+
Menubar: () => Menubar,
|
|
43
|
+
MenubarArrow: () => MenubarArrow,
|
|
44
|
+
MenubarCheckboxItem: () => MenubarCheckboxItem,
|
|
45
|
+
MenubarContent: () => MenubarContent,
|
|
46
|
+
MenubarGroup: () => MenubarGroup,
|
|
47
|
+
MenubarItem: () => MenubarItem,
|
|
48
|
+
MenubarItemIndicator: () => MenubarItemIndicator,
|
|
49
|
+
MenubarLabel: () => MenubarLabel,
|
|
50
|
+
MenubarMenu: () => MenubarMenu,
|
|
51
|
+
MenubarPortal: () => MenubarPortal,
|
|
52
|
+
MenubarRadioGroup: () => MenubarRadioGroup,
|
|
53
|
+
MenubarRadioItem: () => MenubarRadioItem,
|
|
54
|
+
MenubarSeparator: () => MenubarSeparator,
|
|
55
|
+
MenubarSub: () => MenubarSub,
|
|
56
|
+
MenubarSubContent: () => MenubarSubContent,
|
|
57
|
+
MenubarSubTrigger: () => MenubarSubTrigger,
|
|
58
|
+
MenubarTrigger: () => MenubarTrigger,
|
|
59
|
+
Portal: () => Portal2,
|
|
60
|
+
RadioGroup: () => RadioGroup2,
|
|
61
|
+
RadioItem: () => RadioItem2,
|
|
62
|
+
Root: () => Root3,
|
|
63
|
+
Separator: () => Separator2,
|
|
64
|
+
Sub: () => Sub2,
|
|
65
|
+
SubContent: () => SubContent2,
|
|
66
|
+
SubTrigger: () => SubTrigger2,
|
|
67
|
+
Trigger: () => Trigger,
|
|
68
|
+
createMenubarScope: () => createMenubarScope
|
|
69
|
+
});
|
|
70
|
+
module.exports = __toCommonJS(src_exports);
|
|
71
|
+
|
|
72
|
+
// packages/react/menubar/src/Menubar.tsx
|
|
73
|
+
var React = __toESM(require("react"));
|
|
74
|
+
var import_react_collection = require("@radix-ui/react-collection");
|
|
75
|
+
var import_react_direction = require("@radix-ui/react-direction");
|
|
76
|
+
var import_primitive = require("@radix-ui/primitive");
|
|
77
|
+
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
|
|
78
|
+
var import_react_context = require("@radix-ui/react-context");
|
|
79
|
+
var import_react_id = require("@radix-ui/react-id");
|
|
80
|
+
var MenuPrimitive = __toESM(require("@radix-ui/react-menu"));
|
|
81
|
+
var import_react_menu = require("@radix-ui/react-menu");
|
|
82
|
+
var RovingFocusGroup = __toESM(require("@radix-ui/react-roving-focus"));
|
|
83
|
+
var import_react_roving_focus = require("@radix-ui/react-roving-focus");
|
|
84
|
+
var import_react_primitive = require("@radix-ui/react-primitive");
|
|
85
|
+
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
|
|
86
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
87
|
+
var MENUBAR_NAME = "Menubar";
|
|
88
|
+
var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(MENUBAR_NAME);
|
|
89
|
+
var [createMenubarContext, createMenubarScope] = (0, import_react_context.createContextScope)(MENUBAR_NAME, [
|
|
90
|
+
createCollectionScope,
|
|
91
|
+
import_react_roving_focus.createRovingFocusGroupScope
|
|
92
|
+
]);
|
|
93
|
+
var useMenuScope = (0, import_react_menu.createMenuScope)();
|
|
94
|
+
var useRovingFocusGroupScope = (0, import_react_roving_focus.createRovingFocusGroupScope)();
|
|
95
|
+
var [MenubarContextProvider, useMenubarContext] = createMenubarContext(MENUBAR_NAME);
|
|
96
|
+
var Menubar = React.forwardRef(
|
|
97
|
+
(props, forwardedRef) => {
|
|
98
|
+
const {
|
|
99
|
+
__scopeMenubar,
|
|
100
|
+
value: valueProp,
|
|
101
|
+
onValueChange,
|
|
102
|
+
defaultValue,
|
|
103
|
+
loop = true,
|
|
104
|
+
dir,
|
|
105
|
+
...menubarProps
|
|
106
|
+
} = props;
|
|
107
|
+
const direction = (0, import_react_direction.useDirection)(dir);
|
|
108
|
+
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenubar);
|
|
109
|
+
const [value = "", setValue] = (0, import_react_use_controllable_state.useControllableState)({
|
|
110
|
+
prop: valueProp,
|
|
111
|
+
onChange: onValueChange,
|
|
112
|
+
defaultProp: defaultValue
|
|
113
|
+
});
|
|
114
|
+
const [currentTabStopId, setCurrentTabStopId] = React.useState(null);
|
|
130
115
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
131
|
-
|
|
116
|
+
MenubarContextProvider,
|
|
132
117
|
{
|
|
133
118
|
scope: __scopeMenubar,
|
|
134
119
|
value,
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
120
|
+
onMenuOpen: React.useCallback(
|
|
121
|
+
(value2) => {
|
|
122
|
+
setValue(value2);
|
|
123
|
+
setCurrentTabStopId(value2);
|
|
124
|
+
},
|
|
125
|
+
[setValue]
|
|
126
|
+
),
|
|
127
|
+
onMenuClose: React.useCallback(() => setValue(""), [setValue]),
|
|
128
|
+
onMenuToggle: React.useCallback(
|
|
129
|
+
(value2) => {
|
|
130
|
+
setValue((prevValue) => Boolean(prevValue) ? "" : value2);
|
|
131
|
+
setCurrentTabStopId(value2);
|
|
132
|
+
},
|
|
133
|
+
[setValue]
|
|
134
|
+
),
|
|
135
|
+
dir: direction,
|
|
136
|
+
loop,
|
|
137
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: __scopeMenubar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: __scopeMenubar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
138
|
+
RovingFocusGroup.Root,
|
|
141
139
|
{
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
...
|
|
140
|
+
asChild: true,
|
|
141
|
+
...rovingFocusGroupScope,
|
|
142
|
+
orientation: "horizontal",
|
|
143
|
+
loop,
|
|
144
|
+
dir: direction,
|
|
145
|
+
currentTabStopId,
|
|
146
|
+
onCurrentTabStopIdChange: setCurrentTabStopId,
|
|
147
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { role: "menubar", ...menubarProps, ref: forwardedRef })
|
|
150
148
|
}
|
|
151
|
-
)
|
|
149
|
+
) }) })
|
|
152
150
|
}
|
|
153
151
|
);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
152
|
+
}
|
|
153
|
+
);
|
|
154
|
+
Menubar.displayName = MENUBAR_NAME;
|
|
155
|
+
var MENU_NAME = "MenubarMenu";
|
|
156
|
+
var [MenubarMenuProvider, useMenubarMenuContext] = createMenubarContext(MENU_NAME);
|
|
157
|
+
var MenubarMenu = (props) => {
|
|
158
|
+
const { __scopeMenubar, value: valueProp, ...menuProps } = props;
|
|
159
|
+
const autoValue = (0, import_react_id.useId)();
|
|
160
|
+
const value = valueProp || autoValue || "LEGACY_REACT_AUTO_VALUE";
|
|
161
|
+
const context = useMenubarContext(MENU_NAME, __scopeMenubar);
|
|
162
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
163
|
+
const triggerRef = React.useRef(null);
|
|
164
|
+
const wasKeyboardTriggerOpenRef = React.useRef(false);
|
|
165
|
+
const open = context.value === value;
|
|
166
|
+
React.useEffect(() => {
|
|
167
|
+
if (!open) wasKeyboardTriggerOpenRef.current = false;
|
|
168
|
+
}, [open]);
|
|
169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
170
|
+
MenubarMenuProvider,
|
|
171
|
+
{
|
|
172
|
+
scope: __scopeMenubar,
|
|
173
|
+
value,
|
|
174
|
+
triggerId: (0, import_react_id.useId)(),
|
|
175
|
+
triggerRef,
|
|
176
|
+
contentId: (0, import_react_id.useId)(),
|
|
177
|
+
wasKeyboardTriggerOpenRef,
|
|
178
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
179
|
+
MenuPrimitive.Root,
|
|
170
180
|
{
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
role: "menuitem",
|
|
180
|
-
id: menuContext.triggerId,
|
|
181
|
-
"aria-haspopup": "menu",
|
|
182
|
-
"aria-expanded": open,
|
|
183
|
-
"aria-controls": open ? menuContext.contentId : void 0,
|
|
184
|
-
"data-highlighted": isFocused ? "" : void 0,
|
|
185
|
-
"data-state": open ? "open" : "closed",
|
|
186
|
-
"data-disabled": disabled ? "" : void 0,
|
|
187
|
-
disabled,
|
|
188
|
-
...triggerProps,
|
|
189
|
-
ref: composedRefs,
|
|
190
|
-
onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
|
|
191
|
-
if (!disabled && event.button === 0 && event.ctrlKey === false) {
|
|
192
|
-
context.onMenuOpen(menuContext.value);
|
|
193
|
-
if (!open) event.preventDefault();
|
|
194
|
-
}
|
|
195
|
-
}),
|
|
196
|
-
onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, () => {
|
|
197
|
-
const menubarOpen = Boolean(context.value);
|
|
198
|
-
if (menubarOpen && !open) {
|
|
199
|
-
context.onMenuOpen(menuContext.value);
|
|
200
|
-
ref.current?.focus();
|
|
201
|
-
}
|
|
202
|
-
}),
|
|
203
|
-
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
204
|
-
if (disabled) return;
|
|
205
|
-
if (["Enter", " "].includes(event.key)) context.onMenuToggle(menuContext.value);
|
|
206
|
-
if (event.key === "ArrowDown") context.onMenuOpen(menuContext.value);
|
|
207
|
-
if (["Enter", " ", "ArrowDown"].includes(event.key)) {
|
|
208
|
-
menuContext.wasKeyboardTriggerOpenRef.current = true;
|
|
209
|
-
event.preventDefault();
|
|
210
|
-
}
|
|
211
|
-
}),
|
|
212
|
-
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => setIsFocused(true)),
|
|
213
|
-
onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, () => setIsFocused(false))
|
|
214
|
-
}
|
|
215
|
-
) })
|
|
181
|
+
...menuScope,
|
|
182
|
+
open,
|
|
183
|
+
onOpenChange: (open2) => {
|
|
184
|
+
if (!open2) context.onMenuClose();
|
|
185
|
+
},
|
|
186
|
+
modal: false,
|
|
187
|
+
dir: context.dir,
|
|
188
|
+
...menuProps
|
|
216
189
|
}
|
|
217
|
-
)
|
|
190
|
+
)
|
|
218
191
|
}
|
|
219
192
|
);
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
193
|
+
};
|
|
194
|
+
MenubarMenu.displayName = MENU_NAME;
|
|
195
|
+
var TRIGGER_NAME = "MenubarTrigger";
|
|
196
|
+
var MenubarTrigger = React.forwardRef(
|
|
197
|
+
(props, forwardedRef) => {
|
|
198
|
+
const { __scopeMenubar, disabled = false, ...triggerProps } = props;
|
|
199
|
+
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenubar);
|
|
224
200
|
const menuScope = useMenuScope(__scopeMenubar);
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
MenuPrimitive.
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
const isMenubarTrigger = getItems().some((item) => item.ref.current?.contains(target));
|
|
258
|
-
if (isMenubarTrigger) event.preventDefault();
|
|
259
|
-
}),
|
|
260
|
-
onInteractOutside: (0, import_primitive.composeEventHandlers)(props.onInteractOutside, () => {
|
|
261
|
-
hasInteractedOutsideRef.current = true;
|
|
262
|
-
}),
|
|
263
|
-
onEntryFocus: (event) => {
|
|
264
|
-
if (!menuContext.wasKeyboardTriggerOpenRef.current) event.preventDefault();
|
|
265
|
-
},
|
|
266
|
-
onKeyDown: (0, import_primitive.composeEventHandlers)(
|
|
267
|
-
props.onKeyDown,
|
|
268
|
-
(event) => {
|
|
269
|
-
if (["ArrowRight", "ArrowLeft"].includes(event.key)) {
|
|
270
|
-
const target = event.target;
|
|
271
|
-
const targetIsSubTrigger = target.hasAttribute("data-radix-menubar-subtrigger");
|
|
272
|
-
const isKeyDownInsideSubMenu = target.closest("[data-radix-menubar-content]") !== event.currentTarget;
|
|
273
|
-
const prevMenuKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
|
|
274
|
-
const isPrevKey = prevMenuKey === event.key;
|
|
275
|
-
const isNextKey = !isPrevKey;
|
|
276
|
-
if (isNextKey && targetIsSubTrigger) return;
|
|
277
|
-
if (isKeyDownInsideSubMenu && isPrevKey) return;
|
|
278
|
-
const items = getItems().filter((item) => !item.disabled);
|
|
279
|
-
let candidateValues = items.map((item) => item.value);
|
|
280
|
-
if (isPrevKey) candidateValues.reverse();
|
|
281
|
-
const currentIndex = candidateValues.indexOf(menuContext.value);
|
|
282
|
-
candidateValues = context.loop ? wrapArray(candidateValues, currentIndex + 1) : candidateValues.slice(currentIndex + 1);
|
|
283
|
-
const [nextValue] = candidateValues;
|
|
284
|
-
if (nextValue) context.onMenuOpen(nextValue);
|
|
201
|
+
const context = useMenubarContext(TRIGGER_NAME, __scopeMenubar);
|
|
202
|
+
const menuContext = useMenubarMenuContext(TRIGGER_NAME, __scopeMenubar);
|
|
203
|
+
const ref = React.useRef(null);
|
|
204
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref, menuContext.triggerRef);
|
|
205
|
+
const [isFocused, setIsFocused] = React.useState(false);
|
|
206
|
+
const open = context.value === menuContext.value;
|
|
207
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: __scopeMenubar, value: menuContext.value, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
208
|
+
RovingFocusGroup.Item,
|
|
209
|
+
{
|
|
210
|
+
asChild: true,
|
|
211
|
+
...rovingFocusGroupScope,
|
|
212
|
+
focusable: !disabled,
|
|
213
|
+
tabStopId: menuContext.value,
|
|
214
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.Anchor, { asChild: true, ...menuScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
215
|
+
import_react_primitive.Primitive.button,
|
|
216
|
+
{
|
|
217
|
+
type: "button",
|
|
218
|
+
role: "menuitem",
|
|
219
|
+
id: menuContext.triggerId,
|
|
220
|
+
"aria-haspopup": "menu",
|
|
221
|
+
"aria-expanded": open,
|
|
222
|
+
"aria-controls": open ? menuContext.contentId : void 0,
|
|
223
|
+
"data-highlighted": isFocused ? "" : void 0,
|
|
224
|
+
"data-state": open ? "open" : "closed",
|
|
225
|
+
"data-disabled": disabled ? "" : void 0,
|
|
226
|
+
disabled,
|
|
227
|
+
...triggerProps,
|
|
228
|
+
ref: composedRefs,
|
|
229
|
+
onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
|
|
230
|
+
if (!disabled && event.button === 0 && event.ctrlKey === false) {
|
|
231
|
+
context.onMenuOpen(menuContext.value);
|
|
232
|
+
if (!open) event.preventDefault();
|
|
285
233
|
}
|
|
286
|
-
},
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
"
|
|
297
|
-
"
|
|
234
|
+
}),
|
|
235
|
+
onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, () => {
|
|
236
|
+
const menubarOpen = Boolean(context.value);
|
|
237
|
+
if (menubarOpen && !open) {
|
|
238
|
+
context.onMenuOpen(menuContext.value);
|
|
239
|
+
ref.current?.focus();
|
|
240
|
+
}
|
|
241
|
+
}),
|
|
242
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
243
|
+
if (disabled) return;
|
|
244
|
+
if (["Enter", " "].includes(event.key)) context.onMenuToggle(menuContext.value);
|
|
245
|
+
if (event.key === "ArrowDown") context.onMenuOpen(menuContext.value);
|
|
246
|
+
if (["Enter", " ", "ArrowDown"].includes(event.key)) {
|
|
247
|
+
menuContext.wasKeyboardTriggerOpenRef.current = true;
|
|
248
|
+
event.preventDefault();
|
|
249
|
+
}
|
|
250
|
+
}),
|
|
251
|
+
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => setIsFocused(true)),
|
|
252
|
+
onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, () => setIsFocused(false))
|
|
253
|
+
}
|
|
254
|
+
) })
|
|
255
|
+
}
|
|
256
|
+
) });
|
|
257
|
+
}
|
|
258
|
+
);
|
|
259
|
+
MenubarTrigger.displayName = TRIGGER_NAME;
|
|
260
|
+
var PORTAL_NAME = "MenubarPortal";
|
|
261
|
+
var MenubarPortal = (props) => {
|
|
262
|
+
const { __scopeMenubar, ...portalProps } = props;
|
|
263
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
264
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.Portal, { ...menuScope, ...portalProps });
|
|
265
|
+
};
|
|
266
|
+
MenubarPortal.displayName = PORTAL_NAME;
|
|
267
|
+
var CONTENT_NAME = "MenubarContent";
|
|
268
|
+
var MenubarContent = React.forwardRef(
|
|
269
|
+
(props, forwardedRef) => {
|
|
270
|
+
const { __scopeMenubar, align = "start", ...contentProps } = props;
|
|
271
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
272
|
+
const context = useMenubarContext(CONTENT_NAME, __scopeMenubar);
|
|
273
|
+
const menuContext = useMenubarMenuContext(CONTENT_NAME, __scopeMenubar);
|
|
274
|
+
const getItems = useCollection(__scopeMenubar);
|
|
275
|
+
const hasInteractedOutsideRef = React.useRef(false);
|
|
276
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
277
|
+
MenuPrimitive.Content,
|
|
278
|
+
{
|
|
279
|
+
id: menuContext.contentId,
|
|
280
|
+
"aria-labelledby": menuContext.triggerId,
|
|
281
|
+
"data-radix-menubar-content": "",
|
|
282
|
+
...menuScope,
|
|
283
|
+
...contentProps,
|
|
284
|
+
ref: forwardedRef,
|
|
285
|
+
align,
|
|
286
|
+
onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
|
|
287
|
+
const menubarOpen = Boolean(context.value);
|
|
288
|
+
if (!menubarOpen && !hasInteractedOutsideRef.current) {
|
|
289
|
+
menuContext.triggerRef.current?.focus();
|
|
290
|
+
}
|
|
291
|
+
hasInteractedOutsideRef.current = false;
|
|
292
|
+
event.preventDefault();
|
|
293
|
+
}),
|
|
294
|
+
onFocusOutside: (0, import_primitive.composeEventHandlers)(props.onFocusOutside, (event) => {
|
|
295
|
+
const target = event.target;
|
|
296
|
+
const isMenubarTrigger = getItems().some((item) => item.ref.current?.contains(target));
|
|
297
|
+
if (isMenubarTrigger) event.preventDefault();
|
|
298
|
+
}),
|
|
299
|
+
onInteractOutside: (0, import_primitive.composeEventHandlers)(props.onInteractOutside, () => {
|
|
300
|
+
hasInteractedOutsideRef.current = true;
|
|
301
|
+
}),
|
|
302
|
+
onEntryFocus: (event) => {
|
|
303
|
+
if (!menuContext.wasKeyboardTriggerOpenRef.current) event.preventDefault();
|
|
304
|
+
},
|
|
305
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(
|
|
306
|
+
props.onKeyDown,
|
|
307
|
+
(event) => {
|
|
308
|
+
if (["ArrowRight", "ArrowLeft"].includes(event.key)) {
|
|
309
|
+
const target = event.target;
|
|
310
|
+
const targetIsSubTrigger = target.hasAttribute("data-radix-menubar-subtrigger");
|
|
311
|
+
const isKeyDownInsideSubMenu = target.closest("[data-radix-menubar-content]") !== event.currentTarget;
|
|
312
|
+
const prevMenuKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
|
|
313
|
+
const isPrevKey = prevMenuKey === event.key;
|
|
314
|
+
const isNextKey = !isPrevKey;
|
|
315
|
+
if (isNextKey && targetIsSubTrigger) return;
|
|
316
|
+
if (isKeyDownInsideSubMenu && isPrevKey) return;
|
|
317
|
+
const items = getItems().filter((item) => !item.disabled);
|
|
318
|
+
let candidateValues = items.map((item) => item.value);
|
|
319
|
+
if (isPrevKey) candidateValues.reverse();
|
|
320
|
+
const currentIndex = candidateValues.indexOf(menuContext.value);
|
|
321
|
+
candidateValues = context.loop ? wrapArray(candidateValues, currentIndex + 1) : candidateValues.slice(currentIndex + 1);
|
|
322
|
+
const [nextValue] = candidateValues;
|
|
323
|
+
if (nextValue) context.onMenuOpen(nextValue);
|
|
298
324
|
}
|
|
325
|
+
},
|
|
326
|
+
{ checkForDefaultPrevented: false }
|
|
327
|
+
),
|
|
328
|
+
style: {
|
|
329
|
+
...props.style,
|
|
330
|
+
// re-namespace exposed content custom properties
|
|
331
|
+
...{
|
|
332
|
+
"--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
333
|
+
"--radix-menubar-content-available-width": "var(--radix-popper-available-width)",
|
|
334
|
+
"--radix-menubar-content-available-height": "var(--radix-popper-available-height)",
|
|
335
|
+
"--radix-menubar-trigger-width": "var(--radix-popper-anchor-width)",
|
|
336
|
+
"--radix-menubar-trigger-height": "var(--radix-popper-anchor-height)"
|
|
299
337
|
}
|
|
300
338
|
}
|
|
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
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.Item, { ...menuScope, ...itemProps, ref: forwardedRef });
|
|
329
|
-
}
|
|
330
|
-
);
|
|
331
|
-
MenubarItem.displayName = ITEM_NAME;
|
|
332
|
-
var CHECKBOX_ITEM_NAME = "MenubarCheckboxItem";
|
|
333
|
-
var MenubarCheckboxItem = React.forwardRef(
|
|
334
|
-
(props, forwardedRef) => {
|
|
335
|
-
const { __scopeMenubar, ...checkboxItemProps } = props;
|
|
336
|
-
const menuScope = useMenuScope(__scopeMenubar);
|
|
337
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
|
|
338
|
-
}
|
|
339
|
-
);
|
|
340
|
-
MenubarCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
|
|
341
|
-
var RADIO_GROUP_NAME = "MenubarRadioGroup";
|
|
342
|
-
var MenubarRadioGroup = React.forwardRef(
|
|
343
|
-
(props, forwardedRef) => {
|
|
344
|
-
const { __scopeMenubar, ...radioGroupProps } = props;
|
|
345
|
-
const menuScope = useMenuScope(__scopeMenubar);
|
|
346
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
|
|
347
|
-
}
|
|
348
|
-
);
|
|
349
|
-
MenubarRadioGroup.displayName = RADIO_GROUP_NAME;
|
|
350
|
-
var RADIO_ITEM_NAME = "MenubarRadioItem";
|
|
351
|
-
var MenubarRadioItem = React.forwardRef(
|
|
352
|
-
(props, forwardedRef) => {
|
|
353
|
-
const { __scopeMenubar, ...radioItemProps } = props;
|
|
354
|
-
const menuScope = useMenuScope(__scopeMenubar);
|
|
355
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
|
|
356
|
-
}
|
|
357
|
-
);
|
|
358
|
-
MenubarRadioItem.displayName = RADIO_ITEM_NAME;
|
|
359
|
-
var INDICATOR_NAME = "MenubarItemIndicator";
|
|
360
|
-
var MenubarItemIndicator = React.forwardRef((props, forwardedRef) => {
|
|
361
|
-
const { __scopeMenubar, ...itemIndicatorProps } = props;
|
|
339
|
+
}
|
|
340
|
+
);
|
|
341
|
+
}
|
|
342
|
+
);
|
|
343
|
+
MenubarContent.displayName = CONTENT_NAME;
|
|
344
|
+
var GROUP_NAME = "MenubarGroup";
|
|
345
|
+
var MenubarGroup = React.forwardRef(
|
|
346
|
+
(props, forwardedRef) => {
|
|
347
|
+
const { __scopeMenubar, ...groupProps } = props;
|
|
348
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
349
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.Group, { ...menuScope, ...groupProps, ref: forwardedRef });
|
|
350
|
+
}
|
|
351
|
+
);
|
|
352
|
+
MenubarGroup.displayName = GROUP_NAME;
|
|
353
|
+
var LABEL_NAME = "MenubarLabel";
|
|
354
|
+
var MenubarLabel = React.forwardRef(
|
|
355
|
+
(props, forwardedRef) => {
|
|
356
|
+
const { __scopeMenubar, ...labelProps } = props;
|
|
357
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
358
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.Label, { ...menuScope, ...labelProps, ref: forwardedRef });
|
|
359
|
+
}
|
|
360
|
+
);
|
|
361
|
+
MenubarLabel.displayName = LABEL_NAME;
|
|
362
|
+
var ITEM_NAME = "MenubarItem";
|
|
363
|
+
var MenubarItem = React.forwardRef(
|
|
364
|
+
(props, forwardedRef) => {
|
|
365
|
+
const { __scopeMenubar, ...itemProps } = props;
|
|
362
366
|
const menuScope = useMenuScope(__scopeMenubar);
|
|
363
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.
|
|
367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.Item, { ...menuScope, ...itemProps, ref: forwardedRef });
|
|
368
|
+
}
|
|
369
|
+
);
|
|
370
|
+
MenubarItem.displayName = ITEM_NAME;
|
|
371
|
+
var CHECKBOX_ITEM_NAME = "MenubarCheckboxItem";
|
|
372
|
+
var MenubarCheckboxItem = React.forwardRef(
|
|
373
|
+
(props, forwardedRef) => {
|
|
374
|
+
const { __scopeMenubar, ...checkboxItemProps } = props;
|
|
375
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
376
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
|
|
377
|
+
}
|
|
378
|
+
);
|
|
379
|
+
MenubarCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
|
|
380
|
+
var RADIO_GROUP_NAME = "MenubarRadioGroup";
|
|
381
|
+
var MenubarRadioGroup = React.forwardRef(
|
|
382
|
+
(props, forwardedRef) => {
|
|
383
|
+
const { __scopeMenubar, ...radioGroupProps } = props;
|
|
384
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
|
|
386
|
+
}
|
|
387
|
+
);
|
|
388
|
+
MenubarRadioGroup.displayName = RADIO_GROUP_NAME;
|
|
389
|
+
var RADIO_ITEM_NAME = "MenubarRadioItem";
|
|
390
|
+
var MenubarRadioItem = React.forwardRef(
|
|
391
|
+
(props, forwardedRef) => {
|
|
392
|
+
const { __scopeMenubar, ...radioItemProps } = props;
|
|
393
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
394
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
|
|
395
|
+
}
|
|
396
|
+
);
|
|
397
|
+
MenubarRadioItem.displayName = RADIO_ITEM_NAME;
|
|
398
|
+
var INDICATOR_NAME = "MenubarItemIndicator";
|
|
399
|
+
var MenubarItemIndicator = React.forwardRef((props, forwardedRef) => {
|
|
400
|
+
const { __scopeMenubar, ...itemIndicatorProps } = props;
|
|
401
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
402
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
|
|
403
|
+
});
|
|
404
|
+
MenubarItemIndicator.displayName = INDICATOR_NAME;
|
|
405
|
+
var SEPARATOR_NAME = "MenubarSeparator";
|
|
406
|
+
var MenubarSeparator = React.forwardRef(
|
|
407
|
+
(props, forwardedRef) => {
|
|
408
|
+
const { __scopeMenubar, ...separatorProps } = props;
|
|
409
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
410
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
|
|
411
|
+
}
|
|
412
|
+
);
|
|
413
|
+
MenubarSeparator.displayName = SEPARATOR_NAME;
|
|
414
|
+
var ARROW_NAME = "MenubarArrow";
|
|
415
|
+
var MenubarArrow = React.forwardRef(
|
|
416
|
+
(props, forwardedRef) => {
|
|
417
|
+
const { __scopeMenubar, ...arrowProps } = props;
|
|
418
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
419
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.Arrow, { ...menuScope, ...arrowProps, ref: forwardedRef });
|
|
420
|
+
}
|
|
421
|
+
);
|
|
422
|
+
MenubarArrow.displayName = ARROW_NAME;
|
|
423
|
+
var SUB_NAME = "MenubarSub";
|
|
424
|
+
var MenubarSub = (props) => {
|
|
425
|
+
const { __scopeMenubar, children, open: openProp, onOpenChange, defaultOpen } = props;
|
|
426
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
427
|
+
const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
|
|
428
|
+
prop: openProp,
|
|
429
|
+
defaultProp: defaultOpen,
|
|
430
|
+
onChange: onOpenChange
|
|
364
431
|
});
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
}
|
|
373
|
-
);
|
|
374
|
-
MenubarSeparator.displayName = SEPARATOR_NAME;
|
|
375
|
-
var ARROW_NAME = "MenubarArrow";
|
|
376
|
-
var MenubarArrow = React.forwardRef(
|
|
377
|
-
(props, forwardedRef) => {
|
|
378
|
-
const { __scopeMenubar, ...arrowProps } = props;
|
|
379
|
-
const menuScope = useMenuScope(__scopeMenubar);
|
|
380
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.Arrow, { ...menuScope, ...arrowProps, ref: forwardedRef });
|
|
381
|
-
}
|
|
382
|
-
);
|
|
383
|
-
MenubarArrow.displayName = ARROW_NAME;
|
|
384
|
-
var SUB_NAME = "MenubarSub";
|
|
385
|
-
var MenubarSub = (props) => {
|
|
386
|
-
const { __scopeMenubar, children, open: openProp, onOpenChange, defaultOpen } = props;
|
|
432
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPrimitive.Sub, { ...menuScope, open, onOpenChange: setOpen, children });
|
|
433
|
+
};
|
|
434
|
+
MenubarSub.displayName = SUB_NAME;
|
|
435
|
+
var SUB_TRIGGER_NAME = "MenubarSubTrigger";
|
|
436
|
+
var MenubarSubTrigger = React.forwardRef(
|
|
437
|
+
(props, forwardedRef) => {
|
|
438
|
+
const { __scopeMenubar, ...subTriggerProps } = props;
|
|
387
439
|
const menuScope = useMenuScope(__scopeMenubar);
|
|
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
|
-
|
|
421
|
-
...menuScope,
|
|
422
|
-
"data-radix-menubar-content": "",
|
|
423
|
-
...subContentProps,
|
|
424
|
-
ref: forwardedRef,
|
|
425
|
-
style: {
|
|
426
|
-
...props.style,
|
|
427
|
-
// re-namespace exposed content custom properties
|
|
428
|
-
...{
|
|
429
|
-
"--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
430
|
-
"--radix-menubar-content-available-width": "var(--radix-popper-available-width)",
|
|
431
|
-
"--radix-menubar-content-available-height": "var(--radix-popper-available-height)",
|
|
432
|
-
"--radix-menubar-trigger-width": "var(--radix-popper-anchor-width)",
|
|
433
|
-
"--radix-menubar-trigger-height": "var(--radix-popper-anchor-height)"
|
|
434
|
-
}
|
|
440
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
441
|
+
MenuPrimitive.SubTrigger,
|
|
442
|
+
{
|
|
443
|
+
"data-radix-menubar-subtrigger": "",
|
|
444
|
+
...menuScope,
|
|
445
|
+
...subTriggerProps,
|
|
446
|
+
ref: forwardedRef
|
|
447
|
+
}
|
|
448
|
+
);
|
|
449
|
+
}
|
|
450
|
+
);
|
|
451
|
+
MenubarSubTrigger.displayName = SUB_TRIGGER_NAME;
|
|
452
|
+
var SUB_CONTENT_NAME = "MenubarSubContent";
|
|
453
|
+
var MenubarSubContent = React.forwardRef(
|
|
454
|
+
(props, forwardedRef) => {
|
|
455
|
+
const { __scopeMenubar, ...subContentProps } = props;
|
|
456
|
+
const menuScope = useMenuScope(__scopeMenubar);
|
|
457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
458
|
+
MenuPrimitive.SubContent,
|
|
459
|
+
{
|
|
460
|
+
...menuScope,
|
|
461
|
+
"data-radix-menubar-content": "",
|
|
462
|
+
...subContentProps,
|
|
463
|
+
ref: forwardedRef,
|
|
464
|
+
style: {
|
|
465
|
+
...props.style,
|
|
466
|
+
// re-namespace exposed content custom properties
|
|
467
|
+
...{
|
|
468
|
+
"--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
469
|
+
"--radix-menubar-content-available-width": "var(--radix-popper-available-width)",
|
|
470
|
+
"--radix-menubar-content-available-height": "var(--radix-popper-available-height)",
|
|
471
|
+
"--radix-menubar-trigger-width": "var(--radix-popper-anchor-width)",
|
|
472
|
+
"--radix-menubar-trigger-height": "var(--radix-popper-anchor-height)"
|
|
435
473
|
}
|
|
436
474
|
}
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
);
|
|
440
|
-
MenubarSubContent.displayName = SUB_CONTENT_NAME;
|
|
441
|
-
function wrapArray(array, startIndex) {
|
|
442
|
-
return array.map((_, index) => array[(startIndex + index) % array.length]);
|
|
475
|
+
}
|
|
476
|
+
);
|
|
443
477
|
}
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
478
|
+
);
|
|
479
|
+
MenubarSubContent.displayName = SUB_CONTENT_NAME;
|
|
480
|
+
function wrapArray(array, startIndex) {
|
|
481
|
+
return array.map((_, index) => array[(startIndex + index) % array.length]);
|
|
482
|
+
}
|
|
483
|
+
var Root3 = Menubar;
|
|
484
|
+
var Menu = MenubarMenu;
|
|
485
|
+
var Trigger = MenubarTrigger;
|
|
486
|
+
var Portal2 = MenubarPortal;
|
|
487
|
+
var Content2 = MenubarContent;
|
|
488
|
+
var Group2 = MenubarGroup;
|
|
489
|
+
var Label2 = MenubarLabel;
|
|
490
|
+
var Item3 = MenubarItem;
|
|
491
|
+
var CheckboxItem2 = MenubarCheckboxItem;
|
|
492
|
+
var RadioGroup2 = MenubarRadioGroup;
|
|
493
|
+
var RadioItem2 = MenubarRadioItem;
|
|
494
|
+
var ItemIndicator2 = MenubarItemIndicator;
|
|
495
|
+
var Separator2 = MenubarSeparator;
|
|
496
|
+
var Arrow2 = MenubarArrow;
|
|
497
|
+
var Sub2 = MenubarSub;
|
|
498
|
+
var SubTrigger2 = MenubarSubTrigger;
|
|
499
|
+
var SubContent2 = MenubarSubContent;
|
|
462
500
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/Menubar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useId } from '@radix-ui/react-id';\nimport * as MenuPrimitive from '@radix-ui/react-menu';\nimport { createMenuScope } from '@radix-ui/react-menu';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n\nimport type { Scope } from '@radix-ui/react-context';\nimport type * as Radix from '@radix-ui/react-primitive';\n\ntype Direction = 'ltr' | 'rtl';\n\n/* -------------------------------------------------------------------------------------------------\n * Menubar\n * -----------------------------------------------------------------------------------------------*/\n\nconst MENUBAR_NAME = 'Menubar';\n\ntype ItemData = { value: string; disabled: boolean };\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n MenubarTriggerElement,\n ItemData\n>(MENUBAR_NAME);\n\ntype ScopedProps<P> = P & { __scopeMenubar?: Scope };\nconst [createMenubarContext, createMenubarScope] = createContextScope(MENUBAR_NAME, [\n createCollectionScope,\n createRovingFocusGroupScope,\n]);\n\nconst useMenuScope = createMenuScope();\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype MenubarContextValue = {\n value: string;\n dir: Direction;\n loop: boolean;\n onMenuOpen(value: string): void;\n onMenuClose(): void;\n onMenuToggle(value: string): void;\n};\n\nconst [MenubarContextProvider, useMenubarContext] =\n createMenubarContext<MenubarContextValue>(MENUBAR_NAME);\n\ntype MenubarElement = React.ElementRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface MenubarProps extends PrimitiveDivProps {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n loop?: RovingFocusGroupProps['loop'];\n dir?: RovingFocusGroupProps['dir'];\n}\n\nconst Menubar = React.forwardRef<MenubarElement, MenubarProps>(\n (props: ScopedProps<MenubarProps>, forwardedRef) => {\n const {\n __scopeMenubar,\n value: valueProp,\n onValueChange,\n defaultValue,\n loop = true,\n dir,\n ...menubarProps\n } = props;\n const direction = useDirection(dir);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenubar);\n const [value = '', setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n // We need to manage tab stop id manually as `RovingFocusGroup` updates the stop\n // based on focus, and in some situations our triggers won't ever be given focus\n // (e.g. click to open and then outside to close)\n const [currentTabStopId, setCurrentTabStopId] = React.useState<string | null>(null);\n\n return (\n <MenubarContextProvider\n scope={__scopeMenubar}\n value={value}\n onMenuOpen={React.useCallback(\n (value) => {\n setValue(value);\n setCurrentTabStopId(value);\n },\n [setValue]\n )}\n onMenuClose={React.useCallback(() => setValue(''), [setValue])}\n onMenuToggle={React.useCallback(\n (value) => {\n setValue((prevValue) => (Boolean(prevValue) ? '' : value));\n // `openMenuOpen` and `onMenuToggle` are called exclusively so we\n // need to update the id in either case.\n setCurrentTabStopId(value);\n },\n [setValue]\n )}\n dir={direction}\n loop={loop}\n >\n <Collection.Provider scope={__scopeMenubar}>\n <Collection.Slot scope={__scopeMenubar}>\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation=\"horizontal\"\n loop={loop}\n dir={direction}\n currentTabStopId={currentTabStopId}\n onCurrentTabStopIdChange={setCurrentTabStopId}\n >\n <Primitive.div role=\"menubar\" {...menubarProps} ref={forwardedRef} />\n </RovingFocusGroup.Root>\n </Collection.Slot>\n </Collection.Provider>\n </MenubarContextProvider>\n );\n }\n);\n\nMenubar.displayName = MENUBAR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarMenu\n * -----------------------------------------------------------------------------------------------*/\n\nconst MENU_NAME = 'MenubarMenu';\n\ntype MenubarMenuContextValue = {\n value: string;\n triggerId: string;\n triggerRef: React.RefObject<MenubarTriggerElement>;\n contentId: string;\n wasKeyboardTriggerOpenRef: React.MutableRefObject<boolean>;\n};\n\nconst [MenubarMenuProvider, useMenubarMenuContext] =\n createMenubarContext<MenubarMenuContextValue>(MENU_NAME);\n\ninterface MenubarMenuProps {\n value?: string;\n children?: React.ReactNode;\n}\n\nconst MenubarMenu = (props: ScopedProps<MenubarMenuProps>) => {\n const { __scopeMenubar, value: valueProp, ...menuProps } = props;\n const autoValue = useId();\n // We need to provide an initial deterministic value as `useId` will return\n // empty string on the first render and we don't want to match our internal \"closed\" value.\n const value = valueProp || autoValue || 'LEGACY_REACT_AUTO_VALUE';\n const context = useMenubarContext(MENU_NAME, __scopeMenubar);\n const menuScope = useMenuScope(__scopeMenubar);\n const triggerRef = React.useRef<MenubarTriggerElement>(null);\n const wasKeyboardTriggerOpenRef = React.useRef(false);\n const open = context.value === value;\n\n React.useEffect(() => {\n if (!open) wasKeyboardTriggerOpenRef.current = false;\n }, [open]);\n\n return (\n <MenubarMenuProvider\n scope={__scopeMenubar}\n value={value}\n triggerId={useId()}\n triggerRef={triggerRef}\n contentId={useId()}\n wasKeyboardTriggerOpenRef={wasKeyboardTriggerOpenRef}\n >\n <MenuPrimitive.Root\n {...menuScope}\n open={open}\n onOpenChange={(open) => {\n // Menu only calls `onOpenChange` when dismissing so we\n // want to close our MenuBar based on the same events.\n if (!open) context.onMenuClose();\n }}\n modal={false}\n dir={context.dir}\n {...menuProps}\n />\n </MenubarMenuProvider>\n );\n};\n\nMenubarMenu.displayName = MENU_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'MenubarTrigger';\n\ntype MenubarTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface MenubarTriggerProps extends PrimitiveButtonProps {}\n\nconst MenubarTrigger = React.forwardRef<MenubarTriggerElement, MenubarTriggerProps>(\n (props: ScopedProps<MenubarTriggerProps>, forwardedRef) => {\n const { __scopeMenubar, disabled = false, ...triggerProps } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenubar);\n const menuScope = useMenuScope(__scopeMenubar);\n const context = useMenubarContext(TRIGGER_NAME, __scopeMenubar);\n const menuContext = useMenubarMenuContext(TRIGGER_NAME, __scopeMenubar);\n const ref = React.useRef<MenubarTriggerElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref, menuContext.triggerRef);\n const [isFocused, setIsFocused] = React.useState(false);\n const open = context.value === menuContext.value;\n\n return (\n <Collection.ItemSlot scope={__scopeMenubar} value={menuContext.value} disabled={disabled}>\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n tabStopId={menuContext.value}\n >\n <MenuPrimitive.Anchor asChild {...menuScope}>\n <Primitive.button\n type=\"button\"\n role=\"menuitem\"\n id={menuContext.triggerId}\n aria-haspopup=\"menu\"\n aria-expanded={open}\n aria-controls={open ? menuContext.contentId : undefined}\n data-highlighted={isFocused ? '' : undefined}\n data-state={open ? 'open' : 'closed'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n {...triggerProps}\n ref={composedRefs}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n if (!disabled && event.button === 0 && event.ctrlKey === false) {\n context.onMenuOpen(menuContext.value);\n // prevent trigger focusing when opening\n // this allows the content to be given focus without competition\n if (!open) event.preventDefault();\n }\n })}\n onPointerEnter={composeEventHandlers(props.onPointerEnter, () => {\n const menubarOpen = Boolean(context.value);\n if (menubarOpen && !open) {\n context.onMenuOpen(menuContext.value);\n ref.current?.focus();\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (disabled) return;\n if (['Enter', ' '].includes(event.key)) context.onMenuToggle(menuContext.value);\n if (event.key === 'ArrowDown') context.onMenuOpen(menuContext.value);\n // prevent keydown from scrolling window / first focused item to execute\n // that keydown (inadvertently closing the menu)\n if (['Enter', ' ', 'ArrowDown'].includes(event.key)) {\n menuContext.wasKeyboardTriggerOpenRef.current = true;\n event.preventDefault();\n }\n })}\n onFocus={composeEventHandlers(props.onFocus, () => setIsFocused(true))}\n onBlur={composeEventHandlers(props.onBlur, () => setIsFocused(false))}\n />\n </MenuPrimitive.Anchor>\n </RovingFocusGroup.Item>\n </Collection.ItemSlot>\n );\n }\n);\n\nMenubarTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'MenubarPortal';\n\ntype MenuPortalProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;\ninterface MenubarPortalProps extends MenuPortalProps {}\n\nconst MenubarPortal: React.FC<MenubarPortalProps> = (props: ScopedProps<MenubarPortalProps>) => {\n const { __scopeMenubar, ...portalProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.Portal {...menuScope} {...portalProps} />;\n};\n\nMenubarPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'MenubarContent';\n\ntype MenubarContentElement = React.ElementRef<typeof MenuPrimitive.Content>;\ntype MenuContentProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.Content>;\ninterface MenubarContentProps extends Omit<MenuContentProps, 'onEntryFocus'> {}\n\nconst MenubarContent = React.forwardRef<MenubarContentElement, MenubarContentProps>(\n (props: ScopedProps<MenubarContentProps>, forwardedRef) => {\n const { __scopeMenubar, align = 'start', ...contentProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n const context = useMenubarContext(CONTENT_NAME, __scopeMenubar);\n const menuContext = useMenubarMenuContext(CONTENT_NAME, __scopeMenubar);\n const getItems = useCollection(__scopeMenubar);\n const hasInteractedOutsideRef = React.useRef(false);\n\n return (\n <MenuPrimitive.Content\n id={menuContext.contentId}\n aria-labelledby={menuContext.triggerId}\n data-radix-menubar-content=\"\"\n {...menuScope}\n {...contentProps}\n ref={forwardedRef}\n align={align}\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n const menubarOpen = Boolean(context.value);\n if (!menubarOpen && !hasInteractedOutsideRef.current) {\n menuContext.triggerRef.current?.focus();\n }\n\n hasInteractedOutsideRef.current = false;\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault();\n })}\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => {\n const target = event.target as HTMLElement;\n const isMenubarTrigger = getItems().some((item) => item.ref.current?.contains(target));\n if (isMenubarTrigger) event.preventDefault();\n })}\n onInteractOutside={composeEventHandlers(props.onInteractOutside, () => {\n hasInteractedOutsideRef.current = true;\n })}\n onEntryFocus={(event) => {\n if (!menuContext.wasKeyboardTriggerOpenRef.current) event.preventDefault();\n }}\n onKeyDown={composeEventHandlers(\n props.onKeyDown,\n (event) => {\n if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {\n const target = event.target as HTMLElement;\n const targetIsSubTrigger = target.hasAttribute('data-radix-menubar-subtrigger');\n const isKeyDownInsideSubMenu =\n target.closest('[data-radix-menubar-content]') !== event.currentTarget;\n\n const prevMenuKey = context.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n const isPrevKey = prevMenuKey === event.key;\n const isNextKey = !isPrevKey;\n\n // Prevent navigation when we're opening a submenu\n if (isNextKey && targetIsSubTrigger) return;\n // or we're inside a submenu and are moving backwards to close it\n if (isKeyDownInsideSubMenu && isPrevKey) return;\n\n const items = getItems().filter((item) => !item.disabled);\n let candidateValues = items.map((item) => item.value);\n if (isPrevKey) candidateValues.reverse();\n\n const currentIndex = candidateValues.indexOf(menuContext.value);\n\n candidateValues = context.loop\n ? wrapArray(candidateValues, currentIndex + 1)\n : candidateValues.slice(currentIndex + 1);\n\n const [nextValue] = candidateValues;\n if (nextValue) context.onMenuOpen(nextValue);\n }\n },\n { checkForDefaultPrevented: false }\n )}\n style={{\n ...props.style,\n // re-namespace exposed content custom properties\n ...{\n '--radix-menubar-content-transform-origin': 'var(--radix-popper-transform-origin)',\n '--radix-menubar-content-available-width': 'var(--radix-popper-available-width)',\n '--radix-menubar-content-available-height': 'var(--radix-popper-available-height)',\n '--radix-menubar-trigger-width': 'var(--radix-popper-anchor-width)',\n '--radix-menubar-trigger-height': 'var(--radix-popper-anchor-height)',\n },\n }}\n />\n );\n }\n);\n\nMenubarContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'MenubarGroup';\n\ntype MenubarGroupElement = React.ElementRef<typeof MenuPrimitive.Group>;\ntype MenuGroupProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;\ninterface MenubarGroupProps extends MenuGroupProps {}\n\nconst MenubarGroup = React.forwardRef<MenubarGroupElement, MenubarGroupProps>(\n (props: ScopedProps<MenubarGroupProps>, forwardedRef) => {\n const { __scopeMenubar, ...groupProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.Group {...menuScope} {...groupProps} ref={forwardedRef} />;\n }\n);\n\nMenubarGroup.displayName = GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'MenubarLabel';\n\ntype MenubarLabelElement = React.ElementRef<typeof MenuPrimitive.Label>;\ntype MenuLabelProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.Label>;\ninterface MenubarLabelProps extends MenuLabelProps {}\n\nconst MenubarLabel = React.forwardRef<MenubarLabelElement, MenubarLabelProps>(\n (props: ScopedProps<MenubarLabelProps>, forwardedRef) => {\n const { __scopeMenubar, ...labelProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.Label {...menuScope} {...labelProps} ref={forwardedRef} />;\n }\n);\n\nMenubarLabel.displayName = LABEL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'MenubarItem';\n\ntype MenubarItemElement = React.ElementRef<typeof MenuPrimitive.Item>;\ntype MenuItemProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.Item>;\ninterface MenubarItemProps extends MenuItemProps {}\n\nconst MenubarItem = React.forwardRef<MenubarItemElement, MenubarItemProps>(\n (props: ScopedProps<MenubarItemProps>, forwardedRef) => {\n const { __scopeMenubar, ...itemProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.Item {...menuScope} {...itemProps} ref={forwardedRef} />;\n }\n);\n\nMenubarItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarCheckboxItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_ITEM_NAME = 'MenubarCheckboxItem';\n\ntype MenubarCheckboxItemElement = React.ElementRef<typeof MenuPrimitive.CheckboxItem>;\ntype MenuCheckboxItemProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>;\ninterface MenubarCheckboxItemProps extends MenuCheckboxItemProps {}\n\nconst MenubarCheckboxItem = React.forwardRef<MenubarCheckboxItemElement, MenubarCheckboxItemProps>(\n (props: ScopedProps<MenubarCheckboxItemProps>, forwardedRef) => {\n const { __scopeMenubar, ...checkboxItemProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.CheckboxItem {...menuScope} {...checkboxItemProps} ref={forwardedRef} />;\n }\n);\n\nMenubarCheckboxItem.displayName = CHECKBOX_ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarRadioGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_GROUP_NAME = 'MenubarRadioGroup';\n\ntype MenubarRadioGroupElement = React.ElementRef<typeof MenuPrimitive.RadioGroup>;\ntype MenuRadioGroupProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;\ninterface MenubarRadioGroupProps extends MenuRadioGroupProps {}\n\nconst MenubarRadioGroup = React.forwardRef<MenubarRadioGroupElement, MenubarRadioGroupProps>(\n (props: ScopedProps<MenubarRadioGroupProps>, forwardedRef) => {\n const { __scopeMenubar, ...radioGroupProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.RadioGroup {...menuScope} {...radioGroupProps} ref={forwardedRef} />;\n }\n);\n\nMenubarRadioGroup.displayName = RADIO_GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarRadioItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_ITEM_NAME = 'MenubarRadioItem';\n\ntype MenubarRadioItemElement = React.ElementRef<typeof MenuPrimitive.RadioItem>;\ntype MenuRadioItemProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;\ninterface MenubarRadioItemProps extends MenuRadioItemProps {}\n\nconst MenubarRadioItem = React.forwardRef<MenubarRadioItemElement, MenubarRadioItemProps>(\n (props: ScopedProps<MenubarRadioItemProps>, forwardedRef) => {\n const { __scopeMenubar, ...radioItemProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.RadioItem {...menuScope} {...radioItemProps} ref={forwardedRef} />;\n }\n);\n\nMenubarRadioItem.displayName = RADIO_ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'MenubarItemIndicator';\n\ntype MenubarItemIndicatorElement = React.ElementRef<typeof MenuPrimitive.ItemIndicator>;\ntype MenuItemIndicatorProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.ItemIndicator>;\ninterface MenubarItemIndicatorProps extends MenuItemIndicatorProps {}\n\nconst MenubarItemIndicator = React.forwardRef<\n MenubarItemIndicatorElement,\n MenubarItemIndicatorProps\n>((props: ScopedProps<MenubarItemIndicatorProps>, forwardedRef) => {\n const { __scopeMenubar, ...itemIndicatorProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.ItemIndicator {...menuScope} {...itemIndicatorProps} ref={forwardedRef} />;\n});\n\nMenubarItemIndicator.displayName = INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'MenubarSeparator';\n\ntype MenubarSeparatorElement = React.ElementRef<typeof MenuPrimitive.Separator>;\ntype MenuSeparatorProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>;\ninterface MenubarSeparatorProps extends MenuSeparatorProps {}\n\nconst MenubarSeparator = React.forwardRef<MenubarSeparatorElement, MenubarSeparatorProps>(\n (props: ScopedProps<MenubarSeparatorProps>, forwardedRef) => {\n const { __scopeMenubar, ...separatorProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.Separator {...menuScope} {...separatorProps} ref={forwardedRef} />;\n }\n);\n\nMenubarSeparator.displayName = SEPARATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'MenubarArrow';\n\ntype MenubarArrowElement = React.ElementRef<typeof MenuPrimitive.Arrow>;\ntype MenuArrowProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>;\ninterface MenubarArrowProps extends MenuArrowProps {}\n\nconst MenubarArrow = React.forwardRef<MenubarArrowElement, MenubarArrowProps>(\n (props: ScopedProps<MenubarArrowProps>, forwardedRef) => {\n const { __scopeMenubar, ...arrowProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.Arrow {...menuScope} {...arrowProps} ref={forwardedRef} />;\n }\n);\n\nMenubarArrow.displayName = ARROW_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarSub\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_NAME = 'MenubarSub';\n\ninterface MenubarSubProps {\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n}\n\nconst MenubarSub: React.FC<MenubarSubProps> = (props: ScopedProps<MenubarSubProps>) => {\n const { __scopeMenubar, children, open: openProp, onOpenChange, defaultOpen } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <MenuPrimitive.Sub {...menuScope} open={open} onOpenChange={setOpen}>\n {children}\n </MenuPrimitive.Sub>\n );\n};\n\nMenubarSub.displayName = SUB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarSubTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_TRIGGER_NAME = 'MenubarSubTrigger';\n\ntype MenubarSubTriggerElement = React.ElementRef<typeof MenuPrimitive.SubTrigger>;\ntype MenuSubTriggerProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger>;\ninterface MenubarSubTriggerProps extends MenuSubTriggerProps {}\n\nconst MenubarSubTrigger = React.forwardRef<MenubarSubTriggerElement, MenubarSubTriggerProps>(\n (props: ScopedProps<MenubarSubTriggerProps>, forwardedRef) => {\n const { __scopeMenubar, ...subTriggerProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return (\n <MenuPrimitive.SubTrigger\n data-radix-menubar-subtrigger=\"\"\n {...menuScope}\n {...subTriggerProps}\n ref={forwardedRef}\n />\n );\n }\n);\n\nMenubarSubTrigger.displayName = SUB_TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarSubContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_CONTENT_NAME = 'MenubarSubContent';\n\ntype MenubarSubContentElement = React.ElementRef<typeof MenuPrimitive.Content>;\ntype MenuSubContentProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;\ninterface MenubarSubContentProps extends MenuSubContentProps {}\n\nconst MenubarSubContent = React.forwardRef<MenubarSubContentElement, MenubarSubContentProps>(\n (props: ScopedProps<MenubarSubContentProps>, forwardedRef) => {\n const { __scopeMenubar, ...subContentProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n\n return (\n <MenuPrimitive.SubContent\n {...menuScope}\n data-radix-menubar-content=\"\"\n {...subContentProps}\n ref={forwardedRef}\n style={{\n ...props.style,\n // re-namespace exposed content custom properties\n ...{\n '--radix-menubar-content-transform-origin': 'var(--radix-popper-transform-origin)',\n '--radix-menubar-content-available-width': 'var(--radix-popper-available-width)',\n '--radix-menubar-content-available-height': 'var(--radix-popper-available-height)',\n '--radix-menubar-trigger-width': 'var(--radix-popper-anchor-width)',\n '--radix-menubar-trigger-height': 'var(--radix-popper-anchor-height)',\n },\n }}\n />\n );\n }\n);\n\nMenubarSubContent.displayName = SUB_CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nfunction wrapArray<T>(array: T[], startIndex: number) {\n return array.map((_, index) => array[(startIndex + index) % array.length]);\n}\n\nconst Root = Menubar;\nconst Menu = MenubarMenu;\nconst Trigger = MenubarTrigger;\nconst Portal = MenubarPortal;\nconst Content = MenubarContent;\nconst Group = MenubarGroup;\nconst Label = MenubarLabel;\nconst Item = MenubarItem;\nconst CheckboxItem = MenubarCheckboxItem;\nconst RadioGroup = MenubarRadioGroup;\nconst RadioItem = MenubarRadioItem;\nconst ItemIndicator = MenubarItemIndicator;\nconst Separator = MenubarSeparator;\nconst Arrow = MenubarArrow;\nconst Sub = MenubarSub;\nconst SubTrigger = MenubarSubTrigger;\nconst SubContent = MenubarSubContent;\n\nexport {\n createMenubarScope,\n //\n Menubar,\n MenubarMenu,\n MenubarTrigger,\n MenubarPortal,\n MenubarContent,\n MenubarGroup,\n MenubarLabel,\n MenubarItem,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarItemIndicator,\n MenubarSeparator,\n MenubarArrow,\n MenubarSub,\n MenubarSubTrigger,\n MenubarSubContent,\n //\n Root,\n Menu,\n Trigger,\n Portal,\n Content,\n Group,\n Label,\n Item,\n CheckboxItem,\n RadioGroup,\n RadioItem,\n ItemIndicator,\n Separator,\n Arrow,\n Sub,\n SubTrigger,\n SubContent,\n};\nexport type {\n MenubarProps,\n MenubarMenuProps,\n MenubarTriggerProps,\n MenubarPortalProps,\n MenubarContentProps,\n MenubarGroupProps,\n MenubarLabelProps,\n MenubarItemProps,\n MenubarCheckboxItemProps,\n MenubarRadioGroupProps,\n MenubarRadioItemProps,\n MenubarItemIndicatorProps,\n MenubarSeparatorProps,\n MenubarArrowProps,\n MenubarSubProps,\n MenubarSubTriggerProps,\n MenubarSubContentProps,\n};\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["value", "open", "Root", "Portal", "Content", "Group", "Label", "Item", "CheckboxItem", "RadioGroup", "RadioItem", "ItemIndicator", "Separator", "Arrow", "Sub", "SubTrigger", "SubContent"]
|
|
3
|
+
"sources": ["../src/index.ts", "../src/Menubar.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client';\nexport {\n createMenubarScope,\n //\n Menubar,\n MenubarMenu,\n MenubarTrigger,\n MenubarPortal,\n MenubarContent,\n MenubarGroup,\n MenubarLabel,\n MenubarItem,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarItemIndicator,\n MenubarSeparator,\n MenubarArrow,\n MenubarSub,\n MenubarSubTrigger,\n MenubarSubContent,\n //\n Root,\n Menu,\n Trigger,\n Portal,\n Content,\n Group,\n Label,\n Item,\n CheckboxItem,\n RadioGroup,\n RadioItem,\n ItemIndicator,\n Separator,\n Arrow,\n Sub,\n SubTrigger,\n SubContent,\n} from './Menubar';\nexport type {\n MenubarProps,\n MenubarMenuProps,\n MenubarTriggerProps,\n MenubarPortalProps,\n MenubarContentProps,\n MenubarGroupProps,\n MenubarLabelProps,\n MenubarItemProps,\n MenubarCheckboxItemProps,\n MenubarRadioGroupProps,\n MenubarRadioItemProps,\n MenubarItemIndicatorProps,\n MenubarSeparatorProps,\n MenubarArrowProps,\n MenubarSubProps,\n MenubarSubTriggerProps,\n MenubarSubContentProps,\n} from './Menubar';\n", "import * as React from 'react';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useId } from '@radix-ui/react-id';\nimport * as MenuPrimitive from '@radix-ui/react-menu';\nimport { createMenuScope } from '@radix-ui/react-menu';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n\nimport type { Scope } from '@radix-ui/react-context';\nimport type * as Radix from '@radix-ui/react-primitive';\n\ntype Direction = 'ltr' | 'rtl';\n\n/* -------------------------------------------------------------------------------------------------\n * Menubar\n * -----------------------------------------------------------------------------------------------*/\n\nconst MENUBAR_NAME = 'Menubar';\n\ntype ItemData = { value: string; disabled: boolean };\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n MenubarTriggerElement,\n ItemData\n>(MENUBAR_NAME);\n\ntype ScopedProps<P> = P & { __scopeMenubar?: Scope };\nconst [createMenubarContext, createMenubarScope] = createContextScope(MENUBAR_NAME, [\n createCollectionScope,\n createRovingFocusGroupScope,\n]);\n\nconst useMenuScope = createMenuScope();\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype MenubarContextValue = {\n value: string;\n dir: Direction;\n loop: boolean;\n onMenuOpen(value: string): void;\n onMenuClose(): void;\n onMenuToggle(value: string): void;\n};\n\nconst [MenubarContextProvider, useMenubarContext] =\n createMenubarContext<MenubarContextValue>(MENUBAR_NAME);\n\ntype MenubarElement = React.ElementRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface MenubarProps extends PrimitiveDivProps {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n loop?: RovingFocusGroupProps['loop'];\n dir?: RovingFocusGroupProps['dir'];\n}\n\nconst Menubar = React.forwardRef<MenubarElement, MenubarProps>(\n (props: ScopedProps<MenubarProps>, forwardedRef) => {\n const {\n __scopeMenubar,\n value: valueProp,\n onValueChange,\n defaultValue,\n loop = true,\n dir,\n ...menubarProps\n } = props;\n const direction = useDirection(dir);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenubar);\n const [value = '', setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n // We need to manage tab stop id manually as `RovingFocusGroup` updates the stop\n // based on focus, and in some situations our triggers won't ever be given focus\n // (e.g. click to open and then outside to close)\n const [currentTabStopId, setCurrentTabStopId] = React.useState<string | null>(null);\n\n return (\n <MenubarContextProvider\n scope={__scopeMenubar}\n value={value}\n onMenuOpen={React.useCallback(\n (value) => {\n setValue(value);\n setCurrentTabStopId(value);\n },\n [setValue]\n )}\n onMenuClose={React.useCallback(() => setValue(''), [setValue])}\n onMenuToggle={React.useCallback(\n (value) => {\n setValue((prevValue) => (Boolean(prevValue) ? '' : value));\n // `openMenuOpen` and `onMenuToggle` are called exclusively so we\n // need to update the id in either case.\n setCurrentTabStopId(value);\n },\n [setValue]\n )}\n dir={direction}\n loop={loop}\n >\n <Collection.Provider scope={__scopeMenubar}>\n <Collection.Slot scope={__scopeMenubar}>\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation=\"horizontal\"\n loop={loop}\n dir={direction}\n currentTabStopId={currentTabStopId}\n onCurrentTabStopIdChange={setCurrentTabStopId}\n >\n <Primitive.div role=\"menubar\" {...menubarProps} ref={forwardedRef} />\n </RovingFocusGroup.Root>\n </Collection.Slot>\n </Collection.Provider>\n </MenubarContextProvider>\n );\n }\n);\n\nMenubar.displayName = MENUBAR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarMenu\n * -----------------------------------------------------------------------------------------------*/\n\nconst MENU_NAME = 'MenubarMenu';\n\ntype MenubarMenuContextValue = {\n value: string;\n triggerId: string;\n triggerRef: React.RefObject<MenubarTriggerElement>;\n contentId: string;\n wasKeyboardTriggerOpenRef: React.MutableRefObject<boolean>;\n};\n\nconst [MenubarMenuProvider, useMenubarMenuContext] =\n createMenubarContext<MenubarMenuContextValue>(MENU_NAME);\n\ninterface MenubarMenuProps {\n value?: string;\n children?: React.ReactNode;\n}\n\nconst MenubarMenu = (props: ScopedProps<MenubarMenuProps>) => {\n const { __scopeMenubar, value: valueProp, ...menuProps } = props;\n const autoValue = useId();\n // We need to provide an initial deterministic value as `useId` will return\n // empty string on the first render and we don't want to match our internal \"closed\" value.\n const value = valueProp || autoValue || 'LEGACY_REACT_AUTO_VALUE';\n const context = useMenubarContext(MENU_NAME, __scopeMenubar);\n const menuScope = useMenuScope(__scopeMenubar);\n const triggerRef = React.useRef<MenubarTriggerElement>(null);\n const wasKeyboardTriggerOpenRef = React.useRef(false);\n const open = context.value === value;\n\n React.useEffect(() => {\n if (!open) wasKeyboardTriggerOpenRef.current = false;\n }, [open]);\n\n return (\n <MenubarMenuProvider\n scope={__scopeMenubar}\n value={value}\n triggerId={useId()}\n triggerRef={triggerRef}\n contentId={useId()}\n wasKeyboardTriggerOpenRef={wasKeyboardTriggerOpenRef}\n >\n <MenuPrimitive.Root\n {...menuScope}\n open={open}\n onOpenChange={(open) => {\n // Menu only calls `onOpenChange` when dismissing so we\n // want to close our MenuBar based on the same events.\n if (!open) context.onMenuClose();\n }}\n modal={false}\n dir={context.dir}\n {...menuProps}\n />\n </MenubarMenuProvider>\n );\n};\n\nMenubarMenu.displayName = MENU_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'MenubarTrigger';\n\ntype MenubarTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface MenubarTriggerProps extends PrimitiveButtonProps {}\n\nconst MenubarTrigger = React.forwardRef<MenubarTriggerElement, MenubarTriggerProps>(\n (props: ScopedProps<MenubarTriggerProps>, forwardedRef) => {\n const { __scopeMenubar, disabled = false, ...triggerProps } = props;\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenubar);\n const menuScope = useMenuScope(__scopeMenubar);\n const context = useMenubarContext(TRIGGER_NAME, __scopeMenubar);\n const menuContext = useMenubarMenuContext(TRIGGER_NAME, __scopeMenubar);\n const ref = React.useRef<MenubarTriggerElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref, menuContext.triggerRef);\n const [isFocused, setIsFocused] = React.useState(false);\n const open = context.value === menuContext.value;\n\n return (\n <Collection.ItemSlot scope={__scopeMenubar} value={menuContext.value} disabled={disabled}>\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n tabStopId={menuContext.value}\n >\n <MenuPrimitive.Anchor asChild {...menuScope}>\n <Primitive.button\n type=\"button\"\n role=\"menuitem\"\n id={menuContext.triggerId}\n aria-haspopup=\"menu\"\n aria-expanded={open}\n aria-controls={open ? menuContext.contentId : undefined}\n data-highlighted={isFocused ? '' : undefined}\n data-state={open ? 'open' : 'closed'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n {...triggerProps}\n ref={composedRefs}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n if (!disabled && event.button === 0 && event.ctrlKey === false) {\n context.onMenuOpen(menuContext.value);\n // prevent trigger focusing when opening\n // this allows the content to be given focus without competition\n if (!open) event.preventDefault();\n }\n })}\n onPointerEnter={composeEventHandlers(props.onPointerEnter, () => {\n const menubarOpen = Boolean(context.value);\n if (menubarOpen && !open) {\n context.onMenuOpen(menuContext.value);\n ref.current?.focus();\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (disabled) return;\n if (['Enter', ' '].includes(event.key)) context.onMenuToggle(menuContext.value);\n if (event.key === 'ArrowDown') context.onMenuOpen(menuContext.value);\n // prevent keydown from scrolling window / first focused item to execute\n // that keydown (inadvertently closing the menu)\n if (['Enter', ' ', 'ArrowDown'].includes(event.key)) {\n menuContext.wasKeyboardTriggerOpenRef.current = true;\n event.preventDefault();\n }\n })}\n onFocus={composeEventHandlers(props.onFocus, () => setIsFocused(true))}\n onBlur={composeEventHandlers(props.onBlur, () => setIsFocused(false))}\n />\n </MenuPrimitive.Anchor>\n </RovingFocusGroup.Item>\n </Collection.ItemSlot>\n );\n }\n);\n\nMenubarTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'MenubarPortal';\n\ntype MenuPortalProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;\ninterface MenubarPortalProps extends MenuPortalProps {}\n\nconst MenubarPortal: React.FC<MenubarPortalProps> = (props: ScopedProps<MenubarPortalProps>) => {\n const { __scopeMenubar, ...portalProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.Portal {...menuScope} {...portalProps} />;\n};\n\nMenubarPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'MenubarContent';\n\ntype MenubarContentElement = React.ElementRef<typeof MenuPrimitive.Content>;\ntype MenuContentProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.Content>;\ninterface MenubarContentProps extends Omit<MenuContentProps, 'onEntryFocus'> {}\n\nconst MenubarContent = React.forwardRef<MenubarContentElement, MenubarContentProps>(\n (props: ScopedProps<MenubarContentProps>, forwardedRef) => {\n const { __scopeMenubar, align = 'start', ...contentProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n const context = useMenubarContext(CONTENT_NAME, __scopeMenubar);\n const menuContext = useMenubarMenuContext(CONTENT_NAME, __scopeMenubar);\n const getItems = useCollection(__scopeMenubar);\n const hasInteractedOutsideRef = React.useRef(false);\n\n return (\n <MenuPrimitive.Content\n id={menuContext.contentId}\n aria-labelledby={menuContext.triggerId}\n data-radix-menubar-content=\"\"\n {...menuScope}\n {...contentProps}\n ref={forwardedRef}\n align={align}\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n const menubarOpen = Boolean(context.value);\n if (!menubarOpen && !hasInteractedOutsideRef.current) {\n menuContext.triggerRef.current?.focus();\n }\n\n hasInteractedOutsideRef.current = false;\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault();\n })}\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => {\n const target = event.target as HTMLElement;\n const isMenubarTrigger = getItems().some((item) => item.ref.current?.contains(target));\n if (isMenubarTrigger) event.preventDefault();\n })}\n onInteractOutside={composeEventHandlers(props.onInteractOutside, () => {\n hasInteractedOutsideRef.current = true;\n })}\n onEntryFocus={(event) => {\n if (!menuContext.wasKeyboardTriggerOpenRef.current) event.preventDefault();\n }}\n onKeyDown={composeEventHandlers(\n props.onKeyDown,\n (event) => {\n if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {\n const target = event.target as HTMLElement;\n const targetIsSubTrigger = target.hasAttribute('data-radix-menubar-subtrigger');\n const isKeyDownInsideSubMenu =\n target.closest('[data-radix-menubar-content]') !== event.currentTarget;\n\n const prevMenuKey = context.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n const isPrevKey = prevMenuKey === event.key;\n const isNextKey = !isPrevKey;\n\n // Prevent navigation when we're opening a submenu\n if (isNextKey && targetIsSubTrigger) return;\n // or we're inside a submenu and are moving backwards to close it\n if (isKeyDownInsideSubMenu && isPrevKey) return;\n\n const items = getItems().filter((item) => !item.disabled);\n let candidateValues = items.map((item) => item.value);\n if (isPrevKey) candidateValues.reverse();\n\n const currentIndex = candidateValues.indexOf(menuContext.value);\n\n candidateValues = context.loop\n ? wrapArray(candidateValues, currentIndex + 1)\n : candidateValues.slice(currentIndex + 1);\n\n const [nextValue] = candidateValues;\n if (nextValue) context.onMenuOpen(nextValue);\n }\n },\n { checkForDefaultPrevented: false }\n )}\n style={{\n ...props.style,\n // re-namespace exposed content custom properties\n ...{\n '--radix-menubar-content-transform-origin': 'var(--radix-popper-transform-origin)',\n '--radix-menubar-content-available-width': 'var(--radix-popper-available-width)',\n '--radix-menubar-content-available-height': 'var(--radix-popper-available-height)',\n '--radix-menubar-trigger-width': 'var(--radix-popper-anchor-width)',\n '--radix-menubar-trigger-height': 'var(--radix-popper-anchor-height)',\n },\n }}\n />\n );\n }\n);\n\nMenubarContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'MenubarGroup';\n\ntype MenubarGroupElement = React.ElementRef<typeof MenuPrimitive.Group>;\ntype MenuGroupProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;\ninterface MenubarGroupProps extends MenuGroupProps {}\n\nconst MenubarGroup = React.forwardRef<MenubarGroupElement, MenubarGroupProps>(\n (props: ScopedProps<MenubarGroupProps>, forwardedRef) => {\n const { __scopeMenubar, ...groupProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.Group {...menuScope} {...groupProps} ref={forwardedRef} />;\n }\n);\n\nMenubarGroup.displayName = GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'MenubarLabel';\n\ntype MenubarLabelElement = React.ElementRef<typeof MenuPrimitive.Label>;\ntype MenuLabelProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.Label>;\ninterface MenubarLabelProps extends MenuLabelProps {}\n\nconst MenubarLabel = React.forwardRef<MenubarLabelElement, MenubarLabelProps>(\n (props: ScopedProps<MenubarLabelProps>, forwardedRef) => {\n const { __scopeMenubar, ...labelProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.Label {...menuScope} {...labelProps} ref={forwardedRef} />;\n }\n);\n\nMenubarLabel.displayName = LABEL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'MenubarItem';\n\ntype MenubarItemElement = React.ElementRef<typeof MenuPrimitive.Item>;\ntype MenuItemProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.Item>;\ninterface MenubarItemProps extends MenuItemProps {}\n\nconst MenubarItem = React.forwardRef<MenubarItemElement, MenubarItemProps>(\n (props: ScopedProps<MenubarItemProps>, forwardedRef) => {\n const { __scopeMenubar, ...itemProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.Item {...menuScope} {...itemProps} ref={forwardedRef} />;\n }\n);\n\nMenubarItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarCheckboxItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_ITEM_NAME = 'MenubarCheckboxItem';\n\ntype MenubarCheckboxItemElement = React.ElementRef<typeof MenuPrimitive.CheckboxItem>;\ntype MenuCheckboxItemProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>;\ninterface MenubarCheckboxItemProps extends MenuCheckboxItemProps {}\n\nconst MenubarCheckboxItem = React.forwardRef<MenubarCheckboxItemElement, MenubarCheckboxItemProps>(\n (props: ScopedProps<MenubarCheckboxItemProps>, forwardedRef) => {\n const { __scopeMenubar, ...checkboxItemProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.CheckboxItem {...menuScope} {...checkboxItemProps} ref={forwardedRef} />;\n }\n);\n\nMenubarCheckboxItem.displayName = CHECKBOX_ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarRadioGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_GROUP_NAME = 'MenubarRadioGroup';\n\ntype MenubarRadioGroupElement = React.ElementRef<typeof MenuPrimitive.RadioGroup>;\ntype MenuRadioGroupProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;\ninterface MenubarRadioGroupProps extends MenuRadioGroupProps {}\n\nconst MenubarRadioGroup = React.forwardRef<MenubarRadioGroupElement, MenubarRadioGroupProps>(\n (props: ScopedProps<MenubarRadioGroupProps>, forwardedRef) => {\n const { __scopeMenubar, ...radioGroupProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.RadioGroup {...menuScope} {...radioGroupProps} ref={forwardedRef} />;\n }\n);\n\nMenubarRadioGroup.displayName = RADIO_GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarRadioItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_ITEM_NAME = 'MenubarRadioItem';\n\ntype MenubarRadioItemElement = React.ElementRef<typeof MenuPrimitive.RadioItem>;\ntype MenuRadioItemProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;\ninterface MenubarRadioItemProps extends MenuRadioItemProps {}\n\nconst MenubarRadioItem = React.forwardRef<MenubarRadioItemElement, MenubarRadioItemProps>(\n (props: ScopedProps<MenubarRadioItemProps>, forwardedRef) => {\n const { __scopeMenubar, ...radioItemProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.RadioItem {...menuScope} {...radioItemProps} ref={forwardedRef} />;\n }\n);\n\nMenubarRadioItem.displayName = RADIO_ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'MenubarItemIndicator';\n\ntype MenubarItemIndicatorElement = React.ElementRef<typeof MenuPrimitive.ItemIndicator>;\ntype MenuItemIndicatorProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.ItemIndicator>;\ninterface MenubarItemIndicatorProps extends MenuItemIndicatorProps {}\n\nconst MenubarItemIndicator = React.forwardRef<\n MenubarItemIndicatorElement,\n MenubarItemIndicatorProps\n>((props: ScopedProps<MenubarItemIndicatorProps>, forwardedRef) => {\n const { __scopeMenubar, ...itemIndicatorProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.ItemIndicator {...menuScope} {...itemIndicatorProps} ref={forwardedRef} />;\n});\n\nMenubarItemIndicator.displayName = INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'MenubarSeparator';\n\ntype MenubarSeparatorElement = React.ElementRef<typeof MenuPrimitive.Separator>;\ntype MenuSeparatorProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>;\ninterface MenubarSeparatorProps extends MenuSeparatorProps {}\n\nconst MenubarSeparator = React.forwardRef<MenubarSeparatorElement, MenubarSeparatorProps>(\n (props: ScopedProps<MenubarSeparatorProps>, forwardedRef) => {\n const { __scopeMenubar, ...separatorProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.Separator {...menuScope} {...separatorProps} ref={forwardedRef} />;\n }\n);\n\nMenubarSeparator.displayName = SEPARATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'MenubarArrow';\n\ntype MenubarArrowElement = React.ElementRef<typeof MenuPrimitive.Arrow>;\ntype MenuArrowProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>;\ninterface MenubarArrowProps extends MenuArrowProps {}\n\nconst MenubarArrow = React.forwardRef<MenubarArrowElement, MenubarArrowProps>(\n (props: ScopedProps<MenubarArrowProps>, forwardedRef) => {\n const { __scopeMenubar, ...arrowProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return <MenuPrimitive.Arrow {...menuScope} {...arrowProps} ref={forwardedRef} />;\n }\n);\n\nMenubarArrow.displayName = ARROW_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarSub\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_NAME = 'MenubarSub';\n\ninterface MenubarSubProps {\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n}\n\nconst MenubarSub: React.FC<MenubarSubProps> = (props: ScopedProps<MenubarSubProps>) => {\n const { __scopeMenubar, children, open: openProp, onOpenChange, defaultOpen } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <MenuPrimitive.Sub {...menuScope} open={open} onOpenChange={setOpen}>\n {children}\n </MenuPrimitive.Sub>\n );\n};\n\nMenubarSub.displayName = SUB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarSubTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_TRIGGER_NAME = 'MenubarSubTrigger';\n\ntype MenubarSubTriggerElement = React.ElementRef<typeof MenuPrimitive.SubTrigger>;\ntype MenuSubTriggerProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger>;\ninterface MenubarSubTriggerProps extends MenuSubTriggerProps {}\n\nconst MenubarSubTrigger = React.forwardRef<MenubarSubTriggerElement, MenubarSubTriggerProps>(\n (props: ScopedProps<MenubarSubTriggerProps>, forwardedRef) => {\n const { __scopeMenubar, ...subTriggerProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n return (\n <MenuPrimitive.SubTrigger\n data-radix-menubar-subtrigger=\"\"\n {...menuScope}\n {...subTriggerProps}\n ref={forwardedRef}\n />\n );\n }\n);\n\nMenubarSubTrigger.displayName = SUB_TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarSubContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_CONTENT_NAME = 'MenubarSubContent';\n\ntype MenubarSubContentElement = React.ElementRef<typeof MenuPrimitive.Content>;\ntype MenuSubContentProps = Radix.ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;\ninterface MenubarSubContentProps extends MenuSubContentProps {}\n\nconst MenubarSubContent = React.forwardRef<MenubarSubContentElement, MenubarSubContentProps>(\n (props: ScopedProps<MenubarSubContentProps>, forwardedRef) => {\n const { __scopeMenubar, ...subContentProps } = props;\n const menuScope = useMenuScope(__scopeMenubar);\n\n return (\n <MenuPrimitive.SubContent\n {...menuScope}\n data-radix-menubar-content=\"\"\n {...subContentProps}\n ref={forwardedRef}\n style={{\n ...props.style,\n // re-namespace exposed content custom properties\n ...{\n '--radix-menubar-content-transform-origin': 'var(--radix-popper-transform-origin)',\n '--radix-menubar-content-available-width': 'var(--radix-popper-available-width)',\n '--radix-menubar-content-available-height': 'var(--radix-popper-available-height)',\n '--radix-menubar-trigger-width': 'var(--radix-popper-anchor-width)',\n '--radix-menubar-trigger-height': 'var(--radix-popper-anchor-height)',\n },\n }}\n />\n );\n }\n);\n\nMenubarSubContent.displayName = SUB_CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nfunction wrapArray<T>(array: T[], startIndex: number) {\n return array.map((_, index) => array[(startIndex + index) % array.length]);\n}\n\nconst Root = Menubar;\nconst Menu = MenubarMenu;\nconst Trigger = MenubarTrigger;\nconst Portal = MenubarPortal;\nconst Content = MenubarContent;\nconst Group = MenubarGroup;\nconst Label = MenubarLabel;\nconst Item = MenubarItem;\nconst CheckboxItem = MenubarCheckboxItem;\nconst RadioGroup = MenubarRadioGroup;\nconst RadioItem = MenubarRadioItem;\nconst ItemIndicator = MenubarItemIndicator;\nconst Separator = MenubarSeparator;\nconst Arrow = MenubarArrow;\nconst Sub = MenubarSub;\nconst SubTrigger = MenubarSubTrigger;\nconst SubContent = MenubarSubContent;\n\nexport {\n createMenubarScope,\n //\n Menubar,\n MenubarMenu,\n MenubarTrigger,\n MenubarPortal,\n MenubarContent,\n MenubarGroup,\n MenubarLabel,\n MenubarItem,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarItemIndicator,\n MenubarSeparator,\n MenubarArrow,\n MenubarSub,\n MenubarSubTrigger,\n MenubarSubContent,\n //\n Root,\n Menu,\n Trigger,\n Portal,\n Content,\n Group,\n Label,\n Item,\n CheckboxItem,\n RadioGroup,\n RadioItem,\n ItemIndicator,\n Separator,\n Arrow,\n Sub,\n SubTrigger,\n SubContent,\n};\nexport type {\n MenubarProps,\n MenubarMenuProps,\n MenubarTriggerProps,\n MenubarPortalProps,\n MenubarContentProps,\n MenubarGroupProps,\n MenubarLabelProps,\n MenubarItemProps,\n MenubarCheckboxItemProps,\n MenubarRadioGroupProps,\n MenubarRadioItemProps,\n MenubarItemIndicatorProps,\n MenubarSeparatorProps,\n MenubarArrowProps,\n MenubarSubProps,\n MenubarSubTriggerProps,\n MenubarSubContentProps,\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,eAAAA;AAAA,EAAA,oBAAAC;AAAA,EAAA,eAAAC;AAAA,EAAA,aAAAC;AAAA,EAAA,YAAAC;AAAA,EAAA,qBAAAC;AAAA,EAAA,aAAAC;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAAC;AAAA,EAAA,kBAAAC;AAAA,EAAA,iBAAAC;AAAA,EAAA,YAAAC;AAAA,EAAA,iBAAAC;AAAA,EAAA,WAAAC;AAAA,EAAA,kBAAAC;AAAA,EAAA,kBAAAC;AAAA,EAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,8BAAiC;AACjC,6BAA6B;AAC7B,uBAAqC;AACrC,gCAAgC;AAChC,2BAAmC;AACnC,sBAAsB;AACtB,oBAA+B;AAC/B,wBAAgC;AAChC,uBAAkC;AAClC,gCAA4C;AAC5C,6BAA0B;AAC1B,0CAAqC;AA8GvB;AAnGd,IAAM,eAAe;AAGrB,IAAM,CAAC,YAAY,eAAe,qBAAqB,QAAI,0CAGzD,YAAY;AAGd,IAAM,CAAC,sBAAsB,kBAAkB,QAAI,yCAAmB,cAAc;AAAA,EAClF;AAAA,EACA;AACF,CAAC;AAED,IAAM,mBAAe,mCAAgB;AACrC,IAAM,+BAA2B,uDAA4B;AAW7D,IAAM,CAAC,wBAAwB,iBAAiB,IAC9C,qBAA0C,YAAY;AAaxD,IAAM,UAAgB;AAAA,EACpB,CAAC,OAAkC,iBAAiB;AAClD,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,gBAAY,qCAAa,GAAG;AAClC,UAAM,wBAAwB,yBAAyB,cAAc;AACrE,UAAM,CAAC,QAAQ,IAAI,QAAQ,QAAI,0DAAqB;AAAA,MAClD,MAAM;AAAA,MACN,UAAU;AAAA,MACV,aAAa;AAAA,IACf,CAAC;AAKD,UAAM,CAAC,kBAAkB,mBAAmB,IAAU,eAAwB,IAAI;AAElF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA,YAAkB;AAAA,UAChB,CAACC,WAAU;AACT,qBAASA,MAAK;AACd,gCAAoBA,MAAK;AAAA,UAC3B;AAAA,UACA,CAAC,QAAQ;AAAA,QACX;AAAA,QACA,aAAmB,kBAAY,MAAM,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC;AAAA,QAC7D,cAAoB;AAAA,UAClB,CAACA,WAAU;AACT,qBAAS,CAAC,cAAe,QAAQ,SAAS,IAAI,KAAKA,MAAM;AAGzD,gCAAoBA,MAAK;AAAA,UAC3B;AAAA,UACA,CAAC,QAAQ;AAAA,QACX;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QAEA,sDAAC,WAAW,UAAX,EAAoB,OAAO,gBAC1B,sDAAC,WAAW,MAAX,EAAgB,OAAO,gBACtB;AAAA,UAAkB;AAAA,UAAjB;AAAA,YACC,SAAO;AAAA,YACN,GAAG;AAAA,YACJ,aAAY;AAAA,YACZ;AAAA,YACA,KAAK;AAAA,YACL;AAAA,YACA,0BAA0B;AAAA,YAE1B,sDAAC,iCAAU,KAAV,EAAc,MAAK,WAAW,GAAG,cAAc,KAAK,cAAc;AAAA;AAAA,QACrE,GACF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAMtB,IAAM,YAAY;AAUlB,IAAM,CAAC,qBAAqB,qBAAqB,IAC/C,qBAA8C,SAAS;AAOzD,IAAM,cAAc,CAAC,UAAyC;AAC5D,QAAM,EAAE,gBAAgB,OAAO,WAAW,GAAG,UAAU,IAAI;AAC3D,QAAM,gBAAY,uBAAM;AAGxB,QAAM,QAAQ,aAAa,aAAa;AACxC,QAAM,UAAU,kBAAkB,WAAW,cAAc;AAC3D,QAAM,YAAY,aAAa,cAAc;AAC7C,QAAM,aAAmB,aAA8B,IAAI;AAC3D,QAAM,4BAAkC,aAAO,KAAK;AACpD,QAAM,OAAO,QAAQ,UAAU;AAE/B,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,KAAM,2BAA0B,UAAU;AAAA,EACjD,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,eAAW,uBAAM;AAAA,MACjB;AAAA,MACA,eAAW,uBAAM;AAAA,MACjB;AAAA,MAEA;AAAA,QAAe;AAAA,QAAd;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,cAAc,CAACC,UAAS;AAGtB,gBAAI,CAACA,MAAM,SAAQ,YAAY;AAAA,UACjC;AAAA,UACA,OAAO;AAAA,UACP,KAAK,QAAQ;AAAA,UACZ,GAAG;AAAA;AAAA,MACN;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,cAAc;AAM1B,IAAM,eAAe;AAMrB,IAAM,iBAAuB;AAAA,EAC3B,CAAC,OAAyC,iBAAiB;AACzD,UAAM,EAAE,gBAAgB,WAAW,OAAO,GAAG,aAAa,IAAI;AAC9D,UAAM,wBAAwB,yBAAyB,cAAc;AACrE,UAAM,YAAY,aAAa,cAAc;AAC7C,UAAM,UAAU,kBAAkB,cAAc,cAAc;AAC9D,UAAM,cAAc,sBAAsB,cAAc,cAAc;AACtE,UAAM,MAAY,aAA8B,IAAI;AACpD,UAAM,mBAAe,2CAAgB,cAAc,KAAK,YAAY,UAAU;AAC9E,UAAM,CAAC,WAAW,YAAY,IAAU,eAAS,KAAK;AACtD,UAAM,OAAO,QAAQ,UAAU,YAAY;AAE3C,WACE,4CAAC,WAAW,UAAX,EAAoB,OAAO,gBAAgB,OAAO,YAAY,OAAO,UACpE;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC,SAAO;AAAA,QACN,GAAG;AAAA,QACJ,WAAW,CAAC;AAAA,QACZ,WAAW,YAAY;AAAA,QAEvB,sDAAe,sBAAd,EAAqB,SAAO,MAAE,GAAG,WAChC;AAAA,UAAC,iCAAU;AAAA,UAAV;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,IAAI,YAAY;AAAA,YAChB,iBAAc;AAAA,YACd,iBAAe;AAAA,YACf,iBAAe,OAAO,YAAY,YAAY;AAAA,YAC9C,oBAAkB,YAAY,KAAK;AAAA,YACnC,cAAY,OAAO,SAAS;AAAA,YAC5B,iBAAe,WAAW,KAAK;AAAA,YAC/B;AAAA,YACC,GAAG;AAAA,YACJ,KAAK;AAAA,YACL,mBAAe,uCAAqB,MAAM,eAAe,CAAC,UAAU;AAGlE,kBAAI,CAAC,YAAY,MAAM,WAAW,KAAK,MAAM,YAAY,OAAO;AAC9D,wBAAQ,WAAW,YAAY,KAAK;AAGpC,oBAAI,CAAC,KAAM,OAAM,eAAe;AAAA,cAClC;AAAA,YACF,CAAC;AAAA,YACD,oBAAgB,uCAAqB,MAAM,gBAAgB,MAAM;AAC/D,oBAAM,cAAc,QAAQ,QAAQ,KAAK;AACzC,kBAAI,eAAe,CAAC,MAAM;AACxB,wBAAQ,WAAW,YAAY,KAAK;AACpC,oBAAI,SAAS,MAAM;AAAA,cACrB;AAAA,YACF,CAAC;AAAA,YACD,eAAW,uCAAqB,MAAM,WAAW,CAAC,UAAU;AAC1D,kBAAI,SAAU;AACd,kBAAI,CAAC,SAAS,GAAG,EAAE,SAAS,MAAM,GAAG,EAAG,SAAQ,aAAa,YAAY,KAAK;AAC9E,kBAAI,MAAM,QAAQ,YAAa,SAAQ,WAAW,YAAY,KAAK;AAGnE,kBAAI,CAAC,SAAS,KAAK,WAAW,EAAE,SAAS,MAAM,GAAG,GAAG;AACnD,4BAAY,0BAA0B,UAAU;AAChD,sBAAM,eAAe;AAAA,cACvB;AAAA,YACF,CAAC;AAAA,YACD,aAAS,uCAAqB,MAAM,SAAS,MAAM,aAAa,IAAI,CAAC;AAAA,YACrE,YAAQ,uCAAqB,MAAM,QAAQ,MAAM,aAAa,KAAK,CAAC;AAAA;AAAA,QACtE,GACF;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAM7B,IAAM,cAAc;AAKpB,IAAM,gBAA8C,CAAC,UAA2C;AAC9F,QAAM,EAAE,gBAAgB,GAAG,YAAY,IAAI;AAC3C,QAAM,YAAY,aAAa,cAAc;AAC7C,SAAO,4CAAe,sBAAd,EAAsB,GAAG,WAAY,GAAG,aAAa;AAC/D;AAEA,cAAc,cAAc;AAM5B,IAAM,eAAe;AAMrB,IAAM,iBAAuB;AAAA,EAC3B,CAAC,OAAyC,iBAAiB;AACzD,UAAM,EAAE,gBAAgB,QAAQ,SAAS,GAAG,aAAa,IAAI;AAC7D,UAAM,YAAY,aAAa,cAAc;AAC7C,UAAM,UAAU,kBAAkB,cAAc,cAAc;AAC9D,UAAM,cAAc,sBAAsB,cAAc,cAAc;AACtE,UAAM,WAAW,cAAc,cAAc;AAC7C,UAAM,0BAAgC,aAAO,KAAK;AAElD,WACE;AAAA,MAAe;AAAA,MAAd;AAAA,QACC,IAAI,YAAY;AAAA,QAChB,mBAAiB,YAAY;AAAA,QAC7B,8BAA2B;AAAA,QAC1B,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,KAAK;AAAA,QACL;AAAA,QACA,sBAAkB,uCAAqB,MAAM,kBAAkB,CAAC,UAAU;AACxE,gBAAM,cAAc,QAAQ,QAAQ,KAAK;AACzC,cAAI,CAAC,eAAe,CAAC,wBAAwB,SAAS;AACpD,wBAAY,WAAW,SAAS,MAAM;AAAA,UACxC;AAEA,kCAAwB,UAAU;AAElC,gBAAM,eAAe;AAAA,QACvB,CAAC;AAAA,QACD,oBAAgB,uCAAqB,MAAM,gBAAgB,CAAC,UAAU;AACpE,gBAAM,SAAS,MAAM;AACrB,gBAAM,mBAAmB,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,SAAS,SAAS,MAAM,CAAC;AACrF,cAAI,iBAAkB,OAAM,eAAe;AAAA,QAC7C,CAAC;AAAA,QACD,uBAAmB,uCAAqB,MAAM,mBAAmB,MAAM;AACrE,kCAAwB,UAAU;AAAA,QACpC,CAAC;AAAA,QACD,cAAc,CAAC,UAAU;AACvB,cAAI,CAAC,YAAY,0BAA0B,QAAS,OAAM,eAAe;AAAA,QAC3E;AAAA,QACA,eAAW;AAAA,UACT,MAAM;AAAA,UACN,CAAC,UAAU;AACT,gBAAI,CAAC,cAAc,WAAW,EAAE,SAAS,MAAM,GAAG,GAAG;AACnD,oBAAM,SAAS,MAAM;AACrB,oBAAM,qBAAqB,OAAO,aAAa,+BAA+B;AAC9E,oBAAM,yBACJ,OAAO,QAAQ,8BAA8B,MAAM,MAAM;AAE3D,oBAAM,cAAc,QAAQ,QAAQ,QAAQ,eAAe;AAC3D,oBAAM,YAAY,gBAAgB,MAAM;AACxC,oBAAM,YAAY,CAAC;AAGnB,kBAAI,aAAa,mBAAoB;AAErC,kBAAI,0BAA0B,UAAW;AAEzC,oBAAM,QAAQ,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,QAAQ;AACxD,kBAAI,kBAAkB,MAAM,IAAI,CAAC,SAAS,KAAK,KAAK;AACpD,kBAAI,UAAW,iBAAgB,QAAQ;AAEvC,oBAAM,eAAe,gBAAgB,QAAQ,YAAY,KAAK;AAE9D,gCAAkB,QAAQ,OACtB,UAAU,iBAAiB,eAAe,CAAC,IAC3C,gBAAgB,MAAM,eAAe,CAAC;AAE1C,oBAAM,CAAC,SAAS,IAAI;AACpB,kBAAI,UAAW,SAAQ,WAAW,SAAS;AAAA,YAC7C;AAAA,UACF;AAAA,UACA,EAAE,0BAA0B,MAAM;AAAA,QACpC;AAAA,QACA,OAAO;AAAA,UACL,GAAG,MAAM;AAAA;AAAA,UAET,GAAG;AAAA,YACD,4CAA4C;AAAA,YAC5C,2CAA2C;AAAA,YAC3C,4CAA4C;AAAA,YAC5C,iCAAiC;AAAA,YACjC,kCAAkC;AAAA,UACpC;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAM7B,IAAM,aAAa;AAMnB,IAAM,eAAqB;AAAA,EACzB,CAAC,OAAuC,iBAAiB;AACvD,UAAM,EAAE,gBAAgB,GAAG,WAAW,IAAI;AAC1C,UAAM,YAAY,aAAa,cAAc;AAC7C,WAAO,4CAAe,qBAAd,EAAqB,GAAG,WAAY,GAAG,YAAY,KAAK,cAAc;AAAA,EAChF;AACF;AAEA,aAAa,cAAc;AAM3B,IAAM,aAAa;AAMnB,IAAM,eAAqB;AAAA,EACzB,CAAC,OAAuC,iBAAiB;AACvD,UAAM,EAAE,gBAAgB,GAAG,WAAW,IAAI;AAC1C,UAAM,YAAY,aAAa,cAAc;AAC7C,WAAO,4CAAe,qBAAd,EAAqB,GAAG,WAAY,GAAG,YAAY,KAAK,cAAc;AAAA,EAChF;AACF;AAEA,aAAa,cAAc;AAM3B,IAAM,YAAY;AAMlB,IAAM,cAAoB;AAAA,EACxB,CAAC,OAAsC,iBAAiB;AACtD,UAAM,EAAE,gBAAgB,GAAG,UAAU,IAAI;AACzC,UAAM,YAAY,aAAa,cAAc;AAC7C,WAAO,4CAAe,oBAAd,EAAoB,GAAG,WAAY,GAAG,WAAW,KAAK,cAAc;AAAA,EAC9E;AACF;AAEA,YAAY,cAAc;AAM1B,IAAM,qBAAqB;AAM3B,IAAM,sBAA4B;AAAA,EAChC,CAAC,OAA8C,iBAAiB;AAC9D,UAAM,EAAE,gBAAgB,GAAG,kBAAkB,IAAI;AACjD,UAAM,YAAY,aAAa,cAAc;AAC7C,WAAO,4CAAe,4BAAd,EAA4B,GAAG,WAAY,GAAG,mBAAmB,KAAK,cAAc;AAAA,EAC9F;AACF;AAEA,oBAAoB,cAAc;AAMlC,IAAM,mBAAmB;AAMzB,IAAM,oBAA0B;AAAA,EAC9B,CAAC,OAA4C,iBAAiB;AAC5D,UAAM,EAAE,gBAAgB,GAAG,gBAAgB,IAAI;AAC/C,UAAM,YAAY,aAAa,cAAc;AAC7C,WAAO,4CAAe,0BAAd,EAA0B,GAAG,WAAY,GAAG,iBAAiB,KAAK,cAAc;AAAA,EAC1F;AACF;AAEA,kBAAkB,cAAc;AAMhC,IAAM,kBAAkB;AAMxB,IAAM,mBAAyB;AAAA,EAC7B,CAAC,OAA2C,iBAAiB;AAC3D,UAAM,EAAE,gBAAgB,GAAG,eAAe,IAAI;AAC9C,UAAM,YAAY,aAAa,cAAc;AAC7C,WAAO,4CAAe,yBAAd,EAAyB,GAAG,WAAY,GAAG,gBAAgB,KAAK,cAAc;AAAA,EACxF;AACF;AAEA,iBAAiB,cAAc;AAM/B,IAAM,iBAAiB;AAMvB,IAAM,uBAA6B,iBAGjC,CAAC,OAA+C,iBAAiB;AACjE,QAAM,EAAE,gBAAgB,GAAG,mBAAmB,IAAI;AAClD,QAAM,YAAY,aAAa,cAAc;AAC7C,SAAO,4CAAe,6BAAd,EAA6B,GAAG,WAAY,GAAG,oBAAoB,KAAK,cAAc;AAChG,CAAC;AAED,qBAAqB,cAAc;AAMnC,IAAM,iBAAiB;AAMvB,IAAM,mBAAyB;AAAA,EAC7B,CAAC,OAA2C,iBAAiB;AAC3D,UAAM,EAAE,gBAAgB,GAAG,eAAe,IAAI;AAC9C,UAAM,YAAY,aAAa,cAAc;AAC7C,WAAO,4CAAe,yBAAd,EAAyB,GAAG,WAAY,GAAG,gBAAgB,KAAK,cAAc;AAAA,EACxF;AACF;AAEA,iBAAiB,cAAc;AAM/B,IAAM,aAAa;AAMnB,IAAM,eAAqB;AAAA,EACzB,CAAC,OAAuC,iBAAiB;AACvD,UAAM,EAAE,gBAAgB,GAAG,WAAW,IAAI;AAC1C,UAAM,YAAY,aAAa,cAAc;AAC7C,WAAO,4CAAe,qBAAd,EAAqB,GAAG,WAAY,GAAG,YAAY,KAAK,cAAc;AAAA,EAChF;AACF;AAEA,aAAa,cAAc;AAM3B,IAAM,WAAW;AASjB,IAAM,aAAwC,CAAC,UAAwC;AACrF,QAAM,EAAE,gBAAgB,UAAU,MAAM,UAAU,cAAc,YAAY,IAAI;AAChF,QAAM,YAAY,aAAa,cAAc;AAC7C,QAAM,CAAC,OAAO,OAAO,OAAO,QAAI,0DAAqB;AAAA,IACnD,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AAED,SACE,4CAAe,mBAAd,EAAmB,GAAG,WAAW,MAAY,cAAc,SACzD,UACH;AAEJ;AAEA,WAAW,cAAc;AAMzB,IAAM,mBAAmB;AAMzB,IAAM,oBAA0B;AAAA,EAC9B,CAAC,OAA4C,iBAAiB;AAC5D,UAAM,EAAE,gBAAgB,GAAG,gBAAgB,IAAI;AAC/C,UAAM,YAAY,aAAa,cAAc;AAC7C,WACE;AAAA,MAAe;AAAA,MAAd;AAAA,QACC,iCAA8B;AAAA,QAC7B,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,KAAK;AAAA;AAAA,IACP;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;AAMhC,IAAM,mBAAmB;AAMzB,IAAM,oBAA0B;AAAA,EAC9B,CAAC,OAA4C,iBAAiB;AAC5D,UAAM,EAAE,gBAAgB,GAAG,gBAAgB,IAAI;AAC/C,UAAM,YAAY,aAAa,cAAc;AAE7C,WACE;AAAA,MAAe;AAAA,MAAd;AAAA,QACE,GAAG;AAAA,QACJ,8BAA2B;AAAA,QAC1B,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,OAAO;AAAA,UACL,GAAG,MAAM;AAAA;AAAA,UAET,GAAG;AAAA,YACD,4CAA4C;AAAA,YAC5C,2CAA2C;AAAA,YAC3C,4CAA4C;AAAA,YAC5C,iCAAiC;AAAA,YACjC,kCAAkC;AAAA,UACpC;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;AAQhC,SAAS,UAAa,OAAY,YAAoB;AACpD,SAAO,MAAM,IAAI,CAAC,GAAG,UAAU,OAAO,aAAa,SAAS,MAAM,MAAM,CAAC;AAC3E;AAEA,IAAMC,QAAO;AACb,IAAM,OAAO;AACb,IAAM,UAAU;AAChB,IAAMC,UAAS;AACf,IAAMC,WAAU;AAChB,IAAMC,SAAQ;AACd,IAAMC,SAAQ;AACd,IAAMC,QAAO;AACb,IAAMC,gBAAe;AACrB,IAAMC,cAAa;AACnB,IAAMC,aAAY;AAClB,IAAMC,iBAAgB;AACtB,IAAMC,aAAY;AAClB,IAAMC,SAAQ;AACd,IAAMC,OAAM;AACZ,IAAMC,cAAa;AACnB,IAAMC,cAAa;",
|
|
6
|
+
"names": ["Arrow", "CheckboxItem", "Content", "Group", "Item", "ItemIndicator", "Label", "Portal", "RadioGroup", "RadioItem", "Root", "Separator", "Sub", "SubContent", "SubTrigger", "value", "open", "Root", "Portal", "Content", "Group", "Label", "Item", "CheckboxItem", "RadioGroup", "RadioItem", "ItemIndicator", "Separator", "Arrow", "Sub", "SubTrigger", "SubContent"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-menubar",
|
|
3
|
-
"version": "1.1.0-rc.
|
|
3
|
+
"version": "1.1.0-rc.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -28,16 +28,16 @@
|
|
|
28
28
|
"version": "yarn version"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@radix-ui/primitive": "1.1.0-rc.
|
|
32
|
-
"@radix-ui/react-collection": "1.1.0-rc.
|
|
33
|
-
"@radix-ui/react-compose-refs": "1.1.0-rc.
|
|
34
|
-
"@radix-ui/react-context": "1.1.0-rc.
|
|
35
|
-
"@radix-ui/react-direction": "1.1.0-rc.
|
|
36
|
-
"@radix-ui/react-id": "1.1.0-rc.
|
|
37
|
-
"@radix-ui/react-menu": "2.1.0-rc.
|
|
38
|
-
"@radix-ui/react-primitive": "1.1.0-rc.
|
|
39
|
-
"@radix-ui/react-roving-focus": "1.1.0-rc.
|
|
40
|
-
"@radix-ui/react-use-controllable-state": "1.1.0-rc.
|
|
31
|
+
"@radix-ui/primitive": "1.1.0-rc.3",
|
|
32
|
+
"@radix-ui/react-collection": "1.1.0-rc.3",
|
|
33
|
+
"@radix-ui/react-compose-refs": "1.1.0-rc.3",
|
|
34
|
+
"@radix-ui/react-context": "1.1.0-rc.3",
|
|
35
|
+
"@radix-ui/react-direction": "1.1.0-rc.3",
|
|
36
|
+
"@radix-ui/react-id": "1.1.0-rc.3",
|
|
37
|
+
"@radix-ui/react-menu": "2.1.0-rc.3",
|
|
38
|
+
"@radix-ui/react-primitive": "1.1.0-rc.3",
|
|
39
|
+
"@radix-ui/react-roving-focus": "1.1.0-rc.3",
|
|
40
|
+
"@radix-ui/react-use-controllable-state": "1.1.0-rc.3"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"@types/react": "*",
|