@ariakit/react-core 0.0.1 → 0.1.0

package/dialog/dialog-heading/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/dialog/dialog-heading",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/dialog/dialog-heading",
+  "module": "../../esm/dialog/dialog-heading"
+}

package/dialog/dialog-store/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/dialog/dialog-store",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/dialog/dialog-store",
+  "module": "../../esm/dialog/dialog-store"
+}

package/dialog/utils/disable-accessibility-tree-outside/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/dialog/utils/disable-accessibility-tree-outside",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/dialog/utils/disable-accessibility-tree-outside",
+  "module": "../../../esm/dialog/utils/disable-accessibility-tree-outside"
+}

package/dialog/utils/disable-pointer-events-outside/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/dialog/utils/disable-pointer-events-outside",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/dialog/utils/disable-pointer-events-outside",
+  "module": "../../../esm/dialog/utils/disable-pointer-events-outside"
+}

package/dialog/utils/prepend-hidden-dismiss/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/dialog/utils/prepend-hidden-dismiss",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/dialog/utils/prepend-hidden-dismiss",
+  "module": "../../../esm/dialog/utils/prepend-hidden-dismiss"
+}

package/dialog/utils/use-champion-dialog/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/dialog/utils/use-champion-dialog",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/dialog/utils/use-champion-dialog",
+  "module": "../../../esm/dialog/utils/use-champion-dialog"
+}

package/dialog/utils/use-focus-on-child-unmount/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/dialog/utils/use-focus-on-child-unmount",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/dialog/utils/use-focus-on-child-unmount",
+  "module": "../../../esm/dialog/utils/use-focus-on-child-unmount"
+}

package/dialog/utils/use-hide-on-interact-outside/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/dialog/utils/use-hide-on-interact-outside",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/dialog/utils/use-hide-on-interact-outside",
+  "module": "../../../esm/dialog/utils/use-hide-on-interact-outside"
+}

package/dialog/utils/use-nested-dialogs/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/dialog/utils/use-nested-dialogs",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/dialog/utils/use-nested-dialogs",
+  "module": "../../../esm/dialog/utils/use-nested-dialogs"
+}

package/dialog/utils/use-prevent-body-scroll/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/dialog/utils/use-prevent-body-scroll",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/dialog/utils/use-prevent-body-scroll",
+  "module": "../../../esm/dialog/utils/use-prevent-body-scroll"
+}

package/dialog/utils/use-previous-mouse-down-ref/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/dialog/utils/use-previous-mouse-down-ref",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/dialog/utils/use-previous-mouse-down-ref",
+  "module": "../../../esm/dialog/utils/use-previous-mouse-down-ref"
+}

package/dialog/utils/walk-tree-outside/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/dialog/utils/walk-tree-outside",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/dialog/utils/walk-tree-outside",
+  "module": "../../../esm/dialog/utils/walk-tree-outside"
+}

package/disclosure/disclosure/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/disclosure/disclosure",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/disclosure/disclosure",
+  "module": "../../esm/disclosure/disclosure"
+}

package/disclosure/disclosure-content/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/disclosure/disclosure-content",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/disclosure/disclosure-content",
+  "module": "../../esm/disclosure/disclosure-content"
+}

package/disclosure/disclosure-store/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/disclosure/disclosure-store",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/disclosure/disclosure-store",
+  "module": "../../esm/disclosure/disclosure-store"
+}

package/esm/__chunks/2EP53RLR.js

