asma-ui-core 3.90.1 → 3.91.0

package/dist/forms/createAsmaFieldController.js

@@ -0,0 +1,70 @@
+import { useCallback as y, useEffect as u, useRef as F } from "react";
+import { useController as S, useFormContext as x } from "react-hook-form";
+var B = 150, P = 20, U = "onAutoFillStart";
+function h(r) {
+  return r == null ? !0 : typeof r == "string" ? r.trim().length === 0 : typeof r == "number" ? Number.isNaN(r) : !1;
+}
+function V(r) {
+  return !(!r || r.required === !1 || r.required == null);
+}
+function X({ getLanguageCode: r, browserAutofill: l = !1 }) {
+  return function({ name: n, control: p, rules: f, helperText: I, requestFocus: s, render: L }) {
+    const d = x(), { field: t, fieldState: i } = S({
+      name: n,
+      control: p ?? d.control,
+      rules: f
+    }), { trigger: a, setValue: A } = d, { ref: o } = t, C = V(f), N = r(), v = F(null), g = (e) => {
+      e != null && e !== t.value && t.onChange(e), a(n);
+    };
+    u(() => {
+      s && o({ focus: s });
+    }, [o, s]), u(() => {
+      i.invalid && a(n);
+    }, [N]), u(() => {
+      l && (h(t.value) || a(n));
+    }, []), u(() => {
+      if (!l) return;
+      let e = 0;
+      const c = setInterval(() => {
+        e += 1;
+        const T = v.current;
+        T?.matches(":-webkit-autofill") ? (g(T.value), clearInterval(c)) : e >= P && clearInterval(c);
+      }, B);
+      return () => clearInterval(c);
+    }, []);
+    const _ = () => {
+      if (!C && h(t.value)) {
+        A(n, t.value, {
+          shouldTouch: !0,
+          shouldValidate: !1
+        });
+        return;
+      }
+      t.onBlur(), a(n);
+    };
+    u(() => {
+      i.error && a(n);
+    }, [t.value]);
+    const R = (...e) => {
+      t.onChange(...e);
+    }, E = (e) => {
+      l && e.animationName === U && g(e.target?.value);
+    }, M = y((e) => {
+      v.current = e, typeof o == "function" && o(e);
+    }, [o]), O = i.error?.message, m = !!i.error && (!l || i.isTouched);
+    return L({
+      value: t.value,
+      onChange: R,
+      onBlur: _,
+      onAnimationStart: E,
+      name: t.name,
+      ref: l ? M : o,
+      error: m,
+      helperText: m ? O : I,
+      reserveHelperText: f != null
+    });
+  };
+}
+export {
+  X as createAsmaFieldController
+};

package/dist/forms/createAsmaForms.js

@@ -0,0 +1,12 @@
+import { createAsmaFieldController as m } from "./createAsmaFieldController.js";
+import { submitChanged as n } from "./submitChanged.js";
+function u(t) {
+  const e = t.browserAutofill === !0, r = (o, i, l) => n(o, i, l, { touchInvalidFields: e });
+  return {
+    AsmaFieldController: m(t),
+    submitChanged: r
+  };
+}
+export {
+  u as createAsmaForms
+};

package/dist/forms/focusFormField.js

@@ -0,0 +1,14 @@
+var n = 'input, textarea, select, button, [contenteditable="true"], [contenteditable=""], [tabindex]';
+function o(t) {
+  return t.matches(n);
+}
+function c(t) {
+  const e = document.getElementById(t) ?? Array.from(document.querySelectorAll("[data-testid]")).find((r) => r.dataset.testid === t);
+  return e ? ((o(e) ? e : e.querySelector(n) ?? e).focus({ preventScroll: !0 }), e.scrollIntoView({
+    behavior: "instant",
+    block: "center"
+  }), !0) : !1;
+}
+export {
+  c as focusFormField
+};

package/dist/forms/getDirtyValues.js

@@ -0,0 +1,24 @@
+function u(e, f) {
+  if (e === !0) return { ...f };
+  if (!e || typeof e != "object") return {};
+  const c = {};
+  for (const n of Object.keys(e)) {
+    const o = e[n], t = f[n];
+    if (o === !0) {
+      c[n] = t;
+      continue;
+    }
+    if (Array.isArray(t)) {
+      o && (c[n] = t);
+      continue;
+    }
+    if (o && typeof o == "object" && t != null && typeof t == "object") {
+      const r = u(o, t);
+      Object.keys(r).length > 0 && (c[n] = r);
+    }
+  }
+  return c;
+}
+export {
+  u as getDirtyValues
+};

