@iress-oss/ids-components 6.0.0-alpha.4 → 6.0.0-alpha.5

package/dist/constants.js

@@ -1,4 +1,4 @@
-const t = "6.0.0-alpha.4", e = {
+const t = "6.0.0-alpha.5", e = {
   /**
    * Extra small breakpoint, for mobile devices
    */

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

@@ -1,17 +1,17 @@
-import { jsx as g } from "react/jsx-runtime";
-import { useContext as I, useRef as M, useMemo as d, useEffect as E } from "react";
-import { a as x } from "../../../index.esm-BiUTGNH8.js";
-import { getErrorTypeMessage as _ } from "./helpers/getErrorTypeMessage.js";
-import { FormContext as $ } from "../FormContext.js";
-import { transformCustomRulesToValidateRule as v } from "./helpers/transformCustomRulesToValidateRule.js";
-import { IressField as q } from "../../../components/Field/Field.js";
+import { jsx as I } from "react/jsx-runtime";
+import { useContext as M, useRef as E, useMemo as f, useEffect as x } from "react";
+import { a as _ } from "../../../index.esm-BiUTGNH8.js";
+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 "../../../components/Field/Field.styles.js";
 import "../../../components/Icon/Icon.styles.js";
 import "../../../components/Field/FieldGroup/FieldGroup.styles.js";
 import "../../../components/Label/Label.styles.js";
 import { useFieldRenderProps as T } from "./hooks/useFieldRenderProps.js";
-const G = ({
-  control: f,
+const H = ({
+  control: d,
   defaultValue: p,
   name: r,
   render: n,
@@ -20,47 +20,53 @@ const G = ({
   readOnly: e,
   ...u
 }) => {
-  const o = I($), F = M(null);
+  const o = M(v), F = E(null);
   if (!o)
     throw new Error(
       "IressFormField must be used inside an IressForm. If you need a standalone field, use IressField instead."
     );
-  const m = d(() => {
+  const m = f(() => {
     if (!e)
-      return s ? v(s) : void 0;
-  }, [e, s]), { field: c, fieldState: t } = x({
-    control: f,
+      return s ? q(s) : void 0;
+  }, [e, s]), { field: a, formState: c, fieldState: t } = _({
+    control: d,
     defaultValue: p,
     name: r,
     rules: m,
     shouldUnregister: l
-  }), i = d(
-    () => t.error ? _(
+  }), i = f(
+    () => t.error ? $(
       t.error?.message,
       t.error?.type,
       s
     ) : "",
     [t.error, s]
   );
-  E(() => {
+  x(() => {
     e ? o.setErrorMessage(r, "") : o.setErrorMessage(r, i);
   }, [i, o, r, e]);
-  const a = T(c, F);
-  return /* @__PURE__ */ g(
-    q,
+  const g = T(a, F);
+  return /* @__PURE__ */ I(
+    S,
     {
       errorMessages: i && !e ? [{ message: i }] : void 0,
       readOnly: e,
       required: !!m?.required,
       htmlFor: `${o.id}__${r}`,
       ...u,
-      children: n({
-        ...a,
-        id: `${o.id}__${r}`
-      })
+      children: n(
+        {
+          ...g,
+          id: `${o.id}__${r}`
+        },
+        {
+          formState: c,
+          fieldState: t
+        }
+      )
     }
   );
 };
 export {
-  G as IressFormField
+  H as IressFormField
 };

package/dist/src/patterns/Form/FormField/FormField.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Control, ControllerRenderProps, FieldPath, FieldPathValue, FieldValues, UseControllerProps } from 'react-hook-form';
+import { Control, ControllerFieldState, ControllerRenderProps, FieldPath, FieldPathValue, FieldValues, UseControllerProps, UseFormStateReturn } from 'react-hook-form';
 import { CustomRules } from './helpers/transformCustomRulesToValidateRule';
 import { IressFieldProps } from '../../../components/Field';
 export interface IressFormFieldProps<T extends FieldValues = FieldValues, TName extends FieldPath<T> = FieldPath<T>> extends Omit<IressFieldProps, 'children' | 'htmlFor' | 'required'>, Omit<UseControllerProps<T, FieldPath<T>>, 'disabled'> {
@@ -22,7 +22,7 @@ export interface IressFormFieldProps<T extends FieldValues = FieldValues, TName
      * To ensure the field is correctly registered with the form, the control must be passed as props to the rendered component.
      * (eg. `render={field => <IressInput {...field} />}`)
      */
-    render: (field: FormFieldRenderProps<T>) => ReactNode;
+    render: (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)
@@ -47,6 +47,19 @@ export interface FormFieldRenderProps<T extends FieldValues> extends ControllerR
      */
     id: string;
 }
+/**
+ * Props for the `IressFormField` `render` prop, second argument.
+ */
+export interface FormFieldRenderState<T extends FieldValues> {
+    /**
+     * State of the field.
+     */
+    fieldState?: ControllerFieldState;
+    /**
+     * State of the form.
+     */
+    formState?: UseFormStateReturn<T>;
+}
 /**
  * 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iress-oss/ids-components",
-  "version": "6.0.0-alpha.4",
+  "version": "6.0.0-alpha.5",
   "description": "Iress React Component Library",
   "license": "Apache-2.0",
   "type": "module",
@@ -99,5 +99,6 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/iress/design-system"
-  }
+  },
+  "stableVersion": "6.0.0-alpha.4"
 }