npm - @wordpress/components - Versions diffs - 30.2.1-next.0f6f9d12c.0 → 30.2.1-next.f34ab90e9.0 - Mend

@wordpress/components 30.2.1-next.0f6f9d12c.0 → 30.2.1-next.f34ab90e9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (133) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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 CHANGED Viewed

	@@ -1 +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":[]}
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 Optional callback to run when the input should be validated. Use this to set\n\t * a `customValidity` as necessary.\n\t \n\t Always prefer using standard HTML attributes like `required` and `min`/`max` over\n\t * custom validators when possible, as they are simpler and have localized error messages built in.\n\t /\n\tonValidate?: ( currentValue: V ) => void;\n\t/\n\t Show a custom message based on the validation status.\n\t \n\t - When `type` is `invalid`, the message will be applied to the underlying element using the\n\t * native [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\n\t * This means the custom message will be prioritized over any existing validity messages\n\t * triggered by HTML attribute-based validation.\n\t * - When `type` is `validating` or `valid`, the custom validity message of the underlying element\n\t * will be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\n\t * the message will be presented as a status indicator rather than an error. These indicators are intended\n\t * for asynchronous validation calls that may take more than 1 second to complete.\n\t * Otherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`.\n\t */\n\tcustomValidity?: {\n\t\ttype: 'validating' \| 'valid' \| 'invalid';\n\t\tmessage: string;\n\t};\n};\n"],"mappings":"","ignoreList":[]}

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

@@ -1,15 +1,13 @@
 "use strict";
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ControlWithError = void 0;
 var _i18n = require("@wordpress/i18n");
-var _icons = require("@wordpress/icons");
 var _element = require("@wordpress/element");
 var _withIgnoreImeEvents = require("../utils/with-ignore-ime-events");
-var _icon = _interopRequireDefault(require("../icon"));
+var _validityIndicator = require("./validity-indicator");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
@@ -49,11 +47,13 @@ function appendRequiredIndicator(label, required, markWhenOptional) {
 function UnforwardedControlWithError({
   required,
   markWhenOptional,
-  customValidator,
+  onValidate,
+  customValidity,
   getValidityTarget,
   children
 }, forwardedRef) {
   const [errorMessage, setErrorMessage] = (0, _element.useState)();
+  const [statusMessage, setStatusMessage] = (0, _element.useState)();
   const [isTouched, setIsTouched] = (0, _element.useState)(false);
   // Ensure that error messages are visible after user attemps to submit a form
@@ -66,12 +66,49 @@ function UnforwardedControlWithError({
       validityTarget?.removeEventListener('invalid', showValidationMessage);
     };
   });
-  const validate = () => {
-    const message = customValidator?.();
+  (0, _element.useEffect)(() => {
+    if (!isTouched) {
+      return;
+    }
     const validityTarget = getValidityTarget();
-    validityTarget?.setCustomValidity(message !== null && message !== void 0 ? message : '');
-    setErrorMessage(validityTarget?.validationMessage);
-  };
+    if (!customValidity?.type) {
+      validityTarget?.setCustomValidity('');
+      setErrorMessage(validityTarget?.validationMessage);
+      setStatusMessage(undefined);
+      return;
+    }
+    switch (customValidity.type) {
+      case 'validating':
+        {
+          // Wait before showing a validating state.
+          const timer = setTimeout(() => {
+            setStatusMessage({
+              type: 'validating',
+              message: customValidity.message
+            });
+          }, 1000);
+          return () => clearTimeout(timer);
+        }
+      case 'valid':
+        {
+          validityTarget?.setCustomValidity('');
+          setErrorMessage(validityTarget?.validationMessage);
+          setStatusMessage({
+            type: 'valid',
+            message: customValidity.message
+          });
+          return;
+        }
+      case 'invalid':
+        {
+          var _customValidity$messa;
+          validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : '');
+          setErrorMessage(validityTarget?.validationMessage);
+          setStatusMessage(undefined);
+          return undefined;
+        }
+    }
+  }, [isTouched, customValidity?.type, customValidity?.message, getValidityTarget]);
   const onBlur = event => {
     // Only consider "blurred from the component" if focus has fully left the wrapping div.
     // This prevents unnecessary blurs from components with multiple focusable elements.
@@ -86,7 +123,7 @@ function UnforwardedControlWithError({
         }
         return;
       }
-      validate();
+      onValidate?.();
     }
   };
   const onChange = (...args) => {
@@ -95,14 +132,14 @@ function UnforwardedControlWithError({
     // Only validate incrementally if the field has blurred at least once,
     // or currently has an error message.
     if (isTouched || errorMessage) {
-      validate();
+      onValidate?.();
     }
   };
   const onKeyDown = event => {
     // Ensures that custom validators are triggered when the user submits by pressing Enter,
     // without ever blurring the control.
     if (event.key === 'Enter') {
-      validate();
+      onValidate?.();
     }
   };
   return (
@@ -118,17 +155,15 @@ function UnforwardedControlWithError({
         label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
         onChange,
         required
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         "aria-live": "polite",
-        children: errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-          className: "components-validated-control__error",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
-            className: "components-validated-control__error-icon",
-            icon: _icons.error,
-            size: 16,
-            fill: "currentColor"
-          }), errorMessage]
-        })
+        children: [errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_validityIndicator.ValidityIndicator, {
+          type: "invalid",
+          message: errorMessage
+        }), !errorMessage && statusMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_validityIndicator.ValidityIndicator, {
+          type: statusMessage.type,
+          message: statusMessage.message
+        })]
       })]
     })
   );

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

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

package/build/validated-form-controls/validity-indicator.js ADDED Viewed

@@ -0,0 +1,45 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidityIndicator = ValidityIndicator;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _icons = require("@wordpress/icons");
+var _icon = _interopRequireDefault(require("../icon"));
+var _spinner = _interopRequireDefault(require("../spinner"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+/**
+ * WordPress dependencies
+ */
+/**
+ * Internal dependencies
+ */
+function ValidityIndicator({
+  type,
+  message
+}) {
+  const ICON = {
+    valid: _icons.published,
+    invalid: _icons.error
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+    className: (0, _clsx.default)('components-validated-control__indicator', `is-${type}`),
+    children: [type === 'validating' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_spinner.default, {
+      className: "components-validated-control__indicator-spinner"
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
+      className: "components-validated-control__indicator-icon",
+      icon: ICON[type],
+      size: 16,
+      fill: "currentColor"
+    }), message]
+  });
+}
+//# sourceMappingURL=validity-indicator.js.map

package/build/validated-form-controls/validity-indicator.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_icon","_spinner","_jsxRuntime","ValidityIndicator","type","message","ICON","valid","published","invalid","error","jsxs","className","clsx","children","jsx","default","icon","size","fill"],"sources":["@wordpress/components/src/validated-form-controls/validity-indicator.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { error, published } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport Spinner from '../spinner';\n\nexport function ValidityIndicator( {\n\ttype,\n\tmessage,\n}: {\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage?: string;\n} ) {\n\tconst ICON = {\n\t\tvalid: published,\n\t\tinvalid: error,\n\t};\n\treturn (\n\t\t<p\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-validated-control__indicator',\n\t\t\t\t`is-${ type }`\n\t\t\t) }\n\t\t>\n\t\t\t{ type === 'validating' ? (\n\t\t\t\t<Spinner className=\"components-validated-control__indicator-spinner\" />\n\t\t\t) : (\n\t\t\t\t<Icon\n\t\t\t\t\tclassName=\"components-validated-control__indicator-icon\"\n\t\t\t\t\ticon={ ICON[ type ] }\n\t\t\t\t\tsize={ 16 }\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ message }\n\t\t</p>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,QAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAiC,IAAAI,WAAA,GAAAJ,OAAA;AAdjC;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,SAASK,iBAAiBA,CAAE;EAClCC,IAAI;EACJC;AAID,CAAC,EAAG;EACH,MAAMC,IAAI,GAAG;IACZC,KAAK,EAAEC,gBAAS;IAChBC,OAAO,EAAEC;EACV,CAAC;EACD,oBACC,IAAAR,WAAA,CAAAS,IAAA;IACCC,SAAS,EAAG,IAAAC,aAAI,EACf,yCAAyC,EACzC,MAAOT,IAAI,EACZ,CAAG;IAAAU,QAAA,GAEDV,IAAI,KAAK,YAAY,gBACtB,IAAAF,WAAA,CAAAa,GAAA,EAACd,QAAA,CAAAe,OAAO;MAACJ,SAAS,EAAC;IAAiD,CAAE,CAAC,gBAEvE,IAAAV,WAAA,CAAAa,GAAA,EAACf,KAAA,CAAAgB,OAAI;MACJJ,SAAS,EAAC,8CAA8C;MACxDK,IAAI,EAAGX,IAAI,CAAEF,IAAI,CAAI;MACrBc,IAAI,EAAG,EAAI;MACXC,IAAI,EAAC;IAAc,CACnB,CACD,EACCd,OAAO;EAAA,CACP,CAAC;AAEN","ignoreList":[]}

package/build-module/menu-item/index.js CHANGED Viewed

@@ -58,6 +58,7 @@ function UnforwardedMenuItem(props, ref) {
     role: role,
     icon: iconPosition === 'left' ? icon : undefined,
     className: className,
+    accessibleWhenDisabled: true,
     ...buttonProps,
     children: [/*#__PURE__*/_jsx("span", {
       className: "components-menu-item__item",

package/build-module/menu-item/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["clsx","cloneElement","forwardRef","Shortcut","Button","Icon","jsx","_jsx","jsxs","_jsxs","UnforwardedMenuItem","props","ref","children","info","className","icon","iconPosition","shortcut","isSelected","role","suffix","buttonProps","__next40pxDefaultSize","undefined","MenuItem"],"sources":["@wordpress/components/src/menu-item/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { cloneElement, forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Shortcut from '../shortcut';\nimport Button from '../button';\nimport Icon from '../icon';\nimport type { WordPressComponentProps } from '../context';\nimport type { MenuItemProps } from './types';\n\nfunction UnforwardedMenuItem(\n\tprops: WordPressComponentProps< MenuItemProps, 'button', false >,\n\tref: ForwardedRef< HTMLButtonElement >\n) {\n\tlet {\n\t\tchildren,\n\t\tinfo,\n\t\tclassName,\n\t\ticon,\n\t\ticonPosition = 'right',\n\t\tshortcut,\n\t\tisSelected,\n\t\trole = 'menuitem',\n\t\tsuffix,\n\t\t...buttonProps\n\t} = props;\n\n\tclassName = clsx( 'components-menu-item__button', className );\n\n\tif ( info ) {\n\t\tchildren = (\n\t\t\t<span className=\"components-menu-item__info-wrapper\">\n\t\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t\t<span className=\"components-menu-item__info\">{ info }</span>\n\t\t\t</span>\n\t\t);\n\t}\n\n\tif ( icon && typeof icon !== 'string' ) {\n\t\ticon = cloneElement( icon, {\n\t\t\tclassName: clsx( 'components-menu-items__item-icon', {\n\t\t\t\t'has-icon-right': iconPosition === 'right',\n\t\t\t} ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\t__next40pxDefaultSize\n\t\t\tref={ ref }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\trole === 'menuitemcheckbox' \|\| role === 'menuitemradio'\n\t\t\t\t\t? isSelected\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trole={ role }\n\t\t\ticon={ iconPosition === 'left' ? icon : undefined }\n\t\t\tclassName={ className }\n\t\t\t{ ...buttonProps }\n\t\t>\n\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t{ ! suffix && (\n\t\t\t\t<Shortcut\n\t\t\t\t\tclassName=\"components-menu-item__shortcut\"\n\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! suffix && icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } />\n\t\t\t) }\n\t\t\t{ suffix }\n\t\t</Button>\n\t);\n}\n\n/\n MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.\n \n ```jsx\n * import { MenuItem } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyMenuItem = () => {\n * \tconst [ isActive, setIsActive ] = useState( true );\n \n \treturn (\n * \t\t<MenuItem\n * \t\t\ticon={ isActive ? 'yes' : 'no' }\n * \t\t\tisSelected={ isActive }\n * \t\t\trole=\"menuitemcheckbox\"\n * \t\t\tonClick={ () => setIsActive( ( state ) => ! state ) }\n * \t\t>\n * \t\t\tToggle\n * \t\t</MenuItem>\n * \t);\n * };\n * ```\n */\nexport const MenuItem = forwardRef( UnforwardedMenuItem );\n\nexport default MenuItem;\n"],"mappings":"AAAA;AACA;AACA;;AAEA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,YAAY,EAAEC,UAAU,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,IAAI,MAAM,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAI3B,SAASC,mBAAmBA,CAC3BC,KAAgE,EAChEC,GAAsC,EACrC;EACD,IAAI;IACHC,QAAQ;IACRC,IAAI;IACJC,SAAS;IACTC,IAAI;IACJC,YAAY,GAAG,OAAO;IACtBC,QAAQ;IACRC,UAAU;IACVC,IAAI,GAAG,UAAU;IACjBC,MAAM;IACN,GAAGC;EACJ,CAAC,GAAGX,KAAK;EAETI,SAAS,GAAGf,IAAI,CAAE,8BAA8B,EAAEe,SAAU,CAAC;EAE7D,IAAKD,IAAI,EAAG;IACXD,QAAQ,gBACPJ,KAAA;MAAMM,SAAS,EAAC,oCAAoC;MAAAF,QAAA,gBACnDN,IAAA;QAAMQ,SAAS,EAAC,4BAA4B;QAAAF,QAAA,EAAGA;MAAQ,CAAQ,CAAC,eAChEN,IAAA;QAAMQ,SAAS,EAAC,4BAA4B;QAAAF,QAAA,EAAGC;MAAI,CAAQ,CAAC;IAAA,CACvD,CACN;EACF;EAEA,IAAKE,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAG;IACvCA,IAAI,GAAGf,YAAY,CAAEe,IAAI,EAAE;MAC1BD,SAAS,EAAEf,IAAI,CAAE,kCAAkC,EAAE;QACpD,gBAAgB,EAAEiB,YAAY,KAAK;MACpC,CAAE;IACH,CAAE,CAAC;EACJ;EAEA,oBACCR,KAAA,CAACL,MAAM;IACNmB,qBAAqB;IACrBX,GAAG,EAAGA;IACN;IAAA;IACA,gBACCQ,IAAI,KAAK,kBAAkB,IAAIA,IAAI,KAAK,eAAe,GACpDD,UAAU,GACVK,SACH;IACDJ,IAAI,EAAGA,IAAM;IACbJ,IAAI,EAAGC,YAAY,KAAK,MAAM,GAAGD,IAAI,GAAGQ,SAAW;IACnDT,SAAS,EAAGA,SAAW;IAAA,~~GAClBO~~,WAAW;IAAAT,QAAA,gBAEhBN,IAAA;MAAMQ,SAAS,EAAC,4BAA4B;MAAAF,QAAA,EAAGA;IAAQ,CAAQ,CAAC,EAC9D,CAAEQ,MAAM,iBACTd,IAAA,CAACJ,QAAQ;MACRY,SAAS,EAAC,gCAAgC;MAC1CG,QAAQ,EAAGA;IAAU,CACrB,CACD,EACC,CAAEG,MAAM,IAAIL,IAAI,IAAIC,YAAY,KAAK,OAAO,iBAC7CV,IAAA,CAACF,IAAI;MAACW,IAAI,EAAGA;IAAM,CAAE,CACrB,EACCK,MAAM;EAAA,CACD,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,~~MAAMI~~,QAAQ,~~GAAGvB~~,UAAU,CAAEQ,mBAAoB,CAAC;AAEzD,~~eAAee~~,QAAQ","ignoreList":[]}
1	+ {"version":3,"names":["clsx","cloneElement","forwardRef","Shortcut","Button","Icon","jsx","_jsx","jsxs","_jsxs","UnforwardedMenuItem","props","ref","children","info","className","icon","iconPosition","shortcut","isSelected","role","suffix","buttonProps","__next40pxDefaultSize","undefined","accessibleWhenDisabled","MenuItem"],"sources":["@wordpress/components/src/menu-item/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { cloneElement, forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Shortcut from '../shortcut';\nimport Button from '../button';\nimport Icon from '../icon';\nimport type { WordPressComponentProps } from '../context';\nimport type { MenuItemProps } from './types';\n\nfunction UnforwardedMenuItem(\n\tprops: WordPressComponentProps< MenuItemProps, 'button', false >,\n\tref: ForwardedRef< HTMLButtonElement >\n) {\n\tlet {\n\t\tchildren,\n\t\tinfo,\n\t\tclassName,\n\t\ticon,\n\t\ticonPosition = 'right',\n\t\tshortcut,\n\t\tisSelected,\n\t\trole = 'menuitem',\n\t\tsuffix,\n\t\t...buttonProps\n\t} = props;\n\n\tclassName = clsx( 'components-menu-item__button', className );\n\n\tif ( info ) {\n\t\tchildren = (\n\t\t\t<span className=\"components-menu-item__info-wrapper\">\n\t\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t\t<span className=\"components-menu-item__info\">{ info }</span>\n\t\t\t</span>\n\t\t);\n\t}\n\n\tif ( icon && typeof icon !== 'string' ) {\n\t\ticon = cloneElement( icon, {\n\t\t\tclassName: clsx( 'components-menu-items__item-icon', {\n\t\t\t\t'has-icon-right': iconPosition === 'right',\n\t\t\t} ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\t__next40pxDefaultSize\n\t\t\tref={ ref }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\trole === 'menuitemcheckbox' \|\| role === 'menuitemradio'\n\t\t\t\t\t? isSelected\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trole={ role }\n\t\t\ticon={ iconPosition === 'left' ? icon : undefined }\n\t\t\tclassName={ className }\n\t\t\taccessibleWhenDisabled\n\t\t\t{ ...buttonProps }\n\t\t>\n\t\t\t<span className=\"components-menu-item__item\">{ children }</span>\n\t\t\t{ ! suffix && (\n\t\t\t\t<Shortcut\n\t\t\t\t\tclassName=\"components-menu-item__shortcut\"\n\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! suffix && icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } />\n\t\t\t) }\n\t\t\t{ suffix }\n\t\t</Button>\n\t);\n}\n\n/\n MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.\n \n ```jsx\n * import { MenuItem } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyMenuItem = () => {\n * \tconst [ isActive, setIsActive ] = useState( true );\n \n \treturn (\n * \t\t<MenuItem\n * \t\t\ticon={ isActive ? 'yes' : 'no' }\n * \t\t\tisSelected={ isActive }\n * \t\t\trole=\"menuitemcheckbox\"\n * \t\t\tonClick={ () => setIsActive( ( state ) => ! state ) }\n * \t\t>\n * \t\t\tToggle\n * \t\t</MenuItem>\n * \t);\n * };\n * ```\n */\nexport const MenuItem = forwardRef( UnforwardedMenuItem );\n\nexport default MenuItem;\n"],"mappings":"AAAA;AACA;AACA;;AAEA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,YAAY,EAAEC,UAAU,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,IAAI,MAAM,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAI3B,SAASC,mBAAmBA,CAC3BC,KAAgE,EAChEC,GAAsC,EACrC;EACD,IAAI;IACHC,QAAQ;IACRC,IAAI;IACJC,SAAS;IACTC,IAAI;IACJC,YAAY,GAAG,OAAO;IACtBC,QAAQ;IACRC,UAAU;IACVC,IAAI,GAAG,UAAU;IACjBC,MAAM;IACN,GAAGC;EACJ,CAAC,GAAGX,KAAK;EAETI,SAAS,GAAGf,IAAI,CAAE,8BAA8B,EAAEe,SAAU,CAAC;EAE7D,IAAKD,IAAI,EAAG;IACXD,QAAQ,gBACPJ,KAAA;MAAMM,SAAS,EAAC,oCAAoC;MAAAF,QAAA,gBACnDN,IAAA;QAAMQ,SAAS,EAAC,4BAA4B;QAAAF,QAAA,EAAGA;MAAQ,CAAQ,CAAC,eAChEN,IAAA;QAAMQ,SAAS,EAAC,4BAA4B;QAAAF,QAAA,EAAGC;MAAI,CAAQ,CAAC;IAAA,CACvD,CACN;EACF;EAEA,IAAKE,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAG;IACvCA,IAAI,GAAGf,YAAY,CAAEe,IAAI,EAAE;MAC1BD,SAAS,EAAEf,IAAI,CAAE,kCAAkC,EAAE;QACpD,gBAAgB,EAAEiB,YAAY,KAAK;MACpC,CAAE;IACH,CAAE,CAAC;EACJ;EAEA,oBACCR,KAAA,CAACL,MAAM;IACNmB,qBAAqB;IACrBX,GAAG,EAAGA;IACN;IAAA;IACA,gBACCQ,IAAI,KAAK,kBAAkB,IAAIA,IAAI,KAAK,eAAe,GACpDD,UAAU,GACVK,SACH;IACDJ,IAAI,EAAGA,IAAM;IACbJ,IAAI,EAAGC,YAAY,KAAK,MAAM,GAAGD,IAAI,GAAGQ,SAAW;IACnDT,SAAS,EAAGA,SAAW;IACvBU,sBAAsB;IAAA,GACjBH,WAAW;IAAAT,QAAA,gBAEhBN,IAAA;MAAMQ,SAAS,EAAC,4BAA4B;MAAAF,QAAA,EAAGA;IAAQ,CAAQ,CAAC,EAC9D,CAAEQ,MAAM,iBACTd,IAAA,CAACJ,QAAQ;MACRY,SAAS,EAAC,gCAAgC;MAC1CG,QAAQ,EAAGA;IAAU,CACrB,CACD,EACC,CAAEG,MAAM,IAAIL,IAAI,IAAIC,YAAY,KAAK,OAAO,iBAC7CV,IAAA,CAACF,IAAI;MAACW,IAAI,EAAGA;IAAM,CAAE,CACrB,EACCK,MAAM;EAAA,CACD,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,QAAQ,GAAGxB,UAAU,CAAEQ,mBAAoB,CAAC;AAEzD,eAAegB,QAAQ","ignoreList":[]}

package/build-module/validated-form-controls/components/checkbox-control.js CHANGED Viewed

@@ -12,7 +12,8 @@ import CheckboxControl from '../../checkbox-control';
 import { jsx as _jsx } from "react/jsx-runtime";
 const UnforwardedValidatedCheckboxControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -24,9 +25,10 @@ const UnforwardedValidatedCheckboxControl = ({
     required: required,
     markWhenOptional: markWhenOptional,
     ref: mergedRefs,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current?.querySelector('input[type="checkbox"]'),
     children: /*#__PURE__*/_jsx(CheckboxControl, {
       __nextHasNoMarginBottom: true,

package/build-module/validated-form-controls/components/checkbox-control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useMergeRefs","forwardRef","useRef","ControlWithError","CheckboxControl","jsx","_jsx","UnforwardedValidatedCheckboxControl","required","~~customValidator~~","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","checked","ref","current","getValidityTarget","querySelector","children","__nextHasNoMarginBottom","value","ValidatedCheckboxControl"],"sources":["@wordpress/components/src/validated-form-controls/components/checkbox-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 CheckboxControl from '../../checkbox-control';\nimport type { CheckboxControlProps } from '../../checkbox-control/types';\n\ntype Value = CheckboxControlProps[ 'checked' ];\n\nconst UnforwardedValidatedCheckboxControl = (\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 CheckboxControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLDivElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.checked );\n\n\treturn (\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[type=\"checkbox\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<CheckboxControl\n\t\t\t\t__nextHasNoMarginBottom\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// TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedCheckboxControl = forwardRef(\n\tUnforwardedValidatedCheckboxControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,oBAAoB;AACjD,SAASC,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,eAAe,MAAM,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKrD,MAAMC,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,~~eAAe~~;~~EACfC~~,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,~~GAAGZ~~,MAAM,CAAoB,IAAK,CAAC;EAC1D,~~MAAMa~~,UAAU,~~GAAGf~~,YAAY,CAAE,~~CAAEa~~,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,~~GAAGd~~,MAAM,~~CAAWU~~,SAAS,CAACK,OAAQ,CAAC;EAErD,~~oBACCX~~,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;~~IACrBG~~,gBAAgB,EAAGA,gBAAkB;IACrCO,GAAG,EAAGH,UAAY;~~IAClBN~~,~~eAAe~~,EAAGA,CAAA,KAAM;~~MACvB~~,OAAOA,~~eAAe~~,~~GAAIO~~,QAAQ,CAACG,OAAQ,CAAC;~~IAC7C~~,CAAG;~~IACHC~~,iBAAiB,EAAGA,CAAA,KACnBN,iBAAiB,CAACK,OAAO,EAAEE,aAAa,CACvC,wBACD,CACA;IAAAC,QAAA,~~eAEDhB~~,IAAA,CAACF,eAAe;~~MACfmB~~,uBAAuB;MACvBb,QAAQ,EAAKc,KAAK,IAAM;QACvBR,QAAQ,CAACG,OAAO,GAAGK,KAAK;QACxBd,QAAQ,GAAIc,KAAM,CAAC;MACpB;MACA;MAAA;MAAA,GACKZ;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMa,wBAAwB,~~GAAGxB~~,UAAU,CACjDM,mCACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["useMergeRefs","forwardRef","useRef","ControlWithError","CheckboxControl","jsx","_jsx","UnforwardedValidatedCheckboxControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","checked","ref","current","getValidityTarget","querySelector","children","__nextHasNoMarginBottom","value","ValidatedCheckboxControl"],"sources":["@wordpress/components/src/validated-form-controls/components/checkbox-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 CheckboxControl from '../../checkbox-control';\nimport type { CheckboxControlProps } from '../../checkbox-control/types';\n\ntype Value = CheckboxControlProps[ 'checked' ];\n\nconst UnforwardedValidatedCheckboxControl = (\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 CheckboxControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLDivElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.checked );\n\n\treturn (\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[type=\"checkbox\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<CheckboxControl\n\t\t\t\t__nextHasNoMarginBottom\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// TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedCheckboxControl = forwardRef(\n\tUnforwardedValidatedCheckboxControl\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,oBAAoB;AACjD,SAASC,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,eAAe,MAAM,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKrD,MAAMC,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGb,MAAM,CAAoB,IAAK,CAAC;EAC1D,MAAMc,UAAU,GAAGhB,YAAY,CAAE,CAAEc,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGf,MAAM,CAAWW,SAAS,CAACK,OAAQ,CAAC;EAErD,oBACCZ,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCO,GAAG,EAAGH,UAAY;IAClBP,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACG,OAAQ,CAAC;IACxC,CAAG;IACHV,cAAc,EAAGA,cAAgB;IACjCW,iBAAiB,EAAGA,CAAA,KACnBN,iBAAiB,CAACK,OAAO,EAAEE,aAAa,CACvC,wBACD,CACA;IAAAC,QAAA,eAEDjB,IAAA,CAACF,eAAe;MACfoB,uBAAuB;MACvBb,QAAQ,EAAKc,KAAK,IAAM;QACvBR,QAAQ,CAACG,OAAO,GAAGK,KAAK;QACxBd,QAAQ,GAAIc,KAAM,CAAC;MACpB;MACA;MAAA;MAAA,GACKZ;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMa,wBAAwB,GAAGzB,UAAU,CACjDM,mCACD,CAAC","ignoreList":[]}

package/build-module/validated-form-controls/components/combobox-control.js CHANGED Viewed

@@ -12,7 +12,8 @@ import ComboboxControl from '../../combobox-control';
 import { jsx as _jsx } from "react/jsx-runtime";
 const UnforwardedValidatedComboboxControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -36,9 +37,10 @@ const UnforwardedValidatedComboboxControl = ({
       required: required,
       markWhenOptional: markWhenOptional,
       ref: mergedRefs,
-      customValidator: () => {
-        return customValidator?.(valueRef.current);
+      onValidate: () => {
+        return onValidate?.(valueRef.current);
       },
+      customValidity: customValidity,
       getValidityTarget: () => validityTargetRef.current?.querySelector('input[role="combobox"]'),
       children: /*#__PURE__*/_jsx(ComboboxControl, {
         __nextHasNoMarginBottom: true,

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

	@@ -1 +1 @@
1	- {"version":3,"names":["useMergeRefs","forwardRef","useEffect","useRef","ControlWithError","ComboboxControl","jsx","_jsx","UnforwardedValidatedComboboxControl","required","~~customValidator~~","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","input","current","querySelector","ref","getValidityTarget","children","__nextHasNoMarginBottom","__next40pxDefaultSize","ValidatedComboboxControl"],"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":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,oBAAoB;AACjD,SAASC,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAElE;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,eAAe,MAAM,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKrD,MAAMC,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,~~eAAe~~;~~EACfC~~,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,~~GAAGZ~~,MAAM,CAAsB,IAAK,CAAC;EAC5D,~~MAAMa~~,UAAU,~~GAAGhB~~,YAAY,CAAE,~~CAAEc~~,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,~~GAAGd~~,MAAM,~~CAAWU~~,SAAS,CAACK,KAAM,CAAC;;EAEnD;EACA;~~EACAhB~~,SAAS,CAAE,MAAM;IAChB,~~MAAMiB~~,KAAK,GACVJ,iBAAiB,CAACK,OAAO,EAAEC,aAAa,CACvC,wBACD,CAAC;IACF,IAAKF,KAAK,EAAG;MACZA,KAAK,~~CAACV~~,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACnC;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB;IAAA;IACC;IACAF,IAAA,CAACH,gBAAgB;MAChBK,QAAQ,EAAGA,QAAU;~~MACrBG~~,gBAAgB,EAAGA,gBAAkB;MACrCU,GAAG,EAAGN,UAAY;~~MAClBN~~,~~eAAe~~,EAAGA,CAAA,KAAM;~~QACvB~~,OAAOA,~~eAAe~~,~~GAAIO~~,QAAQ,CAACG,OAAQ,CAAC;~~MAC7C~~,CAAG;~~MACHG~~,iBAAiB,EAAGA,CAAA,KACnBR,iBAAiB,CAACK,OAAO,EAAEC,aAAa,CACvC,wBACD,CACA;MAAAG,QAAA,~~eAEDjB~~,IAAA,CAACF,eAAe;~~QACfoB~~,uBAAuB;QACvBC,qBAAqB;QAAA,GAChBb,SAAS;QACdF,QAAQ,EAAKO,KAAK,IAAM;UACvBD,QAAQ,CAACG,OAAO,GAAGF,KAAK;UACxBP,QAAQ,GAAIO,KAAM,CAAC;QACpB;MAAG,CACH;IAAC,CACe;EAAC;AAErB,CAAC;AAED,OAAO,MAAMS,wBAAwB,~~GAAG1B~~,UAAU,CACjDO,mCACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["useMergeRefs","forwardRef","useEffect","useRef","ControlWithError","ComboboxControl","jsx","_jsx","UnforwardedValidatedComboboxControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","input","current","querySelector","ref","getValidityTarget","children","__nextHasNoMarginBottom","__next40pxDefaultSize","ValidatedComboboxControl"],"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":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,oBAAoB;AACjD,SAASC,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAElE;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,eAAe,MAAM,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKrD,MAAMC,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGb,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMc,UAAU,GAAGjB,YAAY,CAAE,CAAEe,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGf,MAAM,CAAWW,SAAS,CAACK,KAAM,CAAC;;EAEnD;EACA;EACAjB,SAAS,CAAE,MAAM;IAChB,MAAMkB,KAAK,GACVJ,iBAAiB,CAACK,OAAO,EAAEC,aAAa,CACvC,wBACD,CAAC;IACF,IAAKF,KAAK,EAAG;MACZA,KAAK,CAACX,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACnC;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB;IAAA;IACC;IACAF,IAAA,CAACH,gBAAgB;MAChBK,QAAQ,EAAGA,QAAU;MACrBI,gBAAgB,EAAGA,gBAAkB;MACrCU,GAAG,EAAGN,UAAY;MAClBP,UAAU,EAAGA,CAAA,KAAM;QAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACG,OAAQ,CAAC;MACxC,CAAG;MACHV,cAAc,EAAGA,cAAgB;MACjCa,iBAAiB,EAAGA,CAAA,KACnBR,iBAAiB,CAACK,OAAO,EAAEC,aAAa,CACvC,wBACD,CACA;MAAAG,QAAA,eAEDlB,IAAA,CAACF,eAAe;QACfqB,uBAAuB;QACvBC,qBAAqB;QAAA,GAChBb,SAAS;QACdF,QAAQ,EAAKO,KAAK,IAAM;UACvBD,QAAQ,CAACG,OAAO,GAAGF,KAAK;UACxBP,QAAQ,GAAIO,KAAM,CAAC;QACpB;MAAG,CACH;IAAC,CACe;EAAC;AAErB,CAAC;AAED,OAAO,MAAMS,wBAAwB,GAAG3B,UAAU,CACjDO,mCACD,CAAC","ignoreList":[]}

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

@@ -11,7 +11,8 @@ import CustomSelectControl from '../../custom-select-control';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const UnforwardedValidatedCustomSelectControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -24,9 +25,10 @@ const UnforwardedValidatedCustomSelectControl = ({
     children: [/*#__PURE__*/_jsx(ControlWithError, {
       required: required,
       markWhenOptional: markWhenOptional,
-      customValidator: () => {
-        return customValidator?.(valueRef.current);
+      onValidate: () => {
+        return onValidate?.(valueRef.current);
       },
+      customValidity: customValidity,
       getValidityTarget: () => validityTargetRef.current,
       children: /*#__PURE__*/_jsx(CustomSelectControl
       // TODO: Upstream limitation - Required isn't passed down correctly,

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

	@@ -1 +1 @@
1	- {"version":3,"names":["forwardRef","useRef","ControlWithError","CustomSelectControl","jsx","_jsx","jsxs","_jsxs","UnforwardedValidatedCustomSelectControl","required","~~customValidator~~","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","valueRef","value","className","ref","children","current","getValidityTarget","__next40pxDefaultSize","selectedItem","tabIndex","key","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedCustomSelectControl"],"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":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,mBAAmB,MAAM,6BAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAU9D,MAAMC,uCAAuC,GAAGA,CAC/C;EACCC,QAAQ;EACRC,~~eAAe~~;~~EACfC~~,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,~~GAAGd~~,MAAM,CAAuB,IAAK,CAAC;EAC7D,~~MAAMe~~,QAAQ,~~GAAGf~~,MAAM,~~CAAWY~~,SAAS,CAACI,KAAM,CAAC;EAEnD,~~oBACCV~~,KAAA;~~IACCW~~,SAAS,EAAC,2DAA2D;IACrEC,GAAG,EAAGL,YAAc;IAAAM,QAAA,~~gBAEpBf~~,IAAA,CAACH,gBAAgB;MAChBO,QAAQ,EAAGA,QAAU;~~MACrBG~~,gBAAgB,EAAGA,gBAAkB;~~MACrCF~~,~~eAAe~~,EAAGA,CAAA,KAAM;~~QACvB~~,OAAOA,~~eAAe~~,~~GAAIM~~,QAAQ,CAACK,OAAQ,CAAC;~~MAC7C~~,CAAG;~~MACHC~~,iBAAiB,EAAGA,CAAA,KAAMP,iBAAiB,CAACM,OAAS;MAAAD,QAAA,~~eAErDf~~,IAAA,CAACF;MACA;MACA;MAAA;~~QACAoB~~,qBAAqB;QACrBZ,QAAQ,EAAKM,KAAK,IAAM;UACvBD,QAAQ,CAACK,OAAO,GAAGJ,KAAK,CAACO,YAAY;UACrCb,QAAQ,GAAIM,KAAM,CAAC;QACpB,CAAG;QAAA,GACEJ;MAAS,CACd;IAAC,CACe,CAAC,~~eACnBN~~,KAAA;~~MACCW~~,SAAS,EAAC,8CAA8C;MACxDC,GAAG,EAAGJ,iBAAmB;~~MACzBN~~,QAAQ,EAAGA,QAAU;~~MACrBgB~~,QAAQ,EAAG,CAAC,CAAG;MACfR,KAAK,EAAGJ,SAAS,CAACI,KAAK,EAAES,GAAG,GAAG,UAAU,GAAG,EAAI;MAChDf,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrBgB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,mBACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX,CAAG;MAAAZ,QAAA,~~gBAEHf~~,IAAA;~~QAAQY~~,KAAK,EAAC,EAAE;QAAAG,QAAA,EAAC;MAAY,CAAQ,CAAC,~~eACtCf~~,IAAA;~~QAAQY~~,KAAK,EAAC,UAAU;QAAAG,QAAA,EAAC;MAAa,CAAQ,CAAC;IAAA,CACxC,CAAC;EAAA,CACL,CAAC;AAER,CAAC;AAED,OAAO,MAAMa,4BAA4B,~~GAAGjC~~,UAAU,CACrDQ,uCACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["forwardRef","useRef","ControlWithError","CustomSelectControl","jsx","_jsx","jsxs","_jsxs","UnforwardedValidatedCustomSelectControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","valueRef","value","className","ref","children","current","getValidityTarget","__next40pxDefaultSize","selectedItem","tabIndex","key","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedCustomSelectControl"],"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":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,mBAAmB,MAAM,6BAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAU9D,MAAMC,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,GAAGf,MAAM,CAAuB,IAAK,CAAC;EAC7D,MAAMgB,QAAQ,GAAGhB,MAAM,CAAWa,SAAS,CAACI,KAAM,CAAC;EAEnD,oBACCX,KAAA;IACCY,SAAS,EAAC,2DAA2D;IACrEC,GAAG,EAAGL,YAAc;IAAAM,QAAA,gBAEpBhB,IAAA,CAACH,gBAAgB;MAChBO,QAAQ,EAAGA,QAAU;MACrBI,gBAAgB,EAAGA,gBAAkB;MACrCH,UAAU,EAAGA,CAAA,KAAM;QAClB,OAAOA,UAAU,GAAIO,QAAQ,CAACK,OAAQ,CAAC;MACxC,CAAG;MACHX,cAAc,EAAGA,cAAgB;MACjCY,iBAAiB,EAAGA,CAAA,KAAMP,iBAAiB,CAACM,OAAS;MAAAD,QAAA,eAErDhB,IAAA,CAACF;MACA;MACA;MAAA;QACAqB,qBAAqB;QACrBZ,QAAQ,EAAKM,KAAK,IAAM;UACvBD,QAAQ,CAACK,OAAO,GAAGJ,KAAK,CAACO,YAAY;UACrCb,QAAQ,GAAIM,KAAM,CAAC;QACpB,CAAG;QAAA,GACEJ;MAAS,CACd;IAAC,CACe,CAAC,eACnBP,KAAA;MACCY,SAAS,EAAC,8CAA8C;MACxDC,GAAG,EAAGJ,iBAAmB;MACzBP,QAAQ,EAAGA,QAAU;MACrBiB,QAAQ,EAAG,CAAC,CAAG;MACfR,KAAK,EAAGJ,SAAS,CAACI,KAAK,EAAES,GAAG,GAAG,UAAU,GAAG,EAAI;MAChDf,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrBgB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,mBACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX,CAAG;MAAAZ,QAAA,gBAEHhB,IAAA;QAAQa,KAAK,EAAC,EAAE;QAAAG,QAAA,EAAC;MAAY,CAAQ,CAAC,eACtChB,IAAA;QAAQa,KAAK,EAAC,UAAU;QAAAG,QAAA,EAAC;MAAa,CAAQ,CAAC;IAAA,CACxC,CAAC;EAAA,CACL,CAAC;AAER,CAAC;AAED,OAAO,MAAMa,4BAA4B,GAAGlC,UAAU,CACrDQ,uCACD,CAAC","ignoreList":[]}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"names":["forwardRef","useRef","useMergeRefs","ControlWithError","InputControl","jsx","_jsx","UnforwardedValidatedInputControl","required","~~customValidator~~","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","current","getValidityTarget","children","__next40pxDefaultSize","ref","args","ValidatedInputControl"],"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":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;AACvD,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,YAAY,MAAM,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAK/C,MAAMC,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,~~eAAe~~;~~EACfC~~,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAKiD,CAAC,EACtDC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,~~GAAGb~~,MAAM,CAAsB,IAAK,CAAC;EAC5D,~~MAAMc~~,UAAU,~~GAAGb~~,YAAY,CAAE,~~CAAEW~~,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,~~GAAGf~~,MAAM,~~CAAWW~~,SAAS,CAACK,KAAM,CAAC;EAEnD,~~oBACCX~~,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;~~IACrBG~~,gBAAgB,EAAGA,gBAAkB;~~IACrCF~~,~~eAAe~~,EAAGA,CAAA,KAAM;~~MACvB~~,OAAOA,~~eAAe~~,~~GAAIO~~,QAAQ,CAACE,OAAQ,CAAC;~~IAC7C~~,CAAG;~~IACHC~~,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,~~eAErDd~~,IAAA,CAACF,YAAY;~~MACZiB~~,qBAAqB;MACrBC,GAAG,EAAGP,UAAY;MAClBL,QAAQ,EAAGA,CAAEO,KAAK,EAAE,GAAGM,IAAI,KAAM;QAChCP,QAAQ,CAACE,OAAO,GAAGD,KAAK;QACxBP,QAAQ,GAAIO,KAAK,EAAE,GAAGM,IAAK,CAAC;MAC7B,CAAG;MAAA,GACEX;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,qBAAqB,~~GAAGxB~~,UAAU,CAC9CO,gCACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["forwardRef","useRef","useMergeRefs","ControlWithError","InputControl","jsx","_jsx","UnforwardedValidatedInputControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","mergedRefs","valueRef","value","current","getValidityTarget","children","__next40pxDefaultSize","ref","args","ValidatedInputControl"],"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":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;AACvD,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,YAAY,MAAM,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAK/C,MAAMC,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAKiD,CAAC,EACtDC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAGd,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMe,UAAU,GAAGd,YAAY,CAAE,CAAEY,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAME,QAAQ,GAAGhB,MAAM,CAAWY,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACCZ,IAAA,CAACH,gBAAgB;IAChBK,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACE,OAAQ,CAAC;IACxC,CAAG;IACHT,cAAc,EAAGA,cAAgB;IACjCU,iBAAiB,EAAGA,CAAA,KAAML,iBAAiB,CAACI,OAAS;IAAAE,QAAA,eAErDf,IAAA,CAACF,YAAY;MACZkB,qBAAqB;MACrBC,GAAG,EAAGP,UAAY;MAClBL,QAAQ,EAAGA,CAAEO,KAAK,EAAE,GAAGM,IAAI,KAAM;QAChCP,QAAQ,CAACE,OAAO,GAAGD,KAAK;QACxBP,QAAQ,GAAIO,KAAK,EAAE,GAAGM,IAAK,CAAC;MAC7B,CAAG;MAAA,GACEX;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAED,OAAO,MAAMY,qBAAqB,GAAGzB,UAAU,CAC9CO,gCACD,CAAC","ignoreList":[]}

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

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

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

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