@iress-oss/ids-components 6.0.0-alpha.8 → 6.0.0-alpha.9

package/dist/{src/patterns → patterns}/Form/Form.d.ts

@@ -4,6 +4,8 @@ import { FormRef } from './HookForm/HookForm';
 import { LongFormProps } from './components/LongForm';
 import { ShortFormProps } from './components/ShortForm';
 export type IressFormProps<T extends FieldValues, TContext = object> = LongFormProps<T, TContext> | ShortFormProps<T, TContext>;
-export declare const IressForm: <T extends FieldValues>(props: IressFormProps<T> & {
+export declare const IressForm: (<T extends FieldValues>(props: IressFormProps<T> & {
     ref?: Ref<FormRef<T>>;
-}) => React.ReactElement;
+}) => React.ReactElement) & {
+    displayName: "IressForm";
+};

package/dist/patterns/Form/Form.js

@@ -1,10 +1,11 @@
 import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { LongForm as n } from "./components/LongForm.js";
-import { ShortForm as s } from "./components/ShortForm.js";
-const t = ({ pattern: f, ...r }, o) => f === "long" ? /* @__PURE__ */ m(n, { ...r, ref: o }) : /* @__PURE__ */ m(s, { ...r, ref: o });
-t.displayName = "IressForm";
-const c = i(t);
+import { forwardRef as e } from "react";
+import { LongForm as i } from "./components/LongForm.js";
+import { ShortForm as f } from "./components/ShortForm.js";
+const s = ({ pattern: t, ...r }, o) => t === "long" ? /* @__PURE__ */ m(i, { ...r, ref: o }) : /* @__PURE__ */ m(f, { ...r, ref: o });
+s.displayName = "IressForm";
+const n = e(s);
+n.displayName = "IressForm";
 export {
-  c as IressForm
+  n as IressForm
 };

package/dist/patterns/Form/Form.styles.js

