@ariakit/core 0.0.1 → 0.1.0

package/cjs/utils/store.d.ts

@@ -0,0 +1,99 @@
+import type { AnyObject, SetStateAction } from "./types.js";
+/**
+ * Creates a store.
+ * @param initialState Initial state.
+ * @param stores Stores to extend.
+ */
+export declare function createStore<S extends State>(initialState: S, ...stores: Array<Partial<Store<Partial<S>>> | undefined>): Store<S>;
+/**
+ * Merges multiple stores into a single store.
+ */
+export declare function mergeStore<S extends State>(...stores: Array<Partial<Store<S>> | undefined>): Store<S>;
+/**
+ * Store state type.
+ */
+export type State = AnyObject;
+/**
+ * Initial state that can be passed to a store creator function.
+ * @template S State type.
+ * @template K Key type.
+ */
+export type StoreOptions<S extends State, K extends keyof S> = Partial<Pick<S, K>>;
+/**
+ * Props that can be passed to a store creator function.
+ * @template S State type.
+ */
+export type StoreProps<S extends State = State> = {
+    store?: Store<Partial<S>>;
+};
+/**
+ * Extracts the state type from a store type.
+ * @template T Store type.
+ */
+export type StoreState<T> = T extends {
+    getState(): infer S;
+} ? S : never;
+/**
+ * Store listener type.
+ * @template S State type.
+ */
+export type Listener<S> = (state: S, prevState: S) => void | (() => void);
+/**
+ * Subscriber function type used by `sync`, `subscribe` and `effect`.
+ * @template S State type.
+ */
+export type Sync<S = State> = {
+    /**
+     * @param listener The listener function. It's called with the current state
+     * and the previous state as arguments and may return a cleanup function.
+     * @param keys Optional array of state keys to listen to.
+     */
+    <K extends keyof S = keyof S>(listener: Listener<Pick<S, K>>, keys?: K[]): () => void;
+};
+/**
+ * Store.
+ * @template S State type.
+ */
+export interface Store<S = State> {
+    /**
+     * Returns the current store state.
+     */
+    getState(): S;
+    /**
+     * Sets a state value.
+     */
+    setState<K extends keyof S>(key: K, value: SetStateAction<S[K]>): void;
+    /**
+     * Register a callback function that's called when the store is initialized.
+     */
+    setup: (callback: () => void | (() => void)) => () => void;
+    /**
+     * Function that should be called when the store is initialized.
+     */
+    init: () => () => void;
+    /**
+     * Registers a listener function that's called immediately and synchronously
+     * whenever the store state changes.
+     */
+    sync: Sync<S>;
+    /**
+     * Registers a listener function that's called after state changes in the
+     * store.
+     */
+    subscribe: Sync<S>;
+    /**
+     * Registers a listener function that's called immediately and after a batch
+     * of state changes in the store.
+     */
+    syncBatch: Sync<S>;
+    /**
+     * Creates a new store with a subset of the current store state and keeps them
+     * in sync.
+     */
+    pick<K extends Array<keyof S>>(...keys: K): Store<Pick<S, K[number]>>;
+    /**
+     * Creates a new store with a subset of the current store state and keeps them
+     * in sync.
+     */
+    omit<K extends Array<keyof S>>(...keys: K): Store<Omit<S, K[number]>>;
+}

package/cjs/utils/types.cjs

@@ -0,0 +1 @@
+"use strict";

