@ariakit/react-core 0.0.1 → 0.1.1

package/esm/__chunks/YDNX3N4B.js

@@ -0,0 +1,116 @@
+import {
+  MenuBarContext,
+  MenuContext
+} from "./HVBRRKV4.js";
+import {
+  hasExpandedMenuButton
+} from "./SJEKLK5Q.js";
+import {
+  useCompositeHover
+} from "./DRSUYUM5.js";
+import {
+  useCompositeItem
+} from "./WHN4PCW7.js";
+import {
+  createElement,
+  createHook,
+  createMemoComponent
+} from "./JE5NWDDX.js";
+import {
+  useStoreState
+} from "./6DAEYZ43.js";
+import {
+  useBooleanEvent,
+  useEvent
+} from "./B7MIN7YT.js";
+
+// src/menu/menu-item.ts
+import { useContext } from "react";
+import { getPopupItemRole } from "@ariakit/core/utils/dom";
+import { isDownloading, isOpeningInNewTab } from "@ariakit/core/utils/events";
+import { invariant } from "@ariakit/core/utils/misc";
+var useMenuItem = createHook(
+  ({
+    store,
+    hideOnClick = true,
+    preventScrollOnKeyDown = true,
+    focusOnHover,
+    ...props
+  }) => {
+    const menuContext = useContext(MenuContext);
+    const menuBarContext = useContext(MenuBarContext);
+    store = store || menuContext || menuBarContext;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "MenuItem must be wrapped in a MenuList, MenuPopover or MenuBar component"
+    );
+    const onClickProp = props.onClick;
+    const hideOnClickProp = useBooleanEvent(hideOnClick);
+    const hideMenu = "hideAll" in store ? store.hideAll : void 0;
+    const isWithinMenu = !!hideMenu;
+    const onClick = useEvent((event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (isDownloading(event))
+        return;
+      if (isOpeningInNewTab(event))
+        return;
+      if (!hideMenu)
+        return;
+      const popupType = event.currentTarget.getAttribute("aria-haspopup");
+      if (popupType === "menu")
+        return;
+      if (!hideOnClickProp(event))
+        return;
+      hideMenu();
+    });
+    const contentElement = useStoreState(
+      store,
+      (state) => "contentElement" in state ? state.contentElement : null
+    );
+    const role = getPopupItemRole(contentElement, "menuitem");
+    props = {
+      role,
+      ...props,
+      onClick
+    };
+    props = useCompositeItem({ store, preventScrollOnKeyDown, ...props });
+    props = useCompositeHover({
+      store,
+      ...props,
+      focusOnHover: (event) => {
+        if (typeof focusOnHover === "function")
+          return focusOnHover(event);
+        if (focusOnHover != null)
+          return focusOnHover;
+        if (event.type === "mouseleave")
+          return isWithinMenu;
+        const state = store?.getState();
+        if (isWithinMenu) {
+          if (event.currentTarget.hasAttribute("aria-expanded")) {
+            event.currentTarget.focus();
+          }
+          return true;
+        } else if (hasExpandedMenuButton(state?.items, event.currentTarget)) {
+          event.currentTarget.focus();
+          return true;
+        }
+        return false;
+      }
+    });
+    return props;
+  }
+);
+var MenuItem = createMemoComponent((props) => {
+  const htmlProps = useMenuItem(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  MenuItem.displayName = "MenuItem";
+}
+
+export {
+  useMenuItem,
+  MenuItem
+};

package/esm/__chunks/Z3UAG7AM.js

@@ -0,0 +1,290 @@
+import {
+  getElementPolygon,
+  getEventPoint,
+  isPointInPolygon
+} from "./X7FKJQME.js";
+import {
+  usePopover
+} from "./JUUV3EHC.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useBooleanEvent,
+  useEvent,
+  useForkRef,
+  useLiveRef,
+  usePortalRef,
+  useSafeLayoutEffect,
+  useWrapElement
+} from "./B7MIN7YT.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 } from "@ariakit/core/utils/misc";
+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?.some((card2) => isMovingOnHovercard(target, card2, anchor))) {
+    return true;
+  }
+  return false;
+}
+function useAutoFocusOnShow({ store, ...props }) {
+  const open = store.useState("open");
+  const openRef = useLiveRef(open);
+  useEffect(() => {
+    if (!open) {
+      store.setAutoFocusOnShow(false);
+    }
+  }, [open, store]);
+  useEffect(
+    () => () => {
+      if (!openRef.current) {
+        store.setAutoFocusOnShow(false);
+      }
+    },
+    [store]
+  );
+  const modal = !!props.modal;
+  const autoFocusOnShow = store.useState(
+    (state) => modal || state.autoFocusOnShow
+  );
+  return { autoFocusOnShow, ...props };
+}
+function useAutoFocusOnHide({ store, ...props }) {
+  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?.(event);
+    if (event.defaultPrevented)
+      return;
+    setAutoFocusOnHide(true);
+  });
+  const finalFocusRef = useRef(null);
+  useEffect(() => {
+    return store.sync(
+      (state) => {
+        finalFocusRef.current = state.anchorElement;
+      },
+      ["anchorElement"]
+    );
+  }, []);
+  props = {
+    autoFocusOnHide,
+    finalFocus: finalFocusRef,
+    ...props,
+    onFocus
+  };
+  return props;
+}
+var NestedHovercardContext = createContext(null);
+var useHovercard = createHook(
+  ({
+    store,
+    modal = false,
+    portal = !!modal,
+    hideOnEscape = true,
+    hideOnControl = false,
+    hideOnHoverOutside = true,
+    disablePointerEventsOnApproach = !!hideOnHoverOutside,
+    ...props
+  }) => {
+    const ref = useRef(null);
+    const [nestedHovercards, setNestedHovercards] = useState([]);
+    const hideTimeoutRef = useRef(0);
+    const enterPointRef = useRef(null);
+    const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
+    const hideOnEscapeProp = useBooleanEvent(hideOnEscape);
+    const hideOnControlProp = useBooleanEvent(hideOnControl);
+    const open = store.useState("open");
+    useEffect(() => {
+      if (!open)
+        return;
+      return addGlobalEventListener("keydown", (event) => {
+        if (event.defaultPrevented)
+          return;
+        const isEscape = event.key === "Escape" && hideOnEscapeProp(event);
+        const isControl = event.key === "Control" && hideOnControlProp(event);
+        if (isEscape || isControl) {
+          store.hide();
+        }
+      });
+    }, [store, open, hideOnEscapeProp, hideOnControlProp]);
+    const mayHideOnHoverOutside = !!hideOnHoverOutside;
+    const hideOnHoverOutsideProp = useBooleanEvent(hideOnHoverOutside);
+    const mayDisablePointerEvents = !!disablePointerEventsOnApproach;
+    const disablePointerEventsProp = useBooleanEvent(
+      disablePointerEventsOnApproach
+    );
+    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) => {
+        const { anchorElement, hideTimeout } = store.getState();
+        const enterPoint = enterPointRef.current;
+        const target = event.target;
+        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.hide();
+        }, hideTimeout);
+      };
+      return addGlobalEventListener("mousemove", onMouseMove, true);
+    }, [
+      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]);
+    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?.(element);
+    }, [modal, portal, mounted, domReady]);
+    const registerNestedHovercard = useCallback(
+      (element) => {
+        setNestedHovercards((prevElements) => [...prevElements, element]);
+        const parentUnregister = registerOnParent?.(element);
+        return () => {
+          setNestedHovercards(
+            (prevElements) => prevElements.filter((item) => item !== element)
+          );
+          parentUnregister?.();
+        };
+      },
+      [registerOnParent]
+    );
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(NestedHovercardContext.Provider, { value: registerNestedHovercard, children: element }),
+      [registerNestedHovercard]
+    );
+    props = {
+      ...props,
+      ref: useForkRef(ref, props.ref)
+    };
+    props = useAutoFocusOnHide({ store, ...props });
+    props = useAutoFocusOnShow({ store, modal, ...props });
+    props = usePopover({
+      hideOnEscape,
+      store,
+      modal,
+      portal,
+      ...props,
+      portalRef
+    });
+    return props;
+  }
+);
+var Hovercard = createComponent((props) => {
+  const htmlProps = useHovercard(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  Hovercard.displayName = "Hovercard";
+}
+
+export {
+  useHovercard,
+  Hovercard
+};

package/esm/__chunks/Z3X3QN6P.js

@@ -0,0 +1,13 @@
+// src/composite/composite-context.ts
+import { createContext } from "react";
+var CompositeRowContext = createContext(void 0);
+var CompositeItemContext = createContext(void 0);
+var CompositeContext = createContext(
+  void 0
+);
+
+export {
+  CompositeRowContext,
+  CompositeItemContext,
+  CompositeContext
+};

package/esm/__chunks/Z5BJMNGY.js

@@ -0,0 +1,9 @@
+// src/tooltip/tooltip-context.ts
+import { createContext } from "react";
+var TooltipContext = createContext(
+  void 0
+);
+
+export {
+  TooltipContext
+};

package/esm/__chunks/ZVCQYVEV.js

@@ -0,0 +1,44 @@
+import {
+  useForceUpdate,
+  useSafeLayoutEffect
+} from "./B7MIN7YT.js";
+
+// src/dialog/utils/use-champion-dialog.ts
+import { useCallback } from "react";
+import { getDocument } from "@ariakit/core/utils/dom";
+import { flushSync } from "react-dom";
+function useChampionDialog(attribute, store, enabled) {
+  const [updated, retry] = useForceUpdate();
+  const isChampionDialog = useCallback(() => {
+    if (!enabled)
+      return false;
+    const dialog = store.getState().contentElement;
+    if (!dialog)
+      return false;
+    const { body } = getDocument(dialog);
+    const id = body.getAttribute(attribute);
+    return !id || id === dialog.id;
+  }, [updated, store, enabled, attribute]);
+  useSafeLayoutEffect(() => {
+    const dialog = store.getState().contentElement;
+    if (!dialog)
+      return;
+    if (!enabled)
+      return;
+    const { body } = getDocument(dialog);
+    if (!isChampionDialog()) {
+      const observer = new MutationObserver(() => flushSync(retry));
+      observer.observe(body, { attributeFilter: [attribute] });
+      return () => observer.disconnect();
+    }
+    body.setAttribute(attribute, dialog.id);
+    return () => {
+      body.removeAttribute(attribute);
+    };
+  }, [updated, store, enabled, isChampionDialog, attribute]);
+  return isChampionDialog;
+}
+
+export {
+  useChampionDialog
+};

package/esm/button/button.d.ts

@@ -0,0 +1,26 @@
+import type { CommandOptions } from "../command/command.js";
+import type { As, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `Button` component. If the element is not a native
+ * button, the hook will return additional props to make sure it's accessible.
+ * @see https://ariakit.org/components/button
+ * @example
+ * ```jsx
+ * const props = useButton({ as: "div" });
+ * <Role {...props}>Accessible button</Role>
+ * ```
+ */
+export declare const useButton: import("../utils/types.js").Hook<ButtonOptions<"button">>;
+/**
+ * Renders an accessible button element. If the underlying element is not a
+ * native button, this component will pass additional attributes to make sure
+ * it's accessible.
+ * @see https://ariakit.org/components/button
+ * @example
+ * ```jsx
+ * <Button as="div">Accessible button</Button>
+ * ```
+ */
+export declare const Button: import("../utils/types.js").Component<ButtonOptions<"button">>;
+export type ButtonOptions<T extends As = "button"> = CommandOptions<T>;
+export type ButtonProps<T extends As = "button"> = Props<ButtonOptions<T>>;

package/esm/button/button.js

@@ -0,0 +1,13 @@
+import {
+  Button,
+  useButton
+} from "../__chunks/I4MLEPTM.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  Button,
+  useButton
+};

package/esm/checkbox/checkbox-check.d.ts

@@ -0,0 +1,37 @@
+import type { As, Options, Props } from "../utils/types.js";
+import type { CheckboxStore } from "./checkbox-store.js";
+/**
+ * Returns props to create a `CheckboxCheck` component, that's usually rendered
+ * inside a `Checkbox` component.
+ * @see https://ariakit.org/components/checkbox
+ * @example
+ * ```jsx
+ * const props = useCheckboxCheck({ checked: true });
+ * <Role {...props} />
+ * ```
+ */
+export declare const useCheckboxCheck: import("../utils/types.js").Hook<CheckboxCheckOptions<"span">>;
+/**
+ * Renders a check mark icon, usually inside a `Checkbox` component.
+ * @see https://ariakit.org/components/checkbox
+ * @example
+ * ```jsx
+ * <CheckboxCheck checked />
+ * ```
+ */
+export declare const CheckboxCheck: import("../utils/types.js").Component<CheckboxCheckOptions<"span">>;
+export interface CheckboxCheckOptions<T extends As = "span"> extends Options<T> {
+    /**
+     * Object returned by the `useCheckboxStore` hook. If not provided, the parent
+     * `Checkbox` component's context will be used. If the `checked` prop is
+     * provided, it will override this prop.
+     */
+    store?: CheckboxStore;
+    /**
+     * Whether the check mark should be shown. This value is automatically
+     * inferred from the `store` prop or the parent `Checkbox` component. Manually
+     * setting this prop will override the inferred value.
+     */
+    checked?: boolean;
+}
+export type CheckboxCheckProps<T extends As = "span"> = Props<CheckboxCheckOptions<T>>;

package/esm/checkbox/checkbox-check.js

@@ -0,0 +1,10 @@
+import {
+  CheckboxCheck,
+  useCheckboxCheck
+} from "../__chunks/H5L4MRQM.js";
+import "../__chunks/M5KYRTQG.js";
+import "../__chunks/JE5NWDDX.js";
+export {
+  CheckboxCheck,
+  useCheckboxCheck
+};

package/esm/checkbox/checkbox-checked-context.d.ts

@@ -0,0 +1 @@
+export declare const CheckboxCheckedContext: import("react").Context<boolean>;

package/esm/checkbox/checkbox-checked-context.js

@@ -0,0 +1,6 @@
+import {
+  CheckboxCheckedContext
+} from "../__chunks/M5KYRTQG.js";
+export {
+  CheckboxCheckedContext
+};

package/esm/checkbox/checkbox-store.d.ts

@@ -0,0 +1,36 @@
+import * as Core from "@ariakit/core/checkbox/checkbox-store";
+import type { PickRequired } from "@ariakit/core/utils/types";
+import type { Store } from "../utils/store.js";
+type Value = Core.CheckboxStoreValue;
+export declare function useCheckboxStoreOptions(_props: CheckboxStoreProps): Partial<CheckboxStoreOptions>;
+export declare function useCheckboxStoreProps<T extends CheckboxStore>(store: T, props: CheckboxStoreProps): T;
+/**
+ * Creates a checkbox store.
+ * @see https://ariakit.org/components/checkbox
+ * @example
+ * ```jsx
+ * const checkbox = useCheckboxStore({ defaultValue: true });
+ * <Checkbox store={checkbox} />
+ * ```
+ */
+export declare function useCheckboxStore<T extends Value = Value>(props: PickRequired<CheckboxStoreProps<T>, "value" | "defaultValue">): CheckboxStore<T>;
+export declare function useCheckboxStore(props?: CheckboxStoreProps): CheckboxStore;
+export type CheckboxStoreValue = Core.CheckboxStoreValue;
+export type CheckboxStoreState<T extends Value = Value> = Core.CheckboxStoreState<T>;
+export type CheckboxStoreFunctions<T extends Value = Value> = Core.CheckboxStoreFunctions<T>;
+export interface CheckboxStoreOptions<T extends Value = Value> extends Core.CheckboxStoreOptions<T> {
+    /**
+     * A callback that gets called when the `value` state changes.
+     * @param value The new value.
+     * @example
+     * function MyCheckbox({ value, onChange }) {
+     *   const checkbox = useCheckboxStore({ value, setValue: onChange });
+     * }
+     */
+    setValue?: (value: CheckboxStoreState<T>["value"]) => void;
+}
+export interface CheckboxStoreProps<T extends Value = Value> extends CheckboxStoreOptions<T>, Core.CheckboxStoreProps<T> {
+}
+export interface CheckboxStore<T extends Value = Value> extends CheckboxStoreFunctions<T>, Store<Core.CheckboxStore<T>> {
+}
+export {};

package/esm/checkbox/checkbox-store.js

@@ -0,0 +1,13 @@
+import {
+  useCheckboxStore,
+  useCheckboxStoreOptions,
+  useCheckboxStoreProps
+} from "../__chunks/HRNQJHNJ.js";
+import "../__chunks/6DAEYZ43.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  useCheckboxStore,
+  useCheckboxStoreOptions,
+  useCheckboxStoreProps
+};

package/esm/checkbox/checkbox.d.ts

@@ -0,0 +1,65 @@
+import type { ChangeEvent } from "react";
+import type { CommandOptions } from "../command/command.js";
+import type { As, Props } from "../utils/types.js";
+import type { CheckboxStore } from "./checkbox-store.js";
+/**
+ * Returns props to create a `Checkbox` component. If the element is not a
+ * native checkbox, the hook will return additional props to make sure it's
+ * accessible.
+ * @see https://ariakit.org/components/checkbox
+ * @example
+ * ```jsx
+ * const props = useCheckbox({ as: "div" });
+ * <Role {...props}>Accessible checkbox</Role>
+ * ```
+ */
+export declare const useCheckbox: import("../utils/types.js").Hook<CheckboxOptions<"input">>;
+/**
+ * Renders an accessible checkbox element. If the underlying element is not a
+ * native checkbox, this component will pass additional attributes to make sure
+ * it's accessible.
+ * @see https://ariakit.org/components/checkbox
+ * @example
+ * ```jsx
+ * <Checkbox as="div">Accessible checkbox</Checkbox>
+ * ```
+ */
+export declare const Checkbox: import("../utils/types.js").Component<CheckboxOptions<"input">>;
+export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<T> {
+    /**
+     * Object returned by the `useCheckboxStore` hook. If not provided, the
+     * internal store will be used.
+     */
+    store?: CheckboxStore;
+    /**
+     * The value of the checkbox. This is useful when the same checkbox store is
+     * used for multiple `Checkbox` elements, in which case the value will be an
+     * array of checked values.
+     * @example
+     * ```jsx
+     * const checkbox = useCheckboxStore({
+     *   defaultValue: ["Apple", "Orange"],
+     * });
+     * <Checkbox store={checkbox} value="Apple" />
+     * <Checkbox store={checkbox} value="Orange" />
+     * <Checkbox store={checkbox} value="Watermelon" />
+     * ```
+     */
+    value?: string | number;
+    /**
+     * The `checked` state of the checkbox. This will override the value inferred
+     * from `store` prop, if provided. This can be `"mixed"` to indicate that the
+     * checkbox is partially checked.
+     */
+    checked?: "mixed" | boolean;
+    /**
+     * The default `checked` state of the checkbox. This prop is ignored if the
+     * `checked` or the `store` props are provided.
+     */
+    defaultChecked?: "mixed" | boolean;
+    /**
+     * A function that is called when the checkbox's `checked` store changes.
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export type CheckboxProps<T extends As = "input"> = Props<CheckboxOptions<T>>;