@ariakit/react-core 0.0.1 → 0.1.1

package/esm/__chunks/LZKGMRGC.js

@@ -0,0 +1,112 @@
+import {
+  useCompositeTypeahead
+} from "./6OCAIYRY.js";
+import {
+  SelectContext
+} from "./EEVSGAZW.js";
+import {
+  useComposite
+} from "./FXC76SFN.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useBooleanEvent,
+  useEvent,
+  useForkRef,
+  useId,
+  useWrapElement
+} from "./B7MIN7YT.js";
+
+// src/select/select-list.tsx
+import { useEffect, useRef, useState } from "react";
+import { isSelfTarget } from "@ariakit/core/utils/events";
+import { jsx } from "react/jsx-runtime";
+var useSelectList = createHook(
+  ({
+    store,
+    resetOnEscape = true,
+    hideOnEnter = true,
+    focusOnMove = true,
+    composite = true,
+    ...props
+  }) => {
+    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?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (event.key === "Escape" && resetOnEscapeProp(event)) {
+        store.setValue(defaultValue);
+      }
+      if (event.key === " " || event.key === "Enter") {
+        if (isSelfTarget(event) && hideOnEnterProp(event)) {
+          event.preventDefault();
+          store.hide();
+        }
+      }
+    });
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(SelectContext.Provider, { value: store, children: element }),
+      [store]
+    );
+    const labelId = store.useState((state) => state.labelElement?.id);
+    const style = mounted ? props.style : { ...props.style, display: "none" };
+    if (composite) {
+      props = {
+        role: "listbox",
+        "aria-multiselectable": multiSelectable ? true : void 0,
+        ...props
+      };
+    }
+    props = {
+      id,
+      hidden: !mounted,
+      "aria-labelledby": labelId,
+      ...props,
+      ref: useForkRef(id ? store.setContentElement : null, ref, props.ref),
+      style,
+      onKeyDown
+    };
+    const canFocusOnMove = store.useState(
+      (state) => state.open && !state.animating && focusOnMove
+    );
+    props = useComposite({
+      store,
+      ...props,
+      composite,
+      focusOnMove: canFocusOnMove
+    });
+    props = useCompositeTypeahead({ store, ...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
+};

package/esm/__chunks/M5KYRTQG.js

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

package/esm/__chunks/NDTB3OGK.js

@@ -0,0 +1,39 @@
+import {
+  useVisuallyHidden
+} from "./SDULECC7.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+
+// src/focus-trap/focus-trap.ts
+var useFocusTrap = createHook((props) => {
+  props = {
+    "data-focus-trap": "",
+    tabIndex: 0,
+    "aria-hidden": true,
+    ...props,
+    style: {
+      // 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
+};

package/esm/__chunks/NMA53LJC.js

@@ -0,0 +1,44 @@
+import {
+  useSeparator
+} from "./HOVZF3TA.js";
+import {
+  CompositeContext
+} from "./Z3X3QN6P.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+
+// src/composite/composite-separator.ts
+import { useContext } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+var useCompositeSeparator = createHook(
+  ({ store, ...props }) => {
+    const context = useContext(CompositeContext);
+    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({ ...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
+};

package/esm/__chunks/NO5K4U2Q.js

@@ -0,0 +1,437 @@
+import {
+  DialogBackdrop
+} from "./4U6AOLE4.js";
+import {
+  useHideOnInteractOutside
+} from "./HLAXMBLL.js";
+import {
+  useFocusOnChildUnmount
+} from "./WO2RXMKK.js";
+import {
+  prependHiddenDismiss
+} from "./PU22SOKH.js";
+import {
+  disablePointerEventsOutside
+} from "./547F7FFZ.js";
+import {
+  disableAccessibilityTreeOutside
+} from "./NV7HSBKK.js";
+import {
+  useFocusTrapRegion
+} from "./2SVAPVVI.js";
+import {
+  usePreventBodyScroll
+} from "./LFCJQX2O.js";
+import {
+  useChampionDialog
+} from "./ZVCQYVEV.js";
+import {
+  useNestedDialogs
+} from "./EJZ6BVXG.js";
+import {
+  HeadingLevel
+} from "./6OMX4H3W.js";
+import {
+  DialogContext,
+  DialogDescriptionContext,
+  DialogHeadingContext
+} from "./LNHZLQEK.js";
+import {
+  useFocusable
+} from "./5TGAWEHD.js";
+import {
+  usePortal
+} from "./3OSYJZM5.js";
+import {
+  useDisclosureContent
+} from "./FFRIGW5T.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useBooleanEvent,
+  useForkRef,
+  useId,
+  useLiveRef,
+  usePortalRef,
+  useSafeLayoutEffect,
+  useWrapElement
+} from "./B7MIN7YT.js";
+
+// src/dialog/dialog.tsx
+import { 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 { jsx } from "react/jsx-runtime";
+var isSafariBrowser = isSafari();
+function isBackdrop(dialog, element) {
+  const id = dialog.id;
+  if (!id)
+    return;
+  return element.getAttribute("data-backdrop") === id;
+}
+function isInDialog(element) {
+  return (dialog) => dialog && contains(dialog, element);
+}
+function isAlreadyFocusingAnotherElement(dialog, nestedDialogs) {
+  const activeElement = getActiveElement();
+  if (!activeElement)
+    return false;
+  if (contains(dialog, activeElement))
+    return false;
+  if (isBackdrop(dialog, activeElement))
+    return false;
+  if (nestedDialogs?.some(isInDialog(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(
+  ({
+    store,
+    focusable = true,
+    modal = true,
+    portal = !!modal,
+    backdrop = !!modal,
+    backdropProps,
+    hideOnEscape = true,
+    hideOnInteractOutside = true,
+    preventBodyScroll = !!modal,
+    autoFocusOnShow = true,
+    autoFocusOnHide = true,
+    initialFocus,
+    finalFocus,
+    ...props
+  }) => {
+    const ref = useRef(null);
+    const { portalRef, portalNode, domReady } = usePortalRef(
+      portal,
+      props.portalRef
+    );
+    const preserveTabOrderProp = props.preserveTabOrder;
+    const preserveTabOrder = store.useState(
+      (state) => preserveTabOrderProp && !modal && state.mounted
+    );
+    const open = store.useState("open");
+    const openRef = useRef(open);
+    const shouldDisableAccessibilityTree = modal || portal && preserveTabOrder && isSafari();
+    const id = useId(props.id);
+    const contentElement = store.useState("contentElement");
+    useEffect(() => {
+      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);
+    }, [open]);
+    const nested = useNestedDialogs(store, modal);
+    const { nestedDialogs, openModals, wrapElement } = nested;
+    const nestedDialogsRef = useLiveRef(nestedDialogs);
+    const shouldPreventBodyScroll = store.useState(
+      (state) => preventBodyScroll && state.mounted
+    );
+    usePreventBodyScroll(store, shouldPreventBodyScroll);
+    useFocusOnChildUnmount(store);
+    useHideOnInteractOutside({
+      store,
+      modal,
+      hideOnInteractOutside,
+      nestedDialogs
+    });
+    const mounted = store.useState("mounted");
+    if (isSafariBrowser) {
+      useEffect(() => {
+        if (!mounted)
+          return;
+        const disclosure = store.getState().disclosureElement;
+        if (!disclosure)
+          return;
+        if (!isButton(disclosure))
+          return;
+        const onMouseDown = () => {
+          let receivedFocus = false;
+          const onFocus = () => {
+            receivedFocus = true;
+          };
+          const options = { capture: true, once: true };
+          disclosure.addEventListener("focusin", onFocus, options);
+          queueBeforeEvent(disclosure, "mouseup", () => {
+            disclosure.removeEventListener("focusin", onFocus, true);
+            if (receivedFocus)
+              return;
+            focusIfNeeded(disclosure);
+          });
+        };
+        disclosure.addEventListener("mousedown", onMouseDown);
+        return () => {
+          disclosure.removeEventListener("mousedown", onMouseDown);
+        };
+      }, [mounted]);
+    }
+    useEffect(() => {
+      if (!mounted)
+        return;
+      if (!domReady)
+        return;
+      const dialog = ref.current;
+      if (!dialog)
+        return;
+      if (!shouldDisableAccessibilityTree)
+        return;
+      const existingDismiss = dialog.querySelector("[data-dialog-dismiss]");
+      if (existingDismiss)
+        return;
+      return prependHiddenDismiss(dialog, store.hide);
+    }, [mounted, domReady, shouldDisableAccessibilityTree]);
+    const shouldDisableOutside = useChampionDialog(
+      "data-dialog-disable-outside",
+      store,
+      open && !openModals.length && shouldDisableAccessibilityTree
+    );
+    useSafeLayoutEffect(() => {
+      if (!shouldDisableOutside())
+        return;
+      const element = portal ? portalNode : ref.current;
+      if (modal) {
+        return chain(
+          disableAccessibilityTreeOutside(element),
+          // When the backdrop is not visible, we also need to disable pointer
+          // events outside of the modal dialog.
+          !backdrop ? disablePointerEventsOutside(element) : null
+        );
+      }
+      return disableAccessibilityTreeOutside(element);
+    }, [shouldDisableOutside, portal, portalNode, modal, backdrop]);
+    const mayAutoFocusOnShow = !!autoFocusOnShow;
+    const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow);
+    useEffect(() => {
+      if (!open)
+        return;
+      if (!mayAutoFocusOnShow)
+        return;
+      if (!domReady)
+        return;
+      const hasNestedOpenDialog = nestedDialogsRef.current?.some(
+        (dialog2) => !dialog2.hidden
+      );
+      if (hasNestedOpenDialog)
+        return;
+      const dialog = contentElement;
+      if (!dialog?.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.
+      dialog.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(dialog, true, portal && preserveTabOrder) || dialog;
+      if (!autoFocusOnShowProp(element))
+        return;
+      element.focus();
+    }, [
+      contentElement,
+      open,
+      mayAutoFocusOnShow,
+      domReady,
+      initialFocus,
+      portal,
+      preserveTabOrder,
+      autoFocusOnShowProp
+    ]);
+    const mayAutoFocusOnHide = !!autoFocusOnHide;
+    const autoFocusOnHideProp = useBooleanEvent(autoFocusOnHide);
+    useSafeLayoutEffect(() => {
+      const prevOpen = openRef.current;
+      openRef.current = open;
+      if (!prevOpen)
+        return;
+      if (!mayAutoFocusOnHide)
+        return;
+      const focusOnHide = () => {
+        const dialog = ref.current;
+        if (!dialog)
+          return;
+        const dialogs = nestedDialogsRef.current;
+        if (isAlreadyFocusingAnotherElement(dialog, dialogs))
+          return;
+        let element = getElementFromProp(finalFocus) || store.getState().disclosureElement;
+        if (element) {
+          if (element.id) {
+            const doc = getDocument(element);
+            const selector = `[aria-activedescendant="${element.id}"]`;
+            const composite = doc.querySelector(selector);
+            if (composite) {
+              element = composite;
+            }
+          }
+          if (!isFocusable(element)) {
+            const parentDialog = closest(element, "[data-dialog]");
+            if (parentDialog && parentDialog.id) {
+              const doc = getDocument(parentDialog);
+              const selector = `[aria-controls~="${parentDialog.id}"]`;
+              const control = doc.querySelector(selector);
+              if (control) {
+                element = control;
+              }
+            }
+          }
+          if (!autoFocusOnHideProp(element))
+            return;
+          element.focus();
+        }
+      };
+      if (!open) {
+        return focusOnHide();
+      }
+      return focusOnHide;
+    }, [open, mayAutoFocusOnHide, finalFocus, autoFocusOnHideProp]);
+    const hideOnEscapeProp = useBooleanEvent(hideOnEscape);
+    useEffect(() => {
+      if (!domReady)
+        return;
+      if (!mounted)
+        return;
+      const onKeyDown = (event) => {
+        const dialog = ref.current;
+        if (!dialog)
+          return;
+        const target = event.target;
+        const disclosure = store.getState().disclosureElement;
+        if (event.key !== "Escape")
+          return;
+        if (event.defaultPrevented)
+          return;
+        if (!target)
+          return;
+        const isValidTarget = () => {
+          if (contains(dialog, target)) {
+            const dialogs = nestedDialogsRef.current;
+            const inNestedDialog = dialogs.some(isInDialog(target));
+            if (inNestedDialog)
+              return false;
+            return true;
+          }
+          if (disclosure && contains(disclosure, target))
+            return true;
+          return false;
+        };
+        if (isValidTarget() && hideOnEscapeProp(event)) {
+          store.hide();
+        }
+      };
+      return addGlobalEventListener("keydown", onKeyDown);
+    }, [mounted, domReady, hideOnEscapeProp]);
+    props = useWrapElement(props, wrapElement, [wrapElement]);
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(HeadingLevel, { level: modal ? 1 : void 0, children: element }),
+      [modal]
+    );
+    const shouldFocusTrap = store.useState(
+      (state) => modal && !openModals.length && state.open
+    );
+    props = useFocusTrapRegion({ ...props, enabled: shouldFocusTrap });
+    const hiddenProp = props.hidden;
+    props = useWrapElement(
+      props,
+      (element) => {
+        if (backdrop) {
+          return /* @__PURE__ */ jsx(
+            DialogBackdrop,
+            {
+              store,
+              backdrop,
+              backdropProps,
+              hideOnInteractOutside,
+              hideOnEscape,
+              hidden: hiddenProp,
+              children: element
+            }
+          );
+        }
+        return element;
+      },
+      [
+        store,
+        backdrop,
+        backdropProps,
+        hideOnInteractOutside,
+        hideOnEscape,
+        hiddenProp
+      ]
+    );
+    const [headingId, setHeadingId] = useState();
+    const [descriptionId, setDescriptionId] = useState();
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(DialogContext.Provider, { value: store, children: /* @__PURE__ */ jsx(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ jsx(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }),
+      [store]
+    );
+    props = {
+      id,
+      "data-dialog": "",
+      role: "dialog",
+      tabIndex: focusable ? -1 : void 0,
+      "aria-labelledby": headingId,
+      "aria-describedby": descriptionId,
+      ...props,
+      ref: useForkRef(ref, props.ref)
+    };
+    props = useDisclosureContent({ store, ...props });
+    props = useFocusable({ ...props, focusable });
+    props = usePortal({ portal, ...props, portalRef, preserveTabOrder });
+    return props;
+  }
+);
+var Dialog = createComponent((props) => {
+  const htmlProps = useDialog(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  Dialog.displayName = "Dialog";
+}
+
+export {
+  useDialog,
+  Dialog
+};

package/esm/__chunks/NRA7DRSD.js

@@ -0,0 +1,30 @@
+import {
+  useDisclosure
+} from "./57UTLR6J.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+
+// src/dialog/dialog-disclosure.ts
+var useDialogDisclosure = createHook(
+  ({ store, ...props }) => {
+    props = useDisclosure({ 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
+};

package/esm/__chunks/NV7HSBKK.js

@@ -0,0 +1,31 @@
+import {
+  walkTreeOutside
+} from "./HVXLVRRR.js";
+
+// src/dialog/utils/disable-accessibility-tree-outside.ts
+function disableElement(element) {
+  const previousAriaHidden = element.getAttribute("aria-hidden") || "";
+  element.setAttribute("aria-hidden", "true");
+  const enableElement = () => {
+    if (previousAriaHidden) {
+      element.setAttribute("aria-hidden", previousAriaHidden);
+    } else {
+      element.removeAttribute("aria-hidden");
+    }
+  };
+  return enableElement;
+}
+function disableAccessibilityTreeOutside(...elements) {
+  const cleanups = [];
+  walkTreeOutside(elements, (element) => {
+    cleanups.unshift(disableElement(element));
+  });
+  const restoreAccessibilityTree = () => {
+    cleanups.forEach((fn) => fn());
+  };
+  return restoreAccessibilityTree;
+}
+
+export {
+  disableAccessibilityTreeOutside
+};