@ariakit/components 0.1.0

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@ariakit/components",
+  "version": "0.1.0",
+  "description": "Ariakit components",
+  "keywords": [
+    "ariakit",
+    "components"
+  ],
+  "homepage": "https://ariakit.com",
+  "license": "MIT",
+  "author": {
+    "name": "Diego Haz",
+    "email": "hazdiego@gmail.com",
+    "url": "https://github.com/diegohaz"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ariakit/ariakit.git",
+    "directory": "packages/ariakit-components"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./checkbox/checkbox-store": {
+      "types": "./dist/checkbox/checkbox-store.d.ts",
+      "import": "./dist/checkbox/checkbox-store.js"
+    },
+    "./collection/collection-store": {
+      "types": "./dist/collection/collection-store.d.ts",
+      "import": "./dist/collection/collection-store.js"
+    },
+    "./combobox/combobox-store": {
+      "types": "./dist/combobox/combobox-store.d.ts",
+      "import": "./dist/combobox/combobox-store.js"
+    },
+    "./composite/composite-overflow-store": {
+      "types": "./dist/composite/composite-overflow-store.d.ts",
+      "import": "./dist/composite/composite-overflow-store.js"
+    },
+    "./composite/composite-store": {
+      "types": "./dist/composite/composite-store.d.ts",
+      "import": "./dist/composite/composite-store.js"
+    },
+    "./dialog/dialog-store": {
+      "types": "./dist/dialog/dialog-store.d.ts",
+      "import": "./dist/dialog/dialog-store.js"
+    },
+    "./disclosure/disclosure-store": {
+      "types": "./dist/disclosure/disclosure-store.d.ts",
+      "import": "./dist/disclosure/disclosure-store.js"
+    },
+    "./form/form-store": {
+      "types": "./dist/form/form-store.d.ts",
+      "import": "./dist/form/form-store.js"
+    },
+    "./form/types": {
+      "types": "./dist/form/types.d.ts",
+      "import": "./dist/form/types.js"
+    },
+    "./hovercard/hovercard-store": {
+      "types": "./dist/hovercard/hovercard-store.d.ts",
+      "import": "./dist/hovercard/hovercard-store.js"
+    },
+    "./menu/menu-bar-store": {
+      "types": "./dist/menu/menu-bar-store.d.ts",
+      "import": "./dist/menu/menu-bar-store.js"
+    },
+    "./menu/menu-store": {
+      "types": "./dist/menu/menu-store.d.ts",
+      "import": "./dist/menu/menu-store.js"
+    },
+    "./menubar/menubar-store": {
+      "types": "./dist/menubar/menubar-store.d.ts",
+      "import": "./dist/menubar/menubar-store.js"
+    },
+    "./popover/popover-store": {
+      "types": "./dist/popover/popover-store.d.ts",
+      "import": "./dist/popover/popover-store.js"
+    },
+    "./radio/radio-store": {
+      "types": "./dist/radio/radio-store.d.ts",
+      "import": "./dist/radio/radio-store.js"
+    },
+    "./select/select-store": {
+      "types": "./dist/select/select-store.d.ts",
+      "import": "./dist/select/select-store.js"
+    },
+    "./tab/tab-store": {
+      "types": "./dist/tab/tab-store.d.ts",
+      "import": "./dist/tab/tab-store.js"
+    },
+    "./tag/tag-store": {
+      "types": "./dist/tag/tag-store.d.ts",
+      "import": "./dist/tag/tag-store.js"
+    },
+    "./toolbar/toolbar-store": {
+      "types": "./dist/toolbar/toolbar-store.d.ts",
+      "import": "./dist/toolbar/toolbar-store.js"
+    },
+    "./tooltip/tooltip-store": {
+      "types": "./dist/tooltip/tooltip-store.d.ts",
+      "import": "./dist/tooltip/tooltip-store.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@ariakit/utils": "0.1.0",
+    "@ariakit/store": "0.1.0"
+  },
+  "devDependencies": {
+    "@ariakit/scripts": "0.0.0"
+  },
+  "scripts": {
+    "build": "ariakit build",
+    "clean": "ariakit clean"
+  }
+}

package/readme.md

