@ariakit/core 0.0.1 → 0.1.1

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

@@ -0,0 +1,150 @@
+import type { DialogStoreFunctions, DialogStoreOptions, DialogStoreState } from "../dialog/dialog-store.js";
+import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
+import type { SetState } from "../utils/types.js";
+type BasePlacement = "top" | "bottom" | "left" | "right";
+type Placement = BasePlacement | `${BasePlacement}-start` | `${BasePlacement}-end`;
+type AnchorRect = {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+};
+/**
+ * Creates a popover store.
+ */
+export declare function createPopoverStore({ getAnchorRect, renderCallback, popover: otherPopover, ...props }?: PopoverStoreProps): PopoverStore;
+export interface PopoverStoreRenderCallbackProps extends Pick<PopoverStoreState, "anchorElement" | "popoverElement" | "arrowElement" | "mounted" | "placement" | "fixed" | "gutter" | "shift" | "overlap" | "flip" | "sameWidth" | "fitViewport" | "arrowPadding" | "overflowPadding"> {
+    /**
+     * A method that updates the `currentPlacement` state.
+     */
+    setPlacement: SetState<Placement>;
+    /**
+     * The default render callback that will be called when the `renderCallback`
+     * prop is not provided.
+     */
+    defaultRenderCallback: () => () => void;
+}
+export interface PopoverStoreState extends DialogStoreState {
+    /**
+     * The anchor element.
+     */
+    anchorElement: HTMLElement | null;
+    /**
+     * The popover element that will render the placement attributes.
+     */
+    popoverElement: HTMLElement | null;
+    /**
+     * The arrow element.
+     */
+    arrowElement: HTMLElement | null;
+    /**
+     * The current temporary placement state of the popover. This may be different
+     * from the the `placement` state if the popover has needed to update its
+     * position on the fly.
+     */
+    currentPlacement: Placement;
+    /**
+     * The placement of the popover.
+     * @default "bottom"
+     */
+    placement: Placement;
+    /**
+     * Whether the popover has `position: fixed` or not.
+     * @default false
+     */
+    fixed: boolean;
+    /**
+     * The distance between the popover and the anchor element. By default, it's 0
+     * plus half of the arrow offset, if it exists.
+     */
+    gutter: number | undefined;
+    /**
+     * The skidding of the popover along the anchor element.
+     * @default 0
+     */
+    shift: number;
+    /**
+     * Controls the behavior of the popover when it overflows the viewport:
+     *   - If a `boolean`, specifies whether the popover should flip to the
+     *     opposite side when it overflows.
+     *   - If a `string`, indicates the preferred fallback placements when it
+     *     overflows. The placements must be spaced-delimited, e.g. "top left".
+     * @default true
+     */
+    flip: boolean | string;
+    /**
+     * Whether the popover should slide when it overflows.
+     * @default true
+     */
+    slide: boolean;
+    /**
+     * Whether the popover can overlap the anchor element when it overflows.
+     * @default false
+     */
+    overlap: boolean;
+    /**
+     * Whether the popover should have the same width as the anchor element. This
+     * will be exposed to CSS as `--popover-anchor-width`.
+     * @default false
+     */
+    sameWidth: boolean;
+    /**
+     * Whether the popover should fit the viewport. If this is set to true, the
+     * popover wrapper will have `maxWidth` and `maxHeight` set to the viewport
+     * size. This will be exposed to CSS as `--popover-available-width` and
+     * `--popover-available-height`.
+     * @default false
+     */
+    fitViewport: boolean;
+    /**
+     * The minimum padding between the arrow and the popover corner.
+     * @default 4
+     */
+    arrowPadding: number;
+    /**
+     * The minimum padding between the popover and the viewport edge. This will be
+     * exposed to CSS as `--popover-overflow-padding`.
+     * @default 8
+     */
+    overflowPadding: number;
+}
+export interface PopoverStoreFunctions extends DialogStoreFunctions {
+    /**
+     * Sets the anchor element.
+     */
+    setAnchorElement: SetState<PopoverStoreState["anchorElement"]>;
+    /**
+     * Sets the popover element.
+     */
+    setPopoverElement: SetState<PopoverStoreState["popoverElement"]>;
+    /**
+     * Sets the arrow element.
+     */
+    setArrowElement: SetState<PopoverStoreState["arrowElement"]>;
+    /**
+     * Function that returns the anchor element's DOMRect. If this is explicitly
+     * passed, it will override the anchor `getBoundingClientRect` method.
+     * @param anchor The anchor element.
+     */
+    getAnchorRect?: (anchor: HTMLElement | null) => AnchorRect | null;
+    /**
+     * A function that will be called when the popover needs to calculate its
+     * styles. It will override the internal behavior.
+     */
+    renderCallback?: (props: PopoverStoreRenderCallbackProps) => void | (() => void);
+    /**
+     * A function that can be used to recompute the popover styles. This is useful
+     * when the popover anchor changes in a way that affects the popover position.
+     */
+    render: () => void;
+}
+export interface PopoverStoreOptions extends StoreOptions<PopoverStoreState, "placement" | "fixed" | "gutter" | "shift" | "flip" | "slide" | "overlap" | "sameWidth" | "fitViewport" | "arrowPadding" | "overflowPadding">, Partial<Pick<PopoverStoreFunctions, "getAnchorRect" | "renderCallback">>, DialogStoreOptions {
+    /**
+     * A reference to another popover store that's controlling another popover to
+     * keep them in sync.
+     */
+    popover?: PopoverStore;
+}
+export type PopoverStoreProps = PopoverStoreOptions & StoreProps<PopoverStoreState>;
+export type PopoverStore = PopoverStoreFunctions & Store<PopoverStoreState>;
+export {};

