@ariakit/react-core 0.0.1 → 0.1.1

package/esm/form/form-radio.js

@@ -0,0 +1,77 @@
+import {
+  useFormField
+} from "../__chunks/RFLPDFU5.js";
+import {
+  FormContext
+} from "../__chunks/P3I4MECH.js";
+import {
+  useRadio
+} from "../__chunks/TUP5WTZZ.js";
+import "../__chunks/6I2PARRP.js";
+import "../__chunks/WHN4PCW7.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import {
+  createElement,
+  createHook,
+  createMemoComponent
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/6DAEYZ43.js";
+import {
+  useEvent
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/form/form-radio.ts
+import { useContext } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+var useFormRadio = createHook(
+  ({ store, name: nameProp, value, ...props }) => {
+    const context = useContext(FormContext);
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "FormRadio must be wrapped in a Form component"
+    );
+    const name = `${nameProp}`;
+    const onChangeProp = props.onChange;
+    const onChange = useEvent((event) => {
+      onChangeProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      store?.setValue(name, value);
+    });
+    const checkedProp = props.checked;
+    const checked = store.useState(
+      () => checkedProp ?? store?.getValue(name) === value
+    );
+    props = {
+      ...props,
+      checked,
+      onChange
+    };
+    props = useRadio({ value, ...props });
+    props = useFormField({
+      store,
+      name,
+      "aria-labelledby": void 0,
+      ...props
+    });
+    return props;
+  }
+);
+var FormRadio = createMemoComponent((props) => {
+  const htmlProps = useFormRadio(props);
+  return createElement("input", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  FormRadio.displayName = "FormRadio";
+}
+export {
+  FormRadio,
+  useFormRadio
+};

package/esm/form/form-remove.d.ts

@@ -0,0 +1,76 @@
+import type { StringLike } from "@ariakit/core/form/types";
+import type { ButtonOptions } from "../button/button.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * Returns props to create a `FormRemove` component.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({
+ *   defaultValues: {
+ *     languages: ["JavaScript", "PHP"],
+ *   },
+ * });
+ * const props = useFormRemove({
+ *   store,
+ *   name: store.names.languages,
+ *   index: 0,
+ * });
+ * const values = store.useState("values");
+ *
+ * <Form store={store}>
+ *   {values.languages.map((_, i) => (
+ *     <FormInput key={i} name={store.names.languages[i]} />
+ *   ))}
+ *   <Role {...props}>Remove first language</Role>
+ * </Form>
+ * ```
+ */
+export declare const useFormRemove: import("../utils/types.js").Hook<FormRemoveOptions<"button">>;
+/**
+ * Renders a button that will remove an item from an array field in the form
+ * when clicked.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     languages: ["JavaScript", "PHP"],
+ *   },
+ * });
+ * const values = form.useState("values");
+ *
+ * <Form store={form}>
+ *   {values.languages.map((_, i) => (
+ *     <div key={i}>
+ *       <FormInput name={form.names.languages[i]} />
+ *       <FormRemove name={form.names.languages} index={i} />
+ *     </div>
+ *   ))}
+ * </Form>
+ * ```
+ */
+export declare const FormRemove: import("../utils/types.js").Component<FormRemoveOptions<"button">>;
+export interface FormRemoveOptions<T extends As = "button"> extends ButtonOptions<T> {
+    /**
+     * Object returned by the `useFormStore` hook. If not provided, the parent
+     * `Form` component's context will be used.
+     */
+    store?: FormStore;
+    /**
+     * Name of the array field.
+     */
+    name: StringLike;
+    /**
+     * Index of the item to remove.
+     */
+    index: number;
+    /**
+     * Whether the focus should be moved to the next or previous field when the
+     * button is clicked.
+     * @default true
+     */
+    autoFocusOnClick?: boolean;
+}
+export type FormRemoveProps<T extends As = "button"> = Props<FormRemoveOptions<T>>;

package/esm/form/form-remove.js

