@ariakit/components 0.1.0

package/src/tag/tag-store.ts

@@ -0,0 +1,170 @@
+import { createStore, setup, sync } from "@ariakit/store";
+import type { Store, StoreOptions, StoreProps } from "@ariakit/store";
+import { applyState, defaultValue, UndoManager } from "@ariakit/utils";
+import type { SetState } from "@ariakit/utils";
+import type {
+  CompositeStoreFunctions,
+  CompositeStoreItem,
+  CompositeStoreOptions,
+  CompositeStoreState,
+} from "../composite/composite-store.ts";
+import { createCompositeStore } from "../composite/composite-store.ts";
+
+/**
+ * Creates a tag store.
+ */
+export function createTagStore(props: TagStoreProps = {}): TagStore {
+  const syncState = props.store?.getState();
+  const composite = createCompositeStore(props);
+
+  const initialState: TagStoreState = {
+    ...composite.getState(),
+    inputElement: defaultValue(syncState?.inputElement, null),
+    labelElement: defaultValue(syncState?.labelElement, null),
+    value: defaultValue(props.value, syncState?.value, props.defaultValue, ""),
+    values: defaultValue(
+      props.values,
+      syncState?.values,
+      props.defaultValues,
+      [],
+    ),
+  };
+
+  const tag = createStore(initialState, composite, props.store);
+
+  // Set the input element as the default active element, that is, the element
+  // that will receive focus when the composite widget is focused.
+  setup(tag, () =>
+    sync(tag, ["inputElement", "activeId"], (state) => {
+      if (!state.inputElement) return;
+      if (state.activeId !== undefined) return;
+      tag.setState("activeId", state.inputElement.id);
+    }),
+  );
+
+  const setValues: TagStore["setValues"] = (values) => {
+    const { values: previousValues } = tag.getState();
+    void UndoManager.execute(() => {
+      let changed = true;
+      tag.setState("values", (prev) => {
+        const next = applyState(values, prev);
+        if (next === prev) {
+          changed = false;
+        }
+        return next;
+      });
+      if (!changed) return;
+      return () => {
+        tag.setState("values", previousValues);
+        composite.move(tag.getState().inputElement?.id);
+      };
+    });
+  };
+
+  return {
+    ...composite,
+    ...tag,
+    setInputElement: (inputElement) =>
+      tag.setState("inputElement", inputElement),
+
+    setLabelElement: (labelElement) =>
+      tag.setState("labelElement", labelElement),
+
+    setValue: (value) => tag.setState("value", value),
+
+    resetValue: () => tag.setState("value", initialState.value),
+
+    setValues,
+
+    addValue: (value) => {
+      setValues((values) => {
+        if (values.includes(value)) return values;
+        return [...values, value];
+      });
+    },
+
+    removeValue: (value) =>
+      setValues((values) => values.filter((v) => v !== value)),
+  };
+}
+
+export interface TagStoreItem extends CompositeStoreItem {
+  value?: string;
+}
+
+export interface TagStoreState extends CompositeStoreState<TagStoreItem> {
+  /**
+   * The input element.
+   */
+  inputElement: HTMLElement | null;
+  /**
+   * The label element.
+   */
+  labelElement: HTMLElement | null;
+  /**
+   * The value of the tag input.
+   * @default ""
+   */
+  value: string;
+  /**
+   * The values of the selected tags.
+   * @default []
+   */
+  values: string[];
+}
+
+export interface TagStoreFunctions extends CompositeStoreFunctions<TagStoreItem> {
+  /**
+   * Sets the `inputElement` state.
+   */
+  setInputElement: SetState<TagStoreState["inputElement"]>;
+  /**
+   * Sets the `labelElement` state.
+   */
+  setLabelElement: SetState<TagStoreState["labelElement"]>;
+  /**
+   * Sets the [`value`](https://ariakit.com/reference/tag-provider#value) state.
+   */
+  setValue: SetState<TagStoreState["value"]>;
+  /**
+   * Resets the [`value`](https://ariakit.com/reference/tag-provider#value)
+   * state to its initial value.
+   */
+  resetValue: () => void;
+  /**
+   * Sets the [`values`](https://ariakit.com/reference/tag-provider#values) state.
+   */
+  setValues: SetState<TagStoreState["values"]>;
+  /**
+   * Add a new value to the
+   * [`values`](https://ariakit.com/reference/tag-provider#values) state if it
+   * doesn't already exist.
+   */
+  addValue: (value: string) => void;
+  /**
+   * Remove a value from the
+   * [`values`](https://ariakit.com/reference/tag-provider#values) state.
+   */
+  removeValue: (value: string) => void;
+}
+
+export interface TagStoreOptions
+  extends
+    StoreOptions<TagStoreState, "value" | "values">,
+    CompositeStoreOptions<TagStoreItem> {
+  /**
+   * The initial value of the tag input.
+   * @default ""
+   */
+  defaultValue?: TagStoreState["value"];
+  /**
+   * The initial selected tag values.
+   * @default []
+   */
+  defaultValues?: TagStoreState["values"];
+}
+
+export interface TagStoreProps
+  extends TagStoreOptions, StoreProps<TagStoreState> {}
+
+export interface TagStore extends TagStoreFunctions, Store<TagStoreState> {}

