@ariakit/core 0.0.1 → 0.1.0

package/esm/__chunks/UVCATTRC.js

@@ -0,0 +1,182 @@
+// src/utils/dom.ts
+var canUseDOM = checkIsBrowser();
+function checkIsBrowser() {
+  return typeof window !== "undefined" && !!window.document?.createElement;
+}
+function getDocument(node) {
+  return node ? node.ownerDocument || node : document;
+}
+function getWindow(node) {
+  return getDocument(node).defaultView || window;
+}
+function getActiveElement(node, activeDescendant = false) {
+  const { activeElement } = getDocument(node);
+  if (!activeElement?.nodeName) {
+    return null;
+  }
+  if (isFrame(activeElement) && activeElement.contentDocument) {
+    return getActiveElement(
+      activeElement.contentDocument.body,
+      activeDescendant
+    );
+  }
+  if (activeDescendant) {
+    const id = activeElement.getAttribute("aria-activedescendant");
+    if (id) {
+      const element = getDocument(activeElement).getElementById(id);
+      if (element) {
+        return element;
+      }
+    }
+  }
+  return activeElement;
+}
+function contains(parent, child) {
+  return parent === child || parent.contains(child);
+}
+function isFrame(element) {
+  return element.tagName === "IFRAME";
+}
+function isButton(element) {
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === "button")
+    return true;
+  if (tagName === "input" && element.type) {
+    return buttonInputTypes.indexOf(element.type) !== -1;
+  }
+  return false;
+}
+var buttonInputTypes = [
+  "button",
+  "color",
+  "file",
+  "image",
+  "reset",
+  "submit"
+];
+function matches(element, selectors) {
+  if ("matches" in element) {
+    return element.matches(selectors);
+  }
+  if ("msMatchesSelector" in element) {
+    return element.msMatchesSelector(selectors);
+  }
+  return element.webkitMatchesSelector(selectors);
+}
+function isVisible(element) {
+  const htmlElement = element;
+  return htmlElement.offsetWidth > 0 || htmlElement.offsetHeight > 0 || element.getClientRects().length > 0;
+}
+function closest(element, selectors) {
+  if ("closest" in element)
+    return element.closest(selectors);
+  do {
+    if (matches(element, selectors))
+      return element;
+    element = element.parentElement || element.parentNode;
+  } while (element !== null && element.nodeType === 1);
+  return null;
+}
+function isTextField(element) {
+  try {
+    const isTextInput = element instanceof HTMLInputElement && element.selectionStart !== null;
+    const isTextArea = element.tagName === "TEXTAREA";
+    return isTextInput || isTextArea || false;
+  } catch (error) {
+    return false;
+  }
+}
+function getPopupRole(element, fallback) {
+  const allowedPopupRoles = ["dialog", "menu", "listbox", "tree", "grid"];
+  const role = element?.getAttribute("role");
+  if (role && allowedPopupRoles.indexOf(role) !== -1) {
+    return role;
+  }
+  return fallback;
+}
+function getPopupItemRole(element, fallback) {
+  const itemRoleByPopupRole = {
+    menu: "menuitem",
+    listbox: "option",
+    tree: "treeitem",
+    grid: "gridcell"
+  };
+  const popupRole = getPopupRole(element);
+  if (!popupRole)
+    return fallback;
+  const key = popupRole;
+  return itemRoleByPopupRole[key] ?? fallback;
+}
+function getTextboxSelection(element) {
+  let start = 0;
+  let end = 0;
+  if (isTextField(element)) {
+    start = element.selectionStart || 0;
+    end = element.selectionEnd || 0;
+  } else if (element.isContentEditable) {
+    const selection = getDocument(element).getSelection();
+    if (selection?.rangeCount && selection.anchorNode && contains(element, selection.anchorNode) && selection.focusNode && contains(element, selection.focusNode)) {
+      const range = selection.getRangeAt(0);
+      const nextRange = range.cloneRange();
+      nextRange.selectNodeContents(element);
+      nextRange.setEnd(range.startContainer, range.startOffset);
+      start = nextRange.toString().length;
+      nextRange.setEnd(range.endContainer, range.endOffset);
+      end = nextRange.toString().length;
+    }
+  }
+  return { start, end };
+}
+function scrollIntoViewIfNeeded(element, arg) {
+  if (isPartiallyHidden(element) && "scrollIntoView" in element) {
+    element.scrollIntoView(arg);
+  }
+}
+function getScrollingElement(element) {
+  if (!element)
+    return null;
+  if (element.clientHeight && element.scrollHeight > element.clientHeight) {
+    const { overflowY } = getComputedStyle(element);
+    const isScrollable = overflowY !== "visible" && overflowY !== "hidden";
+    if (isScrollable)
+      return element;
+  }
+  return getScrollingElement(element.parentElement) || document.scrollingElement || document.body;
+}
+function isPartiallyHidden(element) {
+  const elementRect = element.getBoundingClientRect();
+  const scroller = getScrollingElement(element);
+  if (!scroller)
+    return false;
+  const scrollerRect = scroller.getBoundingClientRect();
+  const isHTML = scroller.tagName === "HTML";
+  const scrollerTop = isHTML ? scrollerRect.top + scroller.scrollTop : scrollerRect.top;
+  const scrollerBottom = isHTML ? scroller.clientHeight : scrollerRect.bottom;
+  const scrollerLeft = isHTML ? scrollerRect.left + scroller.scrollLeft : scrollerRect.left;
+  const scrollerRight = isHTML ? scroller.clientWidth : scrollerRect.right;
+  const top = elementRect.top < scrollerTop;
+  const left = elementRect.left < scrollerLeft;
+  const bottom = elementRect.bottom > scrollerBottom;
+  const right = elementRect.right > scrollerRight;
+  return top || left || bottom || right;
+}
+
+export {
+  canUseDOM,
+  getDocument,
+  getWindow,
+  getActiveElement,
+  contains,
+  isFrame,
+  isButton,
+  matches,
+  isVisible,
+  closest,
+  isTextField,
+  getPopupRole,
+  getPopupItemRole,
+  getTextboxSelection,
+  scrollIntoViewIfNeeded,
+  getScrollingElement,
+  isPartiallyHidden
+};

