@wordpress/components 30.3.2-next.836ecdcae.0 → 30.4.0

package/CHANGELOG.md

@@ -2,12 +2,21 @@
 
 ## Unreleased
 
-## 30.3.1-next.0 (2025-09-05)
+## 30.4.0 (2025-09-17)
 
 ### Bug Fixes
 
 -   `Modal`: Fix modal headings and labels to use proper editor text color instead of wp-admin colors ([#71311](https://github.com/WordPress/gutenberg/pull/71311)).
 
+### Internal
+
+-   Expose `ValidatedRadioControl` via private API's ([#71664](https://github.com/WordPress/gutenberg/pull/71664)).
+-   `ValidatedCheckboxControl`: Expose the component under private API's ([#71505](https://github.com/WordPress/gutenberg/pull/71505/)).
+-   Expose `ValidatedTextareaControl` via Private APIs ([#71495](https://github.com/WordPress/gutenberg/pull/71495))
+-   Add support for ValidatedFormTokenField [#71350](https://github.com/WordPress/gutenberg/pull/71350).
+-   Expose `ValidatedSelectControl` via Private APIs ([#71665](https://github.com/WordPress/gutenberg/pull/71665))
+-   Expose `ValidatedToggleGroupControl` via private APIs. Also properly detects `undefined` values for `required` validation ([#71666](https://github.com/WordPress/gutenberg/pull/71666)).
+
 ## 30.3.0 (2025-09-03)
 
 ### Bug Fixes

package/build/private-apis.js

@@ -16,6 +16,7 @@ var _lockUnlock = require("./lock-unlock");
 var _badge = _interopRequireDefault(require("./badge"));
 var _calendar = require("./calendar");
 var _validatedFormControls = require("./validated-form-controls");
+var _picker = require("./color-picker/picker");
 /**
  * Internal dependencies
  */
@@ -34,8 +35,15 @@ const privateApis = exports.privateApis = {};
   DateCalendar: _calendar.DateCalendar,
   DateRangeCalendar: _calendar.DateRangeCalendar,
   TZDate: _calendar.TZDate,
+  Picker: _picker.Picker,
+  ValidatedInputControl: _validatedFormControls.ValidatedInputControl,
+  ValidatedCheckboxControl: _validatedFormControls.ValidatedCheckboxControl,
   ValidatedNumberControl: _validatedFormControls.ValidatedNumberControl,
+  ValidatedSelectControl: _validatedFormControls.ValidatedSelectControl,
+  ValidatedRadioControl: _validatedFormControls.ValidatedRadioControl,
   ValidatedTextControl: _validatedFormControls.ValidatedTextControl,
-  ValidatedToggleControl: _validatedFormControls.ValidatedToggleControl
+  ValidatedTextareaControl: _validatedFormControls.ValidatedTextareaControl,
+  ValidatedToggleControl: _validatedFormControls.ValidatedToggleControl,
+  ValidatedToggleGroupControl: _validatedFormControls.ValidatedToggleGroupControl
 });
 //# sourceMappingURL=private-apis.js.map

package/build/private-apis.js.map

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","_menu","_contextSystemProvider","_theme","_interopRequireDefault","_tabs","_strings","_withIgnoreImeEvents","_lockUnlock","_badge","_calendar","_validatedFormControls","privateApis","exports","lock","__experimentalPopoverLegacyPositionToPlacement","ComponentsContext","Tabs","Theme","Menu","kebabCase","withIgnoreIMEEvents","Badge","normalizeTextString","DateCalendar","DateRangeCalendar","TZDate","ValidatedNumberControl","ValidatedTextControl","ValidatedToggleControl"],"sources":["@wordpress/components/src/private-apis.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';\nimport { Menu } from './menu';\nimport { ComponentsContext } from './context/context-system-provider';\nimport Theme from './theme';\nimport { Tabs } from './tabs';\nimport { kebabCase, normalizeTextString } from './utils/strings';\nimport { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';\nimport { lock } from './lock-unlock';\nimport Badge from './badge';\n\nimport { DateCalendar, DateRangeCalendar, TZDate } from './calendar';\nimport {\n\tValidatedNumberControl,\n\tValidatedTextControl,\n\tValidatedToggleControl,\n} from './validated-form-controls';\n\nexport const privateApis = {};\nlock( privateApis, {\n\t__experimentalPopoverLegacyPositionToPlacement,\n\tComponentsContext,\n\tTabs,\n\tTheme,\n\tMenu,\n\tkebabCase,\n\twithIgnoreIMEEvents,\n\tBadge,\n\tnormalizeTextString,\n\tDateCalendar,\n\tDateRangeCalendar,\n\tTZDate,\n\tValidatedNumberControl,\n\tValidatedTextControl,\n\tValidatedToggleControl,\n} );\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,oBAAA,GAAAP,OAAA;AACA,IAAAQ,WAAA,GAAAR,OAAA;AACA,IAAAS,MAAA,GAAAL,sBAAA,CAAAJ,OAAA;AAEA,IAAAU,SAAA,GAAAV,OAAA;AACA,IAAAW,sBAAA,GAAAX,OAAA;AAdA;AACA;AACA;;AAkBO,MAAMY,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,CAAC,CAAC;AAC7B,IAAAE,gBAAI,EAAEF,WAAW,EAAE;EAClBG,8CAA8C,EAA9CA,0BAA8C;EAC9CC,iBAAiB,EAAjBA,wCAAiB;EACjBC,IAAI,EAAJA,UAAI;EACJC,KAAK,EAALA,cAAK;EACLC,IAAI,EAAJA,UAAI;EACJC,SAAS,EAATA,kBAAS;EACTC,mBAAmB,EAAnBA,wCAAmB;EACnBC,KAAK,EAALA,cAAK;EACLC,mBAAmB,EAAnBA,4BAAmB;EACnBC,YAAY,EAAZA,sBAAY;EACZC,iBAAiB,EAAjBA,2BAAiB;EACjBC,MAAM,EAANA,gBAAM;EACNC,sBAAsB,EAAtBA,6CAAsB;EACtBC,oBAAoB,EAApBA,2CAAoB;EACpBC,sBAAsB,EAAtBA;AACD,CAAE,CAAC","ignoreList":[]}
+{"version":3,"names":["_utils","require","_menu","_contextSystemProvider","_theme","_interopRequireDefault","_tabs","_strings","_withIgnoreImeEvents","_lockUnlock","_badge","_calendar","_validatedFormControls","_picker","privateApis","exports","lock","__experimentalPopoverLegacyPositionToPlacement","ComponentsContext","Tabs","Theme","Menu","kebabCase","withIgnoreIMEEvents","Badge","normalizeTextString","DateCalendar","DateRangeCalendar","TZDate","Picker","ValidatedInputControl","ValidatedCheckboxControl","ValidatedNumberControl","ValidatedSelectControl","ValidatedRadioControl","ValidatedTextControl","ValidatedTextareaControl","ValidatedToggleControl","ValidatedToggleGroupControl"],"sources":["@wordpress/components/src/private-apis.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';\nimport { Menu } from './menu';\nimport { ComponentsContext } from './context/context-system-provider';\nimport Theme from './theme';\nimport { Tabs } from './tabs';\nimport { kebabCase, normalizeTextString } from './utils/strings';\nimport { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';\nimport { lock } from './lock-unlock';\nimport Badge from './badge';\n\nimport { DateCalendar, DateRangeCalendar, TZDate } from './calendar';\nimport {\n\tValidatedCheckboxControl,\n\tValidatedInputControl,\n\tValidatedNumberControl,\n\tValidatedSelectControl,\n\tValidatedRadioControl,\n\tValidatedTextControl,\n\tValidatedTextareaControl,\n\tValidatedToggleControl,\n\tValidatedToggleGroupControl,\n} from './validated-form-controls';\nimport { Picker } from './color-picker/picker';\n\nexport const privateApis = {};\nlock( privateApis, {\n\t__experimentalPopoverLegacyPositionToPlacement,\n\tComponentsContext,\n\tTabs,\n\tTheme,\n\tMenu,\n\tkebabCase,\n\twithIgnoreIMEEvents,\n\tBadge,\n\tnormalizeTextString,\n\tDateCalendar,\n\tDateRangeCalendar,\n\tTZDate,\n\tPicker,\n\tValidatedInputControl,\n\tValidatedCheckboxControl,\n\tValidatedNumberControl,\n\tValidatedSelectControl,\n\tValidatedRadioControl,\n\tValidatedTextControl,\n\tValidatedTextareaControl,\n\tValidatedToggleControl,\n\tValidatedToggleGroupControl,\n} );\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,oBAAA,GAAAP,OAAA;AACA,IAAAQ,WAAA,GAAAR,OAAA;AACA,IAAAS,MAAA,GAAAL,sBAAA,CAAAJ,OAAA;AAEA,IAAAU,SAAA,GAAAV,OAAA;AACA,IAAAW,sBAAA,GAAAX,OAAA;AAWA,IAAAY,OAAA,GAAAZ,OAAA;AAzBA;AACA;AACA;;AAyBO,MAAMa,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,CAAC,CAAC;AAC7B,IAAAE,gBAAI,EAAEF,WAAW,EAAE;EAClBG,8CAA8C,EAA9CA,0BAA8C;EAC9CC,iBAAiB,EAAjBA,wCAAiB;EACjBC,IAAI,EAAJA,UAAI;EACJC,KAAK,EAALA,cAAK;EACLC,IAAI,EAAJA,UAAI;EACJC,SAAS,EAATA,kBAAS;EACTC,mBAAmB,EAAnBA,wCAAmB;EACnBC,KAAK,EAALA,cAAK;EACLC,mBAAmB,EAAnBA,4BAAmB;EACnBC,YAAY,EAAZA,sBAAY;EACZC,iBAAiB,EAAjBA,2BAAiB;EACjBC,MAAM,EAANA,gBAAM;EACNC,MAAM,EAANA,cAAM;EACNC,qBAAqB,EAArBA,4CAAqB;EACrBC,wBAAwB,EAAxBA,+CAAwB;EACxBC,sBAAsB,EAAtBA,6CAAsB;EACtBC,sBAAsB,EAAtBA,6CAAsB;EACtBC,qBAAqB,EAArBA,4CAAqB;EACrBC,oBAAoB,EAApBA,2CAAoB;EACpBC,wBAAwB,EAAxBA,+CAAwB;EACxBC,sBAAsB,EAAtBA,6CAAsB;EACtBC,2BAA2B,EAA3BA;AACD,CAAE,CAAC","ignoreList":[]}

package/build/validated-form-controls/components/form-token-field.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedFormTokenField = void 0;
+var _element = require("@wordpress/element");
+var _controlWithError = require("../control-with-error");
+var _formTokenField = require("../../form-token-field");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const UnforwardedValidatedFormTokenField = ({
+  required,
+  onValidate,
+  customValidity,
+  onChange,
+  markWhenOptional,
+  ...restProps
+}, forwardedRef) => {
+  const validityTargetRef = (0, _element.useRef)(null);
+  const valueRef = (0, _element.useRef)(restProps.value);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "components-validated-control__wrapper-with-error-delegate",
+    ref: forwardedRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+      required: required,
+      markWhenOptional: markWhenOptional,
+      onValidate: () => {
+        return onValidate?.(valueRef.current);
+      },
+      customValidity: customValidity,
+      getValidityTarget: () => validityTargetRef.current,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_formTokenField.FormTokenField, {
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true,
+        ...restProps,
+        onChange: (value, ...args) => {
+          valueRef.current = value;
+          onChange?.(value, ...args);
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      className: "components-validated-control__error-delegate",
+      type: "text",
+      ref: validityTargetRef,
+      required: required,
+      value: valueRef.current && valueRef.current.length > 0 ? 'hasvalue' : '',
+      tabIndex: -1,
+      onChange: () => {},
+      onFocus: e => {
+        e.target.previousElementSibling?.querySelector('input[type="text"]')?.focus();
+      }
+    })]
+  });
+};
+const ValidatedFormTokenField = exports.ValidatedFormTokenField = (0, _element.forwardRef)(UnforwardedValidatedFormTokenField);
+//# sourceMappingURL=form-token-field.js.map

package/build/validated-form-controls/components/form-token-field.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_controlWithError","_formTokenField","_jsxRuntime","UnforwardedValidatedFormTokenField","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","valueRef","value","jsxs","className","ref","children","jsx","ControlWithError","current","getValidityTarget","FormTokenField","__next40pxDefaultSize","__nextHasNoMarginBottom","args","type","length","tabIndex","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedFormTokenField","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/form-token-field.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 { FormTokenField } from '../../form-token-field';\nimport type { FormTokenFieldProps } from '../../form-token-field/types';\n\ntype Value = FormTokenFieldProps[ 'value' ];\n\nconst UnforwardedValidatedFormTokenField = (\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 FormTokenField >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< FormTokenFieldProps[ 'value' ] >,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( 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<FormTokenField\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tonChange={ ( value, ...args ) => {\n\t\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\t\tonChange?.( value, ...args );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</ControlWithError>\n\t\t\t<input\n\t\t\t\tclassName=\"components-validated-control__error-delegate\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tref={ validityTargetRef }\n\t\t\t\trequired={ required }\n\t\t\t\tvalue={\n\t\t\t\t\tvalueRef.current && valueRef.current.length > 0\n\t\t\t\t\t\t? 'hasvalue'\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\ttabIndex={ -1 }\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< HTMLInputElement >(\n\t\t\t\t\t\t\t'input[type=\"text\"]'\n\t\t\t\t\t\t)\n\t\t\t\t\t\t?.focus();\n\t\t\t\t} }\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport const ValidatedFormTokenField = forwardRef(\n\tUnforwardedValidatedFormTokenField\n);\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,eAAA,GAAAF,OAAA;AAAwD,IAAAG,WAAA,GAAAH,OAAA;AAVxD;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMI,kCAAkC,GAAGA,CAC1C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAKmD,CAAC,EACxDC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,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,EAACnB,iBAAA,CAAAoB,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,EAAClB,eAAA,CAAAsB,cAAc;QACdC,qBAAqB;QACrBC,uBAAuB;QAAA,GAClBhB,SAAS;QACdF,QAAQ,EAAGA,CAAEO,KAAK,EAAE,GAAGY,IAAI,KAAM;UAChCb,QAAQ,CAACQ,OAAO,GAAGP,KAAK;UACxBP,QAAQ,GAAIO,KAAK,EAAE,GAAGY,IAAK,CAAC;QAC7B;MAAG,CACH;IAAC,CACe,CAAC,eACnB,IAAAxB,WAAA,CAAAiB,GAAA;MACCH,SAAS,EAAC,8CAA8C;MACxDW,IAAI,EAAC,MAAM;MACXV,GAAG,EAAGN,iBAAmB;MACzBP,QAAQ,EAAGA,QAAU;MACrBU,KAAK,EACJD,QAAQ,CAACQ,OAAO,IAAIR,QAAQ,CAACQ,OAAO,CAACO,MAAM,GAAG,CAAC,GAC5C,UAAU,GACV,EACH;MACDC,QAAQ,EAAG,CAAC,CAAG;MACftB,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrBuB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,oBACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX;IAAG,CACH,CAAC;EAAA,CACE,CAAC;AAER,CAAC;AAEM,MAAMC,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,mBAAU,EAChDnC,kCACD,CAAC","ignoreList":[]}

package/build/validated-form-controls/components/index.js

@@ -36,6 +36,17 @@ Object.keys(_customSelectControl).forEach(function (key) {
     }
   });
 });
+var _formTokenField = require("./form-token-field");
+Object.keys(_formTokenField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _formTokenField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _formTokenField[key];
+    }
+  });
+});
 var _inputControl = require("./input-control");
 Object.keys(_inputControl).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/build/validated-form-controls/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_checkboxControl","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_comboboxControl","_customSelectControl","_inputControl","_numberControl","_radioControl","_rangeControl","_selectControl","_textControl","_textareaControl","_toggleControl","_toggleGroupControl"],"sources":["@wordpress/components/src/validated-form-controls/components/index.ts"],"sourcesContent":["export * from './checkbox-control';\nexport * from './combobox-control';\nexport * from './custom-select-control';\nexport * from './input-control';\nexport * from './number-control';\nexport * from './radio-control';\nexport * from './range-control';\nexport * from './select-control';\nexport * from './text-control';\nexport * from './textarea-control';\nexport * from './toggle-control';\nexport * from './toggle-group-control';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_checkboxControl","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_comboboxControl","_customSelectControl","_formTokenField","_inputControl","_numberControl","_radioControl","_rangeControl","_selectControl","_textControl","_textareaControl","_toggleControl","_toggleGroupControl"],"sources":["@wordpress/components/src/validated-form-controls/components/index.ts"],"sourcesContent":["export * from './checkbox-control';\nexport * from './combobox-control';\nexport * from './custom-select-control';\nexport * from './form-token-field';\nexport * from './input-control';\nexport * from './number-control';\nexport * from './radio-control';\nexport * from './range-control';\nexport * from './select-control';\nexport * from './text-control';\nexport * from './textarea-control';\nexport * from './toggle-control';\nexport * from './toggle-group-control';\n"],"mappings":"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","ignoreList":[]}

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

@@ -40,10 +40,7 @@ const UnforwardedValidatedToggleGroupControl = ({
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleGroupControl.ToggleGroupControl, {
         __nextHasNoMarginBottom: true,
         __next40pxDefaultSize: true,
-        ref: forwardedRef
-        // TODO: Upstream limitation - In uncontrolled mode, starting from an undefined value then
-        // setting a value has a visual bug.
-        ,
+        ref: forwardedRef,
         onChange: value => {
           valueRef.current = value;
           onChange?.(value);
@@ -55,7 +52,7 @@ const UnforwardedValidatedToggleGroupControl = ({
       type: "radio",
       ref: validityTargetRef,
       required: required,
-      checked: restProps.value !== null,
+      checked: restProps.value !== undefined,
       tabIndex: -1
       // A name attribute is needed for the `required` behavior to work.
       ,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_controlWithError","_toggleGroupControl","_jsxRuntime","UnforwardedValidatedToggleGroupControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","valueRef","value","nameAttr","useId","jsxs","className","children","jsx","ControlWithError","current","getValidityTarget","ToggleGroupControl","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","type","checked","tabIndex","name","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedToggleGroupControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/toggle-group-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useId, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport type { ToggleGroupControlProps } from '../../toggle-group-control/types';\n\ntype Value = ToggleGroupControlProps[ 'value' ];\n\nconst UnforwardedValidatedToggleGroupControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ToggleGroupControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\tconst nameAttr = useId();\n\n\treturn (\n\t\t<div className=\"components-validated-control__wrapper-with-error-delegate\">\n\t\t\t<ControlWithError\n\t\t\t\trequired={ required }\n\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\tonValidate={ () => {\n\t\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t\t} }\n\t\t\t\tcustomValidity={ customValidity }\n\t\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t\t>\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\t// TODO: Upstream limitation - In uncontrolled mode, starting from an undefined value then\n\t\t\t\t\t// setting a value has a visual bug.\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\t\tonChange?.( value );\n\t\t\t\t\t} }\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t/>\n\t\t\t</ControlWithError>\n\t\t\t<input\n\t\t\t\tclassName=\"components-validated-control__error-delegate\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tref={ validityTargetRef }\n\t\t\t\trequired={ required }\n\t\t\t\tchecked={ restProps.value !== null }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\t// A name attribute is needed for the `required` behavior to work.\n\t\t\t\tname={ nameAttr }\n\t\t\t\tonChange={ () => {} }\n\t\t\t\tonFocus={ ( e ) => {\n\t\t\t\t\te.target.previousElementSibling\n\t\t\t\t\t\t?.querySelector< HTMLButtonElement | HTMLInputElement >(\n\t\t\t\t\t\t\t'[data-active-item=\"true\"]'\n\t\t\t\t\t\t)\n\t\t\t\t\t\t?.focus();\n\t\t\t\t} }\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport const ValidatedToggleGroupControl = forwardRef(\n\tUnforwardedValidatedToggleGroupControl\n);\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,mBAAA,GAAAF,OAAA;AAAgE,IAAAG,WAAA,GAAAH,OAAA;AAVhE;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMI,sCAAsC,GAAGA,CAC9C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,QAAQ,GAAG,IAAAD,eAAM,EAAWH,SAAS,CAACK,KAAM,CAAC;EAEnD,MAAMC,QAAQ,GAAG,IAAAC,cAAK,EAAC,CAAC;EAExB,oBACC,IAAAd,WAAA,CAAAe,IAAA;IAAKC,SAAS,EAAC,2DAA2D;IAAAC,QAAA,gBACzE,IAAAjB,WAAA,CAAAkB,GAAA,EAACpB,iBAAA,CAAAqB,gBAAgB;MAChBjB,QAAQ,EAAGA,QAAU;MACrBI,gBAAgB,EAAGA,gBAAkB;MACrCH,UAAU,EAAGA,CAAA,KAAM;QAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACS,OAAQ,CAAC;MACxC,CAAG;MACHhB,cAAc,EAAGA,cAAgB;MACjCiB,iBAAiB,EAAGA,CAAA,KAAMZ,iBAAiB,CAACW,OAAS;MAAAH,QAAA,eAErD,IAAAjB,WAAA,CAAAkB,GAAA,EAACnB,mBAAA,CAAAuB,kBAAkB;QAClBC,uBAAuB;QACvBC,qBAAqB;QACrBC,GAAG,EAAGjB;QACN;QACA;QAAA;QACAH,QAAQ,EAAKO,KAAK,IAAM;UACvBD,QAAQ,CAACS,OAAO,GAAGR,KAAK;UACxBP,QAAQ,GAAIO,KAAM,CAAC;QACpB,CAAG;QAAA,GACEL;MAAS,CACd;IAAC,CACe,CAAC,eACnB,IAAAP,WAAA,CAAAkB,GAAA;MACCF,SAAS,EAAC,8CAA8C;MACxDU,IAAI,EAAC,OAAO;MACZD,GAAG,EAAGhB,iBAAmB;MACzBP,QAAQ,EAAGA,QAAU;MACrByB,OAAO,EAAGpB,SAAS,CAACK,KAAK,KAAK,IAAM;MACpCgB,QAAQ,EAAG,CAAC;MACZ;MAAA;MACAC,IAAI,EAAGhB,QAAU;MACjBR,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrByB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,2BACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX;IAAG,CACH,CAAC;EAAA,CACE,CAAC;AAER,CAAC;AAEM,MAAMC,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,mBAAU,EACpDrC,sCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["_element","require","_controlWithError","_toggleGroupControl","_jsxRuntime","UnforwardedValidatedToggleGroupControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","valueRef","value","nameAttr","useId","jsxs","className","children","jsx","ControlWithError","current","getValidityTarget","ToggleGroupControl","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","type","checked","undefined","tabIndex","name","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedToggleGroupControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/toggle-group-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useId, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport type { ToggleGroupControlProps } from '../../toggle-group-control/types';\n\ntype Value = ToggleGroupControlProps[ 'value' ];\n\nconst UnforwardedValidatedToggleGroupControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ToggleGroupControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\tconst nameAttr = useId();\n\n\treturn (\n\t\t<div className=\"components-validated-control__wrapper-with-error-delegate\">\n\t\t\t<ControlWithError\n\t\t\t\trequired={ required }\n\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\tonValidate={ () => {\n\t\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t\t} }\n\t\t\t\tcustomValidity={ customValidity }\n\t\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t\t>\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\t\tonChange?.( value );\n\t\t\t\t\t} }\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t/>\n\t\t\t</ControlWithError>\n\t\t\t<input\n\t\t\t\tclassName=\"components-validated-control__error-delegate\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tref={ validityTargetRef }\n\t\t\t\trequired={ required }\n\t\t\t\tchecked={ restProps.value !== undefined }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\t// A name attribute is needed for the `required` behavior to work.\n\t\t\t\tname={ nameAttr }\n\t\t\t\tonChange={ () => {} }\n\t\t\t\tonFocus={ ( e ) => {\n\t\t\t\t\te.target.previousElementSibling\n\t\t\t\t\t\t?.querySelector< HTMLButtonElement | HTMLInputElement >(\n\t\t\t\t\t\t\t'[data-active-item=\"true\"]'\n\t\t\t\t\t\t)\n\t\t\t\t\t\t?.focus();\n\t\t\t\t} }\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport const ValidatedToggleGroupControl = forwardRef(\n\tUnforwardedValidatedToggleGroupControl\n);\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,mBAAA,GAAAF,OAAA;AAAgE,IAAAG,WAAA,GAAAH,OAAA;AAVhE;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMI,sCAAsC,GAAGA,CAC9C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,QAAQ,GAAG,IAAAD,eAAM,EAAWH,SAAS,CAACK,KAAM,CAAC;EAEnD,MAAMC,QAAQ,GAAG,IAAAC,cAAK,EAAC,CAAC;EAExB,oBACC,IAAAd,WAAA,CAAAe,IAAA;IAAKC,SAAS,EAAC,2DAA2D;IAAAC,QAAA,gBACzE,IAAAjB,WAAA,CAAAkB,GAAA,EAACpB,iBAAA,CAAAqB,gBAAgB;MAChBjB,QAAQ,EAAGA,QAAU;MACrBI,gBAAgB,EAAGA,gBAAkB;MACrCH,UAAU,EAAGA,CAAA,KAAM;QAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACS,OAAQ,CAAC;MACxC,CAAG;MACHhB,cAAc,EAAGA,cAAgB;MACjCiB,iBAAiB,EAAGA,CAAA,KAAMZ,iBAAiB,CAACW,OAAS;MAAAH,QAAA,eAErD,IAAAjB,WAAA,CAAAkB,GAAA,EAACnB,mBAAA,CAAAuB,kBAAkB;QAClBC,uBAAuB;QACvBC,qBAAqB;QACrBC,GAAG,EAAGjB,YAAc;QACpBH,QAAQ,EAAKO,KAAK,IAAM;UACvBD,QAAQ,CAACS,OAAO,GAAGR,KAAK;UACxBP,QAAQ,GAAIO,KAAM,CAAC;QACpB,CAAG;QAAA,GACEL;MAAS,CACd;IAAC,CACe,CAAC,eACnB,IAAAP,WAAA,CAAAkB,GAAA;MACCF,SAAS,EAAC,8CAA8C;MACxDU,IAAI,EAAC,OAAO;MACZD,GAAG,EAAGhB,iBAAmB;MACzBP,QAAQ,EAAGA,QAAU;MACrByB,OAAO,EAAGpB,SAAS,CAACK,KAAK,KAAKgB,SAAW;MACzCC,QAAQ,EAAG,CAAC;MACZ;MAAA;MACAC,IAAI,EAAGjB,QAAU;MACjBR,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrB0B,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,2BACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX;IAAG,CACH,CAAC;EAAA,CACE,CAAC;AAER,CAAC;AAEM,MAAMC,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,mBAAU,EACpDtC,sCACD,CAAC","ignoreList":[]}

package/build-module/private-apis.js

@@ -11,7 +11,8 @@ import { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';
 import { lock } from './lock-unlock';
 import Badge from './badge';
 import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
-import { ValidatedNumberControl, ValidatedTextControl, ValidatedToggleControl } from './validated-form-controls';
+import { ValidatedCheckboxControl, ValidatedInputControl, ValidatedNumberControl, ValidatedSelectControl, ValidatedRadioControl, ValidatedTextControl, ValidatedTextareaControl, ValidatedToggleControl, ValidatedToggleGroupControl } from './validated-form-controls';
+import { Picker } from './color-picker/picker';
 export const privateApis = {};
 lock(privateApis, {
   __experimentalPopoverLegacyPositionToPlacement,
@@ -26,8 +27,15 @@ lock(privateApis, {
   DateCalendar,
   DateRangeCalendar,
   TZDate,
+  Picker,
+  ValidatedInputControl,
+  ValidatedCheckboxControl,
   ValidatedNumberControl,
+  ValidatedSelectControl,
+  ValidatedRadioControl,
   ValidatedTextControl,
-  ValidatedToggleControl
+  ValidatedTextareaControl,
+  ValidatedToggleControl,
+  ValidatedToggleGroupControl
 });
 //# sourceMappingURL=private-apis.js.map

package/build-module/private-apis.js.map

@@ -1 +1 @@
-{"version":3,"names":["positionToPlacement","__experimentalPopoverLegacyPositionToPlacement","Menu","ComponentsContext","Theme","Tabs","kebabCase","normalizeTextString","withIgnoreIMEEvents","lock","Badge","DateCalendar","DateRangeCalendar","TZDate","ValidatedNumberControl","ValidatedTextControl","ValidatedToggleControl","privateApis"],"sources":["@wordpress/components/src/private-apis.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';\nimport { Menu } from './menu';\nimport { ComponentsContext } from './context/context-system-provider';\nimport Theme from './theme';\nimport { Tabs } from './tabs';\nimport { kebabCase, normalizeTextString } from './utils/strings';\nimport { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';\nimport { lock } from './lock-unlock';\nimport Badge from './badge';\n\nimport { DateCalendar, DateRangeCalendar, TZDate } from './calendar';\nimport {\n\tValidatedNumberControl,\n\tValidatedTextControl,\n\tValidatedToggleControl,\n} from './validated-form-controls';\n\nexport const privateApis = {};\nlock( privateApis, {\n\t__experimentalPopoverLegacyPositionToPlacement,\n\tComponentsContext,\n\tTabs,\n\tTheme,\n\tMenu,\n\tkebabCase,\n\twithIgnoreIMEEvents,\n\tBadge,\n\tnormalizeTextString,\n\tDateCalendar,\n\tDateRangeCalendar,\n\tTZDate,\n\tValidatedNumberControl,\n\tValidatedTextControl,\n\tValidatedToggleControl,\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,mBAAmB,IAAIC,8CAA8C,QAAQ,iBAAiB;AACvG,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,iBAAiB,QAAQ,mCAAmC;AACrE,OAAOC,KAAK,MAAM,SAAS;AAC3B,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,SAAS,EAAEC,mBAAmB,QAAQ,iBAAiB;AAChE,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,IAAI,QAAQ,eAAe;AACpC,OAAOC,KAAK,MAAM,SAAS;AAE3B,SAASC,YAAY,EAAEC,iBAAiB,EAAEC,MAAM,QAAQ,YAAY;AACpE,SACCC,sBAAsB,EACtBC,oBAAoB,EACpBC,sBAAsB,QAChB,2BAA2B;AAElC,OAAO,MAAMC,WAAW,GAAG,CAAC,CAAC;AAC7BR,IAAI,CAAEQ,WAAW,EAAE;EAClBhB,8CAA8C;EAC9CE,iBAAiB;EACjBE,IAAI;EACJD,KAAK;EACLF,IAAI;EACJI,SAAS;EACTE,mBAAmB;EACnBE,KAAK;EACLH,mBAAmB;EACnBI,YAAY;EACZC,iBAAiB;EACjBC,MAAM;EACNC,sBAAsB;EACtBC,oBAAoB;EACpBC;AACD,CAAE,CAAC","ignoreList":[]}
+{"version":3,"names":["positionToPlacement","__experimentalPopoverLegacyPositionToPlacement","Menu","ComponentsContext","Theme","Tabs","kebabCase","normalizeTextString","withIgnoreIMEEvents","lock","Badge","DateCalendar","DateRangeCalendar","TZDate","ValidatedCheckboxControl","ValidatedInputControl","ValidatedNumberControl","ValidatedSelectControl","ValidatedRadioControl","ValidatedTextControl","ValidatedTextareaControl","ValidatedToggleControl","ValidatedToggleGroupControl","Picker","privateApis"],"sources":["@wordpress/components/src/private-apis.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';\nimport { Menu } from './menu';\nimport { ComponentsContext } from './context/context-system-provider';\nimport Theme from './theme';\nimport { Tabs } from './tabs';\nimport { kebabCase, normalizeTextString } from './utils/strings';\nimport { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';\nimport { lock } from './lock-unlock';\nimport Badge from './badge';\n\nimport { DateCalendar, DateRangeCalendar, TZDate } from './calendar';\nimport {\n\tValidatedCheckboxControl,\n\tValidatedInputControl,\n\tValidatedNumberControl,\n\tValidatedSelectControl,\n\tValidatedRadioControl,\n\tValidatedTextControl,\n\tValidatedTextareaControl,\n\tValidatedToggleControl,\n\tValidatedToggleGroupControl,\n} from './validated-form-controls';\nimport { Picker } from './color-picker/picker';\n\nexport const privateApis = {};\nlock( privateApis, {\n\t__experimentalPopoverLegacyPositionToPlacement,\n\tComponentsContext,\n\tTabs,\n\tTheme,\n\tMenu,\n\tkebabCase,\n\twithIgnoreIMEEvents,\n\tBadge,\n\tnormalizeTextString,\n\tDateCalendar,\n\tDateRangeCalendar,\n\tTZDate,\n\tPicker,\n\tValidatedInputControl,\n\tValidatedCheckboxControl,\n\tValidatedNumberControl,\n\tValidatedSelectControl,\n\tValidatedRadioControl,\n\tValidatedTextControl,\n\tValidatedTextareaControl,\n\tValidatedToggleControl,\n\tValidatedToggleGroupControl,\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,mBAAmB,IAAIC,8CAA8C,QAAQ,iBAAiB;AACvG,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,iBAAiB,QAAQ,mCAAmC;AACrE,OAAOC,KAAK,MAAM,SAAS;AAC3B,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,SAAS,EAAEC,mBAAmB,QAAQ,iBAAiB;AAChE,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,IAAI,QAAQ,eAAe;AACpC,OAAOC,KAAK,MAAM,SAAS;AAE3B,SAASC,YAAY,EAAEC,iBAAiB,EAAEC,MAAM,QAAQ,YAAY;AACpE,SACCC,wBAAwB,EACxBC,qBAAqB,EACrBC,sBAAsB,EACtBC,sBAAsB,EACtBC,qBAAqB,EACrBC,oBAAoB,EACpBC,wBAAwB,EACxBC,sBAAsB,EACtBC,2BAA2B,QACrB,2BAA2B;AAClC,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,OAAO,MAAMC,WAAW,GAAG,CAAC,CAAC;AAC7Bf,IAAI,CAAEe,WAAW,EAAE;EAClBvB,8CAA8C;EAC9CE,iBAAiB;EACjBE,IAAI;EACJD,KAAK;EACLF,IAAI;EACJI,SAAS;EACTE,mBAAmB;EACnBE,KAAK;EACLH,mBAAmB;EACnBI,YAAY;EACZC,iBAAiB;EACjBC,MAAM;EACNU,MAAM;EACNR,qBAAqB;EACrBD,wBAAwB;EACxBE,sBAAsB;EACtBC,sBAAsB;EACtBC,qBAAqB;EACrBC,oBAAoB;EACpBC,wBAAwB;EACxBC,sBAAsB;EACtBC;AACD,CAAE,CAAC","ignoreList":[]}

package/build-module/validated-form-controls/components/form-token-field.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import { FormTokenField } from '../../form-token-field';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const UnforwardedValidatedFormTokenField = ({
+  required,
+  onValidate,
+  customValidity,
+  onChange,
+  markWhenOptional,
+  ...restProps
+}, forwardedRef) => {
+  const validityTargetRef = useRef(null);
+  const valueRef = useRef(restProps.value);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "components-validated-control__wrapper-with-error-delegate",
+    ref: forwardedRef,
+    children: [/*#__PURE__*/_jsx(ControlWithError, {
+      required: required,
+      markWhenOptional: markWhenOptional,
+      onValidate: () => {
+        return onValidate?.(valueRef.current);
+      },
+      customValidity: customValidity,
+      getValidityTarget: () => validityTargetRef.current,
+      children: /*#__PURE__*/_jsx(FormTokenField, {
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true,
+        ...restProps,
+        onChange: (value, ...args) => {
+          valueRef.current = value;
+          onChange?.(value, ...args);
+        }
+      })
+    }), /*#__PURE__*/_jsx("input", {
+      className: "components-validated-control__error-delegate",
+      type: "text",
+      ref: validityTargetRef,
+      required: required,
+      value: valueRef.current && valueRef.current.length > 0 ? 'hasvalue' : '',
+      tabIndex: -1,
+      onChange: () => {},
+      onFocus: e => {
+        e.target.previousElementSibling?.querySelector('input[type="text"]')?.focus();
+      }
+    })]
+  });
+};
+export const ValidatedFormTokenField = forwardRef(UnforwardedValidatedFormTokenField);
+//# sourceMappingURL=form-token-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useRef","ControlWithError","FormTokenField","jsx","_jsx","jsxs","_jsxs","UnforwardedValidatedFormTokenField","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","valueRef","value","className","ref","children","current","getValidityTarget","__next40pxDefaultSize","__nextHasNoMarginBottom","args","type","length","tabIndex","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedFormTokenField"],"sources":["@wordpress/components/src/validated-form-controls/components/form-token-field.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 { FormTokenField } from '../../form-token-field';\nimport type { FormTokenFieldProps } from '../../form-token-field/types';\n\ntype Value = FormTokenFieldProps[ 'value' ];\n\nconst UnforwardedValidatedFormTokenField = (\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 FormTokenField >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< FormTokenFieldProps[ 'value' ] >,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( 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<FormTokenField\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tonChange={ ( value, ...args ) => {\n\t\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\t\tonChange?.( value, ...args );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</ControlWithError>\n\t\t\t<input\n\t\t\t\tclassName=\"components-validated-control__error-delegate\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tref={ validityTargetRef }\n\t\t\t\trequired={ required }\n\t\t\t\tvalue={\n\t\t\t\t\tvalueRef.current && valueRef.current.length > 0\n\t\t\t\t\t\t? 'hasvalue'\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\ttabIndex={ -1 }\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< HTMLInputElement >(\n\t\t\t\t\t\t\t'input[type=\"text\"]'\n\t\t\t\t\t\t)\n\t\t\t\t\t\t?.focus();\n\t\t\t\t} }\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport const ValidatedFormTokenField = forwardRef(\n\tUnforwardedValidatedFormTokenField\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,SAASC,cAAc,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAKxD,MAAMC,kCAAkC,GAAGA,CAC1C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAKmD,CAAC,EACxDC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,GAAGf,MAAM,CAAsB,IAAK,CAAC;EAC5D,MAAMgB,QAAQ,GAAGhB,MAAM,CAAWa,SAAS,CAACI,KAAM,CAAC;EAEnD,oBACCX,KAAA;IACCY,SAAS,EAAC,2DAA2D;IACrEC,GAAG,EAAGL,YAAc;IAAAM,QAAA,gBAEpBhB,IAAA,CAACH,gBAAgB;MAChBO,QAAQ,EAAGA,QAAU;MACrBI,gBAAgB,EAAGA,gBAAkB;MACrCH,UAAU,EAAGA,CAAA,KAAM;QAClB,OAAOA,UAAU,GAAIO,QAAQ,CAACK,OAAQ,CAAC;MACxC,CAAG;MACHX,cAAc,EAAGA,cAAgB;MACjCY,iBAAiB,EAAGA,CAAA,KAAMP,iBAAiB,CAACM,OAAS;MAAAD,QAAA,eAErDhB,IAAA,CAACF,cAAc;QACdqB,qBAAqB;QACrBC,uBAAuB;QAAA,GAClBX,SAAS;QACdF,QAAQ,EAAGA,CAAEM,KAAK,EAAE,GAAGQ,IAAI,KAAM;UAChCT,QAAQ,CAACK,OAAO,GAAGJ,KAAK;UACxBN,QAAQ,GAAIM,KAAK,EAAE,GAAGQ,IAAK,CAAC;QAC7B;MAAG,CACH;IAAC,CACe,CAAC,eACnBrB,IAAA;MACCc,SAAS,EAAC,8CAA8C;MACxDQ,IAAI,EAAC,MAAM;MACXP,GAAG,EAAGJ,iBAAmB;MACzBP,QAAQ,EAAGA,QAAU;MACrBS,KAAK,EACJD,QAAQ,CAACK,OAAO,IAAIL,QAAQ,CAACK,OAAO,CAACM,MAAM,GAAG,CAAC,GAC5C,UAAU,GACV,EACH;MACDC,QAAQ,EAAG,CAAC,CAAG;MACfjB,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrBkB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,oBACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX;IAAG,CACH,CAAC;EAAA,CACE,CAAC;AAER,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGpC,UAAU,CAChDQ,kCACD,CAAC","ignoreList":[]}

package/build-module/validated-form-controls/components/index.js

@@ -1,6 +1,7 @@
 export * from './checkbox-control';
 export * from './combobox-control';
 export * from './custom-select-control';
+export * from './form-token-field';
 export * from './input-control';
 export * from './number-control';
 export * from './radio-control';

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/validated-form-controls/components/index.ts"],"sourcesContent":["export * from './checkbox-control';\nexport * from './combobox-control';\nexport * from './custom-select-control';\nexport * from './input-control';\nexport * from './number-control';\nexport * from './radio-control';\nexport * from './range-control';\nexport * from './select-control';\nexport * from './text-control';\nexport * from './textarea-control';\nexport * from './toggle-control';\nexport * from './toggle-group-control';\n"],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AACvC,cAAc,iBAAiB;AAC/B,cAAc,kBAAkB;AAChC,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,kBAAkB;AAChC,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,kBAAkB;AAChC,cAAc,wBAAwB","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/validated-form-controls/components/index.ts"],"sourcesContent":["export * from './checkbox-control';\nexport * from './combobox-control';\nexport * from './custom-select-control';\nexport * from './form-token-field';\nexport * from './input-control';\nexport * from './number-control';\nexport * from './radio-control';\nexport * from './range-control';\nexport * from './select-control';\nexport * from './text-control';\nexport * from './textarea-control';\nexport * from './toggle-control';\nexport * from './toggle-group-control';\n"],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AACvC,cAAc,oBAAoB;AAClC,cAAc,iBAAiB;AAC/B,cAAc,kBAAkB;AAChC,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,kBAAkB;AAChC,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,kBAAkB;AAChC,cAAc,wBAAwB","ignoreList":[]}

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

@@ -33,10 +33,7 @@ const UnforwardedValidatedToggleGroupControl = ({
       children: /*#__PURE__*/_jsx(ToggleGroupControl, {
         __nextHasNoMarginBottom: true,
         __next40pxDefaultSize: true,
-        ref: forwardedRef
-        // TODO: Upstream limitation - In uncontrolled mode, starting from an undefined value then
-        // setting a value has a visual bug.
-        ,
+        ref: forwardedRef,
         onChange: value => {
           valueRef.current = value;
           onChange?.(value);
@@ -48,7 +45,7 @@ const UnforwardedValidatedToggleGroupControl = ({
       type: "radio",
       ref: validityTargetRef,
       required: required,
-      checked: restProps.value !== null,
+      checked: restProps.value !== undefined,
       tabIndex: -1
       // A name attribute is needed for the `required` behavior to work.
       ,

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

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

package/build-style/style-rtl.css

@@ -3847,6 +3847,10 @@ div.components-toolbar > div + div.has-left-divider::before {
 .components-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid) {
   --wp-components-color-accent: #cc1818;
 }
+.components-validated-control__wrapper-with-error-delegate:has(input:user-invalid) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
+  --wp-components-color-accent: #cc1818;
+  border-color: #cc1818;
+}
 
 .components-validated-control__error-delegate {
   position: absolute;

package/build-style/style.css

@@ -3860,6 +3860,10 @@ div.components-toolbar > div + div.has-left-divider::before {
 .components-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid) {
   --wp-components-color-accent: #cc1818;
 }
+.components-validated-control__wrapper-with-error-delegate:has(input:user-invalid) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
+  --wp-components-color-accent: #cc1818;
+  border-color: #cc1818;
+}
 
 .components-validated-control__error-delegate {
   position: absolute;

package/build-types/private-apis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,IAAK,CAAC"}
+{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,WAAW,IAAK,CAAC"}

package/build-types/validated-form-controls/components/form-token-field.d.ts

@@ -0,0 +1,4 @@
+import type { ValidatedControlProps } from './types';
+import type { FormTokenFieldProps } from '../../form-token-field/types';
+export declare const ValidatedFormTokenField: import("react").ForwardRefExoticComponent<Omit<FormTokenFieldProps, "__next40pxDefaultSize" | "__nextHasNoMarginBottom"> & ValidatedControlProps<(string | import("../../form-token-field/types").TokenItem)[] | undefined> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=form-token-field.d.ts.map

package/build-types/validated-form-controls/components/form-token-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-token-field.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/form-token-field.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAsExE,eAAO,MAAM,uBAAuB,8QAEnC,CAAC"}

package/build-types/validated-form-controls/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './checkbox-control';
 export * from './combobox-control';
 export * from './custom-select-control';
+export * from './form-token-field';
 export * from './input-control';
 export * from './number-control';
 export * from './radio-control';

package/build-types/validated-form-controls/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}

package/build-types/validated-form-controls/components/stories/form-token-field.story.d.ts

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { ValidatedFormTokenField } from '../form-token-field';
+declare const meta: Meta<typeof ValidatedFormTokenField>;
+export default meta;
+/**
+ * This demonstrates how array validation would work with the ValidatedFormTokenField component.
+ */
+export declare const Default: StoryObj<typeof ValidatedFormTokenField>;
+//# sourceMappingURL=form-token-field.story.d.ts.map

package/build-types/validated-form-controls/components/stories/form-token-field.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-token-field.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/form-token-field.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAI9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,uBAAuB,CAY/C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,uBAAuB,CAuC7D,CAAC"}

package/build-types/validated-form-controls/components/toggle-group-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-group-control.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAwErD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;2lBAEvC,CAAC"}
+{"version":3,"file":"toggle-group-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-group-control.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAsErD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;2lBAEvC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.3.2-next.836ecdcae.0",
+	"version": "30.4.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,23 +44,23 @@
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.30.1-next.836ecdcae.0",
-		"@wordpress/compose": "^7.30.1-next.836ecdcae.0",
-		"@wordpress/date": "^5.30.1-next.836ecdcae.0",
-		"@wordpress/deprecated": "^4.30.1-next.836ecdcae.0",
-		"@wordpress/dom": "^4.30.1-next.836ecdcae.0",
-		"@wordpress/element": "^6.30.1-next.836ecdcae.0",
-		"@wordpress/escape-html": "^3.30.1-next.836ecdcae.0",
-		"@wordpress/hooks": "^4.30.1-next.836ecdcae.0",
-		"@wordpress/html-entities": "^4.30.1-next.836ecdcae.0",
-		"@wordpress/i18n": "^6.3.1-next.836ecdcae.0",
-		"@wordpress/icons": "^10.30.1-next.836ecdcae.0",
-		"@wordpress/is-shallow-equal": "^5.30.1-next.836ecdcae.0",
-		"@wordpress/keycodes": "^4.30.1-next.836ecdcae.0",
-		"@wordpress/primitives": "^4.30.1-next.836ecdcae.0",
-		"@wordpress/private-apis": "^1.30.1-next.836ecdcae.0",
-		"@wordpress/rich-text": "^7.30.1-next.836ecdcae.0",
-		"@wordpress/warning": "^3.30.1-next.836ecdcae.0",
+		"@wordpress/a11y": "^4.31.0",
+		"@wordpress/compose": "^7.31.0",
+		"@wordpress/date": "^5.31.0",
+		"@wordpress/deprecated": "^4.31.0",
+		"@wordpress/dom": "^4.31.0",
+		"@wordpress/element": "^6.31.0",
+		"@wordpress/escape-html": "^3.31.0",
+		"@wordpress/hooks": "^4.31.0",
+		"@wordpress/html-entities": "^4.31.0",
+		"@wordpress/i18n": "^6.4.0",
+		"@wordpress/icons": "^10.31.0",
+		"@wordpress/is-shallow-equal": "^5.31.0",
+		"@wordpress/keycodes": "^4.31.0",
+		"@wordpress/primitives": "^4.31.0",
+		"@wordpress/private-apis": "^1.31.0",
+		"@wordpress/rich-text": "^7.31.0",
+		"@wordpress/warning": "^3.31.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3e60b4c1e78d7b27acbf1d7dd172bbd64358a0f2"
+	"gitHead": "d7601d30d49462ea942168e8ab6bf449fb93097e"
 }

package/src/private-apis.ts

@@ -13,10 +13,17 @@ import Badge from './badge';
 
 import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
 import {
+	ValidatedCheckboxControl,
+	ValidatedInputControl,
 	ValidatedNumberControl,
+	ValidatedSelectControl,
+	ValidatedRadioControl,
 	ValidatedTextControl,
+	ValidatedTextareaControl,
 	ValidatedToggleControl,
+	ValidatedToggleGroupControl,
 } from './validated-form-controls';
+import { Picker } from './color-picker/picker';
 
 export const privateApis = {};
 lock( privateApis, {
@@ -32,7 +39,14 @@ lock( privateApis, {
 	DateCalendar,
 	DateRangeCalendar,
 	TZDate,
+	Picker,
+	ValidatedInputControl,
+	ValidatedCheckboxControl,
 	ValidatedNumberControl,
+	ValidatedSelectControl,
+	ValidatedRadioControl,
 	ValidatedTextControl,
+	ValidatedTextareaControl,
 	ValidatedToggleControl,
+	ValidatedToggleGroupControl,
 } );