@ariakit/react-core 0.3.14 → 0.4.0

package/esm/__chunks/SSK5L4K7.js

@@ -0,0 +1,527 @@
+"use client";
+import {
+  DialogBackdrop
+} from "./CJ6B7ETA.js";
+import {
+  disableTree,
+  disableTreeOutside
+} from "./NOYDL3YS.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 {
+  supportsInert
+} from "./677M2CI3.js";
+import {
+  prependHiddenDismiss
+} from "./6GXEOXGT.js";
+import {
+  useFocusableContainer
+} from "./WCIYB4YS.js";
+import {
+  HeadingLevel
+} from "./UYRJLDVS.js";
+import {
+  usePortal
+} from "./CK3UW3AQ.js";
+import {
+  isHidden,
+  useDisclosureContent
+} from "./SOGTNTQC.js";
+import {
+  DialogDescriptionContext,
+  DialogHeadingContext,
+  DialogScopedContextProvider,
+  useDialogProviderContext
+} from "./XXVAHUAO.js";
+import {
+  useFocusable
+} from "./VA234QKF.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  useDialogStore
+} from "./I62TROYO.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 TagName = "div";
+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(function useDialog2(_a) {
+  var _b = _a, {
+    store: storeProp,
+    open: openProp,
+    onClose,
+    focusable = true,
+    modal = true,
+    portal = !!modal,
+    backdrop = !!modal,
+    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",
+    "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]);
+  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 (!supportsInert())
+      return;
+    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,
+            hidden: hiddenProp,
+            alwaysVisible
+          }
+        ),
+        element
+      ] });
+    },
+    [store, backdrop, 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 forwardRef(function DialogComponent(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(
+  forwardRef(function Dialog2(props) {
+    const htmlProps = useDialog(props);
+    return createElement(TagName, htmlProps);
+  }),
+  useDialogProviderContext
+);
+
+export {
+  useDialog,
+  createDialogComponent,
+  Dialog
+};

package/esm/__chunks/{FMVHAVXA.js → SVBVYDIK.js}

@@ -1,13 +1,13 @@
 "use client";
 import {
   useComboboxProviderContext
-} from "./W76OTZCC.js";
+} from "./UNDSQXBK.js";
 import {
   useCompositeStoreProps
 } from "./7GBW5FLS.js";
 import {
   usePopoverStoreProps
-} from "./MG4P3223.js";
+} from "./XWCFCD3Q.js";
 import {
   useStore,
   useStoreProps
@@ -24,11 +24,16 @@ import {
 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 });
+  return Object.assign(
+    usePopoverStoreProps(
+      useCompositeStoreProps(store, update, props),
+      update,
+      props
+    ),
+    { combobox: props.combobox }
+  );
 }
 function useSelectStore(props = {}) {
   const combobox = useComboboxProviderContext();

package/esm/__chunks/{7H5KSHHF.js → TE637IA7.js}

@@ -2,10 +2,10 @@
 import {
   DialogContextProvider,
   DialogScopedContextProvider
-} from "./G6BJYYBK.js";
+} from "./XXVAHUAO.js";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/popover/popover-context.tsx
 var ctx = createStoreContext(

package/esm/__chunks/TH2YTBRW.js

@@ -0,0 +1,45 @@
+"use client";
+import {
+  GroupLabelContext
+} from "./3X3MDQGM.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  useId,
+  useSafeLayoutEffect
+} from "./6O5OEQGF.js";
+import {
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/group/group-label.ts
+import { useContext } from "react";
+import { removeUndefinedValues } from "@ariakit/core/utils/misc";
+var TagName = "div";
+var useGroupLabel = createHook(
+  function useGroupLabel2(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 removeUndefinedValues(props);
+  }
+);
+var GroupLabel = forwardRef(function GroupLabel2(props) {
+  const htmlProps = useGroupLabel(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useGroupLabel,
+  GroupLabel
+};

package/esm/__chunks/{5HVNGX6D.js → TKSBJDO3.js}

@@ -2,14 +2,14 @@
 import {
   CompositeContextProvider,
   CompositeScopedContextProvider
-} from "./IB7YUKH5.js";
+} from "./3D6OCOHF.js";
 import {
   PopoverContextProvider,
   PopoverScopedContextProvider
-} from "./7H5KSHHF.js";
+} from "./TE637IA7.js";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/select/select-context.tsx
 import { createContext } from "react";

package/esm/__chunks/{BHEJ6NUH.js → TNUQLYBS.js}

@@ -1,15 +1,15 @@
 "use client";
 import {
   useButton
-} from "./VDNZBO4W.js";
+} from "./ID4VKXL5.js";
 import {
   useDisclosureProviderContext
-} from "./OAYFXAQ2.js";
+} from "./J55AVALY.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -25,9 +25,10 @@ import {
 // src/disclosure/disclosure.ts
 import { useEffect, useRef, useState } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "button";
 var symbol = Symbol("disclosure");
 var useDisclosure = createHook(
-  (_a) => {
+  function useDisclosure2(_a) {
     var _b = _a, { store, toggleOnClick = true } = _b, props = __objRest(_b, ["store", "toggleOnClick"]);
     const context = useDisclosureProviderContext();
     store = store || context;
@@ -73,13 +74,10 @@ var useDisclosure = createHook(
     return props;
   }
 );
-var Disclosure = createComponent((props) => {
+var Disclosure = forwardRef(function Disclosure2(props) {
   const htmlProps = useDisclosure(props);
-  return createElement("button", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Disclosure.displayName = "Disclosure";
-}
 
 export {
   useDisclosure,