@ariakit/react-core 0.0.1 → 0.1.0

package/esm/__chunks/5TGAWEHD.js

@@ -0,0 +1,354 @@
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useEvent,
+  useForkRef,
+  useTagName
+} from "./B7MIN7YT.js";
+
+// src/focusable/focusable.ts
+import { useEffect, useRef, useState } from "react";
+import { isButton } from "@ariakit/core/utils/dom";
+import {
+  addGlobalEventListener,
+  isFocusEventOutside,
+  isPortalEvent,
+  isSelfTarget,
+  queueBeforeEvent
+} from "@ariakit/core/utils/events";
+import {
+  focusIfNeeded,
+  hasFocus,
+  isFocusable
+} from "@ariakit/core/utils/focus";
+import { isSafari } from "@ariakit/core/utils/platform";
+var isSafariBrowser = isSafari();
+var alwaysFocusVisibleInputTypes = [
+  "text",
+  "search",
+  "url",
+  "tel",
+  "email",
+  "password",
+  "number",
+  "date",
+  "month",
+  "week",
+  "time",
+  "datetime",
+  "datetime-local"
+];
+function isAlwaysFocusVisible(element) {
+  const { tagName, readOnly, type } = element;
+  if (tagName === "TEXTAREA" && !readOnly)
+    return true;
+  if (tagName === "SELECT" && !readOnly)
+    return true;
+  if (tagName === "INPUT" && !readOnly) {
+    return alwaysFocusVisibleInputTypes.includes(type);
+  }
+  if (element.isContentEditable)
+    return true;
+  return false;
+}
+function isAlwaysFocusVisibleDelayed(element) {
+  const role = element.getAttribute("role");
+  if (role !== "combobox")
+    return false;
+  return !!element.dataset.name;
+}
+function getLabels(element) {
+  if ("labels" in element) {
+    return element.labels;
+  }
+  return null;
+}
+function isNativeCheckboxOrRadio(element) {
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === "input" && element.type) {
+    return element.type === "radio" || element.type === "checkbox";
+  }
+  return false;
+}
+function isNativeTabbable(tagName) {
+  if (!tagName)
+    return true;
+  return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "a";
+}
+function supportsDisabledAttribute(tagName) {
+  if (!tagName)
+    return true;
+  return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea";
+}
+function getTabIndex(focusable, trulyDisabled, nativeTabbable, supportsDisabled, tabIndexProp) {
+  if (!focusable) {
+    return tabIndexProp;
+  }
+  if (trulyDisabled) {
+    if (nativeTabbable && !supportsDisabled) {
+      return -1;
+    }
+    return;
+  }
+  if (nativeTabbable) {
+    return tabIndexProp;
+  }
+  return tabIndexProp || 0;
+}
+function useDisableEvent(onEvent, disabled) {
+  return useEvent((event) => {
+    onEvent?.(event);
+    if (event.defaultPrevented)
+      return;
+    if (disabled) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  });
+}
+var isKeyboardModality = true;
+function onGlobalMouseDown(event) {
+  const target = event.target;
+  if (target && "hasAttribute" in target) {
+    if (!target.hasAttribute("data-focus-visible")) {
+      isKeyboardModality = false;
+    }
+  }
+}
+function onGlobalKeyDown(event) {
+  if (event.metaKey)
+    return;
+  if (event.ctrlKey)
+    return;
+  isKeyboardModality = true;
+}
+var useFocusable = createHook(
+  ({
+    focusable = true,
+    accessibleWhenDisabled,
+    autoFocus,
+    onFocusVisible,
+    ...props
+  }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+      if (!focusable)
+        return;
+      addGlobalEventListener("mousedown", onGlobalMouseDown, true);
+      addGlobalEventListener("keydown", onGlobalKeyDown, true);
+    }, [focusable]);
+    if (isSafariBrowser) {
+      useEffect(() => {
+        if (!focusable)
+          return;
+        const element = ref.current;
+        if (!element)
+          return;
+        if (!isNativeCheckboxOrRadio(element))
+          return;
+        const labels = getLabels(element);
+        if (!labels)
+          return;
+        const onMouseUp = () => queueMicrotask(() => element.focus());
+        labels.forEach((label) => label.addEventListener("mouseup", onMouseUp));
+        return () => {
+          labels.forEach(
+            (label) => label.removeEventListener("mouseup", onMouseUp)
+          );
+        };
+      }, [focusable]);
+    }
+    const disabled = focusable && props.disabled;
+    const trulyDisabled = !!disabled && !accessibleWhenDisabled;
+    const [focusVisible, setFocusVisible] = useState(false);
+    useEffect(() => {
+      if (!focusable)
+        return;
+      if (trulyDisabled && focusVisible) {
+        setFocusVisible(false);
+      }
+    }, [focusable, trulyDisabled, focusVisible]);
+    useEffect(() => {
+      if (!focusable)
+        return;
+      if (!focusVisible)
+        return;
+      const element = ref.current;
+      if (!element)
+        return;
+      if (typeof IntersectionObserver === "undefined")
+        return;
+      const observer = new IntersectionObserver(() => {
+        if (!isFocusable(element)) {
+          setFocusVisible(false);
+        }
+      });
+      observer.observe(element);
+      return () => observer.disconnect();
+    }, [focusable, focusVisible]);
+    const onKeyPressCapture = useDisableEvent(
+      props.onKeyPressCapture,
+      disabled
+    );
+    const onMouseDownCapture = useDisableEvent(
+      props.onMouseDownCapture,
+      disabled
+    );
+    const onClickCapture = useDisableEvent(props.onClickCapture, disabled);
+    const onMouseDownProp = props.onMouseDown;
+    const onMouseDown = useEvent((event) => {
+      onMouseDownProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (!focusable)
+        return;
+      const element = event.currentTarget;
+      if (!isSafariBrowser)
+        return;
+      if (isPortalEvent(event))
+        return;
+      if (!isButton(element) && !isNativeCheckboxOrRadio(element))
+        return;
+      let receivedFocus = false;
+      const onFocus = () => {
+        receivedFocus = true;
+      };
+      const options = { capture: true, once: true };
+      document.body.addEventListener("focusin", onFocus, options);
+      queueBeforeEvent(element, "mouseup", () => {
+        element.removeEventListener("focusin", onFocus, true);
+        if (receivedFocus)
+          return;
+        focusIfNeeded(element);
+      });
+    });
+    const handleFocusVisible = (event, currentTarget) => {
+      if (currentTarget) {
+        event.currentTarget = currentTarget;
+      }
+      onFocusVisible?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (!focusable)
+        return;
+      const element = event.currentTarget;
+      if (!element)
+        return;
+      if (!hasFocus(element))
+        return;
+      setFocusVisible(true);
+    };
+    const onKeyDownCaptureProp = props.onKeyDownCapture;
+    const onKeyDownCapture = useEvent(
+      (event) => {
+        onKeyDownCaptureProp?.(event);
+        if (event.defaultPrevented)
+          return;
+        if (!focusable)
+          return;
+        if (focusVisible)
+          return;
+        if (event.metaKey)
+          return;
+        if (event.altKey)
+          return;
+        if (event.ctrlKey)
+          return;
+        if (!isSelfTarget(event))
+          return;
+        const element = event.currentTarget;
+        queueMicrotask(() => handleFocusVisible(event, element));
+      }
+    );
+    const onFocusCaptureProp = props.onFocusCapture;
+    const onFocusCapture = useEvent((event) => {
+      onFocusCaptureProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (!focusable)
+        return;
+      if (!isSelfTarget(event)) {
+        setFocusVisible(false);
+        return;
+      }
+      const element = event.currentTarget;
+      const applyFocusVisible = () => handleFocusVisible(event, element);
+      if (isKeyboardModality || isAlwaysFocusVisible(event.target)) {
+        queueMicrotask(applyFocusVisible);
+      } else if (isAlwaysFocusVisibleDelayed(event.target)) {
+        queueBeforeEvent(event.target, "focusout", applyFocusVisible);
+      } else {
+        setFocusVisible(false);
+      }
+    });
+    const onBlurProp = props.onBlur;
+    const onBlur = useEvent((event) => {
+      onBlurProp?.(event);
+      if (!focusable)
+        return;
+      if (isFocusEventOutside(event)) {
+        setFocusVisible(false);
+      }
+    });
+    const autoFocusRef = useEvent((element) => {
+      if (!focusable)
+        return;
+      if (!autoFocus)
+        return;
+      if (!element)
+        return;
+      queueMicrotask(() => {
+        if (hasFocus(element))
+          return;
+        if (!isFocusable(element))
+          return;
+        element.focus();
+      });
+    });
+    const tagName = useTagName(ref, props.as);
+    const nativeTabbable = focusable && isNativeTabbable(tagName);
+    const supportsDisabled = focusable && supportsDisabledAttribute(tagName);
+    const style = trulyDisabled ? { pointerEvents: "none", ...props.style } : props.style;
+    props = {
+      "data-focus-visible": focusable && focusVisible ? "" : void 0,
+      "data-autofocus": autoFocus ? true : void 0,
+      "aria-disabled": disabled ? true : void 0,
+      ...props,
+      ref: useForkRef(ref, autoFocusRef, props.ref),
+      style,
+      tabIndex: getTabIndex(
+        focusable,
+        trulyDisabled,
+        nativeTabbable,
+        supportsDisabled,
+        props.tabIndex
+      ),
+      disabled: supportsDisabled && trulyDisabled ? true : void 0,
+      // TODO: Test Focusable contentEditable.
+      contentEditable: disabled ? void 0 : props.contentEditable,
+      onKeyPressCapture,
+      onClickCapture,
+      onMouseDownCapture,
+      onMouseDown,
+      onKeyDownCapture,
+      onFocusCapture,
+      onBlur
+    };
+    return props;
+  }
+);
+var Focusable = createComponent((props) => {
+  props = useFocusable(props);
+  return createElement("div", props);
+});
+if (process.env.NODE_ENV !== "production") {
+  Focusable.displayName = "Focusable";
+}
+
+export {
+  useFocusable,
+  Focusable
+};