package/cjs/utils/types.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Any object.
+ */
+export type AnyObject = Record<string, any>;
+/**
+ * Any function.
+ */
+export type AnyFunction = (...args: any) => any;
+/**
+ * Workaround for variance issues.
+ * @template T The type of the callback.
+ */
+export type BivariantCallback<T extends AnyFunction> = {
+    bivarianceHack(...args: Parameters<T>): ReturnType<T>;
+}["bivarianceHack"];
+/**
+ * @template T The state type.
+ */
+export type SetStateAction<T> = T | BivariantCallback<(prevState: T) => T>;
+/**
+ * The type of the `setState` function in `[state, setState] = useState()`.
+ * @template T The type of the state.
+ */
+export type SetState<T> = BivariantCallback<(value: SetStateAction<T>) => void>;
+/**
+ * A boolean value or a callback that returns a boolean value.
+ * @template T The type of the callback parameter.
+ */
+export type BooleanOrCallback<T> = boolean | BivariantCallback<(arg: T) => boolean>;
+/**
+ * A string that will provide autocomplete for specific strings.
+ * @template T The specific strings.
+ */
+export type StringWithValue<T extends string> = T | (string & {
+    [key in symbol]: never;
+});
+/**
+ * Transforms a type into a primitive type.
+ * @template T The type to transform.
+ * @example
+ * // string
+ * ToPrimitive<"a">;
+ * // number
+ * ToPrimitive<1>;
+ */
+export type ToPrimitive<T> = T extends string ? string : T extends number ? number : T extends boolean ? boolean : T extends AnyFunction ? (...args: Parameters<T>) => ReturnType<T> : T;
+/**
+ * Picks only the properties from a type that have a specific value.
+ * @template T The type to pick from.
+ * @template Value The value to pick.
+ */
+export type PickByValue<T, Value> = {
+    [K in keyof T as [Value] extends [T[K]] ? T[K] extends Value | undefined ? K : never : never]: T[K];
+};
+/**
+ * Picks only the required properties from a type.
+ * @template T The type to pick from.
+ * @template P The properties to pick.
+ */
+export type PickRequired<T, P extends keyof T> = T & {
+    [K in keyof T]: Pick<Required<T>, K>;
+}[P];
+/**
+ * Indicates the availability and type of interactive popup element, such as
+ * menu or dialog, that can be triggered by an element.
+ */
+export type AriaHasPopup = boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+/**
+ * All the WAI-ARIA 1.1 role attribute values from
+ * https://www.w3.org/TR/wai-aria-1.1/#role_definitions
+ */
+export type AriaRole = "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem" | (string & {});

package/collection/collection-store/package.json

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

package/combobox/combobox-store/package.json

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

package/composite/composite-overflow-store/package.json

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

package/composite/composite-store/package.json

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

package/dialog/dialog-store/package.json

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

package/disclosure/disclosure-store/package.json

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

package/esm/__chunks/5XEKIOCW.js

@@ -0,0 +1,30 @@
+// src/utils/array.ts
+function toArray(arg) {
+  if (Array.isArray(arg)) {
+    return arg;
+  }
+  return typeof arg !== "undefined" ? [arg] : [];
+}
+function addItemToArray(array, item, index = -1) {
+  if (!(index in array)) {
+    return [...array, item];
+  }
+  return [...array.slice(0, index), item, ...array.slice(index)];
+}
+function flatten2DArray(array) {
+  const flattened = [];
+  for (const row of array) {
+    flattened.push(...row);
+  }
+  return flattened;
+}
+function reverseArray(array) {
+  return array.slice().reverse();
+}
+
+export {
+  toArray,
+  addItemToArray,
+  flatten2DArray,
+  reverseArray
+};

package/esm/__chunks/6U25WEDX.js

