@wordpress/dataviews 10.0.1-next.ff1cebbba.0 → 10.1.0

package/build-module/dataform-controls/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-controls/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tDataFormControlProps,\n\tField,\n\tFieldTypeDefinition,\n\tEditConfig,\n} from '../types';\nimport checkbox from './checkbox';\nimport datetime from './datetime';\nimport date from './date';\nimport email from './email';\nimport telephone from './telephone';\nimport url from './url';\nimport integer from './integer';\nimport number from './number';\nimport radio from './radio';\nimport select from './select';\nimport text from './text';\nimport toggle from './toggle';\nimport textarea from './textarea';\nimport toggleGroup from './toggle-group';\nimport array from './array';\nimport color from './color';\nimport password from './password';\n\ninterface FormControls {\n\t[ key: string ]: ComponentType< DataFormControlProps< any > >;\n}\n\nconst FORM_CONTROLS: FormControls = {\n\tarray,\n\tcheckbox,\n\tcolor,\n\tdatetime,\n\tdate,\n\temail,\n\ttelephone,\n\turl,\n\tinteger,\n\tnumber,\n\tpassword,\n\tradio,\n\tselect,\n\ttext,\n\ttoggle,\n\ttextarea,\n\ttoggleGroup,\n};\n\nfunction isEditConfig( value: any ): value is EditConfig {\n\treturn (\n\t\tvalue && typeof value === 'object' && typeof value.control === 'string'\n\t);\n}\n\nfunction createConfiguredControl( config: EditConfig ) {\n\tconst { control, ...controlConfig } = config;\n\tconst BaseControlType = getControlByType( control );\n\n\treturn function ConfiguredControl< Item >(\n\t\tprops: DataFormControlProps< Item >\n\t) {\n\t\treturn <BaseControlType { ...props } config={ controlConfig } />;\n\t};\n}\n\nexport function getControl< Item >(\n\tfield: Field< Item >,\n\tfieldTypeDefinition: FieldTypeDefinition< Item >\n) {\n\tif ( typeof field.Edit === 'function' ) {\n\t\treturn field.Edit;\n\t}\n\n\tif ( typeof field.Edit === 'string' ) {\n\t\treturn getControlByType( field.Edit );\n\t}\n\n\tif ( isEditConfig( field.Edit ) ) {\n\t\treturn createConfiguredControl( field.Edit );\n\t}\n\n\tif ( field.elements && field.type !== 'array' ) {\n\t\treturn getControlByType( 'select' );\n\t}\n\n\tif ( typeof fieldTypeDefinition.Edit === 'string' ) {\n\t\treturn getControlByType( fieldTypeDefinition.Edit );\n\t}\n\n\tif ( isEditConfig( fieldTypeDefinition.Edit ) ) {\n\t\treturn createConfiguredControl( fieldTypeDefinition.Edit );\n\t}\n\n\treturn fieldTypeDefinition.Edit;\n}\n\nexport function getControlByType( type: string ) {\n\tif ( Object.keys( FORM_CONTROLS ).includes( type ) ) {\n\t\treturn FORM_CONTROLS[ type ];\n\t}\n\n\tthrow 'Control ' + type + ' not found';\n}\n"],
-  "mappings": "AAqES;AAvDT,OAAO,cAAc;AACrB,OAAO,cAAc;AACrB,OAAO,UAAU;AACjB,OAAO,WAAW;AAClB,OAAO,eAAe;AACtB,OAAO,SAAS;AAChB,OAAO,aAAa;AACpB,OAAO,YAAY;AACnB,OAAO,WAAW;AAClB,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,OAAO,iBAAiB;AACxB,OAAO,WAAW;AAClB,OAAO,WAAW;AAClB,OAAO,cAAc;AAMrB,MAAM,gBAA8B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEA,SAAS,aAAc,OAAkC;AACxD,SACC,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,YAAY;AAEjE;AAEA,SAAS,wBAAyB,QAAqB;AACtD,QAAM,EAAE,SAAS,GAAG,cAAc,IAAI;AACtC,QAAM,kBAAkB,iBAAkB,OAAQ;AAElD,SAAO,SAAS,kBACf,OACC;AACD,WAAO,oBAAC,mBAAkB,GAAG,OAAQ,QAAS,eAAgB;AAAA,EAC/D;AACD;AAEO,SAAS,WACf,OACA,qBACC;AACD,MAAK,OAAO,MAAM,SAAS,YAAa;AACvC,WAAO,MAAM;AAAA,EACd;AAEA,MAAK,OAAO,MAAM,SAAS,UAAW;AACrC,WAAO,iBAAkB,MAAM,IAAK;AAAA,EACrC;AAEA,MAAK,aAAc,MAAM,IAAK,GAAI;AACjC,WAAO,wBAAyB,MAAM,IAAK;AAAA,EAC5C;AAEA,MAAK,MAAM,YAAY,MAAM,SAAS,SAAU;AAC/C,WAAO,iBAAkB,QAAS;AAAA,EACnC;AAEA,MAAK,OAAO,oBAAoB,SAAS,UAAW;AACnD,WAAO,iBAAkB,oBAAoB,IAAK;AAAA,EACnD;AAEA,MAAK,aAAc,oBAAoB,IAAK,GAAI;AAC/C,WAAO,wBAAyB,oBAAoB,IAAK;AAAA,EAC1D;AAEA,SAAO,oBAAoB;AAC5B;AAEO,SAAS,iBAAkB,MAAe;AAChD,MAAK,OAAO,KAAM,aAAc,EAAE,SAAU,IAAK,GAAI;AACpD,WAAO,cAAe,IAAK;AAAA,EAC5B;AAEA,QAAM,aAAa,OAAO;AAC3B;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tDataFormControlProps,\n\tField,\n\tFieldTypeDefinition,\n\tEditConfig,\n} from '../types';\nimport checkbox from './checkbox';\nimport datetime from './datetime';\nimport date from './date';\nimport email from './email';\nimport telephone from './telephone';\nimport url from './url';\nimport integer from './integer';\nimport number from './number';\nimport radio from './radio';\nimport select from './select';\nimport text from './text';\nimport toggle from './toggle';\nimport textarea from './textarea';\nimport toggleGroup from './toggle-group';\nimport array from './array';\nimport color from './color';\nimport password from './password';\nimport hasElements from '../utils/has-elements';\n\ninterface FormControls {\n\t[ key: string ]: ComponentType< DataFormControlProps< any > >;\n}\n\nconst FORM_CONTROLS: FormControls = {\n\tarray,\n\tcheckbox,\n\tcolor,\n\tdatetime,\n\tdate,\n\temail,\n\ttelephone,\n\turl,\n\tinteger,\n\tnumber,\n\tpassword,\n\tradio,\n\tselect,\n\ttext,\n\ttoggle,\n\ttextarea,\n\ttoggleGroup,\n};\n\nfunction isEditConfig( value: any ): value is EditConfig {\n\treturn (\n\t\tvalue && typeof value === 'object' && typeof value.control === 'string'\n\t);\n}\n\nfunction createConfiguredControl( config: EditConfig ) {\n\tconst { control, ...controlConfig } = config;\n\tconst BaseControlType = getControlByType( control );\n\n\treturn function ConfiguredControl< Item >(\n\t\tprops: DataFormControlProps< Item >\n\t) {\n\t\treturn <BaseControlType { ...props } config={ controlConfig } />;\n\t};\n}\n\nexport function getControl< Item >(\n\tfield: Field< Item >,\n\tfieldTypeDefinition: FieldTypeDefinition< Item >\n) {\n\tif ( typeof field.Edit === 'function' ) {\n\t\treturn field.Edit;\n\t}\n\n\tif ( typeof field.Edit === 'string' ) {\n\t\treturn getControlByType( field.Edit );\n\t}\n\n\tif ( isEditConfig( field.Edit ) ) {\n\t\treturn createConfiguredControl( field.Edit );\n\t}\n\n\tif ( hasElements( field ) && field.type !== 'array' ) {\n\t\treturn getControlByType( 'select' );\n\t}\n\n\tif ( typeof fieldTypeDefinition.Edit === 'string' ) {\n\t\treturn getControlByType( fieldTypeDefinition.Edit );\n\t}\n\n\tif ( isEditConfig( fieldTypeDefinition.Edit ) ) {\n\t\treturn createConfiguredControl( fieldTypeDefinition.Edit );\n\t}\n\n\treturn fieldTypeDefinition.Edit;\n}\n\nexport function getControlByType( type: string ) {\n\tif ( Object.keys( FORM_CONTROLS ).includes( type ) ) {\n\t\treturn FORM_CONTROLS[ type ];\n\t}\n\n\tthrow 'Control ' + type + ' not found';\n}\n"],
+  "mappings": "AAsES;AAxDT,OAAO,cAAc;AACrB,OAAO,cAAc;AACrB,OAAO,UAAU;AACjB,OAAO,WAAW;AAClB,OAAO,eAAe;AACtB,OAAO,SAAS;AAChB,OAAO,aAAa;AACpB,OAAO,YAAY;AACnB,OAAO,WAAW;AAClB,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,OAAO,iBAAiB;AACxB,OAAO,WAAW;AAClB,OAAO,WAAW;AAClB,OAAO,cAAc;AACrB,OAAO,iBAAiB;AAMxB,MAAM,gBAA8B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEA,SAAS,aAAc,OAAkC;AACxD,SACC,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,YAAY;AAEjE;AAEA,SAAS,wBAAyB,QAAqB;AACtD,QAAM,EAAE,SAAS,GAAG,cAAc,IAAI;AACtC,QAAM,kBAAkB,iBAAkB,OAAQ;AAElD,SAAO,SAAS,kBACf,OACC;AACD,WAAO,oBAAC,mBAAkB,GAAG,OAAQ,QAAS,eAAgB;AAAA,EAC/D;AACD;AAEO,SAAS,WACf,OACA,qBACC;AACD,MAAK,OAAO,MAAM,SAAS,YAAa;AACvC,WAAO,MAAM;AAAA,EACd;AAEA,MAAK,OAAO,MAAM,SAAS,UAAW;AACrC,WAAO,iBAAkB,MAAM,IAAK;AAAA,EACrC;AAEA,MAAK,aAAc,MAAM,IAAK,GAAI;AACjC,WAAO,wBAAyB,MAAM,IAAK;AAAA,EAC5C;AAEA,MAAK,YAAa,KAAM,KAAK,MAAM,SAAS,SAAU;AACrD,WAAO,iBAAkB,QAAS;AAAA,EACnC;AAEA,MAAK,OAAO,oBAAoB,SAAS,UAAW;AACnD,WAAO,iBAAkB,oBAAoB,IAAK;AAAA,EACnD;AAEA,MAAK,aAAc,oBAAoB,IAAK,GAAI;AAC/C,WAAO,wBAAyB,oBAAoB,IAAK;AAAA,EAC1D;AAEA,SAAO,oBAAoB;AAC5B;AAEO,SAAS,iBAAkB,MAAe;AAChD,MAAK,OAAO,KAAM,aAAc,EAAE,SAAU,IAAK,GAAI;AACpD,WAAO,cAAe,IAAK;AAAA,EAC5B;AAEA,QAAM,aAAa,OAAO;AAC3B;",
   "names": []
 }