package/esm/checkbox/checkbox-store.d.ts

@@ -0,0 +1,34 @@
+import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
+import type { PickRequired, SetState, ToPrimitive } from "../utils/types.js";
+type Value = boolean | string | number | Array<string | number>;
+/**
+ * Creates a checkbox store.
+ */
+export declare function createCheckboxStore<T extends Value = Value>(props: PickRequired<CheckboxStoreProps<T>, "value" | "defaultValue">): CheckboxStore<T>;
+export declare function createCheckboxStore(props?: CheckboxStoreProps): CheckboxStore;
+export type CheckboxStoreValue = Value;
+export interface CheckboxStoreState<T extends Value = Value> {
+    /**
+     * The checked state of the checkbox.
+     */
+    value: ToPrimitive<T>;
+}
+export interface CheckboxStoreFunctions<T extends Value = Value> {
+    /**
+     * Sets the `value` state.
+     * @example
+     * store.setValue(true);
+     * store.setValue((value) => !value);
+     */
+    setValue: SetState<CheckboxStoreState<T>["value"]>;
+}
+export interface CheckboxStoreOptions<T extends Value = Value> extends StoreOptions<CheckboxStoreState<T>, "value"> {
+    /**
+     * The default value of the checkbox.
+     * @default false
+     */
+    defaultValue?: CheckboxStoreState<T>["value"];
+}
+export type CheckboxStoreProps<T extends Value = Value> = CheckboxStoreOptions<T> & StoreProps<CheckboxStoreState<T>>;
+export type CheckboxStore<T extends Value = Value> = CheckboxStoreFunctions<T> & Store<CheckboxStoreState<T>>;
+export {};