@@ -0,0 +1,286 @@
+import {
+  createCollectionStore
+} from "./L7KN5AYP.js";
+import {
+  createStore
+} from "./UOJSZ35L.js";
+import {
+  defaultValue
+} from "./KLKI3AIB.js";
+import {
+  flatten2DArray,
+  reverseArray
+} from "./5XEKIOCW.js";
+
+// src/composite/composite-store.ts
+var NULL_ITEM = { id: null };
+function findFirstEnabledItem(items, excludeId) {
+  return items.find((item) => {
+    if (excludeId) {
+      return !item.disabled && item.id !== excludeId;
+    }
+    return !item.disabled;
+  });
+}
+function getEnabledItems(items, excludeId) {
+  return items.filter((item) => {
+    if (excludeId) {
+      return !item.disabled && item.id !== excludeId;
+    }
+    return !item.disabled;
+  });
+}
+function getOppositeOrientation(orientation) {
+  if (orientation === "vertical")
+    return "horizontal";
+  if (orientation === "horizontal")
+    return "vertical";
+  return;
+}
+function getItemsInRow(items, rowId) {
+  return items.filter((item) => item.rowId === rowId);
+}
+function flipItems(items, activeId, shouldInsertNullItem = false) {
+  const index = items.findIndex((item) => item.id === activeId);
+  return [
+    ...items.slice(index + 1),
+    ...shouldInsertNullItem ? [NULL_ITEM] : [],
+    ...items.slice(0, index)
+  ];
+}
+function groupItemsByRows(items) {
+  const rows = [];
+  for (const item of items) {
+    const row = rows.find((currentRow) => currentRow[0]?.rowId === item.rowId);
+    if (row) {
+      row.push(item);
+    } else {
+      rows.push([item]);
+    }
+  }
+  return rows;
+}
+function getMaxRowLength(array) {
+  let maxLength = 0;
+  for (const { length } of array) {
+    if (length > maxLength) {
+      maxLength = length;
+    }
+  }
+  return maxLength;
+}
+function createEmptyItem(rowId) {
+  return {
+    id: "__EMPTY_ITEM__",
+    disabled: true,
+    rowId
+  };
+}
+function normalizeRows(rows, activeId, focusShift) {
+  const maxLength = getMaxRowLength(rows);
+  for (const row of rows) {
+    for (let i = 0; i < maxLength; i += 1) {
+      const item = row[i];
+      if (!item || focusShift && item.disabled) {
+        const isFirst = i === 0;
+        const previousItem = isFirst && focusShift ? findFirstEnabledItem(row) : row[i - 1];
+        row[i] = previousItem && activeId !== previousItem.id && focusShift ? previousItem : createEmptyItem(previousItem?.rowId);
+      }
+    }
+  }
+  return rows;
+}
+function verticalizeItems(items) {
+  const rows = groupItemsByRows(items);
+  const maxLength = getMaxRowLength(rows);
+  const verticalized = [];
+  for (let i = 0; i < maxLength; i += 1) {
+    for (const row of rows) {
+      const item = row[i];
+      if (item) {
+        verticalized.push({
+          ...item,
+          // If there's no rowId, it means that it's not a grid composite, but
+          // a single row instead. So, instead of verticalizing it, that is,
+          // assigning a different rowId based on the column index, we keep it
+          // undefined so they will be part of the same row. This is useful
+          // when using up/down on one-dimensional composites.
+          rowId: item.rowId ? `${i}` : void 0
+        });
+      }
+    }
+  }
+  return verticalized;
+}
+function createCompositeStore(props = {}) {
+  const syncState = props.store?.getState();
+  const collection = createCollectionStore(props);
+  const activeId = defaultValue(
+    props.activeId,
+    syncState?.activeId,
+    props.defaultActiveId
+  );
+  const initialState = {
+    ...collection.getState(),
+    activeId,
+    baseElement: defaultValue(syncState?.baseElement, null),
+    includesBaseElement: defaultValue(
+      props.includesBaseElement,
+      syncState?.includesBaseElement,
+      activeId === null
+    ),
+    moves: defaultValue(syncState?.moves, 0),
+    orientation: defaultValue(
+      props.orientation,
+      syncState?.orientation,
+      "both"
+    ),
+    rtl: defaultValue(props.rtl, syncState?.rtl, false),
+    virtualFocus: defaultValue(
+      props.virtualFocus,
+      syncState?.virtualFocus,
+      false
+    ),
+    focusLoop: defaultValue(props.focusLoop, syncState?.focusLoop, false),
+    focusWrap: defaultValue(props.focusWrap, syncState?.focusWrap, false),
+    focusShift: defaultValue(props.focusShift, syncState?.focusShift, false)
+  };
+  const composite = createStore(initialState, collection, props.store);
+  composite.setup(
+    () => composite.sync(
+      (state) => {
+        composite.setState("activeId", (activeId2) => {
+          if (activeId2 !== void 0)
+            return activeId2;
+          return findFirstEnabledItem(state.renderedItems)?.id;
+        });
+      },
+      ["renderedItems", "activeId"]
+    )
+  );
+  const getNextId = (items, orientation, hasNullItem, skip) => {
+    const { activeId: activeId2, rtl, focusLoop, focusWrap, includesBaseElement } = composite.getState();
+    const isHorizontal = orientation !== "vertical";
+    const isRTL = rtl && isHorizontal;
+    const allItems = isRTL ? reverseArray(items) : items;
+    if (activeId2 == null) {
+      return findFirstEnabledItem(allItems)?.id;
+    }
+    const activeItem = allItems.find((item) => item.id === activeId2);
+    if (!activeItem) {
+      return findFirstEnabledItem(allItems)?.id;
+    }
+    const isGrid = !!activeItem.rowId;
+    const activeIndex = allItems.indexOf(activeItem);
+    const nextItems = allItems.slice(activeIndex + 1);
+    const nextItemsInRow = getItemsInRow(nextItems, activeItem.rowId);
+    if (skip !== void 0) {
+      const nextEnabledItemsInRow = getEnabledItems(nextItemsInRow, activeId2);
+      const nextItem2 = nextEnabledItemsInRow.slice(skip)[0] || // If we can't find an item, just return the last one.
+      nextEnabledItemsInRow[nextEnabledItemsInRow.length - 1];
+      return nextItem2?.id;
+    }
+    const oppositeOrientation = getOppositeOrientation(
+      // If it's a grid and orientation is not set, it's a next/previous call,
+      // which is inherently horizontal. up/down will call next with orientation
+      // set to vertical by default (see below on up/down methods).
+      isGrid ? orientation || "horizontal" : orientation
+    );
+    const canLoop = focusLoop && focusLoop !== oppositeOrientation;
+    const canWrap = isGrid && focusWrap && focusWrap !== oppositeOrientation;
+    hasNullItem = hasNullItem || !isGrid && canLoop && includesBaseElement;
+    if (canLoop) {
+      const loopItems = canWrap && !hasNullItem ? allItems : getItemsInRow(allItems, activeItem.rowId);
+      const sortedItems = flipItems(loopItems, activeId2, hasNullItem);
+      const nextItem2 = findFirstEnabledItem(sortedItems, activeId2);
+      return nextItem2?.id;
+    }
+    if (canWrap) {
+      const nextItem2 = findFirstEnabledItem(
+        // We can use nextItems, which contains all the next items, including
+        // items from other rows, to wrap between rows. However, if there is a
+        // null item (the composite container), we'll only use the next items in
+        // the row. So moving next from the last item will focus on the
+        // composite container. On grid composites, horizontal navigation never
+        // focuses on the composite container, only vertical.
+        hasNullItem ? nextItemsInRow : nextItems,
+        activeId2
+      );
+      const nextId = hasNullItem ? nextItem2?.id || null : nextItem2?.id;
+      return nextId;
+    }
+    const nextItem = findFirstEnabledItem(nextItemsInRow, activeId2);
+    if (!nextItem && hasNullItem) {
+      return null;
+    }
+    return nextItem?.id;
+  };
+  return {
+    ...collection,
+    ...composite,
+    setBaseElement: (element) => composite.setState("baseElement", element),
+    setActiveId: (id) => composite.setState("activeId", id),
+    move: (id) => {
+      if (id === void 0)
+        return;
+      composite.setState("activeId", id);
+      composite.setState("moves", (moves) => moves + 1);
+    },
+    first: () => findFirstEnabledItem(composite.getState().renderedItems)?.id,
+    last: () => findFirstEnabledItem(reverseArray(composite.getState().renderedItems))?.id,
+    next: (skip) => {
+      const { renderedItems, orientation } = composite.getState();
+      return getNextId(renderedItems, orientation, false, skip);
+    },
+    previous: (skip) => {
+      const { renderedItems, orientation, includesBaseElement } = composite.getState();
+      const isGrid = !!findFirstEnabledItem(renderedItems)?.rowId;
+      const hasNullItem = !isGrid && includesBaseElement;
+      return getNextId(
+        reverseArray(renderedItems),
+        orientation,
+        hasNullItem,
+        skip
+      );
+    },
+    down: (skip) => {
+      const {
+        activeId: activeId2,
+        renderedItems,
+        focusShift,
+        focusLoop,
+        includesBaseElement
+      } = composite.getState();
+      const shouldShift = focusShift && !skip;
+      const verticalItems = verticalizeItems(
+        flatten2DArray(
+          normalizeRows(groupItemsByRows(renderedItems), activeId2, shouldShift)
+        )
+      );
+      const canLoop = focusLoop && focusLoop !== "horizontal";
+      const hasNullItem = canLoop && includesBaseElement;
+      return getNextId(verticalItems, "vertical", hasNullItem, skip);
+    },
+    up: (skip) => {
+      const { activeId: activeId2, renderedItems, focusShift, includesBaseElement } = composite.getState();
+      const shouldShift = focusShift && !skip;
+      const verticalItems = verticalizeItems(
+        reverseArray(
+          flatten2DArray(
+            normalizeRows(
+              groupItemsByRows(renderedItems),
+              activeId2,
+              shouldShift
+            )
+          )
+        )
+      );
+      const hasNullItem = includesBaseElement;
+      return getNextId(verticalItems, "vertical", hasNullItem, skip);
+    }
+  };
+}
+
+export {
+  createCompositeStore
+};