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