@@ -1,4 +1,4 @@
-import { s as t } from "../../sva-OmxClA9g.js";
+import { s as t } from "../../sva-wwkEhoyo.js";
 const r = t({
   slots: ["root", "actions", "header", "footer", "children"],
   base: {

package/dist/patterns/Form/FormContext.js

@@ -1,7 +1,8 @@
 import { createContext as o } from "react";
-const e = o(
+const t = o(
   void 0
 );
+t.displayName = "FormContext";
 export {
-  e as FormContext
+  t as FormContext
 };

package/dist/{src/patterns → patterns}/Form/FormField/FormField.d.ts

@@ -23,6 +23,12 @@ export interface IressFormFieldProps<T extends FieldValues = FieldValues, TName
      * (eg. `render={field => <IressInput {...field} />}`)
      */
     render: (field: FormFieldRenderProps<T>, state: FormFieldRenderState<T>) => ReactNode;
+    /**
+     * Render function to allow you to render supplementary content alongside the field, with access to the field props and state.
+     * This can be useful for rendering custom components that need to interact with the form state, such as character counters, password strength meters, or custom validation messages.
+     * (eg. `renderSupplementary={{ value } => <CharCount value={value} />}`)
+     */
+    renderSupplementary?: (field: FormFieldRenderProps<T>, state: FormFieldRenderState<T>) => ReactNode;
     /**
      * Validation rules, including: required, min, max, minLength, maxLength, pattern, validate
      * @see https://react-hook-form.com/api/useform/register)
@@ -64,4 +70,7 @@ export interface FormFieldRenderState<T extends FieldValues> {
  * A `IressField` wrapper that can show error message and label automatically inside an `IressForm`.
  * It uses the `useController` hook from `react-hook-form` for form management.
  */
-export declare const IressFormField: <T extends FieldValues>({ control, defaultValue, name, render, rules: withCustomRules, shouldUnregister, readOnly, ...fieldProps }: IressFormFieldProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const IressFormField: {
+    <T extends FieldValues>({ control, defaultValue, name, render, renderSupplementary, rules: withCustomRules, shouldUnregister, supplementary, readOnly, ...fieldProps }: IressFormFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -1,72 +1,75 @@
-import { jsx as I } from "react/jsx-runtime";
-import { useContext as M, useRef as E, useMemo as f, useEffect as x } from "react";
-import { useController as _ } from "react-hook-form";
-import { getErrorTypeMessage as $ } from "./helpers/getErrorTypeMessage.js";
-import { FormContext as v } from "../FormContext.js";
-import { transformCustomRulesToValidateRule as q } from "./helpers/transformCustomRulesToValidateRule.js";
-import { IressField as S } from "../../../components/Field/Field.js";
+import { jsx as E, jsxs as _, Fragment as $ } from "react/jsx-runtime";
+import { useContext as v, useRef as S, useMemo as n, useEffect as j } from "react";
+import { useController as q } from "react-hook-form";
+import { getErrorTypeMessage as P } from "./helpers/getErrorTypeMessage.js";
+import { FormContext as T } from "../FormContext.js";
+import { transformCustomRulesToValidateRule as b } from "./helpers/transformCustomRulesToValidateRule.js";
+import { IressField as N } from "../../../components/Field/Field.js";
 import "../../../components/Field/Field.styles.js";
-import "../../../components/Icon/Icon.styles.js";
+import "../../../components/Field/FieldGroup/FieldGroup.js";
 import "../../../components/Field/FieldGroup/FieldGroup.styles.js";
-import "../../../components/Label/Label.styles.js";
-import { useFieldRenderProps as T } from "./hooks/useFieldRenderProps.js";
-const H = ({
-  control: d,
+import { useFieldRenderProps as R } from "./hooks/useFieldRenderProps.js";
+const V = ({
+  control: l,
   defaultValue: p,
   name: r,
-  render: n,
+  render: F,
+  renderSupplementary: c,
   rules: s,
-  shouldUnregister: l,
+  shouldUnregister: u,
+  supplementary: a,
   readOnly: e,
-  ...u
+  ...g
 }) => {
-  const o = M(v), F = E(null);
+  const o = v(T), I = S(null);
   if (!o)
     throw new Error(
       "IressFormField must be used inside an IressForm. If you need a standalone field, use IressField instead."
     );
-  const m = f(() => {
+  const d = n(() => {
     if (!e)
-      return s ? q(s) : void 0;
-  }, [e, s]), { field: c, formState: g, fieldState: t } = _({
-    control: d,
+      return s ? b(s) : void 0;
+  }, [e, s]), { field: M, formState: x, fieldState: t } = q({
+    control: l,
     defaultValue: p,
     name: r,
-    rules: m,
-    shouldUnregister: l
-  }), i = f(
-    () => t.error ? $(
+    rules: d,
+    shouldUnregister: u
+  }), i = n(
+    () => t.error ? P(
       t.error?.message,
       t.error?.type,
       s
     ) : "",
     [t.error, s]
   );
-  x(() => {
+  j(() => {
     e ? o.setErrorMessage(r, "") : o.setErrorMessage(r, i);
   }, [i, o, r, e]);
-  const a = T(c, F);
-  return /* @__PURE__ */ I(
-    S,
+  const m = {
+    ...R(M, I),
+    id: `${o.id}__${r}`
+  }, f = {
+    formState: x,
+    fieldState: t
+  };
+  return /* @__PURE__ */ E(
+    N,
     {
       errorMessages: i && !e ? [{ message: i }] : void 0,
-      readOnly: e,
-      required: !!m?.required,
       htmlFor: `${o.id}__${r}`,
-      ...u,
-      children: n(
-        {
-          ...a,
-          id: `${o.id}__${r}`
-        },
-        {
-          formState: g,
-          fieldState: t
-        }
-      )
+      readOnly: e,
+      required: !!d?.required,
+      supplementary: /* @__PURE__ */ _($, { children: [
+        c?.(m, f),
+        a
+      ] }),
+      ...g,
+      children: F(m, f)
     }
   );
 };
+V.displayName = "IressFormField";
 export {
-  H as IressFormField
+  V as IressFormField
 };

package/dist/{src/patterns → patterns}/Form/FormField/FormFieldset.d.ts

@@ -37,4 +37,7 @@ export interface IressFormFieldsetProps<T extends FieldValues = FieldValues, TNa
  * A `IressFieldGroup` wrapper that can show error message and legend automatically inside an `IressForm`.
  * It uses the `useController` hook from `react-hook-form` for form management.
  */
-export declare const IressFormFieldset: <TFieldValues extends FieldValues>({ control, defaultValue, name, render, rules: withCustomRules, shouldUnregister, ...fieldGroupProps }: IressFormFieldsetProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const IressFormFieldset: {
+    <TFieldValues extends FieldValues>({ control, defaultValue, name, render, rules: withCustomRules, shouldUnregister, ...fieldGroupProps }: IressFormFieldsetProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -1,38 +1,36 @@
 import { jsx as F } from "react/jsx-runtime";
 import { useContext as c, useRef as g, useMemo as I, useEffect as M } from "react";
 import { useController as x } from "react-hook-form";
-import { getErrorTypeMessage as E } from "./helpers/getErrorTypeMessage.js";
-import "../../../components/Label/Label.styles.js";
+import { getErrorTypeMessage as y } 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 E } 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 = ({
-  control: m,
-  defaultValue: d,
+const R = ({
+  control: d,
+  defaultValue: m,
   name: r,
   render: f,
   rules: e,
-  shouldUnregister: n,
-  ...p
+  shouldUnregister: l,
+  ...n
 }) => {
-  const o = c(q), l = g(null);
+  const o = c(q), p = g(null);
   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({
-    control: m,
-    defaultValue: d,
+    control: d,
+    defaultValue: m,
     name: r,
     rules: i,
-    shouldUnregister: n
+    shouldUnregister: l
   }), t = I(
-    () => s.error ? E(
+    () => s.error ? y(
       s.error?.message,
       s.error?.type,
       e
@@ -42,17 +40,18 @@ const B = ({
   M(() => {
     o.setErrorMessage(r, t);
   }, [t, o, r]);
-  const a = G(u, l);
+  const a = G(u, p);
   return /* @__PURE__ */ F(
-    y,
+    E,
     {
       errorMessages: t ? [{ message: t }] : void 0,
       required: !!i?.required,
-      ...p,
+      ...n,
       children: f({ ...a, id: `${o?.id}__${r}` })
     }
   );
 };
+R.displayName = "IressFormFieldset";
 export {
-  B as IressFormFieldset
+  R as IressFormFieldset
 };

package/dist/{src/patterns → patterns}/Form/FormValidationSummary/FormValidationSummary.d.ts

@@ -12,4 +12,7 @@ export type IressFormValidationSummaryProps = Omit<IressValidationSummaryProps,
 /**
  * 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;
+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,12 +2,14 @@ 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-CWvlR9Yh.js";
 import { propagateTestid as d } from "../../../helpers/utility/propagateTestid.js";
-const l = M(
+const l = V(
   "div",
   {
     base: {
@@ -21,17 +23,17 @@ 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
+  variant: y,
+  ...b
 }) => {
   const e = $(w);
   if (!e)
@@ -52,10 +54,10 @@ const l = M(
       }
     );
   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 m = `${e?.id}__${s}`, n = document.getElementById(m), 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}`
+      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,
+          variant: y,
           children: /* @__PURE__ */ r(
-            T,
+            M,
             {
-              ...y,
+              ...b,
               "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/{src/patterns → patterns}/Form/HookForm/HookForm.d.ts

@@ -137,6 +137,8 @@ export interface FormPatternProps<T extends FieldValues, TContext = object> exte
      */
     values?: UseFormProps<T, TContext>['values'];
 }
-export declare const IressHookForm: <T extends FieldValues, TContext = object>(props: IressHookFormProps<T, TContext> & {
+export declare const IressHookForm: (<T extends FieldValues, TContext = object>(props: IressHookFormProps<T, TContext> & {
     ref?: Ref<FormRef<T>>;
-}) => ReactElement;
+}) => ReactElement) & {
+    displayName: "IressHookForm";
+};

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

@@ -3,7 +3,7 @@ import { forwardRef as J, useState as U, useRef as m, useCallback as n, useImper
 import { FormProvider as W } from "react-hook-form";
 import { useIdIfNeeded as X } from "../../../hooks/useIdIfNeeded.js";
 import { IressFormValidationSummary as Y } from "../FormValidationSummary/FormValidationSummary.js";
-import { s as Z } from "../../../factory-oPXoMw9H.js";
+import { s as Z } from "../../../factory-CWvlR9Yh.js";
 import { FormContext as $ } from "../FormContext.js";
 import { c as y } from "../../../cx-DN21T1EH.js";
 import { GlobalCSSClass as O } from "../../../enums.js";
@@ -20,19 +20,19 @@ const _ = ({
   updateErrorSummaryOnSubmit: s,
   ...g
 }, h) => {
-  const i = X({ id: g.id }), [r, a] = U({}), c = m({}), v = m(null), M = m(null), { handleSubmit: x, reset: q, formState: z } = o, { isValid: H, isSubmitted: I } = z, [C, N] = U(!1), R = n(
+  const a = X({ id: g.id }), [r, i] = U({}), c = m({}), v = m(null), M = m(null), { handleSubmit: x, reset: q, formState: z } = o, { isValid: H, isSubmitted: I } = z, [C, N] = U(!1), k = n(
     (e) => {
       F?.(e), v.current?.focus(), s && N(!0);
     },
     [F, s]
-  ), j = n(
+  ), R = n(
     (e) => {
       x((t) => {
-        u?.(t), a({}), c.current = {};
-      }, R)(e);
+        u?.(t), i({}), c.current = {};
+      }, k)(e);
     },
-    [R, x, u]
-  ), k = n(
+    [k, x, u]
+  ), j = n(
     (e) => {
       c.current = e();
     },
@@ -53,33 +53,33 @@ const _ = ({
         }),
         {}
       );
-      s ? k(() => Q) : a(() => Q);
+      s ? j(() => Q) : i(() => Q);
     },
     [
       r,
       o.control._names.mount,
-      k,
+      j,
       s
     ]
   );
   K(h, () => ({
     element: M?.current ?? void 0,
     api: o,
-    submit: () => j(),
+    submit: () => R(),
     reset: (e) => q(e)
   })), V(() => {
     p?.(H);
   }, [H, p]), V(() => {
-    s && C && I && (a(() => c.current), N(!1));
+    s && C && I && (i(() => c.current), N(!1));
   }, [s, C, I]);
   const A = L(
     () => ({
-      id: i,
+      id: a,
       errorMessages: r,
       setErrorMessage: P,
       setFocusOnError: w
     }),
-    [r, i, P, w]
+    [r, a, P, w]
   );
   return /* @__PURE__ */ f($.Provider, { value: A, children: /* @__PURE__ */ f(W, { ...o, children: /* @__PURE__ */ E(
     Z.form,
@@ -87,9 +87,9 @@ const _ = ({
       ...g,
       className: y(b, O.Form),
       "data-testid": d,
-      id: i,
+      id: a,
       noValidate: !0,
-      onSubmit: j,
+      onSubmit: R,
       ref: M,
       children: [
         G ?? /* @__PURE__ */ f(
@@ -105,7 +105,8 @@ const _ = ({
   ) }) });
 };
 _.displayName = "IressHookForm";
-const fe = J(_);
+const ee = J(_);
+ee.displayName = "IressHookForm";
 export {
-  fe as IressHookForm
+  ee as IressHookForm
 };

package/dist/{src/patterns → patterns}/Form/components/LongForm.d.ts

@@ -48,6 +48,8 @@ export interface LongFormProps<T extends FieldValues, TContext = object> extends
      */
     sticky?: boolean;
 }
-export declare const LongForm: <T extends FieldValues, TContext = object>(props: LongFormProps<T, TContext> & {
+export declare const LongForm: (<T extends FieldValues, TContext = object>(props: LongFormProps<T, TContext> & {
     ref?: Ref<FormRef<T>>;
-}) => ReactElement;
+}) => ReactElement) & {
+    displayName: "LongForm";
+};

package/dist/patterns/Form/components/LongForm.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { useForm as L } from "react-hook-form";
-import { forwardRef as y, useMemo as z } from "react";
+import { useForm as A } from "react-hook-form";
+import { forwardRef as H, useMemo as z } from "react";
 import { IressText as B } from "../../../components/Text/Text.js";
 import { form as C } from "../Form.styles.js";
 import { c as i } from "../../../cx-DN21T1EH.js";
@@ -10,14 +10,14 @@ import "../../../components/Panel/Panel.styles.js";
 import "../../../components/Inline/Inline.styles.js";
 import { IressInline as R } from "../../../components/Inline/Inline.js";
 const T = ({
-  actions: c,
+  actions: a,
   alert: m,
-  children: a,
+  children: c,
   className: l,
   criteriaMode: f,
   context: d,
-  defaultValues: h,
-  delayError: p,
+  defaultValues: p,
+  delayError: h,
   footer: t,
   heading: o,
   mode: g = "onBlur",
@@ -29,14 +29,14 @@ const T = ({
   shouldUseNativeValidation: I,
   shouldUnregister: b,
   sticky: v = !1,
-  values: j,
-  ...k
-}, w) => {
-  const A = L({
+  values: L,
+  ...j
+}, k) => {
+  const w = A({
     criteriaMode: f,
     context: d,
-    defaultValues: h,
-    delayError: p,
+    defaultValues: p,
+    delayError: h,
     mode: g,
     progressive: u,
     resetOptions: F,
@@ -45,15 +45,15 @@ const T = ({
     shouldFocusError: !m,
     shouldUseNativeValidation: I,
     shouldUnregister: b,
-    values: j
-  }), r = C({ pattern: "long", sticky: v }), H = z(() => typeof o == "string" ? /* @__PURE__ */ e(B, { element: "h2", children: o }) : o, [o]);
+    values: L
+  }), r = C({ pattern: "long", sticky: v }), y = z(() => typeof o == "string" ? /* @__PURE__ */ e(B, { element: "h2", children: o }) : o, [o]);
   return /* @__PURE__ */ s(
     E,
     {
-      form: A,
-      ...k,
+      form: w,
+      ...j,
       className: i(r.root, l),
-      ref: w,
+      ref: k,
       children: [
         /* @__PURE__ */ s(
           R,
@@ -63,8 +63,8 @@ const T = ({
             verticalAlign: "bottom",
             className: r.header,
             children: [
-              H,
-              /* @__PURE__ */ e("div", { className: r.actions, children: c })
+              y,
+              /* @__PURE__ */ e("div", { className: r.actions, children: a })
             ]
           }
         ),
@@ -75,7 +75,7 @@ const T = ({
             className: i(r.children, n.className),
             children: [
               m,
-              a
+              c
             ]
           }
         ),
@@ -83,7 +83,8 @@ const T = ({
       ]
     }
   );
-}, Y = y(T);
+}, q = H(T);
+q.displayName = "LongForm";
 export {
-  Y as LongForm
+  q as LongForm
 };

package/dist/{src/patterns → patterns}/Form/components/ShortForm.d.ts

@@ -31,6 +31,8 @@ export interface ShortFormProps<T extends FieldValues, TContext = object> extend
      */
     reValidateMode?: UseFormProps<T, TContext>['reValidateMode'];
 }
-export declare const ShortForm: <T extends FieldValues, TContext = object>(props: ShortFormProps<T, TContext> & {
+export declare const ShortForm: (<T extends FieldValues, TContext = object>(props: ShortFormProps<T, TContext> & {
     ref?: Ref<FormRef<T>>;
-}) => ReactElement;
+}) => ReactElement) & {
+    displayName: "ShortForm";
+};