@ariakit/core 0.0.1 → 0.1.1

package/cjs/form/form-store.d.ts

@@ -0,0 +1,236 @@
+import type { CollectionStoreFunctions, CollectionStoreItem, CollectionStoreOptions, CollectionStoreState } from "../collection/collection-store.js";
+import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
+import type { AnyObject, PickRequired, SetState, SetStateAction } from "../utils/types.js";
+import type { DeepMap, DeepPartial, Names, StringLike } from "./types.js";
+type Values = AnyObject;
+type ErrorMessage = string | undefined | null;
+type Item = CollectionStoreItem & {
+    type: "field" | "label" | "description" | "error" | "button";
+    name: string;
+};
+export declare function hasMessages(object: Values): boolean;
+export declare function get<T>(values: Values, path: StringLike | string[], defaultValue?: T): T;
+/**
+ * Creates a form store.
+ */
+export declare function createFormStore<T extends Values = Values>(props: PickRequired<FormStoreProps<T>, "values" | "defaultValues" | "errors" | "defaultErrors" | "touched" | "defaultTouched">): FormStore<T>;
+export declare function createFormStore(props: FormStoreProps): FormStore;
+export type FormStoreCallback<T extends FormStoreState = FormStoreState> = (state: T) => void | Promise<void>;
+export type FormStoreValues = Values;
+export type FormStoreItem = Item;
+export interface FormStoreState<T extends Values = Values> extends CollectionStoreState<Item> {
+    /**
+     * Form values.
+     * @default {}
+     */
+    values: T;
+    /**
+     * Form errors.
+     */
+    errors: DeepPartial<DeepMap<T, ErrorMessage>>;
+    /**
+     * The touched state of the form.
+     */
+    touched: DeepPartial<DeepMap<T, boolean>>;
+    /**
+     * Whether the form is valid.
+     */
+    valid: boolean;
+    /**
+     * Whether the form is validating.
+     */
+    validating: boolean;
+    /**
+     * Whether the form is submitting.
+     */
+    submitting: boolean;
+    /**
+     * The number of times `form.submit` has been called with a successful
+     * response.
+     */
+    submitSucceed: number;
+    /**
+     * The number of times `form.submit` has been called with an error response.
+     */
+    submitFailed: number;
+}
+export interface FormStoreFunctions<T extends Values = Values> extends CollectionStoreFunctions<Item> {
+    /**
+     * An object containing the names of the form fields for type-safety.
+     * @example
+     * store.names.name; // "name"
+     * store.names.name.first; // "name.first"
+     * store.names.name.last; // "name.last"
+     */
+    names: Names<T>;
+    /**
+     * Sets the `values` state.
+     * @example
+     * store.setValues({ name: "John" });
+     * store.setValues((values) => ({ ...values, name: "John" }));
+     */
+    setValues: SetState<FormStoreState<T>["values"]>;
+    /**
+     * Retrieves a field value.
+     * @param name The field name.
+     * @example
+     * const nameValue = store.getValue("name");
+     * // Can also use store.names for type-safety.
+     * const emailValue = store.getValue(store.names.email);
+     */
+    getValue: <T = any>(name: StringLike) => T;
+    /**
+     * Sets a field value.
+     * @param name The field name.
+     * @param value The field value.
+     * @example
+     * store.setValue("name", "John");
+     * store.setValue("name", (value) => value + " Doe");
+     * // Can also use store.names for type-safety.
+     * store.setValue(store.names.name, "John");
+     */
+    setValue: <T>(name: StringLike, value: SetStateAction<T>) => void;
+    /**
+     * Pushes a value to an array field.
+     * @param name The array field name.
+     * @param value The value to push.
+     * @example
+     * store.pushValue("tags", "new tag");
+     * store.pushValue("tags", { id: 1, name: "new tag" });
+     * // Can also use store.names for type-safety.
+     * store.pushValue(store.names.tags, "new tag");
+     */
+    pushValue: <T>(name: StringLike, value: T) => void;
+    /**
+     * Removes a value from an array field.
+     * @param name The array field name.
+     * @param index The index of the value to remove.
+     * @example
+     * store.removeValue("tags", 0);
+     * store.removeValue("tags", 1);
+     * // Can also use store.names for type-safety.
+     * store.removeValue(store.names.tags, 0);
+     */
+    removeValue: (name: StringLike, index: number) => void;
+    /**
+     * Sets the `errors` state.
+     * @example
+     * store.setErrors({ name: "Name is required" });
+     * store.setErrors((errors) => ({ ...errors, name: "Name is required" }));
+     */
+    setErrors: SetState<FormStoreState<T>["errors"]>;
+    /**
+     * Retrieves a field error.
+     * @param name The field name.
+     * @example
+     * const nameError = store.getError("name");
+     * // Can also use store.names for type-safety.
+     * const emailError = store.getError(store.names.email);
+     */
+    getError: (name: StringLike) => ErrorMessage;
+    /**
+     * Sets a field error.
+     * @param name The field name.
+     * @param error The field error.
+     * @example
+     * store.setError("name", "Name is required");
+     * store.setError("name", (error) => error + "!");
+     * // Can also use store.names for type-safety.
+     * store.setError(store.names.name, "Name is required");
+     */
+    setError: (name: StringLike, error: SetStateAction<ErrorMessage>) => void;
+    /**
+     * Sets the `touched` state.
+     * @example
+     * store.setTouched({ name: true });
+     * store.setTouched((touched) => ({ ...touched, name: true }));
+     */
+    setTouched: SetState<FormStoreState<T>["touched"]>;
+    /**
+     * Retrieves a field touched state.
+     * @param name The field name.
+     * @example
+     * const nameTouched = store.getFieldTouched("name");
+     * // Can also use store.names for type-safety.
+     * const emailTouched = store.getFieldTouched(store.names.email);
+     */
+    getFieldTouched: (name: StringLike) => boolean;
+    /**
+     * Sets a field touched state.
+     * @param name The field name.
+     * @param value The field touched state.
+     * @example
+     * store.setFieldTouched("name", true);
+     * store.setFieldTouched("name", (value) => !value);
+     * // Can also use store.names for type-safety.
+     * store.setFieldTouched(store.names.name, true);
+     */
+    setFieldTouched: (name: StringLike, value: SetStateAction<boolean>) => void;
+    /**
+     * Function that accepts a callback that will be used to validate the form
+     * when `validate` is called. It returns a cleanup function that will remove
+     * the callback.
+     * @param callback The callback function.
+     * @example
+     * const cleanup = store.onValidate(async (state) => {
+     *   const errors = await api.validate(state.values);
+     *   if (errors) {
+     *     store.setErrors(errors);
+     *   }
+     * });
+     */
+    onValidate: (callback: FormStoreCallback<FormStoreState<T>>) => void;
+    /**
+     * Function that accepts a callback that will be used to submit the form
+     * when `submit` is called. It returns a cleanup function that will remove
+     * the callback.
+     * @param callback The callback function.
+     * @example
+     * const cleanup = store.onSubmit(async (state) => {
+     *   try {
+     *     await api.submit(state.values);
+     *   } catch (errors) {
+     *     store.setErrors(errors);
+     *   }
+     * });
+     */
+    onSubmit: (callback: FormStoreCallback<FormStoreState<T>>) => void;
+    /**
+     * Validates the form.
+     * @example
+     * if (await store.validate()) {
+     *  // Form is valid.
+     * }
+     */
+    validate: () => Promise<boolean>;
+    /**
+     * Submits the form. This also triggers validation.
+     * @example
+     * if (await form.submit()) {
+     *   // Form is submitted.
+     * }
+     */
+    submit: () => Promise<boolean>;
+    /**
+     * Resets the form to its default values.
+     */
+    reset: () => void;
+}
+export interface FormStoreOptions<T extends Values = Values> extends StoreOptions<FormStoreState<T>, "values" | "errors" | "touched">, CollectionStoreOptions<Item> {
+    /**
+     * The default values of the form.
+     * @default {}
+     */
+    defaultValues?: FormStoreState<T>["values"];
+    /**
+     * The default errors of the form.
+     */
+    defaultErrors?: FormStoreState<T>["errors"];
+    /**
+     * The default touched state of the form.
+     */
+    defaultTouched?: FormStoreState<T>["touched"];
+}
+export type FormStoreProps<T extends Values = Values> = FormStoreOptions<T> & StoreProps<FormStoreState<T>>;
+export type FormStore<T extends Values = Values> = FormStoreFunctions<T> & Store<FormStoreState<T>>;
+export {};