package/src/toolbar/toolbar-store.ts

@@ -0,0 +1,47 @@
+import type { Store, StoreOptions, 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 toolbar store.
+ */
+export function createToolbarStore(
+  props: ToolbarStoreProps = {},
+): ToolbarStore {
+  const syncState = props.store?.getState();
+
+  return createCompositeStore({
+    ...props,
+    orientation: defaultValue(
+      props.orientation,
+      syncState?.orientation,
+      "horizontal" as const,
+    ),
+    focusLoop: defaultValue(props.focusLoop, syncState?.focusLoop, true),
+  });
+}
+
+export interface ToolbarStoreState extends CompositeStoreState {
+  /** @default "horizontal" */
+  orientation: CompositeStoreState["orientation"];
+  /** @default true */
+  focusLoop: CompositeStoreState["focusLoop"];
+}
+
+export interface ToolbarStoreFunctions extends CompositeStoreFunctions {}
+
+export interface ToolbarStoreOptions
+  extends
+    StoreOptions<ToolbarStoreState, "orientation" | "focusLoop">,
+    CompositeStoreOptions {}
+
+export interface ToolbarStoreProps
+  extends ToolbarStoreOptions, StoreProps<ToolbarStoreState> {}
+
+export interface ToolbarStore
+  extends ToolbarStoreFunctions, Store<ToolbarStoreState> {}

package/src/tooltip/tooltip-store.ts

@@ -0,0 +1,93 @@
+import { createStore } from "@ariakit/store";
+import type { Store, StoreOptions, StoreProps } from "@ariakit/store";
+import { defaultValue } from "@ariakit/utils";
+import type {
+  HovercardStoreFunctions,
+  HovercardStoreOptions,
+  HovercardStoreState,
+} from "../hovercard/hovercard-store.ts";
+import { createHovercardStore } from "../hovercard/hovercard-store.ts";
+
+/**
+ * Creates a tooltip store.
+ */
+export function createTooltipStore(
+  props: TooltipStoreProps = {},
+): TooltipStore {
+  if (process.env.NODE_ENV !== "production") {
+    if (props.type === "label") {
+      console.warn(
+        "The `type` option on the tooltip store is deprecated.",
+        "Render a visually hidden label or use the `aria-label` or `aria-labelledby` attributes on the anchor element instead.",
+        "See https://ariakit.com/components/tooltip#tooltip-anchors-must-have-accessible-names",
+      );
+    }
+  }
+
+  const syncState = props.store?.getState();
+
+  const hovercard = createHovercardStore({
+    ...props,
+    placement: defaultValue(
+      props.placement,
+      syncState?.placement,
+      "top" as const,
+    ),
+    hideTimeout: defaultValue(props.hideTimeout, syncState?.hideTimeout, 0),
+  });
+
+  const initialState: TooltipStoreState = {
+    ...hovercard.getState(),
+    type: defaultValue(props.type, syncState?.type, "description" as const),
+    skipTimeout: defaultValue(props.skipTimeout, syncState?.skipTimeout, 300),
+  };
+
+  const tooltip = createStore(initialState, hovercard, props.store);
+
+  return {
+    ...hovercard,
+    ...tooltip,
+  };
+}
+
+export interface TooltipStoreState extends HovercardStoreState {
+  /** @default "top" */
+  placement: HovercardStoreState["placement"];
+  /** @default 0 */
+  hideTimeout?: HovercardStoreState["hideTimeout"];
+  /**
+   * Determines whether the tooltip is being used as a label or a description
+   * for the anchor element.
+   * @deprecated Render a visually hidden label or use the `aria-label` or
+   * `aria-labelledby` attributes on the anchor element instead.
+   * @default "description"
+   */
+  type: "label" | "description";
+  /**
+   * The amount of time after a tooltip is hidden while all tooltips on the
+   * page can be shown immediately, without waiting for the show timeout.
+   * @default 300
+   */
+  skipTimeout: number;
+}
+
+export type TooltipStoreFunctions = HovercardStoreFunctions;
+
+export interface TooltipStoreOptions
+  extends
+    StoreOptions<
+      TooltipStoreState,
+      | "type"
+      | "placement"
+      | "timeout"
+      | "showTimeout"
+      | "hideTimeout"
+      | "skipTimeout"
+    >,
+    HovercardStoreOptions {}
+
+export interface TooltipStoreProps
+  extends TooltipStoreOptions, StoreProps<TooltipStoreState> {}
+
+export interface TooltipStore
+  extends TooltipStoreFunctions, Store<TooltipStoreState> {}