fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,26 @@
"use client";
import {
useHovercardStoreProps
} from "./ZU7LQC5V.js";
import {
useStore,
useStoreProps
} from "./EKQEJRUF.js";
// src/tooltip/tooltip-store.ts
import * as Core from "@ariakit/core/tooltip/tooltip-store";
function useTooltipStoreProps(store, update, props) {
store = useHovercardStoreProps(store, update, props);
useStoreProps(store, props, "type");
useStoreProps(store, props, "skipTimeout");
return store;
}
function useTooltipStore(props = {}) {
const [store, update] = useStore(Core.createTooltipStore, props);
return useTooltipStoreProps(store, update, props);
}
export {
useTooltipStoreProps,
useTooltipStore
};

View File

@@ -0,0 +1,137 @@
"use client";
import {
flipItems
} from "./3IEDWLST.js";
import {
useCompositeContext
} from "./IB7YUKH5.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useEvent
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/composite/composite-typeahead.ts
import { useRef } from "react";
import { isTextField } from "@ariakit/core/utils/dom";
import { isSelfTarget } from "@ariakit/core/utils/events";
import { invariant, normalizeString } from "@ariakit/core/utils/misc";
var chars = "";
function clearChars() {
chars = "";
}
function isValidTypeaheadEvent(event) {
const target = event.target;
if (target && isTextField(target))
return false;
if (event.key === " " && chars.length)
return true;
return event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey && /^[\p{Letter}\p{Number}]$/u.test(event.key);
}
function isSelfTargetOrItem(event, items) {
if (isSelfTarget(event))
return true;
const target = event.target;
if (!target)
return false;
const isItem = items.some((item) => item.element === target);
return isItem;
}
function getEnabledItems(items) {
return items.filter((item) => !item.disabled);
}
function itemTextStartsWith(item, text) {
var _a;
const itemText = ((_a = item.element) == null ? void 0 : _a.textContent) || item.children;
if (!itemText)
return false;
return normalizeString(itemText).trim().toLowerCase().startsWith(text.toLowerCase());
}
function getSameInitialItems(items, char, activeId) {
if (!activeId)
return items;
const activeItem = items.find((item) => item.id === activeId);
if (!activeItem)
return items;
if (!itemTextStartsWith(activeItem, char))
return items;
if (chars !== char && itemTextStartsWith(activeItem, chars))
return items;
chars = char;
return flipItems(
items.filter((item) => itemTextStartsWith(item, chars)),
activeId
).filter((item) => item.id !== activeId);
}
var useCompositeTypeahead = createHook(
(_a) => {
var _b = _a, { store, typeahead = true } = _b, props = __objRest(_b, ["store", "typeahead"]);
const context = useCompositeContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "CompositeTypeahead must be a Composite component"
);
const onKeyDownCaptureProp = props.onKeyDownCapture;
const cleanupTimeoutRef = useRef(0);
const onKeyDownCapture = useEvent(
(event) => {
onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
if (event.defaultPrevented)
return;
if (!typeahead)
return;
if (!store)
return;
const { items, activeId } = store.getState();
if (!isValidTypeaheadEvent(event))
return clearChars();
let enabledItems = getEnabledItems(items);
if (!isSelfTargetOrItem(event, enabledItems))
return clearChars();
event.preventDefault();
window.clearTimeout(cleanupTimeoutRef.current);
cleanupTimeoutRef.current = window.setTimeout(() => {
chars = "";
}, 500);
const char = event.key.toLowerCase();
chars += char;
enabledItems = getSameInitialItems(enabledItems, char, activeId);
const item = enabledItems.find(
(item2) => itemTextStartsWith(item2, chars)
);
if (item) {
store.move(item.id);
} else {
clearChars();
}
}
);
props = __spreadProps(__spreadValues({}, props), {
onKeyDownCapture
});
return props;
}
);
var CompositeTypeahead = createComponent(
(props) => {
const htmlProps = useCompositeTypeahead(props);
return createElement("div", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
CompositeTypeahead.displayName = "CompositeTypeahead";
}
export {
useCompositeTypeahead,
CompositeTypeahead
};

View File

@@ -0,0 +1,185 @@
"use client";
import {
useCheckboxContext
} from "./VPR2WHQV.js";
import {
CheckboxCheckedContext
} from "./6XBVQI3K.js";
import {
useCommand
} from "./NWCBQ4CV.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useStoreState
} from "./EKQEJRUF.js";
import {
useEvent,
useForceUpdate,
useMergeRefs,
useTagName,
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/checkbox/checkbox.tsx
import { useEffect, useRef, useState } from "react";
import { disabledFromProps } from "@ariakit/core/utils/misc";
import { jsx } from "react/jsx-runtime";
function setMixed(element, mixed) {
if (mixed) {
element.indeterminate = true;
} else if (element.indeterminate) {
element.indeterminate = false;
}
}
function isNativeCheckbox(tagName, type) {
return tagName === "input" && (!type || type === "checkbox");
}
function getPrimitiveValue(value) {
if (Array.isArray(value)) {
return value.toString();
}
return value;
}
var useCheckbox = createHook(
(_a) => {
var _b = _a, {
store,
name,
value: valueProp,
checked: checkedProp,
defaultChecked
} = _b, props = __objRest(_b, [
"store",
"name",
"value",
"checked",
"defaultChecked"
]);
const context = useCheckboxContext();
store = store || context;
const [_checked, setChecked] = useState(defaultChecked != null ? defaultChecked : false);
const checked = useStoreState(store, (state) => {
if (checkedProp !== void 0)
return checkedProp;
if ((state == null ? void 0 : state.value) === void 0)
return _checked;
if (valueProp != null) {
if (Array.isArray(state.value)) {
const primitiveValue = getPrimitiveValue(valueProp);
return state.value.includes(primitiveValue);
}
return state.value === valueProp;
}
if (Array.isArray(state.value))
return false;
if (typeof state.value === "boolean")
return state.value;
return false;
});
const ref = useRef(null);
const tagName = useTagName(ref, props.as || "input");
const nativeCheckbox = isNativeCheckbox(tagName, props.type);
const mixed = checked ? checked === "mixed" : void 0;
const isChecked = checked === "mixed" ? false : checked;
const disabled = disabledFromProps(props);
const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();
useEffect(() => {
const element = ref.current;
if (!element)
return;
setMixed(element, mixed);
if (nativeCheckbox)
return;
element.checked = isChecked;
if (name !== void 0) {
element.name = name;
}
if (valueProp !== void 0) {
element.value = `${valueProp}`;
}
}, [propertyUpdated, mixed, nativeCheckbox, isChecked, name, valueProp]);
const onChangeProp = props.onChange;
const onChange = useEvent((event) => {
if (disabled) {
event.stopPropagation();
event.preventDefault();
return;
}
setMixed(event.currentTarget, mixed);
if (!nativeCheckbox) {
event.currentTarget.checked = !event.currentTarget.checked;
schedulePropertyUpdate();
}
onChangeProp == null ? void 0 : onChangeProp(event);
if (event.defaultPrevented)
return;
const elementChecked = event.currentTarget.checked;
setChecked(elementChecked);
store == null ? void 0 : store.setValue((prevValue) => {
if (valueProp == null)
return elementChecked;
const primitiveValue = getPrimitiveValue(valueProp);
if (!Array.isArray(prevValue)) {
return prevValue === primitiveValue ? false : primitiveValue;
}
if (elementChecked) {
if (prevValue.includes(primitiveValue)) {
return prevValue;
}
return [...prevValue, primitiveValue];
}
return prevValue.filter((v) => v !== primitiveValue);
});
});
const onClickProp = props.onClick;
const onClick = useEvent((event) => {
onClickProp == null ? void 0 : onClickProp(event);
if (event.defaultPrevented)
return;
if (nativeCheckbox)
return;
onChange(event);
});
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(CheckboxCheckedContext.Provider, { value: isChecked, children: element }),
[isChecked]
);
props = __spreadProps(__spreadValues({
role: !nativeCheckbox ? "checkbox" : void 0,
type: nativeCheckbox ? "checkbox" : void 0,
"aria-checked": checked
}, props), {
ref: useMergeRefs(ref, props.ref),
onChange,
onClick
});
props = useCommand(__spreadValues({ clickOnEnter: !nativeCheckbox }, props));
return __spreadValues({
name: nativeCheckbox ? name : void 0,
value: nativeCheckbox ? valueProp : void 0,
checked: isChecked
}, props);
}
);
var Checkbox = createComponent((props) => {
const htmlProps = useCheckbox(props);
return createElement("input", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
Checkbox.displayName = "Checkbox";
}
export {
useCheckbox,
Checkbox
};

View File

@@ -0,0 +1,88 @@
"use client";
// src/composite/utils.ts
import { getDocument, isTextField } from "@ariakit/core/utils/dom";
var NULL_ITEM = { id: null };
function flipItems(items, activeId, shouldInsertNullItem = false) {
const index = items.findIndex((item) => item.id === activeId);
return [
...items.slice(index + 1),
...shouldInsertNullItem ? [NULL_ITEM] : [],
...items.slice(0, index)
];
}
function findFirstEnabledItem(items, excludeId) {
return items.find((item) => {
if (excludeId) {
return !item.disabled && item.id !== excludeId;
}
return !item.disabled;
});
}
function getEnabledItem(store, id) {
if (!id)
return null;
return store.item(id) || null;
}
function groupItemsByRows(items) {
const rows = [];
for (const item of items) {
const row = rows.find((currentRow) => {
var _a;
return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId;
});
if (row) {
row.push(item);
} else {
rows.push([item]);
}
}
return rows;
}
function selectTextField(element, collapseToEnd = false) {
if (isTextField(element)) {
element.setSelectionRange(
collapseToEnd ? element.value.length : 0,
element.value.length
);
} else if (element.isContentEditable) {
const selection = getDocument(element).getSelection();
selection == null ? void 0 : selection.selectAllChildren(element);
if (collapseToEnd) {
selection == null ? void 0 : selection.collapseToEnd();
}
}
}
var FOCUS_SILENTLY = Symbol("FOCUS_SILENTLY");
function focusSilently(element) {
element[FOCUS_SILENTLY] = true;
element.focus({ preventScroll: true });
}
function silentlyFocused(element) {
const isSilentlyFocused = element[FOCUS_SILENTLY];
delete element[FOCUS_SILENTLY];
return isSilentlyFocused;
}
function isItem(store, element, exclude) {
if (!element)
return false;
if (element === exclude)
return false;
const item = store.item(element.id);
if (!item)
return false;
if (exclude && item.element === exclude)
return false;
return true;
}
export {
flipItems,
findFirstEnabledItem,
getEnabledItem,
groupItemsByRows,
selectTextField,
focusSilently,
silentlyFocused,
isItem
};

View File

@@ -0,0 +1,144 @@
"use client";
import {
useMergeRefs
} from "./6O5OEQGF.js";
import {
getRefProperty,
mergeProps
} from "./XM66DUTO.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/utils/system.tsx
import * as React from "react";
import { hasOwnProperty } from "@ariakit/core/utils/misc";
import { jsx } from "react/jsx-runtime";
function isRenderProp(children) {
return typeof children === "function";
}
function forwardRef2(render) {
const Role = React.forwardRef((props, ref) => render(__spreadProps(__spreadValues({}, props), { ref })));
Role.displayName = render.displayName || render.name;
return Role;
}
function memo2(Component, propsAreEqual) {
const Role = React.memo(Component, propsAreEqual);
Role.displayName = Component.displayName || Component.name;
return Role;
}
function createComponent(render) {
const Role = (props, ref) => render(__spreadValues({ ref }, props));
return React.forwardRef(Role);
}
function createMemoComponent(render) {
const Role = createComponent(render);
return React.memo(Role);
}
function createElement(Type, props) {
const _a = props, { as: As, wrapElement, render } = _a, rest = __objRest(_a, ["as", "wrapElement", "render"]);
let element;
const mergedRef = useMergeRefs(props.ref, getRefProperty(render));
if (process.env.NODE_ENV !== "production") {
React.useEffect(() => {
if (!As)
return;
console.warn(
"The `as` prop is deprecated. Use the `render` prop instead.",
"See https://ariakit.org/guide/composition"
);
}, [As]);
}
if (As && typeof As !== "string") {
element = /* @__PURE__ */ jsx(As, __spreadProps(__spreadValues({}, rest), { render }));
} else if (React.isValidElement(render)) {
const renderProps = __spreadProps(__spreadValues({}, render.props), { ref: mergedRef });
element = React.cloneElement(render, mergeProps(rest, renderProps));
} else if (render) {
element = render(rest);
} else if (isRenderProp(props.children)) {
if (process.env.NODE_ENV !== "production") {
React.useEffect(() => {
console.warn(
"The `children` prop as a function is deprecated. Use the `render` prop instead.",
"See https://ariakit.org/guide/composition"
);
}, []);
}
const _b = rest, { children } = _b, otherProps = __objRest(_b, ["children"]);
element = props.children(otherProps);
} else if (As) {
element = /* @__PURE__ */ jsx(As, __spreadValues({}, rest));
} else {
element = /* @__PURE__ */ jsx(Type, __spreadValues({}, rest));
}
if (wrapElement) {
return wrapElement(element);
}
return element;
}
function createHook(useProps) {
const useRole = (props = {}) => {
const htmlProps = useProps(props);
const copy = {};
for (const prop in htmlProps) {
if (hasOwnProperty(htmlProps, prop) && htmlProps[prop] !== void 0) {
copy[prop] = htmlProps[prop];
}
}
return copy;
};
return useRole;
}
function createStoreContext(providers = [], scopedProviders = []) {
const context = React.createContext(void 0);
const scopedContext = React.createContext(void 0);
const useContext2 = () => React.useContext(context);
const useScopedContext = (onlyScoped = false) => {
const scoped = React.useContext(scopedContext);
const store = useContext2();
if (onlyScoped)
return scoped;
return scoped || store;
};
const useProviderContext = () => {
const scoped = React.useContext(scopedContext);
const store = useContext2();
if (scoped && scoped === store)
return;
return store;
};
const ContextProvider = (props) => {
return providers.reduceRight(
(children, Provider) => /* @__PURE__ */ jsx(Provider, __spreadProps(__spreadValues({}, props), { children })),
/* @__PURE__ */ jsx(context.Provider, __spreadValues({}, props))
);
};
const ScopedContextProvider = (props) => {
return /* @__PURE__ */ jsx(ContextProvider, __spreadProps(__spreadValues({}, props), { children: scopedProviders.reduceRight(
(children, Provider) => /* @__PURE__ */ jsx(Provider, __spreadProps(__spreadValues({}, props), { children })),
/* @__PURE__ */ jsx(scopedContext.Provider, __spreadValues({}, props))
) }));
};
return {
context,
scopedContext,
useContext: useContext2,
useScopedContext,
useProviderContext,
ContextProvider,
ScopedContextProvider
};
}
export {
forwardRef2 as forwardRef,
memo2 as memo,
createComponent,
createMemoComponent,
createElement,
createHook,
createStoreContext
};

View File

@@ -0,0 +1,9 @@
"use client";
// src/group/group-label-context.ts
import { createContext } from "react";
var GroupLabelContext = createContext(void 0);
export {
GroupLabelContext
};

View File

@@ -0,0 +1,27 @@
"use client";
import {
CompositeContextProvider,
CompositeScopedContextProvider
} from "./IB7YUKH5.js";
import {
createStoreContext
} from "./3ORBWXWF.js";
// src/tab/tab-context.tsx
var ctx = createStoreContext(
[CompositeContextProvider],
[CompositeScopedContextProvider]
);
var useTabContext = ctx.useContext;
var useTabScopedContext = ctx.useScopedContext;
var useTabProviderContext = ctx.useProviderContext;
var TabContextProvider = ctx.ContextProvider;
var TabScopedContextProvider = ctx.ScopedContextProvider;
export {
useTabContext,
useTabScopedContext,
useTabProviderContext,
TabContextProvider,
TabScopedContextProvider
};

View File

@@ -0,0 +1,31 @@
"use client";
import {
useDialogDescription
} from "./DIP7XAI7.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
// src/popover/popover-description.ts
var usePopoverDescription = createHook(
(props) => {
props = useDialogDescription(props);
return props;
}
);
var PopoverDescription = createComponent(
(props) => {
const htmlProps = usePopoverDescription(props);
return createElement("p", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
PopoverDescription.displayName = "PopoverDescription";
}
export {
usePopoverDescription,
PopoverDescription
};

View File

@@ -0,0 +1,132 @@
"use client";
import {
useFormContext
} from "./V4ZFXDFK.js";
import {
useCollectionItem
} from "./UH3I23HL.js";
import {
createElement,
createHook,
createMemoComponent
} from "./3ORBWXWF.js";
import {
useBooleanEvent,
useEvent,
useId,
useMergeRefs
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/form/form-control.ts
import { useCallback, useRef } from "react";
import { getDocument } from "@ariakit/core/utils/dom";
import { cx, invariant } from "@ariakit/core/utils/misc";
function getNamedElement(ref, name) {
const element = ref.current;
if (!element)
return null;
if (element.name === name)
return element;
if (element.form) {
return element.form.elements.namedItem(name);
}
const document = getDocument(element);
return document.getElementsByName(name)[0];
}
function useItem(store, name, type) {
return store.useState(
(state) => state.items.find((item) => item.type === type && item.name === name)
);
}
var useFormControl = createHook(
(_a) => {
var _b = _a, {
store,
name: nameProp,
getItem: getItemProp,
touchOnBlur = true
} = _b, props = __objRest(_b, [
"store",
"name",
"getItem",
"touchOnBlur"
]);
const context = useFormContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "FormControl must be wrapped in a Form component."
);
const name = `${nameProp}`;
const id = useId(props.id);
const ref = useRef(null);
store.useValidate(async () => {
const element = getNamedElement(ref, name);
if (!element)
return;
await Promise.resolve();
if ("validity" in element && !element.validity.valid) {
store == null ? void 0 : store.setError(name, element.validationMessage);
}
});
const getItem = useCallback(
(item) => {
const nextItem = __spreadProps(__spreadValues({}, item), { id: id || item.id, name, type: "field" });
if (getItemProp) {
return getItemProp(nextItem);
}
return nextItem;
},
[id, name, getItemProp]
);
const onBlurProp = props.onBlur;
const touchOnBlurProp = useBooleanEvent(touchOnBlur);
const onBlur = useEvent((event) => {
onBlurProp == null ? void 0 : onBlurProp(event);
if (event.defaultPrevented)
return;
if (!touchOnBlurProp(event))
return;
store == null ? void 0 : store.setFieldTouched(name, true);
});
const label = useItem(store, name, "label");
const error = useItem(store, name, "error");
const description = useItem(store, name, "description");
const describedBy = cx(
error == null ? void 0 : error.id,
description == null ? void 0 : description.id,
props["aria-describedby"]
);
const invalid = store.useState(
() => !!(store == null ? void 0 : store.getError(name)) && store.getFieldTouched(name)
);
props = __spreadProps(__spreadValues({
id,
"aria-labelledby": label == null ? void 0 : label.id,
"aria-invalid": invalid
}, props), {
"aria-describedby": describedBy || void 0,
ref: useMergeRefs(ref, props.ref),
onBlur
});
props = useCollectionItem(__spreadProps(__spreadValues({ store }, props), { name, getItem }));
return props;
}
);
var FormControl = createMemoComponent((props) => {
const htmlProps = useFormControl(props);
return createElement("input", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
FormControl.displayName = "FormControl";
}
export {
useFormControl,
FormControl
};

View File

@@ -0,0 +1,715 @@
"use client";
import {
useCollectionContext
} from "./4UUKJZ4V.js";
import {
createElement,
forwardRef
} from "./3ORBWXWF.js";
import {
useStoreState
} from "./EKQEJRUF.js";
import {
useBooleanEvent,
useEvent,
useForceUpdate,
useId,
useMergeRefs,
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/collection/collection-renderer.tsx
import {
createContext,
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState
} from "react";
import { getScrollingElement, getWindow } from "@ariakit/core/utils/dom";
import { invariant, shallowEqual } from "@ariakit/core/utils/misc";
import { flushSync } from "react-dom";
import { jsx } from "react/jsx-runtime";
var CollectionRendererContext = createContext(null);
function createTask() {
let raf = 0;
const run = (cb) => {
if (raf)
return;
raf = requestAnimationFrame(() => {
raf = 0;
cb();
});
};
const cancel = () => {
cancelAnimationFrame(raf);
raf = 0;
};
return { run, cancel };
}
function findNearestIndex(items, target, getValue) {
let left = 0;
let right = getItemsLength(items) - 1;
while (left <= right) {
const index = (left + right) / 2 | 0;
const value = getValue(index);
if (value === target)
return index;
else if (value < target)
left = index + 1;
else
right = index - 1;
}
if (left > 0)
return left - 1;
return 0;
}
function getItemsLength(items) {
return typeof items === "number" ? items : items.length;
}
function getItemObject(item) {
if (!item || typeof item !== "object") {
return { value: item };
}
return item;
}
function getItemId(item, index, baseId) {
var _a;
invariant(baseId, "CollectionRenderer must be given an `id` prop.");
const defaultId = `${baseId}/${index}`;
return (_a = getItemObject(item).id) != null ? _a : defaultId;
}
function getItem(items, index) {
if (typeof items === "number") {
if (index >= items)
return null;
return {};
}
const item = items[index];
if (!item)
return null;
if (typeof item === "object")
return item;
return { value: item };
}
function getItemSize(item, horizontal, fallbackElement) {
var _a, _b, _c, _d, _e;
const itemObject = getItemObject(item);
horizontal = itemObject.orientation === "horizontal";
const prop = horizontal ? "width" : "height";
const style = itemObject.style;
if (style) {
const size = style[prop];
if (typeof size === "number")
return size;
}
const items = itemObject.items;
if (items == null ? void 0 : items.length) {
const hasSameOrientation = !itemObject.orientation || horizontal && itemObject.orientation === "horizontal" || !horizontal && itemObject.orientation === "vertical";
const paddingStart = (_b = (_a = itemObject.paddingStart) != null ? _a : itemObject.padding) != null ? _b : 0;
const paddingEnd = (_d = (_c = itemObject.paddingEnd) != null ? _c : itemObject.padding) != null ? _d : 0;
const padding = hasSameOrientation ? paddingStart + paddingEnd : 0;
const initialSize = ((_e = itemObject.gap) != null ? _e : 0) * (items.length - 1) + padding;
if (hasSameOrientation && itemObject.itemSize) {
return initialSize + itemObject.itemSize * items.length;
}
const totalSize = items.reduce(
(sum, item2) => sum + getItemSize(item2, horizontal),
initialSize
);
if (totalSize !== initialSize)
return totalSize;
}
const element = fallbackElement !== false ? itemObject.element || fallbackElement : null;
if (element == null ? void 0 : element.isConnected) {
return element.getBoundingClientRect()[prop];
}
return 0;
}
function getAverageSize(props) {
const length = getItemsLength(props.items);
let currentIndex = 0;
let averageSize = props.estimatedItemSize;
const setAverageSize = (size) => {
const prevIndex = currentIndex;
currentIndex = currentIndex + 1;
averageSize = (averageSize * prevIndex + size) / currentIndex;
};
for (let index = 0; index < length; index += 1) {
const item = getItem(props.items, index);
const itemId = getItemId(item, index, props.baseId);
const itemData = props.data.get(itemId);
const fallbackElement = props.elements.get(itemId);
const size = getItemSize(item, props.horizontal, fallbackElement);
if (size) {
setAverageSize(size);
} else if (itemData == null ? void 0 : itemData.rendered) {
setAverageSize(itemData.end - itemData.start);
}
}
return averageSize;
}
function getScrollOffset(scroller, horizontal) {
if ("scrollX" in scroller) {
return horizontal ? scroller.scrollX : scroller.scrollY;
}
return horizontal ? scroller.scrollLeft : scroller.scrollTop;
}
function getViewport(scroller) {
const { defaultView, documentElement } = scroller.ownerDocument;
if (scroller === documentElement)
return defaultView;
return scroller;
}
function useScroller(rendererRef) {
const [scroller, setScroller] = useState(null);
useEffect(() => {
const renderer = rendererRef == null ? void 0 : rendererRef.current;
if (!renderer)
return;
const scroller2 = getScrollingElement(renderer);
if (!scroller2)
return;
setScroller(scroller2);
}, [rendererRef]);
return scroller;
}
function getRendererOffset(renderer, scroller, horizontal) {
const win = getWindow(renderer);
const htmlElement = win == null ? void 0 : win.document.documentElement;
const rendererRect = renderer.getBoundingClientRect();
const rendererOffset = horizontal ? rendererRect.left : rendererRect.top;
if (scroller === htmlElement) {
const scrollOffset2 = getScrollOffset(win, horizontal);
return scrollOffset2 + rendererOffset;
}
const scrollerRect = scroller.getBoundingClientRect();
const scrollerOffset = horizontal ? scrollerRect.left : scrollerRect.top;
const scrollOffset = getScrollOffset(scroller, horizontal);
return rendererOffset - scrollerOffset + scrollOffset;
}
function getOffsets(renderer, scroller, horizontal) {
const scrollOffset = getScrollOffset(scroller, horizontal);
const rendererOffset = getRendererOffset(renderer, scroller, horizontal);
const scrollSize = horizontal ? scroller.clientWidth : scroller.clientHeight;
const start = scrollOffset - rendererOffset;
const end = start + scrollSize;
return { start, end };
}
function getItemsEnd(props) {
const length = getItemsLength(props.items);
const totalPadding = props.paddingStart + props.paddingEnd;
if (!length)
return totalPadding;
const lastIndex = length - 1;
const totalGap = lastIndex * props.gap;
if (props.itemSize != null) {
return length * props.itemSize + totalGap + totalPadding;
}
const defaultEnd = length * props.estimatedItemSize + totalGap + totalPadding;
if (!props.baseId)
return defaultEnd;
const lastItem = getItem(props.items, lastIndex);
const lastItemId = getItemId(lastItem, lastIndex, props.baseId);
const lastItemData = props.data.get(lastItemId);
if (lastItemData == null ? void 0 : lastItemData.end)
return lastItemData.end + props.paddingEnd;
if (!Array.isArray(props.items))
return defaultEnd;
const end = props.items.reduce(
(sum, item) => sum + getItemSize(item, props.horizontal, false),
0
);
if (!end)
return defaultEnd;
return end + totalGap + totalPadding;
}
function getData(props) {
var _a;
const length = getItemsLength(props.items);
let nextData;
let start = props.paddingStart;
const avgSize = getAverageSize(props);
for (let index = 0; index < length; index += 1) {
const item = getItem(props.items, index);
const itemId = getItemId(item, index, props.baseId);
const itemData = props.data.get(itemId);
const prevRendered = (_a = itemData == null ? void 0 : itemData.rendered) != null ? _a : false;
const setSize = (size2, rendered = prevRendered) => {
start = start ? start + props.gap : start;
const end = start + size2;
const nextItemData = { index, rendered, start, end };
if (!shallowEqual(itemData, nextItemData)) {
if (!nextData) {
nextData = new Map(props.data);
}
nextData.set(itemId, { index, rendered, start, end });
}
start = end;
};
const size = getItemSize(
item,
props.horizontal,
props.elements.get(itemId)
);
if (size) {
setSize(size, true);
} else if (itemData == null ? void 0 : itemData.rendered) {
setSize(itemData.end - itemData.start, true);
} else {
setSize(avgSize);
}
}
return nextData;
}
function useCollectionRenderer(_a) {
var _b = _a, {
store,
items: itemsProp,
initialItems = 0,
gap = 0,
itemSize,
estimatedItemSize = 40,
overscan: overscanProp,
orientation: orientationProp,
padding = 0,
paddingStart = padding,
paddingEnd = padding,
persistentIndices,
renderOnScroll = true,
renderOnResize = !!renderOnScroll,
children: renderItem
} = _b, props = __objRest(_b, [
"store",
"items",
"initialItems",
"gap",
"itemSize",
"estimatedItemSize",
"overscan",
"orientation",
"padding",
"paddingStart",
"paddingEnd",
"persistentIndices",
"renderOnScroll",
"renderOnResize",
"children"
]);
var _a2, _b2;
const context = useCollectionContext();
store = store || context;
const items = useStoreState(
store,
(state) => itemsProp != null ? itemsProp : state == null ? void 0 : state.items
);
invariant(
items != null,
process.env.NODE_ENV !== "production" && "CollectionRenderer must be either wrapped in a Collection component or be given an `items` prop."
);
let parent = useContext(CollectionRendererContext);
if (store && (parent == null ? void 0 : parent.store) !== store) {
parent = null;
}
const parentData = parent == null ? void 0 : parent.childrenData;
const orientation = (_a2 = orientationProp != null ? orientationProp : parent == null ? void 0 : parent.orientation) != null ? _a2 : "vertical";
const overscan = (_b2 = overscanProp != null ? overscanProp : parent == null ? void 0 : parent.overscan) != null ? _b2 : 1;
const ref = useRef(null);
const baseId = useId(props.id);
const horizontal = orientation === "horizontal";
const elements = useMemo(() => /* @__PURE__ */ new Map(), []);
const [elementsUpdated, updateElements] = useForceUpdate();
const [defaultVisibleIndices, setVisibleIndices] = useState(() => {
if (!initialItems)
return [];
const length = getItemsLength(items);
const initialLength = Math.min(length, Math.abs(initialItems));
return Array.from({ length: initialLength }, (_, index) => {
if (initialItems < 0)
return length - index - 1;
return index;
});
});
const visibleIndices = useMemo(() => {
if (!persistentIndices)
return defaultVisibleIndices;
const nextIndices = defaultVisibleIndices.slice();
persistentIndices.forEach((index) => {
if (index < 0)
return;
if (nextIndices.includes(index))
return;
nextIndices.push(index);
});
nextIndices.sort((a, b) => a - b);
if (shallowEqual(defaultVisibleIndices, nextIndices)) {
return defaultVisibleIndices;
}
return nextIndices;
}, [defaultVisibleIndices, persistentIndices]);
const [data, setData] = useState(() => {
if (!baseId)
return /* @__PURE__ */ new Map();
const data2 = (parentData == null ? void 0 : parentData.get(baseId)) || /* @__PURE__ */ new Map();
if (itemSize != null)
return data2;
if (!items)
return data2;
const nextData = getData({
baseId,
items,
data: data2,
gap,
elements,
horizontal,
paddingStart,
itemSize,
estimatedItemSize
});
return nextData || data2;
});
const totalSize = useMemo(() => {
return getItemsEnd({
baseId,
items,
data,
gap,
horizontal,
itemSize,
estimatedItemSize,
paddingStart,
paddingEnd
});
}, [
baseId,
items,
data,
gap,
horizontal,
itemSize,
estimatedItemSize,
paddingStart,
paddingEnd
]);
useEffect(() => {
if (!baseId)
return;
parentData == null ? void 0 : parentData.set(baseId, data);
}, [baseId, parentData, data]);
useEffect(() => {
if (itemSize != null)
return;
if (!baseId)
return;
if (!items)
return;
const nextData = getData({
baseId,
items,
data,
gap,
elements,
horizontal,
paddingStart,
itemSize,
estimatedItemSize
});
if (nextData) {
setData(nextData);
}
}, [
elementsUpdated,
itemSize,
baseId,
items,
data,
gap,
elements,
horizontal,
paddingStart,
estimatedItemSize
]);
const scroller = useScroller(items ? ref : null);
const offsetsRef = useRef({ start: 0, end: 0 });
const processVisibleIndices = useCallback(() => {
const offsets = offsetsRef.current;
if (!items)
return;
if (!baseId)
return;
if (!offsets.end)
return;
if (!data.size && !itemSize)
return;
const length = getItemsLength(items);
const getItemOffset = (index, prop = "start") => {
var _a3;
if (itemSize) {
const start2 = itemSize * index + gap * index + paddingStart;
if (prop === "start")
return start2;
return start2 + itemSize;
}
const item = getItem(items, index);
const itemId = getItemId(item, index, baseId);
const itemData = data.get(itemId);
return (_a3 = itemData == null ? void 0 : itemData[prop]) != null ? _a3 : 0;
};
const initialStart = findNearestIndex(items, offsets.start, getItemOffset);
let initialEnd = initialStart;
while (initialEnd < length && getItemOffset(initialEnd) < offsets.end) {
initialEnd += 1;
}
const finalOverscan = initialEnd - initialStart ? overscan : 0;
const start = Math.max(initialStart - finalOverscan, 0);
const end = Math.min(initialEnd + finalOverscan, length);
const indices = Array.from(
{ length: end - start },
(_, index) => index + start
);
setVisibleIndices((prevIndices) => {
if (shallowEqual(prevIndices, indices))
return prevIndices;
return indices;
});
}, [
elementsUpdated,
items,
baseId,
data,
itemSize,
gap,
paddingStart,
overscan
]);
useEffect(processVisibleIndices, [processVisibleIndices]);
const processVisibleIndicesEvent = useEvent(processVisibleIndices);
useEffect(() => {
const renderer = ref.current;
if (!renderer)
return;
if (!scroller)
return;
offsetsRef.current = getOffsets(renderer, scroller, horizontal);
processVisibleIndicesEvent();
}, [scroller, horizontal, processVisibleIndicesEvent]);
const mayRenderOnScroll = !!renderOnScroll;
const renderOnScrollProp = useBooleanEvent(renderOnScroll);
useEffect(() => {
if (!mayRenderOnScroll)
return;
const renderer = ref.current;
if (!renderer)
return;
if (!scroller)
return;
const viewport = getViewport(scroller);
if (!viewport)
return;
const task = createTask();
const onScroll = (event) => {
task.run(() => {
if (!renderOnScrollProp(event))
return;
offsetsRef.current = getOffsets(renderer, scroller, horizontal);
processVisibleIndicesEvent();
});
};
viewport.addEventListener("scroll", onScroll, { passive: true });
return () => {
task.cancel();
viewport.removeEventListener("scroll", onScroll);
};
}, [
mayRenderOnScroll,
scroller,
renderOnScrollProp,
horizontal,
processVisibleIndicesEvent
]);
const mayRenderOnResize = !!renderOnResize;
const renderOnResizeProp = useBooleanEvent(renderOnResize);
useEffect(() => {
if (!mayRenderOnResize)
return;
const renderer = ref.current;
if (!renderer)
return;
if (!scroller)
return;
const viewport = getViewport(scroller);
if (!viewport)
return;
const task = createTask();
if (viewport === scroller) {
if (typeof ResizeObserver !== "function")
return;
let firstRun = true;
const observer = new ResizeObserver(() => {
if (firstRun) {
firstRun = false;
return;
}
task.run(() => {
if (!renderOnResizeProp(scroller))
return;
offsetsRef.current = getOffsets(renderer, scroller, horizontal);
processVisibleIndicesEvent();
});
});
observer.observe(scroller);
return () => {
task.cancel();
observer.disconnect();
};
}
const onResize = () => {
task.run(() => {
if (!renderOnResizeProp(scroller))
return;
offsetsRef.current = getOffsets(renderer, scroller, horizontal);
processVisibleIndicesEvent();
});
};
viewport.addEventListener("resize", onResize, { passive: true });
return () => {
task.cancel();
viewport.removeEventListener("resize", onResize);
};
}, [
mayRenderOnResize,
scroller,
renderOnResizeProp,
horizontal,
processVisibleIndicesEvent
]);
useEffect(() => {
if (typeof IntersectionObserver !== "function")
return;
const renderer = ref.current;
if (!renderer)
return;
if (!scroller)
return;
const viewport = getViewport(scroller);
if (!viewport)
return;
const observer = new IntersectionObserver(
() => {
offsetsRef.current = getOffsets(renderer, scroller, horizontal);
processVisibleIndicesEvent();
},
{ root: scroller === viewport ? scroller : null }
);
observer.observe(renderer);
return () => {
observer.disconnect();
};
}, [scroller, processVisibleIndicesEvent]);
const elementObserver = useMemo(() => {
if (typeof ResizeObserver !== "function")
return;
return new ResizeObserver(() => {
flushSync(updateElements);
});
}, [updateElements]);
const itemRef = useCallback(
(element) => {
if (!element)
return;
if (itemSize)
return;
updateElements();
elements.set(element.id, element);
elementObserver == null ? void 0 : elementObserver.observe(element);
},
[itemSize, elements, updateElements, elementObserver]
);
const getItemProps = useCallback(
(item, index) => {
var _a3, _b3;
const itemId = getItemId(item, index, baseId);
const offset = itemSize ? paddingStart + itemSize * index + gap * index : (_b3 = (_a3 = data.get(itemId)) == null ? void 0 : _a3.start) != null ? _b3 : 0;
const baseItemProps = {
id: itemId,
ref: itemRef,
index,
style: {
position: "absolute",
left: horizontal ? offset : 0,
top: horizontal ? 0 : offset
}
};
if (itemSize) {
baseItemProps.style[horizontal ? "width" : "height"] = itemSize;
}
if (item == null)
return baseItemProps;
const itemProps = getItemObject(item);
return __spreadProps(__spreadValues(__spreadValues({}, itemProps), baseItemProps), {
style: __spreadValues(__spreadValues({}, itemProps.style), baseItemProps.style)
});
},
[baseId, data, itemSize, paddingStart, gap, horizontal, itemRef]
);
const itemsProps = useMemo(() => {
return visibleIndices.map((index) => {
if (index < 0)
return;
const item = getItem(items, index);
if (!item)
return;
return getItemProps(item, index);
}).filter((value) => value != null);
}, [items, visibleIndices, getItemProps]);
const children = itemsProps == null ? void 0 : itemsProps.map((itemProps) => {
return renderItem == null ? void 0 : renderItem(itemProps);
});
const styleProp = props.style;
const sizeProperty = horizontal ? "width" : "height";
const style = useMemo(
() => __spreadValues({
flex: "none",
position: "relative",
[sizeProperty]: totalSize
}, styleProp),
[styleProp, sizeProperty, totalSize]
);
const childrenData = useMemo(() => /* @__PURE__ */ new Map(), []);
const providerValue = useMemo(
() => ({ store, orientation, overscan, childrenData }),
[store, orientation, overscan, childrenData]
);
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(CollectionRendererContext.Provider, { value: providerValue, children: element }),
[providerValue]
);
props = __spreadProps(__spreadValues({
id: baseId
}, props), {
style,
ref: useMergeRefs(ref, props.ref)
});
return __spreadProps(__spreadValues({}, props), { children });
}
var CollectionRenderer = forwardRef(function CollectionRenderer2(props) {
const htmlProps = useCollectionRenderer(props);
return createElement("div", htmlProps);
});
var getCollectionRendererItem = getItem;
var getCollectionRendererItemId = getItemId;
export {
useCollectionRenderer,
CollectionRenderer,
getCollectionRendererItem,
getCollectionRendererItemId
};

View File

@@ -0,0 +1,38 @@
"use client";
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
export {
__spreadValues,
__spreadProps,
__objRest
};

View File

@@ -0,0 +1,20 @@
"use client";
import {
createStoreContext
} from "./3ORBWXWF.js";
// src/collection/collection-context.tsx
var ctx = createStoreContext();
var useCollectionContext = ctx.useContext;
var useCollectionScopedContext = ctx.useScopedContext;
var useCollectionProviderContext = ctx.useProviderContext;
var CollectionContextProvider = ctx.ContextProvider;
var CollectionScopedContextProvider = ctx.ScopedContextProvider;
export {
useCollectionContext,
useCollectionScopedContext,
useCollectionProviderContext,
CollectionContextProvider,
CollectionScopedContextProvider
};

View File

@@ -0,0 +1,70 @@
"use client";
import {
useDialogDisclosure
} from "./H3TG2CZP.js";
import {
usePopoverAnchor
} from "./JCH6MLL2.js";
import {
PopoverScopedContextProvider,
usePopoverProviderContext
} from "./7H5KSHHF.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useEvent,
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/popover/popover-disclosure.tsx
import { invariant } from "@ariakit/core/utils/misc";
import { jsx } from "react/jsx-runtime";
var usePopoverDisclosure = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const context = usePopoverProviderContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component."
);
const onClickProp = props.onClick;
const onClick = useEvent((event) => {
store == null ? void 0 : store.setAnchorElement(event.currentTarget);
onClickProp == null ? void 0 : onClickProp(event);
});
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(PopoverScopedContextProvider, { value: store, children: element }),
[store]
);
props = __spreadProps(__spreadValues({}, props), {
onClick
});
props = usePopoverAnchor(__spreadValues({ store }, props));
props = useDialogDisclosure(__spreadValues({ store }, props));
return props;
}
);
var PopoverDisclosure = createComponent(
(props) => {
const htmlProps = usePopoverDisclosure(props);
return createElement("button", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
PopoverDisclosure.displayName = "PopoverDisclosure";
}
export {
usePopoverDisclosure,
PopoverDisclosure
};

View File

@@ -0,0 +1,34 @@
"use client";
import {
CompositeContextProvider,
CompositeScopedContextProvider
} from "./IB7YUKH5.js";
import {
PopoverContextProvider,
PopoverScopedContextProvider
} from "./7H5KSHHF.js";
import {
createStoreContext
} from "./3ORBWXWF.js";
// src/select/select-context.tsx
import { createContext } from "react";
var ctx = createStoreContext(
[PopoverContextProvider, CompositeContextProvider],
[PopoverScopedContextProvider, CompositeScopedContextProvider]
);
var useSelectContext = ctx.useContext;
var useSelectScopedContext = ctx.useScopedContext;
var useSelectProviderContext = ctx.useProviderContext;
var SelectContextProvider = ctx.ContextProvider;
var SelectScopedContextProvider = ctx.ScopedContextProvider;
var SelectItemCheckedContext = createContext(false);
export {
useSelectContext,
useSelectScopedContext,
useSelectProviderContext,
SelectContextProvider,
SelectScopedContextProvider,
SelectItemCheckedContext
};

View File

@@ -0,0 +1,35 @@
"use client";
import {
useGroupLabel
} from "./NT7GEZQU.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
__objRest
} from "./4R3V3JGP.js";
// src/composite/composite-group-label.ts
var useCompositeGroupLabel = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
props = useGroupLabel(props);
return props;
}
);
var CompositeGroupLabel = createComponent(
(props) => {
const htmlProps = useCompositeGroupLabel(props);
return createElement("div", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
CompositeGroupLabel.displayName = "CompositeGroupLabel";
}
export {
useCompositeGroupLabel,
CompositeGroupLabel
};

View File

@@ -0,0 +1,35 @@
"use client";
import {
useGroup
} from "./R2QZ3KXH.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
__objRest
} from "./4R3V3JGP.js";
// src/composite/composite-group.ts
var useCompositeGroup = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
props = useGroup(props);
return props;
}
);
var CompositeGroup = createComponent(
(props) => {
const htmlProps = useCompositeGroup(props);
return createElement("div", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
CompositeGroup.displayName = "CompositeGroup";
}
export {
useCompositeGroup,
CompositeGroup
};

View File

@@ -0,0 +1,10 @@
"use client";
// src/dialog/utils/supports-inert.ts
function supportsInert() {
return "inert" in HTMLElement.prototype;
}
export {
supportsInert
};

View File

@@ -0,0 +1,77 @@
"use client";
import {
useRootDialog
} from "./CS347UVZ.js";
import {
assignStyle,
setCSSProperty
} from "./X6WIMZJE.js";
// src/dialog/utils/use-prevent-body-scroll.ts
import { useEffect } from "react";
import { getDocument, getWindow } from "@ariakit/core/utils/dom";
import { chain } from "@ariakit/core/utils/misc";
import { isApple, isMac } from "@ariakit/core/utils/platform";
function getPaddingProperty(documentElement) {
const documentLeft = documentElement.getBoundingClientRect().left;
const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft;
return scrollbarX ? "paddingLeft" : "paddingRight";
}
function usePreventBodyScroll(contentElement, contentId, enabled) {
const isRootDialog = useRootDialog({
attribute: "data-dialog-prevent-body-scroll",
contentElement,
contentId,
enabled
});
useEffect(() => {
if (!isRootDialog())
return;
if (!contentElement)
return;
const doc = getDocument(contentElement);
const win = getWindow(contentElement);
const { documentElement, body } = doc;
const cssScrollbarWidth = documentElement.style.getPropertyValue("--scrollbar-width");
const scrollbarWidth = cssScrollbarWidth ? parseInt(cssScrollbarWidth) : win.innerWidth - documentElement.clientWidth;
const setScrollbarWidthProperty = () => setCSSProperty(
documentElement,
"--scrollbar-width",
`${scrollbarWidth}px`
);
const paddingProperty = getPaddingProperty(documentElement);
const setStyle = () => assignStyle(body, {
overflow: "hidden",
[paddingProperty]: `${scrollbarWidth}px`
});
const setIOSStyle = () => {
var _a, _b;
const { scrollX, scrollY, visualViewport } = win;
const offsetLeft = (_a = visualViewport == null ? void 0 : visualViewport.offsetLeft) != null ? _a : 0;
const offsetTop = (_b = visualViewport == null ? void 0 : visualViewport.offsetTop) != null ? _b : 0;
const restoreStyle = assignStyle(body, {
position: "fixed",
overflow: "hidden",
top: `${-(scrollY - Math.floor(offsetTop))}px`,
left: `${-(scrollX - Math.floor(offsetLeft))}px`,
right: "0",
[paddingProperty]: `${scrollbarWidth}px`
});
return () => {
restoreStyle();
if (process.env.NODE_ENV !== "test") {
win.scrollTo(scrollX, scrollY);
}
};
};
const isIOS = isApple() && !isMac();
return chain(
setScrollbarWidthProperty(),
isIOS ? setIOSStyle() : setStyle()
);
}, [isRootDialog, contentElement]);
}
export {
usePreventBodyScroll
};

View File

@@ -0,0 +1,33 @@
"use client";
// src/dialog/utils/prepend-hidden-dismiss.ts
import { getDocument } from "@ariakit/core/utils/dom";
function prependHiddenDismiss(container, onClick) {
const document = getDocument(container);
const button = document.createElement("button");
button.type = "button";
button.tabIndex = -1;
button.textContent = "Dismiss popup";
Object.assign(button.style, {
border: "0px",
clip: "rect(0 0 0 0)",
height: "1px",
margin: "-1px",
overflow: "hidden",
padding: "0px",
position: "absolute",
whiteSpace: "nowrap",
width: "1px"
});
button.addEventListener("click", onClick);
container.prepend(button);
const removeHiddenDismiss = () => {
button.removeEventListener("click", onClick);
button.remove();
};
return removeHiddenDismiss;
}
export {
prependHiddenDismiss
};

View File

@@ -0,0 +1,31 @@
"use client";
import {
usePopoverHeading
} from "./RJDEYIKS.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
// src/hovercard/hovercard-heading.ts
var useHovercardHeading = createHook(
(props) => {
props = usePopoverHeading(props);
return props;
}
);
var HovercardHeading = createComponent(
(props) => {
const htmlProps = useHovercardHeading(props);
return createElement("h1", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
HovercardHeading.displayName = "HovercardHeading";
}
export {
useHovercardHeading,
HovercardHeading
};

View File

@@ -0,0 +1,287 @@
"use client";
import {
setRef
} from "./XM66DUTO.js";
import {
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/utils/hooks.ts
import {
useCallback,
useEffect,
useLayoutEffect,
useMemo,
useReducer,
useRef,
useState
} from "react";
import * as React from "react";
import { canUseDOM } from "@ariakit/core/utils/dom";
import { addGlobalEventListener } from "@ariakit/core/utils/events";
import { applyState } from "@ariakit/core/utils/misc";
var _React = __spreadValues({}, React);
var useReactId = _React.useId;
var useReactDeferredValue = _React.useDeferredValue;
var useReactInsertionEffect = _React.useInsertionEffect;
var useSafeLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
function useInitialValue(value) {
const [initialValue] = useState(value);
return initialValue;
}
function useLazyValue(init) {
const ref = useRef();
if (ref.current === void 0) {
ref.current = init();
}
return ref.current;
}
function useLiveRef(value) {
const ref = useRef(value);
useSafeLayoutEffect(() => {
ref.current = value;
});
return ref;
}
function usePreviousValue(value) {
const [previousValue, setPreviousValue] = useState(value);
if (value !== previousValue) {
setPreviousValue(value);
}
return previousValue;
}
function useEvent(callback) {
const ref = useRef(() => {
throw new Error("Cannot call an event handler while rendering.");
});
if (useReactInsertionEffect) {
useReactInsertionEffect(() => {
ref.current = callback;
});
} else {
ref.current = callback;
}
return useCallback((...args) => {
var _a;
return (_a = ref.current) == null ? void 0 : _a.call(ref, ...args);
}, []);
}
function useMergeRefs(...refs) {
return useMemo(() => {
if (!refs.some(Boolean))
return;
return (value) => {
refs.forEach((ref) => setRef(ref, value));
};
}, refs);
}
function useRefId(ref, deps) {
const [id, setId] = useState(void 0);
useSafeLayoutEffect(() => {
var _a;
setId((_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.id);
}, deps);
return id;
}
function useId(defaultId) {
if (useReactId) {
const reactId = useReactId();
if (defaultId)
return defaultId;
return reactId;
}
const [id, setId] = useState(defaultId);
useSafeLayoutEffect(() => {
if (defaultId || id)
return;
const random = Math.random().toString(36).substr(2, 6);
setId(`id-${random}`);
}, [defaultId, id]);
return defaultId || id;
}
function useDeferredValue(value) {
if (useReactDeferredValue) {
return useReactDeferredValue(value);
}
const [deferredValue, setDeferredValue] = useState(value);
useEffect(() => {
const raf = requestAnimationFrame(() => setDeferredValue(value));
return () => cancelAnimationFrame(raf);
}, [value]);
return deferredValue;
}
function useTagName(refOrElement, type) {
const stringOrUndefined = (type2) => {
if (typeof type2 !== "string")
return;
return type2;
};
const [tagName, setTagName] = useState(() => stringOrUndefined(type));
useSafeLayoutEffect(() => {
const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement;
setTagName((element == null ? void 0 : element.tagName.toLowerCase()) || stringOrUndefined(type));
}, [refOrElement, type]);
return tagName;
}
function useAttribute(refOrElement, attributeName, defaultValue) {
const [attribute, setAttribute] = useState(defaultValue);
useSafeLayoutEffect(() => {
const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement;
const value = element == null ? void 0 : element.getAttribute(attributeName);
if (value == null)
return;
setAttribute(value);
}, [refOrElement, attributeName]);
return attribute;
}
function useUpdateEffect(effect, deps) {
const mounted = useRef(false);
useEffect(() => {
if (mounted.current) {
return effect();
}
mounted.current = true;
}, deps);
useEffect(
() => () => {
mounted.current = false;
},
[]
);
}
function useUpdateLayoutEffect(effect, deps) {
const mounted = useRef(false);
useSafeLayoutEffect(() => {
if (mounted.current) {
return effect();
}
mounted.current = true;
}, deps);
useSafeLayoutEffect(
() => () => {
mounted.current = false;
},
[]
);
}
function useControlledState(defaultState, state, setState) {
const [localState, setLocalState] = useState(defaultState);
const nextState = state !== void 0 ? state : localState;
const stateRef = useLiveRef(state);
const setStateRef = useLiveRef(setState);
const nextStateRef = useLiveRef(nextState);
const setNextState = useCallback((prevValue) => {
const setStateProp = setStateRef.current;
if (setStateProp) {
if (isSetNextState(setStateProp)) {
setStateProp(prevValue);
} else {
const nextValue = applyState(prevValue, nextStateRef.current);
nextStateRef.current = nextValue;
setStateProp(nextValue);
}
}
if (stateRef.current === void 0) {
setLocalState(prevValue);
}
}, []);
defineSetNextState(setNextState);
return [nextState, setNextState];
}
var SET_NEXT_STATE = Symbol("setNextState");
function isSetNextState(arg) {
return arg[SET_NEXT_STATE] === true;
}
function defineSetNextState(arg) {
if (!isSetNextState(arg)) {
Object.defineProperty(arg, SET_NEXT_STATE, { value: true });
}
}
function useForceUpdate() {
return useReducer(() => [], []);
}
function useBooleanEvent(booleanOrCallback) {
return useEvent(
typeof booleanOrCallback === "function" ? booleanOrCallback : () => booleanOrCallback
);
}
function useWrapElement(props, callback, deps = []) {
const wrapElement = useCallback(
(element) => {
if (props.wrapElement) {
element = props.wrapElement(element);
}
return callback(element);
},
[...deps, props.wrapElement]
);
return __spreadProps(__spreadValues({}, props), { wrapElement });
}
function usePortalRef(portalProp = false, portalRefProp) {
const [portalNode, setPortalNode] = useState(null);
const portalRef = useMergeRefs(setPortalNode, portalRefProp);
const domReady = !portalProp || portalNode;
return { portalRef, portalNode, domReady };
}
function useMetadataProps(props, key, value) {
const parent = props.onLoadedMetadataCapture;
const onLoadedMetadataCapture = useMemo(() => {
return Object.assign(() => {
}, __spreadProps(__spreadValues({}, parent), { [key]: value }));
}, [parent, key, value]);
return [parent == null ? void 0 : parent[key], { onLoadedMetadataCapture }];
}
function useIsMouseMoving() {
useEffect(() => {
addGlobalEventListener("mousemove", setMouseMoving, true);
addGlobalEventListener("mousedown", resetMouseMoving, true);
addGlobalEventListener("mouseup", resetMouseMoving, true);
addGlobalEventListener("keydown", resetMouseMoving, true);
addGlobalEventListener("scroll", resetMouseMoving, true);
}, []);
const isMouseMoving = useEvent(() => mouseMoving);
return isMouseMoving;
}
var mouseMoving = false;
var previousScreenX = 0;
var previousScreenY = 0;
function hasMouseMovement(event) {
const movementX = event.movementX || event.screenX - previousScreenX;
const movementY = event.movementY || event.screenY - previousScreenY;
previousScreenX = event.screenX;
previousScreenY = event.screenY;
return movementX || movementY || process.env.NODE_ENV === "test";
}
function setMouseMoving(event) {
if (!hasMouseMovement(event))
return;
mouseMoving = true;
}
function resetMouseMoving() {
mouseMoving = false;
}
export {
useSafeLayoutEffect,
useInitialValue,
useLazyValue,
useLiveRef,
usePreviousValue,
useEvent,
useMergeRefs,
useRefId,
useId,
useDeferredValue,
useTagName,
useAttribute,
useUpdateEffect,
useUpdateLayoutEffect,
useControlledState,
useForceUpdate,
useBooleanEvent,
useWrapElement,
usePortalRef,
useMetadataProps,
useIsMouseMoving
};

View File

@@ -0,0 +1,9 @@
"use client";
// src/checkbox/checkbox-checked-context.ts
import { createContext } from "react";
var CheckboxCheckedContext = createContext(false);
export {
CheckboxCheckedContext
};

View File

@@ -0,0 +1,80 @@
"use client";
import {
setProperty
} from "./X6WIMZJE.js";
// src/dialog/utils/walk-tree-outside.ts
import { contains, getDocument } from "@ariakit/core/utils/dom";
import { chain } from "@ariakit/core/utils/misc";
var ignoreTags = ["SCRIPT", "STYLE"];
function getSnapshotPropertyName(id) {
return `__ariakit-dialog-snapshot-${id}`;
}
function inSnapshot(id, element) {
const doc = getDocument(element);
const propertyName = getSnapshotPropertyName(id);
if (!doc.body[propertyName])
return true;
do {
if (element === doc.body)
return false;
if (!!element[propertyName])
return true;
if (!element.parentElement)
return false;
element = element.parentElement;
} while (true);
}
function isValidElement(id, element, ignoredElements) {
if (ignoreTags.includes(element.tagName))
return false;
if (!inSnapshot(id, element))
return false;
return !ignoredElements.some(
(enabledElement) => enabledElement && contains(element, enabledElement)
);
}
function walkTreeOutside(id, elements, callback, ancestorCallback) {
for (let element of elements) {
if (!(element == null ? void 0 : element.isConnected))
continue;
const hasAncestorAlready = elements.some((maybeAncestor) => {
if (!maybeAncestor)
return false;
if (maybeAncestor === element)
return false;
return maybeAncestor.contains(element);
});
const doc = getDocument(element);
const originalElement = element;
while (element.parentElement && element !== doc.body) {
ancestorCallback == null ? void 0 : ancestorCallback(element.parentElement, originalElement);
if (!hasAncestorAlready) {
for (const child of element.parentElement.children) {
if (isValidElement(id, child, elements)) {
callback(child, originalElement);
}
}
}
element = element.parentElement;
}
}
}
function createWalkTreeSnapshot(id, elements) {
const { body } = getDocument(elements[0]);
const cleanups = [];
const markElement = (element) => {
cleanups.push(setProperty(element, getSnapshotPropertyName(id), true));
};
walkTreeOutside(id, elements, markElement);
return chain(
setProperty(body, getSnapshotPropertyName(id), true),
() => cleanups.forEach((fn) => fn())
);
}
export {
isValidElement,
walkTreeOutside,
createWalkTreeSnapshot
};

View File

@@ -0,0 +1,9 @@
"use client";
// src/portal/portal-context.ts
import { createContext } from "react";
var PortalContext = createContext(null);
export {
PortalContext
};

View File

@@ -0,0 +1,32 @@
"use client";
import {
useCollectionStoreProps
} from "./Y6GYTNQ2.js";
import {
useStore,
useStoreProps
} from "./EKQEJRUF.js";
// src/composite/composite-store.ts
import * as Core from "@ariakit/core/composite/composite-store";
function useCompositeStoreProps(store, update, props) {
store = useCollectionStoreProps(store, update, props);
useStoreProps(store, props, "activeId", "setActiveId");
useStoreProps(store, props, "includesBaseElement");
useStoreProps(store, props, "virtualFocus");
useStoreProps(store, props, "orientation");
useStoreProps(store, props, "rtl");
useStoreProps(store, props, "focusLoop");
useStoreProps(store, props, "focusWrap");
useStoreProps(store, props, "focusShift");
return store;
}
function useCompositeStore(props = {}) {
const [store, update] = useStore(Core.createCompositeStore, props);
return useCompositeStoreProps(store, update, props);
}
export {
useCompositeStoreProps,
useCompositeStore
};

View File

@@ -0,0 +1,27 @@
"use client";
import {
DialogContextProvider,
DialogScopedContextProvider
} from "./G6BJYYBK.js";
import {
createStoreContext
} from "./3ORBWXWF.js";
// src/popover/popover-context.tsx
var ctx = createStoreContext(
[DialogContextProvider],
[DialogScopedContextProvider]
);
var usePopoverContext = ctx.useContext;
var usePopoverScopedContext = ctx.useScopedContext;
var usePopoverProviderContext = ctx.useProviderContext;
var PopoverContextProvider = ctx.ContextProvider;
var PopoverScopedContextProvider = ctx.ScopedContextProvider;
export {
usePopoverContext,
usePopoverScopedContext,
usePopoverProviderContext,
PopoverContextProvider,
PopoverScopedContextProvider
};

View File

@@ -0,0 +1,39 @@
"use client";
import {
useCompositeItem
} from "./QZLXIDNP.js";
import {
useToolbarContext
} from "./SOK7T35T.js";
import {
createElement,
createHook,
createMemoComponent
} from "./3ORBWXWF.js";
import {
__objRest,
__spreadValues
} from "./4R3V3JGP.js";
// src/toolbar/toolbar-item.ts
var useToolbarItem = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const context = useToolbarContext();
store = store || context;
props = useCompositeItem(__spreadValues({ store }, props));
return props;
}
);
var ToolbarItem = createMemoComponent((props) => {
const htmlProps = useToolbarItem(props);
return createElement("button", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
ToolbarItem.displayName = "ToolbarItem";
}
export {
useToolbarItem,
ToolbarItem
};

View File

@@ -0,0 +1,364 @@
"use client";
import {
findFirstEnabledItem,
getEnabledItem,
groupItemsByRows,
isItem,
silentlyFocused
} from "./3IEDWLST.js";
import {
CompositeContextProvider,
useCompositeProviderContext
} from "./IB7YUKH5.js";
import {
useFocusable
} from "./KK7H3W2B.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useBooleanEvent,
useEvent,
useMergeRefs,
useSafeLayoutEffect,
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/composite/composite.tsx
import { useCallback, useEffect, useRef, useState } from "react";
import { flatten2DArray, reverseArray } from "@ariakit/core/utils/array";
import { getActiveElement, isTextField } from "@ariakit/core/utils/dom";
import {
fireBlurEvent,
fireKeyboardEvent,
isSelfTarget
} from "@ariakit/core/utils/events";
import { focusIntoView, hasFocus } from "@ariakit/core/utils/focus";
import { invariant } from "@ariakit/core/utils/misc";
import { jsx } from "react/jsx-runtime";
function isGrid(items) {
return items.some((item) => !!item.rowId);
}
function isPrintableKey(event) {
const target = event.target;
if (target && !isTextField(target))
return false;
return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
}
function isModifierKey(event) {
return event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta";
}
function useKeyboardEventProxy(store, onKeyboardEvent, previousElementRef) {
return useEvent((event) => {
var _a;
onKeyboardEvent == null ? void 0 : onKeyboardEvent(event);
if (event.defaultPrevented)
return;
if (event.isPropagationStopped())
return;
if (!isSelfTarget(event))
return;
if (isModifierKey(event))
return;
if (isPrintableKey(event))
return;
const state = store.getState();
const activeElement = (_a = getEnabledItem(store, state.activeId)) == null ? void 0 : _a.element;
if (!activeElement)
return;
const _b = event, { view } = _b, eventInit = __objRest(_b, ["view"]);
const previousElement = previousElementRef == null ? void 0 : previousElementRef.current;
if (activeElement !== previousElement) {
activeElement.focus();
}
if (!fireKeyboardEvent(activeElement, event.type, eventInit)) {
event.preventDefault();
}
if (event.currentTarget.contains(activeElement)) {
event.stopPropagation();
}
});
}
function findFirstEnabledItemInTheLastRow(items) {
return findFirstEnabledItem(
flatten2DArray(reverseArray(groupItemsByRows(items)))
);
}
function useScheduleFocus(store) {
const [scheduled, setScheduled] = useState(false);
const schedule = useCallback(() => setScheduled(true), []);
const activeItem = store.useState(
(state) => getEnabledItem(store, state.activeId)
);
useEffect(() => {
const activeElement = activeItem == null ? void 0 : activeItem.element;
if (!scheduled)
return;
if (!activeElement)
return;
setScheduled(false);
activeElement.focus({ preventScroll: true });
}, [activeItem, scheduled]);
return schedule;
}
var useComposite = createHook(
(_a) => {
var _b = _a, {
store,
composite = true,
focusOnMove = composite,
moveOnKeyPress = true
} = _b, props = __objRest(_b, [
"store",
"composite",
"focusOnMove",
"moveOnKeyPress"
]);
const context = useCompositeProviderContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "Composite must receive a `store` prop or be wrapped in a CompositeProvider component."
);
const previousElementRef = useRef(null);
const scheduleFocus = useScheduleFocus(store);
const moves = store.useState("moves");
useEffect(() => {
var _a2;
if (!store)
return;
if (!moves)
return;
if (!composite)
return;
if (!focusOnMove)
return;
const { activeId: activeId2 } = store.getState();
const itemElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element;
if (!itemElement)
return;
focusIntoView(itemElement);
}, [store, moves, composite, focusOnMove]);
useSafeLayoutEffect(() => {
if (!store)
return;
if (!moves)
return;
if (!composite)
return;
const { baseElement, activeId: activeId2 } = store.getState();
const isSelfAcive = activeId2 === null;
if (!isSelfAcive)
return;
if (!baseElement)
return;
const previousElement = previousElementRef.current;
previousElementRef.current = null;
if (previousElement) {
fireBlurEvent(previousElement, { relatedTarget: baseElement });
}
if (!hasFocus(baseElement)) {
baseElement.focus();
}
}, [store, moves, composite]);
const activeId = store.useState("activeId");
const virtualFocus = store.useState("virtualFocus");
useSafeLayoutEffect(() => {
var _a2;
if (!store)
return;
if (!composite)
return;
if (!virtualFocus)
return;
const previousElement = previousElementRef.current;
previousElementRef.current = null;
if (!previousElement)
return;
const activeElement = (_a2 = getEnabledItem(store, activeId)) == null ? void 0 : _a2.element;
const relatedTarget = activeElement || getActiveElement(previousElement);
if (relatedTarget === previousElement)
return;
fireBlurEvent(previousElement, { relatedTarget });
}, [store, activeId, virtualFocus, composite]);
const onKeyDownCapture = useKeyboardEventProxy(
store,
props.onKeyDownCapture,
previousElementRef
);
const onKeyUpCapture = useKeyboardEventProxy(
store,
props.onKeyUpCapture,
previousElementRef
);
const onFocusCaptureProp = props.onFocusCapture;
const onFocusCapture = useEvent((event) => {
onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event);
if (event.defaultPrevented)
return;
if (!store)
return;
const { virtualFocus: virtualFocus2 } = store.getState();
if (!virtualFocus2)
return;
const previousActiveElement = event.relatedTarget;
const isSilentlyFocused = silentlyFocused(event.currentTarget);
if (isSelfTarget(event) && isSilentlyFocused) {
event.stopPropagation();
previousElementRef.current = previousActiveElement;
}
});
const onFocusProp = props.onFocus;
const onFocus = useEvent((event) => {
onFocusProp == null ? void 0 : onFocusProp(event);
if (event.defaultPrevented)
return;
if (!composite)
return;
if (!store)
return;
const { relatedTarget } = event;
const { virtualFocus: virtualFocus2 } = store.getState();
if (virtualFocus2) {
if (isSelfTarget(event) && !isItem(store, relatedTarget)) {
queueMicrotask(scheduleFocus);
}
} else if (isSelfTarget(event)) {
store.setActiveId(null);
}
});
const onBlurCaptureProp = props.onBlurCapture;
const onBlurCapture = useEvent((event) => {
var _a2;
onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event);
if (event.defaultPrevented)
return;
if (!store)
return;
const { virtualFocus: virtualFocus2, activeId: activeId2 } = store.getState();
if (!virtualFocus2)
return;
const activeElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element;
const nextActiveElement = event.relatedTarget;
const nextActiveElementIsItem = isItem(store, nextActiveElement);
const previousElement = previousElementRef.current;
previousElementRef.current = null;
if (isSelfTarget(event) && nextActiveElementIsItem) {
if (nextActiveElement === activeElement) {
if (previousElement && previousElement !== nextActiveElement) {
fireBlurEvent(previousElement, event);
}
} else if (activeElement) {
fireBlurEvent(activeElement, event);
} else if (previousElement) {
fireBlurEvent(previousElement, event);
}
event.stopPropagation();
} else {
const targetIsItem = isItem(store, event.target);
if (!targetIsItem && activeElement) {
fireBlurEvent(activeElement, event);
}
}
});
const onKeyDownProp = props.onKeyDown;
const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
const onKeyDown = useEvent((event) => {
var _a2;
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
if (event.defaultPrevented)
return;
if (!store)
return;
if (!isSelfTarget(event))
return;
const { orientation, items, renderedItems, activeId: activeId2 } = store.getState();
const activeItem = getEnabledItem(store, activeId2);
if ((_a2 = activeItem == null ? void 0 : activeItem.element) == null ? void 0 : _a2.isConnected)
return;
const isVertical = orientation !== "horizontal";
const isHorizontal = orientation !== "vertical";
const grid = isGrid(renderedItems);
const isHorizontalKey = event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End";
if (isHorizontalKey && isTextField(event.currentTarget))
return;
const up = () => {
if (grid) {
const item = items && findFirstEnabledItemInTheLastRow(items);
return item == null ? void 0 : item.id;
}
return store == null ? void 0 : store.last();
};
const keyMap = {
ArrowUp: (grid || isVertical) && up,
ArrowRight: (grid || isHorizontal) && store.first,
ArrowDown: (grid || isVertical) && store.first,
ArrowLeft: (grid || isHorizontal) && store.last,
Home: store.first,
End: store.last,
PageUp: store.first,
PageDown: store.last
};
const action = keyMap[event.key];
if (action) {
const id = action();
if (id !== void 0) {
if (!moveOnKeyPressProp(event))
return;
event.preventDefault();
store.move(id);
}
}
});
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(CompositeContextProvider, { value: store, children: element }),
[store]
);
const activeDescendant = store.useState((state) => {
var _a2;
if (!store)
return;
if (!composite)
return;
if (!state.virtualFocus)
return;
return (_a2 = getEnabledItem(store, state.activeId)) == null ? void 0 : _a2.id;
});
props = __spreadProps(__spreadValues({
"aria-activedescendant": activeDescendant
}, props), {
ref: useMergeRefs(composite ? store.setBaseElement : null, props.ref),
onKeyDownCapture,
onKeyUpCapture,
onFocusCapture,
onFocus,
onBlurCapture,
onKeyDown
});
const focusable = store.useState(
(state) => composite && (state.virtualFocus || state.activeId === null)
);
props = useFocusable(__spreadValues({ focusable }, props));
return props;
}
);
var Composite = createComponent((props) => {
const htmlProps = useComposite(props);
return createElement("div", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
Composite.displayName = "Composite";
}
export {
useComposite,
Composite
};

View File

@@ -0,0 +1,127 @@
"use client";
import {
useHovercardProviderContext
} from "./TI7CMBHW.js";
import {
useFocusable
} from "./KK7H3W2B.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useBooleanEvent,
useEvent,
useIsMouseMoving,
useMergeRefs
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/hovercard/hovercard-anchor.ts
import { useCallback, useEffect, useRef } from "react";
import { addGlobalEventListener } from "@ariakit/core/utils/events";
import { disabledFromProps, invariant } from "@ariakit/core/utils/misc";
var useHovercardAnchor = createHook(
(_a) => {
var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]);
const context = useHovercardProviderContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "HovercardAnchor must receive a `store` prop or be wrapped in a HovercardProvider component."
);
const disabled = disabledFromProps(props);
const showTimeoutRef = useRef(0);
useEffect(() => () => window.clearTimeout(showTimeoutRef.current), []);
useEffect(() => {
const onMouseLeave = (event) => {
if (!store)
return;
const { anchorElement } = store.getState();
if (!anchorElement)
return;
if (event.target !== anchorElement)
return;
window.clearTimeout(showTimeoutRef.current);
showTimeoutRef.current = 0;
};
return addGlobalEventListener("mouseleave", onMouseLeave, true);
}, [store]);
const onMouseMoveProp = props.onMouseMove;
const showOnHoverProp = useBooleanEvent(showOnHover);
const isMouseMoving = useIsMouseMoving();
const onMouseMove = useEvent(
(event) => {
onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
if (disabled)
return;
if (!store)
return;
if (event.defaultPrevented)
return;
if (showTimeoutRef.current)
return;
if (!isMouseMoving())
return;
if (!showOnHoverProp(event))
return;
const element = event.currentTarget;
store.setAnchorElement(element);
store.setDisclosureElement(element);
const { showTimeout, timeout } = store.getState();
const showHovercard = () => {
showTimeoutRef.current = 0;
if (!isMouseMoving())
return;
store == null ? void 0 : store.setAnchorElement(element);
store == null ? void 0 : store.show();
queueMicrotask(() => {
store == null ? void 0 : store.setDisclosureElement(element);
});
};
const timeoutMs = showTimeout != null ? showTimeout : timeout;
if (timeoutMs === 0) {
showHovercard();
} else {
showTimeoutRef.current = window.setTimeout(showHovercard, timeoutMs);
}
}
);
const ref = useCallback(
(element) => {
if (!store)
return;
const { anchorElement } = store.getState();
if (anchorElement == null ? void 0 : anchorElement.isConnected)
return;
store.setAnchorElement(element);
},
[store]
);
props = __spreadProps(__spreadValues({}, props), {
ref: useMergeRefs(ref, props.ref),
onMouseMove
});
props = useFocusable(props);
return props;
}
);
var HovercardAnchor = createComponent(
(props) => {
const htmlProps = useHovercardAnchor(props);
return createElement("a", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
HovercardAnchor.displayName = "HovercardAnchor";
}
export {
useHovercardAnchor,
HovercardAnchor
};

View File

@@ -0,0 +1,29 @@
"use client";
import {
usePopoverDescription
} from "./4CK3XZ4H.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
// src/hovercard/hovercard-description.ts
var useHovercardDescription = createHook(
(props) => {
props = usePopoverDescription(props);
return props;
}
);
var HovercardDescription = createComponent((props) => {
const htmlProps = useHovercardDescription(props);
return createElement("p", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
HovercardDescription.displayName = "HovercardDescription";
}
export {
useHovercardDescription,
HovercardDescription
};

View File

@@ -0,0 +1,42 @@
"use client";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/visually-hidden/visually-hidden.ts
var useVisuallyHidden = createHook((props) => {
props = __spreadProps(__spreadValues({}, props), {
style: __spreadValues({
border: 0,
clip: "rect(0 0 0 0)",
height: "1px",
margin: "-1px",
overflow: "hidden",
padding: 0,
position: "absolute",
whiteSpace: "nowrap",
width: "1px"
}, props.style)
});
return props;
});
var VisuallyHidden = createComponent(
(props) => {
const htmlProps = useVisuallyHidden(props);
return createElement("span", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
VisuallyHidden.displayName = "VisuallyHidden";
}
export {
useVisuallyHidden,
VisuallyHidden
};

View File

@@ -0,0 +1,87 @@
"use client";
import {
useButton
} from "./VDNZBO4W.js";
import {
useDisclosureProviderContext
} from "./OAYFXAQ2.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useBooleanEvent,
useEvent,
useMergeRefs,
useMetadataProps
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/disclosure/disclosure.ts
import { useEffect, useRef, useState } from "react";
import { invariant } from "@ariakit/core/utils/misc";
var symbol = Symbol("disclosure");
var useDisclosure = createHook(
(_a) => {
var _b = _a, { store, toggleOnClick = true } = _b, props = __objRest(_b, ["store", "toggleOnClick"]);
const context = useDisclosureProviderContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "Disclosure must receive a `store` prop or be wrapped in a DisclosureProvider component."
);
const ref = useRef(null);
const [expanded, setExpanded] = useState(false);
const disclosureElement = store.useState("disclosureElement");
const open = store.useState("open");
useEffect(() => {
let isCurrentDisclosure = disclosureElement === ref.current;
if (!(disclosureElement == null ? void 0 : disclosureElement.isConnected)) {
store == null ? void 0 : store.setDisclosureElement(ref.current);
isCurrentDisclosure = true;
}
setExpanded(open && isCurrentDisclosure);
}, [disclosureElement, store, open]);
const onClickProp = props.onClick;
const toggleOnClickProp = useBooleanEvent(toggleOnClick);
const [isDuplicate, metadataProps] = useMetadataProps(props, symbol, true);
const onClick = useEvent((event) => {
onClickProp == null ? void 0 : onClickProp(event);
if (event.defaultPrevented)
return;
if (isDuplicate)
return;
if (!toggleOnClickProp(event))
return;
store == null ? void 0 : store.setDisclosureElement(event.currentTarget);
store == null ? void 0 : store.toggle();
});
const contentElement = store.useState("contentElement");
props = __spreadProps(__spreadValues(__spreadValues({
"aria-expanded": expanded,
"aria-controls": contentElement == null ? void 0 : contentElement.id
}, metadataProps), props), {
ref: useMergeRefs(ref, props.ref),
onClick
});
props = useButton(props);
return props;
}
);
var Disclosure = createComponent((props) => {
const htmlProps = useDisclosure(props);
return createElement("button", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
Disclosure.displayName = "Disclosure";
}
export {
useDisclosure,
Disclosure
};

View File

@@ -0,0 +1,69 @@
"use client";
import {
CompositeRowContext,
useCompositeContext
} from "./IB7YUKH5.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useId,
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadValues
} from "./4R3V3JGP.js";
// src/composite/composite-row.tsx
import { useMemo } from "react";
import { invariant } from "@ariakit/core/utils/misc";
import { jsx } from "react/jsx-runtime";
var useCompositeRow = createHook(
(_a) => {
var _b = _a, {
store,
"aria-setsize": ariaSetSize,
"aria-posinset": ariaPosInSet
} = _b, props = __objRest(_b, [
"store",
"aria-setsize",
"aria-posinset"
]);
const context = useCompositeContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "CompositeRow must be wrapped in a Composite component."
);
const id = useId(props.id);
const baseElement = store.useState(
(state) => state.baseElement || void 0
);
const providerValue = useMemo(
() => ({ id, baseElement, ariaSetSize, ariaPosInSet }),
[id, baseElement, ariaSetSize, ariaPosInSet]
);
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(CompositeRowContext.Provider, { value: providerValue, children: element }),
[providerValue]
);
props = __spreadValues({ id }, props);
return props;
}
);
var CompositeRow = createComponent((props) => {
const htmlProps = useCompositeRow(props);
return createElement("div", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
CompositeRow.displayName = "CompositeRow";
}
export {
useCompositeRow,
CompositeRow
};

View File

@@ -0,0 +1,22 @@
"use client";
import {
useCompositeStoreProps
} from "./7GBW5FLS.js";
import {
useStore
} from "./EKQEJRUF.js";
// src/toolbar/toolbar-store.ts
import * as Core from "@ariakit/core/toolbar/toolbar-store";
function useToolbarStoreProps(store, update, props) {
return useCompositeStoreProps(store, update, props);
}
function useToolbarStore(props = {}) {
const [store, update] = useStore(Core.createToolbarStore, props);
return useToolbarStoreProps(store, update, props);
}
export {
useToolbarStoreProps,
useToolbarStore
};

View File

@@ -0,0 +1,33 @@
"use client";
import {
isBackdrop
} from "./MKDDWKFK.js";
import {
walkTreeOutside
} from "./72E5EPFF.js";
import {
setAttribute
} from "./X6WIMZJE.js";
// src/dialog/utils/disable-accessibility-tree-outside.ts
function hideElementFromAccessibilityTree(element) {
return setAttribute(element, "aria-hidden", "true");
}
function disableAccessibilityTreeOutside(id, elements) {
const cleanups = [];
const ids = elements.map((el) => el == null ? void 0 : el.id);
walkTreeOutside(id, elements, (element) => {
if (isBackdrop(element, ...ids))
return;
cleanups.unshift(hideElementFromAccessibilityTree(element));
});
const restoreAccessibilityTree = () => {
cleanups.forEach((fn) => fn());
};
return restoreAccessibilityTree;
}
export {
hideElementFromAccessibilityTree,
disableAccessibilityTreeOutside
};

View File

@@ -0,0 +1,43 @@
"use client";
import {
useVisuallyHidden
} from "./BG6HZDS7.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/focus-trap/focus-trap.ts
var useFocusTrap = createHook((props) => {
props = __spreadProps(__spreadValues({
"data-focus-trap": "",
tabIndex: 0,
"aria-hidden": true
}, props), {
style: __spreadValues({
// Prevents unintended scroll jumps.
position: "fixed",
top: 0,
left: 0
}, props.style)
});
props = useVisuallyHidden(props);
return props;
});
var FocusTrap = createComponent((props) => {
const htmlProps = useFocusTrap(props);
return createElement("span", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
FocusTrap.displayName = "FocusTrap";
}
export {
useFocusTrap,
FocusTrap
};

View File

@@ -0,0 +1,156 @@
"use client";
import {
DialogScopedContextProvider
} from "./G6BJYYBK.js";
import {
useDisclosureProviderContext
} from "./OAYFXAQ2.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useStoreState
} from "./EKQEJRUF.js";
import {
useId,
useMergeRefs,
useSafeLayoutEffect,
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/disclosure/disclosure-content.tsx
import { useState } from "react";
import { invariant } from "@ariakit/core/utils/misc";
import { jsx } from "react/jsx-runtime";
function afterTimeout(timeoutMs, cb) {
const timeoutId = setTimeout(cb, timeoutMs);
return () => clearTimeout(timeoutId);
}
function afterPaint(cb) {
let raf = requestAnimationFrame(() => {
raf = requestAnimationFrame(cb);
});
return () => cancelAnimationFrame(raf);
}
function parseCSSTime(...times) {
return times.join(", ").split(", ").reduce((longestTime, currentTimeString) => {
const currentTime = parseFloat(currentTimeString || "0s") * 1e3;
if (currentTime > longestTime)
return currentTime;
return longestTime;
}, 0);
}
function isHidden(mounted, hidden, alwaysVisible) {
return !alwaysVisible && hidden !== false && (!mounted || !!hidden);
}
var useDisclosureContent = createHook(
(_a) => {
var _b = _a, { store, alwaysVisible } = _b, props = __objRest(_b, ["store", "alwaysVisible"]);
const context = useDisclosureProviderContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "DisclosureContent must receive a `store` prop or be wrapped in a DisclosureProvider component."
);
const id = useId(props.id);
const [transition, setTransition] = useState(null);
const open = store.useState("open");
const mounted = store.useState("mounted");
const animated = store.useState("animated");
const contentElement = store.useState("contentElement");
useSafeLayoutEffect(() => {
if (!animated)
return;
if (!(contentElement == null ? void 0 : contentElement.isConnected)) {
setTransition(null);
return;
}
return afterPaint(() => {
setTransition(open ? "enter" : "leave");
});
}, [animated, contentElement, open]);
useSafeLayoutEffect(() => {
if (!store)
return;
if (!animated)
return;
if (!contentElement)
return;
if (!transition)
return;
if (transition === "enter" && !open)
return;
if (transition === "leave" && open)
return;
if (typeof animated === "number") {
const timeoutMs2 = animated;
return afterTimeout(timeoutMs2, store.stopAnimation);
}
const {
transitionDuration,
animationDuration,
transitionDelay,
animationDelay
} = getComputedStyle(contentElement);
const delay = parseCSSTime(transitionDelay, animationDelay);
const duration = parseCSSTime(transitionDuration, animationDuration);
const timeoutMs = delay + duration;
if (!timeoutMs)
return;
return afterTimeout(timeoutMs, store.stopAnimation);
}, [store, animated, contentElement, open, transition]);
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(DialogScopedContextProvider, { value: store, children: element }),
[store]
);
const hidden = isHidden(mounted, props.hidden, alwaysVisible);
const style = hidden ? __spreadProps(__spreadValues({}, props.style), { display: "none" }) : props.style;
props = __spreadProps(__spreadValues({
id,
"data-enter": transition === "enter" ? "" : void 0,
"data-leave": transition === "leave" ? "" : void 0,
hidden
}, props), {
ref: useMergeRefs(id ? store.setContentElement : null, props.ref),
style
});
return props;
}
);
var DisclosureContentImpl = createComponent(
(props) => {
const htmlProps = useDisclosureContent(props);
return createElement("div", htmlProps);
}
);
var DisclosureContent = createComponent(
(_a) => {
var _b = _a, { unmountOnHide } = _b, props = __objRest(_b, ["unmountOnHide"]);
const context = useDisclosureProviderContext();
const store = props.store || context;
const mounted = useStoreState(
store,
(state) => !unmountOnHide || (state == null ? void 0 : state.mounted)
);
if (mounted === false)
return null;
return /* @__PURE__ */ jsx(DisclosureContentImpl, __spreadValues({}, props));
}
);
if (process.env.NODE_ENV !== "production") {
DisclosureContent.displayName = "DisclosureContent";
}
export {
isHidden,
useDisclosureContent,
DisclosureContent
};

View File

@@ -0,0 +1,36 @@
"use client";
import {
useCompositeStoreProps
} from "./7GBW5FLS.js";
import {
useStore,
useStoreProps
} from "./EKQEJRUF.js";
import {
useUpdateEffect
} from "./6O5OEQGF.js";
import {
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/tab/tab-store.ts
import { useMemo } from "react";
import * as Core from "@ariakit/core/tab/tab-store";
function useTabStoreProps(store, update, props) {
store = useCompositeStoreProps(store, update, props);
useStoreProps(store, props, "selectedId", "setSelectedId");
useStoreProps(store, props, "selectOnMove");
const [panels, updatePanels] = useStore(() => store.panels, {});
useUpdateEffect(updatePanels, [store, updatePanels]);
return useMemo(() => __spreadProps(__spreadValues({}, store), { panels }), [store, panels]);
}
function useTabStore(props = {}) {
const [store, update] = useStore(Core.createTabStore, props);
return useTabStoreProps(store, update, props);
}
export {
useTabStoreProps,
useTabStore
};

View File

@@ -0,0 +1,47 @@
"use client";
import {
useForceUpdate
} from "./6O5OEQGF.js";
// src/dialog/utils/use-root-dialog.ts
import { useCallback, useEffect } from "react";
import { getDocument } from "@ariakit/core/utils/dom";
import { flushSync } from "react-dom";
function useRootDialog({
attribute,
contentId,
contentElement,
enabled
}) {
const [updated, retry] = useForceUpdate();
const isRootDialog = useCallback(() => {
if (!enabled)
return false;
if (!contentElement)
return false;
const { body } = getDocument(contentElement);
const id = body.getAttribute(attribute);
return !id || id === contentId;
}, [updated, enabled, contentElement, attribute, contentId]);
useEffect(() => {
if (!enabled)
return;
if (!contentId)
return;
if (!contentElement)
return;
const { body } = getDocument(contentElement);
if (isRootDialog()) {
body.setAttribute(attribute, contentId);
return () => body.removeAttribute(attribute);
}
const observer = new MutationObserver(() => flushSync(retry));
observer.observe(body, { attributeFilter: [attribute] });
return () => observer.disconnect();
}, [updated, enabled, contentId, contentElement, isRootDialog, attribute]);
return isRootDialog;
}
export {
useRootDialog
};

View File

@@ -0,0 +1,49 @@
"use client";
import {
DialogDescriptionContext
} from "./G6BJYYBK.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useId,
useSafeLayoutEffect
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadValues
} from "./4R3V3JGP.js";
// src/dialog/dialog-description.ts
import { useContext } from "react";
var useDialogDescription = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const setDescriptionId = useContext(DialogDescriptionContext);
const id = useId(props.id);
useSafeLayoutEffect(() => {
setDescriptionId == null ? void 0 : setDescriptionId(id);
return () => setDescriptionId == null ? void 0 : setDescriptionId(void 0);
}, [setDescriptionId, id]);
props = __spreadValues({
id
}, props);
return props;
}
);
var DialogDescription = createComponent(
(props) => {
const htmlProps = useDialogDescription(props);
return createElement("p", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
DialogDescription.displayName = "DialogDescription";
}
export {
useDialogDescription,
DialogDescription
};

View File

@@ -0,0 +1,93 @@
"use client";
import {
useEvent,
useLiveRef,
useSafeLayoutEffect
} from "./6O5OEQGF.js";
import {
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/utils/store.tsx
import * as React from "react";
import { hasOwnProperty, identity } from "@ariakit/core/utils/misc";
import { batch, init, subscribe, sync } from "@ariakit/core/utils/store";
import useSyncExternalStoreExports from "use-sync-external-store/shim/index.js";
var { useSyncExternalStore } = useSyncExternalStoreExports;
var noopSubscribe = () => () => {
};
function useStoreState(store, keyOrSelector = identity) {
const storeSubscribe = React.useCallback(
(callback) => {
if (!store)
return noopSubscribe();
return subscribe(store, null, callback);
},
[store]
);
const getSnapshot = () => {
const key = typeof keyOrSelector === "string" ? keyOrSelector : null;
const selector = typeof keyOrSelector === "function" ? keyOrSelector : null;
const state = store == null ? void 0 : store.getState();
if (selector)
return selector(state);
if (!state)
return;
if (!key)
return;
if (!hasOwnProperty(state, key))
return;
return state[key];
};
return useSyncExternalStore(storeSubscribe, getSnapshot, getSnapshot);
}
function useStoreProps(store, props, key, setKey) {
const value = hasOwnProperty(props, key) ? props[key] : void 0;
const setValue = setKey ? props[setKey] : void 0;
const propsRef = useLiveRef({ value, setValue });
useSafeLayoutEffect(() => {
return sync(store, [key], (state, prev) => {
const { value: value2, setValue: setValue2 } = propsRef.current;
if (!setValue2)
return;
if (state[key] === prev[key])
return;
if (state[key] === value2)
return;
setValue2(state[key]);
});
}, [store, key]);
useSafeLayoutEffect(() => {
if (value === void 0)
return;
store.setState(key, value);
return batch(store, [key], () => {
if (value === void 0)
return;
store.setState(key, value);
});
});
}
function useStore(createStore, props) {
const [store, setStore] = React.useState(() => createStore(props));
useSafeLayoutEffect(() => init(store), [store]);
const useState2 = React.useCallback(
(keyOrSelector) => useStoreState(store, keyOrSelector),
[store]
);
const memoizedStore = React.useMemo(
() => __spreadProps(__spreadValues({}, store), { useState: useState2 }),
[store, useState2]
);
const updateStore = useEvent(() => {
setStore((store2) => createStore(__spreadValues(__spreadValues({}, props), store2.getState())));
});
return [memoizedStore, updateStore];
}
export {
useStoreState,
useStoreProps,
useStore
};

View File

@@ -0,0 +1,50 @@
"use client";
import {
useSeparator
} from "./YZEJGRDQ.js";
import {
useCompositeContext
} from "./IB7YUKH5.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/composite/composite-separator.ts
import { invariant } from "@ariakit/core/utils/misc";
var useCompositeSeparator = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const context = useCompositeContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "CompositeSeparator must be wrapped in a Composite component."
);
const orientation = store.useState(
(state) => state.orientation === "horizontal" ? "vertical" : "horizontal"
);
props = useSeparator(__spreadProps(__spreadValues({}, props), { orientation }));
return props;
}
);
var CompositeSeparator = createComponent(
(props) => {
const htmlProps = useCompositeSeparator(props);
return createElement("hr", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
CompositeSeparator.displayName = "CompositeSeparator";
}
export {
useCompositeSeparator,
CompositeSeparator
};

View File

@@ -0,0 +1,41 @@
"use client";
import {
useDialogDismiss
} from "./NKXUN25E.js";
import {
usePopoverScopedContext
} from "./7H5KSHHF.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
__objRest,
__spreadValues
} from "./4R3V3JGP.js";
// src/popover/popover-dismiss.ts
var usePopoverDismiss = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const context = usePopoverScopedContext();
store = store || context;
props = useDialogDismiss(__spreadValues({ store }, props));
return props;
}
);
var PopoverDismiss = createComponent(
(props) => {
const htmlProps = usePopoverDismiss(props);
return createElement("button", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
PopoverDismiss.displayName = "PopoverDismiss";
}
export {
usePopoverDismiss,
PopoverDismiss
};

View File

@@ -0,0 +1,41 @@
"use client";
import {
usePopoverDismiss
} from "./F6PRXTDU.js";
import {
useHovercardScopedContext
} from "./TI7CMBHW.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
__objRest,
__spreadValues
} from "./4R3V3JGP.js";
// src/hovercard/hovercard-dismiss.ts
var useHovercardDismiss = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const context = useHovercardScopedContext();
store = store || context;
props = usePopoverDismiss(__spreadValues({ store }, props));
return props;
}
);
var HovercardDismiss = createComponent(
(props) => {
const htmlProps = useHovercardDismiss(props);
return createElement("button", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
HovercardDismiss.displayName = "HovercardDismiss";
}
export {
useHovercardDismiss,
HovercardDismiss
};

View File

@@ -0,0 +1,45 @@
"use client";
import {
useComboboxProviderContext
} from "./W76OTZCC.js";
import {
useCompositeStoreProps
} from "./7GBW5FLS.js";
import {
usePopoverStoreProps
} from "./MG4P3223.js";
import {
useStore,
useStoreProps
} from "./EKQEJRUF.js";
import {
useUpdateEffect
} from "./6O5OEQGF.js";
import {
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/select/select-store.ts
import * as Core from "@ariakit/core/select/select-store";
function useSelectStoreProps(store, update, props) {
useUpdateEffect(update, [props.combobox]);
store = useCompositeStoreProps(store, update, props);
store = usePopoverStoreProps(store, update, props);
useStoreProps(store, props, "value", "setValue");
useStoreProps(store, props, "setValueOnMove");
return Object.assign(store, { combobox: props.combobox });
}
function useSelectStore(props = {}) {
const combobox = useComboboxProviderContext();
props = __spreadProps(__spreadValues({}, props), {
combobox: props.combobox !== void 0 ? props.combobox : combobox
});
const [store, update] = useStore(Core.createSelectStore, props);
return useSelectStoreProps(store, update, props);
}
export {
useSelectStoreProps,
useSelectStore
};

View File

@@ -0,0 +1,59 @@
"use client";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
// src/role/role.ts
var elements = [
"a",
"button",
"details",
"dialog",
"div",
"form",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"header",
"img",
"input",
"label",
"li",
"nav",
"ol",
"p",
"section",
"select",
"span",
"textarea",
"ul",
"svg"
];
var useRole = createHook((props) => {
return props;
});
var Role = createComponent((props) => {
return createElement("div", props);
});
if (process.env.NODE_ENV !== "production") {
Role.displayName = "Role";
}
Object.assign(
Role,
elements.reduce((acc, element) => {
acc[element] = createComponent((props) => {
return createElement(element, props);
});
return acc;
}, {})
);
export {
useRole,
Role
};

View File

@@ -0,0 +1,32 @@
"use client";
import {
DisclosureContextProvider,
DisclosureScopedContextProvider
} from "./OAYFXAQ2.js";
import {
createStoreContext
} from "./3ORBWXWF.js";
// src/dialog/dialog-context.tsx
import { createContext } from "react";
var ctx = createStoreContext(
[DisclosureContextProvider],
[DisclosureScopedContextProvider]
);
var useDialogContext = ctx.useContext;
var useDialogScopedContext = ctx.useScopedContext;
var useDialogProviderContext = ctx.useProviderContext;
var DialogContextProvider = ctx.ContextProvider;
var DialogScopedContextProvider = ctx.ScopedContextProvider;
var DialogHeadingContext = createContext(void 0);
var DialogDescriptionContext = createContext(void 0);
export {
useDialogContext,
useDialogScopedContext,
useDialogProviderContext,
DialogContextProvider,
DialogScopedContextProvider,
DialogHeadingContext,
DialogDescriptionContext
};

View File

@@ -0,0 +1,134 @@
"use client";
import {
useCompositeContext
} from "./IB7YUKH5.js";
import {
createElement,
createHook,
createMemoComponent
} from "./3ORBWXWF.js";
import {
useBooleanEvent,
useEvent,
useIsMouseMoving,
useMergeRefs
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/composite/composite-hover.ts
import { useCallback } from "react";
import { contains } from "@ariakit/core/utils/dom";
import { hasFocus, hasFocusWithin } from "@ariakit/core/utils/focus";
import { hasOwnProperty, invariant } from "@ariakit/core/utils/misc";
function getMouseDestination(event) {
const relatedTarget = event.relatedTarget;
if ((relatedTarget == null ? void 0 : relatedTarget.nodeType) === Node.ELEMENT_NODE) {
return relatedTarget;
}
return null;
}
function hoveringInside(event) {
const nextElement = getMouseDestination(event);
if (!nextElement)
return false;
return contains(event.currentTarget, nextElement);
}
var symbol = Symbol("composite-hover");
function movingToAnotherItem(event) {
let dest = getMouseDestination(event);
if (!dest)
return false;
do {
if (hasOwnProperty(dest, symbol) && dest[symbol])
return true;
dest = dest.parentElement;
} while (dest);
return false;
}
var useCompositeHover = createHook(
(_a) => {
var _b = _a, {
store,
focusOnHover = true,
blurOnHoverEnd = !!focusOnHover
} = _b, props = __objRest(_b, [
"store",
"focusOnHover",
"blurOnHoverEnd"
]);
const context = useCompositeContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "CompositeHover must be wrapped in a Composite component."
);
const isMouseMoving = useIsMouseMoving();
const onMouseMoveProp = props.onMouseMove;
const focusOnHoverProp = useBooleanEvent(focusOnHover);
const onMouseMove = useEvent((event) => {
onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
if (event.defaultPrevented)
return;
if (!isMouseMoving())
return;
if (!focusOnHoverProp(event))
return;
if (!hasFocusWithin(event.currentTarget)) {
const baseElement = store == null ? void 0 : store.getState().baseElement;
if (baseElement && !hasFocus(baseElement)) {
baseElement.focus();
}
}
store == null ? void 0 : store.setActiveId(event.currentTarget.id);
});
const onMouseLeaveProp = props.onMouseLeave;
const blurOnHoverEndProp = useBooleanEvent(blurOnHoverEnd);
const onMouseLeave = useEvent((event) => {
var _a2;
onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
if (event.defaultPrevented)
return;
if (!isMouseMoving())
return;
if (hoveringInside(event))
return;
if (movingToAnotherItem(event))
return;
if (!focusOnHoverProp(event))
return;
if (!blurOnHoverEndProp(event))
return;
store == null ? void 0 : store.setActiveId(null);
(_a2 = store == null ? void 0 : store.getState().baseElement) == null ? void 0 : _a2.focus();
});
const ref = useCallback((element) => {
if (!element)
return;
element[symbol] = true;
}, []);
props = __spreadProps(__spreadValues({}, props), {
ref: useMergeRefs(ref, props.ref),
onMouseMove,
onMouseLeave
});
return props;
}
);
var CompositeHover = createMemoComponent(
(props) => {
const htmlProps = useCompositeHover(props);
return createElement("div", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
CompositeHover.displayName = "CompositeHover";
}
export {
useCompositeHover,
CompositeHover
};

View File

@@ -0,0 +1,51 @@
"use client";
import {
useDisclosure
} from "./BHEJ6NUH.js";
import {
useDialogProviderContext
} from "./G6BJYYBK.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
__objRest,
__spreadValues
} from "./4R3V3JGP.js";
// src/dialog/dialog-disclosure.ts
import { getPopupRole } from "@ariakit/core/utils/dom";
import { invariant } from "@ariakit/core/utils/misc";
var useDialogDisclosure = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const context = useDialogProviderContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "DialogDisclosure must receive a `store` prop or be wrapped in a DialogProvider component."
);
const contentElement = store.useState("contentElement");
props = __spreadValues({
"aria-haspopup": getPopupRole(contentElement, "dialog")
}, props);
props = useDisclosure(__spreadValues({ store }, props));
return props;
}
);
var DialogDisclosure = createComponent(
(props) => {
const htmlProps = useDialogDisclosure(props);
return createElement("button", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
DialogDisclosure.displayName = "DialogDisclosure";
}
export {
useDialogDisclosure,
DialogDisclosure
};

View File

@@ -0,0 +1,178 @@
"use client";
import {
MenuScopedContextProvider,
useMenuProviderContext
} from "./YGMEBI3A.js";
import {
useCompositeTypeahead
} from "./346FK57L.js";
import {
useComposite
} from "./7QTPYGNZ.js";
import {
isHidden
} from "./CLE7NTOY.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useStoreState
} from "./EKQEJRUF.js";
import {
useEvent,
useId,
useMergeRefs,
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/menu/menu-list.tsx
import { useEffect, useState } from "react";
import { invariant } from "@ariakit/core/utils/misc";
import { jsx } from "react/jsx-runtime";
function useAriaLabelledBy(_a) {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const [id, setId] = useState(void 0);
const label = props["aria-label"];
const disclosureElement = useStoreState(store, "disclosureElement");
const contentElement = useStoreState(store, "contentElement");
useEffect(() => {
const disclosure = disclosureElement;
if (!disclosure)
return;
const menu = contentElement;
if (!menu)
return;
const menuLabel = label || menu.hasAttribute("aria-label");
if (menuLabel) {
setId(void 0);
} else if (disclosure.id) {
setId(disclosure.id);
}
}, [label, disclosureElement, contentElement]);
return id;
}
var useMenuList = createHook(
(_a) => {
var _b = _a, { store, alwaysVisible, composite } = _b, props = __objRest(_b, ["store", "alwaysVisible", "composite"]);
const context = useMenuProviderContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "MenuList must receive a `store` prop or be wrapped in a MenuProvider component."
);
const parentMenu = store.parent;
const parentMenubar = store.menubar;
const hasParentMenu = !!parentMenu;
const id = useId(props.id);
const onKeyDownProp = props.onKeyDown;
const dir = store.useState(
(state) => state.placement.split("-")[0]
);
const orientation = store.useState(
(state) => state.orientation === "both" ? void 0 : state.orientation
);
const isHorizontal = orientation !== "vertical";
const isMenubarHorizontal = useStoreState(
parentMenubar,
(state) => !!state && state.orientation !== "vertical"
);
const onKeyDown = useEvent((event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
if (event.defaultPrevented)
return;
if (hasParentMenu || parentMenubar && !isHorizontal) {
const hideMap = {
ArrowRight: () => dir === "left" && !isHorizontal,
ArrowLeft: () => dir === "right" && !isHorizontal,
ArrowUp: () => dir === "bottom" && isHorizontal,
ArrowDown: () => dir === "top" && isHorizontal
};
const action = hideMap[event.key];
if (action == null ? void 0 : action()) {
event.stopPropagation();
event.preventDefault();
return store == null ? void 0 : store.hide();
}
}
if (parentMenubar) {
const keyMap = {
ArrowRight: () => {
if (!isMenubarHorizontal)
return;
return parentMenubar.next();
},
ArrowLeft: () => {
if (!isMenubarHorizontal)
return;
return parentMenubar.previous();
},
ArrowDown: () => {
if (isMenubarHorizontal)
return;
return parentMenubar.next();
},
ArrowUp: () => {
if (isMenubarHorizontal)
return;
return parentMenubar.previous();
}
};
const action = keyMap[event.key];
const id2 = action == null ? void 0 : action();
if (id2 !== void 0) {
event.stopPropagation();
event.preventDefault();
parentMenubar.move(id2);
}
}
});
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(MenuScopedContextProvider, { value: store, children: element }),
[store]
);
const ariaLabelledBy = useAriaLabelledBy(__spreadValues({ store }, props));
const mounted = store.useState("mounted");
const hidden = isHidden(mounted, props.hidden, alwaysVisible);
const style = hidden ? __spreadProps(__spreadValues({}, props.style), { display: "none" }) : props.style;
props = __spreadProps(__spreadValues({
id,
"aria-labelledby": ariaLabelledBy,
hidden
}, props), {
ref: useMergeRefs(id ? store.setContentElement : null, props.ref),
style,
onKeyDown
});
const hasCombobox = !!store.combobox;
composite = composite != null ? composite : !hasCombobox;
if (composite) {
props = __spreadValues({
role: "menu",
"aria-orientation": orientation
}, props);
}
props = useComposite(__spreadValues({ store, composite }, props));
props = useCompositeTypeahead(__spreadValues({ store, typeahead: !hasCombobox }, props));
return props;
}
);
var MenuList = createComponent((props) => {
const htmlProps = useMenuList(props);
return createElement("div", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
MenuList.displayName = "MenuList";
}
export {
useMenuList,
MenuList
};

View File

@@ -0,0 +1,43 @@
"use client";
import {
FocusableContext
} from "./SHA3WOPI.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest
} from "./4R3V3JGP.js";
// src/focusable/focusable-container.tsx
import { jsx } from "react/jsx-runtime";
var useFocusableContainer = createHook(
(_a) => {
var _b = _a, { autoFocusOnShow = true } = _b, props = __objRest(_b, ["autoFocusOnShow"]);
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(FocusableContext.Provider, { value: autoFocusOnShow, children: element }),
[autoFocusOnShow]
);
return props;
}
);
var FocusableContainer = createComponent(
(props) => {
const htmlProps = useFocusableContainer(props);
return createElement("div", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
FocusableContainer.displayName = "FocusableContainer";
}
export {
useFocusableContainer,
FocusableContainer
};

View File

@@ -0,0 +1,22 @@
"use client";
import {
useCompositeStoreProps
} from "./7GBW5FLS.js";
import {
useStore
} from "./EKQEJRUF.js";
// src/menubar/menubar-store.ts
import * as Core from "@ariakit/core/menubar/menubar-store";
function useMenubarStoreProps(store, update, props) {
return useCompositeStoreProps(store, update, props);
}
function useMenubarStore(props = {}) {
const [store, update] = useStore(Core.createMenubarStore, props);
return useMenubarStoreProps(store, update, props);
}
export {
useMenubarStoreProps,
useMenubarStore
};

View File

@@ -0,0 +1,86 @@
"use client";
import {
selectTextField
} from "./3IEDWLST.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useEvent
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/composite/composite-input.ts
import {
getDocument,
getTextboxSelection,
isTextField
} from "@ariakit/core/utils/dom";
function getValueLength(element) {
if (isTextField(element)) {
return element.value.length;
} else if (element.isContentEditable) {
const range = getDocument(element).createRange();
range.selectNodeContents(element);
return range.toString().length;
}
return 0;
}
var useCompositeInput = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const onKeyDownCaptureProp = props.onKeyDownCapture;
const onKeyDownCapture = useEvent(
(event) => {
onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
if (event.defaultPrevented)
return;
const element = event.currentTarget;
if (!element.isContentEditable && !isTextField(element))
return;
const selection = getTextboxSelection(element);
if (event.key === "ArrowRight" || event.key === "ArrowDown") {
if (selection.end !== getValueLength(element)) {
event.stopPropagation();
}
} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
if (selection.start !== 0) {
event.stopPropagation();
}
}
}
);
const onFocusProp = props.onFocus;
const onFocus = useEvent((event) => {
onFocusProp == null ? void 0 : onFocusProp(event);
if (event.defaultPrevented)
return;
selectTextField(event.currentTarget);
});
props = __spreadProps(__spreadValues({}, props), {
onKeyDownCapture,
onFocus
});
return props;
}
);
var CompositeInput = createComponent(
(props) => {
const htmlProps = useCompositeInput(props);
return createElement("input", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
CompositeInput.displayName = "CompositeInput";
}
export {
useCompositeInput,
CompositeInput
};

View File

@@ -0,0 +1,36 @@
"use client";
import {
CollectionContextProvider,
CollectionScopedContextProvider
} from "./4UUKJZ4V.js";
import {
createStoreContext
} from "./3ORBWXWF.js";
// src/composite/composite-context.tsx
import { createContext } from "react";
var ctx = createStoreContext(
[CollectionContextProvider],
[CollectionScopedContextProvider]
);
var useCompositeContext = ctx.useContext;
var useCompositeScopedContext = ctx.useScopedContext;
var useCompositeProviderContext = ctx.useProviderContext;
var CompositeContextProvider = ctx.ContextProvider;
var CompositeScopedContextProvider = ctx.ScopedContextProvider;
var CompositeItemContext = createContext(
void 0
);
var CompositeRowContext = createContext(
void 0
);
export {
useCompositeContext,
useCompositeScopedContext,
useCompositeProviderContext,
CompositeContextProvider,
CompositeScopedContextProvider,
CompositeItemContext,
CompositeRowContext
};

View File

@@ -0,0 +1,189 @@
"use client";
import {
selectTextField
} from "./3IEDWLST.js";
import {
useCompositeContext
} from "./IB7YUKH5.js";
import {
createElement,
createHook,
createMemoComponent
} from "./3ORBWXWF.js";
import {
useStoreState
} from "./EKQEJRUF.js";
import {
useEvent,
useMergeRefs
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/composite/composite-container.ts
import { useEffect, useRef } from "react";
import { isButton, isTextField } from "@ariakit/core/utils/dom";
import { isFocusEventOutside, isSelfTarget } from "@ariakit/core/utils/events";
import {
disableFocusIn,
getFirstTabbableIn,
restoreFocusIn
} from "@ariakit/core/utils/focus";
function getFirstTabbable(container) {
restoreFocusIn(container);
const tabbable = getFirstTabbableIn(container);
disableFocusIn(container);
return tabbable;
}
var useCompositeContainer = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const context = useCompositeContext();
store = store || context;
const ref = useRef(null);
const isOpenRef = useRef(false);
const open = (collapseToEnd = false) => {
const container = ref.current;
if (!container)
return;
restoreFocusIn(container);
const tabbable = getFirstTabbableIn(container);
if (!tabbable) {
disableFocusIn(container);
return;
}
isOpenRef.current = true;
queueMicrotask(() => {
tabbable.focus();
if (isTextField(tabbable) || tabbable.isContentEditable) {
selectTextField(tabbable, collapseToEnd);
}
});
};
const close = () => {
const container = ref.current;
if (!container)
return;
isOpenRef.current = false;
disableFocusIn(container);
};
const renderedItems = useStoreState(store, "renderedItems");
useEffect(() => {
const container = ref.current;
if (!container)
return;
const isOpen = isOpenRef.current;
if (!isOpen && (renderedItems == null ? void 0 : renderedItems.length)) {
disableFocusIn(container);
}
}, [renderedItems]);
const onFocusProp = props.onFocus;
const onFocus = useEvent((event) => {
onFocusProp == null ? void 0 : onFocusProp(event);
if (event.defaultPrevented)
return;
if (!store)
return;
const isOpen = isOpenRef.current;
if (isSelfTarget(event)) {
isOpenRef.current = false;
const { baseElement } = store.getState();
const composite = baseElement;
const selector = "[data-composite-container]";
const containers = composite == null ? void 0 : composite.querySelectorAll(selector);
containers == null ? void 0 : containers.forEach((container) => disableFocusIn(container));
} else if (!isOpen) {
isOpenRef.current = true;
restoreFocusIn(event.currentTarget);
store == null ? void 0 : store.setState("moves", 0);
}
});
const onBlurProp = props.onBlur;
const onBlur = useEvent((event) => {
onBlurProp == null ? void 0 : onBlurProp(event);
if (event.defaultPrevented)
return;
if (isFocusEventOutside(event)) {
close();
}
});
const onKeyDownProp = props.onKeyDown;
const onKeyDown = useEvent((event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
if (event.defaultPrevented)
return;
if (event.altKey)
return;
if (event.ctrlKey)
return;
if (event.metaKey)
return;
if (event.shiftKey)
return;
const container = event.currentTarget;
if (isSelfTarget(event)) {
if (event.key.length === 1 && event.key !== " ") {
const tabbable = getFirstTabbable(container);
if (!tabbable)
return;
if (isTextField(tabbable) || tabbable.isContentEditable) {
event.stopPropagation();
open();
}
} else if (event.key === "Delete" || event.key === "Backspace") {
const tabbable = getFirstTabbable(container);
if (!tabbable)
return;
if (isTextField(tabbable) || tabbable.isContentEditable) {
open();
const onInput = () => queueMicrotask(() => container.focus());
container.addEventListener("input", onInput, { once: true });
}
}
} else if (event.key === "Escape") {
queueMicrotask(() => container.focus());
} else if (event.key === "Enter") {
const target = event.target;
const isInput = target.tagName === "INPUT" && !isButton(target) || target.tagName === "TEXTAREA";
if (isInput || target.isContentEditable) {
event.preventDefault();
queueMicrotask(() => container.focus());
}
}
});
const onClickProp = props.onClick;
const onClick = useEvent((event) => {
onClickProp == null ? void 0 : onClickProp(event);
if (event.defaultPrevented)
return;
if (isSelfTarget(event) && !event.detail) {
open(true);
}
});
props = __spreadProps(__spreadValues({
"data-composite-container": ""
}, props), {
ref: useMergeRefs(ref, props.ref),
onFocus,
onBlur,
onKeyDown,
onClick
});
return props;
}
);
var CompositeContainer = createMemoComponent((props) => {
const htmlProps = useCompositeContainer(props);
return createElement("div", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
CompositeContainer.displayName = "CompositeContainer";
}
export {
useCompositeContainer,
CompositeContainer
};

View File

@@ -0,0 +1,386 @@
"use client";
import {
createDialogComponent,
useDialog
} from "./NERBASET.js";
import {
PopoverScopedContextProvider,
usePopoverProviderContext
} from "./7H5KSHHF.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useEvent,
usePortalRef,
useSafeLayoutEffect,
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/popover/popover.tsx
import { useState } from "react";
import { invariant } from "@ariakit/core/utils/misc";
import {
arrow,
autoUpdate,
computePosition,
flip,
limitShift,
offset,
shift,
size
} from "@floating-ui/dom";
import { jsx } from "react/jsx-runtime";
function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
if (typeof DOMRect === "function") {
return new DOMRect(x, y, width, height);
}
const rect = {
x,
y,
width,
height,
top: y,
right: x + width,
bottom: y + height,
left: x
};
return __spreadProps(__spreadValues({}, rect), { toJSON: () => rect });
}
function getDOMRect(anchorRect) {
if (!anchorRect)
return createDOMRect();
const { x, y, width, height } = anchorRect;
return createDOMRect(x, y, width, height);
}
function getAnchorElement(anchorElement, getAnchorRect) {
const contextElement = anchorElement || void 0;
return {
contextElement,
getBoundingClientRect: () => {
const anchor = anchorElement;
const anchorRect = getAnchorRect == null ? void 0 : getAnchorRect(anchor);
if (anchorRect || !anchor) {
return getDOMRect(anchorRect);
}
return anchor.getBoundingClientRect();
}
};
}
function isValidPlacement(flip2) {
return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(flip2);
}
function roundByDPR(value) {
const dpr = window.devicePixelRatio || 1;
return Math.round(value * dpr) / dpr;
}
function getOffsetMiddleware(arrowElement, props) {
return offset(({ placement }) => {
var _a;
const arrowOffset = ((arrowElement == null ? void 0 : arrowElement.clientHeight) || 0) / 2;
const finalGutter = typeof props.gutter === "number" ? props.gutter + arrowOffset : (_a = props.gutter) != null ? _a : arrowOffset;
const hasAlignment = !!placement.split("-")[1];
return {
crossAxis: !hasAlignment ? props.shift : void 0,
mainAxis: finalGutter,
alignmentAxis: props.shift
};
});
}
function getFlipMiddleware(props) {
if (props.flip === false)
return;
const fallbackPlacements = typeof props.flip === "string" ? props.flip.split(" ") : void 0;
invariant(
!fallbackPlacements || fallbackPlacements.every(isValidPlacement),
process.env.NODE_ENV !== "production" && "`flip` expects a spaced-delimited list of placements"
);
return flip({
padding: props.overflowPadding,
fallbackPlacements
});
}
function getShiftMiddleware(props) {
if (!props.slide && !props.overlap)
return;
return shift({
mainAxis: props.slide,
crossAxis: props.overlap,
padding: props.overflowPadding,
limiter: limitShift()
});
}
function getSizeMiddleware(props) {
return size({
padding: props.overflowPadding,
apply({ elements, availableWidth, availableHeight, rects }) {
const wrapper = elements.floating;
const referenceWidth = Math.round(rects.reference.width);
availableWidth = Math.floor(availableWidth);
availableHeight = Math.floor(availableHeight);
wrapper.style.setProperty(
"--popover-anchor-width",
`${referenceWidth}px`
);
wrapper.style.setProperty(
"--popover-available-width",
`${availableWidth}px`
);
wrapper.style.setProperty(
"--popover-available-height",
`${availableHeight}px`
);
if (props.sameWidth) {
wrapper.style.width = `${referenceWidth}px`;
}
if (props.fitViewport) {
wrapper.style.maxWidth = `${availableWidth}px`;
wrapper.style.maxHeight = `${availableHeight}px`;
}
}
});
}
function getArrowMiddleware(arrowElement, props) {
if (!arrowElement)
return;
return arrow({
element: arrowElement,
padding: props.arrowPadding
});
}
var usePopover = createHook(
(_a) => {
var _b = _a, {
store,
modal = false,
portal = !!modal,
preserveTabOrder = true,
autoFocusOnShow = true,
wrapperProps,
fixed = false,
flip: flip2 = true,
shift: shift2 = 0,
slide = true,
overlap = false,
sameWidth = false,
fitViewport = false,
gutter,
arrowPadding = 4,
overflowPadding = 8,
getAnchorRect,
updatePosition
} = _b, props = __objRest(_b, [
"store",
"modal",
"portal",
"preserveTabOrder",
"autoFocusOnShow",
"wrapperProps",
"fixed",
"flip",
"shift",
"slide",
"overlap",
"sameWidth",
"fitViewport",
"gutter",
"arrowPadding",
"overflowPadding",
"getAnchorRect",
"updatePosition"
]);
const context = usePopoverProviderContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "Popover must receive a `store` prop or be wrapped in a PopoverProvider component."
);
const arrowElement = store.useState("arrowElement");
const anchorElement = store.useState("anchorElement");
const disclosureElement = store.useState("disclosureElement");
const popoverElement = store.useState("popoverElement");
const contentElement = store.useState("contentElement");
const placement = store.useState("placement");
const mounted = store.useState("mounted");
const rendered = store.useState("rendered");
const [positioned, setPositioned] = useState(false);
const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
const getAnchorRectProp = useEvent(getAnchorRect);
const updatePositionProp = useEvent(updatePosition);
const hasCustomUpdatePosition = !!updatePosition;
useSafeLayoutEffect(() => {
if (!(popoverElement == null ? void 0 : popoverElement.isConnected))
return;
popoverElement.style.setProperty(
"--popover-overflow-padding",
`${overflowPadding}px`
);
const anchor = getAnchorElement(anchorElement, getAnchorRectProp);
const updatePosition2 = async () => {
if (!mounted)
return;
const middleware = [
getOffsetMiddleware(arrowElement, { gutter, shift: shift2 }),
getFlipMiddleware({ flip: flip2, overflowPadding }),
getShiftMiddleware({ slide, shift: shift2, overlap, overflowPadding }),
getArrowMiddleware(arrowElement, { arrowPadding }),
getSizeMiddleware({
sameWidth,
fitViewport,
overflowPadding
})
];
const pos = await computePosition(anchor, popoverElement, {
placement,
strategy: fixed ? "fixed" : "absolute",
middleware
});
store == null ? void 0 : store.setState("currentPlacement", pos.placement);
setPositioned(true);
const x = roundByDPR(pos.x);
const y = roundByDPR(pos.y);
Object.assign(popoverElement.style, {
top: "0",
left: "0",
transform: `translate3d(${x}px,${y}px,0)`
});
if (arrowElement && pos.middlewareData.arrow) {
const { x: arrowX, y: arrowY } = pos.middlewareData.arrow;
const dir = pos.placement.split("-")[0];
Object.assign(arrowElement.style, {
left: arrowX != null ? `${arrowX}px` : "",
top: arrowY != null ? `${arrowY}px` : "",
[dir]: "100%"
});
}
};
const update = async () => {
if (hasCustomUpdatePosition) {
await updatePositionProp({ updatePosition: updatePosition2 });
setPositioned(true);
} else {
await updatePosition2();
}
};
const cancelAutoUpdate = autoUpdate(anchor, popoverElement, update, {
// JSDOM doesn't support ResizeObserver
elementResize: typeof ResizeObserver === "function"
});
return () => {
setPositioned(false);
cancelAutoUpdate();
};
}, [
store,
rendered,
popoverElement,
arrowElement,
anchorElement,
popoverElement,
placement,
mounted,
domReady,
fixed,
flip2,
shift2,
slide,
overlap,
sameWidth,
fitViewport,
gutter,
arrowPadding,
overflowPadding,
getAnchorRectProp,
hasCustomUpdatePosition,
updatePositionProp
]);
useSafeLayoutEffect(() => {
if (!mounted)
return;
if (!domReady)
return;
if (!(popoverElement == null ? void 0 : popoverElement.isConnected))
return;
if (!(contentElement == null ? void 0 : contentElement.isConnected))
return;
const applyZIndex = () => {
popoverElement.style.zIndex = getComputedStyle(contentElement).zIndex;
};
applyZIndex();
let raf = requestAnimationFrame(() => {
raf = requestAnimationFrame(applyZIndex);
});
return () => cancelAnimationFrame(raf);
}, [mounted, domReady, popoverElement, contentElement]);
const position = fixed ? "fixed" : "absolute";
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(
"div",
__spreadProps(__spreadValues({
role: "presentation"
}, wrapperProps), {
style: __spreadValues({
// https://floating-ui.com/docs/computeposition#initial-layout
position,
top: 0,
left: 0,
width: "max-content"
}, wrapperProps == null ? void 0 : wrapperProps.style),
ref: store == null ? void 0 : store.setPopoverElement,
children: element
})
),
[store, position, wrapperProps]
);
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(PopoverScopedContextProvider, { value: store, children: element }),
[store]
);
props = __spreadProps(__spreadValues({
// data-placing is not part of the public API. We're setting this here so
// we can wait for the popover to be positioned before other components
// move focus into it. For example, this attribute is observed by the
// Combobox component with the autoSelect behavior.
"data-placing": !positioned ? "" : void 0
}, props), {
style: __spreadValues({
position: "relative"
}, props.style)
});
props = useDialog(__spreadProps(__spreadValues({
store,
modal,
portal,
preserveTabOrder,
preserveTabOrderAnchor: disclosureElement || anchorElement,
autoFocusOnShow: positioned && autoFocusOnShow
}, props), {
portalRef
}));
return props;
}
);
var Popover = createDialogComponent(
createComponent((props) => {
const htmlProps = usePopover(props);
return createElement("div", htmlProps);
}),
usePopoverProviderContext
);
if (process.env.NODE_ENV !== "production") {
Popover.displayName = "Popover";
}
export {
usePopover,
Popover
};

View File

@@ -0,0 +1,51 @@
"use client";
import {
useSafeLayoutEffect
} from "./6O5OEQGF.js";
// src/dialog/utils/use-nested-dialogs.tsx
import {
createContext,
useCallback,
useContext,
useMemo,
useState
} from "react";
import { chain } from "@ariakit/core/utils/misc";
import { sync } from "@ariakit/core/utils/store";
import { jsx } from "react/jsx-runtime";
var NestedDialogsContext = createContext({});
function useNestedDialogs(store) {
const context = useContext(NestedDialogsContext);
const [dialogs, setDialogs] = useState([]);
const add = useCallback(
(dialog) => {
var _a;
setDialogs((dialogs2) => [...dialogs2, dialog]);
return chain((_a = context.add) == null ? void 0 : _a.call(context, dialog), () => {
setDialogs((dialogs2) => dialogs2.filter((d) => d !== dialog));
});
},
[context]
);
useSafeLayoutEffect(() => {
return sync(store, ["open", "contentElement"], (state) => {
var _a;
if (!state.open)
return;
if (!state.contentElement)
return;
return (_a = context.add) == null ? void 0 : _a.call(context, store);
});
}, [store, context]);
const providerValue = useMemo(() => ({ store, add }), [store, add]);
const wrapElement = useCallback(
(element) => /* @__PURE__ */ jsx(NestedDialogsContext.Provider, { value: providerValue, children: element }),
[providerValue]
);
return { wrapElement, nestedDialogs: dialogs };
}
export {
useNestedDialogs
};

View File

@@ -0,0 +1,42 @@
"use client";
import {
usePopoverProviderContext
} from "./7H5KSHHF.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useMergeRefs
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/popover/popover-anchor.ts
var usePopoverAnchor = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const context = usePopoverProviderContext();
store = store || context;
props = __spreadProps(__spreadValues({}, props), {
ref: useMergeRefs(store == null ? void 0 : store.setAnchorElement, props.ref)
});
return props;
}
);
var PopoverAnchor = createComponent((props) => {
const htmlProps = usePopoverAnchor(props);
return createElement("div", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
PopoverAnchor.displayName = "PopoverAnchor";
}
export {
usePopoverAnchor,
PopoverAnchor
};

View File

@@ -0,0 +1,80 @@
"use client";
import {
usePopoverContext
} from "./7H5KSHHF.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/popover/popover-disclosure-arrow.tsx
import { useMemo } from "react";
import { invariant } from "@ariakit/core/utils/misc";
import { jsx } from "react/jsx-runtime";
var pointsMap = {
top: "4,10 8,6 12,10",
right: "6,4 10,8 6,12",
bottom: "4,6 8,10 12,6",
left: "10,4 6,8 10,12"
};
var usePopoverDisclosureArrow = createHook(
(_a) => {
var _b = _a, { store, placement } = _b, props = __objRest(_b, ["store", "placement"]);
const context = usePopoverContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "PopoverDisclosureArrow must be wrapped in a PopoverDisclosure component."
);
const position = store.useState((state) => placement || state.placement);
const dir = position.split("-")[0];
const points = pointsMap[dir];
const children = useMemo(
() => /* @__PURE__ */ jsx(
"svg",
{
display: "block",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5pt",
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
children: /* @__PURE__ */ jsx("polyline", { points })
}
),
[points]
);
props = __spreadProps(__spreadValues({
children,
"aria-hidden": true
}, props), {
style: __spreadValues({
width: "1em",
height: "1em",
pointerEvents: "none"
}, props.style)
});
return props;
}
);
var PopoverDisclosureArrow = createComponent((props) => {
const htmlProps = usePopoverDisclosureArrow(props);
return createElement("span", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
PopoverDisclosureArrow.displayName = "PopoverDisclosureArrow";
}
export {
usePopoverDisclosureArrow,
PopoverDisclosureArrow
};

View File

@@ -0,0 +1,25 @@
"use client";
import {
useStore,
useStoreProps
} from "./EKQEJRUF.js";
import {
useUpdateEffect
} from "./6O5OEQGF.js";
// src/checkbox/checkbox-store.ts
import * as Core from "@ariakit/core/checkbox/checkbox-store";
function useCheckboxStoreProps(store, update, props) {
useUpdateEffect(update, [props.store]);
useStoreProps(store, props, "value", "setValue");
return store;
}
function useCheckboxStore(props = {}) {
const [store, update] = useStore(Core.createCheckboxStore, props);
return useCheckboxStoreProps(store, update, props);
}
export {
useCheckboxStoreProps,
useCheckboxStore
};

View File

@@ -0,0 +1,155 @@
"use client";
import {
useRadioContext
} from "./XEV62JUQ.js";
import {
useCompositeItem
} from "./QZLXIDNP.js";
import {
createElement,
createHook,
createMemoComponent
} from "./3ORBWXWF.js";
import {
useStoreState
} from "./EKQEJRUF.js";
import {
useEvent,
useForceUpdate,
useId,
useMergeRefs,
useTagName
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/radio/radio.ts
import { useEffect, useRef } from "react";
import { disabledFromProps } from "@ariakit/core/utils/misc";
function getIsChecked(value, storeValue) {
if (storeValue === void 0)
return;
if (value != null && storeValue != null) {
return storeValue === value;
}
return !!storeValue;
}
function isNativeRadio(tagName, type) {
return tagName === "input" && (!type || type === "radio");
}
var useRadio = createHook(
(_a) => {
var _b = _a, { store, name, value, checked } = _b, props = __objRest(_b, ["store", "name", "value", "checked"]);
const context = useRadioContext();
store = store || context;
const id = useId(props.id);
const ref = useRef(null);
const isChecked = useStoreState(
store,
(state) => checked != null ? checked : getIsChecked(value, state == null ? void 0 : state.value)
);
useEffect(() => {
if (!id)
return;
if (!isChecked)
return;
const isActiveItem = (store == null ? void 0 : store.getState().activeId) === id;
if (isActiveItem)
return;
store == null ? void 0 : store.setActiveId(id);
}, [store, isChecked, id]);
const onChangeProp = props.onChange;
const tagName = useTagName(ref, props.as || "input");
const nativeRadio = isNativeRadio(tagName, props.type);
const disabled = disabledFromProps(props);
const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();
useEffect(() => {
const element = ref.current;
if (!element)
return;
if (nativeRadio)
return;
if (isChecked !== void 0) {
element.checked = isChecked;
}
if (name !== void 0) {
element.name = name;
}
if (value !== void 0) {
element.value = `${value}`;
}
}, [propertyUpdated, nativeRadio, isChecked, name, value]);
const onChange = useEvent((event) => {
if (disabled) {
event.preventDefault();
event.stopPropagation();
return;
}
if (!nativeRadio) {
event.currentTarget.checked = true;
schedulePropertyUpdate();
}
onChangeProp == null ? void 0 : onChangeProp(event);
if (event.defaultPrevented)
return;
store == null ? void 0 : store.setValue(value);
});
const onClickProp = props.onClick;
const onClick = useEvent((event) => {
onClickProp == null ? void 0 : onClickProp(event);
if (event.defaultPrevented)
return;
if (nativeRadio)
return;
onChange(event);
});
const onFocusProp = props.onFocus;
const onFocus = useEvent((event) => {
onFocusProp == null ? void 0 : onFocusProp(event);
if (event.defaultPrevented)
return;
if (!nativeRadio)
return;
if (!store)
return;
const { moves, activeId } = store.getState();
if (!moves)
return;
if (id && activeId !== id)
return;
onChange(event);
});
props = __spreadProps(__spreadValues({
id,
role: !nativeRadio ? "radio" : void 0,
type: nativeRadio ? "radio" : void 0,
"aria-checked": isChecked
}, props), {
ref: useMergeRefs(ref, props.ref),
onChange,
onClick,
onFocus
});
props = useCompositeItem(__spreadValues({ store, clickOnEnter: !nativeRadio }, props));
return __spreadValues({
name: nativeRadio ? name : void 0,
value: nativeRadio ? value : void 0,
checked: isChecked
}, props);
}
);
var Radio = createMemoComponent((props) => {
const htmlProps = useRadio(props);
return createElement("input", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
Radio.displayName = "Radio";
}
export {
useRadio,
Radio
};

View File

@@ -0,0 +1,285 @@
"use client";
import {
FocusTrap
} from "./CHKJ74UC.js";
import {
PortalContext
} from "./7452U3HH.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useMergeRefs,
useSafeLayoutEffect,
useWrapElement
} from "./6O5OEQGF.js";
import {
setRef
} from "./XM66DUTO.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/portal/portal.tsx
import { useContext, useEffect, useRef, useState } from "react";
import { getDocument } from "@ariakit/core/utils/dom";
import { isFocusEventOutside } from "@ariakit/core/utils/events";
import {
disableFocusIn,
getNextTabbable,
getPreviousTabbable,
restoreFocusIn
} from "@ariakit/core/utils/focus";
import { createPortal } from "react-dom";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function getRootElement(element) {
return getDocument(element).body;
}
function getPortalElement(element, portalElement) {
if (!portalElement) {
return getDocument(element).createElement("div");
}
if (typeof portalElement === "function") {
return portalElement(element);
}
return portalElement;
}
function getRandomId(prefix = "id") {
return `${prefix ? `${prefix}-` : ""}${Math.random().toString(36).substr(2, 6)}`;
}
function queueFocus(element) {
queueMicrotask(() => {
element == null ? void 0 : element.focus();
});
}
var usePortal = createHook(
(_a) => {
var _b = _a, {
preserveTabOrder,
preserveTabOrderAnchor,
portalElement,
portalRef,
portal = true
} = _b, props = __objRest(_b, [
"preserveTabOrder",
"preserveTabOrderAnchor",
"portalElement",
"portalRef",
"portal"
]);
const ref = useRef(null);
const refProp = useMergeRefs(ref, props.ref);
const context = useContext(PortalContext);
const [portalNode, setPortalNode] = useState(null);
const [anchorPortalNode, setAnchorPortalNode] = useState(null);
const outerBeforeRef = useRef(null);
const innerBeforeRef = useRef(null);
const innerAfterRef = useRef(null);
const outerAfterRef = useRef(null);
useSafeLayoutEffect(() => {
const element = ref.current;
if (!element || !portal) {
setPortalNode(null);
return;
}
const portalEl = getPortalElement(element, portalElement);
if (!portalEl) {
setPortalNode(null);
return;
}
const isPortalInDocument = portalEl.isConnected;
if (!isPortalInDocument) {
const rootElement = context || getRootElement(element);
rootElement.appendChild(portalEl);
}
if (!portalEl.id) {
portalEl.id = element.id ? `portal/${element.id}` : getRandomId();
}
setPortalNode(portalEl);
setRef(portalRef, portalEl);
if (isPortalInDocument)
return;
return () => {
portalEl.remove();
setRef(portalRef, null);
};
}, [portal, portalElement, context, portalRef]);
useSafeLayoutEffect(() => {
if (!preserveTabOrder)
return;
if (!preserveTabOrderAnchor)
return;
const doc = getDocument(preserveTabOrderAnchor);
const element = doc.createElement("span");
element.style.position = "fixed";
preserveTabOrderAnchor.insertAdjacentElement("afterend", element);
setAnchorPortalNode(element);
return () => {
element.remove();
setAnchorPortalNode(null);
};
}, [preserveTabOrder, preserveTabOrderAnchor]);
useEffect(() => {
if (!portalNode)
return;
if (!preserveTabOrder)
return;
let raf = 0;
const onFocus = (event) => {
if (!isFocusEventOutside(event))
return;
const focusing = event.type === "focusin";
cancelAnimationFrame(raf);
if (focusing) {
return restoreFocusIn(portalNode);
}
raf = requestAnimationFrame(() => {
disableFocusIn(portalNode, true);
});
};
portalNode.addEventListener("focusin", onFocus, true);
portalNode.addEventListener("focusout", onFocus, true);
return () => {
cancelAnimationFrame(raf);
portalNode.removeEventListener("focusin", onFocus, true);
portalNode.removeEventListener("focusout", onFocus, true);
};
}, [portalNode, preserveTabOrder]);
props = useWrapElement(
props,
(element) => {
element = // While the portal node is not in the DOM, we need to pass the
// current context to the portal context, otherwise it's going to
// reset to the body element on nested portals.
/* @__PURE__ */ jsx(PortalContext.Provider, { value: portalNode || context, children: element });
if (!portal)
return element;
if (!portalNode) {
return /* @__PURE__ */ jsx(
"span",
{
ref: refProp,
id: props.id,
style: { position: "fixed" },
hidden: true
}
);
}
element = /* @__PURE__ */ jsxs(Fragment, { children: [
preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
FocusTrap,
{
ref: innerBeforeRef,
className: "__focus-trap-inner-before",
onFocus: (event) => {
if (isFocusEventOutside(event, portalNode)) {
queueFocus(getNextTabbable());
} else {
queueFocus(outerBeforeRef.current);
}
}
}
),
element,
preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
FocusTrap,
{
ref: innerAfterRef,
className: "__focus-trap-inner-after",
onFocus: (event) => {
if (isFocusEventOutside(event, portalNode)) {
queueFocus(getPreviousTabbable());
} else {
queueFocus(outerAfterRef.current);
}
}
}
)
] });
if (portalNode) {
element = createPortal(element, portalNode);
}
let preserveTabOrderElement = /* @__PURE__ */ jsxs(Fragment, { children: [
preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
FocusTrap,
{
ref: outerBeforeRef,
className: "__focus-trap-outer-before",
onFocus: (event) => {
const fromOuter = event.relatedTarget === outerAfterRef.current;
if (!fromOuter && isFocusEventOutside(event, portalNode)) {
queueFocus(innerBeforeRef.current);
} else {
queueFocus(getPreviousTabbable());
}
}
}
),
preserveTabOrder && // We're using position: fixed here so that the browser doesn't
// add margin to the element when setting gap on a parent element.
/* @__PURE__ */ jsx("span", { "aria-owns": portalNode == null ? void 0 : portalNode.id, style: { position: "fixed" } }),
preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
FocusTrap,
{
ref: outerAfterRef,
className: "__focus-trap-outer-after",
onFocus: (event) => {
if (isFocusEventOutside(event, portalNode)) {
queueFocus(innerAfterRef.current);
} else {
const nextTabbable = getNextTabbable();
if (nextTabbable === innerBeforeRef.current) {
requestAnimationFrame(() => {
var _a2;
return (_a2 = getNextTabbable()) == null ? void 0 : _a2.focus();
});
return;
}
queueFocus(nextTabbable);
}
}
}
)
] });
if (anchorPortalNode && preserveTabOrder) {
preserveTabOrderElement = createPortal(
preserveTabOrderElement,
anchorPortalNode
);
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
preserveTabOrderElement,
element
] });
},
[
portalNode,
context,
portal,
props.id,
preserveTabOrder,
anchorPortalNode
]
);
props = __spreadProps(__spreadValues({}, props), {
ref: refProp
});
return props;
}
);
var Portal = createComponent((props) => {
const htmlProps = usePortal(props);
return createElement("div", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
Portal.displayName = "Portal";
}
export {
usePortal,
Portal
};

View File

@@ -0,0 +1,32 @@
"use client";
import {
CompositeContextProvider,
CompositeScopedContextProvider
} from "./IB7YUKH5.js";
import {
createStoreContext
} from "./3ORBWXWF.js";
// src/menubar/menubar-context.ts
import { createContext } from "react";
var menubar = createStoreContext(
[CompositeContextProvider],
[CompositeScopedContextProvider]
);
var useMenubarContext = menubar.useContext;
var useMenubarScopedContext = menubar.useScopedContext;
var useMenubarProviderContext = menubar.useProviderContext;
var MenubarContextProvider = menubar.ContextProvider;
var MenubarScopedContextProvider = menubar.ScopedContextProvider;
var MenuItemCheckedContext = createContext(
void 0
);
export {
useMenubarContext,
useMenubarScopedContext,
useMenubarProviderContext,
MenubarContextProvider,
MenubarScopedContextProvider,
MenuItemCheckedContext
};

View File

@@ -0,0 +1,374 @@
"use client";
import {
FocusableContext
} from "./SHA3WOPI.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useEvent,
useMergeRefs,
useTagName
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/focusable/focusable.ts
import { useContext, useEffect, useRef, useState } from "react";
import { isButton } from "@ariakit/core/utils/dom";
import {
addGlobalEventListener,
isFocusEventOutside,
isPortalEvent,
isSelfTarget,
queueBeforeEvent
} from "@ariakit/core/utils/events";
import {
focusIfNeeded,
hasFocus,
isFocusable
} from "@ariakit/core/utils/focus";
import { disabledFromProps } from "@ariakit/core/utils/misc";
import { isSafari } from "@ariakit/core/utils/platform";
var isSafariBrowser = isSafari();
var alwaysFocusVisibleInputTypes = [
"text",
"search",
"url",
"tel",
"email",
"password",
"number",
"date",
"month",
"week",
"time",
"datetime",
"datetime-local"
];
function isAlwaysFocusVisible(element) {
const { tagName, readOnly, type } = element;
if (tagName === "TEXTAREA" && !readOnly)
return true;
if (tagName === "SELECT" && !readOnly)
return true;
if (tagName === "INPUT" && !readOnly) {
return alwaysFocusVisibleInputTypes.includes(type);
}
if (element.isContentEditable)
return true;
return false;
}
function isAlwaysFocusVisibleDelayed(element) {
const role = element.getAttribute("role");
if (role !== "combobox")
return false;
return !!element.dataset.name;
}
function getLabels(element) {
if ("labels" in element) {
return element.labels;
}
return null;
}
function isNativeCheckboxOrRadio(element) {
const tagName = element.tagName.toLowerCase();
if (tagName === "input" && element.type) {
return element.type === "radio" || element.type === "checkbox";
}
return false;
}
function isNativeTabbable(tagName) {
if (!tagName)
return true;
return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "a";
}
function supportsDisabledAttribute(tagName) {
if (!tagName)
return true;
return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea";
}
function getTabIndex(focusable, trulyDisabled, nativeTabbable, supportsDisabled, tabIndexProp) {
if (!focusable) {
return tabIndexProp;
}
if (trulyDisabled) {
if (nativeTabbable && !supportsDisabled) {
return -1;
}
return;
}
if (nativeTabbable) {
return tabIndexProp;
}
return tabIndexProp || 0;
}
function useDisableEvent(onEvent, disabled) {
return useEvent((event) => {
onEvent == null ? void 0 : onEvent(event);
if (event.defaultPrevented)
return;
if (disabled) {
event.stopPropagation();
event.preventDefault();
}
});
}
var isKeyboardModality = true;
function onGlobalMouseDown(event) {
const target = event.target;
if (target && "hasAttribute" in target) {
if (!target.hasAttribute("data-focus-visible")) {
isKeyboardModality = false;
}
}
}
function onGlobalKeyDown(event) {
if (event.metaKey)
return;
if (event.ctrlKey)
return;
if (event.altKey)
return;
isKeyboardModality = true;
}
var useFocusable = createHook(
(_a) => {
var _b = _a, {
focusable = true,
accessibleWhenDisabled,
autoFocus,
onFocusVisible
} = _b, props = __objRest(_b, [
"focusable",
"accessibleWhenDisabled",
"autoFocus",
"onFocusVisible"
]);
const ref = useRef(null);
useEffect(() => {
if (!focusable)
return;
addGlobalEventListener("mousedown", onGlobalMouseDown, true);
addGlobalEventListener("keydown", onGlobalKeyDown, true);
}, [focusable]);
if (isSafariBrowser) {
useEffect(() => {
if (!focusable)
return;
const element = ref.current;
if (!element)
return;
if (!isNativeCheckboxOrRadio(element))
return;
const labels = getLabels(element);
if (!labels)
return;
const onMouseUp = () => queueMicrotask(() => element.focus());
labels.forEach((label) => label.addEventListener("mouseup", onMouseUp));
return () => {
labels.forEach(
(label) => label.removeEventListener("mouseup", onMouseUp)
);
};
}, [focusable]);
}
const disabled = focusable && disabledFromProps(props);
const trulyDisabled = !!disabled && !accessibleWhenDisabled;
const [focusVisible, setFocusVisible] = useState(false);
useEffect(() => {
if (!focusable)
return;
if (trulyDisabled && focusVisible) {
setFocusVisible(false);
}
}, [focusable, trulyDisabled, focusVisible]);
useEffect(() => {
if (!focusable)
return;
if (!focusVisible)
return;
const element = ref.current;
if (!element)
return;
if (typeof IntersectionObserver === "undefined")
return;
const observer = new IntersectionObserver(() => {
if (!isFocusable(element)) {
setFocusVisible(false);
}
});
observer.observe(element);
return () => observer.disconnect();
}, [focusable, focusVisible]);
const onKeyPressCapture = useDisableEvent(
props.onKeyPressCapture,
disabled
);
const onMouseDownCapture = useDisableEvent(
props.onMouseDownCapture,
disabled
);
const onClickCapture = useDisableEvent(props.onClickCapture, disabled);
const onMouseDownProp = props.onMouseDown;
const onMouseDown = useEvent((event) => {
onMouseDownProp == null ? void 0 : onMouseDownProp(event);
if (event.defaultPrevented)
return;
if (!focusable)
return;
const element = event.currentTarget;
if (!isSafariBrowser)
return;
if (isPortalEvent(event))
return;
if (!isButton(element) && !isNativeCheckboxOrRadio(element))
return;
let receivedFocus = false;
const onFocus = () => {
receivedFocus = true;
};
const options = { capture: true, once: true };
element.addEventListener("focusin", onFocus, options);
queueBeforeEvent(element, "mouseup", () => {
element.removeEventListener("focusin", onFocus, true);
if (receivedFocus)
return;
focusIfNeeded(element);
});
});
const handleFocusVisible = (event, currentTarget) => {
if (currentTarget) {
event.currentTarget = currentTarget;
}
if (!focusable)
return;
const element = event.currentTarget;
if (!element)
return;
if (!hasFocus(element))
return;
onFocusVisible == null ? void 0 : onFocusVisible(event);
if (event.defaultPrevented)
return;
setFocusVisible(true);
};
const onKeyDownCaptureProp = props.onKeyDownCapture;
const onKeyDownCapture = useEvent(
(event) => {
onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
if (event.defaultPrevented)
return;
if (!focusable)
return;
if (focusVisible)
return;
if (event.metaKey)
return;
if (event.altKey)
return;
if (event.ctrlKey)
return;
if (!isSelfTarget(event))
return;
const element = event.currentTarget;
queueMicrotask(() => handleFocusVisible(event, element));
}
);
const onFocusCaptureProp = props.onFocusCapture;
const onFocusCapture = useEvent((event) => {
onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event);
if (event.defaultPrevented)
return;
if (!focusable)
return;
if (!isSelfTarget(event)) {
setFocusVisible(false);
return;
}
const element = event.currentTarget;
const applyFocusVisible = () => handleFocusVisible(event, element);
if (isKeyboardModality || isAlwaysFocusVisible(event.target)) {
queueMicrotask(applyFocusVisible);
} else if (isAlwaysFocusVisibleDelayed(event.target)) {
queueBeforeEvent(event.target, "focusout", applyFocusVisible);
} else {
setFocusVisible(false);
}
});
const onBlurProp = props.onBlur;
const onBlur = useEvent((event) => {
onBlurProp == null ? void 0 : onBlurProp(event);
if (!focusable)
return;
if (!isFocusEventOutside(event))
return;
setFocusVisible(false);
});
const autoFocusOnShow = useContext(FocusableContext);
const autoFocusRef = useEvent((element) => {
if (!focusable)
return;
if (!autoFocus)
return;
if (!element)
return;
if (!autoFocusOnShow)
return;
queueMicrotask(() => {
if (hasFocus(element))
return;
if (!isFocusable(element))
return;
element.focus();
});
});
const tagName = useTagName(ref, props.as);
const nativeTabbable = focusable && isNativeTabbable(tagName);
const supportsDisabled = focusable && supportsDisabledAttribute(tagName);
const style = trulyDisabled ? __spreadValues({ pointerEvents: "none" }, props.style) : props.style;
props = __spreadProps(__spreadValues({
"data-focus-visible": focusable && focusVisible ? "" : void 0,
"data-autofocus": autoFocus ? true : void 0,
"aria-disabled": disabled ? true : void 0
}, props), {
ref: useMergeRefs(ref, autoFocusRef, props.ref),
style,
tabIndex: getTabIndex(
focusable,
trulyDisabled,
nativeTabbable,
supportsDisabled,
props.tabIndex
),
disabled: supportsDisabled && trulyDisabled ? true : void 0,
// TODO: Test Focusable contentEditable.
contentEditable: disabled ? void 0 : props.contentEditable,
onKeyPressCapture,
onClickCapture,
onMouseDownCapture,
onMouseDown,
onKeyDownCapture,
onFocusCapture,
onBlur
});
return props;
}
);
var Focusable = createComponent((props) => {
props = useFocusable(props);
return createElement("div", props);
});
if (process.env.NODE_ENV !== "production") {
Focusable.displayName = "Focusable";
}
export {
useFocusable,
Focusable
};

View File

@@ -0,0 +1,187 @@
"use client";
import {
getCollectionRendererItemId,
useCollectionRenderer
} from "./4HD64GHO.js";
import {
useCompositeContext
} from "./IB7YUKH5.js";
import {
createElement,
forwardRef
} from "./3ORBWXWF.js";
import {
useStoreState
} from "./EKQEJRUF.js";
import {
useId
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/composite/composite-renderer.tsx
import { useMemo } from "react";
function getItemObject(item) {
if (!item || typeof item !== "object") {
return { value: item };
}
return item;
}
function countItems(items) {
if (!items)
return [0];
if (typeof items === "number") {
return Array.from({ length: items }, (_, index) => index + 1);
}
return items.reduce((count, item, index) => {
var _a, _b;
const object = getItemObject(item);
if (!object.items) {
}
if (!object.items) {
count[index] = index + 1;
return count;
}
const prevCount = (_a = count[index - 1]) != null ? _a : 0;
const itemsCount = (_b = countItems(object.items)[object.items.length - 1]) != null ? _b : 0;
count[index] = prevCount + itemsCount;
return count;
}, []);
}
function findFirst(items, offset = 1) {
for (let index = offset > 0 ? 0 : items.length - 1; index >= 0 && index < items.length; index += offset) {
const item = items[index];
const object = getItemObject(item);
if (object.items && findFirst(object.items, offset) !== -1)
return index;
if (!object.disabled)
return index;
}
return -1;
}
function findLast(items) {
return findFirst(items, -1);
}
function findById(items, id, baseId) {
return items.findIndex((item, index) => {
var _a;
const itemId = getCollectionRendererItemId(item, index, baseId);
if (itemId === id)
return true;
const object = getItemObject(item);
if ((_a = object.items) == null ? void 0 : _a.length)
return findById(object.items, id, itemId) !== -1;
const ids = id.split("/");
if (ids.length === 1)
return false;
return ids.some((id2) => itemId === id2);
});
}
function useCompositeRenderer(_a) {
var _b = _a, {
store,
orientation: orientationProp,
persistentIndices: persistentIndicesProp,
children: renderItem,
"aria-setsize": ariaSetSize,
"aria-posinset": ariaPosInSet = 1
} = _b, props = __objRest(_b, [
"store",
"orientation",
"persistentIndices",
"children",
"aria-setsize",
"aria-posinset"
]);
const context = useCompositeContext();
store = store || context;
const orientation = useStoreState(
store,
(state) => (orientationProp != null ? orientationProp : (state == null ? void 0 : state.orientation) === "both") ? "vertical" : state == null ? void 0 : state.orientation
);
const items = useStoreState(store, (state) => {
var _a2;
if (!state)
return props.items;
if ("mounted" in state && !state.mounted)
return 0;
return (_a2 = props.items) != null ? _a2 : state.items;
});
const id = useId(props.id);
const itemsCount = useMemo(() => countItems(items), [items]);
const setSize = useMemo(
() => {
var _a2;
return (_a2 = ariaSetSize != null ? ariaSetSize : itemsCount[itemsCount.length - 1]) != null ? _a2 : 0;
},
[ariaSetSize, itemsCount]
);
const firstIndex = useMemo(() => {
if (!items)
return -1;
if (typeof items === "number")
return 0;
if (!items.length)
return -1;
return findFirst(items);
}, [items]);
const lastIndex = useMemo(() => {
if (!items)
return -1;
if (typeof items === "number")
return items - 1;
if (!items.length)
return -1;
return findLast(items);
}, [items]);
const activeId = useStoreState(store, "activeId");
const activeIndex = useMemo(() => {
if (!id)
return -1;
if (!items)
return -1;
if (activeId == null)
return -1;
if (typeof items === "number")
return -1;
if (!items.length)
return -1;
return findById(items, activeId, id);
}, [id, items, activeId]);
const persistentIndices = useMemo(() => {
const indices = [firstIndex, activeIndex, lastIndex].filter(
(index) => index >= 0
);
if (persistentIndicesProp) {
return [...persistentIndicesProp, ...indices];
}
return indices;
}, [firstIndex, activeIndex, lastIndex, persistentIndicesProp]);
return useCollectionRenderer(__spreadProps(__spreadValues({
id,
store,
orientation,
persistentIndices
}, props), {
children: (item) => {
var _a2;
const nextItem = __spreadProps(__spreadValues({}, item), {
"aria-setsize": setSize,
"aria-posinset": ariaPosInSet + ((_a2 = itemsCount[item.index - 1]) != null ? _a2 : 0)
});
return renderItem == null ? void 0 : renderItem(nextItem);
}
}));
}
var CompositeRenderer = forwardRef(function CompositeRenderer2(props) {
const htmlProps = useCompositeRenderer(props);
return createElement("div", htmlProps);
});
export {
useCompositeRenderer,
CompositeRenderer
};

View File

@@ -0,0 +1,25 @@
"use client";
import {
useCompositeStoreProps
} from "./7GBW5FLS.js";
import {
useStore,
useStoreProps
} from "./EKQEJRUF.js";
// src/radio/radio-store.ts
import * as Core from "@ariakit/core/radio/radio-store";
function useRadioStoreProps(store, update, props) {
store = useCompositeStoreProps(store, update, props);
useStoreProps(store, props, "value", "setValue");
return store;
}
function useRadioStore(props = {}) {
const [store, update] = useStore(Core.createRadioStore, props);
return useRadioStoreProps(store, update, props);
}
export {
useRadioStoreProps,
useRadioStore
};

View File

@@ -0,0 +1,83 @@
"use client";
import {
markAncestor
} from "./TL67WVI6.js";
import {
Role
} from "./FSFPRQFR.js";
import {
useDisclosureContent
} from "./CLE7NTOY.js";
import {
useDisclosureStore
} from "./SFCBA2JZ.js";
import {
useMergeRefs,
useSafeLayoutEffect
} from "./6O5OEQGF.js";
import {
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/dialog/dialog-backdrop.tsx
import { isValidElement, useRef } from "react";
import { jsx } from "react/jsx-runtime";
function DialogBackdrop({
store,
backdrop,
backdropProps,
alwaysVisible,
hidden
}) {
const ref = useRef(null);
const disclosure = useDisclosureStore({ disclosure: store });
const contentElement = store.useState("contentElement");
useSafeLayoutEffect(() => {
const backdrop2 = ref.current;
const dialog = contentElement;
if (!backdrop2)
return;
if (!dialog)
return;
backdrop2.style.zIndex = getComputedStyle(dialog).zIndex;
}, [contentElement]);
useSafeLayoutEffect(() => {
const id = contentElement == null ? void 0 : contentElement.id;
if (!id)
return;
const backdrop2 = ref.current;
if (!backdrop2)
return;
return markAncestor(backdrop2, id);
}, [contentElement]);
if (hidden != null) {
backdropProps = __spreadProps(__spreadValues({}, backdropProps), { hidden });
}
const props = useDisclosureContent(__spreadProps(__spreadValues({
store: disclosure,
role: "presentation",
"data-backdrop": (contentElement == null ? void 0 : contentElement.id) || "",
alwaysVisible
}, backdropProps), {
ref: useMergeRefs(backdropProps == null ? void 0 : backdropProps.ref, ref),
style: __spreadValues({
position: "fixed",
top: 0,
right: 0,
bottom: 0,
left: 0
}, backdropProps == null ? void 0 : backdropProps.style)
}));
if (!backdrop)
return null;
if (isValidElement(backdrop)) {
return /* @__PURE__ */ jsx(Role, __spreadProps(__spreadValues({}, props), { render: backdrop }));
}
const Component = typeof backdrop !== "boolean" ? backdrop : "div";
return /* @__PURE__ */ jsx(Role, __spreadProps(__spreadValues({}, props), { render: /* @__PURE__ */ jsx(Component, {}) }));
}
export {
DialogBackdrop
};

View File

@@ -0,0 +1,29 @@
"use client";
import {
useDialogStoreProps
} from "./ZSELSBRM.js";
import {
useStore,
useStoreProps
} from "./EKQEJRUF.js";
import {
useUpdateEffect
} from "./6O5OEQGF.js";
// src/popover/popover-store.ts
import * as Core from "@ariakit/core/popover/popover-store";
function usePopoverStoreProps(store, update, props) {
useUpdateEffect(update, [props.popover]);
store = useDialogStoreProps(store, update, props);
useStoreProps(store, props, "placement");
return store;
}
function usePopoverStore(props = {}) {
const [store, update] = useStore(Core.createPopoverStore, props);
return usePopoverStoreProps(store, update, props);
}
export {
usePopoverStoreProps,
usePopoverStore
};

View File

@@ -0,0 +1,21 @@
"use client";
// src/dialog/utils/is-backdrop.ts
function isBackdrop(element, ...ids) {
if (!element)
return false;
const backdrop = element.getAttribute("data-backdrop");
if (backdrop == null)
return false;
if (backdrop === "")
return true;
if (backdrop === "true")
return true;
if (!ids.length)
return true;
return ids.some((id) => backdrop === id);
}
export {
isBackdrop
};

View File

@@ -0,0 +1,27 @@
"use client";
import {
HovercardContextProvider,
HovercardScopedContextProvider
} from "./TI7CMBHW.js";
import {
createStoreContext
} from "./3ORBWXWF.js";
// src/tooltip/tooltip-context.tsx
var ctx = createStoreContext(
[HovercardContextProvider],
[HovercardScopedContextProvider]
);
var useTooltipContext = ctx.useContext;
var useTooltipScopedContext = ctx.useScopedContext;
var useTooltipProviderContext = ctx.useProviderContext;
var TooltipContextProvider = ctx.ContextProvider;
var TooltipScopedContextProvider = ctx.ScopedContextProvider;
export {
useTooltipContext,
useTooltipScopedContext,
useTooltipProviderContext,
TooltipContextProvider,
TooltipScopedContextProvider
};

View File

@@ -0,0 +1,73 @@
"use client";
import {
CheckboxCheckedContext
} from "./6XBVQI3K.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/checkbox/checkbox-check.tsx
import { useContext } from "react";
import { jsx } from "react/jsx-runtime";
var checkmark = /* @__PURE__ */ jsx(
"svg",
{
display: "block",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5pt",
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
children: /* @__PURE__ */ jsx("polyline", { points: "4,8 7,12 12,4" })
}
);
function getChildren(props) {
if (props.checked) {
return props.children || checkmark;
}
if (typeof props.children === "function") {
return props.children;
}
return null;
}
var useCheckboxCheck = createHook(
(_a) => {
var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
const context = useContext(CheckboxCheckedContext);
checked = checked != null ? checked : context;
const children = getChildren({ checked, children: props.children });
props = __spreadProps(__spreadValues({
"aria-hidden": true
}, props), {
children,
style: __spreadValues({
width: "1em",
height: "1em",
pointerEvents: "none"
}, props.style)
});
return props;
}
);
var CheckboxCheck = createComponent((props) => {
const htmlProps = useCheckboxCheck(props);
return createElement("span", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
CheckboxCheck.displayName = "CheckboxCheck";
}
export {
useCheckboxCheck,
CheckboxCheck
};

View File

@@ -0,0 +1,539 @@
"use client";
import {
DialogBackdrop
} from "./LWHPHW7Q.js";
import {
disableTree,
disableTreeOutside
} from "./TQYOGOE2.js";
import {
usePreventBodyScroll
} from "./6BJGLK2C.js";
import {
useNestedDialogs
} from "./IUB2BTEK.js";
import {
useHideOnInteractOutside
} from "./XHJGS6Z5.js";
import {
isElementMarked,
markTreeOutside
} from "./TL67WVI6.js";
import {
createWalkTreeSnapshot
} from "./72E5EPFF.js";
import {
prependHiddenDismiss
} from "./6GXEOXGT.js";
import {
useFocusableContainer
} from "./HPP6CWMY.js";
import {
HeadingLevel
} from "./UYRJLDVS.js";
import {
usePortal
} from "./JPXNJYSO.js";
import {
isHidden,
useDisclosureContent
} from "./CLE7NTOY.js";
import {
DialogDescriptionContext,
DialogHeadingContext,
DialogScopedContextProvider,
useDialogProviderContext
} from "./G6BJYYBK.js";
import {
useFocusable
} from "./KK7H3W2B.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useDialogStore
} from "./ZSELSBRM.js";
import {
useStoreState
} from "./EKQEJRUF.js";
import {
useBooleanEvent,
useEvent,
useId,
useMergeRefs,
usePortalRef,
useSafeLayoutEffect,
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/dialog/dialog.tsx
import { useCallback, useEffect, useRef, useState } from "react";
import {
closest,
contains,
getActiveElement,
getDocument,
isButton
} from "@ariakit/core/utils/dom";
import {
addGlobalEventListener,
queueBeforeEvent
} from "@ariakit/core/utils/events";
import {
focusIfNeeded,
getFirstTabbableIn,
isFocusable
} from "@ariakit/core/utils/focus";
import { chain } from "@ariakit/core/utils/misc";
import { isSafari } from "@ariakit/core/utils/platform";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var isSafariBrowser = isSafari();
function isAlreadyFocusingAnotherElement(dialog) {
const activeElement = getActiveElement();
if (!activeElement)
return false;
if (dialog && contains(dialog, activeElement))
return false;
if (isFocusable(activeElement))
return true;
return false;
}
function getElementFromProp(prop, focusable = false) {
if (!prop)
return null;
const element = "current" in prop ? prop.current : prop;
if (!element)
return null;
if (focusable)
return isFocusable(element) ? element : null;
return element;
}
var useDialog = createHook(
(_a) => {
var _b = _a, {
store: storeProp,
open: openProp,
onClose,
focusable = true,
modal = true,
portal = !!modal,
backdrop = !!modal,
backdropProps,
hideOnEscape = true,
hideOnInteractOutside = true,
getPersistentElements,
preventBodyScroll = !!modal,
autoFocusOnShow = true,
autoFocusOnHide = true,
initialFocus,
finalFocus,
unmountOnHide
} = _b, props = __objRest(_b, [
"store",
"open",
"onClose",
"focusable",
"modal",
"portal",
"backdrop",
"backdropProps",
"hideOnEscape",
"hideOnInteractOutside",
"getPersistentElements",
"preventBodyScroll",
"autoFocusOnShow",
"autoFocusOnHide",
"initialFocus",
"finalFocus",
"unmountOnHide"
]);
const context = useDialogProviderContext();
const ref = useRef(null);
const store = useDialogStore({
store: storeProp || context,
open: openProp,
setOpen(open2) {
if (open2)
return;
const dialog = ref.current;
if (!dialog)
return;
const event = new Event("close", { bubbles: false, cancelable: true });
if (onClose) {
dialog.addEventListener("close", onClose, { once: true });
}
dialog.dispatchEvent(event);
if (!event.defaultPrevented)
return;
store.setOpen(true);
}
});
const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
const preserveTabOrderProp = props.preserveTabOrder;
const preserveTabOrder = store.useState(
(state) => preserveTabOrderProp && !modal && state.mounted
);
const id = useId(props.id);
const open = store.useState("open");
const mounted = store.useState("mounted");
const contentElement = store.useState("contentElement");
const hidden = isHidden(mounted, props.hidden, props.alwaysVisible);
usePreventBodyScroll(contentElement, id, preventBodyScroll && !hidden);
useHideOnInteractOutside(store, hideOnInteractOutside, domReady);
const { wrapElement, nestedDialogs } = useNestedDialogs(store);
props = useWrapElement(props, wrapElement, [wrapElement]);
if (process.env.NODE_ENV !== "production") {
useEffect(() => {
if (!backdropProps)
return;
console.warn(
"The `backdropProps` prop is deprecated. Use the `backdrop` prop instead.",
"See https://ariakit.org/reference/dialog#backdrop"
);
}, [backdropProps]);
}
useSafeLayoutEffect(() => {
if (!open)
return;
const dialog = ref.current;
const activeElement = getActiveElement(dialog, true);
if (!activeElement)
return;
if (activeElement.tagName === "BODY")
return;
if (dialog && contains(dialog, activeElement))
return;
store.setDisclosureElement(activeElement);
}, [store, open]);
if (isSafariBrowser) {
useEffect(() => {
if (!mounted)
return;
const { disclosureElement } = store.getState();
if (!disclosureElement)
return;
if (!isButton(disclosureElement))
return;
const onMouseDown = () => {
let receivedFocus = false;
const onFocus = () => {
receivedFocus = true;
};
const options = { capture: true, once: true };
disclosureElement.addEventListener("focusin", onFocus, options);
queueBeforeEvent(disclosureElement, "mouseup", () => {
disclosureElement.removeEventListener("focusin", onFocus, true);
if (receivedFocus)
return;
focusIfNeeded(disclosureElement);
});
};
disclosureElement.addEventListener("mousedown", onMouseDown);
return () => {
disclosureElement.removeEventListener("mousedown", onMouseDown);
};
}, [store, mounted]);
}
useEffect(() => {
if (!modal)
return;
if (!mounted)
return;
if (!domReady)
return;
const dialog = ref.current;
if (!dialog)
return;
const existingDismiss = dialog.querySelector("[data-dialog-dismiss]");
if (existingDismiss)
return;
return prependHiddenDismiss(dialog, store.hide);
}, [store, modal, mounted, domReady]);
useSafeLayoutEffect(() => {
if (open)
return;
if (!mounted)
return;
if (!domReady)
return;
const dialog = ref.current;
if (!dialog)
return;
return disableTree(dialog);
}, [open, mounted, domReady]);
const canTakeTreeSnapshot = open && domReady;
useSafeLayoutEffect(() => {
if (!id)
return;
if (!canTakeTreeSnapshot)
return;
const dialog = ref.current;
return createWalkTreeSnapshot(id, [dialog]);
}, [id, canTakeTreeSnapshot]);
const getPersistentElementsProp = useEvent(getPersistentElements);
useSafeLayoutEffect(() => {
if (!id)
return;
if (!canTakeTreeSnapshot)
return;
const { disclosureElement } = store.getState();
const dialog = ref.current;
const persistentElements = getPersistentElementsProp() || [];
const allElements = [
dialog,
...persistentElements,
...nestedDialogs.map((dialog2) => dialog2.getState().contentElement)
];
if (modal) {
return chain(
markTreeOutside(id, allElements),
disableTreeOutside(id, allElements)
);
}
return markTreeOutside(id, [disclosureElement, ...allElements]);
}, [
id,
store,
canTakeTreeSnapshot,
getPersistentElementsProp,
nestedDialogs,
modal
]);
const mayAutoFocusOnShow = !!autoFocusOnShow;
const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow);
const [autoFocusEnabled, setAutoFocusEnabled] = useState(false);
useEffect(() => {
if (!open)
return;
if (!mayAutoFocusOnShow)
return;
if (!domReady)
return;
if (!(contentElement == null ? void 0 : contentElement.isConnected))
return;
const element = getElementFromProp(initialFocus, true) || // If no initial focus is specified, we try to focus the first element
// with the autofocus attribute. If it's an Ariakit component, the
// Focusable component will consume the autoFocus prop and add the
// data-autofocus attribute to the element instead.
contentElement.querySelector(
"[data-autofocus=true],[autofocus]"
) || // We have to fallback to the first focusable element otherwise portaled
// dialogs with preserveTabOrder set to true will not receive focus
// properly because the elements aren't tabbable until the dialog
// receives focus.
getFirstTabbableIn(contentElement, true, portal && preserveTabOrder) || // Finally, we fallback to the dialog element itself.
contentElement;
const isElementFocusable = isFocusable(element);
if (!autoFocusOnShowProp(isElementFocusable ? element : null))
return;
setAutoFocusEnabled(true);
queueMicrotask(() => {
element.focus();
if (!isSafariBrowser)
return;
element.scrollIntoView({ block: "nearest", inline: "nearest" });
});
}, [
open,
mayAutoFocusOnShow,
domReady,
contentElement,
initialFocus,
portal,
preserveTabOrder,
autoFocusOnShowProp
]);
const mayAutoFocusOnHide = !!autoFocusOnHide;
const autoFocusOnHideProp = useBooleanEvent(autoFocusOnHide);
const [hasOpened, setHasOpened] = useState(false);
useEffect(() => {
if (!open)
return;
setHasOpened(true);
return () => setHasOpened(false);
}, [open]);
const focusOnHide = useCallback(
(dialog, retry = true) => {
const { disclosureElement } = store.getState();
if (isAlreadyFocusingAnotherElement(dialog))
return;
let element = getElementFromProp(finalFocus) || disclosureElement;
if (element == null ? void 0 : element.id) {
const doc = getDocument(element);
const selector = `[aria-activedescendant="${element.id}"]`;
const composite = doc.querySelector(selector);
if (composite) {
element = composite;
}
}
if (element && !isFocusable(element)) {
const maybeParentDialog = closest(element, "[data-dialog]");
if (maybeParentDialog && maybeParentDialog.id) {
const doc = getDocument(maybeParentDialog);
const selector = `[aria-controls~="${maybeParentDialog.id}"]`;
const control = doc.querySelector(selector);
if (control) {
element = control;
}
}
}
const isElementFocusable = element && isFocusable(element);
if (!isElementFocusable && retry) {
requestAnimationFrame(() => focusOnHide(dialog, false));
return;
}
if (!autoFocusOnHideProp(isElementFocusable ? element : null))
return;
if (!isElementFocusable)
return;
element == null ? void 0 : element.focus();
},
[store, finalFocus, autoFocusOnHideProp]
);
useSafeLayoutEffect(() => {
if (open)
return;
if (!hasOpened)
return;
if (!mayAutoFocusOnHide)
return;
const dialog = ref.current;
focusOnHide(dialog);
}, [open, hasOpened, domReady, mayAutoFocusOnHide, focusOnHide]);
useEffect(() => {
if (!hasOpened)
return;
if (!mayAutoFocusOnHide)
return;
const dialog = ref.current;
return () => focusOnHide(dialog);
}, [hasOpened, mayAutoFocusOnHide, focusOnHide]);
const hideOnEscapeProp = useBooleanEvent(hideOnEscape);
useEffect(() => {
if (!domReady)
return;
if (!mounted)
return;
const onKeyDown = (event) => {
if (event.key !== "Escape")
return;
if (event.defaultPrevented)
return;
const dialog = ref.current;
if (!dialog)
return;
if (isElementMarked(dialog))
return;
const target = event.target;
if (!target)
return;
const { disclosureElement } = store.getState();
const isValidTarget = () => {
if (target.tagName === "BODY")
return true;
if (contains(dialog, target))
return true;
if (!disclosureElement)
return true;
if (contains(disclosureElement, target))
return true;
return false;
};
if (!isValidTarget())
return;
if (!hideOnEscapeProp(event))
return;
store.hide();
};
return addGlobalEventListener("keydown", onKeyDown, true);
}, [store, domReady, mounted, hideOnEscapeProp]);
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(HeadingLevel, { level: modal ? 1 : void 0, children: element }),
[modal]
);
const hiddenProp = props.hidden;
const alwaysVisible = props.alwaysVisible;
props = useWrapElement(
props,
(element) => {
if (!backdrop)
return element;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
DialogBackdrop,
{
store,
backdrop,
backdropProps,
hidden: hiddenProp,
alwaysVisible
}
),
element
] });
},
[store, backdrop, backdropProps, hiddenProp, alwaysVisible]
);
const [headingId, setHeadingId] = useState();
const [descriptionId, setDescriptionId] = useState();
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(DialogScopedContextProvider, { value: store, children: /* @__PURE__ */ jsx(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ jsx(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }),
[store]
);
props = __spreadProps(__spreadValues({
id,
"data-dialog": "",
role: "dialog",
tabIndex: focusable ? -1 : void 0,
"aria-labelledby": headingId,
"aria-describedby": descriptionId
}, props), {
ref: useMergeRefs(ref, props.ref)
});
props = useFocusableContainer(__spreadProps(__spreadValues({}, props), {
autoFocusOnShow: autoFocusEnabled
}));
props = useDisclosureContent(__spreadValues({ store }, props));
props = useFocusable(__spreadProps(__spreadValues({}, props), { focusable }));
props = usePortal(__spreadProps(__spreadValues({ portal }, props), { portalRef, preserveTabOrder }));
return props;
}
);
function createDialogComponent(Component, useProviderContext = useDialogProviderContext) {
return createComponent((props) => {
const context = useProviderContext();
const store = props.store || context;
const mounted = useStoreState(
store,
(state) => !props.unmountOnHide || (state == null ? void 0 : state.mounted) || !!props.open
);
if (!mounted)
return null;
return /* @__PURE__ */ jsx(Component, __spreadValues({}, props));
});
}
var Dialog = createDialogComponent(
createComponent((props) => {
const htmlProps = useDialog(props);
return createElement("div", htmlProps);
}),
useDialogProviderContext
);
if (process.env.NODE_ENV !== "production") {
Dialog.displayName = "Dialog";
}
export {
useDialog,
createDialogComponent,
Dialog
};