package/build-module/dataform-controls/password.js

@@ -8,7 +8,8 @@ function Password({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
   const [isVisible, setIsVisible] = useState(false);
   const toggleVisibility = useCallback(() => {
@@ -22,6 +23,7 @@ function Password({
         field,
         onChange,
         hideLabelFromVision,
+        validity,
         type: isVisible ? "text" : "password",
         suffix: /* @__PURE__ */ jsx(
           Button,

package/build-module/dataform-controls/password.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-controls/password.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { useCallback, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { seen, unseen } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport ValidatedText from './utils/validated-input';\nimport type { DataFormControlProps } from '../types';\n\nexport default function Password< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst [ isVisible, setIsVisible ] = useState( false );\n\n\tconst toggleVisibility = useCallback( () => {\n\t\tsetIsVisible( ( prev ) => ! prev );\n\t}, [] );\n\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\ttype: isVisible ? 'text' : 'password',\n\t\t\t\tsuffix: (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ isVisible ? unseen : seen }\n\t\t\t\t\t\tonClick={ toggleVisibility }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\tisVisible\n\t\t\t\t\t\t\t\t? __( 'Hide password' )\n\t\t\t\t\t\t\t\t: __( 'Show password' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "AAkCK;AA/BL,SAAS,cAAc;AACvB,SAAS,aAAa,gBAAgB;AACtC,SAAS,UAAU;AACnB,SAAS,MAAM,cAAc;AAI7B,OAAO,mBAAmB;AAGX,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AAEpD,QAAM,mBAAmB,YAAa,MAAM;AAC3C,iBAAc,CAAE,SAAU,CAAE,IAAK;AAAA,EAClC,GAAG,CAAC,CAAE;AAEN,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,YAAY,SAAS;AAAA,QAC3B,QACC;AAAA,UAAC;AAAA;AAAA,YACA,MAAO,YAAY,SAAS;AAAA,YAC5B,SAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,cACC,YACG,GAAI,eAAgB,IACpB,GAAI,eAAgB;AAAA;AAAA,QAEzB;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { useCallback, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { seen, unseen } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport ValidatedText from './utils/validated-input';\nimport type { DataFormControlProps } from '../types';\n\nexport default function Password< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst [ isVisible, setIsVisible ] = useState( false );\n\n\tconst toggleVisibility = useCallback( () => {\n\t\tsetIsVisible( ( prev ) => ! prev );\n\t}, [] );\n\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tvalidity,\n\t\t\t\ttype: isVisible ? 'text' : 'password',\n\t\t\t\tsuffix: (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ isVisible ? unseen : seen }\n\t\t\t\t\t\tonClick={ toggleVisibility }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\tisVisible\n\t\t\t\t\t\t\t\t? __( 'Hide password' )\n\t\t\t\t\t\t\t\t: __( 'Show password' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "AAoCK;AAjCL,SAAS,cAAc;AACvB,SAAS,aAAa,gBAAgB;AACtC,SAAS,UAAU;AACnB,SAAS,MAAM,cAAc;AAI7B,OAAO,mBAAmB;AAGX,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AAEpD,QAAM,mBAAmB,YAAa,MAAM;AAC3C,iBAAc,CAAE,SAAU,CAAE,IAAK;AAAA,EAClC,GAAG,CAAC,CAAE;AAEN,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,YAAY,SAAS;AAAA,QAC3B,QACC;AAAA,UAAC;AAAA;AAAA,YACA,MAAO,YAAY,SAAS;AAAA,YAC5B,SAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,cACC,YACG,GAAI,eAAgB,IACpB,GAAI,eAAgB;AAAA;AAAA,QAEzB;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/dataform-controls/radio.js

@@ -1,62 +1,43 @@
 import { jsx } from "react/jsx-runtime";
-import deepMerge from "deepmerge";
-import { privateApis } from "@wordpress/components";
-import { useCallback, useState } from "@wordpress/element";
+import { privateApis, Spinner } from "@wordpress/components";
+import { useCallback } from "@wordpress/element";
 import { unlock } from "../lock-unlock";
+import getCustomValidity from "./utils/get-custom-validity";
+import useElements from "../hooks/use-elements";
 const { ValidatedRadioControl } = unlock(privateApis);
 function Radio({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { label, description, elements, getValue, setValue } = field;
+  const { label, description, getValue, setValue, isValid } = field;
+  const { elements, isLoading } = useElements({
+    elements: field.elements,
+    getElements: field.getElements
+  });
   const value = getValue({ item: data });
-  const [customValidity, setCustomValidity] = useState(void 0);
   const onChangeControl = useCallback(
     (newValue) => onChange(setValue({ item: data, value: newValue })),
     [data, onChange, setValue]
   );
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
-  if (elements) {
-    return /* @__PURE__ */ jsx(
-      ValidatedRadioControl,
-      {
-        required: !!field.isValid?.required,
-        onValidate: onValidateControl,
-        customValidity,
-        label,
-        help: description,
-        onChange: onChangeControl,
-        options: elements,
-        selected: value,
-        hideLabelFromVision
-      }
-    );
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Spinner, {});
   }
-  return null;
+  return /* @__PURE__ */ jsx(
+    ValidatedRadioControl,
+    {
+      required: !!field.isValid?.required,
+      customValidity: getCustomValidity(isValid, validity),
+      label,
+      help: description,
+      onChange: onChangeControl,
+      options: elements,
+      selected: value,
+      hideLabelFromVision
+    }
+  );
 }
 export {
   Radio as default

package/build-module/dataform-controls/radio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-controls/radio.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\n\nconst { ValidatedRadioControl } = unlock( privateApis );\n\nexport default function Radio< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { label, description, elements, getValue, setValue } = field;\n\tconst value = getValue( { item: data } );\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedRadioControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onValidateControl = useCallback(\n\t\t( newValue: any ) => {\n\t\t\tconst message = field.isValid?.custom?.(\n\t\t\t\tdeepMerge(\n\t\t\t\t\tdata,\n\t\t\t\t\tsetValue( {\n\t\t\t\t\t\titem: data,\n\t\t\t\t\t\tvalue: newValue,\n\t\t\t\t\t} ) as Partial< Item >\n\t\t\t\t),\n\t\t\t\tfield\n\t\t\t);\n\n\t\t\tif ( message ) {\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\tmessage,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetCustomValidity( undefined );\n\t\t},\n\t\t[ data, field, setValue ]\n\t);\n\n\tif ( elements ) {\n\t\treturn (\n\t\t\t<ValidatedRadioControl\n\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\tonValidate={ onValidateControl }\n\t\t\t\tcustomValidity={ customValidity }\n\t\t\t\tlabel={ label }\n\t\t\t\thelp={ description }\n\t\t\t\tonChange={ onChangeControl }\n\t\t\t\toptions={ elements }\n\t\t\t\tselected={ value }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n"],
-  "mappings": "AAoEG;AAjEH,OAAO,eAAe;AAKtB,SAAS,mBAAmB;AAC5B,SAAS,aAAa,gBAAgB;AAMtC,SAAS,cAAc;AAEvB,MAAM,EAAE,sBAAsB,IAAI,OAAQ,WAAY;AAEvC,SAAR,MAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,UAAU,UAAU,SAAS,IAAI;AAC7D,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AACvC,QAAM,CAAE,gBAAgB,iBAAkB,IACzC,SAIG,MAAU;AAEd,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,oBAAoB;AAAA,IACzB,CAAE,aAAmB;AACpB,YAAM,UAAU,MAAM,SAAS;AAAA,QAC9B;AAAA,UACC;AAAA,UACA,SAAU;AAAA,YACT,MAAM;AAAA,YACN,OAAO;AAAA,UACR,CAAE;AAAA,QACH;AAAA,QACA;AAAA,MACD;AAEA,UAAK,SAAU;AACd,0BAAmB;AAAA,UAClB,MAAM;AAAA,UACN;AAAA,QACD,CAAE;AACF;AAAA,MACD;AAEA,wBAAmB,MAAU;AAAA,IAC9B;AAAA,IACA,CAAE,MAAM,OAAO,QAAS;AAAA,EACzB;AAEA,MAAK,UAAW;AACf,WACC;AAAA,MAAC;AAAA;AAAA,QACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,QAC7B,YAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA,MAAO;AAAA,QACP,UAAW;AAAA,QACX,SAAU;AAAA,QACV,UAAW;AAAA,QACX;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,SAAO;AACR;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis, Spinner } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\nimport useElements from '../hooks/use-elements';\n\nconst { ValidatedRadioControl } = unlock( privateApis );\n\nexport default function Radio< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, description, getValue, setValue, isValid } = field;\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\treturn (\n\t\t<ValidatedRadioControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\toptions={ elements }\n\t\t\tselected={ value }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "AAqCS;AAlCT,SAAS,aAAa,eAAe;AACrC,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAC9B,OAAO,iBAAiB;AAExB,MAAM,EAAE,sBAAsB,IAAI,OAAQ,WAAY;AAEvC,SAAR,MAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAC5D,QAAM,EAAE,UAAU,UAAU,IAAI,YAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AACF,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,MAAK,WAAY;AAChB,WAAO,oBAAC,WAAQ;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA,MAAO;AAAA,MACP,UAAW;AAAA,MACX,SAAU;AAAA,MACV,UAAW;AAAA,MACX;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/dataform-controls/select.js

@@ -1,53 +1,36 @@
 import { jsx } from "react/jsx-runtime";
-import deepMerge from "deepmerge";
-import { privateApis } from "@wordpress/components";
-import { useCallback, useState } from "@wordpress/element";
+import { privateApis, Spinner } from "@wordpress/components";
+import { useCallback } from "@wordpress/element";
+import useElements from "../hooks/use-elements";
 import { unlock } from "../lock-unlock";
+import getCustomValidity from "./utils/get-custom-validity";
 const { ValidatedSelectControl } = unlock(privateApis);
 function Select({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { type, label, description, getValue, setValue } = field;
-  const [customValidity, setCustomValidity] = useState(void 0);
+  const { type, label, description, getValue, setValue, isValid } = field;
   const isMultiple = type === "array";
   const value = getValue({ item: data }) ?? (isMultiple ? [] : "");
   const onChangeControl = useCallback(
     (newValue) => onChange(setValue({ item: data, value: newValue })),
     [data, onChange, setValue]
   );
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
-  const elements = field?.elements ?? [];
+  const { elements, isLoading } = useElements({
+    elements: field.elements,
+    getElements: field.getElements
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Spinner, {});
+  }
   return /* @__PURE__ */ jsx(
     ValidatedSelectControl,
     {
       required: !!field.isValid?.required,
-      onValidate: onValidateControl,
-      customValidity,
+      customValidity: getCustomValidity(isValid, validity),
       label,
       value,
       help: description,

package/build-module/dataform-controls/select.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-controls/select.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\n\nconst { ValidatedSelectControl } = unlock( privateApis );\n\nexport default function Select< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { type, label, description, getValue, setValue } = field;\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedSelectControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\tconst isMultiple = type === 'array';\n\tconst value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: any ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onValidateControl = useCallback(\n\t\t( newValue: any ) => {\n\t\t\tconst message = field.isValid?.custom?.(\n\t\t\t\tdeepMerge(\n\t\t\t\t\tdata,\n\t\t\t\t\tsetValue( {\n\t\t\t\t\t\titem: data,\n\t\t\t\t\t\tvalue: newValue,\n\t\t\t\t\t} ) as Partial< Item >\n\t\t\t\t),\n\t\t\t\tfield\n\t\t\t);\n\n\t\t\tif ( message ) {\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\tmessage,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetCustomValidity( undefined );\n\t\t},\n\t\t[ data, field, setValue ]\n\t);\n\n\tconst elements = field?.elements ?? [];\n\n\treturn (\n\t\t<ValidatedSelectControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tonValidate={ onValidateControl }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tlabel={ label }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\toptions={ elements }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tmultiple={ isMultiple }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "AAuEE;AApEF,OAAO,eAAe;AAKtB,SAAS,mBAAmB;AAC5B,SAAS,aAAa,gBAAgB;AAMtC,SAAS,cAAc;AAEvB,MAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AAExC,SAAR,OAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,MAAM,OAAO,aAAa,UAAU,SAAS,IAAI;AACzD,QAAM,CAAE,gBAAgB,iBAAkB,IACzC,SAIG,MAAU;AAEd,QAAM,aAAa,SAAS;AAC5B,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE,MAAO,aAAa,CAAC,IAAI;AAEhE,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,oBAAoB;AAAA,IACzB,CAAE,aAAmB;AACpB,YAAM,UAAU,MAAM,SAAS;AAAA,QAC9B;AAAA,UACC;AAAA,UACA,SAAU;AAAA,YACT,MAAM;AAAA,YACN,OAAO;AAAA,UACR,CAAE;AAAA,QACH;AAAA,QACA;AAAA,MACD;AAEA,UAAK,SAAU;AACd,0BAAmB;AAAA,UAClB,MAAM;AAAA,UACN;AAAA,QACD,CAAE;AACF;AAAA,MACD;AAEA,wBAAmB,MAAU;AAAA,IAC9B;AAAA,IACA,CAAE,MAAM,OAAO,QAAS;AAAA,EACzB;AAEA,QAAM,WAAW,OAAO,YAAY,CAAC;AAErC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B,YAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP,SAAU;AAAA,MACV,UAAW;AAAA,MACX,uBAAqB;AAAA,MACrB,yBAAuB;AAAA,MACvB;AAAA,MACA,UAAW;AAAA;AAAA,EACZ;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis, Spinner } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport useElements from '../hooks/use-elements';\nimport { unlock } from '../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedSelectControl } = unlock( privateApis );\n\nexport default function Select< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { type, label, description, getValue, setValue, isValid } = field;\n\n\tconst isMultiple = type === 'array';\n\tconst value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: any ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\treturn (\n\t\t<ValidatedSelectControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\toptions={ elements }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tmultiple={ isMultiple }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "AAwCS;AArCT,SAAS,aAAa,eAAe;AACrC,SAAS,mBAAmB;AAM5B,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAE9B,MAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AAExC,SAAR,OAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,MAAM,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAElE,QAAM,aAAa,SAAS;AAC5B,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE,MAAO,aAAa,CAAC,IAAI;AAEhE,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,EAAE,UAAU,UAAU,IAAI,YAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AAEF,MAAK,WAAY;AAChB,WAAO,oBAAC,WAAQ;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP,SAAU;AAAA,MACV,UAAW;AAAA,MACX,uBAAqB;AAAA,MACrB,yBAAuB;AAAA,MACvB;AAAA,MACA,UAAW;AAAA;AAAA,EACZ;AAEF;",
   "names": []
 }

package/build-module/dataform-controls/telephone.js

@@ -9,7 +9,8 @@ function Telephone({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
   return /* @__PURE__ */ jsx(
     ValidatedText,
@@ -19,6 +20,7 @@ function Telephone({
         field,
         onChange,
         hideLabelFromVision,
+        validity,
         type: "tel",
         prefix: /* @__PURE__ */ jsx(InputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon: mobile }) })
       }

package/build-module/dataform-controls/telephone.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-controls/telephone.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { mobile } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport ValidatedText from './utils/validated-input';\n\nexport default function Telephone< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\ttype: 'tel',\n\t\t\t\tprefix: (\n\t\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t\t<Icon icon={ mobile } />\n\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "AA+BM;AA5BN;AAAA,EACC;AAAA,EACA,2CAA2C;AAAA,OACrC;AACP,SAAS,cAAc;AAMvB,OAAO,mBAAmB;AAEX,SAAR,UAAoC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,QACC,oBAAC,6BAA0B,SAAQ,QAClC,8BAAC,QAAK,MAAO,QAAS,GACvB;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { mobile } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport ValidatedText from './utils/validated-input';\n\nexport default function Telephone< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tvalidity,\n\t\t\t\ttype: 'tel',\n\t\t\t\tprefix: (\n\t\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t\t<Icon icon={ mobile } />\n\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "AAiCM;AA9BN;AAAA,EACC;AAAA,EACA,2CAA2C;AAAA,OACrC;AACP,SAAS,cAAc;AAMvB,OAAO,mBAAmB;AAEX,SAAR,UAAoC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,QACC,oBAAC,6BAA0B,SAAQ,QAClC,8BAAC,QAAK,MAAO,QAAS,GACvB;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/dataform-controls/text.js

@@ -6,7 +6,8 @@ function Text({
   field,
   onChange,
   hideLabelFromVision,
-  config
+  config,
+  validity
 }) {
   const { prefix, suffix } = config || {};
   return /* @__PURE__ */ jsx(
@@ -17,6 +18,7 @@ function Text({
         field,
         onChange,
         hideLabelFromVision,
+        validity,
         prefix: prefix ? createElement(prefix) : void 0,
         suffix: suffix ? createElement(suffix) : void 0
       }

package/build-module/dataform-controls/text.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-controls/text.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport ValidatedText from './utils/validated-input';\n\nexport default function Text< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tconfig,\n}: DataFormControlProps< Item > ) {\n\tconst { prefix, suffix } = config || {};\n\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tprefix: prefix ? createElement( prefix ) : undefined,\n\t\t\t\tsuffix: suffix ? createElement( suffix ) : undefined,\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "AAqBE;AAlBF,SAAS,qBAAqB;AAM9B,OAAO,mBAAmB;AAEX,SAAR,KAA+B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,QAAQ,OAAO,IAAI,UAAU,CAAC;AAEtC,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ,SAAS,cAAe,MAAO,IAAI;AAAA,QAC3C,QAAQ,SAAS,cAAe,MAAO,IAAI;AAAA,MAC5C;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport ValidatedText from './utils/validated-input';\n\nexport default function Text< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tconfig,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { prefix, suffix } = config || {};\n\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tvalidity,\n\t\t\t\tprefix: prefix ? createElement( prefix ) : undefined,\n\t\t\t\tsuffix: suffix ? createElement( suffix ) : undefined,\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "AAsBE;AAnBF,SAAS,qBAAqB;AAM9B,OAAO,mBAAmB;AAEX,SAAR,KAA+B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,QAAQ,OAAO,IAAI,UAAU,CAAC;AAEtC,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ,SAAS,cAAe,MAAO,IAAI;AAAA,QAC3C,QAAQ,SAAS,cAAe,MAAO,IAAI;AAAA,MAC5C;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/dataform-controls/textarea.js

@@ -1,53 +1,29 @@
 import { jsx } from "react/jsx-runtime";
-import deepMerge from "deepmerge";
 import { privateApis } from "@wordpress/components";
-import { useCallback, useState } from "@wordpress/element";
+import { useCallback } from "@wordpress/element";
 import { unlock } from "../lock-unlock";
+import getCustomValidity from "./utils/get-custom-validity";
 const { ValidatedTextareaControl } = unlock(privateApis);
 function Textarea({
   data,
   field,
   onChange,
   hideLabelFromVision,
-  config
+  config,
+  validity
 }) {
   const { rows = 4 } = config || {};
-  const { label, placeholder, description, setValue } = field;
+  const { label, placeholder, description, setValue, isValid } = field;
   const value = field.getValue({ item: data });
-  const [customValidity, setCustomValidity] = useState(void 0);
   const onChangeControl = useCallback(
     (newValue) => onChange(setValue({ item: data, value: newValue })),
     [data, onChange, setValue]
   );
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
   return /* @__PURE__ */ jsx(
     ValidatedTextareaControl,
     {
-      required: !!field.isValid?.required,
-      onValidate: onValidateControl,
-      customValidity,
+      required: !!isValid?.required,
+      customValidity: getCustomValidity(isValid, validity),
       label,
       placeholder,
       value: value ?? "",

package/build-module/dataform-controls/textarea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-controls/textarea.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\n\nconst { ValidatedTextareaControl } = unlock( privateApis );\n\nexport default function Textarea< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tconfig,\n}: DataFormControlProps< Item > ) {\n\tconst { rows = 4 } = config || {};\n\tconst { label, placeholder, description, setValue } = field;\n\tconst value = field.getValue( { item: data } );\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedTextareaControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onValidateControl = useCallback(\n\t\t( newValue: any ) => {\n\t\t\tconst message = field.isValid?.custom?.(\n\t\t\t\tdeepMerge(\n\t\t\t\t\tdata,\n\t\t\t\t\tsetValue( {\n\t\t\t\t\t\titem: data,\n\t\t\t\t\t\tvalue: newValue,\n\t\t\t\t\t} ) as Partial< Item >\n\t\t\t\t),\n\t\t\t\tfield\n\t\t\t);\n\n\t\t\tif ( message ) {\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\tmessage,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetCustomValidity( undefined );\n\t\t},\n\t\t[ data, field, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedTextareaControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tonValidate={ onValidateControl }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\trows={ rows }\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "AAqEE;AAlEF,OAAO,eAAe;AAKtB,SAAS,mBAAmB;AAC5B,SAAS,aAAa,gBAAgB;AAMtC,SAAS,cAAc;AAEvB,MAAM,EAAE,yBAAyB,IAAI,OAAQ,WAAY;AAE1C,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,EAAE,IAAI,UAAU,CAAC;AAChC,QAAM,EAAE,OAAO,aAAa,aAAa,SAAS,IAAI;AACtD,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE;AAC7C,QAAM,CAAE,gBAAgB,iBAAkB,IACzC,SAIG,MAAU;AAEd,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,oBAAoB;AAAA,IACzB,CAAE,aAAmB;AACpB,YAAM,UAAU,MAAM,SAAS;AAAA,QAC9B;AAAA,UACC;AAAA,UACA,SAAU;AAAA,YACT,MAAM;AAAA,YACN,OAAO;AAAA,UACR,CAAE;AAAA,QACH;AAAA,QACA;AAAA,MACD;AAEA,UAAK,SAAU;AACd,0BAAmB;AAAA,UAClB,MAAM;AAAA,UACN;AAAA,QACD,CAAE;AACF;AAAA,MACD;AAEA,wBAAmB,MAAU;AAAA,IAC9B;AAAA,IACA,CAAE,MAAM,OAAO,QAAS;AAAA,EACzB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B,YAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA,uBAAqB;AAAA,MACrB,yBAAuB;AAAA,MACvB;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedTextareaControl } = unlock( privateApis );\n\nexport default function Textarea< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tconfig,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { rows = 4 } = config || {};\n\tconst { label, placeholder, description, setValue, isValid } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedTextareaControl\n\t\t\trequired={ !! isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\trows={ rows }\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "AAkCE;AA/BF,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAE9B,MAAM,EAAE,yBAAyB,IAAI,OAAQ,WAAY;AAE1C,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,EAAE,IAAI,UAAU,CAAC;AAChC,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,QAAQ,IAAI;AAC/D,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE;AAE7C,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,SAAS;AAAA,MACvB,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA,uBAAqB;AAAA,MACrB,yBAAuB;AAAA,MACvB;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/dataform-controls/toggle-group.js

@@ -1,78 +1,61 @@
 import { jsx } from "react/jsx-runtime";
-import deepMerge from "deepmerge";
 import {
   privateApis,
-  __experimentalToggleGroupControlOption as ToggleGroupControlOption
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  Spinner
 } from "@wordpress/components";
-import { useCallback, useState } from "@wordpress/element";
+import { useCallback } from "@wordpress/element";
 import { unlock } from "../lock-unlock";
+import getCustomValidity from "./utils/get-custom-validity";
+import useElements from "../hooks/use-elements";
 const { ValidatedToggleGroupControl } = unlock(privateApis);
 function ToggleGroup({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { getValue, setValue } = field;
-  const [customValidity, setCustomValidity] = useState(void 0);
+  const { getValue, setValue, isValid } = field;
   const value = getValue({ item: data });
   const onChangeControl = useCallback(
     (newValue) => onChange(setValue({ item: data, value: newValue })),
     [data, onChange, setValue]
   );
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
-  if (field.elements) {
-    const selectedOption = field.elements.find(
-      (el) => el.value === value
-    );
-    return /* @__PURE__ */ jsx(
-      ValidatedToggleGroupControl,
-      {
-        required: !!field.isValid?.required,
-        onValidate: onValidateControl,
-        customValidity,
-        __next40pxDefaultSize: true,
-        __nextHasNoMarginBottom: true,
-        isBlock: true,
-        label: field.label,
-        help: selectedOption?.description || field.description,
-        onChange: onChangeControl,
-        value,
-        hideLabelFromVision,
-        children: field.elements.map((el) => /* @__PURE__ */ jsx(
-          ToggleGroupControlOption,
-          {
-            label: el.label,
-            value: el.value
-          },
-          el.value
-        ))
-      }
-    );
+  const { elements, isLoading } = useElements({
+    elements: field.elements,
+    getElements: field.getElements
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Spinner, {});
+  }
+  if (elements.length === 0) {
+    return null;
   }
-  return null;
+  const selectedOption = elements.find((el) => el.value === value);
+  return /* @__PURE__ */ jsx(
+    ValidatedToggleGroupControl,
+    {
+      required: !!field.isValid?.required,
+      customValidity: getCustomValidity(isValid, validity),
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      isBlock: true,
+      label: field.label,
+      help: selectedOption?.description || field.description,
+      onChange: onChangeControl,
+      value,
+      hideLabelFromVision,
+      children: elements.map((el) => /* @__PURE__ */ jsx(
+        ToggleGroupControlOption,
+        {
+          label: el.label,
+          value: el.value
+        },
+        el.value
+      ))
+    }
+  );
 }
 export {
   ToggleGroup as default

package/build-module/dataform-controls/toggle-group.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-controls/toggle-group.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useCallback, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\n\nconst { ValidatedToggleGroupControl } = unlock( privateApis );\n\nexport default function ToggleGroup< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { getValue, setValue } = field;\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedToggleGroupControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | number | undefined ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\tconst onValidateControl = useCallback(\n\t\t( newValue: any ) => {\n\t\t\tconst message = field.isValid?.custom?.(\n\t\t\t\tdeepMerge(\n\t\t\t\t\tdata,\n\t\t\t\t\tsetValue( {\n\t\t\t\t\t\titem: data,\n\t\t\t\t\t\tvalue: newValue,\n\t\t\t\t\t} ) as Partial< Item >\n\t\t\t\t),\n\t\t\t\tfield\n\t\t\t);\n\n\t\t\tif ( message ) {\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\tmessage,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetCustomValidity( undefined );\n\t\t},\n\t\t[ data, field, setValue ]\n\t);\n\n\tif ( field.elements ) {\n\t\tconst selectedOption = field.elements.find(\n\t\t\t( el ) => el.value === value\n\t\t);\n\t\treturn (\n\t\t\t<ValidatedToggleGroupControl\n\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\tonValidate={ onValidateControl }\n\t\t\t\tcustomValidity={ customValidity }\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tisBlock\n\t\t\t\tlabel={ field.label }\n\t\t\t\thelp={ selectedOption?.description || field.description }\n\t\t\t\tonChange={ onChangeControl }\n\t\t\t\tvalue={ value }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t>\n\t\t\t\t{ field.elements.map( ( el ) => (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ el.value }\n\t\t\t\t\t\tlabel={ el.label }\n\t\t\t\t\t\tvalue={ el.value }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ValidatedToggleGroupControl>\n\t\t);\n\t}\n\n\treturn null;\n}\n"],
-  "mappings": "AAuFK;AApFL,OAAO,eAAe;AAKtB;AAAA,EACC;AAAA,EACA,0CAA0C;AAAA,OACpC;AACP,SAAS,aAAa,gBAAgB;AAMtC,SAAS,cAAc;AAEvB,MAAM,EAAE,4BAA4B,IAAI,OAAQ,WAAY;AAE7C,SAAR,YAAsC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,UAAU,SAAS,IAAI;AAC/B,QAAM,CAAE,gBAAgB,iBAAkB,IACzC,SAIG,MAAU;AACd,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AACA,QAAM,oBAAoB;AAAA,IACzB,CAAE,aAAmB;AACpB,YAAM,UAAU,MAAM,SAAS;AAAA,QAC9B;AAAA,UACC;AAAA,UACA,SAAU;AAAA,YACT,MAAM;AAAA,YACN,OAAO;AAAA,UACR,CAAE;AAAA,QACH;AAAA,QACA;AAAA,MACD;AAEA,UAAK,SAAU;AACd,0BAAmB;AAAA,UAClB,MAAM;AAAA,UACN;AAAA,QACD,CAAE;AACF;AAAA,MACD;AAEA,wBAAmB,MAAU;AAAA,IAC9B;AAAA,IACA,CAAE,MAAM,OAAO,QAAS;AAAA,EACzB;AAEA,MAAK,MAAM,UAAW;AACrB,UAAM,iBAAiB,MAAM,SAAS;AAAA,MACrC,CAAE,OAAQ,GAAG,UAAU;AAAA,IACxB;AACA,WACC;AAAA,MAAC;AAAA;AAAA,QACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,QAC7B,YAAa;AAAA,QACb;AAAA,QACA,uBAAqB;AAAA,QACrB,yBAAuB;AAAA,QACvB,SAAO;AAAA,QACP,OAAQ,MAAM;AAAA,QACd,MAAO,gBAAgB,eAAe,MAAM;AAAA,QAC5C,UAAW;AAAA,QACX;AAAA,QACA;AAAA,QAEE,gBAAM,SAAS,IAAK,CAAE,OACvB;AAAA,UAAC;AAAA;AAAA,YAEA,OAAQ,GAAG;AAAA,YACX,OAAQ,GAAG;AAAA;AAAA,UAFL,GAAG;AAAA,QAGV,CACC;AAAA;AAAA,IACH;AAAA,EAEF;AAEA,SAAO;AACR;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\tSpinner,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\nimport useElements from '../hooks/use-elements';\n\nconst { ValidatedToggleGroupControl } = unlock( privateApis );\n\nexport default function ToggleGroup< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { getValue, setValue, isValid } = field;\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | number | undefined ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\tif ( elements.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst selectedOption = elements.find( ( el ) => el.value === value );\n\treturn (\n\t\t<ValidatedToggleGroupControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\tisBlock\n\t\t\tlabel={ field.label }\n\t\t\thelp={ selectedOption?.description || field.description }\n\t\t\tonChange={ onChangeControl }\n\t\t\tvalue={ value }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t>\n\t\t\t{ elements.map( ( el ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ el.value }\n\t\t\t\t\tlabel={ el.label }\n\t\t\t\t\tvalue={ el.value }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ValidatedToggleGroupControl>\n\t);\n}\n"],
+  "mappings": "AA0CS;AAvCT;AAAA,EACC;AAAA,EACA,0CAA0C;AAAA,EAC1C;AAAA,OACM;AACP,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAC9B,OAAO,iBAAiB;AAExB,MAAM,EAAE,4BAA4B,IAAI,OAAQ,WAAY;AAE7C,SAAR,YAAsC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,UAAU,UAAU,QAAQ,IAAI;AACxC,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,EAAE,UAAU,UAAU,IAAI,YAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AAEF,MAAK,WAAY;AAChB,WAAO,oBAAC,WAAQ;AAAA,EACjB;AAEA,MAAK,SAAS,WAAW,GAAI;AAC5B,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,SAAS,KAAM,CAAE,OAAQ,GAAG,UAAU,KAAM;AACnE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD,uBAAqB;AAAA,MACrB,yBAAuB;AAAA,MACvB,SAAO;AAAA,MACP,OAAQ,MAAM;AAAA,MACd,MAAO,gBAAgB,eAAe,MAAM;AAAA,MAC5C,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEE,mBAAS,IAAK,CAAE,OACjB;AAAA,QAAC;AAAA;AAAA,UAEA,OAAQ,GAAG;AAAA,UACX,OAAQ,GAAG;AAAA;AAAA,QAFL,GAAG;AAAA,MAGV,CACC;AAAA;AAAA,EACH;AAEF;",
   "names": []
 }

package/build-module/dataform-controls/toggle.js

@@ -1,51 +1,27 @@
 import { jsx } from "react/jsx-runtime";
-import deepMerge from "deepmerge";
 import { privateApis } from "@wordpress/components";
-import { useCallback, useState } from "@wordpress/element";
+import { useCallback } from "@wordpress/element";
 import { unlock } from "../lock-unlock";
+import getCustomValidity from "./utils/get-custom-validity";
 const { ValidatedToggleControl } = unlock(privateApis);
 function Toggle({
   field,
   onChange,
   data,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { label, description, getValue, setValue } = field;
-  const [customValidity, setCustomValidity] = useState(void 0);
+  const { label, description, getValue, setValue, isValid } = field;
   const onChangeControl = useCallback(() => {
     onChange(
       setValue({ item: data, value: !getValue({ item: data }) })
     );
   }, [onChange, setValue, data, getValue]);
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
   return /* @__PURE__ */ jsx(
     ValidatedToggleControl,
     {
-      required: !!field.isValid.required,
-      onValidate: onValidateControl,
-      customValidity,
+      required: !!isValid.required,
+      customValidity: getCustomValidity(isValid, validity),
       hidden: hideLabelFromVision,
       __nextHasNoMarginBottom: true,
       label,