npm - @wordpress/components - Versions diffs - 30.1.0 → 30.2.0 - Mend

@wordpress/components 30.1.0 → 30.2.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 (211) hide show

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_shortcut","_button","_icon","_jsxRuntime","UnforwardedMenuItem","props","ref","children","info","className","icon","iconPosition","shortcut","isSelected","role","suffix","buttonProps","clsx","jsxs","jsx","cloneElement","default","__next40pxDefaultSize","undefined","MenuItem","exports","forwardRef","_default"],"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":";;;;;;;AAIA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AAA2B,IAAAK,WAAA,GAAAL,OAAA;AAhB3B;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASM,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,GAAG,IAAAQ,aAAI,EAAE,8BAA8B,EAAER,SAAU,CAAC;EAE7D,IAAKD,IAAI,EAAG;IACXD,QAAQ,gBACP,IAAAJ,WAAA,CAAAe,IAAA;MAAMT,SAAS,EAAC,oCAAoC;MAAAF,QAAA,gBACnD,IAAAJ,WAAA,CAAAgB,GAAA;QAAMV,SAAS,EAAC,4BAA4B;QAAAF,QAAA,EAAGA;MAAQ,CAAQ,CAAC,eAChE,IAAAJ,WAAA,CAAAgB,GAAA;QAAMV,SAAS,EAAC,4BAA4B;QAAAF,QAAA,EAAGC;MAAI,CAAQ,CAAC;IAAA,CACvD,CACN;EACF;EAEA,IAAKE,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAG;IACvCA,IAAI,GAAG,IAAAU,qBAAY,EAAEV,IAAI,EAAE;MAC1BD,SAAS,EAAE,IAAAQ,aAAI,EAAE,kCAAkC,EAAE;QACpD,gBAAgB,EAAEN,YAAY,KAAK;MACpC,CAAE;IACH,CAAE,CAAC;EACJ;EAEA,oBACC,IAAAR,WAAA,CAAAe,IAAA,EAACjB,OAAA,CAAAoB,OAAM;IACNC,qBAAqB;IACrBhB,GAAG,EAAGA;IACN;IAAA;IACA,gBACCQ,IAAI,KAAK,kBAAkB,IAAIA,IAAI,KAAK,eAAe,GACpDD,UAAU,GACVU,SACH;IACDT,IAAI,EAAGA,IAAM;IACbJ,IAAI,EAAGC,YAAY,KAAK,MAAM,GAAGD,IAAI,GAAGa,SAAW;IACnDd,SAAS,EAAGA,SAAW;IAAA,~~GAClBO~~,WAAW;IAAAT,QAAA,gBAEhB,IAAAJ,WAAA,CAAAgB,GAAA;MAAMV,SAAS,EAAC,4BAA4B;MAAAF,QAAA,EAAGA;IAAQ,CAAQ,CAAC,EAC9D,CAAEQ,MAAM,iBACT,IAAAZ,WAAA,CAAAgB,GAAA,EAACnB,SAAA,CAAAqB,OAAQ;MACRZ,SAAS,EAAC,gCAAgC;MAC1CG,QAAQ,EAAGA;IAAU,CACrB,CACD,EACC,CAAEG,MAAM,IAAIL,IAAI,IAAIC,YAAY,KAAK,OAAO,iBAC7C,IAAAR,WAAA,CAAAgB,GAAA,EAACjB,KAAA,CAAAmB,OAAI;MAACX,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;AACO,~~MAAMS~~,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,mBAAU,~~EAAEtB~~,mBAAoB,CAAC;AAAC,~~IAAAuB~~,QAAA,GAAAF,OAAA,~~CAAAJ~~,OAAA,~~GAE3CG~~,QAAQ","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_shortcut","_button","_icon","_jsxRuntime","UnforwardedMenuItem","props","ref","children","info","className","icon","iconPosition","shortcut","isSelected","role","suffix","buttonProps","clsx","jsxs","jsx","cloneElement","default","__next40pxDefaultSize","undefined","accessibleWhenDisabled","MenuItem","exports","forwardRef","_default"],"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":";;;;;;;AAIA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AAA2B,IAAAK,WAAA,GAAAL,OAAA;AAhB3B;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASM,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,GAAG,IAAAQ,aAAI,EAAE,8BAA8B,EAAER,SAAU,CAAC;EAE7D,IAAKD,IAAI,EAAG;IACXD,QAAQ,gBACP,IAAAJ,WAAA,CAAAe,IAAA;MAAMT,SAAS,EAAC,oCAAoC;MAAAF,QAAA,gBACnD,IAAAJ,WAAA,CAAAgB,GAAA;QAAMV,SAAS,EAAC,4BAA4B;QAAAF,QAAA,EAAGA;MAAQ,CAAQ,CAAC,eAChE,IAAAJ,WAAA,CAAAgB,GAAA;QAAMV,SAAS,EAAC,4BAA4B;QAAAF,QAAA,EAAGC;MAAI,CAAQ,CAAC;IAAA,CACvD,CACN;EACF;EAEA,IAAKE,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAG;IACvCA,IAAI,GAAG,IAAAU,qBAAY,EAAEV,IAAI,EAAE;MAC1BD,SAAS,EAAE,IAAAQ,aAAI,EAAE,kCAAkC,EAAE;QACpD,gBAAgB,EAAEN,YAAY,KAAK;MACpC,CAAE;IACH,CAAE,CAAC;EACJ;EAEA,oBACC,IAAAR,WAAA,CAAAe,IAAA,EAACjB,OAAA,CAAAoB,OAAM;IACNC,qBAAqB;IACrBhB,GAAG,EAAGA;IACN;IAAA;IACA,gBACCQ,IAAI,KAAK,kBAAkB,IAAIA,IAAI,KAAK,eAAe,GACpDD,UAAU,GACVU,SACH;IACDT,IAAI,EAAGA,IAAM;IACbJ,IAAI,EAAGC,YAAY,KAAK,MAAM,GAAGD,IAAI,GAAGa,SAAW;IACnDd,SAAS,EAAGA,SAAW;IACvBe,sBAAsB;IAAA,GACjBR,WAAW;IAAAT,QAAA,gBAEhB,IAAAJ,WAAA,CAAAgB,GAAA;MAAMV,SAAS,EAAC,4BAA4B;MAAAF,QAAA,EAAGA;IAAQ,CAAQ,CAAC,EAC9D,CAAEQ,MAAM,iBACT,IAAAZ,WAAA,CAAAgB,GAAA,EAACnB,SAAA,CAAAqB,OAAQ;MACRZ,SAAS,EAAC,gCAAgC;MAC1CG,QAAQ,EAAGA;IAAU,CACrB,CACD,EACC,CAAEG,MAAM,IAAIL,IAAI,IAAIC,YAAY,KAAK,OAAO,iBAC7C,IAAAR,WAAA,CAAAgB,GAAA,EAACjB,KAAA,CAAAmB,OAAI;MAACX,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;AACO,MAAMU,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,mBAAU,EAAEvB,mBAAoB,CAAC;AAAC,IAAAwB,QAAA,GAAAF,OAAA,CAAAL,OAAA,GAE3CI,QAAQ","ignoreList":[]}

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