View File

@@ -0,0 +1,80 @@
"use client";
import {
useButton
} from "./VDNZBO4W.js";
import {
useDialogScopedContext
} from "./G6BJYYBK.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useEvent
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/dialog/dialog-dismiss.tsx
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var useDialogDismiss = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const context = useDialogScopedContext();
store = store || context;
const onClickProp = props.onClick;
const onClick = useEvent((event) => {
onClickProp == null ? void 0 : onClickProp(event);
if (event.defaultPrevented)
return;
store == null ? void 0 : store.hide();
});
const children = useMemo(
() => /* @__PURE__ */ jsxs(
"svg",
{
"aria-label": "Dismiss popup",
display: "block",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5pt",
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
children: [
/* @__PURE__ */ jsx("line", { x1: "4", y1: "4", x2: "12", y2: "12" }),
/* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "12", y2: "4" })
]
}
),
[]
);
props = __spreadProps(__spreadValues({
"data-dialog-dismiss": "",
children
}, props), {
onClick
});
props = useButton(props);
return props;
}
);
var DialogDismiss = createComponent((props) => {
const htmlProps = useDialogDismiss(props);
return createElement("button", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
DialogDismiss.displayName = "DialogDismiss";
}
export {
useDialogDismiss,
DialogDismiss
};

View File

@@ -0,0 +1,44 @@
"use client";
import {
GroupLabelContext
} from "./3X3MDQGM.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useId,
useSafeLayoutEffect
} from "./6O5OEQGF.js";
import {
__spreadValues
} from "./4R3V3JGP.js";
// src/group/group-label.ts
import { useContext } from "react";
var useGroupLabel = createHook((props) => {
const setLabelId = useContext(GroupLabelContext);
const id = useId(props.id);
useSafeLayoutEffect(() => {
setLabelId == null ? void 0 : setLabelId(id);
return () => setLabelId == null ? void 0 : setLabelId(void 0);
}, [setLabelId, id]);
props = __spreadValues({
id,
"aria-hidden": true
}, props);
return props;
});
var GroupLabel = createComponent((props) => {
const htmlProps = useGroupLabel(props);
return createElement("div", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
GroupLabel.displayName = "GroupLabel";
}
export {
useGroupLabel,
GroupLabel
};

View File

@@ -0,0 +1,39 @@
"use client";
import {
usePopoverDisclosureArrow
} from "./JHO32H4J.js";
import {
useSelectContext
} from "./5HVNGX6D.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
__objRest,
__spreadValues
} from "./4R3V3JGP.js";
// src/select/select-arrow.ts
var useSelectArrow = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
const context = useSelectContext();
store = store || context;
props = usePopoverDisclosureArrow(__spreadValues({ store }, props));
return props;
}
);
var SelectArrow = createComponent((props) => {
const htmlProps = useSelectArrow(props);
return createElement("span", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
SelectArrow.displayName = "SelectArrow";
}
export {
useSelectArrow,
SelectArrow
};

View File

@@ -0,0 +1,155 @@
"use client";
import {
useFocusable
} from "./KK7H3W2B.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useEvent,
useMergeRefs,
useMetadataProps,
useTagName
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/command/command.ts
import { useEffect, useRef, useState } from "react";
import { isButton, isTextField } from "@ariakit/core/utils/dom";
import {
fireClickEvent,
isSelfTarget,
queueBeforeEvent
} from "@ariakit/core/utils/events";
import { disabledFromProps } from "@ariakit/core/utils/misc";
import { isFirefox } from "@ariakit/core/utils/platform";
function isNativeClick(event) {
if (!event.isTrusted)
return false;
const element = event.currentTarget;
if (event.key === "Enter") {
return isButton(element) || element.tagName === "SUMMARY" || element.tagName === "A";
}
if (event.key === " ") {
return isButton(element) || element.tagName === "SUMMARY" || element.tagName === "INPUT" || element.tagName === "SELECT";
}
return false;
}
var symbol = Symbol("command");
var useCommand = createHook(
(_a) => {
var _b = _a, { clickOnEnter = true, clickOnSpace = true } = _b, props = __objRest(_b, ["clickOnEnter", "clickOnSpace"]);
const ref = useRef(null);
const tagName = useTagName(ref, props.as);
const type = props.type;
const [isNativeButton, setIsNativeButton] = useState(
() => !!tagName && isButton({ tagName, type })
);
useEffect(() => {
if (!ref.current)
return;
setIsNativeButton(isButton(ref.current));
}, []);
const [active, setActive] = useState(false);
const activeRef = useRef(false);
const disabled = disabledFromProps(props);
const [isDuplicate, metadataProps] = useMetadataProps(props, symbol, true);
const onKeyDownProp = props.onKeyDown;
const onKeyDown = useEvent((event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
const element = event.currentTarget;
if (event.defaultPrevented)
return;
if (isDuplicate)
return;
if (disabled)
return;
if (!isSelfTarget(event))
return;
if (isTextField(element))
return;
if (element.isContentEditable)
return;
const isEnter = clickOnEnter && event.key === "Enter";
const isSpace = clickOnSpace && event.key === " ";
const shouldPreventEnter = event.key === "Enter" && !clickOnEnter;
const shouldPreventSpace = event.key === " " && !clickOnSpace;
if (shouldPreventEnter || shouldPreventSpace) {
event.preventDefault();
return;
}
if (isEnter || isSpace) {
const nativeClick = isNativeClick(event);
if (isEnter) {
if (!nativeClick) {
event.preventDefault();
const _a2 = event, { view } = _a2, eventInit = __objRest(_a2, ["view"]);
const click = () => fireClickEvent(element, eventInit);
if (isFirefox()) {
queueBeforeEvent(element, "keyup", click);
} else {
queueMicrotask(click);
}
}
} else if (isSpace) {
activeRef.current = true;
if (!nativeClick) {
event.preventDefault();
setActive(true);
}
}
}
});
const onKeyUpProp = props.onKeyUp;
const onKeyUp = useEvent((event) => {
onKeyUpProp == null ? void 0 : onKeyUpProp(event);
if (event.defaultPrevented)
return;
if (isDuplicate)
return;
if (disabled)
return;
if (event.metaKey)
return;
const isSpace = clickOnSpace && event.key === " ";
if (activeRef.current && isSpace) {
activeRef.current = false;
if (!isNativeClick(event)) {
event.preventDefault();
setActive(false);
const element = event.currentTarget;
const _a2 = event, { view } = _a2, eventInit = __objRest(_a2, ["view"]);
queueMicrotask(() => fireClickEvent(element, eventInit));
}
}
});
props = __spreadProps(__spreadValues(__spreadValues({
"data-active": active ? "" : void 0,
type: isNativeButton ? "button" : void 0
}, metadataProps), props), {
ref: useMergeRefs(ref, props.ref),
onKeyDown,
onKeyUp
});
props = useFocusable(props);
return props;
}
);
var Command = createComponent((props) => {
props = useCommand(props);
return createElement("button", props);
});
if (process.env.NODE_ENV !== "production") {
Command.displayName = "Command";
}
export {
useCommand,
Command
};

View File

@@ -0,0 +1,20 @@
"use client";
import {
createStoreContext
} from "./3ORBWXWF.js";
// src/disclosure/disclosure-context.tsx
var ctx = createStoreContext();
var useDisclosureContext = ctx.useContext;
var useDisclosureScopedContext = ctx.useScopedContext;
var useDisclosureProviderContext = ctx.useProviderContext;
var DisclosureContextProvider = ctx.ContextProvider;
var DisclosureScopedContextProvider = ctx.ScopedContextProvider;
export {
useDisclosureContext,
useDisclosureScopedContext,
useDisclosureProviderContext,
DisclosureContextProvider,
DisclosureScopedContextProvider
};

View File

@@ -0,0 +1,23 @@
"use client";
// src/dialog/utils/use-previous-mouse-down-ref.ts
import { useEffect, useRef } from "react";
import { addGlobalEventListener } from "@ariakit/core/utils/events";
function usePreviousMouseDownRef(enabled) {
const previousMouseDownRef = useRef();
useEffect(() => {
if (!enabled) {
previousMouseDownRef.current = null;
return;
}
const onMouseDown = (event) => {
previousMouseDownRef.current = event.target;
};
return addGlobalEventListener("mousedown", onMouseDown, true);
}, [enabled]);
return previousMouseDownRef;
}
export {
usePreviousMouseDownRef
};

View File

@@ -0,0 +1,51 @@
"use client";
import {
HeadingContext
} from "./XPF5GU3Q.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useMergeRefs,
useTagName
} from "./6O5OEQGF.js";
import {
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/heading/heading.tsx
import { useContext, useMemo, useRef } from "react";
import { jsx } from "react/jsx-runtime";
var useHeading = createHook((props) => {
const ref = useRef(null);
const level = useContext(HeadingContext) || 1;
const Element = `h${level}`;
const tagName = useTagName(ref, Element);
const isNativeHeading = useMemo(
() => !!tagName && /^h\d$/.test(tagName),
[tagName]
);
props = __spreadProps(__spreadValues({
render: /* @__PURE__ */ jsx(Element, {}),
role: !isNativeHeading ? "heading" : void 0,
"aria-level": !isNativeHeading ? level : void 0
}, props), {
ref: useMergeRefs(ref, props.ref)
});
return props;
});
var Heading = createComponent((props) => {
const htmlProps = useHeading(props);
return createElement("h1", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
Heading.displayName = "Heading";
}
export {
useHeading,
Heading
};

View File

@@ -0,0 +1,33 @@
"use client";
import {
useGroup
} from "./R2QZ3KXH.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
__objRest
} from "./4R3V3JGP.js";
// src/form/form-group.ts
var useFormGroup = createHook(
(_a) => {
var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
props = useGroup(props);
return props;
}
);
var FormGroup = createComponent((props) => {
const htmlProps = useFormGroup(props);
return createElement("div", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
FormGroup.displayName = "FormGroup";
}
export {
useFormGroup,
FormGroup
};

View File

@@ -0,0 +1,8 @@
"use client";
// src/popover/popover-arrow-path.ts
var POPOVER_ARROW_PATH = "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z";
export {
POPOVER_ARROW_PATH
};

View File

@@ -0,0 +1,321 @@
"use client";
import {
getElementPolygon,
getEventPoint,
isPointInPolygon
} from "./YMV43K4F.js";
import {
usePopover
} from "./IRX7SFUJ.js";
import {
createDialogComponent
} from "./NERBASET.js";
import {
HovercardScopedContextProvider,
useHovercardProviderContext
} from "./TI7CMBHW.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useBooleanEvent,
useEvent,
useLiveRef,
useMergeRefs,
usePortalRef,
useSafeLayoutEffect,
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/hovercard/hovercard.tsx
import {
createContext,
useCallback,
useContext,
useEffect,
useRef,
useState
} from "react";
import { contains } from "@ariakit/core/utils/dom";
import { addGlobalEventListener } from "@ariakit/core/utils/events";
import { hasFocusWithin } from "@ariakit/core/utils/focus";
import {
chain,
invariant,
isFalsyBooleanCallback
} from "@ariakit/core/utils/misc";
import { sync } from "@ariakit/core/utils/store";
import { jsx } from "react/jsx-runtime";
function isMovingOnHovercard(target, card, anchor, nested) {
if (hasFocusWithin(card))
return true;
if (!target)
return false;
if (contains(card, target))
return true;
if (anchor && contains(anchor, target))
return true;
if (nested == null ? void 0 : nested.some((card2) => isMovingOnHovercard(target, card2, anchor))) {
return true;
}
return false;
}
function useAutoFocusOnHide(_a) {
var _b = _a, {
store
} = _b, props = __objRest(_b, [
"store"
]);
const [autoFocusOnHide, setAutoFocusOnHide] = useState(false);
const mounted = store.useState("mounted");
useEffect(() => {
if (!mounted) {
setAutoFocusOnHide(false);
}
}, [mounted]);
const onFocusProp = props.onFocus;
const onFocus = useEvent((event) => {
onFocusProp == null ? void 0 : onFocusProp(event);
if (event.defaultPrevented)
return;
setAutoFocusOnHide(true);
});
const finalFocusRef = useRef(null);
useEffect(() => {
return sync(store, ["anchorElement"], (state) => {
finalFocusRef.current = state.anchorElement;
});
}, []);
props = __spreadProps(__spreadValues({
autoFocusOnHide,
finalFocus: finalFocusRef
}, props), {
onFocus
});
return props;
}
var NestedHovercardContext = createContext(null);
var useHovercard = createHook(
(_a) => {
var _b = _a, {
store,
modal = false,
portal = !!modal,
hideOnEscape = true,
hideOnHoverOutside = true,
disablePointerEventsOnApproach = !!hideOnHoverOutside
} = _b, props = __objRest(_b, [
"store",
"modal",
"portal",
"hideOnEscape",
"hideOnHoverOutside",
"disablePointerEventsOnApproach"
]);
const context = useHovercardProviderContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "Hovercard must receive a `store` prop or be wrapped in a HovercardProvider component."
);
const ref = useRef(null);
const [nestedHovercards, setNestedHovercards] = useState([]);
const hideTimeoutRef = useRef(0);
const enterPointRef = useRef(null);
const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
const mayHideOnHoverOutside = !!hideOnHoverOutside;
const hideOnHoverOutsideProp = useBooleanEvent(hideOnHoverOutside);
const mayDisablePointerEvents = !!disablePointerEventsOnApproach;
const disablePointerEventsProp = useBooleanEvent(
disablePointerEventsOnApproach
);
const open = store.useState("open");
const mounted = store.useState("mounted");
useEffect(() => {
if (!domReady)
return;
if (!mounted)
return;
if (!mayHideOnHoverOutside && !mayDisablePointerEvents)
return;
const element = ref.current;
if (!element)
return;
const onMouseMove = (event) => {
if (!store)
return;
const { anchorElement, hideTimeout, timeout } = store.getState();
const enterPoint = enterPointRef.current;
const [target] = event.composedPath();
const anchor = anchorElement;
if (isMovingOnHovercard(target, element, anchor, nestedHovercards)) {
enterPointRef.current = target && anchor && contains(anchor, target) ? getEventPoint(event) : null;
window.clearTimeout(hideTimeoutRef.current);
hideTimeoutRef.current = 0;
return;
}
if (hideTimeoutRef.current)
return;
if (enterPoint) {
const currentPoint = getEventPoint(event);
const polygon = getElementPolygon(element, enterPoint);
if (isPointInPolygon(currentPoint, polygon)) {
enterPointRef.current = currentPoint;
if (!disablePointerEventsProp(event))
return;
event.preventDefault();
event.stopPropagation();
return;
}
}
if (!hideOnHoverOutsideProp(event))
return;
hideTimeoutRef.current = window.setTimeout(() => {
hideTimeoutRef.current = 0;
store == null ? void 0 : store.hide();
}, hideTimeout != null ? hideTimeout : timeout);
};
return chain(
addGlobalEventListener("mousemove", onMouseMove, true),
() => clearTimeout(hideTimeoutRef.current)
);
}, [
store,
domReady,
mounted,
mayHideOnHoverOutside,
mayDisablePointerEvents,
nestedHovercards,
disablePointerEventsProp,
hideOnHoverOutsideProp
]);
useEffect(() => {
if (!domReady)
return;
if (!mounted)
return;
if (!mayDisablePointerEvents)
return;
const disableEvent = (event) => {
const element = ref.current;
if (!element)
return;
const enterPoint = enterPointRef.current;
if (!enterPoint)
return;
const polygon = getElementPolygon(element, enterPoint);
if (isPointInPolygon(getEventPoint(event), polygon)) {
if (!disablePointerEventsProp(event))
return;
event.preventDefault();
event.stopPropagation();
}
};
return chain(
// Note: we may need to add pointer events here in the future.
addGlobalEventListener("mouseenter", disableEvent, true),
addGlobalEventListener("mouseover", disableEvent, true),
addGlobalEventListener("mouseout", disableEvent, true),
addGlobalEventListener("mouseleave", disableEvent, true)
);
}, [domReady, mounted, mayDisablePointerEvents, disablePointerEventsProp]);
useEffect(() => {
if (!domReady)
return;
if (open)
return;
store == null ? void 0 : store.setAutoFocusOnShow(false);
}, [store, domReady, open]);
const openRef = useLiveRef(open);
useEffect(() => {
if (!domReady)
return;
return () => {
if (!openRef.current) {
store == null ? void 0 : store.setAutoFocusOnShow(false);
}
};
}, [store, domReady]);
const registerOnParent = useContext(NestedHovercardContext);
useSafeLayoutEffect(() => {
if (modal)
return;
if (!portal)
return;
if (!mounted)
return;
if (!domReady)
return;
const element = ref.current;
if (!element)
return;
return registerOnParent == null ? void 0 : registerOnParent(element);
}, [modal, portal, mounted, domReady]);
const registerNestedHovercard = useCallback(
(element) => {
setNestedHovercards((prevElements) => [...prevElements, element]);
const parentUnregister = registerOnParent == null ? void 0 : registerOnParent(element);
return () => {
setNestedHovercards(
(prevElements) => prevElements.filter((item) => item !== element)
);
parentUnregister == null ? void 0 : parentUnregister();
};
},
[registerOnParent]
);
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(HovercardScopedContextProvider, { value: store, children: /* @__PURE__ */ jsx(NestedHovercardContext.Provider, { value: registerNestedHovercard, children: element }) }),
[store, registerNestedHovercard]
);
props = __spreadProps(__spreadValues({}, props), {
ref: useMergeRefs(ref, props.ref)
});
props = useAutoFocusOnHide(__spreadValues({ store }, props));
const autoFocusOnShow = store.useState(
(state) => modal || state.autoFocusOnShow
);
props = usePopover(__spreadProps(__spreadValues({
store,
modal,
portal,
autoFocusOnShow
}, props), {
portalRef,
hideOnEscape(event) {
if (isFalsyBooleanCallback(hideOnEscape, event))
return false;
requestAnimationFrame(() => {
requestAnimationFrame(() => {
store == null ? void 0 : store.hide();
});
});
return true;
}
}));
return props;
}
);
var Hovercard = createDialogComponent(
createComponent((props) => {
const htmlProps = useHovercard(props);
return createElement("div", htmlProps);
}),
useHovercardProviderContext
);
if (process.env.NODE_ENV !== "production") {
Hovercard.displayName = "Hovercard";
}
export {
useHovercard,
Hovercard
};

View File

@@ -0,0 +1,410 @@
"use client";
import {
useCommand
} from "./NWCBQ4CV.js";
import {
useCollectionItem
} from "./UH3I23HL.js";
import {
focusSilently,
getEnabledItem,
isItem
} from "./3IEDWLST.js";
import {
CompositeItemContext,
CompositeRowContext,
useCompositeContext
} from "./IB7YUKH5.js";
import {
createElement,
createHook,
createMemoComponent
} from "./3ORBWXWF.js";
import {
useStoreState
} from "./EKQEJRUF.js";
import {
useBooleanEvent,
useEvent,
useId,
useMergeRefs,
useSafeLayoutEffect,
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/composite/composite-item.tsx
import { useCallback, useContext, useMemo, useRef, useState } from "react";
import {
getScrollingElement,
isButton,
isTextField
} from "@ariakit/core/utils/dom";
import { isPortalEvent, isSelfTarget } from "@ariakit/core/utils/events";
import { disabledFromProps } from "@ariakit/core/utils/misc";
import { jsx } from "react/jsx-runtime";
function isEditableElement(element) {
if (element.isContentEditable)
return true;
if (isTextField(element))
return true;
return element.tagName === "INPUT" && !isButton(element);
}
function getNextPageOffset(scrollingElement, pageUp = false) {
const height = scrollingElement.clientHeight;
const { top } = scrollingElement.getBoundingClientRect();
const pageSize = Math.max(height * 0.875, height - 40) * 1.5;
const pageOffset = pageUp ? height - pageSize + top : pageSize + top;
if (scrollingElement.tagName === "HTML") {
return pageOffset + scrollingElement.scrollTop;
}
return pageOffset;
}
function getItemOffset(itemElement, pageUp = false) {
const { top } = itemElement.getBoundingClientRect();
if (pageUp) {
return top + itemElement.clientHeight;
}
return top;
}
function findNextPageItemId(element, store, next, pageUp = false) {
var _a;
if (!store)
return;
if (!next)
return;
const { renderedItems } = store.getState();
const scrollingElement = getScrollingElement(element);
if (!scrollingElement)
return;
const nextPageOffset = getNextPageOffset(scrollingElement, pageUp);
let id;
let prevDifference;
for (let i = 0; i < renderedItems.length; i += 1) {
const previousId = id;
id = next(i);
if (!id)
break;
if (id === previousId)
continue;
const itemElement = (_a = getEnabledItem(store, id)) == null ? void 0 : _a.element;
if (!itemElement)
continue;
const itemOffset = getItemOffset(itemElement, pageUp);
const difference = itemOffset - nextPageOffset;
const absDifference = Math.abs(difference);
if (pageUp && difference <= 0 || !pageUp && difference >= 0) {
if (prevDifference !== void 0 && prevDifference < absDifference) {
id = previousId;
}
break;
}
prevDifference = absDifference;
}
return id;
}
function targetIsAnotherItem(event, store) {
if (isSelfTarget(event))
return false;
return isItem(store, event.target);
}
function useRole(ref, props) {
const roleProp = props.role;
const [role, setRole] = useState(roleProp);
useSafeLayoutEffect(() => {
const element = ref.current;
if (!element)
return;
setRole(element.getAttribute("role") || roleProp);
}, [roleProp]);
return role;
}
function requiresAriaSelected(role) {
return role === "option" || role === "treeitem";
}
function supportsAriaSelected(role) {
if (role === "option")
return true;
if (role === "tab")
return true;
if (role === "treeitem")
return true;
if (role === "gridcell")
return true;
if (role === "row")
return true;
if (role === "columnheader")
return true;
if (role === "rowheader")
return true;
return false;
}
var useCompositeItem = createHook(
(_a) => {
var _b = _a, {
store,
rowId: rowIdProp,
preventScrollOnKeyDown = false,
moveOnKeyPress = true,
tabbable = false,
getItem: getItemProp,
"aria-setsize": ariaSetSizeProp,
"aria-posinset": ariaPosInSetProp
} = _b, props = __objRest(_b, [
"store",
"rowId",
"preventScrollOnKeyDown",
"moveOnKeyPress",
"tabbable",
"getItem",
"aria-setsize",
"aria-posinset"
]);
const context = useCompositeContext();
store = store || context;
const id = useId(props.id);
const ref = useRef(null);
const row = useContext(CompositeRowContext);
const rowId = useStoreState(store, (state) => {
if (rowIdProp)
return rowIdProp;
if (!state)
return;
if (!(row == null ? void 0 : row.baseElement))
return;
if (row.baseElement !== state.baseElement)
return;
return row.id;
});
const disabled = disabledFromProps(props);
const trulyDisabled = disabled && !props.accessibleWhenDisabled;
const getItem = useCallback(
(item) => {
const nextItem = __spreadProps(__spreadValues({}, item), {
id: id || item.id,
rowId,
disabled: !!trulyDisabled
});
if (getItemProp) {
return getItemProp(nextItem);
}
return nextItem;
},
[id, rowId, trulyDisabled, getItemProp]
);
const onFocusProp = props.onFocus;
const hasFocusedComposite = useRef(false);
const onFocus = useEvent((event) => {
onFocusProp == null ? void 0 : onFocusProp(event);
if (event.defaultPrevented)
return;
if (isPortalEvent(event))
return;
if (!id)
return;
if (!store)
return;
const { activeId, virtualFocus: virtualFocus2, baseElement: baseElement2 } = store.getState();
if (targetIsAnotherItem(event, store))
return;
if (activeId !== id) {
store.setActiveId(id);
}
if (!virtualFocus2)
return;
if (!isSelfTarget(event))
return;
if (isEditableElement(event.currentTarget))
return;
if (!(baseElement2 == null ? void 0 : baseElement2.isConnected))
return;
hasFocusedComposite.current = true;
const fromComposite = event.relatedTarget === baseElement2 || isItem(store, event.relatedTarget);
if (fromComposite) {
focusSilently(baseElement2);
} else {
baseElement2.focus();
}
});
const onBlurCaptureProp = props.onBlurCapture;
const onBlurCapture = useEvent((event) => {
onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event);
if (event.defaultPrevented)
return;
const state = store == null ? void 0 : store.getState();
if ((state == null ? void 0 : state.virtualFocus) && hasFocusedComposite.current) {
hasFocusedComposite.current = false;
event.preventDefault();
event.stopPropagation();
}
});
const onKeyDownProp = props.onKeyDown;
const preventScrollOnKeyDownProp = useBooleanEvent(preventScrollOnKeyDown);
const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
const onKeyDown = useEvent((event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
if (event.defaultPrevented)
return;
if (!isSelfTarget(event))
return;
if (!store)
return;
const { currentTarget } = event;
const state = store.getState();
const item = store.item(id);
const isGrid = !!(item == null ? void 0 : item.rowId);
const isVertical = state.orientation !== "horizontal";
const isHorizontal = state.orientation !== "vertical";
const canHomeEnd = () => {
if (isGrid)
return true;
if (isHorizontal)
return true;
if (!state.baseElement)
return true;
if (!isTextField(state.baseElement))
return true;
return false;
};
const keyMap = {
ArrowUp: (isGrid || isVertical) && store.up,
ArrowRight: (isGrid || isHorizontal) && store.next,
ArrowDown: (isGrid || isVertical) && store.down,
ArrowLeft: (isGrid || isHorizontal) && store.previous,
Home: () => {
if (!canHomeEnd())
return;
if (!isGrid || event.ctrlKey) {
return store == null ? void 0 : store.first();
}
return store == null ? void 0 : store.previous(-1);
},
End: () => {
if (!canHomeEnd())
return;
if (!isGrid || event.ctrlKey) {
return store == null ? void 0 : store.last();
}
return store == null ? void 0 : store.next(-1);
},
PageUp: () => {
return findNextPageItemId(currentTarget, store, store == null ? void 0 : store.up, true);
},
PageDown: () => {
return findNextPageItemId(currentTarget, store, store == null ? void 0 : store.down);
}
};
const action = keyMap[event.key];
if (action) {
const nextId = action();
if (preventScrollOnKeyDownProp(event) || nextId !== void 0) {
if (!moveOnKeyPressProp(event))
return;
event.preventDefault();
store.move(nextId);
}
}
});
const baseElement = useStoreState(
store,
(state) => (state == null ? void 0 : state.baseElement) || void 0
);
const providerValue = useMemo(
() => ({ id, baseElement }),
[id, baseElement]
);
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(CompositeItemContext.Provider, { value: providerValue, children: element }),
[providerValue]
);
const isActiveItem = useStoreState(
store,
(state) => !!state && state.activeId === id
);
const virtualFocus = useStoreState(store, "virtualFocus");
const role = useRole(ref, props);
let ariaSelected;
if (isActiveItem) {
if (requiresAriaSelected(role)) {
ariaSelected = true;
} else if (virtualFocus && supportsAriaSelected(role)) {
ariaSelected = true;
}
}
const ariaSetSize = useStoreState(store, (state) => {
if (ariaSetSizeProp != null)
return ariaSetSizeProp;
if (!state)
return;
if (!(row == null ? void 0 : row.ariaSetSize))
return;
if (row.baseElement !== state.baseElement)
return;
return row.ariaSetSize;
});
const ariaPosInSet = useStoreState(store, (state) => {
if (ariaPosInSetProp != null)
return ariaPosInSetProp;
if (!state)
return;
if (!(row == null ? void 0 : row.ariaPosInSet))
return;
if (row.baseElement !== state.baseElement)
return;
const itemsInRow = state.renderedItems.filter(
(item) => item.rowId === rowId
);
return row.ariaPosInSet + itemsInRow.findIndex((item) => item.id === id);
});
const isTabbable = useStoreState(store, (state) => {
if (!(state == null ? void 0 : state.renderedItems.length))
return true;
if (state.virtualFocus)
return false;
if (tabbable)
return true;
return state.activeId === id;
});
props = __spreadProps(__spreadValues({
id,
"aria-selected": ariaSelected,
"data-active-item": isActiveItem ? "" : void 0
}, props), {
ref: useMergeRefs(ref, props.ref),
tabIndex: isTabbable ? props.tabIndex : -1,
onFocus,
onBlurCapture,
onKeyDown
});
props = useCommand(props);
props = useCollectionItem(__spreadProps(__spreadValues({
store
}, props), {
getItem,
shouldRegisterItem: !!id ? props.shouldRegisterItem : false
}));
return __spreadProps(__spreadValues({}, props), {
"aria-setsize": ariaSetSize,
"aria-posinset": ariaPosInSet
});
}
);
var CompositeItem = createMemoComponent(
(props) => {
const htmlProps = useCompositeItem(props);
return createElement("button", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
CompositeItem.displayName = "CompositeItem";
}
export {
useCompositeItem,
CompositeItem
};

View File

@@ -0,0 +1,44 @@
"use client";
import {
GroupLabelContext
} from "./3X3MDQGM.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useWrapElement
} from "./6O5OEQGF.js";
import {
__spreadValues
} from "./4R3V3JGP.js";
// src/group/group.tsx
import { useState } from "react";
import { jsx } from "react/jsx-runtime";
var useGroup = createHook((props) => {
const [labelId, setLabelId] = useState();
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(GroupLabelContext.Provider, { value: setLabelId, children: element }),
[]
);
props = __spreadValues({
role: "group",
"aria-labelledby": labelId
}, props);
return props;
});
var Group = createComponent((props) => {
const htmlProps = useGroup(props);
return createElement("div", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
Group.displayName = "Group";
}
export {
useGroup,
Group
};

View File

@@ -0,0 +1,18 @@
"use client";
import {
MenubarContextProvider
} from "./KA4GX64Z.js";
import {
useMenubarStore
} from "./HVBNG5AF.js";
// src/menubar/menubar-provider.tsx
import { jsx } from "react/jsx-runtime";
function MenubarProvider(props = {}) {
const store = useMenubarStore(props);
return /* @__PURE__ */ jsx(MenubarContextProvider, { value: store, children: props.children });
}
export {
MenubarProvider
};

View File

@@ -0,0 +1,29 @@
"use client";
import {
useDialogHeading
} from "./XHRZYRZ5.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
// src/popover/popover-heading.ts
var usePopoverHeading = createHook((props) => {
props = useDialogHeading(props);
return props;
});
var PopoverHeading = createComponent(
(props) => {
const htmlProps = usePopoverHeading(props);
return createElement("h1", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
PopoverHeading.displayName = "PopoverHeading";
}
export {
usePopoverHeading,
PopoverHeading
};

View File

@@ -0,0 +1,27 @@
"use client";
import {
useStore,
useStoreProps
} from "./EKQEJRUF.js";
import {
useUpdateEffect
} from "./6O5OEQGF.js";
// src/disclosure/disclosure-store.ts
import * as Core from "@ariakit/core/disclosure/disclosure-store";
function useDisclosureStoreProps(store, update, props) {
useUpdateEffect(update, [props.store, props.disclosure]);
useStoreProps(store, props, "open", "setOpen");
useStoreProps(store, props, "mounted", "setMounted");
useStoreProps(store, props, "animated");
return store;
}
function useDisclosureStore(props = {}) {
const [store, update] = useStore(Core.createDisclosureStore, props);
return useDisclosureStoreProps(store, update, props);
}
export {
useDisclosureStoreProps,
useDisclosureStore
};

View File

@@ -0,0 +1,9 @@
"use client";
// src/focusable/focusable-context.ts
import { createContext } from "react";
var FocusableContext = createContext(true);
export {
FocusableContext
};

View File

@@ -0,0 +1,27 @@
"use client";
import {
CompositeContextProvider,
CompositeScopedContextProvider
} from "./IB7YUKH5.js";
import {
createStoreContext
} from "./3ORBWXWF.js";
// src/toolbar/toolbar-context.tsx
var ctx = createStoreContext(
[CompositeContextProvider],
[CompositeScopedContextProvider]
);
var useToolbarContext = ctx.useContext;
var useToolbarScopedContext = ctx.useScopedContext;
var useToolbarProviderContext = ctx.useProviderContext;
var ToolbarContextProvider = ctx.ContextProvider;
var ToolbarScopedContextProvider = ctx.ScopedContextProvider;
export {
useToolbarContext,
useToolbarScopedContext,
useToolbarProviderContext,
ToolbarContextProvider,
ToolbarScopedContextProvider
};

View File

@@ -0,0 +1,62 @@
"use client";
import {
useCollectionStoreProps
} from "./Y6GYTNQ2.js";
import {
useStore,
useStoreProps
} from "./EKQEJRUF.js";
import {
useEvent
} from "./6O5OEQGF.js";
import {
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/form/form-store.ts
import { useCallback, useEffect, useMemo } from "react";
import * as Core from "@ariakit/core/form/form-store";
function useFormStoreProps(store, update, props) {
store = useCollectionStoreProps(store, update, props);
useStoreProps(store, props, "values", "setValues");
useStoreProps(store, props, "errors", "setErrors");
useStoreProps(store, props, "touched", "setTouched");
const useValue = useCallback(
(name) => store.useState(() => store.getValue(name)),
[store]
);
const useValidate = useCallback(
(callback) => {
callback = useEvent(callback);
const items = store.useState("items");
useEffect(() => store.onValidate(callback), [items, callback]);
},
[store]
);
const useSubmit = useCallback(
(callback) => {
callback = useEvent(callback);
const items = store.useState("items");
useEffect(() => store.onSubmit(callback), [items, callback]);
},
[store]
);
return useMemo(
() => __spreadProps(__spreadValues({}, store), {
useValue,
useValidate,
useSubmit
}),
[]
);
}
function useFormStore(props = {}) {
const [store, update] = useStore(Core.createFormStore, props);
return useFormStoreProps(store, update, props);
}
export {
useFormStoreProps,
useFormStore
};

View File

@@ -0,0 +1,136 @@
"use client";
import {
useCompositeTypeahead
} from "./346FK57L.js";
import {
SelectScopedContextProvider,
useSelectProviderContext
} from "./5HVNGX6D.js";
import {
useComposite
} from "./7QTPYGNZ.js";
import {
isHidden
} from "./CLE7NTOY.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useAttribute,
useBooleanEvent,
useEvent,
useId,
useMergeRefs,
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/select/select-list.tsx
import { useEffect, useRef, useState } from "react";
import { isSelfTarget } from "@ariakit/core/utils/events";
import { invariant } from "@ariakit/core/utils/misc";
import { jsx } from "react/jsx-runtime";
var useSelectList = createHook(
(_a) => {
var _b = _a, {
store,
resetOnEscape = true,
hideOnEnter = true,
focusOnMove = true,
composite,
alwaysVisible
} = _b, props = __objRest(_b, [
"store",
"resetOnEscape",
"hideOnEnter",
"focusOnMove",
"composite",
"alwaysVisible"
]);
const context = useSelectProviderContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "SelectList must receive a `store` prop or be wrapped in a SelectProvider component."
);
const ref = useRef(null);
const id = useId(props.id);
const value = store.useState("value");
const multiSelectable = Array.isArray(value);
const [defaultValue, setDefaultValue] = useState(value);
const mounted = store.useState("mounted");
useEffect(() => {
if (mounted)
return;
setDefaultValue(value);
}, [mounted, value]);
resetOnEscape = resetOnEscape && !multiSelectable;
const onKeyDownProp = props.onKeyDown;
const resetOnEscapeProp = useBooleanEvent(resetOnEscape);
const hideOnEnterProp = useBooleanEvent(hideOnEnter);
const onKeyDown = useEvent((event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
if (event.defaultPrevented)
return;
if (event.key === "Escape" && resetOnEscapeProp(event)) {
store == null ? void 0 : store.setValue(defaultValue);
}
if (event.key === " " || event.key === "Enter") {
if (isSelfTarget(event) && hideOnEnterProp(event)) {
event.preventDefault();
store == null ? void 0 : store.hide();
}
}
});
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(SelectScopedContextProvider, { value: store, children: element }),
[store]
);
const labelId = store.useState((state) => {
var _a2;
return (_a2 = state.labelElement) == null ? void 0 : _a2.id;
});
const hasCombobox = !!store.combobox;
composite = composite != null ? composite : !hasCombobox;
if (composite) {
props = __spreadValues({ role: "listbox" }, props);
}
const role = useAttribute(ref, "role", props.role);
const isCompositeRole = role === "listbox" || role === "menu" || role === "tree" || role === "grid";
const ariaMultiSelectable = composite || isCompositeRole ? multiSelectable || void 0 : void 0;
const hidden = isHidden(mounted, props.hidden, alwaysVisible);
const style = hidden ? __spreadProps(__spreadValues({}, props.style), { display: "none" }) : props.style;
props = __spreadProps(__spreadValues({
id,
"aria-labelledby": labelId,
"aria-multiselectable": ariaMultiSelectable,
hidden
}, props), {
ref: useMergeRefs(id ? store.setContentElement : null, ref, props.ref),
style,
onKeyDown
});
props = useComposite(__spreadProps(__spreadValues({ store }, props), { composite }));
props = useCompositeTypeahead(__spreadValues({ store, typeahead: !hasCombobox }, props));
return props;
}
);
var SelectList = createComponent((props) => {
const htmlProps = useSelectList(props);
return createElement("div", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
SelectList.displayName = "SelectList";
}
export {
useSelectList,
SelectList
};

View File

@@ -0,0 +1,27 @@
"use client";
import {
PopoverContextProvider,
PopoverScopedContextProvider
} from "./7H5KSHHF.js";
import {
createStoreContext
} from "./3ORBWXWF.js";
// src/hovercard/hovercard-context.tsx
var ctx = createStoreContext(
[PopoverContextProvider],
[PopoverScopedContextProvider]
);
var useHovercardContext = ctx.useContext;
var useHovercardScopedContext = ctx.useScopedContext;
var useHovercardProviderContext = ctx.useProviderContext;
var HovercardContextProvider = ctx.ContextProvider;
var HovercardScopedContextProvider = ctx.ScopedContextProvider;
export {
useHovercardContext,
useHovercardScopedContext,
useHovercardProviderContext,
HovercardContextProvider,
HovercardScopedContextProvider
};

View File

@@ -0,0 +1,71 @@
"use client";
import {
isBackdrop
} from "./MKDDWKFK.js";
import {
walkTreeOutside
} from "./72E5EPFF.js";
import {
setProperty
} from "./X6WIMZJE.js";
// src/dialog/utils/mark-tree-outside.ts
import { chain } from "@ariakit/core/utils/misc";
function getPropertyName(id = "", ancestor = false) {
return `__ariakit-dialog-${ancestor ? "ancestor" : "outside"}${id ? `-${id}` : ""}`;
}
function markElement(element, id = "") {
return chain(
setProperty(element, getPropertyName(), true),
setProperty(element, getPropertyName(id), true)
);
}
function markAncestor(element, id = "") {
return chain(
setProperty(element, getPropertyName("", true), true),
setProperty(element, getPropertyName(id, true), true)
);
}
function isElementMarked(element, id) {
const ancestorProperty = getPropertyName(id, true);
if (element[ancestorProperty])
return true;
const elementProperty = getPropertyName(id);
do {
if (element[elementProperty])
return true;
if (!element.parentElement)
return false;
element = element.parentElement;
} while (true);
}
function markTreeOutside(id, elements) {
const cleanups = [];
const ids = elements.map((el) => el == null ? void 0 : el.id);
walkTreeOutside(
id,
elements,
(element) => {
if (isBackdrop(element, ...ids))
return;
cleanups.unshift(markElement(element, id));
},
(ancestor, element) => {
const isAnotherDialogAncestor = element.hasAttribute("data-dialog") && element.id !== id;
if (isAnotherDialogAncestor)
return;
cleanups.unshift(markAncestor(ancestor, id));
}
);
const restoreAccessibilityTree = () => {
cleanups.forEach((fn) => fn());
};
return restoreAccessibilityTree;
}
export {
markElement,
markAncestor,
isElementMarked,
markTreeOutside
};

View File

@@ -0,0 +1,63 @@
"use client";
import {
hideElementFromAccessibilityTree
} from "./BULCTPRV.js";
import {
isBackdrop
} from "./MKDDWKFK.js";
import {
walkTreeOutside
} from "./72E5EPFF.js";
import {
assignStyle,
setAttribute,
setProperty
} from "./X6WIMZJE.js";
import {
supportsInert
} from "./677M2CI3.js";
// src/dialog/utils/disable-tree.ts
import { contains } from "@ariakit/core/utils/dom";
import { getAllTabbableIn } from "@ariakit/core/utils/focus";
import { chain, noop } from "@ariakit/core/utils/misc";
function disableTree(element, ignoredElements) {
if (!("style" in element))
return noop;
if (supportsInert()) {
return setProperty(element, "inert", true);
}
const tabbableElements = getAllTabbableIn(element, true);
const enableElements = tabbableElements.map((element2) => {
if (ignoredElements == null ? void 0 : ignoredElements.some((el) => el && contains(el, element2)))
return noop;
return setAttribute(element2, "tabindex", "-1");
});
return chain(
...enableElements,
hideElementFromAccessibilityTree(element),
assignStyle(element, {
pointerEvents: "none",
userSelect: "none",
cursor: "default"
})
);
}
function disableTreeOutside(id, elements) {
const cleanups = [];
const ids = elements.map((el) => el == null ? void 0 : el.id);
walkTreeOutside(id, elements, (element) => {
if (isBackdrop(element, ...ids))
return;
cleanups.unshift(disableTree(element, elements));
});
const restoreTreeOutside = () => {
cleanups.forEach((fn) => fn());
};
return restoreTreeOutside;
}
export {
disableTree,
disableTreeOutside
};

View File

@@ -0,0 +1,71 @@
"use client";
import {
useCollectionContext
} from "./4UUKJZ4V.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useId,
useMergeRefs
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/collection/collection-item.ts
import { useEffect, useRef } from "react";
import { identity } from "@ariakit/core/utils/misc";
var useCollectionItem = createHook(
(_a) => {
var _b = _a, {
store,
shouldRegisterItem = true,
getItem = identity,
element: element
} = _b, props = __objRest(_b, [
"store",
"shouldRegisterItem",
"getItem",
// @ts-expect-error This prop may come from a collection renderer.
"element"
]);
const context = useCollectionContext();
store = store || context;
const id = useId(props.id);
const ref = useRef(element);
useEffect(() => {
const element2 = ref.current;
if (!id)
return;
if (!element2)
return;
if (!shouldRegisterItem)
return;
const item = getItem({ id, element: element2 });
return store == null ? void 0 : store.renderItem(item);
}, [id, shouldRegisterItem, getItem, store]);
props = __spreadProps(__spreadValues({}, props), {
ref: useMergeRefs(ref, props.ref)
});
return props;
}
);
var CollectionItem = createComponent(
(props) => {
const htmlProps = useCollectionItem(props);
return createElement("div", htmlProps);
}
);
if (process.env.NODE_ENV !== "production") {
CollectionItem.displayName = "CollectionItem";
}
export {
useCollectionItem,
CollectionItem
};

View File

@@ -0,0 +1,82 @@
"use client";
import {
MenubarScopedContextProvider,
useMenubarProviderContext
} from "./KA4GX64Z.js";
import {
useMenubarStore
} from "./HVBNG5AF.js";
import {
useComposite
} from "./7QTPYGNZ.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useWrapElement
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadValues
} from "./4R3V3JGP.js";
// src/menubar/menubar.tsx
import { jsx } from "react/jsx-runtime";
var useMenubar = createHook(
(_a) => {
var _b = _a, {
store: storeProp,
composite = true,
orientation: orientationProp,
virtualFocus,
focusLoop,
rtl
} = _b, props = __objRest(_b, [
"store",
"composite",
"orientation",
"virtualFocus",
"focusLoop",
"rtl"
]);
const context = useMenubarProviderContext();
storeProp = storeProp || context;
const store = useMenubarStore({
store: storeProp,
orientation: orientationProp,
virtualFocus,
focusLoop,
rtl
});
const orientation = store.useState(
(state) => !composite || state.orientation === "both" ? void 0 : state.orientation
);
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(MenubarScopedContextProvider, { value: store, children: element }),
[store]
);
if (composite) {
props = __spreadValues({
role: "menubar",
"aria-orientation": orientation
}, props);
}
props = useComposite(__spreadValues({ store, composite }, props));
return props;
}
);
var Menubar = createComponent((props) => {
const htmlProps = useMenubar(props);
return createElement("div", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
Menubar.displayName = "Menubar";
}
export {
useMenubar,
Menubar
};

View File

@@ -0,0 +1,104 @@
"use client";
import {
POPOVER_ARROW_PATH
} from "./QFL5V2DO.js";
import {
usePopoverContext
} from "./7H5KSHHF.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useMergeRefs,
useSafeLayoutEffect
} from "./6O5OEQGF.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/popover/popover-arrow.tsx
import { useMemo, useState } from "react";
import { getWindow } from "@ariakit/core/utils/dom";
import { invariant } from "@ariakit/core/utils/misc";
import { jsx, jsxs } from "react/jsx-runtime";
var defaultSize = 30;
var halfDefaultSize = defaultSize / 2;
var rotateMap = {
top: `rotate(180 ${halfDefaultSize} ${halfDefaultSize})`,
right: `rotate(-90 ${halfDefaultSize} ${halfDefaultSize})`,
bottom: `rotate(0 ${halfDefaultSize} ${halfDefaultSize})`,
left: `rotate(90 ${halfDefaultSize} ${halfDefaultSize})`
};
function useComputedStyle(store) {
const [style, setStyle] = useState();
const contentElement = store.useState("contentElement");
useSafeLayoutEffect(() => {
if (!contentElement)
return;
const win = getWindow(contentElement);
const computedStyle = win.getComputedStyle(contentElement);
setStyle(computedStyle);
}, [contentElement]);
return style;
}
var usePopoverArrow = createHook(
(_a) => {
var _b = _a, { store, size = defaultSize } = _b, props = __objRest(_b, ["store", "size"]);
const context = usePopoverContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "PopoverArrow must be wrapped in a Popover component."
);
const dir = store.useState(
(state) => state.currentPlacement.split("-")[0]
);
const style = useComputedStyle(store);
const fill = (style == null ? void 0 : style.getPropertyValue("background-color")) || "none";
const stroke = (style == null ? void 0 : style.getPropertyValue(`border-${dir}-color`)) || "none";
const borderWidth = (style == null ? void 0 : style.getPropertyValue(`border-${dir}-width`)) || "0px";
const strokeWidth = parseInt(borderWidth) * 2 * (defaultSize / size);
const transform = rotateMap[dir];
const children = useMemo(
() => /* @__PURE__ */ jsx("svg", { display: "block", viewBox: "0 0 30 30", children: /* @__PURE__ */ jsxs("g", { transform, children: [
/* @__PURE__ */ jsx("path", { fill: "none", d: POPOVER_ARROW_PATH }),
/* @__PURE__ */ jsx("path", { stroke: "none", d: POPOVER_ARROW_PATH })
] }) }),
[transform]
);
props = __spreadProps(__spreadValues({
children,
"aria-hidden": true
}, props), {
ref: useMergeRefs(store.setArrowElement, props.ref),
style: __spreadValues({
// server side rendering
position: "absolute",
fontSize: size,
width: "1em",
height: "1em",
pointerEvents: "none",
fill,
stroke,
strokeWidth
}, props.style)
});
return props;
}
);
var PopoverArrow = createComponent((props) => {
const htmlProps = usePopoverArrow(props);
return createElement("div", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
PopoverArrow.displayName = "PopoverArrow";
}
export {
usePopoverArrow,
PopoverArrow
};

View File

@@ -0,0 +1,20 @@
"use client";
import {
HeadingContext
} from "./XPF5GU3Q.js";
// src/heading/heading-level.tsx
import { useContext } from "react";
import { jsx } from "react/jsx-runtime";
function HeadingLevel({ level, children }) {
const contextLevel = useContext(HeadingContext);
const nextLevel = Math.max(
Math.min(level || contextLevel + 1, 6),
1
);
return /* @__PURE__ */ jsx(HeadingContext.Provider, { value: nextLevel, children });
}
export {
HeadingLevel
};

View File

@@ -0,0 +1,27 @@
"use client";
import {
CollectionContextProvider,
CollectionScopedContextProvider
} from "./4UUKJZ4V.js";
import {
createStoreContext
} from "./3ORBWXWF.js";
// src/form/form-context.tsx
var ctx = createStoreContext(
[CollectionContextProvider],
[CollectionScopedContextProvider]
);
var useFormContext = ctx.useContext;
var useFormScopedContext = ctx.useScopedContext;
var useFormProviderContext = ctx.useProviderContext;
var FormContextProvider = ctx.ContextProvider;
var FormScopedContextProvider = ctx.ScopedContextProvider;
export {
useFormContext,
useFormScopedContext,
useFormProviderContext,
FormContextProvider,
FormScopedContextProvider
};

View File

@@ -0,0 +1,52 @@
"use client";
import {
useCommand
} from "./NWCBQ4CV.js";
import {
createComponent,
createElement,
createHook
} from "./3ORBWXWF.js";
import {
useMergeRefs,
useTagName
} from "./6O5OEQGF.js";
import {
__spreadProps,
__spreadValues
} from "./4R3V3JGP.js";
// src/button/button.ts
import { useEffect, useRef, useState } from "react";
import { isButton } from "@ariakit/core/utils/dom";
var useButton = createHook((props) => {
const ref = useRef(null);
const tagName = useTagName(ref, props.as || "button");
const [isNativeButton, setIsNativeButton] = useState(
() => !!tagName && isButton({ tagName, type: props.type })
);
useEffect(() => {
if (!ref.current)
return;
setIsNativeButton(isButton(ref.current));
}, []);
props = __spreadProps(__spreadValues({
role: !isNativeButton && tagName !== "a" ? "button" : void 0
}, props), {
ref: useMergeRefs(ref, props.ref)
});
props = useCommand(props);
return props;
});
var Button = createComponent((props) => {
const htmlProps = useButton(props);
return createElement("button", htmlProps);
});
if (process.env.NODE_ENV !== "production") {
Button.displayName = "Button";
}
export {
useButton,
Button
};

Some files were not shown because too many files have changed in this diff Show More