@ariakit/components 0.1.0

package/src/hovercard/hovercard-store.ts

@@ -0,0 +1,112 @@
+import { createStore } from "@ariakit/store";
+import type { Store, StoreOptions, StoreProps } from "@ariakit/store";
+import { defaultValue } from "@ariakit/utils";
+import type { SetState } from "@ariakit/utils";
+import type {
+  PopoverStoreFunctions,
+  PopoverStoreOptions,
+  PopoverStoreState,
+} from "../popover/popover-store.ts";
+import { createPopoverStore } from "../popover/popover-store.ts";
+
+/**
+ * Creates a hovercard store.
+ */
+export function createHovercardStore(
+  props: HovercardStoreProps = {},
+): HovercardStore {
+  const syncState = props.store?.getState();
+
+  const popover = createPopoverStore({
+    ...props,
+    placement: defaultValue(
+      props.placement,
+      syncState?.placement,
+      "bottom" as const,
+    ),
+  });
+
+  const timeout = defaultValue(props.timeout, syncState?.timeout, 500);
+
+  const initialState: HovercardStoreState = {
+    ...popover.getState(),
+    timeout,
+    showTimeout: defaultValue(props.showTimeout, syncState?.showTimeout),
+    hideTimeout: defaultValue(props.hideTimeout, syncState?.hideTimeout),
+    autoFocusOnShow: defaultValue(syncState?.autoFocusOnShow, false),
+  };
+
+  const hovercard = createStore(initialState, popover, props.store);
+
+  return {
+    ...popover,
+    ...hovercard,
+    setAutoFocusOnShow: (value) => hovercard.setState("autoFocusOnShow", value),
+  };
+}
+
+export interface HovercardStoreState extends PopoverStoreState {
+  /** @default "bottom" */
+  placement: PopoverStoreState["placement"];
+  /**
+   * The amount of time in milliseconds to wait before showing and hiding the
+   * popup. To control the delay for showing and hiding separately, use
+   * [`showTimeout`](https://ariakit.com/reference/hovercard-provider#showtimeout)
+   * and
+   * [`hideTimeout`](https://ariakit.com/reference/hovercard-provider#hidetimeout).
+   * @default 500
+   */
+  timeout: number;
+  /**
+   * The amount of time in milliseconds to wait before _showing_ the popup. It
+   * defaults to the value passed to
+   * [`timeout`](https://ariakit.com/reference/hovercard-provider#timeout).
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   */
+  showTimeout?: number;
+  /**
+   * The amount of time in milliseconds to wait before _hiding_ the popup. It
+   * defaults to the value passed to
+   * [`timeout`](https://ariakit.com/reference/hovercard-provider#timeout).
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * - [Tooltip with
+   *   Motion](https://ariakit.com/examples/tooltip-framer-motion)
+   */
+  hideTimeout?: number;
+  /**
+   * Whether the popup or an element inside it should be focused when it is
+   * shown.
+   * @default false
+   */
+  autoFocusOnShow: boolean;
+}
+
+export interface HovercardStoreFunctions extends PopoverStoreFunctions {
+  /**
+   * Sets the `autoFocusOnShow` state.
+   *
+   * Live examples:
+   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)
+   */
+  setAutoFocusOnShow: SetState<HovercardStoreState["autoFocusOnShow"]>;
+}
+
+export interface HovercardStoreOptions
+  extends
+    StoreOptions<
+      HovercardStoreState,
+      "placement" | "timeout" | "showTimeout" | "hideTimeout"
+    >,
+    PopoverStoreOptions {}
+
+export interface HovercardStoreProps
+  extends HovercardStoreOptions, StoreProps<HovercardStoreState> {}
+
+export interface HovercardStore
+  extends HovercardStoreFunctions, Store<HovercardStoreState> {}

package/src/index.ts

@@ -0,0 +1 @@
+export default {};

package/src/menu/menu-bar-store.ts