@@ -0,0 +1,39 @@
+import {
+  useCollectionStoreOptions,
+  useCollectionStoreProps
+} from "./56XURSTF.js";
+import {
+  useStore,
+  useStoreProps
+} from "./6DAEYZ43.js";
+
+// src/composite/composite-store.ts
+import * as Core from "@ariakit/core/composite/composite-store";
+function useCompositeStoreOptions(props) {
+  return useCollectionStoreOptions(props);
+}
+function useCompositeStoreProps(store, props) {
+  store = useCollectionStoreProps(store, 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 options = useCompositeStoreOptions(props);
+  const store = useStore(
+    () => Core.createCompositeStore({ ...props, ...options })
+  );
+  return useCompositeStoreProps(store, props);
+}
+
+export {
+  useCompositeStoreOptions,
+  useCompositeStoreProps,
+  useCompositeStore
+};

package/esm/__chunks/2SVAPVVI.js

@@ -0,0 +1,78 @@
+import {
+  FocusTrap
+} from "./NDTB3OGK.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useForkRef,
+  useWrapElement
+} from "./B7MIN7YT.js";
+
+// src/focus-trap/focus-trap-region.tsx
+import { useRef } from "react";
+import { getAllTabbableIn } from "@ariakit/core/utils/focus";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var useFocusTrapRegion = createHook(
+  ({ enabled = false, ...props }) => {
+    const ref = useRef(null);
+    props = useWrapElement(
+      props,
+      (element) => {
+        const renderFocusTrap = () => {
+          if (!enabled)
+            return null;
+          return /* @__PURE__ */ jsx(
+            FocusTrap,
+            {
+              onFocus: (event) => {
+                const container = ref.current;
+                if (!container)
+                  return;
+                const tabbables = getAllTabbableIn(container, true);
+                const first = tabbables[0];
+                const last = tabbables[tabbables.length - 1];
+                if (!tabbables.length) {
+                  container.focus();
+                  return;
+                }
+                if (event.relatedTarget === first) {
+                  last?.focus();
+                } else {
+                  first?.focus();
+                }
+              }
+            }
+          );
+        };
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderFocusTrap(),
+          element,
+          renderFocusTrap()
+        ] });
+      },
+      [enabled]
+    );
+    props = {
+      ...props,
+      ref: useForkRef(ref, props.ref)
+    };
+    return props;
+  }
+);
+var FocusTrapRegion = createComponent(
+  (props) => {
+    const htmlProps = useFocusTrapRegion(props);
+    return createElement("div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  FocusTrapRegion.displayName = "FocusTrapRegion";
+}
+
+export {
+  useFocusTrapRegion,
+  FocusTrapRegion
+};

package/esm/__chunks/3OSYJZM5.js

@@ -0,0 +1,213 @@
+import {
+  FocusTrap
+} from "./NDTB3OGK.js";
+import {
+  PortalContext
+} from "./LDDPB3PY.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useForkRef,
+  useSafeLayoutEffect,
+  useWrapElement
+} from "./B7MIN7YT.js";
+import {
+  setRef
+} from "./SXC6BPOF.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?.focus();
+  });
+}
+var usePortal = createHook(
+  ({ preserveTabOrder, portalElement, portalRef, portal = true, ...props }) => {
+    const ref = useRef(null);
+    const refProp = useForkRef(ref, props.ref);
+    const context = useContext(PortalContext);
+    const [portalNode, setPortalNode] = useState(null);
+    const beforeOutsideRef = useRef(null);
+    const beforeInsideRef = useRef(null);
+    const afterInsideRef = useRef(null);
+    const afterOutsideRef = 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 ? `${element.id}-portal` : getRandomId();
+      }
+      setPortalNode(portalEl);
+      setRef(portalRef, portalEl);
+      if (isPortalInDocument)
+        return;
+      return () => {
+        portalEl.remove();
+        setRef(portalRef, null);
+      };
+    }, [portal, portalElement, context, portalRef]);
+    useEffect(() => {
+      if (!portalNode)
+        return;
+      if (!preserveTabOrder)
+        return;
+      let raf = 0;
+      const onFocus = (event) => {
+        if (!isFocusEventOutside(event))
+          return;
+        const focusing = event.type === "focusin";
+        if (focusing)
+          return restoreFocusIn(portalNode);
+        cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(() => {
+          disableFocusIn(portalNode, true);
+        });
+      };
+      portalNode.addEventListener("focusin", onFocus, true);
+      portalNode.addEventListener("focusout", onFocus, true);
+      return () => {
+        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" } });
+        }
+        element = /* @__PURE__ */ jsxs(Fragment, { children: [
+          preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
+            FocusTrap,
+            {
+              ref: beforeInsideRef,
+              onFocus: (event) => {
+                if (isFocusEventOutside(event, portalNode)) {
+                  queueFocus(getNextTabbable());
+                } else {
+                  queueFocus(beforeOutsideRef.current);
+                }
+              }
+            }
+          ),
+          element,
+          preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
+            FocusTrap,
+            {
+              ref: afterInsideRef,
+              onFocus: (event) => {
+                if (isFocusEventOutside(event, portalNode)) {
+                  queueFocus(getPreviousTabbable());
+                } else {
+                  queueFocus(afterOutsideRef.current);
+                }
+              }
+            }
+          )
+        ] });
+        if (portalNode) {
+          element = createPortal(element, portalNode);
+        }
+        element = /* @__PURE__ */ jsxs(Fragment, { children: [
+          preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
+            FocusTrap,
+            {
+              ref: beforeOutsideRef,
+              onFocus: (event) => {
+                if (isFocusEventOutside(event, portalNode)) {
+                  queueFocus(beforeInsideRef.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?.id, style: { position: "fixed" } }),
+          element,
+          preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
+            FocusTrap,
+            {
+              ref: afterOutsideRef,
+              onFocus: (event) => {
+                if (isFocusEventOutside(event, portalNode)) {
+                  queueFocus(afterInsideRef.current);
+                } else {
+                  queueFocus(getNextTabbable());
+                }
+              }
+            }
+          )
+        ] });
+        return element;
+      },
+      [portalNode, context, portal, props.id, preserveTabOrder]
+    );
+    props = {
+      ...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
+};

