mirror of
https://github.com/hex248/ob248.com.git
synced 2026-02-08 10:43:38 +00:00
15727 lines
581 KiB
JavaScript
15727 lines
581 KiB
JavaScript
import {
|
|
require_react_dom
|
|
} from "./chunk-IWOBEF4E.js";
|
|
import {
|
|
require_jsx_runtime
|
|
} from "./chunk-7HXCKB66.js";
|
|
import {
|
|
require_react
|
|
} from "./chunk-RY7GF66K.js";
|
|
import {
|
|
__commonJS,
|
|
__export,
|
|
__toESM
|
|
} from "./chunk-G3PMV62Z.js";
|
|
|
|
// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
|
|
var require_use_sync_external_store_shim_development = __commonJS({
|
|
"node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
|
|
"use strict";
|
|
(function() {
|
|
function is(x, y) {
|
|
return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
|
|
}
|
|
function useSyncExternalStore$2(subscribe2, getSnapshot) {
|
|
didWarnOld18Alpha || void 0 === React69.startTransition || (didWarnOld18Alpha = true, console.error(
|
|
"You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
|
|
));
|
|
var value = getSnapshot();
|
|
if (!didWarnUncachedGetSnapshot) {
|
|
var cachedValue = getSnapshot();
|
|
objectIs(value, cachedValue) || (console.error(
|
|
"The result of getSnapshot should be cached to avoid an infinite loop"
|
|
), didWarnUncachedGetSnapshot = true);
|
|
}
|
|
cachedValue = useState35({
|
|
inst: { value, getSnapshot }
|
|
});
|
|
var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
|
|
useLayoutEffect6(
|
|
function() {
|
|
inst.value = value;
|
|
inst.getSnapshot = getSnapshot;
|
|
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
|
|
},
|
|
[subscribe2, value, getSnapshot]
|
|
);
|
|
useEffect40(
|
|
function() {
|
|
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
|
|
return subscribe2(function() {
|
|
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
|
|
});
|
|
},
|
|
[subscribe2]
|
|
);
|
|
useDebugValue(value);
|
|
return value;
|
|
}
|
|
function checkIfSnapshotChanged(inst) {
|
|
var latestGetSnapshot = inst.getSnapshot;
|
|
inst = inst.value;
|
|
try {
|
|
var nextValue = latestGetSnapshot();
|
|
return !objectIs(inst, nextValue);
|
|
} catch (error) {
|
|
return true;
|
|
}
|
|
}
|
|
function useSyncExternalStore$1(subscribe2, getSnapshot) {
|
|
return getSnapshot();
|
|
}
|
|
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
|
|
var React69 = require_react(), objectIs = "function" === typeof Object.is ? Object.is : is, useState35 = React69.useState, useEffect40 = React69.useEffect, useLayoutEffect6 = React69.useLayoutEffect, useDebugValue = React69.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
|
|
exports.useSyncExternalStore = void 0 !== React69.useSyncExternalStore ? React69.useSyncExternalStore : shim;
|
|
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
|
|
})();
|
|
}
|
|
});
|
|
|
|
// node_modules/use-sync-external-store/shim/index.js
|
|
var require_shim = __commonJS({
|
|
"node_modules/use-sync-external-store/shim/index.js"(exports, module) {
|
|
"use strict";
|
|
if (false) {
|
|
module.exports = null;
|
|
} else {
|
|
module.exports = require_use_sync_external_store_shim_development();
|
|
}
|
|
}
|
|
});
|
|
|
|
// node_modules/@radix-ui/react-accessible-icon/dist/index.mjs
|
|
var dist_exports3 = {};
|
|
__export(dist_exports3, {
|
|
AccessibleIcon: () => AccessibleIcon,
|
|
Root: () => Root22
|
|
});
|
|
var React5 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-visually-hidden/dist/index.mjs
|
|
var dist_exports2 = {};
|
|
__export(dist_exports2, {
|
|
Root: () => Root2,
|
|
VISUALLY_HIDDEN_STYLES: () => VISUALLY_HIDDEN_STYLES,
|
|
VisuallyHidden: () => VisuallyHidden
|
|
});
|
|
var React4 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-primitive/dist/index.mjs
|
|
var React3 = __toESM(require_react(), 1);
|
|
var ReactDOM = __toESM(require_react_dom(), 1);
|
|
|
|
// node_modules/@radix-ui/react-slot/dist/index.mjs
|
|
var dist_exports = {};
|
|
__export(dist_exports, {
|
|
Root: () => Slot,
|
|
Slot: () => Slot,
|
|
Slottable: () => Slottable,
|
|
createSlot: () => createSlot,
|
|
createSlottable: () => createSlottable
|
|
});
|
|
var React2 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-compose-refs/dist/index.mjs
|
|
var React = __toESM(require_react(), 1);
|
|
function setRef(ref, value) {
|
|
if (typeof ref === "function") {
|
|
return ref(value);
|
|
} else if (ref !== null && ref !== void 0) {
|
|
ref.current = value;
|
|
}
|
|
}
|
|
function composeRefs(...refs) {
|
|
return (node) => {
|
|
let hasCleanup = false;
|
|
const cleanups = refs.map((ref) => {
|
|
const cleanup = setRef(ref, node);
|
|
if (!hasCleanup && typeof cleanup == "function") {
|
|
hasCleanup = true;
|
|
}
|
|
return cleanup;
|
|
});
|
|
if (hasCleanup) {
|
|
return () => {
|
|
for (let i = 0; i < cleanups.length; i++) {
|
|
const cleanup = cleanups[i];
|
|
if (typeof cleanup == "function") {
|
|
cleanup();
|
|
} else {
|
|
setRef(refs[i], null);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
};
|
|
}
|
|
function useComposedRefs(...refs) {
|
|
return React.useCallback(composeRefs(...refs), refs);
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-slot/dist/index.mjs
|
|
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
|
|
function createSlot(ownerName) {
|
|
const SlotClone = createSlotClone(ownerName);
|
|
const Slot22 = React2.forwardRef((props, forwardedRef) => {
|
|
const { children, ...slotProps } = props;
|
|
const childrenArray = React2.Children.toArray(children);
|
|
const slottable = childrenArray.find(isSlottable);
|
|
if (slottable) {
|
|
const newElement = slottable.props.children;
|
|
const newChildren = childrenArray.map((child) => {
|
|
if (child === slottable) {
|
|
if (React2.Children.count(newElement) > 1) return React2.Children.only(null);
|
|
return React2.isValidElement(newElement) ? newElement.props.children : null;
|
|
} else {
|
|
return child;
|
|
}
|
|
});
|
|
return (0, import_jsx_runtime.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children: React2.isValidElement(newElement) ? React2.cloneElement(newElement, void 0, newChildren) : null });
|
|
}
|
|
return (0, import_jsx_runtime.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children });
|
|
});
|
|
Slot22.displayName = `${ownerName}.Slot`;
|
|
return Slot22;
|
|
}
|
|
var Slot = createSlot("Slot");
|
|
function createSlotClone(ownerName) {
|
|
const SlotClone = React2.forwardRef((props, forwardedRef) => {
|
|
const { children, ...slotProps } = props;
|
|
if (React2.isValidElement(children)) {
|
|
const childrenRef = getElementRef(children);
|
|
const props2 = mergeProps(slotProps, children.props);
|
|
if (children.type !== React2.Fragment) {
|
|
props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
|
|
}
|
|
return React2.cloneElement(children, props2);
|
|
}
|
|
return React2.Children.count(children) > 1 ? React2.Children.only(null) : null;
|
|
});
|
|
SlotClone.displayName = `${ownerName}.SlotClone`;
|
|
return SlotClone;
|
|
}
|
|
var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
|
|
function createSlottable(ownerName) {
|
|
const Slottable22 = ({ children }) => {
|
|
return (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
|
|
};
|
|
Slottable22.displayName = `${ownerName}.Slottable`;
|
|
Slottable22.__radixId = SLOTTABLE_IDENTIFIER;
|
|
return Slottable22;
|
|
}
|
|
var Slottable = createSlottable("Slottable");
|
|
function isSlottable(child) {
|
|
return React2.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
|
|
}
|
|
function mergeProps(slotProps, childProps) {
|
|
const overrideProps = { ...childProps };
|
|
for (const propName in childProps) {
|
|
const slotPropValue = slotProps[propName];
|
|
const childPropValue = childProps[propName];
|
|
const isHandler = /^on[A-Z]/.test(propName);
|
|
if (isHandler) {
|
|
if (slotPropValue && childPropValue) {
|
|
overrideProps[propName] = (...args) => {
|
|
const result = childPropValue(...args);
|
|
slotPropValue(...args);
|
|
return result;
|
|
};
|
|
} else if (slotPropValue) {
|
|
overrideProps[propName] = slotPropValue;
|
|
}
|
|
} else if (propName === "style") {
|
|
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
|
|
} else if (propName === "className") {
|
|
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
|
|
}
|
|
}
|
|
return { ...slotProps, ...overrideProps };
|
|
}
|
|
function getElementRef(element) {
|
|
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
|
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
if (mayWarn) {
|
|
return element.ref;
|
|
}
|
|
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
|
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
if (mayWarn) {
|
|
return element.props.ref;
|
|
}
|
|
return element.props.ref || element.ref;
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-primitive/dist/index.mjs
|
|
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
|
|
var NODES = [
|
|
"a",
|
|
"button",
|
|
"div",
|
|
"form",
|
|
"h2",
|
|
"h3",
|
|
"img",
|
|
"input",
|
|
"label",
|
|
"li",
|
|
"nav",
|
|
"ol",
|
|
"p",
|
|
"select",
|
|
"span",
|
|
"svg",
|
|
"ul"
|
|
];
|
|
var Primitive = NODES.reduce((primitive, node) => {
|
|
const Slot6 = createSlot(`Primitive.${node}`);
|
|
const Node2 = React3.forwardRef((props, forwardedRef) => {
|
|
const { asChild, ...primitiveProps } = props;
|
|
const Comp = asChild ? Slot6 : node;
|
|
if (typeof window !== "undefined") {
|
|
window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
|
|
}
|
|
return (0, import_jsx_runtime2.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
});
|
|
Node2.displayName = `Primitive.${node}`;
|
|
return { ...primitive, [node]: Node2 };
|
|
}, {});
|
|
function dispatchDiscreteCustomEvent(target, event) {
|
|
if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
|
|
}
|
|
var Root = Primitive;
|
|
|
|
// node_modules/@radix-ui/react-visually-hidden/dist/index.mjs
|
|
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
|
|
var VISUALLY_HIDDEN_STYLES = Object.freeze({
|
|
// See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
|
|
position: "absolute",
|
|
border: 0,
|
|
width: 1,
|
|
height: 1,
|
|
padding: 0,
|
|
margin: -1,
|
|
overflow: "hidden",
|
|
clip: "rect(0, 0, 0, 0)",
|
|
whiteSpace: "nowrap",
|
|
wordWrap: "normal"
|
|
});
|
|
var NAME = "VisuallyHidden";
|
|
var VisuallyHidden = React4.forwardRef(
|
|
(props, forwardedRef) => {
|
|
return (0, import_jsx_runtime3.jsx)(
|
|
Primitive.span,
|
|
{
|
|
...props,
|
|
ref: forwardedRef,
|
|
style: { ...VISUALLY_HIDDEN_STYLES, ...props.style }
|
|
}
|
|
);
|
|
}
|
|
);
|
|
VisuallyHidden.displayName = NAME;
|
|
var Root2 = VisuallyHidden;
|
|
|
|
// node_modules/@radix-ui/react-accessible-icon/dist/index.mjs
|
|
var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
|
|
var NAME2 = "AccessibleIcon";
|
|
var AccessibleIcon = ({ children, label }) => {
|
|
const child = React5.Children.only(children);
|
|
return (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
React5.cloneElement(child, {
|
|
// accessibility
|
|
"aria-hidden": "true",
|
|
focusable: "false"
|
|
// See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
|
|
}),
|
|
(0, import_jsx_runtime4.jsx)(Root2, { children: label })
|
|
] });
|
|
};
|
|
AccessibleIcon.displayName = NAME2;
|
|
var Root22 = AccessibleIcon;
|
|
|
|
// node_modules/@radix-ui/react-accordion/dist/index.mjs
|
|
var dist_exports6 = {};
|
|
__export(dist_exports6, {
|
|
Accordion: () => Accordion,
|
|
AccordionContent: () => AccordionContent,
|
|
AccordionHeader: () => AccordionHeader,
|
|
AccordionItem: () => AccordionItem,
|
|
AccordionTrigger: () => AccordionTrigger,
|
|
Content: () => Content2,
|
|
Header: () => Header,
|
|
Item: () => Item,
|
|
Root: () => Root23,
|
|
Trigger: () => Trigger2,
|
|
createAccordionScope: () => createAccordionScope
|
|
});
|
|
var import_react3 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-context/dist/index.mjs
|
|
var React6 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
|
|
function createContext2(rootComponentName, defaultContext) {
|
|
const Context = React6.createContext(defaultContext);
|
|
const Provider4 = (props) => {
|
|
const { children, ...context } = props;
|
|
const value = React6.useMemo(() => context, Object.values(context));
|
|
return (0, import_jsx_runtime5.jsx)(Context.Provider, { value, children });
|
|
};
|
|
Provider4.displayName = rootComponentName + "Provider";
|
|
function useContext22(consumerName) {
|
|
const context = React6.useContext(Context);
|
|
if (context) return context;
|
|
if (defaultContext !== void 0) return defaultContext;
|
|
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
|
|
}
|
|
return [Provider4, useContext22];
|
|
}
|
|
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
let defaultContexts = [];
|
|
function createContext32(rootComponentName, defaultContext) {
|
|
const BaseContext = React6.createContext(defaultContext);
|
|
const index2 = defaultContexts.length;
|
|
defaultContexts = [...defaultContexts, defaultContext];
|
|
const Provider4 = (props) => {
|
|
const { scope, children, ...context } = props;
|
|
const Context = scope?.[scopeName]?.[index2] || BaseContext;
|
|
const value = React6.useMemo(() => context, Object.values(context));
|
|
return (0, import_jsx_runtime5.jsx)(Context.Provider, { value, children });
|
|
};
|
|
Provider4.displayName = rootComponentName + "Provider";
|
|
function useContext22(consumerName, scope) {
|
|
const Context = scope?.[scopeName]?.[index2] || BaseContext;
|
|
const context = React6.useContext(Context);
|
|
if (context) return context;
|
|
if (defaultContext !== void 0) return defaultContext;
|
|
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
|
|
}
|
|
return [Provider4, useContext22];
|
|
}
|
|
const createScope = () => {
|
|
const scopeContexts = defaultContexts.map((defaultContext) => {
|
|
return React6.createContext(defaultContext);
|
|
});
|
|
return function useScope(scope) {
|
|
const contexts = scope?.[scopeName] || scopeContexts;
|
|
return React6.useMemo(
|
|
() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
|
|
[scope, contexts]
|
|
);
|
|
};
|
|
};
|
|
createScope.scopeName = scopeName;
|
|
return [createContext32, composeContextScopes(createScope, ...createContextScopeDeps)];
|
|
}
|
|
function composeContextScopes(...scopes) {
|
|
const baseScope = scopes[0];
|
|
if (scopes.length === 1) return baseScope;
|
|
const createScope = () => {
|
|
const scopeHooks = scopes.map((createScope2) => ({
|
|
useScope: createScope2(),
|
|
scopeName: createScope2.scopeName
|
|
}));
|
|
return function useComposedScopes(overrideScopes) {
|
|
const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
|
|
const scopeProps = useScope(overrideScopes);
|
|
const currentScope = scopeProps[`__scope${scopeName}`];
|
|
return { ...nextScopes2, ...currentScope };
|
|
}, {});
|
|
return React6.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
|
|
};
|
|
};
|
|
createScope.scopeName = baseScope.scopeName;
|
|
return createScope;
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-collection/dist/index.mjs
|
|
var import_react = __toESM(require_react(), 1);
|
|
var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
|
|
var import_react2 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
|
|
function createCollection(name) {
|
|
const PROVIDER_NAME3 = name + "CollectionProvider";
|
|
const [createCollectionContext, createCollectionScope10] = createContextScope(PROVIDER_NAME3);
|
|
const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
|
|
PROVIDER_NAME3,
|
|
{ collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
|
|
);
|
|
const CollectionProvider = (props) => {
|
|
const { scope, children } = props;
|
|
const ref = import_react.default.useRef(null);
|
|
const itemMap = import_react.default.useRef(/* @__PURE__ */ new Map()).current;
|
|
return (0, import_jsx_runtime6.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
|
|
};
|
|
CollectionProvider.displayName = PROVIDER_NAME3;
|
|
const COLLECTION_SLOT_NAME = name + "CollectionSlot";
|
|
const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
|
|
const CollectionSlot = import_react.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { scope, children } = props;
|
|
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
|
|
const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
|
|
return (0, import_jsx_runtime6.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
|
|
}
|
|
);
|
|
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
const ITEM_SLOT_NAME = name + "CollectionItemSlot";
|
|
const ITEM_DATA_ATTR = "data-radix-collection-item";
|
|
const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
|
|
const CollectionItemSlot = import_react.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { scope, children, ...itemData } = props;
|
|
const ref = import_react.default.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const context = useCollectionContext(ITEM_SLOT_NAME, scope);
|
|
import_react.default.useEffect(() => {
|
|
context.itemMap.set(ref, { ref, ...itemData });
|
|
return () => void context.itemMap.delete(ref);
|
|
});
|
|
return (0, import_jsx_runtime6.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
|
|
}
|
|
);
|
|
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
function useCollection10(scope) {
|
|
const context = useCollectionContext(name + "CollectionConsumer", scope);
|
|
const getItems = import_react.default.useCallback(() => {
|
|
const collectionNode = context.collectionRef.current;
|
|
if (!collectionNode) return [];
|
|
const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
|
|
const items = Array.from(context.itemMap.values());
|
|
const orderedItems = items.sort(
|
|
(a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
|
|
);
|
|
return orderedItems;
|
|
}, [context.collectionRef, context.itemMap]);
|
|
return getItems;
|
|
}
|
|
return [
|
|
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
|
|
useCollection10,
|
|
createCollectionScope10
|
|
];
|
|
}
|
|
var __instanciated = /* @__PURE__ */ new WeakMap();
|
|
var OrderedDict = class _OrderedDict extends Map {
|
|
#keys;
|
|
constructor(entries) {
|
|
super(entries);
|
|
this.#keys = [...super.keys()];
|
|
__instanciated.set(this, true);
|
|
}
|
|
set(key, value) {
|
|
if (__instanciated.get(this)) {
|
|
if (this.has(key)) {
|
|
this.#keys[this.#keys.indexOf(key)] = key;
|
|
} else {
|
|
this.#keys.push(key);
|
|
}
|
|
}
|
|
super.set(key, value);
|
|
return this;
|
|
}
|
|
insert(index2, key, value) {
|
|
const has = this.has(key);
|
|
const length = this.#keys.length;
|
|
const relativeIndex = toSafeInteger(index2);
|
|
let actualIndex = relativeIndex >= 0 ? relativeIndex : length + relativeIndex;
|
|
const safeIndex = actualIndex < 0 || actualIndex >= length ? -1 : actualIndex;
|
|
if (safeIndex === this.size || has && safeIndex === this.size - 1 || safeIndex === -1) {
|
|
this.set(key, value);
|
|
return this;
|
|
}
|
|
const size4 = this.size + (has ? 0 : 1);
|
|
if (relativeIndex < 0) {
|
|
actualIndex++;
|
|
}
|
|
const keys = [...this.#keys];
|
|
let nextValue;
|
|
let shouldSkip = false;
|
|
for (let i = actualIndex; i < size4; i++) {
|
|
if (actualIndex === i) {
|
|
let nextKey = keys[i];
|
|
if (keys[i] === key) {
|
|
nextKey = keys[i + 1];
|
|
}
|
|
if (has) {
|
|
this.delete(key);
|
|
}
|
|
nextValue = this.get(nextKey);
|
|
this.set(key, value);
|
|
} else {
|
|
if (!shouldSkip && keys[i - 1] === key) {
|
|
shouldSkip = true;
|
|
}
|
|
const currentKey = keys[shouldSkip ? i : i - 1];
|
|
const currentValue = nextValue;
|
|
nextValue = this.get(currentKey);
|
|
this.delete(currentKey);
|
|
this.set(currentKey, currentValue);
|
|
}
|
|
}
|
|
return this;
|
|
}
|
|
with(index2, key, value) {
|
|
const copy = new _OrderedDict(this);
|
|
copy.insert(index2, key, value);
|
|
return copy;
|
|
}
|
|
before(key) {
|
|
const index2 = this.#keys.indexOf(key) - 1;
|
|
if (index2 < 0) {
|
|
return void 0;
|
|
}
|
|
return this.entryAt(index2);
|
|
}
|
|
/**
|
|
* Sets a new key-value pair at the position before the given key.
|
|
*/
|
|
setBefore(key, newKey, value) {
|
|
const index2 = this.#keys.indexOf(key);
|
|
if (index2 === -1) {
|
|
return this;
|
|
}
|
|
return this.insert(index2, newKey, value);
|
|
}
|
|
after(key) {
|
|
let index2 = this.#keys.indexOf(key);
|
|
index2 = index2 === -1 || index2 === this.size - 1 ? -1 : index2 + 1;
|
|
if (index2 === -1) {
|
|
return void 0;
|
|
}
|
|
return this.entryAt(index2);
|
|
}
|
|
/**
|
|
* Sets a new key-value pair at the position after the given key.
|
|
*/
|
|
setAfter(key, newKey, value) {
|
|
const index2 = this.#keys.indexOf(key);
|
|
if (index2 === -1) {
|
|
return this;
|
|
}
|
|
return this.insert(index2 + 1, newKey, value);
|
|
}
|
|
first() {
|
|
return this.entryAt(0);
|
|
}
|
|
last() {
|
|
return this.entryAt(-1);
|
|
}
|
|
clear() {
|
|
this.#keys = [];
|
|
return super.clear();
|
|
}
|
|
delete(key) {
|
|
const deleted = super.delete(key);
|
|
if (deleted) {
|
|
this.#keys.splice(this.#keys.indexOf(key), 1);
|
|
}
|
|
return deleted;
|
|
}
|
|
deleteAt(index2) {
|
|
const key = this.keyAt(index2);
|
|
if (key !== void 0) {
|
|
return this.delete(key);
|
|
}
|
|
return false;
|
|
}
|
|
at(index2) {
|
|
const key = at(this.#keys, index2);
|
|
if (key !== void 0) {
|
|
return this.get(key);
|
|
}
|
|
}
|
|
entryAt(index2) {
|
|
const key = at(this.#keys, index2);
|
|
if (key !== void 0) {
|
|
return [key, this.get(key)];
|
|
}
|
|
}
|
|
indexOf(key) {
|
|
return this.#keys.indexOf(key);
|
|
}
|
|
keyAt(index2) {
|
|
return at(this.#keys, index2);
|
|
}
|
|
from(key, offset4) {
|
|
const index2 = this.indexOf(key);
|
|
if (index2 === -1) {
|
|
return void 0;
|
|
}
|
|
let dest = index2 + offset4;
|
|
if (dest < 0) dest = 0;
|
|
if (dest >= this.size) dest = this.size - 1;
|
|
return this.at(dest);
|
|
}
|
|
keyFrom(key, offset4) {
|
|
const index2 = this.indexOf(key);
|
|
if (index2 === -1) {
|
|
return void 0;
|
|
}
|
|
let dest = index2 + offset4;
|
|
if (dest < 0) dest = 0;
|
|
if (dest >= this.size) dest = this.size - 1;
|
|
return this.keyAt(dest);
|
|
}
|
|
find(predicate, thisArg) {
|
|
let index2 = 0;
|
|
for (const entry of this) {
|
|
if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
|
|
return entry;
|
|
}
|
|
index2++;
|
|
}
|
|
return void 0;
|
|
}
|
|
findIndex(predicate, thisArg) {
|
|
let index2 = 0;
|
|
for (const entry of this) {
|
|
if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
|
|
return index2;
|
|
}
|
|
index2++;
|
|
}
|
|
return -1;
|
|
}
|
|
filter(predicate, thisArg) {
|
|
const entries = [];
|
|
let index2 = 0;
|
|
for (const entry of this) {
|
|
if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
|
|
entries.push(entry);
|
|
}
|
|
index2++;
|
|
}
|
|
return new _OrderedDict(entries);
|
|
}
|
|
map(callbackfn, thisArg) {
|
|
const entries = [];
|
|
let index2 = 0;
|
|
for (const entry of this) {
|
|
entries.push([entry[0], Reflect.apply(callbackfn, thisArg, [entry, index2, this])]);
|
|
index2++;
|
|
}
|
|
return new _OrderedDict(entries);
|
|
}
|
|
reduce(...args) {
|
|
const [callbackfn, initialValue] = args;
|
|
let index2 = 0;
|
|
let accumulator = initialValue ?? this.at(0);
|
|
for (const entry of this) {
|
|
if (index2 === 0 && args.length === 1) {
|
|
accumulator = entry;
|
|
} else {
|
|
accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
|
|
}
|
|
index2++;
|
|
}
|
|
return accumulator;
|
|
}
|
|
reduceRight(...args) {
|
|
const [callbackfn, initialValue] = args;
|
|
let accumulator = initialValue ?? this.at(-1);
|
|
for (let index2 = this.size - 1; index2 >= 0; index2--) {
|
|
const entry = this.at(index2);
|
|
if (index2 === this.size - 1 && args.length === 1) {
|
|
accumulator = entry;
|
|
} else {
|
|
accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
|
|
}
|
|
}
|
|
return accumulator;
|
|
}
|
|
toSorted(compareFn) {
|
|
const entries = [...this.entries()].sort(compareFn);
|
|
return new _OrderedDict(entries);
|
|
}
|
|
toReversed() {
|
|
const reversed = new _OrderedDict();
|
|
for (let index2 = this.size - 1; index2 >= 0; index2--) {
|
|
const key = this.keyAt(index2);
|
|
const element = this.get(key);
|
|
reversed.set(key, element);
|
|
}
|
|
return reversed;
|
|
}
|
|
toSpliced(...args) {
|
|
const entries = [...this.entries()];
|
|
entries.splice(...args);
|
|
return new _OrderedDict(entries);
|
|
}
|
|
slice(start, end) {
|
|
const result = new _OrderedDict();
|
|
let stop = this.size - 1;
|
|
if (start === void 0) {
|
|
return result;
|
|
}
|
|
if (start < 0) {
|
|
start = start + this.size;
|
|
}
|
|
if (end !== void 0 && end > 0) {
|
|
stop = end - 1;
|
|
}
|
|
for (let index2 = start; index2 <= stop; index2++) {
|
|
const key = this.keyAt(index2);
|
|
const element = this.get(key);
|
|
result.set(key, element);
|
|
}
|
|
return result;
|
|
}
|
|
every(predicate, thisArg) {
|
|
let index2 = 0;
|
|
for (const entry of this) {
|
|
if (!Reflect.apply(predicate, thisArg, [entry, index2, this])) {
|
|
return false;
|
|
}
|
|
index2++;
|
|
}
|
|
return true;
|
|
}
|
|
some(predicate, thisArg) {
|
|
let index2 = 0;
|
|
for (const entry of this) {
|
|
if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
|
|
return true;
|
|
}
|
|
index2++;
|
|
}
|
|
return false;
|
|
}
|
|
};
|
|
function at(array, index2) {
|
|
if ("at" in Array.prototype) {
|
|
return Array.prototype.at.call(array, index2);
|
|
}
|
|
const actualIndex = toSafeIndex(array, index2);
|
|
return actualIndex === -1 ? void 0 : array[actualIndex];
|
|
}
|
|
function toSafeIndex(array, index2) {
|
|
const length = array.length;
|
|
const relativeIndex = toSafeInteger(index2);
|
|
const actualIndex = relativeIndex >= 0 ? relativeIndex : length + relativeIndex;
|
|
return actualIndex < 0 || actualIndex >= length ? -1 : actualIndex;
|
|
}
|
|
function toSafeInteger(number) {
|
|
return number !== number || number === 0 ? 0 : Math.trunc(number);
|
|
}
|
|
function createCollection2(name) {
|
|
const PROVIDER_NAME3 = name + "CollectionProvider";
|
|
const [createCollectionContext, createCollectionScope10] = createContextScope(PROVIDER_NAME3);
|
|
const [CollectionContextProvider, useCollectionContext] = createCollectionContext(
|
|
PROVIDER_NAME3,
|
|
{
|
|
collectionElement: null,
|
|
collectionRef: { current: null },
|
|
collectionRefObject: { current: null },
|
|
itemMap: new OrderedDict(),
|
|
setItemMap: () => void 0
|
|
}
|
|
);
|
|
const CollectionProvider = ({ state, ...props }) => {
|
|
return state ? (0, import_jsx_runtime7.jsx)(CollectionProviderImpl, { ...props, state }) : (0, import_jsx_runtime7.jsx)(CollectionInit, { ...props });
|
|
};
|
|
CollectionProvider.displayName = PROVIDER_NAME3;
|
|
const CollectionInit = (props) => {
|
|
const state = useInitCollection2();
|
|
return (0, import_jsx_runtime7.jsx)(CollectionProviderImpl, { ...props, state });
|
|
};
|
|
CollectionInit.displayName = PROVIDER_NAME3 + "Init";
|
|
const CollectionProviderImpl = (props) => {
|
|
const { scope, children, state } = props;
|
|
const ref = import_react2.default.useRef(null);
|
|
const [collectionElement, setCollectionElement] = import_react2.default.useState(
|
|
null
|
|
);
|
|
const composeRefs2 = useComposedRefs(ref, setCollectionElement);
|
|
const [itemMap, setItemMap] = state;
|
|
import_react2.default.useEffect(() => {
|
|
if (!collectionElement) return;
|
|
const observer = getChildListObserver(() => {
|
|
});
|
|
observer.observe(collectionElement, {
|
|
childList: true,
|
|
subtree: true
|
|
});
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, [collectionElement]);
|
|
return (0, import_jsx_runtime7.jsx)(
|
|
CollectionContextProvider,
|
|
{
|
|
scope,
|
|
itemMap,
|
|
setItemMap,
|
|
collectionRef: composeRefs2,
|
|
collectionRefObject: ref,
|
|
collectionElement,
|
|
children
|
|
}
|
|
);
|
|
};
|
|
CollectionProviderImpl.displayName = PROVIDER_NAME3 + "Impl";
|
|
const COLLECTION_SLOT_NAME = name + "CollectionSlot";
|
|
const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
|
|
const CollectionSlot = import_react2.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { scope, children } = props;
|
|
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
|
|
const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
|
|
return (0, import_jsx_runtime7.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
|
|
}
|
|
);
|
|
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
const ITEM_SLOT_NAME = name + "CollectionItemSlot";
|
|
const ITEM_DATA_ATTR = "data-radix-collection-item";
|
|
const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
|
|
const CollectionItemSlot = import_react2.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { scope, children, ...itemData } = props;
|
|
const ref = import_react2.default.useRef(null);
|
|
const [element, setElement] = import_react2.default.useState(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref, setElement);
|
|
const context = useCollectionContext(ITEM_SLOT_NAME, scope);
|
|
const { setItemMap } = context;
|
|
const itemDataRef = import_react2.default.useRef(itemData);
|
|
if (!shallowEqual(itemDataRef.current, itemData)) {
|
|
itemDataRef.current = itemData;
|
|
}
|
|
const memoizedItemData = itemDataRef.current;
|
|
import_react2.default.useEffect(() => {
|
|
const itemData2 = memoizedItemData;
|
|
setItemMap((map) => {
|
|
if (!element) {
|
|
return map;
|
|
}
|
|
if (!map.has(element)) {
|
|
map.set(element, { ...itemData2, element });
|
|
return map.toSorted(sortByDocumentPosition);
|
|
}
|
|
return map.set(element, { ...itemData2, element }).toSorted(sortByDocumentPosition);
|
|
});
|
|
return () => {
|
|
setItemMap((map) => {
|
|
if (!element || !map.has(element)) {
|
|
return map;
|
|
}
|
|
map.delete(element);
|
|
return new OrderedDict(map);
|
|
});
|
|
};
|
|
}, [element, memoizedItemData, setItemMap]);
|
|
return (0, import_jsx_runtime7.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
|
|
}
|
|
);
|
|
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
function useInitCollection2() {
|
|
return import_react2.default.useState(new OrderedDict());
|
|
}
|
|
function useCollection10(scope) {
|
|
const { itemMap } = useCollectionContext(name + "CollectionConsumer", scope);
|
|
return itemMap;
|
|
}
|
|
const functions = {
|
|
createCollectionScope: createCollectionScope10,
|
|
useCollection: useCollection10,
|
|
useInitCollection: useInitCollection2
|
|
};
|
|
return [
|
|
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
|
|
functions
|
|
];
|
|
}
|
|
function shallowEqual(a, b) {
|
|
if (a === b) return true;
|
|
if (typeof a !== "object" || typeof b !== "object") return false;
|
|
if (a == null || b == null) return false;
|
|
const keysA = Object.keys(a);
|
|
const keysB = Object.keys(b);
|
|
if (keysA.length !== keysB.length) return false;
|
|
for (const key of keysA) {
|
|
if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
|
|
if (a[key] !== b[key]) return false;
|
|
}
|
|
return true;
|
|
}
|
|
function isElementPreceding(a, b) {
|
|
return !!(b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING);
|
|
}
|
|
function sortByDocumentPosition(a, b) {
|
|
return !a[1].element || !b[1].element ? 0 : isElementPreceding(a[1].element, b[1].element) ? -1 : 1;
|
|
}
|
|
function getChildListObserver(callback) {
|
|
const observer = new MutationObserver((mutationsList) => {
|
|
for (const mutation of mutationsList) {
|
|
if (mutation.type === "childList") {
|
|
callback();
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
return observer;
|
|
}
|
|
|
|
// node_modules/@radix-ui/primitive/dist/index.mjs
|
|
var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
|
|
function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
|
|
return function handleEvent(event) {
|
|
originalEventHandler?.(event);
|
|
if (checkForDefaultPrevented === false || !event.defaultPrevented) {
|
|
return ourEventHandler?.(event);
|
|
}
|
|
};
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
|
|
var React10 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
|
|
var React8 = __toESM(require_react(), 1);
|
|
var useLayoutEffect2 = globalThis?.document ? React8.useLayoutEffect : () => {
|
|
};
|
|
|
|
// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
|
|
var React23 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-use-effect-event/dist/index.mjs
|
|
var React9 = __toESM(require_react(), 1);
|
|
var useReactEffectEvent = React9[" useEffectEvent ".trim().toString()];
|
|
var useReactInsertionEffect = React9[" useInsertionEffect ".trim().toString()];
|
|
function useEffectEvent(callback) {
|
|
if (typeof useReactEffectEvent === "function") {
|
|
return useReactEffectEvent(callback);
|
|
}
|
|
const ref = React9.useRef(() => {
|
|
throw new Error("Cannot call an event handler while rendering.");
|
|
});
|
|
if (typeof useReactInsertionEffect === "function") {
|
|
useReactInsertionEffect(() => {
|
|
ref.current = callback;
|
|
});
|
|
} else {
|
|
useLayoutEffect2(() => {
|
|
ref.current = callback;
|
|
});
|
|
}
|
|
return React9.useMemo(() => (...args) => ref.current?.(...args), []);
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
|
|
var useInsertionEffect = React10[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
|
|
function useControllableState({
|
|
prop,
|
|
defaultProp,
|
|
onChange = () => {
|
|
},
|
|
caller
|
|
}) {
|
|
const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
|
|
defaultProp,
|
|
onChange
|
|
});
|
|
const isControlled = prop !== void 0;
|
|
const value = isControlled ? prop : uncontrolledProp;
|
|
if (true) {
|
|
const isControlledRef = React10.useRef(prop !== void 0);
|
|
React10.useEffect(() => {
|
|
const wasControlled = isControlledRef.current;
|
|
if (wasControlled !== isControlled) {
|
|
const from = wasControlled ? "controlled" : "uncontrolled";
|
|
const to = isControlled ? "controlled" : "uncontrolled";
|
|
console.warn(
|
|
`${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.`
|
|
);
|
|
}
|
|
isControlledRef.current = isControlled;
|
|
}, [isControlled, caller]);
|
|
}
|
|
const setValue = React10.useCallback(
|
|
(nextValue) => {
|
|
if (isControlled) {
|
|
const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
|
|
if (value2 !== prop) {
|
|
onChangeRef.current?.(value2);
|
|
}
|
|
} else {
|
|
setUncontrolledProp(nextValue);
|
|
}
|
|
},
|
|
[isControlled, prop, setUncontrolledProp, onChangeRef]
|
|
);
|
|
return [value, setValue];
|
|
}
|
|
function useUncontrolledState({
|
|
defaultProp,
|
|
onChange
|
|
}) {
|
|
const [value, setValue] = React10.useState(defaultProp);
|
|
const prevValueRef = React10.useRef(value);
|
|
const onChangeRef = React10.useRef(onChange);
|
|
useInsertionEffect(() => {
|
|
onChangeRef.current = onChange;
|
|
}, [onChange]);
|
|
React10.useEffect(() => {
|
|
if (prevValueRef.current !== value) {
|
|
onChangeRef.current?.(value);
|
|
prevValueRef.current = value;
|
|
}
|
|
}, [value, prevValueRef]);
|
|
return [value, setValue, onChangeRef];
|
|
}
|
|
function isFunction(value) {
|
|
return typeof value === "function";
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-collapsible/dist/index.mjs
|
|
var dist_exports4 = {};
|
|
__export(dist_exports4, {
|
|
Collapsible: () => Collapsible,
|
|
CollapsibleContent: () => CollapsibleContent,
|
|
CollapsibleTrigger: () => CollapsibleTrigger,
|
|
Content: () => Content,
|
|
Root: () => Root3,
|
|
Trigger: () => Trigger,
|
|
createCollapsibleScope: () => createCollapsibleScope
|
|
});
|
|
var React13 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-presence/dist/index.mjs
|
|
var React24 = __toESM(require_react(), 1);
|
|
var React11 = __toESM(require_react(), 1);
|
|
function useStateMachine(initialState, machine) {
|
|
return React11.useReducer((state, event) => {
|
|
const nextState = machine[state][event];
|
|
return nextState ?? state;
|
|
}, initialState);
|
|
}
|
|
var Presence = (props) => {
|
|
const { present, children } = props;
|
|
const presence = usePresence(present);
|
|
const child = typeof children === "function" ? children({ present: presence.isPresent }) : React24.Children.only(children);
|
|
const ref = useComposedRefs(presence.ref, getElementRef2(child));
|
|
const forceMount = typeof children === "function";
|
|
return forceMount || presence.isPresent ? React24.cloneElement(child, { ref }) : null;
|
|
};
|
|
Presence.displayName = "Presence";
|
|
function usePresence(present) {
|
|
const [node, setNode] = React24.useState();
|
|
const stylesRef = React24.useRef(null);
|
|
const prevPresentRef = React24.useRef(present);
|
|
const prevAnimationNameRef = React24.useRef("none");
|
|
const initialState = present ? "mounted" : "unmounted";
|
|
const [state, send] = useStateMachine(initialState, {
|
|
mounted: {
|
|
UNMOUNT: "unmounted",
|
|
ANIMATION_OUT: "unmountSuspended"
|
|
},
|
|
unmountSuspended: {
|
|
MOUNT: "mounted",
|
|
ANIMATION_END: "unmounted"
|
|
},
|
|
unmounted: {
|
|
MOUNT: "mounted"
|
|
}
|
|
});
|
|
React24.useEffect(() => {
|
|
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
|
|
}, [state]);
|
|
useLayoutEffect2(() => {
|
|
const styles = stylesRef.current;
|
|
const wasPresent = prevPresentRef.current;
|
|
const hasPresentChanged = wasPresent !== present;
|
|
if (hasPresentChanged) {
|
|
const prevAnimationName = prevAnimationNameRef.current;
|
|
const currentAnimationName = getAnimationName(styles);
|
|
if (present) {
|
|
send("MOUNT");
|
|
} else if (currentAnimationName === "none" || styles?.display === "none") {
|
|
send("UNMOUNT");
|
|
} else {
|
|
const isAnimating = prevAnimationName !== currentAnimationName;
|
|
if (wasPresent && isAnimating) {
|
|
send("ANIMATION_OUT");
|
|
} else {
|
|
send("UNMOUNT");
|
|
}
|
|
}
|
|
prevPresentRef.current = present;
|
|
}
|
|
}, [present, send]);
|
|
useLayoutEffect2(() => {
|
|
if (node) {
|
|
let timeoutId;
|
|
const ownerWindow = node.ownerDocument.defaultView ?? window;
|
|
const handleAnimationEnd = (event) => {
|
|
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
|
|
if (event.target === node && isCurrentAnimation) {
|
|
send("ANIMATION_END");
|
|
if (!prevPresentRef.current) {
|
|
const currentFillMode = node.style.animationFillMode;
|
|
node.style.animationFillMode = "forwards";
|
|
timeoutId = ownerWindow.setTimeout(() => {
|
|
if (node.style.animationFillMode === "forwards") {
|
|
node.style.animationFillMode = currentFillMode;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
const handleAnimationStart = (event) => {
|
|
if (event.target === node) {
|
|
prevAnimationNameRef.current = getAnimationName(stylesRef.current);
|
|
}
|
|
};
|
|
node.addEventListener("animationstart", handleAnimationStart);
|
|
node.addEventListener("animationcancel", handleAnimationEnd);
|
|
node.addEventListener("animationend", handleAnimationEnd);
|
|
return () => {
|
|
ownerWindow.clearTimeout(timeoutId);
|
|
node.removeEventListener("animationstart", handleAnimationStart);
|
|
node.removeEventListener("animationcancel", handleAnimationEnd);
|
|
node.removeEventListener("animationend", handleAnimationEnd);
|
|
};
|
|
} else {
|
|
send("ANIMATION_END");
|
|
}
|
|
}, [node, send]);
|
|
return {
|
|
isPresent: ["mounted", "unmountSuspended"].includes(state),
|
|
ref: React24.useCallback((node2) => {
|
|
stylesRef.current = node2 ? getComputedStyle(node2) : null;
|
|
setNode(node2);
|
|
}, [])
|
|
};
|
|
}
|
|
function getAnimationName(styles) {
|
|
return styles?.animationName || "none";
|
|
}
|
|
function getElementRef2(element) {
|
|
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
|
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
if (mayWarn) {
|
|
return element.ref;
|
|
}
|
|
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
|
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
if (mayWarn) {
|
|
return element.props.ref;
|
|
}
|
|
return element.props.ref || element.ref;
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-id/dist/index.mjs
|
|
var React12 = __toESM(require_react(), 1);
|
|
var useReactId = React12[" useId ".trim().toString()] || (() => void 0);
|
|
var count = 0;
|
|
function useId(deterministicId) {
|
|
const [id, setId] = React12.useState(useReactId());
|
|
useLayoutEffect2(() => {
|
|
if (!deterministicId) setId((reactId) => reactId ?? String(count++));
|
|
}, [deterministicId]);
|
|
return deterministicId || (id ? `radix-${id}` : "");
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-collapsible/dist/index.mjs
|
|
var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
|
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
|
|
var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
|
|
var Collapsible = React13.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeCollapsible,
|
|
open: openProp,
|
|
defaultOpen,
|
|
disabled,
|
|
onOpenChange,
|
|
...collapsibleProps
|
|
} = props;
|
|
const [open, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen ?? false,
|
|
onChange: onOpenChange,
|
|
caller: COLLAPSIBLE_NAME
|
|
});
|
|
return (0, import_jsx_runtime8.jsx)(
|
|
CollapsibleProvider,
|
|
{
|
|
scope: __scopeCollapsible,
|
|
disabled,
|
|
contentId: useId(),
|
|
open,
|
|
onOpenToggle: React13.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
children: (0, import_jsx_runtime8.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-state": getState(open),
|
|
"data-disabled": disabled ? "" : void 0,
|
|
...collapsibleProps,
|
|
ref: forwardedRef
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
Collapsible.displayName = COLLAPSIBLE_NAME;
|
|
var TRIGGER_NAME = "CollapsibleTrigger";
|
|
var CollapsibleTrigger = React13.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeCollapsible, ...triggerProps } = props;
|
|
const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
|
|
return (0, import_jsx_runtime8.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
"aria-controls": context.contentId,
|
|
"aria-expanded": context.open || false,
|
|
"data-state": getState(context.open),
|
|
"data-disabled": context.disabled ? "" : void 0,
|
|
disabled: context.disabled,
|
|
...triggerProps,
|
|
ref: forwardedRef,
|
|
onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
CollapsibleTrigger.displayName = TRIGGER_NAME;
|
|
var CONTENT_NAME = "CollapsibleContent";
|
|
var CollapsibleContent = React13.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { forceMount, ...contentProps } = props;
|
|
const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
|
|
return (0, import_jsx_runtime8.jsx)(Presence, { present: forceMount || context.open, children: ({ present }) => (0, import_jsx_runtime8.jsx)(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
|
|
}
|
|
);
|
|
CollapsibleContent.displayName = CONTENT_NAME;
|
|
var CollapsibleContentImpl = React13.forwardRef((props, forwardedRef) => {
|
|
const { __scopeCollapsible, present, children, ...contentProps } = props;
|
|
const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
|
|
const [isPresent, setIsPresent] = React13.useState(present);
|
|
const ref = React13.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const heightRef = React13.useRef(0);
|
|
const height = heightRef.current;
|
|
const widthRef = React13.useRef(0);
|
|
const width = widthRef.current;
|
|
const isOpen = context.open || isPresent;
|
|
const isMountAnimationPreventedRef = React13.useRef(isOpen);
|
|
const originalStylesRef = React13.useRef(void 0);
|
|
React13.useEffect(() => {
|
|
const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
|
|
return () => cancelAnimationFrame(rAF);
|
|
}, []);
|
|
useLayoutEffect2(() => {
|
|
const node = ref.current;
|
|
if (node) {
|
|
originalStylesRef.current = originalStylesRef.current || {
|
|
transitionDuration: node.style.transitionDuration,
|
|
animationName: node.style.animationName
|
|
};
|
|
node.style.transitionDuration = "0s";
|
|
node.style.animationName = "none";
|
|
const rect = node.getBoundingClientRect();
|
|
heightRef.current = rect.height;
|
|
widthRef.current = rect.width;
|
|
if (!isMountAnimationPreventedRef.current) {
|
|
node.style.transitionDuration = originalStylesRef.current.transitionDuration;
|
|
node.style.animationName = originalStylesRef.current.animationName;
|
|
}
|
|
setIsPresent(present);
|
|
}
|
|
}, [context.open, present]);
|
|
return (0, import_jsx_runtime8.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-state": getState(context.open),
|
|
"data-disabled": context.disabled ? "" : void 0,
|
|
id: context.contentId,
|
|
hidden: !isOpen,
|
|
...contentProps,
|
|
ref: composedRefs,
|
|
style: {
|
|
[`--radix-collapsible-content-height`]: height ? `${height}px` : void 0,
|
|
[`--radix-collapsible-content-width`]: width ? `${width}px` : void 0,
|
|
...props.style
|
|
},
|
|
children: isOpen && children
|
|
}
|
|
);
|
|
});
|
|
function getState(open) {
|
|
return open ? "open" : "closed";
|
|
}
|
|
var Root3 = Collapsible;
|
|
var Trigger = CollapsibleTrigger;
|
|
var Content = CollapsibleContent;
|
|
|
|
// node_modules/@radix-ui/react-direction/dist/index.mjs
|
|
var dist_exports5 = {};
|
|
__export(dist_exports5, {
|
|
DirectionProvider: () => DirectionProvider,
|
|
Provider: () => Provider,
|
|
useDirection: () => useDirection
|
|
});
|
|
var React14 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
|
|
var DirectionContext = React14.createContext(void 0);
|
|
var DirectionProvider = (props) => {
|
|
const { dir, children } = props;
|
|
return (0, import_jsx_runtime9.jsx)(DirectionContext.Provider, { value: dir, children });
|
|
};
|
|
function useDirection(localDir) {
|
|
const globalDir = React14.useContext(DirectionContext);
|
|
return localDir || globalDir || "ltr";
|
|
}
|
|
var Provider = DirectionProvider;
|
|
|
|
// node_modules/@radix-ui/react-accordion/dist/index.mjs
|
|
var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
|
|
var ACCORDION_NAME = "Accordion";
|
|
var ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
|
|
var [Collection, useCollection, createCollectionScope] = createCollection(ACCORDION_NAME);
|
|
var [createAccordionContext, createAccordionScope] = createContextScope(ACCORDION_NAME, [
|
|
createCollectionScope,
|
|
createCollapsibleScope
|
|
]);
|
|
var useCollapsibleScope = createCollapsibleScope();
|
|
var Accordion = import_react3.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { type, ...accordionProps } = props;
|
|
const singleProps = accordionProps;
|
|
const multipleProps = accordionProps;
|
|
return (0, import_jsx_runtime10.jsx)(Collection.Provider, { scope: props.__scopeAccordion, children: type === "multiple" ? (0, import_jsx_runtime10.jsx)(AccordionImplMultiple, { ...multipleProps, ref: forwardedRef }) : (0, import_jsx_runtime10.jsx)(AccordionImplSingle, { ...singleProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
Accordion.displayName = ACCORDION_NAME;
|
|
var [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME);
|
|
var [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(
|
|
ACCORDION_NAME,
|
|
{ collapsible: false }
|
|
);
|
|
var AccordionImplSingle = import_react3.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
value: valueProp,
|
|
defaultValue,
|
|
onValueChange = () => {
|
|
},
|
|
collapsible = false,
|
|
...accordionSingleProps
|
|
} = props;
|
|
const [value, setValue] = useControllableState({
|
|
prop: valueProp,
|
|
defaultProp: defaultValue ?? "",
|
|
onChange: onValueChange,
|
|
caller: ACCORDION_NAME
|
|
});
|
|
return (0, import_jsx_runtime10.jsx)(
|
|
AccordionValueProvider,
|
|
{
|
|
scope: props.__scopeAccordion,
|
|
value: import_react3.default.useMemo(() => value ? [value] : [], [value]),
|
|
onItemOpen: setValue,
|
|
onItemClose: import_react3.default.useCallback(() => collapsible && setValue(""), [collapsible, setValue]),
|
|
children: (0, import_jsx_runtime10.jsx)(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible, children: (0, import_jsx_runtime10.jsx)(AccordionImpl, { ...accordionSingleProps, ref: forwardedRef }) })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var AccordionImplMultiple = import_react3.default.forwardRef((props, forwardedRef) => {
|
|
const {
|
|
value: valueProp,
|
|
defaultValue,
|
|
onValueChange = () => {
|
|
},
|
|
...accordionMultipleProps
|
|
} = props;
|
|
const [value, setValue] = useControllableState({
|
|
prop: valueProp,
|
|
defaultProp: defaultValue ?? [],
|
|
onChange: onValueChange,
|
|
caller: ACCORDION_NAME
|
|
});
|
|
const handleItemOpen = import_react3.default.useCallback(
|
|
(itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
|
|
[setValue]
|
|
);
|
|
const handleItemClose = import_react3.default.useCallback(
|
|
(itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
|
|
[setValue]
|
|
);
|
|
return (0, import_jsx_runtime10.jsx)(
|
|
AccordionValueProvider,
|
|
{
|
|
scope: props.__scopeAccordion,
|
|
value,
|
|
onItemOpen: handleItemOpen,
|
|
onItemClose: handleItemClose,
|
|
children: (0, import_jsx_runtime10.jsx)(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible: true, children: (0, import_jsx_runtime10.jsx)(AccordionImpl, { ...accordionMultipleProps, ref: forwardedRef }) })
|
|
}
|
|
);
|
|
});
|
|
var [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
|
|
var AccordionImpl = import_react3.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
|
|
const accordionRef = import_react3.default.useRef(null);
|
|
const composedRefs = useComposedRefs(accordionRef, forwardedRef);
|
|
const getItems = useCollection(__scopeAccordion);
|
|
const direction = useDirection(dir);
|
|
const isDirectionLTR = direction === "ltr";
|
|
const handleKeyDown = composeEventHandlers(props.onKeyDown, (event) => {
|
|
if (!ACCORDION_KEYS.includes(event.key)) return;
|
|
const target = event.target;
|
|
const triggerCollection = getItems().filter((item) => !item.ref.current?.disabled);
|
|
const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);
|
|
const triggerCount = triggerCollection.length;
|
|
if (triggerIndex === -1) return;
|
|
event.preventDefault();
|
|
let nextIndex = triggerIndex;
|
|
const homeIndex = 0;
|
|
const endIndex = triggerCount - 1;
|
|
const moveNext = () => {
|
|
nextIndex = triggerIndex + 1;
|
|
if (nextIndex > endIndex) {
|
|
nextIndex = homeIndex;
|
|
}
|
|
};
|
|
const movePrev = () => {
|
|
nextIndex = triggerIndex - 1;
|
|
if (nextIndex < homeIndex) {
|
|
nextIndex = endIndex;
|
|
}
|
|
};
|
|
switch (event.key) {
|
|
case "Home":
|
|
nextIndex = homeIndex;
|
|
break;
|
|
case "End":
|
|
nextIndex = endIndex;
|
|
break;
|
|
case "ArrowRight":
|
|
if (orientation === "horizontal") {
|
|
if (isDirectionLTR) {
|
|
moveNext();
|
|
} else {
|
|
movePrev();
|
|
}
|
|
}
|
|
break;
|
|
case "ArrowDown":
|
|
if (orientation === "vertical") {
|
|
moveNext();
|
|
}
|
|
break;
|
|
case "ArrowLeft":
|
|
if (orientation === "horizontal") {
|
|
if (isDirectionLTR) {
|
|
movePrev();
|
|
} else {
|
|
moveNext();
|
|
}
|
|
}
|
|
break;
|
|
case "ArrowUp":
|
|
if (orientation === "vertical") {
|
|
movePrev();
|
|
}
|
|
break;
|
|
}
|
|
const clampedIndex = nextIndex % triggerCount;
|
|
triggerCollection[clampedIndex].ref.current?.focus();
|
|
});
|
|
return (0, import_jsx_runtime10.jsx)(
|
|
AccordionImplProvider,
|
|
{
|
|
scope: __scopeAccordion,
|
|
disabled,
|
|
direction: dir,
|
|
orientation,
|
|
children: (0, import_jsx_runtime10.jsx)(Collection.Slot, { scope: __scopeAccordion, children: (0, import_jsx_runtime10.jsx)(
|
|
Primitive.div,
|
|
{
|
|
...accordionProps,
|
|
"data-orientation": orientation,
|
|
ref: composedRefs,
|
|
onKeyDown: disabled ? void 0 : handleKeyDown
|
|
}
|
|
) })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var ITEM_NAME = "AccordionItem";
|
|
var [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME);
|
|
var AccordionItem = import_react3.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAccordion, value, ...accordionItemProps } = props;
|
|
const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion);
|
|
const valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion);
|
|
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
const triggerId = useId();
|
|
const open = value && valueContext.value.includes(value) || false;
|
|
const disabled = accordionContext.disabled || props.disabled;
|
|
return (0, import_jsx_runtime10.jsx)(
|
|
AccordionItemProvider,
|
|
{
|
|
scope: __scopeAccordion,
|
|
open,
|
|
disabled,
|
|
triggerId,
|
|
children: (0, import_jsx_runtime10.jsx)(
|
|
Root3,
|
|
{
|
|
"data-orientation": accordionContext.orientation,
|
|
"data-state": getState2(open),
|
|
...collapsibleScope,
|
|
...accordionItemProps,
|
|
ref: forwardedRef,
|
|
disabled,
|
|
open,
|
|
onOpenChange: (open2) => {
|
|
if (open2) {
|
|
valueContext.onItemOpen(value);
|
|
} else {
|
|
valueContext.onItemClose(value);
|
|
}
|
|
}
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
AccordionItem.displayName = ITEM_NAME;
|
|
var HEADER_NAME = "AccordionHeader";
|
|
var AccordionHeader = import_react3.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAccordion, ...headerProps } = props;
|
|
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
|
|
const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
|
|
return (0, import_jsx_runtime10.jsx)(
|
|
Primitive.h3,
|
|
{
|
|
"data-orientation": accordionContext.orientation,
|
|
"data-state": getState2(itemContext.open),
|
|
"data-disabled": itemContext.disabled ? "" : void 0,
|
|
...headerProps,
|
|
ref: forwardedRef
|
|
}
|
|
);
|
|
}
|
|
);
|
|
AccordionHeader.displayName = HEADER_NAME;
|
|
var TRIGGER_NAME2 = "AccordionTrigger";
|
|
var AccordionTrigger = import_react3.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAccordion, ...triggerProps } = props;
|
|
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
|
|
const itemContext = useAccordionItemContext(TRIGGER_NAME2, __scopeAccordion);
|
|
const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME2, __scopeAccordion);
|
|
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
return (0, import_jsx_runtime10.jsx)(Collection.ItemSlot, { scope: __scopeAccordion, children: (0, import_jsx_runtime10.jsx)(
|
|
Trigger,
|
|
{
|
|
"aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
|
|
"data-orientation": accordionContext.orientation,
|
|
id: itemContext.triggerId,
|
|
...collapsibleScope,
|
|
...triggerProps,
|
|
ref: forwardedRef
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
AccordionTrigger.displayName = TRIGGER_NAME2;
|
|
var CONTENT_NAME2 = "AccordionContent";
|
|
var AccordionContent = import_react3.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAccordion, ...contentProps } = props;
|
|
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
|
|
const itemContext = useAccordionItemContext(CONTENT_NAME2, __scopeAccordion);
|
|
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
return (0, import_jsx_runtime10.jsx)(
|
|
Content,
|
|
{
|
|
role: "region",
|
|
"aria-labelledby": itemContext.triggerId,
|
|
"data-orientation": accordionContext.orientation,
|
|
...collapsibleScope,
|
|
...contentProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
["--radix-accordion-content-height"]: "var(--radix-collapsible-content-height)",
|
|
["--radix-accordion-content-width"]: "var(--radix-collapsible-content-width)",
|
|
...props.style
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
AccordionContent.displayName = CONTENT_NAME2;
|
|
function getState2(open) {
|
|
return open ? "open" : "closed";
|
|
}
|
|
var Root23 = Accordion;
|
|
var Item = AccordionItem;
|
|
var Header = AccordionHeader;
|
|
var Trigger2 = AccordionTrigger;
|
|
var Content2 = AccordionContent;
|
|
|
|
// node_modules/@radix-ui/react-alert-dialog/dist/index.mjs
|
|
var dist_exports9 = {};
|
|
__export(dist_exports9, {
|
|
Action: () => Action,
|
|
AlertDialog: () => AlertDialog,
|
|
AlertDialogAction: () => AlertDialogAction,
|
|
AlertDialogCancel: () => AlertDialogCancel,
|
|
AlertDialogContent: () => AlertDialogContent,
|
|
AlertDialogDescription: () => AlertDialogDescription,
|
|
AlertDialogOverlay: () => AlertDialogOverlay,
|
|
AlertDialogPortal: () => AlertDialogPortal,
|
|
AlertDialogTitle: () => AlertDialogTitle,
|
|
AlertDialogTrigger: () => AlertDialogTrigger,
|
|
Cancel: () => Cancel,
|
|
Content: () => Content22,
|
|
Description: () => Description2,
|
|
Overlay: () => Overlay2,
|
|
Portal: () => Portal22,
|
|
Root: () => Root24,
|
|
Title: () => Title2,
|
|
Trigger: () => Trigger22,
|
|
createAlertDialogScope: () => createAlertDialogScope
|
|
});
|
|
var React35 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-dialog/dist/index.mjs
|
|
var dist_exports8 = {};
|
|
__export(dist_exports8, {
|
|
Close: () => Close,
|
|
Content: () => Content3,
|
|
Description: () => Description,
|
|
Dialog: () => Dialog,
|
|
DialogClose: () => DialogClose,
|
|
DialogContent: () => DialogContent,
|
|
DialogDescription: () => DialogDescription,
|
|
DialogOverlay: () => DialogOverlay,
|
|
DialogPortal: () => DialogPortal,
|
|
DialogTitle: () => DialogTitle,
|
|
DialogTrigger: () => DialogTrigger,
|
|
Overlay: () => Overlay,
|
|
Portal: () => Portal2,
|
|
Root: () => Root6,
|
|
Title: () => Title,
|
|
Trigger: () => Trigger3,
|
|
WarningProvider: () => WarningProvider,
|
|
createDialogScope: () => createDialogScope
|
|
});
|
|
var React34 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
|
|
var React18 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
|
|
var React16 = __toESM(require_react(), 1);
|
|
function useCallbackRef(callback) {
|
|
const callbackRef = React16.useRef(callback);
|
|
React16.useEffect(() => {
|
|
callbackRef.current = callback;
|
|
});
|
|
return React16.useMemo(() => (...args) => callbackRef.current?.(...args), []);
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-use-escape-keydown/dist/index.mjs
|
|
var React17 = __toESM(require_react(), 1);
|
|
function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
|
|
const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
|
|
React17.useEffect(() => {
|
|
const handleKeyDown = (event) => {
|
|
if (event.key === "Escape") {
|
|
onEscapeKeyDown(event);
|
|
}
|
|
};
|
|
ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
|
|
return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
|
|
}, [onEscapeKeyDown, ownerDocument]);
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
|
|
var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
|
|
var DISMISSABLE_LAYER_NAME = "DismissableLayer";
|
|
var CONTEXT_UPDATE = "dismissableLayer.update";
|
|
var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
|
|
var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
|
|
var originalBodyPointerEvents;
|
|
var DismissableLayerContext = React18.createContext({
|
|
layers: /* @__PURE__ */ new Set(),
|
|
layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
|
|
branches: /* @__PURE__ */ new Set()
|
|
});
|
|
var DismissableLayer = React18.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
disableOutsidePointerEvents = false,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside,
|
|
onInteractOutside,
|
|
onDismiss,
|
|
...layerProps
|
|
} = props;
|
|
const context = React18.useContext(DismissableLayerContext);
|
|
const [node, setNode] = React18.useState(null);
|
|
const ownerDocument = node?.ownerDocument ?? globalThis?.document;
|
|
const [, force] = React18.useState({});
|
|
const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
|
|
const layers = Array.from(context.layers);
|
|
const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
|
|
const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
|
|
const index2 = node ? layers.indexOf(node) : -1;
|
|
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
|
|
const isPointerEventsEnabled = index2 >= highestLayerWithOutsidePointerEventsDisabledIndex;
|
|
const pointerDownOutside = usePointerDownOutside((event) => {
|
|
const target = event.target;
|
|
const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
|
|
if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
|
|
onPointerDownOutside?.(event);
|
|
onInteractOutside?.(event);
|
|
if (!event.defaultPrevented) onDismiss?.();
|
|
}, ownerDocument);
|
|
const focusOutside = useFocusOutside((event) => {
|
|
const target = event.target;
|
|
const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
|
|
if (isFocusInBranch) return;
|
|
onFocusOutside?.(event);
|
|
onInteractOutside?.(event);
|
|
if (!event.defaultPrevented) onDismiss?.();
|
|
}, ownerDocument);
|
|
useEscapeKeydown((event) => {
|
|
const isHighestLayer = index2 === context.layers.size - 1;
|
|
if (!isHighestLayer) return;
|
|
onEscapeKeyDown?.(event);
|
|
if (!event.defaultPrevented && onDismiss) {
|
|
event.preventDefault();
|
|
onDismiss();
|
|
}
|
|
}, ownerDocument);
|
|
React18.useEffect(() => {
|
|
if (!node) return;
|
|
if (disableOutsidePointerEvents) {
|
|
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
|
|
originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
|
|
ownerDocument.body.style.pointerEvents = "none";
|
|
}
|
|
context.layersWithOutsidePointerEventsDisabled.add(node);
|
|
}
|
|
context.layers.add(node);
|
|
dispatchUpdate();
|
|
return () => {
|
|
if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
|
|
ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
|
|
}
|
|
};
|
|
}, [node, ownerDocument, disableOutsidePointerEvents, context]);
|
|
React18.useEffect(() => {
|
|
return () => {
|
|
if (!node) return;
|
|
context.layers.delete(node);
|
|
context.layersWithOutsidePointerEventsDisabled.delete(node);
|
|
dispatchUpdate();
|
|
};
|
|
}, [node, context]);
|
|
React18.useEffect(() => {
|
|
const handleUpdate = () => force({});
|
|
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
}, []);
|
|
return (0, import_jsx_runtime11.jsx)(
|
|
Primitive.div,
|
|
{
|
|
...layerProps,
|
|
ref: composedRefs,
|
|
style: {
|
|
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
|
|
...props.style
|
|
},
|
|
onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
|
|
onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
|
|
onPointerDownCapture: composeEventHandlers(
|
|
props.onPointerDownCapture,
|
|
pointerDownOutside.onPointerDownCapture
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
|
|
var BRANCH_NAME = "DismissableLayerBranch";
|
|
var DismissableLayerBranch = React18.forwardRef((props, forwardedRef) => {
|
|
const context = React18.useContext(DismissableLayerContext);
|
|
const ref = React18.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
React18.useEffect(() => {
|
|
const node = ref.current;
|
|
if (node) {
|
|
context.branches.add(node);
|
|
return () => {
|
|
context.branches.delete(node);
|
|
};
|
|
}
|
|
}, [context.branches]);
|
|
return (0, import_jsx_runtime11.jsx)(Primitive.div, { ...props, ref: composedRefs });
|
|
});
|
|
DismissableLayerBranch.displayName = BRANCH_NAME;
|
|
function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
|
|
const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
|
|
const isPointerInsideReactTreeRef = React18.useRef(false);
|
|
const handleClickRef = React18.useRef(() => {
|
|
});
|
|
React18.useEffect(() => {
|
|
const handlePointerDown = (event) => {
|
|
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
let handleAndDispatchPointerDownOutsideEvent2 = function() {
|
|
handleAndDispatchCustomEvent(
|
|
POINTER_DOWN_OUTSIDE,
|
|
handlePointerDownOutside,
|
|
eventDetail,
|
|
{ discrete: true }
|
|
);
|
|
};
|
|
var handleAndDispatchPointerDownOutsideEvent = handleAndDispatchPointerDownOutsideEvent2;
|
|
const eventDetail = { originalEvent: event };
|
|
if (event.pointerType === "touch") {
|
|
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
|
|
ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
|
|
} else {
|
|
handleAndDispatchPointerDownOutsideEvent2();
|
|
}
|
|
} else {
|
|
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
}
|
|
isPointerInsideReactTreeRef.current = false;
|
|
};
|
|
const timerId = window.setTimeout(() => {
|
|
ownerDocument.addEventListener("pointerdown", handlePointerDown);
|
|
}, 0);
|
|
return () => {
|
|
window.clearTimeout(timerId);
|
|
ownerDocument.removeEventListener("pointerdown", handlePointerDown);
|
|
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
};
|
|
}, [ownerDocument, handlePointerDownOutside]);
|
|
return {
|
|
// ensures we check React component tree (not just DOM tree)
|
|
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
|
|
};
|
|
}
|
|
function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
|
|
const handleFocusOutside = useCallbackRef(onFocusOutside);
|
|
const isFocusInsideReactTreeRef = React18.useRef(false);
|
|
React18.useEffect(() => {
|
|
const handleFocus = (event) => {
|
|
if (event.target && !isFocusInsideReactTreeRef.current) {
|
|
const eventDetail = { originalEvent: event };
|
|
handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
|
|
discrete: false
|
|
});
|
|
}
|
|
};
|
|
ownerDocument.addEventListener("focusin", handleFocus);
|
|
return () => ownerDocument.removeEventListener("focusin", handleFocus);
|
|
}, [ownerDocument, handleFocusOutside]);
|
|
return {
|
|
onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
|
|
onBlurCapture: () => isFocusInsideReactTreeRef.current = false
|
|
};
|
|
}
|
|
function dispatchUpdate() {
|
|
const event = new CustomEvent(CONTEXT_UPDATE);
|
|
document.dispatchEvent(event);
|
|
}
|
|
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
const target = detail.originalEvent.target;
|
|
const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
|
|
if (handler) target.addEventListener(name, handler, { once: true });
|
|
if (discrete) {
|
|
dispatchDiscreteCustomEvent(target, event);
|
|
} else {
|
|
target.dispatchEvent(event);
|
|
}
|
|
}
|
|
var Root4 = DismissableLayer;
|
|
var Branch = DismissableLayerBranch;
|
|
|
|
// node_modules/@radix-ui/react-focus-scope/dist/index.mjs
|
|
var React19 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
|
|
var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
|
|
var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
|
|
var EVENT_OPTIONS = { bubbles: false, cancelable: true };
|
|
var FOCUS_SCOPE_NAME = "FocusScope";
|
|
var FocusScope = React19.forwardRef((props, forwardedRef) => {
|
|
const {
|
|
loop = false,
|
|
trapped = false,
|
|
onMountAutoFocus: onMountAutoFocusProp,
|
|
onUnmountAutoFocus: onUnmountAutoFocusProp,
|
|
...scopeProps
|
|
} = props;
|
|
const [container, setContainer] = React19.useState(null);
|
|
const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
|
|
const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
|
|
const lastFocusedElementRef = React19.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));
|
|
const focusScope = React19.useRef({
|
|
paused: false,
|
|
pause() {
|
|
this.paused = true;
|
|
},
|
|
resume() {
|
|
this.paused = false;
|
|
}
|
|
}).current;
|
|
React19.useEffect(() => {
|
|
if (trapped) {
|
|
let handleFocusIn2 = function(event) {
|
|
if (focusScope.paused || !container) return;
|
|
const target = event.target;
|
|
if (container.contains(target)) {
|
|
lastFocusedElementRef.current = target;
|
|
} else {
|
|
focus(lastFocusedElementRef.current, { select: true });
|
|
}
|
|
}, handleFocusOut2 = function(event) {
|
|
if (focusScope.paused || !container) return;
|
|
const relatedTarget = event.relatedTarget;
|
|
if (relatedTarget === null) return;
|
|
if (!container.contains(relatedTarget)) {
|
|
focus(lastFocusedElementRef.current, { select: true });
|
|
}
|
|
}, handleMutations2 = function(mutations) {
|
|
const focusedElement = document.activeElement;
|
|
if (focusedElement !== document.body) return;
|
|
for (const mutation of mutations) {
|
|
if (mutation.removedNodes.length > 0) focus(container);
|
|
}
|
|
};
|
|
var handleFocusIn = handleFocusIn2, handleFocusOut = handleFocusOut2, handleMutations = handleMutations2;
|
|
document.addEventListener("focusin", handleFocusIn2);
|
|
document.addEventListener("focusout", handleFocusOut2);
|
|
const mutationObserver = new MutationObserver(handleMutations2);
|
|
if (container) mutationObserver.observe(container, { childList: true, subtree: true });
|
|
return () => {
|
|
document.removeEventListener("focusin", handleFocusIn2);
|
|
document.removeEventListener("focusout", handleFocusOut2);
|
|
mutationObserver.disconnect();
|
|
};
|
|
}
|
|
}, [trapped, container, focusScope.paused]);
|
|
React19.useEffect(() => {
|
|
if (container) {
|
|
focusScopesStack.add(focusScope);
|
|
const previouslyFocusedElement = document.activeElement;
|
|
const hasFocusedCandidate = container.contains(previouslyFocusedElement);
|
|
if (!hasFocusedCandidate) {
|
|
const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
|
|
container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
|
|
container.dispatchEvent(mountEvent);
|
|
if (!mountEvent.defaultPrevented) {
|
|
focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
|
|
if (document.activeElement === previouslyFocusedElement) {
|
|
focus(container);
|
|
}
|
|
}
|
|
}
|
|
return () => {
|
|
container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
|
|
setTimeout(() => {
|
|
const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
|
|
container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
|
|
container.dispatchEvent(unmountEvent);
|
|
if (!unmountEvent.defaultPrevented) {
|
|
focus(previouslyFocusedElement ?? document.body, { select: true });
|
|
}
|
|
container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
|
|
focusScopesStack.remove(focusScope);
|
|
}, 0);
|
|
};
|
|
}
|
|
}, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
|
|
const handleKeyDown = React19.useCallback(
|
|
(event) => {
|
|
if (!loop && !trapped) return;
|
|
if (focusScope.paused) return;
|
|
const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
|
|
const focusedElement = document.activeElement;
|
|
if (isTabKey && focusedElement) {
|
|
const container2 = event.currentTarget;
|
|
const [first, last] = getTabbableEdges(container2);
|
|
const hasTabbableElementsInside = first && last;
|
|
if (!hasTabbableElementsInside) {
|
|
if (focusedElement === container2) event.preventDefault();
|
|
} else {
|
|
if (!event.shiftKey && focusedElement === last) {
|
|
event.preventDefault();
|
|
if (loop) focus(first, { select: true });
|
|
} else if (event.shiftKey && focusedElement === first) {
|
|
event.preventDefault();
|
|
if (loop) focus(last, { select: true });
|
|
}
|
|
}
|
|
}
|
|
},
|
|
[loop, trapped, focusScope.paused]
|
|
);
|
|
return (0, import_jsx_runtime12.jsx)(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
|
|
});
|
|
FocusScope.displayName = FOCUS_SCOPE_NAME;
|
|
function focusFirst(candidates, { select = false } = {}) {
|
|
const previouslyFocusedElement = document.activeElement;
|
|
for (const candidate of candidates) {
|
|
focus(candidate, { select });
|
|
if (document.activeElement !== previouslyFocusedElement) return;
|
|
}
|
|
}
|
|
function getTabbableEdges(container) {
|
|
const candidates = getTabbableCandidates(container);
|
|
const first = findVisible(candidates, container);
|
|
const last = findVisible(candidates.reverse(), container);
|
|
return [first, last];
|
|
}
|
|
function getTabbableCandidates(container) {
|
|
const nodes = [];
|
|
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
acceptNode: (node) => {
|
|
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
|
|
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
|
|
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
}
|
|
});
|
|
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
return nodes;
|
|
}
|
|
function findVisible(elements, container) {
|
|
for (const element of elements) {
|
|
if (!isHidden(element, { upTo: container })) return element;
|
|
}
|
|
}
|
|
function isHidden(node, { upTo }) {
|
|
if (getComputedStyle(node).visibility === "hidden") return true;
|
|
while (node) {
|
|
if (upTo !== void 0 && node === upTo) return false;
|
|
if (getComputedStyle(node).display === "none") return true;
|
|
node = node.parentElement;
|
|
}
|
|
return false;
|
|
}
|
|
function isSelectableInput(element) {
|
|
return element instanceof HTMLInputElement && "select" in element;
|
|
}
|
|
function focus(element, { select = false } = {}) {
|
|
if (element && element.focus) {
|
|
const previouslyFocusedElement = document.activeElement;
|
|
element.focus({ preventScroll: true });
|
|
if (element !== previouslyFocusedElement && isSelectableInput(element) && select)
|
|
element.select();
|
|
}
|
|
}
|
|
var focusScopesStack = createFocusScopesStack();
|
|
function createFocusScopesStack() {
|
|
let stack = [];
|
|
return {
|
|
add(focusScope) {
|
|
const activeFocusScope = stack[0];
|
|
if (focusScope !== activeFocusScope) {
|
|
activeFocusScope?.pause();
|
|
}
|
|
stack = arrayRemove(stack, focusScope);
|
|
stack.unshift(focusScope);
|
|
},
|
|
remove(focusScope) {
|
|
stack = arrayRemove(stack, focusScope);
|
|
stack[0]?.resume();
|
|
}
|
|
};
|
|
}
|
|
function arrayRemove(array, item) {
|
|
const updatedArray = [...array];
|
|
const index2 = updatedArray.indexOf(item);
|
|
if (index2 !== -1) {
|
|
updatedArray.splice(index2, 1);
|
|
}
|
|
return updatedArray;
|
|
}
|
|
function removeLinks(items) {
|
|
return items.filter((item) => item.tagName !== "A");
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-portal/dist/index.mjs
|
|
var dist_exports7 = {};
|
|
__export(dist_exports7, {
|
|
Portal: () => Portal,
|
|
Root: () => Root5
|
|
});
|
|
var React20 = __toESM(require_react(), 1);
|
|
var import_react_dom = __toESM(require_react_dom(), 1);
|
|
var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
|
|
var PORTAL_NAME = "Portal";
|
|
var Portal = React20.forwardRef((props, forwardedRef) => {
|
|
const { container: containerProp, ...portalProps } = props;
|
|
const [mounted, setMounted] = React20.useState(false);
|
|
useLayoutEffect2(() => setMounted(true), []);
|
|
const container = containerProp || mounted && globalThis?.document?.body;
|
|
return container ? import_react_dom.default.createPortal((0, import_jsx_runtime13.jsx)(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
|
|
});
|
|
Portal.displayName = PORTAL_NAME;
|
|
var Root5 = Portal;
|
|
|
|
// node_modules/@radix-ui/react-focus-guards/dist/index.mjs
|
|
var React21 = __toESM(require_react(), 1);
|
|
var count2 = 0;
|
|
function useFocusGuards() {
|
|
React21.useEffect(() => {
|
|
const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
|
|
document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
|
|
document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
|
|
count2++;
|
|
return () => {
|
|
if (count2 === 1) {
|
|
document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove());
|
|
}
|
|
count2--;
|
|
};
|
|
}, []);
|
|
}
|
|
function createFocusGuard() {
|
|
const element = document.createElement("span");
|
|
element.setAttribute("data-radix-focus-guard", "");
|
|
element.tabIndex = 0;
|
|
element.style.outline = "none";
|
|
element.style.opacity = "0";
|
|
element.style.position = "fixed";
|
|
element.style.pointerEvents = "none";
|
|
return element;
|
|
}
|
|
|
|
// node_modules/tslib/tslib.es6.mjs
|
|
var __assign = function() {
|
|
__assign = Object.assign || function __assign2(t) {
|
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
s = arguments[i];
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
}
|
|
return t;
|
|
};
|
|
return __assign.apply(this, arguments);
|
|
};
|
|
function __rest(s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
}
|
|
function __spreadArray(to, from, pack) {
|
|
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
if (ar || !(i in from)) {
|
|
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
ar[i] = from[i];
|
|
}
|
|
}
|
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
}
|
|
|
|
// node_modules/react-remove-scroll/dist/es2015/Combination.js
|
|
var React33 = __toESM(require_react());
|
|
|
|
// node_modules/react-remove-scroll/dist/es2015/UI.js
|
|
var React29 = __toESM(require_react());
|
|
|
|
// node_modules/react-remove-scroll-bar/dist/es2015/constants.js
|
|
var zeroRightClassName = "right-scroll-bar-position";
|
|
var fullWidthClassName = "width-before-scroll-bar";
|
|
var noScrollbarsClassName = "with-scroll-bars-hidden";
|
|
var removedBarSizeVariable = "--removed-body-scroll-bar-size";
|
|
|
|
// node_modules/use-callback-ref/dist/es2015/assignRef.js
|
|
function assignRef(ref, value) {
|
|
if (typeof ref === "function") {
|
|
ref(value);
|
|
} else if (ref) {
|
|
ref.current = value;
|
|
}
|
|
return ref;
|
|
}
|
|
|
|
// node_modules/use-callback-ref/dist/es2015/useRef.js
|
|
var import_react4 = __toESM(require_react());
|
|
function useCallbackRef2(initialValue, callback) {
|
|
var ref = (0, import_react4.useState)(function() {
|
|
return {
|
|
// value
|
|
value: initialValue,
|
|
// last callback
|
|
callback,
|
|
// "memoized" public interface
|
|
facade: {
|
|
get current() {
|
|
return ref.value;
|
|
},
|
|
set current(value) {
|
|
var last = ref.value;
|
|
if (last !== value) {
|
|
ref.value = value;
|
|
ref.callback(value, last);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
})[0];
|
|
ref.callback = callback;
|
|
return ref.facade;
|
|
}
|
|
|
|
// node_modules/use-callback-ref/dist/es2015/useMergeRef.js
|
|
var React25 = __toESM(require_react());
|
|
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React25.useLayoutEffect : React25.useEffect;
|
|
var currentValues = /* @__PURE__ */ new WeakMap();
|
|
function useMergeRefs(refs, defaultValue) {
|
|
var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
|
|
return refs.forEach(function(ref) {
|
|
return assignRef(ref, newValue);
|
|
});
|
|
});
|
|
useIsomorphicLayoutEffect(function() {
|
|
var oldValue = currentValues.get(callbackRef);
|
|
if (oldValue) {
|
|
var prevRefs_1 = new Set(oldValue);
|
|
var nextRefs_1 = new Set(refs);
|
|
var current_1 = callbackRef.current;
|
|
prevRefs_1.forEach(function(ref) {
|
|
if (!nextRefs_1.has(ref)) {
|
|
assignRef(ref, null);
|
|
}
|
|
});
|
|
nextRefs_1.forEach(function(ref) {
|
|
if (!prevRefs_1.has(ref)) {
|
|
assignRef(ref, current_1);
|
|
}
|
|
});
|
|
}
|
|
currentValues.set(callbackRef, refs);
|
|
}, [refs]);
|
|
return callbackRef;
|
|
}
|
|
|
|
// node_modules/use-sidecar/dist/es2015/hoc.js
|
|
var React26 = __toESM(require_react());
|
|
|
|
// node_modules/use-sidecar/dist/es2015/hook.js
|
|
var import_react5 = __toESM(require_react());
|
|
|
|
// node_modules/use-sidecar/dist/es2015/medium.js
|
|
function ItoI(a) {
|
|
return a;
|
|
}
|
|
function innerCreateMedium(defaults, middleware) {
|
|
if (middleware === void 0) {
|
|
middleware = ItoI;
|
|
}
|
|
var buffer = [];
|
|
var assigned = false;
|
|
var medium = {
|
|
read: function() {
|
|
if (assigned) {
|
|
throw new Error("Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.");
|
|
}
|
|
if (buffer.length) {
|
|
return buffer[buffer.length - 1];
|
|
}
|
|
return defaults;
|
|
},
|
|
useMedium: function(data) {
|
|
var item = middleware(data, assigned);
|
|
buffer.push(item);
|
|
return function() {
|
|
buffer = buffer.filter(function(x) {
|
|
return x !== item;
|
|
});
|
|
};
|
|
},
|
|
assignSyncMedium: function(cb) {
|
|
assigned = true;
|
|
while (buffer.length) {
|
|
var cbs = buffer;
|
|
buffer = [];
|
|
cbs.forEach(cb);
|
|
}
|
|
buffer = {
|
|
push: function(x) {
|
|
return cb(x);
|
|
},
|
|
filter: function() {
|
|
return buffer;
|
|
}
|
|
};
|
|
},
|
|
assignMedium: function(cb) {
|
|
assigned = true;
|
|
var pendingQueue = [];
|
|
if (buffer.length) {
|
|
var cbs = buffer;
|
|
buffer = [];
|
|
cbs.forEach(cb);
|
|
pendingQueue = buffer;
|
|
}
|
|
var executeQueue = function() {
|
|
var cbs2 = pendingQueue;
|
|
pendingQueue = [];
|
|
cbs2.forEach(cb);
|
|
};
|
|
var cycle = function() {
|
|
return Promise.resolve().then(executeQueue);
|
|
};
|
|
cycle();
|
|
buffer = {
|
|
push: function(x) {
|
|
pendingQueue.push(x);
|
|
cycle();
|
|
},
|
|
filter: function(filter) {
|
|
pendingQueue = pendingQueue.filter(filter);
|
|
return buffer;
|
|
}
|
|
};
|
|
}
|
|
};
|
|
return medium;
|
|
}
|
|
function createSidecarMedium(options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
var medium = innerCreateMedium(null);
|
|
medium.options = __assign({ async: true, ssr: false }, options);
|
|
return medium;
|
|
}
|
|
|
|
// node_modules/use-sidecar/dist/es2015/renderProp.js
|
|
var React27 = __toESM(require_react());
|
|
var import_react6 = __toESM(require_react());
|
|
|
|
// node_modules/use-sidecar/dist/es2015/exports.js
|
|
var React28 = __toESM(require_react());
|
|
var SideCar = function(_a) {
|
|
var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]);
|
|
if (!sideCar) {
|
|
throw new Error("Sidecar: please provide `sideCar` property to import the right car");
|
|
}
|
|
var Target = sideCar.read();
|
|
if (!Target) {
|
|
throw new Error("Sidecar medium not found");
|
|
}
|
|
return React28.createElement(Target, __assign({}, rest));
|
|
};
|
|
SideCar.isSideCarExport = true;
|
|
function exportSidecar(medium, exported) {
|
|
medium.useMedium(exported);
|
|
return SideCar;
|
|
}
|
|
|
|
// node_modules/react-remove-scroll/dist/es2015/medium.js
|
|
var effectCar = createSidecarMedium();
|
|
|
|
// node_modules/react-remove-scroll/dist/es2015/UI.js
|
|
var nothing = function() {
|
|
return;
|
|
};
|
|
var RemoveScroll = React29.forwardRef(function(props, parentRef) {
|
|
var ref = React29.useRef(null);
|
|
var _a = React29.useState({
|
|
onScrollCapture: nothing,
|
|
onWheelCapture: nothing,
|
|
onTouchMoveCapture: nothing
|
|
}), callbacks = _a[0], setCallbacks = _a[1];
|
|
var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noRelative = props.noRelative, 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", "noRelative", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
|
|
var SideCar2 = sideCar;
|
|
var containerRef = useMergeRefs([ref, parentRef]);
|
|
var containerProps = __assign(__assign({}, rest), callbacks);
|
|
return React29.createElement(
|
|
React29.Fragment,
|
|
null,
|
|
enabled && React29.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noRelative, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }),
|
|
forwardProps ? React29.cloneElement(React29.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React29.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children)
|
|
);
|
|
});
|
|
RemoveScroll.defaultProps = {
|
|
enabled: true,
|
|
removeScrollBar: true,
|
|
inert: false
|
|
};
|
|
RemoveScroll.classNames = {
|
|
fullWidth: fullWidthClassName,
|
|
zeroRight: zeroRightClassName
|
|
};
|
|
|
|
// node_modules/react-remove-scroll/dist/es2015/SideEffect.js
|
|
var React32 = __toESM(require_react());
|
|
|
|
// node_modules/react-remove-scroll-bar/dist/es2015/component.js
|
|
var React31 = __toESM(require_react());
|
|
|
|
// node_modules/react-style-singleton/dist/es2015/hook.js
|
|
var React30 = __toESM(require_react());
|
|
|
|
// node_modules/get-nonce/dist/es2015/index.js
|
|
var currentNonce;
|
|
var getNonce = function() {
|
|
if (currentNonce) {
|
|
return currentNonce;
|
|
}
|
|
if (typeof __webpack_nonce__ !== "undefined") {
|
|
return __webpack_nonce__;
|
|
}
|
|
return void 0;
|
|
};
|
|
|
|
// node_modules/react-style-singleton/dist/es2015/singleton.js
|
|
function makeStyleTag() {
|
|
if (!document)
|
|
return null;
|
|
var tag = document.createElement("style");
|
|
tag.type = "text/css";
|
|
var nonce = getNonce();
|
|
if (nonce) {
|
|
tag.setAttribute("nonce", nonce);
|
|
}
|
|
return tag;
|
|
}
|
|
function injectStyles(tag, css) {
|
|
if (tag.styleSheet) {
|
|
tag.styleSheet.cssText = css;
|
|
} else {
|
|
tag.appendChild(document.createTextNode(css));
|
|
}
|
|
}
|
|
function insertStyleTag(tag) {
|
|
var head = document.head || document.getElementsByTagName("head")[0];
|
|
head.appendChild(tag);
|
|
}
|
|
var stylesheetSingleton = function() {
|
|
var counter = 0;
|
|
var stylesheet = null;
|
|
return {
|
|
add: function(style) {
|
|
if (counter == 0) {
|
|
if (stylesheet = makeStyleTag()) {
|
|
injectStyles(stylesheet, style);
|
|
insertStyleTag(stylesheet);
|
|
}
|
|
}
|
|
counter++;
|
|
},
|
|
remove: function() {
|
|
counter--;
|
|
if (!counter && stylesheet) {
|
|
stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet);
|
|
stylesheet = null;
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
// node_modules/react-style-singleton/dist/es2015/hook.js
|
|
var styleHookSingleton = function() {
|
|
var sheet = stylesheetSingleton();
|
|
return function(styles, isDynamic) {
|
|
React30.useEffect(function() {
|
|
sheet.add(styles);
|
|
return function() {
|
|
sheet.remove();
|
|
};
|
|
}, [styles && isDynamic]);
|
|
};
|
|
};
|
|
|
|
// node_modules/react-style-singleton/dist/es2015/component.js
|
|
var styleSingleton = function() {
|
|
var useStyle = styleHookSingleton();
|
|
var Sheet = function(_a) {
|
|
var styles = _a.styles, dynamic = _a.dynamic;
|
|
useStyle(styles, dynamic);
|
|
return null;
|
|
};
|
|
return Sheet;
|
|
};
|
|
|
|
// node_modules/react-remove-scroll-bar/dist/es2015/utils.js
|
|
var zeroGap = {
|
|
left: 0,
|
|
top: 0,
|
|
right: 0,
|
|
gap: 0
|
|
};
|
|
var parse = function(x) {
|
|
return parseInt(x || "", 10) || 0;
|
|
};
|
|
var getOffset = function(gapMode) {
|
|
var cs = window.getComputedStyle(document.body);
|
|
var left = cs[gapMode === "padding" ? "paddingLeft" : "marginLeft"];
|
|
var top = cs[gapMode === "padding" ? "paddingTop" : "marginTop"];
|
|
var right = cs[gapMode === "padding" ? "paddingRight" : "marginRight"];
|
|
return [parse(left), parse(top), parse(right)];
|
|
};
|
|
var getGapWidth = function(gapMode) {
|
|
if (gapMode === void 0) {
|
|
gapMode = "margin";
|
|
}
|
|
if (typeof window === "undefined") {
|
|
return zeroGap;
|
|
}
|
|
var offsets = getOffset(gapMode);
|
|
var documentWidth = document.documentElement.clientWidth;
|
|
var windowWidth = window.innerWidth;
|
|
return {
|
|
left: offsets[0],
|
|
top: offsets[1],
|
|
right: offsets[2],
|
|
gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0])
|
|
};
|
|
};
|
|
|
|
// node_modules/react-remove-scroll-bar/dist/es2015/component.js
|
|
var Style = styleSingleton();
|
|
var lockAttribute = "data-scroll-locked";
|
|
var getStyles = function(_a, allowRelative, gapMode, important) {
|
|
var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;
|
|
if (gapMode === void 0) {
|
|
gapMode = "margin";
|
|
}
|
|
return "\n .".concat(noScrollbarsClassName, " {\n overflow: hidden ").concat(important, ";\n padding-right: ").concat(gap, "px ").concat(important, ";\n }\n body[").concat(lockAttribute, "] {\n overflow: hidden ").concat(important, ";\n overscroll-behavior: contain;\n ").concat([
|
|
allowRelative && "position: relative ".concat(important, ";"),
|
|
gapMode === "margin" && "\n padding-left: ".concat(left, "px;\n padding-top: ").concat(top, "px;\n padding-right: ").concat(right, "px;\n margin-left:0;\n margin-top:0;\n margin-right: ").concat(gap, "px ").concat(important, ";\n "),
|
|
gapMode === "padding" && "padding-right: ".concat(gap, "px ").concat(important, ";")
|
|
].filter(Boolean).join(""), "\n }\n \n .").concat(zeroRightClassName, " {\n right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " {\n margin-right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(zeroRightClassName, " .").concat(zeroRightClassName, " {\n right: 0 ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " .").concat(fullWidthClassName, " {\n margin-right: 0 ").concat(important, ";\n }\n \n body[").concat(lockAttribute, "] {\n ").concat(removedBarSizeVariable, ": ").concat(gap, "px;\n }\n");
|
|
};
|
|
var getCurrentUseCounter = function() {
|
|
var counter = parseInt(document.body.getAttribute(lockAttribute) || "0", 10);
|
|
return isFinite(counter) ? counter : 0;
|
|
};
|
|
var useLockAttribute = function() {
|
|
React31.useEffect(function() {
|
|
document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
|
|
return function() {
|
|
var newCounter = getCurrentUseCounter() - 1;
|
|
if (newCounter <= 0) {
|
|
document.body.removeAttribute(lockAttribute);
|
|
} else {
|
|
document.body.setAttribute(lockAttribute, newCounter.toString());
|
|
}
|
|
};
|
|
}, []);
|
|
};
|
|
var RemoveScrollBar = function(_a) {
|
|
var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? "margin" : _b;
|
|
useLockAttribute();
|
|
var gap = React31.useMemo(function() {
|
|
return getGapWidth(gapMode);
|
|
}, [gapMode]);
|
|
return React31.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
|
|
};
|
|
|
|
// node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js
|
|
var passiveSupported = false;
|
|
if (typeof window !== "undefined") {
|
|
try {
|
|
options = Object.defineProperty({}, "passive", {
|
|
get: function() {
|
|
passiveSupported = true;
|
|
return true;
|
|
}
|
|
});
|
|
window.addEventListener("test", options, options);
|
|
window.removeEventListener("test", options, options);
|
|
} catch (err) {
|
|
passiveSupported = false;
|
|
}
|
|
}
|
|
var options;
|
|
var nonPassive = passiveSupported ? { passive: false } : false;
|
|
|
|
// node_modules/react-remove-scroll/dist/es2015/handleScroll.js
|
|
var alwaysContainsScroll = function(node) {
|
|
return node.tagName === "TEXTAREA";
|
|
};
|
|
var elementCanBeScrolled = function(node, overflow) {
|
|
if (!(node instanceof Element)) {
|
|
return false;
|
|
}
|
|
var styles = window.getComputedStyle(node);
|
|
return (
|
|
// not-not-scrollable
|
|
styles[overflow] !== "hidden" && // contains scroll inside self
|
|
!(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === "visible")
|
|
);
|
|
};
|
|
var elementCouldBeVScrolled = function(node) {
|
|
return elementCanBeScrolled(node, "overflowY");
|
|
};
|
|
var elementCouldBeHScrolled = function(node) {
|
|
return elementCanBeScrolled(node, "overflowX");
|
|
};
|
|
var locationCouldBeScrolled = function(axis, node) {
|
|
var ownerDocument = node.ownerDocument;
|
|
var current = node;
|
|
do {
|
|
if (typeof ShadowRoot !== "undefined" && current instanceof ShadowRoot) {
|
|
current = current.host;
|
|
}
|
|
var isScrollable = elementCouldBeScrolled(axis, current);
|
|
if (isScrollable) {
|
|
var _a = getScrollVariables(axis, current), scrollHeight = _a[1], clientHeight = _a[2];
|
|
if (scrollHeight > clientHeight) {
|
|
return true;
|
|
}
|
|
}
|
|
current = current.parentNode;
|
|
} while (current && current !== ownerDocument.body);
|
|
return false;
|
|
};
|
|
var getVScrollVariables = function(_a) {
|
|
var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
|
|
return [
|
|
scrollTop,
|
|
scrollHeight,
|
|
clientHeight
|
|
];
|
|
};
|
|
var getHScrollVariables = function(_a) {
|
|
var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
return [
|
|
scrollLeft,
|
|
scrollWidth,
|
|
clientWidth
|
|
];
|
|
};
|
|
var elementCouldBeScrolled = function(axis, node) {
|
|
return axis === "v" ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node);
|
|
};
|
|
var getScrollVariables = function(axis, node) {
|
|
return axis === "v" ? getVScrollVariables(node) : getHScrollVariables(node);
|
|
};
|
|
var getDirectionFactor = function(axis, direction) {
|
|
return axis === "h" && direction === "rtl" ? -1 : 1;
|
|
};
|
|
var handleScroll = function(axis, endTarget, event, sourceDelta, noOverscroll) {
|
|
var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction);
|
|
var delta = directionFactor * sourceDelta;
|
|
var target = event.target;
|
|
var targetInLock = endTarget.contains(target);
|
|
var shouldCancelScroll = false;
|
|
var isDeltaPositive = delta > 0;
|
|
var availableScroll = 0;
|
|
var availableScrollTop = 0;
|
|
do {
|
|
if (!target) {
|
|
break;
|
|
}
|
|
var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];
|
|
var elementScroll = scroll_1 - capacity - directionFactor * position;
|
|
if (position || elementScroll) {
|
|
if (elementCouldBeScrolled(axis, target)) {
|
|
availableScroll += elementScroll;
|
|
availableScrollTop += position;
|
|
}
|
|
}
|
|
var parent_1 = target.parentNode;
|
|
target = parent_1 && parent_1.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? parent_1.host : parent_1;
|
|
} while (
|
|
// portaled content
|
|
!targetInLock && target !== document.body || // self content
|
|
targetInLock && (endTarget.contains(target) || endTarget === target)
|
|
);
|
|
if (isDeltaPositive && (noOverscroll && Math.abs(availableScroll) < 1 || !noOverscroll && delta > availableScroll)) {
|
|
shouldCancelScroll = true;
|
|
} else if (!isDeltaPositive && (noOverscroll && Math.abs(availableScrollTop) < 1 || !noOverscroll && -delta > availableScrollTop)) {
|
|
shouldCancelScroll = true;
|
|
}
|
|
return shouldCancelScroll;
|
|
};
|
|
|
|
// node_modules/react-remove-scroll/dist/es2015/SideEffect.js
|
|
var getTouchXY = function(event) {
|
|
return "changedTouches" in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];
|
|
};
|
|
var getDeltaXY = function(event) {
|
|
return [event.deltaX, event.deltaY];
|
|
};
|
|
var extractRef = function(ref) {
|
|
return ref && "current" in ref ? ref.current : ref;
|
|
};
|
|
var deltaCompare = function(x, y) {
|
|
return x[0] === y[0] && x[1] === y[1];
|
|
};
|
|
var generateStyle = function(id) {
|
|
return "\n .block-interactivity-".concat(id, " {pointer-events: none;}\n .allow-interactivity-").concat(id, " {pointer-events: all;}\n");
|
|
};
|
|
var idCounter = 0;
|
|
var lockStack = [];
|
|
function RemoveScrollSideCar(props) {
|
|
var shouldPreventQueue = React32.useRef([]);
|
|
var touchStartRef = React32.useRef([0, 0]);
|
|
var activeAxis = React32.useRef();
|
|
var id = React32.useState(idCounter++)[0];
|
|
var Style2 = React32.useState(styleSingleton)[0];
|
|
var lastProps = React32.useRef(props);
|
|
React32.useEffect(function() {
|
|
lastProps.current = props;
|
|
}, [props]);
|
|
React32.useEffect(function() {
|
|
if (props.inert) {
|
|
document.body.classList.add("block-interactivity-".concat(id));
|
|
var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
|
|
allow_1.forEach(function(el) {
|
|
return el.classList.add("allow-interactivity-".concat(id));
|
|
});
|
|
return function() {
|
|
document.body.classList.remove("block-interactivity-".concat(id));
|
|
allow_1.forEach(function(el) {
|
|
return el.classList.remove("allow-interactivity-".concat(id));
|
|
});
|
|
};
|
|
}
|
|
return;
|
|
}, [props.inert, props.lockRef.current, props.shards]);
|
|
var shouldCancelEvent = React32.useCallback(function(event, parent) {
|
|
if ("touches" in event && event.touches.length === 2 || event.type === "wheel" && event.ctrlKey) {
|
|
return !lastProps.current.allowPinchZoom;
|
|
}
|
|
var touch = getTouchXY(event);
|
|
var touchStart = touchStartRef.current;
|
|
var deltaX = "deltaX" in event ? event.deltaX : touchStart[0] - touch[0];
|
|
var deltaY = "deltaY" in event ? event.deltaY : touchStart[1] - touch[1];
|
|
var currentAxis;
|
|
var target = event.target;
|
|
var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? "h" : "v";
|
|
if ("touches" in event && moveDirection === "h" && target.type === "range") {
|
|
return false;
|
|
}
|
|
var selection = window.getSelection();
|
|
var anchorNode = selection && selection.anchorNode;
|
|
var isTouchingSelection = anchorNode ? anchorNode === target || anchorNode.contains(target) : false;
|
|
if (isTouchingSelection) {
|
|
return false;
|
|
}
|
|
var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
|
|
if (!canBeScrolledInMainDirection) {
|
|
return true;
|
|
}
|
|
if (canBeScrolledInMainDirection) {
|
|
currentAxis = moveDirection;
|
|
} else {
|
|
currentAxis = moveDirection === "v" ? "h" : "v";
|
|
canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
|
|
}
|
|
if (!canBeScrolledInMainDirection) {
|
|
return false;
|
|
}
|
|
if (!activeAxis.current && "changedTouches" in event && (deltaX || deltaY)) {
|
|
activeAxis.current = currentAxis;
|
|
}
|
|
if (!currentAxis) {
|
|
return true;
|
|
}
|
|
var cancelingAxis = activeAxis.current || currentAxis;
|
|
return handleScroll(cancelingAxis, parent, event, cancelingAxis === "h" ? deltaX : deltaY, true);
|
|
}, []);
|
|
var shouldPrevent = React32.useCallback(function(_event) {
|
|
var event = _event;
|
|
if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
|
|
return;
|
|
}
|
|
var delta = "deltaY" in event ? getDeltaXY(event) : getTouchXY(event);
|
|
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];
|
|
if (sourceEvent && sourceEvent.should) {
|
|
if (event.cancelable) {
|
|
event.preventDefault();
|
|
}
|
|
return;
|
|
}
|
|
if (!sourceEvent) {
|
|
var shardNodes = (lastProps.current.shards || []).map(extractRef).filter(Boolean).filter(function(node) {
|
|
return node.contains(event.target);
|
|
});
|
|
var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;
|
|
if (shouldStop) {
|
|
if (event.cancelable) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
}, []);
|
|
var shouldCancel = React32.useCallback(function(name, delta, target, should) {
|
|
var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
|
|
shouldPreventQueue.current.push(event);
|
|
setTimeout(function() {
|
|
shouldPreventQueue.current = shouldPreventQueue.current.filter(function(e) {
|
|
return e !== event;
|
|
});
|
|
}, 1);
|
|
}, []);
|
|
var scrollTouchStart = React32.useCallback(function(event) {
|
|
touchStartRef.current = getTouchXY(event);
|
|
activeAxis.current = void 0;
|
|
}, []);
|
|
var scrollWheel = React32.useCallback(function(event) {
|
|
shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
|
|
}, []);
|
|
var scrollTouchMove = React32.useCallback(function(event) {
|
|
shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
|
|
}, []);
|
|
React32.useEffect(function() {
|
|
lockStack.push(Style2);
|
|
props.setCallbacks({
|
|
onScrollCapture: scrollWheel,
|
|
onWheelCapture: scrollWheel,
|
|
onTouchMoveCapture: scrollTouchMove
|
|
});
|
|
document.addEventListener("wheel", shouldPrevent, nonPassive);
|
|
document.addEventListener("touchmove", shouldPrevent, nonPassive);
|
|
document.addEventListener("touchstart", scrollTouchStart, nonPassive);
|
|
return function() {
|
|
lockStack = lockStack.filter(function(inst) {
|
|
return inst !== Style2;
|
|
});
|
|
document.removeEventListener("wheel", shouldPrevent, nonPassive);
|
|
document.removeEventListener("touchmove", shouldPrevent, nonPassive);
|
|
document.removeEventListener("touchstart", scrollTouchStart, nonPassive);
|
|
};
|
|
}, []);
|
|
var removeScrollBar = props.removeScrollBar, inert = props.inert;
|
|
return React32.createElement(
|
|
React32.Fragment,
|
|
null,
|
|
inert ? React32.createElement(Style2, { styles: generateStyle(id) }) : null,
|
|
removeScrollBar ? React32.createElement(RemoveScrollBar, { noRelative: props.noRelative, gapMode: props.gapMode }) : null
|
|
);
|
|
}
|
|
function getOutermostShadowParent(node) {
|
|
var shadowParent = null;
|
|
while (node !== null) {
|
|
if (node instanceof ShadowRoot) {
|
|
shadowParent = node.host;
|
|
node = node.host;
|
|
}
|
|
node = node.parentNode;
|
|
}
|
|
return shadowParent;
|
|
}
|
|
|
|
// node_modules/react-remove-scroll/dist/es2015/sidecar.js
|
|
var sidecar_default = exportSidecar(effectCar, RemoveScrollSideCar);
|
|
|
|
// node_modules/react-remove-scroll/dist/es2015/Combination.js
|
|
var ReactRemoveScroll = React33.forwardRef(function(props, ref) {
|
|
return React33.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
|
|
});
|
|
ReactRemoveScroll.classNames = RemoveScroll.classNames;
|
|
var Combination_default = ReactRemoveScroll;
|
|
|
|
// node_modules/aria-hidden/dist/es2015/index.js
|
|
var getDefaultParent = function(originalTarget) {
|
|
if (typeof document === "undefined") {
|
|
return null;
|
|
}
|
|
var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget;
|
|
return sampleTarget.ownerDocument.body;
|
|
};
|
|
var counterMap = /* @__PURE__ */ new WeakMap();
|
|
var uncontrolledNodes = /* @__PURE__ */ new WeakMap();
|
|
var markerMap = {};
|
|
var lockCount = 0;
|
|
var unwrapHost = function(node) {
|
|
return node && (node.host || unwrapHost(node.parentNode));
|
|
};
|
|
var correctTargets = function(parent, targets) {
|
|
return targets.map(function(target) {
|
|
if (parent.contains(target)) {
|
|
return target;
|
|
}
|
|
var correctedTarget = unwrapHost(target);
|
|
if (correctedTarget && parent.contains(correctedTarget)) {
|
|
return correctedTarget;
|
|
}
|
|
console.error("aria-hidden", target, "in not contained inside", parent, ". Doing nothing");
|
|
return null;
|
|
}).filter(function(x) {
|
|
return Boolean(x);
|
|
});
|
|
};
|
|
var applyAttributeToOthers = function(originalTarget, parentNode, markerName, controlAttribute) {
|
|
var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
|
|
if (!markerMap[markerName]) {
|
|
markerMap[markerName] = /* @__PURE__ */ new WeakMap();
|
|
}
|
|
var markerCounter = markerMap[markerName];
|
|
var hiddenNodes = [];
|
|
var elementsToKeep = /* @__PURE__ */ new Set();
|
|
var elementsToStop = new Set(targets);
|
|
var keep = function(el) {
|
|
if (!el || elementsToKeep.has(el)) {
|
|
return;
|
|
}
|
|
elementsToKeep.add(el);
|
|
keep(el.parentNode);
|
|
};
|
|
targets.forEach(keep);
|
|
var deep = function(parent) {
|
|
if (!parent || elementsToStop.has(parent)) {
|
|
return;
|
|
}
|
|
Array.prototype.forEach.call(parent.children, function(node) {
|
|
if (elementsToKeep.has(node)) {
|
|
deep(node);
|
|
} else {
|
|
try {
|
|
var attr = node.getAttribute(controlAttribute);
|
|
var alreadyHidden = attr !== null && attr !== "false";
|
|
var counterValue = (counterMap.get(node) || 0) + 1;
|
|
var markerValue = (markerCounter.get(node) || 0) + 1;
|
|
counterMap.set(node, counterValue);
|
|
markerCounter.set(node, markerValue);
|
|
hiddenNodes.push(node);
|
|
if (counterValue === 1 && alreadyHidden) {
|
|
uncontrolledNodes.set(node, true);
|
|
}
|
|
if (markerValue === 1) {
|
|
node.setAttribute(markerName, "true");
|
|
}
|
|
if (!alreadyHidden) {
|
|
node.setAttribute(controlAttribute, "true");
|
|
}
|
|
} catch (e) {
|
|
console.error("aria-hidden: cannot operate on ", node, e);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
deep(parentNode);
|
|
elementsToKeep.clear();
|
|
lockCount++;
|
|
return function() {
|
|
hiddenNodes.forEach(function(node) {
|
|
var counterValue = counterMap.get(node) - 1;
|
|
var markerValue = markerCounter.get(node) - 1;
|
|
counterMap.set(node, counterValue);
|
|
markerCounter.set(node, markerValue);
|
|
if (!counterValue) {
|
|
if (!uncontrolledNodes.has(node)) {
|
|
node.removeAttribute(controlAttribute);
|
|
}
|
|
uncontrolledNodes.delete(node);
|
|
}
|
|
if (!markerValue) {
|
|
node.removeAttribute(markerName);
|
|
}
|
|
});
|
|
lockCount--;
|
|
if (!lockCount) {
|
|
counterMap = /* @__PURE__ */ new WeakMap();
|
|
counterMap = /* @__PURE__ */ new WeakMap();
|
|
uncontrolledNodes = /* @__PURE__ */ new WeakMap();
|
|
markerMap = {};
|
|
}
|
|
};
|
|
};
|
|
var hideOthers = function(originalTarget, parentNode, markerName) {
|
|
if (markerName === void 0) {
|
|
markerName = "data-aria-hidden";
|
|
}
|
|
var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
|
|
var activeParentNode = parentNode || getDefaultParent(originalTarget);
|
|
if (!activeParentNode) {
|
|
return function() {
|
|
return null;
|
|
};
|
|
}
|
|
targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll("[aria-live], script")));
|
|
return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
|
|
};
|
|
|
|
// node_modules/@radix-ui/react-dialog/dist/index.mjs
|
|
var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
|
|
var DIALOG_NAME = "Dialog";
|
|
var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
|
|
var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
|
|
var Dialog = (props) => {
|
|
const {
|
|
__scopeDialog,
|
|
children,
|
|
open: openProp,
|
|
defaultOpen,
|
|
onOpenChange,
|
|
modal = true
|
|
} = props;
|
|
const triggerRef = React34.useRef(null);
|
|
const contentRef = React34.useRef(null);
|
|
const [open, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen ?? false,
|
|
onChange: onOpenChange,
|
|
caller: DIALOG_NAME
|
|
});
|
|
return (0, import_jsx_runtime14.jsx)(
|
|
DialogProvider,
|
|
{
|
|
scope: __scopeDialog,
|
|
triggerRef,
|
|
contentRef,
|
|
contentId: useId(),
|
|
titleId: useId(),
|
|
descriptionId: useId(),
|
|
open,
|
|
onOpenChange: setOpen,
|
|
onOpenToggle: React34.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
modal,
|
|
children
|
|
}
|
|
);
|
|
};
|
|
Dialog.displayName = DIALOG_NAME;
|
|
var TRIGGER_NAME3 = "DialogTrigger";
|
|
var DialogTrigger = React34.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDialog, ...triggerProps } = props;
|
|
const context = useDialogContext(TRIGGER_NAME3, __scopeDialog);
|
|
const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
|
|
return (0, import_jsx_runtime14.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
"aria-haspopup": "dialog",
|
|
"aria-expanded": context.open,
|
|
"aria-controls": context.contentId,
|
|
"data-state": getState3(context.open),
|
|
...triggerProps,
|
|
ref: composedTriggerRef,
|
|
onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
DialogTrigger.displayName = TRIGGER_NAME3;
|
|
var PORTAL_NAME2 = "DialogPortal";
|
|
var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME2, {
|
|
forceMount: void 0
|
|
});
|
|
var DialogPortal = (props) => {
|
|
const { __scopeDialog, forceMount, children, container } = props;
|
|
const context = useDialogContext(PORTAL_NAME2, __scopeDialog);
|
|
return (0, import_jsx_runtime14.jsx)(PortalProvider, { scope: __scopeDialog, forceMount, children: React34.Children.map(children, (child) => (0, import_jsx_runtime14.jsx)(Presence, { present: forceMount || context.open, children: (0, import_jsx_runtime14.jsx)(Portal, { asChild: true, container, children: child }) })) });
|
|
};
|
|
DialogPortal.displayName = PORTAL_NAME2;
|
|
var OVERLAY_NAME = "DialogOverlay";
|
|
var DialogOverlay = React34.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
|
|
const { forceMount = portalContext.forceMount, ...overlayProps } = props;
|
|
const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
|
|
return context.modal ? (0, import_jsx_runtime14.jsx)(Presence, { present: forceMount || context.open, children: (0, import_jsx_runtime14.jsx)(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
|
|
}
|
|
);
|
|
DialogOverlay.displayName = OVERLAY_NAME;
|
|
var Slot2 = createSlot("DialogOverlay.RemoveScroll");
|
|
var DialogOverlayImpl = React34.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDialog, ...overlayProps } = props;
|
|
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
|
|
return (
|
|
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
|
|
// ie. when `Overlay` and `Content` are siblings
|
|
(0, import_jsx_runtime14.jsx)(Combination_default, { as: Slot2, allowPinchZoom: true, shards: [context.contentRef], children: (0, import_jsx_runtime14.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-state": getState3(context.open),
|
|
...overlayProps,
|
|
ref: forwardedRef,
|
|
style: { pointerEvents: "auto", ...overlayProps.style }
|
|
}
|
|
) })
|
|
);
|
|
}
|
|
);
|
|
var CONTENT_NAME3 = "DialogContent";
|
|
var DialogContent = React34.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const portalContext = usePortalContext(CONTENT_NAME3, props.__scopeDialog);
|
|
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
const context = useDialogContext(CONTENT_NAME3, props.__scopeDialog);
|
|
return (0, import_jsx_runtime14.jsx)(Presence, { present: forceMount || context.open, children: context.modal ? (0, import_jsx_runtime14.jsx)(DialogContentModal, { ...contentProps, ref: forwardedRef }) : (0, import_jsx_runtime14.jsx)(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
DialogContent.displayName = CONTENT_NAME3;
|
|
var DialogContentModal = React34.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const context = useDialogContext(CONTENT_NAME3, props.__scopeDialog);
|
|
const contentRef = React34.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
|
|
React34.useEffect(() => {
|
|
const content = contentRef.current;
|
|
if (content) return hideOthers(content);
|
|
}, []);
|
|
return (0, import_jsx_runtime14.jsx)(
|
|
DialogContentImpl,
|
|
{
|
|
...props,
|
|
ref: composedRefs,
|
|
trapFocus: context.open,
|
|
disableOutsidePointerEvents: true,
|
|
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
event.preventDefault();
|
|
context.triggerRef.current?.focus();
|
|
}),
|
|
onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
|
|
const originalEvent = event.detail.originalEvent;
|
|
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
if (isRightClick) event.preventDefault();
|
|
}),
|
|
onFocusOutside: composeEventHandlers(
|
|
props.onFocusOutside,
|
|
(event) => event.preventDefault()
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var DialogContentNonModal = React34.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const context = useDialogContext(CONTENT_NAME3, props.__scopeDialog);
|
|
const hasInteractedOutsideRef = React34.useRef(false);
|
|
const hasPointerDownOutsideRef = React34.useRef(false);
|
|
return (0, import_jsx_runtime14.jsx)(
|
|
DialogContentImpl,
|
|
{
|
|
...props,
|
|
ref: forwardedRef,
|
|
trapFocus: false,
|
|
disableOutsidePointerEvents: false,
|
|
onCloseAutoFocus: (event) => {
|
|
props.onCloseAutoFocus?.(event);
|
|
if (!event.defaultPrevented) {
|
|
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
|
|
event.preventDefault();
|
|
}
|
|
hasInteractedOutsideRef.current = false;
|
|
hasPointerDownOutsideRef.current = false;
|
|
},
|
|
onInteractOutside: (event) => {
|
|
props.onInteractOutside?.(event);
|
|
if (!event.defaultPrevented) {
|
|
hasInteractedOutsideRef.current = true;
|
|
if (event.detail.originalEvent.type === "pointerdown") {
|
|
hasPointerDownOutsideRef.current = true;
|
|
}
|
|
}
|
|
const target = event.target;
|
|
const targetIsTrigger = context.triggerRef.current?.contains(target);
|
|
if (targetIsTrigger) event.preventDefault();
|
|
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var DialogContentImpl = React34.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
|
|
const context = useDialogContext(CONTENT_NAME3, __scopeDialog);
|
|
const contentRef = React34.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
useFocusGuards();
|
|
return (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
|
|
(0, import_jsx_runtime14.jsx)(
|
|
FocusScope,
|
|
{
|
|
asChild: true,
|
|
loop: true,
|
|
trapped: trapFocus,
|
|
onMountAutoFocus: onOpenAutoFocus,
|
|
onUnmountAutoFocus: onCloseAutoFocus,
|
|
children: (0, import_jsx_runtime14.jsx)(
|
|
DismissableLayer,
|
|
{
|
|
role: "dialog",
|
|
id: context.contentId,
|
|
"aria-describedby": context.descriptionId,
|
|
"aria-labelledby": context.titleId,
|
|
"data-state": getState3(context.open),
|
|
...contentProps,
|
|
ref: composedRefs,
|
|
onDismiss: () => context.onOpenChange(false)
|
|
}
|
|
)
|
|
}
|
|
),
|
|
(0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
|
|
(0, import_jsx_runtime14.jsx)(TitleWarning, { titleId: context.titleId }),
|
|
(0, import_jsx_runtime14.jsx)(DescriptionWarning, { contentRef, descriptionId: context.descriptionId })
|
|
] })
|
|
] });
|
|
}
|
|
);
|
|
var TITLE_NAME = "DialogTitle";
|
|
var DialogTitle = React34.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDialog, ...titleProps } = props;
|
|
const context = useDialogContext(TITLE_NAME, __scopeDialog);
|
|
return (0, import_jsx_runtime14.jsx)(Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
DialogTitle.displayName = TITLE_NAME;
|
|
var DESCRIPTION_NAME = "DialogDescription";
|
|
var DialogDescription = React34.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDialog, ...descriptionProps } = props;
|
|
const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
|
|
return (0, import_jsx_runtime14.jsx)(Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
DialogDescription.displayName = DESCRIPTION_NAME;
|
|
var CLOSE_NAME = "DialogClose";
|
|
var DialogClose = React34.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDialog, ...closeProps } = props;
|
|
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
|
|
return (0, import_jsx_runtime14.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
...closeProps,
|
|
ref: forwardedRef,
|
|
onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
|
|
}
|
|
);
|
|
}
|
|
);
|
|
DialogClose.displayName = CLOSE_NAME;
|
|
function getState3(open) {
|
|
return open ? "open" : "closed";
|
|
}
|
|
var TITLE_WARNING_NAME = "DialogTitleWarning";
|
|
var [WarningProvider, useWarningContext] = createContext2(TITLE_WARNING_NAME, {
|
|
contentName: CONTENT_NAME3,
|
|
titleName: TITLE_NAME,
|
|
docsSlug: "dialog"
|
|
});
|
|
var TitleWarning = ({ titleId }) => {
|
|
const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
|
|
const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
|
|
|
|
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
|
|
|
|
For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
|
|
React34.useEffect(() => {
|
|
if (titleId) {
|
|
const hasTitle = document.getElementById(titleId);
|
|
if (!hasTitle) console.error(MESSAGE);
|
|
}
|
|
}, [MESSAGE, titleId]);
|
|
return null;
|
|
};
|
|
var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
|
|
var DescriptionWarning = ({ contentRef, descriptionId }) => {
|
|
const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
|
|
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
|
|
React34.useEffect(() => {
|
|
const describedById = contentRef.current?.getAttribute("aria-describedby");
|
|
if (descriptionId && describedById) {
|
|
const hasDescription = document.getElementById(descriptionId);
|
|
if (!hasDescription) console.warn(MESSAGE);
|
|
}
|
|
}, [MESSAGE, contentRef, descriptionId]);
|
|
return null;
|
|
};
|
|
var Root6 = Dialog;
|
|
var Trigger3 = DialogTrigger;
|
|
var Portal2 = DialogPortal;
|
|
var Overlay = DialogOverlay;
|
|
var Content3 = DialogContent;
|
|
var Title = DialogTitle;
|
|
var Description = DialogDescription;
|
|
var Close = DialogClose;
|
|
|
|
// node_modules/@radix-ui/react-alert-dialog/dist/index.mjs
|
|
var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
|
|
var ROOT_NAME = "AlertDialog";
|
|
var [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [
|
|
createDialogScope
|
|
]);
|
|
var useDialogScope = createDialogScope();
|
|
var AlertDialog = (props) => {
|
|
const { __scopeAlertDialog, ...alertDialogProps } = props;
|
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
return (0, import_jsx_runtime15.jsx)(Root6, { ...dialogScope, ...alertDialogProps, modal: true });
|
|
};
|
|
AlertDialog.displayName = ROOT_NAME;
|
|
var TRIGGER_NAME4 = "AlertDialogTrigger";
|
|
var AlertDialogTrigger = React35.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAlertDialog, ...triggerProps } = props;
|
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
return (0, import_jsx_runtime15.jsx)(Trigger3, { ...dialogScope, ...triggerProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
AlertDialogTrigger.displayName = TRIGGER_NAME4;
|
|
var PORTAL_NAME3 = "AlertDialogPortal";
|
|
var AlertDialogPortal = (props) => {
|
|
const { __scopeAlertDialog, ...portalProps } = props;
|
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
return (0, import_jsx_runtime15.jsx)(Portal2, { ...dialogScope, ...portalProps });
|
|
};
|
|
AlertDialogPortal.displayName = PORTAL_NAME3;
|
|
var OVERLAY_NAME2 = "AlertDialogOverlay";
|
|
var AlertDialogOverlay = React35.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAlertDialog, ...overlayProps } = props;
|
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
return (0, import_jsx_runtime15.jsx)(Overlay, { ...dialogScope, ...overlayProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
AlertDialogOverlay.displayName = OVERLAY_NAME2;
|
|
var CONTENT_NAME4 = "AlertDialogContent";
|
|
var [AlertDialogContentProvider, useAlertDialogContentContext] = createAlertDialogContext(CONTENT_NAME4);
|
|
var Slottable2 = createSlottable("AlertDialogContent");
|
|
var AlertDialogContent = React35.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAlertDialog, children, ...contentProps } = props;
|
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
const contentRef = React35.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
const cancelRef = React35.useRef(null);
|
|
return (0, import_jsx_runtime15.jsx)(
|
|
WarningProvider,
|
|
{
|
|
contentName: CONTENT_NAME4,
|
|
titleName: TITLE_NAME2,
|
|
docsSlug: "alert-dialog",
|
|
children: (0, import_jsx_runtime15.jsx)(AlertDialogContentProvider, { scope: __scopeAlertDialog, cancelRef, children: (0, import_jsx_runtime15.jsxs)(
|
|
Content3,
|
|
{
|
|
role: "alertdialog",
|
|
...dialogScope,
|
|
...contentProps,
|
|
ref: composedRefs,
|
|
onOpenAutoFocus: composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {
|
|
event.preventDefault();
|
|
cancelRef.current?.focus({ preventScroll: true });
|
|
}),
|
|
onPointerDownOutside: (event) => event.preventDefault(),
|
|
onInteractOutside: (event) => event.preventDefault(),
|
|
children: [
|
|
(0, import_jsx_runtime15.jsx)(Slottable2, { children }),
|
|
(0, import_jsx_runtime15.jsx)(DescriptionWarning2, { contentRef })
|
|
]
|
|
}
|
|
) })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
AlertDialogContent.displayName = CONTENT_NAME4;
|
|
var TITLE_NAME2 = "AlertDialogTitle";
|
|
var AlertDialogTitle = React35.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAlertDialog, ...titleProps } = props;
|
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
return (0, import_jsx_runtime15.jsx)(Title, { ...dialogScope, ...titleProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
AlertDialogTitle.displayName = TITLE_NAME2;
|
|
var DESCRIPTION_NAME2 = "AlertDialogDescription";
|
|
var AlertDialogDescription = React35.forwardRef((props, forwardedRef) => {
|
|
const { __scopeAlertDialog, ...descriptionProps } = props;
|
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
return (0, import_jsx_runtime15.jsx)(Description, { ...dialogScope, ...descriptionProps, ref: forwardedRef });
|
|
});
|
|
AlertDialogDescription.displayName = DESCRIPTION_NAME2;
|
|
var ACTION_NAME = "AlertDialogAction";
|
|
var AlertDialogAction = React35.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAlertDialog, ...actionProps } = props;
|
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
return (0, import_jsx_runtime15.jsx)(Close, { ...dialogScope, ...actionProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
AlertDialogAction.displayName = ACTION_NAME;
|
|
var CANCEL_NAME = "AlertDialogCancel";
|
|
var AlertDialogCancel = React35.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAlertDialog, ...cancelProps } = props;
|
|
const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
|
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
const ref = useComposedRefs(forwardedRef, cancelRef);
|
|
return (0, import_jsx_runtime15.jsx)(Close, { ...dialogScope, ...cancelProps, ref });
|
|
}
|
|
);
|
|
AlertDialogCancel.displayName = CANCEL_NAME;
|
|
var DescriptionWarning2 = ({ contentRef }) => {
|
|
const MESSAGE = `\`${CONTENT_NAME4}\` requires a description for the component to be accessible for screen reader users.
|
|
|
|
You can add a description to the \`${CONTENT_NAME4}\` by passing a \`${DESCRIPTION_NAME2}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
|
|
|
|
Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME4}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
|
|
|
|
For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
|
|
React35.useEffect(() => {
|
|
const hasDescription = document.getElementById(
|
|
contentRef.current?.getAttribute("aria-describedby")
|
|
);
|
|
if (!hasDescription) console.warn(MESSAGE);
|
|
}, [MESSAGE, contentRef]);
|
|
return null;
|
|
};
|
|
var Root24 = AlertDialog;
|
|
var Trigger22 = AlertDialogTrigger;
|
|
var Portal22 = AlertDialogPortal;
|
|
var Overlay2 = AlertDialogOverlay;
|
|
var Content22 = AlertDialogContent;
|
|
var Action = AlertDialogAction;
|
|
var Cancel = AlertDialogCancel;
|
|
var Title2 = AlertDialogTitle;
|
|
var Description2 = AlertDialogDescription;
|
|
|
|
// node_modules/@radix-ui/react-aspect-ratio/dist/index.mjs
|
|
var dist_exports10 = {};
|
|
__export(dist_exports10, {
|
|
AspectRatio: () => AspectRatio,
|
|
Root: () => Root7
|
|
});
|
|
var React36 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
|
|
var NAME3 = "AspectRatio";
|
|
var AspectRatio = React36.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { ratio = 1 / 1, style, ...aspectRatioProps } = props;
|
|
return (0, import_jsx_runtime16.jsx)(
|
|
"div",
|
|
{
|
|
style: {
|
|
// ensures inner element is contained
|
|
position: "relative",
|
|
// ensures padding bottom trick maths works
|
|
width: "100%",
|
|
paddingBottom: `${100 / ratio}%`
|
|
},
|
|
"data-radix-aspect-ratio-wrapper": "",
|
|
children: (0, import_jsx_runtime16.jsx)(
|
|
Primitive.div,
|
|
{
|
|
...aspectRatioProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
...style,
|
|
// ensures children expand in ratio
|
|
position: "absolute",
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
}
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
AspectRatio.displayName = NAME3;
|
|
var Root7 = AspectRatio;
|
|
|
|
// node_modules/@radix-ui/react-avatar/dist/index.mjs
|
|
var dist_exports11 = {};
|
|
__export(dist_exports11, {
|
|
Avatar: () => Avatar,
|
|
AvatarFallback: () => AvatarFallback,
|
|
AvatarImage: () => AvatarImage,
|
|
Fallback: () => Fallback,
|
|
Image: () => Image,
|
|
Root: () => Root8,
|
|
createAvatarScope: () => createAvatarScope
|
|
});
|
|
var React37 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-use-is-hydrated/dist/index.mjs
|
|
var import_shim = __toESM(require_shim(), 1);
|
|
function useIsHydrated() {
|
|
return (0, import_shim.useSyncExternalStore)(
|
|
subscribe,
|
|
() => true,
|
|
() => false
|
|
);
|
|
}
|
|
function subscribe() {
|
|
return () => {
|
|
};
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-avatar/dist/index.mjs
|
|
var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
|
|
var AVATAR_NAME = "Avatar";
|
|
var [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);
|
|
var [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
|
|
var Avatar = React37.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAvatar, ...avatarProps } = props;
|
|
const [imageLoadingStatus, setImageLoadingStatus] = React37.useState("idle");
|
|
return (0, import_jsx_runtime17.jsx)(
|
|
AvatarProvider,
|
|
{
|
|
scope: __scopeAvatar,
|
|
imageLoadingStatus,
|
|
onImageLoadingStatusChange: setImageLoadingStatus,
|
|
children: (0, import_jsx_runtime17.jsx)(Primitive.span, { ...avatarProps, ref: forwardedRef })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
Avatar.displayName = AVATAR_NAME;
|
|
var IMAGE_NAME = "AvatarImage";
|
|
var AvatarImage = React37.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAvatar, src, onLoadingStatusChange = () => {
|
|
}, ...imageProps } = props;
|
|
const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
|
|
const imageLoadingStatus = useImageLoadingStatus(src, imageProps);
|
|
const handleLoadingStatusChange = useCallbackRef((status) => {
|
|
onLoadingStatusChange(status);
|
|
context.onImageLoadingStatusChange(status);
|
|
});
|
|
useLayoutEffect2(() => {
|
|
if (imageLoadingStatus !== "idle") {
|
|
handleLoadingStatusChange(imageLoadingStatus);
|
|
}
|
|
}, [imageLoadingStatus, handleLoadingStatusChange]);
|
|
return imageLoadingStatus === "loaded" ? (0, import_jsx_runtime17.jsx)(Primitive.img, { ...imageProps, ref: forwardedRef, src }) : null;
|
|
}
|
|
);
|
|
AvatarImage.displayName = IMAGE_NAME;
|
|
var FALLBACK_NAME = "AvatarFallback";
|
|
var AvatarFallback = React37.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeAvatar, delayMs, ...fallbackProps } = props;
|
|
const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
|
|
const [canRender, setCanRender] = React37.useState(delayMs === void 0);
|
|
React37.useEffect(() => {
|
|
if (delayMs !== void 0) {
|
|
const timerId = window.setTimeout(() => setCanRender(true), delayMs);
|
|
return () => window.clearTimeout(timerId);
|
|
}
|
|
}, [delayMs]);
|
|
return canRender && context.imageLoadingStatus !== "loaded" ? (0, import_jsx_runtime17.jsx)(Primitive.span, { ...fallbackProps, ref: forwardedRef }) : null;
|
|
}
|
|
);
|
|
AvatarFallback.displayName = FALLBACK_NAME;
|
|
function resolveLoadingStatus(image, src) {
|
|
if (!image) {
|
|
return "idle";
|
|
}
|
|
if (!src) {
|
|
return "error";
|
|
}
|
|
if (image.src !== src) {
|
|
image.src = src;
|
|
}
|
|
return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
|
|
}
|
|
function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
|
|
const isHydrated = useIsHydrated();
|
|
const imageRef = React37.useRef(null);
|
|
const image = (() => {
|
|
if (!isHydrated) return null;
|
|
if (!imageRef.current) {
|
|
imageRef.current = new window.Image();
|
|
}
|
|
return imageRef.current;
|
|
})();
|
|
const [loadingStatus, setLoadingStatus] = React37.useState(
|
|
() => resolveLoadingStatus(image, src)
|
|
);
|
|
useLayoutEffect2(() => {
|
|
setLoadingStatus(resolveLoadingStatus(image, src));
|
|
}, [image, src]);
|
|
useLayoutEffect2(() => {
|
|
const updateStatus = (status) => () => {
|
|
setLoadingStatus(status);
|
|
};
|
|
if (!image) return;
|
|
const handleLoad = updateStatus("loaded");
|
|
const handleError = updateStatus("error");
|
|
image.addEventListener("load", handleLoad);
|
|
image.addEventListener("error", handleError);
|
|
if (referrerPolicy) {
|
|
image.referrerPolicy = referrerPolicy;
|
|
}
|
|
if (typeof crossOrigin === "string") {
|
|
image.crossOrigin = crossOrigin;
|
|
}
|
|
return () => {
|
|
image.removeEventListener("load", handleLoad);
|
|
image.removeEventListener("error", handleError);
|
|
};
|
|
}, [image, crossOrigin, referrerPolicy]);
|
|
return loadingStatus;
|
|
}
|
|
var Root8 = Avatar;
|
|
var Image = AvatarImage;
|
|
var Fallback = AvatarFallback;
|
|
|
|
// node_modules/@radix-ui/react-checkbox/dist/index.mjs
|
|
var dist_exports12 = {};
|
|
__export(dist_exports12, {
|
|
Checkbox: () => Checkbox,
|
|
CheckboxIndicator: () => CheckboxIndicator,
|
|
Indicator: () => CheckboxIndicator,
|
|
Root: () => Checkbox,
|
|
createCheckboxScope: () => createCheckboxScope,
|
|
unstable_BubbleInput: () => CheckboxBubbleInput,
|
|
unstable_CheckboxBubbleInput: () => CheckboxBubbleInput,
|
|
unstable_CheckboxProvider: () => CheckboxProvider,
|
|
unstable_CheckboxTrigger: () => CheckboxTrigger,
|
|
unstable_Provider: () => CheckboxProvider,
|
|
unstable_Trigger: () => CheckboxTrigger
|
|
});
|
|
var React40 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-use-previous/dist/index.mjs
|
|
var React38 = __toESM(require_react(), 1);
|
|
function usePrevious(value) {
|
|
const ref = React38.useRef({ value, previous: value });
|
|
return React38.useMemo(() => {
|
|
if (ref.current.value !== value) {
|
|
ref.current.previous = ref.current.value;
|
|
ref.current.value = value;
|
|
}
|
|
return ref.current.previous;
|
|
}, [value]);
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-use-size/dist/index.mjs
|
|
var React39 = __toESM(require_react(), 1);
|
|
function useSize(element) {
|
|
const [size4, setSize] = React39.useState(void 0);
|
|
useLayoutEffect2(() => {
|
|
if (element) {
|
|
setSize({ width: element.offsetWidth, height: element.offsetHeight });
|
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
if (!Array.isArray(entries)) {
|
|
return;
|
|
}
|
|
if (!entries.length) {
|
|
return;
|
|
}
|
|
const entry = entries[0];
|
|
let width;
|
|
let height;
|
|
if ("borderBoxSize" in entry) {
|
|
const borderSizeEntry = entry["borderBoxSize"];
|
|
const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
|
|
width = borderSize["inlineSize"];
|
|
height = borderSize["blockSize"];
|
|
} else {
|
|
width = element.offsetWidth;
|
|
height = element.offsetHeight;
|
|
}
|
|
setSize({ width, height });
|
|
});
|
|
resizeObserver.observe(element, { box: "border-box" });
|
|
return () => resizeObserver.unobserve(element);
|
|
} else {
|
|
setSize(void 0);
|
|
}
|
|
}, [element]);
|
|
return size4;
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-checkbox/dist/index.mjs
|
|
var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
|
|
var CHECKBOX_NAME = "Checkbox";
|
|
var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
|
|
var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
|
|
function CheckboxProvider(props) {
|
|
const {
|
|
__scopeCheckbox,
|
|
checked: checkedProp,
|
|
children,
|
|
defaultChecked,
|
|
disabled,
|
|
form,
|
|
name,
|
|
onCheckedChange,
|
|
required,
|
|
value = "on",
|
|
// @ts-expect-error
|
|
internal_do_not_use_render
|
|
} = props;
|
|
const [checked, setChecked] = useControllableState({
|
|
prop: checkedProp,
|
|
defaultProp: defaultChecked ?? false,
|
|
onChange: onCheckedChange,
|
|
caller: CHECKBOX_NAME
|
|
});
|
|
const [control, setControl] = React40.useState(null);
|
|
const [bubbleInput, setBubbleInput] = React40.useState(null);
|
|
const hasConsumerStoppedPropagationRef = React40.useRef(false);
|
|
const isFormControl2 = control ? !!form || !!control.closest("form") : (
|
|
// We set this to true by default so that events bubble to forms without JS (SSR)
|
|
true
|
|
);
|
|
const context = {
|
|
checked,
|
|
disabled,
|
|
setChecked,
|
|
control,
|
|
setControl,
|
|
name,
|
|
form,
|
|
value,
|
|
hasConsumerStoppedPropagationRef,
|
|
required,
|
|
defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
|
|
isFormControl: isFormControl2,
|
|
bubbleInput,
|
|
setBubbleInput
|
|
};
|
|
return (0, import_jsx_runtime18.jsx)(
|
|
CheckboxProviderImpl,
|
|
{
|
|
scope: __scopeCheckbox,
|
|
...context,
|
|
children: isFunction2(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
|
|
}
|
|
);
|
|
}
|
|
var TRIGGER_NAME5 = "CheckboxTrigger";
|
|
var CheckboxTrigger = React40.forwardRef(
|
|
({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
|
|
const {
|
|
control,
|
|
value,
|
|
disabled,
|
|
checked,
|
|
required,
|
|
setControl,
|
|
setChecked,
|
|
hasConsumerStoppedPropagationRef,
|
|
isFormControl: isFormControl2,
|
|
bubbleInput
|
|
} = useCheckboxContext(TRIGGER_NAME5, __scopeCheckbox);
|
|
const composedRefs = useComposedRefs(forwardedRef, setControl);
|
|
const initialCheckedStateRef = React40.useRef(checked);
|
|
React40.useEffect(() => {
|
|
const form = control?.form;
|
|
if (form) {
|
|
const reset = () => setChecked(initialCheckedStateRef.current);
|
|
form.addEventListener("reset", reset);
|
|
return () => form.removeEventListener("reset", reset);
|
|
}
|
|
}, [control, setChecked]);
|
|
return (0, import_jsx_runtime18.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
role: "checkbox",
|
|
"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
|
|
"aria-required": required,
|
|
"data-state": getState4(checked),
|
|
"data-disabled": disabled ? "" : void 0,
|
|
disabled,
|
|
value,
|
|
...checkboxProps,
|
|
ref: composedRefs,
|
|
onKeyDown: composeEventHandlers(onKeyDown, (event) => {
|
|
if (event.key === "Enter") event.preventDefault();
|
|
}),
|
|
onClick: composeEventHandlers(onClick, (event) => {
|
|
setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
|
|
if (bubbleInput && isFormControl2) {
|
|
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
|
|
}
|
|
})
|
|
}
|
|
);
|
|
}
|
|
);
|
|
CheckboxTrigger.displayName = TRIGGER_NAME5;
|
|
var Checkbox = React40.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeCheckbox,
|
|
name,
|
|
checked,
|
|
defaultChecked,
|
|
required,
|
|
disabled,
|
|
value,
|
|
onCheckedChange,
|
|
form,
|
|
...checkboxProps
|
|
} = props;
|
|
return (0, import_jsx_runtime18.jsx)(
|
|
CheckboxProvider,
|
|
{
|
|
__scopeCheckbox,
|
|
checked,
|
|
defaultChecked,
|
|
disabled,
|
|
required,
|
|
onCheckedChange,
|
|
name,
|
|
form,
|
|
value,
|
|
internal_do_not_use_render: ({ isFormControl: isFormControl2 }) => (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
(0, import_jsx_runtime18.jsx)(
|
|
CheckboxTrigger,
|
|
{
|
|
...checkboxProps,
|
|
ref: forwardedRef,
|
|
__scopeCheckbox
|
|
}
|
|
),
|
|
isFormControl2 && (0, import_jsx_runtime18.jsx)(
|
|
CheckboxBubbleInput,
|
|
{
|
|
__scopeCheckbox
|
|
}
|
|
)
|
|
] })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
Checkbox.displayName = CHECKBOX_NAME;
|
|
var INDICATOR_NAME = "CheckboxIndicator";
|
|
var CheckboxIndicator = React40.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
|
|
const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
|
|
return (0, import_jsx_runtime18.jsx)(
|
|
Presence,
|
|
{
|
|
present: forceMount || isIndeterminate(context.checked) || context.checked === true,
|
|
children: (0, import_jsx_runtime18.jsx)(
|
|
Primitive.span,
|
|
{
|
|
"data-state": getState4(context.checked),
|
|
"data-disabled": context.disabled ? "" : void 0,
|
|
...indicatorProps,
|
|
ref: forwardedRef,
|
|
style: { pointerEvents: "none", ...props.style }
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
CheckboxIndicator.displayName = INDICATOR_NAME;
|
|
var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
|
|
var CheckboxBubbleInput = React40.forwardRef(
|
|
({ __scopeCheckbox, ...props }, forwardedRef) => {
|
|
const {
|
|
control,
|
|
hasConsumerStoppedPropagationRef,
|
|
checked,
|
|
defaultChecked,
|
|
required,
|
|
disabled,
|
|
name,
|
|
value,
|
|
form,
|
|
bubbleInput,
|
|
setBubbleInput
|
|
} = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
|
|
const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
|
|
const prevChecked = usePrevious(checked);
|
|
const controlSize = useSize(control);
|
|
React40.useEffect(() => {
|
|
const input = bubbleInput;
|
|
if (!input) return;
|
|
const inputProto = window.HTMLInputElement.prototype;
|
|
const descriptor = Object.getOwnPropertyDescriptor(
|
|
inputProto,
|
|
"checked"
|
|
);
|
|
const setChecked = descriptor.set;
|
|
const bubbles = !hasConsumerStoppedPropagationRef.current;
|
|
if (prevChecked !== checked && setChecked) {
|
|
const event = new Event("click", { bubbles });
|
|
input.indeterminate = isIndeterminate(checked);
|
|
setChecked.call(input, isIndeterminate(checked) ? false : checked);
|
|
input.dispatchEvent(event);
|
|
}
|
|
}, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
|
|
const defaultCheckedRef = React40.useRef(isIndeterminate(checked) ? false : checked);
|
|
return (0, import_jsx_runtime18.jsx)(
|
|
Primitive.input,
|
|
{
|
|
type: "checkbox",
|
|
"aria-hidden": true,
|
|
defaultChecked: defaultChecked ?? defaultCheckedRef.current,
|
|
required,
|
|
disabled,
|
|
name,
|
|
value,
|
|
form,
|
|
...props,
|
|
tabIndex: -1,
|
|
ref: composedRefs,
|
|
style: {
|
|
...props.style,
|
|
...controlSize,
|
|
position: "absolute",
|
|
pointerEvents: "none",
|
|
opacity: 0,
|
|
margin: 0,
|
|
// We transform because the input is absolutely positioned but we have
|
|
// rendered it **after** the button. This pulls it back to sit on top
|
|
// of the button.
|
|
transform: "translateX(-100%)"
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
|
|
function isFunction2(value) {
|
|
return typeof value === "function";
|
|
}
|
|
function isIndeterminate(checked) {
|
|
return checked === "indeterminate";
|
|
}
|
|
function getState4(checked) {
|
|
return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-context-menu/dist/index.mjs
|
|
var dist_exports16 = {};
|
|
__export(dist_exports16, {
|
|
Arrow: () => Arrow23,
|
|
CheckboxItem: () => CheckboxItem2,
|
|
Content: () => Content24,
|
|
ContextMenu: () => ContextMenu,
|
|
ContextMenuArrow: () => ContextMenuArrow,
|
|
ContextMenuCheckboxItem: () => ContextMenuCheckboxItem,
|
|
ContextMenuContent: () => ContextMenuContent,
|
|
ContextMenuGroup: () => ContextMenuGroup,
|
|
ContextMenuItem: () => ContextMenuItem,
|
|
ContextMenuItemIndicator: () => ContextMenuItemIndicator,
|
|
ContextMenuLabel: () => ContextMenuLabel,
|
|
ContextMenuPortal: () => ContextMenuPortal,
|
|
ContextMenuRadioGroup: () => ContextMenuRadioGroup,
|
|
ContextMenuRadioItem: () => ContextMenuRadioItem,
|
|
ContextMenuSeparator: () => ContextMenuSeparator,
|
|
ContextMenuSub: () => ContextMenuSub,
|
|
ContextMenuSubContent: () => ContextMenuSubContent,
|
|
ContextMenuSubTrigger: () => ContextMenuSubTrigger,
|
|
ContextMenuTrigger: () => ContextMenuTrigger,
|
|
Group: () => Group2,
|
|
Item: () => Item23,
|
|
ItemIndicator: () => ItemIndicator2,
|
|
Label: () => Label2,
|
|
Portal: () => Portal23,
|
|
RadioGroup: () => RadioGroup2,
|
|
RadioItem: () => RadioItem2,
|
|
Root: () => Root26,
|
|
Separator: () => Separator2,
|
|
Sub: () => Sub2,
|
|
SubContent: () => SubContent2,
|
|
SubTrigger: () => SubTrigger2,
|
|
Trigger: () => Trigger4,
|
|
createContextMenuScope: () => createContextMenuScope
|
|
});
|
|
var React46 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-menu/dist/index.mjs
|
|
var React45 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-popper/dist/index.mjs
|
|
var React43 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
|
|
var sides = ["top", "right", "bottom", "left"];
|
|
var alignments = ["start", "end"];
|
|
var placements = sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
|
|
var min = Math.min;
|
|
var max = Math.max;
|
|
var round = Math.round;
|
|
var floor = Math.floor;
|
|
var createCoords = (v) => ({
|
|
x: v,
|
|
y: v
|
|
});
|
|
var oppositeSideMap = {
|
|
left: "right",
|
|
right: "left",
|
|
bottom: "top",
|
|
top: "bottom"
|
|
};
|
|
var oppositeAlignmentMap = {
|
|
start: "end",
|
|
end: "start"
|
|
};
|
|
function clamp(start, value, end) {
|
|
return max(start, min(value, end));
|
|
}
|
|
function evaluate(value, param) {
|
|
return typeof value === "function" ? value(param) : value;
|
|
}
|
|
function getSide(placement) {
|
|
return placement.split("-")[0];
|
|
}
|
|
function getAlignment(placement) {
|
|
return placement.split("-")[1];
|
|
}
|
|
function getOppositeAxis(axis) {
|
|
return axis === "x" ? "y" : "x";
|
|
}
|
|
function getAxisLength(axis) {
|
|
return axis === "y" ? "height" : "width";
|
|
}
|
|
var yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
|
|
function getSideAxis(placement) {
|
|
return yAxisSides.has(getSide(placement)) ? "y" : "x";
|
|
}
|
|
function getAlignmentAxis(placement) {
|
|
return getOppositeAxis(getSideAxis(placement));
|
|
}
|
|
function getAlignmentSides(placement, rects, rtl) {
|
|
if (rtl === void 0) {
|
|
rtl = false;
|
|
}
|
|
const alignment = getAlignment(placement);
|
|
const alignmentAxis = getAlignmentAxis(placement);
|
|
const length = getAxisLength(alignmentAxis);
|
|
let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
|
|
if (rects.reference[length] > rects.floating[length]) {
|
|
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
}
|
|
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
}
|
|
function getExpandedPlacements(placement) {
|
|
const oppositePlacement = getOppositePlacement(placement);
|
|
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
}
|
|
function getOppositeAlignmentPlacement(placement) {
|
|
return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
|
|
}
|
|
var lrPlacement = ["left", "right"];
|
|
var rlPlacement = ["right", "left"];
|
|
var tbPlacement = ["top", "bottom"];
|
|
var btPlacement = ["bottom", "top"];
|
|
function getSideList(side, isStart, rtl) {
|
|
switch (side) {
|
|
case "top":
|
|
case "bottom":
|
|
if (rtl) return isStart ? rlPlacement : lrPlacement;
|
|
return isStart ? lrPlacement : rlPlacement;
|
|
case "left":
|
|
case "right":
|
|
return isStart ? tbPlacement : btPlacement;
|
|
default:
|
|
return [];
|
|
}
|
|
}
|
|
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
const alignment = getAlignment(placement);
|
|
let list = getSideList(getSide(placement), direction === "start", rtl);
|
|
if (alignment) {
|
|
list = list.map((side) => side + "-" + alignment);
|
|
if (flipAlignment) {
|
|
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
}
|
|
}
|
|
return list;
|
|
}
|
|
function getOppositePlacement(placement) {
|
|
return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
|
|
}
|
|
function expandPaddingObject(padding) {
|
|
return {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
...padding
|
|
};
|
|
}
|
|
function getPaddingObject(padding) {
|
|
return typeof padding !== "number" ? expandPaddingObject(padding) : {
|
|
top: padding,
|
|
right: padding,
|
|
bottom: padding,
|
|
left: padding
|
|
};
|
|
}
|
|
function rectToClientRect(rect) {
|
|
const {
|
|
x,
|
|
y,
|
|
width,
|
|
height
|
|
} = rect;
|
|
return {
|
|
width,
|
|
height,
|
|
top: y,
|
|
left: x,
|
|
right: x + width,
|
|
bottom: y + height,
|
|
x,
|
|
y
|
|
};
|
|
}
|
|
|
|
// node_modules/@floating-ui/core/dist/floating-ui.core.mjs
|
|
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
let {
|
|
reference,
|
|
floating
|
|
} = _ref;
|
|
const sideAxis = getSideAxis(placement);
|
|
const alignmentAxis = getAlignmentAxis(placement);
|
|
const alignLength = getAxisLength(alignmentAxis);
|
|
const side = getSide(placement);
|
|
const isVertical = sideAxis === "y";
|
|
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
let coords;
|
|
switch (side) {
|
|
case "top":
|
|
coords = {
|
|
x: commonX,
|
|
y: reference.y - floating.height
|
|
};
|
|
break;
|
|
case "bottom":
|
|
coords = {
|
|
x: commonX,
|
|
y: reference.y + reference.height
|
|
};
|
|
break;
|
|
case "right":
|
|
coords = {
|
|
x: reference.x + reference.width,
|
|
y: commonY
|
|
};
|
|
break;
|
|
case "left":
|
|
coords = {
|
|
x: reference.x - floating.width,
|
|
y: commonY
|
|
};
|
|
break;
|
|
default:
|
|
coords = {
|
|
x: reference.x,
|
|
y: reference.y
|
|
};
|
|
}
|
|
switch (getAlignment(placement)) {
|
|
case "start":
|
|
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
break;
|
|
case "end":
|
|
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
break;
|
|
}
|
|
return coords;
|
|
}
|
|
async function detectOverflow(state, options) {
|
|
var _await$platform$isEle;
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
const {
|
|
x,
|
|
y,
|
|
platform: platform2,
|
|
rects,
|
|
elements,
|
|
strategy
|
|
} = state;
|
|
const {
|
|
boundary = "clippingAncestors",
|
|
rootBoundary = "viewport",
|
|
elementContext = "floating",
|
|
altBoundary = false,
|
|
padding = 0
|
|
} = evaluate(options, state);
|
|
const paddingObject = getPaddingObject(padding);
|
|
const altContext = elementContext === "floating" ? "reference" : "floating";
|
|
const element = elements[altBoundary ? altContext : elementContext];
|
|
const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
|
|
element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
|
|
boundary,
|
|
rootBoundary,
|
|
strategy
|
|
}));
|
|
const rect = elementContext === "floating" ? {
|
|
x,
|
|
y,
|
|
width: rects.floating.width,
|
|
height: rects.floating.height
|
|
} : rects.reference;
|
|
const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
|
|
const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
|
|
x: 1,
|
|
y: 1
|
|
} : {
|
|
x: 1,
|
|
y: 1
|
|
};
|
|
const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
elements,
|
|
rect,
|
|
offsetParent,
|
|
strategy
|
|
}) : rect);
|
|
return {
|
|
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
};
|
|
}
|
|
var computePosition = async (reference, floating, config) => {
|
|
const {
|
|
placement = "bottom",
|
|
strategy = "absolute",
|
|
middleware = [],
|
|
platform: platform2
|
|
} = config;
|
|
const validMiddleware = middleware.filter(Boolean);
|
|
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
|
|
let rects = await platform2.getElementRects({
|
|
reference,
|
|
floating,
|
|
strategy
|
|
});
|
|
let {
|
|
x,
|
|
y
|
|
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
let statefulPlacement = placement;
|
|
let middlewareData = {};
|
|
let resetCount = 0;
|
|
for (let i = 0; i < validMiddleware.length; i++) {
|
|
var _platform$detectOverf;
|
|
const {
|
|
name,
|
|
fn
|
|
} = validMiddleware[i];
|
|
const {
|
|
x: nextX,
|
|
y: nextY,
|
|
data,
|
|
reset
|
|
} = await fn({
|
|
x,
|
|
y,
|
|
initialPlacement: placement,
|
|
placement: statefulPlacement,
|
|
strategy,
|
|
middlewareData,
|
|
rects,
|
|
platform: {
|
|
...platform2,
|
|
detectOverflow: (_platform$detectOverf = platform2.detectOverflow) != null ? _platform$detectOverf : detectOverflow
|
|
},
|
|
elements: {
|
|
reference,
|
|
floating
|
|
}
|
|
});
|
|
x = nextX != null ? nextX : x;
|
|
y = nextY != null ? nextY : y;
|
|
middlewareData = {
|
|
...middlewareData,
|
|
[name]: {
|
|
...middlewareData[name],
|
|
...data
|
|
}
|
|
};
|
|
if (reset && resetCount <= 50) {
|
|
resetCount++;
|
|
if (typeof reset === "object") {
|
|
if (reset.placement) {
|
|
statefulPlacement = reset.placement;
|
|
}
|
|
if (reset.rects) {
|
|
rects = reset.rects === true ? await platform2.getElementRects({
|
|
reference,
|
|
floating,
|
|
strategy
|
|
}) : reset.rects;
|
|
}
|
|
({
|
|
x,
|
|
y
|
|
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
}
|
|
i = -1;
|
|
}
|
|
}
|
|
return {
|
|
x,
|
|
y,
|
|
placement: statefulPlacement,
|
|
strategy,
|
|
middlewareData
|
|
};
|
|
};
|
|
var arrow = (options) => ({
|
|
name: "arrow",
|
|
options,
|
|
async fn(state) {
|
|
const {
|
|
x,
|
|
y,
|
|
placement,
|
|
rects,
|
|
platform: platform2,
|
|
elements,
|
|
middlewareData
|
|
} = state;
|
|
const {
|
|
element,
|
|
padding = 0
|
|
} = evaluate(options, state) || {};
|
|
if (element == null) {
|
|
return {};
|
|
}
|
|
const paddingObject = getPaddingObject(padding);
|
|
const coords = {
|
|
x,
|
|
y
|
|
};
|
|
const axis = getAlignmentAxis(placement);
|
|
const length = getAxisLength(axis);
|
|
const arrowDimensions = await platform2.getDimensions(element);
|
|
const isYAxis = axis === "y";
|
|
const minProp = isYAxis ? "top" : "left";
|
|
const maxProp = isYAxis ? "bottom" : "right";
|
|
const clientProp = isYAxis ? "clientHeight" : "clientWidth";
|
|
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
|
|
const startDiff = coords[axis] - rects.reference[axis];
|
|
const arrowOffsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(element));
|
|
let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
|
|
if (!clientSize || !await (platform2.isElement == null ? void 0 : platform2.isElement(arrowOffsetParent))) {
|
|
clientSize = elements.floating[clientProp] || rects.floating[length];
|
|
}
|
|
const centerToReference = endDiff / 2 - startDiff / 2;
|
|
const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
|
|
const minPadding = min(paddingObject[minProp], largestPossiblePadding);
|
|
const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
|
|
const min$1 = minPadding;
|
|
const max2 = clientSize - arrowDimensions[length] - maxPadding;
|
|
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
const offset4 = clamp(min$1, center, max2);
|
|
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset4 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
|
|
const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
|
|
return {
|
|
[axis]: coords[axis] + alignmentOffset,
|
|
data: {
|
|
[axis]: offset4,
|
|
centerOffset: center - offset4 - alignmentOffset,
|
|
...shouldAddOffset && {
|
|
alignmentOffset
|
|
}
|
|
},
|
|
reset: shouldAddOffset
|
|
};
|
|
}
|
|
});
|
|
var flip = function(options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
return {
|
|
name: "flip",
|
|
options,
|
|
async fn(state) {
|
|
var _middlewareData$arrow, _middlewareData$flip;
|
|
const {
|
|
placement,
|
|
middlewareData,
|
|
rects,
|
|
initialPlacement,
|
|
platform: platform2,
|
|
elements
|
|
} = state;
|
|
const {
|
|
mainAxis: checkMainAxis = true,
|
|
crossAxis: checkCrossAxis = true,
|
|
fallbackPlacements: specifiedFallbackPlacements,
|
|
fallbackStrategy = "bestFit",
|
|
fallbackAxisSideDirection = "none",
|
|
flipAlignment = true,
|
|
...detectOverflowOptions
|
|
} = evaluate(options, state);
|
|
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
return {};
|
|
}
|
|
const side = getSide(placement);
|
|
const initialSideAxis = getSideAxis(initialPlacement);
|
|
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
|
|
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
|
|
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
}
|
|
const placements2 = [initialPlacement, ...fallbackPlacements];
|
|
const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
|
|
const overflows = [];
|
|
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
if (checkMainAxis) {
|
|
overflows.push(overflow[side]);
|
|
}
|
|
if (checkCrossAxis) {
|
|
const sides2 = getAlignmentSides(placement, rects, rtl);
|
|
overflows.push(overflow[sides2[0]], overflow[sides2[1]]);
|
|
}
|
|
overflowsData = [...overflowsData, {
|
|
placement,
|
|
overflows
|
|
}];
|
|
if (!overflows.every((side2) => side2 <= 0)) {
|
|
var _middlewareData$flip2, _overflowsData$filter;
|
|
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
const nextPlacement = placements2[nextIndex];
|
|
if (nextPlacement) {
|
|
const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
if (!ignoreCrossAxisOverflow || // We leave the current main axis only if every placement on that axis
|
|
// overflows the main axis.
|
|
overflowsData.every((d) => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
|
|
return {
|
|
data: {
|
|
index: nextIndex,
|
|
overflows: overflowsData
|
|
},
|
|
reset: {
|
|
placement: nextPlacement
|
|
}
|
|
};
|
|
}
|
|
}
|
|
let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
|
|
if (!resetPlacement) {
|
|
switch (fallbackStrategy) {
|
|
case "bestFit": {
|
|
var _overflowsData$filter2;
|
|
const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
|
|
if (hasFallbackAxisSideDirection) {
|
|
const currentSideAxis = getSideAxis(d.placement);
|
|
return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
|
|
// reading directions favoring greater width.
|
|
currentSideAxis === "y";
|
|
}
|
|
return true;
|
|
}).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
|
|
if (placement2) {
|
|
resetPlacement = placement2;
|
|
}
|
|
break;
|
|
}
|
|
case "initialPlacement":
|
|
resetPlacement = initialPlacement;
|
|
break;
|
|
}
|
|
}
|
|
if (placement !== resetPlacement) {
|
|
return {
|
|
reset: {
|
|
placement: resetPlacement
|
|
}
|
|
};
|
|
}
|
|
}
|
|
return {};
|
|
}
|
|
};
|
|
};
|
|
function getSideOffsets(overflow, rect) {
|
|
return {
|
|
top: overflow.top - rect.height,
|
|
right: overflow.right - rect.width,
|
|
bottom: overflow.bottom - rect.height,
|
|
left: overflow.left - rect.width
|
|
};
|
|
}
|
|
function isAnySideFullyClipped(overflow) {
|
|
return sides.some((side) => overflow[side] >= 0);
|
|
}
|
|
var hide = function(options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
return {
|
|
name: "hide",
|
|
options,
|
|
async fn(state) {
|
|
const {
|
|
rects,
|
|
platform: platform2
|
|
} = state;
|
|
const {
|
|
strategy = "referenceHidden",
|
|
...detectOverflowOptions
|
|
} = evaluate(options, state);
|
|
switch (strategy) {
|
|
case "referenceHidden": {
|
|
const overflow = await platform2.detectOverflow(state, {
|
|
...detectOverflowOptions,
|
|
elementContext: "reference"
|
|
});
|
|
const offsets = getSideOffsets(overflow, rects.reference);
|
|
return {
|
|
data: {
|
|
referenceHiddenOffsets: offsets,
|
|
referenceHidden: isAnySideFullyClipped(offsets)
|
|
}
|
|
};
|
|
}
|
|
case "escaped": {
|
|
const overflow = await platform2.detectOverflow(state, {
|
|
...detectOverflowOptions,
|
|
altBoundary: true
|
|
});
|
|
const offsets = getSideOffsets(overflow, rects.floating);
|
|
return {
|
|
data: {
|
|
escapedOffsets: offsets,
|
|
escaped: isAnySideFullyClipped(offsets)
|
|
}
|
|
};
|
|
}
|
|
default: {
|
|
return {};
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
var originSides = /* @__PURE__ */ new Set(["left", "top"]);
|
|
async function convertValueToCoords(state, options) {
|
|
const {
|
|
placement,
|
|
platform: platform2,
|
|
elements
|
|
} = state;
|
|
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
|
|
const side = getSide(placement);
|
|
const alignment = getAlignment(placement);
|
|
const isVertical = getSideAxis(placement) === "y";
|
|
const mainAxisMulti = originSides.has(side) ? -1 : 1;
|
|
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
const rawValue = evaluate(options, state);
|
|
let {
|
|
mainAxis,
|
|
crossAxis,
|
|
alignmentAxis
|
|
} = typeof rawValue === "number" ? {
|
|
mainAxis: rawValue,
|
|
crossAxis: 0,
|
|
alignmentAxis: null
|
|
} : {
|
|
mainAxis: rawValue.mainAxis || 0,
|
|
crossAxis: rawValue.crossAxis || 0,
|
|
alignmentAxis: rawValue.alignmentAxis
|
|
};
|
|
if (alignment && typeof alignmentAxis === "number") {
|
|
crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
|
|
}
|
|
return isVertical ? {
|
|
x: crossAxis * crossAxisMulti,
|
|
y: mainAxis * mainAxisMulti
|
|
} : {
|
|
x: mainAxis * mainAxisMulti,
|
|
y: crossAxis * crossAxisMulti
|
|
};
|
|
}
|
|
var offset = function(options) {
|
|
if (options === void 0) {
|
|
options = 0;
|
|
}
|
|
return {
|
|
name: "offset",
|
|
options,
|
|
async fn(state) {
|
|
var _middlewareData$offse, _middlewareData$arrow;
|
|
const {
|
|
x,
|
|
y,
|
|
placement,
|
|
middlewareData
|
|
} = state;
|
|
const diffCoords = await convertValueToCoords(state, options);
|
|
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
return {};
|
|
}
|
|
return {
|
|
x: x + diffCoords.x,
|
|
y: y + diffCoords.y,
|
|
data: {
|
|
...diffCoords,
|
|
placement
|
|
}
|
|
};
|
|
}
|
|
};
|
|
};
|
|
var shift = function(options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
return {
|
|
name: "shift",
|
|
options,
|
|
async fn(state) {
|
|
const {
|
|
x,
|
|
y,
|
|
placement,
|
|
platform: platform2
|
|
} = state;
|
|
const {
|
|
mainAxis: checkMainAxis = true,
|
|
crossAxis: checkCrossAxis = false,
|
|
limiter = {
|
|
fn: (_ref) => {
|
|
let {
|
|
x: x2,
|
|
y: y2
|
|
} = _ref;
|
|
return {
|
|
x: x2,
|
|
y: y2
|
|
};
|
|
}
|
|
},
|
|
...detectOverflowOptions
|
|
} = evaluate(options, state);
|
|
const coords = {
|
|
x,
|
|
y
|
|
};
|
|
const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
|
|
const crossAxis = getSideAxis(getSide(placement));
|
|
const mainAxis = getOppositeAxis(crossAxis);
|
|
let mainAxisCoord = coords[mainAxis];
|
|
let crossAxisCoord = coords[crossAxis];
|
|
if (checkMainAxis) {
|
|
const minSide = mainAxis === "y" ? "top" : "left";
|
|
const maxSide = mainAxis === "y" ? "bottom" : "right";
|
|
const min2 = mainAxisCoord + overflow[minSide];
|
|
const max2 = mainAxisCoord - overflow[maxSide];
|
|
mainAxisCoord = clamp(min2, mainAxisCoord, max2);
|
|
}
|
|
if (checkCrossAxis) {
|
|
const minSide = crossAxis === "y" ? "top" : "left";
|
|
const maxSide = crossAxis === "y" ? "bottom" : "right";
|
|
const min2 = crossAxisCoord + overflow[minSide];
|
|
const max2 = crossAxisCoord - overflow[maxSide];
|
|
crossAxisCoord = clamp(min2, crossAxisCoord, max2);
|
|
}
|
|
const limitedCoords = limiter.fn({
|
|
...state,
|
|
[mainAxis]: mainAxisCoord,
|
|
[crossAxis]: crossAxisCoord
|
|
});
|
|
return {
|
|
...limitedCoords,
|
|
data: {
|
|
x: limitedCoords.x - x,
|
|
y: limitedCoords.y - y,
|
|
enabled: {
|
|
[mainAxis]: checkMainAxis,
|
|
[crossAxis]: checkCrossAxis
|
|
}
|
|
}
|
|
};
|
|
}
|
|
};
|
|
};
|
|
var limitShift = function(options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
return {
|
|
options,
|
|
fn(state) {
|
|
const {
|
|
x,
|
|
y,
|
|
placement,
|
|
rects,
|
|
middlewareData
|
|
} = state;
|
|
const {
|
|
offset: offset4 = 0,
|
|
mainAxis: checkMainAxis = true,
|
|
crossAxis: checkCrossAxis = true
|
|
} = evaluate(options, state);
|
|
const coords = {
|
|
x,
|
|
y
|
|
};
|
|
const crossAxis = getSideAxis(placement);
|
|
const mainAxis = getOppositeAxis(crossAxis);
|
|
let mainAxisCoord = coords[mainAxis];
|
|
let crossAxisCoord = coords[crossAxis];
|
|
const rawOffset = evaluate(offset4, state);
|
|
const computedOffset = typeof rawOffset === "number" ? {
|
|
mainAxis: rawOffset,
|
|
crossAxis: 0
|
|
} : {
|
|
mainAxis: 0,
|
|
crossAxis: 0,
|
|
...rawOffset
|
|
};
|
|
if (checkMainAxis) {
|
|
const len = mainAxis === "y" ? "height" : "width";
|
|
const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
|
|
const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
|
|
if (mainAxisCoord < limitMin) {
|
|
mainAxisCoord = limitMin;
|
|
} else if (mainAxisCoord > limitMax) {
|
|
mainAxisCoord = limitMax;
|
|
}
|
|
}
|
|
if (checkCrossAxis) {
|
|
var _middlewareData$offse, _middlewareData$offse2;
|
|
const len = mainAxis === "y" ? "width" : "height";
|
|
const isOriginSide = originSides.has(getSide(placement));
|
|
const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
|
|
const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
|
|
if (crossAxisCoord < limitMin) {
|
|
crossAxisCoord = limitMin;
|
|
} else if (crossAxisCoord > limitMax) {
|
|
crossAxisCoord = limitMax;
|
|
}
|
|
}
|
|
return {
|
|
[mainAxis]: mainAxisCoord,
|
|
[crossAxis]: crossAxisCoord
|
|
};
|
|
}
|
|
};
|
|
};
|
|
var size = function(options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
return {
|
|
name: "size",
|
|
options,
|
|
async fn(state) {
|
|
var _state$middlewareData, _state$middlewareData2;
|
|
const {
|
|
placement,
|
|
rects,
|
|
platform: platform2,
|
|
elements
|
|
} = state;
|
|
const {
|
|
apply = () => {
|
|
},
|
|
...detectOverflowOptions
|
|
} = evaluate(options, state);
|
|
const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
|
|
const side = getSide(placement);
|
|
const alignment = getAlignment(placement);
|
|
const isYAxis = getSideAxis(placement) === "y";
|
|
const {
|
|
width,
|
|
height
|
|
} = rects.floating;
|
|
let heightSide;
|
|
let widthSide;
|
|
if (side === "top" || side === "bottom") {
|
|
heightSide = side;
|
|
widthSide = alignment === (await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)) ? "start" : "end") ? "left" : "right";
|
|
} else {
|
|
widthSide = side;
|
|
heightSide = alignment === "end" ? "top" : "bottom";
|
|
}
|
|
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
|
|
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
|
|
const noShift = !state.middlewareData.shift;
|
|
let availableHeight = overflowAvailableHeight;
|
|
let availableWidth = overflowAvailableWidth;
|
|
if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
|
|
availableWidth = maximumClippingWidth;
|
|
}
|
|
if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
|
|
availableHeight = maximumClippingHeight;
|
|
}
|
|
if (noShift && !alignment) {
|
|
const xMin = max(overflow.left, 0);
|
|
const xMax = max(overflow.right, 0);
|
|
const yMin = max(overflow.top, 0);
|
|
const yMax = max(overflow.bottom, 0);
|
|
if (isYAxis) {
|
|
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
} else {
|
|
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
}
|
|
}
|
|
await apply({
|
|
...state,
|
|
availableWidth,
|
|
availableHeight
|
|
});
|
|
const nextDimensions = await platform2.getDimensions(elements.floating);
|
|
if (width !== nextDimensions.width || height !== nextDimensions.height) {
|
|
return {
|
|
reset: {
|
|
rects: true
|
|
}
|
|
};
|
|
}
|
|
return {};
|
|
}
|
|
};
|
|
};
|
|
|
|
// node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
|
|
function hasWindow() {
|
|
return typeof window !== "undefined";
|
|
}
|
|
function getNodeName(node) {
|
|
if (isNode2(node)) {
|
|
return (node.nodeName || "").toLowerCase();
|
|
}
|
|
return "#document";
|
|
}
|
|
function getWindow(node) {
|
|
var _node$ownerDocument;
|
|
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
}
|
|
function getDocumentElement(node) {
|
|
var _ref;
|
|
return (_ref = (isNode2(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
}
|
|
function isNode2(value) {
|
|
if (!hasWindow()) {
|
|
return false;
|
|
}
|
|
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
}
|
|
function isElement(value) {
|
|
if (!hasWindow()) {
|
|
return false;
|
|
}
|
|
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
}
|
|
function isHTMLElement(value) {
|
|
if (!hasWindow()) {
|
|
return false;
|
|
}
|
|
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
}
|
|
function isShadowRoot(value) {
|
|
if (!hasWindow() || typeof ShadowRoot === "undefined") {
|
|
return false;
|
|
}
|
|
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
}
|
|
var invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
|
|
function isOverflowElement(element) {
|
|
const {
|
|
overflow,
|
|
overflowX,
|
|
overflowY,
|
|
display
|
|
} = getComputedStyle2(element);
|
|
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
|
}
|
|
var tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
|
|
function isTableElement(element) {
|
|
return tableElements.has(getNodeName(element));
|
|
}
|
|
var topLayerSelectors = [":popover-open", ":modal"];
|
|
function isTopLayer(element) {
|
|
return topLayerSelectors.some((selector) => {
|
|
try {
|
|
return element.matches(selector);
|
|
} catch (_e) {
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
var transformProperties = ["transform", "translate", "scale", "rotate", "perspective"];
|
|
var willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"];
|
|
var containValues = ["paint", "layout", "strict", "content"];
|
|
function isContainingBlock(elementOrCss) {
|
|
const webkit = isWebKit();
|
|
const css = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
|
|
return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
|
|
}
|
|
function getContainingBlock(element) {
|
|
let currentNode = getParentNode(element);
|
|
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
if (isContainingBlock(currentNode)) {
|
|
return currentNode;
|
|
} else if (isTopLayer(currentNode)) {
|
|
return null;
|
|
}
|
|
currentNode = getParentNode(currentNode);
|
|
}
|
|
return null;
|
|
}
|
|
function isWebKit() {
|
|
if (typeof CSS === "undefined" || !CSS.supports) return false;
|
|
return CSS.supports("-webkit-backdrop-filter", "none");
|
|
}
|
|
var lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
|
|
function isLastTraversableNode(node) {
|
|
return lastTraversableNodeNames.has(getNodeName(node));
|
|
}
|
|
function getComputedStyle2(element) {
|
|
return getWindow(element).getComputedStyle(element);
|
|
}
|
|
function getNodeScroll(element) {
|
|
if (isElement(element)) {
|
|
return {
|
|
scrollLeft: element.scrollLeft,
|
|
scrollTop: element.scrollTop
|
|
};
|
|
}
|
|
return {
|
|
scrollLeft: element.scrollX,
|
|
scrollTop: element.scrollY
|
|
};
|
|
}
|
|
function getParentNode(node) {
|
|
if (getNodeName(node) === "html") {
|
|
return node;
|
|
}
|
|
const result = (
|
|
// Step into the shadow DOM of the parent of a slotted node.
|
|
node.assignedSlot || // DOM Element detected.
|
|
node.parentNode || // ShadowRoot detected.
|
|
isShadowRoot(node) && node.host || // Fallback.
|
|
getDocumentElement(node)
|
|
);
|
|
return isShadowRoot(result) ? result.host : result;
|
|
}
|
|
function getNearestOverflowAncestor(node) {
|
|
const parentNode = getParentNode(node);
|
|
if (isLastTraversableNode(parentNode)) {
|
|
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
}
|
|
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
return parentNode;
|
|
}
|
|
return getNearestOverflowAncestor(parentNode);
|
|
}
|
|
function getOverflowAncestors(node, list, traverseIframes) {
|
|
var _node$ownerDocument2;
|
|
if (list === void 0) {
|
|
list = [];
|
|
}
|
|
if (traverseIframes === void 0) {
|
|
traverseIframes = true;
|
|
}
|
|
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
const win = getWindow(scrollableAncestor);
|
|
if (isBody) {
|
|
const frameElement = getFrameElement(win);
|
|
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
}
|
|
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
}
|
|
function getFrameElement(win) {
|
|
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
}
|
|
|
|
// node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
|
|
function getCssDimensions(element) {
|
|
const css = getComputedStyle2(element);
|
|
let width = parseFloat(css.width) || 0;
|
|
let height = parseFloat(css.height) || 0;
|
|
const hasOffset = isHTMLElement(element);
|
|
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
if (shouldFallback) {
|
|
width = offsetWidth;
|
|
height = offsetHeight;
|
|
}
|
|
return {
|
|
width,
|
|
height,
|
|
$: shouldFallback
|
|
};
|
|
}
|
|
function unwrapElement(element) {
|
|
return !isElement(element) ? element.contextElement : element;
|
|
}
|
|
function getScale(element) {
|
|
const domElement = unwrapElement(element);
|
|
if (!isHTMLElement(domElement)) {
|
|
return createCoords(1);
|
|
}
|
|
const rect = domElement.getBoundingClientRect();
|
|
const {
|
|
width,
|
|
height,
|
|
$
|
|
} = getCssDimensions(domElement);
|
|
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
if (!x || !Number.isFinite(x)) {
|
|
x = 1;
|
|
}
|
|
if (!y || !Number.isFinite(y)) {
|
|
y = 1;
|
|
}
|
|
return {
|
|
x,
|
|
y
|
|
};
|
|
}
|
|
var noOffsets = createCoords(0);
|
|
function getVisualOffsets(element) {
|
|
const win = getWindow(element);
|
|
if (!isWebKit() || !win.visualViewport) {
|
|
return noOffsets;
|
|
}
|
|
return {
|
|
x: win.visualViewport.offsetLeft,
|
|
y: win.visualViewport.offsetTop
|
|
};
|
|
}
|
|
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
if (isFixed === void 0) {
|
|
isFixed = false;
|
|
}
|
|
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
return false;
|
|
}
|
|
return isFixed;
|
|
}
|
|
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
if (includeScale === void 0) {
|
|
includeScale = false;
|
|
}
|
|
if (isFixedStrategy === void 0) {
|
|
isFixedStrategy = false;
|
|
}
|
|
const clientRect = element.getBoundingClientRect();
|
|
const domElement = unwrapElement(element);
|
|
let scale = createCoords(1);
|
|
if (includeScale) {
|
|
if (offsetParent) {
|
|
if (isElement(offsetParent)) {
|
|
scale = getScale(offsetParent);
|
|
}
|
|
} else {
|
|
scale = getScale(element);
|
|
}
|
|
}
|
|
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
let width = clientRect.width / scale.x;
|
|
let height = clientRect.height / scale.y;
|
|
if (domElement) {
|
|
const win = getWindow(domElement);
|
|
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
let currentWin = win;
|
|
let currentIFrame = getFrameElement(currentWin);
|
|
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
const iframeScale = getScale(currentIFrame);
|
|
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
const css = getComputedStyle2(currentIFrame);
|
|
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
x *= iframeScale.x;
|
|
y *= iframeScale.y;
|
|
width *= iframeScale.x;
|
|
height *= iframeScale.y;
|
|
x += left;
|
|
y += top;
|
|
currentWin = getWindow(currentIFrame);
|
|
currentIFrame = getFrameElement(currentWin);
|
|
}
|
|
}
|
|
return rectToClientRect({
|
|
width,
|
|
height,
|
|
x,
|
|
y
|
|
});
|
|
}
|
|
function getWindowScrollBarX(element, rect) {
|
|
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
if (!rect) {
|
|
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
}
|
|
return rect.left + leftScroll;
|
|
}
|
|
function getHTMLOffset(documentElement, scroll) {
|
|
const htmlRect = documentElement.getBoundingClientRect();
|
|
const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
|
|
const y = htmlRect.top + scroll.scrollTop;
|
|
return {
|
|
x,
|
|
y
|
|
};
|
|
}
|
|
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
let {
|
|
elements,
|
|
rect,
|
|
offsetParent,
|
|
strategy
|
|
} = _ref;
|
|
const isFixed = strategy === "fixed";
|
|
const documentElement = getDocumentElement(offsetParent);
|
|
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
return rect;
|
|
}
|
|
let scroll = {
|
|
scrollLeft: 0,
|
|
scrollTop: 0
|
|
};
|
|
let scale = createCoords(1);
|
|
const offsets = createCoords(0);
|
|
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
|
|
scroll = getNodeScroll(offsetParent);
|
|
}
|
|
if (isHTMLElement(offsetParent)) {
|
|
const offsetRect = getBoundingClientRect(offsetParent);
|
|
scale = getScale(offsetParent);
|
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
}
|
|
}
|
|
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
return {
|
|
width: rect.width * scale.x,
|
|
height: rect.height * scale.y,
|
|
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
|
|
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
|
|
};
|
|
}
|
|
function getClientRects(element) {
|
|
return Array.from(element.getClientRects());
|
|
}
|
|
function getDocumentRect(element) {
|
|
const html = getDocumentElement(element);
|
|
const scroll = getNodeScroll(element);
|
|
const body = element.ownerDocument.body;
|
|
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
const y = -scroll.scrollTop;
|
|
if (getComputedStyle2(body).direction === "rtl") {
|
|
x += max(html.clientWidth, body.clientWidth) - width;
|
|
}
|
|
return {
|
|
width,
|
|
height,
|
|
x,
|
|
y
|
|
};
|
|
}
|
|
var SCROLLBAR_MAX = 25;
|
|
function getViewportRect(element, strategy) {
|
|
const win = getWindow(element);
|
|
const html = getDocumentElement(element);
|
|
const visualViewport = win.visualViewport;
|
|
let width = html.clientWidth;
|
|
let height = html.clientHeight;
|
|
let x = 0;
|
|
let y = 0;
|
|
if (visualViewport) {
|
|
width = visualViewport.width;
|
|
height = visualViewport.height;
|
|
const visualViewportBased = isWebKit();
|
|
if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
|
|
x = visualViewport.offsetLeft;
|
|
y = visualViewport.offsetTop;
|
|
}
|
|
}
|
|
const windowScrollbarX = getWindowScrollBarX(html);
|
|
if (windowScrollbarX <= 0) {
|
|
const doc = html.ownerDocument;
|
|
const body = doc.body;
|
|
const bodyStyles = getComputedStyle(body);
|
|
const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
|
|
const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
|
|
if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
|
|
width -= clippingStableScrollbarWidth;
|
|
}
|
|
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
|
|
width += windowScrollbarX;
|
|
}
|
|
return {
|
|
width,
|
|
height,
|
|
x,
|
|
y
|
|
};
|
|
}
|
|
var absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
|
|
function getInnerBoundingClientRect(element, strategy) {
|
|
const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
|
|
const top = clientRect.top + element.clientTop;
|
|
const left = clientRect.left + element.clientLeft;
|
|
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
const width = element.clientWidth * scale.x;
|
|
const height = element.clientHeight * scale.y;
|
|
const x = left * scale.x;
|
|
const y = top * scale.y;
|
|
return {
|
|
width,
|
|
height,
|
|
x,
|
|
y
|
|
};
|
|
}
|
|
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
let rect;
|
|
if (clippingAncestor === "viewport") {
|
|
rect = getViewportRect(element, strategy);
|
|
} else if (clippingAncestor === "document") {
|
|
rect = getDocumentRect(getDocumentElement(element));
|
|
} else if (isElement(clippingAncestor)) {
|
|
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
} else {
|
|
const visualOffsets = getVisualOffsets(element);
|
|
rect = {
|
|
x: clippingAncestor.x - visualOffsets.x,
|
|
y: clippingAncestor.y - visualOffsets.y,
|
|
width: clippingAncestor.width,
|
|
height: clippingAncestor.height
|
|
};
|
|
}
|
|
return rectToClientRect(rect);
|
|
}
|
|
function hasFixedPositionAncestor(element, stopNode) {
|
|
const parentNode = getParentNode(element);
|
|
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
return false;
|
|
}
|
|
return getComputedStyle2(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
|
|
}
|
|
function getClippingElementAncestors(element, cache) {
|
|
const cachedResult = cache.get(element);
|
|
if (cachedResult) {
|
|
return cachedResult;
|
|
}
|
|
let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
|
|
let currentContainingBlockComputedStyle = null;
|
|
const elementIsFixed = getComputedStyle2(element).position === "fixed";
|
|
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
const computedStyle = getComputedStyle2(currentNode);
|
|
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
if (!currentNodeIsContaining && computedStyle.position === "fixed") {
|
|
currentContainingBlockComputedStyle = null;
|
|
}
|
|
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
if (shouldDropCurrentNode) {
|
|
result = result.filter((ancestor) => ancestor !== currentNode);
|
|
} else {
|
|
currentContainingBlockComputedStyle = computedStyle;
|
|
}
|
|
currentNode = getParentNode(currentNode);
|
|
}
|
|
cache.set(element, result);
|
|
return result;
|
|
}
|
|
function getClippingRect(_ref) {
|
|
let {
|
|
element,
|
|
boundary,
|
|
rootBoundary,
|
|
strategy
|
|
} = _ref;
|
|
const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
const firstClippingAncestor = clippingAncestors[0];
|
|
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
|
|
accRect.top = max(rect.top, accRect.top);
|
|
accRect.right = min(rect.right, accRect.right);
|
|
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
accRect.left = max(rect.left, accRect.left);
|
|
return accRect;
|
|
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
|
|
return {
|
|
width: clippingRect.right - clippingRect.left,
|
|
height: clippingRect.bottom - clippingRect.top,
|
|
x: clippingRect.left,
|
|
y: clippingRect.top
|
|
};
|
|
}
|
|
function getDimensions(element) {
|
|
const {
|
|
width,
|
|
height
|
|
} = getCssDimensions(element);
|
|
return {
|
|
width,
|
|
height
|
|
};
|
|
}
|
|
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
const documentElement = getDocumentElement(offsetParent);
|
|
const isFixed = strategy === "fixed";
|
|
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
let scroll = {
|
|
scrollLeft: 0,
|
|
scrollTop: 0
|
|
};
|
|
const offsets = createCoords(0);
|
|
function setLeftRTLScrollbarOffset() {
|
|
offsets.x = getWindowScrollBarX(documentElement);
|
|
}
|
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
|
|
scroll = getNodeScroll(offsetParent);
|
|
}
|
|
if (isOffsetParentAnElement) {
|
|
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
} else if (documentElement) {
|
|
setLeftRTLScrollbarOffset();
|
|
}
|
|
}
|
|
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
setLeftRTLScrollbarOffset();
|
|
}
|
|
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
return {
|
|
x,
|
|
y,
|
|
width: rect.width,
|
|
height: rect.height
|
|
};
|
|
}
|
|
function isStaticPositioned(element) {
|
|
return getComputedStyle2(element).position === "static";
|
|
}
|
|
function getTrueOffsetParent(element, polyfill) {
|
|
if (!isHTMLElement(element) || getComputedStyle2(element).position === "fixed") {
|
|
return null;
|
|
}
|
|
if (polyfill) {
|
|
return polyfill(element);
|
|
}
|
|
let rawOffsetParent = element.offsetParent;
|
|
if (getDocumentElement(element) === rawOffsetParent) {
|
|
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
}
|
|
return rawOffsetParent;
|
|
}
|
|
function getOffsetParent(element, polyfill) {
|
|
const win = getWindow(element);
|
|
if (isTopLayer(element)) {
|
|
return win;
|
|
}
|
|
if (!isHTMLElement(element)) {
|
|
let svgOffsetParent = getParentNode(element);
|
|
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
|
|
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
|
|
return svgOffsetParent;
|
|
}
|
|
svgOffsetParent = getParentNode(svgOffsetParent);
|
|
}
|
|
return win;
|
|
}
|
|
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
}
|
|
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
return win;
|
|
}
|
|
return offsetParent || getContainingBlock(element) || win;
|
|
}
|
|
var getElementRects = async function(data) {
|
|
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
const getDimensionsFn = this.getDimensions;
|
|
const floatingDimensions = await getDimensionsFn(data.floating);
|
|
return {
|
|
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
floating: {
|
|
x: 0,
|
|
y: 0,
|
|
width: floatingDimensions.width,
|
|
height: floatingDimensions.height
|
|
}
|
|
};
|
|
};
|
|
function isRTL(element) {
|
|
return getComputedStyle2(element).direction === "rtl";
|
|
}
|
|
var platform = {
|
|
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
getDocumentElement,
|
|
getClippingRect,
|
|
getOffsetParent,
|
|
getElementRects,
|
|
getClientRects,
|
|
getDimensions,
|
|
getScale,
|
|
isElement,
|
|
isRTL
|
|
};
|
|
function rectsAreEqual(a, b) {
|
|
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
}
|
|
function observeMove(element, onMove) {
|
|
let io = null;
|
|
let timeoutId;
|
|
const root = getDocumentElement(element);
|
|
function cleanup() {
|
|
var _io;
|
|
clearTimeout(timeoutId);
|
|
(_io = io) == null || _io.disconnect();
|
|
io = null;
|
|
}
|
|
function refresh(skip, threshold) {
|
|
if (skip === void 0) {
|
|
skip = false;
|
|
}
|
|
if (threshold === void 0) {
|
|
threshold = 1;
|
|
}
|
|
cleanup();
|
|
const elementRectForRootMargin = element.getBoundingClientRect();
|
|
const {
|
|
left,
|
|
top,
|
|
width,
|
|
height
|
|
} = elementRectForRootMargin;
|
|
if (!skip) {
|
|
onMove();
|
|
}
|
|
if (!width || !height) {
|
|
return;
|
|
}
|
|
const insetTop = floor(top);
|
|
const insetRight = floor(root.clientWidth - (left + width));
|
|
const insetBottom = floor(root.clientHeight - (top + height));
|
|
const insetLeft = floor(left);
|
|
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
|
|
const options = {
|
|
rootMargin,
|
|
threshold: max(0, min(1, threshold)) || 1
|
|
};
|
|
let isFirstUpdate = true;
|
|
function handleObserve(entries) {
|
|
const ratio = entries[0].intersectionRatio;
|
|
if (ratio !== threshold) {
|
|
if (!isFirstUpdate) {
|
|
return refresh();
|
|
}
|
|
if (!ratio) {
|
|
timeoutId = setTimeout(() => {
|
|
refresh(false, 1e-7);
|
|
}, 1e3);
|
|
} else {
|
|
refresh(false, ratio);
|
|
}
|
|
}
|
|
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
|
|
refresh();
|
|
}
|
|
isFirstUpdate = false;
|
|
}
|
|
try {
|
|
io = new IntersectionObserver(handleObserve, {
|
|
...options,
|
|
// Handle <iframe>s
|
|
root: root.ownerDocument
|
|
});
|
|
} catch (_e) {
|
|
io = new IntersectionObserver(handleObserve, options);
|
|
}
|
|
io.observe(element);
|
|
}
|
|
refresh(true);
|
|
return cleanup;
|
|
}
|
|
function autoUpdate(reference, floating, update, options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
const {
|
|
ancestorScroll = true,
|
|
ancestorResize = true,
|
|
elementResize = typeof ResizeObserver === "function",
|
|
layoutShift = typeof IntersectionObserver === "function",
|
|
animationFrame = false
|
|
} = options;
|
|
const referenceEl = unwrapElement(reference);
|
|
const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
|
|
ancestors.forEach((ancestor) => {
|
|
ancestorScroll && ancestor.addEventListener("scroll", update, {
|
|
passive: true
|
|
});
|
|
ancestorResize && ancestor.addEventListener("resize", update);
|
|
});
|
|
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
let reobserveFrame = -1;
|
|
let resizeObserver = null;
|
|
if (elementResize) {
|
|
resizeObserver = new ResizeObserver((_ref) => {
|
|
let [firstEntry] = _ref;
|
|
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
|
resizeObserver.unobserve(floating);
|
|
cancelAnimationFrame(reobserveFrame);
|
|
reobserveFrame = requestAnimationFrame(() => {
|
|
var _resizeObserver;
|
|
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
|
|
});
|
|
}
|
|
update();
|
|
});
|
|
if (referenceEl && !animationFrame) {
|
|
resizeObserver.observe(referenceEl);
|
|
}
|
|
resizeObserver.observe(floating);
|
|
}
|
|
let frameId;
|
|
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
if (animationFrame) {
|
|
frameLoop();
|
|
}
|
|
function frameLoop() {
|
|
const nextRefRect = getBoundingClientRect(reference);
|
|
if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
|
|
update();
|
|
}
|
|
prevRefRect = nextRefRect;
|
|
frameId = requestAnimationFrame(frameLoop);
|
|
}
|
|
update();
|
|
return () => {
|
|
var _resizeObserver2;
|
|
ancestors.forEach((ancestor) => {
|
|
ancestorScroll && ancestor.removeEventListener("scroll", update);
|
|
ancestorResize && ancestor.removeEventListener("resize", update);
|
|
});
|
|
cleanupIo == null || cleanupIo();
|
|
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
|
|
resizeObserver = null;
|
|
if (animationFrame) {
|
|
cancelAnimationFrame(frameId);
|
|
}
|
|
};
|
|
}
|
|
var offset2 = offset;
|
|
var shift2 = shift;
|
|
var flip2 = flip;
|
|
var size2 = size;
|
|
var hide2 = hide;
|
|
var arrow2 = arrow;
|
|
var limitShift2 = limitShift;
|
|
var computePosition2 = (reference, floating, options) => {
|
|
const cache = /* @__PURE__ */ new Map();
|
|
const mergedOptions = {
|
|
platform,
|
|
...options
|
|
};
|
|
const platformWithCache = {
|
|
...mergedOptions.platform,
|
|
_c: cache
|
|
};
|
|
return computePosition(reference, floating, {
|
|
...mergedOptions,
|
|
platform: platformWithCache
|
|
});
|
|
};
|
|
|
|
// node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
|
|
var React41 = __toESM(require_react(), 1);
|
|
var import_react7 = __toESM(require_react(), 1);
|
|
var ReactDOM3 = __toESM(require_react_dom(), 1);
|
|
var isClient = typeof document !== "undefined";
|
|
var noop = function noop2() {
|
|
};
|
|
var index = isClient ? import_react7.useLayoutEffect : noop;
|
|
function deepEqual(a, b) {
|
|
if (a === b) {
|
|
return true;
|
|
}
|
|
if (typeof a !== typeof b) {
|
|
return false;
|
|
}
|
|
if (typeof a === "function" && a.toString() === b.toString()) {
|
|
return true;
|
|
}
|
|
let length;
|
|
let i;
|
|
let keys;
|
|
if (a && b && typeof a === "object") {
|
|
if (Array.isArray(a)) {
|
|
length = a.length;
|
|
if (length !== b.length) return false;
|
|
for (i = length; i-- !== 0; ) {
|
|
if (!deepEqual(a[i], b[i])) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
keys = Object.keys(a);
|
|
length = keys.length;
|
|
if (length !== Object.keys(b).length) {
|
|
return false;
|
|
}
|
|
for (i = length; i-- !== 0; ) {
|
|
if (!{}.hasOwnProperty.call(b, keys[i])) {
|
|
return false;
|
|
}
|
|
}
|
|
for (i = length; i-- !== 0; ) {
|
|
const key = keys[i];
|
|
if (key === "_owner" && a.$$typeof) {
|
|
continue;
|
|
}
|
|
if (!deepEqual(a[key], b[key])) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
return a !== a && b !== b;
|
|
}
|
|
function getDPR(element) {
|
|
if (typeof window === "undefined") {
|
|
return 1;
|
|
}
|
|
const win = element.ownerDocument.defaultView || window;
|
|
return win.devicePixelRatio || 1;
|
|
}
|
|
function roundByDPR(element, value) {
|
|
const dpr = getDPR(element);
|
|
return Math.round(value * dpr) / dpr;
|
|
}
|
|
function useLatestRef(value) {
|
|
const ref = React41.useRef(value);
|
|
index(() => {
|
|
ref.current = value;
|
|
});
|
|
return ref;
|
|
}
|
|
function useFloating(options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
const {
|
|
placement = "bottom",
|
|
strategy = "absolute",
|
|
middleware = [],
|
|
platform: platform2,
|
|
elements: {
|
|
reference: externalReference,
|
|
floating: externalFloating
|
|
} = {},
|
|
transform = true,
|
|
whileElementsMounted,
|
|
open
|
|
} = options;
|
|
const [data, setData] = React41.useState({
|
|
x: 0,
|
|
y: 0,
|
|
strategy,
|
|
placement,
|
|
middlewareData: {},
|
|
isPositioned: false
|
|
});
|
|
const [latestMiddleware, setLatestMiddleware] = React41.useState(middleware);
|
|
if (!deepEqual(latestMiddleware, middleware)) {
|
|
setLatestMiddleware(middleware);
|
|
}
|
|
const [_reference, _setReference] = React41.useState(null);
|
|
const [_floating, _setFloating] = React41.useState(null);
|
|
const setReference = React41.useCallback((node) => {
|
|
if (node !== referenceRef.current) {
|
|
referenceRef.current = node;
|
|
_setReference(node);
|
|
}
|
|
}, []);
|
|
const setFloating = React41.useCallback((node) => {
|
|
if (node !== floatingRef.current) {
|
|
floatingRef.current = node;
|
|
_setFloating(node);
|
|
}
|
|
}, []);
|
|
const referenceEl = externalReference || _reference;
|
|
const floatingEl = externalFloating || _floating;
|
|
const referenceRef = React41.useRef(null);
|
|
const floatingRef = React41.useRef(null);
|
|
const dataRef = React41.useRef(data);
|
|
const hasWhileElementsMounted = whileElementsMounted != null;
|
|
const whileElementsMountedRef = useLatestRef(whileElementsMounted);
|
|
const platformRef = useLatestRef(platform2);
|
|
const openRef = useLatestRef(open);
|
|
const update = React41.useCallback(() => {
|
|
if (!referenceRef.current || !floatingRef.current) {
|
|
return;
|
|
}
|
|
const config = {
|
|
placement,
|
|
strategy,
|
|
middleware: latestMiddleware
|
|
};
|
|
if (platformRef.current) {
|
|
config.platform = platformRef.current;
|
|
}
|
|
computePosition2(referenceRef.current, floatingRef.current, config).then((data2) => {
|
|
const fullData = {
|
|
...data2,
|
|
// The floating element's position may be recomputed while it's closed
|
|
// but still mounted (such as when transitioning out). To ensure
|
|
// `isPositioned` will be `false` initially on the next open, avoid
|
|
// setting it to `true` when `open === false` (must be specified).
|
|
isPositioned: openRef.current !== false
|
|
};
|
|
if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
|
|
dataRef.current = fullData;
|
|
ReactDOM3.flushSync(() => {
|
|
setData(fullData);
|
|
});
|
|
}
|
|
});
|
|
}, [latestMiddleware, placement, strategy, platformRef, openRef]);
|
|
index(() => {
|
|
if (open === false && dataRef.current.isPositioned) {
|
|
dataRef.current.isPositioned = false;
|
|
setData((data2) => ({
|
|
...data2,
|
|
isPositioned: false
|
|
}));
|
|
}
|
|
}, [open]);
|
|
const isMountedRef = React41.useRef(false);
|
|
index(() => {
|
|
isMountedRef.current = true;
|
|
return () => {
|
|
isMountedRef.current = false;
|
|
};
|
|
}, []);
|
|
index(() => {
|
|
if (referenceEl) referenceRef.current = referenceEl;
|
|
if (floatingEl) floatingRef.current = floatingEl;
|
|
if (referenceEl && floatingEl) {
|
|
if (whileElementsMountedRef.current) {
|
|
return whileElementsMountedRef.current(referenceEl, floatingEl, update);
|
|
}
|
|
update();
|
|
}
|
|
}, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
|
|
const refs = React41.useMemo(() => ({
|
|
reference: referenceRef,
|
|
floating: floatingRef,
|
|
setReference,
|
|
setFloating
|
|
}), [setReference, setFloating]);
|
|
const elements = React41.useMemo(() => ({
|
|
reference: referenceEl,
|
|
floating: floatingEl
|
|
}), [referenceEl, floatingEl]);
|
|
const floatingStyles = React41.useMemo(() => {
|
|
const initialStyles = {
|
|
position: strategy,
|
|
left: 0,
|
|
top: 0
|
|
};
|
|
if (!elements.floating) {
|
|
return initialStyles;
|
|
}
|
|
const x = roundByDPR(elements.floating, data.x);
|
|
const y = roundByDPR(elements.floating, data.y);
|
|
if (transform) {
|
|
return {
|
|
...initialStyles,
|
|
transform: "translate(" + x + "px, " + y + "px)",
|
|
...getDPR(elements.floating) >= 1.5 && {
|
|
willChange: "transform"
|
|
}
|
|
};
|
|
}
|
|
return {
|
|
position: strategy,
|
|
left: x,
|
|
top: y
|
|
};
|
|
}, [strategy, transform, elements.floating, data.x, data.y]);
|
|
return React41.useMemo(() => ({
|
|
...data,
|
|
update,
|
|
refs,
|
|
elements,
|
|
floatingStyles
|
|
}), [data, update, refs, elements, floatingStyles]);
|
|
}
|
|
var arrow$1 = (options) => {
|
|
function isRef(value) {
|
|
return {}.hasOwnProperty.call(value, "current");
|
|
}
|
|
return {
|
|
name: "arrow",
|
|
options,
|
|
fn(state) {
|
|
const {
|
|
element,
|
|
padding
|
|
} = typeof options === "function" ? options(state) : options;
|
|
if (element && isRef(element)) {
|
|
if (element.current != null) {
|
|
return arrow2({
|
|
element: element.current,
|
|
padding
|
|
}).fn(state);
|
|
}
|
|
return {};
|
|
}
|
|
if (element) {
|
|
return arrow2({
|
|
element,
|
|
padding
|
|
}).fn(state);
|
|
}
|
|
return {};
|
|
}
|
|
};
|
|
};
|
|
var offset3 = (options, deps) => ({
|
|
...offset2(options),
|
|
options: [options, deps]
|
|
});
|
|
var shift3 = (options, deps) => ({
|
|
...shift2(options),
|
|
options: [options, deps]
|
|
});
|
|
var limitShift3 = (options, deps) => ({
|
|
...limitShift2(options),
|
|
options: [options, deps]
|
|
});
|
|
var flip3 = (options, deps) => ({
|
|
...flip2(options),
|
|
options: [options, deps]
|
|
});
|
|
var size3 = (options, deps) => ({
|
|
...size2(options),
|
|
options: [options, deps]
|
|
});
|
|
var hide3 = (options, deps) => ({
|
|
...hide2(options),
|
|
options: [options, deps]
|
|
});
|
|
var arrow3 = (options, deps) => ({
|
|
...arrow$1(options),
|
|
options: [options, deps]
|
|
});
|
|
|
|
// node_modules/@radix-ui/react-arrow/dist/index.mjs
|
|
var React42 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
|
|
var NAME4 = "Arrow";
|
|
var Arrow = React42.forwardRef((props, forwardedRef) => {
|
|
const { children, width = 10, height = 5, ...arrowProps } = props;
|
|
return (0, import_jsx_runtime19.jsx)(
|
|
Primitive.svg,
|
|
{
|
|
...arrowProps,
|
|
ref: forwardedRef,
|
|
width,
|
|
height,
|
|
viewBox: "0 0 30 10",
|
|
preserveAspectRatio: "none",
|
|
children: props.asChild ? children : (0, import_jsx_runtime19.jsx)("polygon", { points: "0,0 30,0 15,10" })
|
|
}
|
|
);
|
|
});
|
|
Arrow.displayName = NAME4;
|
|
var Root9 = Arrow;
|
|
|
|
// node_modules/@radix-ui/react-popper/dist/index.mjs
|
|
var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
|
|
var POPPER_NAME = "Popper";
|
|
var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
|
|
var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
|
|
var Popper = (props) => {
|
|
const { __scopePopper, children } = props;
|
|
const [anchor, setAnchor] = React43.useState(null);
|
|
return (0, import_jsx_runtime20.jsx)(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
|
|
};
|
|
Popper.displayName = POPPER_NAME;
|
|
var ANCHOR_NAME = "PopperAnchor";
|
|
var PopperAnchor = React43.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopePopper, virtualRef, ...anchorProps } = props;
|
|
const context = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
const ref = React43.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const anchorRef = React43.useRef(null);
|
|
React43.useEffect(() => {
|
|
const previousAnchor = anchorRef.current;
|
|
anchorRef.current = virtualRef?.current || ref.current;
|
|
if (previousAnchor !== anchorRef.current) {
|
|
context.onAnchorChange(anchorRef.current);
|
|
}
|
|
});
|
|
return virtualRef ? null : (0, import_jsx_runtime20.jsx)(Primitive.div, { ...anchorProps, ref: composedRefs });
|
|
}
|
|
);
|
|
PopperAnchor.displayName = ANCHOR_NAME;
|
|
var CONTENT_NAME5 = "PopperContent";
|
|
var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME5);
|
|
var PopperContent = React43.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopePopper,
|
|
side = "bottom",
|
|
sideOffset = 0,
|
|
align = "center",
|
|
alignOffset = 0,
|
|
arrowPadding = 0,
|
|
avoidCollisions = true,
|
|
collisionBoundary = [],
|
|
collisionPadding: collisionPaddingProp = 0,
|
|
sticky = "partial",
|
|
hideWhenDetached = false,
|
|
updatePositionStrategy = "optimized",
|
|
onPlaced,
|
|
...contentProps
|
|
} = props;
|
|
const context = usePopperContext(CONTENT_NAME5, __scopePopper);
|
|
const [content, setContent] = React43.useState(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
|
|
const [arrow4, setArrow] = React43.useState(null);
|
|
const arrowSize = useSize(arrow4);
|
|
const arrowWidth = arrowSize?.width ?? 0;
|
|
const arrowHeight = arrowSize?.height ?? 0;
|
|
const desiredPlacement = side + (align !== "center" ? "-" + align : "");
|
|
const collisionPadding = typeof collisionPaddingProp === "number" ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
|
|
const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];
|
|
const hasExplicitBoundaries = boundary.length > 0;
|
|
const detectOverflowOptions = {
|
|
padding: collisionPadding,
|
|
boundary: boundary.filter(isNotNull),
|
|
// with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
|
|
altBoundary: hasExplicitBoundaries
|
|
};
|
|
const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({
|
|
// default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
|
|
strategy: "fixed",
|
|
placement: desiredPlacement,
|
|
whileElementsMounted: (...args) => {
|
|
const cleanup = autoUpdate(...args, {
|
|
animationFrame: updatePositionStrategy === "always"
|
|
});
|
|
return cleanup;
|
|
},
|
|
elements: {
|
|
reference: context.anchor
|
|
},
|
|
middleware: [
|
|
offset3({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
|
|
avoidCollisions && shift3({
|
|
mainAxis: true,
|
|
crossAxis: false,
|
|
limiter: sticky === "partial" ? limitShift3() : void 0,
|
|
...detectOverflowOptions
|
|
}),
|
|
avoidCollisions && flip3({ ...detectOverflowOptions }),
|
|
size3({
|
|
...detectOverflowOptions,
|
|
apply: ({ elements, rects, availableWidth, availableHeight }) => {
|
|
const { width: anchorWidth, height: anchorHeight } = rects.reference;
|
|
const contentStyle = elements.floating.style;
|
|
contentStyle.setProperty("--radix-popper-available-width", `${availableWidth}px`);
|
|
contentStyle.setProperty("--radix-popper-available-height", `${availableHeight}px`);
|
|
contentStyle.setProperty("--radix-popper-anchor-width", `${anchorWidth}px`);
|
|
contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`);
|
|
}
|
|
}),
|
|
arrow4 && arrow3({ element: arrow4, padding: arrowPadding }),
|
|
transformOrigin({ arrowWidth, arrowHeight }),
|
|
hideWhenDetached && hide3({ strategy: "referenceHidden", ...detectOverflowOptions })
|
|
]
|
|
});
|
|
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
|
|
const handlePlaced = useCallbackRef(onPlaced);
|
|
useLayoutEffect2(() => {
|
|
if (isPositioned) {
|
|
handlePlaced?.();
|
|
}
|
|
}, [isPositioned, handlePlaced]);
|
|
const arrowX = middlewareData.arrow?.x;
|
|
const arrowY = middlewareData.arrow?.y;
|
|
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
|
|
const [contentZIndex, setContentZIndex] = React43.useState();
|
|
useLayoutEffect2(() => {
|
|
if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
|
|
}, [content]);
|
|
return (0, import_jsx_runtime20.jsx)(
|
|
"div",
|
|
{
|
|
ref: refs.setFloating,
|
|
"data-radix-popper-content-wrapper": "",
|
|
style: {
|
|
...floatingStyles,
|
|
transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
|
|
// keep off the page when measuring
|
|
minWidth: "max-content",
|
|
zIndex: contentZIndex,
|
|
["--radix-popper-transform-origin"]: [
|
|
middlewareData.transformOrigin?.x,
|
|
middlewareData.transformOrigin?.y
|
|
].join(" "),
|
|
// hide the content if using the hide middleware and should be hidden
|
|
// set visibility to hidden and disable pointer events so the UI behaves
|
|
// as if the PopperContent isn't there at all
|
|
...middlewareData.hide?.referenceHidden && {
|
|
visibility: "hidden",
|
|
pointerEvents: "none"
|
|
}
|
|
},
|
|
dir: props.dir,
|
|
children: (0, import_jsx_runtime20.jsx)(
|
|
PopperContentProvider,
|
|
{
|
|
scope: __scopePopper,
|
|
placedSide,
|
|
onArrowChange: setArrow,
|
|
arrowX,
|
|
arrowY,
|
|
shouldHideArrow: cannotCenterArrow,
|
|
children: (0, import_jsx_runtime20.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-side": placedSide,
|
|
"data-align": placedAlign,
|
|
...contentProps,
|
|
ref: composedRefs,
|
|
style: {
|
|
...contentProps.style,
|
|
// if the PopperContent hasn't been placed yet (not all measurements done)
|
|
// we prevent animations so that users's animation don't kick in too early referring wrong sides
|
|
animation: !isPositioned ? "none" : void 0
|
|
}
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
PopperContent.displayName = CONTENT_NAME5;
|
|
var ARROW_NAME = "PopperArrow";
|
|
var OPPOSITE_SIDE = {
|
|
top: "bottom",
|
|
right: "left",
|
|
bottom: "top",
|
|
left: "right"
|
|
};
|
|
var PopperArrow = React43.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
const { __scopePopper, ...arrowProps } = props;
|
|
const contentContext = useContentContext(ARROW_NAME, __scopePopper);
|
|
const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
|
|
return (
|
|
// we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
|
|
// doesn't report size as we'd expect on SVG elements.
|
|
// it reports their bounding box which is effectively the largest path inside the SVG.
|
|
(0, import_jsx_runtime20.jsx)(
|
|
"span",
|
|
{
|
|
ref: contentContext.onArrowChange,
|
|
style: {
|
|
position: "absolute",
|
|
left: contentContext.arrowX,
|
|
top: contentContext.arrowY,
|
|
[baseSide]: 0,
|
|
transformOrigin: {
|
|
top: "",
|
|
right: "0 0",
|
|
bottom: "center 0",
|
|
left: "100% 0"
|
|
}[contentContext.placedSide],
|
|
transform: {
|
|
top: "translateY(100%)",
|
|
right: "translateY(50%) rotate(90deg) translateX(-50%)",
|
|
bottom: `rotate(180deg)`,
|
|
left: "translateY(50%) rotate(-90deg) translateX(50%)"
|
|
}[contentContext.placedSide],
|
|
visibility: contentContext.shouldHideArrow ? "hidden" : void 0
|
|
},
|
|
children: (0, import_jsx_runtime20.jsx)(
|
|
Root9,
|
|
{
|
|
...arrowProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
...arrowProps.style,
|
|
// ensures the element can be measured correctly (mostly for if SVG)
|
|
display: "block"
|
|
}
|
|
}
|
|
)
|
|
}
|
|
)
|
|
);
|
|
});
|
|
PopperArrow.displayName = ARROW_NAME;
|
|
function isNotNull(value) {
|
|
return value !== null;
|
|
}
|
|
var transformOrigin = (options) => ({
|
|
name: "transformOrigin",
|
|
options,
|
|
fn(data) {
|
|
const { placement, rects, middlewareData } = data;
|
|
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
|
|
const isArrowHidden = cannotCenterArrow;
|
|
const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
|
|
const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
|
|
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
|
|
const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
|
|
const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
|
|
const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
|
|
let x = "";
|
|
let y = "";
|
|
if (placedSide === "bottom") {
|
|
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
|
|
y = `${-arrowHeight}px`;
|
|
} else if (placedSide === "top") {
|
|
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
|
|
y = `${rects.floating.height + arrowHeight}px`;
|
|
} else if (placedSide === "right") {
|
|
x = `${-arrowHeight}px`;
|
|
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
|
|
} else if (placedSide === "left") {
|
|
x = `${rects.floating.width + arrowHeight}px`;
|
|
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
|
|
}
|
|
return { data: { x, y } };
|
|
}
|
|
});
|
|
function getSideAndAlignFromPlacement(placement) {
|
|
const [side, align = "center"] = placement.split("-");
|
|
return [side, align];
|
|
}
|
|
var Root25 = Popper;
|
|
var Anchor = PopperAnchor;
|
|
var Content4 = PopperContent;
|
|
var Arrow2 = PopperArrow;
|
|
|
|
// node_modules/@radix-ui/react-roving-focus/dist/index.mjs
|
|
var React44 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
|
|
var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
|
|
var EVENT_OPTIONS2 = { bubbles: false, cancelable: true };
|
|
var GROUP_NAME = "RovingFocusGroup";
|
|
var [Collection2, useCollection2, createCollectionScope2] = createCollection(GROUP_NAME);
|
|
var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
|
|
GROUP_NAME,
|
|
[createCollectionScope2]
|
|
);
|
|
var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
|
|
var RovingFocusGroup = React44.forwardRef(
|
|
(props, forwardedRef) => {
|
|
return (0, import_jsx_runtime21.jsx)(Collection2.Provider, { scope: props.__scopeRovingFocusGroup, children: (0, import_jsx_runtime21.jsx)(Collection2.Slot, { scope: props.__scopeRovingFocusGroup, children: (0, import_jsx_runtime21.jsx)(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
|
|
}
|
|
);
|
|
RovingFocusGroup.displayName = GROUP_NAME;
|
|
var RovingFocusGroupImpl = React44.forwardRef((props, forwardedRef) => {
|
|
const {
|
|
__scopeRovingFocusGroup,
|
|
orientation,
|
|
loop = false,
|
|
dir,
|
|
currentTabStopId: currentTabStopIdProp,
|
|
defaultCurrentTabStopId,
|
|
onCurrentTabStopIdChange,
|
|
onEntryFocus,
|
|
preventScrollOnEntryFocus = false,
|
|
...groupProps
|
|
} = props;
|
|
const ref = React44.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const direction = useDirection(dir);
|
|
const [currentTabStopId, setCurrentTabStopId] = useControllableState({
|
|
prop: currentTabStopIdProp,
|
|
defaultProp: defaultCurrentTabStopId ?? null,
|
|
onChange: onCurrentTabStopIdChange,
|
|
caller: GROUP_NAME
|
|
});
|
|
const [isTabbingBackOut, setIsTabbingBackOut] = React44.useState(false);
|
|
const handleEntryFocus = useCallbackRef(onEntryFocus);
|
|
const getItems = useCollection2(__scopeRovingFocusGroup);
|
|
const isClickFocusRef = React44.useRef(false);
|
|
const [focusableItemsCount, setFocusableItemsCount] = React44.useState(0);
|
|
React44.useEffect(() => {
|
|
const node = ref.current;
|
|
if (node) {
|
|
node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
|
|
}
|
|
}, [handleEntryFocus]);
|
|
return (0, import_jsx_runtime21.jsx)(
|
|
RovingFocusProvider,
|
|
{
|
|
scope: __scopeRovingFocusGroup,
|
|
orientation,
|
|
dir: direction,
|
|
loop,
|
|
currentTabStopId,
|
|
onItemFocus: React44.useCallback(
|
|
(tabStopId) => setCurrentTabStopId(tabStopId),
|
|
[setCurrentTabStopId]
|
|
),
|
|
onItemShiftTab: React44.useCallback(() => setIsTabbingBackOut(true), []),
|
|
onFocusableItemAdd: React44.useCallback(
|
|
() => setFocusableItemsCount((prevCount) => prevCount + 1),
|
|
[]
|
|
),
|
|
onFocusableItemRemove: React44.useCallback(
|
|
() => setFocusableItemsCount((prevCount) => prevCount - 1),
|
|
[]
|
|
),
|
|
children: (0, import_jsx_runtime21.jsx)(
|
|
Primitive.div,
|
|
{
|
|
tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
|
|
"data-orientation": orientation,
|
|
...groupProps,
|
|
ref: composedRefs,
|
|
style: { outline: "none", ...props.style },
|
|
onMouseDown: composeEventHandlers(props.onMouseDown, () => {
|
|
isClickFocusRef.current = true;
|
|
}),
|
|
onFocus: composeEventHandlers(props.onFocus, (event) => {
|
|
const isKeyboardFocus = !isClickFocusRef.current;
|
|
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS2);
|
|
event.currentTarget.dispatchEvent(entryFocusEvent);
|
|
if (!entryFocusEvent.defaultPrevented) {
|
|
const items = getItems().filter((item) => item.focusable);
|
|
const activeItem = items.find((item) => item.active);
|
|
const currentItem = items.find((item) => item.id === currentTabStopId);
|
|
const candidateItems = [activeItem, currentItem, ...items].filter(
|
|
Boolean
|
|
);
|
|
const candidateNodes = candidateItems.map((item) => item.ref.current);
|
|
focusFirst2(candidateNodes, preventScrollOnEntryFocus);
|
|
}
|
|
}
|
|
isClickFocusRef.current = false;
|
|
}),
|
|
onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
|
|
}
|
|
)
|
|
}
|
|
);
|
|
});
|
|
var ITEM_NAME2 = "RovingFocusGroupItem";
|
|
var RovingFocusGroupItem = React44.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeRovingFocusGroup,
|
|
focusable = true,
|
|
active = false,
|
|
tabStopId,
|
|
children,
|
|
...itemProps
|
|
} = props;
|
|
const autoId = useId();
|
|
const id = tabStopId || autoId;
|
|
const context = useRovingFocusContext(ITEM_NAME2, __scopeRovingFocusGroup);
|
|
const isCurrentTabStop = context.currentTabStopId === id;
|
|
const getItems = useCollection2(__scopeRovingFocusGroup);
|
|
const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
|
|
React44.useEffect(() => {
|
|
if (focusable) {
|
|
onFocusableItemAdd();
|
|
return () => onFocusableItemRemove();
|
|
}
|
|
}, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
|
|
return (0, import_jsx_runtime21.jsx)(
|
|
Collection2.ItemSlot,
|
|
{
|
|
scope: __scopeRovingFocusGroup,
|
|
id,
|
|
focusable,
|
|
active,
|
|
children: (0, import_jsx_runtime21.jsx)(
|
|
Primitive.span,
|
|
{
|
|
tabIndex: isCurrentTabStop ? 0 : -1,
|
|
"data-orientation": context.orientation,
|
|
...itemProps,
|
|
ref: forwardedRef,
|
|
onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
|
|
if (!focusable) event.preventDefault();
|
|
else context.onItemFocus(id);
|
|
}),
|
|
onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id)),
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
if (event.key === "Tab" && event.shiftKey) {
|
|
context.onItemShiftTab();
|
|
return;
|
|
}
|
|
if (event.target !== event.currentTarget) return;
|
|
const focusIntent = getFocusIntent(event, context.orientation, context.dir);
|
|
if (focusIntent !== void 0) {
|
|
if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
|
|
event.preventDefault();
|
|
const items = getItems().filter((item) => item.focusable);
|
|
let candidateNodes = items.map((item) => item.ref.current);
|
|
if (focusIntent === "last") candidateNodes.reverse();
|
|
else if (focusIntent === "prev" || focusIntent === "next") {
|
|
if (focusIntent === "prev") candidateNodes.reverse();
|
|
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
|
|
}
|
|
setTimeout(() => focusFirst2(candidateNodes));
|
|
}
|
|
}),
|
|
children: typeof children === "function" ? children({ isCurrentTabStop, hasTabStop: currentTabStopId != null }) : children
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
RovingFocusGroupItem.displayName = ITEM_NAME2;
|
|
var MAP_KEY_TO_FOCUS_INTENT = {
|
|
ArrowLeft: "prev",
|
|
ArrowUp: "prev",
|
|
ArrowRight: "next",
|
|
ArrowDown: "next",
|
|
PageUp: "first",
|
|
Home: "first",
|
|
PageDown: "last",
|
|
End: "last"
|
|
};
|
|
function getDirectionAwareKey(key, dir) {
|
|
if (dir !== "rtl") return key;
|
|
return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
|
|
}
|
|
function getFocusIntent(event, orientation, dir) {
|
|
const key = getDirectionAwareKey(event.key, dir);
|
|
if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
|
|
if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
|
|
return MAP_KEY_TO_FOCUS_INTENT[key];
|
|
}
|
|
function focusFirst2(candidates, preventScroll = false) {
|
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
for (const candidate of candidates) {
|
|
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
candidate.focus({ preventScroll });
|
|
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
}
|
|
}
|
|
function wrapArray(array, startIndex) {
|
|
return array.map((_, index2) => array[(startIndex + index2) % array.length]);
|
|
}
|
|
var Root10 = RovingFocusGroup;
|
|
var Item2 = RovingFocusGroupItem;
|
|
|
|
// node_modules/@radix-ui/react-menu/dist/index.mjs
|
|
var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
|
|
var SELECTION_KEYS = ["Enter", " "];
|
|
var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
|
|
var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
|
|
var FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
|
|
var SUB_OPEN_KEYS = {
|
|
ltr: [...SELECTION_KEYS, "ArrowRight"],
|
|
rtl: [...SELECTION_KEYS, "ArrowLeft"]
|
|
};
|
|
var SUB_CLOSE_KEYS = {
|
|
ltr: ["ArrowLeft"],
|
|
rtl: ["ArrowRight"]
|
|
};
|
|
var MENU_NAME = "Menu";
|
|
var [Collection3, useCollection3, createCollectionScope3] = createCollection(MENU_NAME);
|
|
var [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, [
|
|
createCollectionScope3,
|
|
createPopperScope,
|
|
createRovingFocusGroupScope
|
|
]);
|
|
var usePopperScope = createPopperScope();
|
|
var useRovingFocusGroupScope = createRovingFocusGroupScope();
|
|
var [MenuProvider, useMenuContext] = createMenuContext(MENU_NAME);
|
|
var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
|
|
var Menu = (props) => {
|
|
const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props;
|
|
const popperScope = usePopperScope(__scopeMenu);
|
|
const [content, setContent] = React45.useState(null);
|
|
const isUsingKeyboardRef = React45.useRef(false);
|
|
const handleOpenChange = useCallbackRef(onOpenChange);
|
|
const direction = useDirection(dir);
|
|
React45.useEffect(() => {
|
|
const handleKeyDown = () => {
|
|
isUsingKeyboardRef.current = true;
|
|
document.addEventListener("pointerdown", handlePointer, { capture: true, once: true });
|
|
document.addEventListener("pointermove", handlePointer, { capture: true, once: true });
|
|
};
|
|
const handlePointer = () => isUsingKeyboardRef.current = false;
|
|
document.addEventListener("keydown", handleKeyDown, { capture: true });
|
|
return () => {
|
|
document.removeEventListener("keydown", handleKeyDown, { capture: true });
|
|
document.removeEventListener("pointerdown", handlePointer, { capture: true });
|
|
document.removeEventListener("pointermove", handlePointer, { capture: true });
|
|
};
|
|
}, []);
|
|
return (0, import_jsx_runtime22.jsx)(Root25, { ...popperScope, children: (0, import_jsx_runtime22.jsx)(
|
|
MenuProvider,
|
|
{
|
|
scope: __scopeMenu,
|
|
open,
|
|
onOpenChange: handleOpenChange,
|
|
content,
|
|
onContentChange: setContent,
|
|
children: (0, import_jsx_runtime22.jsx)(
|
|
MenuRootProvider,
|
|
{
|
|
scope: __scopeMenu,
|
|
onClose: React45.useCallback(() => handleOpenChange(false), [handleOpenChange]),
|
|
isUsingKeyboardRef,
|
|
dir: direction,
|
|
modal,
|
|
children
|
|
}
|
|
)
|
|
}
|
|
) });
|
|
};
|
|
Menu.displayName = MENU_NAME;
|
|
var ANCHOR_NAME2 = "MenuAnchor";
|
|
var MenuAnchor = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenu, ...anchorProps } = props;
|
|
const popperScope = usePopperScope(__scopeMenu);
|
|
return (0, import_jsx_runtime22.jsx)(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
MenuAnchor.displayName = ANCHOR_NAME2;
|
|
var PORTAL_NAME4 = "MenuPortal";
|
|
var [PortalProvider2, usePortalContext2] = createMenuContext(PORTAL_NAME4, {
|
|
forceMount: void 0
|
|
});
|
|
var MenuPortal = (props) => {
|
|
const { __scopeMenu, forceMount, children, container } = props;
|
|
const context = useMenuContext(PORTAL_NAME4, __scopeMenu);
|
|
return (0, import_jsx_runtime22.jsx)(PortalProvider2, { scope: __scopeMenu, forceMount, children: (0, import_jsx_runtime22.jsx)(Presence, { present: forceMount || context.open, children: (0, import_jsx_runtime22.jsx)(Portal, { asChild: true, container, children }) }) });
|
|
};
|
|
MenuPortal.displayName = PORTAL_NAME4;
|
|
var CONTENT_NAME6 = "MenuContent";
|
|
var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME6);
|
|
var MenuContent = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const portalContext = usePortalContext2(CONTENT_NAME6, props.__scopeMenu);
|
|
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
const context = useMenuContext(CONTENT_NAME6, props.__scopeMenu);
|
|
const rootContext = useMenuRootContext(CONTENT_NAME6, props.__scopeMenu);
|
|
return (0, import_jsx_runtime22.jsx)(Collection3.Provider, { scope: props.__scopeMenu, children: (0, import_jsx_runtime22.jsx)(Presence, { present: forceMount || context.open, children: (0, import_jsx_runtime22.jsx)(Collection3.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? (0, import_jsx_runtime22.jsx)(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : (0, import_jsx_runtime22.jsx)(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
|
|
}
|
|
);
|
|
var MenuRootContentModal = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const context = useMenuContext(CONTENT_NAME6, props.__scopeMenu);
|
|
const ref = React45.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
React45.useEffect(() => {
|
|
const content = ref.current;
|
|
if (content) return hideOthers(content);
|
|
}, []);
|
|
return (0, import_jsx_runtime22.jsx)(
|
|
MenuContentImpl,
|
|
{
|
|
...props,
|
|
ref: composedRefs,
|
|
trapFocus: context.open,
|
|
disableOutsidePointerEvents: context.open,
|
|
disableOutsideScroll: true,
|
|
onFocusOutside: composeEventHandlers(
|
|
props.onFocusOutside,
|
|
(event) => event.preventDefault(),
|
|
{ checkForDefaultPrevented: false }
|
|
),
|
|
onDismiss: () => context.onOpenChange(false)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var MenuRootContentNonModal = React45.forwardRef((props, forwardedRef) => {
|
|
const context = useMenuContext(CONTENT_NAME6, props.__scopeMenu);
|
|
return (0, import_jsx_runtime22.jsx)(
|
|
MenuContentImpl,
|
|
{
|
|
...props,
|
|
ref: forwardedRef,
|
|
trapFocus: false,
|
|
disableOutsidePointerEvents: false,
|
|
disableOutsideScroll: false,
|
|
onDismiss: () => context.onOpenChange(false)
|
|
}
|
|
);
|
|
});
|
|
var Slot3 = createSlot("MenuContent.ScrollLock");
|
|
var MenuContentImpl = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeMenu,
|
|
loop = false,
|
|
trapFocus,
|
|
onOpenAutoFocus,
|
|
onCloseAutoFocus,
|
|
disableOutsidePointerEvents,
|
|
onEntryFocus,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside,
|
|
onInteractOutside,
|
|
onDismiss,
|
|
disableOutsideScroll,
|
|
...contentProps
|
|
} = props;
|
|
const context = useMenuContext(CONTENT_NAME6, __scopeMenu);
|
|
const rootContext = useMenuRootContext(CONTENT_NAME6, __scopeMenu);
|
|
const popperScope = usePopperScope(__scopeMenu);
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
|
|
const getItems = useCollection3(__scopeMenu);
|
|
const [currentItemId, setCurrentItemId] = React45.useState(null);
|
|
const contentRef = React45.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, contentRef, context.onContentChange);
|
|
const timerRef = React45.useRef(0);
|
|
const searchRef = React45.useRef("");
|
|
const pointerGraceTimerRef = React45.useRef(0);
|
|
const pointerGraceIntentRef = React45.useRef(null);
|
|
const pointerDirRef = React45.useRef("right");
|
|
const lastPointerXRef = React45.useRef(0);
|
|
const ScrollLockWrapper = disableOutsideScroll ? Combination_default : React45.Fragment;
|
|
const scrollLockWrapperProps = disableOutsideScroll ? { as: Slot3, allowPinchZoom: true } : void 0;
|
|
const handleTypeaheadSearch = (key) => {
|
|
const search = searchRef.current + key;
|
|
const items = getItems().filter((item) => !item.disabled);
|
|
const currentItem = document.activeElement;
|
|
const currentMatch = items.find((item) => item.ref.current === currentItem)?.textValue;
|
|
const values = items.map((item) => item.textValue);
|
|
const nextMatch = getNextMatch(values, search, currentMatch);
|
|
const newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;
|
|
(function updateSearch(value) {
|
|
searchRef.current = value;
|
|
window.clearTimeout(timerRef.current);
|
|
if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
|
|
})(search);
|
|
if (newItem) {
|
|
setTimeout(() => newItem.focus());
|
|
}
|
|
};
|
|
React45.useEffect(() => {
|
|
return () => window.clearTimeout(timerRef.current);
|
|
}, []);
|
|
useFocusGuards();
|
|
const isPointerMovingToSubmenu = React45.useCallback((event) => {
|
|
const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
|
|
return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
|
|
}, []);
|
|
return (0, import_jsx_runtime22.jsx)(
|
|
MenuContentProvider,
|
|
{
|
|
scope: __scopeMenu,
|
|
searchRef,
|
|
onItemEnter: React45.useCallback(
|
|
(event) => {
|
|
if (isPointerMovingToSubmenu(event)) event.preventDefault();
|
|
},
|
|
[isPointerMovingToSubmenu]
|
|
),
|
|
onItemLeave: React45.useCallback(
|
|
(event) => {
|
|
if (isPointerMovingToSubmenu(event)) return;
|
|
contentRef.current?.focus();
|
|
setCurrentItemId(null);
|
|
},
|
|
[isPointerMovingToSubmenu]
|
|
),
|
|
onTriggerLeave: React45.useCallback(
|
|
(event) => {
|
|
if (isPointerMovingToSubmenu(event)) event.preventDefault();
|
|
},
|
|
[isPointerMovingToSubmenu]
|
|
),
|
|
pointerGraceTimerRef,
|
|
onPointerGraceIntentChange: React45.useCallback((intent) => {
|
|
pointerGraceIntentRef.current = intent;
|
|
}, []),
|
|
children: (0, import_jsx_runtime22.jsx)(ScrollLockWrapper, { ...scrollLockWrapperProps, children: (0, import_jsx_runtime22.jsx)(
|
|
FocusScope,
|
|
{
|
|
asChild: true,
|
|
trapped: trapFocus,
|
|
onMountAutoFocus: composeEventHandlers(onOpenAutoFocus, (event) => {
|
|
event.preventDefault();
|
|
contentRef.current?.focus({ preventScroll: true });
|
|
}),
|
|
onUnmountAutoFocus: onCloseAutoFocus,
|
|
children: (0, import_jsx_runtime22.jsx)(
|
|
DismissableLayer,
|
|
{
|
|
asChild: true,
|
|
disableOutsidePointerEvents,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside,
|
|
onInteractOutside,
|
|
onDismiss,
|
|
children: (0, import_jsx_runtime22.jsx)(
|
|
Root10,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
dir: rootContext.dir,
|
|
orientation: "vertical",
|
|
loop,
|
|
currentTabStopId: currentItemId,
|
|
onCurrentTabStopIdChange: setCurrentItemId,
|
|
onEntryFocus: composeEventHandlers(onEntryFocus, (event) => {
|
|
if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
|
|
}),
|
|
preventScrollOnEntryFocus: true,
|
|
children: (0, import_jsx_runtime22.jsx)(
|
|
Content4,
|
|
{
|
|
role: "menu",
|
|
"aria-orientation": "vertical",
|
|
"data-state": getOpenState(context.open),
|
|
"data-radix-menu-content": "",
|
|
dir: rootContext.dir,
|
|
...popperScope,
|
|
...contentProps,
|
|
ref: composedRefs,
|
|
style: { outline: "none", ...contentProps.style },
|
|
onKeyDown: composeEventHandlers(contentProps.onKeyDown, (event) => {
|
|
const target = event.target;
|
|
const isKeyDownInside = target.closest("[data-radix-menu-content]") === event.currentTarget;
|
|
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
|
|
const isCharacterKey = event.key.length === 1;
|
|
if (isKeyDownInside) {
|
|
if (event.key === "Tab") event.preventDefault();
|
|
if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
|
|
}
|
|
const content = contentRef.current;
|
|
if (event.target !== content) return;
|
|
if (!FIRST_LAST_KEYS.includes(event.key)) return;
|
|
event.preventDefault();
|
|
const items = getItems().filter((item) => !item.disabled);
|
|
const candidateNodes = items.map((item) => item.ref.current);
|
|
if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
|
|
focusFirst3(candidateNodes);
|
|
}),
|
|
onBlur: composeEventHandlers(props.onBlur, (event) => {
|
|
if (!event.currentTarget.contains(event.target)) {
|
|
window.clearTimeout(timerRef.current);
|
|
searchRef.current = "";
|
|
}
|
|
}),
|
|
onPointerMove: composeEventHandlers(
|
|
props.onPointerMove,
|
|
whenMouse((event) => {
|
|
const target = event.target;
|
|
const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
|
|
if (event.currentTarget.contains(target) && pointerXHasChanged) {
|
|
const newDir = event.clientX > lastPointerXRef.current ? "right" : "left";
|
|
pointerDirRef.current = newDir;
|
|
lastPointerXRef.current = event.clientX;
|
|
}
|
|
})
|
|
)
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
) })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
MenuContent.displayName = CONTENT_NAME6;
|
|
var GROUP_NAME2 = "MenuGroup";
|
|
var MenuGroup = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenu, ...groupProps } = props;
|
|
return (0, import_jsx_runtime22.jsx)(Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
MenuGroup.displayName = GROUP_NAME2;
|
|
var LABEL_NAME = "MenuLabel";
|
|
var MenuLabel = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenu, ...labelProps } = props;
|
|
return (0, import_jsx_runtime22.jsx)(Primitive.div, { ...labelProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
MenuLabel.displayName = LABEL_NAME;
|
|
var ITEM_NAME3 = "MenuItem";
|
|
var ITEM_SELECT = "menu.itemSelect";
|
|
var MenuItem = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { disabled = false, onSelect, ...itemProps } = props;
|
|
const ref = React45.useRef(null);
|
|
const rootContext = useMenuRootContext(ITEM_NAME3, props.__scopeMenu);
|
|
const contentContext = useMenuContentContext(ITEM_NAME3, props.__scopeMenu);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const isPointerDownRef = React45.useRef(false);
|
|
const handleSelect = () => {
|
|
const menuItem = ref.current;
|
|
if (!disabled && menuItem) {
|
|
const itemSelectEvent = new CustomEvent(ITEM_SELECT, { bubbles: true, cancelable: true });
|
|
menuItem.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), { once: true });
|
|
dispatchDiscreteCustomEvent(menuItem, itemSelectEvent);
|
|
if (itemSelectEvent.defaultPrevented) {
|
|
isPointerDownRef.current = false;
|
|
} else {
|
|
rootContext.onClose();
|
|
}
|
|
}
|
|
};
|
|
return (0, import_jsx_runtime22.jsx)(
|
|
MenuItemImpl,
|
|
{
|
|
...itemProps,
|
|
ref: composedRefs,
|
|
disabled,
|
|
onClick: composeEventHandlers(props.onClick, handleSelect),
|
|
onPointerDown: (event) => {
|
|
props.onPointerDown?.(event);
|
|
isPointerDownRef.current = true;
|
|
},
|
|
onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
|
|
if (!isPointerDownRef.current) event.currentTarget?.click();
|
|
}),
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
const isTypingAhead = contentContext.searchRef.current !== "";
|
|
if (disabled || isTypingAhead && event.key === " ") return;
|
|
if (SELECTION_KEYS.includes(event.key)) {
|
|
event.currentTarget.click();
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
}
|
|
);
|
|
}
|
|
);
|
|
MenuItem.displayName = ITEM_NAME3;
|
|
var MenuItemImpl = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenu, disabled = false, textValue, ...itemProps } = props;
|
|
const contentContext = useMenuContentContext(ITEM_NAME3, __scopeMenu);
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
|
|
const ref = React45.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const [isFocused, setIsFocused] = React45.useState(false);
|
|
const [textContent, setTextContent] = React45.useState("");
|
|
React45.useEffect(() => {
|
|
const menuItem = ref.current;
|
|
if (menuItem) {
|
|
setTextContent((menuItem.textContent ?? "").trim());
|
|
}
|
|
}, [itemProps.children]);
|
|
return (0, import_jsx_runtime22.jsx)(
|
|
Collection3.ItemSlot,
|
|
{
|
|
scope: __scopeMenu,
|
|
disabled,
|
|
textValue: textValue ?? textContent,
|
|
children: (0, import_jsx_runtime22.jsx)(Item2, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: (0, import_jsx_runtime22.jsx)(
|
|
Primitive.div,
|
|
{
|
|
role: "menuitem",
|
|
"data-highlighted": isFocused ? "" : void 0,
|
|
"aria-disabled": disabled || void 0,
|
|
"data-disabled": disabled ? "" : void 0,
|
|
...itemProps,
|
|
ref: composedRefs,
|
|
onPointerMove: composeEventHandlers(
|
|
props.onPointerMove,
|
|
whenMouse((event) => {
|
|
if (disabled) {
|
|
contentContext.onItemLeave(event);
|
|
} else {
|
|
contentContext.onItemEnter(event);
|
|
if (!event.defaultPrevented) {
|
|
const item = event.currentTarget;
|
|
item.focus({ preventScroll: true });
|
|
}
|
|
}
|
|
})
|
|
),
|
|
onPointerLeave: composeEventHandlers(
|
|
props.onPointerLeave,
|
|
whenMouse((event) => contentContext.onItemLeave(event))
|
|
),
|
|
onFocus: composeEventHandlers(props.onFocus, () => setIsFocused(true)),
|
|
onBlur: composeEventHandlers(props.onBlur, () => setIsFocused(false))
|
|
}
|
|
) })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var CHECKBOX_ITEM_NAME = "MenuCheckboxItem";
|
|
var MenuCheckboxItem = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
|
|
return (0, import_jsx_runtime22.jsx)(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: (0, import_jsx_runtime22.jsx)(
|
|
MenuItem,
|
|
{
|
|
role: "menuitemcheckbox",
|
|
"aria-checked": isIndeterminate2(checked) ? "mixed" : checked,
|
|
...checkboxItemProps,
|
|
ref: forwardedRef,
|
|
"data-state": getCheckedState(checked),
|
|
onSelect: composeEventHandlers(
|
|
checkboxItemProps.onSelect,
|
|
() => onCheckedChange?.(isIndeterminate2(checked) ? true : !checked),
|
|
{ checkForDefaultPrevented: false }
|
|
)
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
|
|
var RADIO_GROUP_NAME = "MenuRadioGroup";
|
|
var [RadioGroupProvider, useRadioGroupContext] = createMenuContext(
|
|
RADIO_GROUP_NAME,
|
|
{ value: void 0, onValueChange: () => {
|
|
} }
|
|
);
|
|
var MenuRadioGroup = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { value, onValueChange, ...groupProps } = props;
|
|
const handleValueChange = useCallbackRef(onValueChange);
|
|
return (0, import_jsx_runtime22.jsx)(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: (0, import_jsx_runtime22.jsx)(MenuGroup, { ...groupProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
MenuRadioGroup.displayName = RADIO_GROUP_NAME;
|
|
var RADIO_ITEM_NAME = "MenuRadioItem";
|
|
var MenuRadioItem = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { value, ...radioItemProps } = props;
|
|
const context = useRadioGroupContext(RADIO_ITEM_NAME, props.__scopeMenu);
|
|
const checked = value === context.value;
|
|
return (0, import_jsx_runtime22.jsx)(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: (0, import_jsx_runtime22.jsx)(
|
|
MenuItem,
|
|
{
|
|
role: "menuitemradio",
|
|
"aria-checked": checked,
|
|
...radioItemProps,
|
|
ref: forwardedRef,
|
|
"data-state": getCheckedState(checked),
|
|
onSelect: composeEventHandlers(
|
|
radioItemProps.onSelect,
|
|
() => context.onValueChange?.(value),
|
|
{ checkForDefaultPrevented: false }
|
|
)
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
MenuRadioItem.displayName = RADIO_ITEM_NAME;
|
|
var ITEM_INDICATOR_NAME = "MenuItemIndicator";
|
|
var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(
|
|
ITEM_INDICATOR_NAME,
|
|
{ checked: false }
|
|
);
|
|
var MenuItemIndicator = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;
|
|
const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);
|
|
return (0, import_jsx_runtime22.jsx)(
|
|
Presence,
|
|
{
|
|
present: forceMount || isIndeterminate2(indicatorContext.checked) || indicatorContext.checked === true,
|
|
children: (0, import_jsx_runtime22.jsx)(
|
|
Primitive.span,
|
|
{
|
|
...itemIndicatorProps,
|
|
ref: forwardedRef,
|
|
"data-state": getCheckedState(indicatorContext.checked)
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
|
|
var SEPARATOR_NAME = "MenuSeparator";
|
|
var MenuSeparator = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenu, ...separatorProps } = props;
|
|
return (0, import_jsx_runtime22.jsx)(
|
|
Primitive.div,
|
|
{
|
|
role: "separator",
|
|
"aria-orientation": "horizontal",
|
|
...separatorProps,
|
|
ref: forwardedRef
|
|
}
|
|
);
|
|
}
|
|
);
|
|
MenuSeparator.displayName = SEPARATOR_NAME;
|
|
var ARROW_NAME2 = "MenuArrow";
|
|
var MenuArrow = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenu, ...arrowProps } = props;
|
|
const popperScope = usePopperScope(__scopeMenu);
|
|
return (0, import_jsx_runtime22.jsx)(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
MenuArrow.displayName = ARROW_NAME2;
|
|
var SUB_NAME = "MenuSub";
|
|
var [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME);
|
|
var MenuSub = (props) => {
|
|
const { __scopeMenu, children, open = false, onOpenChange } = props;
|
|
const parentMenuContext = useMenuContext(SUB_NAME, __scopeMenu);
|
|
const popperScope = usePopperScope(__scopeMenu);
|
|
const [trigger, setTrigger] = React45.useState(null);
|
|
const [content, setContent] = React45.useState(null);
|
|
const handleOpenChange = useCallbackRef(onOpenChange);
|
|
React45.useEffect(() => {
|
|
if (parentMenuContext.open === false) handleOpenChange(false);
|
|
return () => handleOpenChange(false);
|
|
}, [parentMenuContext.open, handleOpenChange]);
|
|
return (0, import_jsx_runtime22.jsx)(Root25, { ...popperScope, children: (0, import_jsx_runtime22.jsx)(
|
|
MenuProvider,
|
|
{
|
|
scope: __scopeMenu,
|
|
open,
|
|
onOpenChange: handleOpenChange,
|
|
content,
|
|
onContentChange: setContent,
|
|
children: (0, import_jsx_runtime22.jsx)(
|
|
MenuSubProvider,
|
|
{
|
|
scope: __scopeMenu,
|
|
contentId: useId(),
|
|
triggerId: useId(),
|
|
trigger,
|
|
onTriggerChange: setTrigger,
|
|
children
|
|
}
|
|
)
|
|
}
|
|
) });
|
|
};
|
|
MenuSub.displayName = SUB_NAME;
|
|
var SUB_TRIGGER_NAME = "MenuSubTrigger";
|
|
var MenuSubTrigger = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const context = useMenuContext(SUB_TRIGGER_NAME, props.__scopeMenu);
|
|
const rootContext = useMenuRootContext(SUB_TRIGGER_NAME, props.__scopeMenu);
|
|
const subContext = useMenuSubContext(SUB_TRIGGER_NAME, props.__scopeMenu);
|
|
const contentContext = useMenuContentContext(SUB_TRIGGER_NAME, props.__scopeMenu);
|
|
const openTimerRef = React45.useRef(null);
|
|
const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
|
|
const scope = { __scopeMenu: props.__scopeMenu };
|
|
const clearOpenTimer = React45.useCallback(() => {
|
|
if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
|
|
openTimerRef.current = null;
|
|
}, []);
|
|
React45.useEffect(() => clearOpenTimer, [clearOpenTimer]);
|
|
React45.useEffect(() => {
|
|
const pointerGraceTimer = pointerGraceTimerRef.current;
|
|
return () => {
|
|
window.clearTimeout(pointerGraceTimer);
|
|
onPointerGraceIntentChange(null);
|
|
};
|
|
}, [pointerGraceTimerRef, onPointerGraceIntentChange]);
|
|
return (0, import_jsx_runtime22.jsx)(MenuAnchor, { asChild: true, ...scope, children: (0, import_jsx_runtime22.jsx)(
|
|
MenuItemImpl,
|
|
{
|
|
id: subContext.triggerId,
|
|
"aria-haspopup": "menu",
|
|
"aria-expanded": context.open,
|
|
"aria-controls": subContext.contentId,
|
|
"data-state": getOpenState(context.open),
|
|
...props,
|
|
ref: composeRefs(forwardedRef, subContext.onTriggerChange),
|
|
onClick: (event) => {
|
|
props.onClick?.(event);
|
|
if (props.disabled || event.defaultPrevented) return;
|
|
event.currentTarget.focus();
|
|
if (!context.open) context.onOpenChange(true);
|
|
},
|
|
onPointerMove: composeEventHandlers(
|
|
props.onPointerMove,
|
|
whenMouse((event) => {
|
|
contentContext.onItemEnter(event);
|
|
if (event.defaultPrevented) return;
|
|
if (!props.disabled && !context.open && !openTimerRef.current) {
|
|
contentContext.onPointerGraceIntentChange(null);
|
|
openTimerRef.current = window.setTimeout(() => {
|
|
context.onOpenChange(true);
|
|
clearOpenTimer();
|
|
}, 100);
|
|
}
|
|
})
|
|
),
|
|
onPointerLeave: composeEventHandlers(
|
|
props.onPointerLeave,
|
|
whenMouse((event) => {
|
|
clearOpenTimer();
|
|
const contentRect = context.content?.getBoundingClientRect();
|
|
if (contentRect) {
|
|
const side = context.content?.dataset.side;
|
|
const rightSide = side === "right";
|
|
const bleed = rightSide ? -5 : 5;
|
|
const contentNearEdge = contentRect[rightSide ? "left" : "right"];
|
|
const contentFarEdge = contentRect[rightSide ? "right" : "left"];
|
|
contentContext.onPointerGraceIntentChange({
|
|
area: [
|
|
// Apply a bleed on clientX to ensure that our exit point is
|
|
// consistently within polygon bounds
|
|
{ x: event.clientX + bleed, y: event.clientY },
|
|
{ x: contentNearEdge, y: contentRect.top },
|
|
{ x: contentFarEdge, y: contentRect.top },
|
|
{ x: contentFarEdge, y: contentRect.bottom },
|
|
{ x: contentNearEdge, y: contentRect.bottom }
|
|
],
|
|
side
|
|
});
|
|
window.clearTimeout(pointerGraceTimerRef.current);
|
|
pointerGraceTimerRef.current = window.setTimeout(
|
|
() => contentContext.onPointerGraceIntentChange(null),
|
|
300
|
|
);
|
|
} else {
|
|
contentContext.onTriggerLeave(event);
|
|
if (event.defaultPrevented) return;
|
|
contentContext.onPointerGraceIntentChange(null);
|
|
}
|
|
})
|
|
),
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
const isTypingAhead = contentContext.searchRef.current !== "";
|
|
if (props.disabled || isTypingAhead && event.key === " ") return;
|
|
if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
|
|
context.onOpenChange(true);
|
|
context.content?.focus();
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
|
|
var SUB_CONTENT_NAME = "MenuSubContent";
|
|
var MenuSubContent = React45.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const portalContext = usePortalContext2(CONTENT_NAME6, props.__scopeMenu);
|
|
const { forceMount = portalContext.forceMount, ...subContentProps } = props;
|
|
const context = useMenuContext(CONTENT_NAME6, props.__scopeMenu);
|
|
const rootContext = useMenuRootContext(CONTENT_NAME6, props.__scopeMenu);
|
|
const subContext = useMenuSubContext(SUB_CONTENT_NAME, props.__scopeMenu);
|
|
const ref = React45.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
return (0, import_jsx_runtime22.jsx)(Collection3.Provider, { scope: props.__scopeMenu, children: (0, import_jsx_runtime22.jsx)(Presence, { present: forceMount || context.open, children: (0, import_jsx_runtime22.jsx)(Collection3.Slot, { scope: props.__scopeMenu, children: (0, import_jsx_runtime22.jsx)(
|
|
MenuContentImpl,
|
|
{
|
|
id: subContext.contentId,
|
|
"aria-labelledby": subContext.triggerId,
|
|
...subContentProps,
|
|
ref: composedRefs,
|
|
align: "start",
|
|
side: rootContext.dir === "rtl" ? "left" : "right",
|
|
disableOutsidePointerEvents: false,
|
|
disableOutsideScroll: false,
|
|
trapFocus: false,
|
|
onOpenAutoFocus: (event) => {
|
|
if (rootContext.isUsingKeyboardRef.current) ref.current?.focus();
|
|
event.preventDefault();
|
|
},
|
|
onCloseAutoFocus: (event) => event.preventDefault(),
|
|
onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
|
|
if (event.target !== subContext.trigger) context.onOpenChange(false);
|
|
}),
|
|
onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, (event) => {
|
|
rootContext.onClose();
|
|
event.preventDefault();
|
|
}),
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
const isKeyDownInside = event.currentTarget.contains(event.target);
|
|
const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
|
|
if (isKeyDownInside && isCloseKey) {
|
|
context.onOpenChange(false);
|
|
subContext.trigger?.focus();
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
}
|
|
) }) }) });
|
|
}
|
|
);
|
|
MenuSubContent.displayName = SUB_CONTENT_NAME;
|
|
function getOpenState(open) {
|
|
return open ? "open" : "closed";
|
|
}
|
|
function isIndeterminate2(checked) {
|
|
return checked === "indeterminate";
|
|
}
|
|
function getCheckedState(checked) {
|
|
return isIndeterminate2(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
|
|
}
|
|
function focusFirst3(candidates) {
|
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
for (const candidate of candidates) {
|
|
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
candidate.focus();
|
|
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
}
|
|
}
|
|
function wrapArray2(array, startIndex) {
|
|
return array.map((_, index2) => array[(startIndex + index2) % array.length]);
|
|
}
|
|
function getNextMatch(values, search, currentMatch) {
|
|
const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
|
|
const normalizedSearch = isRepeated ? search[0] : search;
|
|
const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
|
|
let wrappedValues = wrapArray2(values, Math.max(currentMatchIndex, 0));
|
|
const excludeCurrentMatch = normalizedSearch.length === 1;
|
|
if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
|
|
const nextMatch = wrappedValues.find(
|
|
(value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
|
|
);
|
|
return nextMatch !== currentMatch ? nextMatch : void 0;
|
|
}
|
|
function isPointInPolygon(point, polygon) {
|
|
const { x, y } = point;
|
|
let inside = false;
|
|
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
|
const ii = polygon[i];
|
|
const jj = polygon[j];
|
|
const xi = ii.x;
|
|
const yi = ii.y;
|
|
const xj = jj.x;
|
|
const yj = jj.y;
|
|
const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
|
|
if (intersect) inside = !inside;
|
|
}
|
|
return inside;
|
|
}
|
|
function isPointerInGraceArea(event, area) {
|
|
if (!area) return false;
|
|
const cursorPos = { x: event.clientX, y: event.clientY };
|
|
return isPointInPolygon(cursorPos, area);
|
|
}
|
|
function whenMouse(handler) {
|
|
return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
|
|
}
|
|
var Root32 = Menu;
|
|
var Anchor2 = MenuAnchor;
|
|
var Portal3 = MenuPortal;
|
|
var Content23 = MenuContent;
|
|
var Group = MenuGroup;
|
|
var Label = MenuLabel;
|
|
var Item22 = MenuItem;
|
|
var CheckboxItem = MenuCheckboxItem;
|
|
var RadioGroup = MenuRadioGroup;
|
|
var RadioItem = MenuRadioItem;
|
|
var ItemIndicator = MenuItemIndicator;
|
|
var Separator = MenuSeparator;
|
|
var Arrow22 = MenuArrow;
|
|
var Sub = MenuSub;
|
|
var SubTrigger = MenuSubTrigger;
|
|
var SubContent = MenuSubContent;
|
|
|
|
// node_modules/@radix-ui/react-context-menu/dist/index.mjs
|
|
var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
|
|
var CONTEXT_MENU_NAME = "ContextMenu";
|
|
var [createContextMenuContext, createContextMenuScope] = createContextScope(CONTEXT_MENU_NAME, [
|
|
createMenuScope
|
|
]);
|
|
var useMenuScope = createMenuScope();
|
|
var [ContextMenuProvider, useContextMenuContext] = createContextMenuContext(CONTEXT_MENU_NAME);
|
|
var ContextMenu = (props) => {
|
|
const { __scopeContextMenu, children, onOpenChange, dir, modal = true } = props;
|
|
const [open, setOpen] = React46.useState(false);
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
const handleOpenChangeProp = useCallbackRef(onOpenChange);
|
|
const handleOpenChange = React46.useCallback(
|
|
(open2) => {
|
|
setOpen(open2);
|
|
handleOpenChangeProp(open2);
|
|
},
|
|
[handleOpenChangeProp]
|
|
);
|
|
return (0, import_jsx_runtime23.jsx)(
|
|
ContextMenuProvider,
|
|
{
|
|
scope: __scopeContextMenu,
|
|
open,
|
|
onOpenChange: handleOpenChange,
|
|
modal,
|
|
children: (0, import_jsx_runtime23.jsx)(
|
|
Root32,
|
|
{
|
|
...menuScope,
|
|
dir,
|
|
open,
|
|
onOpenChange: handleOpenChange,
|
|
modal,
|
|
children
|
|
}
|
|
)
|
|
}
|
|
);
|
|
};
|
|
ContextMenu.displayName = CONTEXT_MENU_NAME;
|
|
var TRIGGER_NAME6 = "ContextMenuTrigger";
|
|
var ContextMenuTrigger = React46.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeContextMenu, disabled = false, ...triggerProps } = props;
|
|
const context = useContextMenuContext(TRIGGER_NAME6, __scopeContextMenu);
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
const pointRef = React46.useRef({ x: 0, y: 0 });
|
|
const virtualRef = React46.useRef({
|
|
getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...pointRef.current })
|
|
});
|
|
const longPressTimerRef = React46.useRef(0);
|
|
const clearLongPress = React46.useCallback(
|
|
() => window.clearTimeout(longPressTimerRef.current),
|
|
[]
|
|
);
|
|
const handleOpen = (event) => {
|
|
pointRef.current = { x: event.clientX, y: event.clientY };
|
|
context.onOpenChange(true);
|
|
};
|
|
React46.useEffect(() => clearLongPress, [clearLongPress]);
|
|
React46.useEffect(() => void (disabled && clearLongPress()), [disabled, clearLongPress]);
|
|
return (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
(0, import_jsx_runtime23.jsx)(Anchor2, { ...menuScope, virtualRef }),
|
|
(0, import_jsx_runtime23.jsx)(
|
|
Primitive.span,
|
|
{
|
|
"data-state": context.open ? "open" : "closed",
|
|
"data-disabled": disabled ? "" : void 0,
|
|
...triggerProps,
|
|
ref: forwardedRef,
|
|
style: { WebkitTouchCallout: "none", ...props.style },
|
|
onContextMenu: disabled ? props.onContextMenu : composeEventHandlers(props.onContextMenu, (event) => {
|
|
clearLongPress();
|
|
handleOpen(event);
|
|
event.preventDefault();
|
|
}),
|
|
onPointerDown: disabled ? props.onPointerDown : composeEventHandlers(
|
|
props.onPointerDown,
|
|
whenTouchOrPen((event) => {
|
|
clearLongPress();
|
|
longPressTimerRef.current = window.setTimeout(() => handleOpen(event), 700);
|
|
})
|
|
),
|
|
onPointerMove: disabled ? props.onPointerMove : composeEventHandlers(props.onPointerMove, whenTouchOrPen(clearLongPress)),
|
|
onPointerCancel: disabled ? props.onPointerCancel : composeEventHandlers(props.onPointerCancel, whenTouchOrPen(clearLongPress)),
|
|
onPointerUp: disabled ? props.onPointerUp : composeEventHandlers(props.onPointerUp, whenTouchOrPen(clearLongPress))
|
|
}
|
|
)
|
|
] });
|
|
}
|
|
);
|
|
ContextMenuTrigger.displayName = TRIGGER_NAME6;
|
|
var PORTAL_NAME5 = "ContextMenuPortal";
|
|
var ContextMenuPortal = (props) => {
|
|
const { __scopeContextMenu, ...portalProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return (0, import_jsx_runtime23.jsx)(Portal3, { ...menuScope, ...portalProps });
|
|
};
|
|
ContextMenuPortal.displayName = PORTAL_NAME5;
|
|
var CONTENT_NAME7 = "ContextMenuContent";
|
|
var ContextMenuContent = React46.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...contentProps } = props;
|
|
const context = useContextMenuContext(CONTENT_NAME7, __scopeContextMenu);
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
const hasInteractedOutsideRef = React46.useRef(false);
|
|
return (0, import_jsx_runtime23.jsx)(
|
|
Content23,
|
|
{
|
|
...menuScope,
|
|
...contentProps,
|
|
ref: forwardedRef,
|
|
side: "right",
|
|
sideOffset: 2,
|
|
align: "start",
|
|
onCloseAutoFocus: (event) => {
|
|
props.onCloseAutoFocus?.(event);
|
|
if (!event.defaultPrevented && hasInteractedOutsideRef.current) {
|
|
event.preventDefault();
|
|
}
|
|
hasInteractedOutsideRef.current = false;
|
|
},
|
|
onInteractOutside: (event) => {
|
|
props.onInteractOutside?.(event);
|
|
if (!event.defaultPrevented && !context.modal) hasInteractedOutsideRef.current = true;
|
|
},
|
|
style: {
|
|
...props.style,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-context-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-context-menu-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-context-menu-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-context-menu-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-context-menu-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
ContextMenuContent.displayName = CONTENT_NAME7;
|
|
var GROUP_NAME3 = "ContextMenuGroup";
|
|
var ContextMenuGroup = React46.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...groupProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return (0, import_jsx_runtime23.jsx)(Group, { ...menuScope, ...groupProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ContextMenuGroup.displayName = GROUP_NAME3;
|
|
var LABEL_NAME2 = "ContextMenuLabel";
|
|
var ContextMenuLabel = React46.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...labelProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return (0, import_jsx_runtime23.jsx)(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ContextMenuLabel.displayName = LABEL_NAME2;
|
|
var ITEM_NAME4 = "ContextMenuItem";
|
|
var ContextMenuItem = React46.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...itemProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return (0, import_jsx_runtime23.jsx)(Item22, { ...menuScope, ...itemProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ContextMenuItem.displayName = ITEM_NAME4;
|
|
var CHECKBOX_ITEM_NAME2 = "ContextMenuCheckboxItem";
|
|
var ContextMenuCheckboxItem = React46.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...checkboxItemProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return (0, import_jsx_runtime23.jsx)(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
|
|
});
|
|
ContextMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME2;
|
|
var RADIO_GROUP_NAME2 = "ContextMenuRadioGroup";
|
|
var ContextMenuRadioGroup = React46.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...radioGroupProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return (0, import_jsx_runtime23.jsx)(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
|
|
});
|
|
ContextMenuRadioGroup.displayName = RADIO_GROUP_NAME2;
|
|
var RADIO_ITEM_NAME2 = "ContextMenuRadioItem";
|
|
var ContextMenuRadioItem = React46.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...radioItemProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return (0, import_jsx_runtime23.jsx)(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
|
|
});
|
|
ContextMenuRadioItem.displayName = RADIO_ITEM_NAME2;
|
|
var INDICATOR_NAME2 = "ContextMenuItemIndicator";
|
|
var ContextMenuItemIndicator = React46.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...itemIndicatorProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return (0, import_jsx_runtime23.jsx)(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
|
|
});
|
|
ContextMenuItemIndicator.displayName = INDICATOR_NAME2;
|
|
var SEPARATOR_NAME2 = "ContextMenuSeparator";
|
|
var ContextMenuSeparator = React46.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...separatorProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return (0, import_jsx_runtime23.jsx)(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
|
|
});
|
|
ContextMenuSeparator.displayName = SEPARATOR_NAME2;
|
|
var ARROW_NAME3 = "ContextMenuArrow";
|
|
var ContextMenuArrow = React46.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...arrowProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return (0, import_jsx_runtime23.jsx)(Arrow22, { ...menuScope, ...arrowProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ContextMenuArrow.displayName = ARROW_NAME3;
|
|
var SUB_NAME2 = "ContextMenuSub";
|
|
var ContextMenuSub = (props) => {
|
|
const { __scopeContextMenu, children, onOpenChange, open: openProp, defaultOpen } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
const [open, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen ?? false,
|
|
onChange: onOpenChange,
|
|
caller: SUB_NAME2
|
|
});
|
|
return (0, import_jsx_runtime23.jsx)(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
|
|
};
|
|
ContextMenuSub.displayName = SUB_NAME2;
|
|
var SUB_TRIGGER_NAME2 = "ContextMenuSubTrigger";
|
|
var ContextMenuSubTrigger = React46.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...triggerItemProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return (0, import_jsx_runtime23.jsx)(SubTrigger, { ...menuScope, ...triggerItemProps, ref: forwardedRef });
|
|
});
|
|
ContextMenuSubTrigger.displayName = SUB_TRIGGER_NAME2;
|
|
var SUB_CONTENT_NAME2 = "ContextMenuSubContent";
|
|
var ContextMenuSubContent = React46.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...subContentProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return (0, import_jsx_runtime23.jsx)(
|
|
SubContent,
|
|
{
|
|
...menuScope,
|
|
...subContentProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
...props.style,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-context-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-context-menu-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-context-menu-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-context-menu-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-context-menu-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
}
|
|
}
|
|
);
|
|
});
|
|
ContextMenuSubContent.displayName = SUB_CONTENT_NAME2;
|
|
function whenTouchOrPen(handler) {
|
|
return (event) => event.pointerType !== "mouse" ? handler(event) : void 0;
|
|
}
|
|
var Root26 = ContextMenu;
|
|
var Trigger4 = ContextMenuTrigger;
|
|
var Portal23 = ContextMenuPortal;
|
|
var Content24 = ContextMenuContent;
|
|
var Group2 = ContextMenuGroup;
|
|
var Label2 = ContextMenuLabel;
|
|
var Item23 = ContextMenuItem;
|
|
var CheckboxItem2 = ContextMenuCheckboxItem;
|
|
var RadioGroup2 = ContextMenuRadioGroup;
|
|
var RadioItem2 = ContextMenuRadioItem;
|
|
var ItemIndicator2 = ContextMenuItemIndicator;
|
|
var Separator2 = ContextMenuSeparator;
|
|
var Arrow23 = ContextMenuArrow;
|
|
var Sub2 = ContextMenuSub;
|
|
var SubTrigger2 = ContextMenuSubTrigger;
|
|
var SubContent2 = ContextMenuSubContent;
|
|
|
|
// node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
|
|
var dist_exports18 = {};
|
|
__export(dist_exports18, {
|
|
Arrow: () => Arrow24,
|
|
CheckboxItem: () => CheckboxItem22,
|
|
Content: () => Content25,
|
|
DropdownMenu: () => DropdownMenu,
|
|
DropdownMenuArrow: () => DropdownMenuArrow,
|
|
DropdownMenuCheckboxItem: () => DropdownMenuCheckboxItem,
|
|
DropdownMenuContent: () => DropdownMenuContent,
|
|
DropdownMenuGroup: () => DropdownMenuGroup,
|
|
DropdownMenuItem: () => DropdownMenuItem,
|
|
DropdownMenuItemIndicator: () => DropdownMenuItemIndicator,
|
|
DropdownMenuLabel: () => DropdownMenuLabel,
|
|
DropdownMenuPortal: () => DropdownMenuPortal,
|
|
DropdownMenuRadioGroup: () => DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem: () => DropdownMenuRadioItem,
|
|
DropdownMenuSeparator: () => DropdownMenuSeparator,
|
|
DropdownMenuSub: () => DropdownMenuSub,
|
|
DropdownMenuSubContent: () => DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
|
|
DropdownMenuTrigger: () => DropdownMenuTrigger,
|
|
Group: () => Group22,
|
|
Item: () => Item24,
|
|
ItemIndicator: () => ItemIndicator22,
|
|
Label: () => Label22,
|
|
Portal: () => Portal24,
|
|
RadioGroup: () => RadioGroup22,
|
|
RadioItem: () => RadioItem22,
|
|
Root: () => Root27,
|
|
Separator: () => Separator22,
|
|
Sub: () => Sub22,
|
|
SubContent: () => SubContent22,
|
|
SubTrigger: () => SubTrigger22,
|
|
Trigger: () => Trigger5,
|
|
createDropdownMenuScope: () => createDropdownMenuScope
|
|
});
|
|
var React47 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
|
|
var DROPDOWN_MENU_NAME = "DropdownMenu";
|
|
var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(
|
|
DROPDOWN_MENU_NAME,
|
|
[createMenuScope]
|
|
);
|
|
var useMenuScope2 = createMenuScope();
|
|
var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
|
|
var DropdownMenu = (props) => {
|
|
const {
|
|
__scopeDropdownMenu,
|
|
children,
|
|
dir,
|
|
open: openProp,
|
|
defaultOpen,
|
|
onOpenChange,
|
|
modal = true
|
|
} = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
const triggerRef = React47.useRef(null);
|
|
const [open, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen ?? false,
|
|
onChange: onOpenChange,
|
|
caller: DROPDOWN_MENU_NAME
|
|
});
|
|
return (0, import_jsx_runtime24.jsx)(
|
|
DropdownMenuProvider,
|
|
{
|
|
scope: __scopeDropdownMenu,
|
|
triggerId: useId(),
|
|
triggerRef,
|
|
contentId: useId(),
|
|
open,
|
|
onOpenChange: setOpen,
|
|
onOpenToggle: React47.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
modal,
|
|
children: (0, import_jsx_runtime24.jsx)(Root32, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
|
|
}
|
|
);
|
|
};
|
|
DropdownMenu.displayName = DROPDOWN_MENU_NAME;
|
|
var TRIGGER_NAME7 = "DropdownMenuTrigger";
|
|
var DropdownMenuTrigger = React47.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
|
|
const context = useDropdownMenuContext(TRIGGER_NAME7, __scopeDropdownMenu);
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(Anchor2, { asChild: true, ...menuScope, children: (0, import_jsx_runtime24.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
id: context.triggerId,
|
|
"aria-haspopup": "menu",
|
|
"aria-expanded": context.open,
|
|
"aria-controls": context.open ? context.contentId : void 0,
|
|
"data-state": context.open ? "open" : "closed",
|
|
"data-disabled": disabled ? "" : void 0,
|
|
disabled,
|
|
...triggerProps,
|
|
ref: composeRefs(forwardedRef, context.triggerRef),
|
|
onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
|
|
if (!disabled && event.button === 0 && event.ctrlKey === false) {
|
|
context.onOpenToggle();
|
|
if (!context.open) event.preventDefault();
|
|
}
|
|
}),
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
if (disabled) return;
|
|
if (["Enter", " "].includes(event.key)) context.onOpenToggle();
|
|
if (event.key === "ArrowDown") context.onOpenChange(true);
|
|
if (["Enter", " ", "ArrowDown"].includes(event.key)) event.preventDefault();
|
|
})
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
DropdownMenuTrigger.displayName = TRIGGER_NAME7;
|
|
var PORTAL_NAME6 = "DropdownMenuPortal";
|
|
var DropdownMenuPortal = (props) => {
|
|
const { __scopeDropdownMenu, ...portalProps } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(Portal3, { ...menuScope, ...portalProps });
|
|
};
|
|
DropdownMenuPortal.displayName = PORTAL_NAME6;
|
|
var CONTENT_NAME8 = "DropdownMenuContent";
|
|
var DropdownMenuContent = React47.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...contentProps } = props;
|
|
const context = useDropdownMenuContext(CONTENT_NAME8, __scopeDropdownMenu);
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
const hasInteractedOutsideRef = React47.useRef(false);
|
|
return (0, import_jsx_runtime24.jsx)(
|
|
Content23,
|
|
{
|
|
id: context.contentId,
|
|
"aria-labelledby": context.triggerId,
|
|
...menuScope,
|
|
...contentProps,
|
|
ref: forwardedRef,
|
|
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
|
|
hasInteractedOutsideRef.current = false;
|
|
event.preventDefault();
|
|
}),
|
|
onInteractOutside: composeEventHandlers(props.onInteractOutside, (event) => {
|
|
const originalEvent = event.detail.originalEvent;
|
|
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;
|
|
}),
|
|
style: {
|
|
...props.style,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
DropdownMenuContent.displayName = CONTENT_NAME8;
|
|
var GROUP_NAME4 = "DropdownMenuGroup";
|
|
var DropdownMenuGroup = React47.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...groupProps } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(Group, { ...menuScope, ...groupProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
DropdownMenuGroup.displayName = GROUP_NAME4;
|
|
var LABEL_NAME3 = "DropdownMenuLabel";
|
|
var DropdownMenuLabel = React47.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...labelProps } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
DropdownMenuLabel.displayName = LABEL_NAME3;
|
|
var ITEM_NAME5 = "DropdownMenuItem";
|
|
var DropdownMenuItem = React47.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...itemProps } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(Item22, { ...menuScope, ...itemProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
DropdownMenuItem.displayName = ITEM_NAME5;
|
|
var CHECKBOX_ITEM_NAME3 = "DropdownMenuCheckboxItem";
|
|
var DropdownMenuCheckboxItem = React47.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...checkboxItemProps } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
|
|
});
|
|
DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME3;
|
|
var RADIO_GROUP_NAME3 = "DropdownMenuRadioGroup";
|
|
var DropdownMenuRadioGroup = React47.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...radioGroupProps } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
|
|
});
|
|
DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME3;
|
|
var RADIO_ITEM_NAME3 = "DropdownMenuRadioItem";
|
|
var DropdownMenuRadioItem = React47.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...radioItemProps } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
|
|
});
|
|
DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME3;
|
|
var INDICATOR_NAME3 = "DropdownMenuItemIndicator";
|
|
var DropdownMenuItemIndicator = React47.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
|
|
});
|
|
DropdownMenuItemIndicator.displayName = INDICATOR_NAME3;
|
|
var SEPARATOR_NAME3 = "DropdownMenuSeparator";
|
|
var DropdownMenuSeparator = React47.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...separatorProps } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
|
|
});
|
|
DropdownMenuSeparator.displayName = SEPARATOR_NAME3;
|
|
var ARROW_NAME4 = "DropdownMenuArrow";
|
|
var DropdownMenuArrow = React47.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...arrowProps } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(Arrow22, { ...menuScope, ...arrowProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
DropdownMenuArrow.displayName = ARROW_NAME4;
|
|
var DropdownMenuSub = (props) => {
|
|
const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
const [open, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen ?? false,
|
|
onChange: onOpenChange,
|
|
caller: "DropdownMenuSub"
|
|
});
|
|
return (0, import_jsx_runtime24.jsx)(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
|
|
};
|
|
var SUB_TRIGGER_NAME3 = "DropdownMenuSubTrigger";
|
|
var DropdownMenuSubTrigger = React47.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...subTriggerProps } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
|
|
});
|
|
DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME3;
|
|
var SUB_CONTENT_NAME3 = "DropdownMenuSubContent";
|
|
var DropdownMenuSubContent = React47.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...subContentProps } = props;
|
|
const menuScope = useMenuScope2(__scopeDropdownMenu);
|
|
return (0, import_jsx_runtime24.jsx)(
|
|
SubContent,
|
|
{
|
|
...menuScope,
|
|
...subContentProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
...props.style,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
}
|
|
}
|
|
);
|
|
});
|
|
DropdownMenuSubContent.displayName = SUB_CONTENT_NAME3;
|
|
var Root27 = DropdownMenu;
|
|
var Trigger5 = DropdownMenuTrigger;
|
|
var Portal24 = DropdownMenuPortal;
|
|
var Content25 = DropdownMenuContent;
|
|
var Group22 = DropdownMenuGroup;
|
|
var Label22 = DropdownMenuLabel;
|
|
var Item24 = DropdownMenuItem;
|
|
var CheckboxItem22 = DropdownMenuCheckboxItem;
|
|
var RadioGroup22 = DropdownMenuRadioGroup;
|
|
var RadioItem22 = DropdownMenuRadioItem;
|
|
var ItemIndicator22 = DropdownMenuItemIndicator;
|
|
var Separator22 = DropdownMenuSeparator;
|
|
var Arrow24 = DropdownMenuArrow;
|
|
var Sub22 = DropdownMenuSub;
|
|
var SubTrigger22 = DropdownMenuSubTrigger;
|
|
var SubContent22 = DropdownMenuSubContent;
|
|
|
|
// node_modules/@radix-ui/react-form/dist/index.mjs
|
|
var dist_exports20 = {};
|
|
__export(dist_exports20, {
|
|
Control: () => Control,
|
|
Field: () => Field,
|
|
Form: () => Form,
|
|
FormControl: () => FormControl,
|
|
FormField: () => FormField,
|
|
FormLabel: () => FormLabel,
|
|
FormMessage: () => FormMessage,
|
|
FormSubmit: () => FormSubmit,
|
|
FormValidityState: () => FormValidityState,
|
|
Label: () => Label4,
|
|
Message: () => Message,
|
|
Root: () => Root12,
|
|
Submit: () => Submit,
|
|
ValidityState: () => ValidityState,
|
|
createFormScope: () => createFormScope
|
|
});
|
|
var React49 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-label/dist/index.mjs
|
|
var dist_exports19 = {};
|
|
__export(dist_exports19, {
|
|
Label: () => Label3,
|
|
Root: () => Root11
|
|
});
|
|
var React48 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
|
|
var NAME5 = "Label";
|
|
var Label3 = React48.forwardRef((props, forwardedRef) => {
|
|
return (0, import_jsx_runtime25.jsx)(
|
|
Primitive.label,
|
|
{
|
|
...props,
|
|
ref: forwardedRef,
|
|
onMouseDown: (event) => {
|
|
const target = event.target;
|
|
if (target.closest("button, input, select, textarea")) return;
|
|
props.onMouseDown?.(event);
|
|
if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
|
|
}
|
|
}
|
|
);
|
|
});
|
|
Label3.displayName = NAME5;
|
|
var Root11 = Label3;
|
|
|
|
// node_modules/@radix-ui/react-form/dist/index.mjs
|
|
var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
|
|
var [createFormContext, createFormScope] = createContextScope("Form");
|
|
var FORM_NAME = "Form";
|
|
var [ValidationProvider, useValidationContext] = createFormContext(FORM_NAME);
|
|
var [AriaDescriptionProvider, useAriaDescriptionContext] = createFormContext(FORM_NAME);
|
|
var Form = React49.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeForm, onClearServerErrors = () => {
|
|
}, ...rootProps } = props;
|
|
const formRef = React49.useRef(null);
|
|
const composedFormRef = useComposedRefs(forwardedRef, formRef);
|
|
const [validityMap, setValidityMap] = React49.useState({});
|
|
const getFieldValidity = React49.useCallback(
|
|
(fieldName) => validityMap[fieldName],
|
|
[validityMap]
|
|
);
|
|
const handleFieldValidityChange = React49.useCallback(
|
|
(fieldName, validity) => setValidityMap((prevValidityMap) => ({
|
|
...prevValidityMap,
|
|
[fieldName]: { ...prevValidityMap[fieldName] ?? {}, ...validity }
|
|
})),
|
|
[]
|
|
);
|
|
const handleFieldValiditionClear = React49.useCallback((fieldName) => {
|
|
setValidityMap((prevValidityMap) => ({ ...prevValidityMap, [fieldName]: void 0 }));
|
|
setCustomErrorsMap((prevCustomErrorsMap) => ({ ...prevCustomErrorsMap, [fieldName]: {} }));
|
|
}, []);
|
|
const [customMatcherEntriesMap, setCustomMatcherEntriesMap] = React49.useState({});
|
|
const getFieldCustomMatcherEntries = React49.useCallback(
|
|
(fieldName) => customMatcherEntriesMap[fieldName] ?? [],
|
|
[customMatcherEntriesMap]
|
|
);
|
|
const handleFieldCustomMatcherAdd = React49.useCallback((fieldName, matcherEntry) => {
|
|
setCustomMatcherEntriesMap((prevCustomMatcherEntriesMap) => ({
|
|
...prevCustomMatcherEntriesMap,
|
|
[fieldName]: [...prevCustomMatcherEntriesMap[fieldName] ?? [], matcherEntry]
|
|
}));
|
|
}, []);
|
|
const handleFieldCustomMatcherRemove = React49.useCallback((fieldName, matcherEntryId) => {
|
|
setCustomMatcherEntriesMap((prevCustomMatcherEntriesMap) => ({
|
|
...prevCustomMatcherEntriesMap,
|
|
[fieldName]: (prevCustomMatcherEntriesMap[fieldName] ?? []).filter(
|
|
(matcherEntry) => matcherEntry.id !== matcherEntryId
|
|
)
|
|
}));
|
|
}, []);
|
|
const [customErrorsMap, setCustomErrorsMap] = React49.useState({});
|
|
const getFieldCustomErrors = React49.useCallback(
|
|
(fieldName) => customErrorsMap[fieldName] ?? {},
|
|
[customErrorsMap]
|
|
);
|
|
const handleFieldCustomErrorsChange = React49.useCallback((fieldName, customErrors) => {
|
|
setCustomErrorsMap((prevCustomErrorsMap) => ({
|
|
...prevCustomErrorsMap,
|
|
[fieldName]: { ...prevCustomErrorsMap[fieldName] ?? {}, ...customErrors }
|
|
}));
|
|
}, []);
|
|
const [messageIdsMap, setMessageIdsMap] = React49.useState({});
|
|
const handleFieldMessageIdAdd = React49.useCallback((fieldName, id) => {
|
|
setMessageIdsMap((prevMessageIdsMap) => {
|
|
const fieldDescriptionIds = new Set(prevMessageIdsMap[fieldName]).add(id);
|
|
return { ...prevMessageIdsMap, [fieldName]: fieldDescriptionIds };
|
|
});
|
|
}, []);
|
|
const handleFieldMessageIdRemove = React49.useCallback((fieldName, id) => {
|
|
setMessageIdsMap((prevMessageIdsMap) => {
|
|
const fieldDescriptionIds = new Set(prevMessageIdsMap[fieldName]);
|
|
fieldDescriptionIds.delete(id);
|
|
return { ...prevMessageIdsMap, [fieldName]: fieldDescriptionIds };
|
|
});
|
|
}, []);
|
|
const getFieldDescription = React49.useCallback(
|
|
(fieldName) => Array.from(messageIdsMap[fieldName] ?? []).join(" ") || void 0,
|
|
[messageIdsMap]
|
|
);
|
|
return (0, import_jsx_runtime26.jsx)(
|
|
ValidationProvider,
|
|
{
|
|
scope: __scopeForm,
|
|
getFieldValidity,
|
|
onFieldValidityChange: handleFieldValidityChange,
|
|
getFieldCustomMatcherEntries,
|
|
onFieldCustomMatcherEntryAdd: handleFieldCustomMatcherAdd,
|
|
onFieldCustomMatcherEntryRemove: handleFieldCustomMatcherRemove,
|
|
getFieldCustomErrors,
|
|
onFieldCustomErrorsChange: handleFieldCustomErrorsChange,
|
|
onFieldValiditionClear: handleFieldValiditionClear,
|
|
children: (0, import_jsx_runtime26.jsx)(
|
|
AriaDescriptionProvider,
|
|
{
|
|
scope: __scopeForm,
|
|
onFieldMessageIdAdd: handleFieldMessageIdAdd,
|
|
onFieldMessageIdRemove: handleFieldMessageIdRemove,
|
|
getFieldDescription,
|
|
children: (0, import_jsx_runtime26.jsx)(
|
|
Primitive.form,
|
|
{
|
|
...rootProps,
|
|
ref: composedFormRef,
|
|
onInvalid: composeEventHandlers(props.onInvalid, (event) => {
|
|
const firstInvalidControl = getFirstInvalidControl(event.currentTarget);
|
|
if (firstInvalidControl === event.target) firstInvalidControl.focus();
|
|
event.preventDefault();
|
|
}),
|
|
onSubmit: composeEventHandlers(props.onSubmit, onClearServerErrors, {
|
|
checkForDefaultPrevented: false
|
|
}),
|
|
onReset: composeEventHandlers(props.onReset, onClearServerErrors)
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
Form.displayName = FORM_NAME;
|
|
var FIELD_NAME = "FormField";
|
|
var [FormFieldProvider, useFormFieldContext] = createFormContext(FIELD_NAME);
|
|
var FormField = React49.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeForm, name, serverInvalid = false, ...fieldProps } = props;
|
|
const validationContext = useValidationContext(FIELD_NAME, __scopeForm);
|
|
const validity = validationContext.getFieldValidity(name);
|
|
const id = useId();
|
|
return (0, import_jsx_runtime26.jsx)(FormFieldProvider, { scope: __scopeForm, id, name, serverInvalid, children: (0, import_jsx_runtime26.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-valid": getValidAttribute(validity, serverInvalid),
|
|
"data-invalid": getInvalidAttribute(validity, serverInvalid),
|
|
...fieldProps,
|
|
ref: forwardedRef
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
FormField.displayName = FIELD_NAME;
|
|
var LABEL_NAME4 = "FormLabel";
|
|
var FormLabel = React49.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeForm, ...labelProps } = props;
|
|
const validationContext = useValidationContext(LABEL_NAME4, __scopeForm);
|
|
const fieldContext = useFormFieldContext(LABEL_NAME4, __scopeForm);
|
|
const htmlFor = labelProps.htmlFor || fieldContext.id;
|
|
const validity = validationContext.getFieldValidity(fieldContext.name);
|
|
return (0, import_jsx_runtime26.jsx)(
|
|
Label3,
|
|
{
|
|
"data-valid": getValidAttribute(validity, fieldContext.serverInvalid),
|
|
"data-invalid": getInvalidAttribute(validity, fieldContext.serverInvalid),
|
|
...labelProps,
|
|
ref: forwardedRef,
|
|
htmlFor
|
|
}
|
|
);
|
|
}
|
|
);
|
|
FormLabel.displayName = LABEL_NAME4;
|
|
var CONTROL_NAME = "FormControl";
|
|
var FormControl = React49.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeForm, ...controlProps } = props;
|
|
const validationContext = useValidationContext(CONTROL_NAME, __scopeForm);
|
|
const fieldContext = useFormFieldContext(CONTROL_NAME, __scopeForm);
|
|
const ariaDescriptionContext = useAriaDescriptionContext(CONTROL_NAME, __scopeForm);
|
|
const ref = React49.useRef(null);
|
|
const composedRef = useComposedRefs(forwardedRef, ref);
|
|
const name = controlProps.name || fieldContext.name;
|
|
const id = controlProps.id || fieldContext.id;
|
|
const customMatcherEntries = validationContext.getFieldCustomMatcherEntries(name);
|
|
const { onFieldValidityChange, onFieldCustomErrorsChange, onFieldValiditionClear } = validationContext;
|
|
const updateControlValidity = React49.useCallback(
|
|
async (control) => {
|
|
if (hasBuiltInError(control.validity)) {
|
|
const controlValidity2 = validityStateToObject(control.validity);
|
|
onFieldValidityChange(name, controlValidity2);
|
|
return;
|
|
}
|
|
const formData = control.form ? new FormData(control.form) : new FormData();
|
|
const matcherArgs = [control.value, formData];
|
|
const syncCustomMatcherEntries = [];
|
|
const ayncCustomMatcherEntries = [];
|
|
customMatcherEntries.forEach((customMatcherEntry) => {
|
|
if (isAsyncCustomMatcherEntry(customMatcherEntry, matcherArgs)) {
|
|
ayncCustomMatcherEntries.push(customMatcherEntry);
|
|
} else if (isSyncCustomMatcherEntry(customMatcherEntry)) {
|
|
syncCustomMatcherEntries.push(customMatcherEntry);
|
|
}
|
|
});
|
|
const syncCustomErrors = syncCustomMatcherEntries.map(({ id: id2, match }) => {
|
|
return [id2, match(...matcherArgs)];
|
|
});
|
|
const syncCustomErrorsById = Object.fromEntries(syncCustomErrors);
|
|
const hasSyncCustomErrors = Object.values(syncCustomErrorsById).some(Boolean);
|
|
const hasCustomError = hasSyncCustomErrors;
|
|
control.setCustomValidity(hasCustomError ? DEFAULT_INVALID_MESSAGE : "");
|
|
const controlValidity = validityStateToObject(control.validity);
|
|
onFieldValidityChange(name, controlValidity);
|
|
onFieldCustomErrorsChange(name, syncCustomErrorsById);
|
|
if (!hasSyncCustomErrors && ayncCustomMatcherEntries.length > 0) {
|
|
const promisedCustomErrors = ayncCustomMatcherEntries.map(
|
|
({ id: id2, match }) => match(...matcherArgs).then((matches) => [id2, matches])
|
|
);
|
|
const asyncCustomErrors = await Promise.all(promisedCustomErrors);
|
|
const asyncCustomErrorsById = Object.fromEntries(asyncCustomErrors);
|
|
const hasAsyncCustomErrors = Object.values(asyncCustomErrorsById).some(Boolean);
|
|
const hasCustomError2 = hasAsyncCustomErrors;
|
|
control.setCustomValidity(hasCustomError2 ? DEFAULT_INVALID_MESSAGE : "");
|
|
const controlValidity2 = validityStateToObject(control.validity);
|
|
onFieldValidityChange(name, controlValidity2);
|
|
onFieldCustomErrorsChange(name, asyncCustomErrorsById);
|
|
}
|
|
},
|
|
[customMatcherEntries, name, onFieldCustomErrorsChange, onFieldValidityChange]
|
|
);
|
|
React49.useEffect(() => {
|
|
const control = ref.current;
|
|
if (control) {
|
|
const handleChange = () => updateControlValidity(control);
|
|
control.addEventListener("change", handleChange);
|
|
return () => control.removeEventListener("change", handleChange);
|
|
}
|
|
}, [updateControlValidity]);
|
|
const resetControlValidity = React49.useCallback(() => {
|
|
const control = ref.current;
|
|
if (control) {
|
|
control.setCustomValidity("");
|
|
onFieldValiditionClear(name);
|
|
}
|
|
}, [name, onFieldValiditionClear]);
|
|
React49.useEffect(() => {
|
|
const form = ref.current?.form;
|
|
if (form) {
|
|
form.addEventListener("reset", resetControlValidity);
|
|
return () => form.removeEventListener("reset", resetControlValidity);
|
|
}
|
|
}, [resetControlValidity]);
|
|
React49.useEffect(() => {
|
|
const control = ref.current;
|
|
const form = control?.closest("form");
|
|
if (form && fieldContext.serverInvalid) {
|
|
const firstInvalidControl = getFirstInvalidControl(form);
|
|
if (firstInvalidControl === control) firstInvalidControl.focus();
|
|
}
|
|
}, [fieldContext.serverInvalid]);
|
|
const validity = validationContext.getFieldValidity(name);
|
|
return (0, import_jsx_runtime26.jsx)(
|
|
Primitive.input,
|
|
{
|
|
"data-valid": getValidAttribute(validity, fieldContext.serverInvalid),
|
|
"data-invalid": getInvalidAttribute(validity, fieldContext.serverInvalid),
|
|
"aria-invalid": fieldContext.serverInvalid ? true : void 0,
|
|
"aria-describedby": ariaDescriptionContext.getFieldDescription(name),
|
|
title: "",
|
|
...controlProps,
|
|
ref: composedRef,
|
|
id,
|
|
name,
|
|
onInvalid: composeEventHandlers(props.onInvalid, (event) => {
|
|
const control = event.currentTarget;
|
|
updateControlValidity(control);
|
|
}),
|
|
onChange: composeEventHandlers(props.onChange, (_event) => {
|
|
resetControlValidity();
|
|
})
|
|
}
|
|
);
|
|
}
|
|
);
|
|
FormControl.displayName = CONTROL_NAME;
|
|
var DEFAULT_INVALID_MESSAGE = "This value is not valid";
|
|
var DEFAULT_BUILT_IN_MESSAGES = {
|
|
badInput: DEFAULT_INVALID_MESSAGE,
|
|
patternMismatch: "This value does not match the required pattern",
|
|
rangeOverflow: "This value is too large",
|
|
rangeUnderflow: "This value is too small",
|
|
stepMismatch: "This value does not match the required step",
|
|
tooLong: "This value is too long",
|
|
tooShort: "This value is too short",
|
|
typeMismatch: "This value does not match the required type",
|
|
valid: void 0,
|
|
valueMissing: "This value is missing"
|
|
};
|
|
var MESSAGE_NAME = "FormMessage";
|
|
var FormMessage = React49.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { match, name: nameProp, ...messageProps } = props;
|
|
const fieldContext = useFormFieldContext(MESSAGE_NAME, props.__scopeForm);
|
|
const name = nameProp ?? fieldContext.name;
|
|
if (match === void 0) {
|
|
return (0, import_jsx_runtime26.jsx)(FormMessageImpl, { ...messageProps, ref: forwardedRef, name, children: props.children || DEFAULT_INVALID_MESSAGE });
|
|
} else if (typeof match === "function") {
|
|
return (0, import_jsx_runtime26.jsx)(FormCustomMessage, { match, ...messageProps, ref: forwardedRef, name });
|
|
} else {
|
|
return (0, import_jsx_runtime26.jsx)(FormBuiltInMessage, { match, ...messageProps, ref: forwardedRef, name });
|
|
}
|
|
}
|
|
);
|
|
FormMessage.displayName = MESSAGE_NAME;
|
|
var FormBuiltInMessage = React49.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { match, forceMatch = false, name, children, ...messageProps } = props;
|
|
const validationContext = useValidationContext(MESSAGE_NAME, messageProps.__scopeForm);
|
|
const validity = validationContext.getFieldValidity(name);
|
|
const matches = forceMatch || validity?.[match];
|
|
if (matches) {
|
|
return (0, import_jsx_runtime26.jsx)(FormMessageImpl, { ref: forwardedRef, ...messageProps, name, children: children ?? DEFAULT_BUILT_IN_MESSAGES[match] });
|
|
}
|
|
return null;
|
|
}
|
|
);
|
|
var FormCustomMessage = React49.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { match, forceMatch = false, name, id: idProp, children, ...messageProps } = props;
|
|
const validationContext = useValidationContext(MESSAGE_NAME, messageProps.__scopeForm);
|
|
const ref = React49.useRef(null);
|
|
const composedRef = useComposedRefs(forwardedRef, ref);
|
|
const _id = useId();
|
|
const id = idProp ?? _id;
|
|
const customMatcherEntry = React49.useMemo(() => ({ id, match }), [id, match]);
|
|
const { onFieldCustomMatcherEntryAdd, onFieldCustomMatcherEntryRemove } = validationContext;
|
|
React49.useEffect(() => {
|
|
onFieldCustomMatcherEntryAdd(name, customMatcherEntry);
|
|
return () => onFieldCustomMatcherEntryRemove(name, customMatcherEntry.id);
|
|
}, [customMatcherEntry, name, onFieldCustomMatcherEntryAdd, onFieldCustomMatcherEntryRemove]);
|
|
const validity = validationContext.getFieldValidity(name);
|
|
const customErrors = validationContext.getFieldCustomErrors(name);
|
|
const hasMatchingCustomError = customErrors[id];
|
|
const matches = forceMatch || validity && !hasBuiltInError(validity) && hasMatchingCustomError;
|
|
if (matches) {
|
|
return (0, import_jsx_runtime26.jsx)(FormMessageImpl, { id, ref: composedRef, ...messageProps, name, children: children ?? DEFAULT_INVALID_MESSAGE });
|
|
}
|
|
return null;
|
|
}
|
|
);
|
|
var FormMessageImpl = React49.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeForm, id: idProp, name, ...messageProps } = props;
|
|
const ariaDescriptionContext = useAriaDescriptionContext(MESSAGE_NAME, __scopeForm);
|
|
const _id = useId();
|
|
const id = idProp ?? _id;
|
|
const { onFieldMessageIdAdd, onFieldMessageIdRemove } = ariaDescriptionContext;
|
|
React49.useEffect(() => {
|
|
onFieldMessageIdAdd(name, id);
|
|
return () => onFieldMessageIdRemove(name, id);
|
|
}, [name, id, onFieldMessageIdAdd, onFieldMessageIdRemove]);
|
|
return (0, import_jsx_runtime26.jsx)(Primitive.span, { id, ...messageProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
var VALIDITY_STATE_NAME = "FormValidityState";
|
|
var FormValidityState = (props) => {
|
|
const { __scopeForm, name: nameProp, children } = props;
|
|
const validationContext = useValidationContext(VALIDITY_STATE_NAME, __scopeForm);
|
|
const fieldContext = useFormFieldContext(VALIDITY_STATE_NAME, __scopeForm);
|
|
const name = nameProp ?? fieldContext.name;
|
|
const validity = validationContext.getFieldValidity(name);
|
|
return (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: children(validity) });
|
|
};
|
|
FormValidityState.displayName = VALIDITY_STATE_NAME;
|
|
var SUBMIT_NAME = "FormSubmit";
|
|
var FormSubmit = React49.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeForm, ...submitProps } = props;
|
|
return (0, import_jsx_runtime26.jsx)(Primitive.button, { type: "submit", ...submitProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
FormSubmit.displayName = SUBMIT_NAME;
|
|
function validityStateToObject(validity) {
|
|
const object = {};
|
|
for (const key in validity) {
|
|
object[key] = validity[key];
|
|
}
|
|
return object;
|
|
}
|
|
function isHTMLElement2(element) {
|
|
return element instanceof HTMLElement;
|
|
}
|
|
function isFormControl(element) {
|
|
return "validity" in element;
|
|
}
|
|
function isInvalid(control) {
|
|
return isFormControl(control) && (control.validity.valid === false || control.getAttribute("aria-invalid") === "true");
|
|
}
|
|
function getFirstInvalidControl(form) {
|
|
const elements = form.elements;
|
|
const [firstInvalidControl] = Array.from(elements).filter(isHTMLElement2).filter(isInvalid);
|
|
return firstInvalidControl;
|
|
}
|
|
function isAsyncCustomMatcherEntry(entry, args) {
|
|
return entry.match.constructor.name === "AsyncFunction" || returnsPromise(entry.match, args);
|
|
}
|
|
function isSyncCustomMatcherEntry(entry) {
|
|
return entry.match.constructor.name === "Function";
|
|
}
|
|
function returnsPromise(func, args) {
|
|
return func(...args) instanceof Promise;
|
|
}
|
|
function hasBuiltInError(validity) {
|
|
let error = false;
|
|
for (const validityKey in validity) {
|
|
const key = validityKey;
|
|
if (key !== "valid" && key !== "customError" && validity[key]) {
|
|
error = true;
|
|
break;
|
|
}
|
|
}
|
|
return error;
|
|
}
|
|
function getValidAttribute(validity, serverInvalid) {
|
|
if (validity?.valid === true && !serverInvalid) return true;
|
|
return void 0;
|
|
}
|
|
function getInvalidAttribute(validity, serverInvalid) {
|
|
if (validity?.valid === false || serverInvalid) return true;
|
|
return void 0;
|
|
}
|
|
var Root12 = Form;
|
|
var Field = FormField;
|
|
var Label4 = FormLabel;
|
|
var Control = FormControl;
|
|
var Message = FormMessage;
|
|
var ValidityState = FormValidityState;
|
|
var Submit = FormSubmit;
|
|
|
|
// node_modules/@radix-ui/react-hover-card/dist/index.mjs
|
|
var dist_exports21 = {};
|
|
__export(dist_exports21, {
|
|
Arrow: () => Arrow25,
|
|
Content: () => Content26,
|
|
HoverCard: () => HoverCard,
|
|
HoverCardArrow: () => HoverCardArrow,
|
|
HoverCardContent: () => HoverCardContent,
|
|
HoverCardPortal: () => HoverCardPortal,
|
|
HoverCardTrigger: () => HoverCardTrigger,
|
|
Portal: () => Portal4,
|
|
Root: () => Root28,
|
|
Trigger: () => Trigger6,
|
|
createHoverCardScope: () => createHoverCardScope
|
|
});
|
|
var React50 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
|
|
var originalBodyUserSelect;
|
|
var HOVERCARD_NAME = "HoverCard";
|
|
var [createHoverCardContext, createHoverCardScope] = createContextScope(HOVERCARD_NAME, [
|
|
createPopperScope
|
|
]);
|
|
var usePopperScope2 = createPopperScope();
|
|
var [HoverCardProvider, useHoverCardContext] = createHoverCardContext(HOVERCARD_NAME);
|
|
var HoverCard = (props) => {
|
|
const {
|
|
__scopeHoverCard,
|
|
children,
|
|
open: openProp,
|
|
defaultOpen,
|
|
onOpenChange,
|
|
openDelay = 700,
|
|
closeDelay = 300
|
|
} = props;
|
|
const popperScope = usePopperScope2(__scopeHoverCard);
|
|
const openTimerRef = React50.useRef(0);
|
|
const closeTimerRef = React50.useRef(0);
|
|
const hasSelectionRef = React50.useRef(false);
|
|
const isPointerDownOnContentRef = React50.useRef(false);
|
|
const [open, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen ?? false,
|
|
onChange: onOpenChange,
|
|
caller: HOVERCARD_NAME
|
|
});
|
|
const handleOpen = React50.useCallback(() => {
|
|
clearTimeout(closeTimerRef.current);
|
|
openTimerRef.current = window.setTimeout(() => setOpen(true), openDelay);
|
|
}, [openDelay, setOpen]);
|
|
const handleClose = React50.useCallback(() => {
|
|
clearTimeout(openTimerRef.current);
|
|
if (!hasSelectionRef.current && !isPointerDownOnContentRef.current) {
|
|
closeTimerRef.current = window.setTimeout(() => setOpen(false), closeDelay);
|
|
}
|
|
}, [closeDelay, setOpen]);
|
|
const handleDismiss = React50.useCallback(() => setOpen(false), [setOpen]);
|
|
React50.useEffect(() => {
|
|
return () => {
|
|
clearTimeout(openTimerRef.current);
|
|
clearTimeout(closeTimerRef.current);
|
|
};
|
|
}, []);
|
|
return (0, import_jsx_runtime27.jsx)(
|
|
HoverCardProvider,
|
|
{
|
|
scope: __scopeHoverCard,
|
|
open,
|
|
onOpenChange: setOpen,
|
|
onOpen: handleOpen,
|
|
onClose: handleClose,
|
|
onDismiss: handleDismiss,
|
|
hasSelectionRef,
|
|
isPointerDownOnContentRef,
|
|
children: (0, import_jsx_runtime27.jsx)(Root25, { ...popperScope, children })
|
|
}
|
|
);
|
|
};
|
|
HoverCard.displayName = HOVERCARD_NAME;
|
|
var TRIGGER_NAME8 = "HoverCardTrigger";
|
|
var HoverCardTrigger = React50.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeHoverCard, ...triggerProps } = props;
|
|
const context = useHoverCardContext(TRIGGER_NAME8, __scopeHoverCard);
|
|
const popperScope = usePopperScope2(__scopeHoverCard);
|
|
return (0, import_jsx_runtime27.jsx)(Anchor, { asChild: true, ...popperScope, children: (0, import_jsx_runtime27.jsx)(
|
|
Primitive.a,
|
|
{
|
|
"data-state": context.open ? "open" : "closed",
|
|
...triggerProps,
|
|
ref: forwardedRef,
|
|
onPointerEnter: composeEventHandlers(props.onPointerEnter, excludeTouch(context.onOpen)),
|
|
onPointerLeave: composeEventHandlers(props.onPointerLeave, excludeTouch(context.onClose)),
|
|
onFocus: composeEventHandlers(props.onFocus, context.onOpen),
|
|
onBlur: composeEventHandlers(props.onBlur, context.onClose),
|
|
onTouchStart: composeEventHandlers(props.onTouchStart, (event) => event.preventDefault())
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
HoverCardTrigger.displayName = TRIGGER_NAME8;
|
|
var PORTAL_NAME7 = "HoverCardPortal";
|
|
var [PortalProvider3, usePortalContext3] = createHoverCardContext(PORTAL_NAME7, {
|
|
forceMount: void 0
|
|
});
|
|
var HoverCardPortal = (props) => {
|
|
const { __scopeHoverCard, forceMount, children, container } = props;
|
|
const context = useHoverCardContext(PORTAL_NAME7, __scopeHoverCard);
|
|
return (0, import_jsx_runtime27.jsx)(PortalProvider3, { scope: __scopeHoverCard, forceMount, children: (0, import_jsx_runtime27.jsx)(Presence, { present: forceMount || context.open, children: (0, import_jsx_runtime27.jsx)(Portal, { asChild: true, container, children }) }) });
|
|
};
|
|
HoverCardPortal.displayName = PORTAL_NAME7;
|
|
var CONTENT_NAME9 = "HoverCardContent";
|
|
var HoverCardContent = React50.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const portalContext = usePortalContext3(CONTENT_NAME9, props.__scopeHoverCard);
|
|
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
const context = useHoverCardContext(CONTENT_NAME9, props.__scopeHoverCard);
|
|
return (0, import_jsx_runtime27.jsx)(Presence, { present: forceMount || context.open, children: (0, import_jsx_runtime27.jsx)(
|
|
HoverCardContentImpl,
|
|
{
|
|
"data-state": context.open ? "open" : "closed",
|
|
...contentProps,
|
|
onPointerEnter: composeEventHandlers(props.onPointerEnter, excludeTouch(context.onOpen)),
|
|
onPointerLeave: composeEventHandlers(props.onPointerLeave, excludeTouch(context.onClose)),
|
|
ref: forwardedRef
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
HoverCardContent.displayName = CONTENT_NAME9;
|
|
var HoverCardContentImpl = React50.forwardRef((props, forwardedRef) => {
|
|
const {
|
|
__scopeHoverCard,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside,
|
|
onInteractOutside,
|
|
...contentProps
|
|
} = props;
|
|
const context = useHoverCardContext(CONTENT_NAME9, __scopeHoverCard);
|
|
const popperScope = usePopperScope2(__scopeHoverCard);
|
|
const ref = React50.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const [containSelection, setContainSelection] = React50.useState(false);
|
|
React50.useEffect(() => {
|
|
if (containSelection) {
|
|
const body = document.body;
|
|
originalBodyUserSelect = body.style.userSelect || body.style.webkitUserSelect;
|
|
body.style.userSelect = "none";
|
|
body.style.webkitUserSelect = "none";
|
|
return () => {
|
|
body.style.userSelect = originalBodyUserSelect;
|
|
body.style.webkitUserSelect = originalBodyUserSelect;
|
|
};
|
|
}
|
|
}, [containSelection]);
|
|
React50.useEffect(() => {
|
|
if (ref.current) {
|
|
const handlePointerUp = () => {
|
|
setContainSelection(false);
|
|
context.isPointerDownOnContentRef.current = false;
|
|
setTimeout(() => {
|
|
const hasSelection = document.getSelection()?.toString() !== "";
|
|
if (hasSelection) context.hasSelectionRef.current = true;
|
|
});
|
|
};
|
|
document.addEventListener("pointerup", handlePointerUp);
|
|
return () => {
|
|
document.removeEventListener("pointerup", handlePointerUp);
|
|
context.hasSelectionRef.current = false;
|
|
context.isPointerDownOnContentRef.current = false;
|
|
};
|
|
}
|
|
}, [context.isPointerDownOnContentRef, context.hasSelectionRef]);
|
|
React50.useEffect(() => {
|
|
if (ref.current) {
|
|
const tabbables = getTabbableNodes(ref.current);
|
|
tabbables.forEach((tabbable) => tabbable.setAttribute("tabindex", "-1"));
|
|
}
|
|
});
|
|
return (0, import_jsx_runtime27.jsx)(
|
|
DismissableLayer,
|
|
{
|
|
asChild: true,
|
|
disableOutsidePointerEvents: false,
|
|
onInteractOutside,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside: composeEventHandlers(onFocusOutside, (event) => {
|
|
event.preventDefault();
|
|
}),
|
|
onDismiss: context.onDismiss,
|
|
children: (0, import_jsx_runtime27.jsx)(
|
|
Content4,
|
|
{
|
|
...popperScope,
|
|
...contentProps,
|
|
onPointerDown: composeEventHandlers(contentProps.onPointerDown, (event) => {
|
|
if (event.currentTarget.contains(event.target)) {
|
|
setContainSelection(true);
|
|
}
|
|
context.hasSelectionRef.current = false;
|
|
context.isPointerDownOnContentRef.current = true;
|
|
}),
|
|
ref: composedRefs,
|
|
style: {
|
|
...contentProps.style,
|
|
userSelect: containSelection ? "text" : void 0,
|
|
// Safari requires prefix
|
|
WebkitUserSelect: containSelection ? "text" : void 0,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-hover-card-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-hover-card-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-hover-card-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-hover-card-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-hover-card-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
}
|
|
}
|
|
)
|
|
}
|
|
);
|
|
});
|
|
var ARROW_NAME5 = "HoverCardArrow";
|
|
var HoverCardArrow = React50.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeHoverCard, ...arrowProps } = props;
|
|
const popperScope = usePopperScope2(__scopeHoverCard);
|
|
return (0, import_jsx_runtime27.jsx)(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
HoverCardArrow.displayName = ARROW_NAME5;
|
|
function excludeTouch(eventHandler) {
|
|
return (event) => event.pointerType === "touch" ? void 0 : eventHandler();
|
|
}
|
|
function getTabbableNodes(container) {
|
|
const nodes = [];
|
|
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
acceptNode: (node) => {
|
|
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
}
|
|
});
|
|
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
return nodes;
|
|
}
|
|
var Root28 = HoverCard;
|
|
var Trigger6 = HoverCardTrigger;
|
|
var Portal4 = HoverCardPortal;
|
|
var Content26 = HoverCardContent;
|
|
var Arrow25 = HoverCardArrow;
|
|
|
|
// node_modules/@radix-ui/react-menubar/dist/index.mjs
|
|
var dist_exports22 = {};
|
|
__export(dist_exports22, {
|
|
Arrow: () => Arrow26,
|
|
CheckboxItem: () => CheckboxItem23,
|
|
Content: () => Content27,
|
|
Group: () => Group23,
|
|
Item: () => Item3,
|
|
ItemIndicator: () => ItemIndicator23,
|
|
Label: () => Label23,
|
|
Menu: () => Menu2,
|
|
Menubar: () => Menubar,
|
|
MenubarArrow: () => MenubarArrow,
|
|
MenubarCheckboxItem: () => MenubarCheckboxItem,
|
|
MenubarContent: () => MenubarContent,
|
|
MenubarGroup: () => MenubarGroup,
|
|
MenubarItem: () => MenubarItem,
|
|
MenubarItemIndicator: () => MenubarItemIndicator,
|
|
MenubarLabel: () => MenubarLabel,
|
|
MenubarMenu: () => MenubarMenu,
|
|
MenubarPortal: () => MenubarPortal,
|
|
MenubarRadioGroup: () => MenubarRadioGroup,
|
|
MenubarRadioItem: () => MenubarRadioItem,
|
|
MenubarSeparator: () => MenubarSeparator,
|
|
MenubarSub: () => MenubarSub,
|
|
MenubarSubContent: () => MenubarSubContent,
|
|
MenubarSubTrigger: () => MenubarSubTrigger,
|
|
MenubarTrigger: () => MenubarTrigger,
|
|
Portal: () => Portal25,
|
|
RadioGroup: () => RadioGroup23,
|
|
RadioItem: () => RadioItem23,
|
|
Root: () => Root33,
|
|
Separator: () => Separator23,
|
|
Sub: () => Sub23,
|
|
SubContent: () => SubContent23,
|
|
SubTrigger: () => SubTrigger23,
|
|
Trigger: () => Trigger7,
|
|
createMenubarScope: () => createMenubarScope
|
|
});
|
|
var React51 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
|
|
var MENUBAR_NAME = "Menubar";
|
|
var [Collection4, useCollection4, createCollectionScope4] = createCollection(MENUBAR_NAME);
|
|
var [createMenubarContext, createMenubarScope] = createContextScope(MENUBAR_NAME, [
|
|
createCollectionScope4,
|
|
createRovingFocusGroupScope
|
|
]);
|
|
var useMenuScope3 = createMenuScope();
|
|
var useRovingFocusGroupScope2 = createRovingFocusGroupScope();
|
|
var [MenubarContextProvider, useMenubarContext] = createMenubarContext(MENUBAR_NAME);
|
|
var Menubar = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeMenubar,
|
|
value: valueProp,
|
|
onValueChange,
|
|
defaultValue,
|
|
loop = true,
|
|
dir,
|
|
...menubarProps
|
|
} = props;
|
|
const direction = useDirection(dir);
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope2(__scopeMenubar);
|
|
const [value, setValue] = useControllableState({
|
|
prop: valueProp,
|
|
onChange: onValueChange,
|
|
defaultProp: defaultValue ?? "",
|
|
caller: MENUBAR_NAME
|
|
});
|
|
const [currentTabStopId, setCurrentTabStopId] = React51.useState(null);
|
|
return (0, import_jsx_runtime28.jsx)(
|
|
MenubarContextProvider,
|
|
{
|
|
scope: __scopeMenubar,
|
|
value,
|
|
onMenuOpen: React51.useCallback(
|
|
(value2) => {
|
|
setValue(value2);
|
|
setCurrentTabStopId(value2);
|
|
},
|
|
[setValue]
|
|
),
|
|
onMenuClose: React51.useCallback(() => setValue(""), [setValue]),
|
|
onMenuToggle: React51.useCallback(
|
|
(value2) => {
|
|
setValue((prevValue) => prevValue ? "" : value2);
|
|
setCurrentTabStopId(value2);
|
|
},
|
|
[setValue]
|
|
),
|
|
dir: direction,
|
|
loop,
|
|
children: (0, import_jsx_runtime28.jsx)(Collection4.Provider, { scope: __scopeMenubar, children: (0, import_jsx_runtime28.jsx)(Collection4.Slot, { scope: __scopeMenubar, children: (0, import_jsx_runtime28.jsx)(
|
|
Root10,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
orientation: "horizontal",
|
|
loop,
|
|
dir: direction,
|
|
currentTabStopId,
|
|
onCurrentTabStopIdChange: setCurrentTabStopId,
|
|
children: (0, import_jsx_runtime28.jsx)(Primitive.div, { role: "menubar", ...menubarProps, ref: forwardedRef })
|
|
}
|
|
) }) })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
Menubar.displayName = MENUBAR_NAME;
|
|
var MENU_NAME2 = "MenubarMenu";
|
|
var [MenubarMenuProvider, useMenubarMenuContext] = createMenubarContext(MENU_NAME2);
|
|
var MenubarMenu = (props) => {
|
|
const { __scopeMenubar, value: valueProp, ...menuProps } = props;
|
|
const autoValue = useId();
|
|
const value = valueProp || autoValue || "LEGACY_REACT_AUTO_VALUE";
|
|
const context = useMenubarContext(MENU_NAME2, __scopeMenubar);
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
const triggerRef = React51.useRef(null);
|
|
const wasKeyboardTriggerOpenRef = React51.useRef(false);
|
|
const open = context.value === value;
|
|
React51.useEffect(() => {
|
|
if (!open) wasKeyboardTriggerOpenRef.current = false;
|
|
}, [open]);
|
|
return (0, import_jsx_runtime28.jsx)(
|
|
MenubarMenuProvider,
|
|
{
|
|
scope: __scopeMenubar,
|
|
value,
|
|
triggerId: useId(),
|
|
triggerRef,
|
|
contentId: useId(),
|
|
wasKeyboardTriggerOpenRef,
|
|
children: (0, import_jsx_runtime28.jsx)(
|
|
Root32,
|
|
{
|
|
...menuScope,
|
|
open,
|
|
onOpenChange: (open2) => {
|
|
if (!open2) context.onMenuClose();
|
|
},
|
|
modal: false,
|
|
dir: context.dir,
|
|
...menuProps
|
|
}
|
|
)
|
|
}
|
|
);
|
|
};
|
|
MenubarMenu.displayName = MENU_NAME2;
|
|
var TRIGGER_NAME9 = "MenubarTrigger";
|
|
var MenubarTrigger = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenubar, disabled = false, ...triggerProps } = props;
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope2(__scopeMenubar);
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
const context = useMenubarContext(TRIGGER_NAME9, __scopeMenubar);
|
|
const menuContext = useMenubarMenuContext(TRIGGER_NAME9, __scopeMenubar);
|
|
const ref = React51.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref, menuContext.triggerRef);
|
|
const [isFocused, setIsFocused] = React51.useState(false);
|
|
const open = context.value === menuContext.value;
|
|
return (0, import_jsx_runtime28.jsx)(Collection4.ItemSlot, { scope: __scopeMenubar, value: menuContext.value, disabled, children: (0, import_jsx_runtime28.jsx)(
|
|
Item2,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
focusable: !disabled,
|
|
tabStopId: menuContext.value,
|
|
children: (0, import_jsx_runtime28.jsx)(Anchor2, { asChild: true, ...menuScope, children: (0, import_jsx_runtime28.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
role: "menuitem",
|
|
id: menuContext.triggerId,
|
|
"aria-haspopup": "menu",
|
|
"aria-expanded": open,
|
|
"aria-controls": open ? menuContext.contentId : void 0,
|
|
"data-highlighted": isFocused ? "" : void 0,
|
|
"data-state": open ? "open" : "closed",
|
|
"data-disabled": disabled ? "" : void 0,
|
|
disabled,
|
|
...triggerProps,
|
|
ref: composedRefs,
|
|
onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
|
|
if (!disabled && event.button === 0 && event.ctrlKey === false) {
|
|
context.onMenuOpen(menuContext.value);
|
|
if (!open) event.preventDefault();
|
|
}
|
|
}),
|
|
onPointerEnter: composeEventHandlers(props.onPointerEnter, () => {
|
|
const menubarOpen = Boolean(context.value);
|
|
if (menubarOpen && !open) {
|
|
context.onMenuOpen(menuContext.value);
|
|
ref.current?.focus();
|
|
}
|
|
}),
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
if (disabled) return;
|
|
if (["Enter", " "].includes(event.key)) context.onMenuToggle(menuContext.value);
|
|
if (event.key === "ArrowDown") context.onMenuOpen(menuContext.value);
|
|
if (["Enter", " ", "ArrowDown"].includes(event.key)) {
|
|
menuContext.wasKeyboardTriggerOpenRef.current = true;
|
|
event.preventDefault();
|
|
}
|
|
}),
|
|
onFocus: composeEventHandlers(props.onFocus, () => setIsFocused(true)),
|
|
onBlur: composeEventHandlers(props.onBlur, () => setIsFocused(false))
|
|
}
|
|
) })
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
MenubarTrigger.displayName = TRIGGER_NAME9;
|
|
var PORTAL_NAME8 = "MenubarPortal";
|
|
var MenubarPortal = (props) => {
|
|
const { __scopeMenubar, ...portalProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
return (0, import_jsx_runtime28.jsx)(Portal3, { ...menuScope, ...portalProps });
|
|
};
|
|
MenubarPortal.displayName = PORTAL_NAME8;
|
|
var CONTENT_NAME10 = "MenubarContent";
|
|
var MenubarContent = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenubar, align = "start", ...contentProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
const context = useMenubarContext(CONTENT_NAME10, __scopeMenubar);
|
|
const menuContext = useMenubarMenuContext(CONTENT_NAME10, __scopeMenubar);
|
|
const getItems = useCollection4(__scopeMenubar);
|
|
const hasInteractedOutsideRef = React51.useRef(false);
|
|
return (0, import_jsx_runtime28.jsx)(
|
|
Content23,
|
|
{
|
|
id: menuContext.contentId,
|
|
"aria-labelledby": menuContext.triggerId,
|
|
"data-radix-menubar-content": "",
|
|
...menuScope,
|
|
...contentProps,
|
|
ref: forwardedRef,
|
|
align,
|
|
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
const menubarOpen = Boolean(context.value);
|
|
if (!menubarOpen && !hasInteractedOutsideRef.current) {
|
|
menuContext.triggerRef.current?.focus();
|
|
}
|
|
hasInteractedOutsideRef.current = false;
|
|
event.preventDefault();
|
|
}),
|
|
onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
|
|
const target = event.target;
|
|
const isMenubarTrigger = getItems().some((item) => item.ref.current?.contains(target));
|
|
if (isMenubarTrigger) event.preventDefault();
|
|
}),
|
|
onInteractOutside: composeEventHandlers(props.onInteractOutside, () => {
|
|
hasInteractedOutsideRef.current = true;
|
|
}),
|
|
onEntryFocus: (event) => {
|
|
if (!menuContext.wasKeyboardTriggerOpenRef.current) event.preventDefault();
|
|
},
|
|
onKeyDown: composeEventHandlers(
|
|
props.onKeyDown,
|
|
(event) => {
|
|
if (["ArrowRight", "ArrowLeft"].includes(event.key)) {
|
|
const target = event.target;
|
|
const targetIsSubTrigger = target.hasAttribute("data-radix-menubar-subtrigger");
|
|
const isKeyDownInsideSubMenu = target.closest("[data-radix-menubar-content]") !== event.currentTarget;
|
|
const prevMenuKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
|
|
const isPrevKey = prevMenuKey === event.key;
|
|
const isNextKey = !isPrevKey;
|
|
if (isNextKey && targetIsSubTrigger) return;
|
|
if (isKeyDownInsideSubMenu && isPrevKey) return;
|
|
const items = getItems().filter((item) => !item.disabled);
|
|
let candidateValues = items.map((item) => item.value);
|
|
if (isPrevKey) candidateValues.reverse();
|
|
const currentIndex = candidateValues.indexOf(menuContext.value);
|
|
candidateValues = context.loop ? wrapArray3(candidateValues, currentIndex + 1) : candidateValues.slice(currentIndex + 1);
|
|
const [nextValue] = candidateValues;
|
|
if (nextValue) context.onMenuOpen(nextValue);
|
|
}
|
|
},
|
|
{ checkForDefaultPrevented: false }
|
|
),
|
|
style: {
|
|
...props.style,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-menubar-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-menubar-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-menubar-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-menubar-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
MenubarContent.displayName = CONTENT_NAME10;
|
|
var GROUP_NAME5 = "MenubarGroup";
|
|
var MenubarGroup = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenubar, ...groupProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
return (0, import_jsx_runtime28.jsx)(Group, { ...menuScope, ...groupProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
MenubarGroup.displayName = GROUP_NAME5;
|
|
var LABEL_NAME5 = "MenubarLabel";
|
|
var MenubarLabel = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenubar, ...labelProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
return (0, import_jsx_runtime28.jsx)(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
MenubarLabel.displayName = LABEL_NAME5;
|
|
var ITEM_NAME6 = "MenubarItem";
|
|
var MenubarItem = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenubar, ...itemProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
return (0, import_jsx_runtime28.jsx)(Item22, { ...menuScope, ...itemProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
MenubarItem.displayName = ITEM_NAME6;
|
|
var CHECKBOX_ITEM_NAME4 = "MenubarCheckboxItem";
|
|
var MenubarCheckboxItem = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenubar, ...checkboxItemProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
return (0, import_jsx_runtime28.jsx)(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
MenubarCheckboxItem.displayName = CHECKBOX_ITEM_NAME4;
|
|
var RADIO_GROUP_NAME4 = "MenubarRadioGroup";
|
|
var MenubarRadioGroup = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenubar, ...radioGroupProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
return (0, import_jsx_runtime28.jsx)(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
MenubarRadioGroup.displayName = RADIO_GROUP_NAME4;
|
|
var RADIO_ITEM_NAME4 = "MenubarRadioItem";
|
|
var MenubarRadioItem = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenubar, ...radioItemProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
return (0, import_jsx_runtime28.jsx)(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
MenubarRadioItem.displayName = RADIO_ITEM_NAME4;
|
|
var INDICATOR_NAME4 = "MenubarItemIndicator";
|
|
var MenubarItemIndicator = React51.forwardRef((props, forwardedRef) => {
|
|
const { __scopeMenubar, ...itemIndicatorProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
return (0, import_jsx_runtime28.jsx)(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
|
|
});
|
|
MenubarItemIndicator.displayName = INDICATOR_NAME4;
|
|
var SEPARATOR_NAME4 = "MenubarSeparator";
|
|
var MenubarSeparator = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenubar, ...separatorProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
return (0, import_jsx_runtime28.jsx)(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
MenubarSeparator.displayName = SEPARATOR_NAME4;
|
|
var ARROW_NAME6 = "MenubarArrow";
|
|
var MenubarArrow = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenubar, ...arrowProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
return (0, import_jsx_runtime28.jsx)(Arrow22, { ...menuScope, ...arrowProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
MenubarArrow.displayName = ARROW_NAME6;
|
|
var SUB_NAME3 = "MenubarSub";
|
|
var MenubarSub = (props) => {
|
|
const { __scopeMenubar, children, open: openProp, onOpenChange, defaultOpen } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
const [open, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen ?? false,
|
|
onChange: onOpenChange,
|
|
caller: SUB_NAME3
|
|
});
|
|
return (0, import_jsx_runtime28.jsx)(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
|
|
};
|
|
MenubarSub.displayName = SUB_NAME3;
|
|
var SUB_TRIGGER_NAME4 = "MenubarSubTrigger";
|
|
var MenubarSubTrigger = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenubar, ...subTriggerProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
return (0, import_jsx_runtime28.jsx)(
|
|
SubTrigger,
|
|
{
|
|
"data-radix-menubar-subtrigger": "",
|
|
...menuScope,
|
|
...subTriggerProps,
|
|
ref: forwardedRef
|
|
}
|
|
);
|
|
}
|
|
);
|
|
MenubarSubTrigger.displayName = SUB_TRIGGER_NAME4;
|
|
var SUB_CONTENT_NAME4 = "MenubarSubContent";
|
|
var MenubarSubContent = React51.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeMenubar, ...subContentProps } = props;
|
|
const menuScope = useMenuScope3(__scopeMenubar);
|
|
return (0, import_jsx_runtime28.jsx)(
|
|
SubContent,
|
|
{
|
|
...menuScope,
|
|
"data-radix-menubar-content": "",
|
|
...subContentProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
...props.style,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-menubar-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-menubar-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-menubar-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-menubar-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
MenubarSubContent.displayName = SUB_CONTENT_NAME4;
|
|
function wrapArray3(array, startIndex) {
|
|
return array.map((_, index2) => array[(startIndex + index2) % array.length]);
|
|
}
|
|
var Root33 = Menubar;
|
|
var Menu2 = MenubarMenu;
|
|
var Trigger7 = MenubarTrigger;
|
|
var Portal25 = MenubarPortal;
|
|
var Content27 = MenubarContent;
|
|
var Group23 = MenubarGroup;
|
|
var Label23 = MenubarLabel;
|
|
var Item3 = MenubarItem;
|
|
var CheckboxItem23 = MenubarCheckboxItem;
|
|
var RadioGroup23 = MenubarRadioGroup;
|
|
var RadioItem23 = MenubarRadioItem;
|
|
var ItemIndicator23 = MenubarItemIndicator;
|
|
var Separator23 = MenubarSeparator;
|
|
var Arrow26 = MenubarArrow;
|
|
var Sub23 = MenubarSub;
|
|
var SubTrigger23 = MenubarSubTrigger;
|
|
var SubContent23 = MenubarSubContent;
|
|
|
|
// node_modules/@radix-ui/react-navigation-menu/dist/index.mjs
|
|
var dist_exports23 = {};
|
|
__export(dist_exports23, {
|
|
Content: () => Content5,
|
|
Indicator: () => Indicator,
|
|
Item: () => Item4,
|
|
Link: () => Link,
|
|
List: () => List,
|
|
NavigationMenu: () => NavigationMenu,
|
|
NavigationMenuContent: () => NavigationMenuContent,
|
|
NavigationMenuIndicator: () => NavigationMenuIndicator,
|
|
NavigationMenuItem: () => NavigationMenuItem,
|
|
NavigationMenuLink: () => NavigationMenuLink,
|
|
NavigationMenuList: () => NavigationMenuList,
|
|
NavigationMenuSub: () => NavigationMenuSub,
|
|
NavigationMenuTrigger: () => NavigationMenuTrigger,
|
|
NavigationMenuViewport: () => NavigationMenuViewport,
|
|
Root: () => Root29,
|
|
Sub: () => Sub3,
|
|
Trigger: () => Trigger8,
|
|
Viewport: () => Viewport,
|
|
createNavigationMenuScope: () => createNavigationMenuScope
|
|
});
|
|
var React52 = __toESM(require_react(), 1);
|
|
var import_react_dom3 = __toESM(require_react_dom(), 1);
|
|
var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
|
|
var NAVIGATION_MENU_NAME = "NavigationMenu";
|
|
var [Collection5, useCollection5, createCollectionScope5] = createCollection(NAVIGATION_MENU_NAME);
|
|
var [FocusGroupCollection, useFocusGroupCollection, createFocusGroupCollectionScope] = createCollection(NAVIGATION_MENU_NAME);
|
|
var [createNavigationMenuContext, createNavigationMenuScope] = createContextScope(
|
|
NAVIGATION_MENU_NAME,
|
|
[createCollectionScope5, createFocusGroupCollectionScope]
|
|
);
|
|
var [NavigationMenuProviderImpl, useNavigationMenuContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
|
|
var [ViewportContentProvider, useViewportContentContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
|
|
var NavigationMenu = React52.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeNavigationMenu,
|
|
value: valueProp,
|
|
onValueChange,
|
|
defaultValue,
|
|
delayDuration = 200,
|
|
skipDelayDuration = 300,
|
|
orientation = "horizontal",
|
|
dir,
|
|
...NavigationMenuProps
|
|
} = props;
|
|
const [navigationMenu, setNavigationMenu] = React52.useState(null);
|
|
const composedRef = useComposedRefs(forwardedRef, (node) => setNavigationMenu(node));
|
|
const direction = useDirection(dir);
|
|
const openTimerRef = React52.useRef(0);
|
|
const closeTimerRef = React52.useRef(0);
|
|
const skipDelayTimerRef = React52.useRef(0);
|
|
const [isOpenDelayed, setIsOpenDelayed] = React52.useState(true);
|
|
const [value, setValue] = useControllableState({
|
|
prop: valueProp,
|
|
onChange: (value2) => {
|
|
const isOpen = value2 !== "";
|
|
const hasSkipDelayDuration = skipDelayDuration > 0;
|
|
if (isOpen) {
|
|
window.clearTimeout(skipDelayTimerRef.current);
|
|
if (hasSkipDelayDuration) setIsOpenDelayed(false);
|
|
} else {
|
|
window.clearTimeout(skipDelayTimerRef.current);
|
|
skipDelayTimerRef.current = window.setTimeout(
|
|
() => setIsOpenDelayed(true),
|
|
skipDelayDuration
|
|
);
|
|
}
|
|
onValueChange?.(value2);
|
|
},
|
|
defaultProp: defaultValue ?? "",
|
|
caller: NAVIGATION_MENU_NAME
|
|
});
|
|
const startCloseTimer = React52.useCallback(() => {
|
|
window.clearTimeout(closeTimerRef.current);
|
|
closeTimerRef.current = window.setTimeout(() => setValue(""), 150);
|
|
}, [setValue]);
|
|
const handleOpen = React52.useCallback(
|
|
(itemValue) => {
|
|
window.clearTimeout(closeTimerRef.current);
|
|
setValue(itemValue);
|
|
},
|
|
[setValue]
|
|
);
|
|
const handleDelayedOpen = React52.useCallback(
|
|
(itemValue) => {
|
|
const isOpenItem = value === itemValue;
|
|
if (isOpenItem) {
|
|
window.clearTimeout(closeTimerRef.current);
|
|
} else {
|
|
openTimerRef.current = window.setTimeout(() => {
|
|
window.clearTimeout(closeTimerRef.current);
|
|
setValue(itemValue);
|
|
}, delayDuration);
|
|
}
|
|
},
|
|
[value, setValue, delayDuration]
|
|
);
|
|
React52.useEffect(() => {
|
|
return () => {
|
|
window.clearTimeout(openTimerRef.current);
|
|
window.clearTimeout(closeTimerRef.current);
|
|
window.clearTimeout(skipDelayTimerRef.current);
|
|
};
|
|
}, []);
|
|
return (0, import_jsx_runtime29.jsx)(
|
|
NavigationMenuProvider,
|
|
{
|
|
scope: __scopeNavigationMenu,
|
|
isRootMenu: true,
|
|
value,
|
|
dir: direction,
|
|
orientation,
|
|
rootNavigationMenu: navigationMenu,
|
|
onTriggerEnter: (itemValue) => {
|
|
window.clearTimeout(openTimerRef.current);
|
|
if (isOpenDelayed) handleDelayedOpen(itemValue);
|
|
else handleOpen(itemValue);
|
|
},
|
|
onTriggerLeave: () => {
|
|
window.clearTimeout(openTimerRef.current);
|
|
startCloseTimer();
|
|
},
|
|
onContentEnter: () => window.clearTimeout(closeTimerRef.current),
|
|
onContentLeave: startCloseTimer,
|
|
onItemSelect: (itemValue) => {
|
|
setValue((prevValue) => prevValue === itemValue ? "" : itemValue);
|
|
},
|
|
onItemDismiss: () => setValue(""),
|
|
children: (0, import_jsx_runtime29.jsx)(
|
|
Primitive.nav,
|
|
{
|
|
"aria-label": "Main",
|
|
"data-orientation": orientation,
|
|
dir: direction,
|
|
...NavigationMenuProps,
|
|
ref: composedRef
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
NavigationMenu.displayName = NAVIGATION_MENU_NAME;
|
|
var SUB_NAME4 = "NavigationMenuSub";
|
|
var NavigationMenuSub = React52.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeNavigationMenu,
|
|
value: valueProp,
|
|
onValueChange,
|
|
defaultValue,
|
|
orientation = "horizontal",
|
|
...subProps
|
|
} = props;
|
|
const context = useNavigationMenuContext(SUB_NAME4, __scopeNavigationMenu);
|
|
const [value, setValue] = useControllableState({
|
|
prop: valueProp,
|
|
onChange: onValueChange,
|
|
defaultProp: defaultValue ?? "",
|
|
caller: SUB_NAME4
|
|
});
|
|
return (0, import_jsx_runtime29.jsx)(
|
|
NavigationMenuProvider,
|
|
{
|
|
scope: __scopeNavigationMenu,
|
|
isRootMenu: false,
|
|
value,
|
|
dir: context.dir,
|
|
orientation,
|
|
rootNavigationMenu: context.rootNavigationMenu,
|
|
onTriggerEnter: (itemValue) => setValue(itemValue),
|
|
onItemSelect: (itemValue) => setValue(itemValue),
|
|
onItemDismiss: () => setValue(""),
|
|
children: (0, import_jsx_runtime29.jsx)(Primitive.div, { "data-orientation": orientation, ...subProps, ref: forwardedRef })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
NavigationMenuSub.displayName = SUB_NAME4;
|
|
var NavigationMenuProvider = (props) => {
|
|
const {
|
|
scope,
|
|
isRootMenu,
|
|
rootNavigationMenu,
|
|
dir,
|
|
orientation,
|
|
children,
|
|
value,
|
|
onItemSelect,
|
|
onItemDismiss,
|
|
onTriggerEnter,
|
|
onTriggerLeave,
|
|
onContentEnter,
|
|
onContentLeave
|
|
} = props;
|
|
const [viewport, setViewport] = React52.useState(null);
|
|
const [viewportContent, setViewportContent] = React52.useState(/* @__PURE__ */ new Map());
|
|
const [indicatorTrack, setIndicatorTrack] = React52.useState(null);
|
|
return (0, import_jsx_runtime29.jsx)(
|
|
NavigationMenuProviderImpl,
|
|
{
|
|
scope,
|
|
isRootMenu,
|
|
rootNavigationMenu,
|
|
value,
|
|
previousValue: usePrevious(value),
|
|
baseId: useId(),
|
|
dir,
|
|
orientation,
|
|
viewport,
|
|
onViewportChange: setViewport,
|
|
indicatorTrack,
|
|
onIndicatorTrackChange: setIndicatorTrack,
|
|
onTriggerEnter: useCallbackRef(onTriggerEnter),
|
|
onTriggerLeave: useCallbackRef(onTriggerLeave),
|
|
onContentEnter: useCallbackRef(onContentEnter),
|
|
onContentLeave: useCallbackRef(onContentLeave),
|
|
onItemSelect: useCallbackRef(onItemSelect),
|
|
onItemDismiss: useCallbackRef(onItemDismiss),
|
|
onViewportContentChange: React52.useCallback((contentValue, contentData) => {
|
|
setViewportContent((prevContent) => {
|
|
prevContent.set(contentValue, contentData);
|
|
return new Map(prevContent);
|
|
});
|
|
}, []),
|
|
onViewportContentRemove: React52.useCallback((contentValue) => {
|
|
setViewportContent((prevContent) => {
|
|
if (!prevContent.has(contentValue)) return prevContent;
|
|
prevContent.delete(contentValue);
|
|
return new Map(prevContent);
|
|
});
|
|
}, []),
|
|
children: (0, import_jsx_runtime29.jsx)(Collection5.Provider, { scope, children: (0, import_jsx_runtime29.jsx)(ViewportContentProvider, { scope, items: viewportContent, children }) })
|
|
}
|
|
);
|
|
};
|
|
var LIST_NAME = "NavigationMenuList";
|
|
var NavigationMenuList = React52.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeNavigationMenu, ...listProps } = props;
|
|
const context = useNavigationMenuContext(LIST_NAME, __scopeNavigationMenu);
|
|
const list = (0, import_jsx_runtime29.jsx)(Primitive.ul, { "data-orientation": context.orientation, ...listProps, ref: forwardedRef });
|
|
return (0, import_jsx_runtime29.jsx)(Primitive.div, { style: { position: "relative" }, ref: context.onIndicatorTrackChange, children: (0, import_jsx_runtime29.jsx)(Collection5.Slot, { scope: __scopeNavigationMenu, children: context.isRootMenu ? (0, import_jsx_runtime29.jsx)(FocusGroup, { asChild: true, children: list }) : list }) });
|
|
}
|
|
);
|
|
NavigationMenuList.displayName = LIST_NAME;
|
|
var ITEM_NAME7 = "NavigationMenuItem";
|
|
var [NavigationMenuItemContextProvider, useNavigationMenuItemContext] = createNavigationMenuContext(ITEM_NAME7);
|
|
var NavigationMenuItem = React52.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeNavigationMenu, value: valueProp, ...itemProps } = props;
|
|
const autoValue = useId();
|
|
const value = valueProp || autoValue || "LEGACY_REACT_AUTO_VALUE";
|
|
const contentRef = React52.useRef(null);
|
|
const triggerRef = React52.useRef(null);
|
|
const focusProxyRef = React52.useRef(null);
|
|
const restoreContentTabOrderRef = React52.useRef(() => {
|
|
});
|
|
const wasEscapeCloseRef = React52.useRef(false);
|
|
const handleContentEntry = React52.useCallback((side = "start") => {
|
|
if (contentRef.current) {
|
|
restoreContentTabOrderRef.current();
|
|
const candidates = getTabbableCandidates2(contentRef.current);
|
|
if (candidates.length) focusFirst4(side === "start" ? candidates : candidates.reverse());
|
|
}
|
|
}, []);
|
|
const handleContentExit = React52.useCallback(() => {
|
|
if (contentRef.current) {
|
|
const candidates = getTabbableCandidates2(contentRef.current);
|
|
if (candidates.length) restoreContentTabOrderRef.current = removeFromTabOrder(candidates);
|
|
}
|
|
}, []);
|
|
return (0, import_jsx_runtime29.jsx)(
|
|
NavigationMenuItemContextProvider,
|
|
{
|
|
scope: __scopeNavigationMenu,
|
|
value,
|
|
triggerRef,
|
|
contentRef,
|
|
focusProxyRef,
|
|
wasEscapeCloseRef,
|
|
onEntryKeyDown: handleContentEntry,
|
|
onFocusProxyEnter: handleContentEntry,
|
|
onRootContentClose: handleContentExit,
|
|
onContentFocusOutside: handleContentExit,
|
|
children: (0, import_jsx_runtime29.jsx)(Primitive.li, { ...itemProps, ref: forwardedRef })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
NavigationMenuItem.displayName = ITEM_NAME7;
|
|
var TRIGGER_NAME10 = "NavigationMenuTrigger";
|
|
var NavigationMenuTrigger = React52.forwardRef((props, forwardedRef) => {
|
|
const { __scopeNavigationMenu, disabled, ...triggerProps } = props;
|
|
const context = useNavigationMenuContext(TRIGGER_NAME10, props.__scopeNavigationMenu);
|
|
const itemContext = useNavigationMenuItemContext(TRIGGER_NAME10, props.__scopeNavigationMenu);
|
|
const ref = React52.useRef(null);
|
|
const composedRefs = useComposedRefs(ref, itemContext.triggerRef, forwardedRef);
|
|
const triggerId = makeTriggerId(context.baseId, itemContext.value);
|
|
const contentId = makeContentId(context.baseId, itemContext.value);
|
|
const hasPointerMoveOpenedRef = React52.useRef(false);
|
|
const wasClickCloseRef = React52.useRef(false);
|
|
const open = itemContext.value === context.value;
|
|
return (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
(0, import_jsx_runtime29.jsx)(Collection5.ItemSlot, { scope: __scopeNavigationMenu, value: itemContext.value, children: (0, import_jsx_runtime29.jsx)(FocusGroupItem, { asChild: true, children: (0, import_jsx_runtime29.jsx)(
|
|
Primitive.button,
|
|
{
|
|
id: triggerId,
|
|
disabled,
|
|
"data-disabled": disabled ? "" : void 0,
|
|
"data-state": getOpenState2(open),
|
|
"aria-expanded": open,
|
|
"aria-controls": contentId,
|
|
...triggerProps,
|
|
ref: composedRefs,
|
|
onPointerEnter: composeEventHandlers(props.onPointerEnter, () => {
|
|
wasClickCloseRef.current = false;
|
|
itemContext.wasEscapeCloseRef.current = false;
|
|
}),
|
|
onPointerMove: composeEventHandlers(
|
|
props.onPointerMove,
|
|
whenMouse2(() => {
|
|
if (disabled || wasClickCloseRef.current || itemContext.wasEscapeCloseRef.current || hasPointerMoveOpenedRef.current)
|
|
return;
|
|
context.onTriggerEnter(itemContext.value);
|
|
hasPointerMoveOpenedRef.current = true;
|
|
})
|
|
),
|
|
onPointerLeave: composeEventHandlers(
|
|
props.onPointerLeave,
|
|
whenMouse2(() => {
|
|
if (disabled) return;
|
|
context.onTriggerLeave();
|
|
hasPointerMoveOpenedRef.current = false;
|
|
})
|
|
),
|
|
onClick: composeEventHandlers(props.onClick, () => {
|
|
context.onItemSelect(itemContext.value);
|
|
wasClickCloseRef.current = open;
|
|
}),
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
const verticalEntryKey = context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
|
|
const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[context.orientation];
|
|
if (open && event.key === entryKey) {
|
|
itemContext.onEntryKeyDown();
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
}
|
|
) }) }),
|
|
open && (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
(0, import_jsx_runtime29.jsx)(
|
|
Root2,
|
|
{
|
|
"aria-hidden": true,
|
|
tabIndex: 0,
|
|
ref: itemContext.focusProxyRef,
|
|
onFocus: (event) => {
|
|
const content = itemContext.contentRef.current;
|
|
const prevFocusedElement = event.relatedTarget;
|
|
const wasTriggerFocused = prevFocusedElement === ref.current;
|
|
const wasFocusFromContent = content?.contains(prevFocusedElement);
|
|
if (wasTriggerFocused || !wasFocusFromContent) {
|
|
itemContext.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
|
|
}
|
|
}
|
|
}
|
|
),
|
|
context.viewport && (0, import_jsx_runtime29.jsx)("span", { "aria-owns": contentId })
|
|
] })
|
|
] });
|
|
});
|
|
NavigationMenuTrigger.displayName = TRIGGER_NAME10;
|
|
var LINK_NAME = "NavigationMenuLink";
|
|
var LINK_SELECT = "navigationMenu.linkSelect";
|
|
var NavigationMenuLink = React52.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeNavigationMenu, active, onSelect, ...linkProps } = props;
|
|
return (0, import_jsx_runtime29.jsx)(FocusGroupItem, { asChild: true, children: (0, import_jsx_runtime29.jsx)(
|
|
Primitive.a,
|
|
{
|
|
"data-active": active ? "" : void 0,
|
|
"aria-current": active ? "page" : void 0,
|
|
...linkProps,
|
|
ref: forwardedRef,
|
|
onClick: composeEventHandlers(
|
|
props.onClick,
|
|
(event) => {
|
|
const target = event.target;
|
|
const linkSelectEvent = new CustomEvent(LINK_SELECT, {
|
|
bubbles: true,
|
|
cancelable: true
|
|
});
|
|
target.addEventListener(LINK_SELECT, (event2) => onSelect?.(event2), { once: true });
|
|
dispatchDiscreteCustomEvent(target, linkSelectEvent);
|
|
if (!linkSelectEvent.defaultPrevented && !event.metaKey) {
|
|
const rootContentDismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, {
|
|
bubbles: true,
|
|
cancelable: true
|
|
});
|
|
dispatchDiscreteCustomEvent(target, rootContentDismissEvent);
|
|
}
|
|
},
|
|
{ checkForDefaultPrevented: false }
|
|
)
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
NavigationMenuLink.displayName = LINK_NAME;
|
|
var INDICATOR_NAME5 = "NavigationMenuIndicator";
|
|
var NavigationMenuIndicator = React52.forwardRef((props, forwardedRef) => {
|
|
const { forceMount, ...indicatorProps } = props;
|
|
const context = useNavigationMenuContext(INDICATOR_NAME5, props.__scopeNavigationMenu);
|
|
const isVisible = Boolean(context.value);
|
|
return context.indicatorTrack ? import_react_dom3.default.createPortal(
|
|
(0, import_jsx_runtime29.jsx)(Presence, { present: forceMount || isVisible, children: (0, import_jsx_runtime29.jsx)(NavigationMenuIndicatorImpl, { ...indicatorProps, ref: forwardedRef }) }),
|
|
context.indicatorTrack
|
|
) : null;
|
|
});
|
|
NavigationMenuIndicator.displayName = INDICATOR_NAME5;
|
|
var NavigationMenuIndicatorImpl = React52.forwardRef((props, forwardedRef) => {
|
|
const { __scopeNavigationMenu, ...indicatorProps } = props;
|
|
const context = useNavigationMenuContext(INDICATOR_NAME5, __scopeNavigationMenu);
|
|
const getItems = useCollection5(__scopeNavigationMenu);
|
|
const [activeTrigger, setActiveTrigger] = React52.useState(
|
|
null
|
|
);
|
|
const [position, setPosition] = React52.useState(null);
|
|
const isHorizontal = context.orientation === "horizontal";
|
|
const isVisible = Boolean(context.value);
|
|
React52.useEffect(() => {
|
|
const items = getItems();
|
|
const triggerNode = items.find((item) => item.value === context.value)?.ref.current;
|
|
if (triggerNode) setActiveTrigger(triggerNode);
|
|
}, [getItems, context.value]);
|
|
const handlePositionChange = () => {
|
|
if (activeTrigger) {
|
|
setPosition({
|
|
size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight,
|
|
offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop
|
|
});
|
|
}
|
|
};
|
|
useResizeObserver(activeTrigger, handlePositionChange);
|
|
useResizeObserver(context.indicatorTrack, handlePositionChange);
|
|
return position ? (0, import_jsx_runtime29.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"aria-hidden": true,
|
|
"data-state": isVisible ? "visible" : "hidden",
|
|
"data-orientation": context.orientation,
|
|
...indicatorProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
position: "absolute",
|
|
...isHorizontal ? {
|
|
left: 0,
|
|
width: position.size + "px",
|
|
transform: `translateX(${position.offset}px)`
|
|
} : {
|
|
top: 0,
|
|
height: position.size + "px",
|
|
transform: `translateY(${position.offset}px)`
|
|
},
|
|
...indicatorProps.style
|
|
}
|
|
}
|
|
) : null;
|
|
});
|
|
var CONTENT_NAME11 = "NavigationMenuContent";
|
|
var NavigationMenuContent = React52.forwardRef((props, forwardedRef) => {
|
|
const { forceMount, ...contentProps } = props;
|
|
const context = useNavigationMenuContext(CONTENT_NAME11, props.__scopeNavigationMenu);
|
|
const itemContext = useNavigationMenuItemContext(CONTENT_NAME11, props.__scopeNavigationMenu);
|
|
const composedRefs = useComposedRefs(itemContext.contentRef, forwardedRef);
|
|
const open = itemContext.value === context.value;
|
|
const commonProps = {
|
|
value: itemContext.value,
|
|
triggerRef: itemContext.triggerRef,
|
|
focusProxyRef: itemContext.focusProxyRef,
|
|
wasEscapeCloseRef: itemContext.wasEscapeCloseRef,
|
|
onContentFocusOutside: itemContext.onContentFocusOutside,
|
|
onRootContentClose: itemContext.onRootContentClose,
|
|
...contentProps
|
|
};
|
|
return !context.viewport ? (0, import_jsx_runtime29.jsx)(Presence, { present: forceMount || open, children: (0, import_jsx_runtime29.jsx)(
|
|
NavigationMenuContentImpl,
|
|
{
|
|
"data-state": getOpenState2(open),
|
|
...commonProps,
|
|
ref: composedRefs,
|
|
onPointerEnter: composeEventHandlers(props.onPointerEnter, context.onContentEnter),
|
|
onPointerLeave: composeEventHandlers(
|
|
props.onPointerLeave,
|
|
whenMouse2(context.onContentLeave)
|
|
),
|
|
style: {
|
|
// Prevent interaction when animating out
|
|
pointerEvents: !open && context.isRootMenu ? "none" : void 0,
|
|
...commonProps.style
|
|
}
|
|
}
|
|
) }) : (0, import_jsx_runtime29.jsx)(ViewportContentMounter, { forceMount, ...commonProps, ref: composedRefs });
|
|
});
|
|
NavigationMenuContent.displayName = CONTENT_NAME11;
|
|
var ViewportContentMounter = React52.forwardRef((props, forwardedRef) => {
|
|
const context = useNavigationMenuContext(CONTENT_NAME11, props.__scopeNavigationMenu);
|
|
const { onViewportContentChange, onViewportContentRemove } = context;
|
|
useLayoutEffect2(() => {
|
|
onViewportContentChange(props.value, {
|
|
ref: forwardedRef,
|
|
...props
|
|
});
|
|
}, [props, forwardedRef, onViewportContentChange]);
|
|
useLayoutEffect2(() => {
|
|
return () => onViewportContentRemove(props.value);
|
|
}, [props.value, onViewportContentRemove]);
|
|
return null;
|
|
});
|
|
var ROOT_CONTENT_DISMISS = "navigationMenu.rootContentDismiss";
|
|
var NavigationMenuContentImpl = React52.forwardRef((props, forwardedRef) => {
|
|
const {
|
|
__scopeNavigationMenu,
|
|
value,
|
|
triggerRef,
|
|
focusProxyRef,
|
|
wasEscapeCloseRef,
|
|
onRootContentClose,
|
|
onContentFocusOutside,
|
|
...contentProps
|
|
} = props;
|
|
const context = useNavigationMenuContext(CONTENT_NAME11, __scopeNavigationMenu);
|
|
const ref = React52.useRef(null);
|
|
const composedRefs = useComposedRefs(ref, forwardedRef);
|
|
const triggerId = makeTriggerId(context.baseId, value);
|
|
const contentId = makeContentId(context.baseId, value);
|
|
const getItems = useCollection5(__scopeNavigationMenu);
|
|
const prevMotionAttributeRef = React52.useRef(null);
|
|
const { onItemDismiss } = context;
|
|
React52.useEffect(() => {
|
|
const content = ref.current;
|
|
if (context.isRootMenu && content) {
|
|
const handleClose = () => {
|
|
onItemDismiss();
|
|
onRootContentClose();
|
|
if (content.contains(document.activeElement)) triggerRef.current?.focus();
|
|
};
|
|
content.addEventListener(ROOT_CONTENT_DISMISS, handleClose);
|
|
return () => content.removeEventListener(ROOT_CONTENT_DISMISS, handleClose);
|
|
}
|
|
}, [context.isRootMenu, props.value, triggerRef, onItemDismiss, onRootContentClose]);
|
|
const motionAttribute = React52.useMemo(() => {
|
|
const items = getItems();
|
|
const values = items.map((item) => item.value);
|
|
if (context.dir === "rtl") values.reverse();
|
|
const index2 = values.indexOf(context.value);
|
|
const prevIndex = values.indexOf(context.previousValue);
|
|
const isSelected = value === context.value;
|
|
const wasSelected = prevIndex === values.indexOf(value);
|
|
if (!isSelected && !wasSelected) return prevMotionAttributeRef.current;
|
|
const attribute = (() => {
|
|
if (index2 !== prevIndex) {
|
|
if (isSelected && prevIndex !== -1) return index2 > prevIndex ? "from-end" : "from-start";
|
|
if (wasSelected && index2 !== -1) return index2 > prevIndex ? "to-start" : "to-end";
|
|
}
|
|
return null;
|
|
})();
|
|
prevMotionAttributeRef.current = attribute;
|
|
return attribute;
|
|
}, [context.previousValue, context.value, context.dir, getItems, value]);
|
|
return (0, import_jsx_runtime29.jsx)(FocusGroup, { asChild: true, children: (0, import_jsx_runtime29.jsx)(
|
|
DismissableLayer,
|
|
{
|
|
id: contentId,
|
|
"aria-labelledby": triggerId,
|
|
"data-motion": motionAttribute,
|
|
"data-orientation": context.orientation,
|
|
...contentProps,
|
|
ref: composedRefs,
|
|
disableOutsidePointerEvents: false,
|
|
onDismiss: () => {
|
|
const rootContentDismissEvent = new Event(ROOT_CONTENT_DISMISS, {
|
|
bubbles: true,
|
|
cancelable: true
|
|
});
|
|
ref.current?.dispatchEvent(rootContentDismissEvent);
|
|
},
|
|
onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
|
|
onContentFocusOutside();
|
|
const target = event.target;
|
|
if (context.rootNavigationMenu?.contains(target)) event.preventDefault();
|
|
}),
|
|
onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
|
|
const target = event.target;
|
|
const isTrigger = getItems().some((item) => item.ref.current?.contains(target));
|
|
const isRootViewport = context.isRootMenu && context.viewport?.contains(target);
|
|
if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault();
|
|
}),
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
|
|
const isTabKey = event.key === "Tab" && !isMetaKey;
|
|
if (isTabKey) {
|
|
const candidates = getTabbableCandidates2(event.currentTarget);
|
|
const focusedElement = document.activeElement;
|
|
const index2 = candidates.findIndex((candidate) => candidate === focusedElement);
|
|
const isMovingBackwards = event.shiftKey;
|
|
const nextCandidates = isMovingBackwards ? candidates.slice(0, index2).reverse() : candidates.slice(index2 + 1, candidates.length);
|
|
if (focusFirst4(nextCandidates)) {
|
|
event.preventDefault();
|
|
} else {
|
|
focusProxyRef.current?.focus();
|
|
}
|
|
}
|
|
}),
|
|
onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, (_event) => {
|
|
wasEscapeCloseRef.current = true;
|
|
})
|
|
}
|
|
) });
|
|
});
|
|
var VIEWPORT_NAME = "NavigationMenuViewport";
|
|
var NavigationMenuViewport = React52.forwardRef((props, forwardedRef) => {
|
|
const { forceMount, ...viewportProps } = props;
|
|
const context = useNavigationMenuContext(VIEWPORT_NAME, props.__scopeNavigationMenu);
|
|
const open = Boolean(context.value);
|
|
return (0, import_jsx_runtime29.jsx)(Presence, { present: forceMount || open, children: (0, import_jsx_runtime29.jsx)(NavigationMenuViewportImpl, { ...viewportProps, ref: forwardedRef }) });
|
|
});
|
|
NavigationMenuViewport.displayName = VIEWPORT_NAME;
|
|
var NavigationMenuViewportImpl = React52.forwardRef((props, forwardedRef) => {
|
|
const { __scopeNavigationMenu, children, ...viewportImplProps } = props;
|
|
const context = useNavigationMenuContext(VIEWPORT_NAME, __scopeNavigationMenu);
|
|
const composedRefs = useComposedRefs(forwardedRef, context.onViewportChange);
|
|
const viewportContentContext = useViewportContentContext(
|
|
CONTENT_NAME11,
|
|
props.__scopeNavigationMenu
|
|
);
|
|
const [size4, setSize] = React52.useState(null);
|
|
const [content, setContent] = React52.useState(null);
|
|
const viewportWidth = size4 ? size4?.width + "px" : void 0;
|
|
const viewportHeight = size4 ? size4?.height + "px" : void 0;
|
|
const open = Boolean(context.value);
|
|
const activeContentValue = open ? context.value : context.previousValue;
|
|
const handleSizeChange = () => {
|
|
if (content) setSize({ width: content.offsetWidth, height: content.offsetHeight });
|
|
};
|
|
useResizeObserver(content, handleSizeChange);
|
|
return (0, import_jsx_runtime29.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-state": getOpenState2(open),
|
|
"data-orientation": context.orientation,
|
|
...viewportImplProps,
|
|
ref: composedRefs,
|
|
style: {
|
|
// Prevent interaction when animating out
|
|
pointerEvents: !open && context.isRootMenu ? "none" : void 0,
|
|
["--radix-navigation-menu-viewport-width"]: viewportWidth,
|
|
["--radix-navigation-menu-viewport-height"]: viewportHeight,
|
|
...viewportImplProps.style
|
|
},
|
|
onPointerEnter: composeEventHandlers(props.onPointerEnter, context.onContentEnter),
|
|
onPointerLeave: composeEventHandlers(props.onPointerLeave, whenMouse2(context.onContentLeave)),
|
|
children: Array.from(viewportContentContext.items).map(([value, { ref, forceMount, ...props2 }]) => {
|
|
const isActive = activeContentValue === value;
|
|
return (0, import_jsx_runtime29.jsx)(Presence, { present: forceMount || isActive, children: (0, import_jsx_runtime29.jsx)(
|
|
NavigationMenuContentImpl,
|
|
{
|
|
...props2,
|
|
ref: composeRefs(ref, (node) => {
|
|
if (isActive && node) setContent(node);
|
|
})
|
|
}
|
|
) }, value);
|
|
})
|
|
}
|
|
);
|
|
});
|
|
var FOCUS_GROUP_NAME = "FocusGroup";
|
|
var FocusGroup = React52.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeNavigationMenu, ...groupProps } = props;
|
|
const context = useNavigationMenuContext(FOCUS_GROUP_NAME, __scopeNavigationMenu);
|
|
return (0, import_jsx_runtime29.jsx)(FocusGroupCollection.Provider, { scope: __scopeNavigationMenu, children: (0, import_jsx_runtime29.jsx)(FocusGroupCollection.Slot, { scope: __scopeNavigationMenu, children: (0, import_jsx_runtime29.jsx)(Primitive.div, { dir: context.dir, ...groupProps, ref: forwardedRef }) }) });
|
|
}
|
|
);
|
|
var ARROW_KEYS = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"];
|
|
var FOCUS_GROUP_ITEM_NAME = "FocusGroupItem";
|
|
var FocusGroupItem = React52.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeNavigationMenu, ...groupProps } = props;
|
|
const getItems = useFocusGroupCollection(__scopeNavigationMenu);
|
|
const context = useNavigationMenuContext(FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu);
|
|
return (0, import_jsx_runtime29.jsx)(FocusGroupCollection.ItemSlot, { scope: __scopeNavigationMenu, children: (0, import_jsx_runtime29.jsx)(
|
|
Primitive.button,
|
|
{
|
|
...groupProps,
|
|
ref: forwardedRef,
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
const isFocusNavigationKey = ["Home", "End", ...ARROW_KEYS].includes(event.key);
|
|
if (isFocusNavigationKey) {
|
|
let candidateNodes = getItems().map((item) => item.ref.current);
|
|
const prevItemKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
|
|
const prevKeys = [prevItemKey, "ArrowUp", "End"];
|
|
if (prevKeys.includes(event.key)) candidateNodes.reverse();
|
|
if (ARROW_KEYS.includes(event.key)) {
|
|
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
candidateNodes = candidateNodes.slice(currentIndex + 1);
|
|
}
|
|
setTimeout(() => focusFirst4(candidateNodes));
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
function getTabbableCandidates2(container) {
|
|
const nodes = [];
|
|
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
acceptNode: (node) => {
|
|
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
|
|
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
|
|
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
}
|
|
});
|
|
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
return nodes;
|
|
}
|
|
function focusFirst4(candidates) {
|
|
const previouslyFocusedElement = document.activeElement;
|
|
return candidates.some((candidate) => {
|
|
if (candidate === previouslyFocusedElement) return true;
|
|
candidate.focus();
|
|
return document.activeElement !== previouslyFocusedElement;
|
|
});
|
|
}
|
|
function removeFromTabOrder(candidates) {
|
|
candidates.forEach((candidate) => {
|
|
candidate.dataset.tabindex = candidate.getAttribute("tabindex") || "";
|
|
candidate.setAttribute("tabindex", "-1");
|
|
});
|
|
return () => {
|
|
candidates.forEach((candidate) => {
|
|
const prevTabIndex = candidate.dataset.tabindex;
|
|
candidate.setAttribute("tabindex", prevTabIndex);
|
|
});
|
|
};
|
|
}
|
|
function useResizeObserver(element, onResize) {
|
|
const handleResize = useCallbackRef(onResize);
|
|
useLayoutEffect2(() => {
|
|
let rAF = 0;
|
|
if (element) {
|
|
const resizeObserver = new ResizeObserver(() => {
|
|
cancelAnimationFrame(rAF);
|
|
rAF = window.requestAnimationFrame(handleResize);
|
|
});
|
|
resizeObserver.observe(element);
|
|
return () => {
|
|
window.cancelAnimationFrame(rAF);
|
|
resizeObserver.unobserve(element);
|
|
};
|
|
}
|
|
}, [element, handleResize]);
|
|
}
|
|
function getOpenState2(open) {
|
|
return open ? "open" : "closed";
|
|
}
|
|
function makeTriggerId(baseId, value) {
|
|
return `${baseId}-trigger-${value}`;
|
|
}
|
|
function makeContentId(baseId, value) {
|
|
return `${baseId}-content-${value}`;
|
|
}
|
|
function whenMouse2(handler) {
|
|
return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
|
|
}
|
|
var Root29 = NavigationMenu;
|
|
var Sub3 = NavigationMenuSub;
|
|
var List = NavigationMenuList;
|
|
var Item4 = NavigationMenuItem;
|
|
var Trigger8 = NavigationMenuTrigger;
|
|
var Link = NavigationMenuLink;
|
|
var Indicator = NavigationMenuIndicator;
|
|
var Content5 = NavigationMenuContent;
|
|
var Viewport = NavigationMenuViewport;
|
|
|
|
// node_modules/@radix-ui/react-one-time-password-field/dist/index.mjs
|
|
var dist_exports24 = {};
|
|
__export(dist_exports24, {
|
|
HiddenInput: () => OneTimePasswordFieldHiddenInput,
|
|
Input: () => OneTimePasswordFieldInput,
|
|
OneTimePasswordField: () => OneTimePasswordField,
|
|
OneTimePasswordFieldHiddenInput: () => OneTimePasswordFieldHiddenInput,
|
|
OneTimePasswordFieldInput: () => OneTimePasswordFieldInput,
|
|
Root: () => OneTimePasswordField
|
|
});
|
|
var React53 = __toESM(require_react(), 1);
|
|
var import_react_dom4 = __toESM(require_react_dom(), 1);
|
|
|
|
// node_modules/@radix-ui/number/dist/index.mjs
|
|
function clamp2(value, [min2, max2]) {
|
|
return Math.min(max2, Math.max(min2, value));
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-one-time-password-field/dist/index.mjs
|
|
var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
|
|
var INPUT_VALIDATION_MAP = {
|
|
numeric: {
|
|
type: "numeric",
|
|
regexp: /[^\d]/g,
|
|
pattern: "\\d{1}",
|
|
inputMode: "numeric"
|
|
},
|
|
alpha: {
|
|
type: "alpha",
|
|
regexp: /[^a-zA-Z]/g,
|
|
pattern: "[a-zA-Z]{1}",
|
|
inputMode: "text"
|
|
},
|
|
alphanumeric: {
|
|
type: "alphanumeric",
|
|
regexp: /[^a-zA-Z0-9]/g,
|
|
pattern: "[a-zA-Z0-9]{1}",
|
|
inputMode: "text"
|
|
},
|
|
none: null
|
|
};
|
|
var ONE_TIME_PASSWORD_FIELD_NAME = "OneTimePasswordField";
|
|
var [Collection6, { useCollection: useCollection6, createCollectionScope: createCollectionScope6, useInitCollection }] = createCollection2(ONE_TIME_PASSWORD_FIELD_NAME);
|
|
var [createOneTimePasswordFieldContext] = createContextScope(ONE_TIME_PASSWORD_FIELD_NAME, [
|
|
createCollectionScope6,
|
|
createRovingFocusGroupScope
|
|
]);
|
|
var useRovingFocusGroupScope3 = createRovingFocusGroupScope();
|
|
var [OneTimePasswordFieldContext, useOneTimePasswordFieldContext] = createOneTimePasswordFieldContext(ONE_TIME_PASSWORD_FIELD_NAME);
|
|
var OneTimePasswordField = React53.forwardRef(
|
|
function OneTimePasswordFieldImpl({
|
|
__scopeOneTimePasswordField,
|
|
defaultValue,
|
|
value: valueProp,
|
|
onValueChange,
|
|
autoSubmit = false,
|
|
children,
|
|
onPaste,
|
|
onAutoSubmit,
|
|
disabled = false,
|
|
readOnly = false,
|
|
autoComplete = "one-time-code",
|
|
autoFocus = false,
|
|
form,
|
|
name,
|
|
placeholder,
|
|
type = "text",
|
|
// TODO: Change default to vertical when inputs use vertical writing mode
|
|
orientation = "horizontal",
|
|
dir,
|
|
validationType = "numeric",
|
|
sanitizeValue: sanitizeValueProp,
|
|
...domProps
|
|
}, forwardedRef) {
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope3(__scopeOneTimePasswordField);
|
|
const direction = useDirection(dir);
|
|
const collectionState = useInitCollection();
|
|
const [collection] = collectionState;
|
|
const validation = INPUT_VALIDATION_MAP[validationType] ? INPUT_VALIDATION_MAP[validationType] : null;
|
|
const sanitizeValue = React53.useCallback(
|
|
(value2) => {
|
|
if (Array.isArray(value2)) {
|
|
value2 = value2.map(removeWhitespace).join("");
|
|
} else {
|
|
value2 = removeWhitespace(value2);
|
|
}
|
|
if (validation) {
|
|
const regexp = new RegExp(validation.regexp);
|
|
value2 = value2.replace(regexp, "");
|
|
} else if (sanitizeValueProp) {
|
|
value2 = sanitizeValueProp(value2);
|
|
}
|
|
return value2.split("");
|
|
},
|
|
[validation, sanitizeValueProp]
|
|
);
|
|
const controlledValue = React53.useMemo(() => {
|
|
return valueProp != null ? sanitizeValue(valueProp) : void 0;
|
|
}, [valueProp, sanitizeValue]);
|
|
const [value, setValue] = useControllableState({
|
|
caller: "OneTimePasswordField",
|
|
prop: controlledValue,
|
|
defaultProp: defaultValue != null ? sanitizeValue(defaultValue) : [],
|
|
onChange: React53.useCallback(
|
|
(value2) => onValueChange?.(value2.join("")),
|
|
[onValueChange]
|
|
)
|
|
});
|
|
const dispatch = useEffectEvent((action) => {
|
|
switch (action.type) {
|
|
case "SET_CHAR": {
|
|
const { index: index2, char } = action;
|
|
const currentTarget = collection.at(index2)?.element;
|
|
if (value[index2] === char) {
|
|
const next = currentTarget && collection.from(currentTarget, 1)?.element;
|
|
focusInput(next);
|
|
return;
|
|
}
|
|
if (char === "") {
|
|
return;
|
|
}
|
|
if (validation) {
|
|
const regexp = new RegExp(validation.regexp);
|
|
const clean = char.replace(regexp, "");
|
|
if (clean !== char) {
|
|
return;
|
|
}
|
|
}
|
|
if (value.length >= collection.size) {
|
|
const newValue2 = [...value];
|
|
newValue2[index2] = char;
|
|
(0, import_react_dom4.flushSync)(() => setValue(newValue2));
|
|
const next = currentTarget && collection.from(currentTarget, 1)?.element;
|
|
focusInput(next);
|
|
return;
|
|
}
|
|
const newValue = [...value];
|
|
newValue[index2] = char;
|
|
const lastElement = collection.at(-1)?.element;
|
|
(0, import_react_dom4.flushSync)(() => setValue(newValue));
|
|
if (currentTarget !== lastElement) {
|
|
const next = currentTarget && collection.from(currentTarget, 1)?.element;
|
|
focusInput(next);
|
|
} else {
|
|
currentTarget?.select();
|
|
}
|
|
return;
|
|
}
|
|
case "CLEAR_CHAR": {
|
|
const { index: index2, reason } = action;
|
|
if (!value[index2]) {
|
|
return;
|
|
}
|
|
const newValue = value.filter((_, i) => i !== index2);
|
|
const currentTarget = collection.at(index2)?.element;
|
|
const previous = currentTarget && collection.from(currentTarget, -1)?.element;
|
|
(0, import_react_dom4.flushSync)(() => setValue(newValue));
|
|
if (reason === "Backspace") {
|
|
focusInput(previous);
|
|
} else if (reason === "Delete" || reason === "Cut") {
|
|
focusInput(currentTarget);
|
|
}
|
|
return;
|
|
}
|
|
case "CLEAR": {
|
|
if (value.length === 0) {
|
|
return;
|
|
}
|
|
if (action.reason === "Backspace" || action.reason === "Delete") {
|
|
(0, import_react_dom4.flushSync)(() => setValue([]));
|
|
focusInput(collection.at(0)?.element);
|
|
} else {
|
|
setValue([]);
|
|
}
|
|
return;
|
|
}
|
|
case "PASTE": {
|
|
const { value: pastedValue } = action;
|
|
const value2 = sanitizeValue(pastedValue);
|
|
if (!value2) {
|
|
return;
|
|
}
|
|
(0, import_react_dom4.flushSync)(() => setValue(value2));
|
|
focusInput(collection.at(value2.length - 1)?.element);
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
const validationTypeRef = React53.useRef(validation);
|
|
React53.useEffect(() => {
|
|
if (!validation) {
|
|
return;
|
|
}
|
|
if (validationTypeRef.current?.type !== validation.type) {
|
|
validationTypeRef.current = validation;
|
|
setValue(sanitizeValue(value.join("")));
|
|
}
|
|
}, [sanitizeValue, setValue, validation, value]);
|
|
const hiddenInputRef = React53.useRef(null);
|
|
const userActionRef = React53.useRef(null);
|
|
const rootRef = React53.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, rootRef);
|
|
const firstInput = collection.at(0)?.element;
|
|
const locateForm = React53.useCallback(() => {
|
|
let formElement;
|
|
if (form) {
|
|
const associatedElement = (rootRef.current?.ownerDocument ?? document).getElementById(form);
|
|
if (isFormElement(associatedElement)) {
|
|
formElement = associatedElement;
|
|
}
|
|
} else if (hiddenInputRef.current) {
|
|
formElement = hiddenInputRef.current.form;
|
|
} else if (firstInput) {
|
|
formElement = firstInput.form;
|
|
}
|
|
return formElement ?? null;
|
|
}, [form, firstInput]);
|
|
const attemptSubmit = React53.useCallback(() => {
|
|
const formElement = locateForm();
|
|
formElement?.requestSubmit();
|
|
}, [locateForm]);
|
|
React53.useEffect(() => {
|
|
const form2 = locateForm();
|
|
if (form2) {
|
|
const reset = () => dispatch({ type: "CLEAR", reason: "Reset" });
|
|
form2.addEventListener("reset", reset);
|
|
return () => form2.removeEventListener("reset", reset);
|
|
}
|
|
}, [dispatch, locateForm]);
|
|
const currentValue = value.join("");
|
|
const valueRef = React53.useRef(currentValue);
|
|
const length = collection.size;
|
|
React53.useEffect(() => {
|
|
const previousValue = valueRef.current;
|
|
valueRef.current = currentValue;
|
|
if (previousValue === currentValue) {
|
|
return;
|
|
}
|
|
if (autoSubmit && value.every((char) => char !== "") && value.length === length) {
|
|
onAutoSubmit?.(value.join(""));
|
|
attemptSubmit();
|
|
}
|
|
}, [attemptSubmit, autoSubmit, currentValue, length, onAutoSubmit, value]);
|
|
const isHydrated = useIsHydrated();
|
|
return (0, import_jsx_runtime30.jsx)(
|
|
OneTimePasswordFieldContext,
|
|
{
|
|
scope: __scopeOneTimePasswordField,
|
|
value,
|
|
attemptSubmit,
|
|
disabled,
|
|
readOnly,
|
|
autoComplete,
|
|
autoFocus,
|
|
form,
|
|
name,
|
|
placeholder,
|
|
type,
|
|
hiddenInputRef,
|
|
userActionRef,
|
|
dispatch,
|
|
validationType,
|
|
orientation,
|
|
isHydrated,
|
|
sanitizeValue,
|
|
children: (0, import_jsx_runtime30.jsx)(Collection6.Provider, { scope: __scopeOneTimePasswordField, state: collectionState, children: (0, import_jsx_runtime30.jsx)(Collection6.Slot, { scope: __scopeOneTimePasswordField, children: (0, import_jsx_runtime30.jsx)(
|
|
Root10,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
orientation,
|
|
dir: direction,
|
|
children: (0, import_jsx_runtime30.jsx)(
|
|
Root.div,
|
|
{
|
|
...domProps,
|
|
role: "group",
|
|
ref: composedRefs,
|
|
onPaste: composeEventHandlers(
|
|
onPaste,
|
|
(event) => {
|
|
event.preventDefault();
|
|
const pastedValue = event.clipboardData.getData("Text");
|
|
dispatch({ type: "PASTE", value: pastedValue });
|
|
}
|
|
),
|
|
children
|
|
}
|
|
)
|
|
}
|
|
) }) })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var OneTimePasswordFieldHiddenInput = React53.forwardRef(function OneTimePasswordFieldHiddenInput2({ __scopeOneTimePasswordField, ...props }, forwardedRef) {
|
|
const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(
|
|
"OneTimePasswordFieldHiddenInput",
|
|
__scopeOneTimePasswordField
|
|
);
|
|
const ref = useComposedRefs(hiddenInputRef, forwardedRef);
|
|
return (0, import_jsx_runtime30.jsx)(
|
|
"input",
|
|
{
|
|
ref,
|
|
name,
|
|
value: value.join("").trim(),
|
|
autoComplete: "off",
|
|
autoFocus: false,
|
|
autoCapitalize: "off",
|
|
autoCorrect: "off",
|
|
autoSave: "off",
|
|
spellCheck: false,
|
|
...props,
|
|
type: "hidden",
|
|
readOnly: true
|
|
}
|
|
);
|
|
});
|
|
var OneTimePasswordFieldInput = React53.forwardRef(function OneTimePasswordFieldInput2({
|
|
__scopeOneTimePasswordField,
|
|
onInvalidChange,
|
|
index: indexProp,
|
|
...props
|
|
}, forwardedRef) {
|
|
const {
|
|
value: _value,
|
|
defaultValue: _defaultValue,
|
|
disabled: _disabled,
|
|
readOnly: _readOnly,
|
|
autoComplete: _autoComplete,
|
|
autoFocus: _autoFocus,
|
|
form: _form,
|
|
name: _name,
|
|
placeholder: _placeholder,
|
|
type: _type,
|
|
...domProps
|
|
} = props;
|
|
const context = useOneTimePasswordFieldContext(
|
|
"OneTimePasswordFieldInput",
|
|
__scopeOneTimePasswordField
|
|
);
|
|
const { dispatch, userActionRef, validationType, isHydrated, disabled } = context;
|
|
const collection = useCollection6(__scopeOneTimePasswordField);
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope3(__scopeOneTimePasswordField);
|
|
const inputRef = React53.useRef(null);
|
|
const [element, setElement] = React53.useState(null);
|
|
const index2 = indexProp ?? (element ? collection.indexOf(element) : -1);
|
|
const canSetPlaceholder = indexProp != null || isHydrated;
|
|
let placeholder;
|
|
if (canSetPlaceholder && context.placeholder && context.value.length === 0) {
|
|
placeholder = context.placeholder[index2];
|
|
}
|
|
const composedInputRef = useComposedRefs(forwardedRef, inputRef, setElement);
|
|
const char = context.value[index2] ?? "";
|
|
const keyboardActionTimeoutRef = React53.useRef(null);
|
|
React53.useEffect(() => {
|
|
return () => {
|
|
window.clearTimeout(keyboardActionTimeoutRef.current);
|
|
};
|
|
}, []);
|
|
const totalValue = context.value.join("").trim();
|
|
const lastSelectableIndex = clamp2(totalValue.length, [0, collection.size - 1]);
|
|
const isFocusable = index2 <= lastSelectableIndex;
|
|
const validation = validationType in INPUT_VALIDATION_MAP ? INPUT_VALIDATION_MAP[validationType] : void 0;
|
|
return (0, import_jsx_runtime30.jsx)(Collection6.ItemSlot, { scope: __scopeOneTimePasswordField, children: (0, import_jsx_runtime30.jsx)(
|
|
Item2,
|
|
{
|
|
...rovingFocusGroupScope,
|
|
asChild: true,
|
|
focusable: !context.disabled && isFocusable,
|
|
active: index2 === lastSelectableIndex,
|
|
children: ({ hasTabStop, isCurrentTabStop }) => {
|
|
const supportsAutoComplete = hasTabStop ? isCurrentTabStop : index2 === 0;
|
|
return (0, import_jsx_runtime30.jsx)(
|
|
Root.input,
|
|
{
|
|
ref: composedInputRef,
|
|
type: context.type,
|
|
disabled,
|
|
"aria-label": `Character ${index2 + 1} of ${collection.size}`,
|
|
autoComplete: supportsAutoComplete ? context.autoComplete : "off",
|
|
"data-1p-ignore": supportsAutoComplete ? void 0 : "true",
|
|
"data-lpignore": supportsAutoComplete ? void 0 : "true",
|
|
"data-protonpass-ignore": supportsAutoComplete ? void 0 : "true",
|
|
"data-bwignore": supportsAutoComplete ? void 0 : "true",
|
|
inputMode: validation?.inputMode,
|
|
maxLength: 1,
|
|
pattern: validation?.pattern,
|
|
readOnly: context.readOnly,
|
|
value: char,
|
|
placeholder,
|
|
"data-radix-otp-input": "",
|
|
"data-radix-index": index2,
|
|
...domProps,
|
|
onFocus: composeEventHandlers(props.onFocus, (event) => {
|
|
event.currentTarget.select();
|
|
}),
|
|
onCut: composeEventHandlers(props.onCut, (event) => {
|
|
const currentValue = event.currentTarget.value;
|
|
if (currentValue !== "") {
|
|
userActionRef.current = {
|
|
type: "cut"
|
|
};
|
|
keyboardActionTimeoutRef.current = window.setTimeout(() => {
|
|
userActionRef.current = null;
|
|
}, 10);
|
|
}
|
|
}),
|
|
onInput: composeEventHandlers(props.onInput, (event) => {
|
|
const value = event.currentTarget.value;
|
|
if (value.length > 1) {
|
|
event.preventDefault();
|
|
dispatch({ type: "PASTE", value });
|
|
}
|
|
}),
|
|
onChange: composeEventHandlers(props.onChange, (event) => {
|
|
const value = event.target.value;
|
|
event.preventDefault();
|
|
const action = userActionRef.current;
|
|
userActionRef.current = null;
|
|
if (action) {
|
|
switch (action.type) {
|
|
case "cut":
|
|
dispatch({ type: "CLEAR_CHAR", index: index2, reason: "Cut" });
|
|
return;
|
|
case "keydown": {
|
|
if (action.key === "Char") {
|
|
return;
|
|
}
|
|
const isClearing = action.key === "Backspace" && (action.metaKey || action.ctrlKey);
|
|
if (action.key === "Clear" || isClearing) {
|
|
dispatch({ type: "CLEAR", reason: "Backspace" });
|
|
} else {
|
|
dispatch({ type: "CLEAR_CHAR", index: index2, reason: action.key });
|
|
}
|
|
return;
|
|
}
|
|
default:
|
|
return;
|
|
}
|
|
}
|
|
if (event.target.validity.valid) {
|
|
if (value === "") {
|
|
let reason = "Backspace";
|
|
if (isInputEvent(event.nativeEvent)) {
|
|
const inputType = event.nativeEvent.inputType;
|
|
if (inputType === "deleteContentBackward") {
|
|
reason = "Backspace";
|
|
} else if (inputType === "deleteByCut") {
|
|
reason = "Cut";
|
|
}
|
|
}
|
|
dispatch({ type: "CLEAR_CHAR", index: index2, reason });
|
|
} else {
|
|
dispatch({ type: "SET_CHAR", char: value, index: index2, event });
|
|
}
|
|
} else {
|
|
const element2 = event.target;
|
|
onInvalidChange?.(element2.value);
|
|
requestAnimationFrame(() => {
|
|
if (element2.ownerDocument.activeElement === element2) {
|
|
element2.select();
|
|
}
|
|
});
|
|
}
|
|
}),
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
switch (event.key) {
|
|
case "Clear":
|
|
case "Delete":
|
|
case "Backspace": {
|
|
const currentValue = event.currentTarget.value;
|
|
if (currentValue === "") {
|
|
if (event.key === "Delete") return;
|
|
const isClearing = event.key === "Clear" || event.metaKey || event.ctrlKey;
|
|
if (isClearing) {
|
|
dispatch({ type: "CLEAR", reason: "Backspace" });
|
|
} else {
|
|
const element2 = event.currentTarget;
|
|
requestAnimationFrame(() => {
|
|
focusInput(collection.from(element2, -1)?.element);
|
|
});
|
|
}
|
|
} else {
|
|
userActionRef.current = {
|
|
type: "keydown",
|
|
key: event.key,
|
|
metaKey: event.metaKey,
|
|
ctrlKey: event.ctrlKey
|
|
};
|
|
keyboardActionTimeoutRef.current = window.setTimeout(() => {
|
|
userActionRef.current = null;
|
|
}, 10);
|
|
}
|
|
return;
|
|
}
|
|
case "Enter": {
|
|
event.preventDefault();
|
|
context.attemptSubmit();
|
|
return;
|
|
}
|
|
case "ArrowDown":
|
|
case "ArrowUp": {
|
|
if (context.orientation === "horizontal") {
|
|
event.preventDefault();
|
|
}
|
|
return;
|
|
}
|
|
// TODO: Handle left/right arrow keys in vertical writing mode
|
|
default: {
|
|
if (event.currentTarget.value === event.key) {
|
|
const element2 = event.currentTarget;
|
|
event.preventDefault();
|
|
focusInput(collection.from(element2, 1)?.element);
|
|
return;
|
|
} else if (
|
|
// input already has a value, but...
|
|
event.currentTarget.value && // the value is not selected
|
|
!(event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd != null && event.currentTarget.selectionEnd > 0)
|
|
) {
|
|
const attemptedValue = event.key;
|
|
if (event.key.length > 1 || event.key === " ") {
|
|
return;
|
|
} else {
|
|
const nextInput = collection.from(event.currentTarget, 1)?.element;
|
|
const lastInput = collection.at(-1)?.element;
|
|
if (nextInput !== lastInput && event.currentTarget !== lastInput) {
|
|
if (event.currentTarget.selectionStart === 0) {
|
|
dispatch({ type: "SET_CHAR", char: attemptedValue, index: index2, event });
|
|
} else {
|
|
dispatch({
|
|
type: "SET_CHAR",
|
|
char: attemptedValue,
|
|
index: index2 + 1,
|
|
event
|
|
});
|
|
}
|
|
userActionRef.current = {
|
|
type: "keydown",
|
|
key: "Char",
|
|
metaKey: event.metaKey,
|
|
ctrlKey: event.ctrlKey
|
|
};
|
|
keyboardActionTimeoutRef.current = window.setTimeout(() => {
|
|
userActionRef.current = null;
|
|
}, 10);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}),
|
|
onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
|
|
event.preventDefault();
|
|
const indexToFocus = Math.min(index2, lastSelectableIndex);
|
|
const element2 = collection.at(indexToFocus)?.element;
|
|
focusInput(element2);
|
|
})
|
|
}
|
|
);
|
|
}
|
|
}
|
|
) });
|
|
});
|
|
function isFormElement(element) {
|
|
return element?.tagName === "FORM";
|
|
}
|
|
function removeWhitespace(value) {
|
|
return value.replace(/\s/g, "");
|
|
}
|
|
function focusInput(element) {
|
|
if (!element) return;
|
|
if (element.ownerDocument.activeElement === element) {
|
|
window.requestAnimationFrame(() => {
|
|
element.select?.();
|
|
});
|
|
} else {
|
|
element.focus();
|
|
}
|
|
}
|
|
function isInputEvent(event) {
|
|
return event.type === "input";
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-password-toggle-field/dist/index.mjs
|
|
var dist_exports26 = {};
|
|
__export(dist_exports26, {
|
|
Icon: () => PasswordToggleFieldIcon,
|
|
Input: () => PasswordToggleFieldInput,
|
|
PasswordToggleField: () => PasswordToggleField,
|
|
PasswordToggleFieldIcon: () => PasswordToggleFieldIcon,
|
|
PasswordToggleFieldInput: () => PasswordToggleFieldInput,
|
|
PasswordToggleFieldSlot: () => PasswordToggleFieldSlot,
|
|
PasswordToggleFieldToggle: () => PasswordToggleFieldToggle,
|
|
Root: () => PasswordToggleField,
|
|
Slot: () => PasswordToggleFieldSlot,
|
|
Toggle: () => PasswordToggleFieldToggle
|
|
});
|
|
var React54 = __toESM(require_react(), 1);
|
|
var import_react_dom5 = __toESM(require_react_dom(), 1);
|
|
var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
|
|
var PASSWORD_TOGGLE_FIELD_NAME = "PasswordToggleField";
|
|
var [createPasswordToggleFieldContext] = createContextScope(PASSWORD_TOGGLE_FIELD_NAME);
|
|
var [PasswordToggleFieldProvider, usePasswordToggleFieldContext] = createPasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_NAME);
|
|
var INITIAL_FOCUS_STATE = {
|
|
clickTriggered: false,
|
|
selectionStart: null,
|
|
selectionEnd: null
|
|
};
|
|
var PasswordToggleField = ({
|
|
__scopePasswordToggleField,
|
|
...props
|
|
}) => {
|
|
const baseId = useId(props.id);
|
|
const defaultInputId = `${baseId}-input`;
|
|
const [inputIdState, setInputIdState] = React54.useState(defaultInputId);
|
|
const inputId = inputIdState ?? defaultInputId;
|
|
const syncInputId = React54.useCallback(
|
|
(providedId) => setInputIdState(providedId != null ? String(providedId) : null),
|
|
[]
|
|
);
|
|
const { visible: visibleProp, defaultVisible, onVisiblityChange, children } = props;
|
|
const [visible = false, setVisible] = useControllableState({
|
|
caller: PASSWORD_TOGGLE_FIELD_NAME,
|
|
prop: visibleProp,
|
|
defaultProp: defaultVisible ?? false,
|
|
onChange: onVisiblityChange
|
|
});
|
|
const inputRef = React54.useRef(null);
|
|
const focusState = React54.useRef(INITIAL_FOCUS_STATE);
|
|
return (0, import_jsx_runtime31.jsx)(
|
|
PasswordToggleFieldProvider,
|
|
{
|
|
scope: __scopePasswordToggleField,
|
|
inputId,
|
|
inputRef,
|
|
setVisible,
|
|
syncInputId,
|
|
visible,
|
|
focusState,
|
|
children
|
|
}
|
|
);
|
|
};
|
|
PasswordToggleField.displayName = PASSWORD_TOGGLE_FIELD_NAME;
|
|
var PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Input";
|
|
var PasswordToggleFieldInput = React54.forwardRef(
|
|
({
|
|
__scopePasswordToggleField,
|
|
autoComplete = "current-password",
|
|
autoCapitalize = "off",
|
|
spellCheck = false,
|
|
id: idProp,
|
|
...props
|
|
}, forwardedRef) => {
|
|
const { visible, inputRef, inputId, syncInputId, setVisible, focusState } = usePasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_INPUT_NAME, __scopePasswordToggleField);
|
|
React54.useEffect(() => {
|
|
syncInputId(idProp);
|
|
}, [idProp, syncInputId]);
|
|
const _setVisible = useEffectEvent(setVisible);
|
|
React54.useEffect(() => {
|
|
const inputElement = inputRef.current;
|
|
const form = inputElement?.form;
|
|
if (!form) {
|
|
return;
|
|
}
|
|
const controller = new AbortController();
|
|
form.addEventListener(
|
|
"reset",
|
|
(event) => {
|
|
if (!event.defaultPrevented) {
|
|
_setVisible(false);
|
|
}
|
|
},
|
|
{ signal: controller.signal }
|
|
);
|
|
form.addEventListener(
|
|
"submit",
|
|
() => {
|
|
_setVisible(false);
|
|
},
|
|
{ signal: controller.signal }
|
|
);
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [inputRef, _setVisible]);
|
|
return (0, import_jsx_runtime31.jsx)(
|
|
Primitive.input,
|
|
{
|
|
...props,
|
|
id: idProp ?? inputId,
|
|
autoCapitalize,
|
|
autoComplete,
|
|
ref: useComposedRefs(forwardedRef, inputRef),
|
|
spellCheck,
|
|
type: visible ? "text" : "password",
|
|
onBlur: composeEventHandlers(props.onBlur, (event) => {
|
|
const { selectionStart, selectionEnd } = event.currentTarget;
|
|
focusState.current.selectionStart = selectionStart;
|
|
focusState.current.selectionEnd = selectionEnd;
|
|
})
|
|
}
|
|
);
|
|
}
|
|
);
|
|
PasswordToggleFieldInput.displayName = PASSWORD_TOGGLE_FIELD_INPUT_NAME;
|
|
var PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Toggle";
|
|
var PasswordToggleFieldToggle = React54.forwardRef(
|
|
({
|
|
__scopePasswordToggleField,
|
|
onClick,
|
|
onPointerDown,
|
|
onPointerCancel,
|
|
onPointerUp,
|
|
onFocus,
|
|
children,
|
|
"aria-label": ariaLabelProp,
|
|
"aria-controls": ariaControls,
|
|
"aria-hidden": ariaHidden,
|
|
tabIndex,
|
|
...props
|
|
}, forwardedRef) => {
|
|
const { setVisible, visible, inputRef, inputId, focusState } = usePasswordToggleFieldContext(
|
|
PASSWORD_TOGGLE_FIELD_TOGGLE_NAME,
|
|
__scopePasswordToggleField
|
|
);
|
|
const [internalAriaLabel, setInternalAriaLabel] = React54.useState(void 0);
|
|
const elementRef = React54.useRef(null);
|
|
const ref = useComposedRefs(forwardedRef, elementRef);
|
|
const isHydrated = useIsHydrated();
|
|
React54.useEffect(() => {
|
|
const element = elementRef.current;
|
|
if (!element || ariaLabelProp) {
|
|
setInternalAriaLabel(void 0);
|
|
return;
|
|
}
|
|
const DEFAULT_ARIA_LABEL = visible ? "Hide password" : "Show password";
|
|
function checkForInnerTextLabel(textContent) {
|
|
const text = textContent ? textContent : void 0;
|
|
setInternalAriaLabel(text ? void 0 : DEFAULT_ARIA_LABEL);
|
|
}
|
|
checkForInnerTextLabel(element.textContent);
|
|
const observer = new MutationObserver((entries) => {
|
|
let textContent;
|
|
for (const entry of entries) {
|
|
if (entry.type === "characterData") {
|
|
if (element.textContent) {
|
|
textContent = element.textContent;
|
|
}
|
|
}
|
|
}
|
|
checkForInnerTextLabel(textContent);
|
|
});
|
|
observer.observe(element, { characterData: true, subtree: true });
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, [visible, ariaLabelProp]);
|
|
const ariaLabel = ariaLabelProp || internalAriaLabel;
|
|
if (!isHydrated) {
|
|
ariaHidden ??= true;
|
|
tabIndex ??= -1;
|
|
} else {
|
|
ariaControls ??= inputId;
|
|
}
|
|
React54.useEffect(() => {
|
|
let cleanup = () => {
|
|
};
|
|
const ownerWindow = elementRef.current?.ownerDocument?.defaultView || window;
|
|
const reset = () => focusState.current.clickTriggered = false;
|
|
const handlePointerUp = () => cleanup = requestIdleCallback(ownerWindow, reset);
|
|
ownerWindow.addEventListener("pointerup", handlePointerUp);
|
|
return () => {
|
|
cleanup();
|
|
ownerWindow.removeEventListener("pointerup", handlePointerUp);
|
|
};
|
|
}, [focusState]);
|
|
return (0, import_jsx_runtime31.jsx)(
|
|
Primitive.button,
|
|
{
|
|
"aria-controls": ariaControls,
|
|
"aria-hidden": ariaHidden,
|
|
"aria-label": ariaLabel,
|
|
ref,
|
|
id: inputId,
|
|
...props,
|
|
onPointerDown: composeEventHandlers(onPointerDown, () => {
|
|
focusState.current.clickTriggered = true;
|
|
}),
|
|
onPointerCancel: (event) => {
|
|
onPointerCancel?.(event);
|
|
focusState.current = INITIAL_FOCUS_STATE;
|
|
},
|
|
onClick: (event) => {
|
|
onClick?.(event);
|
|
if (event.defaultPrevented) {
|
|
focusState.current = INITIAL_FOCUS_STATE;
|
|
return;
|
|
}
|
|
(0, import_react_dom5.flushSync)(() => {
|
|
setVisible((s) => !s);
|
|
});
|
|
if (focusState.current.clickTriggered) {
|
|
const input = inputRef.current;
|
|
if (input) {
|
|
const { selectionStart, selectionEnd } = focusState.current;
|
|
input.focus();
|
|
if (selectionStart !== null || selectionEnd !== null) {
|
|
requestAnimationFrame(() => {
|
|
if (input.ownerDocument.activeElement === input) {
|
|
input.selectionStart = selectionStart;
|
|
input.selectionEnd = selectionEnd;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
focusState.current = INITIAL_FOCUS_STATE;
|
|
},
|
|
onPointerUp: (event) => {
|
|
onPointerUp?.(event);
|
|
setTimeout(() => {
|
|
focusState.current = INITIAL_FOCUS_STATE;
|
|
}, 50);
|
|
},
|
|
type: "button",
|
|
children
|
|
}
|
|
);
|
|
}
|
|
);
|
|
PasswordToggleFieldToggle.displayName = PASSWORD_TOGGLE_FIELD_TOGGLE_NAME;
|
|
var PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Slot";
|
|
var PasswordToggleFieldSlot = ({
|
|
__scopePasswordToggleField,
|
|
...props
|
|
}) => {
|
|
const { visible } = usePasswordToggleFieldContext(
|
|
PASSWORD_TOGGLE_FIELD_SLOT_NAME,
|
|
__scopePasswordToggleField
|
|
);
|
|
return "render" in props ? (
|
|
//
|
|
props.render({ visible })
|
|
) : visible ? props.visible : props.hidden;
|
|
};
|
|
PasswordToggleFieldSlot.displayName = PASSWORD_TOGGLE_FIELD_SLOT_NAME;
|
|
var PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Icon";
|
|
var PasswordToggleFieldIcon = React54.forwardRef(
|
|
({
|
|
__scopePasswordToggleField,
|
|
// @ts-expect-error
|
|
children,
|
|
...props
|
|
}, forwardedRef) => {
|
|
const { visible } = usePasswordToggleFieldContext(
|
|
PASSWORD_TOGGLE_FIELD_ICON_NAME,
|
|
__scopePasswordToggleField
|
|
);
|
|
const { visible: visibleIcon, hidden: hiddenIcon, ...domProps } = props;
|
|
return (0, import_jsx_runtime31.jsx)(Primitive.svg, { ...domProps, ref: forwardedRef, "aria-hidden": true, asChild: true, children: visible ? visibleIcon : hiddenIcon });
|
|
}
|
|
);
|
|
PasswordToggleFieldIcon.displayName = PASSWORD_TOGGLE_FIELD_ICON_NAME;
|
|
function requestIdleCallback(window2, callback, options) {
|
|
if (window2.requestIdleCallback) {
|
|
const id2 = window2.requestIdleCallback(callback, options);
|
|
return () => {
|
|
window2.cancelIdleCallback(id2);
|
|
};
|
|
}
|
|
const start = Date.now();
|
|
const id = window2.setTimeout(() => {
|
|
const timeRemaining = () => Math.max(0, 50 - (Date.now() - start));
|
|
callback({ didTimeout: false, timeRemaining });
|
|
}, 1);
|
|
return () => {
|
|
window2.clearTimeout(id);
|
|
};
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-popover/dist/index.mjs
|
|
var dist_exports27 = {};
|
|
__export(dist_exports27, {
|
|
Anchor: () => Anchor22,
|
|
Arrow: () => Arrow27,
|
|
Close: () => Close2,
|
|
Content: () => Content28,
|
|
Popover: () => Popover,
|
|
PopoverAnchor: () => PopoverAnchor,
|
|
PopoverArrow: () => PopoverArrow,
|
|
PopoverClose: () => PopoverClose,
|
|
PopoverContent: () => PopoverContent,
|
|
PopoverPortal: () => PopoverPortal,
|
|
PopoverTrigger: () => PopoverTrigger,
|
|
Portal: () => Portal5,
|
|
Root: () => Root210,
|
|
Trigger: () => Trigger9,
|
|
createPopoverScope: () => createPopoverScope
|
|
});
|
|
var React55 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
|
|
var POPOVER_NAME = "Popover";
|
|
var [createPopoverContext, createPopoverScope] = createContextScope(POPOVER_NAME, [
|
|
createPopperScope
|
|
]);
|
|
var usePopperScope3 = createPopperScope();
|
|
var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
|
|
var Popover = (props) => {
|
|
const {
|
|
__scopePopover,
|
|
children,
|
|
open: openProp,
|
|
defaultOpen,
|
|
onOpenChange,
|
|
modal = false
|
|
} = props;
|
|
const popperScope = usePopperScope3(__scopePopover);
|
|
const triggerRef = React55.useRef(null);
|
|
const [hasCustomAnchor, setHasCustomAnchor] = React55.useState(false);
|
|
const [open, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen ?? false,
|
|
onChange: onOpenChange,
|
|
caller: POPOVER_NAME
|
|
});
|
|
return (0, import_jsx_runtime32.jsx)(Root25, { ...popperScope, children: (0, import_jsx_runtime32.jsx)(
|
|
PopoverProvider,
|
|
{
|
|
scope: __scopePopover,
|
|
contentId: useId(),
|
|
triggerRef,
|
|
open,
|
|
onOpenChange: setOpen,
|
|
onOpenToggle: React55.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
hasCustomAnchor,
|
|
onCustomAnchorAdd: React55.useCallback(() => setHasCustomAnchor(true), []),
|
|
onCustomAnchorRemove: React55.useCallback(() => setHasCustomAnchor(false), []),
|
|
modal,
|
|
children
|
|
}
|
|
) });
|
|
};
|
|
Popover.displayName = POPOVER_NAME;
|
|
var ANCHOR_NAME3 = "PopoverAnchor";
|
|
var PopoverAnchor = React55.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopePopover, ...anchorProps } = props;
|
|
const context = usePopoverContext(ANCHOR_NAME3, __scopePopover);
|
|
const popperScope = usePopperScope3(__scopePopover);
|
|
const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
|
|
React55.useEffect(() => {
|
|
onCustomAnchorAdd();
|
|
return () => onCustomAnchorRemove();
|
|
}, [onCustomAnchorAdd, onCustomAnchorRemove]);
|
|
return (0, import_jsx_runtime32.jsx)(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
PopoverAnchor.displayName = ANCHOR_NAME3;
|
|
var TRIGGER_NAME11 = "PopoverTrigger";
|
|
var PopoverTrigger = React55.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopePopover, ...triggerProps } = props;
|
|
const context = usePopoverContext(TRIGGER_NAME11, __scopePopover);
|
|
const popperScope = usePopperScope3(__scopePopover);
|
|
const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
|
|
const trigger = (0, import_jsx_runtime32.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
"aria-haspopup": "dialog",
|
|
"aria-expanded": context.open,
|
|
"aria-controls": context.contentId,
|
|
"data-state": getState5(context.open),
|
|
...triggerProps,
|
|
ref: composedTriggerRef,
|
|
onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
|
|
}
|
|
);
|
|
return context.hasCustomAnchor ? trigger : (0, import_jsx_runtime32.jsx)(Anchor, { asChild: true, ...popperScope, children: trigger });
|
|
}
|
|
);
|
|
PopoverTrigger.displayName = TRIGGER_NAME11;
|
|
var PORTAL_NAME9 = "PopoverPortal";
|
|
var [PortalProvider4, usePortalContext4] = createPopoverContext(PORTAL_NAME9, {
|
|
forceMount: void 0
|
|
});
|
|
var PopoverPortal = (props) => {
|
|
const { __scopePopover, forceMount, children, container } = props;
|
|
const context = usePopoverContext(PORTAL_NAME9, __scopePopover);
|
|
return (0, import_jsx_runtime32.jsx)(PortalProvider4, { scope: __scopePopover, forceMount, children: (0, import_jsx_runtime32.jsx)(Presence, { present: forceMount || context.open, children: (0, import_jsx_runtime32.jsx)(Portal, { asChild: true, container, children }) }) });
|
|
};
|
|
PopoverPortal.displayName = PORTAL_NAME9;
|
|
var CONTENT_NAME12 = "PopoverContent";
|
|
var PopoverContent = React55.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const portalContext = usePortalContext4(CONTENT_NAME12, props.__scopePopover);
|
|
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
const context = usePopoverContext(CONTENT_NAME12, props.__scopePopover);
|
|
return (0, import_jsx_runtime32.jsx)(Presence, { present: forceMount || context.open, children: context.modal ? (0, import_jsx_runtime32.jsx)(PopoverContentModal, { ...contentProps, ref: forwardedRef }) : (0, import_jsx_runtime32.jsx)(PopoverContentNonModal, { ...contentProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
PopoverContent.displayName = CONTENT_NAME12;
|
|
var Slot4 = createSlot("PopoverContent.RemoveScroll");
|
|
var PopoverContentModal = React55.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const context = usePopoverContext(CONTENT_NAME12, props.__scopePopover);
|
|
const contentRef = React55.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
const isRightClickOutsideRef = React55.useRef(false);
|
|
React55.useEffect(() => {
|
|
const content = contentRef.current;
|
|
if (content) return hideOthers(content);
|
|
}, []);
|
|
return (0, import_jsx_runtime32.jsx)(Combination_default, { as: Slot4, allowPinchZoom: true, children: (0, import_jsx_runtime32.jsx)(
|
|
PopoverContentImpl,
|
|
{
|
|
...props,
|
|
ref: composedRefs,
|
|
trapFocus: context.open,
|
|
disableOutsidePointerEvents: true,
|
|
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
event.preventDefault();
|
|
if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();
|
|
}),
|
|
onPointerDownOutside: composeEventHandlers(
|
|
props.onPointerDownOutside,
|
|
(event) => {
|
|
const originalEvent = event.detail.originalEvent;
|
|
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
isRightClickOutsideRef.current = isRightClick;
|
|
},
|
|
{ checkForDefaultPrevented: false }
|
|
),
|
|
onFocusOutside: composeEventHandlers(
|
|
props.onFocusOutside,
|
|
(event) => event.preventDefault(),
|
|
{ checkForDefaultPrevented: false }
|
|
)
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
var PopoverContentNonModal = React55.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const context = usePopoverContext(CONTENT_NAME12, props.__scopePopover);
|
|
const hasInteractedOutsideRef = React55.useRef(false);
|
|
const hasPointerDownOutsideRef = React55.useRef(false);
|
|
return (0, import_jsx_runtime32.jsx)(
|
|
PopoverContentImpl,
|
|
{
|
|
...props,
|
|
ref: forwardedRef,
|
|
trapFocus: false,
|
|
disableOutsidePointerEvents: false,
|
|
onCloseAutoFocus: (event) => {
|
|
props.onCloseAutoFocus?.(event);
|
|
if (!event.defaultPrevented) {
|
|
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
|
|
event.preventDefault();
|
|
}
|
|
hasInteractedOutsideRef.current = false;
|
|
hasPointerDownOutsideRef.current = false;
|
|
},
|
|
onInteractOutside: (event) => {
|
|
props.onInteractOutside?.(event);
|
|
if (!event.defaultPrevented) {
|
|
hasInteractedOutsideRef.current = true;
|
|
if (event.detail.originalEvent.type === "pointerdown") {
|
|
hasPointerDownOutsideRef.current = true;
|
|
}
|
|
}
|
|
const target = event.target;
|
|
const targetIsTrigger = context.triggerRef.current?.contains(target);
|
|
if (targetIsTrigger) event.preventDefault();
|
|
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var PopoverContentImpl = React55.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopePopover,
|
|
trapFocus,
|
|
onOpenAutoFocus,
|
|
onCloseAutoFocus,
|
|
disableOutsidePointerEvents,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside,
|
|
onInteractOutside,
|
|
...contentProps
|
|
} = props;
|
|
const context = usePopoverContext(CONTENT_NAME12, __scopePopover);
|
|
const popperScope = usePopperScope3(__scopePopover);
|
|
useFocusGuards();
|
|
return (0, import_jsx_runtime32.jsx)(
|
|
FocusScope,
|
|
{
|
|
asChild: true,
|
|
loop: true,
|
|
trapped: trapFocus,
|
|
onMountAutoFocus: onOpenAutoFocus,
|
|
onUnmountAutoFocus: onCloseAutoFocus,
|
|
children: (0, import_jsx_runtime32.jsx)(
|
|
DismissableLayer,
|
|
{
|
|
asChild: true,
|
|
disableOutsidePointerEvents,
|
|
onInteractOutside,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside,
|
|
onDismiss: () => context.onOpenChange(false),
|
|
children: (0, import_jsx_runtime32.jsx)(
|
|
Content4,
|
|
{
|
|
"data-state": getState5(context.open),
|
|
role: "dialog",
|
|
id: context.contentId,
|
|
...popperScope,
|
|
...contentProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
...contentProps.style,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-popover-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-popover-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
}
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var CLOSE_NAME2 = "PopoverClose";
|
|
var PopoverClose = React55.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopePopover, ...closeProps } = props;
|
|
const context = usePopoverContext(CLOSE_NAME2, __scopePopover);
|
|
return (0, import_jsx_runtime32.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
...closeProps,
|
|
ref: forwardedRef,
|
|
onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
|
|
}
|
|
);
|
|
}
|
|
);
|
|
PopoverClose.displayName = CLOSE_NAME2;
|
|
var ARROW_NAME7 = "PopoverArrow";
|
|
var PopoverArrow = React55.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopePopover, ...arrowProps } = props;
|
|
const popperScope = usePopperScope3(__scopePopover);
|
|
return (0, import_jsx_runtime32.jsx)(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
PopoverArrow.displayName = ARROW_NAME7;
|
|
function getState5(open) {
|
|
return open ? "open" : "closed";
|
|
}
|
|
var Root210 = Popover;
|
|
var Anchor22 = PopoverAnchor;
|
|
var Trigger9 = PopoverTrigger;
|
|
var Portal5 = PopoverPortal;
|
|
var Content28 = PopoverContent;
|
|
var Close2 = PopoverClose;
|
|
var Arrow27 = PopoverArrow;
|
|
|
|
// node_modules/@radix-ui/react-progress/dist/index.mjs
|
|
var dist_exports28 = {};
|
|
__export(dist_exports28, {
|
|
Indicator: () => Indicator2,
|
|
Progress: () => Progress,
|
|
ProgressIndicator: () => ProgressIndicator,
|
|
Root: () => Root13,
|
|
createProgressScope: () => createProgressScope
|
|
});
|
|
var React56 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
|
|
var PROGRESS_NAME = "Progress";
|
|
var DEFAULT_MAX = 100;
|
|
var [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME);
|
|
var [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
|
|
var Progress = React56.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeProgress,
|
|
value: valueProp = null,
|
|
max: maxProp,
|
|
getValueLabel = defaultGetValueLabel,
|
|
...progressProps
|
|
} = props;
|
|
if ((maxProp || maxProp === 0) && !isValidMaxNumber(maxProp)) {
|
|
console.error(getInvalidMaxError(`${maxProp}`, "Progress"));
|
|
}
|
|
const max2 = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
if (valueProp !== null && !isValidValueNumber(valueProp, max2)) {
|
|
console.error(getInvalidValueError(`${valueProp}`, "Progress"));
|
|
}
|
|
const value = isValidValueNumber(valueProp, max2) ? valueProp : null;
|
|
const valueLabel = isNumber(value) ? getValueLabel(value, max2) : void 0;
|
|
return (0, import_jsx_runtime33.jsx)(ProgressProvider, { scope: __scopeProgress, value, max: max2, children: (0, import_jsx_runtime33.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"aria-valuemax": max2,
|
|
"aria-valuemin": 0,
|
|
"aria-valuenow": isNumber(value) ? value : void 0,
|
|
"aria-valuetext": valueLabel,
|
|
role: "progressbar",
|
|
"data-state": getProgressState(value, max2),
|
|
"data-value": value ?? void 0,
|
|
"data-max": max2,
|
|
...progressProps,
|
|
ref: forwardedRef
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
Progress.displayName = PROGRESS_NAME;
|
|
var INDICATOR_NAME6 = "ProgressIndicator";
|
|
var ProgressIndicator = React56.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeProgress, ...indicatorProps } = props;
|
|
const context = useProgressContext(INDICATOR_NAME6, __scopeProgress);
|
|
return (0, import_jsx_runtime33.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-state": getProgressState(context.value, context.max),
|
|
"data-value": context.value ?? void 0,
|
|
"data-max": context.max,
|
|
...indicatorProps,
|
|
ref: forwardedRef
|
|
}
|
|
);
|
|
}
|
|
);
|
|
ProgressIndicator.displayName = INDICATOR_NAME6;
|
|
function defaultGetValueLabel(value, max2) {
|
|
return `${Math.round(value / max2 * 100)}%`;
|
|
}
|
|
function getProgressState(value, maxValue) {
|
|
return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
|
|
}
|
|
function isNumber(value) {
|
|
return typeof value === "number";
|
|
}
|
|
function isValidMaxNumber(max2) {
|
|
return isNumber(max2) && !isNaN(max2) && max2 > 0;
|
|
}
|
|
function isValidValueNumber(value, max2) {
|
|
return isNumber(value) && !isNaN(value) && value <= max2 && value >= 0;
|
|
}
|
|
function getInvalidMaxError(propValue, componentName) {
|
|
return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`;
|
|
}
|
|
function getInvalidValueError(propValue, componentName) {
|
|
return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be:
|
|
- a positive number
|
|
- less than the value passed to \`max\` (or ${DEFAULT_MAX} if no \`max\` prop is set)
|
|
- \`null\` or \`undefined\` if the progress is indeterminate.
|
|
|
|
Defaulting to \`null\`.`;
|
|
}
|
|
var Root13 = Progress;
|
|
var Indicator2 = ProgressIndicator;
|
|
|
|
// node_modules/@radix-ui/react-radio-group/dist/index.mjs
|
|
var dist_exports29 = {};
|
|
__export(dist_exports29, {
|
|
Indicator: () => Indicator3,
|
|
Item: () => Item25,
|
|
RadioGroup: () => RadioGroup3,
|
|
RadioGroupIndicator: () => RadioGroupIndicator,
|
|
RadioGroupItem: () => RadioGroupItem,
|
|
Root: () => Root211,
|
|
createRadioGroupScope: () => createRadioGroupScope
|
|
});
|
|
var React210 = __toESM(require_react(), 1);
|
|
var React57 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
|
|
var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
|
|
var RADIO_NAME = "Radio";
|
|
var [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME);
|
|
var [RadioProvider, useRadioContext] = createRadioContext(RADIO_NAME);
|
|
var Radio = React57.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeRadio,
|
|
name,
|
|
checked = false,
|
|
required,
|
|
disabled,
|
|
value = "on",
|
|
onCheck,
|
|
form,
|
|
...radioProps
|
|
} = props;
|
|
const [button, setButton] = React57.useState(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
|
|
const hasConsumerStoppedPropagationRef = React57.useRef(false);
|
|
const isFormControl2 = button ? form || !!button.closest("form") : true;
|
|
return (0, import_jsx_runtime34.jsxs)(RadioProvider, { scope: __scopeRadio, checked, disabled, children: [
|
|
(0, import_jsx_runtime34.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
role: "radio",
|
|
"aria-checked": checked,
|
|
"data-state": getState6(checked),
|
|
"data-disabled": disabled ? "" : void 0,
|
|
disabled,
|
|
value,
|
|
...radioProps,
|
|
ref: composedRefs,
|
|
onClick: composeEventHandlers(props.onClick, (event) => {
|
|
if (!checked) onCheck?.();
|
|
if (isFormControl2) {
|
|
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
|
|
}
|
|
})
|
|
}
|
|
),
|
|
isFormControl2 && (0, import_jsx_runtime34.jsx)(
|
|
RadioBubbleInput,
|
|
{
|
|
control: button,
|
|
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
name,
|
|
value,
|
|
checked,
|
|
required,
|
|
disabled,
|
|
form,
|
|
style: { transform: "translateX(-100%)" }
|
|
}
|
|
)
|
|
] });
|
|
}
|
|
);
|
|
Radio.displayName = RADIO_NAME;
|
|
var INDICATOR_NAME7 = "RadioIndicator";
|
|
var RadioIndicator = React57.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeRadio, forceMount, ...indicatorProps } = props;
|
|
const context = useRadioContext(INDICATOR_NAME7, __scopeRadio);
|
|
return (0, import_jsx_runtime34.jsx)(Presence, { present: forceMount || context.checked, children: (0, import_jsx_runtime34.jsx)(
|
|
Primitive.span,
|
|
{
|
|
"data-state": getState6(context.checked),
|
|
"data-disabled": context.disabled ? "" : void 0,
|
|
...indicatorProps,
|
|
ref: forwardedRef
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
RadioIndicator.displayName = INDICATOR_NAME7;
|
|
var BUBBLE_INPUT_NAME2 = "RadioBubbleInput";
|
|
var RadioBubbleInput = React57.forwardRef(
|
|
({
|
|
__scopeRadio,
|
|
control,
|
|
checked,
|
|
bubbles = true,
|
|
...props
|
|
}, forwardedRef) => {
|
|
const ref = React57.useRef(null);
|
|
const composedRefs = useComposedRefs(ref, forwardedRef);
|
|
const prevChecked = usePrevious(checked);
|
|
const controlSize = useSize(control);
|
|
React57.useEffect(() => {
|
|
const input = ref.current;
|
|
if (!input) return;
|
|
const inputProto = window.HTMLInputElement.prototype;
|
|
const descriptor = Object.getOwnPropertyDescriptor(
|
|
inputProto,
|
|
"checked"
|
|
);
|
|
const setChecked = descriptor.set;
|
|
if (prevChecked !== checked && setChecked) {
|
|
const event = new Event("click", { bubbles });
|
|
setChecked.call(input, checked);
|
|
input.dispatchEvent(event);
|
|
}
|
|
}, [prevChecked, checked, bubbles]);
|
|
return (0, import_jsx_runtime34.jsx)(
|
|
Primitive.input,
|
|
{
|
|
type: "radio",
|
|
"aria-hidden": true,
|
|
defaultChecked: checked,
|
|
...props,
|
|
tabIndex: -1,
|
|
ref: composedRefs,
|
|
style: {
|
|
...props.style,
|
|
...controlSize,
|
|
position: "absolute",
|
|
pointerEvents: "none",
|
|
opacity: 0,
|
|
margin: 0
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
RadioBubbleInput.displayName = BUBBLE_INPUT_NAME2;
|
|
function getState6(checked) {
|
|
return checked ? "checked" : "unchecked";
|
|
}
|
|
var ARROW_KEYS2 = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
|
|
var RADIO_GROUP_NAME5 = "RadioGroup";
|
|
var [createRadioGroupContext, createRadioGroupScope] = createContextScope(RADIO_GROUP_NAME5, [
|
|
createRovingFocusGroupScope,
|
|
createRadioScope
|
|
]);
|
|
var useRovingFocusGroupScope4 = createRovingFocusGroupScope();
|
|
var useRadioScope = createRadioScope();
|
|
var [RadioGroupProvider2, useRadioGroupContext2] = createRadioGroupContext(RADIO_GROUP_NAME5);
|
|
var RadioGroup3 = React210.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeRadioGroup,
|
|
name,
|
|
defaultValue,
|
|
value: valueProp,
|
|
required = false,
|
|
disabled = false,
|
|
orientation,
|
|
dir,
|
|
loop = true,
|
|
onValueChange,
|
|
...groupProps
|
|
} = props;
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope4(__scopeRadioGroup);
|
|
const direction = useDirection(dir);
|
|
const [value, setValue] = useControllableState({
|
|
prop: valueProp,
|
|
defaultProp: defaultValue ?? null,
|
|
onChange: onValueChange,
|
|
caller: RADIO_GROUP_NAME5
|
|
});
|
|
return (0, import_jsx_runtime35.jsx)(
|
|
RadioGroupProvider2,
|
|
{
|
|
scope: __scopeRadioGroup,
|
|
name,
|
|
required,
|
|
disabled,
|
|
value,
|
|
onValueChange: setValue,
|
|
children: (0, import_jsx_runtime35.jsx)(
|
|
Root10,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
orientation,
|
|
dir: direction,
|
|
loop,
|
|
children: (0, import_jsx_runtime35.jsx)(
|
|
Primitive.div,
|
|
{
|
|
role: "radiogroup",
|
|
"aria-required": required,
|
|
"aria-orientation": orientation,
|
|
"data-disabled": disabled ? "" : void 0,
|
|
dir: direction,
|
|
...groupProps,
|
|
ref: forwardedRef
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
RadioGroup3.displayName = RADIO_GROUP_NAME5;
|
|
var ITEM_NAME8 = "RadioGroupItem";
|
|
var RadioGroupItem = React210.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeRadioGroup, disabled, ...itemProps } = props;
|
|
const context = useRadioGroupContext2(ITEM_NAME8, __scopeRadioGroup);
|
|
const isDisabled = context.disabled || disabled;
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope4(__scopeRadioGroup);
|
|
const radioScope = useRadioScope(__scopeRadioGroup);
|
|
const ref = React210.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const checked = context.value === itemProps.value;
|
|
const isArrowKeyPressedRef = React210.useRef(false);
|
|
React210.useEffect(() => {
|
|
const handleKeyDown = (event) => {
|
|
if (ARROW_KEYS2.includes(event.key)) {
|
|
isArrowKeyPressedRef.current = true;
|
|
}
|
|
};
|
|
const handleKeyUp = () => isArrowKeyPressedRef.current = false;
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
document.addEventListener("keyup", handleKeyUp);
|
|
return () => {
|
|
document.removeEventListener("keydown", handleKeyDown);
|
|
document.removeEventListener("keyup", handleKeyUp);
|
|
};
|
|
}, []);
|
|
return (0, import_jsx_runtime35.jsx)(
|
|
Item2,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
focusable: !isDisabled,
|
|
active: checked,
|
|
children: (0, import_jsx_runtime35.jsx)(
|
|
Radio,
|
|
{
|
|
disabled: isDisabled,
|
|
required: context.required,
|
|
checked,
|
|
...radioScope,
|
|
...itemProps,
|
|
name: context.name,
|
|
ref: composedRefs,
|
|
onCheck: () => context.onValueChange(itemProps.value),
|
|
onKeyDown: composeEventHandlers((event) => {
|
|
if (event.key === "Enter") event.preventDefault();
|
|
}),
|
|
onFocus: composeEventHandlers(itemProps.onFocus, () => {
|
|
if (isArrowKeyPressedRef.current) ref.current?.click();
|
|
})
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
RadioGroupItem.displayName = ITEM_NAME8;
|
|
var INDICATOR_NAME22 = "RadioGroupIndicator";
|
|
var RadioGroupIndicator = React210.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeRadioGroup, ...indicatorProps } = props;
|
|
const radioScope = useRadioScope(__scopeRadioGroup);
|
|
return (0, import_jsx_runtime35.jsx)(RadioIndicator, { ...radioScope, ...indicatorProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
RadioGroupIndicator.displayName = INDICATOR_NAME22;
|
|
var Root211 = RadioGroup3;
|
|
var Item25 = RadioGroupItem;
|
|
var Indicator3 = RadioGroupIndicator;
|
|
|
|
// node_modules/@radix-ui/react-scroll-area/dist/index.mjs
|
|
var dist_exports30 = {};
|
|
__export(dist_exports30, {
|
|
Corner: () => Corner,
|
|
Root: () => Root14,
|
|
ScrollArea: () => ScrollArea,
|
|
ScrollAreaCorner: () => ScrollAreaCorner,
|
|
ScrollAreaScrollbar: () => ScrollAreaScrollbar,
|
|
ScrollAreaThumb: () => ScrollAreaThumb,
|
|
ScrollAreaViewport: () => ScrollAreaViewport,
|
|
Scrollbar: () => Scrollbar,
|
|
Thumb: () => Thumb,
|
|
Viewport: () => Viewport2,
|
|
createScrollAreaScope: () => createScrollAreaScope
|
|
});
|
|
var React211 = __toESM(require_react(), 1);
|
|
var React58 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
|
|
function useStateMachine2(initialState, machine) {
|
|
return React58.useReducer((state, event) => {
|
|
const nextState = machine[state][event];
|
|
return nextState ?? state;
|
|
}, initialState);
|
|
}
|
|
var SCROLL_AREA_NAME = "ScrollArea";
|
|
var [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME);
|
|
var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
|
|
var ScrollArea = React211.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeScrollArea,
|
|
type = "hover",
|
|
dir,
|
|
scrollHideDelay = 600,
|
|
...scrollAreaProps
|
|
} = props;
|
|
const [scrollArea, setScrollArea] = React211.useState(null);
|
|
const [viewport, setViewport] = React211.useState(null);
|
|
const [content, setContent] = React211.useState(null);
|
|
const [scrollbarX, setScrollbarX] = React211.useState(null);
|
|
const [scrollbarY, setScrollbarY] = React211.useState(null);
|
|
const [cornerWidth, setCornerWidth] = React211.useState(0);
|
|
const [cornerHeight, setCornerHeight] = React211.useState(0);
|
|
const [scrollbarXEnabled, setScrollbarXEnabled] = React211.useState(false);
|
|
const [scrollbarYEnabled, setScrollbarYEnabled] = React211.useState(false);
|
|
const composedRefs = useComposedRefs(forwardedRef, (node) => setScrollArea(node));
|
|
const direction = useDirection(dir);
|
|
return (0, import_jsx_runtime36.jsx)(
|
|
ScrollAreaProvider,
|
|
{
|
|
scope: __scopeScrollArea,
|
|
type,
|
|
dir: direction,
|
|
scrollHideDelay,
|
|
scrollArea,
|
|
viewport,
|
|
onViewportChange: setViewport,
|
|
content,
|
|
onContentChange: setContent,
|
|
scrollbarX,
|
|
onScrollbarXChange: setScrollbarX,
|
|
scrollbarXEnabled,
|
|
onScrollbarXEnabledChange: setScrollbarXEnabled,
|
|
scrollbarY,
|
|
onScrollbarYChange: setScrollbarY,
|
|
scrollbarYEnabled,
|
|
onScrollbarYEnabledChange: setScrollbarYEnabled,
|
|
onCornerWidthChange: setCornerWidth,
|
|
onCornerHeightChange: setCornerHeight,
|
|
children: (0, import_jsx_runtime36.jsx)(
|
|
Primitive.div,
|
|
{
|
|
dir: direction,
|
|
...scrollAreaProps,
|
|
ref: composedRefs,
|
|
style: {
|
|
position: "relative",
|
|
// Pass corner sizes as CSS vars to reduce re-renders of context consumers
|
|
["--radix-scroll-area-corner-width"]: cornerWidth + "px",
|
|
["--radix-scroll-area-corner-height"]: cornerHeight + "px",
|
|
...props.style
|
|
}
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
ScrollArea.displayName = SCROLL_AREA_NAME;
|
|
var VIEWPORT_NAME2 = "ScrollAreaViewport";
|
|
var ScrollAreaViewport = React211.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
|
|
const context = useScrollAreaContext(VIEWPORT_NAME2, __scopeScrollArea);
|
|
const ref = React211.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
|
|
return (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
(0, import_jsx_runtime36.jsx)(
|
|
"style",
|
|
{
|
|
dangerouslySetInnerHTML: {
|
|
__html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}`
|
|
},
|
|
nonce
|
|
}
|
|
),
|
|
(0, import_jsx_runtime36.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-radix-scroll-area-viewport": "",
|
|
...viewportProps,
|
|
ref: composedRefs,
|
|
style: {
|
|
/**
|
|
* We don't support `visible` because the intention is to have at least one scrollbar
|
|
* if this component is used and `visible` will behave like `auto` in that case
|
|
* https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#description
|
|
*
|
|
* We don't handle `auto` because the intention is for the native implementation
|
|
* to be hidden if using this component. We just want to ensure the node is scrollable
|
|
* so could have used either `scroll` or `auto` here. We picked `scroll` to prevent
|
|
* the browser from having to work out whether to render native scrollbars or not,
|
|
* we tell it to with the intention of hiding them in CSS.
|
|
*/
|
|
overflowX: context.scrollbarXEnabled ? "scroll" : "hidden",
|
|
overflowY: context.scrollbarYEnabled ? "scroll" : "hidden",
|
|
...props.style
|
|
},
|
|
children: (0, import_jsx_runtime36.jsx)("div", { ref: context.onContentChange, style: { minWidth: "100%", display: "table" }, children })
|
|
}
|
|
)
|
|
] });
|
|
}
|
|
);
|
|
ScrollAreaViewport.displayName = VIEWPORT_NAME2;
|
|
var SCROLLBAR_NAME = "ScrollAreaScrollbar";
|
|
var ScrollAreaScrollbar = React211.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { forceMount, ...scrollbarProps } = props;
|
|
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
|
|
const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
|
|
const isHorizontal = props.orientation === "horizontal";
|
|
React211.useEffect(() => {
|
|
isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
|
|
return () => {
|
|
isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
|
|
};
|
|
}, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);
|
|
return context.type === "hover" ? (0, import_jsx_runtime36.jsx)(ScrollAreaScrollbarHover, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "scroll" ? (0, import_jsx_runtime36.jsx)(ScrollAreaScrollbarScroll, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "auto" ? (0, import_jsx_runtime36.jsx)(ScrollAreaScrollbarAuto, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "always" ? (0, import_jsx_runtime36.jsx)(ScrollAreaScrollbarVisible, { ...scrollbarProps, ref: forwardedRef }) : null;
|
|
}
|
|
);
|
|
ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
|
|
var ScrollAreaScrollbarHover = React211.forwardRef((props, forwardedRef) => {
|
|
const { forceMount, ...scrollbarProps } = props;
|
|
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
|
|
const [visible, setVisible] = React211.useState(false);
|
|
React211.useEffect(() => {
|
|
const scrollArea = context.scrollArea;
|
|
let hideTimer = 0;
|
|
if (scrollArea) {
|
|
const handlePointerEnter = () => {
|
|
window.clearTimeout(hideTimer);
|
|
setVisible(true);
|
|
};
|
|
const handlePointerLeave = () => {
|
|
hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
|
|
};
|
|
scrollArea.addEventListener("pointerenter", handlePointerEnter);
|
|
scrollArea.addEventListener("pointerleave", handlePointerLeave);
|
|
return () => {
|
|
window.clearTimeout(hideTimer);
|
|
scrollArea.removeEventListener("pointerenter", handlePointerEnter);
|
|
scrollArea.removeEventListener("pointerleave", handlePointerLeave);
|
|
};
|
|
}
|
|
}, [context.scrollArea, context.scrollHideDelay]);
|
|
return (0, import_jsx_runtime36.jsx)(Presence, { present: forceMount || visible, children: (0, import_jsx_runtime36.jsx)(
|
|
ScrollAreaScrollbarAuto,
|
|
{
|
|
"data-state": visible ? "visible" : "hidden",
|
|
...scrollbarProps,
|
|
ref: forwardedRef
|
|
}
|
|
) });
|
|
});
|
|
var ScrollAreaScrollbarScroll = React211.forwardRef((props, forwardedRef) => {
|
|
const { forceMount, ...scrollbarProps } = props;
|
|
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
|
|
const isHorizontal = props.orientation === "horizontal";
|
|
const debounceScrollEnd = useDebounceCallback(() => send("SCROLL_END"), 100);
|
|
const [state, send] = useStateMachine2("hidden", {
|
|
hidden: {
|
|
SCROLL: "scrolling"
|
|
},
|
|
scrolling: {
|
|
SCROLL_END: "idle",
|
|
POINTER_ENTER: "interacting"
|
|
},
|
|
interacting: {
|
|
SCROLL: "interacting",
|
|
POINTER_LEAVE: "idle"
|
|
},
|
|
idle: {
|
|
HIDE: "hidden",
|
|
SCROLL: "scrolling",
|
|
POINTER_ENTER: "interacting"
|
|
}
|
|
});
|
|
React211.useEffect(() => {
|
|
if (state === "idle") {
|
|
const hideTimer = window.setTimeout(() => send("HIDE"), context.scrollHideDelay);
|
|
return () => window.clearTimeout(hideTimer);
|
|
}
|
|
}, [state, context.scrollHideDelay, send]);
|
|
React211.useEffect(() => {
|
|
const viewport = context.viewport;
|
|
const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
|
|
if (viewport) {
|
|
let prevScrollPos = viewport[scrollDirection];
|
|
const handleScroll2 = () => {
|
|
const scrollPos = viewport[scrollDirection];
|
|
const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
|
|
if (hasScrollInDirectionChanged) {
|
|
send("SCROLL");
|
|
debounceScrollEnd();
|
|
}
|
|
prevScrollPos = scrollPos;
|
|
};
|
|
viewport.addEventListener("scroll", handleScroll2);
|
|
return () => viewport.removeEventListener("scroll", handleScroll2);
|
|
}
|
|
}, [context.viewport, isHorizontal, send, debounceScrollEnd]);
|
|
return (0, import_jsx_runtime36.jsx)(Presence, { present: forceMount || state !== "hidden", children: (0, import_jsx_runtime36.jsx)(
|
|
ScrollAreaScrollbarVisible,
|
|
{
|
|
"data-state": state === "hidden" ? "hidden" : "visible",
|
|
...scrollbarProps,
|
|
ref: forwardedRef,
|
|
onPointerEnter: composeEventHandlers(props.onPointerEnter, () => send("POINTER_ENTER")),
|
|
onPointerLeave: composeEventHandlers(props.onPointerLeave, () => send("POINTER_LEAVE"))
|
|
}
|
|
) });
|
|
});
|
|
var ScrollAreaScrollbarAuto = React211.forwardRef((props, forwardedRef) => {
|
|
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
|
|
const { forceMount, ...scrollbarProps } = props;
|
|
const [visible, setVisible] = React211.useState(false);
|
|
const isHorizontal = props.orientation === "horizontal";
|
|
const handleResize = useDebounceCallback(() => {
|
|
if (context.viewport) {
|
|
const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
|
|
const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
|
|
setVisible(isHorizontal ? isOverflowX : isOverflowY);
|
|
}
|
|
}, 10);
|
|
useResizeObserver2(context.viewport, handleResize);
|
|
useResizeObserver2(context.content, handleResize);
|
|
return (0, import_jsx_runtime36.jsx)(Presence, { present: forceMount || visible, children: (0, import_jsx_runtime36.jsx)(
|
|
ScrollAreaScrollbarVisible,
|
|
{
|
|
"data-state": visible ? "visible" : "hidden",
|
|
...scrollbarProps,
|
|
ref: forwardedRef
|
|
}
|
|
) });
|
|
});
|
|
var ScrollAreaScrollbarVisible = React211.forwardRef((props, forwardedRef) => {
|
|
const { orientation = "vertical", ...scrollbarProps } = props;
|
|
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
|
|
const thumbRef = React211.useRef(null);
|
|
const pointerOffsetRef = React211.useRef(0);
|
|
const [sizes, setSizes] = React211.useState({
|
|
content: 0,
|
|
viewport: 0,
|
|
scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 }
|
|
});
|
|
const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
|
|
const commonProps = {
|
|
...scrollbarProps,
|
|
sizes,
|
|
onSizesChange: setSizes,
|
|
hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
|
|
onThumbChange: (thumb) => thumbRef.current = thumb,
|
|
onThumbPointerUp: () => pointerOffsetRef.current = 0,
|
|
onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
|
|
};
|
|
function getScrollPosition(pointerPos, dir) {
|
|
return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
|
|
}
|
|
if (orientation === "horizontal") {
|
|
return (0, import_jsx_runtime36.jsx)(
|
|
ScrollAreaScrollbarX,
|
|
{
|
|
...commonProps,
|
|
ref: forwardedRef,
|
|
onThumbPositionChange: () => {
|
|
if (context.viewport && thumbRef.current) {
|
|
const scrollPos = context.viewport.scrollLeft;
|
|
const offset4 = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
|
|
thumbRef.current.style.transform = `translate3d(${offset4}px, 0, 0)`;
|
|
}
|
|
},
|
|
onWheelScroll: (scrollPos) => {
|
|
if (context.viewport) context.viewport.scrollLeft = scrollPos;
|
|
},
|
|
onDragScroll: (pointerPos) => {
|
|
if (context.viewport) {
|
|
context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
if (orientation === "vertical") {
|
|
return (0, import_jsx_runtime36.jsx)(
|
|
ScrollAreaScrollbarY,
|
|
{
|
|
...commonProps,
|
|
ref: forwardedRef,
|
|
onThumbPositionChange: () => {
|
|
if (context.viewport && thumbRef.current) {
|
|
const scrollPos = context.viewport.scrollTop;
|
|
const offset4 = getThumbOffsetFromScroll(scrollPos, sizes);
|
|
thumbRef.current.style.transform = `translate3d(0, ${offset4}px, 0)`;
|
|
}
|
|
},
|
|
onWheelScroll: (scrollPos) => {
|
|
if (context.viewport) context.viewport.scrollTop = scrollPos;
|
|
},
|
|
onDragScroll: (pointerPos) => {
|
|
if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
return null;
|
|
});
|
|
var ScrollAreaScrollbarX = React211.forwardRef((props, forwardedRef) => {
|
|
const { sizes, onSizesChange, ...scrollbarProps } = props;
|
|
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
|
|
const [computedStyle, setComputedStyle] = React211.useState();
|
|
const ref = React211.useRef(null);
|
|
const composeRefs2 = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);
|
|
React211.useEffect(() => {
|
|
if (ref.current) setComputedStyle(getComputedStyle(ref.current));
|
|
}, [ref]);
|
|
return (0, import_jsx_runtime36.jsx)(
|
|
ScrollAreaScrollbarImpl,
|
|
{
|
|
"data-orientation": "horizontal",
|
|
...scrollbarProps,
|
|
ref: composeRefs2,
|
|
sizes,
|
|
style: {
|
|
bottom: 0,
|
|
left: context.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
|
|
right: context.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0,
|
|
["--radix-scroll-area-thumb-width"]: getThumbSize(sizes) + "px",
|
|
...props.style
|
|
},
|
|
onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.x),
|
|
onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x),
|
|
onWheelScroll: (event, maxScrollPos) => {
|
|
if (context.viewport) {
|
|
const scrollPos = context.viewport.scrollLeft + event.deltaX;
|
|
props.onWheelScroll(scrollPos);
|
|
if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
},
|
|
onResize: () => {
|
|
if (ref.current && context.viewport && computedStyle) {
|
|
onSizesChange({
|
|
content: context.viewport.scrollWidth,
|
|
viewport: context.viewport.offsetWidth,
|
|
scrollbar: {
|
|
size: ref.current.clientWidth,
|
|
paddingStart: toInt(computedStyle.paddingLeft),
|
|
paddingEnd: toInt(computedStyle.paddingRight)
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
);
|
|
});
|
|
var ScrollAreaScrollbarY = React211.forwardRef((props, forwardedRef) => {
|
|
const { sizes, onSizesChange, ...scrollbarProps } = props;
|
|
const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
|
|
const [computedStyle, setComputedStyle] = React211.useState();
|
|
const ref = React211.useRef(null);
|
|
const composeRefs2 = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);
|
|
React211.useEffect(() => {
|
|
if (ref.current) setComputedStyle(getComputedStyle(ref.current));
|
|
}, [ref]);
|
|
return (0, import_jsx_runtime36.jsx)(
|
|
ScrollAreaScrollbarImpl,
|
|
{
|
|
"data-orientation": "vertical",
|
|
...scrollbarProps,
|
|
ref: composeRefs2,
|
|
sizes,
|
|
style: {
|
|
top: 0,
|
|
right: context.dir === "ltr" ? 0 : void 0,
|
|
left: context.dir === "rtl" ? 0 : void 0,
|
|
bottom: "var(--radix-scroll-area-corner-height)",
|
|
["--radix-scroll-area-thumb-height"]: getThumbSize(sizes) + "px",
|
|
...props.style
|
|
},
|
|
onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
|
|
onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
|
|
onWheelScroll: (event, maxScrollPos) => {
|
|
if (context.viewport) {
|
|
const scrollPos = context.viewport.scrollTop + event.deltaY;
|
|
props.onWheelScroll(scrollPos);
|
|
if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
},
|
|
onResize: () => {
|
|
if (ref.current && context.viewport && computedStyle) {
|
|
onSizesChange({
|
|
content: context.viewport.scrollHeight,
|
|
viewport: context.viewport.offsetHeight,
|
|
scrollbar: {
|
|
size: ref.current.clientHeight,
|
|
paddingStart: toInt(computedStyle.paddingTop),
|
|
paddingEnd: toInt(computedStyle.paddingBottom)
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
);
|
|
});
|
|
var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
|
|
var ScrollAreaScrollbarImpl = React211.forwardRef((props, forwardedRef) => {
|
|
const {
|
|
__scopeScrollArea,
|
|
sizes,
|
|
hasThumb,
|
|
onThumbChange,
|
|
onThumbPointerUp,
|
|
onThumbPointerDown,
|
|
onThumbPositionChange,
|
|
onDragScroll,
|
|
onWheelScroll,
|
|
onResize,
|
|
...scrollbarProps
|
|
} = props;
|
|
const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
|
|
const [scrollbar, setScrollbar] = React211.useState(null);
|
|
const composeRefs2 = useComposedRefs(forwardedRef, (node) => setScrollbar(node));
|
|
const rectRef = React211.useRef(null);
|
|
const prevWebkitUserSelectRef = React211.useRef("");
|
|
const viewport = context.viewport;
|
|
const maxScrollPos = sizes.content - sizes.viewport;
|
|
const handleWheelScroll = useCallbackRef(onWheelScroll);
|
|
const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);
|
|
const handleResize = useDebounceCallback(onResize, 10);
|
|
function handleDragScroll(event) {
|
|
if (rectRef.current) {
|
|
const x = event.clientX - rectRef.current.left;
|
|
const y = event.clientY - rectRef.current.top;
|
|
onDragScroll({ x, y });
|
|
}
|
|
}
|
|
React211.useEffect(() => {
|
|
const handleWheel = (event) => {
|
|
const element = event.target;
|
|
const isScrollbarWheel = scrollbar?.contains(element);
|
|
if (isScrollbarWheel) handleWheelScroll(event, maxScrollPos);
|
|
};
|
|
document.addEventListener("wheel", handleWheel, { passive: false });
|
|
return () => document.removeEventListener("wheel", handleWheel, { passive: false });
|
|
}, [viewport, scrollbar, maxScrollPos, handleWheelScroll]);
|
|
React211.useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
|
|
useResizeObserver2(scrollbar, handleResize);
|
|
useResizeObserver2(context.content, handleResize);
|
|
return (0, import_jsx_runtime36.jsx)(
|
|
ScrollbarProvider,
|
|
{
|
|
scope: __scopeScrollArea,
|
|
scrollbar,
|
|
hasThumb,
|
|
onThumbChange: useCallbackRef(onThumbChange),
|
|
onThumbPointerUp: useCallbackRef(onThumbPointerUp),
|
|
onThumbPositionChange: handleThumbPositionChange,
|
|
onThumbPointerDown: useCallbackRef(onThumbPointerDown),
|
|
children: (0, import_jsx_runtime36.jsx)(
|
|
Primitive.div,
|
|
{
|
|
...scrollbarProps,
|
|
ref: composeRefs2,
|
|
style: { position: "absolute", ...scrollbarProps.style },
|
|
onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
|
|
const mainPointer = 0;
|
|
if (event.button === mainPointer) {
|
|
const element = event.target;
|
|
element.setPointerCapture(event.pointerId);
|
|
rectRef.current = scrollbar.getBoundingClientRect();
|
|
prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
|
|
document.body.style.webkitUserSelect = "none";
|
|
if (context.viewport) context.viewport.style.scrollBehavior = "auto";
|
|
handleDragScroll(event);
|
|
}
|
|
}),
|
|
onPointerMove: composeEventHandlers(props.onPointerMove, handleDragScroll),
|
|
onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
|
|
const element = event.target;
|
|
if (element.hasPointerCapture(event.pointerId)) {
|
|
element.releasePointerCapture(event.pointerId);
|
|
}
|
|
document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
|
|
if (context.viewport) context.viewport.style.scrollBehavior = "";
|
|
rectRef.current = null;
|
|
})
|
|
}
|
|
)
|
|
}
|
|
);
|
|
});
|
|
var THUMB_NAME = "ScrollAreaThumb";
|
|
var ScrollAreaThumb = React211.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { forceMount, ...thumbProps } = props;
|
|
const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
|
|
return (0, import_jsx_runtime36.jsx)(Presence, { present: forceMount || scrollbarContext.hasThumb, children: (0, import_jsx_runtime36.jsx)(ScrollAreaThumbImpl, { ref: forwardedRef, ...thumbProps }) });
|
|
}
|
|
);
|
|
var ScrollAreaThumbImpl = React211.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeScrollArea, style, ...thumbProps } = props;
|
|
const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
|
|
const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
|
|
const { onThumbPositionChange } = scrollbarContext;
|
|
const composedRef = useComposedRefs(
|
|
forwardedRef,
|
|
(node) => scrollbarContext.onThumbChange(node)
|
|
);
|
|
const removeUnlinkedScrollListenerRef = React211.useRef(void 0);
|
|
const debounceScrollEnd = useDebounceCallback(() => {
|
|
if (removeUnlinkedScrollListenerRef.current) {
|
|
removeUnlinkedScrollListenerRef.current();
|
|
removeUnlinkedScrollListenerRef.current = void 0;
|
|
}
|
|
}, 100);
|
|
React211.useEffect(() => {
|
|
const viewport = scrollAreaContext.viewport;
|
|
if (viewport) {
|
|
const handleScroll2 = () => {
|
|
debounceScrollEnd();
|
|
if (!removeUnlinkedScrollListenerRef.current) {
|
|
const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
|
|
removeUnlinkedScrollListenerRef.current = listener;
|
|
onThumbPositionChange();
|
|
}
|
|
};
|
|
onThumbPositionChange();
|
|
viewport.addEventListener("scroll", handleScroll2);
|
|
return () => viewport.removeEventListener("scroll", handleScroll2);
|
|
}
|
|
}, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);
|
|
return (0, import_jsx_runtime36.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
|
|
...thumbProps,
|
|
ref: composedRef,
|
|
style: {
|
|
width: "var(--radix-scroll-area-thumb-width)",
|
|
height: "var(--radix-scroll-area-thumb-height)",
|
|
...style
|
|
},
|
|
onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, (event) => {
|
|
const thumb = event.target;
|
|
const thumbRect = thumb.getBoundingClientRect();
|
|
const x = event.clientX - thumbRect.left;
|
|
const y = event.clientY - thumbRect.top;
|
|
scrollbarContext.onThumbPointerDown({ x, y });
|
|
}),
|
|
onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
ScrollAreaThumb.displayName = THUMB_NAME;
|
|
var CORNER_NAME = "ScrollAreaCorner";
|
|
var ScrollAreaCorner = React211.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
|
|
const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
|
|
const hasCorner = context.type !== "scroll" && hasBothScrollbarsVisible;
|
|
return hasCorner ? (0, import_jsx_runtime36.jsx)(ScrollAreaCornerImpl, { ...props, ref: forwardedRef }) : null;
|
|
}
|
|
);
|
|
ScrollAreaCorner.displayName = CORNER_NAME;
|
|
var ScrollAreaCornerImpl = React211.forwardRef((props, forwardedRef) => {
|
|
const { __scopeScrollArea, ...cornerProps } = props;
|
|
const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
|
|
const [width, setWidth] = React211.useState(0);
|
|
const [height, setHeight] = React211.useState(0);
|
|
const hasSize = Boolean(width && height);
|
|
useResizeObserver2(context.scrollbarX, () => {
|
|
const height2 = context.scrollbarX?.offsetHeight || 0;
|
|
context.onCornerHeightChange(height2);
|
|
setHeight(height2);
|
|
});
|
|
useResizeObserver2(context.scrollbarY, () => {
|
|
const width2 = context.scrollbarY?.offsetWidth || 0;
|
|
context.onCornerWidthChange(width2);
|
|
setWidth(width2);
|
|
});
|
|
return hasSize ? (0, import_jsx_runtime36.jsx)(
|
|
Primitive.div,
|
|
{
|
|
...cornerProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
width,
|
|
height,
|
|
position: "absolute",
|
|
right: context.dir === "ltr" ? 0 : void 0,
|
|
left: context.dir === "rtl" ? 0 : void 0,
|
|
bottom: 0,
|
|
...props.style
|
|
}
|
|
}
|
|
) : null;
|
|
});
|
|
function toInt(value) {
|
|
return value ? parseInt(value, 10) : 0;
|
|
}
|
|
function getThumbRatio(viewportSize, contentSize) {
|
|
const ratio = viewportSize / contentSize;
|
|
return isNaN(ratio) ? 0 : ratio;
|
|
}
|
|
function getThumbSize(sizes) {
|
|
const ratio = getThumbRatio(sizes.viewport, sizes.content);
|
|
const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
|
|
const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
|
|
return Math.max(thumbSize, 18);
|
|
}
|
|
function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
|
|
const thumbSizePx = getThumbSize(sizes);
|
|
const thumbCenter = thumbSizePx / 2;
|
|
const offset4 = pointerOffset || thumbCenter;
|
|
const thumbOffsetFromEnd = thumbSizePx - offset4;
|
|
const minPointerPos = sizes.scrollbar.paddingStart + offset4;
|
|
const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
|
|
const maxScrollPos = sizes.content - sizes.viewport;
|
|
const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
|
|
const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
|
|
return interpolate(pointerPos);
|
|
}
|
|
function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
|
|
const thumbSizePx = getThumbSize(sizes);
|
|
const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
|
|
const scrollbar = sizes.scrollbar.size - scrollbarPadding;
|
|
const maxScrollPos = sizes.content - sizes.viewport;
|
|
const maxThumbPos = scrollbar - thumbSizePx;
|
|
const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
|
|
const scrollWithoutMomentum = clamp2(scrollPos, scrollClampRange);
|
|
const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
|
|
return interpolate(scrollWithoutMomentum);
|
|
}
|
|
function linearScale(input, output) {
|
|
return (value) => {
|
|
if (input[0] === input[1] || output[0] === output[1]) return output[0];
|
|
const ratio = (output[1] - output[0]) / (input[1] - input[0]);
|
|
return output[0] + ratio * (value - input[0]);
|
|
};
|
|
}
|
|
function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
|
|
return scrollPos > 0 && scrollPos < maxScrollPos;
|
|
}
|
|
var addUnlinkedScrollListener = (node, handler = () => {
|
|
}) => {
|
|
let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
|
|
let rAF = 0;
|
|
(function loop() {
|
|
const position = { left: node.scrollLeft, top: node.scrollTop };
|
|
const isHorizontalScroll = prevPosition.left !== position.left;
|
|
const isVerticalScroll = prevPosition.top !== position.top;
|
|
if (isHorizontalScroll || isVerticalScroll) handler();
|
|
prevPosition = position;
|
|
rAF = window.requestAnimationFrame(loop);
|
|
})();
|
|
return () => window.cancelAnimationFrame(rAF);
|
|
};
|
|
function useDebounceCallback(callback, delay) {
|
|
const handleCallback = useCallbackRef(callback);
|
|
const debounceTimerRef = React211.useRef(0);
|
|
React211.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
|
|
return React211.useCallback(() => {
|
|
window.clearTimeout(debounceTimerRef.current);
|
|
debounceTimerRef.current = window.setTimeout(handleCallback, delay);
|
|
}, [handleCallback, delay]);
|
|
}
|
|
function useResizeObserver2(element, onResize) {
|
|
const handleResize = useCallbackRef(onResize);
|
|
useLayoutEffect2(() => {
|
|
let rAF = 0;
|
|
if (element) {
|
|
const resizeObserver = new ResizeObserver(() => {
|
|
cancelAnimationFrame(rAF);
|
|
rAF = window.requestAnimationFrame(handleResize);
|
|
});
|
|
resizeObserver.observe(element);
|
|
return () => {
|
|
window.cancelAnimationFrame(rAF);
|
|
resizeObserver.unobserve(element);
|
|
};
|
|
}
|
|
}, [element, handleResize]);
|
|
}
|
|
var Root14 = ScrollArea;
|
|
var Viewport2 = ScrollAreaViewport;
|
|
var Scrollbar = ScrollAreaScrollbar;
|
|
var Thumb = ScrollAreaThumb;
|
|
var Corner = ScrollAreaCorner;
|
|
|
|
// node_modules/@radix-ui/react-select/dist/index.mjs
|
|
var dist_exports31 = {};
|
|
__export(dist_exports31, {
|
|
Arrow: () => Arrow28,
|
|
Content: () => Content29,
|
|
Group: () => Group3,
|
|
Icon: () => Icon,
|
|
Item: () => Item5,
|
|
ItemIndicator: () => ItemIndicator3,
|
|
ItemText: () => ItemText,
|
|
Label: () => Label5,
|
|
Portal: () => Portal6,
|
|
Root: () => Root212,
|
|
ScrollDownButton: () => ScrollDownButton,
|
|
ScrollUpButton: () => ScrollUpButton,
|
|
Select: () => Select,
|
|
SelectArrow: () => SelectArrow,
|
|
SelectContent: () => SelectContent,
|
|
SelectGroup: () => SelectGroup,
|
|
SelectIcon: () => SelectIcon,
|
|
SelectItem: () => SelectItem,
|
|
SelectItemIndicator: () => SelectItemIndicator,
|
|
SelectItemText: () => SelectItemText,
|
|
SelectLabel: () => SelectLabel,
|
|
SelectPortal: () => SelectPortal,
|
|
SelectScrollDownButton: () => SelectScrollDownButton,
|
|
SelectScrollUpButton: () => SelectScrollUpButton,
|
|
SelectSeparator: () => SelectSeparator,
|
|
SelectTrigger: () => SelectTrigger,
|
|
SelectValue: () => SelectValue,
|
|
SelectViewport: () => SelectViewport,
|
|
Separator: () => Separator3,
|
|
Trigger: () => Trigger10,
|
|
Value: () => Value,
|
|
Viewport: () => Viewport3,
|
|
createSelectScope: () => createSelectScope
|
|
});
|
|
var React59 = __toESM(require_react(), 1);
|
|
var ReactDOM5 = __toESM(require_react_dom(), 1);
|
|
var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
|
|
var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
|
|
var SELECTION_KEYS2 = [" ", "Enter"];
|
|
var SELECT_NAME = "Select";
|
|
var [Collection7, useCollection7, createCollectionScope7] = createCollection(SELECT_NAME);
|
|
var [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [
|
|
createCollectionScope7,
|
|
createPopperScope
|
|
]);
|
|
var usePopperScope4 = createPopperScope();
|
|
var [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
|
|
var [SelectNativeOptionsProvider, useSelectNativeOptionsContext] = createSelectContext(SELECT_NAME);
|
|
var Select = (props) => {
|
|
const {
|
|
__scopeSelect,
|
|
children,
|
|
open: openProp,
|
|
defaultOpen,
|
|
onOpenChange,
|
|
value: valueProp,
|
|
defaultValue,
|
|
onValueChange,
|
|
dir,
|
|
name,
|
|
autoComplete,
|
|
disabled,
|
|
required,
|
|
form
|
|
} = props;
|
|
const popperScope = usePopperScope4(__scopeSelect);
|
|
const [trigger, setTrigger] = React59.useState(null);
|
|
const [valueNode, setValueNode] = React59.useState(null);
|
|
const [valueNodeHasChildren, setValueNodeHasChildren] = React59.useState(false);
|
|
const direction = useDirection(dir);
|
|
const [open, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen ?? false,
|
|
onChange: onOpenChange,
|
|
caller: SELECT_NAME
|
|
});
|
|
const [value, setValue] = useControllableState({
|
|
prop: valueProp,
|
|
defaultProp: defaultValue,
|
|
onChange: onValueChange,
|
|
caller: SELECT_NAME
|
|
});
|
|
const triggerPointerDownPosRef = React59.useRef(null);
|
|
const isFormControl2 = trigger ? form || !!trigger.closest("form") : true;
|
|
const [nativeOptionsSet, setNativeOptionsSet] = React59.useState(/* @__PURE__ */ new Set());
|
|
const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
|
|
return (0, import_jsx_runtime37.jsx)(Root25, { ...popperScope, children: (0, import_jsx_runtime37.jsxs)(
|
|
SelectProvider,
|
|
{
|
|
required,
|
|
scope: __scopeSelect,
|
|
trigger,
|
|
onTriggerChange: setTrigger,
|
|
valueNode,
|
|
onValueNodeChange: setValueNode,
|
|
valueNodeHasChildren,
|
|
onValueNodeHasChildrenChange: setValueNodeHasChildren,
|
|
contentId: useId(),
|
|
value,
|
|
onValueChange: setValue,
|
|
open,
|
|
onOpenChange: setOpen,
|
|
dir: direction,
|
|
triggerPointerDownPosRef,
|
|
disabled,
|
|
children: [
|
|
(0, import_jsx_runtime37.jsx)(Collection7.Provider, { scope: __scopeSelect, children: (0, import_jsx_runtime37.jsx)(
|
|
SelectNativeOptionsProvider,
|
|
{
|
|
scope: props.__scopeSelect,
|
|
onNativeOptionAdd: React59.useCallback((option) => {
|
|
setNativeOptionsSet((prev) => new Set(prev).add(option));
|
|
}, []),
|
|
onNativeOptionRemove: React59.useCallback((option) => {
|
|
setNativeOptionsSet((prev) => {
|
|
const optionsSet = new Set(prev);
|
|
optionsSet.delete(option);
|
|
return optionsSet;
|
|
});
|
|
}, []),
|
|
children
|
|
}
|
|
) }),
|
|
isFormControl2 ? (0, import_jsx_runtime37.jsxs)(
|
|
SelectBubbleInput,
|
|
{
|
|
"aria-hidden": true,
|
|
required,
|
|
tabIndex: -1,
|
|
name,
|
|
autoComplete,
|
|
value,
|
|
onChange: (event) => setValue(event.target.value),
|
|
disabled,
|
|
form,
|
|
children: [
|
|
value === void 0 ? (0, import_jsx_runtime37.jsx)("option", { value: "" }) : null,
|
|
Array.from(nativeOptionsSet)
|
|
]
|
|
},
|
|
nativeSelectKey
|
|
) : null
|
|
]
|
|
}
|
|
) });
|
|
};
|
|
Select.displayName = SELECT_NAME;
|
|
var TRIGGER_NAME12 = "SelectTrigger";
|
|
var SelectTrigger = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSelect, disabled = false, ...triggerProps } = props;
|
|
const popperScope = usePopperScope4(__scopeSelect);
|
|
const context = useSelectContext(TRIGGER_NAME12, __scopeSelect);
|
|
const isDisabled = context.disabled || disabled;
|
|
const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);
|
|
const getItems = useCollection7(__scopeSelect);
|
|
const pointerTypeRef = React59.useRef("touch");
|
|
const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {
|
|
const enabledItems = getItems().filter((item) => !item.disabled);
|
|
const currentItem = enabledItems.find((item) => item.value === context.value);
|
|
const nextItem = findNextItem(enabledItems, search, currentItem);
|
|
if (nextItem !== void 0) {
|
|
context.onValueChange(nextItem.value);
|
|
}
|
|
});
|
|
const handleOpen = (pointerEvent) => {
|
|
if (!isDisabled) {
|
|
context.onOpenChange(true);
|
|
resetTypeahead();
|
|
}
|
|
if (pointerEvent) {
|
|
context.triggerPointerDownPosRef.current = {
|
|
x: Math.round(pointerEvent.pageX),
|
|
y: Math.round(pointerEvent.pageY)
|
|
};
|
|
}
|
|
};
|
|
return (0, import_jsx_runtime37.jsx)(Anchor, { asChild: true, ...popperScope, children: (0, import_jsx_runtime37.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
role: "combobox",
|
|
"aria-controls": context.contentId,
|
|
"aria-expanded": context.open,
|
|
"aria-required": context.required,
|
|
"aria-autocomplete": "none",
|
|
dir: context.dir,
|
|
"data-state": context.open ? "open" : "closed",
|
|
disabled: isDisabled,
|
|
"data-disabled": isDisabled ? "" : void 0,
|
|
"data-placeholder": shouldShowPlaceholder(context.value) ? "" : void 0,
|
|
...triggerProps,
|
|
ref: composedRefs,
|
|
onClick: composeEventHandlers(triggerProps.onClick, (event) => {
|
|
event.currentTarget.focus();
|
|
if (pointerTypeRef.current !== "mouse") {
|
|
handleOpen(event);
|
|
}
|
|
}),
|
|
onPointerDown: composeEventHandlers(triggerProps.onPointerDown, (event) => {
|
|
pointerTypeRef.current = event.pointerType;
|
|
const target = event.target;
|
|
if (target.hasPointerCapture(event.pointerId)) {
|
|
target.releasePointerCapture(event.pointerId);
|
|
}
|
|
if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse") {
|
|
handleOpen(event);
|
|
event.preventDefault();
|
|
}
|
|
}),
|
|
onKeyDown: composeEventHandlers(triggerProps.onKeyDown, (event) => {
|
|
const isTypingAhead = searchRef.current !== "";
|
|
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
|
|
if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
|
|
if (isTypingAhead && event.key === " ") return;
|
|
if (OPEN_KEYS.includes(event.key)) {
|
|
handleOpen();
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
SelectTrigger.displayName = TRIGGER_NAME12;
|
|
var VALUE_NAME = "SelectValue";
|
|
var SelectValue = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
|
|
const context = useSelectContext(VALUE_NAME, __scopeSelect);
|
|
const { onValueNodeHasChildrenChange } = context;
|
|
const hasChildren = children !== void 0;
|
|
const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
|
|
useLayoutEffect2(() => {
|
|
onValueNodeHasChildrenChange(hasChildren);
|
|
}, [onValueNodeHasChildrenChange, hasChildren]);
|
|
return (0, import_jsx_runtime37.jsx)(
|
|
Primitive.span,
|
|
{
|
|
...valueProps,
|
|
ref: composedRefs,
|
|
style: { pointerEvents: "none" },
|
|
children: shouldShowPlaceholder(context.value) ? (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: placeholder }) : children
|
|
}
|
|
);
|
|
}
|
|
);
|
|
SelectValue.displayName = VALUE_NAME;
|
|
var ICON_NAME = "SelectIcon";
|
|
var SelectIcon = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSelect, children, ...iconProps } = props;
|
|
return (0, import_jsx_runtime37.jsx)(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
|
|
}
|
|
);
|
|
SelectIcon.displayName = ICON_NAME;
|
|
var PORTAL_NAME10 = "SelectPortal";
|
|
var SelectPortal = (props) => {
|
|
return (0, import_jsx_runtime37.jsx)(Portal, { asChild: true, ...props });
|
|
};
|
|
SelectPortal.displayName = PORTAL_NAME10;
|
|
var CONTENT_NAME13 = "SelectContent";
|
|
var SelectContent = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const context = useSelectContext(CONTENT_NAME13, props.__scopeSelect);
|
|
const [fragment, setFragment] = React59.useState();
|
|
useLayoutEffect2(() => {
|
|
setFragment(new DocumentFragment());
|
|
}, []);
|
|
if (!context.open) {
|
|
const frag = fragment;
|
|
return frag ? ReactDOM5.createPortal(
|
|
(0, import_jsx_runtime37.jsx)(SelectContentProvider, { scope: props.__scopeSelect, children: (0, import_jsx_runtime37.jsx)(Collection7.Slot, { scope: props.__scopeSelect, children: (0, import_jsx_runtime37.jsx)("div", { children: props.children }) }) }),
|
|
frag
|
|
) : null;
|
|
}
|
|
return (0, import_jsx_runtime37.jsx)(SelectContentImpl, { ...props, ref: forwardedRef });
|
|
}
|
|
);
|
|
SelectContent.displayName = CONTENT_NAME13;
|
|
var CONTENT_MARGIN = 10;
|
|
var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME13);
|
|
var CONTENT_IMPL_NAME = "SelectContentImpl";
|
|
var Slot5 = createSlot("SelectContent.RemoveScroll");
|
|
var SelectContentImpl = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeSelect,
|
|
position = "item-aligned",
|
|
onCloseAutoFocus,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
//
|
|
// PopperContent props
|
|
side,
|
|
sideOffset,
|
|
align,
|
|
alignOffset,
|
|
arrowPadding,
|
|
collisionBoundary,
|
|
collisionPadding,
|
|
sticky,
|
|
hideWhenDetached,
|
|
avoidCollisions,
|
|
//
|
|
...contentProps
|
|
} = props;
|
|
const context = useSelectContext(CONTENT_NAME13, __scopeSelect);
|
|
const [content, setContent] = React59.useState(null);
|
|
const [viewport, setViewport] = React59.useState(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
|
|
const [selectedItem, setSelectedItem] = React59.useState(null);
|
|
const [selectedItemText, setSelectedItemText] = React59.useState(
|
|
null
|
|
);
|
|
const getItems = useCollection7(__scopeSelect);
|
|
const [isPositioned, setIsPositioned] = React59.useState(false);
|
|
const firstValidItemFoundRef = React59.useRef(false);
|
|
React59.useEffect(() => {
|
|
if (content) return hideOthers(content);
|
|
}, [content]);
|
|
useFocusGuards();
|
|
const focusFirst6 = React59.useCallback(
|
|
(candidates) => {
|
|
const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
|
|
const [lastItem] = restItems.slice(-1);
|
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
for (const candidate of candidates) {
|
|
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
candidate?.scrollIntoView({ block: "nearest" });
|
|
if (candidate === firstItem && viewport) viewport.scrollTop = 0;
|
|
if (candidate === lastItem && viewport) viewport.scrollTop = viewport.scrollHeight;
|
|
candidate?.focus();
|
|
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
}
|
|
},
|
|
[getItems, viewport]
|
|
);
|
|
const focusSelectedItem = React59.useCallback(
|
|
() => focusFirst6([selectedItem, content]),
|
|
[focusFirst6, selectedItem, content]
|
|
);
|
|
React59.useEffect(() => {
|
|
if (isPositioned) {
|
|
focusSelectedItem();
|
|
}
|
|
}, [isPositioned, focusSelectedItem]);
|
|
const { onOpenChange, triggerPointerDownPosRef } = context;
|
|
React59.useEffect(() => {
|
|
if (content) {
|
|
let pointerMoveDelta = { x: 0, y: 0 };
|
|
const handlePointerMove = (event) => {
|
|
pointerMoveDelta = {
|
|
x: Math.abs(Math.round(event.pageX) - (triggerPointerDownPosRef.current?.x ?? 0)),
|
|
y: Math.abs(Math.round(event.pageY) - (triggerPointerDownPosRef.current?.y ?? 0))
|
|
};
|
|
};
|
|
const handlePointerUp = (event) => {
|
|
if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {
|
|
event.preventDefault();
|
|
} else {
|
|
if (!content.contains(event.target)) {
|
|
onOpenChange(false);
|
|
}
|
|
}
|
|
document.removeEventListener("pointermove", handlePointerMove);
|
|
triggerPointerDownPosRef.current = null;
|
|
};
|
|
if (triggerPointerDownPosRef.current !== null) {
|
|
document.addEventListener("pointermove", handlePointerMove);
|
|
document.addEventListener("pointerup", handlePointerUp, { capture: true, once: true });
|
|
}
|
|
return () => {
|
|
document.removeEventListener("pointermove", handlePointerMove);
|
|
document.removeEventListener("pointerup", handlePointerUp, { capture: true });
|
|
};
|
|
}
|
|
}, [content, onOpenChange, triggerPointerDownPosRef]);
|
|
React59.useEffect(() => {
|
|
const close = () => onOpenChange(false);
|
|
window.addEventListener("blur", close);
|
|
window.addEventListener("resize", close);
|
|
return () => {
|
|
window.removeEventListener("blur", close);
|
|
window.removeEventListener("resize", close);
|
|
};
|
|
}, [onOpenChange]);
|
|
const [searchRef, handleTypeaheadSearch] = useTypeaheadSearch((search) => {
|
|
const enabledItems = getItems().filter((item) => !item.disabled);
|
|
const currentItem = enabledItems.find((item) => item.ref.current === document.activeElement);
|
|
const nextItem = findNextItem(enabledItems, search, currentItem);
|
|
if (nextItem) {
|
|
setTimeout(() => nextItem.ref.current.focus());
|
|
}
|
|
});
|
|
const itemRefCallback = React59.useCallback(
|
|
(node, value, disabled) => {
|
|
const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
|
|
const isSelectedItem = context.value !== void 0 && context.value === value;
|
|
if (isSelectedItem || isFirstValidItem) {
|
|
setSelectedItem(node);
|
|
if (isFirstValidItem) firstValidItemFoundRef.current = true;
|
|
}
|
|
},
|
|
[context.value]
|
|
);
|
|
const handleItemLeave = React59.useCallback(() => content?.focus(), [content]);
|
|
const itemTextRefCallback = React59.useCallback(
|
|
(node, value, disabled) => {
|
|
const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
|
|
const isSelectedItem = context.value !== void 0 && context.value === value;
|
|
if (isSelectedItem || isFirstValidItem) {
|
|
setSelectedItemText(node);
|
|
}
|
|
},
|
|
[context.value]
|
|
);
|
|
const SelectPosition = position === "popper" ? SelectPopperPosition : SelectItemAlignedPosition;
|
|
const popperContentProps = SelectPosition === SelectPopperPosition ? {
|
|
side,
|
|
sideOffset,
|
|
align,
|
|
alignOffset,
|
|
arrowPadding,
|
|
collisionBoundary,
|
|
collisionPadding,
|
|
sticky,
|
|
hideWhenDetached,
|
|
avoidCollisions
|
|
} : {};
|
|
return (0, import_jsx_runtime37.jsx)(
|
|
SelectContentProvider,
|
|
{
|
|
scope: __scopeSelect,
|
|
content,
|
|
viewport,
|
|
onViewportChange: setViewport,
|
|
itemRefCallback,
|
|
selectedItem,
|
|
onItemLeave: handleItemLeave,
|
|
itemTextRefCallback,
|
|
focusSelectedItem,
|
|
selectedItemText,
|
|
position,
|
|
isPositioned,
|
|
searchRef,
|
|
children: (0, import_jsx_runtime37.jsx)(Combination_default, { as: Slot5, allowPinchZoom: true, children: (0, import_jsx_runtime37.jsx)(
|
|
FocusScope,
|
|
{
|
|
asChild: true,
|
|
trapped: context.open,
|
|
onMountAutoFocus: (event) => {
|
|
event.preventDefault();
|
|
},
|
|
onUnmountAutoFocus: composeEventHandlers(onCloseAutoFocus, (event) => {
|
|
context.trigger?.focus({ preventScroll: true });
|
|
event.preventDefault();
|
|
}),
|
|
children: (0, import_jsx_runtime37.jsx)(
|
|
DismissableLayer,
|
|
{
|
|
asChild: true,
|
|
disableOutsidePointerEvents: true,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside: (event) => event.preventDefault(),
|
|
onDismiss: () => context.onOpenChange(false),
|
|
children: (0, import_jsx_runtime37.jsx)(
|
|
SelectPosition,
|
|
{
|
|
role: "listbox",
|
|
id: context.contentId,
|
|
"data-state": context.open ? "open" : "closed",
|
|
dir: context.dir,
|
|
onContextMenu: (event) => event.preventDefault(),
|
|
...contentProps,
|
|
...popperContentProps,
|
|
onPlaced: () => setIsPositioned(true),
|
|
ref: composedRefs,
|
|
style: {
|
|
// flex layout so we can place the scroll buttons properly
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
// reset the outline by default as the content MAY get focused
|
|
outline: "none",
|
|
...contentProps.style
|
|
},
|
|
onKeyDown: composeEventHandlers(contentProps.onKeyDown, (event) => {
|
|
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
|
|
if (event.key === "Tab") event.preventDefault();
|
|
if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
|
|
if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
|
|
const items = getItems().filter((item) => !item.disabled);
|
|
let candidateNodes = items.map((item) => item.ref.current);
|
|
if (["ArrowUp", "End"].includes(event.key)) {
|
|
candidateNodes = candidateNodes.slice().reverse();
|
|
}
|
|
if (["ArrowUp", "ArrowDown"].includes(event.key)) {
|
|
const currentElement = event.target;
|
|
const currentIndex = candidateNodes.indexOf(currentElement);
|
|
candidateNodes = candidateNodes.slice(currentIndex + 1);
|
|
}
|
|
setTimeout(() => focusFirst6(candidateNodes));
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
) })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
SelectContentImpl.displayName = CONTENT_IMPL_NAME;
|
|
var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
|
|
var SelectItemAlignedPosition = React59.forwardRef((props, forwardedRef) => {
|
|
const { __scopeSelect, onPlaced, ...popperProps } = props;
|
|
const context = useSelectContext(CONTENT_NAME13, __scopeSelect);
|
|
const contentContext = useSelectContentContext(CONTENT_NAME13, __scopeSelect);
|
|
const [contentWrapper, setContentWrapper] = React59.useState(null);
|
|
const [content, setContent] = React59.useState(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
|
|
const getItems = useCollection7(__scopeSelect);
|
|
const shouldExpandOnScrollRef = React59.useRef(false);
|
|
const shouldRepositionRef = React59.useRef(true);
|
|
const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
|
|
const position = React59.useCallback(() => {
|
|
if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
|
|
const triggerRect = context.trigger.getBoundingClientRect();
|
|
const contentRect = content.getBoundingClientRect();
|
|
const valueNodeRect = context.valueNode.getBoundingClientRect();
|
|
const itemTextRect = selectedItemText.getBoundingClientRect();
|
|
if (context.dir !== "rtl") {
|
|
const itemTextOffset = itemTextRect.left - contentRect.left;
|
|
const left = valueNodeRect.left - itemTextOffset;
|
|
const leftDelta = triggerRect.left - left;
|
|
const minContentWidth = triggerRect.width + leftDelta;
|
|
const contentWidth = Math.max(minContentWidth, contentRect.width);
|
|
const rightEdge = window.innerWidth - CONTENT_MARGIN;
|
|
const clampedLeft = clamp2(left, [
|
|
CONTENT_MARGIN,
|
|
// Prevents the content from going off the starting edge of the
|
|
// viewport. It may still go off the ending edge, but this can be
|
|
// controlled by the user since they may want to manage overflow in a
|
|
// specific way.
|
|
// https://github.com/radix-ui/primitives/issues/2049
|
|
Math.max(CONTENT_MARGIN, rightEdge - contentWidth)
|
|
]);
|
|
contentWrapper.style.minWidth = minContentWidth + "px";
|
|
contentWrapper.style.left = clampedLeft + "px";
|
|
} else {
|
|
const itemTextOffset = contentRect.right - itemTextRect.right;
|
|
const right = window.innerWidth - valueNodeRect.right - itemTextOffset;
|
|
const rightDelta = window.innerWidth - triggerRect.right - right;
|
|
const minContentWidth = triggerRect.width + rightDelta;
|
|
const contentWidth = Math.max(minContentWidth, contentRect.width);
|
|
const leftEdge = window.innerWidth - CONTENT_MARGIN;
|
|
const clampedRight = clamp2(right, [
|
|
CONTENT_MARGIN,
|
|
Math.max(CONTENT_MARGIN, leftEdge - contentWidth)
|
|
]);
|
|
contentWrapper.style.minWidth = minContentWidth + "px";
|
|
contentWrapper.style.right = clampedRight + "px";
|
|
}
|
|
const items = getItems();
|
|
const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
|
|
const itemsHeight = viewport.scrollHeight;
|
|
const contentStyles = window.getComputedStyle(content);
|
|
const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10);
|
|
const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);
|
|
const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);
|
|
const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);
|
|
const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth;
|
|
const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);
|
|
const viewportStyles = window.getComputedStyle(viewport);
|
|
const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10);
|
|
const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10);
|
|
const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN;
|
|
const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
|
|
const selectedItemHalfHeight = selectedItem.offsetHeight / 2;
|
|
const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight;
|
|
const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
|
|
const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
|
|
const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
|
|
if (willAlignWithoutTopOverflow) {
|
|
const isLastItem = items.length > 0 && selectedItem === items[items.length - 1].ref.current;
|
|
contentWrapper.style.bottom = "0px";
|
|
const viewportOffsetBottom = content.clientHeight - viewport.offsetTop - viewport.offsetHeight;
|
|
const clampedTriggerMiddleToBottomEdge = Math.max(
|
|
triggerMiddleToBottomEdge,
|
|
selectedItemHalfHeight + // viewport might have padding bottom, include it to avoid a scrollable viewport
|
|
(isLastItem ? viewportPaddingBottom : 0) + viewportOffsetBottom + contentBorderBottomWidth
|
|
);
|
|
const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
|
|
contentWrapper.style.height = height + "px";
|
|
} else {
|
|
const isFirstItem = items.length > 0 && selectedItem === items[0].ref.current;
|
|
contentWrapper.style.top = "0px";
|
|
const clampedTopEdgeToTriggerMiddle = Math.max(
|
|
topEdgeToTriggerMiddle,
|
|
contentBorderTopWidth + viewport.offsetTop + // viewport might have padding top, include it to avoid a scrollable viewport
|
|
(isFirstItem ? viewportPaddingTop : 0) + selectedItemHalfHeight
|
|
);
|
|
const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;
|
|
contentWrapper.style.height = height + "px";
|
|
viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop;
|
|
}
|
|
contentWrapper.style.margin = `${CONTENT_MARGIN}px 0`;
|
|
contentWrapper.style.minHeight = minContentHeight + "px";
|
|
contentWrapper.style.maxHeight = availableHeight + "px";
|
|
onPlaced?.();
|
|
requestAnimationFrame(() => shouldExpandOnScrollRef.current = true);
|
|
}
|
|
}, [
|
|
getItems,
|
|
context.trigger,
|
|
context.valueNode,
|
|
contentWrapper,
|
|
content,
|
|
viewport,
|
|
selectedItem,
|
|
selectedItemText,
|
|
context.dir,
|
|
onPlaced
|
|
]);
|
|
useLayoutEffect2(() => position(), [position]);
|
|
const [contentZIndex, setContentZIndex] = React59.useState();
|
|
useLayoutEffect2(() => {
|
|
if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
|
|
}, [content]);
|
|
const handleScrollButtonChange = React59.useCallback(
|
|
(node) => {
|
|
if (node && shouldRepositionRef.current === true) {
|
|
position();
|
|
focusSelectedItem?.();
|
|
shouldRepositionRef.current = false;
|
|
}
|
|
},
|
|
[position, focusSelectedItem]
|
|
);
|
|
return (0, import_jsx_runtime37.jsx)(
|
|
SelectViewportProvider,
|
|
{
|
|
scope: __scopeSelect,
|
|
contentWrapper,
|
|
shouldExpandOnScrollRef,
|
|
onScrollButtonChange: handleScrollButtonChange,
|
|
children: (0, import_jsx_runtime37.jsx)(
|
|
"div",
|
|
{
|
|
ref: setContentWrapper,
|
|
style: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
position: "fixed",
|
|
zIndex: contentZIndex
|
|
},
|
|
children: (0, import_jsx_runtime37.jsx)(
|
|
Primitive.div,
|
|
{
|
|
...popperProps,
|
|
ref: composedRefs,
|
|
style: {
|
|
// When we get the height of the content, it includes borders. If we were to set
|
|
// the height without having `boxSizing: 'border-box'` it would be too big.
|
|
boxSizing: "border-box",
|
|
// We need to ensure the content doesn't get taller than the wrapper
|
|
maxHeight: "100%",
|
|
...popperProps.style
|
|
}
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
);
|
|
});
|
|
SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
|
|
var POPPER_POSITION_NAME = "SelectPopperPosition";
|
|
var SelectPopperPosition = React59.forwardRef((props, forwardedRef) => {
|
|
const {
|
|
__scopeSelect,
|
|
align = "start",
|
|
collisionPadding = CONTENT_MARGIN,
|
|
...popperProps
|
|
} = props;
|
|
const popperScope = usePopperScope4(__scopeSelect);
|
|
return (0, import_jsx_runtime37.jsx)(
|
|
Content4,
|
|
{
|
|
...popperScope,
|
|
...popperProps,
|
|
ref: forwardedRef,
|
|
align,
|
|
collisionPadding,
|
|
style: {
|
|
// Ensure border-box for floating-ui calculations
|
|
boxSizing: "border-box",
|
|
...popperProps.style,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-select-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-select-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-select-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-select-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-select-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
}
|
|
}
|
|
);
|
|
});
|
|
SelectPopperPosition.displayName = POPPER_POSITION_NAME;
|
|
var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME13, {});
|
|
var VIEWPORT_NAME3 = "SelectViewport";
|
|
var SelectViewport = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSelect, nonce, ...viewportProps } = props;
|
|
const contentContext = useSelectContentContext(VIEWPORT_NAME3, __scopeSelect);
|
|
const viewportContext = useSelectViewportContext(VIEWPORT_NAME3, __scopeSelect);
|
|
const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
|
|
const prevScrollTopRef = React59.useRef(0);
|
|
return (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
(0, import_jsx_runtime37.jsx)(
|
|
"style",
|
|
{
|
|
dangerouslySetInnerHTML: {
|
|
__html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`
|
|
},
|
|
nonce
|
|
}
|
|
),
|
|
(0, import_jsx_runtime37.jsx)(Collection7.Slot, { scope: __scopeSelect, children: (0, import_jsx_runtime37.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-radix-select-viewport": "",
|
|
role: "presentation",
|
|
...viewportProps,
|
|
ref: composedRefs,
|
|
style: {
|
|
// we use position: 'relative' here on the `viewport` so that when we call
|
|
// `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
|
|
// (independent of the scrollUpButton).
|
|
position: "relative",
|
|
flex: 1,
|
|
// Viewport should only be scrollable in the vertical direction.
|
|
// This won't work in vertical writing modes, so we'll need to
|
|
// revisit this if/when that is supported
|
|
// https://developer.chrome.com/blog/vertical-form-controls
|
|
overflow: "hidden auto",
|
|
...viewportProps.style
|
|
},
|
|
onScroll: composeEventHandlers(viewportProps.onScroll, (event) => {
|
|
const viewport = event.currentTarget;
|
|
const { contentWrapper, shouldExpandOnScrollRef } = viewportContext;
|
|
if (shouldExpandOnScrollRef?.current && contentWrapper) {
|
|
const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop);
|
|
if (scrolledBy > 0) {
|
|
const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
|
|
const cssMinHeight = parseFloat(contentWrapper.style.minHeight);
|
|
const cssHeight = parseFloat(contentWrapper.style.height);
|
|
const prevHeight = Math.max(cssMinHeight, cssHeight);
|
|
if (prevHeight < availableHeight) {
|
|
const nextHeight = prevHeight + scrolledBy;
|
|
const clampedNextHeight = Math.min(availableHeight, nextHeight);
|
|
const heightDiff = nextHeight - clampedNextHeight;
|
|
contentWrapper.style.height = clampedNextHeight + "px";
|
|
if (contentWrapper.style.bottom === "0px") {
|
|
viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;
|
|
contentWrapper.style.justifyContent = "flex-end";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
prevScrollTopRef.current = viewport.scrollTop;
|
|
})
|
|
}
|
|
) })
|
|
] });
|
|
}
|
|
);
|
|
SelectViewport.displayName = VIEWPORT_NAME3;
|
|
var GROUP_NAME6 = "SelectGroup";
|
|
var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME6);
|
|
var SelectGroup = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSelect, ...groupProps } = props;
|
|
const groupId = useId();
|
|
return (0, import_jsx_runtime37.jsx)(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: (0, import_jsx_runtime37.jsx)(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
SelectGroup.displayName = GROUP_NAME6;
|
|
var LABEL_NAME6 = "SelectLabel";
|
|
var SelectLabel = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSelect, ...labelProps } = props;
|
|
const groupContext = useSelectGroupContext(LABEL_NAME6, __scopeSelect);
|
|
return (0, import_jsx_runtime37.jsx)(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
SelectLabel.displayName = LABEL_NAME6;
|
|
var ITEM_NAME9 = "SelectItem";
|
|
var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME9);
|
|
var SelectItem = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeSelect,
|
|
value,
|
|
disabled = false,
|
|
textValue: textValueProp,
|
|
...itemProps
|
|
} = props;
|
|
const context = useSelectContext(ITEM_NAME9, __scopeSelect);
|
|
const contentContext = useSelectContentContext(ITEM_NAME9, __scopeSelect);
|
|
const isSelected = context.value === value;
|
|
const [textValue, setTextValue] = React59.useState(textValueProp ?? "");
|
|
const [isFocused, setIsFocused] = React59.useState(false);
|
|
const composedRefs = useComposedRefs(
|
|
forwardedRef,
|
|
(node) => contentContext.itemRefCallback?.(node, value, disabled)
|
|
);
|
|
const textId = useId();
|
|
const pointerTypeRef = React59.useRef("touch");
|
|
const handleSelect = () => {
|
|
if (!disabled) {
|
|
context.onValueChange(value);
|
|
context.onOpenChange(false);
|
|
}
|
|
};
|
|
if (value === "") {
|
|
throw new Error(
|
|
"A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder."
|
|
);
|
|
}
|
|
return (0, import_jsx_runtime37.jsx)(
|
|
SelectItemContextProvider,
|
|
{
|
|
scope: __scopeSelect,
|
|
value,
|
|
disabled,
|
|
textId,
|
|
isSelected,
|
|
onItemTextChange: React59.useCallback((node) => {
|
|
setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
|
|
}, []),
|
|
children: (0, import_jsx_runtime37.jsx)(
|
|
Collection7.ItemSlot,
|
|
{
|
|
scope: __scopeSelect,
|
|
value,
|
|
disabled,
|
|
textValue,
|
|
children: (0, import_jsx_runtime37.jsx)(
|
|
Primitive.div,
|
|
{
|
|
role: "option",
|
|
"aria-labelledby": textId,
|
|
"data-highlighted": isFocused ? "" : void 0,
|
|
"aria-selected": isSelected && isFocused,
|
|
"data-state": isSelected ? "checked" : "unchecked",
|
|
"aria-disabled": disabled || void 0,
|
|
"data-disabled": disabled ? "" : void 0,
|
|
tabIndex: disabled ? void 0 : -1,
|
|
...itemProps,
|
|
ref: composedRefs,
|
|
onFocus: composeEventHandlers(itemProps.onFocus, () => setIsFocused(true)),
|
|
onBlur: composeEventHandlers(itemProps.onBlur, () => setIsFocused(false)),
|
|
onClick: composeEventHandlers(itemProps.onClick, () => {
|
|
if (pointerTypeRef.current !== "mouse") handleSelect();
|
|
}),
|
|
onPointerUp: composeEventHandlers(itemProps.onPointerUp, () => {
|
|
if (pointerTypeRef.current === "mouse") handleSelect();
|
|
}),
|
|
onPointerDown: composeEventHandlers(itemProps.onPointerDown, (event) => {
|
|
pointerTypeRef.current = event.pointerType;
|
|
}),
|
|
onPointerMove: composeEventHandlers(itemProps.onPointerMove, (event) => {
|
|
pointerTypeRef.current = event.pointerType;
|
|
if (disabled) {
|
|
contentContext.onItemLeave?.();
|
|
} else if (pointerTypeRef.current === "mouse") {
|
|
event.currentTarget.focus({ preventScroll: true });
|
|
}
|
|
}),
|
|
onPointerLeave: composeEventHandlers(itemProps.onPointerLeave, (event) => {
|
|
if (event.currentTarget === document.activeElement) {
|
|
contentContext.onItemLeave?.();
|
|
}
|
|
}),
|
|
onKeyDown: composeEventHandlers(itemProps.onKeyDown, (event) => {
|
|
const isTypingAhead = contentContext.searchRef?.current !== "";
|
|
if (isTypingAhead && event.key === " ") return;
|
|
if (SELECTION_KEYS2.includes(event.key)) handleSelect();
|
|
if (event.key === " ") event.preventDefault();
|
|
})
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
SelectItem.displayName = ITEM_NAME9;
|
|
var ITEM_TEXT_NAME = "SelectItemText";
|
|
var SelectItemText = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSelect, className, style, ...itemTextProps } = props;
|
|
const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
|
|
const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
|
|
const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
|
|
const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
|
|
const [itemTextNode, setItemTextNode] = React59.useState(null);
|
|
const composedRefs = useComposedRefs(
|
|
forwardedRef,
|
|
(node) => setItemTextNode(node),
|
|
itemContext.onItemTextChange,
|
|
(node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled)
|
|
);
|
|
const textContent = itemTextNode?.textContent;
|
|
const nativeOption = React59.useMemo(
|
|
() => (0, import_jsx_runtime37.jsx)("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value),
|
|
[itemContext.disabled, itemContext.value, textContent]
|
|
);
|
|
const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
|
|
useLayoutEffect2(() => {
|
|
onNativeOptionAdd(nativeOption);
|
|
return () => onNativeOptionRemove(nativeOption);
|
|
}, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
|
|
return (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
(0, import_jsx_runtime37.jsx)(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
|
|
itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM5.createPortal(itemTextProps.children, context.valueNode) : null
|
|
] });
|
|
}
|
|
);
|
|
SelectItemText.displayName = ITEM_TEXT_NAME;
|
|
var ITEM_INDICATOR_NAME2 = "SelectItemIndicator";
|
|
var SelectItemIndicator = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSelect, ...itemIndicatorProps } = props;
|
|
const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME2, __scopeSelect);
|
|
return itemContext.isSelected ? (0, import_jsx_runtime37.jsx)(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
|
|
}
|
|
);
|
|
SelectItemIndicator.displayName = ITEM_INDICATOR_NAME2;
|
|
var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
|
|
var SelectScrollUpButton = React59.forwardRef((props, forwardedRef) => {
|
|
const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
|
|
const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
|
|
const [canScrollUp, setCanScrollUp] = React59.useState(false);
|
|
const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
|
|
useLayoutEffect2(() => {
|
|
if (contentContext.viewport && contentContext.isPositioned) {
|
|
let handleScroll22 = function() {
|
|
const canScrollUp2 = viewport.scrollTop > 0;
|
|
setCanScrollUp(canScrollUp2);
|
|
};
|
|
var handleScroll2 = handleScroll22;
|
|
const viewport = contentContext.viewport;
|
|
handleScroll22();
|
|
viewport.addEventListener("scroll", handleScroll22);
|
|
return () => viewport.removeEventListener("scroll", handleScroll22);
|
|
}
|
|
}, [contentContext.viewport, contentContext.isPositioned]);
|
|
return canScrollUp ? (0, import_jsx_runtime37.jsx)(
|
|
SelectScrollButtonImpl,
|
|
{
|
|
...props,
|
|
ref: composedRefs,
|
|
onAutoScroll: () => {
|
|
const { viewport, selectedItem } = contentContext;
|
|
if (viewport && selectedItem) {
|
|
viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
|
|
}
|
|
}
|
|
}
|
|
) : null;
|
|
});
|
|
SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
|
|
var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
|
|
var SelectScrollDownButton = React59.forwardRef((props, forwardedRef) => {
|
|
const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
|
|
const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
|
|
const [canScrollDown, setCanScrollDown] = React59.useState(false);
|
|
const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
|
|
useLayoutEffect2(() => {
|
|
if (contentContext.viewport && contentContext.isPositioned) {
|
|
let handleScroll22 = function() {
|
|
const maxScroll = viewport.scrollHeight - viewport.clientHeight;
|
|
const canScrollDown2 = Math.ceil(viewport.scrollTop) < maxScroll;
|
|
setCanScrollDown(canScrollDown2);
|
|
};
|
|
var handleScroll2 = handleScroll22;
|
|
const viewport = contentContext.viewport;
|
|
handleScroll22();
|
|
viewport.addEventListener("scroll", handleScroll22);
|
|
return () => viewport.removeEventListener("scroll", handleScroll22);
|
|
}
|
|
}, [contentContext.viewport, contentContext.isPositioned]);
|
|
return canScrollDown ? (0, import_jsx_runtime37.jsx)(
|
|
SelectScrollButtonImpl,
|
|
{
|
|
...props,
|
|
ref: composedRefs,
|
|
onAutoScroll: () => {
|
|
const { viewport, selectedItem } = contentContext;
|
|
if (viewport && selectedItem) {
|
|
viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
|
|
}
|
|
}
|
|
}
|
|
) : null;
|
|
});
|
|
SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
|
|
var SelectScrollButtonImpl = React59.forwardRef((props, forwardedRef) => {
|
|
const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
|
|
const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
|
|
const autoScrollTimerRef = React59.useRef(null);
|
|
const getItems = useCollection7(__scopeSelect);
|
|
const clearAutoScrollTimer = React59.useCallback(() => {
|
|
if (autoScrollTimerRef.current !== null) {
|
|
window.clearInterval(autoScrollTimerRef.current);
|
|
autoScrollTimerRef.current = null;
|
|
}
|
|
}, []);
|
|
React59.useEffect(() => {
|
|
return () => clearAutoScrollTimer();
|
|
}, [clearAutoScrollTimer]);
|
|
useLayoutEffect2(() => {
|
|
const activeItem = getItems().find((item) => item.ref.current === document.activeElement);
|
|
activeItem?.ref.current?.scrollIntoView({ block: "nearest" });
|
|
}, [getItems]);
|
|
return (0, import_jsx_runtime37.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"aria-hidden": true,
|
|
...scrollIndicatorProps,
|
|
ref: forwardedRef,
|
|
style: { flexShrink: 0, ...scrollIndicatorProps.style },
|
|
onPointerDown: composeEventHandlers(scrollIndicatorProps.onPointerDown, () => {
|
|
if (autoScrollTimerRef.current === null) {
|
|
autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
|
|
}
|
|
}),
|
|
onPointerMove: composeEventHandlers(scrollIndicatorProps.onPointerMove, () => {
|
|
contentContext.onItemLeave?.();
|
|
if (autoScrollTimerRef.current === null) {
|
|
autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
|
|
}
|
|
}),
|
|
onPointerLeave: composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => {
|
|
clearAutoScrollTimer();
|
|
})
|
|
}
|
|
);
|
|
});
|
|
var SEPARATOR_NAME5 = "SelectSeparator";
|
|
var SelectSeparator = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSelect, ...separatorProps } = props;
|
|
return (0, import_jsx_runtime37.jsx)(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
SelectSeparator.displayName = SEPARATOR_NAME5;
|
|
var ARROW_NAME8 = "SelectArrow";
|
|
var SelectArrow = React59.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSelect, ...arrowProps } = props;
|
|
const popperScope = usePopperScope4(__scopeSelect);
|
|
const context = useSelectContext(ARROW_NAME8, __scopeSelect);
|
|
const contentContext = useSelectContentContext(ARROW_NAME8, __scopeSelect);
|
|
return context.open && contentContext.position === "popper" ? (0, import_jsx_runtime37.jsx)(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
|
|
}
|
|
);
|
|
SelectArrow.displayName = ARROW_NAME8;
|
|
var BUBBLE_INPUT_NAME3 = "SelectBubbleInput";
|
|
var SelectBubbleInput = React59.forwardRef(
|
|
({ __scopeSelect, value, ...props }, forwardedRef) => {
|
|
const ref = React59.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const prevValue = usePrevious(value);
|
|
React59.useEffect(() => {
|
|
const select = ref.current;
|
|
if (!select) return;
|
|
const selectProto = window.HTMLSelectElement.prototype;
|
|
const descriptor = Object.getOwnPropertyDescriptor(
|
|
selectProto,
|
|
"value"
|
|
);
|
|
const setValue = descriptor.set;
|
|
if (prevValue !== value && setValue) {
|
|
const event = new Event("change", { bubbles: true });
|
|
setValue.call(select, value);
|
|
select.dispatchEvent(event);
|
|
}
|
|
}, [prevValue, value]);
|
|
return (0, import_jsx_runtime37.jsx)(
|
|
Primitive.select,
|
|
{
|
|
...props,
|
|
style: { ...VISUALLY_HIDDEN_STYLES, ...props.style },
|
|
ref: composedRefs,
|
|
defaultValue: value
|
|
}
|
|
);
|
|
}
|
|
);
|
|
SelectBubbleInput.displayName = BUBBLE_INPUT_NAME3;
|
|
function shouldShowPlaceholder(value) {
|
|
return value === "" || value === void 0;
|
|
}
|
|
function useTypeaheadSearch(onSearchChange) {
|
|
const handleSearchChange = useCallbackRef(onSearchChange);
|
|
const searchRef = React59.useRef("");
|
|
const timerRef = React59.useRef(0);
|
|
const handleTypeaheadSearch = React59.useCallback(
|
|
(key) => {
|
|
const search = searchRef.current + key;
|
|
handleSearchChange(search);
|
|
(function updateSearch(value) {
|
|
searchRef.current = value;
|
|
window.clearTimeout(timerRef.current);
|
|
if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
|
|
})(search);
|
|
},
|
|
[handleSearchChange]
|
|
);
|
|
const resetTypeahead = React59.useCallback(() => {
|
|
searchRef.current = "";
|
|
window.clearTimeout(timerRef.current);
|
|
}, []);
|
|
React59.useEffect(() => {
|
|
return () => window.clearTimeout(timerRef.current);
|
|
}, []);
|
|
return [searchRef, handleTypeaheadSearch, resetTypeahead];
|
|
}
|
|
function findNextItem(items, search, currentItem) {
|
|
const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
|
|
const normalizedSearch = isRepeated ? search[0] : search;
|
|
const currentItemIndex = currentItem ? items.indexOf(currentItem) : -1;
|
|
let wrappedItems = wrapArray4(items, Math.max(currentItemIndex, 0));
|
|
const excludeCurrentItem = normalizedSearch.length === 1;
|
|
if (excludeCurrentItem) wrappedItems = wrappedItems.filter((v) => v !== currentItem);
|
|
const nextItem = wrappedItems.find(
|
|
(item) => item.textValue.toLowerCase().startsWith(normalizedSearch.toLowerCase())
|
|
);
|
|
return nextItem !== currentItem ? nextItem : void 0;
|
|
}
|
|
function wrapArray4(array, startIndex) {
|
|
return array.map((_, index2) => array[(startIndex + index2) % array.length]);
|
|
}
|
|
var Root212 = Select;
|
|
var Trigger10 = SelectTrigger;
|
|
var Value = SelectValue;
|
|
var Icon = SelectIcon;
|
|
var Portal6 = SelectPortal;
|
|
var Content29 = SelectContent;
|
|
var Viewport3 = SelectViewport;
|
|
var Group3 = SelectGroup;
|
|
var Label5 = SelectLabel;
|
|
var Item5 = SelectItem;
|
|
var ItemText = SelectItemText;
|
|
var ItemIndicator3 = SelectItemIndicator;
|
|
var ScrollUpButton = SelectScrollUpButton;
|
|
var ScrollDownButton = SelectScrollDownButton;
|
|
var Separator3 = SelectSeparator;
|
|
var Arrow28 = SelectArrow;
|
|
|
|
// node_modules/@radix-ui/react-separator/dist/index.mjs
|
|
var dist_exports32 = {};
|
|
__export(dist_exports32, {
|
|
Root: () => Root15,
|
|
Separator: () => Separator4
|
|
});
|
|
var React60 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
|
|
var NAME6 = "Separator";
|
|
var DEFAULT_ORIENTATION = "horizontal";
|
|
var ORIENTATIONS = ["horizontal", "vertical"];
|
|
var Separator4 = React60.forwardRef((props, forwardedRef) => {
|
|
const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
|
|
const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
|
|
const ariaOrientation = orientation === "vertical" ? orientation : void 0;
|
|
const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
|
|
return (0, import_jsx_runtime38.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-orientation": orientation,
|
|
...semanticProps,
|
|
...domProps,
|
|
ref: forwardedRef
|
|
}
|
|
);
|
|
});
|
|
Separator4.displayName = NAME6;
|
|
function isValidOrientation(orientation) {
|
|
return ORIENTATIONS.includes(orientation);
|
|
}
|
|
var Root15 = Separator4;
|
|
|
|
// node_modules/@radix-ui/react-slider/dist/index.mjs
|
|
var dist_exports33 = {};
|
|
__export(dist_exports33, {
|
|
Range: () => Range,
|
|
Root: () => Root16,
|
|
Slider: () => Slider,
|
|
SliderRange: () => SliderRange,
|
|
SliderThumb: () => SliderThumb,
|
|
SliderTrack: () => SliderTrack,
|
|
Thumb: () => Thumb2,
|
|
Track: () => Track,
|
|
createSliderScope: () => createSliderScope
|
|
});
|
|
var React61 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
|
|
var PAGE_KEYS = ["PageUp", "PageDown"];
|
|
var ARROW_KEYS3 = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
|
|
var BACK_KEYS = {
|
|
"from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
|
|
"from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
|
|
"from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
|
|
"from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
|
|
};
|
|
var SLIDER_NAME = "Slider";
|
|
var [Collection8, useCollection8, createCollectionScope8] = createCollection(SLIDER_NAME);
|
|
var [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME, [
|
|
createCollectionScope8
|
|
]);
|
|
var [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
|
|
var Slider = React61.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
name,
|
|
min: min2 = 0,
|
|
max: max2 = 100,
|
|
step = 1,
|
|
orientation = "horizontal",
|
|
disabled = false,
|
|
minStepsBetweenThumbs = 0,
|
|
defaultValue = [min2],
|
|
value,
|
|
onValueChange = () => {
|
|
},
|
|
onValueCommit = () => {
|
|
},
|
|
inverted = false,
|
|
form,
|
|
...sliderProps
|
|
} = props;
|
|
const thumbRefs = React61.useRef(/* @__PURE__ */ new Set());
|
|
const valueIndexToChangeRef = React61.useRef(0);
|
|
const isHorizontal = orientation === "horizontal";
|
|
const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;
|
|
const [values = [], setValues] = useControllableState({
|
|
prop: value,
|
|
defaultProp: defaultValue,
|
|
onChange: (value2) => {
|
|
const thumbs = [...thumbRefs.current];
|
|
thumbs[valueIndexToChangeRef.current]?.focus();
|
|
onValueChange(value2);
|
|
}
|
|
});
|
|
const valuesBeforeSlideStartRef = React61.useRef(values);
|
|
function handleSlideStart(value2) {
|
|
const closestIndex = getClosestValueIndex(values, value2);
|
|
updateValues(value2, closestIndex);
|
|
}
|
|
function handleSlideMove(value2) {
|
|
updateValues(value2, valueIndexToChangeRef.current);
|
|
}
|
|
function handleSlideEnd() {
|
|
const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];
|
|
const nextValue = values[valueIndexToChangeRef.current];
|
|
const hasChanged = nextValue !== prevValue;
|
|
if (hasChanged) onValueCommit(values);
|
|
}
|
|
function updateValues(value2, atIndex, { commit } = { commit: false }) {
|
|
const decimalCount = getDecimalCount(step);
|
|
const snapToStep = roundValue(Math.round((value2 - min2) / step) * step + min2, decimalCount);
|
|
const nextValue = clamp2(snapToStep, [min2, max2]);
|
|
setValues((prevValues = []) => {
|
|
const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
|
|
if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
|
|
valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
|
|
const hasChanged = String(nextValues) !== String(prevValues);
|
|
if (hasChanged && commit) onValueCommit(nextValues);
|
|
return hasChanged ? nextValues : prevValues;
|
|
} else {
|
|
return prevValues;
|
|
}
|
|
});
|
|
}
|
|
return (0, import_jsx_runtime39.jsx)(
|
|
SliderProvider,
|
|
{
|
|
scope: props.__scopeSlider,
|
|
name,
|
|
disabled,
|
|
min: min2,
|
|
max: max2,
|
|
valueIndexToChangeRef,
|
|
thumbs: thumbRefs.current,
|
|
values,
|
|
orientation,
|
|
form,
|
|
children: (0, import_jsx_runtime39.jsx)(Collection8.Provider, { scope: props.__scopeSlider, children: (0, import_jsx_runtime39.jsx)(Collection8.Slot, { scope: props.__scopeSlider, children: (0, import_jsx_runtime39.jsx)(
|
|
SliderOrientation,
|
|
{
|
|
"aria-disabled": disabled,
|
|
"data-disabled": disabled ? "" : void 0,
|
|
...sliderProps,
|
|
ref: forwardedRef,
|
|
onPointerDown: composeEventHandlers(sliderProps.onPointerDown, () => {
|
|
if (!disabled) valuesBeforeSlideStartRef.current = values;
|
|
}),
|
|
min: min2,
|
|
max: max2,
|
|
inverted,
|
|
onSlideStart: disabled ? void 0 : handleSlideStart,
|
|
onSlideMove: disabled ? void 0 : handleSlideMove,
|
|
onSlideEnd: disabled ? void 0 : handleSlideEnd,
|
|
onHomeKeyDown: () => !disabled && updateValues(min2, 0, { commit: true }),
|
|
onEndKeyDown: () => !disabled && updateValues(max2, values.length - 1, { commit: true }),
|
|
onStepKeyDown: ({ event, direction: stepDirection }) => {
|
|
if (!disabled) {
|
|
const isPageKey = PAGE_KEYS.includes(event.key);
|
|
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS3.includes(event.key);
|
|
const multiplier = isSkipKey ? 10 : 1;
|
|
const atIndex = valueIndexToChangeRef.current;
|
|
const value2 = values[atIndex];
|
|
const stepInDirection = step * multiplier * stepDirection;
|
|
updateValues(value2 + stepInDirection, atIndex, { commit: true });
|
|
}
|
|
}
|
|
}
|
|
) }) })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
Slider.displayName = SLIDER_NAME;
|
|
var [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
|
|
startEdge: "left",
|
|
endEdge: "right",
|
|
size: "width",
|
|
direction: 1
|
|
});
|
|
var SliderHorizontal = React61.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
min: min2,
|
|
max: max2,
|
|
dir,
|
|
inverted,
|
|
onSlideStart,
|
|
onSlideMove,
|
|
onSlideEnd,
|
|
onStepKeyDown,
|
|
...sliderProps
|
|
} = props;
|
|
const [slider, setSlider] = React61.useState(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node));
|
|
const rectRef = React61.useRef(void 0);
|
|
const direction = useDirection(dir);
|
|
const isDirectionLTR = direction === "ltr";
|
|
const isSlidingFromLeft = isDirectionLTR && !inverted || !isDirectionLTR && inverted;
|
|
function getValueFromPointer(pointerPosition) {
|
|
const rect = rectRef.current || slider.getBoundingClientRect();
|
|
const input = [0, rect.width];
|
|
const output = isSlidingFromLeft ? [min2, max2] : [max2, min2];
|
|
const value = linearScale2(input, output);
|
|
rectRef.current = rect;
|
|
return value(pointerPosition - rect.left);
|
|
}
|
|
return (0, import_jsx_runtime39.jsx)(
|
|
SliderOrientationProvider,
|
|
{
|
|
scope: props.__scopeSlider,
|
|
startEdge: isSlidingFromLeft ? "left" : "right",
|
|
endEdge: isSlidingFromLeft ? "right" : "left",
|
|
direction: isSlidingFromLeft ? 1 : -1,
|
|
size: "width",
|
|
children: (0, import_jsx_runtime39.jsx)(
|
|
SliderImpl,
|
|
{
|
|
dir: direction,
|
|
"data-orientation": "horizontal",
|
|
...sliderProps,
|
|
ref: composedRefs,
|
|
style: {
|
|
...sliderProps.style,
|
|
["--radix-slider-thumb-transform"]: "translateX(-50%)"
|
|
},
|
|
onSlideStart: (event) => {
|
|
const value = getValueFromPointer(event.clientX);
|
|
onSlideStart?.(value);
|
|
},
|
|
onSlideMove: (event) => {
|
|
const value = getValueFromPointer(event.clientX);
|
|
onSlideMove?.(value);
|
|
},
|
|
onSlideEnd: () => {
|
|
rectRef.current = void 0;
|
|
onSlideEnd?.();
|
|
},
|
|
onStepKeyDown: (event) => {
|
|
const slideDirection = isSlidingFromLeft ? "from-left" : "from-right";
|
|
const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
|
|
onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
|
|
}
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var SliderVertical = React61.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
min: min2,
|
|
max: max2,
|
|
inverted,
|
|
onSlideStart,
|
|
onSlideMove,
|
|
onSlideEnd,
|
|
onStepKeyDown,
|
|
...sliderProps
|
|
} = props;
|
|
const sliderRef = React61.useRef(null);
|
|
const ref = useComposedRefs(forwardedRef, sliderRef);
|
|
const rectRef = React61.useRef(void 0);
|
|
const isSlidingFromBottom = !inverted;
|
|
function getValueFromPointer(pointerPosition) {
|
|
const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
|
|
const input = [0, rect.height];
|
|
const output = isSlidingFromBottom ? [max2, min2] : [min2, max2];
|
|
const value = linearScale2(input, output);
|
|
rectRef.current = rect;
|
|
return value(pointerPosition - rect.top);
|
|
}
|
|
return (0, import_jsx_runtime39.jsx)(
|
|
SliderOrientationProvider,
|
|
{
|
|
scope: props.__scopeSlider,
|
|
startEdge: isSlidingFromBottom ? "bottom" : "top",
|
|
endEdge: isSlidingFromBottom ? "top" : "bottom",
|
|
size: "height",
|
|
direction: isSlidingFromBottom ? 1 : -1,
|
|
children: (0, import_jsx_runtime39.jsx)(
|
|
SliderImpl,
|
|
{
|
|
"data-orientation": "vertical",
|
|
...sliderProps,
|
|
ref,
|
|
style: {
|
|
...sliderProps.style,
|
|
["--radix-slider-thumb-transform"]: "translateY(50%)"
|
|
},
|
|
onSlideStart: (event) => {
|
|
const value = getValueFromPointer(event.clientY);
|
|
onSlideStart?.(value);
|
|
},
|
|
onSlideMove: (event) => {
|
|
const value = getValueFromPointer(event.clientY);
|
|
onSlideMove?.(value);
|
|
},
|
|
onSlideEnd: () => {
|
|
rectRef.current = void 0;
|
|
onSlideEnd?.();
|
|
},
|
|
onStepKeyDown: (event) => {
|
|
const slideDirection = isSlidingFromBottom ? "from-bottom" : "from-top";
|
|
const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
|
|
onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
|
|
}
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var SliderImpl = React61.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeSlider,
|
|
onSlideStart,
|
|
onSlideMove,
|
|
onSlideEnd,
|
|
onHomeKeyDown,
|
|
onEndKeyDown,
|
|
onStepKeyDown,
|
|
...sliderProps
|
|
} = props;
|
|
const context = useSliderContext(SLIDER_NAME, __scopeSlider);
|
|
return (0, import_jsx_runtime39.jsx)(
|
|
Primitive.span,
|
|
{
|
|
...sliderProps,
|
|
ref: forwardedRef,
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
if (event.key === "Home") {
|
|
onHomeKeyDown(event);
|
|
event.preventDefault();
|
|
} else if (event.key === "End") {
|
|
onEndKeyDown(event);
|
|
event.preventDefault();
|
|
} else if (PAGE_KEYS.concat(ARROW_KEYS3).includes(event.key)) {
|
|
onStepKeyDown(event);
|
|
event.preventDefault();
|
|
}
|
|
}),
|
|
onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
|
|
const target = event.target;
|
|
target.setPointerCapture(event.pointerId);
|
|
event.preventDefault();
|
|
if (context.thumbs.has(target)) {
|
|
target.focus();
|
|
} else {
|
|
onSlideStart(event);
|
|
}
|
|
}),
|
|
onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
|
|
const target = event.target;
|
|
if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);
|
|
}),
|
|
onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
|
|
const target = event.target;
|
|
if (target.hasPointerCapture(event.pointerId)) {
|
|
target.releasePointerCapture(event.pointerId);
|
|
onSlideEnd(event);
|
|
}
|
|
})
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var TRACK_NAME = "SliderTrack";
|
|
var SliderTrack = React61.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSlider, ...trackProps } = props;
|
|
const context = useSliderContext(TRACK_NAME, __scopeSlider);
|
|
return (0, import_jsx_runtime39.jsx)(
|
|
Primitive.span,
|
|
{
|
|
"data-disabled": context.disabled ? "" : void 0,
|
|
"data-orientation": context.orientation,
|
|
...trackProps,
|
|
ref: forwardedRef
|
|
}
|
|
);
|
|
}
|
|
);
|
|
SliderTrack.displayName = TRACK_NAME;
|
|
var RANGE_NAME = "SliderRange";
|
|
var SliderRange = React61.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSlider, ...rangeProps } = props;
|
|
const context = useSliderContext(RANGE_NAME, __scopeSlider);
|
|
const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);
|
|
const ref = React61.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const valuesCount = context.values.length;
|
|
const percentages = context.values.map(
|
|
(value) => convertValueToPercentage(value, context.min, context.max)
|
|
);
|
|
const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
|
|
const offsetEnd = 100 - Math.max(...percentages);
|
|
return (0, import_jsx_runtime39.jsx)(
|
|
Primitive.span,
|
|
{
|
|
"data-orientation": context.orientation,
|
|
"data-disabled": context.disabled ? "" : void 0,
|
|
...rangeProps,
|
|
ref: composedRefs,
|
|
style: {
|
|
...props.style,
|
|
[orientation.startEdge]: offsetStart + "%",
|
|
[orientation.endEdge]: offsetEnd + "%"
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
SliderRange.displayName = RANGE_NAME;
|
|
var THUMB_NAME2 = "SliderThumb";
|
|
var SliderThumb = React61.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const getItems = useCollection8(props.__scopeSlider);
|
|
const [thumb, setThumb] = React61.useState(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
|
|
const index2 = React61.useMemo(
|
|
() => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
|
|
[getItems, thumb]
|
|
);
|
|
return (0, import_jsx_runtime39.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index: index2 });
|
|
}
|
|
);
|
|
var SliderThumbImpl = React61.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSlider, index: index2, name, ...thumbProps } = props;
|
|
const context = useSliderContext(THUMB_NAME2, __scopeSlider);
|
|
const orientation = useSliderOrientationContext(THUMB_NAME2, __scopeSlider);
|
|
const [thumb, setThumb] = React61.useState(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
|
|
const isFormControl2 = thumb ? context.form || !!thumb.closest("form") : true;
|
|
const size4 = useSize(thumb);
|
|
const value = context.values[index2];
|
|
const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
|
|
const label = getLabel(index2, context.values.length);
|
|
const orientationSize = size4?.[orientation.size];
|
|
const thumbInBoundsOffset = orientationSize ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
|
|
React61.useEffect(() => {
|
|
if (thumb) {
|
|
context.thumbs.add(thumb);
|
|
return () => {
|
|
context.thumbs.delete(thumb);
|
|
};
|
|
}
|
|
}, [thumb, context.thumbs]);
|
|
return (0, import_jsx_runtime39.jsxs)(
|
|
"span",
|
|
{
|
|
style: {
|
|
transform: "var(--radix-slider-thumb-transform)",
|
|
position: "absolute",
|
|
[orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
|
|
},
|
|
children: [
|
|
(0, import_jsx_runtime39.jsx)(Collection8.ItemSlot, { scope: props.__scopeSlider, children: (0, import_jsx_runtime39.jsx)(
|
|
Primitive.span,
|
|
{
|
|
role: "slider",
|
|
"aria-label": props["aria-label"] || label,
|
|
"aria-valuemin": context.min,
|
|
"aria-valuenow": value,
|
|
"aria-valuemax": context.max,
|
|
"aria-orientation": context.orientation,
|
|
"data-orientation": context.orientation,
|
|
"data-disabled": context.disabled ? "" : void 0,
|
|
tabIndex: context.disabled ? void 0 : 0,
|
|
...thumbProps,
|
|
ref: composedRefs,
|
|
style: value === void 0 ? { display: "none" } : props.style,
|
|
onFocus: composeEventHandlers(props.onFocus, () => {
|
|
context.valueIndexToChangeRef.current = index2;
|
|
})
|
|
}
|
|
) }),
|
|
isFormControl2 && (0, import_jsx_runtime39.jsx)(
|
|
SliderBubbleInput,
|
|
{
|
|
name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
|
|
form: context.form,
|
|
value
|
|
},
|
|
index2
|
|
)
|
|
]
|
|
}
|
|
);
|
|
}
|
|
);
|
|
SliderThumb.displayName = THUMB_NAME2;
|
|
var BUBBLE_INPUT_NAME4 = "RadioBubbleInput";
|
|
var SliderBubbleInput = React61.forwardRef(
|
|
({ __scopeSlider, value, ...props }, forwardedRef) => {
|
|
const ref = React61.useRef(null);
|
|
const composedRefs = useComposedRefs(ref, forwardedRef);
|
|
const prevValue = usePrevious(value);
|
|
React61.useEffect(() => {
|
|
const input = ref.current;
|
|
if (!input) return;
|
|
const inputProto = window.HTMLInputElement.prototype;
|
|
const descriptor = Object.getOwnPropertyDescriptor(inputProto, "value");
|
|
const setValue = descriptor.set;
|
|
if (prevValue !== value && setValue) {
|
|
const event = new Event("input", { bubbles: true });
|
|
setValue.call(input, value);
|
|
input.dispatchEvent(event);
|
|
}
|
|
}, [prevValue, value]);
|
|
return (0, import_jsx_runtime39.jsx)(
|
|
Primitive.input,
|
|
{
|
|
style: { display: "none" },
|
|
...props,
|
|
ref: composedRefs,
|
|
defaultValue: value
|
|
}
|
|
);
|
|
}
|
|
);
|
|
SliderBubbleInput.displayName = BUBBLE_INPUT_NAME4;
|
|
function getNextSortedValues(prevValues = [], nextValue, atIndex) {
|
|
const nextValues = [...prevValues];
|
|
nextValues[atIndex] = nextValue;
|
|
return nextValues.sort((a, b) => a - b);
|
|
}
|
|
function convertValueToPercentage(value, min2, max2) {
|
|
const maxSteps = max2 - min2;
|
|
const percentPerStep = 100 / maxSteps;
|
|
const percentage = percentPerStep * (value - min2);
|
|
return clamp2(percentage, [0, 100]);
|
|
}
|
|
function getLabel(index2, totalValues) {
|
|
if (totalValues > 2) {
|
|
return `Value ${index2 + 1} of ${totalValues}`;
|
|
} else if (totalValues === 2) {
|
|
return ["Minimum", "Maximum"][index2];
|
|
} else {
|
|
return void 0;
|
|
}
|
|
}
|
|
function getClosestValueIndex(values, nextValue) {
|
|
if (values.length === 1) return 0;
|
|
const distances = values.map((value) => Math.abs(value - nextValue));
|
|
const closestDistance = Math.min(...distances);
|
|
return distances.indexOf(closestDistance);
|
|
}
|
|
function getThumbInBoundsOffset(width, left, direction) {
|
|
const halfWidth = width / 2;
|
|
const halfPercent = 50;
|
|
const offset4 = linearScale2([0, halfPercent], [0, halfWidth]);
|
|
return (halfWidth - offset4(left) * direction) * direction;
|
|
}
|
|
function getStepsBetweenValues(values) {
|
|
return values.slice(0, -1).map((value, index2) => values[index2 + 1] - value);
|
|
}
|
|
function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
if (minStepsBetweenValues > 0) {
|
|
const stepsBetweenValues = getStepsBetweenValues(values);
|
|
const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
|
|
return actualMinStepsBetweenValues >= minStepsBetweenValues;
|
|
}
|
|
return true;
|
|
}
|
|
function linearScale2(input, output) {
|
|
return (value) => {
|
|
if (input[0] === input[1] || output[0] === output[1]) return output[0];
|
|
const ratio = (output[1] - output[0]) / (input[1] - input[0]);
|
|
return output[0] + ratio * (value - input[0]);
|
|
};
|
|
}
|
|
function getDecimalCount(value) {
|
|
return (String(value).split(".")[1] || "").length;
|
|
}
|
|
function roundValue(value, decimalCount) {
|
|
const rounder = Math.pow(10, decimalCount);
|
|
return Math.round(value * rounder) / rounder;
|
|
}
|
|
var Root16 = Slider;
|
|
var Track = SliderTrack;
|
|
var Range = SliderRange;
|
|
var Thumb2 = SliderThumb;
|
|
|
|
// node_modules/@radix-ui/react-switch/dist/index.mjs
|
|
var dist_exports34 = {};
|
|
__export(dist_exports34, {
|
|
Root: () => Root17,
|
|
Switch: () => Switch,
|
|
SwitchThumb: () => SwitchThumb,
|
|
Thumb: () => Thumb3,
|
|
createSwitchScope: () => createSwitchScope
|
|
});
|
|
var React62 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
|
|
var SWITCH_NAME = "Switch";
|
|
var [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME);
|
|
var [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
|
|
var Switch = React62.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeSwitch,
|
|
name,
|
|
checked: checkedProp,
|
|
defaultChecked,
|
|
required,
|
|
disabled,
|
|
value = "on",
|
|
onCheckedChange,
|
|
form,
|
|
...switchProps
|
|
} = props;
|
|
const [button, setButton] = React62.useState(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
|
|
const hasConsumerStoppedPropagationRef = React62.useRef(false);
|
|
const isFormControl2 = button ? form || !!button.closest("form") : true;
|
|
const [checked, setChecked] = useControllableState({
|
|
prop: checkedProp,
|
|
defaultProp: defaultChecked ?? false,
|
|
onChange: onCheckedChange,
|
|
caller: SWITCH_NAME
|
|
});
|
|
return (0, import_jsx_runtime40.jsxs)(SwitchProvider, { scope: __scopeSwitch, checked, disabled, children: [
|
|
(0, import_jsx_runtime40.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
role: "switch",
|
|
"aria-checked": checked,
|
|
"aria-required": required,
|
|
"data-state": getState7(checked),
|
|
"data-disabled": disabled ? "" : void 0,
|
|
disabled,
|
|
value,
|
|
...switchProps,
|
|
ref: composedRefs,
|
|
onClick: composeEventHandlers(props.onClick, (event) => {
|
|
setChecked((prevChecked) => !prevChecked);
|
|
if (isFormControl2) {
|
|
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
|
|
}
|
|
})
|
|
}
|
|
),
|
|
isFormControl2 && (0, import_jsx_runtime40.jsx)(
|
|
SwitchBubbleInput,
|
|
{
|
|
control: button,
|
|
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
name,
|
|
value,
|
|
checked,
|
|
required,
|
|
disabled,
|
|
form,
|
|
style: { transform: "translateX(-100%)" }
|
|
}
|
|
)
|
|
] });
|
|
}
|
|
);
|
|
Switch.displayName = SWITCH_NAME;
|
|
var THUMB_NAME3 = "SwitchThumb";
|
|
var SwitchThumb = React62.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeSwitch, ...thumbProps } = props;
|
|
const context = useSwitchContext(THUMB_NAME3, __scopeSwitch);
|
|
return (0, import_jsx_runtime40.jsx)(
|
|
Primitive.span,
|
|
{
|
|
"data-state": getState7(context.checked),
|
|
"data-disabled": context.disabled ? "" : void 0,
|
|
...thumbProps,
|
|
ref: forwardedRef
|
|
}
|
|
);
|
|
}
|
|
);
|
|
SwitchThumb.displayName = THUMB_NAME3;
|
|
var BUBBLE_INPUT_NAME5 = "SwitchBubbleInput";
|
|
var SwitchBubbleInput = React62.forwardRef(
|
|
({
|
|
__scopeSwitch,
|
|
control,
|
|
checked,
|
|
bubbles = true,
|
|
...props
|
|
}, forwardedRef) => {
|
|
const ref = React62.useRef(null);
|
|
const composedRefs = useComposedRefs(ref, forwardedRef);
|
|
const prevChecked = usePrevious(checked);
|
|
const controlSize = useSize(control);
|
|
React62.useEffect(() => {
|
|
const input = ref.current;
|
|
if (!input) return;
|
|
const inputProto = window.HTMLInputElement.prototype;
|
|
const descriptor = Object.getOwnPropertyDescriptor(
|
|
inputProto,
|
|
"checked"
|
|
);
|
|
const setChecked = descriptor.set;
|
|
if (prevChecked !== checked && setChecked) {
|
|
const event = new Event("click", { bubbles });
|
|
setChecked.call(input, checked);
|
|
input.dispatchEvent(event);
|
|
}
|
|
}, [prevChecked, checked, bubbles]);
|
|
return (0, import_jsx_runtime40.jsx)(
|
|
"input",
|
|
{
|
|
type: "checkbox",
|
|
"aria-hidden": true,
|
|
defaultChecked: checked,
|
|
...props,
|
|
tabIndex: -1,
|
|
ref: composedRefs,
|
|
style: {
|
|
...props.style,
|
|
...controlSize,
|
|
position: "absolute",
|
|
pointerEvents: "none",
|
|
opacity: 0,
|
|
margin: 0
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME5;
|
|
function getState7(checked) {
|
|
return checked ? "checked" : "unchecked";
|
|
}
|
|
var Root17 = Switch;
|
|
var Thumb3 = SwitchThumb;
|
|
|
|
// node_modules/@radix-ui/react-tabs/dist/index.mjs
|
|
var dist_exports35 = {};
|
|
__export(dist_exports35, {
|
|
Content: () => Content6,
|
|
List: () => List2,
|
|
Root: () => Root213,
|
|
Tabs: () => Tabs,
|
|
TabsContent: () => TabsContent,
|
|
TabsList: () => TabsList,
|
|
TabsTrigger: () => TabsTrigger,
|
|
Trigger: () => Trigger11,
|
|
createTabsScope: () => createTabsScope
|
|
});
|
|
var React63 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
|
|
var TABS_NAME = "Tabs";
|
|
var [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
|
|
createRovingFocusGroupScope
|
|
]);
|
|
var useRovingFocusGroupScope5 = createRovingFocusGroupScope();
|
|
var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
|
|
var Tabs = React63.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeTabs,
|
|
value: valueProp,
|
|
onValueChange,
|
|
defaultValue,
|
|
orientation = "horizontal",
|
|
dir,
|
|
activationMode = "automatic",
|
|
...tabsProps
|
|
} = props;
|
|
const direction = useDirection(dir);
|
|
const [value, setValue] = useControllableState({
|
|
prop: valueProp,
|
|
onChange: onValueChange,
|
|
defaultProp: defaultValue ?? "",
|
|
caller: TABS_NAME
|
|
});
|
|
return (0, import_jsx_runtime41.jsx)(
|
|
TabsProvider,
|
|
{
|
|
scope: __scopeTabs,
|
|
baseId: useId(),
|
|
value,
|
|
onValueChange: setValue,
|
|
orientation,
|
|
dir: direction,
|
|
activationMode,
|
|
children: (0, import_jsx_runtime41.jsx)(
|
|
Primitive.div,
|
|
{
|
|
dir: direction,
|
|
"data-orientation": orientation,
|
|
...tabsProps,
|
|
ref: forwardedRef
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
Tabs.displayName = TABS_NAME;
|
|
var TAB_LIST_NAME = "TabsList";
|
|
var TabsList = React63.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeTabs, loop = true, ...listProps } = props;
|
|
const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope5(__scopeTabs);
|
|
return (0, import_jsx_runtime41.jsx)(
|
|
Root10,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
orientation: context.orientation,
|
|
dir: context.dir,
|
|
loop,
|
|
children: (0, import_jsx_runtime41.jsx)(
|
|
Primitive.div,
|
|
{
|
|
role: "tablist",
|
|
"aria-orientation": context.orientation,
|
|
...listProps,
|
|
ref: forwardedRef
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
TabsList.displayName = TAB_LIST_NAME;
|
|
var TRIGGER_NAME13 = "TabsTrigger";
|
|
var TabsTrigger = React63.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeTabs, value, disabled = false, ...triggerProps } = props;
|
|
const context = useTabsContext(TRIGGER_NAME13, __scopeTabs);
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope5(__scopeTabs);
|
|
const triggerId = makeTriggerId2(context.baseId, value);
|
|
const contentId = makeContentId2(context.baseId, value);
|
|
const isSelected = value === context.value;
|
|
return (0, import_jsx_runtime41.jsx)(
|
|
Item2,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
focusable: !disabled,
|
|
active: isSelected,
|
|
children: (0, import_jsx_runtime41.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
role: "tab",
|
|
"aria-selected": isSelected,
|
|
"aria-controls": contentId,
|
|
"data-state": isSelected ? "active" : "inactive",
|
|
"data-disabled": disabled ? "" : void 0,
|
|
disabled,
|
|
id: triggerId,
|
|
...triggerProps,
|
|
ref: forwardedRef,
|
|
onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
|
|
if (!disabled && event.button === 0 && event.ctrlKey === false) {
|
|
context.onValueChange(value);
|
|
} else {
|
|
event.preventDefault();
|
|
}
|
|
}),
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
if ([" ", "Enter"].includes(event.key)) context.onValueChange(value);
|
|
}),
|
|
onFocus: composeEventHandlers(props.onFocus, () => {
|
|
const isAutomaticActivation = context.activationMode !== "manual";
|
|
if (!isSelected && !disabled && isAutomaticActivation) {
|
|
context.onValueChange(value);
|
|
}
|
|
})
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
TabsTrigger.displayName = TRIGGER_NAME13;
|
|
var CONTENT_NAME14 = "TabsContent";
|
|
var TabsContent = React63.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
|
|
const context = useTabsContext(CONTENT_NAME14, __scopeTabs);
|
|
const triggerId = makeTriggerId2(context.baseId, value);
|
|
const contentId = makeContentId2(context.baseId, value);
|
|
const isSelected = value === context.value;
|
|
const isMountAnimationPreventedRef = React63.useRef(isSelected);
|
|
React63.useEffect(() => {
|
|
const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
|
|
return () => cancelAnimationFrame(rAF);
|
|
}, []);
|
|
return (0, import_jsx_runtime41.jsx)(Presence, { present: forceMount || isSelected, children: ({ present }) => (0, import_jsx_runtime41.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-state": isSelected ? "active" : "inactive",
|
|
"data-orientation": context.orientation,
|
|
role: "tabpanel",
|
|
"aria-labelledby": triggerId,
|
|
hidden: !present,
|
|
id: contentId,
|
|
tabIndex: 0,
|
|
...contentProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
...props.style,
|
|
animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0
|
|
},
|
|
children: present && children
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
TabsContent.displayName = CONTENT_NAME14;
|
|
function makeTriggerId2(baseId, value) {
|
|
return `${baseId}-trigger-${value}`;
|
|
}
|
|
function makeContentId2(baseId, value) {
|
|
return `${baseId}-content-${value}`;
|
|
}
|
|
var Root213 = Tabs;
|
|
var List2 = TabsList;
|
|
var Trigger11 = TabsTrigger;
|
|
var Content6 = TabsContent;
|
|
|
|
// node_modules/@radix-ui/react-toast/dist/index.mjs
|
|
var dist_exports36 = {};
|
|
__export(dist_exports36, {
|
|
Action: () => Action2,
|
|
Close: () => Close3,
|
|
Description: () => Description3,
|
|
Provider: () => Provider2,
|
|
Root: () => Root214,
|
|
Title: () => Title3,
|
|
Toast: () => Toast,
|
|
ToastAction: () => ToastAction,
|
|
ToastClose: () => ToastClose,
|
|
ToastDescription: () => ToastDescription,
|
|
ToastProvider: () => ToastProvider,
|
|
ToastTitle: () => ToastTitle,
|
|
ToastViewport: () => ToastViewport,
|
|
Viewport: () => Viewport4,
|
|
createToastScope: () => createToastScope
|
|
});
|
|
var React64 = __toESM(require_react(), 1);
|
|
var ReactDOM6 = __toESM(require_react_dom(), 1);
|
|
var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
|
|
var PROVIDER_NAME = "ToastProvider";
|
|
var [Collection9, useCollection9, createCollectionScope9] = createCollection("Toast");
|
|
var [createToastContext, createToastScope] = createContextScope("Toast", [createCollectionScope9]);
|
|
var [ToastProviderProvider, useToastProviderContext] = createToastContext(PROVIDER_NAME);
|
|
var ToastProvider = (props) => {
|
|
const {
|
|
__scopeToast,
|
|
label = "Notification",
|
|
duration = 5e3,
|
|
swipeDirection = "right",
|
|
swipeThreshold = 50,
|
|
children
|
|
} = props;
|
|
const [viewport, setViewport] = React64.useState(null);
|
|
const [toastCount, setToastCount] = React64.useState(0);
|
|
const isFocusedToastEscapeKeyDownRef = React64.useRef(false);
|
|
const isClosePausedRef = React64.useRef(false);
|
|
if (!label.trim()) {
|
|
console.error(
|
|
`Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`
|
|
);
|
|
}
|
|
return (0, import_jsx_runtime42.jsx)(Collection9.Provider, { scope: __scopeToast, children: (0, import_jsx_runtime42.jsx)(
|
|
ToastProviderProvider,
|
|
{
|
|
scope: __scopeToast,
|
|
label,
|
|
duration,
|
|
swipeDirection,
|
|
swipeThreshold,
|
|
toastCount,
|
|
viewport,
|
|
onViewportChange: setViewport,
|
|
onToastAdd: React64.useCallback(() => setToastCount((prevCount) => prevCount + 1), []),
|
|
onToastRemove: React64.useCallback(() => setToastCount((prevCount) => prevCount - 1), []),
|
|
isFocusedToastEscapeKeyDownRef,
|
|
isClosePausedRef,
|
|
children
|
|
}
|
|
) });
|
|
};
|
|
ToastProvider.displayName = PROVIDER_NAME;
|
|
var VIEWPORT_NAME4 = "ToastViewport";
|
|
var VIEWPORT_DEFAULT_HOTKEY = ["F8"];
|
|
var VIEWPORT_PAUSE = "toast.viewportPause";
|
|
var VIEWPORT_RESUME = "toast.viewportResume";
|
|
var ToastViewport = React64.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeToast,
|
|
hotkey = VIEWPORT_DEFAULT_HOTKEY,
|
|
label = "Notifications ({hotkey})",
|
|
...viewportProps
|
|
} = props;
|
|
const context = useToastProviderContext(VIEWPORT_NAME4, __scopeToast);
|
|
const getItems = useCollection9(__scopeToast);
|
|
const wrapperRef = React64.useRef(null);
|
|
const headFocusProxyRef = React64.useRef(null);
|
|
const tailFocusProxyRef = React64.useRef(null);
|
|
const ref = React64.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
|
|
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
|
|
const hasToasts = context.toastCount > 0;
|
|
React64.useEffect(() => {
|
|
const handleKeyDown = (event) => {
|
|
const isHotkeyPressed = hotkey.length !== 0 && hotkey.every((key) => event[key] || event.code === key);
|
|
if (isHotkeyPressed) ref.current?.focus();
|
|
};
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
}, [hotkey]);
|
|
React64.useEffect(() => {
|
|
const wrapper = wrapperRef.current;
|
|
const viewport = ref.current;
|
|
if (hasToasts && wrapper && viewport) {
|
|
const handlePause = () => {
|
|
if (!context.isClosePausedRef.current) {
|
|
const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
|
|
viewport.dispatchEvent(pauseEvent);
|
|
context.isClosePausedRef.current = true;
|
|
}
|
|
};
|
|
const handleResume = () => {
|
|
if (context.isClosePausedRef.current) {
|
|
const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
|
|
viewport.dispatchEvent(resumeEvent);
|
|
context.isClosePausedRef.current = false;
|
|
}
|
|
};
|
|
const handleFocusOutResume = (event) => {
|
|
const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
|
|
if (isFocusMovingOutside) handleResume();
|
|
};
|
|
const handlePointerLeaveResume = () => {
|
|
const isFocusInside = wrapper.contains(document.activeElement);
|
|
if (!isFocusInside) handleResume();
|
|
};
|
|
wrapper.addEventListener("focusin", handlePause);
|
|
wrapper.addEventListener("focusout", handleFocusOutResume);
|
|
wrapper.addEventListener("pointermove", handlePause);
|
|
wrapper.addEventListener("pointerleave", handlePointerLeaveResume);
|
|
window.addEventListener("blur", handlePause);
|
|
window.addEventListener("focus", handleResume);
|
|
return () => {
|
|
wrapper.removeEventListener("focusin", handlePause);
|
|
wrapper.removeEventListener("focusout", handleFocusOutResume);
|
|
wrapper.removeEventListener("pointermove", handlePause);
|
|
wrapper.removeEventListener("pointerleave", handlePointerLeaveResume);
|
|
window.removeEventListener("blur", handlePause);
|
|
window.removeEventListener("focus", handleResume);
|
|
};
|
|
}
|
|
}, [hasToasts, context.isClosePausedRef]);
|
|
const getSortedTabbableCandidates = React64.useCallback(
|
|
({ tabbingDirection }) => {
|
|
const toastItems = getItems();
|
|
const tabbableCandidates = toastItems.map((toastItem) => {
|
|
const toastNode = toastItem.ref.current;
|
|
const toastTabbableCandidates = [toastNode, ...getTabbableCandidates3(toastNode)];
|
|
return tabbingDirection === "forwards" ? toastTabbableCandidates : toastTabbableCandidates.reverse();
|
|
});
|
|
return (tabbingDirection === "forwards" ? tabbableCandidates.reverse() : tabbableCandidates).flat();
|
|
},
|
|
[getItems]
|
|
);
|
|
React64.useEffect(() => {
|
|
const viewport = ref.current;
|
|
if (viewport) {
|
|
const handleKeyDown = (event) => {
|
|
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
|
|
const isTabKey = event.key === "Tab" && !isMetaKey;
|
|
if (isTabKey) {
|
|
const focusedElement = document.activeElement;
|
|
const isTabbingBackwards = event.shiftKey;
|
|
const targetIsViewport = event.target === viewport;
|
|
if (targetIsViewport && isTabbingBackwards) {
|
|
headFocusProxyRef.current?.focus();
|
|
return;
|
|
}
|
|
const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
|
|
const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection });
|
|
const index2 = sortedCandidates.findIndex((candidate) => candidate === focusedElement);
|
|
if (focusFirst5(sortedCandidates.slice(index2 + 1))) {
|
|
event.preventDefault();
|
|
} else {
|
|
isTabbingBackwards ? headFocusProxyRef.current?.focus() : tailFocusProxyRef.current?.focus();
|
|
}
|
|
}
|
|
};
|
|
viewport.addEventListener("keydown", handleKeyDown);
|
|
return () => viewport.removeEventListener("keydown", handleKeyDown);
|
|
}
|
|
}, [getItems, getSortedTabbableCandidates]);
|
|
return (0, import_jsx_runtime42.jsxs)(
|
|
Branch,
|
|
{
|
|
ref: wrapperRef,
|
|
role: "region",
|
|
"aria-label": label.replace("{hotkey}", hotkeyLabel),
|
|
tabIndex: -1,
|
|
style: { pointerEvents: hasToasts ? void 0 : "none" },
|
|
children: [
|
|
hasToasts && (0, import_jsx_runtime42.jsx)(
|
|
FocusProxy,
|
|
{
|
|
ref: headFocusProxyRef,
|
|
onFocusFromOutsideViewport: () => {
|
|
const tabbableCandidates = getSortedTabbableCandidates({
|
|
tabbingDirection: "forwards"
|
|
});
|
|
focusFirst5(tabbableCandidates);
|
|
}
|
|
}
|
|
),
|
|
(0, import_jsx_runtime42.jsx)(Collection9.Slot, { scope: __scopeToast, children: (0, import_jsx_runtime42.jsx)(Primitive.ol, { tabIndex: -1, ...viewportProps, ref: composedRefs }) }),
|
|
hasToasts && (0, import_jsx_runtime42.jsx)(
|
|
FocusProxy,
|
|
{
|
|
ref: tailFocusProxyRef,
|
|
onFocusFromOutsideViewport: () => {
|
|
const tabbableCandidates = getSortedTabbableCandidates({
|
|
tabbingDirection: "backwards"
|
|
});
|
|
focusFirst5(tabbableCandidates);
|
|
}
|
|
}
|
|
)
|
|
]
|
|
}
|
|
);
|
|
}
|
|
);
|
|
ToastViewport.displayName = VIEWPORT_NAME4;
|
|
var FOCUS_PROXY_NAME = "ToastFocusProxy";
|
|
var FocusProxy = React64.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
|
|
const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
|
|
return (0, import_jsx_runtime42.jsx)(
|
|
VisuallyHidden,
|
|
{
|
|
tabIndex: 0,
|
|
...proxyProps,
|
|
ref: forwardedRef,
|
|
style: { position: "fixed" },
|
|
onFocus: (event) => {
|
|
const prevFocusedElement = event.relatedTarget;
|
|
const isFocusFromOutsideViewport = !context.viewport?.contains(prevFocusedElement);
|
|
if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
FocusProxy.displayName = FOCUS_PROXY_NAME;
|
|
var TOAST_NAME = "Toast";
|
|
var TOAST_SWIPE_START = "toast.swipeStart";
|
|
var TOAST_SWIPE_MOVE = "toast.swipeMove";
|
|
var TOAST_SWIPE_CANCEL = "toast.swipeCancel";
|
|
var TOAST_SWIPE_END = "toast.swipeEnd";
|
|
var Toast = React64.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
|
|
const [open, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen ?? true,
|
|
onChange: onOpenChange,
|
|
caller: TOAST_NAME
|
|
});
|
|
return (0, import_jsx_runtime42.jsx)(Presence, { present: forceMount || open, children: (0, import_jsx_runtime42.jsx)(
|
|
ToastImpl,
|
|
{
|
|
open,
|
|
...toastProps,
|
|
ref: forwardedRef,
|
|
onClose: () => setOpen(false),
|
|
onPause: useCallbackRef(props.onPause),
|
|
onResume: useCallbackRef(props.onResume),
|
|
onSwipeStart: composeEventHandlers(props.onSwipeStart, (event) => {
|
|
event.currentTarget.setAttribute("data-swipe", "start");
|
|
}),
|
|
onSwipeMove: composeEventHandlers(props.onSwipeMove, (event) => {
|
|
const { x, y } = event.detail.delta;
|
|
event.currentTarget.setAttribute("data-swipe", "move");
|
|
event.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${x}px`);
|
|
event.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${y}px`);
|
|
}),
|
|
onSwipeCancel: composeEventHandlers(props.onSwipeCancel, (event) => {
|
|
event.currentTarget.setAttribute("data-swipe", "cancel");
|
|
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-x");
|
|
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-y");
|
|
event.currentTarget.style.removeProperty("--radix-toast-swipe-end-x");
|
|
event.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
|
|
}),
|
|
onSwipeEnd: composeEventHandlers(props.onSwipeEnd, (event) => {
|
|
const { x, y } = event.detail.delta;
|
|
event.currentTarget.setAttribute("data-swipe", "end");
|
|
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-x");
|
|
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-y");
|
|
event.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${x}px`);
|
|
event.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${y}px`);
|
|
setOpen(false);
|
|
})
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
Toast.displayName = TOAST_NAME;
|
|
var [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(TOAST_NAME, {
|
|
onClose() {
|
|
}
|
|
});
|
|
var ToastImpl = React64.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeToast,
|
|
type = "foreground",
|
|
duration: durationProp,
|
|
open,
|
|
onClose,
|
|
onEscapeKeyDown,
|
|
onPause,
|
|
onResume,
|
|
onSwipeStart,
|
|
onSwipeMove,
|
|
onSwipeCancel,
|
|
onSwipeEnd,
|
|
...toastProps
|
|
} = props;
|
|
const context = useToastProviderContext(TOAST_NAME, __scopeToast);
|
|
const [node, setNode] = React64.useState(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
|
|
const pointerStartRef = React64.useRef(null);
|
|
const swipeDeltaRef = React64.useRef(null);
|
|
const duration = durationProp || context.duration;
|
|
const closeTimerStartTimeRef = React64.useRef(0);
|
|
const closeTimerRemainingTimeRef = React64.useRef(duration);
|
|
const closeTimerRef = React64.useRef(0);
|
|
const { onToastAdd, onToastRemove } = context;
|
|
const handleClose = useCallbackRef(() => {
|
|
const isFocusInToast = node?.contains(document.activeElement);
|
|
if (isFocusInToast) context.viewport?.focus();
|
|
onClose();
|
|
});
|
|
const startTimer = React64.useCallback(
|
|
(duration2) => {
|
|
if (!duration2 || duration2 === Infinity) return;
|
|
window.clearTimeout(closeTimerRef.current);
|
|
closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
|
|
closeTimerRef.current = window.setTimeout(handleClose, duration2);
|
|
},
|
|
[handleClose]
|
|
);
|
|
React64.useEffect(() => {
|
|
const viewport = context.viewport;
|
|
if (viewport) {
|
|
const handleResume = () => {
|
|
startTimer(closeTimerRemainingTimeRef.current);
|
|
onResume?.();
|
|
};
|
|
const handlePause = () => {
|
|
const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.current;
|
|
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
|
|
window.clearTimeout(closeTimerRef.current);
|
|
onPause?.();
|
|
};
|
|
viewport.addEventListener(VIEWPORT_PAUSE, handlePause);
|
|
viewport.addEventListener(VIEWPORT_RESUME, handleResume);
|
|
return () => {
|
|
viewport.removeEventListener(VIEWPORT_PAUSE, handlePause);
|
|
viewport.removeEventListener(VIEWPORT_RESUME, handleResume);
|
|
};
|
|
}
|
|
}, [context.viewport, duration, onPause, onResume, startTimer]);
|
|
React64.useEffect(() => {
|
|
if (open && !context.isClosePausedRef.current) startTimer(duration);
|
|
}, [open, duration, context.isClosePausedRef, startTimer]);
|
|
React64.useEffect(() => {
|
|
onToastAdd();
|
|
return () => onToastRemove();
|
|
}, [onToastAdd, onToastRemove]);
|
|
const announceTextContent = React64.useMemo(() => {
|
|
return node ? getAnnounceTextContent(node) : null;
|
|
}, [node]);
|
|
if (!context.viewport) return null;
|
|
return (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
|
|
announceTextContent && (0, import_jsx_runtime42.jsx)(
|
|
ToastAnnounce,
|
|
{
|
|
__scopeToast,
|
|
role: "status",
|
|
"aria-live": type === "foreground" ? "assertive" : "polite",
|
|
children: announceTextContent
|
|
}
|
|
),
|
|
(0, import_jsx_runtime42.jsx)(ToastInteractiveProvider, { scope: __scopeToast, onClose: handleClose, children: ReactDOM6.createPortal(
|
|
(0, import_jsx_runtime42.jsx)(Collection9.ItemSlot, { scope: __scopeToast, children: (0, import_jsx_runtime42.jsx)(
|
|
Root4,
|
|
{
|
|
asChild: true,
|
|
onEscapeKeyDown: composeEventHandlers(onEscapeKeyDown, () => {
|
|
if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
|
|
context.isFocusedToastEscapeKeyDownRef.current = false;
|
|
}),
|
|
children: (0, import_jsx_runtime42.jsx)(
|
|
Primitive.li,
|
|
{
|
|
tabIndex: 0,
|
|
"data-state": open ? "open" : "closed",
|
|
"data-swipe-direction": context.swipeDirection,
|
|
...toastProps,
|
|
ref: composedRefs,
|
|
style: { userSelect: "none", touchAction: "none", ...props.style },
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
if (event.key !== "Escape") return;
|
|
onEscapeKeyDown?.(event.nativeEvent);
|
|
if (!event.nativeEvent.defaultPrevented) {
|
|
context.isFocusedToastEscapeKeyDownRef.current = true;
|
|
handleClose();
|
|
}
|
|
}),
|
|
onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
|
|
if (event.button !== 0) return;
|
|
pointerStartRef.current = { x: event.clientX, y: event.clientY };
|
|
}),
|
|
onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
|
|
if (!pointerStartRef.current) return;
|
|
const x = event.clientX - pointerStartRef.current.x;
|
|
const y = event.clientY - pointerStartRef.current.y;
|
|
const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
|
|
const isHorizontalSwipe = ["left", "right"].includes(context.swipeDirection);
|
|
const clamp3 = ["left", "up"].includes(context.swipeDirection) ? Math.min : Math.max;
|
|
const clampedX = isHorizontalSwipe ? clamp3(0, x) : 0;
|
|
const clampedY = !isHorizontalSwipe ? clamp3(0, y) : 0;
|
|
const moveStartBuffer = event.pointerType === "touch" ? 10 : 2;
|
|
const delta = { x: clampedX, y: clampedY };
|
|
const eventDetail = { originalEvent: event, delta };
|
|
if (hasSwipeMoveStarted) {
|
|
swipeDeltaRef.current = delta;
|
|
handleAndDispatchCustomEvent2(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
|
|
discrete: false
|
|
});
|
|
} else if (isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
|
|
swipeDeltaRef.current = delta;
|
|
handleAndDispatchCustomEvent2(TOAST_SWIPE_START, onSwipeStart, eventDetail, {
|
|
discrete: false
|
|
});
|
|
event.target.setPointerCapture(event.pointerId);
|
|
} else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {
|
|
pointerStartRef.current = null;
|
|
}
|
|
}),
|
|
onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
|
|
const delta = swipeDeltaRef.current;
|
|
const target = event.target;
|
|
if (target.hasPointerCapture(event.pointerId)) {
|
|
target.releasePointerCapture(event.pointerId);
|
|
}
|
|
swipeDeltaRef.current = null;
|
|
pointerStartRef.current = null;
|
|
if (delta) {
|
|
const toast = event.currentTarget;
|
|
const eventDetail = { originalEvent: event, delta };
|
|
if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {
|
|
handleAndDispatchCustomEvent2(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
|
|
discrete: true
|
|
});
|
|
} else {
|
|
handleAndDispatchCustomEvent2(
|
|
TOAST_SWIPE_CANCEL,
|
|
onSwipeCancel,
|
|
eventDetail,
|
|
{
|
|
discrete: true
|
|
}
|
|
);
|
|
}
|
|
toast.addEventListener("click", (event2) => event2.preventDefault(), {
|
|
once: true
|
|
});
|
|
}
|
|
})
|
|
}
|
|
)
|
|
}
|
|
) }),
|
|
context.viewport
|
|
) })
|
|
] });
|
|
}
|
|
);
|
|
var ToastAnnounce = (props) => {
|
|
const { __scopeToast, children, ...announceProps } = props;
|
|
const context = useToastProviderContext(TOAST_NAME, __scopeToast);
|
|
const [renderAnnounceText, setRenderAnnounceText] = React64.useState(false);
|
|
const [isAnnounced, setIsAnnounced] = React64.useState(false);
|
|
useNextFrame(() => setRenderAnnounceText(true));
|
|
React64.useEffect(() => {
|
|
const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
|
|
return () => window.clearTimeout(timer);
|
|
}, []);
|
|
return isAnnounced ? null : (0, import_jsx_runtime42.jsx)(Portal, { asChild: true, children: (0, import_jsx_runtime42.jsx)(VisuallyHidden, { ...announceProps, children: renderAnnounceText && (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
|
|
context.label,
|
|
" ",
|
|
children
|
|
] }) }) });
|
|
};
|
|
var TITLE_NAME3 = "ToastTitle";
|
|
var ToastTitle = React64.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToast, ...titleProps } = props;
|
|
return (0, import_jsx_runtime42.jsx)(Primitive.div, { ...titleProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ToastTitle.displayName = TITLE_NAME3;
|
|
var DESCRIPTION_NAME3 = "ToastDescription";
|
|
var ToastDescription = React64.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToast, ...descriptionProps } = props;
|
|
return (0, import_jsx_runtime42.jsx)(Primitive.div, { ...descriptionProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ToastDescription.displayName = DESCRIPTION_NAME3;
|
|
var ACTION_NAME2 = "ToastAction";
|
|
var ToastAction = React64.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { altText, ...actionProps } = props;
|
|
if (!altText.trim()) {
|
|
console.error(
|
|
`Invalid prop \`altText\` supplied to \`${ACTION_NAME2}\`. Expected non-empty \`string\`.`
|
|
);
|
|
return null;
|
|
}
|
|
return (0, import_jsx_runtime42.jsx)(ToastAnnounceExclude, { altText, asChild: true, children: (0, import_jsx_runtime42.jsx)(ToastClose, { ...actionProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
ToastAction.displayName = ACTION_NAME2;
|
|
var CLOSE_NAME3 = "ToastClose";
|
|
var ToastClose = React64.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToast, ...closeProps } = props;
|
|
const interactiveContext = useToastInteractiveContext(CLOSE_NAME3, __scopeToast);
|
|
return (0, import_jsx_runtime42.jsx)(ToastAnnounceExclude, { asChild: true, children: (0, import_jsx_runtime42.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
...closeProps,
|
|
ref: forwardedRef,
|
|
onClick: composeEventHandlers(props.onClick, interactiveContext.onClose)
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
ToastClose.displayName = CLOSE_NAME3;
|
|
var ToastAnnounceExclude = React64.forwardRef((props, forwardedRef) => {
|
|
const { __scopeToast, altText, ...announceExcludeProps } = props;
|
|
return (0, import_jsx_runtime42.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-radix-toast-announce-exclude": "",
|
|
"data-radix-toast-announce-alt": altText || void 0,
|
|
...announceExcludeProps,
|
|
ref: forwardedRef
|
|
}
|
|
);
|
|
});
|
|
function getAnnounceTextContent(container) {
|
|
const textContent = [];
|
|
const childNodes = Array.from(container.childNodes);
|
|
childNodes.forEach((node) => {
|
|
if (node.nodeType === node.TEXT_NODE && node.textContent) textContent.push(node.textContent);
|
|
if (isHTMLElement3(node)) {
|
|
const isHidden2 = node.ariaHidden || node.hidden || node.style.display === "none";
|
|
const isExcluded = node.dataset.radixToastAnnounceExclude === "";
|
|
if (!isHidden2) {
|
|
if (isExcluded) {
|
|
const altText = node.dataset.radixToastAnnounceAlt;
|
|
if (altText) textContent.push(altText);
|
|
} else {
|
|
textContent.push(...getAnnounceTextContent(node));
|
|
}
|
|
}
|
|
}
|
|
});
|
|
return textContent;
|
|
}
|
|
function handleAndDispatchCustomEvent2(name, handler, detail, { discrete }) {
|
|
const currentTarget = detail.originalEvent.currentTarget;
|
|
const event = new CustomEvent(name, { bubbles: true, cancelable: true, detail });
|
|
if (handler) currentTarget.addEventListener(name, handler, { once: true });
|
|
if (discrete) {
|
|
dispatchDiscreteCustomEvent(currentTarget, event);
|
|
} else {
|
|
currentTarget.dispatchEvent(event);
|
|
}
|
|
}
|
|
var isDeltaInDirection = (delta, direction, threshold = 0) => {
|
|
const deltaX = Math.abs(delta.x);
|
|
const deltaY = Math.abs(delta.y);
|
|
const isDeltaX = deltaX > deltaY;
|
|
if (direction === "left" || direction === "right") {
|
|
return isDeltaX && deltaX > threshold;
|
|
} else {
|
|
return !isDeltaX && deltaY > threshold;
|
|
}
|
|
};
|
|
function useNextFrame(callback = () => {
|
|
}) {
|
|
const fn = useCallbackRef(callback);
|
|
useLayoutEffect2(() => {
|
|
let raf1 = 0;
|
|
let raf2 = 0;
|
|
raf1 = window.requestAnimationFrame(() => raf2 = window.requestAnimationFrame(fn));
|
|
return () => {
|
|
window.cancelAnimationFrame(raf1);
|
|
window.cancelAnimationFrame(raf2);
|
|
};
|
|
}, [fn]);
|
|
}
|
|
function isHTMLElement3(node) {
|
|
return node.nodeType === node.ELEMENT_NODE;
|
|
}
|
|
function getTabbableCandidates3(container) {
|
|
const nodes = [];
|
|
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
acceptNode: (node) => {
|
|
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
|
|
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
|
|
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
}
|
|
});
|
|
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
return nodes;
|
|
}
|
|
function focusFirst5(candidates) {
|
|
const previouslyFocusedElement = document.activeElement;
|
|
return candidates.some((candidate) => {
|
|
if (candidate === previouslyFocusedElement) return true;
|
|
candidate.focus();
|
|
return document.activeElement !== previouslyFocusedElement;
|
|
});
|
|
}
|
|
var Provider2 = ToastProvider;
|
|
var Viewport4 = ToastViewport;
|
|
var Root214 = Toast;
|
|
var Title3 = ToastTitle;
|
|
var Description3 = ToastDescription;
|
|
var Action2 = ToastAction;
|
|
var Close3 = ToastClose;
|
|
|
|
// node_modules/@radix-ui/react-toggle/dist/index.mjs
|
|
var dist_exports38 = {};
|
|
__export(dist_exports38, {
|
|
Root: () => Root18,
|
|
Toggle: () => Toggle
|
|
});
|
|
var React65 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
|
|
var NAME7 = "Toggle";
|
|
var Toggle = React65.forwardRef((props, forwardedRef) => {
|
|
const { pressed: pressedProp, defaultPressed, onPressedChange, ...buttonProps } = props;
|
|
const [pressed, setPressed] = useControllableState({
|
|
prop: pressedProp,
|
|
onChange: onPressedChange,
|
|
defaultProp: defaultPressed ?? false,
|
|
caller: NAME7
|
|
});
|
|
return (0, import_jsx_runtime43.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
"aria-pressed": pressed,
|
|
"data-state": pressed ? "on" : "off",
|
|
"data-disabled": props.disabled ? "" : void 0,
|
|
...buttonProps,
|
|
ref: forwardedRef,
|
|
onClick: composeEventHandlers(props.onClick, () => {
|
|
if (!props.disabled) {
|
|
setPressed(!pressed);
|
|
}
|
|
})
|
|
}
|
|
);
|
|
});
|
|
Toggle.displayName = NAME7;
|
|
var Root18 = Toggle;
|
|
|
|
// node_modules/@radix-ui/react-toggle-group/dist/index.mjs
|
|
var dist_exports39 = {};
|
|
__export(dist_exports39, {
|
|
Item: () => Item26,
|
|
Root: () => Root215,
|
|
ToggleGroup: () => ToggleGroup,
|
|
ToggleGroupItem: () => ToggleGroupItem,
|
|
createToggleGroupScope: () => createToggleGroupScope
|
|
});
|
|
var import_react8 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
|
|
var TOGGLE_GROUP_NAME = "ToggleGroup";
|
|
var [createToggleGroupContext, createToggleGroupScope] = createContextScope(TOGGLE_GROUP_NAME, [
|
|
createRovingFocusGroupScope
|
|
]);
|
|
var useRovingFocusGroupScope6 = createRovingFocusGroupScope();
|
|
var ToggleGroup = import_react8.default.forwardRef((props, forwardedRef) => {
|
|
const { type, ...toggleGroupProps } = props;
|
|
if (type === "single") {
|
|
const singleProps = toggleGroupProps;
|
|
return (0, import_jsx_runtime44.jsx)(ToggleGroupImplSingle, { ...singleProps, ref: forwardedRef });
|
|
}
|
|
if (type === "multiple") {
|
|
const multipleProps = toggleGroupProps;
|
|
return (0, import_jsx_runtime44.jsx)(ToggleGroupImplMultiple, { ...multipleProps, ref: forwardedRef });
|
|
}
|
|
throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
|
|
});
|
|
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
|
var [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
|
|
var ToggleGroupImplSingle = import_react8.default.forwardRef((props, forwardedRef) => {
|
|
const {
|
|
value: valueProp,
|
|
defaultValue,
|
|
onValueChange = () => {
|
|
},
|
|
...toggleGroupSingleProps
|
|
} = props;
|
|
const [value, setValue] = useControllableState({
|
|
prop: valueProp,
|
|
defaultProp: defaultValue ?? "",
|
|
onChange: onValueChange,
|
|
caller: TOGGLE_GROUP_NAME
|
|
});
|
|
return (0, import_jsx_runtime44.jsx)(
|
|
ToggleGroupValueProvider,
|
|
{
|
|
scope: props.__scopeToggleGroup,
|
|
type: "single",
|
|
value: import_react8.default.useMemo(() => value ? [value] : [], [value]),
|
|
onItemActivate: setValue,
|
|
onItemDeactivate: import_react8.default.useCallback(() => setValue(""), [setValue]),
|
|
children: (0, import_jsx_runtime44.jsx)(ToggleGroupImpl, { ...toggleGroupSingleProps, ref: forwardedRef })
|
|
}
|
|
);
|
|
});
|
|
var ToggleGroupImplMultiple = import_react8.default.forwardRef((props, forwardedRef) => {
|
|
const {
|
|
value: valueProp,
|
|
defaultValue,
|
|
onValueChange = () => {
|
|
},
|
|
...toggleGroupMultipleProps
|
|
} = props;
|
|
const [value, setValue] = useControllableState({
|
|
prop: valueProp,
|
|
defaultProp: defaultValue ?? [],
|
|
onChange: onValueChange,
|
|
caller: TOGGLE_GROUP_NAME
|
|
});
|
|
const handleButtonActivate = import_react8.default.useCallback(
|
|
(itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
|
|
[setValue]
|
|
);
|
|
const handleButtonDeactivate = import_react8.default.useCallback(
|
|
(itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
|
|
[setValue]
|
|
);
|
|
return (0, import_jsx_runtime44.jsx)(
|
|
ToggleGroupValueProvider,
|
|
{
|
|
scope: props.__scopeToggleGroup,
|
|
type: "multiple",
|
|
value,
|
|
onItemActivate: handleButtonActivate,
|
|
onItemDeactivate: handleButtonDeactivate,
|
|
children: (0, import_jsx_runtime44.jsx)(ToggleGroupImpl, { ...toggleGroupMultipleProps, ref: forwardedRef })
|
|
}
|
|
);
|
|
});
|
|
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
|
var [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
|
|
var ToggleGroupImpl = import_react8.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeToggleGroup,
|
|
disabled = false,
|
|
rovingFocus = true,
|
|
orientation,
|
|
dir,
|
|
loop = true,
|
|
...toggleGroupProps
|
|
} = props;
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope6(__scopeToggleGroup);
|
|
const direction = useDirection(dir);
|
|
const commonProps = { role: "group", dir: direction, ...toggleGroupProps };
|
|
return (0, import_jsx_runtime44.jsx)(ToggleGroupContext, { scope: __scopeToggleGroup, rovingFocus, disabled, children: rovingFocus ? (0, import_jsx_runtime44.jsx)(
|
|
Root10,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
orientation,
|
|
dir: direction,
|
|
loop,
|
|
children: (0, import_jsx_runtime44.jsx)(Primitive.div, { ...commonProps, ref: forwardedRef })
|
|
}
|
|
) : (0, import_jsx_runtime44.jsx)(Primitive.div, { ...commonProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
var ITEM_NAME10 = "ToggleGroupItem";
|
|
var ToggleGroupItem = import_react8.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const valueContext = useToggleGroupValueContext(ITEM_NAME10, props.__scopeToggleGroup);
|
|
const context = useToggleGroupContext(ITEM_NAME10, props.__scopeToggleGroup);
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope6(props.__scopeToggleGroup);
|
|
const pressed = valueContext.value.includes(props.value);
|
|
const disabled = context.disabled || props.disabled;
|
|
const commonProps = { ...props, pressed, disabled };
|
|
const ref = import_react8.default.useRef(null);
|
|
return context.rovingFocus ? (0, import_jsx_runtime44.jsx)(
|
|
Item2,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
focusable: !disabled,
|
|
active: pressed,
|
|
ref,
|
|
children: (0, import_jsx_runtime44.jsx)(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef })
|
|
}
|
|
) : (0, import_jsx_runtime44.jsx)(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ToggleGroupItem.displayName = ITEM_NAME10;
|
|
var ToggleGroupItemImpl = import_react8.default.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToggleGroup, value, ...itemProps } = props;
|
|
const valueContext = useToggleGroupValueContext(ITEM_NAME10, __scopeToggleGroup);
|
|
const singleProps = { role: "radio", "aria-checked": props.pressed, "aria-pressed": void 0 };
|
|
const typeProps = valueContext.type === "single" ? singleProps : void 0;
|
|
return (0, import_jsx_runtime44.jsx)(
|
|
Toggle,
|
|
{
|
|
...typeProps,
|
|
...itemProps,
|
|
ref: forwardedRef,
|
|
onPressedChange: (pressed) => {
|
|
if (pressed) {
|
|
valueContext.onItemActivate(value);
|
|
} else {
|
|
valueContext.onItemDeactivate(value);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
var Root215 = ToggleGroup;
|
|
var Item26 = ToggleGroupItem;
|
|
|
|
// node_modules/@radix-ui/react-toolbar/dist/index.mjs
|
|
var dist_exports40 = {};
|
|
__export(dist_exports40, {
|
|
Button: () => Button,
|
|
Link: () => Link2,
|
|
Root: () => Root42,
|
|
Separator: () => Separator5,
|
|
ToggleGroup: () => ToggleGroup2,
|
|
ToggleItem: () => ToggleItem,
|
|
Toolbar: () => Toolbar,
|
|
ToolbarButton: () => ToolbarButton,
|
|
ToolbarLink: () => ToolbarLink,
|
|
ToolbarSeparator: () => ToolbarSeparator,
|
|
ToolbarToggleGroup: () => ToolbarToggleGroup,
|
|
ToolbarToggleItem: () => ToolbarToggleItem,
|
|
createToolbarScope: () => createToolbarScope
|
|
});
|
|
var React67 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
|
|
var TOOLBAR_NAME = "Toolbar";
|
|
var [createToolbarContext, createToolbarScope] = createContextScope(TOOLBAR_NAME, [
|
|
createRovingFocusGroupScope,
|
|
createToggleGroupScope
|
|
]);
|
|
var useRovingFocusGroupScope7 = createRovingFocusGroupScope();
|
|
var useToggleGroupScope = createToggleGroupScope();
|
|
var [ToolbarProvider, useToolbarContext] = createToolbarContext(TOOLBAR_NAME);
|
|
var Toolbar = React67.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToolbar, orientation = "horizontal", dir, loop = true, ...toolbarProps } = props;
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope7(__scopeToolbar);
|
|
const direction = useDirection(dir);
|
|
return (0, import_jsx_runtime45.jsx)(ToolbarProvider, { scope: __scopeToolbar, orientation, dir: direction, children: (0, import_jsx_runtime45.jsx)(
|
|
Root10,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
orientation,
|
|
dir: direction,
|
|
loop,
|
|
children: (0, import_jsx_runtime45.jsx)(
|
|
Primitive.div,
|
|
{
|
|
role: "toolbar",
|
|
"aria-orientation": orientation,
|
|
dir: direction,
|
|
...toolbarProps,
|
|
ref: forwardedRef
|
|
}
|
|
)
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
Toolbar.displayName = TOOLBAR_NAME;
|
|
var SEPARATOR_NAME6 = "ToolbarSeparator";
|
|
var ToolbarSeparator = React67.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToolbar, ...separatorProps } = props;
|
|
const context = useToolbarContext(SEPARATOR_NAME6, __scopeToolbar);
|
|
return (0, import_jsx_runtime45.jsx)(
|
|
Root15,
|
|
{
|
|
orientation: context.orientation === "horizontal" ? "vertical" : "horizontal",
|
|
...separatorProps,
|
|
ref: forwardedRef
|
|
}
|
|
);
|
|
}
|
|
);
|
|
ToolbarSeparator.displayName = SEPARATOR_NAME6;
|
|
var BUTTON_NAME = "ToolbarButton";
|
|
var ToolbarButton = React67.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToolbar, ...buttonProps } = props;
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope7(__scopeToolbar);
|
|
return (0, import_jsx_runtime45.jsx)(Item2, { asChild: true, ...rovingFocusGroupScope, focusable: !props.disabled, children: (0, import_jsx_runtime45.jsx)(Primitive.button, { type: "button", ...buttonProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
ToolbarButton.displayName = BUTTON_NAME;
|
|
var LINK_NAME2 = "ToolbarLink";
|
|
var ToolbarLink = React67.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToolbar, ...linkProps } = props;
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope7(__scopeToolbar);
|
|
return (0, import_jsx_runtime45.jsx)(Item2, { asChild: true, ...rovingFocusGroupScope, focusable: true, children: (0, import_jsx_runtime45.jsx)(
|
|
Primitive.a,
|
|
{
|
|
...linkProps,
|
|
ref: forwardedRef,
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
if (event.key === " ") event.currentTarget.click();
|
|
})
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
ToolbarLink.displayName = LINK_NAME2;
|
|
var TOGGLE_GROUP_NAME2 = "ToolbarToggleGroup";
|
|
var ToolbarToggleGroup = React67.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToolbar, ...toggleGroupProps } = props;
|
|
const context = useToolbarContext(TOGGLE_GROUP_NAME2, __scopeToolbar);
|
|
const toggleGroupScope = useToggleGroupScope(__scopeToolbar);
|
|
return (0, import_jsx_runtime45.jsx)(
|
|
Root215,
|
|
{
|
|
"data-orientation": context.orientation,
|
|
dir: context.dir,
|
|
...toggleGroupScope,
|
|
...toggleGroupProps,
|
|
ref: forwardedRef,
|
|
rovingFocus: false
|
|
}
|
|
);
|
|
}
|
|
);
|
|
ToolbarToggleGroup.displayName = TOGGLE_GROUP_NAME2;
|
|
var TOGGLE_ITEM_NAME = "ToolbarToggleItem";
|
|
var ToolbarToggleItem = React67.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToolbar, ...toggleItemProps } = props;
|
|
const toggleGroupScope = useToggleGroupScope(__scopeToolbar);
|
|
const scope = { __scopeToolbar: props.__scopeToolbar };
|
|
return (0, import_jsx_runtime45.jsx)(ToolbarButton, { asChild: true, ...scope, children: (0, import_jsx_runtime45.jsx)(Item26, { ...toggleGroupScope, ...toggleItemProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
ToolbarToggleItem.displayName = TOGGLE_ITEM_NAME;
|
|
var Root42 = Toolbar;
|
|
var Separator5 = ToolbarSeparator;
|
|
var Button = ToolbarButton;
|
|
var Link2 = ToolbarLink;
|
|
var ToggleGroup2 = ToolbarToggleGroup;
|
|
var ToggleItem = ToolbarToggleItem;
|
|
|
|
// node_modules/@radix-ui/react-tooltip/dist/index.mjs
|
|
var dist_exports41 = {};
|
|
__export(dist_exports41, {
|
|
Arrow: () => Arrow29,
|
|
Content: () => Content210,
|
|
Portal: () => Portal7,
|
|
Provider: () => Provider3,
|
|
Root: () => Root34,
|
|
Tooltip: () => Tooltip,
|
|
TooltipArrow: () => TooltipArrow,
|
|
TooltipContent: () => TooltipContent,
|
|
TooltipPortal: () => TooltipPortal,
|
|
TooltipProvider: () => TooltipProvider,
|
|
TooltipTrigger: () => TooltipTrigger,
|
|
Trigger: () => Trigger12,
|
|
createTooltipScope: () => createTooltipScope
|
|
});
|
|
var React68 = __toESM(require_react(), 1);
|
|
var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
|
|
var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
|
|
createPopperScope
|
|
]);
|
|
var usePopperScope5 = createPopperScope();
|
|
var PROVIDER_NAME2 = "TooltipProvider";
|
|
var DEFAULT_DELAY_DURATION = 700;
|
|
var TOOLTIP_OPEN = "tooltip.open";
|
|
var [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME2);
|
|
var TooltipProvider = (props) => {
|
|
const {
|
|
__scopeTooltip,
|
|
delayDuration = DEFAULT_DELAY_DURATION,
|
|
skipDelayDuration = 300,
|
|
disableHoverableContent = false,
|
|
children
|
|
} = props;
|
|
const isOpenDelayedRef = React68.useRef(true);
|
|
const isPointerInTransitRef = React68.useRef(false);
|
|
const skipDelayTimerRef = React68.useRef(0);
|
|
React68.useEffect(() => {
|
|
const skipDelayTimer = skipDelayTimerRef.current;
|
|
return () => window.clearTimeout(skipDelayTimer);
|
|
}, []);
|
|
return (0, import_jsx_runtime46.jsx)(
|
|
TooltipProviderContextProvider,
|
|
{
|
|
scope: __scopeTooltip,
|
|
isOpenDelayedRef,
|
|
delayDuration,
|
|
onOpen: React68.useCallback(() => {
|
|
window.clearTimeout(skipDelayTimerRef.current);
|
|
isOpenDelayedRef.current = false;
|
|
}, []),
|
|
onClose: React68.useCallback(() => {
|
|
window.clearTimeout(skipDelayTimerRef.current);
|
|
skipDelayTimerRef.current = window.setTimeout(
|
|
() => isOpenDelayedRef.current = true,
|
|
skipDelayDuration
|
|
);
|
|
}, [skipDelayDuration]),
|
|
isPointerInTransitRef,
|
|
onPointerInTransitChange: React68.useCallback((inTransit) => {
|
|
isPointerInTransitRef.current = inTransit;
|
|
}, []),
|
|
disableHoverableContent,
|
|
children
|
|
}
|
|
);
|
|
};
|
|
TooltipProvider.displayName = PROVIDER_NAME2;
|
|
var TOOLTIP_NAME = "Tooltip";
|
|
var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
|
|
var Tooltip = (props) => {
|
|
const {
|
|
__scopeTooltip,
|
|
children,
|
|
open: openProp,
|
|
defaultOpen,
|
|
onOpenChange,
|
|
disableHoverableContent: disableHoverableContentProp,
|
|
delayDuration: delayDurationProp
|
|
} = props;
|
|
const providerContext = useTooltipProviderContext(TOOLTIP_NAME, props.__scopeTooltip);
|
|
const popperScope = usePopperScope5(__scopeTooltip);
|
|
const [trigger, setTrigger] = React68.useState(null);
|
|
const contentId = useId();
|
|
const openTimerRef = React68.useRef(0);
|
|
const disableHoverableContent = disableHoverableContentProp ?? providerContext.disableHoverableContent;
|
|
const delayDuration = delayDurationProp ?? providerContext.delayDuration;
|
|
const wasOpenDelayedRef = React68.useRef(false);
|
|
const [open, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen ?? false,
|
|
onChange: (open2) => {
|
|
if (open2) {
|
|
providerContext.onOpen();
|
|
document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
|
|
} else {
|
|
providerContext.onClose();
|
|
}
|
|
onOpenChange?.(open2);
|
|
},
|
|
caller: TOOLTIP_NAME
|
|
});
|
|
const stateAttribute = React68.useMemo(() => {
|
|
return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
|
|
}, [open]);
|
|
const handleOpen = React68.useCallback(() => {
|
|
window.clearTimeout(openTimerRef.current);
|
|
openTimerRef.current = 0;
|
|
wasOpenDelayedRef.current = false;
|
|
setOpen(true);
|
|
}, [setOpen]);
|
|
const handleClose = React68.useCallback(() => {
|
|
window.clearTimeout(openTimerRef.current);
|
|
openTimerRef.current = 0;
|
|
setOpen(false);
|
|
}, [setOpen]);
|
|
const handleDelayedOpen = React68.useCallback(() => {
|
|
window.clearTimeout(openTimerRef.current);
|
|
openTimerRef.current = window.setTimeout(() => {
|
|
wasOpenDelayedRef.current = true;
|
|
setOpen(true);
|
|
openTimerRef.current = 0;
|
|
}, delayDuration);
|
|
}, [delayDuration, setOpen]);
|
|
React68.useEffect(() => {
|
|
return () => {
|
|
if (openTimerRef.current) {
|
|
window.clearTimeout(openTimerRef.current);
|
|
openTimerRef.current = 0;
|
|
}
|
|
};
|
|
}, []);
|
|
return (0, import_jsx_runtime46.jsx)(Root25, { ...popperScope, children: (0, import_jsx_runtime46.jsx)(
|
|
TooltipContextProvider,
|
|
{
|
|
scope: __scopeTooltip,
|
|
contentId,
|
|
open,
|
|
stateAttribute,
|
|
trigger,
|
|
onTriggerChange: setTrigger,
|
|
onTriggerEnter: React68.useCallback(() => {
|
|
if (providerContext.isOpenDelayedRef.current) handleDelayedOpen();
|
|
else handleOpen();
|
|
}, [providerContext.isOpenDelayedRef, handleDelayedOpen, handleOpen]),
|
|
onTriggerLeave: React68.useCallback(() => {
|
|
if (disableHoverableContent) {
|
|
handleClose();
|
|
} else {
|
|
window.clearTimeout(openTimerRef.current);
|
|
openTimerRef.current = 0;
|
|
}
|
|
}, [handleClose, disableHoverableContent]),
|
|
onOpen: handleOpen,
|
|
onClose: handleClose,
|
|
disableHoverableContent,
|
|
children
|
|
}
|
|
) });
|
|
};
|
|
Tooltip.displayName = TOOLTIP_NAME;
|
|
var TRIGGER_NAME14 = "TooltipTrigger";
|
|
var TooltipTrigger = React68.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeTooltip, ...triggerProps } = props;
|
|
const context = useTooltipContext(TRIGGER_NAME14, __scopeTooltip);
|
|
const providerContext = useTooltipProviderContext(TRIGGER_NAME14, __scopeTooltip);
|
|
const popperScope = usePopperScope5(__scopeTooltip);
|
|
const ref = React68.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref, context.onTriggerChange);
|
|
const isPointerDownRef = React68.useRef(false);
|
|
const hasPointerMoveOpenedRef = React68.useRef(false);
|
|
const handlePointerUp = React68.useCallback(() => isPointerDownRef.current = false, []);
|
|
React68.useEffect(() => {
|
|
return () => document.removeEventListener("pointerup", handlePointerUp);
|
|
}, [handlePointerUp]);
|
|
return (0, import_jsx_runtime46.jsx)(Anchor, { asChild: true, ...popperScope, children: (0, import_jsx_runtime46.jsx)(
|
|
Primitive.button,
|
|
{
|
|
"aria-describedby": context.open ? context.contentId : void 0,
|
|
"data-state": context.stateAttribute,
|
|
...triggerProps,
|
|
ref: composedRefs,
|
|
onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
|
|
if (event.pointerType === "touch") return;
|
|
if (!hasPointerMoveOpenedRef.current && !providerContext.isPointerInTransitRef.current) {
|
|
context.onTriggerEnter();
|
|
hasPointerMoveOpenedRef.current = true;
|
|
}
|
|
}),
|
|
onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
|
|
context.onTriggerLeave();
|
|
hasPointerMoveOpenedRef.current = false;
|
|
}),
|
|
onPointerDown: composeEventHandlers(props.onPointerDown, () => {
|
|
if (context.open) {
|
|
context.onClose();
|
|
}
|
|
isPointerDownRef.current = true;
|
|
document.addEventListener("pointerup", handlePointerUp, { once: true });
|
|
}),
|
|
onFocus: composeEventHandlers(props.onFocus, () => {
|
|
if (!isPointerDownRef.current) context.onOpen();
|
|
}),
|
|
onBlur: composeEventHandlers(props.onBlur, context.onClose),
|
|
onClick: composeEventHandlers(props.onClick, context.onClose)
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
TooltipTrigger.displayName = TRIGGER_NAME14;
|
|
var PORTAL_NAME11 = "TooltipPortal";
|
|
var [PortalProvider5, usePortalContext5] = createTooltipContext(PORTAL_NAME11, {
|
|
forceMount: void 0
|
|
});
|
|
var TooltipPortal = (props) => {
|
|
const { __scopeTooltip, forceMount, children, container } = props;
|
|
const context = useTooltipContext(PORTAL_NAME11, __scopeTooltip);
|
|
return (0, import_jsx_runtime46.jsx)(PortalProvider5, { scope: __scopeTooltip, forceMount, children: (0, import_jsx_runtime46.jsx)(Presence, { present: forceMount || context.open, children: (0, import_jsx_runtime46.jsx)(Portal, { asChild: true, container, children }) }) });
|
|
};
|
|
TooltipPortal.displayName = PORTAL_NAME11;
|
|
var CONTENT_NAME15 = "TooltipContent";
|
|
var TooltipContent = React68.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const portalContext = usePortalContext5(CONTENT_NAME15, props.__scopeTooltip);
|
|
const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
|
|
const context = useTooltipContext(CONTENT_NAME15, props.__scopeTooltip);
|
|
return (0, import_jsx_runtime46.jsx)(Presence, { present: forceMount || context.open, children: context.disableHoverableContent ? (0, import_jsx_runtime46.jsx)(TooltipContentImpl, { side, ...contentProps, ref: forwardedRef }) : (0, import_jsx_runtime46.jsx)(TooltipContentHoverable, { side, ...contentProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
var TooltipContentHoverable = React68.forwardRef((props, forwardedRef) => {
|
|
const context = useTooltipContext(CONTENT_NAME15, props.__scopeTooltip);
|
|
const providerContext = useTooltipProviderContext(CONTENT_NAME15, props.__scopeTooltip);
|
|
const ref = React68.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const [pointerGraceArea, setPointerGraceArea] = React68.useState(null);
|
|
const { trigger, onClose } = context;
|
|
const content = ref.current;
|
|
const { onPointerInTransitChange } = providerContext;
|
|
const handleRemoveGraceArea = React68.useCallback(() => {
|
|
setPointerGraceArea(null);
|
|
onPointerInTransitChange(false);
|
|
}, [onPointerInTransitChange]);
|
|
const handleCreateGraceArea = React68.useCallback(
|
|
(event, hoverTarget) => {
|
|
const currentTarget = event.currentTarget;
|
|
const exitPoint = { x: event.clientX, y: event.clientY };
|
|
const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
|
|
const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
|
|
const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
|
|
const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
|
|
setPointerGraceArea(graceArea);
|
|
onPointerInTransitChange(true);
|
|
},
|
|
[onPointerInTransitChange]
|
|
);
|
|
React68.useEffect(() => {
|
|
return () => handleRemoveGraceArea();
|
|
}, [handleRemoveGraceArea]);
|
|
React68.useEffect(() => {
|
|
if (trigger && content) {
|
|
const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
|
|
const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
|
|
trigger.addEventListener("pointerleave", handleTriggerLeave);
|
|
content.addEventListener("pointerleave", handleContentLeave);
|
|
return () => {
|
|
trigger.removeEventListener("pointerleave", handleTriggerLeave);
|
|
content.removeEventListener("pointerleave", handleContentLeave);
|
|
};
|
|
}
|
|
}, [trigger, content, handleCreateGraceArea, handleRemoveGraceArea]);
|
|
React68.useEffect(() => {
|
|
if (pointerGraceArea) {
|
|
const handleTrackPointerGrace = (event) => {
|
|
const target = event.target;
|
|
const pointerPosition = { x: event.clientX, y: event.clientY };
|
|
const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
|
|
const isPointerOutsideGraceArea = !isPointInPolygon2(pointerPosition, pointerGraceArea);
|
|
if (hasEnteredTarget) {
|
|
handleRemoveGraceArea();
|
|
} else if (isPointerOutsideGraceArea) {
|
|
handleRemoveGraceArea();
|
|
onClose();
|
|
}
|
|
};
|
|
document.addEventListener("pointermove", handleTrackPointerGrace);
|
|
return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
|
|
}
|
|
}, [trigger, content, pointerGraceArea, onClose, handleRemoveGraceArea]);
|
|
return (0, import_jsx_runtime46.jsx)(TooltipContentImpl, { ...props, ref: composedRefs });
|
|
});
|
|
var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, { isInside: false });
|
|
var Slottable3 = createSlottable("TooltipContent");
|
|
var TooltipContentImpl = React68.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeTooltip,
|
|
children,
|
|
"aria-label": ariaLabel,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
...contentProps
|
|
} = props;
|
|
const context = useTooltipContext(CONTENT_NAME15, __scopeTooltip);
|
|
const popperScope = usePopperScope5(__scopeTooltip);
|
|
const { onClose } = context;
|
|
React68.useEffect(() => {
|
|
document.addEventListener(TOOLTIP_OPEN, onClose);
|
|
return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
|
|
}, [onClose]);
|
|
React68.useEffect(() => {
|
|
if (context.trigger) {
|
|
const handleScroll2 = (event) => {
|
|
const target = event.target;
|
|
if (target?.contains(context.trigger)) onClose();
|
|
};
|
|
window.addEventListener("scroll", handleScroll2, { capture: true });
|
|
return () => window.removeEventListener("scroll", handleScroll2, { capture: true });
|
|
}
|
|
}, [context.trigger, onClose]);
|
|
return (0, import_jsx_runtime46.jsx)(
|
|
DismissableLayer,
|
|
{
|
|
asChild: true,
|
|
disableOutsidePointerEvents: false,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside: (event) => event.preventDefault(),
|
|
onDismiss: onClose,
|
|
children: (0, import_jsx_runtime46.jsxs)(
|
|
Content4,
|
|
{
|
|
"data-state": context.stateAttribute,
|
|
...popperScope,
|
|
...contentProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
...contentProps.style,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
},
|
|
children: [
|
|
(0, import_jsx_runtime46.jsx)(Slottable3, { children }),
|
|
(0, import_jsx_runtime46.jsx)(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: (0, import_jsx_runtime46.jsx)(Root2, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
|
|
]
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
TooltipContent.displayName = CONTENT_NAME15;
|
|
var ARROW_NAME9 = "TooltipArrow";
|
|
var TooltipArrow = React68.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeTooltip, ...arrowProps } = props;
|
|
const popperScope = usePopperScope5(__scopeTooltip);
|
|
const visuallyHiddenContentContext = useVisuallyHiddenContentContext(
|
|
ARROW_NAME9,
|
|
__scopeTooltip
|
|
);
|
|
return visuallyHiddenContentContext.isInside ? null : (0, import_jsx_runtime46.jsx)(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
TooltipArrow.displayName = ARROW_NAME9;
|
|
function getExitSideFromRect(point, rect) {
|
|
const top = Math.abs(rect.top - point.y);
|
|
const bottom = Math.abs(rect.bottom - point.y);
|
|
const right = Math.abs(rect.right - point.x);
|
|
const left = Math.abs(rect.left - point.x);
|
|
switch (Math.min(top, bottom, right, left)) {
|
|
case left:
|
|
return "left";
|
|
case right:
|
|
return "right";
|
|
case top:
|
|
return "top";
|
|
case bottom:
|
|
return "bottom";
|
|
default:
|
|
throw new Error("unreachable");
|
|
}
|
|
}
|
|
function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
|
|
const paddedExitPoints = [];
|
|
switch (exitSide) {
|
|
case "top":
|
|
paddedExitPoints.push(
|
|
{ x: exitPoint.x - padding, y: exitPoint.y + padding },
|
|
{ x: exitPoint.x + padding, y: exitPoint.y + padding }
|
|
);
|
|
break;
|
|
case "bottom":
|
|
paddedExitPoints.push(
|
|
{ x: exitPoint.x - padding, y: exitPoint.y - padding },
|
|
{ x: exitPoint.x + padding, y: exitPoint.y - padding }
|
|
);
|
|
break;
|
|
case "left":
|
|
paddedExitPoints.push(
|
|
{ x: exitPoint.x + padding, y: exitPoint.y - padding },
|
|
{ x: exitPoint.x + padding, y: exitPoint.y + padding }
|
|
);
|
|
break;
|
|
case "right":
|
|
paddedExitPoints.push(
|
|
{ x: exitPoint.x - padding, y: exitPoint.y - padding },
|
|
{ x: exitPoint.x - padding, y: exitPoint.y + padding }
|
|
);
|
|
break;
|
|
}
|
|
return paddedExitPoints;
|
|
}
|
|
function getPointsFromRect(rect) {
|
|
const { top, right, bottom, left } = rect;
|
|
return [
|
|
{ x: left, y: top },
|
|
{ x: right, y: top },
|
|
{ x: right, y: bottom },
|
|
{ x: left, y: bottom }
|
|
];
|
|
}
|
|
function isPointInPolygon2(point, polygon) {
|
|
const { x, y } = point;
|
|
let inside = false;
|
|
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
|
const ii = polygon[i];
|
|
const jj = polygon[j];
|
|
const xi = ii.x;
|
|
const yi = ii.y;
|
|
const xj = jj.x;
|
|
const yj = jj.y;
|
|
const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
|
|
if (intersect) inside = !inside;
|
|
}
|
|
return inside;
|
|
}
|
|
function getHull(points) {
|
|
const newPoints = points.slice();
|
|
newPoints.sort((a, b) => {
|
|
if (a.x < b.x) return -1;
|
|
else if (a.x > b.x) return 1;
|
|
else if (a.y < b.y) return -1;
|
|
else if (a.y > b.y) return 1;
|
|
else return 0;
|
|
});
|
|
return getHullPresorted(newPoints);
|
|
}
|
|
function getHullPresorted(points) {
|
|
if (points.length <= 1) return points.slice();
|
|
const upperHull = [];
|
|
for (let i = 0; i < points.length; i++) {
|
|
const p = points[i];
|
|
while (upperHull.length >= 2) {
|
|
const q = upperHull[upperHull.length - 1];
|
|
const r = upperHull[upperHull.length - 2];
|
|
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
|
|
else break;
|
|
}
|
|
upperHull.push(p);
|
|
}
|
|
upperHull.pop();
|
|
const lowerHull = [];
|
|
for (let i = points.length - 1; i >= 0; i--) {
|
|
const p = points[i];
|
|
while (lowerHull.length >= 2) {
|
|
const q = lowerHull[lowerHull.length - 1];
|
|
const r = lowerHull[lowerHull.length - 2];
|
|
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
|
|
else break;
|
|
}
|
|
lowerHull.push(p);
|
|
}
|
|
lowerHull.pop();
|
|
if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
|
|
return upperHull;
|
|
} else {
|
|
return upperHull.concat(lowerHull);
|
|
}
|
|
}
|
|
var Provider3 = TooltipProvider;
|
|
var Root34 = Tooltip;
|
|
var Trigger12 = TooltipTrigger;
|
|
var Portal7 = TooltipPortal;
|
|
var Content210 = TooltipContent;
|
|
var Arrow29 = TooltipArrow;
|
|
export {
|
|
dist_exports3 as AccessibleIcon,
|
|
dist_exports6 as Accordion,
|
|
dist_exports9 as AlertDialog,
|
|
dist_exports10 as AspectRatio,
|
|
dist_exports11 as Avatar,
|
|
dist_exports12 as Checkbox,
|
|
dist_exports4 as Collapsible,
|
|
dist_exports16 as ContextMenu,
|
|
dist_exports8 as Dialog,
|
|
dist_exports5 as Direction,
|
|
dist_exports18 as DropdownMenu,
|
|
dist_exports20 as Form,
|
|
dist_exports21 as HoverCard,
|
|
dist_exports19 as Label,
|
|
dist_exports22 as Menubar,
|
|
dist_exports23 as NavigationMenu,
|
|
dist_exports27 as Popover,
|
|
dist_exports7 as Portal,
|
|
dist_exports28 as Progress,
|
|
dist_exports29 as RadioGroup,
|
|
dist_exports30 as ScrollArea,
|
|
dist_exports31 as Select,
|
|
dist_exports32 as Separator,
|
|
dist_exports33 as Slider,
|
|
dist_exports as Slot,
|
|
dist_exports34 as Switch,
|
|
dist_exports35 as Tabs,
|
|
dist_exports36 as Toast,
|
|
dist_exports38 as Toggle,
|
|
dist_exports39 as ToggleGroup,
|
|
dist_exports40 as Toolbar,
|
|
dist_exports41 as Tooltip,
|
|
dist_exports2 as VisuallyHidden,
|
|
dist_exports24 as unstable_OneTimePasswordField,
|
|
dist_exports26 as unstable_PasswordToggleField
|
|
};
|
|
//# sourceMappingURL=radix-ui.js.map
|