package/esm/checkbox/checkbox-store.js

@@ -0,0 +1,27 @@
+import {
+  createStore
+} from "../__chunks/UOJSZ35L.js";
+import {
+  defaultValue
+} from "../__chunks/KLKI3AIB.js";
+
+// src/checkbox/checkbox-store.ts
+function createCheckboxStore(props = {}) {
+  const syncState = props.store?.getState();
+  const initialState = {
+    value: defaultValue(
+      props.value,
+      syncState?.value,
+      props.defaultValue,
+      false
+    )
+  };
+  const checkbox = createStore(initialState, props.store);
+  return {
+    ...checkbox,
+    setValue: (value) => checkbox.setState("value", value)
+  };
+}
+export {
+  createCheckboxStore
+};

package/esm/collection/collection-store.d.ts

@@ -0,0 +1,65 @@
+import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
+import type { BivariantCallback } from "../utils/types.js";
+type Item = {
+    id: string;
+    element?: HTMLElement | null;
+};
+/**
+ * Creates a collection store.
+ */
+export declare function createCollectionStore<T extends Item = Item>(props?: CollectionStoreProps<T>): CollectionStore<T>;
+export type CollectionStoreItem = Item;
+export interface CollectionStoreState<T extends Item = Item> {
+    /**
+     * Lists all the items with their meta data. This state is automatically
+     * updated when an item is registered or unregistered with the `registerItem`
+     * function.
+     */
+    items: T[];
+    /**
+     * Lists all the items that are currently rendered. This state is
+     * automatically updated when an item is rendered or unrendered with the
+     * `renderItem` function. This state is also automatically sorted based on
+     * their DOM position.
+     */
+    renderedItems: T[];
+}
+export interface CollectionStoreFunctions<T extends Item = Item> {
+    /**
+     * Registers an item in the collection. This function returns a cleanup
+     * function that unregisters the item.
+     * @param item The item to register.
+     * @example
+     * const unregisterItem = store.registerItem({ id: "item-1" });
+     * // on cleanup
+     * unregisterItem();
+     */
+    registerItem: BivariantCallback<(item: T) => () => void>;
+    /**
+     * Renders an item in the collection. This function returns a cleanup function
+     * that unrenders the item.
+     * @param item The item to render.
+     * @example
+     * const unrenderItem = store.renderItem({ id: "item-1" });
+     * // on cleanup
+     * unrenderItem();
+     */
+    renderItem: BivariantCallback<(item: T) => () => void>;
+    /**
+     * Gets an item by its id.
+     * @param id The id of the item.
+     * @example
+     * const item = store.item("item-1");
+     */
+    item: (id: string | null | undefined) => T | null;
+}
+export interface CollectionStoreOptions<T extends Item = Item> extends StoreOptions<CollectionStoreState<T>, "items"> {
+    /**
+     * The defaut value for the `items` state.
+     * @default []
+     */
+    defaultItems?: CollectionStoreState<T>["items"];
+}
+export type CollectionStoreProps<T extends Item = Item> = CollectionStoreOptions<T> & StoreProps<CollectionStoreState<T>>;
+export type CollectionStore<T extends Item = Item> = CollectionStoreFunctions<T> & Store<CollectionStoreState<T>>;
+export {};

package/esm/collection/collection-store.js

@@ -0,0 +1,9 @@
+import {
+  createCollectionStore
+} from "../__chunks/L7KN5AYP.js";
+import "../__chunks/UOJSZ35L.js";
+import "../__chunks/KLKI3AIB.js";
+import "../__chunks/UVCATTRC.js";
+export {
+  createCollectionStore
+};

package/esm/combobox/combobox-store.d.ts

