@arc-ui/components 11.24.2 → 11.26.0
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/Button/Button.cjs.js +1 -1
- package/dist/Button/Button.esm.js +1 -1
- package/dist/DatePicker/DatePicker.cjs.js +1276 -22
- package/dist/DatePicker/DatePicker.esm.js +1245 -10
- package/dist/InformationCard/InformationCard.cjs.js +1 -1
- package/dist/InformationCard/InformationCard.esm.js +1 -1
- package/dist/Modal/Modal.cjs.js +438 -225
- package/dist/Modal/Modal.esm.js +420 -225
- package/dist/PaginationSimple/PaginationSimple.cjs.js +23 -2
- package/dist/PaginationSimple/PaginationSimple.esm.js +23 -2
- package/dist/Select/Select.cjs.js +1514 -1065
- package/dist/Select/Select.esm.js +1496 -1066
- package/dist/SiteHeader/SiteHeader.cjs.js +2 -2
- package/dist/SiteHeader/SiteHeader.esm.js +2 -2
- package/dist/SiteHeaderV2/SiteHeaderV2.cjs.js +2 -2
- package/dist/SiteHeaderV2/SiteHeaderV2.esm.js +2 -2
- package/dist/Tabs/Tabs.cjs.js +4 -6
- package/dist/Tabs/Tabs.esm.js +4 -6
- package/dist/TextArea/TextArea.cjs.js +10 -13
- package/dist/TextArea/TextArea.esm.js +10 -13
- package/dist/Toast/Toast.cjs.js +4 -6
- package/dist/Toast/Toast.esm.js +4 -6
- package/dist/UniversalHeader/UniversalHeader.cjs.js +2 -2
- package/dist/UniversalHeader/UniversalHeader.esm.js +2 -2
- package/dist/_shared/cjs/{Button-6ba21d3b.js → Button-5b28f0ce.js} +3 -3
- package/dist/_shared/cjs/{SiteHeader.rehydrator-9d8f3dad.js → SiteHeader.rehydrator-8fa9d174.js} +1 -1
- package/dist/_shared/cjs/{SiteHeaderV2-ce1c8737.js → SiteHeaderV2-ca2f13a8.js} +1 -1
- package/dist/_shared/cjs/{Tabs-bc9fac46.js → Tabs-89455281.js} +19 -15
- package/dist/_shared/cjs/{Toast-26207fef.js → Toast-c760c89d.js} +32 -14
- package/dist/_shared/cjs/{UniversalHeader-b8389447.js → UniversalHeader-73e154eb.js} +6 -2
- package/dist/_shared/cjs/component-4979b2e7.js +409 -0
- package/dist/_shared/cjs/{index-77ab5c6a.js → floating-ui.react-dom-08b8b87c.js} +12 -284
- package/dist/_shared/cjs/index-1efbba95.js +1252 -0
- package/dist/_shared/cjs/{index-74004a9c.js → index-4edec793.js} +1 -1
- package/dist/_shared/cjs/{index-dd1d18ea.js → index-7641213c.js} +127 -2
- package/dist/_shared/cjs/{index-9f99d686.js → index-af744fa9.js} +1 -1
- package/dist/_shared/cjs/{index-6eb396a3.js → index-fb0cad18.js} +1 -1
- package/dist/_shared/esm/{Button-a7d134c6.js → Button-5b48b7ce.js} +3 -3
- package/dist/_shared/esm/{SiteHeader.rehydrator-2ec02ee7.js → SiteHeader.rehydrator-8f3c5d6e.js} +1 -1
- package/dist/_shared/esm/{SiteHeaderV2-a7c1b1cb.js → SiteHeaderV2-cb081752.js} +1 -1
- package/dist/_shared/esm/{Tabs-9485cab6.js → Tabs-959e885d.js} +10 -6
- package/dist/_shared/esm/{Toast-fcbfc194.js → Toast-a590067d.js} +25 -7
- package/dist/_shared/esm/{UniversalHeader-80c7313f.js → UniversalHeader-96bfbacc.js} +6 -2
- package/dist/_shared/esm/component-d7b471ff.js +382 -0
- package/dist/_shared/esm/{index-b84a20c6.js → floating-ui.react-dom-1bb71aae.js} +4 -281
- package/dist/_shared/esm/{index-7b531fa7.js → index-0ae23b06.js} +126 -2
- package/dist/_shared/esm/index-307f1bbc.js +1212 -0
- package/dist/_shared/esm/{index-044da8d0.js → index-9e54cc7d.js} +1 -1
- package/dist/_shared/esm/{index-efa9be1a.js → index-af7b6e55.js} +1 -1
- package/dist/_shared/esm/{index-2cfab9f2.js → index-ebe72f34.js} +1 -1
- package/dist/index.es.js +3608 -2938
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +3591 -2921
- package/dist/index.js.map +1 -1
- package/dist/styles.css +2 -2
- package/dist/types/components/Button/Button.d.ts +12 -0
- package/dist/types/components/PaginationSimple/PaginationSimple.d.ts +28 -0
- package/dist/types/components/UniversalHeader/UniversalHeader.d.ts +4 -0
- package/package.json +3 -3
- package/dist/_shared/cjs/Combination-9974f2e2.js +0 -1330
- package/dist/_shared/cjs/index-a31e64a9.js +0 -27
- package/dist/_shared/cjs/index-d38f1bd0.js +0 -131
- package/dist/_shared/cjs/index-dcfdd5da.js +0 -11
- package/dist/_shared/esm/Combination-e9f7e64e.js +0 -1301
- package/dist/_shared/esm/index-25a5b393.js +0 -25
- package/dist/_shared/esm/index-a624de47.js +0 -9
- package/dist/_shared/esm/index-ca72c9d5.js +0 -129
|
@@ -0,0 +1,1212 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
import * as ReactDOM from 'react-dom';
|
|
4
|
+
import ReactDOM__default from 'react-dom';
|
|
5
|
+
import { _ as __rest, a as __assign, b as __spreadArray } from './filter-data-attrs-ea8f4ed4.js';
|
|
6
|
+
import { c as createSidecarMedium, u as useMergeRefs, f as fullWidthClassName, z as zeroRightClassName, s as styleSingleton, R as RemoveScrollBar, e as exportSidecar } from './component-d7b471ff.js';
|
|
7
|
+
|
|
8
|
+
// packages/core/primitive/src/primitive.tsx
|
|
9
|
+
function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
|
|
10
|
+
return function handleEvent(event) {
|
|
11
|
+
originalEventHandler?.(event);
|
|
12
|
+
if (checkForDefaultPrevented === false || !event.defaultPrevented) {
|
|
13
|
+
return ourEventHandler?.(event);
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// packages/react/compose-refs/src/composeRefs.tsx
|
|
19
|
+
function setRef(ref, value) {
|
|
20
|
+
if (typeof ref === "function") {
|
|
21
|
+
return ref(value);
|
|
22
|
+
} else if (ref !== null && ref !== void 0) {
|
|
23
|
+
ref.current = value;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
function composeRefs(...refs) {
|
|
27
|
+
return (node) => {
|
|
28
|
+
let hasCleanup = false;
|
|
29
|
+
const cleanups = refs.map((ref) => {
|
|
30
|
+
const cleanup = setRef(ref, node);
|
|
31
|
+
if (!hasCleanup && typeof cleanup == "function") {
|
|
32
|
+
hasCleanup = true;
|
|
33
|
+
}
|
|
34
|
+
return cleanup;
|
|
35
|
+
});
|
|
36
|
+
if (hasCleanup) {
|
|
37
|
+
return () => {
|
|
38
|
+
for (let i = 0; i < cleanups.length; i++) {
|
|
39
|
+
const cleanup = cleanups[i];
|
|
40
|
+
if (typeof cleanup == "function") {
|
|
41
|
+
cleanup();
|
|
42
|
+
} else {
|
|
43
|
+
setRef(refs[i], null);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
function useComposedRefs(...refs) {
|
|
51
|
+
return React.useCallback(composeRefs(...refs), refs);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// packages/react/context/src/createContext.tsx
|
|
55
|
+
function createContext2(rootComponentName, defaultContext) {
|
|
56
|
+
const Context = React.createContext(defaultContext);
|
|
57
|
+
const Provider = (props) => {
|
|
58
|
+
const { children, ...context } = props;
|
|
59
|
+
const value = React.useMemo(() => context, Object.values(context));
|
|
60
|
+
return /* @__PURE__ */ jsx(Context.Provider, { value, children });
|
|
61
|
+
};
|
|
62
|
+
Provider.displayName = rootComponentName + "Provider";
|
|
63
|
+
function useContext2(consumerName) {
|
|
64
|
+
const context = React.useContext(Context);
|
|
65
|
+
if (context) return context;
|
|
66
|
+
if (defaultContext !== void 0) return defaultContext;
|
|
67
|
+
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
|
|
68
|
+
}
|
|
69
|
+
return [Provider, useContext2];
|
|
70
|
+
}
|
|
71
|
+
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
72
|
+
let defaultContexts = [];
|
|
73
|
+
function createContext3(rootComponentName, defaultContext) {
|
|
74
|
+
const BaseContext = React.createContext(defaultContext);
|
|
75
|
+
const index = defaultContexts.length;
|
|
76
|
+
defaultContexts = [...defaultContexts, defaultContext];
|
|
77
|
+
const Provider = (props) => {
|
|
78
|
+
const { scope, children, ...context } = props;
|
|
79
|
+
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
80
|
+
const value = React.useMemo(() => context, Object.values(context));
|
|
81
|
+
return /* @__PURE__ */ jsx(Context.Provider, { value, children });
|
|
82
|
+
};
|
|
83
|
+
Provider.displayName = rootComponentName + "Provider";
|
|
84
|
+
function useContext2(consumerName, scope) {
|
|
85
|
+
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
86
|
+
const context = React.useContext(Context);
|
|
87
|
+
if (context) return context;
|
|
88
|
+
if (defaultContext !== void 0) return defaultContext;
|
|
89
|
+
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
|
|
90
|
+
}
|
|
91
|
+
return [Provider, useContext2];
|
|
92
|
+
}
|
|
93
|
+
const createScope = () => {
|
|
94
|
+
const scopeContexts = defaultContexts.map((defaultContext) => {
|
|
95
|
+
return React.createContext(defaultContext);
|
|
96
|
+
});
|
|
97
|
+
return function useScope(scope) {
|
|
98
|
+
const contexts = scope?.[scopeName] || scopeContexts;
|
|
99
|
+
return React.useMemo(
|
|
100
|
+
() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
|
|
101
|
+
[scope, contexts]
|
|
102
|
+
);
|
|
103
|
+
};
|
|
104
|
+
};
|
|
105
|
+
createScope.scopeName = scopeName;
|
|
106
|
+
return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
|
|
107
|
+
}
|
|
108
|
+
function composeContextScopes(...scopes) {
|
|
109
|
+
const baseScope = scopes[0];
|
|
110
|
+
if (scopes.length === 1) return baseScope;
|
|
111
|
+
const createScope = () => {
|
|
112
|
+
const scopeHooks = scopes.map((createScope2) => ({
|
|
113
|
+
useScope: createScope2(),
|
|
114
|
+
scopeName: createScope2.scopeName
|
|
115
|
+
}));
|
|
116
|
+
return function useComposedScopes(overrideScopes) {
|
|
117
|
+
const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
|
|
118
|
+
const scopeProps = useScope(overrideScopes);
|
|
119
|
+
const currentScope = scopeProps[`__scope${scopeName}`];
|
|
120
|
+
return { ...nextScopes2, ...currentScope };
|
|
121
|
+
}, {});
|
|
122
|
+
return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
|
|
123
|
+
};
|
|
124
|
+
};
|
|
125
|
+
createScope.scopeName = baseScope.scopeName;
|
|
126
|
+
return createScope;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// packages/react/use-layout-effect/src/useLayoutEffect.tsx
|
|
130
|
+
var useLayoutEffect2 = Boolean(globalThis?.document) ? React.useLayoutEffect : () => {
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
// packages/react/id/src/id.tsx
|
|
134
|
+
var useReactId = React["useId".toString()] || (() => void 0);
|
|
135
|
+
var count$1 = 0;
|
|
136
|
+
function useId(deterministicId) {
|
|
137
|
+
const [id, setId] = React.useState(useReactId());
|
|
138
|
+
useLayoutEffect2(() => {
|
|
139
|
+
if (!deterministicId) setId((reactId) => reactId ?? String(count$1++));
|
|
140
|
+
}, [deterministicId]);
|
|
141
|
+
return deterministicId || (id ? `radix-${id}` : "");
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// packages/react/use-callback-ref/src/useCallbackRef.tsx
|
|
145
|
+
function useCallbackRef(callback) {
|
|
146
|
+
const callbackRef = React.useRef(callback);
|
|
147
|
+
React.useEffect(() => {
|
|
148
|
+
callbackRef.current = callback;
|
|
149
|
+
});
|
|
150
|
+
return React.useMemo(() => (...args) => callbackRef.current?.(...args), []);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
// packages/react/use-controllable-state/src/useControllableState.tsx
|
|
154
|
+
function useControllableState({
|
|
155
|
+
prop,
|
|
156
|
+
defaultProp,
|
|
157
|
+
onChange = () => {
|
|
158
|
+
}
|
|
159
|
+
}) {
|
|
160
|
+
const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
|
|
161
|
+
const isControlled = prop !== void 0;
|
|
162
|
+
const value = isControlled ? prop : uncontrolledProp;
|
|
163
|
+
const handleChange = useCallbackRef(onChange);
|
|
164
|
+
const setValue = React.useCallback(
|
|
165
|
+
(nextValue) => {
|
|
166
|
+
if (isControlled) {
|
|
167
|
+
const setter = nextValue;
|
|
168
|
+
const value2 = typeof nextValue === "function" ? setter(prop) : nextValue;
|
|
169
|
+
if (value2 !== prop) handleChange(value2);
|
|
170
|
+
} else {
|
|
171
|
+
setUncontrolledProp(nextValue);
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
[isControlled, prop, setUncontrolledProp, handleChange]
|
|
175
|
+
);
|
|
176
|
+
return [value, setValue];
|
|
177
|
+
}
|
|
178
|
+
function useUncontrolledState({
|
|
179
|
+
defaultProp,
|
|
180
|
+
onChange
|
|
181
|
+
}) {
|
|
182
|
+
const uncontrolledState = React.useState(defaultProp);
|
|
183
|
+
const [value] = uncontrolledState;
|
|
184
|
+
const prevValueRef = React.useRef(value);
|
|
185
|
+
const handleChange = useCallbackRef(onChange);
|
|
186
|
+
React.useEffect(() => {
|
|
187
|
+
if (prevValueRef.current !== value) {
|
|
188
|
+
handleChange(value);
|
|
189
|
+
prevValueRef.current = value;
|
|
190
|
+
}
|
|
191
|
+
}, [value, prevValueRef, handleChange]);
|
|
192
|
+
return uncontrolledState;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
// packages/react/slot/src/slot.tsx
|
|
196
|
+
var Slot = React.forwardRef((props, forwardedRef) => {
|
|
197
|
+
const { children, ...slotProps } = props;
|
|
198
|
+
const childrenArray = React.Children.toArray(children);
|
|
199
|
+
const slottable = childrenArray.find(isSlottable);
|
|
200
|
+
if (slottable) {
|
|
201
|
+
const newElement = slottable.props.children;
|
|
202
|
+
const newChildren = childrenArray.map((child) => {
|
|
203
|
+
if (child === slottable) {
|
|
204
|
+
if (React.Children.count(newElement) > 1) return React.Children.only(null);
|
|
205
|
+
return React.isValidElement(newElement) ? newElement.props.children : null;
|
|
206
|
+
} else {
|
|
207
|
+
return child;
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
|
|
211
|
+
}
|
|
212
|
+
return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
|
|
213
|
+
});
|
|
214
|
+
Slot.displayName = "Slot";
|
|
215
|
+
var SlotClone = React.forwardRef((props, forwardedRef) => {
|
|
216
|
+
const { children, ...slotProps } = props;
|
|
217
|
+
if (React.isValidElement(children)) {
|
|
218
|
+
const childrenRef = getElementRef(children);
|
|
219
|
+
const props2 = mergeProps(slotProps, children.props);
|
|
220
|
+
if (children.type !== React.Fragment) {
|
|
221
|
+
props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
|
|
222
|
+
}
|
|
223
|
+
return React.cloneElement(children, props2);
|
|
224
|
+
}
|
|
225
|
+
return React.Children.count(children) > 1 ? React.Children.only(null) : null;
|
|
226
|
+
});
|
|
227
|
+
SlotClone.displayName = "SlotClone";
|
|
228
|
+
var Slottable = ({ children }) => {
|
|
229
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
230
|
+
};
|
|
231
|
+
function isSlottable(child) {
|
|
232
|
+
return React.isValidElement(child) && child.type === Slottable;
|
|
233
|
+
}
|
|
234
|
+
function mergeProps(slotProps, childProps) {
|
|
235
|
+
const overrideProps = { ...childProps };
|
|
236
|
+
for (const propName in childProps) {
|
|
237
|
+
const slotPropValue = slotProps[propName];
|
|
238
|
+
const childPropValue = childProps[propName];
|
|
239
|
+
const isHandler = /^on[A-Z]/.test(propName);
|
|
240
|
+
if (isHandler) {
|
|
241
|
+
if (slotPropValue && childPropValue) {
|
|
242
|
+
overrideProps[propName] = (...args) => {
|
|
243
|
+
childPropValue(...args);
|
|
244
|
+
slotPropValue(...args);
|
|
245
|
+
};
|
|
246
|
+
} else if (slotPropValue) {
|
|
247
|
+
overrideProps[propName] = slotPropValue;
|
|
248
|
+
}
|
|
249
|
+
} else if (propName === "style") {
|
|
250
|
+
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
|
|
251
|
+
} else if (propName === "className") {
|
|
252
|
+
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
return { ...slotProps, ...overrideProps };
|
|
256
|
+
}
|
|
257
|
+
function getElementRef(element) {
|
|
258
|
+
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
|
259
|
+
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
260
|
+
if (mayWarn) {
|
|
261
|
+
return element.ref;
|
|
262
|
+
}
|
|
263
|
+
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
|
264
|
+
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
265
|
+
if (mayWarn) {
|
|
266
|
+
return element.props.ref;
|
|
267
|
+
}
|
|
268
|
+
return element.props.ref || element.ref;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
// packages/react/primitive/src/primitive.tsx
|
|
272
|
+
var NODES = [
|
|
273
|
+
"a",
|
|
274
|
+
"button",
|
|
275
|
+
"div",
|
|
276
|
+
"form",
|
|
277
|
+
"h2",
|
|
278
|
+
"h3",
|
|
279
|
+
"img",
|
|
280
|
+
"input",
|
|
281
|
+
"label",
|
|
282
|
+
"li",
|
|
283
|
+
"nav",
|
|
284
|
+
"ol",
|
|
285
|
+
"p",
|
|
286
|
+
"span",
|
|
287
|
+
"svg",
|
|
288
|
+
"ul"
|
|
289
|
+
];
|
|
290
|
+
var Primitive = NODES.reduce((primitive, node) => {
|
|
291
|
+
const Node = React.forwardRef((props, forwardedRef) => {
|
|
292
|
+
const { asChild, ...primitiveProps } = props;
|
|
293
|
+
const Comp = asChild ? Slot : node;
|
|
294
|
+
if (typeof window !== "undefined") {
|
|
295
|
+
window[Symbol.for("radix-ui")] = true;
|
|
296
|
+
}
|
|
297
|
+
return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
298
|
+
});
|
|
299
|
+
Node.displayName = `Primitive.${node}`;
|
|
300
|
+
return { ...primitive, [node]: Node };
|
|
301
|
+
}, {});
|
|
302
|
+
function dispatchDiscreteCustomEvent(target, event) {
|
|
303
|
+
if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
// packages/react/use-escape-keydown/src/useEscapeKeydown.tsx
|
|
307
|
+
function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
|
|
308
|
+
const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
|
|
309
|
+
React.useEffect(() => {
|
|
310
|
+
const handleKeyDown = (event) => {
|
|
311
|
+
if (event.key === "Escape") {
|
|
312
|
+
onEscapeKeyDown(event);
|
|
313
|
+
}
|
|
314
|
+
};
|
|
315
|
+
ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
|
|
316
|
+
return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
|
|
317
|
+
}, [onEscapeKeyDown, ownerDocument]);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
var DISMISSABLE_LAYER_NAME = "DismissableLayer";
|
|
321
|
+
var CONTEXT_UPDATE = "dismissableLayer.update";
|
|
322
|
+
var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
|
|
323
|
+
var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
|
|
324
|
+
var originalBodyPointerEvents;
|
|
325
|
+
var DismissableLayerContext = React.createContext({
|
|
326
|
+
layers: /* @__PURE__ */ new Set(),
|
|
327
|
+
layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
|
|
328
|
+
branches: /* @__PURE__ */ new Set()
|
|
329
|
+
});
|
|
330
|
+
var DismissableLayer = React.forwardRef(
|
|
331
|
+
(props, forwardedRef) => {
|
|
332
|
+
const {
|
|
333
|
+
disableOutsidePointerEvents = false,
|
|
334
|
+
onEscapeKeyDown,
|
|
335
|
+
onPointerDownOutside,
|
|
336
|
+
onFocusOutside,
|
|
337
|
+
onInteractOutside,
|
|
338
|
+
onDismiss,
|
|
339
|
+
...layerProps
|
|
340
|
+
} = props;
|
|
341
|
+
const context = React.useContext(DismissableLayerContext);
|
|
342
|
+
const [node, setNode] = React.useState(null);
|
|
343
|
+
const ownerDocument = node?.ownerDocument ?? globalThis?.document;
|
|
344
|
+
const [, force] = React.useState({});
|
|
345
|
+
const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
|
|
346
|
+
const layers = Array.from(context.layers);
|
|
347
|
+
const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
|
|
348
|
+
const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
|
|
349
|
+
const index = node ? layers.indexOf(node) : -1;
|
|
350
|
+
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
|
|
351
|
+
const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
|
|
352
|
+
const pointerDownOutside = usePointerDownOutside((event) => {
|
|
353
|
+
const target = event.target;
|
|
354
|
+
const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
|
|
355
|
+
if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
|
|
356
|
+
onPointerDownOutside?.(event);
|
|
357
|
+
onInteractOutside?.(event);
|
|
358
|
+
if (!event.defaultPrevented) onDismiss?.();
|
|
359
|
+
}, ownerDocument);
|
|
360
|
+
const focusOutside = useFocusOutside((event) => {
|
|
361
|
+
const target = event.target;
|
|
362
|
+
const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
|
|
363
|
+
if (isFocusInBranch) return;
|
|
364
|
+
onFocusOutside?.(event);
|
|
365
|
+
onInteractOutside?.(event);
|
|
366
|
+
if (!event.defaultPrevented) onDismiss?.();
|
|
367
|
+
}, ownerDocument);
|
|
368
|
+
useEscapeKeydown((event) => {
|
|
369
|
+
const isHighestLayer = index === context.layers.size - 1;
|
|
370
|
+
if (!isHighestLayer) return;
|
|
371
|
+
onEscapeKeyDown?.(event);
|
|
372
|
+
if (!event.defaultPrevented && onDismiss) {
|
|
373
|
+
event.preventDefault();
|
|
374
|
+
onDismiss();
|
|
375
|
+
}
|
|
376
|
+
}, ownerDocument);
|
|
377
|
+
React.useEffect(() => {
|
|
378
|
+
if (!node) return;
|
|
379
|
+
if (disableOutsidePointerEvents) {
|
|
380
|
+
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
|
|
381
|
+
originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
|
|
382
|
+
ownerDocument.body.style.pointerEvents = "none";
|
|
383
|
+
}
|
|
384
|
+
context.layersWithOutsidePointerEventsDisabled.add(node);
|
|
385
|
+
}
|
|
386
|
+
context.layers.add(node);
|
|
387
|
+
dispatchUpdate();
|
|
388
|
+
return () => {
|
|
389
|
+
if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
|
|
390
|
+
ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
|
|
391
|
+
}
|
|
392
|
+
};
|
|
393
|
+
}, [node, ownerDocument, disableOutsidePointerEvents, context]);
|
|
394
|
+
React.useEffect(() => {
|
|
395
|
+
return () => {
|
|
396
|
+
if (!node) return;
|
|
397
|
+
context.layers.delete(node);
|
|
398
|
+
context.layersWithOutsidePointerEventsDisabled.delete(node);
|
|
399
|
+
dispatchUpdate();
|
|
400
|
+
};
|
|
401
|
+
}, [node, context]);
|
|
402
|
+
React.useEffect(() => {
|
|
403
|
+
const handleUpdate = () => force({});
|
|
404
|
+
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
405
|
+
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
406
|
+
}, []);
|
|
407
|
+
return /* @__PURE__ */ jsx(
|
|
408
|
+
Primitive.div,
|
|
409
|
+
{
|
|
410
|
+
...layerProps,
|
|
411
|
+
ref: composedRefs,
|
|
412
|
+
style: {
|
|
413
|
+
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
|
|
414
|
+
...props.style
|
|
415
|
+
},
|
|
416
|
+
onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
|
|
417
|
+
onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
|
|
418
|
+
onPointerDownCapture: composeEventHandlers(
|
|
419
|
+
props.onPointerDownCapture,
|
|
420
|
+
pointerDownOutside.onPointerDownCapture
|
|
421
|
+
)
|
|
422
|
+
}
|
|
423
|
+
);
|
|
424
|
+
}
|
|
425
|
+
);
|
|
426
|
+
DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
|
|
427
|
+
var BRANCH_NAME = "DismissableLayerBranch";
|
|
428
|
+
var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => {
|
|
429
|
+
const context = React.useContext(DismissableLayerContext);
|
|
430
|
+
const ref = React.useRef(null);
|
|
431
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
432
|
+
React.useEffect(() => {
|
|
433
|
+
const node = ref.current;
|
|
434
|
+
if (node) {
|
|
435
|
+
context.branches.add(node);
|
|
436
|
+
return () => {
|
|
437
|
+
context.branches.delete(node);
|
|
438
|
+
};
|
|
439
|
+
}
|
|
440
|
+
}, [context.branches]);
|
|
441
|
+
return /* @__PURE__ */ jsx(Primitive.div, { ...props, ref: composedRefs });
|
|
442
|
+
});
|
|
443
|
+
DismissableLayerBranch.displayName = BRANCH_NAME;
|
|
444
|
+
function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
|
|
445
|
+
const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
|
|
446
|
+
const isPointerInsideReactTreeRef = React.useRef(false);
|
|
447
|
+
const handleClickRef = React.useRef(() => {
|
|
448
|
+
});
|
|
449
|
+
React.useEffect(() => {
|
|
450
|
+
const handlePointerDown = (event) => {
|
|
451
|
+
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
452
|
+
let handleAndDispatchPointerDownOutsideEvent2 = function() {
|
|
453
|
+
handleAndDispatchCustomEvent(
|
|
454
|
+
POINTER_DOWN_OUTSIDE,
|
|
455
|
+
handlePointerDownOutside,
|
|
456
|
+
eventDetail,
|
|
457
|
+
{ discrete: true }
|
|
458
|
+
);
|
|
459
|
+
};
|
|
460
|
+
const eventDetail = { originalEvent: event };
|
|
461
|
+
if (event.pointerType === "touch") {
|
|
462
|
+
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
463
|
+
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
|
|
464
|
+
ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
|
|
465
|
+
} else {
|
|
466
|
+
handleAndDispatchPointerDownOutsideEvent2();
|
|
467
|
+
}
|
|
468
|
+
} else {
|
|
469
|
+
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
470
|
+
}
|
|
471
|
+
isPointerInsideReactTreeRef.current = false;
|
|
472
|
+
};
|
|
473
|
+
const timerId = window.setTimeout(() => {
|
|
474
|
+
ownerDocument.addEventListener("pointerdown", handlePointerDown);
|
|
475
|
+
}, 0);
|
|
476
|
+
return () => {
|
|
477
|
+
window.clearTimeout(timerId);
|
|
478
|
+
ownerDocument.removeEventListener("pointerdown", handlePointerDown);
|
|
479
|
+
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
480
|
+
};
|
|
481
|
+
}, [ownerDocument, handlePointerDownOutside]);
|
|
482
|
+
return {
|
|
483
|
+
// ensures we check React component tree (not just DOM tree)
|
|
484
|
+
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
|
|
485
|
+
};
|
|
486
|
+
}
|
|
487
|
+
function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
|
|
488
|
+
const handleFocusOutside = useCallbackRef(onFocusOutside);
|
|
489
|
+
const isFocusInsideReactTreeRef = React.useRef(false);
|
|
490
|
+
React.useEffect(() => {
|
|
491
|
+
const handleFocus = (event) => {
|
|
492
|
+
if (event.target && !isFocusInsideReactTreeRef.current) {
|
|
493
|
+
const eventDetail = { originalEvent: event };
|
|
494
|
+
handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
|
|
495
|
+
discrete: false
|
|
496
|
+
});
|
|
497
|
+
}
|
|
498
|
+
};
|
|
499
|
+
ownerDocument.addEventListener("focusin", handleFocus);
|
|
500
|
+
return () => ownerDocument.removeEventListener("focusin", handleFocus);
|
|
501
|
+
}, [ownerDocument, handleFocusOutside]);
|
|
502
|
+
return {
|
|
503
|
+
onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
|
|
504
|
+
onBlurCapture: () => isFocusInsideReactTreeRef.current = false
|
|
505
|
+
};
|
|
506
|
+
}
|
|
507
|
+
function dispatchUpdate() {
|
|
508
|
+
const event = new CustomEvent(CONTEXT_UPDATE);
|
|
509
|
+
document.dispatchEvent(event);
|
|
510
|
+
}
|
|
511
|
+
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
512
|
+
const target = detail.originalEvent.target;
|
|
513
|
+
const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
|
|
514
|
+
if (handler) target.addEventListener(name, handler, { once: true });
|
|
515
|
+
if (discrete) {
|
|
516
|
+
dispatchDiscreteCustomEvent(target, event);
|
|
517
|
+
} else {
|
|
518
|
+
target.dispatchEvent(event);
|
|
519
|
+
}
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
|
|
523
|
+
var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
|
|
524
|
+
var EVENT_OPTIONS = { bubbles: false, cancelable: true };
|
|
525
|
+
var FOCUS_SCOPE_NAME = "FocusScope";
|
|
526
|
+
var FocusScope = React.forwardRef((props, forwardedRef) => {
|
|
527
|
+
const {
|
|
528
|
+
loop = false,
|
|
529
|
+
trapped = false,
|
|
530
|
+
onMountAutoFocus: onMountAutoFocusProp,
|
|
531
|
+
onUnmountAutoFocus: onUnmountAutoFocusProp,
|
|
532
|
+
...scopeProps
|
|
533
|
+
} = props;
|
|
534
|
+
const [container, setContainer] = React.useState(null);
|
|
535
|
+
const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
|
|
536
|
+
const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
|
|
537
|
+
const lastFocusedElementRef = React.useRef(null);
|
|
538
|
+
const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));
|
|
539
|
+
const focusScope = React.useRef({
|
|
540
|
+
paused: false,
|
|
541
|
+
pause() {
|
|
542
|
+
this.paused = true;
|
|
543
|
+
},
|
|
544
|
+
resume() {
|
|
545
|
+
this.paused = false;
|
|
546
|
+
}
|
|
547
|
+
}).current;
|
|
548
|
+
React.useEffect(() => {
|
|
549
|
+
if (trapped) {
|
|
550
|
+
let handleFocusIn2 = function(event) {
|
|
551
|
+
if (focusScope.paused || !container) return;
|
|
552
|
+
const target = event.target;
|
|
553
|
+
if (container.contains(target)) {
|
|
554
|
+
lastFocusedElementRef.current = target;
|
|
555
|
+
} else {
|
|
556
|
+
focus(lastFocusedElementRef.current, { select: true });
|
|
557
|
+
}
|
|
558
|
+
}, handleFocusOut2 = function(event) {
|
|
559
|
+
if (focusScope.paused || !container) return;
|
|
560
|
+
const relatedTarget = event.relatedTarget;
|
|
561
|
+
if (relatedTarget === null) return;
|
|
562
|
+
if (!container.contains(relatedTarget)) {
|
|
563
|
+
focus(lastFocusedElementRef.current, { select: true });
|
|
564
|
+
}
|
|
565
|
+
}, handleMutations2 = function(mutations) {
|
|
566
|
+
const focusedElement = document.activeElement;
|
|
567
|
+
if (focusedElement !== document.body) return;
|
|
568
|
+
for (const mutation of mutations) {
|
|
569
|
+
if (mutation.removedNodes.length > 0) focus(container);
|
|
570
|
+
}
|
|
571
|
+
};
|
|
572
|
+
document.addEventListener("focusin", handleFocusIn2);
|
|
573
|
+
document.addEventListener("focusout", handleFocusOut2);
|
|
574
|
+
const mutationObserver = new MutationObserver(handleMutations2);
|
|
575
|
+
if (container) mutationObserver.observe(container, { childList: true, subtree: true });
|
|
576
|
+
return () => {
|
|
577
|
+
document.removeEventListener("focusin", handleFocusIn2);
|
|
578
|
+
document.removeEventListener("focusout", handleFocusOut2);
|
|
579
|
+
mutationObserver.disconnect();
|
|
580
|
+
};
|
|
581
|
+
}
|
|
582
|
+
}, [trapped, container, focusScope.paused]);
|
|
583
|
+
React.useEffect(() => {
|
|
584
|
+
if (container) {
|
|
585
|
+
focusScopesStack.add(focusScope);
|
|
586
|
+
const previouslyFocusedElement = document.activeElement;
|
|
587
|
+
const hasFocusedCandidate = container.contains(previouslyFocusedElement);
|
|
588
|
+
if (!hasFocusedCandidate) {
|
|
589
|
+
const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
|
|
590
|
+
container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
|
|
591
|
+
container.dispatchEvent(mountEvent);
|
|
592
|
+
if (!mountEvent.defaultPrevented) {
|
|
593
|
+
focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
|
|
594
|
+
if (document.activeElement === previouslyFocusedElement) {
|
|
595
|
+
focus(container);
|
|
596
|
+
}
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
return () => {
|
|
600
|
+
container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
|
|
601
|
+
setTimeout(() => {
|
|
602
|
+
const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
|
|
603
|
+
container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
|
|
604
|
+
container.dispatchEvent(unmountEvent);
|
|
605
|
+
if (!unmountEvent.defaultPrevented) {
|
|
606
|
+
focus(previouslyFocusedElement ?? document.body, { select: true });
|
|
607
|
+
}
|
|
608
|
+
container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
|
|
609
|
+
focusScopesStack.remove(focusScope);
|
|
610
|
+
}, 0);
|
|
611
|
+
};
|
|
612
|
+
}
|
|
613
|
+
}, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
|
|
614
|
+
const handleKeyDown = React.useCallback(
|
|
615
|
+
(event) => {
|
|
616
|
+
if (!loop && !trapped) return;
|
|
617
|
+
if (focusScope.paused) return;
|
|
618
|
+
const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
|
|
619
|
+
const focusedElement = document.activeElement;
|
|
620
|
+
if (isTabKey && focusedElement) {
|
|
621
|
+
const container2 = event.currentTarget;
|
|
622
|
+
const [first, last] = getTabbableEdges(container2);
|
|
623
|
+
const hasTabbableElementsInside = first && last;
|
|
624
|
+
if (!hasTabbableElementsInside) {
|
|
625
|
+
if (focusedElement === container2) event.preventDefault();
|
|
626
|
+
} else {
|
|
627
|
+
if (!event.shiftKey && focusedElement === last) {
|
|
628
|
+
event.preventDefault();
|
|
629
|
+
if (loop) focus(first, { select: true });
|
|
630
|
+
} else if (event.shiftKey && focusedElement === first) {
|
|
631
|
+
event.preventDefault();
|
|
632
|
+
if (loop) focus(last, { select: true });
|
|
633
|
+
}
|
|
634
|
+
}
|
|
635
|
+
}
|
|
636
|
+
},
|
|
637
|
+
[loop, trapped, focusScope.paused]
|
|
638
|
+
);
|
|
639
|
+
return /* @__PURE__ */ jsx(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
|
|
640
|
+
});
|
|
641
|
+
FocusScope.displayName = FOCUS_SCOPE_NAME;
|
|
642
|
+
function focusFirst(candidates, { select = false } = {}) {
|
|
643
|
+
const previouslyFocusedElement = document.activeElement;
|
|
644
|
+
for (const candidate of candidates) {
|
|
645
|
+
focus(candidate, { select });
|
|
646
|
+
if (document.activeElement !== previouslyFocusedElement) return;
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
function getTabbableEdges(container) {
|
|
650
|
+
const candidates = getTabbableCandidates(container);
|
|
651
|
+
const first = findVisible(candidates, container);
|
|
652
|
+
const last = findVisible(candidates.reverse(), container);
|
|
653
|
+
return [first, last];
|
|
654
|
+
}
|
|
655
|
+
function getTabbableCandidates(container) {
|
|
656
|
+
const nodes = [];
|
|
657
|
+
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
658
|
+
acceptNode: (node) => {
|
|
659
|
+
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
|
|
660
|
+
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
|
|
661
|
+
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
662
|
+
}
|
|
663
|
+
});
|
|
664
|
+
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
665
|
+
return nodes;
|
|
666
|
+
}
|
|
667
|
+
function findVisible(elements, container) {
|
|
668
|
+
for (const element of elements) {
|
|
669
|
+
if (!isHidden(element, { upTo: container })) return element;
|
|
670
|
+
}
|
|
671
|
+
}
|
|
672
|
+
function isHidden(node, { upTo }) {
|
|
673
|
+
if (getComputedStyle(node).visibility === "hidden") return true;
|
|
674
|
+
while (node) {
|
|
675
|
+
if (upTo !== void 0 && node === upTo) return false;
|
|
676
|
+
if (getComputedStyle(node).display === "none") return true;
|
|
677
|
+
node = node.parentElement;
|
|
678
|
+
}
|
|
679
|
+
return false;
|
|
680
|
+
}
|
|
681
|
+
function isSelectableInput(element) {
|
|
682
|
+
return element instanceof HTMLInputElement && "select" in element;
|
|
683
|
+
}
|
|
684
|
+
function focus(element, { select = false } = {}) {
|
|
685
|
+
if (element && element.focus) {
|
|
686
|
+
const previouslyFocusedElement = document.activeElement;
|
|
687
|
+
element.focus({ preventScroll: true });
|
|
688
|
+
if (element !== previouslyFocusedElement && isSelectableInput(element) && select)
|
|
689
|
+
element.select();
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
var focusScopesStack = createFocusScopesStack();
|
|
693
|
+
function createFocusScopesStack() {
|
|
694
|
+
let stack = [];
|
|
695
|
+
return {
|
|
696
|
+
add(focusScope) {
|
|
697
|
+
const activeFocusScope = stack[0];
|
|
698
|
+
if (focusScope !== activeFocusScope) {
|
|
699
|
+
activeFocusScope?.pause();
|
|
700
|
+
}
|
|
701
|
+
stack = arrayRemove(stack, focusScope);
|
|
702
|
+
stack.unshift(focusScope);
|
|
703
|
+
},
|
|
704
|
+
remove(focusScope) {
|
|
705
|
+
stack = arrayRemove(stack, focusScope);
|
|
706
|
+
stack[0]?.resume();
|
|
707
|
+
}
|
|
708
|
+
};
|
|
709
|
+
}
|
|
710
|
+
function arrayRemove(array, item) {
|
|
711
|
+
const updatedArray = [...array];
|
|
712
|
+
const index = updatedArray.indexOf(item);
|
|
713
|
+
if (index !== -1) {
|
|
714
|
+
updatedArray.splice(index, 1);
|
|
715
|
+
}
|
|
716
|
+
return updatedArray;
|
|
717
|
+
}
|
|
718
|
+
function removeLinks(items) {
|
|
719
|
+
return items.filter((item) => item.tagName !== "A");
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
var PORTAL_NAME = "Portal";
|
|
723
|
+
var Portal = React.forwardRef((props, forwardedRef) => {
|
|
724
|
+
const { container: containerProp, ...portalProps } = props;
|
|
725
|
+
const [mounted, setMounted] = React.useState(false);
|
|
726
|
+
useLayoutEffect2(() => setMounted(true), []);
|
|
727
|
+
const container = containerProp || mounted && globalThis?.document?.body;
|
|
728
|
+
return container ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
|
|
729
|
+
});
|
|
730
|
+
Portal.displayName = PORTAL_NAME;
|
|
731
|
+
|
|
732
|
+
var count = 0;
|
|
733
|
+
function useFocusGuards() {
|
|
734
|
+
React.useEffect(() => {
|
|
735
|
+
const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
|
|
736
|
+
document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
|
|
737
|
+
document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
|
|
738
|
+
count++;
|
|
739
|
+
return () => {
|
|
740
|
+
if (count === 1) {
|
|
741
|
+
document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove());
|
|
742
|
+
}
|
|
743
|
+
count--;
|
|
744
|
+
};
|
|
745
|
+
}, []);
|
|
746
|
+
}
|
|
747
|
+
function createFocusGuard() {
|
|
748
|
+
const element = document.createElement("span");
|
|
749
|
+
element.setAttribute("data-radix-focus-guard", "");
|
|
750
|
+
element.tabIndex = 0;
|
|
751
|
+
element.style.outline = "none";
|
|
752
|
+
element.style.opacity = "0";
|
|
753
|
+
element.style.position = "fixed";
|
|
754
|
+
element.style.pointerEvents = "none";
|
|
755
|
+
return element;
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
var effectCar = createSidecarMedium();
|
|
759
|
+
|
|
760
|
+
var nothing = function () {
|
|
761
|
+
return;
|
|
762
|
+
};
|
|
763
|
+
/**
|
|
764
|
+
* Removes scrollbar from the page and contain the scroll within the Lock
|
|
765
|
+
*/
|
|
766
|
+
var RemoveScroll$1 = React.forwardRef(function (props, parentRef) {
|
|
767
|
+
var ref = React.useRef(null);
|
|
768
|
+
var _a = React.useState({
|
|
769
|
+
onScrollCapture: nothing,
|
|
770
|
+
onWheelCapture: nothing,
|
|
771
|
+
onTouchMoveCapture: nothing,
|
|
772
|
+
}), callbacks = _a[0], setCallbacks = _a[1];
|
|
773
|
+
var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, gapMode = props.gapMode, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
|
|
774
|
+
var SideCar = sideCar;
|
|
775
|
+
var containerRef = useMergeRefs([ref, parentRef]);
|
|
776
|
+
var containerProps = __assign(__assign({}, rest), callbacks);
|
|
777
|
+
return (React.createElement(React.Fragment, null,
|
|
778
|
+
enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode: gapMode })),
|
|
779
|
+
forwardProps ? (React.cloneElement(React.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef }))) : (React.createElement(Container, __assign({}, containerProps, { className: className, ref: containerRef }), children))));
|
|
780
|
+
});
|
|
781
|
+
RemoveScroll$1.defaultProps = {
|
|
782
|
+
enabled: true,
|
|
783
|
+
removeScrollBar: true,
|
|
784
|
+
inert: false,
|
|
785
|
+
};
|
|
786
|
+
RemoveScroll$1.classNames = {
|
|
787
|
+
fullWidth: fullWidthClassName,
|
|
788
|
+
zeroRight: zeroRightClassName,
|
|
789
|
+
};
|
|
790
|
+
|
|
791
|
+
var passiveSupported = false;
|
|
792
|
+
if (typeof window !== 'undefined') {
|
|
793
|
+
try {
|
|
794
|
+
var options = Object.defineProperty({}, 'passive', {
|
|
795
|
+
get: function () {
|
|
796
|
+
passiveSupported = true;
|
|
797
|
+
return true;
|
|
798
|
+
},
|
|
799
|
+
});
|
|
800
|
+
// @ts-ignore
|
|
801
|
+
window.addEventListener('test', options, options);
|
|
802
|
+
// @ts-ignore
|
|
803
|
+
window.removeEventListener('test', options, options);
|
|
804
|
+
}
|
|
805
|
+
catch (err) {
|
|
806
|
+
passiveSupported = false;
|
|
807
|
+
}
|
|
808
|
+
}
|
|
809
|
+
var nonPassive = passiveSupported ? { passive: false } : false;
|
|
810
|
+
|
|
811
|
+
var alwaysContainsScroll = function (node) {
|
|
812
|
+
// textarea will always _contain_ scroll inside self. It only can be hidden
|
|
813
|
+
return node.tagName === 'TEXTAREA';
|
|
814
|
+
};
|
|
815
|
+
var elementCanBeScrolled = function (node, overflow) {
|
|
816
|
+
if (!(node instanceof Element)) {
|
|
817
|
+
return false;
|
|
818
|
+
}
|
|
819
|
+
var styles = window.getComputedStyle(node);
|
|
820
|
+
return (
|
|
821
|
+
// not-not-scrollable
|
|
822
|
+
styles[overflow] !== 'hidden' &&
|
|
823
|
+
// contains scroll inside self
|
|
824
|
+
!(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === 'visible'));
|
|
825
|
+
};
|
|
826
|
+
var elementCouldBeVScrolled = function (node) { return elementCanBeScrolled(node, 'overflowY'); };
|
|
827
|
+
var elementCouldBeHScrolled = function (node) { return elementCanBeScrolled(node, 'overflowX'); };
|
|
828
|
+
var locationCouldBeScrolled = function (axis, node) {
|
|
829
|
+
var ownerDocument = node.ownerDocument;
|
|
830
|
+
var current = node;
|
|
831
|
+
do {
|
|
832
|
+
// Skip over shadow root
|
|
833
|
+
if (typeof ShadowRoot !== 'undefined' && current instanceof ShadowRoot) {
|
|
834
|
+
current = current.host;
|
|
835
|
+
}
|
|
836
|
+
var isScrollable = elementCouldBeScrolled(axis, current);
|
|
837
|
+
if (isScrollable) {
|
|
838
|
+
var _a = getScrollVariables(axis, current), scrollHeight = _a[1], clientHeight = _a[2];
|
|
839
|
+
if (scrollHeight > clientHeight) {
|
|
840
|
+
return true;
|
|
841
|
+
}
|
|
842
|
+
}
|
|
843
|
+
current = current.parentNode;
|
|
844
|
+
} while (current && current !== ownerDocument.body);
|
|
845
|
+
return false;
|
|
846
|
+
};
|
|
847
|
+
var getVScrollVariables = function (_a) {
|
|
848
|
+
var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
|
|
849
|
+
return [
|
|
850
|
+
scrollTop,
|
|
851
|
+
scrollHeight,
|
|
852
|
+
clientHeight,
|
|
853
|
+
];
|
|
854
|
+
};
|
|
855
|
+
var getHScrollVariables = function (_a) {
|
|
856
|
+
var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
857
|
+
return [
|
|
858
|
+
scrollLeft,
|
|
859
|
+
scrollWidth,
|
|
860
|
+
clientWidth,
|
|
861
|
+
];
|
|
862
|
+
};
|
|
863
|
+
var elementCouldBeScrolled = function (axis, node) {
|
|
864
|
+
return axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node);
|
|
865
|
+
};
|
|
866
|
+
var getScrollVariables = function (axis, node) {
|
|
867
|
+
return axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node);
|
|
868
|
+
};
|
|
869
|
+
var getDirectionFactor = function (axis, direction) {
|
|
870
|
+
/**
|
|
871
|
+
* If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position,
|
|
872
|
+
* and then increasingly negative as you scroll towards the end of the content.
|
|
873
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
|
|
874
|
+
*/
|
|
875
|
+
return axis === 'h' && direction === 'rtl' ? -1 : 1;
|
|
876
|
+
};
|
|
877
|
+
var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) {
|
|
878
|
+
var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction);
|
|
879
|
+
var delta = directionFactor * sourceDelta;
|
|
880
|
+
// find scrollable target
|
|
881
|
+
var target = event.target;
|
|
882
|
+
var targetInLock = endTarget.contains(target);
|
|
883
|
+
var shouldCancelScroll = false;
|
|
884
|
+
var isDeltaPositive = delta > 0;
|
|
885
|
+
var availableScroll = 0;
|
|
886
|
+
var availableScrollTop = 0;
|
|
887
|
+
do {
|
|
888
|
+
var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];
|
|
889
|
+
var elementScroll = scroll_1 - capacity - directionFactor * position;
|
|
890
|
+
if (position || elementScroll) {
|
|
891
|
+
if (elementCouldBeScrolled(axis, target)) {
|
|
892
|
+
availableScroll += elementScroll;
|
|
893
|
+
availableScrollTop += position;
|
|
894
|
+
}
|
|
895
|
+
}
|
|
896
|
+
if (target instanceof ShadowRoot) {
|
|
897
|
+
target = target.host;
|
|
898
|
+
}
|
|
899
|
+
else {
|
|
900
|
+
target = target.parentNode;
|
|
901
|
+
}
|
|
902
|
+
} while (
|
|
903
|
+
// portaled content
|
|
904
|
+
(!targetInLock && target !== document.body) ||
|
|
905
|
+
// self content
|
|
906
|
+
(targetInLock && (endTarget.contains(target) || endTarget === target)));
|
|
907
|
+
// handle epsilon around 0 (non standard zoom levels)
|
|
908
|
+
if (isDeltaPositive &&
|
|
909
|
+
((noOverscroll && Math.abs(availableScroll) < 1) || (!noOverscroll && delta > availableScroll))) {
|
|
910
|
+
shouldCancelScroll = true;
|
|
911
|
+
}
|
|
912
|
+
else if (!isDeltaPositive &&
|
|
913
|
+
((noOverscroll && Math.abs(availableScrollTop) < 1) || (!noOverscroll && -delta > availableScrollTop))) {
|
|
914
|
+
shouldCancelScroll = true;
|
|
915
|
+
}
|
|
916
|
+
return shouldCancelScroll;
|
|
917
|
+
};
|
|
918
|
+
|
|
919
|
+
var getTouchXY = function (event) {
|
|
920
|
+
return 'changedTouches' in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];
|
|
921
|
+
};
|
|
922
|
+
var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; };
|
|
923
|
+
var extractRef = function (ref) {
|
|
924
|
+
return ref && 'current' in ref ? ref.current : ref;
|
|
925
|
+
};
|
|
926
|
+
var deltaCompare = function (x, y) { return x[0] === y[0] && x[1] === y[1]; };
|
|
927
|
+
var generateStyle = function (id) { return "\n .block-interactivity-".concat(id, " {pointer-events: none;}\n .allow-interactivity-").concat(id, " {pointer-events: all;}\n"); };
|
|
928
|
+
var idCounter = 0;
|
|
929
|
+
var lockStack = [];
|
|
930
|
+
function RemoveScrollSideCar(props) {
|
|
931
|
+
var shouldPreventQueue = React.useRef([]);
|
|
932
|
+
var touchStartRef = React.useRef([0, 0]);
|
|
933
|
+
var activeAxis = React.useRef();
|
|
934
|
+
var id = React.useState(idCounter++)[0];
|
|
935
|
+
var Style = React.useState(styleSingleton)[0];
|
|
936
|
+
var lastProps = React.useRef(props);
|
|
937
|
+
React.useEffect(function () {
|
|
938
|
+
lastProps.current = props;
|
|
939
|
+
}, [props]);
|
|
940
|
+
React.useEffect(function () {
|
|
941
|
+
if (props.inert) {
|
|
942
|
+
document.body.classList.add("block-interactivity-".concat(id));
|
|
943
|
+
var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
|
|
944
|
+
allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-".concat(id)); });
|
|
945
|
+
return function () {
|
|
946
|
+
document.body.classList.remove("block-interactivity-".concat(id));
|
|
947
|
+
allow_1.forEach(function (el) { return el.classList.remove("allow-interactivity-".concat(id)); });
|
|
948
|
+
};
|
|
949
|
+
}
|
|
950
|
+
return;
|
|
951
|
+
}, [props.inert, props.lockRef.current, props.shards]);
|
|
952
|
+
var shouldCancelEvent = React.useCallback(function (event, parent) {
|
|
953
|
+
if (('touches' in event && event.touches.length === 2) || (event.type === 'wheel' && event.ctrlKey)) {
|
|
954
|
+
return !lastProps.current.allowPinchZoom;
|
|
955
|
+
}
|
|
956
|
+
var touch = getTouchXY(event);
|
|
957
|
+
var touchStart = touchStartRef.current;
|
|
958
|
+
var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0];
|
|
959
|
+
var deltaY = 'deltaY' in event ? event.deltaY : touchStart[1] - touch[1];
|
|
960
|
+
var currentAxis;
|
|
961
|
+
var target = event.target;
|
|
962
|
+
var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v';
|
|
963
|
+
// allow horizontal touch move on Range inputs. They will not cause any scroll
|
|
964
|
+
if ('touches' in event && moveDirection === 'h' && target.type === 'range') {
|
|
965
|
+
return false;
|
|
966
|
+
}
|
|
967
|
+
var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
|
|
968
|
+
if (!canBeScrolledInMainDirection) {
|
|
969
|
+
return true;
|
|
970
|
+
}
|
|
971
|
+
if (canBeScrolledInMainDirection) {
|
|
972
|
+
currentAxis = moveDirection;
|
|
973
|
+
}
|
|
974
|
+
else {
|
|
975
|
+
currentAxis = moveDirection === 'v' ? 'h' : 'v';
|
|
976
|
+
canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
|
|
977
|
+
// other axis might be not scrollable
|
|
978
|
+
}
|
|
979
|
+
if (!canBeScrolledInMainDirection) {
|
|
980
|
+
return false;
|
|
981
|
+
}
|
|
982
|
+
if (!activeAxis.current && 'changedTouches' in event && (deltaX || deltaY)) {
|
|
983
|
+
activeAxis.current = currentAxis;
|
|
984
|
+
}
|
|
985
|
+
if (!currentAxis) {
|
|
986
|
+
return true;
|
|
987
|
+
}
|
|
988
|
+
var cancelingAxis = activeAxis.current || currentAxis;
|
|
989
|
+
return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
|
|
990
|
+
}, []);
|
|
991
|
+
var shouldPrevent = React.useCallback(function (_event) {
|
|
992
|
+
var event = _event;
|
|
993
|
+
if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
|
|
994
|
+
// not the last active
|
|
995
|
+
return;
|
|
996
|
+
}
|
|
997
|
+
var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);
|
|
998
|
+
var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta); })[0];
|
|
999
|
+
// self event, and should be canceled
|
|
1000
|
+
if (sourceEvent && sourceEvent.should) {
|
|
1001
|
+
if (event.cancelable) {
|
|
1002
|
+
event.preventDefault();
|
|
1003
|
+
}
|
|
1004
|
+
return;
|
|
1005
|
+
}
|
|
1006
|
+
// outside or shard event
|
|
1007
|
+
if (!sourceEvent) {
|
|
1008
|
+
var shardNodes = (lastProps.current.shards || [])
|
|
1009
|
+
.map(extractRef)
|
|
1010
|
+
.filter(Boolean)
|
|
1011
|
+
.filter(function (node) { return node.contains(event.target); });
|
|
1012
|
+
var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;
|
|
1013
|
+
if (shouldStop) {
|
|
1014
|
+
if (event.cancelable) {
|
|
1015
|
+
event.preventDefault();
|
|
1016
|
+
}
|
|
1017
|
+
}
|
|
1018
|
+
}
|
|
1019
|
+
}, []);
|
|
1020
|
+
var shouldCancel = React.useCallback(function (name, delta, target, should) {
|
|
1021
|
+
var event = { name: name, delta: delta, target: target, should: should, shadowParent: getOutermostShadowParent(target) };
|
|
1022
|
+
shouldPreventQueue.current.push(event);
|
|
1023
|
+
setTimeout(function () {
|
|
1024
|
+
shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; });
|
|
1025
|
+
}, 1);
|
|
1026
|
+
}, []);
|
|
1027
|
+
var scrollTouchStart = React.useCallback(function (event) {
|
|
1028
|
+
touchStartRef.current = getTouchXY(event);
|
|
1029
|
+
activeAxis.current = undefined;
|
|
1030
|
+
}, []);
|
|
1031
|
+
var scrollWheel = React.useCallback(function (event) {
|
|
1032
|
+
shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
|
|
1033
|
+
}, []);
|
|
1034
|
+
var scrollTouchMove = React.useCallback(function (event) {
|
|
1035
|
+
shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
|
|
1036
|
+
}, []);
|
|
1037
|
+
React.useEffect(function () {
|
|
1038
|
+
lockStack.push(Style);
|
|
1039
|
+
props.setCallbacks({
|
|
1040
|
+
onScrollCapture: scrollWheel,
|
|
1041
|
+
onWheelCapture: scrollWheel,
|
|
1042
|
+
onTouchMoveCapture: scrollTouchMove,
|
|
1043
|
+
});
|
|
1044
|
+
document.addEventListener('wheel', shouldPrevent, nonPassive);
|
|
1045
|
+
document.addEventListener('touchmove', shouldPrevent, nonPassive);
|
|
1046
|
+
document.addEventListener('touchstart', scrollTouchStart, nonPassive);
|
|
1047
|
+
return function () {
|
|
1048
|
+
lockStack = lockStack.filter(function (inst) { return inst !== Style; });
|
|
1049
|
+
document.removeEventListener('wheel', shouldPrevent, nonPassive);
|
|
1050
|
+
document.removeEventListener('touchmove', shouldPrevent, nonPassive);
|
|
1051
|
+
document.removeEventListener('touchstart', scrollTouchStart, nonPassive);
|
|
1052
|
+
};
|
|
1053
|
+
}, []);
|
|
1054
|
+
var removeScrollBar = props.removeScrollBar, inert = props.inert;
|
|
1055
|
+
return (React.createElement(React.Fragment, null,
|
|
1056
|
+
inert ? React.createElement(Style, { styles: generateStyle(id) }) : null,
|
|
1057
|
+
removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null));
|
|
1058
|
+
}
|
|
1059
|
+
function getOutermostShadowParent(node) {
|
|
1060
|
+
var shadowParent = null;
|
|
1061
|
+
while (node !== null) {
|
|
1062
|
+
if (node instanceof ShadowRoot) {
|
|
1063
|
+
shadowParent = node.host;
|
|
1064
|
+
node = node.host;
|
|
1065
|
+
}
|
|
1066
|
+
node = node.parentNode;
|
|
1067
|
+
}
|
|
1068
|
+
return shadowParent;
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1071
|
+
var SideCar = exportSidecar(effectCar, RemoveScrollSideCar);
|
|
1072
|
+
|
|
1073
|
+
var ReactRemoveScroll = React.forwardRef(function (props, ref) { return (React.createElement(RemoveScroll$1, __assign({}, props, { ref: ref, sideCar: SideCar }))); });
|
|
1074
|
+
ReactRemoveScroll.classNames = RemoveScroll$1.classNames;
|
|
1075
|
+
var RemoveScroll = ReactRemoveScroll;
|
|
1076
|
+
|
|
1077
|
+
var getDefaultParent = function (originalTarget) {
|
|
1078
|
+
if (typeof document === 'undefined') {
|
|
1079
|
+
return null;
|
|
1080
|
+
}
|
|
1081
|
+
var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget;
|
|
1082
|
+
return sampleTarget.ownerDocument.body;
|
|
1083
|
+
};
|
|
1084
|
+
var counterMap = new WeakMap();
|
|
1085
|
+
var uncontrolledNodes = new WeakMap();
|
|
1086
|
+
var markerMap = {};
|
|
1087
|
+
var lockCount = 0;
|
|
1088
|
+
var unwrapHost = function (node) {
|
|
1089
|
+
return node && (node.host || unwrapHost(node.parentNode));
|
|
1090
|
+
};
|
|
1091
|
+
var correctTargets = function (parent, targets) {
|
|
1092
|
+
return targets
|
|
1093
|
+
.map(function (target) {
|
|
1094
|
+
if (parent.contains(target)) {
|
|
1095
|
+
return target;
|
|
1096
|
+
}
|
|
1097
|
+
var correctedTarget = unwrapHost(target);
|
|
1098
|
+
if (correctedTarget && parent.contains(correctedTarget)) {
|
|
1099
|
+
return correctedTarget;
|
|
1100
|
+
}
|
|
1101
|
+
console.error('aria-hidden', target, 'in not contained inside', parent, '. Doing nothing');
|
|
1102
|
+
return null;
|
|
1103
|
+
})
|
|
1104
|
+
.filter(function (x) { return Boolean(x); });
|
|
1105
|
+
};
|
|
1106
|
+
/**
|
|
1107
|
+
* Marks everything except given node(or nodes) as aria-hidden
|
|
1108
|
+
* @param {Element | Element[]} originalTarget - elements to keep on the page
|
|
1109
|
+
* @param [parentNode] - top element, defaults to document.body
|
|
1110
|
+
* @param {String} [markerName] - a special attribute to mark every node
|
|
1111
|
+
* @param {String} [controlAttribute] - html Attribute to control
|
|
1112
|
+
* @return {Undo} undo command
|
|
1113
|
+
*/
|
|
1114
|
+
var applyAttributeToOthers = function (originalTarget, parentNode, markerName, controlAttribute) {
|
|
1115
|
+
var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
|
|
1116
|
+
if (!markerMap[markerName]) {
|
|
1117
|
+
markerMap[markerName] = new WeakMap();
|
|
1118
|
+
}
|
|
1119
|
+
var markerCounter = markerMap[markerName];
|
|
1120
|
+
var hiddenNodes = [];
|
|
1121
|
+
var elementsToKeep = new Set();
|
|
1122
|
+
var elementsToStop = new Set(targets);
|
|
1123
|
+
var keep = function (el) {
|
|
1124
|
+
if (!el || elementsToKeep.has(el)) {
|
|
1125
|
+
return;
|
|
1126
|
+
}
|
|
1127
|
+
elementsToKeep.add(el);
|
|
1128
|
+
keep(el.parentNode);
|
|
1129
|
+
};
|
|
1130
|
+
targets.forEach(keep);
|
|
1131
|
+
var deep = function (parent) {
|
|
1132
|
+
if (!parent || elementsToStop.has(parent)) {
|
|
1133
|
+
return;
|
|
1134
|
+
}
|
|
1135
|
+
Array.prototype.forEach.call(parent.children, function (node) {
|
|
1136
|
+
if (elementsToKeep.has(node)) {
|
|
1137
|
+
deep(node);
|
|
1138
|
+
}
|
|
1139
|
+
else {
|
|
1140
|
+
try {
|
|
1141
|
+
var attr = node.getAttribute(controlAttribute);
|
|
1142
|
+
var alreadyHidden = attr !== null && attr !== 'false';
|
|
1143
|
+
var counterValue = (counterMap.get(node) || 0) + 1;
|
|
1144
|
+
var markerValue = (markerCounter.get(node) || 0) + 1;
|
|
1145
|
+
counterMap.set(node, counterValue);
|
|
1146
|
+
markerCounter.set(node, markerValue);
|
|
1147
|
+
hiddenNodes.push(node);
|
|
1148
|
+
if (counterValue === 1 && alreadyHidden) {
|
|
1149
|
+
uncontrolledNodes.set(node, true);
|
|
1150
|
+
}
|
|
1151
|
+
if (markerValue === 1) {
|
|
1152
|
+
node.setAttribute(markerName, 'true');
|
|
1153
|
+
}
|
|
1154
|
+
if (!alreadyHidden) {
|
|
1155
|
+
node.setAttribute(controlAttribute, 'true');
|
|
1156
|
+
}
|
|
1157
|
+
}
|
|
1158
|
+
catch (e) {
|
|
1159
|
+
console.error('aria-hidden: cannot operate on ', node, e);
|
|
1160
|
+
}
|
|
1161
|
+
}
|
|
1162
|
+
});
|
|
1163
|
+
};
|
|
1164
|
+
deep(parentNode);
|
|
1165
|
+
elementsToKeep.clear();
|
|
1166
|
+
lockCount++;
|
|
1167
|
+
return function () {
|
|
1168
|
+
hiddenNodes.forEach(function (node) {
|
|
1169
|
+
var counterValue = counterMap.get(node) - 1;
|
|
1170
|
+
var markerValue = markerCounter.get(node) - 1;
|
|
1171
|
+
counterMap.set(node, counterValue);
|
|
1172
|
+
markerCounter.set(node, markerValue);
|
|
1173
|
+
if (!counterValue) {
|
|
1174
|
+
if (!uncontrolledNodes.has(node)) {
|
|
1175
|
+
node.removeAttribute(controlAttribute);
|
|
1176
|
+
}
|
|
1177
|
+
uncontrolledNodes.delete(node);
|
|
1178
|
+
}
|
|
1179
|
+
if (!markerValue) {
|
|
1180
|
+
node.removeAttribute(markerName);
|
|
1181
|
+
}
|
|
1182
|
+
});
|
|
1183
|
+
lockCount--;
|
|
1184
|
+
if (!lockCount) {
|
|
1185
|
+
// clear
|
|
1186
|
+
counterMap = new WeakMap();
|
|
1187
|
+
counterMap = new WeakMap();
|
|
1188
|
+
uncontrolledNodes = new WeakMap();
|
|
1189
|
+
markerMap = {};
|
|
1190
|
+
}
|
|
1191
|
+
};
|
|
1192
|
+
};
|
|
1193
|
+
/**
|
|
1194
|
+
* Marks everything except given node(or nodes) as aria-hidden
|
|
1195
|
+
* @param {Element | Element[]} originalTarget - elements to keep on the page
|
|
1196
|
+
* @param [parentNode] - top element, defaults to document.body
|
|
1197
|
+
* @param {String} [markerName] - a special attribute to mark every node
|
|
1198
|
+
* @return {Undo} undo command
|
|
1199
|
+
*/
|
|
1200
|
+
var hideOthers = function (originalTarget, parentNode, markerName) {
|
|
1201
|
+
if (markerName === void 0) { markerName = 'data-aria-hidden'; }
|
|
1202
|
+
var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
|
|
1203
|
+
var activeParentNode = parentNode || getDefaultParent(originalTarget);
|
|
1204
|
+
if (!activeParentNode) {
|
|
1205
|
+
return function () { return null; };
|
|
1206
|
+
}
|
|
1207
|
+
// we should not hide ariaLive elements - https://github.com/theKashey/aria-hidden/issues/10
|
|
1208
|
+
targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live]')));
|
|
1209
|
+
return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden');
|
|
1210
|
+
};
|
|
1211
|
+
|
|
1212
|
+
export { DismissableLayer as D, FocusScope as F, Primitive as P, RemoveScroll as R, Slot as S, useLayoutEffect2 as a, composeEventHandlers as b, createContextScope as c, useFocusGuards as d, createContext2 as e, useControllableState as f, useId as g, hideOthers as h, Portal as i, useCallbackRef as j, useComposedRefs as u };
|