@bccampus/ui-components 0.5.0 → 0.5.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/.yarn/install-state.gz +0 -0
- package/.yarn/releases/yarn-4.10.3.cjs +942 -0
- package/.yarnrc.yml +3 -0
- package/dist/_chunks/createLucideIcon.js +0 -24
- package/dist/_chunks/index.js +16 -38
- package/dist/_chunks/index3.js +26 -520
- package/dist/_chunks/index4.js +615 -0
- package/dist/_chunks/utils.js +199 -143
- package/dist/components/index.js +2 -2
- package/dist/components/ui/banner.js +0 -6
- package/dist/components/ui/composite/CompositeData.js +1 -1
- package/dist/components/ui/composite/CompositeDataItem.js +109 -3
- package/dist/components/ui/composite/FocusProvider/AbstractFocusProvider.js +2 -1
- package/dist/components/ui/composite/SelectionProvider/AbstractSelectionProvider.js +2 -1
- package/dist/components/ui/composite/SelectionProvider/MultipleSelectionProvider.js +1 -1
- package/dist/components/ui/composite/SelectionProvider/SingleSelectionProvider.js +1 -1
- package/dist/components/ui/composite/composite-component-item.js +2 -24
- package/dist/components/ui/composite/index.d.ts +1 -0
- package/dist/components/ui/composite/index.js +2 -2
- package/dist/components/ui/composite/listbox.js +1 -0
- package/dist/components/ui/horizontal-list.js +0 -12
- package/dist/components/ui/navigation-menu.js +86 -10
- package/dist/components/ui/popover.js +85 -3
- package/dist/components/ui/search-input.js +0 -6
- package/package.json +75 -67
- package/src/App.tsx +44 -14
- package/src/components/ui/composite/index.ts +2 -1
- package/src/components/ui/page-header.tsx +6 -9
- package/src/main.tsx +12 -12
- package/vite.config.ts +6 -2
- package/dist/_chunks/CompositeDataItem.js +0 -204
package/.yarnrc.yml
ADDED
|
@@ -1,10 +1,4 @@
|
|
|
1
1
|
import { forwardRef, createElement } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* @license lucide-react v0.544.0 - ISC
|
|
4
|
-
*
|
|
5
|
-
* This source code is licensed under the ISC license.
|
|
6
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
7
|
-
*/
|
|
8
2
|
const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
9
3
|
const toCamelCase = (string) => string.replace(
|
|
10
4
|
/^([A-Z])|[\s-_]+(\w)/g,
|
|
@@ -24,12 +18,6 @@ const hasA11yProp = (props) => {
|
|
|
24
18
|
}
|
|
25
19
|
}
|
|
26
20
|
};
|
|
27
|
-
/**
|
|
28
|
-
* @license lucide-react v0.544.0 - ISC
|
|
29
|
-
*
|
|
30
|
-
* This source code is licensed under the ISC license.
|
|
31
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
32
|
-
*/
|
|
33
21
|
var defaultAttributes = {
|
|
34
22
|
xmlns: "http://www.w3.org/2000/svg",
|
|
35
23
|
width: 24,
|
|
@@ -41,12 +29,6 @@ var defaultAttributes = {
|
|
|
41
29
|
strokeLinecap: "round",
|
|
42
30
|
strokeLinejoin: "round"
|
|
43
31
|
};
|
|
44
|
-
/**
|
|
45
|
-
* @license lucide-react v0.544.0 - ISC
|
|
46
|
-
*
|
|
47
|
-
* This source code is licensed under the ISC license.
|
|
48
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
49
|
-
*/
|
|
50
32
|
const Icon = forwardRef(
|
|
51
33
|
({
|
|
52
34
|
color = "currentColor",
|
|
@@ -76,12 +58,6 @@ const Icon = forwardRef(
|
|
|
76
58
|
]
|
|
77
59
|
)
|
|
78
60
|
);
|
|
79
|
-
/**
|
|
80
|
-
* @license lucide-react v0.544.0 - ISC
|
|
81
|
-
*
|
|
82
|
-
* This source code is licensed under the ISC license.
|
|
83
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
84
|
-
*/
|
|
85
61
|
const createLucideIcon = (iconName, iconNode) => {
|
|
86
62
|
const Component = forwardRef(
|
|
87
63
|
({ className, ...props }, ref) => createElement(Icon, {
|
package/dist/_chunks/index.js
CHANGED
|
@@ -1,44 +1,22 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { c as composeRefs } from "./index3.js";
|
|
2
3
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
ref.current = value;
|
|
8
|
-
}
|
|
4
|
+
var REACT_LAZY_TYPE = Symbol.for("react.lazy");
|
|
5
|
+
var use = React[" use ".trim().toString()];
|
|
6
|
+
function isPromiseLike(value) {
|
|
7
|
+
return typeof value === "object" && value !== null && "then" in value;
|
|
9
8
|
}
|
|
10
|
-
function
|
|
11
|
-
return (
|
|
12
|
-
let hasCleanup = false;
|
|
13
|
-
const cleanups = refs.map((ref) => {
|
|
14
|
-
const cleanup = setRef(ref, node);
|
|
15
|
-
if (!hasCleanup && typeof cleanup == "function") {
|
|
16
|
-
hasCleanup = true;
|
|
17
|
-
}
|
|
18
|
-
return cleanup;
|
|
19
|
-
});
|
|
20
|
-
if (hasCleanup) {
|
|
21
|
-
return () => {
|
|
22
|
-
for (let i = 0; i < cleanups.length; i++) {
|
|
23
|
-
const cleanup = cleanups[i];
|
|
24
|
-
if (typeof cleanup == "function") {
|
|
25
|
-
cleanup();
|
|
26
|
-
} else {
|
|
27
|
-
setRef(refs[i], null);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
function useComposedRefs(...refs) {
|
|
35
|
-
return React.useCallback(composeRefs(...refs), refs);
|
|
9
|
+
function isLazyComponent(element) {
|
|
10
|
+
return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
|
|
36
11
|
}
|
|
37
12
|
// @__NO_SIDE_EFFECTS__
|
|
38
13
|
function createSlot(ownerName) {
|
|
39
14
|
const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
|
|
40
15
|
const Slot2 = React.forwardRef((props, forwardedRef) => {
|
|
41
|
-
|
|
16
|
+
let { children, ...slotProps } = props;
|
|
17
|
+
if (isLazyComponent(children) && typeof use === "function") {
|
|
18
|
+
children = use(children._payload);
|
|
19
|
+
}
|
|
42
20
|
const childrenArray = React.Children.toArray(children);
|
|
43
21
|
const slottable = childrenArray.find(isSlottable);
|
|
44
22
|
if (slottable) {
|
|
@@ -62,7 +40,10 @@ var Slot = /* @__PURE__ */ createSlot("Slot");
|
|
|
62
40
|
// @__NO_SIDE_EFFECTS__
|
|
63
41
|
function createSlotClone(ownerName) {
|
|
64
42
|
const SlotClone = React.forwardRef((props, forwardedRef) => {
|
|
65
|
-
|
|
43
|
+
let { children, ...slotProps } = props;
|
|
44
|
+
if (isLazyComponent(children) && typeof use === "function") {
|
|
45
|
+
children = use(children._payload);
|
|
46
|
+
}
|
|
66
47
|
if (React.isValidElement(children)) {
|
|
67
48
|
const childrenRef = getElementRef(children);
|
|
68
49
|
const props2 = mergeProps(slotProps, children.props);
|
|
@@ -118,8 +99,5 @@ function getElementRef(element) {
|
|
|
118
99
|
return element.props.ref || element.ref;
|
|
119
100
|
}
|
|
120
101
|
export {
|
|
121
|
-
Slot as S
|
|
122
|
-
composeRefs as a,
|
|
123
|
-
createSlot as c,
|
|
124
|
-
useComposedRefs as u
|
|
102
|
+
Slot as S
|
|
125
103
|
};
|
package/dist/_chunks/index3.js
CHANGED
|
@@ -1,533 +1,39 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
function createContext3(rootComponentName, defaultContext) {
|
|
8
|
-
const BaseContext = React.createContext(defaultContext);
|
|
9
|
-
const index = defaultContexts.length;
|
|
10
|
-
defaultContexts = [...defaultContexts, defaultContext];
|
|
11
|
-
const Provider = (props) => {
|
|
12
|
-
const { scope, children, ...context } = props;
|
|
13
|
-
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
14
|
-
const value = React.useMemo(() => context, Object.values(context));
|
|
15
|
-
return /* @__PURE__ */ jsx(Context.Provider, { value, children });
|
|
16
|
-
};
|
|
17
|
-
Provider.displayName = rootComponentName + "Provider";
|
|
18
|
-
function useContext2(consumerName, scope) {
|
|
19
|
-
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
20
|
-
const context = React.useContext(Context);
|
|
21
|
-
if (context) return context;
|
|
22
|
-
if (defaultContext !== void 0) return defaultContext;
|
|
23
|
-
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
|
|
24
|
-
}
|
|
25
|
-
return [Provider, useContext2];
|
|
26
|
-
}
|
|
27
|
-
const createScope = () => {
|
|
28
|
-
const scopeContexts = defaultContexts.map((defaultContext) => {
|
|
29
|
-
return React.createContext(defaultContext);
|
|
30
|
-
});
|
|
31
|
-
return function useScope(scope) {
|
|
32
|
-
const contexts = scope?.[scopeName] || scopeContexts;
|
|
33
|
-
return React.useMemo(
|
|
34
|
-
() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
|
|
35
|
-
[scope, contexts]
|
|
36
|
-
);
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
createScope.scopeName = scopeName;
|
|
40
|
-
return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
|
|
41
|
-
}
|
|
42
|
-
function composeContextScopes(...scopes) {
|
|
43
|
-
const baseScope = scopes[0];
|
|
44
|
-
if (scopes.length === 1) return baseScope;
|
|
45
|
-
const createScope = () => {
|
|
46
|
-
const scopeHooks = scopes.map((createScope2) => ({
|
|
47
|
-
useScope: createScope2(),
|
|
48
|
-
scopeName: createScope2.scopeName
|
|
49
|
-
}));
|
|
50
|
-
return function useComposedScopes(overrideScopes) {
|
|
51
|
-
const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
|
|
52
|
-
const scopeProps = useScope(overrideScopes);
|
|
53
|
-
const currentScope = scopeProps[`__scope${scopeName}`];
|
|
54
|
-
return { ...nextScopes2, ...currentScope };
|
|
55
|
-
}, {});
|
|
56
|
-
return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
createScope.scopeName = baseScope.scopeName;
|
|
60
|
-
return createScope;
|
|
61
|
-
}
|
|
62
|
-
function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
|
|
63
|
-
return function handleEvent(event) {
|
|
64
|
-
originalEventHandler?.(event);
|
|
65
|
-
if (checkForDefaultPrevented === false || !event.defaultPrevented) {
|
|
66
|
-
return ourEventHandler?.(event);
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
var NODES = [
|
|
71
|
-
"a",
|
|
72
|
-
"button",
|
|
73
|
-
"div",
|
|
74
|
-
"form",
|
|
75
|
-
"h2",
|
|
76
|
-
"h3",
|
|
77
|
-
"img",
|
|
78
|
-
"input",
|
|
79
|
-
"label",
|
|
80
|
-
"li",
|
|
81
|
-
"nav",
|
|
82
|
-
"ol",
|
|
83
|
-
"p",
|
|
84
|
-
"select",
|
|
85
|
-
"span",
|
|
86
|
-
"svg",
|
|
87
|
-
"ul"
|
|
88
|
-
];
|
|
89
|
-
var Primitive = NODES.reduce((primitive, node) => {
|
|
90
|
-
const Slot = createSlot(`Primitive.${node}`);
|
|
91
|
-
const Node = React.forwardRef((props, forwardedRef) => {
|
|
92
|
-
const { asChild, ...primitiveProps } = props;
|
|
93
|
-
const Comp = asChild ? Slot : node;
|
|
94
|
-
if (typeof window !== "undefined") {
|
|
95
|
-
window[Symbol.for("radix-ui")] = true;
|
|
96
|
-
}
|
|
97
|
-
return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
98
|
-
});
|
|
99
|
-
Node.displayName = `Primitive.${node}`;
|
|
100
|
-
return { ...primitive, [node]: Node };
|
|
101
|
-
}, {});
|
|
102
|
-
function dispatchDiscreteCustomEvent(target, event) {
|
|
103
|
-
if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
|
|
104
|
-
}
|
|
105
|
-
var useLayoutEffect2 = globalThis?.document ? React.useLayoutEffect : () => {
|
|
106
|
-
};
|
|
107
|
-
var useInsertionEffect = React[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
|
|
108
|
-
function useControllableState({
|
|
109
|
-
prop,
|
|
110
|
-
defaultProp,
|
|
111
|
-
onChange = () => {
|
|
112
|
-
},
|
|
113
|
-
caller
|
|
114
|
-
}) {
|
|
115
|
-
const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
|
|
116
|
-
defaultProp,
|
|
117
|
-
onChange
|
|
118
|
-
});
|
|
119
|
-
const isControlled = prop !== void 0;
|
|
120
|
-
const value = isControlled ? prop : uncontrolledProp;
|
|
121
|
-
{
|
|
122
|
-
const isControlledRef = React.useRef(prop !== void 0);
|
|
123
|
-
React.useEffect(() => {
|
|
124
|
-
const wasControlled = isControlledRef.current;
|
|
125
|
-
if (wasControlled !== isControlled) {
|
|
126
|
-
const from = wasControlled ? "controlled" : "uncontrolled";
|
|
127
|
-
const to = isControlled ? "controlled" : "uncontrolled";
|
|
128
|
-
console.warn(
|
|
129
|
-
`${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
|
|
130
|
-
);
|
|
131
|
-
}
|
|
132
|
-
isControlledRef.current = isControlled;
|
|
133
|
-
}, [isControlled, caller]);
|
|
134
|
-
}
|
|
135
|
-
const setValue = React.useCallback(
|
|
136
|
-
(nextValue) => {
|
|
137
|
-
if (isControlled) {
|
|
138
|
-
const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
|
|
139
|
-
if (value2 !== prop) {
|
|
140
|
-
onChangeRef.current?.(value2);
|
|
141
|
-
}
|
|
142
|
-
} else {
|
|
143
|
-
setUncontrolledProp(nextValue);
|
|
144
|
-
}
|
|
145
|
-
},
|
|
146
|
-
[isControlled, prop, setUncontrolledProp, onChangeRef]
|
|
147
|
-
);
|
|
148
|
-
return [value, setValue];
|
|
149
|
-
}
|
|
150
|
-
function useUncontrolledState({
|
|
151
|
-
defaultProp,
|
|
152
|
-
onChange
|
|
153
|
-
}) {
|
|
154
|
-
const [value, setValue] = React.useState(defaultProp);
|
|
155
|
-
const prevValueRef = React.useRef(value);
|
|
156
|
-
const onChangeRef = React.useRef(onChange);
|
|
157
|
-
useInsertionEffect(() => {
|
|
158
|
-
onChangeRef.current = onChange;
|
|
159
|
-
}, [onChange]);
|
|
160
|
-
React.useEffect(() => {
|
|
161
|
-
if (prevValueRef.current !== value) {
|
|
162
|
-
onChangeRef.current?.(value);
|
|
163
|
-
prevValueRef.current = value;
|
|
164
|
-
}
|
|
165
|
-
}, [value, prevValueRef]);
|
|
166
|
-
return [value, setValue, onChangeRef];
|
|
167
|
-
}
|
|
168
|
-
function isFunction(value) {
|
|
169
|
-
return typeof value === "function";
|
|
170
|
-
}
|
|
171
|
-
function useStateMachine(initialState, machine) {
|
|
172
|
-
return React.useReducer((state, event) => {
|
|
173
|
-
const nextState = machine[state][event];
|
|
174
|
-
return nextState ?? state;
|
|
175
|
-
}, initialState);
|
|
176
|
-
}
|
|
177
|
-
var Presence = (props) => {
|
|
178
|
-
const { present, children } = props;
|
|
179
|
-
const presence = usePresence(present);
|
|
180
|
-
const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children);
|
|
181
|
-
const ref = useComposedRefs(presence.ref, getElementRef(child));
|
|
182
|
-
const forceMount = typeof children === "function";
|
|
183
|
-
return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
|
|
184
|
-
};
|
|
185
|
-
Presence.displayName = "Presence";
|
|
186
|
-
function usePresence(present) {
|
|
187
|
-
const [node, setNode] = React.useState();
|
|
188
|
-
const stylesRef = React.useRef(null);
|
|
189
|
-
const prevPresentRef = React.useRef(present);
|
|
190
|
-
const prevAnimationNameRef = React.useRef("none");
|
|
191
|
-
const initialState = present ? "mounted" : "unmounted";
|
|
192
|
-
const [state, send] = useStateMachine(initialState, {
|
|
193
|
-
mounted: {
|
|
194
|
-
UNMOUNT: "unmounted",
|
|
195
|
-
ANIMATION_OUT: "unmountSuspended"
|
|
196
|
-
},
|
|
197
|
-
unmountSuspended: {
|
|
198
|
-
MOUNT: "mounted",
|
|
199
|
-
ANIMATION_END: "unmounted"
|
|
200
|
-
},
|
|
201
|
-
unmounted: {
|
|
202
|
-
MOUNT: "mounted"
|
|
203
|
-
}
|
|
204
|
-
});
|
|
205
|
-
React.useEffect(() => {
|
|
206
|
-
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
207
|
-
prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
|
|
208
|
-
}, [state]);
|
|
209
|
-
useLayoutEffect2(() => {
|
|
210
|
-
const styles = stylesRef.current;
|
|
211
|
-
const wasPresent = prevPresentRef.current;
|
|
212
|
-
const hasPresentChanged = wasPresent !== present;
|
|
213
|
-
if (hasPresentChanged) {
|
|
214
|
-
const prevAnimationName = prevAnimationNameRef.current;
|
|
215
|
-
const currentAnimationName = getAnimationName(styles);
|
|
216
|
-
if (present) {
|
|
217
|
-
send("MOUNT");
|
|
218
|
-
} else if (currentAnimationName === "none" || styles?.display === "none") {
|
|
219
|
-
send("UNMOUNT");
|
|
220
|
-
} else {
|
|
221
|
-
const isAnimating = prevAnimationName !== currentAnimationName;
|
|
222
|
-
if (wasPresent && isAnimating) {
|
|
223
|
-
send("ANIMATION_OUT");
|
|
224
|
-
} else {
|
|
225
|
-
send("UNMOUNT");
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
prevPresentRef.current = present;
|
|
229
|
-
}
|
|
230
|
-
}, [present, send]);
|
|
231
|
-
useLayoutEffect2(() => {
|
|
232
|
-
if (node) {
|
|
233
|
-
let timeoutId;
|
|
234
|
-
const ownerWindow = node.ownerDocument.defaultView ?? window;
|
|
235
|
-
const handleAnimationEnd = (event) => {
|
|
236
|
-
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
237
|
-
const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
|
|
238
|
-
if (event.target === node && isCurrentAnimation) {
|
|
239
|
-
send("ANIMATION_END");
|
|
240
|
-
if (!prevPresentRef.current) {
|
|
241
|
-
const currentFillMode = node.style.animationFillMode;
|
|
242
|
-
node.style.animationFillMode = "forwards";
|
|
243
|
-
timeoutId = ownerWindow.setTimeout(() => {
|
|
244
|
-
if (node.style.animationFillMode === "forwards") {
|
|
245
|
-
node.style.animationFillMode = currentFillMode;
|
|
246
|
-
}
|
|
247
|
-
});
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
};
|
|
251
|
-
const handleAnimationStart = (event) => {
|
|
252
|
-
if (event.target === node) {
|
|
253
|
-
prevAnimationNameRef.current = getAnimationName(stylesRef.current);
|
|
254
|
-
}
|
|
255
|
-
};
|
|
256
|
-
node.addEventListener("animationstart", handleAnimationStart);
|
|
257
|
-
node.addEventListener("animationcancel", handleAnimationEnd);
|
|
258
|
-
node.addEventListener("animationend", handleAnimationEnd);
|
|
259
|
-
return () => {
|
|
260
|
-
ownerWindow.clearTimeout(timeoutId);
|
|
261
|
-
node.removeEventListener("animationstart", handleAnimationStart);
|
|
262
|
-
node.removeEventListener("animationcancel", handleAnimationEnd);
|
|
263
|
-
node.removeEventListener("animationend", handleAnimationEnd);
|
|
264
|
-
};
|
|
265
|
-
} else {
|
|
266
|
-
send("ANIMATION_END");
|
|
267
|
-
}
|
|
268
|
-
}, [node, send]);
|
|
269
|
-
return {
|
|
270
|
-
isPresent: ["mounted", "unmountSuspended"].includes(state),
|
|
271
|
-
ref: React.useCallback((node2) => {
|
|
272
|
-
stylesRef.current = node2 ? getComputedStyle(node2) : null;
|
|
273
|
-
setNode(node2);
|
|
274
|
-
}, [])
|
|
275
|
-
};
|
|
276
|
-
}
|
|
277
|
-
function getAnimationName(styles) {
|
|
278
|
-
return styles?.animationName || "none";
|
|
279
|
-
}
|
|
280
|
-
function getElementRef(element) {
|
|
281
|
-
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
|
282
|
-
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
283
|
-
if (mayWarn) {
|
|
284
|
-
return element.ref;
|
|
2
|
+
function setRef(ref, value) {
|
|
3
|
+
if (typeof ref === "function") {
|
|
4
|
+
return ref(value);
|
|
5
|
+
} else if (ref !== null && ref !== void 0) {
|
|
6
|
+
ref.current = value;
|
|
285
7
|
}
|
|
286
|
-
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
|
287
|
-
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
288
|
-
if (mayWarn) {
|
|
289
|
-
return element.props.ref;
|
|
290
|
-
}
|
|
291
|
-
return element.props.ref || element.ref;
|
|
292
|
-
}
|
|
293
|
-
var useReactId = React[" useId ".trim().toString()] || (() => void 0);
|
|
294
|
-
var count = 0;
|
|
295
|
-
function useId(deterministicId) {
|
|
296
|
-
const [id, setId] = React.useState(useReactId());
|
|
297
|
-
useLayoutEffect2(() => {
|
|
298
|
-
setId((reactId) => reactId ?? String(count++));
|
|
299
|
-
}, [deterministicId]);
|
|
300
|
-
return id ? `radix-${id}` : "";
|
|
301
8
|
}
|
|
302
|
-
function
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
|
|
310
|
-
const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
|
|
311
|
-
React.useEffect(() => {
|
|
312
|
-
const handleKeyDown = (event) => {
|
|
313
|
-
if (event.key === "Escape") {
|
|
314
|
-
onEscapeKeyDown(event);
|
|
315
|
-
}
|
|
316
|
-
};
|
|
317
|
-
ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
|
|
318
|
-
return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
|
|
319
|
-
}, [onEscapeKeyDown, ownerDocument]);
|
|
320
|
-
}
|
|
321
|
-
var DISMISSABLE_LAYER_NAME = "DismissableLayer";
|
|
322
|
-
var CONTEXT_UPDATE = "dismissableLayer.update";
|
|
323
|
-
var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
|
|
324
|
-
var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
|
|
325
|
-
var originalBodyPointerEvents;
|
|
326
|
-
var DismissableLayerContext = React.createContext({
|
|
327
|
-
layers: /* @__PURE__ */ new Set(),
|
|
328
|
-
layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
|
|
329
|
-
branches: /* @__PURE__ */ new Set()
|
|
330
|
-
});
|
|
331
|
-
var DismissableLayer = React.forwardRef(
|
|
332
|
-
(props, forwardedRef) => {
|
|
333
|
-
const {
|
|
334
|
-
disableOutsidePointerEvents = false,
|
|
335
|
-
onEscapeKeyDown,
|
|
336
|
-
onPointerDownOutside,
|
|
337
|
-
onFocusOutside,
|
|
338
|
-
onInteractOutside,
|
|
339
|
-
onDismiss,
|
|
340
|
-
...layerProps
|
|
341
|
-
} = props;
|
|
342
|
-
const context = React.useContext(DismissableLayerContext);
|
|
343
|
-
const [node, setNode] = React.useState(null);
|
|
344
|
-
const ownerDocument = node?.ownerDocument ?? globalThis?.document;
|
|
345
|
-
const [, force] = React.useState({});
|
|
346
|
-
const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
|
|
347
|
-
const layers = Array.from(context.layers);
|
|
348
|
-
const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
|
|
349
|
-
const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
|
|
350
|
-
const index = node ? layers.indexOf(node) : -1;
|
|
351
|
-
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
|
|
352
|
-
const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
|
|
353
|
-
const pointerDownOutside = usePointerDownOutside((event) => {
|
|
354
|
-
const target = event.target;
|
|
355
|
-
const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
|
|
356
|
-
if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
|
|
357
|
-
onPointerDownOutside?.(event);
|
|
358
|
-
onInteractOutside?.(event);
|
|
359
|
-
if (!event.defaultPrevented) onDismiss?.();
|
|
360
|
-
}, ownerDocument);
|
|
361
|
-
const focusOutside = useFocusOutside((event) => {
|
|
362
|
-
const target = event.target;
|
|
363
|
-
const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
|
|
364
|
-
if (isFocusInBranch) return;
|
|
365
|
-
onFocusOutside?.(event);
|
|
366
|
-
onInteractOutside?.(event);
|
|
367
|
-
if (!event.defaultPrevented) onDismiss?.();
|
|
368
|
-
}, ownerDocument);
|
|
369
|
-
useEscapeKeydown((event) => {
|
|
370
|
-
const isHighestLayer = index === context.layers.size - 1;
|
|
371
|
-
if (!isHighestLayer) return;
|
|
372
|
-
onEscapeKeyDown?.(event);
|
|
373
|
-
if (!event.defaultPrevented && onDismiss) {
|
|
374
|
-
event.preventDefault();
|
|
375
|
-
onDismiss();
|
|
376
|
-
}
|
|
377
|
-
}, ownerDocument);
|
|
378
|
-
React.useEffect(() => {
|
|
379
|
-
if (!node) return;
|
|
380
|
-
if (disableOutsidePointerEvents) {
|
|
381
|
-
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
|
|
382
|
-
originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
|
|
383
|
-
ownerDocument.body.style.pointerEvents = "none";
|
|
384
|
-
}
|
|
385
|
-
context.layersWithOutsidePointerEventsDisabled.add(node);
|
|
9
|
+
function composeRefs(...refs) {
|
|
10
|
+
return (node) => {
|
|
11
|
+
let hasCleanup = false;
|
|
12
|
+
const cleanups = refs.map((ref) => {
|
|
13
|
+
const cleanup = setRef(ref, node);
|
|
14
|
+
if (!hasCleanup && typeof cleanup == "function") {
|
|
15
|
+
hasCleanup = true;
|
|
386
16
|
}
|
|
387
|
-
|
|
388
|
-
|
|
17
|
+
return cleanup;
|
|
18
|
+
});
|
|
19
|
+
if (hasCleanup) {
|
|
389
20
|
return () => {
|
|
390
|
-
|
|
391
|
-
|
|
21
|
+
for (let i = 0; i < cleanups.length; i++) {
|
|
22
|
+
const cleanup = cleanups[i];
|
|
23
|
+
if (typeof cleanup == "function") {
|
|
24
|
+
cleanup();
|
|
25
|
+
} else {
|
|
26
|
+
setRef(refs[i], null);
|
|
27
|
+
}
|
|
392
28
|
}
|
|
393
29
|
};
|
|
394
|
-
}, [node, ownerDocument, disableOutsidePointerEvents, context]);
|
|
395
|
-
React.useEffect(() => {
|
|
396
|
-
return () => {
|
|
397
|
-
if (!node) return;
|
|
398
|
-
context.layers.delete(node);
|
|
399
|
-
context.layersWithOutsidePointerEventsDisabled.delete(node);
|
|
400
|
-
dispatchUpdate();
|
|
401
|
-
};
|
|
402
|
-
}, [node, context]);
|
|
403
|
-
React.useEffect(() => {
|
|
404
|
-
const handleUpdate = () => force({});
|
|
405
|
-
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
406
|
-
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
407
|
-
}, []);
|
|
408
|
-
return /* @__PURE__ */ jsx(
|
|
409
|
-
Primitive.div,
|
|
410
|
-
{
|
|
411
|
-
...layerProps,
|
|
412
|
-
ref: composedRefs,
|
|
413
|
-
style: {
|
|
414
|
-
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
|
|
415
|
-
...props.style
|
|
416
|
-
},
|
|
417
|
-
onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
|
|
418
|
-
onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
|
|
419
|
-
onPointerDownCapture: composeEventHandlers(
|
|
420
|
-
props.onPointerDownCapture,
|
|
421
|
-
pointerDownOutside.onPointerDownCapture
|
|
422
|
-
)
|
|
423
|
-
}
|
|
424
|
-
);
|
|
425
|
-
}
|
|
426
|
-
);
|
|
427
|
-
DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
|
|
428
|
-
var BRANCH_NAME = "DismissableLayerBranch";
|
|
429
|
-
var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => {
|
|
430
|
-
const context = React.useContext(DismissableLayerContext);
|
|
431
|
-
const ref = React.useRef(null);
|
|
432
|
-
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
433
|
-
React.useEffect(() => {
|
|
434
|
-
const node = ref.current;
|
|
435
|
-
if (node) {
|
|
436
|
-
context.branches.add(node);
|
|
437
|
-
return () => {
|
|
438
|
-
context.branches.delete(node);
|
|
439
|
-
};
|
|
440
30
|
}
|
|
441
|
-
}, [context.branches]);
|
|
442
|
-
return /* @__PURE__ */ jsx(Primitive.div, { ...props, ref: composedRefs });
|
|
443
|
-
});
|
|
444
|
-
DismissableLayerBranch.displayName = BRANCH_NAME;
|
|
445
|
-
function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
|
|
446
|
-
const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
|
|
447
|
-
const isPointerInsideReactTreeRef = React.useRef(false);
|
|
448
|
-
const handleClickRef = React.useRef(() => {
|
|
449
|
-
});
|
|
450
|
-
React.useEffect(() => {
|
|
451
|
-
const handlePointerDown = (event) => {
|
|
452
|
-
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
453
|
-
let handleAndDispatchPointerDownOutsideEvent2 = function() {
|
|
454
|
-
handleAndDispatchCustomEvent(
|
|
455
|
-
POINTER_DOWN_OUTSIDE,
|
|
456
|
-
handlePointerDownOutside,
|
|
457
|
-
eventDetail,
|
|
458
|
-
{ discrete: true }
|
|
459
|
-
);
|
|
460
|
-
};
|
|
461
|
-
const eventDetail = { originalEvent: event };
|
|
462
|
-
if (event.pointerType === "touch") {
|
|
463
|
-
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
464
|
-
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
|
|
465
|
-
ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
|
|
466
|
-
} else {
|
|
467
|
-
handleAndDispatchPointerDownOutsideEvent2();
|
|
468
|
-
}
|
|
469
|
-
} else {
|
|
470
|
-
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
471
|
-
}
|
|
472
|
-
isPointerInsideReactTreeRef.current = false;
|
|
473
|
-
};
|
|
474
|
-
const timerId = window.setTimeout(() => {
|
|
475
|
-
ownerDocument.addEventListener("pointerdown", handlePointerDown);
|
|
476
|
-
}, 0);
|
|
477
|
-
return () => {
|
|
478
|
-
window.clearTimeout(timerId);
|
|
479
|
-
ownerDocument.removeEventListener("pointerdown", handlePointerDown);
|
|
480
|
-
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
481
|
-
};
|
|
482
|
-
}, [ownerDocument, handlePointerDownOutside]);
|
|
483
|
-
return {
|
|
484
|
-
// ensures we check React component tree (not just DOM tree)
|
|
485
|
-
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
|
|
486
31
|
};
|
|
487
32
|
}
|
|
488
|
-
function
|
|
489
|
-
|
|
490
|
-
const isFocusInsideReactTreeRef = React.useRef(false);
|
|
491
|
-
React.useEffect(() => {
|
|
492
|
-
const handleFocus = (event) => {
|
|
493
|
-
if (event.target && !isFocusInsideReactTreeRef.current) {
|
|
494
|
-
const eventDetail = { originalEvent: event };
|
|
495
|
-
handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
|
|
496
|
-
discrete: false
|
|
497
|
-
});
|
|
498
|
-
}
|
|
499
|
-
};
|
|
500
|
-
ownerDocument.addEventListener("focusin", handleFocus);
|
|
501
|
-
return () => ownerDocument.removeEventListener("focusin", handleFocus);
|
|
502
|
-
}, [ownerDocument, handleFocusOutside]);
|
|
503
|
-
return {
|
|
504
|
-
onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
|
|
505
|
-
onBlurCapture: () => isFocusInsideReactTreeRef.current = false
|
|
506
|
-
};
|
|
507
|
-
}
|
|
508
|
-
function dispatchUpdate() {
|
|
509
|
-
const event = new CustomEvent(CONTEXT_UPDATE);
|
|
510
|
-
document.dispatchEvent(event);
|
|
511
|
-
}
|
|
512
|
-
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
513
|
-
const target = detail.originalEvent.target;
|
|
514
|
-
const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
|
|
515
|
-
if (handler) target.addEventListener(name, handler, { once: true });
|
|
516
|
-
if (discrete) {
|
|
517
|
-
dispatchDiscreteCustomEvent(target, event);
|
|
518
|
-
} else {
|
|
519
|
-
target.dispatchEvent(event);
|
|
520
|
-
}
|
|
33
|
+
function useComposedRefs(...refs) {
|
|
34
|
+
return React.useCallback(composeRefs(...refs), refs);
|
|
521
35
|
}
|
|
522
36
|
export {
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
useId as a,
|
|
526
|
-
Presence as b,
|
|
527
|
-
createContextScope as c,
|
|
528
|
-
composeEventHandlers as d,
|
|
529
|
-
useCallbackRef as e,
|
|
530
|
-
useLayoutEffect2 as f,
|
|
531
|
-
dispatchDiscreteCustomEvent as g,
|
|
532
|
-
useControllableState as u
|
|
37
|
+
composeRefs as c,
|
|
38
|
+
useComposedRefs as u
|
|
533
39
|
};
|