@radix-ui/react-navigation-menu 1.1.5-rc.8 → 1.2.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +60 -48
- package/dist/index.d.ts +60 -48
- package/dist/index.js +733 -824
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +732 -809
- package/dist/index.mjs.map +7 -1
- package/package.json +15 -16
- package/dist/index.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,904 +1,813 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
(() => {
|
|
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 __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
10
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
11
|
+
}) : x)(function(x) {
|
|
12
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
13
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
14
|
+
});
|
|
15
|
+
var __copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from))
|
|
18
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
19
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
20
|
+
}
|
|
21
|
+
return to;
|
|
22
|
+
};
|
|
23
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
24
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
25
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
26
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
27
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
28
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
29
|
+
mod
|
|
30
|
+
));
|
|
18
31
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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
|
-
const [
|
|
66
|
-
const [
|
|
67
|
-
const [$7f73b938b73b5118$var$createNavigationMenuContext, $7f73b938b73b5118$export$fb8ea5af8c9fcdf0] = $6jHCS$radixuireactcontext.createContextScope($7f73b938b73b5118$var$NAVIGATION_MENU_NAME, [
|
|
68
|
-
$7f73b938b73b5118$var$createCollectionScope,
|
|
69
|
-
$7f73b938b73b5118$var$createFocusGroupCollectionScope
|
|
70
|
-
]);
|
|
71
|
-
const [$7f73b938b73b5118$var$NavigationMenuProviderImpl, $7f73b938b73b5118$var$useNavigationMenuContext] = $7f73b938b73b5118$var$createNavigationMenuContext($7f73b938b73b5118$var$NAVIGATION_MENU_NAME);
|
|
72
|
-
const [$7f73b938b73b5118$var$ViewportContentProvider, $7f73b938b73b5118$var$useViewportContentContext] = $7f73b938b73b5118$var$createNavigationMenuContext($7f73b938b73b5118$var$NAVIGATION_MENU_NAME);
|
|
73
|
-
const $7f73b938b73b5118$export$5b2278cf1e8bcae2 = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{
|
|
74
|
-
const { __scopeNavigationMenu: __scopeNavigationMenu , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , delayDuration: delayDuration = 200 , skipDelayDuration: skipDelayDuration = 300 , orientation: orientation = 'horizontal' , dir: dir , ...NavigationMenuProps } = props;
|
|
75
|
-
const [navigationMenu, setNavigationMenu] = $6jHCS$react.useState(null);
|
|
76
|
-
const composedRef = $6jHCS$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setNavigationMenu(node)
|
|
77
|
-
);
|
|
78
|
-
const direction = $6jHCS$radixuireactdirection.useDirection(dir);
|
|
79
|
-
const openTimerRef = $6jHCS$react.useRef(0);
|
|
80
|
-
const closeTimerRef = $6jHCS$react.useRef(0);
|
|
81
|
-
const skipDelayTimerRef = $6jHCS$react.useRef(0);
|
|
82
|
-
const [isOpenDelayed, setIsOpenDelayed] = $6jHCS$react.useState(true);
|
|
83
|
-
const [value1 = '', setValue] = $6jHCS$radixuireactusecontrollablestate.useControllableState({
|
|
32
|
+
// packages/react/navigation-menu/src/NavigationMenu.tsx
|
|
33
|
+
var React = __toESM(__require("react"));
|
|
34
|
+
var import_react_dom = __toESM(__require("react-dom"));
|
|
35
|
+
var import_react_context = __require("@radix-ui/react-context");
|
|
36
|
+
var import_primitive = __require("@radix-ui/primitive");
|
|
37
|
+
var import_react_primitive = __require("@radix-ui/react-primitive");
|
|
38
|
+
var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
|
|
39
|
+
var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
|
|
40
|
+
var import_react_direction = __require("@radix-ui/react-direction");
|
|
41
|
+
var import_react_presence = __require("@radix-ui/react-presence");
|
|
42
|
+
var import_react_id = __require("@radix-ui/react-id");
|
|
43
|
+
var import_react_collection = __require("@radix-ui/react-collection");
|
|
44
|
+
var import_react_dismissable_layer = __require("@radix-ui/react-dismissable-layer");
|
|
45
|
+
var import_react_use_previous = __require("@radix-ui/react-use-previous");
|
|
46
|
+
var import_react_use_layout_effect = __require("@radix-ui/react-use-layout-effect");
|
|
47
|
+
var import_react_use_callback_ref = __require("@radix-ui/react-use-callback-ref");
|
|
48
|
+
var VisuallyHiddenPrimitive = __toESM(__require("@radix-ui/react-visually-hidden"));
|
|
49
|
+
var import_jsx_runtime = __require("react/jsx-runtime");
|
|
50
|
+
var NAVIGATION_MENU_NAME = "NavigationMenu";
|
|
51
|
+
var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(NAVIGATION_MENU_NAME);
|
|
52
|
+
var [FocusGroupCollection, useFocusGroupCollection, createFocusGroupCollectionScope] = (0, import_react_collection.createCollection)(NAVIGATION_MENU_NAME);
|
|
53
|
+
var [createNavigationMenuContext, createNavigationMenuScope] = (0, import_react_context.createContextScope)(
|
|
54
|
+
NAVIGATION_MENU_NAME,
|
|
55
|
+
[createCollectionScope, createFocusGroupCollectionScope]
|
|
56
|
+
);
|
|
57
|
+
var [NavigationMenuProviderImpl, useNavigationMenuContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
|
|
58
|
+
var [ViewportContentProvider, useViewportContentContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
|
|
59
|
+
var NavigationMenu = React.forwardRef(
|
|
60
|
+
(props, forwardedRef) => {
|
|
61
|
+
const {
|
|
62
|
+
__scopeNavigationMenu,
|
|
63
|
+
value: valueProp,
|
|
64
|
+
onValueChange,
|
|
65
|
+
defaultValue,
|
|
66
|
+
delayDuration = 200,
|
|
67
|
+
skipDelayDuration = 300,
|
|
68
|
+
orientation = "horizontal",
|
|
69
|
+
dir,
|
|
70
|
+
...NavigationMenuProps
|
|
71
|
+
} = props;
|
|
72
|
+
const [navigationMenu, setNavigationMenu] = React.useState(null);
|
|
73
|
+
const composedRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setNavigationMenu(node));
|
|
74
|
+
const direction = (0, import_react_direction.useDirection)(dir);
|
|
75
|
+
const openTimerRef = React.useRef(0);
|
|
76
|
+
const closeTimerRef = React.useRef(0);
|
|
77
|
+
const skipDelayTimerRef = React.useRef(0);
|
|
78
|
+
const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);
|
|
79
|
+
const [value = "", setValue] = (0, import_react_use_controllable_state.useControllableState)({
|
|
84
80
|
prop: valueProp,
|
|
85
|
-
onChange: (
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
81
|
+
onChange: (value2) => {
|
|
82
|
+
const isOpen = value2 !== "";
|
|
83
|
+
const hasSkipDelayDuration = skipDelayDuration > 0;
|
|
84
|
+
if (isOpen) {
|
|
85
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
86
|
+
if (hasSkipDelayDuration) setIsOpenDelayed(false);
|
|
87
|
+
} else {
|
|
88
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
89
|
+
skipDelayTimerRef.current = window.setTimeout(
|
|
90
|
+
() => setIsOpenDelayed(true),
|
|
91
|
+
skipDelayDuration
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
onValueChange?.(value2);
|
|
97
95
|
},
|
|
98
96
|
defaultProp: defaultValue
|
|
99
|
-
|
|
100
|
-
|
|
97
|
+
});
|
|
98
|
+
const startCloseTimer = React.useCallback(() => {
|
|
101
99
|
window.clearTimeout(closeTimerRef.current);
|
|
102
|
-
closeTimerRef.current = window.setTimeout(()=>setValue(
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
setValue
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
if (isOpenItem) // If the item is already open (e.g. we're transitioning from the content to the trigger)
|
|
116
|
-
// then we want to clear the close timer immediately.
|
|
117
|
-
window.clearTimeout(closeTimerRef.current);
|
|
118
|
-
else openTimerRef.current = window.setTimeout(()=>{
|
|
119
|
-
window.clearTimeout(closeTimerRef.current);
|
|
120
|
-
setValue(itemValue);
|
|
121
|
-
}, delayDuration);
|
|
122
|
-
}, [
|
|
123
|
-
value1,
|
|
124
|
-
setValue,
|
|
125
|
-
delayDuration
|
|
126
|
-
]);
|
|
127
|
-
$6jHCS$react.useEffect(()=>{
|
|
128
|
-
return ()=>{
|
|
129
|
-
window.clearTimeout(openTimerRef.current);
|
|
100
|
+
closeTimerRef.current = window.setTimeout(() => setValue(""), 150);
|
|
101
|
+
}, [setValue]);
|
|
102
|
+
const handleOpen = React.useCallback(
|
|
103
|
+
(itemValue) => {
|
|
104
|
+
window.clearTimeout(closeTimerRef.current);
|
|
105
|
+
setValue(itemValue);
|
|
106
|
+
},
|
|
107
|
+
[setValue]
|
|
108
|
+
);
|
|
109
|
+
const handleDelayedOpen = React.useCallback(
|
|
110
|
+
(itemValue) => {
|
|
111
|
+
const isOpenItem = value === itemValue;
|
|
112
|
+
if (isOpenItem) {
|
|
130
113
|
window.clearTimeout(closeTimerRef.current);
|
|
131
|
-
|
|
114
|
+
} else {
|
|
115
|
+
openTimerRef.current = window.setTimeout(() => {
|
|
116
|
+
window.clearTimeout(closeTimerRef.current);
|
|
117
|
+
setValue(itemValue);
|
|
118
|
+
}, delayDuration);
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
[value, setValue, delayDuration]
|
|
122
|
+
);
|
|
123
|
+
React.useEffect(() => {
|
|
124
|
+
return () => {
|
|
125
|
+
window.clearTimeout(openTimerRef.current);
|
|
126
|
+
window.clearTimeout(closeTimerRef.current);
|
|
127
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
132
128
|
};
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
129
|
+
}, []);
|
|
130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
131
|
+
NavigationMenuProvider,
|
|
132
|
+
{
|
|
133
|
+
scope: __scopeNavigationMenu,
|
|
134
|
+
isRootMenu: true,
|
|
135
|
+
value,
|
|
136
|
+
dir: direction,
|
|
137
|
+
orientation,
|
|
138
|
+
rootNavigationMenu: navigationMenu,
|
|
139
|
+
onTriggerEnter: (itemValue) => {
|
|
142
140
|
window.clearTimeout(openTimerRef.current);
|
|
143
141
|
if (isOpenDelayed) handleDelayedOpen(itemValue);
|
|
144
142
|
else handleOpen(itemValue);
|
|
145
|
-
|
|
146
|
-
|
|
143
|
+
},
|
|
144
|
+
onTriggerLeave: () => {
|
|
147
145
|
window.clearTimeout(openTimerRef.current);
|
|
148
146
|
startCloseTimer();
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
147
|
+
},
|
|
148
|
+
onContentEnter: () => window.clearTimeout(closeTimerRef.current),
|
|
149
|
+
onContentLeave: startCloseTimer,
|
|
150
|
+
onItemSelect: (itemValue) => {
|
|
151
|
+
setValue((prevValue) => prevValue === itemValue ? "" : itemValue);
|
|
152
|
+
},
|
|
153
|
+
onItemDismiss: () => setValue(""),
|
|
154
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
155
|
+
import_react_primitive.Primitive.nav,
|
|
156
|
+
{
|
|
157
|
+
"aria-label": "Main",
|
|
158
|
+
"data-orientation": orientation,
|
|
159
|
+
dir: direction,
|
|
160
|
+
...NavigationMenuProps,
|
|
161
|
+
ref: composedRef
|
|
162
|
+
}
|
|
163
|
+
)
|
|
164
|
+
}
|
|
165
|
+
);
|
|
166
|
+
}
|
|
167
|
+
);
|
|
168
|
+
NavigationMenu.displayName = NAVIGATION_MENU_NAME;
|
|
169
|
+
var SUB_NAME = "NavigationMenuSub";
|
|
170
|
+
var NavigationMenuSub = React.forwardRef(
|
|
171
|
+
(props, forwardedRef) => {
|
|
172
|
+
const {
|
|
173
|
+
__scopeNavigationMenu,
|
|
174
|
+
value: valueProp,
|
|
175
|
+
onValueChange,
|
|
176
|
+
defaultValue,
|
|
177
|
+
orientation = "horizontal",
|
|
178
|
+
...subProps
|
|
179
|
+
} = props;
|
|
180
|
+
const context = useNavigationMenuContext(SUB_NAME, __scopeNavigationMenu);
|
|
181
|
+
const [value = "", setValue] = (0, import_react_use_controllable_state.useControllableState)({
|
|
176
182
|
prop: valueProp,
|
|
177
183
|
onChange: onValueChange,
|
|
178
184
|
defaultProp: defaultValue
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
185
|
+
});
|
|
186
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
187
|
+
NavigationMenuProvider,
|
|
188
|
+
{
|
|
189
|
+
scope: __scopeNavigationMenu,
|
|
190
|
+
isRootMenu: false,
|
|
191
|
+
value,
|
|
192
|
+
dir: context.dir,
|
|
193
|
+
orientation,
|
|
194
|
+
rootNavigationMenu: context.rootNavigationMenu,
|
|
195
|
+
onTriggerEnter: (itemValue) => setValue(itemValue),
|
|
196
|
+
onItemSelect: (itemValue) => setValue(itemValue),
|
|
197
|
+
onItemDismiss: () => setValue(""),
|
|
198
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { "data-orientation": orientation, ...subProps, ref: forwardedRef })
|
|
199
|
+
}
|
|
200
|
+
);
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
NavigationMenuSub.displayName = SUB_NAME;
|
|
204
|
+
var NavigationMenuProvider = (props) => {
|
|
205
|
+
const {
|
|
206
|
+
scope,
|
|
207
|
+
isRootMenu,
|
|
208
|
+
rootNavigationMenu,
|
|
209
|
+
dir,
|
|
210
|
+
orientation,
|
|
211
|
+
children,
|
|
212
|
+
value,
|
|
213
|
+
onItemSelect,
|
|
214
|
+
onItemDismiss,
|
|
215
|
+
onTriggerEnter,
|
|
216
|
+
onTriggerLeave,
|
|
217
|
+
onContentEnter,
|
|
218
|
+
onContentLeave
|
|
219
|
+
} = props;
|
|
220
|
+
const [viewport, setViewport] = React.useState(null);
|
|
221
|
+
const [viewportContent, setViewportContent] = React.useState(/* @__PURE__ */ new Map());
|
|
222
|
+
const [indicatorTrack, setIndicatorTrack] = React.useState(null);
|
|
223
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
224
|
+
NavigationMenuProviderImpl,
|
|
225
|
+
{
|
|
226
|
+
scope,
|
|
227
|
+
isRootMenu,
|
|
228
|
+
rootNavigationMenu,
|
|
229
|
+
value,
|
|
230
|
+
previousValue: (0, import_react_use_previous.usePrevious)(value),
|
|
231
|
+
baseId: (0, import_react_id.useId)(),
|
|
232
|
+
dir,
|
|
233
|
+
orientation,
|
|
234
|
+
viewport,
|
|
216
235
|
onViewportChange: setViewport,
|
|
217
|
-
indicatorTrack
|
|
236
|
+
indicatorTrack,
|
|
218
237
|
onIndicatorTrackChange: setIndicatorTrack,
|
|
219
|
-
onTriggerEnter:
|
|
220
|
-
onTriggerLeave:
|
|
221
|
-
onContentEnter:
|
|
222
|
-
onContentLeave:
|
|
223
|
-
onItemSelect:
|
|
224
|
-
onItemDismiss:
|
|
225
|
-
onViewportContentChange:
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
238
|
+
onTriggerEnter: (0, import_react_use_callback_ref.useCallbackRef)(onTriggerEnter),
|
|
239
|
+
onTriggerLeave: (0, import_react_use_callback_ref.useCallbackRef)(onTriggerLeave),
|
|
240
|
+
onContentEnter: (0, import_react_use_callback_ref.useCallbackRef)(onContentEnter),
|
|
241
|
+
onContentLeave: (0, import_react_use_callback_ref.useCallbackRef)(onContentLeave),
|
|
242
|
+
onItemSelect: (0, import_react_use_callback_ref.useCallbackRef)(onItemSelect),
|
|
243
|
+
onItemDismiss: (0, import_react_use_callback_ref.useCallbackRef)(onItemDismiss),
|
|
244
|
+
onViewportContentChange: React.useCallback((contentValue, contentData) => {
|
|
245
|
+
setViewportContent((prevContent) => {
|
|
246
|
+
prevContent.set(contentValue, contentData);
|
|
247
|
+
return new Map(prevContent);
|
|
248
|
+
});
|
|
230
249
|
}, []),
|
|
231
|
-
onViewportContentRemove:
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
}, [])
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
});
|
|
267
|
-
/*#__PURE__*/ Object.assign($7f73b938b73b5118$export$c361068a95fd2286, {
|
|
268
|
-
displayName: $7f73b938b73b5118$var$LIST_NAME
|
|
269
|
-
});
|
|
270
|
-
/* -------------------------------------------------------------------------------------------------
|
|
271
|
-
* NavigationMenuItem
|
|
272
|
-
* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$ITEM_NAME = 'NavigationMenuItem';
|
|
273
|
-
const [$7f73b938b73b5118$var$NavigationMenuItemContextProvider, $7f73b938b73b5118$var$useNavigationMenuItemContext] = $7f73b938b73b5118$var$createNavigationMenuContext($7f73b938b73b5118$var$ITEM_NAME);
|
|
274
|
-
const $7f73b938b73b5118$export$ffdbb83a2de845c2 = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{
|
|
275
|
-
const { __scopeNavigationMenu: __scopeNavigationMenu , value: valueProp , ...itemProps } = props;
|
|
276
|
-
const autoValue = $6jHCS$radixuireactid.useId(); // We need to provide an initial deterministic value as `useId` will return
|
|
277
|
-
// empty string on the first render and we don't want to match our internal "closed" value.
|
|
278
|
-
const value = valueProp || autoValue || 'LEGACY_REACT_AUTO_VALUE';
|
|
279
|
-
const contentRef = $6jHCS$react.useRef(null);
|
|
280
|
-
const triggerRef = $6jHCS$react.useRef(null);
|
|
281
|
-
const focusProxyRef = $6jHCS$react.useRef(null);
|
|
282
|
-
const restoreContentTabOrderRef = $6jHCS$react.useRef(()=>{});
|
|
283
|
-
const wasEscapeCloseRef = $6jHCS$react.useRef(false);
|
|
284
|
-
const handleContentEntry = $6jHCS$react.useCallback((side = 'start')=>{
|
|
250
|
+
onViewportContentRemove: React.useCallback((contentValue) => {
|
|
251
|
+
setViewportContent((prevContent) => {
|
|
252
|
+
if (!prevContent.has(contentValue)) return prevContent;
|
|
253
|
+
prevContent.delete(contentValue);
|
|
254
|
+
return new Map(prevContent);
|
|
255
|
+
});
|
|
256
|
+
}, []),
|
|
257
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewportContentProvider, { scope, items: viewportContent, children }) })
|
|
258
|
+
}
|
|
259
|
+
);
|
|
260
|
+
};
|
|
261
|
+
var LIST_NAME = "NavigationMenuList";
|
|
262
|
+
var NavigationMenuList = React.forwardRef(
|
|
263
|
+
(props, forwardedRef) => {
|
|
264
|
+
const { __scopeNavigationMenu, ...listProps } = props;
|
|
265
|
+
const context = useNavigationMenuContext(LIST_NAME, __scopeNavigationMenu);
|
|
266
|
+
const list = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.ul, { "data-orientation": context.orientation, ...listProps, ref: forwardedRef });
|
|
267
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { style: { position: "relative" }, ref: context.onIndicatorTrackChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: __scopeNavigationMenu, children: context.isRootMenu ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroup, { asChild: true, children: list }) : list }) });
|
|
268
|
+
}
|
|
269
|
+
);
|
|
270
|
+
NavigationMenuList.displayName = LIST_NAME;
|
|
271
|
+
var ITEM_NAME = "NavigationMenuItem";
|
|
272
|
+
var [NavigationMenuItemContextProvider, useNavigationMenuItemContext] = createNavigationMenuContext(ITEM_NAME);
|
|
273
|
+
var NavigationMenuItem = React.forwardRef(
|
|
274
|
+
(props, forwardedRef) => {
|
|
275
|
+
const { __scopeNavigationMenu, value: valueProp, ...itemProps } = props;
|
|
276
|
+
const autoValue = (0, import_react_id.useId)();
|
|
277
|
+
const value = valueProp || autoValue || "LEGACY_REACT_AUTO_VALUE";
|
|
278
|
+
const contentRef = React.useRef(null);
|
|
279
|
+
const triggerRef = React.useRef(null);
|
|
280
|
+
const focusProxyRef = React.useRef(null);
|
|
281
|
+
const restoreContentTabOrderRef = React.useRef(() => {
|
|
282
|
+
});
|
|
283
|
+
const wasEscapeCloseRef = React.useRef(false);
|
|
284
|
+
const handleContentEntry = React.useCallback((side = "start") => {
|
|
285
285
|
if (contentRef.current) {
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
286
|
+
restoreContentTabOrderRef.current();
|
|
287
|
+
const candidates = getTabbableCandidates(contentRef.current);
|
|
288
|
+
if (candidates.length) focusFirst(side === "start" ? candidates : candidates.reverse());
|
|
289
289
|
}
|
|
290
|
-
|
|
291
|
-
|
|
290
|
+
}, []);
|
|
291
|
+
const handleContentExit = React.useCallback(() => {
|
|
292
292
|
if (contentRef.current) {
|
|
293
|
-
|
|
294
|
-
|
|
293
|
+
const candidates = getTabbableCandidates(contentRef.current);
|
|
294
|
+
if (candidates.length) restoreContentTabOrderRef.current = removeFromTabOrder(candidates);
|
|
295
|
+
}
|
|
296
|
+
}, []);
|
|
297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
298
|
+
NavigationMenuItemContextProvider,
|
|
299
|
+
{
|
|
300
|
+
scope: __scopeNavigationMenu,
|
|
301
|
+
value,
|
|
302
|
+
triggerRef,
|
|
303
|
+
contentRef,
|
|
304
|
+
focusProxyRef,
|
|
305
|
+
wasEscapeCloseRef,
|
|
306
|
+
onEntryKeyDown: handleContentEntry,
|
|
307
|
+
onFocusProxyEnter: handleContentEntry,
|
|
308
|
+
onRootContentClose: handleContentExit,
|
|
309
|
+
onContentFocusOutside: handleContentExit,
|
|
310
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.li, { ...itemProps, ref: forwardedRef })
|
|
295
311
|
}
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
});
|
|
312
|
-
/*#__PURE__*/ Object.assign($7f73b938b73b5118$export$ffdbb83a2de845c2, {
|
|
313
|
-
displayName: $7f73b938b73b5118$var$ITEM_NAME
|
|
314
|
-
});
|
|
315
|
-
/* -------------------------------------------------------------------------------------------------
|
|
316
|
-
* NavigationMenuTrigger
|
|
317
|
-
* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$TRIGGER_NAME = 'NavigationMenuTrigger';
|
|
318
|
-
const $7f73b938b73b5118$export$37fe8002734d8f2 = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{
|
|
319
|
-
const { __scopeNavigationMenu: __scopeNavigationMenu , disabled: disabled , ...triggerProps } = props;
|
|
320
|
-
const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$TRIGGER_NAME, props.__scopeNavigationMenu);
|
|
321
|
-
const itemContext = $7f73b938b73b5118$var$useNavigationMenuItemContext($7f73b938b73b5118$var$TRIGGER_NAME, props.__scopeNavigationMenu);
|
|
322
|
-
const ref = $6jHCS$react.useRef(null);
|
|
323
|
-
const composedRefs = $6jHCS$radixuireactcomposerefs.useComposedRefs(ref, itemContext.triggerRef, forwardedRef);
|
|
324
|
-
const triggerId = $7f73b938b73b5118$var$makeTriggerId(context.baseId, itemContext.value);
|
|
325
|
-
const contentId = $7f73b938b73b5118$var$makeContentId(context.baseId, itemContext.value);
|
|
326
|
-
const hasPointerMoveOpenedRef = $6jHCS$react.useRef(false);
|
|
327
|
-
const wasClickCloseRef = $6jHCS$react.useRef(false);
|
|
312
|
+
);
|
|
313
|
+
}
|
|
314
|
+
);
|
|
315
|
+
NavigationMenuItem.displayName = ITEM_NAME;
|
|
316
|
+
var TRIGGER_NAME = "NavigationMenuTrigger";
|
|
317
|
+
var NavigationMenuTrigger = React.forwardRef((props, forwardedRef) => {
|
|
318
|
+
const { __scopeNavigationMenu, disabled, ...triggerProps } = props;
|
|
319
|
+
const context = useNavigationMenuContext(TRIGGER_NAME, props.__scopeNavigationMenu);
|
|
320
|
+
const itemContext = useNavigationMenuItemContext(TRIGGER_NAME, props.__scopeNavigationMenu);
|
|
321
|
+
const ref = React.useRef(null);
|
|
322
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(ref, itemContext.triggerRef, forwardedRef);
|
|
323
|
+
const triggerId = makeTriggerId(context.baseId, itemContext.value);
|
|
324
|
+
const contentId = makeContentId(context.baseId, itemContext.value);
|
|
325
|
+
const hasPointerMoveOpenedRef = React.useRef(false);
|
|
326
|
+
const wasClickCloseRef = React.useRef(false);
|
|
328
327
|
const open = itemContext.value === context.value;
|
|
329
|
-
return
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
ref: composedRefs,
|
|
343
|
-
onPointerEnter: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerEnter, ()=>{
|
|
328
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
329
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: __scopeNavigationMenu, value: itemContext.value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupItem, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
330
|
+
import_react_primitive.Primitive.button,
|
|
331
|
+
{
|
|
332
|
+
id: triggerId,
|
|
333
|
+
disabled,
|
|
334
|
+
"data-disabled": disabled ? "" : void 0,
|
|
335
|
+
"data-state": getOpenState(open),
|
|
336
|
+
"aria-expanded": open,
|
|
337
|
+
"aria-controls": contentId,
|
|
338
|
+
...triggerProps,
|
|
339
|
+
ref: composedRefs,
|
|
340
|
+
onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, () => {
|
|
344
341
|
wasClickCloseRef.current = false;
|
|
345
342
|
itemContext.wasEscapeCloseRef.current = false;
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
343
|
+
}),
|
|
344
|
+
onPointerMove: (0, import_primitive.composeEventHandlers)(
|
|
345
|
+
props.onPointerMove,
|
|
346
|
+
whenMouse(() => {
|
|
347
|
+
if (disabled || wasClickCloseRef.current || itemContext.wasEscapeCloseRef.current || hasPointerMoveOpenedRef.current)
|
|
348
|
+
return;
|
|
349
|
+
context.onTriggerEnter(itemContext.value);
|
|
350
|
+
hasPointerMoveOpenedRef.current = true;
|
|
351
|
+
})
|
|
352
|
+
),
|
|
353
|
+
onPointerLeave: (0, import_primitive.composeEventHandlers)(
|
|
354
|
+
props.onPointerLeave,
|
|
355
|
+
whenMouse(() => {
|
|
356
|
+
if (disabled) return;
|
|
357
|
+
context.onTriggerLeave();
|
|
358
|
+
hasPointerMoveOpenedRef.current = false;
|
|
359
|
+
})
|
|
360
|
+
),
|
|
361
|
+
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => {
|
|
358
362
|
context.onItemSelect(itemContext.value);
|
|
359
363
|
wasClickCloseRef.current = open;
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
const verticalEntryKey = context.dir ===
|
|
363
|
-
const entryKey = {
|
|
364
|
-
horizontal: 'ArrowDown',
|
|
365
|
-
vertical: verticalEntryKey
|
|
366
|
-
}[context.orientation];
|
|
364
|
+
}),
|
|
365
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
366
|
+
const verticalEntryKey = context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
|
|
367
|
+
const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[context.orientation];
|
|
367
368
|
if (open && event.key === entryKey) {
|
|
368
|
-
|
|
369
|
-
|
|
369
|
+
itemContext.onEntryKeyDown();
|
|
370
|
+
event.preventDefault();
|
|
370
371
|
}
|
|
371
|
-
|
|
372
|
-
})))), open && /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$react.Fragment, null, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactvisuallyhidden.Root, {
|
|
373
|
-
"aria-hidden": true,
|
|
374
|
-
tabIndex: 0,
|
|
375
|
-
ref: itemContext.focusProxyRef,
|
|
376
|
-
onFocus: (event)=>{
|
|
377
|
-
const content = itemContext.contentRef.current;
|
|
378
|
-
const prevFocusedElement = event.relatedTarget;
|
|
379
|
-
const wasTriggerFocused = prevFocusedElement === ref.current;
|
|
380
|
-
const wasFocusFromContent = content === null || content === void 0 ? void 0 : content.contains(prevFocusedElement);
|
|
381
|
-
if (wasTriggerFocused || !wasFocusFromContent) itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end');
|
|
372
|
+
})
|
|
382
373
|
}
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
const
|
|
394
|
-
const
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
374
|
+
) }) }),
|
|
375
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
376
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
377
|
+
VisuallyHiddenPrimitive.Root,
|
|
378
|
+
{
|
|
379
|
+
"aria-hidden": true,
|
|
380
|
+
tabIndex: 0,
|
|
381
|
+
ref: itemContext.focusProxyRef,
|
|
382
|
+
onFocus: (event) => {
|
|
383
|
+
const content = itemContext.contentRef.current;
|
|
384
|
+
const prevFocusedElement = event.relatedTarget;
|
|
385
|
+
const wasTriggerFocused = prevFocusedElement === ref.current;
|
|
386
|
+
const wasFocusFromContent = content?.contains(prevFocusedElement);
|
|
387
|
+
if (wasTriggerFocused || !wasFocusFromContent) {
|
|
388
|
+
itemContext.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
),
|
|
393
|
+
context.viewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-owns": contentId })
|
|
394
|
+
] })
|
|
395
|
+
] });
|
|
396
|
+
});
|
|
397
|
+
NavigationMenuTrigger.displayName = TRIGGER_NAME;
|
|
398
|
+
var LINK_NAME = "NavigationMenuLink";
|
|
399
|
+
var LINK_SELECT = "navigationMenu.linkSelect";
|
|
400
|
+
var NavigationMenuLink = React.forwardRef(
|
|
401
|
+
(props, forwardedRef) => {
|
|
402
|
+
const { __scopeNavigationMenu, active, onSelect, ...linkProps } = props;
|
|
403
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupItem, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
404
|
+
import_react_primitive.Primitive.a,
|
|
405
|
+
{
|
|
406
|
+
"data-active": active ? "" : void 0,
|
|
407
|
+
"aria-current": active ? "page" : void 0,
|
|
408
|
+
...linkProps,
|
|
409
|
+
ref: forwardedRef,
|
|
410
|
+
onClick: (0, import_primitive.composeEventHandlers)(
|
|
411
|
+
props.onClick,
|
|
412
|
+
(event) => {
|
|
413
|
+
const target = event.target;
|
|
414
|
+
const linkSelectEvent = new CustomEvent(LINK_SELECT, {
|
|
406
415
|
bubbles: true,
|
|
407
416
|
cancelable: true
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
const rootContentDismissEvent = new CustomEvent($7f73b938b73b5118$var$ROOT_CONTENT_DISMISS, {
|
|
416
|
-
bubbles: true,
|
|
417
|
-
cancelable: true
|
|
417
|
+
});
|
|
418
|
+
target.addEventListener(LINK_SELECT, (event2) => onSelect?.(event2), { once: true });
|
|
419
|
+
(0, import_react_primitive.dispatchDiscreteCustomEvent)(target, linkSelectEvent);
|
|
420
|
+
if (!linkSelectEvent.defaultPrevented && !event.metaKey) {
|
|
421
|
+
const rootContentDismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, {
|
|
422
|
+
bubbles: true,
|
|
423
|
+
cancelable: true
|
|
418
424
|
});
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
checkForDefaultPrevented: false
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
});
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
const
|
|
433
|
-
const { forceMount: forceMount , ...indicatorProps } = props;
|
|
434
|
-
const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$INDICATOR_NAME, props.__scopeNavigationMenu);
|
|
425
|
+
(0, import_react_primitive.dispatchDiscreteCustomEvent)(target, rootContentDismissEvent);
|
|
426
|
+
}
|
|
427
|
+
},
|
|
428
|
+
{ checkForDefaultPrevented: false }
|
|
429
|
+
)
|
|
430
|
+
}
|
|
431
|
+
) });
|
|
432
|
+
}
|
|
433
|
+
);
|
|
434
|
+
NavigationMenuLink.displayName = LINK_NAME;
|
|
435
|
+
var INDICATOR_NAME = "NavigationMenuIndicator";
|
|
436
|
+
var NavigationMenuIndicator = React.forwardRef((props, forwardedRef) => {
|
|
437
|
+
const { forceMount, ...indicatorProps } = props;
|
|
438
|
+
const context = useNavigationMenuContext(INDICATOR_NAME, props.__scopeNavigationMenu);
|
|
435
439
|
const isVisible = Boolean(context.value);
|
|
436
|
-
return context.indicatorTrack ?
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
const
|
|
446
|
-
const
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
const [
|
|
450
|
-
const
|
|
451
|
-
const isHorizontal = context.orientation === 'horizontal';
|
|
440
|
+
return context.indicatorTrack ? import_react_dom.default.createPortal(
|
|
441
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuIndicatorImpl, { ...indicatorProps, ref: forwardedRef }) }),
|
|
442
|
+
context.indicatorTrack
|
|
443
|
+
) : null;
|
|
444
|
+
});
|
|
445
|
+
NavigationMenuIndicator.displayName = INDICATOR_NAME;
|
|
446
|
+
var NavigationMenuIndicatorImpl = React.forwardRef((props, forwardedRef) => {
|
|
447
|
+
const { __scopeNavigationMenu, ...indicatorProps } = props;
|
|
448
|
+
const context = useNavigationMenuContext(INDICATOR_NAME, __scopeNavigationMenu);
|
|
449
|
+
const getItems = useCollection(__scopeNavigationMenu);
|
|
450
|
+
const [activeTrigger, setActiveTrigger] = React.useState(
|
|
451
|
+
null
|
|
452
|
+
);
|
|
453
|
+
const [position, setPosition] = React.useState(null);
|
|
454
|
+
const isHorizontal = context.orientation === "horizontal";
|
|
452
455
|
const isVisible = Boolean(context.value);
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
/**
|
|
464
|
-
* Update position when the indicator or parent track size changes
|
|
465
|
-
*/ const handlePositionChange = ()=>{
|
|
466
|
-
if (activeTrigger) setPosition({
|
|
467
|
-
size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight,
|
|
468
|
-
offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop
|
|
456
|
+
React.useEffect(() => {
|
|
457
|
+
const items = getItems();
|
|
458
|
+
const triggerNode = items.find((item) => item.value === context.value)?.ref.current;
|
|
459
|
+
if (triggerNode) setActiveTrigger(triggerNode);
|
|
460
|
+
}, [getItems, context.value]);
|
|
461
|
+
const handlePositionChange = () => {
|
|
462
|
+
if (activeTrigger) {
|
|
463
|
+
setPosition({
|
|
464
|
+
size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight,
|
|
465
|
+
offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop
|
|
469
466
|
});
|
|
467
|
+
}
|
|
470
468
|
};
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
469
|
+
useResizeObserver(activeTrigger, handlePositionChange);
|
|
470
|
+
useResizeObserver(context.indicatorTrack, handlePositionChange);
|
|
471
|
+
return position ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
472
|
+
import_react_primitive.Primitive.div,
|
|
473
|
+
{
|
|
475
474
|
"aria-hidden": true,
|
|
476
|
-
"data-state": isVisible ?
|
|
477
|
-
"data-orientation": context.orientation
|
|
478
|
-
|
|
475
|
+
"data-state": isVisible ? "visible" : "hidden",
|
|
476
|
+
"data-orientation": context.orientation,
|
|
477
|
+
...indicatorProps,
|
|
479
478
|
ref: forwardedRef,
|
|
480
479
|
style: {
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
480
|
+
position: "absolute",
|
|
481
|
+
...isHorizontal ? {
|
|
482
|
+
left: 0,
|
|
483
|
+
width: position.size + "px",
|
|
484
|
+
transform: `translateX(${position.offset}px)`
|
|
485
|
+
} : {
|
|
486
|
+
top: 0,
|
|
487
|
+
height: position.size + "px",
|
|
488
|
+
transform: `translateY(${position.offset}px)`
|
|
489
|
+
},
|
|
490
|
+
...indicatorProps.style
|
|
492
491
|
}
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
const
|
|
499
|
-
const
|
|
500
|
-
const
|
|
501
|
-
const
|
|
502
|
-
const composedRefs = $6jHCS$radixuireactcomposerefs.useComposedRefs(itemContext.contentRef, forwardedRef);
|
|
492
|
+
}
|
|
493
|
+
) : null;
|
|
494
|
+
});
|
|
495
|
+
var CONTENT_NAME = "NavigationMenuContent";
|
|
496
|
+
var NavigationMenuContent = React.forwardRef((props, forwardedRef) => {
|
|
497
|
+
const { forceMount, ...contentProps } = props;
|
|
498
|
+
const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);
|
|
499
|
+
const itemContext = useNavigationMenuItemContext(CONTENT_NAME, props.__scopeNavigationMenu);
|
|
500
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(itemContext.contentRef, forwardedRef);
|
|
503
501
|
const open = itemContext.value === context.value;
|
|
504
502
|
const commonProps = {
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
503
|
+
value: itemContext.value,
|
|
504
|
+
triggerRef: itemContext.triggerRef,
|
|
505
|
+
focusProxyRef: itemContext.focusProxyRef,
|
|
506
|
+
wasEscapeCloseRef: itemContext.wasEscapeCloseRef,
|
|
507
|
+
onContentFocusOutside: itemContext.onContentFocusOutside,
|
|
508
|
+
onRootContentClose: itemContext.onRootContentClose,
|
|
509
|
+
...contentProps
|
|
512
510
|
};
|
|
513
|
-
return !context.viewport ?
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
"data-state":
|
|
517
|
-
|
|
511
|
+
return !context.viewport ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
512
|
+
NavigationMenuContentImpl,
|
|
513
|
+
{
|
|
514
|
+
"data-state": getOpenState(open),
|
|
515
|
+
...commonProps,
|
|
518
516
|
ref: composedRefs,
|
|
519
|
-
onPointerEnter:
|
|
520
|
-
onPointerLeave:
|
|
517
|
+
onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, context.onContentEnter),
|
|
518
|
+
onPointerLeave: (0, import_primitive.composeEventHandlers)(
|
|
519
|
+
props.onPointerLeave,
|
|
520
|
+
whenMouse(context.onContentLeave)
|
|
521
|
+
),
|
|
521
522
|
style: {
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
523
|
+
// Prevent interaction when animating out
|
|
524
|
+
pointerEvents: !open && context.isRootMenu ? "none" : void 0,
|
|
525
|
+
...commonProps.style
|
|
525
526
|
}
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
});
|
|
543
|
-
}, [
|
|
544
|
-
props,
|
|
545
|
-
forwardedRef,
|
|
546
|
-
onViewportContentChange
|
|
547
|
-
]);
|
|
548
|
-
$6jHCS$radixuireactuselayouteffect.useLayoutEffect(()=>{
|
|
549
|
-
return ()=>onViewportContentRemove(props.value)
|
|
550
|
-
;
|
|
551
|
-
}, [
|
|
552
|
-
props.value,
|
|
553
|
-
onViewportContentRemove
|
|
554
|
-
]); // Content is proxied into the viewport
|
|
527
|
+
}
|
|
528
|
+
) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewportContentMounter, { forceMount, ...commonProps, ref: composedRefs });
|
|
529
|
+
});
|
|
530
|
+
NavigationMenuContent.displayName = CONTENT_NAME;
|
|
531
|
+
var ViewportContentMounter = React.forwardRef((props, forwardedRef) => {
|
|
532
|
+
const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);
|
|
533
|
+
const { onViewportContentChange, onViewportContentRemove } = context;
|
|
534
|
+
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
|
|
535
|
+
onViewportContentChange(props.value, {
|
|
536
|
+
ref: forwardedRef,
|
|
537
|
+
...props
|
|
538
|
+
});
|
|
539
|
+
}, [props, forwardedRef, onViewportContentChange]);
|
|
540
|
+
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
|
|
541
|
+
return () => onViewportContentRemove(props.value);
|
|
542
|
+
}, [props.value, onViewportContentRemove]);
|
|
555
543
|
return null;
|
|
556
|
-
});
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
const {
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
544
|
+
});
|
|
545
|
+
var ROOT_CONTENT_DISMISS = "navigationMenu.rootContentDismiss";
|
|
546
|
+
var NavigationMenuContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
547
|
+
const {
|
|
548
|
+
__scopeNavigationMenu,
|
|
549
|
+
value,
|
|
550
|
+
triggerRef,
|
|
551
|
+
focusProxyRef,
|
|
552
|
+
wasEscapeCloseRef,
|
|
553
|
+
onRootContentClose,
|
|
554
|
+
onContentFocusOutside,
|
|
555
|
+
...contentProps
|
|
556
|
+
} = props;
|
|
557
|
+
const context = useNavigationMenuContext(CONTENT_NAME, __scopeNavigationMenu);
|
|
558
|
+
const ref = React.useRef(null);
|
|
559
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(ref, forwardedRef);
|
|
560
|
+
const triggerId = makeTriggerId(context.baseId, value);
|
|
561
|
+
const contentId = makeContentId(context.baseId, value);
|
|
562
|
+
const getItems = useCollection(__scopeNavigationMenu);
|
|
563
|
+
const prevMotionAttributeRef = React.useRef(null);
|
|
564
|
+
const { onItemDismiss } = context;
|
|
565
|
+
React.useEffect(() => {
|
|
566
|
+
const content = ref.current;
|
|
567
|
+
if (context.isRootMenu && content) {
|
|
568
|
+
const handleClose = () => {
|
|
569
|
+
onItemDismiss();
|
|
570
|
+
onRootContentClose();
|
|
571
|
+
if (content.contains(document.activeElement)) triggerRef.current?.focus();
|
|
572
|
+
};
|
|
573
|
+
content.addEventListener(ROOT_CONTENT_DISMISS, handleClose);
|
|
574
|
+
return () => content.removeEventListener(ROOT_CONTENT_DISMISS, handleClose);
|
|
575
|
+
}
|
|
576
|
+
}, [context.isRootMenu, props.value, triggerRef, onItemDismiss, onRootContentClose]);
|
|
577
|
+
const motionAttribute = React.useMemo(() => {
|
|
578
|
+
const items = getItems();
|
|
579
|
+
const values = items.map((item) => item.value);
|
|
580
|
+
if (context.dir === "rtl") values.reverse();
|
|
581
|
+
const index = values.indexOf(context.value);
|
|
582
|
+
const prevIndex = values.indexOf(context.previousValue);
|
|
583
|
+
const isSelected = value === context.value;
|
|
584
|
+
const wasSelected = prevIndex === values.indexOf(value);
|
|
585
|
+
if (!isSelected && !wasSelected) return prevMotionAttributeRef.current;
|
|
586
|
+
const attribute = (() => {
|
|
587
|
+
if (index !== prevIndex) {
|
|
588
|
+
if (isSelected && prevIndex !== -1) return index > prevIndex ? "from-end" : "from-start";
|
|
589
|
+
if (wasSelected && index !== -1) return index > prevIndex ? "to-start" : "to-end";
|
|
580
590
|
}
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
const items = getItems();
|
|
590
|
-
const values = items.map((item)=>item.value
|
|
591
|
-
);
|
|
592
|
-
if (context.dir === 'rtl') values.reverse();
|
|
593
|
-
const index = values.indexOf(context.value);
|
|
594
|
-
const prevIndex = values.indexOf(context.previousValue);
|
|
595
|
-
const isSelected = value === context.value;
|
|
596
|
-
const wasSelected = prevIndex === values.indexOf(value); // We only want to update selected and the last selected content
|
|
597
|
-
// this avoids animations being interrupted outside of that range
|
|
598
|
-
if (!isSelected && !wasSelected) return prevMotionAttributeRef.current;
|
|
599
|
-
const attribute = (()=>{
|
|
600
|
-
// Don't provide a direction on the initial open
|
|
601
|
-
if (index !== prevIndex) {
|
|
602
|
-
// If we're moving to this item from another
|
|
603
|
-
if (isSelected && prevIndex !== -1) return index > prevIndex ? 'from-end' : 'from-start'; // If we're leaving this item for another
|
|
604
|
-
if (wasSelected && index !== -1) return index > prevIndex ? 'to-start' : 'to-end';
|
|
605
|
-
} // Otherwise we're entering from closed or leaving the list
|
|
606
|
-
// entirely and should not animate in any direction
|
|
607
|
-
return null;
|
|
608
|
-
})();
|
|
609
|
-
prevMotionAttributeRef.current = attribute;
|
|
610
|
-
return attribute;
|
|
611
|
-
}, [
|
|
612
|
-
context.previousValue,
|
|
613
|
-
context.value,
|
|
614
|
-
context.dir,
|
|
615
|
-
getItems,
|
|
616
|
-
value
|
|
617
|
-
]);
|
|
618
|
-
return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$FocusGroup, {
|
|
619
|
-
asChild: true
|
|
620
|
-
}, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactdismissablelayer.DismissableLayer, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({
|
|
591
|
+
return null;
|
|
592
|
+
})();
|
|
593
|
+
prevMotionAttributeRef.current = attribute;
|
|
594
|
+
return attribute;
|
|
595
|
+
}, [context.previousValue, context.value, context.dir, getItems, value]);
|
|
596
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroup, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
597
|
+
import_react_dismissable_layer.DismissableLayer,
|
|
598
|
+
{
|
|
621
599
|
id: contentId,
|
|
622
600
|
"aria-labelledby": triggerId,
|
|
623
601
|
"data-motion": motionAttribute,
|
|
624
|
-
"data-orientation": context.orientation
|
|
625
|
-
|
|
602
|
+
"data-orientation": context.orientation,
|
|
603
|
+
...contentProps,
|
|
626
604
|
ref: composedRefs,
|
|
627
605
|
disableOutsidePointerEvents: false,
|
|
628
|
-
onDismiss: ()=>{
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
(_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.dispatchEvent(rootContentDismissEvent);
|
|
606
|
+
onDismiss: () => {
|
|
607
|
+
const rootContentDismissEvent = new Event(ROOT_CONTENT_DISMISS, {
|
|
608
|
+
bubbles: true,
|
|
609
|
+
cancelable: true
|
|
610
|
+
});
|
|
611
|
+
ref.current?.dispatchEvent(rootContentDismissEvent);
|
|
635
612
|
},
|
|
636
|
-
onFocusOutside:
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
if ((_context$rootNavigati = context.rootNavigationMenu) !== null && _context$rootNavigati !== void 0 && _context$rootNavigati.contains(target)) event.preventDefault();
|
|
613
|
+
onFocusOutside: (0, import_primitive.composeEventHandlers)(props.onFocusOutside, (event) => {
|
|
614
|
+
onContentFocusOutside();
|
|
615
|
+
const target = event.target;
|
|
616
|
+
if (context.rootNavigationMenu?.contains(target)) event.preventDefault();
|
|
641
617
|
}),
|
|
642
|
-
onPointerDownOutside:
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
return (_item$ref$current = item.ref.current) === null || _item$ref$current === void 0 ? void 0 : _item$ref$current.contains(target);
|
|
648
|
-
});
|
|
649
|
-
const isRootViewport = context.isRootMenu && ((_context$viewport = context.viewport) === null || _context$viewport === void 0 ? void 0 : _context$viewport.contains(target));
|
|
650
|
-
if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault();
|
|
618
|
+
onPointerDownOutside: (0, import_primitive.composeEventHandlers)(props.onPointerDownOutside, (event) => {
|
|
619
|
+
const target = event.target;
|
|
620
|
+
const isTrigger = getItems().some((item) => item.ref.current?.contains(target));
|
|
621
|
+
const isRootViewport = context.isRootMenu && context.viewport?.contains(target);
|
|
622
|
+
if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault();
|
|
651
623
|
}),
|
|
652
|
-
onKeyDown:
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
var _focusProxyRef$curren;
|
|
666
|
-
// If we can't focus that means we're at the edges
|
|
667
|
-
// so focus the proxy and let browser handle
|
|
668
|
-
// tab/shift+tab keypress on the proxy instead
|
|
669
|
-
(_focusProxyRef$curren = focusProxyRef.current) === null || _focusProxyRef$curren === void 0 || _focusProxyRef$curren.focus();
|
|
670
|
-
}
|
|
624
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
625
|
+
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
|
|
626
|
+
const isTabKey = event.key === "Tab" && !isMetaKey;
|
|
627
|
+
if (isTabKey) {
|
|
628
|
+
const candidates = getTabbableCandidates(event.currentTarget);
|
|
629
|
+
const focusedElement = document.activeElement;
|
|
630
|
+
const index = candidates.findIndex((candidate) => candidate === focusedElement);
|
|
631
|
+
const isMovingBackwards = event.shiftKey;
|
|
632
|
+
const nextCandidates = isMovingBackwards ? candidates.slice(0, index).reverse() : candidates.slice(index + 1, candidates.length);
|
|
633
|
+
if (focusFirst(nextCandidates)) {
|
|
634
|
+
event.preventDefault();
|
|
635
|
+
} else {
|
|
636
|
+
focusProxyRef.current?.focus();
|
|
671
637
|
}
|
|
638
|
+
}
|
|
672
639
|
}),
|
|
673
|
-
onEscapeKeyDown:
|
|
674
|
-
|
|
675
|
-
// after the escape key has been pressed
|
|
676
|
-
wasEscapeCloseRef.current = true;
|
|
640
|
+
onEscapeKeyDown: (0, import_primitive.composeEventHandlers)(props.onEscapeKeyDown, (event) => {
|
|
641
|
+
wasEscapeCloseRef.current = true;
|
|
677
642
|
})
|
|
678
|
-
|
|
679
|
-
});
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
const
|
|
684
|
-
const
|
|
685
|
-
const
|
|
643
|
+
}
|
|
644
|
+
) });
|
|
645
|
+
});
|
|
646
|
+
var VIEWPORT_NAME = "NavigationMenuViewport";
|
|
647
|
+
var NavigationMenuViewport = React.forwardRef((props, forwardedRef) => {
|
|
648
|
+
const { forceMount, ...viewportProps } = props;
|
|
649
|
+
const context = useNavigationMenuContext(VIEWPORT_NAME, props.__scopeNavigationMenu);
|
|
650
|
+
const open = Boolean(context.value);
|
|
651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuViewportImpl, { ...viewportProps, ref: forwardedRef }) });
|
|
652
|
+
});
|
|
653
|
+
NavigationMenuViewport.displayName = VIEWPORT_NAME;
|
|
654
|
+
var NavigationMenuViewportImpl = React.forwardRef((props, forwardedRef) => {
|
|
655
|
+
const { __scopeNavigationMenu, children, ...viewportImplProps } = props;
|
|
656
|
+
const context = useNavigationMenuContext(VIEWPORT_NAME, __scopeNavigationMenu);
|
|
657
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.onViewportChange);
|
|
658
|
+
const viewportContentContext = useViewportContentContext(
|
|
659
|
+
CONTENT_NAME,
|
|
660
|
+
props.__scopeNavigationMenu
|
|
661
|
+
);
|
|
662
|
+
const [size, setSize] = React.useState(null);
|
|
663
|
+
const [content, setContent] = React.useState(null);
|
|
664
|
+
const viewportWidth = size ? size?.width + "px" : void 0;
|
|
665
|
+
const viewportHeight = size ? size?.height + "px" : void 0;
|
|
686
666
|
const open = Boolean(context.value);
|
|
687
|
-
return /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactpresence.Presence, {
|
|
688
|
-
present: forceMount || open
|
|
689
|
-
}, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$NavigationMenuViewportImpl, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({}, viewportProps, {
|
|
690
|
-
ref: forwardedRef
|
|
691
|
-
})));
|
|
692
|
-
});
|
|
693
|
-
/*#__PURE__*/ Object.assign($7f73b938b73b5118$export$ee880b97cc6d44a5, {
|
|
694
|
-
displayName: $7f73b938b73b5118$var$VIEWPORT_NAME
|
|
695
|
-
});
|
|
696
|
-
/* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$NavigationMenuViewportImpl = /*#__PURE__*/ $6jHCS$react.forwardRef((props1, forwardedRef)=>{
|
|
697
|
-
const { __scopeNavigationMenu: __scopeNavigationMenu , children: children , ...viewportImplProps } = props1;
|
|
698
|
-
const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$VIEWPORT_NAME, __scopeNavigationMenu);
|
|
699
|
-
const composedRefs = $6jHCS$radixuireactcomposerefs.useComposedRefs(forwardedRef, context.onViewportChange);
|
|
700
|
-
const viewportContentContext = $7f73b938b73b5118$var$useViewportContentContext($7f73b938b73b5118$var$CONTENT_NAME, props1.__scopeNavigationMenu);
|
|
701
|
-
const [size, setSize] = $6jHCS$react.useState(null);
|
|
702
|
-
const [content, setContent] = $6jHCS$react.useState(null);
|
|
703
|
-
const viewportWidth = size ? (size === null || size === void 0 ? void 0 : size.width) + 'px' : undefined;
|
|
704
|
-
const viewportHeight = size ? (size === null || size === void 0 ? void 0 : size.height) + 'px' : undefined;
|
|
705
|
-
const open = Boolean(context.value); // We persist the last active content value as the viewport may be animating out
|
|
706
|
-
// and we want the content to remain mounted for the lifecycle of the viewport.
|
|
707
667
|
const activeContentValue = open ? context.value : context.previousValue;
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
* We prefer offset dimensions over `getBoundingClientRect` as the latter respects CSS transform.
|
|
711
|
-
* For example, if content animates in from `scale(0.5)` the dimensions would be anything
|
|
712
|
-
* from `0.5` to `1` of the intended size.
|
|
713
|
-
*/ const handleSizeChange = ()=>{
|
|
714
|
-
if (content) setSize({
|
|
715
|
-
width: content.offsetWidth,
|
|
716
|
-
height: content.offsetHeight
|
|
717
|
-
});
|
|
668
|
+
const handleSizeChange = () => {
|
|
669
|
+
if (content) setSize({ width: content.offsetWidth, height: content.offsetHeight });
|
|
718
670
|
};
|
|
719
|
-
|
|
720
|
-
return
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
671
|
+
useResizeObserver(content, handleSizeChange);
|
|
672
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
673
|
+
import_react_primitive.Primitive.div,
|
|
674
|
+
{
|
|
675
|
+
"data-state": getOpenState(open),
|
|
676
|
+
"data-orientation": context.orientation,
|
|
677
|
+
...viewportImplProps,
|
|
724
678
|
ref: composedRefs,
|
|
725
679
|
style: {
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
680
|
+
// Prevent interaction when animating out
|
|
681
|
+
pointerEvents: !open && context.isRootMenu ? "none" : void 0,
|
|
682
|
+
["--radix-navigation-menu-viewport-width"]: viewportWidth,
|
|
683
|
+
["--radix-navigation-menu-viewport-height"]: viewportHeight,
|
|
684
|
+
...viewportImplProps.style
|
|
731
685
|
},
|
|
732
|
-
onPointerEnter:
|
|
733
|
-
onPointerLeave:
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
// We only want to update the stored node when another is available
|
|
742
|
-
// as we need to smoothly transition between them.
|
|
686
|
+
onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, context.onContentEnter),
|
|
687
|
+
onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, whenMouse(context.onContentLeave)),
|
|
688
|
+
children: Array.from(viewportContentContext.items).map(([value, { ref, forceMount, ...props2 }]) => {
|
|
689
|
+
const isActive = activeContentValue === value;
|
|
690
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || isActive, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
691
|
+
NavigationMenuContentImpl,
|
|
692
|
+
{
|
|
693
|
+
...props2,
|
|
694
|
+
ref: (0, import_react_compose_refs.composeRefs)(ref, (node) => {
|
|
743
695
|
if (isActive && node) setContent(node);
|
|
744
|
-
|
|
745
|
-
})));
|
|
746
|
-
}));
|
|
747
|
-
});
|
|
748
|
-
/* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$FOCUS_GROUP_NAME = 'FocusGroup';
|
|
749
|
-
const $7f73b938b73b5118$var$FocusGroup = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{
|
|
750
|
-
const { __scopeNavigationMenu: __scopeNavigationMenu , ...groupProps } = props;
|
|
751
|
-
const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$FOCUS_GROUP_NAME, __scopeNavigationMenu);
|
|
752
|
-
return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$FocusGroupCollection.Provider, {
|
|
753
|
-
scope: __scopeNavigationMenu
|
|
754
|
-
}, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$FocusGroupCollection.Slot, {
|
|
755
|
-
scope: __scopeNavigationMenu
|
|
756
|
-
}, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({
|
|
757
|
-
dir: context.dir
|
|
758
|
-
}, groupProps, {
|
|
759
|
-
ref: forwardedRef
|
|
760
|
-
}))));
|
|
761
|
-
});
|
|
762
|
-
/* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$ARROW_KEYS = [
|
|
763
|
-
'ArrowRight',
|
|
764
|
-
'ArrowLeft',
|
|
765
|
-
'ArrowUp',
|
|
766
|
-
'ArrowDown'
|
|
767
|
-
];
|
|
768
|
-
const $7f73b938b73b5118$var$FOCUS_GROUP_ITEM_NAME = 'FocusGroupItem';
|
|
769
|
-
const $7f73b938b73b5118$var$FocusGroupItem = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{
|
|
770
|
-
const { __scopeNavigationMenu: __scopeNavigationMenu , ...groupProps } = props;
|
|
771
|
-
const getItems = $7f73b938b73b5118$var$useFocusGroupCollection(__scopeNavigationMenu);
|
|
772
|
-
const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu);
|
|
773
|
-
return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$FocusGroupCollection.ItemSlot, {
|
|
774
|
-
scope: __scopeNavigationMenu
|
|
775
|
-
}, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({}, groupProps, {
|
|
776
|
-
ref: forwardedRef,
|
|
777
|
-
onKeyDown: $6jHCS$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{
|
|
778
|
-
const isFocusNavigationKey = [
|
|
779
|
-
'Home',
|
|
780
|
-
'End',
|
|
781
|
-
...$7f73b938b73b5118$var$ARROW_KEYS
|
|
782
|
-
].includes(event.key);
|
|
783
|
-
if (isFocusNavigationKey) {
|
|
784
|
-
let candidateNodes = getItems().map((item)=>item.ref.current
|
|
785
|
-
);
|
|
786
|
-
const prevItemKey = context.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
|
|
787
|
-
const prevKeys = [
|
|
788
|
-
prevItemKey,
|
|
789
|
-
'ArrowUp',
|
|
790
|
-
'End'
|
|
791
|
-
];
|
|
792
|
-
if (prevKeys.includes(event.key)) candidateNodes.reverse();
|
|
793
|
-
if ($7f73b938b73b5118$var$ARROW_KEYS.includes(event.key)) {
|
|
794
|
-
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
795
|
-
candidateNodes = candidateNodes.slice(currentIndex + 1);
|
|
796
|
-
}
|
|
797
|
-
/**
|
|
798
|
-
* Imperative focus during keydown is risky so we prevent React's batching updates
|
|
799
|
-
* to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
|
|
800
|
-
*/ setTimeout(()=>$7f73b938b73b5118$var$focusFirst(candidateNodes)
|
|
801
|
-
); // Prevent page scroll while navigating
|
|
802
|
-
event.preventDefault();
|
|
696
|
+
})
|
|
803
697
|
}
|
|
698
|
+
) }, value);
|
|
804
699
|
})
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
700
|
+
}
|
|
701
|
+
);
|
|
702
|
+
});
|
|
703
|
+
var FOCUS_GROUP_NAME = "FocusGroup";
|
|
704
|
+
var FocusGroup = React.forwardRef(
|
|
705
|
+
(props, forwardedRef) => {
|
|
706
|
+
const { __scopeNavigationMenu, ...groupProps } = props;
|
|
707
|
+
const context = useNavigationMenuContext(FOCUS_GROUP_NAME, __scopeNavigationMenu);
|
|
708
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupCollection.Provider, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupCollection.Slot, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { dir: context.dir, ...groupProps, ref: forwardedRef }) }) });
|
|
709
|
+
}
|
|
710
|
+
);
|
|
711
|
+
var ARROW_KEYS = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"];
|
|
712
|
+
var FOCUS_GROUP_ITEM_NAME = "FocusGroupItem";
|
|
713
|
+
var FocusGroupItem = React.forwardRef(
|
|
714
|
+
(props, forwardedRef) => {
|
|
715
|
+
const { __scopeNavigationMenu, ...groupProps } = props;
|
|
716
|
+
const getItems = useFocusGroupCollection(__scopeNavigationMenu);
|
|
717
|
+
const context = useNavigationMenuContext(FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu);
|
|
718
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupCollection.ItemSlot, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
719
|
+
import_react_primitive.Primitive.button,
|
|
720
|
+
{
|
|
721
|
+
...groupProps,
|
|
722
|
+
ref: forwardedRef,
|
|
723
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
724
|
+
const isFocusNavigationKey = ["Home", "End", ...ARROW_KEYS].includes(event.key);
|
|
725
|
+
if (isFocusNavigationKey) {
|
|
726
|
+
let candidateNodes = getItems().map((item) => item.ref.current);
|
|
727
|
+
const prevItemKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
|
|
728
|
+
const prevKeys = [prevItemKey, "ArrowUp", "End"];
|
|
729
|
+
if (prevKeys.includes(event.key)) candidateNodes.reverse();
|
|
730
|
+
if (ARROW_KEYS.includes(event.key)) {
|
|
731
|
+
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
732
|
+
candidateNodes = candidateNodes.slice(currentIndex + 1);
|
|
733
|
+
}
|
|
734
|
+
setTimeout(() => focusFirst(candidateNodes));
|
|
735
|
+
event.preventDefault();
|
|
736
|
+
}
|
|
737
|
+
})
|
|
738
|
+
}
|
|
739
|
+
) });
|
|
740
|
+
}
|
|
741
|
+
);
|
|
742
|
+
function getTabbableCandidates(container) {
|
|
817
743
|
const nodes = [];
|
|
818
744
|
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
825
|
-
}
|
|
745
|
+
acceptNode: (node) => {
|
|
746
|
+
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
|
|
747
|
+
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
|
|
748
|
+
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
749
|
+
}
|
|
826
750
|
});
|
|
827
|
-
while(walker.nextNode())nodes.push(walker.currentNode);
|
|
828
|
-
// hinders accessibility to have tab order different from visual order.
|
|
751
|
+
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
829
752
|
return nodes;
|
|
830
|
-
}
|
|
831
|
-
function
|
|
753
|
+
}
|
|
754
|
+
function focusFirst(candidates) {
|
|
832
755
|
const previouslyFocusedElement = document.activeElement;
|
|
833
|
-
return candidates.some((candidate)=>{
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
return document.activeElement !== previouslyFocusedElement;
|
|
756
|
+
return candidates.some((candidate) => {
|
|
757
|
+
if (candidate === previouslyFocusedElement) return true;
|
|
758
|
+
candidate.focus();
|
|
759
|
+
return document.activeElement !== previouslyFocusedElement;
|
|
838
760
|
});
|
|
839
|
-
}
|
|
840
|
-
function
|
|
841
|
-
candidates.forEach((candidate)=>{
|
|
842
|
-
|
|
843
|
-
|
|
761
|
+
}
|
|
762
|
+
function removeFromTabOrder(candidates) {
|
|
763
|
+
candidates.forEach((candidate) => {
|
|
764
|
+
candidate.dataset.tabindex = candidate.getAttribute("tabindex") || "";
|
|
765
|
+
candidate.setAttribute("tabindex", "-1");
|
|
844
766
|
});
|
|
845
|
-
return ()=>{
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
767
|
+
return () => {
|
|
768
|
+
candidates.forEach((candidate) => {
|
|
769
|
+
const prevTabIndex = candidate.dataset.tabindex;
|
|
770
|
+
candidate.setAttribute("tabindex", prevTabIndex);
|
|
771
|
+
});
|
|
850
772
|
};
|
|
851
|
-
}
|
|
852
|
-
function
|
|
853
|
-
const handleResize =
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
}, [
|
|
874
|
-
element,
|
|
875
|
-
handleResize
|
|
876
|
-
]);
|
|
877
|
-
}
|
|
878
|
-
function $7f73b938b73b5118$var$getOpenState(open) {
|
|
879
|
-
return open ? 'open' : 'closed';
|
|
880
|
-
}
|
|
881
|
-
function $7f73b938b73b5118$var$makeTriggerId(baseId, value) {
|
|
773
|
+
}
|
|
774
|
+
function useResizeObserver(element, onResize) {
|
|
775
|
+
const handleResize = (0, import_react_use_callback_ref.useCallbackRef)(onResize);
|
|
776
|
+
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
|
|
777
|
+
let rAF = 0;
|
|
778
|
+
if (element) {
|
|
779
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
780
|
+
cancelAnimationFrame(rAF);
|
|
781
|
+
rAF = window.requestAnimationFrame(handleResize);
|
|
782
|
+
});
|
|
783
|
+
resizeObserver.observe(element);
|
|
784
|
+
return () => {
|
|
785
|
+
window.cancelAnimationFrame(rAF);
|
|
786
|
+
resizeObserver.unobserve(element);
|
|
787
|
+
};
|
|
788
|
+
}
|
|
789
|
+
}, [element, handleResize]);
|
|
790
|
+
}
|
|
791
|
+
function getOpenState(open) {
|
|
792
|
+
return open ? "open" : "closed";
|
|
793
|
+
}
|
|
794
|
+
function makeTriggerId(baseId, value) {
|
|
882
795
|
return `${baseId}-trigger-${value}`;
|
|
883
|
-
}
|
|
884
|
-
function
|
|
796
|
+
}
|
|
797
|
+
function makeContentId(baseId, value) {
|
|
885
798
|
return `${baseId}-content-${value}`;
|
|
886
|
-
}
|
|
887
|
-
function
|
|
888
|
-
return (event)=>event.pointerType ===
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
799
|
+
}
|
|
800
|
+
function whenMouse(handler) {
|
|
801
|
+
return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
|
|
802
|
+
}
|
|
803
|
+
var Root2 = NavigationMenu;
|
|
804
|
+
var Sub = NavigationMenuSub;
|
|
805
|
+
var List = NavigationMenuList;
|
|
806
|
+
var Item = NavigationMenuItem;
|
|
807
|
+
var Trigger = NavigationMenuTrigger;
|
|
808
|
+
var Link = NavigationMenuLink;
|
|
809
|
+
var Indicator = NavigationMenuIndicator;
|
|
810
|
+
var Content = NavigationMenuContent;
|
|
811
|
+
var Viewport = NavigationMenuViewport;
|
|
812
|
+
})();
|
|
904
813
|
//# sourceMappingURL=index.js.map
|