@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/patterns/Form/FormField/FormFieldset.js

@@ -1,58 +1,57 @@
-import { jsx as F } from "react/jsx-runtime";
-import { useContext as c, useRef as g, useMemo as I, useEffect as M } from "react";
-import { d as x } from "../../../index.esm-B6vzbp0e.js";
-import { getErrorTypeMessage as E } from "./helpers/getErrorTypeMessage.js";
-import "../../../components/Label/Label.styles.js";
+import { jsx as u } from "react/jsx-runtime";
+import { useContext as F, useMemo as c, useEffect as g } from "react";
+import { useController as I } from "react-hook-form";
+import { getErrorTypeMessage as M } from "./helpers/getErrorTypeMessage.js";
+import "../../../components/Field/Field.js";
 import "../../../components/Field/Field.styles.js";
-import "../../../components/Icon/Icon.styles.js";
-import "../../../components/Tooltip/Tooltip.styles.js";
-import { IressFieldGroup as y } from "../../../components/Field/FieldGroup/FieldGroup.js";
+import { IressFieldGroup as x } from "../../../components/Field/FieldGroup/FieldGroup.js";
 import "../../../components/Field/FieldGroup/FieldGroup.styles.js";
-import { FormContext as q } from "../FormContext.js";
-import { transformCustomRulesToValidateRule as v } from "./helpers/transformCustomRulesToValidateRule.js";
-import { useFieldRenderProps as G } from "./hooks/useFieldRenderProps.js";
-const B = ({
+import { FormContext as y } from "../FormContext.js";
+import { transformCustomRulesToValidateRule as E } from "./helpers/transformCustomRulesToValidateRule.js";
+import { useFieldRenderProps as q } from "./hooks/useFieldRenderProps.js";
+const v = ({
   control: d,
   defaultValue: m,
   name: r,
-  render: f,
+  render: n,
   rules: e,
-  shouldUnregister: n,
-  ...p
+  shouldUnregister: p,
+  ...f
 }) => {
-  const o = c(q), l = g(null);
+  const o = F(y);
   if (!o)
     throw new Error(
       "IressFormFieldset must be used inside an IressForm. If you need a standalone field, use IressFieldGroup instead."
     );
-  const i = e ? v(e) : void 0, { field: u, fieldState: s } = x({
+  const i = e ? E(e) : void 0, { field: l, fieldState: s } = I({
     control: d,
     defaultValue: m,
     name: r,
     rules: i,
-    shouldUnregister: n
-  }), t = I(
-    () => s.error ? E(
+    shouldUnregister: p
+  }), t = c(
+    () => s.error ? M(
       s.error?.message,
       s.error?.type,
       e
     ) : "",
     [s, e]
   );
-  M(() => {
+  g(() => {
     o.setErrorMessage(r, t);
   }, [t, o, r]);
-  const a = G(u, l);
-  return /* @__PURE__ */ F(
-    y,
+  const a = q(l);
+  return /* @__PURE__ */ u(
+    x,
     {
       errorMessages: t ? [{ message: t }] : void 0,
       required: !!i?.required,
-      ...p,
-      children: f({ ...a, id: `${o?.id}__${r}` })
+      ...f,
+      children: n({ ...a, id: `${o?.id}__${r}` })
     }
   );
 };
+v.displayName = "IressFormFieldset";
 export {
-  B as IressFormFieldset
+  v as IressFormFieldset
 };

package/dist/patterns/Form/FormField/hooks/useFieldRenderProps.d.ts

@@ -0,0 +1,10 @@
+import { ControllerRenderProps, FieldValues } from 'react-hook-form';
+import { FormFieldRenderProps } from '../FormField';
+/**
+ * Hook to create memoized render props for a field in a form.
+ * Enhances the field's onChange handling to support the react-hook-form
+ * contract where if a second argument is provided, it's used as the value directly.
+ * This allows components like IressCheckbox that call onChange(event, value)
+ * to work seamlessly with react-hook-form.
+ */
+export declare const useFieldRenderProps: <T extends FieldValues>(field: ControllerRenderProps<T>) => Omit<FormFieldRenderProps<T>, "id">;

package/dist/patterns/Form/FormField/hooks/useFieldRenderProps.js

@@ -1,37 +1,19 @@
-import { useState as C, useCallback as h, useMemo as l } from "react";
-const i = (n, o) => {
-  const [t, g] = C("null"), a = h(
-    (...e) => {
-      e[1] !== void 0 ? n.onChange(e[1]) : n.onChange(...e);
+import { useCallback as t, useMemo as r } from "react";
+const c = (e) => {
+  const { onChange: n } = e, s = t(
+    (...o) => {
+      o[1] !== void 0 ? n(o[1]) : n(...o);
     },
     [n]
-  ), s = h(
-    (e) => {
-      if (o.current = e, n.ref(e), e) {
-        const r = JSON.stringify(e.extras ?? null);
-        r !== t && g(r);
-      }
-    },
-    [t, n, o]
-  ), u = l(() => {
-    let e = { ...n };
-    const r = JSON.parse(t);
-    return r?.additionalOnChangeProps && r.additionalOnChangeProps.forEach((p) => {
-      e = { ...e, [p]: n.onChange };
-    }), r?.valueProp && (e = {
-      ...n,
-      [r.valueProp]: n.value
-    }, delete e.value), e;
-  }, [n, t]);
-  return l(
+  );
+  return r(
     () => ({
-      ...u,
-      onChange: a,
-      ref: s
+      ...e,
+      onChange: s
     }),
-    [a, s, u]
+    [e, s]
   );
 };
 export {
-  i as useFieldRenderProps
+  c as useFieldRenderProps
 };

package/dist/patterns/Form/FormValidationSummary/FormValidationSummary.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { IressValidationSummaryProps } from '../../../components/ValidationMessage';
+import { IressAlertProps } from '../../../components/Alert';
+export type IressFormValidationSummaryProps = Omit<IressValidationSummaryProps, 'messages'> & Omit<IressAlertProps, 'defaultDismissed' | 'dismissed' | 'onDismiss' | 'status'> & {
+    /**
+     * The content to use as the summary. If provided, this will override the default validation messages.
+     * This is useful if you want to provide a custom summary message or if you want to
+     * use a different validation mechanism that does not rely on the form context.
+     */
+    children?: ReactNode;
+};
+/**
+ * Validation summary messages based on the form context from react-hook-form
+ */
+export declare const IressFormValidationSummary: {
+    ({ actions, children, "data-testid": testId, footer, heading, itemStyle, icon, srOnly, variant, ...restProps }: IressFormValidationSummaryProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/patterns/Form/FormValidationSummary/FormValidationSummary.js

@@ -2,17 +2,19 @@ import { jsx as r } from "react/jsx-runtime";
 import { useContext as $ } from "react";
 import { FormContext as w } from "../FormContext.js";
 import { formatObjectKey as L } from "../../../helpers/formatting/formatObjectKey.js";
-import { s as M } from "../../../factory-oPXoMw9H.js";
-import { IressValidationSummary as T } from "../../../components/ValidationMessage/ValidationSummary/ValidationSummary.js";
-import { IressAlert as j } from "../../../components/Alert/Alert.js";
+import "../../../components/ValidationMessage/ValidationMessage.js";
+import "../../../components/ValidationMessage/ValidationLink/ValidationLink.js";
+import { IressValidationSummary as M } from "../../../components/ValidationMessage/ValidationSummary/ValidationSummary.js";
+import { IressAlert as T } from "../../../components/Alert/Alert.js";
 import "../../../components/Alert/Alert.styles.js";
+import { s as V } from "../../../factory-CcYfm2kB.js";
 import { propagateTestid as d } from "../../../helpers/utility/propagateTestid.js";
-const l = M(
+const l = V(
   "div",
   {
     base: {
       borderRadius: "radius.system.form",
-      _focus: { outline: "[none]", layerStyle: "elevation.focus" }
+      focusable: "true"
     }
   },
   {
@@ -21,14 +23,14 @@ const l = M(
       tabIndex: -1
     }
   }
-), B = ({
+), j = ({
   actions: f,
   children: o,
   "data-testid": t,
-  footer: c,
-  heading: u = /* @__PURE__ */ r("h3", { children: "There was a problem submitting this form" }),
-  itemStyle: g,
-  icon: p,
+  footer: u,
+  heading: c = /* @__PURE__ */ r("h3", { children: "There was a problem submitting this form" }),
+  itemStyle: p,
+  icon: g,
   srOnly: a,
   variant: b,
   ...y
@@ -38,10 +40,10 @@ const l = M(
     throw new Error(
       "IressFormValidationSummary must be used within a IressForm"
     );
-  const i = Object.entries(e.errorMessages).filter(
+  const m = Object.entries(e.errorMessages).filter(
     ([, s]) => !!s
   );
-  if (i.length === 0 || o)
+  if (m.length === 0 || o)
     return /* @__PURE__ */ r(
       l,
       {
@@ -51,11 +53,11 @@ const l = M(
         children: o
       }
     );
-  const h = i.map(([s, F]) => {
-    const m = `${e?.id}__${s}`, n = document.getElementById(m), S = n?.labels, x = Array.from(S ?? []), E = n?.closest("fieldset")?.querySelector("legend"), I = `${x[0]?.dataset?.name ?? E?.dataset?.name ?? L(s)}: `;
+  const h = m.map(([s, F]) => {
+    const i = `${e?.id}__${s}`, n = document.getElementById(i), S = n?.labels, x = Array.from(S ?? []), I = n?.closest("fieldset")?.querySelector("legend"), E = `${x[0]?.dataset?.name ?? I?.dataset?.name ?? L(s)}: `;
     return {
-      linkToTarget: m,
-      message: `${I}${F}`
+      linkToTarget: i,
+      message: `${E}${F}`
     };
   });
   return /* @__PURE__ */ r(
@@ -65,22 +67,22 @@ const l = M(
       "data-testid": t,
       srOnly: a,
       children: /* @__PURE__ */ r(
-        j,
+        T,
         {
           actions: f,
-          footer: c,
-          heading: u,
-          icon: p,
+          footer: u,
+          heading: c,
+          icon: g,
           status: "danger",
           variant: b,
           children: /* @__PURE__ */ r(
-            T,
+            M,
             {
               ...y,
               "data-testid": d(t, "messages"),
               itemStyle: {
                 "data-testid": d(t, "error"),
-                ...g
+                ...p
               },
               messages: h
             }
@@ -90,6 +92,7 @@ const l = M(
     }
   );
 };
+j.displayName = "IressFormValidationSummary";
 export {
-  B as IressFormValidationSummary
+  j as IressFormValidationSummary
 };

package/dist/patterns/Form/HookForm/HookForm.d.ts

@@ -0,0 +1,144 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { DefaultValues, FieldValues, SubmitErrorHandler, UseFormProps, UseFormReturn } from 'react-hook-form';
+import { IressStyledProps } from '../../../types';
+export interface IressHookFormProps<T extends FieldValues, TContext = object> extends Omit<IressStyledProps<'form'>, 'defaultChecked' | 'defaultValue' | 'onSubmit' | 'onError'> {
+    /**
+     * The content of the alert section.
+     * @default <IressFormValidationSummary srOnly />
+     */
+    alert?: ReactNode;
+    /**
+     * The content of the form, usually multiple `IressFormField` or `IressFormFieldset` components.
+     */
+    children?: ReactNode;
+    /**
+     * React hook form instance.
+     */
+    form: UseFormReturn<T, TContext>;
+    /**
+     * Emitted when any field has an error.
+     * Called after the first submit if any errors are recorded, and from then on when any value changes.
+     *
+     * @see https://react-hook-form.com/docs/useform/handlesubmit
+     */
+    onError?: SubmitErrorHandler<T>;
+    /**
+     * Handler for when the submit method on the form is called after validation is passed.
+     *
+     * @see https://react-hook-form.com/docs/useform/handlesubmit
+     */
+    onSubmit?: (data: T) => void;
+    /**
+     * Emitted when the form state is valid.
+     *
+     * @see https://react-hook-form.com/docs/useform/formstate
+     */
+    onValidChange?: (isValid: boolean) => void;
+    /**
+     * If set to `true`, the summary will only update when the form is submitted, not on every field change.
+     * This is useful for performance reasons, especially in large forms.
+     * @default false
+     */
+    updateErrorSummaryOnSubmit?: boolean;
+}
+/**
+ * The form reference allows you to access the `react-hook-form` methods and element, as well as dynamically submit or reset the form.
+ * This is useful for cases where you need to programmatically control the form, such as submitting it from a button outside the form.
+ * @param T - The type of the form values.
+ */
+export interface FormRef<T extends FieldValues> {
+    /**
+     * The `react-hook-form` instance, which provides methods to interact with the form.
+     * This includes methods like `reset`, `setValue`, `getValues`, etc.
+     * @see https://react-hook-form.com/docs/useform
+     */
+    api: UseFormReturn<T>;
+    /**
+     * The HTML form element, which can be used to access the DOM element directly.
+     */
+    element?: HTMLFormElement;
+    /**
+     * Resets the form to its initial state or to the provided values.
+     * This will clear all fields and errors, and set the form values to the default values.
+     * If no values are provided, it will reset to the default values defined in the form.
+     * @param values - The values to reset the form to. If not provided, it will reset to the default values defined in the form.
+     */
+    reset: (values?: DefaultValues<T>) => void;
+    /**
+     * Submits the form programmatically.
+     * This will trigger the form validation and call the `onSubmit` handler if the form is valid.
+     */
+    submit: () => void;
+}
+/**
+ * Common form pattern props, pretty much adding commentary to UseFormProps from `react-hook-form`.
+ */
+export interface FormPatternProps<T extends FieldValues, TContext = object> extends Partial<Omit<UseFormProps<T, TContext>, 'disabled' | 'errors' | 'shouldFocusError'>> {
+    /**
+     * This context object is mutable and will be injected into the `resolver`'s second argument (eg. [Yup](https://github.com/jquense/yup) validation's context object).
+     * @see https://react-hook-form.com/docs/useform#context
+     */
+    context?: UseFormProps<T, TContext>['context'];
+    /**
+     * Display all validation errors or one at a time.
+     * @see https://react-hook-form.com/docs/useform#criteriaMode
+     */
+    criteriaMode?: UseFormProps<T, TContext>['criteriaMode'];
+    /**
+     * Default values to be passed through when an input is unset.
+     * @see https://react-hook-form.com/docs/useform#defaultValues
+     */
+    defaultValues?: DefaultValues<T>;
+    /**
+     * Delay error from appearing instantly.
+     * @see https://react-hook-form.com/docs/useform#delayError
+     */
+    delayError?: UseFormProps<T, TContext>['delayError'];
+    /**
+     * Configure the validation strategy **before** a user submits the form the first time.
+     * @see https://react-hook-form.com/docs/useform#mode
+     * @default 'onSubmit'
+     */
+    mode?: UseFormProps<T, TContext>['mode'];
+    /**
+     * Progressive Enhancement only applicable for SSR framework.
+     * @see https://react-hook-form.com/docs/useform
+     */
+    progressive?: UseFormProps<T, TContext>['progressive'];
+    /**
+     * This property is related to value update behaviors.
+     * @see https://react-hook-form.com/docs/useform#resetOptions
+     */
+    resetOptions?: UseFormProps<T, TContext>['resetOptions'];
+    /**
+     * This function allows you to use any external validation library such as Yup, Zod, Joi, Vest, Ajv and many others.
+     * @see https://react-hook-form.com/docs/useform#resolver
+     */
+    resolver?: UseFormProps<T, TContext>['resolver'];
+    /**
+     * Configure validation strategy when inputs with errors get re-validated **after** a user submits the form the first time.
+     * @see https://react-hook-form.com/docs/useform#reValidateMode
+     * @default 'onChange'
+     */
+    reValidateMode?: UseFormProps<T, TContext>['reValidateMode'];
+    /**
+     * This config will enable browser native validation. It will also enable CSS selectors :valid and:invalid making styling inputs easier.
+     * @see https://react-hook-form.com/docs/useform#shouldUseNativeValidation
+     */
+    shouldUseNativeValidation?: UseFormProps<T, TContext>['shouldUseNativeValidation'];
+    /**
+     * By default, an input value will be retained when input is removed. However, you can set `shouldUnregister` to `true` to `unregister` input during unmount.
+     * @see https://react-hook-form.com/docs/useform#shouldUnregister
+     */
+    shouldUnregister?: UseFormProps<T, TContext>['shouldUnregister'];
+    /**
+     * The values prop will react to changes and update the form values, which is useful when your form needs to be updated by external state or server data.
+     * @see https://react-hook-form.com/docs/useform#values
+     */
+    values?: UseFormProps<T, TContext>['values'];
+}
+export declare const IressHookForm: (<T extends FieldValues, TContext = object>(props: IressHookFormProps<T, TContext> & {
+    ref?: Ref<FormRef<T>>;
+}) => ReactElement) & {
+    displayName: "IressHookForm";
+};

package/dist/patterns/Form/HookForm/HookForm.js

@@ -1,113 +1,113 @@
-import { jsx as m, jsxs as D } from "react/jsx-runtime";
-import { forwardRef as E, useState as Q, useRef as f, useCallback as n, useImperativeHandle as J, useEffect as U, useMemo as K } from "react";
-import { u as L, a as X, b as Y, c as Z, F as $ } from "../../../index.esm-B6vzbp0e.js";
-import { useIdIfNeeded as y } from "../../../hooks/useIdIfNeeded.js";
-import { IressFormValidationSummary as O } from "../FormValidationSummary/FormValidationSummary.js";
-import { s as S } from "../../../factory-oPXoMw9H.js";
-import { FormContext as ee } from "../FormContext.js";
-import { c as se } from "../../../cx-DN21T1EH.js";
-import { GlobalCSSClass as re } from "../../../enums.js";
-import { propagateTestid as oe } from "../../../helpers/utility/propagateTestid.js";
-const te = ({
-  alert: V,
-  children: W,
-  className: _,
+import { jsx as u, jsxs as A } from "react/jsx-runtime";
+import { forwardRef as B, useState as D, useRef as f, useCallback as t, useImperativeHandle as E, useEffect as Q, useMemo as J } from "react";
+import { FormProvider as K } from "react-hook-form";
+import { useIdIfNeeded as L } from "../../../hooks/useIdIfNeeded.js";
+import { IressFormValidationSummary as U } from "../FormValidationSummary/FormValidationSummary.js";
+import { s as W } from "../../../factory-CcYfm2kB.js";
+import { FormContext as X } from "../FormContext.js";
+import { c as Y } from "../../../cx-DN21T1EH.js";
+import { GlobalCSSClass as Z } from "../../../enums.js";
+import { propagateTestid as $ } from "../../../helpers/utility/propagateTestid.js";
+const V = ({
+  alert: _,
+  children: G,
+  className: P,
   "data-testid": d,
-  form: o,
-  onSubmit: F,
-  onValidChange: p,
-  onError: x,
+  form: r,
+  onSubmit: p,
+  onValidChange: F,
+  onError: v,
   updateErrorSummaryOnSubmit: s,
-  ...g
-}, b) => {
-  const i = y({ id: g.id }), [r, u] = Q({}), c = f({}), v = f(null), M = f(null), { handleSubmit: C, reset: G, formState: T } = o, { isValid: H, isSubmitted: I } = T, [w, R] = Q(!1), h = n(
+  ...M
+}, T) => {
+  const a = L({ id: M.id }), [n, m] = D({}), c = f({}), x = f(null), H = f(null), { handleSubmit: I, reset: h, formState: q } = r, { isValid: g, submitCount: C } = q, N = t(
     (e) => {
-      x?.(e), v.current?.focus(), s && R(!0);
+      v?.(e), x.current?.focus();
     },
-    [x, s]
-  ), j = n(
+    [v]
+  ), k = t(
     (e) => {
-      C((t) => {
-        F?.(t), u({}), c.current = {};
-      }, h)(e);
+      I((o) => {
+        p?.(o), m({}), c.current = {};
+      }, N)(e);
     },
-    [h, C, F]
-  ), k = n(
+    [N, I, p]
+  ), R = t(
     (e) => {
       c.current = e();
     },
     []
-  ), A = n(
+  ), b = t(
     (e) => {
-      v.current = e;
+      x.current = e;
     },
     []
-  ), N = n(
-    (e, t) => {
-      if (t === r[e] || !t && !r[e])
+  ), j = t(
+    (e, o) => {
+      const i = s ? c.current : n;
+      if (o === i[e] || !o && !i[e])
         return;
-      const z = s ? c.current : r, P = [...o.control._names.mount.values()].reduce(
-        (B, l) => ({
-          ...B,
-          [l]: l === e ? t : z[l]
+      const w = [...r.control._names.mount.values()].reduce(
+        (z, l) => ({
+          ...z,
+          [l]: l === e ? o : i[l]
         }),
         {}
       );
-      s ? k(() => P) : u(() => P);
+      s ? R(() => w) : m(() => w);
     },
     [
-      r,
-      o.control._names.mount,
-      k,
+      n,
+      r.control._names.mount,
+      R,
       s
     ]
   );
-  J(b, () => ({
-    element: M?.current ?? void 0,
-    api: o,
-    submit: () => j(),
-    reset: (e) => G(e)
-  })), U(() => {
-    p?.(H);
-  }, [H, p]), U(() => {
-    s && w && I && (u(() => c.current), R(!1));
-  }, [s, w, I]);
-  const q = K(
+  E(T, () => ({
+    element: H?.current ?? void 0,
+    api: r,
+    submit: () => k(),
+    reset: (e) => h(e)
+  })), Q(() => {
+    F?.(g);
+  }, [g, F]), Q(() => {
+    s && C > 0 && m(() => c.current);
+  }, [s, C]);
+  const y = J(
     () => ({
-      id: i,
-      errorMessages: r,
-      setErrorMessage: N,
-      setFocusOnError: A
+      id: a,
+      errorMessages: n,
+      setErrorMessage: j,
+      setFocusOnError: b
     }),
-    [r, i, N, A]
+    [n, a, j, b]
   );
-  return /* @__PURE__ */ m(ee.Provider, { value: q, children: /* @__PURE__ */ m($, { ...o, children: /* @__PURE__ */ D(
-    S.form,
+  return /* @__PURE__ */ u(X.Provider, { value: y, children: /* @__PURE__ */ u(K, { ...r, children: /* @__PURE__ */ A(
+    W.form,
     {
-      ...g,
-      className: se(_, re.Form),
+      ...M,
+      className: Y(P, Z.Form),
       "data-testid": d,
-      id: i,
+      id: a,
       noValidate: !0,
-      onSubmit: j,
-      ref: M,
+      onSubmit: k,
+      ref: H,
       children: [
-        V ?? /* @__PURE__ */ m(
-          O,
+        _ ?? /* @__PURE__ */ u(
+          U,
           {
-            "data-testid": oe(d, "error-summary"),
+            "data-testid": $(d, "error-summary"),
             srOnly: !0
           }
         ),
-        W
+        G
       ]
     }
   ) }) });
-}, ne = E(te), a = ne;
-a.useFieldArray = L;
-a.useForm = X;
-a.useFormContext = Y;
-a.useWatch = Z;
+};
+V.displayName = "IressHookForm";
+const O = B(V);
+O.displayName = "IressHookForm";
 export {
-  a as IressHookForm
+  O as IressHookForm
 };