@@ -0,0 +1,28 @@
+import type { Store, StoreProps } from "@ariakit/store";
+import type {
+  MenubarStoreFunctions,
+  MenubarStoreOptions,
+  MenubarStoreState,
+} from "../menubar/menubar-store.ts";
+import { createMenubarStore } from "../menubar/menubar-store.ts";
+
+/**
+ * Creates a menu bar store.
+ */
+export function createMenuBarStore(
+  props: MenuBarStoreProps = {},
+): MenuBarStore {
+  return createMenubarStore(props);
+}
+
+export interface MenuBarStoreState extends MenubarStoreState {}
+
+export interface MenuBarStoreFunctions extends MenubarStoreFunctions {}
+
+export interface MenuBarStoreOptions extends MenubarStoreOptions {}
+
+export interface MenuBarStoreProps
+  extends MenuBarStoreOptions, StoreProps<MenuBarStoreState> {}
+
+export interface MenuBarStore
+  extends MenuBarStoreFunctions, Store<MenuBarStoreState> {}

package/src/menu/menu-store.ts

@@ -0,0 +1,263 @@
+import {
+  createStore,
+  mergeStore,
+  omit,
+  pick,
+  setup,
+  sync,
+  throwOnConflictingProps,
+} from "@ariakit/store";
+import type { Store, StoreOptions, StoreProps } from "@ariakit/store";
+import { applyState, defaultValue } from "@ariakit/utils";
+import type {
+  BivariantCallback,
+  PickRequired,
+  SetState,
+  SetStateAction,
+} from "@ariakit/utils";
+import type { ComboboxStore } from "../combobox/combobox-store.ts";
+import type {
+  CompositeStoreFunctions,
+  CompositeStoreOptions,
+  CompositeStoreState,
+} from "../composite/composite-store.ts";
+import { createCompositeStore } from "../composite/composite-store.ts";
+import type {
+  HovercardStoreFunctions,
+  HovercardStoreOptions,
+  HovercardStoreState,
+} from "../hovercard/hovercard-store.ts";
+import { createHovercardStore } from "../hovercard/hovercard-store.ts";
+import type { MenuBarStore } from "./menu-bar-store.ts";
+
+export function createMenuStore<T extends MenuStoreValues = MenuStoreValues>(
+  props: PickRequired<MenuStoreProps<T>, "values" | "defaultValues">,
+): MenuStore<T>;
+
+export function createMenuStore(props?: MenuStoreProps): MenuStore;
+
+export function createMenuStore({
+  combobox,
+  parent,
+  menubar,
+  ...props
+}: MenuStoreProps = {}): MenuStore {
+  const parentIsMenubar = !!menubar && !parent;
+
+  const store = mergeStore(
+    props.store,
+    pick(parent, ["values"]),
+    omit(combobox, [
+      "arrowElement",
+      "anchorElement",
+      "contentElement",
+      "popoverElement",
+      "disclosureElement",
+    ]),
+  );
+
+  throwOnConflictingProps(props, store);
+
+  const syncState = store.getState();
+
+  const composite = createCompositeStore({
+    ...props,
+    store,
+    orientation: defaultValue(
+      props.orientation,
+      syncState.orientation,
+      "vertical" as const,
+    ),
+  });
+
+  const hovercard = createHovercardStore({
+    ...props,
+    store,
+    placement: defaultValue(
+      props.placement,
+      syncState.placement,
+      "bottom-start" as const,
+    ),
+    timeout: defaultValue(
+      props.timeout,
+      syncState.timeout,
+      parentIsMenubar ? 0 : 150,
+    ),
+    hideTimeout: defaultValue(props.hideTimeout, syncState.hideTimeout, 0),
+  });
+
+  const initialState: MenuStoreState = {
+    ...composite.getState(),
+    ...hovercard.getState(),
+    initialFocus: defaultValue(syncState.initialFocus, "container" as const),
+    values: defaultValue(
+      props.values,
+      syncState.values,
+      props.defaultValues,
+      {},
+    ),
+  };
+
+  const menu = createStore(initialState, composite, hovercard, store);
+
+  setup(menu, () =>
+    sync(menu, ["mounted"], (state) => {
+      if (state.mounted) return;
+      menu.setState("activeId", null);
+    }),
+  );
+
+  setup(menu, () =>
+    sync(parent, ["orientation"], (state) => {
+      menu.setState(
+        "placement",
+        state.orientation === "vertical" ? "right-start" : "bottom-start",
+      );
+    }),
+  );
+
+  return {
+    ...composite,
+    ...hovercard,
+    ...menu,
+    combobox,
+    parent,
+    menubar,
+    hideAll: () => {
+      hovercard.hide();
+      parent?.hideAll();
+    },
+    setInitialFocus: (value) => menu.setState("initialFocus", value),
+    setValues: (values) => menu.setState("values", values),
+    setValue: (name, value) => {
+      // Avoid prototype pollution
+      if (name === "__proto__") return;
+      if (name === "constructor") return;
+      if (Array.isArray(name)) return;
+      menu.setState("values", (values) => {
+        const prevValue = values[name];
+        const nextValue = applyState(value, prevValue);
+        if (nextValue === prevValue) return values;
+        return {
+          ...values,
+          [name]: nextValue !== undefined && nextValue,
+        };
+      });
+    },
+  };
+}
+
+export type MenuStoreValues = Record<
+  string,
+  string | boolean | number | ReadonlyArray<string | number>
+>;
+
+export interface MenuStoreState<T extends MenuStoreValues = MenuStoreValues>
+  extends CompositeStoreState, HovercardStoreState {
+  /** @default "vertical" */
+  orientation: CompositeStoreState["orientation"];
+  /** @default "bottom-start" */
+  placement: HovercardStoreState["placement"];
+  /** @default 0 */
+  hideTimeout?: HovercardStoreState["hideTimeout"];
+  /**
+   * Determines the element that should be focused when the menu is opened.
+   */
+  initialFocus: "container" | "first" | "last";
+  /**
+   * A map of names and values that will be used by the
+   * [`MenuItemCheckbox`](https://ariakit.com/reference/menu-item-checkbox) and
+   * [`MenuItemRadio`](https://ariakit.com/reference/menu-item-radio)
+   * components.
+   *
+   * Live examples:
+   * - [MenuItemCheckbox](https://ariakit.com/examples/menu-item-checkbox)
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   */
+  values: T;
+}
+
+export interface MenuStoreFunctions<T extends MenuStoreValues = MenuStoreValues>
+  extends
+    CompositeStoreFunctions,
+    HovercardStoreFunctions,
+    Pick<MenuStoreOptions, "combobox" | "parent" | "menubar"> {
+  /**
+   * Hides the menu and all its parent menus.
+   *
+   * Live examples:
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   */
+  hideAll: () => void;
+  /**
+   * Sets the `initialFocus` state.
+   */
+  setInitialFocus: SetState<MenuStoreState<T>["initialFocus"]>;
+  /**
+   * Sets the [`values`](https://ariakit.com/reference/menu-provider#values)
+   * state.
+   * @example
+   * store.setValues({ watching: ["issues"] });
+   * store.setValues((values) => ({ ...values, watching: ["issues"] }));
+   */
+  setValues: SetState<MenuStoreState<T>["values"]>;
+  /**
+   * Sets a specific menu value.
+   *
+   * Live examples:
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   * @example
+   * store.setValue("watching", ["issues"]);
+   * store.setValue("watching", (value) => [...value, "issues"]);
+   */
+  setValue: BivariantCallback<
+    (
+      name: string,
+      value: SetStateAction<MenuStoreState<T>["values"][string]>,
+    ) => void
+  >;
+}
+
+export interface MenuStoreOptions<T extends MenuStoreValues = MenuStoreValues>
+  extends
+    StoreOptions<
+      MenuStoreState<T>,
+      "orientation" | "placement" | "hideTimeout" | "values"
+    >,
+    CompositeStoreOptions,
+    HovercardStoreOptions {
+  /**
+   * A reference to a combobox 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.
+   */
+  combobox?: ComboboxStore | null;
+  /**
+   * A reference to a parent menu store. This is used on nested menus.
+   */
+  parent?: MenuStore | null;
+  /**
+   * A reference to a menubar store. This is used when rendering menus inside a
+   * menubar.
+   */
+  menubar?: MenuBarStore | null;
+  /**
+   * The default values for the
+   * [`values`](https://ariakit.com/reference/menu-provider#values) state.
+   *
+   * Live examples:
+   * - [MenuItemCheckbox](https://ariakit.com/examples/menu-item-checkbox)
+   * - [MenuItemRadio](https://ariakit.com/examples/menu-item-radio)
+   * @default {}
+   */
+  defaultValues?: MenuStoreState<T>["values"];
+}
+
+export interface MenuStoreProps<T extends MenuStoreValues = MenuStoreValues>
+  extends MenuStoreOptions<T>, StoreProps<MenuStoreState<T>> {}
+
+export interface MenuStore<T extends MenuStoreValues = MenuStoreValues>
+  extends MenuStoreFunctions<T>, Store<MenuStoreState<T>> {}

