@ariakit/core 0.0.1 → 0.1.0

package/esm/form/form-store.js

@@ -0,0 +1,241 @@
+import {
+  createCollectionStore
+} from "../__chunks/L7KN5AYP.js";
+import {
+  createStore
+} from "../__chunks/UOJSZ35L.js";
+import {
+  applyState,
+  defaultValue,
+  isInteger,
+  isObject
+} from "../__chunks/KLKI3AIB.js";
+import "../__chunks/UVCATTRC.js";
+
+// src/form/form-store.ts
+function nextFrame() {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+function hasMessages(object) {
+  return Object.keys(object).some((key) => {
+    if (isObject(object[key])) {
+      return hasMessages(object[key]);
+    }
+    return !!object[key];
+  });
+}
+function get(values, path, defaultValue2) {
+  const [key, ...rest] = Array.isArray(path) ? path : `${path}`.split(".");
+  if (key == null || !values) {
+    return defaultValue2;
+  }
+  if (!rest.length) {
+    return values[key] ?? defaultValue2;
+  }
+  return get(values[key], rest, defaultValue2);
+}
+function set(values, path, value) {
+  const [k, ...rest] = Array.isArray(path) ? path : `${path}`.split(".");
+  if (k == null)
+    return values;
+  const key = k;
+  const isIntegerKey = isInteger(key);
+  const nextValues = isIntegerKey ? values || [] : values || {};
+  const nestedValues = nextValues[key];
+  const result = rest.length && (Array.isArray(nestedValues) || isObject(nestedValues)) ? set(nestedValues, rest, value) : value;
+  if (isIntegerKey) {
+    const index = Number(key);
+    if (values) {
+      return [
+        ...values.slice(0, index),
+        result,
+        ...values.slice(index + 1)
+      ];
+    }
+    const nextValues2 = [];
+    nextValues2[index] = result;
+    return nextValues2;
+  }
+  return { ...values, [key]: result };
+}
+function setAll(values, value) {
+  const result = {};
+  const keys = Object.keys(values);
+  for (const key of keys) {
+    const currentValue = values[key];
+    if (Array.isArray(currentValue)) {
+      result[key] = currentValue.map((v) => {
+        if (isObject(v)) {
+          return setAll(v, value);
+        }
+        return value;
+      });
+    } else if (isObject(currentValue)) {
+      result[key] = setAll(currentValue, value);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function getNameHandler(cache, prevKeys = []) {
+  const handler = {
+    get(target, key) {
+      if (["toString", "valueOf", Symbol.toPrimitive].includes(key)) {
+        return () => prevKeys.join(".");
+      }
+      const nextKeys = [...prevKeys, key];
+      const nextKey = nextKeys.join(".");
+      if (cache[nextKey]) {
+        return cache[nextKey];
+      }
+      const nextProxy = new Proxy(target, getNameHandler(cache, nextKeys));
+      cache[nextKey] = nextProxy;
+      return nextProxy;
+    }
+  };
+  return handler;
+}
+function createNames() {
+  const cache = /* @__PURE__ */ Object.create(null);
+  return new Proxy(/* @__PURE__ */ Object.create(null), getNameHandler(cache));
+}
+function createFormStore(props = {}) {
+  const syncState = props.store?.getState();
+  const collection = createCollectionStore(props);
+  const values = defaultValue(
+    props.values,
+    syncState?.values,
+    props.defaultValues,
+    {}
+  );
+  const errors = defaultValue(
+    props.errors,
+    syncState?.errors,
+    props.defaultErrors,
+    {}
+  );
+  const touched = defaultValue(
+    props.touched,
+    syncState?.touched,
+    props.defaultTouched,
+    {}
+  );
+  const initialState = {
+    ...collection.getState(),
+    values,
+    errors,
+    touched,
+    validating: defaultValue(syncState?.validating, false),
+    submitting: defaultValue(syncState?.submitting, false),
+    submitSucceed: defaultValue(syncState?.submitSucceed, 0),
+    submitFailed: defaultValue(syncState?.submitFailed, 0),
+    valid: !hasMessages(errors)
+  };
+  const form = createStore(initialState, collection, props.store);
+  const validateCallbacks = /* @__PURE__ */ new Set();
+  const submitCallbacks = /* @__PURE__ */ new Set();
+  const validate = async () => {
+    form.setState("validating", true);
+    form.setState("errors", {});
+    try {
+      const callbacks = [...validateCallbacks];
+      const results = callbacks.map((callback) => callback(form.getState()));
+      await Promise.all(results).then(nextFrame);
+      return !hasMessages(form.getState().errors);
+    } finally {
+      form.setState("validating", false);
+    }
+  };
+  return {
+    ...collection,
+    ...form,
+    names: createNames(),
+    setValues: (values2) => form.setState("values", values2),
+    getValue: (name) => get(form.getState().values, name),
+    setValue: (name, value) => form.setState("values", (values2) => {
+      const prevValue = get(values2, name);
+      const nextValue = applyState(value, prevValue);
+      if (nextValue === prevValue)
+        return values2;
+      return set(values2, name, nextValue);
+    }),
+    pushValue: (name, value) => form.setState("values", (values2) => {
+      const array = get(values2, name, []);
+      return set(values2, name, [...array, value]);
+    }),
+    removeValue: (name, index) => form.setState("values", (values2) => {
+      const array = get(values2, name, []);
+      return set(values2, name, [
+        ...array.slice(0, index),
+        null,
+        ...array.slice(index + 1)
+      ]);
+    }),
+    setErrors: (errors2) => form.setState("errors", errors2),
+    getError: (name) => get(form.getState().errors, name),
+    setError: (name, error) => form.setState("errors", (errors2) => {
+      const prevError = get(errors2, name);
+      const nextError = applyState(error, prevError);
+      if (nextError === prevError)
+        return errors2;
+      return set(errors2, name, nextError);
+    }),
+    setTouched: (touched2) => form.setState("touched", touched2),
+    getFieldTouched: (name) => !!get(form.getState().touched, name),
+    setFieldTouched: (name, value) => form.setState("touched", (touched2) => {
+      const prevValue = get(touched2, name);
+      const nextValue = applyState(value, prevValue);
+      if (nextValue === prevValue)
+        return touched2;
+      return set(touched2, name, nextValue);
+    }),
+    onValidate: (callback) => {
+      validateCallbacks.add(callback);
+      return () => validateCallbacks.delete(callback);
+    },
+    validate,
+    onSubmit: (callback) => {
+      submitCallbacks.add(callback);
+      return () => submitCallbacks.delete(callback);
+    },
+    submit: async () => {
+      form.setState("submitting", true);
+      form.setState("touched", setAll(form.getState().values, true));
+      try {
+        if (await validate()) {
+          const callbacks = [...submitCallbacks];
+          const results = callbacks.map(
+            (callback) => callback(form.getState())
+          );
+          await Promise.all(results).then(nextFrame);
+          if (!hasMessages(form.getState().errors)) {
+            form.setState("submitSucceed", (count) => count + 1);
+            return true;
+          }
+        }
+        form.setState("submitFailed", (count) => count + 1);
+        return false;
+      } catch (error) {
+        form.setState("submitFailed", (count) => count + 1);
+        throw error;
+      } finally {
+        form.setState("submitting", false);
+      }
+    },
+    reset: () => {
+      form.setState("values", values);
+      form.setState("errors", errors);
+      form.setState("touched", touched);
+      form.setState("validating", false);
+      form.setState("submitting", false);
+      form.setState("submitSucceed", 0);
+      form.setState("submitFailed", 0);
+    }
+  };
+}
+export {
+  createFormStore,
+  get,
+  hasMessages
+};

package/esm/form/types.d.ts

@@ -0,0 +1,38 @@
+import type { AnyObject } from "../utils/types.js";
+/**
+ * An object or primitive value that can be converted to a string.
+ */
+export type StringLike = {
+    toString: () => string;
+    valueOf: () => string;
+};
+/**
+ * Maps through an object `T` or array and defines the leaf values to the given
+ * type `V`.
+ * @template T Object
+ * @template V Value
+ */
+export type DeepMap<T, V> = {
+    [K in keyof T]: T[K] extends AnyObject ? DeepMap<T[K], V> : V;
+};
+/**
+ * Similar to `Partial<T>`, but recursively maps through the object and makes
+ * nested object properties optional.
+ * @template T Object
+ */
+export type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends AnyObject ? DeepPartial<T[K]> : T[K];
+};
+/**
+ * Maps through the values object `T` and defines all properties into a string
+ * like type. That is, a type that is an object that can contain other
+ * properties but can also be converted into a string with the path name.
+ * @template T Values object
+ */
+export type Names<T> = {
+    [K in keyof T]: T[K] extends Array<infer U> ? U extends AnyObject ? {
+        [key: number]: Names<U>;
+    } & StringLike : {
+        [key: number]: U & StringLike;
+    } & StringLike : T[K] extends AnyObject ? Names<T[K]> : StringLike;
+};

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

@@ -0,0 +1,45 @@
+import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
+import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
+import type { SetState } from "../utils/types.js";
+/**
+ * Creates a hovercard store.
+ */
+export declare function createHovercardStore(props?: HovercardStoreProps): HovercardStore;
+export interface HovercardStoreState extends PopoverStoreState {
+    /**
+     * @default "bottom"
+     */
+    placement: PopoverStoreState["placement"];
+    /**
+     * The amount of time in milliseconds to wait before showing or hiding the
+     * popover.
+     * @default 500
+     */
+    timeout: number;
+    /**
+     * The amount of time in milliseconds to wait before **showing** the popover.
+     * It defaults to the value passed to `timeout`.
+     */
+    showTimeout: number;
+    /**
+     * The amount of time in milliseconds to wait before **hiding** the popover.
+     * It defaults to the value passed to `timeout`.
+     */
+    hideTimeout: number;
+    /**
+     * Whether the popover 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.
+     */
+    setAutoFocusOnShow: SetState<HovercardStoreState["autoFocusOnShow"]>;
+}
+export interface HovercardStoreOptions extends StoreOptions<HovercardStoreState, "placement" | "timeout" | "showTimeout" | "hideTimeout">, PopoverStoreOptions {
+}
+export type HovercardStoreProps = HovercardStoreOptions & StoreProps<HovercardStoreState>;
+export type HovercardStore = HovercardStoreFunctions & Store<HovercardStoreState>;

package/esm/hovercard/hovercard-store.js

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

package/esm/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/esm/index.js

@@ -0,0 +1,5 @@
+// src/index.ts
+var src_default = {};
+export {
+  src_default as default
+};

package/esm/menu/menu-bar-store.d.ts

@@ -0,0 +1,10 @@
+import type { CompositeStore, CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreProps, CompositeStoreState } from "../composite/composite-store.js";
+/**
+ * Creates a menu bar store.
+ */
+export declare function createMenuBarStore(props?: MenuBarStoreProps): MenuBarStore;
+export type MenuBarStoreState = CompositeStoreState;
+export type MenuBarStoreFunctions = CompositeStoreFunctions;
+export type MenuBarStoreOptions = CompositeStoreOptions;
+export type MenuBarStoreProps = CompositeStoreProps;
+export type MenuBarStore = CompositeStore;

package/esm/menu/menu-bar-store.js

@@ -0,0 +1,27 @@
+import {
+  createCompositeStore
+} from "../__chunks/6U25WEDX.js";
+import "../__chunks/L7KN5AYP.js";
+import "../__chunks/UOJSZ35L.js";
+import {
+  defaultValue
+} from "../__chunks/KLKI3AIB.js";
+import "../__chunks/UVCATTRC.js";
+import "../__chunks/5XEKIOCW.js";
+
+// src/menu/menu-bar-store.ts
+function createMenuBarStore(props = {}) {
+  const syncState = props.store?.getState();
+  return createCompositeStore({
+    ...props,
+    orientation: defaultValue(
+      props.orientation,
+      syncState?.orientation,
+      "horizontal"
+    ),
+    focusLoop: defaultValue(props.focusLoop, syncState?.focusLoop, true)
+  });
+}
+export {
+  createMenuBarStore
+};

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

@@ -0,0 +1,70 @@
+import type { ComboboxStore } from "../combobox/combobox-store.js";
+import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { HovercardStoreFunctions, HovercardStoreOptions, HovercardStoreState } from "../hovercard/hovercard-store.js";
+import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
+import type { BivariantCallback, PickRequired, SetState, SetStateAction } from "../utils/types.js";
+type Values = Record<string, string | boolean | number | Array<string | number>>;
+export declare function createMenuStore<T extends Values = Values>(props: PickRequired<MenuStoreProps<T>, "values" | "defaultValues">): MenuStore<T>;
+export declare function createMenuStore(props?: MenuStoreProps): MenuStore;
+export type MenuStoreValues = Record<string, string | boolean | number | Array<string | number>>;
+export interface MenuStoreState<T extends Values = Values> 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` and
+     * `MenuItemRadio` components.
+     */
+    values: T;
+}
+export interface MenuStoreFunctions<T extends Values = Values> extends CompositeStoreFunctions, HovercardStoreFunctions {
+    /**
+     * Sets the `initialFocus` state.
+     */
+    setInitialFocus: SetState<MenuStoreState<T>["initialFocus"]>;
+    /**
+     * Sets the `values` state.
+     * @example
+     * store.setValues({ watching: ["issues"] });
+     * store.setValues((values) => ({ ...values, watching: ["issues"] }));
+     */
+    setValues: SetState<MenuStoreState<T>["values"]>;
+    /**
+     * Sets a specific menu value.
+     * @param name The name.
+     * @param value The value.
+     * @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 Values = Values> 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;
+    /**
+     * The default values for the `values` state.
+     * @default {}
+     */
+    defaultValues?: MenuStoreState<T>["values"];
+}
+export type MenuStoreProps<T extends Values = Values> = MenuStoreOptions<T> & StoreProps<MenuStoreState<T>>;
+export type MenuStore<T extends Values = Values> = MenuStoreFunctions<T> & Store<MenuStoreState<T>>;
+export {};

package/esm/menu/menu-store.js

@@ -0,0 +1,108 @@
+import {
+  createHovercardStore
+} from "../__chunks/RX3ZUQ6U.js";
+import "../__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 {
+  applyState,
+  defaultValue
+} from "../__chunks/KLKI3AIB.js";
+import "../__chunks/UVCATTRC.js";
+import "../__chunks/5XEKIOCW.js";
+
+// src/menu/menu-store.ts
+function createMenuStore({
+  combobox,
+  ...props
+} = {}) {
+  const store = mergeStore(
+    props.store,
+    combobox?.omit(
+      "baseElement",
+      "arrowElement",
+      "anchorElement",
+      "contentElement",
+      "popoverElement",
+      "disclosureElement"
+    )
+  );
+  const syncState = store.getState();
+  const composite = createCompositeStore({
+    ...props,
+    store,
+    orientation: defaultValue(
+      props.orientation,
+      syncState.orientation,
+      "vertical"
+    )
+  });
+  const hovercard = createHovercardStore({
+    ...props,
+    store,
+    placement: defaultValue(
+      props.placement,
+      syncState.placement,
+      "bottom-start"
+    ),
+    hideTimeout: defaultValue(props.hideTimeout, syncState.hideTimeout, 0)
+  });
+  const initialState = {
+    ...composite.getState(),
+    ...hovercard.getState(),
+    initialFocus: defaultValue(syncState.initialFocus, "container"),
+    values: defaultValue(
+      props.values,
+      syncState.values,
+      props.defaultValues,
+      {}
+    )
+  };
+  const menu = createStore(initialState, composite, hovercard, store);
+  menu.setup(
+    () => menu.sync(
+      (state) => {
+        if (state.mounted)
+          return;
+        menu.setState("activeId", null);
+      },
+      ["mounted"]
+    )
+  );
+  return {
+    ...composite,
+    ...hovercard,
+    ...menu,
+    setInitialFocus: (value) => menu.setState("initialFocus", value),
+    setValues: (values) => menu.setState("values", values),
+    setValue: (name, value) => {
+      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 !== void 0 && nextValue
+        };
+      });
+    }
+  };
+}
+export {
+  createMenuStore
+};