package/esm/__chunks/47TE2UD5.js

@@ -0,0 +1,29 @@
+import {
+  usePopoverStoreOptions,
+  usePopoverStoreProps
+} from "./RSJJ72ZD.js";
+import {
+  useStore
+} from "./6DAEYZ43.js";
+
+// src/hovercard/hovercard-store.ts
+import * as Core from "@ariakit/core/hovercard/hovercard-store";
+function useHovercardStoreOptions(props) {
+  return usePopoverStoreOptions(props);
+}
+function useHovercardStoreProps(store, props) {
+  return usePopoverStoreProps(store, props);
+}
+function useHovercardStore(props = {}) {
+  const options = useHovercardStoreOptions(props);
+  const store = useStore(
+    () => Core.createHovercardStore({ ...props, ...options })
+  );
+  return useHovercardStoreProps(store, props);
+}
+
+export {
+  useHovercardStoreOptions,
+  useHovercardStoreProps,
+  useHovercardStore
+};

package/esm/__chunks/4IVDKH63.js

@@ -0,0 +1,82 @@
+import {
+  useFocusable
+} from "./5TGAWEHD.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useBooleanEvent,
+  useEvent,
+  useForkRef,
+  useIsMouseMoving
+} from "./B7MIN7YT.js";
+
+// src/hovercard/hovercard-anchor.ts
+import { useEffect, useRef } from "react";
+import { addGlobalEventListener } from "@ariakit/core/utils/events";
+var useHovercardAnchor = createHook(
+  ({ store, showOnHover = true, ...props }) => {
+    const disabled = props.disabled || props["aria-disabled"] === true || props["aria-disabled"] === "true";
+    const showTimeoutRef = useRef(0);
+    useEffect(() => () => window.clearTimeout(showTimeoutRef.current), []);
+    useEffect(() => {
+      const onMouseLeave = (event) => {
+        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) => {
+        store.setAnchorElement(event.currentTarget);
+        onMouseMoveProp?.(event);
+        if (disabled)
+          return;
+        if (event.defaultPrevented)
+          return;
+        if (showTimeoutRef.current)
+          return;
+        if (!isMouseMoving())
+          return;
+        if (!showOnHoverProp(event))
+          return;
+        const { showTimeout } = store.getState();
+        showTimeoutRef.current = window.setTimeout(() => {
+          showTimeoutRef.current = 0;
+          store.show();
+        }, showTimeout);
+      }
+    );
+    props = {
+      ...props,
+      ref: useForkRef(store.setAnchorElement, 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
+};