package/src/menubar/menubar-store.ts

@@ -0,0 +1,51 @@
+import { createStore } from "@ariakit/store";
+import type { Store, StoreProps } from "@ariakit/store";
+import { defaultValue } from "@ariakit/utils";
+import type {
+  CompositeStoreFunctions,
+  CompositeStoreOptions,
+  CompositeStoreState,
+} from "../composite/composite-store.ts";
+import { createCompositeStore } from "../composite/composite-store.ts";
+
+/**
+ * Creates a menubar store.
+ */
+export function createMenubarStore(
+  props: MenubarStoreProps = {},
+): MenubarStore {
+  const syncState = props.store?.getState();
+
+  const composite = createCompositeStore({
+    ...props,
+    orientation: defaultValue(
+      props.orientation,
+      syncState?.orientation,
+      "horizontal" as const,
+    ),
+    focusLoop: defaultValue(props.focusLoop, syncState?.focusLoop, true),
+  });
+
+  const initialState: MenubarStoreState = {
+    ...composite.getState(),
+  };
+
+  const menubar = createStore(initialState, composite, props.store);
+
+  return {
+    ...composite,
+    ...menubar,
+  };
+}
+
+export interface MenubarStoreState extends CompositeStoreState {}
+
+export interface MenubarStoreFunctions extends CompositeStoreFunctions {}
+
+export interface MenubarStoreOptions extends CompositeStoreOptions {}
+
+export interface MenubarStoreProps
+  extends MenubarStoreOptions, StoreProps<MenubarStoreState> {}
+
+export interface MenubarStore
+  extends MenubarStoreFunctions, Store<MenubarStoreState> {}

