@wordpress/dataviews 11.4.1-next.v.0 → 12.0.0

package/CHANGELOG.md

@@ -2,10 +2,43 @@
 
 ## Unreleased
 
-## 11.4.0-next.0 (2026-01-29)
+## 12.0.0 (2026-02-18)
+
+### Breaking Changes
+
+- The design tokens stylesheet (`@wordpress/theme/design-tokens.css`) is no longer embedded in the DataViews stylesheet. Applications using DataViews outside of WordPress must now explicitly include the design tokens stylesheet. See the README for installation instructions. [#75182](https://github.com/WordPress/gutenberg/pull/75182)
+
+### Bug Fixes
+
+- DataForm: Fix text selection in panel layout summary rows by replacing `::after` overlay with accessible card pattern. [#75565](https://github.com/WordPress/gutenberg/pull/75565)
+- DataViews: Improve styling for filters when long values are in use. [#75369](https://github.com/WordPress/gutenberg/pull/75369)
+- DataForm: Fix label case for regular layout. [#75292](https://github.com/WordPress/gutenberg/pull/75292)
+- DataViews: Add title attribute in grid item title field. [#75085](https://github.com/WordPress/gutenberg/pull/75085)
+- DataViews: Fix title truncation in list layout. [#75063](https://github.com/WordPress/gutenberg/pull/75063)
+- DataViews: Fix fields async validation. [#74948](https://github.com/WordPress/gutenberg/pull/74948)
+- DataForm: Fix color picker styles. [#75427](https://github.com/WordPress/gutenberg/pull/75427)
 
 ### Enhancements
+
+- DataForm: add edit variant. [#75462](https://github.com/WordPress/gutenberg/pull/75462)
+- DataForm: Update trigger mechanism for panel layout. [#75290](https://github.com/WordPress/gutenberg/pull/75290)
+- DataViews: Add `onReset` prop to control view reset functionality from the view config dropdown. [#75093](https://github.com/WordPress/gutenberg/pull/75093)
+- DataForm: Add automatic field labeling - forms now automatically mark the minority of fields (required or optional) to reduce visual noise. [#74430](https://github.com/WordPress/gutenberg/pull/74430)
 - DataViews: Add details form layout validation. [#74996](https://github.com/WordPress/gutenberg/pull/74996)
+- Add new `adaptiveSelect` DataForm control. [#74937](https://github.com/WordPress/gutenberg/pull/74937)
+- DataViews: Consistent rendering of selection checkbox and actions in grid layout. [#75056](https://github.com/WordPress/gutenberg/pull/75056)
+
+### Code Quality
+- DataForm: Style SummaryButton in panel layout with `is-disabled` classname. [#75470](https://github.com/WordPress/gutenberg/pull/75470)
+
+### Internal
+
+- DataForm: Use public `ColorPicker` component instead of internal `Picker` in color control. [#75394](https://github.com/WordPress/gutenberg/pull/75394)
+- Update Testing Library packages used in unit tests. [#75340](https://github.com/WordPress/gutenberg/pull/75340)
+- Always specify initial values for `useRef` calls. [#75513](https://github.com/WordPress/gutenberg/pull/75513)
+- Clean up type declarations using the `React` namespace. [#75508](https://github.com/WordPress/gutenberg/pull/75508)
+- Update `RefObject` type usage for React 19 compatibility. [#75567](https://github.com/WordPress/gutenberg/pull/75567)
+- Upgraded `@ariakit/react` (v0.4.21). [#75620](https://github.com/WordPress/gutenberg/pull/75620)
 
 ## 11.3.0 (2026-01-29)
 

package/README.md

@@ -14,6 +14,19 @@ Install the module
 npm install @wordpress/dataviews --save
 ```
 
+## Stylesheet Dependencies
+
+DataViews depends on stylesheets from `@wordpress/components` and `@wordpress/theme`. In a WordPress admin page context, these are loaded automatically. For applications outside WordPress, you will need to include these stylesheets:
+
+```bash
+npm install @wordpress/components @wordpress/theme
+```
+
+```tsx
+import '@wordpress/components/build-style/style.css';
+import '@wordpress/theme/design-tokens.css';
+```
+
 ## `DataViews`
 
 <div class="callout callout-info">At <a href="https://wordpress.github.io/gutenberg/">WordPress Gutenberg's Storybook</a> there's an <a href="https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs">example implementation of the Dataviews component</a>.</div>
@@ -465,6 +478,33 @@ Optional. Pass an object with a list of `perPageSizes` to control the available
 
 An element to display when the `data` prop is empty. Defaults to `<p>No results</p>`.
 
+#### `onReset`: `( () => void ) | false`
+
+Callback function to reset the view to its default state, or `false` to indicate the view is not modified.
+
+-   Type: `function` or `false`
+-   Optional
+
+This prop controls the "Reset view" button in the view configuration dropdown:
+
+-   When `undefined` (not provided): No reset functionality is shown. Use this when view persistence is not supported.
+-   When `false`: The "Reset view" button is shown but disabled. Use this when view persistence is supported but the current view matches the default (not modified).
+-   When a function: The "Reset view" button is shown and enabled. A blue dot indicator appears on the view options button to signal that the view has been modified. The function is called when the user clicks the reset button.
+
+Example:
+
+```jsx
+const { view, setView, isModified, resetToDefault } = useView( 'my-view-key' );
+
+<DataViews
+	data={ data }
+	view={ view }
+	onChangeView={ setView }
+	onReset={ isModified ? resetToDefault : false }
+	// ...other props
+/>
+```
+
 ### Styling
 
 These are the CSS Custom Properties that can be used to tweak the appearance of the component:
@@ -1202,7 +1242,7 @@ Example:
 	id: 'title',
 	type: 'text',
 	header: (
-		<Stack direction="row" gap="2xs" justify="start">
+		<Stack direction="row" gap="xs" justify="start">
 			<Icon icon={ icon } />
 			<span>Title</span>
 		</Stack>
@@ -2017,7 +2057,9 @@ For example:
 #### Panel
 
 -   `type`: `panel`. Required.
--   `labelPosition`: one of `side`, `top`, or `none`. Optional. `top` by default.
+-   `labelPosition`: one of `side`, `top`, or `none`. Optional. `side` by default.
+-   `editVisibility`: one of `always`, or `on-hover`. Optional. `on-hover` by default.
+-   `openAs`: one of `dropdown`, `modal`. Optional. `dropdown` by default.
 -   `summary`: Summary field configuration. Optional. Specifies which field(s) to display in the panel header. Can be:
     -   A string (single field ID)
     -   An array of strings (multiple field IDs)

package/build/components/dataform-controls/adaptive-select.cjs

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/dataviews/src/components/dataform-controls/adaptive-select.tsx
+var adaptive_select_exports = {};
+__export(adaptive_select_exports, {
+  default: () => AdaptiveSelect
+});
+module.exports = __toCommonJS(adaptive_select_exports);
+var import_use_elements = __toESM(require("../../hooks/use-elements.cjs"));
+var import_combobox = __toESM(require("./combobox.cjs"));
+var import_select = __toESM(require("./select.cjs"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var ELEMENTS_THRESHOLD = 10;
+function AdaptiveSelect(props) {
+  const { field } = props;
+  const { elements } = (0, import_use_elements.default)({
+    elements: field.elements,
+    getElements: field.getElements
+  });
+  if (elements.length >= ELEMENTS_THRESHOLD) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_combobox.default, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.default, { ...props });
+}
+//# sourceMappingURL=adaptive-select.cjs.map

package/build/components/dataform-controls/adaptive-select.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/dataform-controls/adaptive-select.tsx"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport useElements from '../../hooks/use-elements';\nimport Combobox from './combobox';\nimport Select from './select';\n\nconst ELEMENTS_THRESHOLD = 10;\n\nexport default function AdaptiveSelect< Item >(\n\tprops: DataFormControlProps< Item >\n) {\n\tconst { field } = props;\n\tconst { elements } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\tif ( elements.length >= ELEMENTS_THRESHOLD ) {\n\t\treturn <Combobox { ...props } />;\n\t}\n\treturn <Select { ...props } />;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,0BAAwB;AACxB,sBAAqB;AACrB,oBAAmB;AAaV;AAXT,IAAM,qBAAqB;AAEZ,SAAR,eACN,OACC;AACD,QAAM,EAAE,MAAM,IAAI;AAClB,QAAM,EAAE,SAAS,QAAI,oBAAAA,SAAa;AAAA,IACjC,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AACF,MAAK,SAAS,UAAU,oBAAqB;AAC5C,WAAO,4CAAC,gBAAAC,SAAA,EAAW,GAAG,OAAQ;AAAA,EAC/B;AACA,SAAO,4CAAC,cAAAC,SAAA,EAAS,GAAG,OAAQ;AAC7B;",
+  "names": ["useElements", "Combobox", "Select"]
+}

package/build/components/dataform-controls/array.cjs

@@ -45,6 +45,7 @@ function ArrayControl({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const { label, placeholder, getValue, setValue, isValid } = field;
@@ -81,6 +82,7 @@ function ArrayControl({
     ValidatedFormTokenField,
     {
       required: !!isValid?.required,
+      markWhenOptional,
       customValidity: (0, import_get_custom_validity.default)(isValid, validity),
       label: hideLabelFromVision ? void 0 : label,
       value: arrayValueAsElements,

package/build/components/dataform-controls/array.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/array.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis, Spinner } from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\nimport useElements from '../../hooks/use-elements';\n\nconst { ValidatedFormTokenField } = unlock( privateApis );\n\nexport default function ArrayControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, placeholder, getValue, setValue, isValid } = field;\n\tconst value = getValue( { item: data } );\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\t// Convert stored values to element objects for the token field\n\tconst arrayValueAsElements = useMemo(\n\t\t() =>\n\t\t\tArray.isArray( value )\n\t\t\t\t? value.map( ( token ) => {\n\t\t\t\t\t\tconst element = elements?.find(\n\t\t\t\t\t\t\t( suggestion ) => suggestion.value === token\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn element || { value: token, label: token };\n\t\t\t\t  } )\n\t\t\t\t: [],\n\t\t[ value, elements ]\n\t);\n\n\tconst onChangeControl = useCallback(\n\t\t( tokens: ( string | { value: string; label?: string } )[] ) => {\n\t\t\tconst valueTokens = tokens.map( ( token ) => {\n\t\t\t\tif ( typeof token === 'object' && 'value' in token ) {\n\t\t\t\t\treturn token.value;\n\t\t\t\t}\n\t\t\t\t// If it's a string, it's either a new suggestion value or user input\n\t\t\t\treturn token;\n\t\t\t} );\n\n\t\t\tonChange( setValue( { item: data, value: valueTokens } ) );\n\t\t},\n\t\t[ onChange, setValue, data ]\n\t);\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\treturn (\n\t\t<ValidatedFormTokenField\n\t\t\trequired={ !! isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ hideLabelFromVision ? undefined : label }\n\t\t\tvalue={ arrayValueAsElements }\n\t\t\tonChange={ onChangeControl }\n\t\t\tplaceholder={ placeholder }\n\t\t\tsuggestions={ elements?.map( ( element ) => element.value ) }\n\t\t\t__experimentalValidateInput={ ( token: string ) => {\n\t\t\t\t// If elements validation is required, check if token is valid\n\t\t\t\tif ( field.isValid?.elements && elements ) {\n\t\t\t\t\treturn elements.some(\n\t\t\t\t\t\t( element ) =>\n\t\t\t\t\t\t\telement.value === token || element.label === token\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// For non-elements validation, allow all tokens\n\t\t\t\treturn true;\n\t\t\t} }\n\t\t\t__experimentalExpandOnFocus={ elements && elements.length > 0 }\n\t\t\t__experimentalShowHowTo={ ! field.isValid?.elements }\n\t\t\tdisplayTransform={ ( token: any ) => {\n\t\t\t\t// For existing tokens (element objects), display their label\n\t\t\t\tif ( typeof token === 'object' && 'label' in token ) {\n\t\t\t\t\treturn token.label;\n\t\t\t\t}\n\t\t\t\t// For suggestions (value strings), find the corresponding element and show its label\n\t\t\t\tif ( typeof token === 'string' && elements ) {\n\t\t\t\t\tconst element = elements.find(\n\t\t\t\t\t\t( el ) => el.value === token\n\t\t\t\t\t);\n\t\t\t\t\treturn element?.label || token;\n\t\t\t\t}\n\t\t\t\treturn token;\n\t\t\t} }\n\t\t\t__experimentalRenderItem={ ( { item }: { item: any } ) => {\n\t\t\t\t// Custom rendering for suggestion items (item is a value string)\n\t\t\t\tif ( typeof item === 'string' && elements ) {\n\t\t\t\t\tconst element = elements.find(\n\t\t\t\t\t\t( el ) => el.value === item\n\t\t\t\t\t);\n\t\t\t\t\treturn <span>{ element?.label || item }</span>;\n\t\t\t\t}\n\t\t\t\treturn <span>{ item }</span>;\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAqC;AACrC,qBAAqC;AAMrC,yBAAuB;AACvB,iCAA8B;AAC9B,0BAAwB;AAiDf;AA/CT,IAAM,EAAE,wBAAwB,QAAI,2BAAQ,6BAAY;AAEzC,SAAR,aAAuC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAC5D,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,EAAE,UAAU,UAAU,QAAI,oBAAAA,SAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AAGF,QAAM,2BAAuB;AAAA,IAC5B,MACC,MAAM,QAAS,KAAM,IAClB,MAAM,IAAK,CAAE,UAAW;AACxB,YAAM,UAAU,UAAU;AAAA,QACzB,CAAE,eAAgB,WAAW,UAAU;AAAA,MACxC;AACA,aAAO,WAAW,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,IAC/C,CAAE,IACF,CAAC;AAAA,IACL,CAAE,OAAO,QAAS;AAAA,EACnB;AAEA,QAAM,sBAAkB;AAAA,IACvB,CAAE,WAA8D;AAC/D,YAAM,cAAc,OAAO,IAAK,CAAE,UAAW;AAC5C,YAAK,OAAO,UAAU,YAAY,WAAW,OAAQ;AACpD,iBAAO,MAAM;AAAA,QACd;AAEA,eAAO;AAAA,MACR,CAAE;AAEF,eAAU,SAAU,EAAE,MAAM,MAAM,OAAO,YAAY,CAAE,CAAE;AAAA,IAC1D;AAAA,IACA,CAAE,UAAU,UAAU,IAAK;AAAA,EAC5B;AAEA,MAAK,WAAY;AAChB,WAAO,4CAAC,6BAAQ;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,SAAS;AAAA,MACvB,oBAAiB,2BAAAC,SAAmB,SAAS,QAAS;AAAA,MACtD,OAAQ,sBAAsB,SAAY;AAAA,MAC1C,OAAQ;AAAA,MACR,UAAW;AAAA,MACX;AAAA,MACA,aAAc,UAAU,IAAK,CAAE,YAAa,QAAQ,KAAM;AAAA,MAC1D,6BAA8B,CAAE,UAAmB;AAElD,YAAK,MAAM,SAAS,YAAY,UAAW;AAC1C,iBAAO,SAAS;AAAA,YACf,CAAE,YACD,QAAQ,UAAU,SAAS,QAAQ,UAAU;AAAA,UAC/C;AAAA,QACD;AAGA,eAAO;AAAA,MACR;AAAA,MACA,6BAA8B,YAAY,SAAS,SAAS;AAAA,MAC5D,yBAA0B,CAAE,MAAM,SAAS;AAAA,MAC3C,kBAAmB,CAAE,UAAgB;AAEpC,YAAK,OAAO,UAAU,YAAY,WAAW,OAAQ;AACpD,iBAAO,MAAM;AAAA,QACd;AAEA,YAAK,OAAO,UAAU,YAAY,UAAW;AAC5C,gBAAM,UAAU,SAAS;AAAA,YACxB,CAAE,OAAQ,GAAG,UAAU;AAAA,UACxB;AACA,iBAAO,SAAS,SAAS;AAAA,QAC1B;AACA,eAAO;AAAA,MACR;AAAA,MACA,0BAA2B,CAAE,EAAE,KAAK,MAAsB;AAEzD,YAAK,OAAO,SAAS,YAAY,UAAW;AAC3C,gBAAM,UAAU,SAAS;AAAA,YACxB,CAAE,OAAQ,GAAG,UAAU;AAAA,UACxB;AACA,iBAAO,4CAAC,UAAO,mBAAS,SAAS,MAAM;AAAA,QACxC;AACA,eAAO,4CAAC,UAAO,gBAAM;AAAA,MACtB;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis, Spinner } from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\nimport useElements from '../../hooks/use-elements';\n\nconst { ValidatedFormTokenField } = unlock( privateApis );\n\nexport default function ArrayControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, placeholder, getValue, setValue, isValid } = field;\n\tconst value = getValue( { item: data } );\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\t// Convert stored values to element objects for the token field\n\tconst arrayValueAsElements = useMemo(\n\t\t() =>\n\t\t\tArray.isArray( value )\n\t\t\t\t? value.map( ( token ) => {\n\t\t\t\t\t\tconst element = elements?.find(\n\t\t\t\t\t\t\t( suggestion ) => suggestion.value === token\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn element || { value: token, label: token };\n\t\t\t\t  } )\n\t\t\t\t: [],\n\t\t[ value, elements ]\n\t);\n\n\tconst onChangeControl = useCallback(\n\t\t( tokens: ( string | { value: string; label?: string } )[] ) => {\n\t\t\tconst valueTokens = tokens.map( ( token ) => {\n\t\t\t\tif ( typeof token === 'object' && 'value' in token ) {\n\t\t\t\t\treturn token.value;\n\t\t\t\t}\n\t\t\t\t// If it's a string, it's either a new suggestion value or user input\n\t\t\t\treturn token;\n\t\t\t} );\n\n\t\t\tonChange( setValue( { item: data, value: valueTokens } ) );\n\t\t},\n\t\t[ onChange, setValue, data ]\n\t);\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\treturn (\n\t\t<ValidatedFormTokenField\n\t\t\trequired={ !! isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ hideLabelFromVision ? undefined : label }\n\t\t\tvalue={ arrayValueAsElements }\n\t\t\tonChange={ onChangeControl }\n\t\t\tplaceholder={ placeholder }\n\t\t\tsuggestions={ elements?.map( ( element ) => element.value ) }\n\t\t\t__experimentalValidateInput={ ( token: string ) => {\n\t\t\t\t// If elements validation is required, check if token is valid\n\t\t\t\tif ( field.isValid?.elements && elements ) {\n\t\t\t\t\treturn elements.some(\n\t\t\t\t\t\t( element ) =>\n\t\t\t\t\t\t\telement.value === token || element.label === token\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// For non-elements validation, allow all tokens\n\t\t\t\treturn true;\n\t\t\t} }\n\t\t\t__experimentalExpandOnFocus={ elements && elements.length > 0 }\n\t\t\t__experimentalShowHowTo={ ! field.isValid?.elements }\n\t\t\tdisplayTransform={ ( token: any ) => {\n\t\t\t\t// For existing tokens (element objects), display their label\n\t\t\t\tif ( typeof token === 'object' && 'label' in token ) {\n\t\t\t\t\treturn token.label;\n\t\t\t\t}\n\t\t\t\t// For suggestions (value strings), find the corresponding element and show its label\n\t\t\t\tif ( typeof token === 'string' && elements ) {\n\t\t\t\t\tconst element = elements.find(\n\t\t\t\t\t\t( el ) => el.value === token\n\t\t\t\t\t);\n\t\t\t\t\treturn element?.label || token;\n\t\t\t\t}\n\t\t\t\treturn token;\n\t\t\t} }\n\t\t\t__experimentalRenderItem={ ( { item }: { item: any } ) => {\n\t\t\t\t// Custom rendering for suggestion items (item is a value string)\n\t\t\t\tif ( typeof item === 'string' && elements ) {\n\t\t\t\t\tconst element = elements.find(\n\t\t\t\t\t\t( el ) => el.value === item\n\t\t\t\t\t);\n\t\t\t\t\treturn <span>{ element?.label || item }</span>;\n\t\t\t\t}\n\t\t\t\treturn <span>{ item }</span>;\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAqC;AACrC,qBAAqC;AAMrC,yBAAuB;AACvB,iCAA8B;AAC9B,0BAAwB;AAkDf;AAhDT,IAAM,EAAE,wBAAwB,QAAI,2BAAQ,6BAAY;AAEzC,SAAR,aAAuC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAC5D,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,EAAE,UAAU,UAAU,QAAI,oBAAAA,SAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AAGF,QAAM,2BAAuB;AAAA,IAC5B,MACC,MAAM,QAAS,KAAM,IAClB,MAAM,IAAK,CAAE,UAAW;AACxB,YAAM,UAAU,UAAU;AAAA,QACzB,CAAE,eAAgB,WAAW,UAAU;AAAA,MACxC;AACA,aAAO,WAAW,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,IAC/C,CAAE,IACF,CAAC;AAAA,IACL,CAAE,OAAO,QAAS;AAAA,EACnB;AAEA,QAAM,sBAAkB;AAAA,IACvB,CAAE,WAA8D;AAC/D,YAAM,cAAc,OAAO,IAAK,CAAE,UAAW;AAC5C,YAAK,OAAO,UAAU,YAAY,WAAW,OAAQ;AACpD,iBAAO,MAAM;AAAA,QACd;AAEA,eAAO;AAAA,MACR,CAAE;AAEF,eAAU,SAAU,EAAE,MAAM,MAAM,OAAO,YAAY,CAAE,CAAE;AAAA,IAC1D;AAAA,IACA,CAAE,UAAU,UAAU,IAAK;AAAA,EAC5B;AAEA,MAAK,WAAY;AAChB,WAAO,4CAAC,6BAAQ;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,SAAS;AAAA,MACvB;AAAA,MACA,oBAAiB,2BAAAC,SAAmB,SAAS,QAAS;AAAA,MACtD,OAAQ,sBAAsB,SAAY;AAAA,MAC1C,OAAQ;AAAA,MACR,UAAW;AAAA,MACX;AAAA,MACA,aAAc,UAAU,IAAK,CAAE,YAAa,QAAQ,KAAM;AAAA,MAC1D,6BAA8B,CAAE,UAAmB;AAElD,YAAK,MAAM,SAAS,YAAY,UAAW;AAC1C,iBAAO,SAAS;AAAA,YACf,CAAE,YACD,QAAQ,UAAU,SAAS,QAAQ,UAAU;AAAA,UAC/C;AAAA,QACD;AAGA,eAAO;AAAA,MACR;AAAA,MACA,6BAA8B,YAAY,SAAS,SAAS;AAAA,MAC5D,yBAA0B,CAAE,MAAM,SAAS;AAAA,MAC3C,kBAAmB,CAAE,UAAgB;AAEpC,YAAK,OAAO,UAAU,YAAY,WAAW,OAAQ;AACpD,iBAAO,MAAM;AAAA,QACd;AAEA,YAAK,OAAO,UAAU,YAAY,UAAW;AAC5C,gBAAM,UAAU,SAAS;AAAA,YACxB,CAAE,OAAQ,GAAG,UAAU;AAAA,UACxB;AACA,iBAAO,SAAS,SAAS;AAAA,QAC1B;AACA,eAAO;AAAA,MACR;AAAA,MACA,0BAA2B,CAAE,EAAE,KAAK,MAAsB;AAEzD,YAAK,OAAO,SAAS,YAAY,UAAW;AAC3C,gBAAM,UAAU,SAAS;AAAA,YACxB,CAAE,OAAQ,GAAG,UAAU;AAAA,UACxB;AACA,iBAAO,4CAAC,UAAO,mBAAS,SAAS,MAAM;AAAA,QACxC;AACA,eAAO,4CAAC,UAAO,gBAAM;AAAA,MACtB;AAAA;AAAA,EACD;AAEF;",
   "names": ["useElements", "getCustomValidity"]
 }

package/build/components/dataform-controls/checkbox.cjs

@@ -44,6 +44,7 @@ function Checkbox({
   onChange,
   data,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const { getValue, setValue, label, description, isValid } = field;
@@ -56,6 +57,7 @@ function Checkbox({
     ValidatedCheckboxControl,
     {
       required: !!field.isValid?.required,
+      markWhenOptional,
       customValidity: (0, import_get_custom_validity.default)(isValid, validity),
       hidden: hideLabelFromVision,
       label,

package/build/components/dataform-controls/checkbox.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/checkbox.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedCheckboxControl } = unlock( privateApis );\n\nexport default function Checkbox< Item >( {\n\tfield,\n\tonChange,\n\tdata,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { getValue, setValue, label, description, isValid } = field;\n\n\tconst onChangeControl = useCallback( () => {\n\t\tonChange(\n\t\t\tsetValue( { item: data, value: ! getValue( { item: data } ) } )\n\t\t);\n\t}, [ data, getValue, onChange, setValue ] );\n\n\treturn (\n\t\t<ValidatedCheckboxControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\thidden={ hideLabelFromVision }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tchecked={ getValue( { item: data } ) }\n\t\t\tonChange={ onChangeControl }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA4B;AAC5B,qBAA4B;AAM5B,yBAAuB;AACvB,iCAA8B;AAoB5B;AAlBF,IAAM,EAAE,yBAAyB,QAAI,2BAAQ,6BAAY;AAE1C,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,UAAU,UAAU,OAAO,aAAa,QAAQ,IAAI;AAE5D,QAAM,sBAAkB,4BAAa,MAAM;AAC1C;AAAA,MACC,SAAU,EAAE,MAAM,MAAM,OAAO,CAAE,SAAU,EAAE,MAAM,KAAK,CAAE,EAAE,CAAE;AAAA,IAC/D;AAAA,EACD,GAAG,CAAE,MAAM,UAAU,UAAU,QAAS,CAAE;AAE1C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B,oBAAiB,2BAAAA,SAAmB,SAAS,QAAS;AAAA,MACtD,QAAS;AAAA,MACT;AAAA,MACA,MAAO;AAAA,MACP,SAAU,SAAU,EAAE,MAAM,KAAK,CAAE;AAAA,MACnC,UAAW;AAAA;AAAA,EACZ;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedCheckboxControl } = unlock( privateApis );\n\nexport default function Checkbox< Item >( {\n\tfield,\n\tonChange,\n\tdata,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { getValue, setValue, label, description, isValid } = field;\n\n\tconst onChangeControl = useCallback( () => {\n\t\tonChange(\n\t\t\tsetValue( { item: data, value: ! getValue( { item: data } ) } )\n\t\t);\n\t}, [ data, getValue, onChange, setValue ] );\n\n\treturn (\n\t\t<ValidatedCheckboxControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\thidden={ hideLabelFromVision }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tchecked={ getValue( { item: data } ) }\n\t\t\tonChange={ onChangeControl }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA4B;AAC5B,qBAA4B;AAM5B,yBAAuB;AACvB,iCAA8B;AAqB5B;AAnBF,IAAM,EAAE,yBAAyB,QAAI,2BAAQ,6BAAY;AAE1C,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,UAAU,UAAU,OAAO,aAAa,QAAQ,IAAI;AAE5D,QAAM,sBAAkB,4BAAa,MAAM;AAC1C;AAAA,MACC,SAAU,EAAE,MAAM,MAAM,OAAO,CAAE,SAAU,EAAE,MAAM,KAAK,CAAE,EAAE,CAAE;AAAA,IAC/D;AAAA,EACD,GAAG,CAAE,MAAM,UAAU,UAAU,QAAS,CAAE;AAE1C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B;AAAA,MACA,oBAAiB,2BAAAA,SAAmB,SAAS,QAAS;AAAA,MACtD,QAAS;AAAA,MACT;AAAA,MACA,MAAO;AAAA,MACP,SAAU,SAAU,EAAE,MAAM,KAAK,CAAE;AAAA,MACnC,UAAW;AAAA;AAAA,EACZ;AAEF;",
   "names": ["getCustomValidity"]
 }

package/build/components/dataform-controls/color.cjs

@@ -36,11 +36,12 @@ module.exports = __toCommonJS(color_exports);
 var import_colord = require("colord");
 var import_components = require("@wordpress/components");
 var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
 var import_lock_unlock = require("../../lock-unlock.cjs");
 var import_get_custom_validity = __toESM(require("./utils/get-custom-validity.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var { ValidatedInputControl, Picker } = (0, import_lock_unlock.unlock)(import_components.privateApis);
-var ColorPicker = ({
+var { ValidatedInputControl } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+var ColorPickerDropdown = ({
   color,
   onColorChange
 }) => {
@@ -48,33 +49,21 @@ var ColorPicker = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_components.Dropdown,
     {
-      renderToggle: ({ onToggle, isOpen }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+      className: "dataviews-controls__color-picker-dropdown",
+      popoverProps: { resize: false },
+      renderToggle: ({ onToggle }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Button,
         {
-          type: "button",
           onClick: onToggle,
-          style: {
-            width: "24px",
-            height: "24px",
-            borderRadius: "50%",
-            backgroundColor: validColor,
-            border: "1px solid #ddd",
-            cursor: "pointer",
-            outline: isOpen ? "2px solid #007cba" : "none",
-            outlineOffset: "2px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: 0,
-            margin: 0
-          },
-          "aria-label": "Open color picker"
+          "aria-label": (0, import_i18n.__)("Open color picker"),
+          size: "small",
+          icon: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ColorIndicator, { colorValue: validColor })
         }
-      ) }),
-      renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        Picker,
+      ),
+      renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalDropdownContentWrapper, { paddingSize: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.ColorPicker,
         {
-          color: (0, import_colord.colord)(validColor),
+          color: validColor,
           onChange: onColorChange,
           enableAlpha: true
         }
@@ -87,13 +76,14 @@ function Color({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const { label, placeholder, description, setValue, isValid } = field;
   const value = field.getValue({ item: data }) || "";
   const handleColorChange = (0, import_element.useCallback)(
-    (colorObject) => {
-      onChange(setValue({ item: data, value: colorObject.toHex() }));
+    (newColor) => {
+      onChange(setValue({ item: data, value: newColor }));
     },
     [data, onChange, setValue]
   );
@@ -107,6 +97,7 @@ function Color({
     ValidatedInputControl,
     {
       required: !!field.isValid?.required,
+      markWhenOptional,
       customValidity: (0, import_get_custom_validity.default)(isValid, validity),
       label,
       placeholder,
@@ -115,13 +106,13 @@ function Color({
       onChange: handleInputChange,
       hideLabelFromVision,
       type: "text",
-      prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        ColorPicker,
+      prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControlPrefixWrapper, { variant: "control", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ColorPickerDropdown,
         {
           color: value,
           onColorChange: handleColorChange
         }
-      )
+      ) })
     }
   );
 }

package/build/components/dataform-controls/color.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/color.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tDropdown,\n\tprivateApis,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedInputControl, Picker } = unlock( privateApis );\n\nconst ColorPicker = ( {\n\tcolor,\n\tonColorChange,\n}: {\n\tcolor: string;\n\tonColorChange: ( colorObject: any ) => void;\n} ) => {\n\tconst validColor = color && colord( color ).isValid() ? color : '#ffffff';\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => (\n\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\t\tbackgroundColor: validColor,\n\t\t\t\t\t\t\tborder: '1px solid #ddd',\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\toutline: isOpen ? '2px solid #007cba' : 'none',\n\t\t\t\t\t\t\toutlineOffset: '2px',\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\tpadding: 0,\n\t\t\t\t\t\t\tmargin: 0,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\taria-label=\"Open color picker\"\n\t\t\t\t\t/>\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<div style={ { padding: '16px' } }>\n\t\t\t\t\t<Picker\n\t\t\t\t\t\tcolor={ colord( validColor ) }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t/>\n\t);\n};\n\nexport default function Color< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, placeholder, description, setValue, isValid } = field;\n\tconst value = field.getValue( { item: data } ) || '';\n\n\tconst handleColorChange = useCallback(\n\t\t( colorObject: any ) => {\n\t\t\tonChange( setValue( { item: data, value: colorObject.toHex() } ) );\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst handleInputChange = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange( setValue( { item: data, value: newValue || '' } ) );\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\tonChange={ handleInputChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\ttype=\"text\"\n\t\t\tprefix={\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ value }\n\t\t\t\t\tonColorChange={ handleColorChange }\n\t\t\t\t/>\n\t\t\t}\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAuB;AAKvB,wBAIO;AACP,qBAA4B;AAM5B,yBAAuB;AACvB,iCAA8B;AAiBzB;AAfL,IAAM,EAAE,uBAAuB,OAAO,QAAI,2BAAQ,6BAAY;AAE9D,IAAM,cAAc,CAAE;AAAA,EACrB;AAAA,EACA;AACD,MAGO;AACN,QAAM,aAAa,aAAS,sBAAQ,KAAM,EAAE,QAAQ,IAAI,QAAQ;AAEhE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAe,CAAE,EAAE,UAAU,OAAO,MACnC,4CAAC,kBAAAA,yCAAA,EAA0B,SAAQ,QAClC;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,SAAU;AAAA,UACV,OAAQ;AAAA,YACP,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,cAAc;AAAA,YACd,iBAAiB;AAAA,YACjB,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,SAAS,SAAS,sBAAsB;AAAA,YACxC,eAAe;AAAA,YACf,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,QAAQ;AAAA,UACT;AAAA,UACA,cAAW;AAAA;AAAA,MACZ,GACD;AAAA,MAED,eAAgB,MACf,4CAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,GAC9B;AAAA,QAAC;AAAA;AAAA,UACA,WAAQ,sBAAQ,UAAW;AAAA,UAC3B,UAAW;AAAA,UACX,aAAW;AAAA;AAAA,MACZ,GACD;AAAA;AAAA,EAEF;AAEF;AAEe,SAAR,MAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,QAAQ,IAAI;AAC/D,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE,KAAK;AAElD,QAAM,wBAAoB;AAAA,IACzB,CAAE,gBAAsB;AACvB,eAAU,SAAU,EAAE,MAAM,MAAM,OAAO,YAAY,MAAM,EAAE,CAAE,CAAE;AAAA,IAClE;AAAA,IACA,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,wBAAoB;AAAA,IACzB,CAAE,aAAkC;AACnC,eAAU,SAAU,EAAE,MAAM,MAAM,OAAO,YAAY,GAAG,CAAE,CAAE;AAAA,IAC7D;AAAA,IACA,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B,oBAAiB,2BAAAC,SAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA,MAAK;AAAA,MACL,QACC;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,UACR,eAAgB;AAAA;AAAA,MACjB;AAAA;AAAA,EAEF;AAEF;",
-  "names": ["InputControlPrefixWrapper", "getCustomValidity"]
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tColorIndicator,\n\tColorPicker,\n\tDropdown,\n\tprivateApis,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedInputControl } = unlock( privateApis );\n\nconst ColorPickerDropdown = ( {\n\tcolor,\n\tonColorChange,\n}: {\n\tcolor: string;\n\tonColorChange: ( newColor: string ) => void;\n} ) => {\n\tconst validColor = color && colord( color ).isValid() ? color : '#ffffff';\n\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName=\"dataviews-controls__color-picker-dropdown\"\n\t\t\tpopoverProps={ { resize: false } }\n\t\t\trenderToggle={ ( { onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\taria-label={ __( 'Open color picker' ) }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticon={ () => <ColorIndicator colorValue={ validColor } /> }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tcolor={ validColor }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n};\n\nexport default function Color< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, placeholder, description, setValue, isValid } = field;\n\tconst value = field.getValue( { item: data } ) || '';\n\n\tconst handleColorChange = useCallback(\n\t\t( newColor: string ) => {\n\t\t\tonChange( setValue( { item: data, value: newColor } ) );\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst handleInputChange = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange( setValue( { item: data, value: newValue || '' } ) );\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\tonChange={ handleInputChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\ttype=\"text\"\n\t\t\tprefix={\n\t\t\t\t<InputControlPrefixWrapper variant=\"control\">\n\t\t\t\t\t<ColorPickerDropdown\n\t\t\t\t\t\tcolor={ value }\n\t\t\t\t\t\tonColorChange={ handleColorChange }\n\t\t\t\t\t/>\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t}\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAuB;AAKvB,wBAQO;AACP,qBAA4B;AAC5B,kBAAmB;AAMnB,yBAAuB;AACvB,iCAA8B;AAsBZ;AApBlB,IAAM,EAAE,sBAAsB,QAAI,2BAAQ,6BAAY;AAEtD,IAAM,sBAAsB,CAAE;AAAA,EAC7B;AAAA,EACA;AACD,MAGO;AACN,QAAM,aAAa,aAAS,sBAAQ,KAAM,EAAE,QAAQ,IAAI,QAAQ;AAEhE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,cAAe,EAAE,QAAQ,MAAM;AAAA,MAC/B,cAAe,CAAE,EAAE,SAAS,MAC3B;AAAA,QAAC;AAAA;AAAA,UACA,SAAU;AAAA,UACV,kBAAa,gBAAI,mBAAoB;AAAA,UACrC,MAAK;AAAA,UACL,MAAO,MAAM,4CAAC,oCAAe,YAAa,YAAa;AAAA;AAAA,MACxD;AAAA,MAED,eAAgB,MACf,4CAAC,kBAAAA,sCAAA,EAAuB,aAAY,QACnC;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,UACR,UAAW;AAAA,UACX,aAAW;AAAA;AAAA,MACZ,GACD;AAAA;AAAA,EAEF;AAEF;AAEe,SAAR,MAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,QAAQ,IAAI;AAC/D,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE,KAAK;AAElD,QAAM,wBAAoB;AAAA,IACzB,CAAE,aAAsB;AACvB,eAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD;AAAA,IACA,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,wBAAoB;AAAA,IACzB,CAAE,aAAkC;AACnC,eAAU,SAAU,EAAE,MAAM,MAAM,OAAO,YAAY,GAAG,CAAE,CAAE;AAAA,IAC7D;AAAA,IACA,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B;AAAA,MACA,oBAAiB,2BAAAC,SAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA,MAAK;AAAA,MACL,QACC,4CAAC,kBAAAC,yCAAA,EAA0B,SAAQ,WAClC;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,UACR,eAAgB;AAAA;AAAA,MACjB,GACD;AAAA;AAAA,EAEF;AAEF;",
+  "names": ["DropdownContentWrapper", "getCustomValidity", "InputControlPrefixWrapper"]
 }

package/build/components/dataform-controls/date.cjs

@@ -210,8 +210,7 @@ function ValidatedDateControl({
       {
         className: (0, import_clsx.default)(
           "components-validated-control__indicator",
-          customValidity.type === "invalid" ? "is-invalid" : void 0,
-          customValidity.type === "valid" ? "is-valid" : void 0
+          customValidity.type === "invalid" ? "is-invalid" : void 0
         ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -234,6 +233,7 @@ function CalendarDateControl({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const {
@@ -297,7 +297,12 @@ function CalendarDateControl({
   const {
     timezone: { string: timezoneString }
   } = (0, import_date.getSettings)();
-  const displayLabel = isValid?.required ? `${label} (${(0, import_i18n.__)("Required")})` : label;
+  let displayLabel = label;
+  if (isValid?.required && !markWhenOptional) {
+    displayLabel = `${label} (${(0, import_i18n.__)("Required")})`;
+  } else if (!isValid?.required && markWhenOptional) {
+    displayLabel = `${label} (${(0, import_i18n.__)("Optional")})`;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     ValidatedDateControl,
     {
@@ -313,12 +318,12 @@ function CalendarDateControl({
           className: "dataviews-controls__date",
           label: displayLabel,
           hideLabelFromVision,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "column", gap: "md", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "column", gap: "lg", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               import_ui.Stack,
               {
                 direction: "row",
-                gap: "xs",
+                gap: "sm",
                 wrap: "wrap",
                 justify: "flex-start",
                 children: [
@@ -388,6 +393,7 @@ function CalendarDateRangeControl({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const { id, label, getValue, setValue, format: fieldFormat } = field;
@@ -479,7 +485,12 @@ function CalendarDateRangeControl({
     [value, updateDateRange]
   );
   const { timezone } = (0, import_date.getSettings)();
-  const displayLabel = field.isValid?.required ? `${label} (${(0, import_i18n.__)("Required")})` : label;
+  let displayLabel = label;
+  if (field.isValid?.required && !markWhenOptional) {
+    displayLabel = `${label} (${(0, import_i18n.__)("Required")})`;
+  } else if (!field.isValid?.required && markWhenOptional) {
+    displayLabel = `${label} (${(0, import_i18n.__)("Optional")})`;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     ValidatedDateControl,
     {
@@ -495,12 +506,12 @@ function CalendarDateRangeControl({
           className: "dataviews-controls__date",
           label: displayLabel,
           hideLabelFromVision,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "column", gap: "md", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "column", gap: "lg", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               import_ui.Stack,
               {
                 direction: "row",
-                gap: "xs",
+                gap: "sm",
                 wrap: "wrap",
                 justify: "flex-start",
                 children: [
@@ -538,7 +549,7 @@ function CalendarDateRangeControl({
               import_ui.Stack,
               {
                 direction: "row",
-                gap: "xs",
+                gap: "sm",
                 justify: "space-between",
                 className: "dataviews-controls__date-range-inputs",
                 children: [
@@ -594,6 +605,7 @@ function DateControl({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   operator,
   validity
 }) {
@@ -618,6 +630,7 @@ function DateControl({
         field,
         onChange,
         hideLabelFromVision,
+        markWhenOptional,
         validity
       }
     );
@@ -629,6 +642,7 @@ function DateControl({
       field,
       onChange,
       hideLabelFromVision,
+      markWhenOptional,
       validity
     }
   );