package/esm/popover/popover-store.js

@@ -0,0 +1,10 @@
+import {
+  createPopoverStore
+} from "../__chunks/6UPCMUXT.js";
+import "../__chunks/ADRUFBEO.js";
+import "../__chunks/HCKYJLMC.js";
+import "../__chunks/UOJSZ35L.js";
+import "../__chunks/KLKI3AIB.js";
+export {
+  createPopoverStore
+};

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

@@ -0,0 +1,36 @@
+import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
+import type { SetState } from "../utils/types.js";
+/**
+ * Creates a radio store.
+ */
+export declare function createRadioStore({ ...props }?: RadioStoreProps): RadioStore;
+export interface RadioStoreState extends CompositeStoreState {
+    /**
+     * @default true
+     */
+    focusLoop: CompositeStoreState["focusLoop"];
+    /**
+     * The value of the radio group.
+     * @default null
+     */
+    value: string | number | null;
+}
+export interface RadioStoreFunctions extends CompositeStoreFunctions {
+    /**
+     * Sets the `value` state.
+     * @example
+     * store.setValue("apple");
+     * store.setValue((value) => value === "apple" ? "orange" : "apple");
+     */
+    setValue: SetState<RadioStoreState["value"]>;
+}
+export interface RadioStoreOptions extends StoreOptions<RadioStoreState, "focusLoop" | "value">, CompositeStoreOptions {
+    /**
+     * The default value of the radio group.
+     * @default null
+     */
+    defaultValue?: RadioStoreState["value"];
+}
+export type RadioStoreProps = RadioStoreOptions & StoreProps<RadioStoreState>;
+export type RadioStore = RadioStoreFunctions & Store<RadioStoreState>;

package/esm/radio/radio-store.js

@@ -0,0 +1,41 @@
+import {
+  createCompositeStore
+} from "../__chunks/6U25WEDX.js";
+import "../__chunks/L7KN5AYP.js";
+import {
+  createStore
+} from "../__chunks/UOJSZ35L.js";
+import {
+  defaultValue
+} from "../__chunks/KLKI3AIB.js";
+import "../__chunks/UVCATTRC.js";
+import "../__chunks/5XEKIOCW.js";
+
+// src/radio/radio-store.ts
+function createRadioStore({
+  ...props
+} = {}) {
+  const syncState = props.store?.getState();
+  const composite = createCompositeStore({
+    ...props,
+    focusLoop: defaultValue(props.focusLoop, syncState?.focusLoop, true)
+  });
+  const initialState = {
+    ...composite.getState(),
+    value: defaultValue(
+      props.value,
+      syncState?.value,
+      props.defaultValue,
+      null
+    )
+  };
+  const radio = createStore(initialState, composite, props.store);
+  return {
+    ...composite,
+    ...radio,
+    setValue: (value) => radio.setState("value", value)
+  };
+}
+export {
+  createRadioStore
+};

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