package/dist/forms/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/forms/index'
+export {}

package/dist/forms/index.js

@@ -0,0 +1,12 @@
+import { getDirtyValues as r } from "./getDirtyValues.js";
+import { touchInvalidFields as t } from "./touchInvalidFields.js";
+import { createAsmaForms as e } from "./createAsmaForms.js";
+import { focusFormField as f } from "./focusFormField.js";
+import { useAsmaForm as a } from "./useAsmaForm.js";
+export {
+  e as createAsmaForms,
+  f as focusFormField,
+  r as getDirtyValues,
+  t as touchInvalidFields,
+  a as useAsmaForm
+};

package/dist/forms/submitChanged.js

@@ -0,0 +1,11 @@
+import { getDirtyValues as o } from "./getDirtyValues.js";
+import { touchInvalidFields as n } from "./touchInvalidFields.js";
+async function f(t, a, i, e = {}) {
+  if (!(i ? await t.trigger() : await t.trigger(void 0, { shouldFocus: !0 })))
+    return e.touchInvalidFields && n(t), i?.(), !1;
+  const r = t.getValues(), { dirtyFields: u } = t.control._formState, l = await a(o(u, r), r);
+  return t.reset(l ?? r), !0;
+}
+export {
+  f as submitChanged
+};

package/dist/forms/touchInvalidFields.js

@@ -0,0 +1,12 @@
+function l(e) {
+  for (const t of Object.keys(e.control._formState.errors)) {
+    const o = t;
+    e.setValue(o, e.getValues(o), {
+      shouldTouch: !0,
+      shouldValidate: !1
+    });
+  }
+}
+export {
+  l as touchInvalidFields
+};

package/dist/forms/useAsmaForm.js

@@ -0,0 +1,16 @@
+import { useForm as o } from "react-hook-form";
+var e = {
+  mode: "onBlur",
+  reValidateMode: "onSubmit",
+  criteriaMode: "all",
+  shouldFocusError: !0
+};
+function t(r) {
+  return o({
+    ...r,
+    ...e
+  });
+}
+export {
+  t as useAsmaForm
+};

package/dist/src/forms/createAsmaFieldController.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement, ReactNode } from 'react';
+import { Control, ControllerRenderProps, FieldPath, FieldPathValue, FieldValues, RegisterOptions } from 'react-hook-form';
+import { AsmaFormsOptions } from './types';
+export interface AutofillAnimationEvent {
+    animationName: string;
+    target: EventTarget | null;
+}
+export interface AsmaFieldRenderProps<TValue = unknown> {
+    value: TValue;
+    onChange: (...event: unknown[]) => void;
+    onBlur: () => void;
+    onAnimationStart: (event: AutofillAnimationEvent) => void;
+    name: string;
+    ref: ControllerRenderProps['ref'];
+    error: boolean;
+    helperText: ReactNode;
+    reserveHelperText: boolean;
+}
+export interface AsmaFieldControllerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    name: TName;
+    control?: Control<TFieldValues>;
+    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
+    helperText?: ReactNode;
+    /** For controls that own their input ref (comboboxes, rich editors): RHF focuses the field through this instead of a DOM node. */
+    requestFocus?: () => void;
+    render: (props: AsmaFieldRenderProps<FieldPathValue<TFieldValues, TName>>) => ReactElement;
+}
+export declare function createAsmaFieldController({ getLanguageCode, browserAutofill, }: AsmaFormsOptions): <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, rules, helperText, requestFocus, render, }: AsmaFieldControllerProps<TFieldValues, TName>) => ReactElement;

package/dist/src/forms/createAsmaForms.d.ts

@@ -0,0 +1,9 @@
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import { createAsmaFieldController } from './createAsmaFieldController';
+import { SubmitChangedPatch } from './submitChanged';
+import { AsmaFormsOptions } from './types';
+export interface AsmaFormsApi {
+    AsmaFieldController: ReturnType<typeof createAsmaFieldController>;
+    submitChanged: <TFieldValues extends FieldValues>(methods: UseFormReturn<TFieldValues>, onPatch: SubmitChangedPatch<TFieldValues>, onInvalid?: () => void) => Promise<boolean>;
+}
+export declare function createAsmaForms(options: AsmaFormsOptions): AsmaFormsApi;

package/dist/src/forms/focusFormField.d.ts

@@ -0,0 +1 @@
+export declare function focusFormField(fieldDomId: string): boolean;

package/dist/src/forms/getDirtyValues.d.ts

