@ariakit/react-core 0.0.1 → 0.1.1

package/esm/__chunks/547F7FFZ.js

@@ -0,0 +1,30 @@
+import {
+  walkTreeOutside
+} from "./HVXLVRRR.js";
+
+// src/dialog/utils/disable-pointer-events-outside.ts
+import { noop } from "@ariakit/core/utils/misc";
+function disableElement(element) {
+  if (!("style" in element))
+    return noop;
+  const previousPointerEvents = element.style.pointerEvents;
+  element.style.pointerEvents = "none";
+  const enableElement = () => {
+    element.style.pointerEvents = previousPointerEvents ?? "";
+  };
+  return enableElement;
+}
+function disablePointerEventsOutside(...elements) {
+  const cleanups = [];
+  walkTreeOutside(elements, (element) => {
+    cleanups.unshift(disableElement(element));
+  });
+  const restorePointerEvents = () => {
+    cleanups.forEach((fn) => fn());
+  };
+  return restorePointerEvents;
+}
+
+export {
+  disablePointerEventsOutside
+};

package/esm/__chunks/56XURSTF.js

@@ -0,0 +1,27 @@
+import {
+  useStore,
+  useStoreProps
+} from "./6DAEYZ43.js";
+
+// src/collection/collection-store.ts
+import * as Core from "@ariakit/core/collection/collection-store";
+function useCollectionStoreOptions(_props) {
+  return {};
+}
+function useCollectionStoreProps(store, props) {
+  useStoreProps(store, props, "items", "setItems");
+  return store;
+}
+function useCollectionStore(props = {}) {
+  const options = useCollectionStoreOptions(props);
+  const store = useStore(
+    () => Core.createCollectionStore({ ...props, ...options })
+  );
+  return useCollectionStoreProps(store, props);
+}
+
+export {
+  useCollectionStoreOptions,
+  useCollectionStoreProps,
+  useCollectionStore
+};

package/esm/__chunks/57UTLR6J.js

@@ -0,0 +1,76 @@
+import {
+  useButton
+} from "./I4MLEPTM.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useBooleanEvent,
+  useEvent,
+  useForkRef,
+  useSafeLayoutEffect
+} from "./B7MIN7YT.js";
+
+// src/disclosure/disclosure.ts
+import { useRef, useState } from "react";
+var useDisclosure = createHook(
+  ({ store, toggleOnClick = true, ...props }) => {
+    const ref = useRef(null);
+    const [expanded, setExpanded] = useState(false);
+    const disclosureElement = store.useState("disclosureElement");
+    const open = store.useState("open");
+    useSafeLayoutEffect(() => {
+      let isCurrentDisclosure = disclosureElement === ref.current;
+      if (!disclosureElement || !disclosureElement.isConnected) {
+        store.setDisclosureElement(ref.current);
+        isCurrentDisclosure = true;
+      }
+      setExpanded(open && isCurrentDisclosure);
+    }, [disclosureElement, open]);
+    const onMouseDownProp = props.onMouseDown;
+    const onMouseDown = useEvent((event) => {
+      store.setDisclosureElement(event.currentTarget);
+      onMouseDownProp?.(event);
+    });
+    const onClickProp = props.onClick;
+    const toggleOnClickProp = useBooleanEvent(toggleOnClick);
+    const isDuplicate = "data-disclosure" in props;
+    const onClick = useEvent((event) => {
+      store.setDisclosureElement(event.currentTarget);
+      onClickProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (isDuplicate)
+        return;
+      if (!toggleOnClickProp(event))
+        return;
+      store.toggle();
+    });
+    const contentElement = store.useState("contentElement");
+    props = {
+      "data-disclosure": "",
+      "aria-expanded": expanded,
+      "aria-controls": contentElement?.id,
+      ...props,
+      ref: useForkRef(ref, props.ref),
+      onMouseDown,
+      onClick
+    };
+    props = useButton(props);
+    return props;
+  }
+);
+var Disclosure = createComponent((props) => {
+  const htmlProps = useDisclosure(props);
+  return createElement("button", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  Disclosure.displayName = "Disclosure";
+}
+
+export {
+  useDisclosure,
+  Disclosure
+};

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
+};