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

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

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","_controlWithError","_comboboxControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedComboboxControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","useEffect","input","current","querySelector","jsx","ControlWithError","ref","getValidityTarget","children","default","__nextHasNoMarginBottom","__next40pxDefaultSize","ValidatedComboboxControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/combobox-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport ComboboxControl from '../../combobox-control';\nimport type { ComboboxControlProps } from '../../combobox-control/types';\n\ntype Value = ComboboxControlProps[ 'value' ];\n\nconst UnforwardedValidatedComboboxControl = (\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 ComboboxControl >,\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\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\tconst input =\n\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t'input[role=\"combobox\"]'\n\t\t\t);\n\t\tif ( input ) {\n\t\t\tinput.required = required ?? false;\n\t\t}\n\t}, [ required ] );\n\n\treturn (\n\t\t// TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\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[role=\"combobox\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<ComboboxControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t{ ...restProps }\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/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedComboboxControl = forwardRef(\n\tUnforwardedValidatedComboboxControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqD,IAAAK,WAAA,GAAAL,OAAA;AAXrD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;;EAEnD;EACA;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChB,MAAMC,KAAK,GACVP,iBAAiB,CAACQ,OAAO,EAAEC,aAAa,CACvC,wBACD,CAAC;IACF,IAAKF,KAAK,EAAG;MACZA,KAAK,CAACb,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACnC;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB;IAAA;IACC;IACA,IAAAF,WAAA,CAAAkB,GAAA,EAACrB,iBAAA,CAAAsB,gBAAgB;MAChBjB,QAAQ,EAAGA,QAAU;MACrBG,gBAAgB,EAAGA,gBAAkB;MACrCe,GAAG,EAAGV,UAAY;MAClBP,eAAe,EAAGA,CAAA,KAAM;QACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;MAC7C,CAAG;MACHK,iBAAiB,EAAGA,CAAA,KACnBb,iBAAiB,CAACQ,OAAO,EAAEC,aAAa,CACvC,wBACD,CACA;MAAAK,QAAA,eAED,IAAAtB,WAAA,CAAAkB,GAAA,EAACpB,gBAAA,CAAAyB,OAAe;QACfC,uBAAuB;QACvBC,qBAAqB;QAAA,GAChBnB,SAAS;QACdF,QAAQ,EAAKS,KAAK,IAAM;UACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;UACxBT,QAAQ,GAAIS,KAAM,CAAC;QACpB;MAAG,CACH;IAAC,CACe;EAAC;AAErB,CAAC;AAEM,MAAMa,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjD3B,mCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["_compose","require","_element","_controlWithError","_comboboxControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedComboboxControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","useEffect","input","current","querySelector","jsx","ControlWithError","ref","getValidityTarget","children","default","__nextHasNoMarginBottom","__next40pxDefaultSize","ValidatedComboboxControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/combobox-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport ComboboxControl from '../../combobox-control';\nimport type { ComboboxControlProps } from '../../combobox-control/types';\n\ntype Value = ComboboxControlProps[ 'value' ];\n\nconst UnforwardedValidatedComboboxControl = (\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 ComboboxControl >,\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\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\tconst input =\n\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t'input[role=\"combobox\"]'\n\t\t\t);\n\t\tif ( input ) {\n\t\t\tinput.required = required ?? false;\n\t\t}\n\t}, [ required ] );\n\n\treturn (\n\t\t// TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\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[role=\"combobox\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<ComboboxControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t{ ...restProps }\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/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedComboboxControl = forwardRef(\n\tUnforwardedValidatedComboboxControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqD,IAAAK,WAAA,GAAAL,OAAA;AAXrD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;;EAEnD;EACA;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChB,MAAMC,KAAK,GACVP,iBAAiB,CAACQ,OAAO,EAAEC,aAAa,CACvC,wBACD,CAAC;IACF,IAAKF,KAAK,EAAG;MACZA,KAAK,CAACd,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACnC;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB;IAAA;IACC;IACA,IAAAF,WAAA,CAAAmB,GAAA,EAACtB,iBAAA,CAAAuB,gBAAgB;MAChBlB,QAAQ,EAAGA,QAAU;MACrBI,gBAAgB,EAAGA,gBAAkB;MACrCe,GAAG,EAAGV,UAAY;MAClBR,UAAU,EAAGA,CAAA,KAAM;QAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACI,OAAQ,CAAC;MACxC,CAAG;MACHb,cAAc,EAAGA,cAAgB;MACjCkB,iBAAiB,EAAGA,CAAA,KACnBb,iBAAiB,CAACQ,OAAO,EAAEC,aAAa,CACvC,wBACD,CACA;MAAAK,QAAA,eAED,IAAAvB,WAAA,CAAAmB,GAAA,EAACrB,gBAAA,CAAA0B,OAAe;QACfC,uBAAuB;QACvBC,qBAAqB;QAAA,GAChBnB,SAAS;QACdF,QAAQ,EAAKS,KAAK,IAAM;UACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;UACxBT,QAAQ,GAAIS,KAAM,CAAC;QACpB;MAAG,CACH;IAAC,CACe;EAAC;AAErB,CAAC;AAEM,MAAMa,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjD5B,mCACD,CAAC","ignoreList":[]}

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

@@ -19,7 +19,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const UnforwardedValidatedCustomSelectControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -32,9 +33,10 @@ const UnforwardedValidatedCustomSelectControl = ({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
       required: required,
       markWhenOptional: markWhenOptional,
-      customValidator: () => {
-        return customValidator?.(valueRef.current);
+      onValidate: () => {
+        return onValidate?.(valueRef.current);
       },
+      customValidity: customValidity,
       getValidityTarget: () => validityTargetRef.current,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_customSelectControl.default
       // TODO: Upstream limitation - Required isn't passed down correctly,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_controlWithError","_customSelectControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedCustomSelectControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","valueRef","value","jsxs","className","ref","children","jsx","ControlWithError","current","getValidityTarget","default","__next40pxDefaultSize","selectedItem","tabIndex","key","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedCustomSelectControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/custom-select-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport CustomSelectControl from '../../custom-select-control';\nimport type {\n\tCustomSelectOption,\n\tCustomSelectProps,\n} from '../../custom-select-control/types';\n\ntype CustomSelectControlProps = CustomSelectProps< CustomSelectOption >;\n\ntype Value = CustomSelectControlProps[ 'value' ];\n\nconst UnforwardedValidatedCustomSelectControl = (\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 CustomSelectControl >,\n\t\t'__next40pxDefaultSize'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLSelectElement >( null );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"components-validated-control__wrapper-with-error-delegate\"\n\t\t\tref={ forwardedRef }\n\t\t>\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<CustomSelectControl\n\t\t\t\t\t// TODO: Upstream limitation - Required isn't passed down correctly,\n\t\t\t\t\t// so it needs to be set on a delegate element.\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tvalueRef.current = value.selectedItem;\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<select\n\t\t\t\tclassName=\"components-validated-control__error-delegate\"\n\t\t\t\tref={ validityTargetRef }\n\t\t\t\trequired={ required }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\tvalue={ restProps.value?.key ? 'hasvalue' : '' }\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 >(\n\t\t\t\t\t\t\t'[role=\"combobox\"]'\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\t\t<option value=\"\">No selection</option>\n\t\t\t\t<option value=\"hasvalue\">Has selection</option>\n\t\t\t</select>\n\t\t</div>\n\t);\n};\n\nexport const ValidatedCustomSelectControl = forwardRef(\n\tUnforwardedValidatedCustomSelectControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,oBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA8D,IAAAI,WAAA,GAAAJ,OAAA;AAV9D;AACA;AACA;;AAGA;AACA;AACA;;AAaA,MAAMK,uCAAuC,GAAGA,CAC/C;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAuB,IAAK,CAAC;EAC7D,MAAMC,QAAQ,GAAG,IAAAD,eAAM,EAAWH,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACC,IAAAX,WAAA,CAAAY,IAAA;IACCC,SAAS,EAAC,2DAA2D;IACrEC,GAAG,EAAGP,YAAc;IAAAQ,QAAA,gBAEpB,IAAAf,WAAA,CAAAgB,GAAA,EAACnB,iBAAA,CAAAoB,gBAAgB;MAChBf,QAAQ,EAAGA,QAAU;MACrBG,gBAAgB,EAAGA,gBAAkB;MACrCF,eAAe,EAAGA,CAAA,KAAM;QACvB,OAAOA,eAAe,GAAIO,QAAQ,CAACQ,OAAQ,CAAC;MAC7C,CAAG;MACHC,iBAAiB,EAAGA,CAAA,KAAMX,iBAAiB,CAACU,OAAS;MAAAH,QAAA,eAErD,IAAAf,WAAA,CAAAgB,GAAA,EAAClB,oBAAA,CAAAsB;MACA;MACA;MAAA;QACAC,qBAAqB;QACrBjB,QAAQ,EAAKO,KAAK,IAAM;UACvBD,QAAQ,CAACQ,OAAO,GAAGP,KAAK,CAACW,YAAY;UACrClB,QAAQ,GAAIO,KAAM,CAAC;QACpB,CAAG;QAAA,GACEL;MAAS,CACd;IAAC,CACe,CAAC,eACnB,IAAAN,WAAA,CAAAY,IAAA;MACCC,SAAS,EAAC,8CAA8C;MACxDC,GAAG,EAAGN,iBAAmB;MACzBN,QAAQ,EAAGA,QAAU;MACrBqB,QAAQ,EAAG,CAAC,CAAG;MACfZ,KAAK,EAAGL,SAAS,CAACK,KAAK,EAAEa,GAAG,GAAG,UAAU,GAAG,EAAI;MAChDpB,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrBqB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,mBACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX,CAAG;MAAAf,QAAA,gBAEH,IAAAf,WAAA,CAAAgB,GAAA;QAAQL,KAAK,EAAC,EAAE;QAAAI,QAAA,EAAC;MAAY,CAAQ,CAAC,eACtC,IAAAf,WAAA,CAAAgB,GAAA;QAAQL,KAAK,EAAC,UAAU;QAAAI,QAAA,EAAC;MAAa,CAAQ,CAAC;IAAA,CACxC,CAAC;EAAA,CACL,CAAC;AAER,CAAC;AAEM,MAAMgB,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAG,IAAAE,mBAAU,EACrDhC,uCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["_element","require","_controlWithError","_customSelectControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedCustomSelectControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","valueRef","value","jsxs","className","ref","children","jsx","ControlWithError","current","getValidityTarget","default","__next40pxDefaultSize","selectedItem","tabIndex","key","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedCustomSelectControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/custom-select-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport CustomSelectControl from '../../custom-select-control';\nimport type {\n\tCustomSelectOption,\n\tCustomSelectProps,\n} from '../../custom-select-control/types';\n\ntype CustomSelectControlProps = CustomSelectProps< CustomSelectOption >;\n\ntype Value = CustomSelectControlProps[ 'value' ];\n\nconst UnforwardedValidatedCustomSelectControl = (\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 CustomSelectControl >,\n\t\t'__next40pxDefaultSize'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLSelectElement >( null );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"components-validated-control__wrapper-with-error-delegate\"\n\t\t\tref={ forwardedRef }\n\t\t>\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<CustomSelectControl\n\t\t\t\t\t// TODO: Upstream limitation - Required isn't passed down correctly,\n\t\t\t\t\t// so it needs to be set on a delegate element.\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tvalueRef.current = value.selectedItem;\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<select\n\t\t\t\tclassName=\"components-validated-control__error-delegate\"\n\t\t\t\tref={ validityTargetRef }\n\t\t\t\trequired={ required }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\tvalue={ restProps.value?.key ? 'hasvalue' : '' }\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 >(\n\t\t\t\t\t\t\t'[role=\"combobox\"]'\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\t\t<option value=\"\">No selection</option>\n\t\t\t\t<option value=\"hasvalue\">Has selection</option>\n\t\t\t</select>\n\t\t</div>\n\t);\n};\n\nexport const ValidatedCustomSelectControl = forwardRef(\n\tUnforwardedValidatedCustomSelectControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,oBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA8D,IAAAI,WAAA,GAAAJ,OAAA;AAV9D;AACA;AACA;;AAGA;AACA;AACA;;AAaA,MAAMK,uCAAuC,GAAGA,CAC/C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAuB,IAAK,CAAC;EAC7D,MAAMC,QAAQ,GAAG,IAAAD,eAAM,EAAWH,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACC,IAAAZ,WAAA,CAAAa,IAAA;IACCC,SAAS,EAAC,2DAA2D;IACrEC,GAAG,EAAGP,YAAc;IAAAQ,QAAA,gBAEpB,IAAAhB,WAAA,CAAAiB,GAAA,EAACpB,iBAAA,CAAAqB,gBAAgB;MAChBhB,QAAQ,EAAGA,QAAU;MACrBI,gBAAgB,EAAGA,gBAAkB;MACrCH,UAAU,EAAGA,CAAA,KAAM;QAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACQ,OAAQ,CAAC;MACxC,CAAG;MACHf,cAAc,EAAGA,cAAgB;MACjCgB,iBAAiB,EAAGA,CAAA,KAAMX,iBAAiB,CAACU,OAAS;MAAAH,QAAA,eAErD,IAAAhB,WAAA,CAAAiB,GAAA,EAACnB,oBAAA,CAAAuB;MACA;MACA;MAAA;QACAC,qBAAqB;QACrBjB,QAAQ,EAAKO,KAAK,IAAM;UACvBD,QAAQ,CAACQ,OAAO,GAAGP,KAAK,CAACW,YAAY;UACrClB,QAAQ,GAAIO,KAAM,CAAC;QACpB,CAAG;QAAA,GACEL;MAAS,CACd;IAAC,CACe,CAAC,eACnB,IAAAP,WAAA,CAAAa,IAAA;MACCC,SAAS,EAAC,8CAA8C;MACxDC,GAAG,EAAGN,iBAAmB;MACzBP,QAAQ,EAAGA,QAAU;MACrBsB,QAAQ,EAAG,CAAC,CAAG;MACfZ,KAAK,EAAGL,SAAS,CAACK,KAAK,EAAEa,GAAG,GAAG,UAAU,GAAG,EAAI;MAChDpB,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrBqB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,mBACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX,CAAG;MAAAf,QAAA,gBAEH,IAAAhB,WAAA,CAAAiB,GAAA;QAAQL,KAAK,EAAC,EAAE;QAAAI,QAAA,EAAC;MAAY,CAAQ,CAAC,eACtC,IAAAhB,WAAA,CAAAiB,GAAA;QAAQL,KAAK,EAAC,UAAU;QAAAI,QAAA,EAAC;MAAa,CAAQ,CAAC;IAAA,CACxC,CAAC;EAAA,CACL,CAAC;AAER,CAAC;AAEM,MAAMgB,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAG,IAAAE,mBAAU,EACrDjC,uCACD,CAAC","ignoreList":[]}

package/build/validated-form-controls/components/input-control.js

@@ -20,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const UnforwardedValidatedInputControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -31,9 +32,10 @@ const UnforwardedValidatedInputControl = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputControl.default, {
       __next40pxDefaultSize: true,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_controlWithError","_inputControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedInputControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","ref","args","ValidatedInputControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/input-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 InputControl from '../../input-control';\nimport type { InputControlProps } from '../../input-control/types';\n\ntype Value = InputControlProps[ 'value' ];\n\nconst UnforwardedValidatedInputControl = (\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 InputControl >,\n\t\t'__next40pxDefaultSize'\n\t> &\n\t\tValidatedControlProps< InputControlProps[ '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<InputControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\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 ValidatedInputControl = forwardRef(\n\tUnforwardedValidatedInputControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAX/C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAKiD,CAAC,EACtDC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAlB,WAAA,CAAAc,GAAA,EAAChB,aAAA,CAAAqB,OAAY;MACZC,qBAAqB;MACrBC,GAAG,EAAGX,UAAY;MAClBN,QAAQ,EAAGA,CAAES,KAAK,EAAE,GAAGS,IAAI,KAAM;QAChCV,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAK,EAAE,GAAGS,IAAK,CAAC;MAC7B,CAAG;MAAA,GACEhB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,EAC9CxB,gCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_controlWithError","_inputControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedInputControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","ref","args","ValidatedInputControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/input-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 InputControl from '../../input-control';\nimport type { InputControlProps } from '../../input-control/types';\n\ntype Value = InputControlProps[ 'value' ];\n\nconst UnforwardedValidatedInputControl = (\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 InputControl >,\n\t\t'__next40pxDefaultSize'\n\t> &\n\t\tValidatedControlProps< InputControlProps[ '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<InputControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\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 ValidatedInputControl = forwardRef(\n\tUnforwardedValidatedInputControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAX/C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAKiD,CAAC,EACtDC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACI,OAAQ,CAAC;IACxC,CAAG;IACHb,cAAc,EAAGA,cAAgB;IACjCc,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAnB,WAAA,CAAAe,GAAA,EAACjB,aAAA,CAAAsB,OAAY;MACZC,qBAAqB;MACrBC,GAAG,EAAGX,UAAY;MAClBN,QAAQ,EAAGA,CAAES,KAAK,EAAE,GAAGS,IAAI,KAAM;QAChCV,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAK,EAAE,GAAGS,IAAK,CAAC;MAC7B,CAAG;MAAA,GACEhB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,EAC9CzB,gCACD,CAAC","ignoreList":[]}

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

@@ -20,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const UnforwardedValidatedNumberControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -31,9 +32,10 @@ const UnforwardedValidatedNumberControl = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_numberControl.default, {
       __next40pxDefaultSize: true,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_controlWithError","_numberControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedNumberControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","ref","args","ValidatedNumberControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAVjD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAlB,WAAA,CAAAc,GAAA,EAAChB,cAAA,CAAAqB,OAAa;MACbC,qBAAqB;MACrBC,GAAG,EAAGX;MACN;MACA;MAAA;MACAN,QAAQ,EAAGA,CAAES,KAAK,EAAE,GAAGS,IAAI,KAAM;QAChCV,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAK,EAAE,GAAGS,IAAK,CAAC;MAC7B,CAAG;MAAA,GACEhB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/CxB,iCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_controlWithError","_numberControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedNumberControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","ref","args","ValidatedNumberControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAVjD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACI,OAAQ,CAAC;IACxC,CAAG;IACHb,cAAc,EAAGA,cAAgB;IACjCc,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAnB,WAAA,CAAAe,GAAA,EAACjB,cAAA,CAAAsB,OAAa;MACbC,qBAAqB;MACrBC,GAAG,EAAGX;MACN;MACA;MAAA;MACAN,QAAQ,EAAGA,CAAES,KAAK,EAAE,GAAGS,IAAI,KAAM;QAChCV,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAK,EAAE,GAAGS,IAAK,CAAC;MAC7B,CAAG;MAAA,GACEhB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/CzB,iCACD,CAAC","ignoreList":[]}

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

@@ -20,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const UnforwardedValidatedRadioControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -34,9 +35,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__*/(0, _jsxRuntime.jsx)(_radioControl.default, {
       onChange: value => {

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

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","_controlWithError","_radioControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedRadioControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","selected","jsx","ControlWithError","ref","current","getValidityTarget","querySelector","children","default","value","ValidatedRadioControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAX/C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAE0B,CAAC,EAC/BC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAoB,IAAK,CAAC;EAC1D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,QAAS,CAAC;EAEtD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA;IACnB;IAAA;IACAW,GAAG,EAAGN,UAAY;IAClBP,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACK,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KACnBV,iBAAiB,CAACS,OAAO,EAAEE,aAAa,CACvC,qBACD,CACA;IAAAC,QAAA,eAED,IAAApB,WAAA,CAAAc,GAAA,EAAChB,aAAA,CAAAuB,OAAY;MACZjB,QAAQ,EAAKkB,KAAK,IAAM;QACvBV,QAAQ,CAACK,OAAO,GAAGK,KAAK;QACxBlB,QAAQ,GAAIkB,KAAM,CAAC;MACpB,CAAG;MAAA,GACEhB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,EAC9CxB,gCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["_compose","require","_element","_controlWithError","_radioControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedRadioControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","selected","jsx","ControlWithError","ref","current","getValidityTarget","querySelector","children","default","value","ValidatedRadioControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAX/C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAE0B,CAAC,EAC/BC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAoB,IAAK,CAAC;EAC1D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,QAAS,CAAC;EAEtD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA;IACnB;IAAA;IACAW,GAAG,EAAGN,UAAY;IAClBR,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACK,OAAQ,CAAC;IACxC,CAAG;IACHd,cAAc,EAAGA,cAAgB;IACjCe,iBAAiB,EAAGA,CAAA,KACnBV,iBAAiB,CAACS,OAAO,EAAEE,aAAa,CACvC,qBACD,CACA;IAAAC,QAAA,eAED,IAAArB,WAAA,CAAAe,GAAA,EAACjB,aAAA,CAAAwB,OAAY;MACZjB,QAAQ,EAAKkB,KAAK,IAAM;QACvBV,QAAQ,CAACK,OAAO,GAAGK,KAAK;QACxBlB,QAAQ,GAAIkB,KAAM,CAAC;MACpB,CAAG;MAAA,GACEhB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,EAC9CzB,gCACD,CAAC","ignoreList":[]}

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

@@ -20,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const UnforwardedValidatedRangeControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -31,9 +32,10 @@ const UnforwardedValidatedRangeControl = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeControl.default, {
       __next40pxDefaultSize: true,

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

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","_controlWithError","_rangeControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedRangeControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedRangeControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAX/C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAlB,WAAA,CAAAc,GAAA,EAAChB,aAAA,CAAAqB,OAAY;MACZC,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,EAC9CxB,gCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["_compose","require","_element","_controlWithError","_rangeControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedRangeControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedRangeControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAX/C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACI,OAAQ,CAAC;IACxC,CAAG;IACHb,cAAc,EAAGA,cAAgB;IACjCc,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAnB,WAAA,CAAAe,GAAA,EAACjB,aAAA,CAAAsB,OAAY;MACZC,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,EAC9CzB,gCACD,CAAC","ignoreList":[]}

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

@@ -22,7 +22,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const UnforwardedValidatedSelectControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -33,9 +34,10 @@ const UnforwardedValidatedSelectControl = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectControl.default, {
       __nextHasNoMarginBottom: true,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_controlWithError","_selectControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedSelectControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","ValidatedSelectControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAVjD;AACA;AACA;;AAIA;AACA;AACA;;AAMA;;AAWA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAW6B,CAAC,EAClCC,YAAqD,KACjD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAuB,IAAK,CAAC;EAC7D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAlB,WAAA,CAAAc,GAAA,EAAChB,cAAA,CAAAqB,OAAa;MACbC,uBAAuB;MACvBC,qBAAqB;MACrBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/CxB,iCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_controlWithError","_selectControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedSelectControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","ValidatedSelectControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAVjD;AACA;AACA;;AAIA;AACA;AACA;;AAMA;;AAWA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAW6B,CAAC,EAClCC,YAAqD,KACjD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAuB,IAAK,CAAC;EAC7D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACI,OAAQ,CAAC;IACxC,CAAG;IACHb,cAAc,EAAGA,cAAgB;IACjCc,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAnB,WAAA,CAAAe,GAAA,EAACjB,cAAA,CAAAsB,OAAa;MACbC,uBAAuB;MACvBC,qBAAqB;MACrBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/CzB,iCACD,CAAC","ignoreList":[]}

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

@@ -20,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const UnforwardedValidatedTextControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -31,9 +32,10 @@ const UnforwardedValidatedTextControl = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textControl.default, {
       __next40pxDefaultSize: true,

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

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","_controlWithError","_textControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedTextControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedTextControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,YAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA6C,IAAAK,WAAA,GAAAL,OAAA;AAX7C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,+BAA+B,GAAGA,CACvC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAlB,WAAA,CAAAc,GAAA,EAAChB,YAAA,CAAAqB,OAAW;MACXC,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,mBAAU,EAC7CxB,+BACD,CAAC","ignoreList":[]}
+{"version":3,"names":["_compose","require","_element","_controlWithError","_textControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedTextControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedTextControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,YAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA6C,IAAAK,WAAA,GAAAL,OAAA;AAX7C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,+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,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACI,OAAQ,CAAC;IACxC,CAAG;IACHb,cAAc,EAAGA,cAAgB;IACjCc,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAnB,WAAA,CAAAe,GAAA,EAACjB,YAAA,CAAAsB,OAAW;MACXC,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,mBAAU,EAC7CzB,+BACD,CAAC","ignoreList":[]}

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

@@ -20,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const UnforwardedValidatedTextareaControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -31,9 +32,10 @@ const UnforwardedValidatedTextareaControl = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textareaControl.default, {
       __nextHasNoMarginBottom: true,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_controlWithError","_textareaControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedTextareaControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__nextHasNoMarginBottom","ref","ValidatedTextareaControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqD,IAAAK,WAAA,GAAAL,OAAA;AAXrD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAuD,KACnD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAyB,IAAK,CAAC;EAC/D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAlB,WAAA,CAAAc,GAAA,EAAChB,gBAAA,CAAAqB,OAAe;MACfC,uBAAuB;MACvBC,GAAG,EAAGX,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMgB,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjDvB,mCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_controlWithError","_textareaControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedTextareaControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__nextHasNoMarginBottom","ref","ValidatedTextareaControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqD,IAAAK,WAAA,GAAAL,OAAA;AAXrD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAuD,KACnD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAyB,IAAK,CAAC;EAC/D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACI,OAAQ,CAAC;IACxC,CAAG;IACHb,cAAc,EAAGA,cAAgB;IACjCc,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAnB,WAAA,CAAAe,GAAA,EAACjB,gBAAA,CAAAsB,OAAe;MACfC,uBAAuB;MACvBC,GAAG,EAAGX,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMgB,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjDxB,mCACD,CAAC","ignoreList":[]}

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

@@ -22,7 +22,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const UnforwardedValidatedToggleControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -41,9 +42,10 @@ const UnforwardedValidatedToggleControl = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
     required: required,
     markWhenOptional: markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleControl.default, {
       __nextHasNoMarginBottom: true,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_controlWithError","_toggleControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedToggleControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","checked","useEffect","current","jsx","ControlWithError","getValidityTarget","children","default","__nextHasNoMarginBottom","ref","value","ValidatedToggleControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAXjD;AACA;AACA;;AAIA;AACA;AACA;;AAQA;;AAEA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,OAAQ,CAAC;;EAErD;EACA;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAKN,iBAAiB,CAACO,OAAO,EAAG;MAChCP,iBAAiB,CAACO,OAAO,CAACb,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACvD;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB,oBACC,IAAAF,WAAA,CAAAgB,GAAA,EAACnB,iBAAA,CAAAoB,gBAAgB;IAChBf,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACG,OAAQ,CAAC;IAC7C,CAAG;IACHG,iBAAiB,EAAGA,CAAA,KAAMV,iBAAiB,CAACO,OAAS;IAAAI,QAAA,eAErD,IAAAnB,WAAA,CAAAgB,GAAA,EAAClB,cAAA,CAAAsB,OAAa;MACbC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKmB,KAAK,IAAM;QACvBX,QAAQ,CAACG,OAAO,GAAGQ,KAAK;QACxBnB,QAAQ,GAAImB,KAAM,CAAC;MACpB,CAAG;MAAA,GACEjB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMkB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/CzB,iCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_controlWithError","_toggleControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedToggleControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","checked","useEffect","current","jsx","ControlWithError","getValidityTarget","children","default","__nextHasNoMarginBottom","ref","value","ValidatedToggleControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAXjD;AACA;AACA;;AAIA;AACA;AACA;;AAQA;;AAEA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,OAAQ,CAAC;;EAErD;EACA;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAKN,iBAAiB,CAACO,OAAO,EAAG;MAChCP,iBAAiB,CAACO,OAAO,CAACd,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACvD;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB,oBACC,IAAAF,WAAA,CAAAiB,GAAA,EAACpB,iBAAA,CAAAqB,gBAAgB;IAChBhB,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACG,OAAQ,CAAC;IACxC,CAAG;IACHZ,cAAc,EAAGA,cAAgB;IACjCe,iBAAiB,EAAGA,CAAA,KAAMV,iBAAiB,CAACO,OAAS;IAAAI,QAAA,eAErD,IAAApB,WAAA,CAAAiB,GAAA,EAACnB,cAAA,CAAAuB,OAAa;MACbC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKmB,KAAK,IAAM;QACvBX,QAAQ,CAACG,OAAO,GAAGQ,KAAK;QACxBnB,QAAQ,GAAImB,KAAM,CAAC;MACpB,CAAG;MAAA,GACEjB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMkB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/C1B,iCACD,CAAC","ignoreList":[]}

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

@@ -18,7 +18,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const UnforwardedValidatedToggleGroupControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -31,9 +32,10 @@ const UnforwardedValidatedToggleGroupControl = ({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
       required: required,
       markWhenOptional: markWhenOptional,
-      customValidator: () => {
-        return customValidator?.(valueRef.current);
+      onValidate: () => {
+        return onValidate?.(valueRef.current);
       },
+      customValidity: customValidity,
       getValidityTarget: () => validityTargetRef.current,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleGroupControl.ToggleGroupControl, {
         __nextHasNoMarginBottom: true,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_controlWithError","_toggleGroupControl","_jsxRuntime","UnforwardedValidatedToggleGroupControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","valueRef","value","nameAttr","useId","jsxs","className","children","jsx","ControlWithError","current","getValidityTarget","ToggleGroupControl","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","type","checked","tabIndex","name","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedToggleGroupControl","exports","forwardRef"],"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":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,mBAAA,GAAAF,OAAA;AAAgE,IAAAG,WAAA,GAAAH,OAAA;AAVhE;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMI,sCAAsC,GAAGA,CAC9C;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,QAAQ,GAAG,IAAAD,eAAM,EAAWH,SAAS,CAACK,KAAM,CAAC;EAEnD,MAAMC,QAAQ,GAAG,IAAAC,cAAK,EAAC,CAAC;EAExB,oBACC,IAAAb,WAAA,CAAAc,IAAA;IAAKC,SAAS,EAAC,2DAA2D;IAAAC,QAAA,gBACzE,IAAAhB,WAAA,CAAAiB,GAAA,EAACnB,iBAAA,CAAAoB,gBAAgB;MAChBhB,QAAQ,EAAGA,QAAU;MACrBG,gBAAgB,EAAGA,gBAAkB;MACrCF,eAAe,EAAGA,CAAA,KAAM;QACvB,OAAOA,eAAe,GAAIO,QAAQ,CAACS,OAAQ,CAAC;MAC7C,CAAG;MACHC,iBAAiB,EAAGA,CAAA,KAAMZ,iBAAiB,CAACW,OAAS;MAAAH,QAAA,eAErD,IAAAhB,WAAA,CAAAiB,GAAA,EAAClB,mBAAA,CAAAsB,kBAAkB;QAClBC,uBAAuB;QACvBC,qBAAqB;QACrBC,GAAG,EAAGjB;QACN;QACA;QAAA;QACAH,QAAQ,EAAKO,KAAK,IAAM;UACvBD,QAAQ,CAACS,OAAO,GAAGR,KAAK;UACxBP,QAAQ,GAAIO,KAAM,CAAC;QACpB,CAAG;QAAA,GACEL;MAAS,CACd;IAAC,CACe,CAAC,eACnB,IAAAN,WAAA,CAAAiB,GAAA;MACCF,SAAS,EAAC,8CAA8C;MACxDU,IAAI,EAAC,OAAO;MACZD,GAAG,EAAGhB,iBAAmB;MACzBN,QAAQ,EAAGA,QAAU;MACrBwB,OAAO,EAAGpB,SAAS,CAACK,KAAK,KAAK,IAAM;MACpCgB,QAAQ,EAAG,CAAC;MACZ;MAAA;MACAC,IAAI,EAAGhB,QAAU;MACjBR,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrByB,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;AAEM,MAAMC,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,mBAAU,EACpDpC,sCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["_element","require","_controlWithError","_toggleGroupControl","_jsxRuntime","UnforwardedValidatedToggleGroupControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","valueRef","value","nameAttr","useId","jsxs","className","children","jsx","ControlWithError","current","getValidityTarget","ToggleGroupControl","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","type","checked","tabIndex","name","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedToggleGroupControl","exports","forwardRef"],"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":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,mBAAA,GAAAF,OAAA;AAAgE,IAAAG,WAAA,GAAAH,OAAA;AAVhE;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMI,sCAAsC,GAAGA,CAC9C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,QAAQ,GAAG,IAAAD,eAAM,EAAWH,SAAS,CAACK,KAAM,CAAC;EAEnD,MAAMC,QAAQ,GAAG,IAAAC,cAAK,EAAC,CAAC;EAExB,oBACC,IAAAd,WAAA,CAAAe,IAAA;IAAKC,SAAS,EAAC,2DAA2D;IAAAC,QAAA,gBACzE,IAAAjB,WAAA,CAAAkB,GAAA,EAACpB,iBAAA,CAAAqB,gBAAgB;MAChBjB,QAAQ,EAAGA,QAAU;MACrBI,gBAAgB,EAAGA,gBAAkB;MACrCH,UAAU,EAAGA,CAAA,KAAM;QAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACS,OAAQ,CAAC;MACxC,CAAG;MACHhB,cAAc,EAAGA,cAAgB;MACjCiB,iBAAiB,EAAGA,CAAA,KAAMZ,iBAAiB,CAACW,OAAS;MAAAH,QAAA,eAErD,IAAAjB,WAAA,CAAAkB,GAAA,EAACnB,mBAAA,CAAAuB,kBAAkB;QAClBC,uBAAuB;QACvBC,qBAAqB;QACrBC,GAAG,EAAGjB;QACN;QACA;QAAA;QACAH,QAAQ,EAAKO,KAAK,IAAM;UACvBD,QAAQ,CAACS,OAAO,GAAGR,KAAK;UACxBP,QAAQ,GAAIO,KAAM,CAAC;QACpB,CAAG;QAAA,GACEL;MAAS,CACd;IAAC,CACe,CAAC,eACnB,IAAAP,WAAA,CAAAkB,GAAA;MACCF,SAAS,EAAC,8CAA8C;MACxDU,IAAI,EAAC,OAAO;MACZD,GAAG,EAAGhB,iBAAmB;MACzBP,QAAQ,EAAGA,QAAU;MACrByB,OAAO,EAAGpB,SAAS,CAACK,KAAK,KAAK,IAAM;MACpCgB,QAAQ,EAAG,CAAC;MACZ;MAAA;MACAC,IAAI,EAAGhB,QAAU;MACjBR,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrByB,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;AAEM,MAAMC,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,mBAAU,EACpDrC,sCACD,CAAC","ignoreList":[]}

package/build/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":[]}