package/esm/__chunks/5VGBBGF5.js

@@ -0,0 +1,13 @@
+// src/combobox/combobox-context.ts
+import { createContext } from "react";
+var ComboboxContext = createContext(
+  void 0
+);
+var ComboboxItemValueContext = createContext(
+  void 0
+);
+
+export {
+  ComboboxContext,
+  ComboboxItemValueContext
+};

package/esm/__chunks/6DAEYZ43.js

@@ -0,0 +1,75 @@
+import {
+  useLazyValue,
+  useLiveRef,
+  useSafeLayoutEffect,
+  useUpdateLayoutEffect
+} from "./B7MIN7YT.js";
+
+// src/utils/store.tsx
+import { useCallback, useMemo } from "react";
+import { hasOwnProperty, identity } from "@ariakit/core/utils/misc";
+import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
+var noopSubscribe = () => () => {
+};
+function useStoreState(store, keyOrSelector = identity) {
+  const getSnapshot = () => {
+    if (!store)
+      return;
+    const state = store.getState();
+    const selector = typeof keyOrSelector === "function" ? keyOrSelector : null;
+    const key = typeof keyOrSelector === "string" ? keyOrSelector : null;
+    if (selector)
+      return selector(state);
+    if (!key)
+      return;
+    if (!hasOwnProperty(state, key))
+      return;
+    return state[key];
+  };
+  return useSyncExternalStore(
+    store?.subscribe || noopSubscribe,
+    getSnapshot,
+    getSnapshot
+  );
+}
+function useStoreProps(store, props, key, setKey) {
+  const value = hasOwnProperty(props, key) ? props[key] : void 0;
+  const propsRef = useLiveRef({
+    value,
+    setValue: setKey ? props[setKey] : void 0
+  });
+  useSafeLayoutEffect(() => {
+    return store.sync(
+      (state, prev) => {
+        const { value: value2, setValue } = propsRef.current;
+        if (value2 !== void 0) {
+          store.setState(key, value2);
+        }
+        if (setValue && state[key] !== prev[key] && state[key] !== value2) {
+          setValue(state[key]);
+        }
+      },
+      [key]
+    );
+  }, [store, key]);
+  useUpdateLayoutEffect(() => {
+    if (value === void 0)
+      return;
+    store.setState(key, value);
+  }, [store, key, value]);
+}
+function useStore(createStore) {
+  const store = useLazyValue(createStore);
+  useSafeLayoutEffect(() => store.init(), []);
+  const useState = useCallback(
+    (keyOrSelector) => useStoreState(store, keyOrSelector),
+    []
+  );
+  return useMemo(() => ({ ...store, useState }), []);
+}
+
+export {
+  useStoreState,
+  useStoreProps,
+  useStore
+};