@@ -20,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 const UnforwardedValidatedCheckboxControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -32,9 +33,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__*/(0, _jsxRuntime.jsx)(_checkboxControl.default, {
       __nextHasNoMarginBottom: true,

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_compose","require","_element","_controlWithError","_checkboxControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedCheckboxControl","required","~~customValidator~~","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","checked","jsx","ControlWithError","ref","current","getValidityTarget","querySelector","children","default","__nextHasNoMarginBottom","value","ValidatedCheckboxControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqD,IAAAK,WAAA,GAAAL,OAAA;AAXrD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,~~eAAe~~;~~EACfC~~,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAoB,IAAK,CAAC;EAC1D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,OAAQ,CAAC;EAErD,oBACC,~~IAAAb~~,WAAA,~~CAAAc~~,GAAA,~~EAACjB~~,iBAAA,~~CAAAkB~~,gBAAgB;~~IAChBb~~,QAAQ,EAAGA,QAAU;~~IACrBG~~,gBAAgB,EAAGA,gBAAkB;IACrCW,GAAG,EAAGN,UAAY;~~IAClBP~~,~~eAAe~~,EAAGA,CAAA,KAAM;~~MACvB~~,OAAOA,~~eAAe~~,~~GAAIS~~,QAAQ,CAACK,OAAQ,CAAC;~~IAC7C~~,CAAG;~~IACHC~~,iBAAiB,EAAGA,CAAA,KACnBV,iBAAiB,CAACS,OAAO,EAAEE,aAAa,CACvC,wBACD,CACA;IAAAC,QAAA,eAED,~~IAAApB~~,WAAA,~~CAAAc~~,GAAA,~~EAAChB~~,gBAAA,~~CAAAuB~~,OAAe;MACfC,uBAAuB;MACvBlB,QAAQ,EAAKmB,KAAK,IAAM;QACvBX,QAAQ,CAACK,OAAO,GAAGM,KAAK;QACxBnB,QAAQ,GAAImB,KAAM,CAAC;MACpB;MACA;MAAA;MAAA,GACKjB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMkB,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,~~EACjDzB~~,mCACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["_compose","require","_element","_controlWithError","_checkboxControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedCheckboxControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","checked","jsx","ControlWithError","ref","current","getValidityTarget","querySelector","children","default","__nextHasNoMarginBottom","value","ValidatedCheckboxControl","exports","forwardRef"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqD,IAAAK,WAAA,GAAAL,OAAA;AAXrD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAoB,IAAK,CAAC;EAC1D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,OAAQ,CAAC;EAErD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCW,GAAG,EAAGN,UAAY;IAClBR,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACK,OAAQ,CAAC;IACxC,CAAG;IACHd,cAAc,EAAGA,cAAgB;IACjCe,iBAAiB,EAAGA,CAAA,KACnBV,iBAAiB,CAACS,OAAO,EAAEE,aAAa,CACvC,wBACD,CACA;IAAAC,QAAA,eAED,IAAArB,WAAA,CAAAe,GAAA,EAACjB,gBAAA,CAAAwB,OAAe;MACfC,uBAAuB;MACvBlB,QAAQ,EAAKmB,KAAK,IAAM;QACvBX,QAAQ,CAACK,OAAO,GAAGM,KAAK;QACxBnB,QAAQ,GAAImB,KAAM,CAAC;MACpB;MACA;MAAA;MAAA,GACKjB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMkB,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjD1B,mCACD,CAAC","ignoreList":[]}

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

@@ -20,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 const UnforwardedValidatedComboboxControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -44,9 +45,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__*/(0, _jsxRuntime.jsx)(_comboboxControl.default, {
         __nextHasNoMarginBottom: true,

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

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

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

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

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","_compose","_controlWithError","_numberControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedNumberControl","required","~~customValidator~~","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","ref","args","ValidatedNumberControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/number-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport NumberControl from '../../number-control';\nimport type { ValidatedControlProps } from './types';\nimport type { NumberControlProps } from '../../number-control/types';\n\ntype Value = NumberControlProps[ 'value' ];\n\nconst UnforwardedValidatedNumberControl = (\n\t{\n\t\trequired,\n\t\~~tcustomValidator~~,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof NumberControl >,\n\t\t'__next40pxDefaultSize'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\~~tcustomValidator~~={ () => {\n\t\t\t\treturn ~~customValidator~~?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<NumberControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\n\t\t\t\t// TODO: Upstream limitation - When form is submitted when value is undefined, it will\n\t\t\t\t// automatically set a clamped value (as defined by `min` attribute, so 0 by default).\n\t\t\t\tonChange={ ( value, ...args ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value, ...args );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedNumberControl = forwardRef(\n\tUnforwardedValidatedNumberControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAVjD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,~~eAAe~~;~~EACfC~~,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,~~IAAAb~~,WAAA,~~CAAAc~~,GAAA,~~EAACjB~~,iBAAA,~~CAAAkB~~,gBAAgB;~~IAChBb~~,QAAQ,EAAGA,QAAU;~~IACrBG~~,gBAAgB,EAAGA,gBAAkB;~~IACrCF~~,~~eAAe~~,EAAGA,CAAA,KAAM;~~MACvB~~,OAAOA,~~eAAe~~,~~GAAIS~~,QAAQ,CAACI,OAAQ,CAAC;~~IAC7C~~,CAAG;~~IACHC~~,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,~~IAAAlB~~,WAAA,~~CAAAc~~,GAAA,~~EAAChB~~,cAAA,~~CAAAqB~~,OAAa;MACbC,qBAAqB;MACrBC,GAAG,EAAGX;MACN;MACA;MAAA;MACAN,QAAQ,EAAGA,CAAES,KAAK,EAAE,GAAGS,IAAI,KAAM;QAChCV,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAK,EAAE,GAAGS,IAAK,CAAC;MAC7B,CAAG;MAAA,GACEhB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/~~CxB~~,iCACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["_element","require","_compose","_controlWithError","_numberControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedNumberControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","ref","args","ValidatedNumberControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/number-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport NumberControl from '../../number-control';\nimport type { ValidatedControlProps } from './types';\nimport type { NumberControlProps } from '../../number-control/types';\n\ntype Value = NumberControlProps[ 'value' ];\n\nconst UnforwardedValidatedNumberControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof NumberControl >,\n\t\t'__next40pxDefaultSize'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<NumberControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\n\t\t\t\t// TODO: Upstream limitation - When form is submitted when value is undefined, it will\n\t\t\t\t// automatically set a clamped value (as defined by `min` attribute, so 0 by default).\n\t\t\t\tonChange={ ( value, ...args ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value, ...args );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedNumberControl = forwardRef(\n\tUnforwardedValidatedNumberControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAVjD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACI,OAAQ,CAAC;IACxC,CAAG;IACHb,cAAc,EAAGA,cAAgB;IACjCc,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAnB,WAAA,CAAAe,GAAA,EAACjB,cAAA,CAAAsB,OAAa;MACbC,qBAAqB;MACrBC,GAAG,EAAGX;MACN;MACA;MAAA;MACAN,QAAQ,EAAGA,CAAES,KAAK,EAAE,GAAGS,IAAI,KAAM;QAChCV,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAK,EAAE,GAAGS,IAAK,CAAC;MAC7B,CAAG;MAAA,GACEhB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/CzB,iCACD,CAAC","ignoreList":[]}

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

@@ -20,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 const UnforwardedValidatedRadioControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -34,9 +35,10 @@ const UnforwardedValidatedRadioControl = ({
     // TODO: Upstream limitation - RadioControl does not accept a ref.
     ,
     ref: mergedRefs,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity: customValidity,
     getValidityTarget: () => validityTargetRef.current?.querySelector('input[type="radio"]'),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radioControl.default, {
       onChange: value => {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_compose","require","_element","_controlWithError","_radioControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedRadioControl","required","~~customValidator~~","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","selected","jsx","ControlWithError","ref","current","getValidityTarget","querySelector","children","default","value","ValidatedRadioControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/radio-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport RadioControl from '../../radio-control';\nimport type { RadioControlProps } from '../../radio-control/types';\n\ntype Value = RadioControlProps[ 'selected' ];\n\nconst UnforwardedValidatedRadioControl = (\n\t{\n\t\trequired,\n\t\~~tcustomValidator~~,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: React.ComponentProps< typeof RadioControl > &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLDivElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.selected );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t// TODO: Upstream limitation - RadioControl does not accept a ref.\n\t\t\tref={ mergedRefs }\n\t\t\~~tcustomValidator~~={ () => {\n\t\t\t\treturn ~~customValidator~~?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () =>\n\t\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t\t'input[type=\"radio\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<RadioControl\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedRadioControl = forwardRef(\n\tUnforwardedValidatedRadioControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAX/C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,~~eAAe~~;~~EACfC~~,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAE0B,CAAC,EAC/BC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAoB,IAAK,CAAC;EAC1D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,QAAS,CAAC;EAEtD,oBACC,~~IAAAb~~,WAAA,~~CAAAc~~,GAAA,~~EAACjB~~,iBAAA,~~CAAAkB~~,gBAAgB;~~IAChBb~~,QAAQ,EAAGA,QAAU;~~IACrBG~~,gBAAgB,EAAGA;IACnB;IAAA;IACAW,GAAG,EAAGN,UAAY;~~IAClBP~~,~~eAAe~~,EAAGA,CAAA,KAAM;~~MACvB~~,OAAOA,~~eAAe~~,~~GAAIS~~,QAAQ,CAACK,OAAQ,CAAC;~~IAC7C~~,CAAG;~~IACHC~~,iBAAiB,EAAGA,CAAA,KACnBV,iBAAiB,CAACS,OAAO,EAAEE,aAAa,CACvC,qBACD,CACA;IAAAC,QAAA,eAED,~~IAAApB~~,WAAA,~~CAAAc~~,GAAA,~~EAAChB~~,aAAA,~~CAAAuB~~,OAAY;MACZjB,QAAQ,EAAKkB,KAAK,IAAM;QACvBV,QAAQ,CAACK,OAAO,GAAGK,KAAK;QACxBlB,QAAQ,GAAIkB,KAAM,CAAC;MACpB,CAAG;MAAA,GACEhB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,~~EAC9CxB~~,gCACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["_compose","require","_element","_controlWithError","_radioControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedRadioControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","selected","jsx","ControlWithError","ref","current","getValidityTarget","querySelector","children","default","value","ValidatedRadioControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/radio-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport RadioControl from '../../radio-control';\nimport type { RadioControlProps } from '../../radio-control/types';\n\ntype Value = RadioControlProps[ 'selected' ];\n\nconst UnforwardedValidatedRadioControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: React.ComponentProps< typeof RadioControl > &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLDivElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.selected );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t// TODO: Upstream limitation - RadioControl does not accept a ref.\n\t\t\tref={ mergedRefs }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () =>\n\t\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t\t'input[type=\"radio\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<RadioControl\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedRadioControl = forwardRef(\n\tUnforwardedValidatedRadioControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAX/C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAE0B,CAAC,EAC/BC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAoB,IAAK,CAAC;EAC1D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,QAAS,CAAC;EAEtD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA;IACnB;IAAA;IACAW,GAAG,EAAGN,UAAY;IAClBR,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACK,OAAQ,CAAC;IACxC,CAAG;IACHd,cAAc,EAAGA,cAAgB;IACjCe,iBAAiB,EAAGA,CAAA,KACnBV,iBAAiB,CAACS,OAAO,EAAEE,aAAa,CACvC,qBACD,CACA;IAAAC,QAAA,eAED,IAAArB,WAAA,CAAAe,GAAA,EAACjB,aAAA,CAAAwB,OAAY;MACZjB,QAAQ,EAAKkB,KAAK,IAAM;QACvBV,QAAQ,CAACK,OAAO,GAAGK,KAAK;QACxBlB,QAAQ,GAAIkB,KAAM,CAAC;MACpB,CAAG;MAAA,GACEhB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,EAC9CzB,gCACD,CAAC","ignoreList":[]}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_compose","require","_element","_controlWithError","_rangeControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedRangeControl","required","~~customValidator~~","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedRangeControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/range-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport RangeControl from '../../range-control';\nimport type { RangeControlProps } from '../../range-control/types';\n\ntype Value = RangeControlProps[ 'value' ];\n\nconst UnforwardedValidatedRangeControl = (\n\t{\n\t\trequired,\n\t\~~tcustomValidator~~,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof RangeControl >,\n\t\t'__next40pxDefaultSize' \| '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\~~tcustomValidator~~={ () => {\n\t\t\t\treturn ~~customValidator~~?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<RangeControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedRangeControl = forwardRef(\n\tUnforwardedValidatedRangeControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAX/C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,~~eAAe~~;~~EACfC~~,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,~~IAAAb~~,WAAA,~~CAAAc~~,GAAA,~~EAACjB~~,iBAAA,~~CAAAkB~~,gBAAgB;~~IAChBb~~,QAAQ,EAAGA,QAAU;~~IACrBG~~,gBAAgB,EAAGA,gBAAkB;~~IACrCF~~,~~eAAe~~,EAAGA,CAAA,KAAM;~~MACvB~~,OAAOA,~~eAAe~~,~~GAAIS~~,QAAQ,CAACI,OAAQ,CAAC;~~IAC7C~~,CAAG;~~IACHC~~,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,~~IAAAlB~~,WAAA,~~CAAAc~~,GAAA,~~EAAChB~~,aAAA,~~CAAAqB~~,OAAY;MACZC,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,~~EAC9CxB~~,gCACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["_compose","require","_element","_controlWithError","_rangeControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedRangeControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedRangeControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/range-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport RangeControl from '../../range-control';\nimport type { RangeControlProps } from '../../range-control/types';\n\ntype Value = RangeControlProps[ 'value' ];\n\nconst UnforwardedValidatedRangeControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof RangeControl >,\n\t\t'__next40pxDefaultSize' \| '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<RangeControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedRangeControl = forwardRef(\n\tUnforwardedValidatedRangeControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAX/C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACI,OAAQ,CAAC;IACxC,CAAG;IACHb,cAAc,EAAGA,cAAgB;IACjCc,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAnB,WAAA,CAAAe,GAAA,EAACjB,aAAA,CAAAsB,OAAY;MACZC,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,EAC9CzB,gCACD,CAAC","ignoreList":[]}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","_compose","_controlWithError","_selectControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedSelectControl","required","~~customValidator~~","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","ValidatedSelectControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/select-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport SelectControl from '../../select-control';\nimport type { ValidatedControlProps } from './types';\nimport type { SelectControlProps as _SelectControlProps } from '../../select-control/types';\n\n// Only support single value selection\ntype SelectControlProps = Omit<\n\t_SelectControlProps,\n\t'multiple' \| 'onChange' \| 'value'\n> & {\n\tonChange?: ( value: string ) => void;\n\tvalue?: string;\n};\n\ntype Value = SelectControlProps[ 'value' ];\n\nconst UnforwardedValidatedSelectControl = (\n\t{\n\t\trequired,\n\t\~~tcustomValidator~~,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof SelectControl >,\n\t\t\| '__next40pxDefaultSize'\n\t\t\| '__nextHasNoMarginBottom'\n\t\t\| 'multiple'\n\t\t\| 'onChange'\n\t\t\| 'value'\n\t> & {\n\t\tvalue?: string;\n\t\tonChange: ( value: string ) => void;\n\t} & ValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLSelectElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLSelectElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\~~tcustomValidator~~={ () => {\n\t\t\t\treturn ~~customValidator~~?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedSelectControl = forwardRef(\n\tUnforwardedValidatedSelectControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAVjD;AACA;AACA;;AAIA;AACA;AACA;;AAMA;;AAWA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,~~eAAe~~;~~EACfC~~,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAW6B,CAAC,EAClCC,YAAqD,KACjD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAuB,IAAK,CAAC;EAC7D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,~~IAAAb~~,WAAA,~~CAAAc~~,GAAA,~~EAACjB~~,iBAAA,~~CAAAkB~~,gBAAgB;~~IAChBb~~,QAAQ,EAAGA,QAAU;~~IACrBG~~,gBAAgB,EAAGA,gBAAkB;~~IACrCF~~,~~eAAe~~,EAAGA,CAAA,KAAM;~~MACvB~~,OAAOA,~~eAAe~~,~~GAAIS~~,QAAQ,CAACI,OAAQ,CAAC;~~IAC7C~~,CAAG;~~IACHC~~,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,~~IAAAlB~~,WAAA,~~CAAAc~~,GAAA,~~EAAChB~~,cAAA,~~CAAAqB~~,OAAa;MACbC,uBAAuB;MACvBC,qBAAqB;MACrBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/~~CxB~~,iCACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["_element","require","_compose","_controlWithError","_selectControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedSelectControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","ValidatedSelectControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/select-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport SelectControl from '../../select-control';\nimport type { ValidatedControlProps } from './types';\nimport type { SelectControlProps as _SelectControlProps } from '../../select-control/types';\n\n// Only support single value selection\ntype SelectControlProps = Omit<\n\t_SelectControlProps,\n\t'multiple' \| 'onChange' \| 'value'\n> & {\n\tonChange?: ( value: string ) => void;\n\tvalue?: string;\n};\n\ntype Value = SelectControlProps[ 'value' ];\n\nconst UnforwardedValidatedSelectControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof SelectControl >,\n\t\t\| '__next40pxDefaultSize'\n\t\t\| '__nextHasNoMarginBottom'\n\t\t\| 'multiple'\n\t\t\| 'onChange'\n\t\t\| 'value'\n\t> & {\n\t\tvalue?: string;\n\t\tonChange: ( value: string ) => void;\n\t} & ValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLSelectElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLSelectElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedSelectControl = forwardRef(\n\tUnforwardedValidatedSelectControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAVjD;AACA;AACA;;AAIA;AACA;AACA;;AAMA;;AAWA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAW6B,CAAC,EAClCC,YAAqD,KACjD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAuB,IAAK,CAAC;EAC7D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACI,OAAQ,CAAC;IACxC,CAAG;IACHb,cAAc,EAAGA,cAAgB;IACjCc,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAnB,WAAA,CAAAe,GAAA,EAACjB,cAAA,CAAAsB,OAAa;MACbC,uBAAuB;MACvBC,qBAAqB;MACrBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/CzB,iCACD,CAAC","ignoreList":[]}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_compose","require","_element","_controlWithError","_textControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedTextControl","required","~~customValidator~~","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedTextControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/text-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport TextControl from '../../text-control';\nimport type { TextControlProps } from '../../text-control/types';\n\ntype Value = TextControlProps[ 'value' ];\n\nconst UnforwardedValidatedTextControl = (\n\t{\n\t\trequired,\n\t\~~tcustomValidator~~,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof TextControl >,\n\t\t'__next40pxDefaultSize' \| '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\~~tcustomValidator~~={ () => {\n\t\t\t\treturn ~~customValidator~~?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedTextControl = forwardRef(\n\tUnforwardedValidatedTextControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,YAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA6C,IAAAK,WAAA,GAAAL,OAAA;AAX7C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,+BAA+B,GAAGA,CACvC;EACCC,QAAQ;EACRC,~~eAAe~~;~~EACfC~~,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,~~IAAAb~~,WAAA,~~CAAAc~~,GAAA,~~EAACjB~~,iBAAA,~~CAAAkB~~,gBAAgB;~~IAChBb~~,QAAQ,EAAGA,QAAU;~~IACrBG~~,gBAAgB,EAAGA,gBAAkB;~~IACrCF~~,~~eAAe~~,EAAGA,CAAA,KAAM;~~MACvB~~,OAAOA,~~eAAe~~,~~GAAIS~~,QAAQ,CAACI,OAAQ,CAAC;~~IAC7C~~,CAAG;~~IACHC~~,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,~~IAAAlB~~,WAAA,~~CAAAc~~,GAAA,~~EAAChB~~,YAAA,~~CAAAqB~~,OAAW;MACXC,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,mBAAU,~~EAC7CxB~~,+BACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["_compose","require","_element","_controlWithError","_textControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedTextControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedTextControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/text-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport TextControl from '../../text-control';\nimport type { TextControlProps } from '../../text-control/types';\n\ntype Value = TextControlProps[ 'value' ];\n\nconst UnforwardedValidatedTextControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof TextControl >,\n\t\t'__next40pxDefaultSize' \| '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedTextControl = forwardRef(\n\tUnforwardedValidatedTextControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,YAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA6C,IAAAK,WAAA,GAAAL,OAAA;AAX7C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,+BAA+B,GAAGA,CACvC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACI,OAAQ,CAAC;IACxC,CAAG;IACHb,cAAc,EAAGA,cAAgB;IACjCc,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAnB,WAAA,CAAAe,GAAA,EAACjB,YAAA,CAAAsB,OAAW;MACXC,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,mBAAU,EAC7CzB,+BACD,CAAC","ignoreList":[]}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","_compose","_controlWithError","_textareaControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedTextareaControl","required","~~customValidator~~","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__nextHasNoMarginBottom","ref","ValidatedTextareaControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/textarea-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport TextareaControl from '../../textarea-control';\nimport type { TextareaControlProps } from '../../textarea-control/types';\n\ntype Value = TextareaControlProps[ 'value' ];\n\nconst UnforwardedValidatedTextareaControl = (\n\t{\n\t\trequired,\n\t\~~tcustomValidator~~,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof TextareaControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLTextAreaElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLTextAreaElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\~~tcustomValidator~~={ () => {\n\t\t\t\treturn ~~customValidator~~?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<TextareaControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedTextareaControl = forwardRef(\n\tUnforwardedValidatedTextareaControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqD,IAAAK,WAAA,GAAAL,OAAA;AAXrD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,~~eAAe~~;~~EACfC~~,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAuD,KACnD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAyB,IAAK,CAAC;EAC/D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,~~IAAAb~~,WAAA,~~CAAAc~~,GAAA,~~EAACjB~~,iBAAA,~~CAAAkB~~,gBAAgB;~~IAChBb~~,QAAQ,EAAGA,QAAU;~~IACrBG~~,gBAAgB,EAAGA,gBAAkB;~~IACrCF~~,~~eAAe~~,EAAGA,CAAA,KAAM;~~MACvB~~,OAAOA,~~eAAe~~,~~GAAIS~~,QAAQ,CAACI,OAAQ,CAAC;~~IAC7C~~,CAAG;~~IACHC~~,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,~~IAAAlB~~,WAAA,~~CAAAc~~,GAAA,~~EAAChB~~,gBAAA,~~CAAAqB~~,OAAe;MACfC,uBAAuB;MACvBC,GAAG,EAAGX,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMgB,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,~~EACjDvB~~,mCACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["_element","require","_compose","_controlWithError","_textareaControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedTextareaControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__nextHasNoMarginBottom","ref","ValidatedTextareaControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/textarea-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport TextareaControl from '../../textarea-control';\nimport type { TextareaControlProps } from '../../textarea-control/types';\n\ntype Value = TextareaControlProps[ 'value' ];\n\nconst UnforwardedValidatedTextareaControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof TextareaControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLTextAreaElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLTextAreaElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<TextareaControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedTextareaControl = forwardRef(\n\tUnforwardedValidatedTextareaControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqD,IAAAK,WAAA,GAAAL,OAAA;AAXrD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAuD,KACnD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAyB,IAAK,CAAC;EAC/D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,iBAAA,CAAAmB,gBAAgB;IAChBd,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACI,OAAQ,CAAC;IACxC,CAAG;IACHb,cAAc,EAAGA,cAAgB;IACjCc,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAnB,WAAA,CAAAe,GAAA,EAACjB,gBAAA,CAAAsB,OAAe;MACfC,uBAAuB;MACvBC,GAAG,EAAGX,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMgB,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjDxB,mCACD,CAAC","ignoreList":[]}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","_compose","_controlWithError","_toggleControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedToggleControl","required","~~customValidator~~","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","checked","useEffect","current","jsx","ControlWithError","getValidityTarget","children","default","__nextHasNoMarginBottom","ref","value","ValidatedToggleControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/toggle-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { forwardRef, useRef, useEffect } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport ToggleControl from '../../toggle-control';\nimport type { ToggleControlProps } from '../../toggle-control/types';\n\ntype Value = ToggleControlProps[ 'checked' ];\n\n// TODO: Should we customize the default `missingValue` message? It says to \"check this box\".\n\nconst UnforwardedValidatedToggleControl = (\n\t{\n\t\trequired,\n\t\~~tcustomValidator~~,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ToggleControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.checked );\n\n\t// TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n\t// so we need to set it manually.\n\tuseEffect( () => {\n\t\tif ( validityTargetRef.current ) {\n\t\t\tvalidityTargetRef.current.required = required ?? false;\n\t\t}\n\t}, [ required ] );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\~~tcustomValidator~~={ () => {\n\t\t\t\treturn ~~customValidator~~?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedToggleControl = forwardRef(\n\tUnforwardedValidatedToggleControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAXjD;AACA;AACA;;AAIA;AACA;AACA;;AAQA;;AAEA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,~~eAAe~~;~~EACfC~~,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,OAAQ,CAAC;;EAErD;EACA;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAKN,iBAAiB,CAACO,OAAO,EAAG;MAChCP,iBAAiB,CAACO,OAAO,~~CAACb~~,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACvD;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB,oBACC,IAAAF,WAAA,~~CAAAgB~~,GAAA,~~EAACnB~~,iBAAA,~~CAAAoB~~,gBAAgB;~~IAChBf~~,QAAQ,EAAGA,QAAU;~~IACrBG~~,gBAAgB,EAAGA,gBAAkB;~~IACrCF~~,~~eAAe~~,EAAGA,CAAA,KAAM;~~MACvB~~,OAAOA,~~eAAe~~,~~GAAIS~~,QAAQ,CAACG,OAAQ,CAAC;~~IAC7C~~,CAAG;~~IACHG~~,iBAAiB,EAAGA,CAAA,KAAMV,iBAAiB,CAACO,OAAS;IAAAI,QAAA,eAErD,~~IAAAnB~~,WAAA,~~CAAAgB~~,GAAA,~~EAAClB~~,cAAA,~~CAAAsB~~,OAAa;MACbC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKmB,KAAK,IAAM;QACvBX,QAAQ,CAACG,OAAO,GAAGQ,KAAK;QACxBnB,QAAQ,GAAImB,KAAM,CAAC;MACpB,CAAG;MAAA,GACEjB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMkB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/~~CzB~~,iCACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["_element","require","_compose","_controlWithError","_toggleControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedToggleControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","checked","useEffect","current","jsx","ControlWithError","getValidityTarget","children","default","__nextHasNoMarginBottom","ref","value","ValidatedToggleControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/toggle-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { forwardRef, useRef, useEffect } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport ToggleControl from '../../toggle-control';\nimport type { ToggleControlProps } from '../../toggle-control/types';\n\ntype Value = ToggleControlProps[ 'checked' ];\n\n// TODO: Should we customize the default `missingValue` message? It says to \"check this box\".\n\nconst UnforwardedValidatedToggleControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ToggleControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.checked );\n\n\t// TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n\t// so we need to set it manually.\n\tuseEffect( () => {\n\t\tif ( validityTargetRef.current ) {\n\t\t\tvalidityTargetRef.current.required = required ?? false;\n\t\t}\n\t}, [ required ] );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tonValidate={ () => {\n\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedToggleControl = forwardRef(\n\tUnforwardedValidatedToggleControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAXjD;AACA;AACA;;AAIA;AACA;AACA;;AAQA;;AAEA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,OAAQ,CAAC;;EAErD;EACA;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAKN,iBAAiB,CAACO,OAAO,EAAG;MAChCP,iBAAiB,CAACO,OAAO,CAACd,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACvD;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB,oBACC,IAAAF,WAAA,CAAAiB,GAAA,EAACpB,iBAAA,CAAAqB,gBAAgB;IAChBhB,QAAQ,EAAGA,QAAU;IACrBI,gBAAgB,EAAGA,gBAAkB;IACrCH,UAAU,EAAGA,CAAA,KAAM;MAClB,OAAOA,UAAU,GAAIU,QAAQ,CAACG,OAAQ,CAAC;IACxC,CAAG;IACHZ,cAAc,EAAGA,cAAgB;IACjCe,iBAAiB,EAAGA,CAAA,KAAMV,iBAAiB,CAACO,OAAS;IAAAI,QAAA,eAErD,IAAApB,WAAA,CAAAiB,GAAA,EAACnB,cAAA,CAAAuB,OAAa;MACbC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKmB,KAAK,IAAM;QACvBX,QAAQ,CAACG,OAAO,GAAGQ,KAAK;QACxBnB,QAAQ,GAAImB,KAAM,CAAC;MACpB,CAAG;MAAA,GACEjB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMkB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/C1B,iCACD,CAAC","ignoreList":[]}

package/build/validated-form-controls/components/toggle-group-control.js 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,