@wordpress/components 30.3.2-next.6870dfe5b.0 → 30.3.2-next.6f42e1382.0

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Unreleased
 
-## 30.3.1-next.0 (2025-09-08)
+## 30.3.1-next.0 (2025-09-12)
 
 ### Bug Fixes
 
@@ -11,6 +11,8 @@
 ### Internal
 
 -   `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).
 
 ## 30.3.0 (2025-09-03)
 

package/build/private-apis.js

@@ -40,6 +40,7 @@ const privateApis = exports.privateApis = {};
   ValidatedCheckboxControl: _validatedFormControls.ValidatedCheckboxControl,
   ValidatedNumberControl: _validatedFormControls.ValidatedNumberControl,
   ValidatedTextControl: _validatedFormControls.ValidatedTextControl,
+  ValidatedTextareaControl: _validatedFormControls.ValidatedTextareaControl,
   ValidatedToggleControl: _validatedFormControls.ValidatedToggleControl
 });
 //# 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","_picker","privateApis","exports","lock","__experimentalPopoverLegacyPositionToPlacement","ComponentsContext","Tabs","Theme","Menu","kebabCase","withIgnoreIMEEvents","Badge","normalizeTextString","DateCalendar","DateRangeCalendar","TZDate","Picker","ValidatedInputControl","ValidatedCheckboxControl","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\tValidatedCheckboxControl,\n\tValidatedInputControl,\n\tValidatedNumberControl,\n\tValidatedTextControl,\n\tValidatedToggleControl,\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\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;AAOA,IAAAY,OAAA,GAAAZ,OAAA;AArBA;AACA;AACA;;AAqBO,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,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","ValidatedTextControl","ValidatedTextareaControl","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\tValidatedCheckboxControl,\n\tValidatedInputControl,\n\tValidatedNumberControl,\n\tValidatedTextControl,\n\tValidatedTextareaControl,\n\tValidatedToggleControl,\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\tValidatedTextControl,\n\tValidatedTextareaControl,\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;AAQA,IAAAY,OAAA,GAAAZ,OAAA;AAtBA;AACA;AACA;;AAsBO,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,oBAAoB,EAApBA,2CAAoB;EACpBC,wBAAwB,EAAxBA,+CAAwB;EACxBC,sBAAsB,EAAtBA;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-module/private-apis.js

@@ -11,7 +11,7 @@ import { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';
 import { lock } from './lock-unlock';
 import Badge from './badge';
 import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
-import { ValidatedCheckboxControl, ValidatedInputControl, ValidatedNumberControl, ValidatedTextControl, ValidatedToggleControl } from './validated-form-controls';
+import { ValidatedCheckboxControl, ValidatedInputControl, ValidatedNumberControl, ValidatedTextControl, ValidatedTextareaControl, ValidatedToggleControl } from './validated-form-controls';
 import { Picker } from './color-picker/picker';
 export const privateApis = {};
 lock(privateApis, {
@@ -32,6 +32,7 @@ lock(privateApis, {
   ValidatedCheckboxControl,
   ValidatedNumberControl,
   ValidatedTextControl,
+  ValidatedTextareaControl,
   ValidatedToggleControl
 });
 //# 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","ValidatedCheckboxControl","ValidatedInputControl","ValidatedNumberControl","ValidatedTextControl","ValidatedToggleControl","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\tValidatedTextControl,\n\tValidatedToggleControl,\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\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,wBAAwB,EACxBC,qBAAqB,EACrBC,sBAAsB,EACtBC,oBAAoB,EACpBC,sBAAsB,QAChB,2BAA2B;AAClC,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,OAAO,MAAMC,WAAW,GAAG,CAAC,CAAC;AAC7BX,IAAI,CAAEW,WAAW,EAAE;EAClBnB,8CAA8C;EAC9CE,iBAAiB;EACjBE,IAAI;EACJD,KAAK;EACLF,IAAI;EACJI,SAAS;EACTE,mBAAmB;EACnBE,KAAK;EACLH,mBAAmB;EACnBI,YAAY;EACZC,iBAAiB;EACjBC,MAAM;EACNM,MAAM;EACNJ,qBAAqB;EACrBD,wBAAwB;EACxBE,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","ValidatedTextControl","ValidatedTextareaControl","ValidatedToggleControl","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\tValidatedTextControl,\n\tValidatedTextareaControl,\n\tValidatedToggleControl,\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\tValidatedTextControl,\n\tValidatedTextareaControl,\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,wBAAwB,EACxBC,qBAAqB,EACrBC,sBAAsB,EACtBC,oBAAoB,EACpBC,wBAAwB,EACxBC,sBAAsB,QAChB,2BAA2B;AAClC,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,OAAO,MAAMC,WAAW,GAAG,CAAC,CAAC;AAC7BZ,IAAI,CAAEY,WAAW,EAAE;EAClBpB,8CAA8C;EAC9CE,iBAAiB;EACjBE,IAAI;EACJD,KAAK;EACLF,IAAI;EACJI,SAAS;EACTE,mBAAmB;EACnBE,KAAK;EACLH,mBAAmB;EACnBI,YAAY;EACZC,iBAAiB;EACjBC,MAAM;EACNO,MAAM;EACNL,qBAAqB;EACrBD,wBAAwB;EACxBE,sBAAsB;EACtBC,oBAAoB;EACpBC,wBAAwB;EACxBC;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-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":"AAuBA,eAAO,MAAM,WAAW,IAAK,CAAC"}
+{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AAwBA,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.3.2-next.6870dfe5b.0",
+	"version": "30.3.2-next.6f42e1382.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.6870dfe5b.0",
-		"@wordpress/compose": "^7.30.1-next.6870dfe5b.0",
-		"@wordpress/date": "^5.30.1-next.6870dfe5b.0",
-		"@wordpress/deprecated": "^4.30.1-next.6870dfe5b.0",
-		"@wordpress/dom": "^4.30.1-next.6870dfe5b.0",
-		"@wordpress/element": "^6.30.1-next.6870dfe5b.0",
-		"@wordpress/escape-html": "^3.30.1-next.6870dfe5b.0",
-		"@wordpress/hooks": "^4.30.1-next.6870dfe5b.0",
-		"@wordpress/html-entities": "^4.30.1-next.6870dfe5b.0",
-		"@wordpress/i18n": "^6.3.1-next.6870dfe5b.0",
-		"@wordpress/icons": "^10.30.1-next.6870dfe5b.0",
-		"@wordpress/is-shallow-equal": "^5.30.1-next.6870dfe5b.0",
-		"@wordpress/keycodes": "^4.30.1-next.6870dfe5b.0",
-		"@wordpress/primitives": "^4.30.1-next.6870dfe5b.0",
-		"@wordpress/private-apis": "^1.30.1-next.6870dfe5b.0",
-		"@wordpress/rich-text": "^7.30.1-next.6870dfe5b.0",
-		"@wordpress/warning": "^3.30.1-next.6870dfe5b.0",
+		"@wordpress/a11y": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/compose": "^7.30.1-next.6f42e1382.0",
+		"@wordpress/date": "^5.30.1-next.6f42e1382.0",
+		"@wordpress/deprecated": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/dom": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/element": "^6.30.1-next.6f42e1382.0",
+		"@wordpress/escape-html": "^3.30.1-next.6f42e1382.0",
+		"@wordpress/hooks": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/html-entities": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/i18n": "^6.3.1-next.6f42e1382.0",
+		"@wordpress/icons": "^10.30.1-next.6f42e1382.0",
+		"@wordpress/is-shallow-equal": "^5.30.1-next.6f42e1382.0",
+		"@wordpress/keycodes": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/primitives": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/private-apis": "^1.30.1-next.6f42e1382.0",
+		"@wordpress/rich-text": "^7.30.1-next.6f42e1382.0",
+		"@wordpress/warning": "^3.30.1-next.6f42e1382.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c8637da9df499cd7b6b07c9fad918f6d45f4de3d"
+	"gitHead": "8806899f598577a3c90a55d9aa79fbc372fe1e75"
 }

package/src/private-apis.ts

@@ -17,6 +17,7 @@ import {
 	ValidatedInputControl,
 	ValidatedNumberControl,
 	ValidatedTextControl,
+	ValidatedTextareaControl,
 	ValidatedToggleControl,
 } from './validated-form-controls';
 import { Picker } from './color-picker/picker';
@@ -40,5 +41,6 @@ lock( privateApis, {
 	ValidatedCheckboxControl,
 	ValidatedNumberControl,
 	ValidatedTextControl,
+	ValidatedTextareaControl,
 	ValidatedToggleControl,
 } );

package/src/validated-form-controls/components/form-token-field.tsx

@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import { FormTokenField } from '../../form-token-field';
+import type { FormTokenFieldProps } from '../../form-token-field/types';
+
+type Value = FormTokenFieldProps[ 'value' ];
+
+const UnforwardedValidatedFormTokenField = (
+	{
+		required,
+		onValidate,
+		customValidity,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof FormTokenField >,
+		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+	> &
+		ValidatedControlProps< FormTokenFieldProps[ 'value' ] >,
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+	const valueRef = useRef< Value >( restProps.value );
+
+	return (
+		<div
+			className="components-validated-control__wrapper-with-error-delegate"
+			ref={ forwardedRef }
+		>
+			<ControlWithError
+				required={ required }
+				markWhenOptional={ markWhenOptional }
+				onValidate={ () => {
+					return onValidate?.( valueRef.current );
+				} }
+				customValidity={ customValidity }
+				getValidityTarget={ () => validityTargetRef.current }
+			>
+				<FormTokenField
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					{ ...restProps }
+					onChange={ ( value, ...args ) => {
+						valueRef.current = value;
+						onChange?.( value, ...args );
+					} }
+				/>
+			</ControlWithError>
+			<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< HTMLInputElement >(
+							'input[type="text"]'
+						)
+						?.focus();
+				} }
+			/>
+		</div>
+	);
+};
+
+export const ValidatedFormTokenField = forwardRef(
+	UnforwardedValidatedFormTokenField
+);

package/src/validated-form-controls/components/index.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/src/validated-form-controls/components/stories/form-token-field.story.tsx

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedFormTokenField } from '../form-token-field';
+import { formDecorator } from './story-utils';
+import type { TokenItem } from '../../../form-token-field/types';
+
+const meta: Meta< typeof ValidatedFormTokenField > = {
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedFormTokenField',
+	id: 'components-validatedformtokenfield',
+	component: ValidatedFormTokenField,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		onChange: { control: false },
+		value: { control: false },
+		customValidity: { control: false },
+	},
+};
+export default meta;
+
+/**
+ * This demonstrates how array validation would work with the ValidatedFormTokenField component.
+ */
+export const Default: StoryObj< typeof ValidatedFormTokenField > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState< ( string | TokenItem )[] >( [] );
+		const [ customValidity, setCustomValidity ] =
+			useState<
+				React.ComponentProps<
+					typeof ValidatedFormTokenField
+				>[ 'customValidity' ]
+			>( undefined );
+
+		return (
+			<ValidatedFormTokenField
+				{ ...args }
+				value={ value }
+				onChange={ ( newValue, ...rest ) => {
+					setValue( newValue );
+					onChange?.( newValue, ...rest );
+				} }
+				onValidate={ ( v ) => {
+					if (
+						v?.some( ( token ) => {
+							const tokenValue =
+								typeof token === 'string' ? token : token.value;
+							return tokenValue.toLowerCase() === 'error';
+						} )
+					) {
+						setCustomValidity( {
+							type: 'invalid',
+							message: 'The tag "error" is not allowed.',
+						} );
+						return;
+					}
+
+					setCustomValidity( undefined );
+				} }
+				customValidity={ customValidity }
+			/>
+		);
+	},
+};
+
+Default.args = {
+	required: true,
+	label: 'Tags',
+	placeholder: 'Add tags...',
+	suggestions: [ 'Posts', 'Pages', 'Media', 'Error' ],
+	__experimentalExpandOnFocus: true,
+};

package/src/validated-form-controls/style.scss

@@ -34,6 +34,12 @@
 	&:has(input[type="radio"]:invalid) {
 		--wp-components-color-accent: #{$alert-red};
 	}
+
+	// For FormTokenField
+	&:has(input:user-invalid) .components-form-token-field__input-container:not(:has([aria-expanded="true"])) {
+		--wp-components-color-accent: #{$alert-red};
+		border-color: $alert-red;
+	}
 }
 
 .components-validated-control__error-delegate {