package/src/popover/popover-store.ts

@@ -0,0 +1,170 @@
+import {
+  createStore,
+  mergeStore,
+  omit,
+  throwOnConflictingProps,
+} from "@ariakit/store";
+import type { Store, StoreOptions, StoreProps } from "@ariakit/store";
+import { defaultValue } from "@ariakit/utils";
+import type { SetState } from "@ariakit/utils";
+import type {
+  DialogStoreFunctions,
+  DialogStoreOptions,
+  DialogStoreState,
+} from "../dialog/dialog-store.ts";
+import { createDialogStore } from "../dialog/dialog-store.ts";
+
+type BasePlacement = "top" | "bottom" | "left" | "right";
+
+type Placement =
+  | BasePlacement
+  | `${BasePlacement}-start`
+  | `${BasePlacement}-end`;
+
+/**
+ * Creates a popover store.
+ */
+export function createPopoverStore({
+  popover: otherPopover,
+  ...props
+}: PopoverStoreProps = {}): PopoverStore {
+  const store = mergeStore(
+    props.store,
+    omit(otherPopover, [
+      "arrowElement",
+      "anchorElement",
+      "contentElement",
+      "popoverElement",
+      "disclosureElement",
+    ]),
+  );
+
+  throwOnConflictingProps(props, store);
+
+  const syncState = store?.getState();
+
+  const dialog = createDialogStore({ ...props, store });
+
+  const placement = defaultValue(
+    props.placement,
+    syncState?.placement,
+    "bottom" as const,
+  );
+
+  const initialState: PopoverStoreState = {
+    ...dialog.getState(),
+    placement,
+    currentPlacement: placement,
+    anchorElement: defaultValue(syncState?.anchorElement, null),
+    popoverElement: defaultValue(syncState?.popoverElement, null),
+    arrowElement: defaultValue(syncState?.arrowElement, null),
+    rendered: Symbol("rendered"),
+  };
+  const popover = createStore(initialState, dialog, store);
+
+  return {
+    ...dialog,
+    ...popover,
+    setAnchorElement: (element) => popover.setState("anchorElement", element),
+    setPopoverElement: (element) => popover.setState("popoverElement", element),
+    setArrowElement: (element) => popover.setState("arrowElement", element),
+    render: () => popover.setState("rendered", Symbol("rendered")),
+  };
+}
+
+export interface PopoverStoreState extends DialogStoreState {
+  /**
+   * The anchor element.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   */
+  anchorElement: HTMLElement | null;
+  /**
+   * The popover element that will render the placement attributes.
+   *
+   * Live examples:
+   * - [Form with Select](https://ariakit.com/examples/form-select)
+   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)
+   * - [Responsive Popover](https://ariakit.com/examples/popover-responsive)
+   */
+  popoverElement: HTMLElement | null;
+  /**
+   * The arrow element.
+   */
+  arrowElement: HTMLElement | null;
+  /**
+   * The current temporary position of the popover. This might differ from the
+   * [`placement`](https://ariakit.com/reference/popover-provider#placement)
+   * state if the popover has had to adjust its position dynamically.
+   *
+   * Live examples:
+   * - [Tooltip with
+   *   Motion](https://ariakit.com/examples/tooltip-framer-motion)
+   */
+  currentPlacement: Placement;
+  /**
+   * The placement of the popover.
+   *
+   * Live examples:
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * - [Selection Popover](https://ariakit.com/examples/popover-selection)
+   * - [Standalone Popover](https://ariakit.com/examples/popover-standalone)
+   * - [Select Grid](https://ariakit.com/examples/select-grid)
+   * @default "bottom"
+   */
+  placement: Placement;
+  /**
+   * A symbol that's used to recompute the popover position when the
+   * [`render`](https://ariakit.com/reference/use-popover-store#render) method
+   * is called.
+   */
+  rendered: symbol;
+}
+
+export interface PopoverStoreFunctions extends DialogStoreFunctions {
+  /**
+   * Sets the anchor element.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   */
+  setAnchorElement: SetState<PopoverStoreState["anchorElement"]>;
+  /**
+   * Sets the popover element.
+   */
+  setPopoverElement: SetState<PopoverStoreState["popoverElement"]>;
+  /**
+   * Sets the arrow element.
+   */
+  setArrowElement: SetState<PopoverStoreState["arrowElement"]>;
+  /**
+   * A function that can be used to recompute the popover position. This is
+   * useful when the popover anchor changes in a way that affects the popover
+   * position.
+   *
+   * Live examples:
+   * - [Textarea with inline
+   *   Combobox](https://ariakit.com/examples/combobox-textarea)
+   * - [Selection Popover](https://ariakit.com/examples/popover-selection)
+   */
+  render: () => void;
+}
+
+export interface PopoverStoreOptions
+  extends DialogStoreOptions, StoreOptions<PopoverStoreState, "placement"> {
+  /**
+   * A reference to another popover store that's controlling another popover to
+   * keep them in sync.
+   */
+  popover?: PopoverStore | null;
+}
+
+export interface PopoverStoreProps
+  extends PopoverStoreOptions, StoreProps<PopoverStoreState> {}
+
+export interface PopoverStore
+  extends PopoverStoreFunctions, Store<PopoverStoreState> {}

package/src/radio/radio-store.ts

@@ -0,0 +1,80 @@
+import { createStore } from "@ariakit/store";
+import type { Store, StoreOptions, StoreProps } from "@ariakit/store";
+import { defaultValue } from "@ariakit/utils";
+import type { SetState } from "@ariakit/utils";
+import type {
+  CompositeStoreFunctions,
+  CompositeStoreOptions,
+  CompositeStoreState,
+} from "../composite/composite-store.ts";
+import { createCompositeStore } from "../composite/composite-store.ts";
+
+/**
+ * Creates a radio store.
+ */
+export function createRadioStore({
+  ...props
+}: RadioStoreProps = {}): RadioStore {
+  const syncState = props.store?.getState();
+
+  const composite = createCompositeStore({
+    ...props,
+    focusLoop: defaultValue(props.focusLoop, syncState?.focusLoop, true),
+  });
+
+  const initialState: RadioStoreState = {
+    ...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 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`](https://ariakit.com/reference/radio-provider#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 interface RadioStoreProps
+  extends RadioStoreOptions, StoreProps<RadioStoreState> {}
+
+export interface RadioStore
+  extends RadioStoreFunctions, Store<RadioStoreState> {}