package/cjs/form/types.cjs

@@ -0,0 +1 @@
+"use strict";

package/cjs/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/cjs/hovercard/hovercard-store.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _EIDN2CWHcjs = require('../__chunks/EIDN2CWH.cjs');
+require('../__chunks/3KP2MDG6.cjs');
+require('../__chunks/EFEGT32M.cjs');
+require('../__chunks/7ZXWQTAY.cjs');
+require('../__chunks/3BBA3Z5G.cjs');
+require('../__chunks/5D5Y5EI4.cjs');
+
+
+exports.createHovercardStore = _EIDN2CWHcjs.createHovercardStore;

package/cjs/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/cjs/index.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/index.ts
+var src_default = {};
+
+
+exports.default = src_default;

package/cjs/index.d.ts

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

package/cjs/menu/menu-bar-store.cjs

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _AZVDLKO3cjs = require('../__chunks/AZVDLKO3.cjs');
+require('../__chunks/NX5OHIMM.cjs');
+require('../__chunks/3BBA3Z5G.cjs');
+
+
+var _5D5Y5EI4cjs = require('../__chunks/5D5Y5EI4.cjs');
+require('../__chunks/OFNGELMA.cjs');
+require('../__chunks/GDZQUFNP.cjs');
+
+// src/menu/menu-bar-store.ts
+function createMenuBarStore(props = {}) {
+  const syncState = _optionalChain([props, 'access', _ => _.store, 'optionalAccess', _2 => _2.getState, 'call', _3 => _3()]);
+  return _AZVDLKO3cjs.createCompositeStore.call(void 0, {
+    ...props,
+    orientation: _5D5Y5EI4cjs.defaultValue.call(void 0, 
+      props.orientation,
+      _optionalChain([syncState, 'optionalAccess', _4 => _4.orientation]),
+      "horizontal"
+    ),
+    focusLoop: _5D5Y5EI4cjs.defaultValue.call(void 0, props.focusLoop, _optionalChain([syncState, 'optionalAccess', _5 => _5.focusLoop]), true)
+  });
+}
+
+
+exports.createMenuBarStore = createMenuBarStore;