package/esm/__chunks/6GS36SYX.js

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

package/esm/__chunks/6I2PARRP.js

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

package/esm/__chunks/6OCAIYRY.js

@@ -0,0 +1,130 @@
+import {
+  flipItems
+} from "./STKLF26R.js";
+import {
+  CompositeContext
+} from "./Z3X3QN6P.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useEvent
+} from "./B7MIN7YT.js";
+
+// src/composite/composite-typeahead.ts
+import { useContext, useRef } from "react";
+import { isTextField } from "@ariakit/core/utils/dom";
+import { isSelfTarget } from "@ariakit/core/utils/events";
+import { invariant, normalizeString } from "@ariakit/core/utils/misc";
+var chars = "";
+function clearChars() {
+  chars = "";
+}
+function isValidTypeaheadEvent(event) {
+  const target = event.target;
+  if (target && isTextField(target))
+    return false;
+  if (event.key === " " && chars.length)
+    return true;
+  return event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey && /^[\p{Letter}\p{Number}]$/u.test(event.key);
+}
+function isSelfTargetOrItem(event, items) {
+  if (isSelfTarget(event))
+    return true;
+  const target = event.target;
+  if (!target)
+    return false;
+  const isItem = items.some((item) => item.element === target);
+  return isItem;
+}
+function getEnabledItems(items) {
+  return items.filter((item) => !item.disabled);
+}
+function itemTextStartsWith(item, text) {
+  const itemText = item.element?.textContent || item.children;
+  if (!itemText)
+    return false;
+  return normalizeString(itemText).toLowerCase().startsWith(text.toLowerCase());
+}
+function getSameInitialItems(items, char, activeId) {
+  if (!activeId)
+    return items;
+  const activeItem = items.find((item) => item.id === activeId);
+  if (!activeItem)
+    return items;
+  if (!itemTextStartsWith(activeItem, char))
+    return items;
+  if (chars !== char && itemTextStartsWith(activeItem, chars))
+    return items;
+  chars = char;
+  return flipItems(
+    items.filter((item) => itemTextStartsWith(item, chars)),
+    activeId
+  ).filter((item) => item.id !== activeId);
+}
+var useCompositeTypeahead = createHook(
+  ({ store, typeahead = true, ...props }) => {
+    const context = useContext(CompositeContext);
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "CompositeTypeahead must be a Composite component"
+    );
+    const onKeyDownCaptureProp = props.onKeyDownCapture;
+    const cleanupTimeoutRef = useRef(0);
+    const onKeyDownCapture = useEvent(
+      (event) => {
+        onKeyDownCaptureProp?.(event);
+        if (event.defaultPrevented)
+          return;
+        if (!typeahead)
+          return;
+        if (!store)
+          return;
+        const { items, activeId } = store.getState();
+        if (!isValidTypeaheadEvent(event))
+          return clearChars();
+        let enabledItems = getEnabledItems(items);
+        if (!isSelfTargetOrItem(event, enabledItems))
+          return clearChars();
+        event.preventDefault();
+        window.clearTimeout(cleanupTimeoutRef.current);
+        cleanupTimeoutRef.current = window.setTimeout(() => {
+          chars = "";
+        }, 500);
+        const char = event.key.toLowerCase();
+        chars += char;
+        enabledItems = getSameInitialItems(enabledItems, char, activeId);
+        const item = enabledItems.find(
+          (item2) => itemTextStartsWith(item2, chars)
+        );
+        if (item) {
+          store.move(item.id);
+        } else {
+          clearChars();
+        }
+      }
+    );
+    props = {
+      ...props,
+      onKeyDownCapture
+    };
+    return props;
+  }
+);
+var CompositeTypeahead = createComponent(
+  (props) => {
+    const htmlProps = useCompositeTypeahead(props);
+    return createElement("div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  CompositeTypeahead.displayName = "CompositeTypeahead";
+}
+
+export {
+  useCompositeTypeahead,
+  CompositeTypeahead
+};

package/esm/__chunks/6OMX4H3W.js

@@ -0,0 +1,19 @@
+import {
+  HeadingContext
+} from "./COQHFAEN.js";
+
+// src/heading/heading-level.tsx
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+function HeadingLevel({ level, children }) {
+  const contextLevel = useContext(HeadingContext);
+  const nextLevel = Math.max(
+    Math.min(level || contextLevel + 1, 6),
+    1
+  );
+  return /* @__PURE__ */ jsx(HeadingContext.Provider, { value: nextLevel, children });
+}
+
+export {
+  HeadingLevel
+};

package/esm/__chunks/6THLPTJO.js

@@ -0,0 +1,73 @@
+import {
+  useButton
+} from "./I4MLEPTM.js";
+import {
+  DialogContext
+} from "./LNHZLQEK.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useEvent
+} from "./B7MIN7YT.js";
+
+// src/dialog/dialog-dismiss.tsx
+import { useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var useDialogDismiss = createHook(
+  ({ store, ...props }) => {
+    const context = useContext(DialogContext);
+    store = store || context;
+    const onClickProp = props.onClick;
+    const onClick = useEvent((event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      store?.hide();
+    });
+    const children = useMemo(
+      () => /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          "aria-label": "Dismiss popup",
+          display: "block",
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "1.5pt",
+          viewBox: "0 0 16 16",
+          height: "1em",
+          width: "1em",
+          children: [
+            /* @__PURE__ */ jsx("line", { x1: "4", y1: "4", x2: "12", y2: "12" }),
+            /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "12", y2: "4" })
+          ]
+        }
+      ),
+      []
+    );
+    props = {
+      "data-dialog-dismiss": "",
+      children,
+      ...props,
+      onClick
+    };
+    props = useButton(props);
+    return props;
+  }
+);
+var DialogDismiss = createComponent((props) => {
+  const htmlProps = useDialogDismiss(props);
+  return createElement("button", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  DialogDismiss.displayName = "DialogDismiss";
+}
+
+export {
+  useDialogDismiss,
+  DialogDismiss
+};

package/esm/__chunks/7JNF6I52.js

@@ -0,0 +1,21 @@
+// src/dialog/utils/use-previous-mouse-down-ref.ts
+import { useEffect, useRef } from "react";
+import { addGlobalEventListener } from "@ariakit/core/utils/events";
+function usePreviousMouseDownRef(enabled) {
+  const previousMouseDownRef = useRef();
+  useEffect(() => {
+    if (!enabled) {
+      previousMouseDownRef.current = null;
+      return;
+    }
+    const onMouseDown = (event) => {
+      previousMouseDownRef.current = event.target;
+    };
+    return addGlobalEventListener("mousedown", onMouseDown, true);
+  }, [enabled]);
+  return previousMouseDownRef;
+}
+
+export {
+  usePreviousMouseDownRef
+};