@@ -0,0 +1,19 @@
+# Ariakit Components
+
+**Important:** This package is an internal dependency of Ariakit and does not follow semantic versioning, meaning breaking changes may occur in patch and minor versions. You probably want to use [`@ariakit/react`](https://npmjs.org/package/@ariakit/react) instead.
+
+## Installation
+
+```
+npm i @ariakit/components
+```
+
+## Core Team
+
+- [Diego Haz](https://bsky.app/profile/haz.dev)
+- [Ben Rodri](https://bsky.app/profile/ben.ariakit.org)
+- [Dani Guardiola](https://bsky.app/profile/dio.la)
+
+## Contributing
+
+Follow the instructions on the [contributing guide](https://github.com/ariakit/ariakit/blob/main/contributing.md).

package/src/checkbox/checkbox-store.ts

@@ -0,0 +1,93 @@
+import { createStore, throwOnConflictingProps } from "@ariakit/store";
+import type { Store, StoreOptions, StoreProps } from "@ariakit/store";
+import { defaultValue } from "@ariakit/utils";
+import type { PickRequired, SetState, ToPrimitive } from "@ariakit/utils";
+
+/**
+ * Creates a checkbox store.
+ */
+export function createCheckboxStore<
+  T extends CheckboxStoreValue = CheckboxStoreValue,
+>(
+  props: PickRequired<CheckboxStoreProps<T>, "value" | "defaultValue">,
+): CheckboxStore<T>;
+
+export function createCheckboxStore(props?: CheckboxStoreProps): CheckboxStore;
+
+export function createCheckboxStore(
+  props: CheckboxStoreProps = {},
+): CheckboxStore {
+  throwOnConflictingProps(props, props.store);
+
+  const syncState = props.store?.getState();
+  const initialState: CheckboxStoreState = {
+    value: defaultValue(
+      props.value,
+      syncState?.value,
+      props.defaultValue,
+      false,
+    ),
+  };
+  const checkbox = createStore(initialState, props.store);
+  return {
+    ...checkbox,
+    setValue: (value) => checkbox.setState("value", value),
+  };
+}
+
+export type CheckboxStoreValue =
+  | boolean
+  | string
+  | number
+  | ReadonlyArray<string | number>;
+
+export interface CheckboxStoreState<
+  T extends CheckboxStoreValue = CheckboxStoreValue,
+> {
+  /**
+   * The checked state of the checkbox.
+   *
+   * Live examples:
+   * - [Custom Checkbox](https://ariakit.com/examples/checkbox-custom)
+   */
+  value: ToPrimitive<T>;
+}
+
+export interface CheckboxStoreFunctions<
+  T extends CheckboxStoreValue = CheckboxStoreValue,
+> {
+  /**
+   * Sets the [`value`](https://ariakit.com/reference/checkbox-provider#value)
+   * state.
+   * @example
+   * store.setValue(true);
+   * store.setValue((value) => !value);
+   */
+  setValue: SetState<CheckboxStoreState<T>["value"]>;
+}
+
+export interface CheckboxStoreOptions<
+  T extends CheckboxStoreValue = CheckboxStoreValue,
+> extends StoreOptions<CheckboxStoreState<T>, "value"> {
+  /**
+   * The default
+   * [`value`](https://ariakit.com/reference/checkbox-provider#value) state of
+   * the checkbox.
+   *
+   * Live examples:
+   * - [Custom Checkbox](https://ariakit.com/examples/checkbox-custom)
+   * - [Checkbox group](https://ariakit.com/examples/checkbox-group)
+   * @default false
+   */
+  defaultValue?: CheckboxStoreState<T>["value"];
+}
+
+export interface CheckboxStoreProps<
+  T extends CheckboxStoreValue = CheckboxStoreValue,
+>
+  extends CheckboxStoreOptions<T>, StoreProps<CheckboxStoreState<T>> {}
+
+export interface CheckboxStore<
+  T extends CheckboxStoreValue = CheckboxStoreValue,
+>
+  extends CheckboxStoreFunctions<T>, Store<CheckboxStoreState<T>> {}

package/src/collection/collection-store.ts

@@ -0,0 +1,301 @@
+import {
+  batch,
+  createStore,
+  init,
+  setup,
+  throwOnConflictingProps,
+} from "@ariakit/store";
+import type { Store, StoreOptions, StoreProps } from "@ariakit/store";
+import {
+  getDocument,
+  sortBasedOnDOMPosition,
+  chain,
+  defaultValue,
+} from "@ariakit/utils";
+import type { BivariantCallback } from "@ariakit/utils";
+
+function getCommonParent(items: CollectionStoreItem[]) {
+  const firstItem = items.find((item) => !!item.element);
+  const lastElement = [...items]
+    .reverse()
+    .find((item) => !!item.element)?.element;
+  let parentElement = firstItem?.element?.parentElement;
+  if (!lastElement) {
+    return getDocument(parentElement).body;
+  }
+  while (parentElement) {
+    const parent = parentElement;
+    if (parent.contains(lastElement)) {
+      return parentElement;
+    }
+    parentElement = parentElement.parentElement;
+  }
+  return getDocument(parentElement).body;
+}
+
+function getPrivateStore<T extends CollectionStoreItem>(
+  store?: Store & {
+    __unstablePrivateStore?: Store<{
+      renderedItems: T[];
+    }>;
+  },
+) {
+  return store?.__unstablePrivateStore;
+}
+
+/**
+ * Creates a collection store.
+ */
+export function createCollectionStore<
+  T extends CollectionStoreItem = CollectionStoreItem,
+>(props: CollectionStoreProps<T> = {}): CollectionStore<T> {
+  throwOnConflictingProps(props, props.store);
+
+  const syncState = props.store?.getState();
+
+  const items = defaultValue(
+    props.items,
+    syncState?.items,
+    props.defaultItems,
+    [],
+  );
+
+  const itemsMap = new Map<string, T>(items.map((item) => [item.id, item]));
+
+  const initialState: CollectionStoreState<T> = {
+    items,
+    renderedItems: defaultValue(syncState?.renderedItems, []),
+  };
+
+  const syncPrivateStore = getPrivateStore<T>(props.store);
+
+  const privateStore = createStore(
+    { items, renderedItems: initialState.renderedItems },
+    syncPrivateStore,
+  );
+
+  const collection = createStore(initialState, props.store);
+
+  const sortItems = (renderedItems: T[]) => {
+    const sortedItems = sortBasedOnDOMPosition(renderedItems, (i) => i.element);
+    privateStore.setState("renderedItems", sortedItems);
+    collection.setState("renderedItems", sortedItems);
+  };
+
+  setup(collection, () => init(privateStore));
+
+  // Use the private store to register items and then batch the changes to the
+  // public store so we don't trigger multiple updates on the store when adding
+  // multiple items.
+  setup(privateStore, () => {
+    return batch(privateStore, ["items"], (state) => {
+      collection.setState("items", state.items);
+    });
+  });
+
+  setup(privateStore, () => {
+    return batch(privateStore, ["renderedItems"], (state) => {
+      let firstRun = true;
+
+      let raf = requestAnimationFrame(() => {
+        const { renderedItems } = collection.getState();
+        // Bail out if the rendered items haven't changed. This is important
+        // because the following lines can cause this function to be called
+        // again.
+        if (state.renderedItems === renderedItems) return;
+        sortItems(state.renderedItems);
+      });
+
+      if (typeof IntersectionObserver !== "function") {
+        return () => cancelAnimationFrame(raf);
+      }
+
+      const ioCallback: IntersectionObserverCallback = () => {
+        if (firstRun) {
+          // The IntersectionObserver callback is called synchronously the first
+          // time. We just ignore it.
+          firstRun = false;
+          return;
+        }
+        cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(() => sortItems(state.renderedItems));
+      };
+
+      const root = getCommonParent(state.renderedItems);
+      const observer = new IntersectionObserver(ioCallback, { root });
+
+      for (const item of state.renderedItems) {
+        if (!item.element) continue;
+        observer.observe(item.element);
+      }
+
+      return () => {
+        cancelAnimationFrame(raf);
+        observer.disconnect();
+      };
+    });
+  });
+
+  const mergeItem = (
+    item: T,
+    setItems: (getItems: (items: T[]) => T[]) => void,
+    canDeleteFromMap = false,
+  ) => {
+    let prevItem: T | undefined;
+    setItems((items) => {
+      const index = items.findIndex(({ id }) => id === item.id);
+      const nextItems = items.slice();
+      if (index !== -1) {
+        prevItem = items[index];
+        const nextItem = { ...prevItem, ...item };
+        nextItems[index] = nextItem;
+        itemsMap.set(item.id, nextItem);
+      } else {
+        nextItems.push(item);
+        itemsMap.set(item.id, item);
+      }
+      return nextItems;
+    });
+    const unmergeItem = () => {
+      setItems((items) => {
+        if (!prevItem) {
+          if (canDeleteFromMap) {
+            itemsMap.delete(item.id);
+          }
+          return items.filter(({ id }) => id !== item.id);
+        }
+        const index = items.findIndex(({ id }) => id === item.id);
+        if (index === -1) return items;
+        const nextItems = items.slice();
+        nextItems[index] = prevItem;
+        itemsMap.set(item.id, prevItem);
+        return nextItems;
+      });
+    };
+    return unmergeItem;
+  };
+
+  const registerItem: CollectionStore<T>["registerItem"] = (item) =>
+    mergeItem(
+      item,
+      (getItems) => privateStore.setState("items", getItems),
+      true,
+    );
+
+  return {
+    ...collection,
+
+    registerItem,
+    renderItem: (item) =>
+      chain(
+        registerItem(item),
+        mergeItem(item, (getItems) =>
+          privateStore.setState("renderedItems", getItems),
+        ),
+      ),
+
+    item: (id) => {
+      if (!id) return null;
+      let item = itemsMap.get(id);
+      if (!item) {
+        const { items } = privateStore.getState();
+        item = items.find((item) => item.id === id);
+        if (item) {
+          itemsMap.set(id, item);
+        }
+      }
+      return item || null;
+    },
+
+    // @ts-expect-error Internal
+    __unstablePrivateStore: privateStore,
+  };
+}
+
+export interface CollectionStoreItem {
+  /**
+   * The id of the item.
+   */
+  id: string;
+  /**
+   * The item HTML element. This is automatically set when the item is rendered.
+   */
+  element?: HTMLElement | null;
+}
+
+export interface CollectionStoreState<
+  T extends CollectionStoreItem = CollectionStoreItem,
+> {
+  /**
+   * Lists all items along with their metadata. This state is automatically
+   * updated when an item is registered or unregistered using the
+   * [`registerItem`](https://ariakit.com/reference/use-collection-store#registeritem)
+   * function.
+   *
+   * Live examples:
+   * - [Command Menu with
+   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)
+   */
+  items: T[];
+  /**
+   * Lists all items, along with their metadata, in the exact order they appear in
+   * the DOM. This state is automatically updated when an item is rendered or
+   * unmounted using the
+   * [`renderItem`](https://ariakit.com/reference/use-collection-store#renderitem)
+   * function.
+   */
+  renderedItems: T[];
+}
+
+export interface CollectionStoreFunctions<
+  T extends CollectionStoreItem = CollectionStoreItem,
+> {
+  /**
+   * Registers an item in the collection. This function returns a cleanup
+   * function that unregisters the item.
+   * @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 unmounts the item.
+   * @example
+   * const unrenderItem = store.renderItem({ id: "item-1" });
+   * // on cleanup
+   * unrenderItem();
+   */
+  renderItem: BivariantCallback<(item: T) => () => void>;
+  /**
+   * Gets an item by its id.
+   *
+   * Live examples:
+   * - [Animated TabPanel](https://ariakit.com/examples/tab-panel-animated)
+   * @example
+   * const item = store.item("item-1");
+   */
+  item: (id: string | null | undefined) => T | null;
+}
+
+export interface CollectionStoreOptions<
+  T extends CollectionStoreItem = CollectionStoreItem,
+> extends StoreOptions<CollectionStoreState<T>, "items"> {
+  /**
+   * The defaut value for the
+   * [`items`](https://ariakit.com/reference/collection-provider#items) state.
+   * @default []
+   */
+  defaultItems?: CollectionStoreState<T>["items"];
+}
+
+export interface CollectionStoreProps<
+  T extends CollectionStoreItem = CollectionStoreItem,
+>
+  extends CollectionStoreOptions<T>, StoreProps<CollectionStoreState<T>> {}
+
+export interface CollectionStore<
+  T extends CollectionStoreItem = CollectionStoreItem,
+>
+  extends CollectionStoreFunctions<T>, Store<CollectionStoreState<T>> {}