@@ -0,0 +1 @@
+export declare function getDirtyValues<T extends Record<string, unknown>>(dirtyFields: Partial<Record<keyof T, unknown>> | boolean | undefined, values: T): Partial<T>;

package/dist/src/forms/index.d.ts

@@ -0,0 +1,8 @@
+export { createAsmaForms } from './createAsmaForms';
+export { focusFormField } from './focusFormField';
+export { getDirtyValues } from './getDirtyValues';
+export { touchInvalidFields } from './touchInvalidFields';
+export { useAsmaForm } from './useAsmaForm';
+export type { AsmaFieldControllerProps, AsmaFieldRenderProps, AutofillAnimationEvent } from './createAsmaFieldController';
+export type { SubmitChangedPatch } from './submitChanged';
+export type { AsmaFormsOptions } from './types';

package/dist/src/forms/submitChanged.d.ts

@@ -0,0 +1,6 @@
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+export type SubmitChangedPatch<TFieldValues extends FieldValues> = (dirty: Partial<TFieldValues>, all: TFieldValues) => Promise<TFieldValues | void>;
+export interface SubmitChangedOptions {
+    touchInvalidFields?: boolean;
+}
+export declare function submitChanged<TFieldValues extends FieldValues>(methods: UseFormReturn<TFieldValues>, onPatch: SubmitChangedPatch<TFieldValues>, onInvalid?: () => void, options?: SubmitChangedOptions): Promise<boolean>;

package/dist/src/forms/touchInvalidFields.d.ts

@@ -0,0 +1,2 @@
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+export declare function touchInvalidFields<TFieldValues extends FieldValues>(methods: UseFormReturn<TFieldValues>): void;

package/dist/src/forms/types.d.ts

@@ -0,0 +1,6 @@
+export interface AsmaFormsOptions {
+    /** Read during every render; a change re-validates already-invalid fields so their message re-renders in the new language. */
+    getLanguageCode: () => string;
+    /** Login/auth forms: mount validation, autofill sync, merged ref, touched-gated errors, touch-on-submit. */
+    browserAutofill?: boolean;
+}

package/dist/src/forms/useAsmaForm.d.ts

@@ -0,0 +1,2 @@
+import { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
+export declare function useAsmaForm<TFieldValues extends FieldValues = FieldValues, TContext = unknown>(props?: UseFormProps<TFieldValues, TContext>): UseFormReturn<TFieldValues, TContext>;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.90.1",
+    "version": "3.91.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",
@@ -26,6 +26,9 @@
             ],
             "icons/*": [
                 "dist/src/components/icons/*/index.d.ts"
+            ],
+            "forms": [
+                "dist/src/forms/index.d.ts"
             ]
         }
     },
@@ -45,6 +48,11 @@
             "types": "./dist/src/components/icons/*/index.d.ts",
             "default": "./dist/components/icons/*/index.js"
         },
+        "./forms": {
+            "types": "./dist/src/forms/index.d.ts",
+            "import": "./dist/forms/index.js",
+            "default": "./dist/forms/index.js"
+        },
         "./dist/style.css": "./dist/style.css",
         "./tw-configs/twConfigs.json": "./tw-configs/twConfigs.json",
         "./src/styles/breakpoints": "./src/styles/_breakpoints.scss"
@@ -102,6 +110,8 @@
         "@storybook/addon-themes": "^10.3.3",
         "@storybook/addon-vitest": "10.3.3",
         "@storybook/react-vite": "10.3.3",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.2",
         "@tippyjs/react": "^4.2.6",
         "@types/node": "^24.12.4",
         "@types/react": "^18.3.23",
@@ -120,10 +130,12 @@
         "eslint-plugin-react-you-might-not-need-an-effect": "^0.7.0",
         "eslint-plugin-regexp": "^2.10.0",
         "eslint-plugin-storybook": "10.3.3",
+        "jsdom": "^30.0.1",
         "playwright": "^1.57.0",
         "react": "^18.3.1",
         "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "^18.3.1",
+        "react-hook-form": "^7.89.0",
         "react-hot-toast": "^2.4.1",
         "sass": "^1.98.0",
         "storybook": "10.3.3",
@@ -142,7 +154,13 @@
     },
     "peerDependencies": {
         "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
+        "react-dom": "^18.0.0 || ^19.0.0",
+        "react-hook-form": "^7.85.0"
+    },
+    "peerDependenciesMeta": {
+        "react-hook-form": {
+            "optional": true
+        }
     },
     "repository": {
         "type": "git",