@@ -0,0 +1,67 @@
+import type { CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { MenuStore } from "../menu/menu-store.js";
+import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
+import type { SelectStore } from "../select/select-store.js";
+import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
+import type { SetState } from "../utils/types.js";
+type Item = CompositeStoreItem & {
+    value?: string;
+};
+/**
+ * Creates a combobox store.
+ */
+export declare function createComboboxStore({ menu, select, ...props }?: ComboboxStoreProps): ComboboxStore;
+export type ComboboxStoreItem = Item;
+export interface ComboboxStoreState extends CompositeStoreState<Item>, PopoverStoreState {
+    /**
+     * @default true
+     */
+    includesBaseElement: boolean;
+    /**
+     * The input value.
+     */
+    value: string;
+    /**
+     * The value of the current active item.
+     */
+    activeValue: string | undefined;
+    /**
+     * Whether to reset the value when the combobox popover is hidden.
+     */
+    resetValueOnHide: boolean;
+}
+export interface ComboboxStoreFunctions extends CompositeStoreFunctions<Item>, PopoverStoreFunctions {
+    /**
+     * Sets the `value` state.
+     * @example
+     * store.setValue("Hello world");
+     * store.setValue((value) => value + "!");
+     */
+    setValue: SetState<ComboboxStoreState["value"]>;
+}
+export interface ComboboxStoreOptions extends StoreOptions<ComboboxStoreState, "includesBaseElement" | "value" | "resetValueOnHide">, CompositeStoreOptions<Item>, PopoverStoreOptions {
+    /**
+     * @default null
+     */
+    defaultActiveId?: CompositeStoreOptions<Item>["activeId"];
+    /**
+     * A reference to a menu store. This is used when combining the combobox with
+     * a menu (e.g., dropdown menu with a search input). The stores will share the
+     * same state.
+     */
+    menu?: MenuStore;
+    /**
+     * A reference to a select store. This is used when combining the combobox
+     * with a select (e.g., select with a search input). The stores will share the
+     * same state.
+     */
+    select?: SelectStore;
+    /**
+     * The combobox initial value.
+     * @default ""
+     */
+    defaultValue?: ComboboxStoreState["value"];
+}
+export type ComboboxStoreProps = ComboboxStoreOptions & StoreProps<ComboboxStoreState>;
+export type ComboboxStore = ComboboxStoreFunctions & Store<ComboboxStoreState>;
+export {};

package/esm/combobox/combobox-store.js

@@ -0,0 +1,163 @@
+import {
+  createPopoverStore
+} from "../__chunks/6UPCMUXT.js";
+import "../__chunks/ADRUFBEO.js";
+import "../__chunks/HCKYJLMC.js";
+import {
+  createCompositeStore
+} from "../__chunks/6U25WEDX.js";
+import "../__chunks/L7KN5AYP.js";
+import {
+  createStore,
+  mergeStore
+} from "../__chunks/UOJSZ35L.js";
+import {
+  defaultValue
+} from "../__chunks/KLKI3AIB.js";
+import {
+  isSafari,
+  isTouchDevice
+} from "../__chunks/DXA3K2FY.js";
+import "../__chunks/UVCATTRC.js";
+import "../__chunks/5XEKIOCW.js";
+
+// src/combobox/combobox-store.ts
+var isSafariOnMobile = isSafari() && isTouchDevice();
+function createComboboxStore({
+  menu,
+  select,
+  ...props
+} = {}) {
+  const store = mergeStore(
+    props.store,
+    menu?.omit(
+      "baseElement",
+      "arrowElement",
+      "anchorElement",
+      "contentElement",
+      "popoverElement",
+      "disclosureElement"
+    ),
+    select?.omit(
+      "value",
+      "items",
+      "renderedItems",
+      "baseElement",
+      "arrowElement",
+      "anchorElement",
+      "contentElement",
+      "popoverElement",
+      "disclosureElement"
+    )
+  );
+  const syncState = store.getState();
+  const activeId = defaultValue(
+    props.activeId,
+    syncState.activeId,
+    props.defaultActiveId,
+    null
+  );
+  const composite = createCompositeStore({
+    ...props,
+    store,
+    activeId,
+    includesBaseElement: defaultValue(
+      props.includesBaseElement,
+      syncState.includesBaseElement,
+      true
+    ),
+    orientation: defaultValue(
+      props.orientation,
+      syncState.orientation,
+      "vertical"
+    ),
+    focusLoop: defaultValue(props.focusLoop, syncState.focusLoop, true),
+    focusWrap: defaultValue(props.focusWrap, syncState.focusWrap, true),
+    virtualFocus: defaultValue(
+      props.virtualFocus,
+      syncState?.virtualFocus,
+      !isSafariOnMobile
+    )
+  });
+  const popover = createPopoverStore({
+    ...props,
+    store,
+    placement: defaultValue(
+      props.placement,
+      syncState.placement,
+      "bottom-start"
+    )
+  });
+  const initialValue = defaultValue(
+    props.value,
+    syncState.value,
+    props.defaultValue,
+    ""
+  );
+  const initialState = {
+    ...composite.getState(),
+    ...popover.getState(),
+    value: initialValue,
+    resetValueOnHide: defaultValue(
+      props.resetValueOnHide,
+      syncState.resetValueOnHide,
+      false
+    ),
+    activeValue: syncState.activeValue
+  };
+  const combobox = createStore(initialState, composite, popover, store);
+  combobox.setup(
+    () => combobox.sync(
+      (state) => {
+        if (!state.resetValueOnHide)
+          return;
+        if (state.mounted)
+          return;
+        combobox.setState("value", initialValue);
+      },
+      ["resetValueOnHide", "mounted"]
+    )
+  );
+  combobox.setup(
+    () => combobox.syncBatch(
+      (state) => {
+        if (state.mounted)
+          return;
+        combobox.setState("activeId", activeId);
+        combobox.setState("moves", 0);
+      },
+      ["mounted"]
+    )
+  );
+  combobox.setup(
+    () => combobox.sync(
+      (state, prevState) => {
+        if (state.moves === prevState.moves) {
+          combobox.setState("activeValue", void 0);
+        }
+      },
+      ["moves", "activeId"]
+    )
+  );
+  combobox.setup(
+    () => combobox.syncBatch(
+      (state, prev) => {
+        if (state.moves === prev.moves)
+          return;
+        const { activeId: activeId2 } = combobox.getState();
+        const activeItem = composite.item(activeId2);
+        combobox.setState("activeValue", activeItem?.value);
+      },
+      ["moves", "renderedItems"]
+    )
+  );
+  return {
+    ...popover,
+    ...composite,
+    ...combobox,
+    setValue: (value) => combobox.setState("value", value)
+  };
+}
+export {
+  createComboboxStore
+};

package/esm/composite/composite-overflow-store.d.ts

@@ -0,0 +1,10 @@
+import type { PopoverStore, PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreProps, PopoverStoreState } from "../popover/popover-store.js";
+/**
+ * Creates a composite overflow store.
+ */
+export declare function createCompositeOverflowStore(props?: CompositeOverflowStoreProps): CompositeOverflowStore;
+export type CompositeOverflowStoreState = PopoverStoreState;
+export type CompositeOverflowStoreFunctions = PopoverStoreFunctions;
+export type CompositeOverflowStoreOptions = PopoverStoreOptions;
+export type CompositeOverflowStoreProps = PopoverStoreProps;
+export type CompositeOverflowStore = PopoverStore;

package/esm/composite/composite-overflow-store.js

@@ -0,0 +1,15 @@
+import {
+  createPopoverStore
+} from "../__chunks/6UPCMUXT.js";
+import "../__chunks/ADRUFBEO.js";
+import "../__chunks/HCKYJLMC.js";
+import "../__chunks/UOJSZ35L.js";
+import "../__chunks/KLKI3AIB.js";
+
+// src/composite/composite-overflow-store.ts
+function createCompositeOverflowStore(props = {}) {
+  return createPopoverStore(props);
+}
+export {
+  createCompositeOverflowStore
+};