@wordpress/components 30.2.1-next.0f6f9d12c.0 → 30.2.2-next.e256d081a.0

package/build-module/validated-form-controls/components/number-control.js

@@ -12,7 +12,8 @@ import NumberControl from '../../number-control';
 import { jsx as _jsx } from "react/jsx-runtime";
 const UnforwardedValidatedNumberControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -23,9 +24,10 @@ const UnforwardedValidatedNumberControl = ({
   return /*#__PURE__*/_jsx(ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/_jsx(NumberControl, {
       __next40pxDefaultSize: true,

package/build-module/validated-form-controls/components/number-control.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useRef","useMergeRefs","ControlWithError","NumberControl","jsx","_jsx","UnforwardedValidatedNumberControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","current","getValidityTarget","children","__next40pxDefaultSize","ref","args","ValidatedNumberControl"],"sources":["@wordpress/components/src/validated-form-controls/components/number-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport NumberControl from '../../number-control';\nimport type { ValidatedControlProps } from './types';\nimport type { NumberControlProps } from '../../number-control/types';\n\ntype Value = NumberControlProps[ 'value' ];\n\nconst UnforwardedValidatedNumberControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof NumberControl >,\n\t\t'__next40pxDefaultSize'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<NumberControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\n\t\t\t\t// TODO: Upstream limitation - When form is submitted when value is undefined, it will\n\t\t\t\t// automatically set a clamped value (as defined by `min` attribute, so 0 by default).\n\t\t\t\tonChange={ ( value, ...args ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value, ...args );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedNumberControl = forwardRef(\n\tUnforwardedValidatedNumberControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;AACvD,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAOC,aAAa,MAAM,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMjD,MAAMC,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGb,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMc,UAAU,GAAGb,YAAY,CAAE,CAAEW,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGf,MAAM,CAAWW,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACCX,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIO,QAAQ,CAACE,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDd,IAAA,CAACF,aAAa;MACbiB,qBAAqB;MACrBC,GAAG,EAAGP;MACN;MACA;MAAA;MACAL,QAAQ,EAAGA,CAAEO,KAAK,EAAE,GAAGM,IAAI,KAAM;QAChCP,QAAQ,CAACE,OAAO,GAAGD,KAAK;QACxBP,QAAQ,GAAIO,KAAK,EAAE,GAAGM,IAAK,CAAC;MAC7B,CAAG;MAAA,GACEX;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,sBAAsB,GAAGxB,UAAU,CAC/CO,iCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["forwardRef","useRef","useMergeRefs","ControlWithError","NumberControl","jsx","_jsx","UnforwardedValidatedNumberControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","current","getValidityTarget","children","__next40pxDefaultSize","ref","args","ValidatedNumberControl"],"sources":["@wordpress/components/src/validated-form-controls/components/number-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport NumberControl from '../../number-control';\nimport type { ValidatedControlProps } from './types';\nimport type { NumberControlProps } from '../../number-control/types';\n\ntype Value = NumberControlProps[ 'value' ];\n\nconst UnforwardedValidatedNumberControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof NumberControl >,\n\t\t'__next40pxDefaultSize'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<NumberControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\n\t\t\t\t// TODO: Upstream limitation - When form is submitted when value is undefined, it will\n\t\t\t\t// automatically set a clamped value (as defined by `min` attribute, so 0 by default).\n\t\t\t\tonChange={ ( value, ...args ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value, ...args );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedNumberControl = forwardRef(\n\tUnforwardedValidatedNumberControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;AACvD,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAOC,aAAa,MAAM,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMjD,MAAMC,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGd,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMe,UAAU,GAAGd,YAAY,CAAE,CAAEY,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGhB,MAAM,CAAWY,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACCZ,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACE,OAAQ,CAAC;IACxC,CAAG;IACHT,cAAc,EAAGA,cAAgB;IACjCU,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDf,IAAA,CAACF,aAAa;MACbkB,qBAAqB;MACrBC,GAAG,EAAGP;MACN;MACA;MAAA;MACAL,QAAQ,EAAGA,CAAEO,KAAK,EAAE,GAAGM,IAAI,KAAM;QAChCP,QAAQ,CAACE,OAAO,GAAGD,KAAK;QACxBP,QAAQ,GAAIO,KAAK,EAAE,GAAGM,IAAK,CAAC;MAC7B,CAAG;MAAA,GACEX;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,sBAAsB,GAAGzB,UAAU,CAC/CO,iCACD,CAAC","ignoreList":[]}

package/build-module/validated-form-controls/components/radio-control.js

@@ -12,7 +12,8 @@ import RadioControl from '../../radio-control';
 import { jsx as _jsx } from "react/jsx-runtime";
 const UnforwardedValidatedRadioControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -26,9 +27,10 @@ const UnforwardedValidatedRadioControl = ({
     // TODO: Upstream limitation - RadioControl does not accept a ref.
     ,
     ref: mergedRefs,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current?.querySelector('input[type="radio"]'),
     children: /*#__PURE__*/_jsx(RadioControl, {
       onChange: value => {

package/build-module/validated-form-controls/components/radio-control.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMergeRefs","forwardRef","useRef","ControlWithError","RadioControl","jsx","_jsx","UnforwardedValidatedRadioControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","selected","ref","current","getValidityTarget","querySelector","children","value","ValidatedRadioControl"],"sources":["@wordpress/components/src/validated-form-controls/components/radio-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport RadioControl from '../../radio-control';\nimport type { RadioControlProps } from '../../radio-control/types';\n\ntype Value = RadioControlProps[ 'selected' ];\n\nconst UnforwardedValidatedRadioControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: React.ComponentProps< typeof RadioControl > &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLDivElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.selected );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t// TODO: Upstream limitation - RadioControl does not accept a ref.\n\t\t\tref={ mergedRefs }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () =>\n\t\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t\t'input[type=\"radio\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<RadioControl\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedRadioControl = forwardRef(\n\tUnforwardedValidatedRadioControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,oBAAoB;AACjD,SAASC,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,YAAY,MAAM,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAK/C,MAAMC,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAE0B,CAAC,EAC/BC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,GAAGZ,MAAM,CAAoB,IAAK,CAAC;EAC1D,MAAMa,UAAU,GAAGf,YAAY,CAAE,CAAEa,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGd,MAAM,CAAWU,SAAS,CAACK,QAAS,CAAC;EAEtD,oBACCX,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA;IACnB;IAAA;IACAO,GAAG,EAAGH,UAAY;IAClBN,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIO,QAAQ,CAACG,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KACnBN,iBAAiB,CAACK,OAAO,EAAEE,aAAa,CACvC,qBACD,CACA;IAAAC,QAAA,eAEDhB,IAAA,CAACF,YAAY;MACZM,QAAQ,EAAKa,KAAK,IAAM;QACvBP,QAAQ,CAACG,OAAO,GAAGI,KAAK;QACxBb,QAAQ,GAAIa,KAAM,CAAC;MACpB,CAAG;MAAA,GACEX;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,qBAAqB,GAAGvB,UAAU,CAC9CM,gCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["useMergeRefs","forwardRef","useRef","ControlWithError","RadioControl","jsx","_jsx","UnforwardedValidatedRadioControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","selected","ref","current","getValidityTarget","querySelector","children","value","ValidatedRadioControl"],"sources":["@wordpress/components/src/validated-form-controls/components/radio-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport RadioControl from '../../radio-control';\nimport type { RadioControlProps } from '../../radio-control/types';\n\ntype Value = RadioControlProps[ 'selected' ];\n\nconst UnforwardedValidatedRadioControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: React.ComponentProps< typeof RadioControl > &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLDivElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.selected );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t// TODO: Upstream limitation - RadioControl does not accept a ref.\n\t\t\tref={ mergedRefs }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () =>\n\t\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t\t'input[type=\"radio\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<RadioControl\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedRadioControl = forwardRef(\n\tUnforwardedValidatedRadioControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,oBAAoB;AACjD,SAASC,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,YAAY,MAAM,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAK/C,MAAMC,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAE0B,CAAC,EAC/BC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,GAAGb,MAAM,CAAoB,IAAK,CAAC;EAC1D,MAAMc,UAAU,GAAGhB,YAAY,CAAE,CAAEc,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGf,MAAM,CAAWW,SAAS,CAACK,QAAS,CAAC;EAEtD,oBACCZ,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA;IACnB;IAAA;IACAO,GAAG,EAAGH,UAAY;IAClBP,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACG,OAAQ,CAAC;IACxC,CAAG;IACHV,cAAc,EAAGA,cAAgB;IACjCW,iBAAiB,EAAGA,CAAA,KACnBN,iBAAiB,CAACK,OAAO,EAAEE,aAAa,CACvC,qBACD,CACA;IAAAC,QAAA,eAEDjB,IAAA,CAACF,YAAY;MACZO,QAAQ,EAAKa,KAAK,IAAM;QACvBP,QAAQ,CAACG,OAAO,GAAGI,KAAK;QACxBb,QAAQ,GAAIa,KAAM,CAAC;MACpB,CAAG;MAAA,GACEX;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,qBAAqB,GAAGxB,UAAU,CAC9CM,gCACD,CAAC","ignoreList":[]}

package/build-module/validated-form-controls/components/range-control.js

@@ -12,7 +12,8 @@ import RangeControl from '../../range-control';
 import { jsx as _jsx } from "react/jsx-runtime";
 const UnforwardedValidatedRangeControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -23,9 +24,10 @@ const UnforwardedValidatedRangeControl = ({
   return /*#__PURE__*/_jsx(ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/_jsx(RangeControl, {
       __next40pxDefaultSize: true,

package/build-module/validated-form-controls/components/range-control.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMergeRefs","forwardRef","useRef","ControlWithError","RangeControl","jsx","_jsx","UnforwardedValidatedRangeControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","current","getValidityTarget","children","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedRangeControl"],"sources":["@wordpress/components/src/validated-form-controls/components/range-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport RangeControl from '../../range-control';\nimport type { RangeControlProps } from '../../range-control/types';\n\ntype Value = RangeControlProps[ 'value' ];\n\nconst UnforwardedValidatedRangeControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof RangeControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<RangeControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedRangeControl = forwardRef(\n\tUnforwardedValidatedRangeControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,oBAAoB;AACjD,SAASC,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,YAAY,MAAM,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAK/C,MAAMC,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGZ,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMa,UAAU,GAAGf,YAAY,CAAE,CAAEa,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGd,MAAM,CAAWU,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACCX,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIO,QAAQ,CAACE,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDd,IAAA,CAACF,YAAY;MACZiB,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGR,UAAY;MAClBL,QAAQ,EAAKO,KAAK,IAAM;QACvBD,QAAQ,CAACE,OAAO,GAAGD,KAAK;QACxBP,QAAQ,GAAIO,KAAM,CAAC;MACpB,CAAG;MAAA,GACEL;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,qBAAqB,GAAGvB,UAAU,CAC9CM,gCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["useMergeRefs","forwardRef","useRef","ControlWithError","RangeControl","jsx","_jsx","UnforwardedValidatedRangeControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","current","getValidityTarget","children","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedRangeControl"],"sources":["@wordpress/components/src/validated-form-controls/components/range-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport RangeControl from '../../range-control';\nimport type { RangeControlProps } from '../../range-control/types';\n\ntype Value = RangeControlProps[ 'value' ];\n\nconst UnforwardedValidatedRangeControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof RangeControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<RangeControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedRangeControl = forwardRef(\n\tUnforwardedValidatedRangeControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,oBAAoB;AACjD,SAASC,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,YAAY,MAAM,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAK/C,MAAMC,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGb,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMc,UAAU,GAAGhB,YAAY,CAAE,CAAEc,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGf,MAAM,CAAWW,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACCZ,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACE,OAAQ,CAAC;IACxC,CAAG;IACHT,cAAc,EAAGA,cAAgB;IACjCU,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDf,IAAA,CAACF,YAAY;MACZkB,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGR,UAAY;MAClBL,QAAQ,EAAKO,KAAK,IAAM;QACvBD,QAAQ,CAACE,OAAO,GAAGD,KAAK;QACxBP,QAAQ,GAAIO,KAAM,CAAC;MACpB,CAAG;MAAA,GACEL;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,qBAAqB,GAAGxB,UAAU,CAC9CM,gCACD,CAAC","ignoreList":[]}

package/build-module/validated-form-controls/components/select-control.js

@@ -14,7 +14,8 @@ import SelectControl from '../../select-control';
 import { jsx as _jsx } from "react/jsx-runtime";
 const UnforwardedValidatedSelectControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -25,9 +26,10 @@ const UnforwardedValidatedSelectControl = ({
   return /*#__PURE__*/_jsx(ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/_jsx(SelectControl, {
       __nextHasNoMarginBottom: true,

package/build-module/validated-form-controls/components/select-control.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useRef","useMergeRefs","ControlWithError","SelectControl","jsx","_jsx","UnforwardedValidatedSelectControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","current","getValidityTarget","children","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","ValidatedSelectControl"],"sources":["@wordpress/components/src/validated-form-controls/components/select-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport SelectControl from '../../select-control';\nimport type { ValidatedControlProps } from './types';\nimport type { SelectControlProps as _SelectControlProps } from '../../select-control/types';\n\n// Only support single value selection\ntype SelectControlProps = Omit<\n\t_SelectControlProps,\n\t'multiple' | 'onChange' | 'value'\n> & {\n\tonChange?: ( value: string ) => void;\n\tvalue?: string;\n};\n\ntype Value = SelectControlProps[ 'value' ];\n\nconst UnforwardedValidatedSelectControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof SelectControl >,\n\t\t| '__next40pxDefaultSize'\n\t\t| '__nextHasNoMarginBottom'\n\t\t| 'multiple'\n\t\t| 'onChange'\n\t\t| 'value'\n\t> & {\n\t\tvalue?: string;\n\t\tonChange: ( value: string ) => void;\n\t} & ValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLSelectElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLSelectElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedSelectControl = forwardRef(\n\tUnforwardedValidatedSelectControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;AACvD,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAOC,aAAa,MAAM,sBAAsB;;AAIhD;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAWA,MAAMC,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAW6B,CAAC,EAClCC,YAAqD,KACjD;EACJ,MAAMC,iBAAiB,GAAGb,MAAM,CAAuB,IAAK,CAAC;EAC7D,MAAMc,UAAU,GAAGb,YAAY,CAAE,CAAEW,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGf,MAAM,CAAWW,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACCX,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIO,QAAQ,CAACE,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDd,IAAA,CAACF,aAAa;MACbiB,uBAAuB;MACvBC,qBAAqB;MACrBC,GAAG,EAAGR,UAAY;MAClBL,QAAQ,EAAKO,KAAK,IAAM;QACvBD,QAAQ,CAACE,OAAO,GAAGD,KAAK;QACxBP,QAAQ,GAAIO,KAAM,CAAC;MACpB,CAAG;MAAA,GACEL;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,sBAAsB,GAAGxB,UAAU,CAC/CO,iCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["forwardRef","useRef","useMergeRefs","ControlWithError","SelectControl","jsx","_jsx","UnforwardedValidatedSelectControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","current","getValidityTarget","children","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","ValidatedSelectControl"],"sources":["@wordpress/components/src/validated-form-controls/components/select-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport SelectControl from '../../select-control';\nimport type { ValidatedControlProps } from './types';\nimport type { SelectControlProps as _SelectControlProps } from '../../select-control/types';\n\n// Only support single value selection\ntype SelectControlProps = Omit<\n\t_SelectControlProps,\n\t'multiple' | 'onChange' | 'value'\n> & {\n\tonChange?: ( value: string ) => void;\n\tvalue?: string;\n};\n\ntype Value = SelectControlProps[ 'value' ];\n\nconst UnforwardedValidatedSelectControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof SelectControl >,\n\t\t| '__next40pxDefaultSize'\n\t\t| '__nextHasNoMarginBottom'\n\t\t| 'multiple'\n\t\t| 'onChange'\n\t\t| 'value'\n\t> & {\n\t\tvalue?: string;\n\t\tonChange: ( value: string ) => void;\n\t} & ValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLSelectElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLSelectElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedSelectControl = forwardRef(\n\tUnforwardedValidatedSelectControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;AACvD,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAOC,aAAa,MAAM,sBAAsB;;AAIhD;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAWA,MAAMC,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAW6B,CAAC,EAClCC,YAAqD,KACjD;EACJ,MAAMC,iBAAiB,GAAGd,MAAM,CAAuB,IAAK,CAAC;EAC7D,MAAMe,UAAU,GAAGd,YAAY,CAAE,CAAEY,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGhB,MAAM,CAAWY,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACCZ,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACE,OAAQ,CAAC;IACxC,CAAG;IACHT,cAAc,EAAGA,cAAgB;IACjCU,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDf,IAAA,CAACF,aAAa;MACbkB,uBAAuB;MACvBC,qBAAqB;MACrBC,GAAG,EAAGR,UAAY;MAClBL,QAAQ,EAAKO,KAAK,IAAM;QACvBD,QAAQ,CAACE,OAAO,GAAGD,KAAK;QACxBP,QAAQ,GAAIO,KAAM,CAAC;MACpB,CAAG;MAAA,GACEL;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,sBAAsB,GAAGzB,UAAU,CAC/CO,iCACD,CAAC","ignoreList":[]}

package/build-module/validated-form-controls/components/text-control.js

@@ -12,7 +12,8 @@ import TextControl from '../../text-control';
 import { jsx as _jsx } from "react/jsx-runtime";
 const UnforwardedValidatedTextControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -23,9 +24,10 @@ const UnforwardedValidatedTextControl = ({
   return /*#__PURE__*/_jsx(ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/_jsx(TextControl, {
       __next40pxDefaultSize: true,

package/build-module/validated-form-controls/components/text-control.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMergeRefs","forwardRef","useRef","ControlWithError","TextControl","jsx","_jsx","UnforwardedValidatedTextControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","current","getValidityTarget","children","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedTextControl"],"sources":["@wordpress/components/src/validated-form-controls/components/text-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport TextControl from '../../text-control';\nimport type { TextControlProps } from '../../text-control/types';\n\ntype Value = TextControlProps[ 'value' ];\n\nconst UnforwardedValidatedTextControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof TextControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedTextControl = forwardRef(\n\tUnforwardedValidatedTextControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,oBAAoB;AACjD,SAASC,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,WAAW,MAAM,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAK7C,MAAMC,+BAA+B,GAAGA,CACvC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGZ,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMa,UAAU,GAAGf,YAAY,CAAE,CAAEa,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGd,MAAM,CAAWU,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACCX,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIO,QAAQ,CAACE,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDd,IAAA,CAACF,WAAW;MACXiB,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGR,UAAY;MAClBL,QAAQ,EAAKO,KAAK,IAAM;QACvBD,QAAQ,CAACE,OAAO,GAAGD,KAAK;QACxBP,QAAQ,GAAIO,KAAM,CAAC;MACpB,CAAG;MAAA,GACEL;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,oBAAoB,GAAGvB,UAAU,CAC7CM,+BACD,CAAC","ignoreList":[]}
+{"version":3,"names":["useMergeRefs","forwardRef","useRef","ControlWithError","TextControl","jsx","_jsx","UnforwardedValidatedTextControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","current","getValidityTarget","children","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedTextControl"],"sources":["@wordpress/components/src/validated-form-controls/components/text-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport TextControl from '../../text-control';\nimport type { TextControlProps } from '../../text-control/types';\n\ntype Value = TextControlProps[ 'value' ];\n\nconst UnforwardedValidatedTextControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof TextControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedTextControl = forwardRef(\n\tUnforwardedValidatedTextControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,oBAAoB;AACjD,SAASC,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,WAAW,MAAM,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAK7C,MAAMC,+BAA+B,GAAGA,CACvC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGb,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMc,UAAU,GAAGhB,YAAY,CAAE,CAAEc,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGf,MAAM,CAAWW,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACCZ,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACE,OAAQ,CAAC;IACxC,CAAG;IACHT,cAAc,EAAGA,cAAgB;IACjCU,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDf,IAAA,CAACF,WAAW;MACXkB,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGR,UAAY;MAClBL,QAAQ,EAAKO,KAAK,IAAM;QACvBD,QAAQ,CAACE,OAAO,GAAGD,KAAK;QACxBP,QAAQ,GAAIO,KAAM,CAAC;MACpB,CAAG;MAAA,GACEL;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,oBAAoB,GAAGxB,UAAU,CAC7CM,+BACD,CAAC","ignoreList":[]}

package/build-module/validated-form-controls/components/textarea-control.js

@@ -12,7 +12,8 @@ import TextareaControl from '../../textarea-control';
 import { jsx as _jsx } from "react/jsx-runtime";
 const UnforwardedValidatedTextareaControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -23,9 +24,10 @@ const UnforwardedValidatedTextareaControl = ({
   return /*#__PURE__*/_jsx(ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/_jsx(TextareaControl, {
       __nextHasNoMarginBottom: true,

package/build-module/validated-form-controls/components/textarea-control.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useRef","useMergeRefs","ControlWithError","TextareaControl","jsx","_jsx","UnforwardedValidatedTextareaControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","current","getValidityTarget","children","__nextHasNoMarginBottom","ref","ValidatedTextareaControl"],"sources":["@wordpress/components/src/validated-form-controls/components/textarea-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport TextareaControl from '../../textarea-control';\nimport type { TextareaControlProps } from '../../textarea-control/types';\n\ntype Value = TextareaControlProps[ 'value' ];\n\nconst UnforwardedValidatedTextareaControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof TextareaControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLTextAreaElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLTextAreaElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<TextareaControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedTextareaControl = forwardRef(\n\tUnforwardedValidatedTextareaControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;AACvD,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,eAAe,MAAM,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKrD,MAAMC,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAuD,KACnD;EACJ,MAAMC,iBAAiB,GAAGb,MAAM,CAAyB,IAAK,CAAC;EAC/D,MAAMc,UAAU,GAAGb,YAAY,CAAE,CAAEW,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGf,MAAM,CAAWW,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACCX,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIO,QAAQ,CAACE,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDd,IAAA,CAACF,eAAe;MACfiB,uBAAuB;MACvBC,GAAG,EAAGP,UAAY;MAClBL,QAAQ,EAAKO,KAAK,IAAM;QACvBD,QAAQ,CAACE,OAAO,GAAGD,KAAK;QACxBP,QAAQ,GAAIO,KAAM,CAAC;MACpB,CAAG;MAAA,GACEL;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMW,wBAAwB,GAAGvB,UAAU,CACjDO,mCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["forwardRef","useRef","useMergeRefs","ControlWithError","TextareaControl","jsx","_jsx","UnforwardedValidatedTextareaControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","current","getValidityTarget","children","__nextHasNoMarginBottom","ref","ValidatedTextareaControl"],"sources":["@wordpress/components/src/validated-form-controls/components/textarea-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport TextareaControl from '../../textarea-control';\nimport type { TextareaControlProps } from '../../textarea-control/types';\n\ntype Value = TextareaControlProps[ 'value' ];\n\nconst UnforwardedValidatedTextareaControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof TextareaControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLTextAreaElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLTextAreaElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<TextareaControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedTextareaControl = forwardRef(\n\tUnforwardedValidatedTextareaControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;AACvD,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,eAAe,MAAM,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKrD,MAAMC,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAuD,KACnD;EACJ,MAAMC,iBAAiB,GAAGd,MAAM,CAAyB,IAAK,CAAC;EAC/D,MAAMe,UAAU,GAAGd,YAAY,CAAE,CAAEY,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGhB,MAAM,CAAWY,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACCZ,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACE,OAAQ,CAAC;IACxC,CAAG;IACHT,cAAc,EAAGA,cAAgB;IACjCU,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDf,IAAA,CAACF,eAAe;MACfkB,uBAAuB;MACvBC,GAAG,EAAGP,UAAY;MAClBL,QAAQ,EAAKO,KAAK,IAAM;QACvBD,QAAQ,CAACE,OAAO,GAAGD,KAAK;QACxBP,QAAQ,GAAIO,KAAM,CAAC;MACpB,CAAG;MAAA,GACEL;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMW,wBAAwB,GAAGxB,UAAU,CACjDO,mCACD,CAAC","ignoreList":[]}

package/build-module/validated-form-controls/components/toggle-control.js

@@ -14,7 +14,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 
 const UnforwardedValidatedToggleControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -33,9 +34,10 @@ const UnforwardedValidatedToggleControl = ({
   return /*#__PURE__*/_jsx(ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/_jsx(ToggleControl, {
       __nextHasNoMarginBottom: true,

package/build-module/validated-form-controls/components/toggle-control.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useRef","useEffect","useMergeRefs","ControlWithError","ToggleControl","jsx","_jsx","UnforwardedValidatedToggleControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","checked","current","getValidityTarget","children","__nextHasNoMarginBottom","ref","value","ValidatedToggleControl"],"sources":["@wordpress/components/src/validated-form-controls/components/toggle-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef, useEffect } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport ToggleControl from '../../toggle-control';\nimport type { ToggleControlProps } from '../../toggle-control/types';\n\ntype Value = ToggleControlProps[ 'checked' ];\n\n// TODO: Should we customize the default `missingValue` message? It says to \"check this box\".\n\nconst UnforwardedValidatedToggleControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ToggleControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.checked );\n\n\t// TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n\t// so we need to set it manually.\n\tuseEffect( () => {\n\t\tif ( validityTargetRef.current ) {\n\t\t\tvalidityTargetRef.current.required = required ?? false;\n\t\t}\n\t}, [ required ] );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedToggleControl = forwardRef(\n\tUnforwardedValidatedToggleControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AAClE,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,aAAa,MAAM,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKjD;;AAEA,MAAMC,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGd,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMe,UAAU,GAAGb,YAAY,CAAE,CAAEW,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGhB,MAAM,CAAWY,SAAS,CAACK,OAAQ,CAAC;;EAErD;EACA;EACAhB,SAAS,CAAE,MAAM;IAChB,IAAKa,iBAAiB,CAACI,OAAO,EAAG;MAChCJ,iBAAiB,CAACI,OAAO,CAACV,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACvD;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB,oBACCF,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIO,QAAQ,CAACE,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDd,IAAA,CAACF,aAAa;MACbiB,uBAAuB;MACvBC,GAAG,EAAGP,UAAY;MAClBL,QAAQ,EAAKa,KAAK,IAAM;QACvBP,QAAQ,CAACE,OAAO,GAAGK,KAAK;QACxBb,QAAQ,GAAIa,KAAM,CAAC;MACpB,CAAG;MAAA,GACEX;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,sBAAsB,GAAGzB,UAAU,CAC/CQ,iCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["forwardRef","useRef","useEffect","useMergeRefs","ControlWithError","ToggleControl","jsx","_jsx","UnforwardedValidatedToggleControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","checked","current","getValidityTarget","children","__nextHasNoMarginBottom","ref","value","ValidatedToggleControl"],"sources":["@wordpress/components/src/validated-form-controls/components/toggle-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef, useEffect } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport ToggleControl from '../../toggle-control';\nimport type { ToggleControlProps } from '../../toggle-control/types';\n\ntype Value = ToggleControlProps[ 'checked' ];\n\n// TODO: Should we customize the default `missingValue` message? It says to \"check this box\".\n\nconst UnforwardedValidatedToggleControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ToggleControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.checked );\n\n\t// TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n\t// so we need to set it manually.\n\tuseEffect( () => {\n\t\tif ( validityTargetRef.current ) {\n\t\t\tvalidityTargetRef.current.required = required ?? false;\n\t\t}\n\t}, [ required ] );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedToggleControl = forwardRef(\n\tUnforwardedValidatedToggleControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AAClE,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,aAAa,MAAM,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKjD;;AAEA,MAAMC,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGf,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMgB,UAAU,GAAGd,YAAY,CAAE,CAAEY,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGjB,MAAM,CAAWa,SAAS,CAACK,OAAQ,CAAC;;EAErD;EACA;EACAjB,SAAS,CAAE,MAAM;IAChB,IAAKc,iBAAiB,CAACI,OAAO,EAAG;MAChCJ,iBAAiB,CAACI,OAAO,CAACX,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACvD;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB,oBACCF,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACE,OAAQ,CAAC;IACxC,CAAG;IACHT,cAAc,EAAGA,cAAgB;IACjCU,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDf,IAAA,CAACF,aAAa;MACbkB,uBAAuB;MACvBC,GAAG,EAAGP,UAAY;MAClBL,QAAQ,EAAKa,KAAK,IAAM;QACvBP,QAAQ,CAACE,OAAO,GAAGK,KAAK;QACxBb,QAAQ,GAAIa,KAAM,CAAC;MACpB,CAAG;MAAA,GACEX;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,sBAAsB,GAAG1B,UAAU,CAC/CQ,iCACD,CAAC","ignoreList":[]}

package/build-module/validated-form-controls/components/toggle-group-control.js

@@ -11,7 +11,8 @@ import { ToggleGroupControl } from '../../toggle-group-control';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const UnforwardedValidatedToggleGroupControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -24,9 +25,10 @@ const UnforwardedValidatedToggleGroupControl = ({
     children: [/*#__PURE__*/_jsx(ControlWithError, {
       required: required,
       markWhenOptional: markWhenOptional,
-      customValidator: () => {
-        return customValidator?.(valueRef.current);
+      onValidate: () => {
+        return onValidate?.(valueRef.current);
       },
+      customValidity: customValidity,
       getValidityTarget: () => validityTargetRef.current,
       children: /*#__PURE__*/_jsx(ToggleGroupControl, {
         __nextHasNoMarginBottom: true,

package/build-module/validated-form-controls/components/toggle-group-control.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useId","useRef","ControlWithError","ToggleGroupControl","jsx","_jsx","jsxs","_jsxs","UnforwardedValidatedToggleGroupControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","valueRef","value","nameAttr","className","children","current","getValidityTarget","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","type","checked","tabIndex","name","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedToggleGroupControl"],"sources":["@wordpress/components/src/validated-form-controls/components/toggle-group-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useId, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport type { ToggleGroupControlProps } from '../../toggle-group-control/types';\n\ntype Value = ToggleGroupControlProps[ 'value' ];\n\nconst UnforwardedValidatedToggleGroupControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ToggleGroupControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\tconst nameAttr = useId();\n\n\treturn (\n\t\t<div className=\"components-validated-control__wrapper-with-error-delegate\">\n\t\t\t<ControlWithError\n\t\t\t\trequired={ required }\n\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\tcustomValidator={ () => {\n\t\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t\t} }\n\t\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t\t>\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\t// TODO: Upstream limitation - In uncontrolled mode, starting from an undefined value then\n\t\t\t\t\t// setting a value has a visual bug.\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\t\tonChange?.( value );\n\t\t\t\t\t} }\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t/>\n\t\t\t</ControlWithError>\n\t\t\t<input\n\t\t\t\tclassName=\"components-validated-control__error-delegate\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tref={ validityTargetRef }\n\t\t\t\trequired={ required }\n\t\t\t\tchecked={ restProps.value !== null }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\t// A name attribute is needed for the `required` behavior to work.\n\t\t\t\tname={ nameAttr }\n\t\t\t\tonChange={ () => {} }\n\t\t\t\tonFocus={ ( e ) => {\n\t\t\t\t\te.target.previousElementSibling\n\t\t\t\t\t\t?.querySelector< HTMLButtonElement | HTMLInputElement >(\n\t\t\t\t\t\t\t'[data-active-item=\"true\"]'\n\t\t\t\t\t\t)\n\t\t\t\t\t\t?.focus();\n\t\t\t\t} }\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport const ValidatedToggleGroupControl = forwardRef(\n\tUnforwardedValidatedToggleGroupControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,KAAK,EAAEC,MAAM,QAAQ,oBAAoB;;AAE9D;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,SAASC,kBAAkB,QAAQ,4BAA4B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAKhE,MAAMC,sCAAsC,GAAGA,CAC9C;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGd,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMe,QAAQ,GAAGf,MAAM,CAAWY,SAAS,CAACI,KAAM,CAAC;EAEnD,MAAMC,QAAQ,GAAGlB,KAAK,CAAC,CAAC;EAExB,oBACCO,KAAA;IAAKY,SAAS,EAAC,2DAA2D;IAAAC,QAAA,gBACzEf,IAAA,CAACH,gBAAgB;MAChBO,QAAQ,EAAGA,QAAU;MACrBG,gBAAgB,EAAGA,gBAAkB;MACrCF,eAAe,EAAGA,CAAA,KAAM;QACvB,OAAOA,eAAe,GAAIM,QAAQ,CAACK,OAAQ,CAAC;MAC7C,CAAG;MACHC,iBAAiB,EAAGA,CAAA,KAAMP,iBAAiB,CAACM,OAAS;MAAAD,QAAA,eAErDf,IAAA,CAACF,kBAAkB;QAClBoB,uBAAuB;QACvBC,qBAAqB;QACrBC,GAAG,EAAGX;QACN;QACA;QAAA;QACAH,QAAQ,EAAKM,KAAK,IAAM;UACvBD,QAAQ,CAACK,OAAO,GAAGJ,KAAK;UACxBN,QAAQ,GAAIM,KAAM,CAAC;QACpB,CAAG;QAAA,GACEJ;MAAS,CACd;IAAC,CACe,CAAC,eACnBR,IAAA;MACCc,SAAS,EAAC,8CAA8C;MACxDO,IAAI,EAAC,OAAO;MACZD,GAAG,EAAGV,iBAAmB;MACzBN,QAAQ,EAAGA,QAAU;MACrBkB,OAAO,EAAGd,SAAS,CAACI,KAAK,KAAK,IAAM;MACpCW,QAAQ,EAAG,CAAC;MACZ;MAAA;MACAC,IAAI,EAAGX,QAAU;MACjBP,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrBmB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,2BACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX;IAAG,CACH,CAAC;EAAA,CACE,CAAC;AAER,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGrC,UAAU,CACpDS,sCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["forwardRef","useId","useRef","ControlWithError","ToggleGroupControl","jsx","_jsx","jsxs","_jsxs","UnforwardedValidatedToggleGroupControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","valueRef","value","nameAttr","className","children","current","getValidityTarget","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","type","checked","tabIndex","name","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedToggleGroupControl"],"sources":["@wordpress/components/src/validated-form-controls/components/toggle-group-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useId, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport type { ToggleGroupControlProps } from '../../toggle-group-control/types';\n\ntype Value = ToggleGroupControlProps[ 'value' ];\n\nconst UnforwardedValidatedToggleGroupControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ToggleGroupControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\tconst nameAttr = useId();\n\n\treturn (\n\t\t<div className=\"components-validated-control__wrapper-with-error-delegate\">\n\t\t\t<ControlWithError\n\t\t\t\trequired={ required }\n\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\tonValidate={ () => {\n\t\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t\t} }\n\t\t\t\tcustomValidity={ customValidity }\n\t\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t\t>\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\t// TODO: Upstream limitation - In uncontrolled mode, starting from an undefined value then\n\t\t\t\t\t// setting a value has a visual bug.\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\t\tonChange?.( value );\n\t\t\t\t\t} }\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t/>\n\t\t\t</ControlWithError>\n\t\t\t<input\n\t\t\t\tclassName=\"components-validated-control__error-delegate\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tref={ validityTargetRef }\n\t\t\t\trequired={ required }\n\t\t\t\tchecked={ restProps.value !== null }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\t// A name attribute is needed for the `required` behavior to work.\n\t\t\t\tname={ nameAttr }\n\t\t\t\tonChange={ () => {} }\n\t\t\t\tonFocus={ ( e ) => {\n\t\t\t\t\te.target.previousElementSibling\n\t\t\t\t\t\t?.querySelector< HTMLButtonElement | HTMLInputElement >(\n\t\t\t\t\t\t\t'[data-active-item=\"true\"]'\n\t\t\t\t\t\t)\n\t\t\t\t\t\t?.focus();\n\t\t\t\t} }\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport const ValidatedToggleGroupControl = forwardRef(\n\tUnforwardedValidatedToggleGroupControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,KAAK,EAAEC,MAAM,QAAQ,oBAAoB;;AAE9D;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,SAASC,kBAAkB,QAAQ,4BAA4B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAKhE,MAAMC,sCAAsC,GAAGA,CAC9C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGf,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMgB,QAAQ,GAAGhB,MAAM,CAAWa,SAAS,CAACI,KAAM,CAAC;EAEnD,MAAMC,QAAQ,GAAGnB,KAAK,CAAC,CAAC;EAExB,oBACCO,KAAA;IAAKa,SAAS,EAAC,2DAA2D;IAAAC,QAAA,gBACzEhB,IAAA,CAACH,gBAAgB;MAChBO,QAAQ,EAAGA,QAAU;MACrBI,gBAAgB,EAAGA,gBAAkB;MACrCH,UAAU,EAAGA,CAAA,KAAM;QAClB,OAAOA,UAAU,GAAIO,QAAQ,CAACK,OAAQ,CAAC;MACxC,CAAG;MACHX,cAAc,EAAGA,cAAgB;MACjCY,iBAAiB,EAAGA,CAAA,KAAMP,iBAAiB,CAACM,OAAS;MAAAD,QAAA,eAErDhB,IAAA,CAACF,kBAAkB;QAClBqB,uBAAuB;QACvBC,qBAAqB;QACrBC,GAAG,EAAGX;QACN;QACA;QAAA;QACAH,QAAQ,EAAKM,KAAK,IAAM;UACvBD,QAAQ,CAACK,OAAO,GAAGJ,KAAK;UACxBN,QAAQ,GAAIM,KAAM,CAAC;QACpB,CAAG;QAAA,GACEJ;MAAS,CACd;IAAC,CACe,CAAC,eACnBT,IAAA;MACCe,SAAS,EAAC,8CAA8C;MACxDO,IAAI,EAAC,OAAO;MACZD,GAAG,EAAGV,iBAAmB;MACzBP,QAAQ,EAAGA,QAAU;MACrBmB,OAAO,EAAGd,SAAS,CAACI,KAAK,KAAK,IAAM;MACpCW,QAAQ,EAAG,CAAC;MACZ;MAAA;MACAC,IAAI,EAAGX,QAAU;MACjBP,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrBmB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,2BACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX;IAAG,CACH,CAAC;EAAA,CACE,CAAC;AAER,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGtC,UAAU,CACpDS,sCACD,CAAC","ignoreList":[]}

package/build-module/validated-form-controls/components/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/validated-form-controls/components/types.ts"],"sourcesContent":["export type ValidatedControlProps< V > = {\n\t/**\n\t * Whether the control is required.\n\t * @default false\n\t */\n\trequired?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t * @default false\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * A function that returns a custom validity message when applicable. This error message will be applied to the\n\t * underlying element using the native [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\n\t * This means the custom validator will be run _in addition_ to any other HTML attribute-based validation, and\n\t * will be prioritized over any existing validity messages dictated by the HTML attributes.\n\t * An empty string or `undefined` return value will clear any existing custom validity message.\n\t *\n\t * Make sure you don't programatically pass a value (such as an initial value) to the control component\n\t * that fails this validator, because the validator will only run for user-initiated changes.\n\t *\n\t * Always prefer using standard HTML attributes like `required` and `min`/`max` over custom validators\n\t * when possible, as they are simpler and have localized error messages built in.\n\t */\n\t// TODO: Technically, we could add an optional `customValidity` string prop so the consumer can set\n\t// an error message at any point in time. We should wait until we have a use case though.\n\tcustomValidator?: ( currentValue: V ) => string | void;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/validated-form-controls/components/types.ts"],"sourcesContent":["export type ValidatedControlProps< V > = {\n\t/**\n\t * Whether the control is required.\n\t * @default false\n\t */\n\trequired?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t * @default false\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * Optional callback to run when the input should be validated. Use this to set\n\t * a `customValidity` as necessary.\n\t *\n\t * Always prefer using standard HTML attributes like `required` and `min`/`max` over\n\t * custom validators when possible, as they are simpler and have localized error messages built in.\n\t */\n\tonValidate?: ( currentValue: V ) => void;\n\t/**\n\t * Show a custom message based on the validation status.\n\t *\n\t * - When `type` is `invalid`, the message will be applied to the underlying element using the\n\t * native [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\n\t * This means the custom message will be prioritized over any existing validity messages\n\t * triggered by HTML attribute-based validation.\n\t * - When `type` is `validating` or `valid`, the custom validity message of the underlying element\n\t * will be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\n\t * the message will be presented as a status indicator rather than an error. These indicators are intended\n\t * for asynchronous validation calls that may take more than 1 second to complete.\n\t * Otherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`.\n\t */\n\tcustomValidity?: {\n\t\ttype: 'validating' | 'valid' | 'invalid';\n\t\tmessage: string;\n\t};\n};\n"],"mappings":"","ignoreList":[]}

package/build-module/validated-form-controls/control-with-error.js

@@ -1,19 +1,15 @@
 /**
  * WordPress dependencies
  */
+import { usePrevious } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { error } from '@wordpress/icons';
-
-/**
- * External dependencies
- */
 import { cloneElement, forwardRef, useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
-import Icon from '../icon';
+import { ValidityIndicator } from './validity-indicator';
 import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 function appendRequiredIndicator(label, required, markWhenOptional) {
   if (required && !markWhenOptional) {
@@ -41,12 +37,15 @@ function appendRequiredIndicator(label, required, markWhenOptional) {
 function UnforwardedControlWithError({
   required,
   markWhenOptional,
-  customValidator,
+  onValidate,
+  customValidity,
   getValidityTarget,
   children
 }, forwardedRef) {
   const [errorMessage, setErrorMessage] = useState();
+  const [statusMessage, setStatusMessage] = useState();
   const [isTouched, setIsTouched] = useState(false);
+  const previousCustomValidityType = usePrevious(customValidity?.type);
 
   // Ensure that error messages are visible after user attemps to submit a form
   // with multiple invalid fields.
@@ -58,27 +57,66 @@ function UnforwardedControlWithError({
       validityTarget?.removeEventListener('invalid', showValidationMessage);
     };
   });
-  const validate = () => {
-    const message = customValidator?.();
+  useEffect(() => {
+    if (!isTouched) {
+      return;
+    }
     const validityTarget = getValidityTarget();
-    validityTarget?.setCustomValidity(message !== null && message !== void 0 ? message : '');
-    setErrorMessage(validityTarget?.validationMessage);
-  };
+    if (!customValidity?.type) {
+      validityTarget?.setCustomValidity('');
+      setErrorMessage(validityTarget?.validationMessage);
+      setStatusMessage(undefined);
+      return;
+    }
+    switch (customValidity.type) {
+      case 'validating':
+        {
+          // Wait before showing a validating state.
+          const timer = setTimeout(() => {
+            validityTarget?.setCustomValidity('');
+            setErrorMessage(undefined);
+            setStatusMessage({
+              type: 'validating',
+              message: customValidity.message
+            });
+          }, 1000);
+          return () => clearTimeout(timer);
+        }
+      case 'valid':
+        {
+          // Ensures that we wait for any async responses before showing
+          // a synchronously valid state.
+          if (previousCustomValidityType === 'valid') {
+            break;
+          }
+          validityTarget?.setCustomValidity('');
+          setErrorMessage(validityTarget?.validationMessage);
+          setStatusMessage({
+            type: 'valid',
+            message: customValidity.message
+          });
+          break;
+        }
+      case 'invalid':
+        {
+          var _customValidity$messa;
+          validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : '');
+          setErrorMessage(validityTarget?.validationMessage);
+          setStatusMessage(undefined);
+          break;
+        }
+    }
+  }, [isTouched, customValidity?.type, customValidity?.message, getValidityTarget, previousCustomValidityType]);
   const onBlur = event => {
+    if (isTouched) {
+      return;
+    }
+
     // Only consider "blurred from the component" if focus has fully left the wrapping div.
     // This prevents unnecessary blurs from components with multiple focusable elements.
     if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
       setIsTouched(true);
-      const validityTarget = getValidityTarget();
-
-      // Prevents a double flash of the native error tooltip when the control is already showing one.
-      if (!validityTarget?.validity.valid) {
-        if (!errorMessage) {
-          setErrorMessage(validityTarget?.validationMessage);
-        }
-        return;
-      }
-      validate();
+      onValidate?.();
     }
   };
   const onChange = (...args) => {
@@ -87,14 +125,14 @@ function UnforwardedControlWithError({
     // Only validate incrementally if the field has blurred at least once,
     // or currently has an error message.
     if (isTouched || errorMessage) {
-      validate();
+      onValidate?.();
     }
   };
   const onKeyDown = event => {
     // Ensures that custom validators are triggered when the user submits by pressing Enter,
     // without ever blurring the control.
     if (event.key === 'Enter') {
-      validate();
+      onValidate?.();
     }
   };
   return (
@@ -110,17 +148,15 @@ function UnforwardedControlWithError({
         label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
         onChange,
         required
-      }), /*#__PURE__*/_jsx("div", {
+      }), /*#__PURE__*/_jsxs("div", {
         "aria-live": "polite",
-        children: errorMessage && /*#__PURE__*/_jsxs("p", {
-          className: "components-validated-control__error",
-          children: [/*#__PURE__*/_jsx(Icon, {
-            className: "components-validated-control__error-icon",
-            icon: error,
-            size: 16,
-            fill: "currentColor"
-          }), errorMessage]
-        })
+        children: [errorMessage && /*#__PURE__*/_jsx(ValidityIndicator, {
+          type: "invalid",
+          message: errorMessage
+        }), !errorMessage && statusMessage && /*#__PURE__*/_jsx(ValidityIndicator, {
+          type: statusMessage.type,
+          message: statusMessage.message
+        })]
       })]
     })
   );

package/build-module/validated-form-controls/control-with-error.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","error","cloneElement","forwardRef","useEffect","useState","withIgnoreIMEEvents","Icon","Fragment","_Fragment","jsxs","_jsxs","jsx","_jsx","appendRequiredIndicator","label","required","markWhenOptional","children","UnforwardedControlWithError","customValidator","getValidityTarget","forwardedRef","errorMessage","setErrorMessage","isTouched","setIsTouched","validityTarget","showValidationMessage","validationMessage","addEventListener","removeEventListener","validate","message","setCustomValidity","onBlur","event","relatedTarget","currentTarget","contains","validity","valid","onChange","args","props","onKeyDown","key","className","ref","icon","size","fill","ControlWithError"],"sources":["@wordpress/components/src/validated-form-controls/control-with-error.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { error } from '@wordpress/icons';\n\n/**\n * External dependencies\n */\nimport {\n\tcloneElement,\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\nimport Icon from '../icon';\n\nfunction appendRequiredIndicator(\n\tlabel: React.ReactNode,\n\trequired: boolean | undefined,\n\tmarkWhenOptional: boolean | undefined\n) {\n\tif ( required && ! markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Required' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\tif ( ! required && markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Optional' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\treturn label;\n}\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\ntype ValidityTarget =\n\t| HTMLFieldSetElement\n\t| HTMLInputElement\n\t| HTMLSelectElement\n\t| HTMLTextAreaElement;\n\nfunction UnforwardedControlWithError< C extends React.ReactElement >(\n\t{\n\t\trequired,\n\t\tmarkWhenOptional,\n\t\tcustomValidator,\n\t\tgetValidityTarget,\n\t\tchildren,\n\t}: {\n\t\t/**\n\t\t * Whether the control is required.\n\t\t */\n\t\trequired?: boolean;\n\t\t/**\n\t\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t\t */\n\t\tmarkWhenOptional?: boolean;\n\t\t/**\n\t\t * A function that returns a custom validity message when applicable.\n\t\t *\n\t\t * This message will be applied to the element returned by `getValidityTarget`.\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity\n\t\t */\n\t\tcustomValidator?: () => string | void;\n\t\t/**\n\t\t * A function that returns the actual element on which the validity data should be applied.\n\t\t */\n\t\tgetValidityTarget: () => ValidityTarget | null | undefined;\n\t\t/**\n\t\t * The control component to apply validation to.\n\t\t */\n\t\tchildren: C;\n\t},\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst [ errorMessage, setErrorMessage ] = useState< string | undefined >();\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\n\t// Ensure that error messages are visible after user attemps to submit a form\n\t// with multiple invalid fields.\n\tuseEffect( () => {\n\t\tconst validityTarget = getValidityTarget();\n\t\tconst showValidationMessage = () =>\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\tvalidityTarget?.addEventListener( 'invalid', showValidationMessage );\n\n\t\treturn () => {\n\t\t\tvalidityTarget?.removeEventListener(\n\t\t\t\t'invalid',\n\t\t\t\tshowValidationMessage\n\t\t\t);\n\t\t};\n\t} );\n\n\tconst validate = () => {\n\t\tconst message = customValidator?.();\n\t\tconst validityTarget = getValidityTarget();\n\n\t\tvalidityTarget?.setCustomValidity( message ?? '' );\n\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t};\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\t// Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n\t\t// This prevents unnecessary blurs from components with multiple focusable elements.\n\t\tif (\n\t\t\t! event.relatedTarget ||\n\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t) {\n\t\t\tsetIsTouched( true );\n\n\t\t\tconst validityTarget = getValidityTarget();\n\n\t\t\t// Prevents a double flash of the native error tooltip when the control is already showing one.\n\t\t\tif ( ! validityTarget?.validity.valid ) {\n\t\t\t\tif ( ! errorMessage ) {\n\t\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tvalidate();\n\t\t}\n\t};\n\n\tconst onChange = ( ...args: unknown[] ) => {\n\t\tchildren.props.onChange?.( ...args );\n\n\t\t// Only validate incrementally if the field has blurred at least once,\n\t\t// or currently has an error message.\n\t\tif ( isTouched || errorMessage ) {\n\t\t\tvalidate();\n\t\t}\n\t};\n\n\tconst onKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t// Ensures that custom validators are triggered when the user submits by pressing Enter,\n\t\t// without ever blurring the control.\n\t\tif ( event.key === 'Enter' ) {\n\t\t\tvalidate();\n\t\t}\n\t};\n\n\treturn (\n\t\t// Disable reason: Just listening to a bubbled event, not for interaction.\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"components-validated-control\"\n\t\t\tref={ forwardedRef }\n\t\t\tonBlur={ onBlur }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( onKeyDown ) }\n\t\t>\n\t\t\t{ cloneElement( children, {\n\t\t\t\tlabel: appendRequiredIndicator(\n\t\t\t\t\tchildren.props.label,\n\t\t\t\t\trequired,\n\t\t\t\t\tmarkWhenOptional\n\t\t\t\t),\n\t\t\t\tonChange,\n\t\t\t\trequired,\n\t\t\t} ) }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ errorMessage && (\n\t\t\t\t\t<p className=\"components-validated-control__error\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-validated-control__error-icon\"\n\t\t\t\t\t\t\ticon={ error }\n\t\t\t\t\t\t\tsize={ 16 }\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ errorMessage }\n\t\t\t\t\t</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport const ControlWithError = forwardRef( UnforwardedControlWithError );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["usePrevious","__","cloneElement","forwardRef","useEffect","useState","withIgnoreIMEEvents","ValidityIndicator","Fragment","_Fragment","jsxs","_jsxs","jsx","_jsx","appendRequiredIndicator","label","required","markWhenOptional","children","UnforwardedControlWithError","onValidate","customValidity","getValidityTarget","forwardedRef","errorMessage","setErrorMessage","statusMessage","setStatusMessage","isTouched","setIsTouched","previousCustomValidityType","type","validityTarget","showValidationMessage","validationMessage","addEventListener","removeEventListener","setCustomValidity","undefined","timer","setTimeout","message","clearTimeout","_customValidity$messa","onBlur","event","relatedTarget","currentTarget","contains","onChange","args","props","onKeyDown","key","className","ref","ControlWithError"],"sources":["@wordpress/components/src/validated-form-controls/control-with-error.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tcloneElement,\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport type { ValidatedControlProps } from './components/types';\nimport { ValidityIndicator } from './validity-indicator';\n\nfunction appendRequiredIndicator(\n\tlabel: React.ReactNode,\n\trequired: boolean | undefined,\n\tmarkWhenOptional: boolean | undefined\n) {\n\tif ( required && ! markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Required' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\tif ( ! required && markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Optional' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\treturn label;\n}\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\ntype ValidityTarget =\n\t| HTMLFieldSetElement\n\t| HTMLInputElement\n\t| HTMLSelectElement\n\t| HTMLTextAreaElement;\n\nfunction UnforwardedControlWithError< C extends React.ReactElement >(\n\t{\n\t\trequired,\n\t\tmarkWhenOptional,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tgetValidityTarget,\n\t\tchildren,\n\t}: {\n\t\t/**\n\t\t * Whether the control is required.\n\t\t */\n\t\trequired?: boolean;\n\t\t/**\n\t\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t\t */\n\t\tmarkWhenOptional?: boolean;\n\t\t/**\n\t\t * The callback to run when the input should be validated.\n\t\t */\n\t\tonValidate?: () => void;\n\t\tcustomValidity?: ValidatedControlProps< unknown >[ 'customValidity' ];\n\t\t/**\n\t\t * A function that returns the actual element on which the validity data should be applied.\n\t\t */\n\t\tgetValidityTarget: () => ValidityTarget | null | undefined;\n\t\t/**\n\t\t * The control component to apply validation to.\n\t\t */\n\t\tchildren: C;\n\t},\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst [ errorMessage, setErrorMessage ] = useState< string | undefined >();\n\tconst [ statusMessage, setStatusMessage ] = useState<\n\t\t| {\n\t\t\t\ttype: 'validating' | 'valid';\n\t\t\t\tmessage?: string;\n\t\t  }\n\t\t| undefined\n\t>();\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst previousCustomValidityType = usePrevious( customValidity?.type );\n\n\t// Ensure that error messages are visible after user attemps to submit a form\n\t// with multiple invalid fields.\n\tuseEffect( () => {\n\t\tconst validityTarget = getValidityTarget();\n\t\tconst showValidationMessage = () =>\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\tvalidityTarget?.addEventListener( 'invalid', showValidationMessage );\n\n\t\treturn () => {\n\t\t\tvalidityTarget?.removeEventListener(\n\t\t\t\t'invalid',\n\t\t\t\tshowValidationMessage\n\t\t\t);\n\t\t};\n\t} );\n\n\tuseEffect( (): ReturnType< React.EffectCallback > => {\n\t\tif ( ! isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst validityTarget = getValidityTarget();\n\n\t\tif ( ! customValidity?.type ) {\n\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t\t\tsetStatusMessage( undefined );\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( customValidity.type ) {\n\t\t\tcase 'validating': {\n\t\t\t\t// Wait before showing a validating state.\n\t\t\t\tconst timer = setTimeout( () => {\n\t\t\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\t\t\tsetErrorMessage( undefined );\n\n\t\t\t\t\tsetStatusMessage( {\n\t\t\t\t\t\ttype: 'validating',\n\t\t\t\t\t\tmessage: customValidity.message,\n\t\t\t\t\t} );\n\t\t\t\t}, 1000 );\n\n\t\t\t\treturn () => clearTimeout( timer );\n\t\t\t}\n\t\t\tcase 'valid': {\n\t\t\t\t// Ensures that we wait for any async responses before showing\n\t\t\t\t// a synchronously valid state.\n\t\t\t\tif ( previousCustomValidityType === 'valid' ) {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\t\t\tsetStatusMessage( {\n\t\t\t\t\ttype: 'valid',\n\t\t\t\t\tmessage: customValidity.message,\n\t\t\t\t} );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'invalid': {\n\t\t\t\tvalidityTarget?.setCustomValidity(\n\t\t\t\t\tcustomValidity.message ?? ''\n\t\t\t\t);\n\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\t\t\tsetStatusMessage( undefined );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}, [\n\t\tisTouched,\n\t\tcustomValidity?.type,\n\t\tcustomValidity?.message,\n\t\tgetValidityTarget,\n\t\tpreviousCustomValidityType,\n\t] );\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\tif ( isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n\t\t// This prevents unnecessary blurs from components with multiple focusable elements.\n\t\tif (\n\t\t\t! event.relatedTarget ||\n\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t) {\n\t\t\tsetIsTouched( true );\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\tconst onChange = ( ...args: unknown[] ) => {\n\t\tchildren.props.onChange?.( ...args );\n\n\t\t// Only validate incrementally if the field has blurred at least once,\n\t\t// or currently has an error message.\n\t\tif ( isTouched || errorMessage ) {\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\tconst onKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t// Ensures that custom validators are triggered when the user submits by pressing Enter,\n\t\t// without ever blurring the control.\n\t\tif ( event.key === 'Enter' ) {\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t// Disable reason: Just listening to a bubbled event, not for interaction.\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"components-validated-control\"\n\t\t\tref={ forwardedRef }\n\t\t\tonBlur={ onBlur }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( onKeyDown ) }\n\t\t>\n\t\t\t{ cloneElement( children, {\n\t\t\t\tlabel: appendRequiredIndicator(\n\t\t\t\t\tchildren.props.label,\n\t\t\t\t\trequired,\n\t\t\t\t\tmarkWhenOptional\n\t\t\t\t),\n\t\t\t\tonChange,\n\t\t\t\trequired,\n\t\t\t} ) }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ errorMessage && (\n\t\t\t\t\t<ValidityIndicator\n\t\t\t\t\t\ttype=\"invalid\"\n\t\t\t\t\t\tmessage={ errorMessage }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! errorMessage && statusMessage && (\n\t\t\t\t\t<ValidityIndicator\n\t\t\t\t\t\ttype={ statusMessage.type }\n\t\t\t\t\t\tmessage={ statusMessage.message }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport const ControlWithError = forwardRef( UnforwardedControlWithError );\n"],"mappings":"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","ignoreList":[]}