@ariakit/react-core 0.3.14 → 0.4.1

package/esm/__chunks/NERBASET.js

@@ -1,539 +0,0 @@
-"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
-};

package/esm/__chunks/NT7GEZQU.js

@@ -1,44 +0,0 @@
-"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
-};

package/esm/__chunks/P4FX6ZFL.js

@@ -1,51 +0,0 @@
-"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
-};

package/esm/__chunks/R2QZ3KXH.js

@@ -1,44 +0,0 @@
-"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
-};

package/esm/__chunks/RJDEYIKS.js

@@ -1,29 +0,0 @@
-"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
-};