package/cjs/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/cjs/menu/menu-store.cjs

@@ -0,0 +1,108 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _EIDN2CWHcjs = require('../__chunks/EIDN2CWH.cjs');
+require('../__chunks/3KP2MDG6.cjs');
+require('../__chunks/EFEGT32M.cjs');
+require('../__chunks/7ZXWQTAY.cjs');
+
+
+var _AZVDLKO3cjs = require('../__chunks/AZVDLKO3.cjs');
+require('../__chunks/NX5OHIMM.cjs');
+
+
+
+var _3BBA3Z5Gcjs = require('../__chunks/3BBA3Z5G.cjs');
+
+
+
+var _5D5Y5EI4cjs = require('../__chunks/5D5Y5EI4.cjs');
+require('../__chunks/OFNGELMA.cjs');
+require('../__chunks/GDZQUFNP.cjs');
+
+// src/menu/menu-store.ts
+function createMenuStore({
+  combobox,
+  ...props
+} = {}) {
+  const store = _3BBA3Z5Gcjs.mergeStore.call(void 0, 
+    props.store,
+    _optionalChain([combobox, 'optionalAccess', _ => _.omit, 'call', _2 => _2(
+      "baseElement",
+      "arrowElement",
+      "anchorElement",
+      "contentElement",
+      "popoverElement",
+      "disclosureElement"
+    )])
+  );
+  const syncState = store.getState();
+  const composite = _AZVDLKO3cjs.createCompositeStore.call(void 0, {
+    ...props,
+    store,
+    orientation: _5D5Y5EI4cjs.defaultValue.call(void 0, 
+      props.orientation,
+      syncState.orientation,
+      "vertical"
+    )
+  });
+  const hovercard = _EIDN2CWHcjs.createHovercardStore.call(void 0, {
+    ...props,
+    store,
+    placement: _5D5Y5EI4cjs.defaultValue.call(void 0, 
+      props.placement,
+      syncState.placement,
+      "bottom-start"
+    ),
+    hideTimeout: _5D5Y5EI4cjs.defaultValue.call(void 0, props.hideTimeout, syncState.hideTimeout, 0)
+  });
+  const initialState = {
+    ...composite.getState(),
+    ...hovercard.getState(),
+    initialFocus: _5D5Y5EI4cjs.defaultValue.call(void 0, syncState.initialFocus, "container"),
+    values: _5D5Y5EI4cjs.defaultValue.call(void 0, 
+      props.values,
+      syncState.values,
+      props.defaultValues,
+      {}
+    )
+  };
+  const menu = _3BBA3Z5Gcjs.createStore.call(void 0, 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 = _5D5Y5EI4cjs.applyState.call(void 0, value, prevValue);
+        if (nextValue === prevValue)
+          return values;
+        return {
+          ...values,
+          [name]: nextValue !== void 0 && nextValue
+        };
+      });
+    }
+  };
+}
+
+
+exports.createMenuStore = createMenuStore;

package/cjs/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/cjs/popover/popover-store.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _3KP2MDG6cjs = require('../__chunks/3KP2MDG6.cjs');
+require('../__chunks/EFEGT32M.cjs');
+require('../__chunks/7ZXWQTAY.cjs');
+require('../__chunks/3BBA3Z5G.cjs');
+require('../__chunks/5D5Y5EI4.cjs');
+
+
+exports.createPopoverStore = _3KP2MDG6cjs.createPopoverStore;