@@ -0,0 +1,87 @@
+import type { ComboboxStore } from "../combobox/combobox-store.js";
+import type { CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
+import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
+import type { PickRequired, SetState } from "../utils/types.js";
+type Value = string | string[];
+type MutableValue<T extends Value = Value> = T extends string ? string : T;
+type Item = CompositeStoreItem & {
+    value?: string;
+};
+export declare function createSelectStore<T extends Value = Value>(props: PickRequired<SelectStoreProps<T>, "value" | "defaultValue">): SelectStore<T>;
+export declare function createSelectStore(props?: SelectStoreProps): SelectStore;
+export type SelectStoreItem = Item;
+export type SelectStoreValue = Value;
+export interface SelectStoreState<T extends Value = Value> extends CompositeStoreState<Item>, PopoverStoreState {
+    /**
+     * @default true
+     */
+    virtualFocus: CompositeStoreState<Item>["virtualFocus"];
+    /**
+     * @default false
+     */
+    includesBaseElement: CompositeStoreState<Item>["includesBaseElement"];
+    /**
+     * @default null
+     */
+    activeId: CompositeStoreState<Item>["activeId"];
+    /**
+     * @default "vertical"
+     */
+    orientation: CompositeStoreState<Item>["orientation"];
+    /**
+     * @default "bottom-start"
+     */
+    placement: PopoverStoreState["placement"];
+    /**
+     * The select value.
+     */
+    value: MutableValue<T>;
+    /**
+     * Whether the select value should be set when the active item changes by
+     * moving (which usually happens when moving to an item using the keyboard).
+     * @default false
+     */
+    setValueOnMove: boolean;
+    /**
+     * The select button element.
+     */
+    selectElement: HTMLElement | null;
+    /**
+     * The select label element.
+     */
+    labelElement: HTMLElement | null;
+}
+export interface SelectStoreFunctions<T extends Value = Value> extends CompositeStoreFunctions<Item>, PopoverStoreFunctions {
+    /**
+     * Sets the `value` state.
+     * @example
+     * store.setValue("Apple");
+     * store.setValue(["Apple", "Banana"]);
+     * store.setValue((value) => value === "Apple" ? "Banana" : "Apple"));
+     */
+    setValue: SetState<SelectStoreState<T>["value"]>;
+    /**
+     * Sets the `selectElement` state.
+     */
+    setSelectElement: SetState<SelectStoreState<T>["selectElement"]>;
+    /**
+     * Sets the `labelElement` state.
+     */
+    setLabelElement: SetState<SelectStoreState<T>["labelElement"]>;
+}
+export interface SelectStoreOptions<T extends Value = Value> extends StoreOptions<SelectStoreState<T>, "virtualFocus" | "includesBaseElement" | "activeId" | "orientation" | "placement" | "value" | "setValueOnMove">, CompositeStoreOptions<Item>, PopoverStoreOptions {
+    /**
+     * A reference to a combobox 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.
+     */
+    combobox?: ComboboxStore;
+    /**
+     * The default value. If not set, the first non-disabled item will be used.
+     */
+    defaultValue?: SelectStoreState<T>["value"];
+}
+export type SelectStoreProps<T extends Value = Value> = SelectStoreOptions<T> & StoreProps<SelectStoreState<T>>;
+export type SelectStore<T extends Value = Value> = SelectStoreFunctions<T> & Store<SelectStoreState<T>>;
+export {};

package/esm/select/select-store.js

@@ -0,0 +1,164 @@
+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 "../__chunks/UVCATTRC.js";
+import {
+  toArray
+} from "../__chunks/5XEKIOCW.js";
+
+// src/select/select-store.ts
+function createSelectStore({
+  combobox,
+  ...props
+} = {}) {
+  const store = mergeStore(
+    props.store,
+    combobox?.omit(
+      "value",
+      "items",
+      "renderedItems",
+      "baseElement",
+      "arrowElement",
+      "anchorElement",
+      "contentElement",
+      "popoverElement",
+      "disclosureElement"
+    )
+  );
+  const syncState = store.getState();
+  const composite = createCompositeStore({
+    ...props,
+    store,
+    virtualFocus: defaultValue(
+      props.virtualFocus,
+      syncState.virtualFocus,
+      true
+    ),
+    includesBaseElement: defaultValue(
+      props.includesBaseElement,
+      syncState.includesBaseElement,
+      false
+    ),
+    activeId: defaultValue(
+      props.activeId,
+      syncState.activeId,
+      props.defaultActiveId,
+      null
+    ),
+    orientation: defaultValue(
+      props.orientation,
+      syncState.orientation,
+      "vertical"
+    )
+  });
+  const popover = createPopoverStore({
+    ...props,
+    store,
+    placement: defaultValue(
+      props.placement,
+      syncState.placement,
+      "bottom-start"
+    )
+  });
+  const initialValue = new String("");
+  const initialState = {
+    ...composite.getState(),
+    ...popover.getState(),
+    value: defaultValue(
+      props.value,
+      syncState.value,
+      props.defaultValue,
+      initialValue
+    ),
+    setValueOnMove: defaultValue(
+      props.setValueOnMove,
+      syncState.setValueOnMove,
+      false
+    ),
+    selectElement: defaultValue(syncState.selectElement, null),
+    labelElement: defaultValue(syncState.labelElement, null)
+  };
+  const select = createStore(initialState, composite, popover, store);
+  select.setup(
+    () => select.sync(
+      (state) => {
+        if (state.value !== initialValue)
+          return;
+        if (!state.items.length)
+          return;
+        const item = state.items.find(
+          (item2) => !item2.disabled && item2.value != null
+        );
+        if (item?.value == null)
+          return;
+        select.setState("value", item.value);
+      },
+      ["value", "items"]
+    )
+  );
+  select.setup(
+    () => select.sync(
+      (state) => {
+        if (combobox)
+          return;
+        if (state.mounted)
+          return;
+        const values = toArray(state.value);
+        const lastValue = values[values.length - 1];
+        if (lastValue == null)
+          return;
+        const item = state.items.find(
+          (item2) => !item2.disabled && item2.value === lastValue
+        );
+        if (!item)
+          return;
+        select.setState("activeId", item.id);
+      },
+      ["mounted", "items", "value"]
+    )
+  );
+  select.setup(
+    () => select.syncBatch(
+      (state) => {
+        const { mounted, value, activeId } = select.getState();
+        if (!state.setValueOnMove && mounted)
+          return;
+        if (Array.isArray(value))
+          return;
+        if (!state.moves)
+          return;
+        if (!activeId)
+          return;
+        const item = composite.item(activeId);
+        if (!item || item.disabled || item.value == null)
+          return;
+        select.setState("value", item.value);
+      },
+      ["setValueOnMove", "moves"]
+    )
+  );
+  return {
+    ...composite,
+    ...popover,
+    ...select,
+    setValue: (value) => select.setState("value", value),
+    setSelectElement: (element) => select.setState("selectElement", element),
+    setLabelElement: (element) => select.setState("labelElement", element)
+  };
+}
+export {
+  createSelectStore
+};

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

@@ -0,0 +1,78 @@
+import type { CollectionStore, CollectionStoreItem } from "../collection/collection-store.js";
+import type { CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
+import type { SetState } from "../utils/types.js";
+type Item = CompositeStoreItem & {
+    dimmed?: boolean;
+};
+type Panel = CollectionStoreItem & {
+    tabId?: string | null;
+};
+export declare function createTabStore(props?: TabStoreProps): TabStore;
+export type TabStoreItem = Item;
+export type TabStorePanel = Panel;
+export interface TabStoreState extends CompositeStoreState<Item> {
+    /**
+     * @default "horizontal"
+     */
+    orientation: CompositeStoreState<Item>["orientation"];
+    /**
+     * @default true
+     */
+    focusLoop: CompositeStoreState<Item>["focusLoop"];
+    /**
+     * The id of the tab whose panel is currently visible. If it's `undefined`, it
+     * will be automatically set to the first enabled tab.
+     */
+    selectedId: TabStoreState["activeId"];
+    /**
+     * Whether the tab should be selected when it receives focus. If it's set to
+     * `false`, the tab will be selected only when it's clicked.
+     * @default true
+     */
+    selectOnMove?: boolean;
+}
+export interface TabStoreFunctions extends CompositeStoreFunctions<Item> {
+    /**
+     * Sets the `selectedId` state without moving focus. If you want to move focus,
+     * use the `select` function instead.
+     * @example
+     * // Selects the tab with id "tab-1"
+     * store.setSelectedId("tab-1");
+     * // Toggles between "tab-1" and "tab-2"
+     * store.setSelectedId((id) => id === "tab-1" ? "tab-2" : "tab-1"));
+     * // Selects the first tab
+     * store.setSelectedId(store.first());
+     * // Selects the next tab
+     * store.setSelectedId(store.next());
+     */
+    setSelectedId: SetState<TabStoreState["selectedId"]>;
+    /**
+     * A collection store containing the tab panels.
+     */
+    panels: CollectionStore<Panel>;
+    /**
+     * Selects the tab for the given id and moves focus to it. If you want to set
+     * the `selectedId` state without moving focus, use the `setSelectedId`
+     * function instead.
+     * @param id The id of the tab to select.
+     * @example
+     * // Selects the tab with id "tab-1"
+     * store.select("tab-1");
+     * // Selects the first tab
+     * store.select(store.first());
+     * // Selects the next tab
+     * store.select(store.next());
+     */
+    select: TabStore["move"];
+}
+export interface TabStoreOptions extends StoreOptions<TabStoreState, "orientation" | "focusLoop" | "selectedId" | "selectOnMove">, CompositeStoreOptions<Item> {
+    /**
+     * The id of the tab whose panel is currently visible. If it's `undefined`, it
+     * will be automatically set to the first enabled tab.
+     */
+    defaultSelectedId?: TabStoreState["selectedId"];
+}
+export type TabStoreProps = TabStoreOptions & StoreProps<TabStoreState>;
+export type TabStore = TabStoreFunctions & Store<TabStoreState>;
+export {};

package/esm/tab/tab-store.js

@@ -0,0 +1,126 @@
+import {
+  createCompositeStore
+} from "../__chunks/6U25WEDX.js";
+import {
+  createCollectionStore
+} from "../__chunks/L7KN5AYP.js";
+import {
+  createStore
+} from "../__chunks/UOJSZ35L.js";
+import {
+  defaultValue
+} from "../__chunks/KLKI3AIB.js";
+import "../__chunks/UVCATTRC.js";
+import "../__chunks/5XEKIOCW.js";
+
+// src/tab/tab-store.ts
+function createTabStore(props = {}) {
+  const syncState = props.store?.getState();
+  const composite = createCompositeStore({
+    ...props,
+    orientation: defaultValue(
+      props.orientation,
+      syncState?.orientation,
+      "horizontal"
+    ),
+    focusLoop: defaultValue(props.focusLoop, syncState?.focusLoop, true)
+  });
+  const panels = createCollectionStore();
+  const initialState = {
+    ...composite.getState(),
+    selectedId: defaultValue(
+      props.selectedId,
+      syncState?.selectedId,
+      props.defaultSelectedId,
+      void 0
+    ),
+    selectOnMove: defaultValue(
+      props.selectOnMove,
+      syncState?.selectOnMove,
+      true
+    )
+  };
+  const tab = createStore(initialState, composite, props.store);
+  tab.setup(
+    () => tab.sync(() => {
+      const { activeId, selectOnMove } = tab.getState();
+      if (!selectOnMove)
+        return;
+      if (!activeId)
+        return;
+      const tabItem = composite.item(activeId);
+      if (!tabItem)
+        return;
+      if (tabItem.dimmed)
+        return;
+      if (tabItem.disabled)
+        return;
+      tab.setState("selectedId", tabItem.id);
+    }, ["moves"])
+  );
+  tab.setup(
+    () => tab.sync(
+      (state) => tab.setState("activeId", state.selectedId),
+      ["selectedId"]
+    )
+  );
+  tab.setup(
+    () => tab.sync(
+      (state) => {
+        if (state.selectedId !== void 0)
+          return;
+        const { activeId, renderedItems } = tab.getState();
+        const tabItem = composite.item(activeId);
+        if (tabItem && !tabItem.disabled && !tabItem.dimmed) {
+          tab.setState("selectedId", tabItem.id);
+        } else {
+          const tabItem2 = renderedItems.find(
+            (item) => !item.disabled && !item.dimmed
+          );
+          tab.setState("selectedId", tabItem2?.id);
+        }
+      },
+      ["selectedId", "renderedItems"]
+    )
+  );
+  tab.setup(
+    () => tab.sync(
+      (state) => {
+        const tabs = state.renderedItems;
+        if (!tabs.length)
+          return;
+        return panels.sync(
+          (state2) => {
+            const items = state2.renderedItems;
+            const hasOrphanPanels = items.some((panel) => !panel.tabId);
+            if (!hasOrphanPanels)
+              return;
+            items.forEach((panel, i) => {
+              if (panel.tabId)
+                return;
+              const tabItem = tabs[i];
+              if (!tabItem)
+                return;
+              panels.renderItem({ ...panel, tabId: tabItem.id });
+            });
+          },
+          ["renderedItems"]
+        );
+      },
+      ["renderedItems"]
+    )
+  );
+  return {
+    ...composite,
+    ...tab,
+    panels,
+    setSelectedId: (id) => tab.setState("selectedId", id),
+    select: (id) => {
+      tab.setState("selectedId", id);
+      composite.move(id);
+    }
+  };
+}
+export {
+  createTabStore
+};