@@ -0,0 +1,92 @@
+import {
+  FormContext
+} from "../__chunks/P3I4MECH.js";
+import {
+  useButton
+} from "../__chunks/I4MLEPTM.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/5TGAWEHD.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useEvent
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/form/form-remove.ts
+import { useContext } from "react";
+import { isTextField } from "@ariakit/core/utils/dom";
+import { invariant } from "@ariakit/core/utils/misc";
+function findNextOrPreviousField(items, name, index) {
+  const fields = items?.filter(
+    (item) => item.type === "field" && item.name.startsWith(name)
+  );
+  const regex = new RegExp(`^${name}\\.(\\d+)`);
+  const nextField = fields?.find((field) => {
+    const fieldIndex = field.name.replace(regex, "$1");
+    return parseInt(fieldIndex) > index;
+  });
+  if (nextField)
+    return nextField;
+  return fields?.reverse().find((field) => {
+    const fieldIndex = field.name.replace(regex, "$1");
+    return parseInt(fieldIndex) < index;
+  });
+}
+function findPushButton(items, name) {
+  return items?.find((item) => item.type === "button" && item.name === name);
+}
+var useFormRemove = createHook(
+  ({ store, name: nameProp, index, autoFocusOnClick = true, ...props }) => {
+    const context = useContext(FormContext);
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "FormRemove must be wrapped in a Form component"
+    );
+    const name = `${nameProp}`;
+    const onClickProp = props.onClick;
+    const onClick = useEvent((event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (!store)
+        return;
+      store.removeValue(name, index);
+      if (!autoFocusOnClick)
+        return;
+      const { items } = store.getState();
+      const item = findNextOrPreviousField(items, name, index);
+      const element = item?.element;
+      if (element) {
+        element.focus();
+        if (isTextField(element)) {
+          element.select();
+        }
+      } else {
+        const pushButton = findPushButton(items, name);
+        pushButton?.element?.focus();
+      }
+    });
+    props = {
+      ...props,
+      onClick
+    };
+    props = useButton(props);
+    return props;
+  }
+);
+var FormRemove = createComponent((props) => {
+  const htmlProps = useFormRemove(props);
+  return createElement("button", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  FormRemove.displayName = "FormRemove";
+}
+export {
+  FormRemove,
+  useFormRemove
+};

package/esm/form/form-reset.d.ts

@@ -0,0 +1,36 @@
+import type { ButtonOptions } from "../button/button.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * Returns props to create a `FormReset` component.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore();
+ * const props = useFormReset({ store });
+ * <Form store={store}>
+ *   <Role {...props}>Reset</Role>
+ * </Form>
+ * ```
+ */
+export declare const useFormReset: import("../utils/types.js").Hook<FormResetOptions<"button">>;
+/**
+ * Renders a reset buttom in a form.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore();
+ * <Form store={form}>
+ *   <FormReset>Reset</FormReset>
+ * </Form>
+ * ```
+ */
+export declare const FormReset: import("../utils/types.js").Component<FormResetOptions<"button">>;
+export interface FormResetOptions<T extends As = "button"> extends ButtonOptions<T> {
+    /**
+     * Object returned by the `useFormStore` hook. If not provided, the parent
+     * `Form` component's context will be used.
+     */
+    store?: FormStore;
+}
+export type FormResetProps<T extends As = "button"> = Props<FormResetOptions<T>>;

package/esm/form/form-reset.js

@@ -0,0 +1,47 @@
+import {
+  FormContext
+} from "../__chunks/P3I4MECH.js";
+import {
+  useButton
+} from "../__chunks/I4MLEPTM.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/5TGAWEHD.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/form/form-reset.ts
+import { useContext } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+var useFormReset = createHook(
+  ({ store, ...props }) => {
+    const context = useContext(FormContext);
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "FormReset must be wrapped in a Form component"
+    );
+    props = {
+      type: "reset",
+      disabled: store.useState("submitting"),
+      ...props
+    };
+    props = useButton(props);
+    return props;
+  }
+);
+var FormReset = createComponent((props) => {
+  const htmlProps = useFormReset(props);
+  return createElement("button", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  FormReset.displayName = "FormReset";
+}
+export {
+  FormReset,
+  useFormReset
+};

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

@@ -0,0 +1,104 @@
+import * as Core from "@ariakit/core/form/form-store";
+import type { StringLike } from "@ariakit/core/form/types";
+import type { PickRequired } from "@ariakit/core/utils/types";
+import type { CollectionStoreFunctions, CollectionStoreOptions, CollectionStoreState } from "../collection/collection-store.js";
+import type { Store } from "../utils/store.js";
+type Values = Core.FormStoreValues;
+type Item = Core.FormStoreItem;
+export declare function useFormStoreOptions(props: FormStoreProps): Partial<CollectionStoreOptions<{
+    id: string;
+    element?: HTMLElement | null | undefined;
+} & {
+    type: "button" | "label" | "error" | "description" | "field";
+    name: string;
+}>>;
+export declare function useFormStoreProps<T extends Omit<FormStore, "useValue" | "useValidate" | "useSubmit">>(store: T, props: FormStoreProps): T & {
+    useValue: <T_1 = any>(name: StringLike) => T_1;
+    useValidate: (callback: Core.FormStoreCallback<FormStoreState<import("@ariakit/core/utils/types").AnyObject>>) => void;
+    useSubmit: (callback: Core.FormStoreCallback<FormStoreState<import("@ariakit/core/utils/types").AnyObject>>) => void;
+};
+/**
+ * Creates a form store.
+ * @example
+ * ```jsx
+ * const form = useFormStore({ defaultValues: { email: "" } });
+ * <Form store={form}>
+ *   <FormLabel name={form.names.email}>Email</FormLabel>
+ *   <FormInput name={form.names.email} />
+ *   <FormError name={form.names.email} />
+ *   <FormSubmit>Submit</FormSubmit>
+ * </Form>
+ * ```
+ */
+export declare function useFormStore<T extends Values = Values>(props: PickRequired<FormStoreProps<T>, "values" | "defaultValues" | "errors" | "defaultErrors" | "touched" | "defaultTouched">): FormStore<T>;
+export declare function useFormStore(props: FormStoreProps): FormStore;
+export type FormStoreItem = Item;
+export interface FormStoreState<T extends Values = Values> extends Core.FormStoreState<T>, CollectionStoreState<Item> {
+}
+export interface FormStoreFunctions<T extends Values = Values> extends Core.FormStoreFunctions<T>, CollectionStoreFunctions<Item> {
+    /**
+     * A custom hook that rerenders the component when the value of the given
+     * field changes. It returns the value of the field.
+     * @param name The name of the field.
+     * @example
+     * const nameValue = store.useValue("name");
+     * // Can also use store.names for type-safety.
+     * const emailValue = store.useValue(store.names.email);
+     */
+    useValue: <T = any>(name: StringLike) => T;
+    /**
+     * Custom hook that accepts a callback that will be used to validate the form
+     * when `form.validate` is called.
+     * @param callback The callback that receives the form state as argument.
+     * @example
+     * store.useValidate(async (state) => {
+     *   const errors = await api.validate(state.values);
+     *   if (errors) {
+     *     store.setErrors(errors);
+     *   }
+     * });
+     */
+    useValidate: (callback: Core.FormStoreCallback<FormStoreState<T>>) => void;
+    /**
+     * Custom hook that accepts a callback that will be used to submit the form
+     * when `form.submit` is called.
+     * @param callback The callback that receives the form state as argument.
+     * @example
+     * store.useSubmit(async (state) => {
+     *   try {
+     *     await api.submit(state.values);
+     *   } catch (errors) {
+     *     store.setErrors(errors);
+     *   }
+     * });
+     */
+    useSubmit: (callback: Core.FormStoreCallback<FormStoreState<T>>) => void;
+}
+export interface FormStoreOptions<T extends Values = Values> extends Core.FormStoreOptions<T>, CollectionStoreOptions<Item> {
+    /**
+     * Function that will be called when `values` state changes.
+     * @param values The new values.
+     * @example
+     * function MyForm({ values, onChange }) {
+     *   const form = useFormStore({ values, setValues: onChange });
+     * }
+     */
+    setValues?: (values: FormStoreState<T>["values"]) => void;
+    /**
+     * Function that will be called when the `errors` state changes.
+     * @param errors The new errors.
+     * @example
+     * useFormStore({ setErrors: (errors) => console.log(errors) });
+     */
+    setErrors?: (errors: FormStoreState<T>["errors"]) => void;
+    /**
+     * Function that will be called when the `touched` state changes.
+     * @param touched The new touched state.
+     * @example
+     * useFormStore({ setTouched: (touched) => console.log(touched) });
+     */
+    setTouched?: (touched: FormStoreState<T>["touched"]) => void;
+}
+export type FormStoreProps<T extends Values = Values> = FormStoreOptions<T> & Core.FormStoreProps<T>;
+export type FormStore<T extends Values = Values> = FormStoreFunctions<T> & Store<Core.FormStore<T>>;
+export {};

package/esm/form/form-store.js

@@ -0,0 +1,53 @@
+import {
+  useCollectionStoreOptions,
+  useCollectionStoreProps
+} from "../__chunks/56XURSTF.js";
+import {
+  useStore,
+  useStoreProps
+} from "../__chunks/6DAEYZ43.js";
+import {
+  useSafeLayoutEffect
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/form/form-store.ts
+import { useCallback, useMemo } from "react";
+import * as Core from "@ariakit/core/form/form-store";
+function useFormStoreOptions(props) {
+  return useCollectionStoreOptions(props);
+}
+function useFormStoreProps(store, props) {
+  store = useCollectionStoreProps(store, props);
+  useStoreProps(store, props, "values", "setValues");
+  useStoreProps(store, props, "errors", "setErrors");
+  useStoreProps(store, props, "touched", "setTouched");
+  const useValue = useCallback((name) => {
+    return store.useState(() => store.getValue(name));
+  }, []);
+  const useValidate = useCallback((callback) => {
+    useSafeLayoutEffect(() => store.onValidate(callback), [callback]);
+  }, []);
+  const useSubmit = useCallback((callback) => {
+    useSafeLayoutEffect(() => store.onSubmit(callback), [callback]);
+  }, []);
+  return useMemo(
+    () => ({
+      ...store,
+      useValue,
+      useValidate,
+      useSubmit
+    }),
+    []
+  );
+}
+function useFormStore(props = {}) {
+  const options = useFormStoreOptions(props);
+  const store = useStore(() => Core.createFormStore({ ...props, ...options }));
+  return useFormStoreProps(store, props);
+}
+export {
+  useFormStore,
+  useFormStoreOptions,
+  useFormStoreProps
+};

package/esm/form/form-submit.d.ts

@@ -0,0 +1,40 @@
+import type { ButtonOptions } from "../button/button.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * Returns props to create a `FormReset` component.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore();
+ * const props = useFormSubmit({ store });
+ * <Form store={store}>
+ *   <Role {...props}>Submit</Role>
+ * </Form>
+ * ```
+ */
+export declare const useFormSubmit: import("../utils/types.js").Hook<FormSubmitOptions<"button">>;
+/**
+ * Renders a submit buttom in a form.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore();
+ * <Form store={form}>
+ *   <FormSubmit>Submit</FormSubmit>
+ * </Form>
+ * ```
+ */
+export declare const FormSubmit: import("../utils/types.js").Component<FormSubmitOptions<"button">>;
+export interface FormSubmitOptions<T extends As = "button"> extends ButtonOptions<T> {
+    /**
+     * Object returned by the `useFormStore` hook. If not provided, the parent
+     * `Form` component's context will be used.
+     */
+    store?: FormStore;
+    /**
+     * @default true
+     */
+    accessibleWhenDisabled?: ButtonOptions<T>["accessibleWhenDisabled"];
+}
+export type FormSubmitProps<T extends As = "button"> = Props<FormSubmitOptions<T>>;

package/esm/form/form-submit.js

@@ -0,0 +1,47 @@
+import {
+  FormContext
+} from "../__chunks/P3I4MECH.js";
+import {
+  useButton
+} from "../__chunks/I4MLEPTM.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/5TGAWEHD.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/form/form-submit.ts
+import { useContext } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+var useFormSubmit = createHook(
+  ({ store, accessibleWhenDisabled = true, ...props }) => {
+    const context = useContext(FormContext);
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "FormSubmit must be wrapped in a Form component"
+    );
+    props = {
+      type: "submit",
+      disabled: store.useState("submitting"),
+      ...props
+    };
+    props = useButton({ ...props, accessibleWhenDisabled });
+    return props;
+  }
+);
+var FormSubmit = createComponent((props) => {
+  const htmlProps = useFormSubmit(props);
+  return createElement("button", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  FormSubmit.displayName = "FormSubmit";
+}
+export {
+  FormSubmit,
+  useFormSubmit
+};

package/esm/form/form.d.ts

@@ -0,0 +1,63 @@
+import type { As, Options, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * Returns props to create a `Form` component.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore();
+ * const props = useForm({ store, as: "form" });
+ * <Role {...props} />
+ * ```
+ */
+export declare const useForm: import("../utils/types.js").Hook<FormOptions<"form">>;
+/**
+ * Renders a form element.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({ defaultValues: { username: "johndoe" } });
+ * <Form store={form}>
+ *   <FormLabel name={form.names.username}>Username</FormLabel>
+ *   <FormInput name={form.names.username} />
+ * </Form>
+ * ```
+ */
+export declare const Form: import("../utils/types.js").Component<FormOptions<"form">>;
+export interface FormOptions<T extends As = "form"> extends Options<T> {
+    /**
+     * Object returned by the `useFormStore` hook.
+     */
+    store: FormStore;
+    /**
+     * Whether the form should trigger the validation callbacks when values
+     * change.
+     * @default true
+     */
+    validateOnChange?: boolean;
+    /**
+     * Whether the form should trigger the validation callbacks when form fields
+     * are blurred.
+     * @default true
+     */
+    validateOnBlur?: boolean;
+    /**
+     * Whether the form store should be reset when the form element gets
+     * unmounted.
+     * @default false
+     */
+    resetOnUnmount?: boolean;
+    /**
+     * Whether the form store should be reset when the form gets successfully
+     * submitted.
+     * @default true
+     */
+    resetOnSubmit?: boolean;
+    /**
+     * Whether the form should automatically focus the first invalid field when
+     * the form gets submitted.
+     * @default true
+     */
+    autoFocusOnSubmit?: boolean;
+}
+export type FormProps<T extends As = "form"> = Props<FormOptions<T>>;