@wordpress/dataviews 9.0.1-next.6f42e1382.0 → 9.0.1-next.a730c9c8c.0

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Unreleased
 
-## 9.0.0-next.0 (2025-09-12)
+## 9.0.0-next.0 (2025-09-17)
 
 ### Breaking changes
 
@@ -11,6 +11,7 @@
 
 ### Features
 
+- Field API: introduce `setValue` to fix DataViews filters and DataForm panel layout (modal) when working with nested data. [#71604](https://github.com/WordPress/gutenberg/pull/71604)
 - Introduce a new `DataViewsPicker` component. [#70971](https://github.com/WordPress/gutenberg/pull/70971)
 - Dataform: Add new `telephone` field type and field control. [#71498](https://github.com/WordPress/gutenberg/pull/71498)
 - DataForm: introduce a new `row` layout, check the README for details. [#71124](https://github.com/WordPress/gutenberg/pull/71124)
@@ -18,6 +19,11 @@
 - Dataform: Add new `password` field type and field control. [#71545](https://github.com/WordPress/gutenberg/pull/71545)
 - DataForm: Add a textarea control for use with the `text` field type ([#71495](https://github.com/WordPress/gutenberg/pull/71495))
 - DataViews: support groupBy in the list layout. [#71548](https://github.com/WordPress/gutenberg/pull/71548)
+- DataForm: support validation in select control [#71665](https://github.com/WordPress/gutenberg/pull/71665)
+- DataForm: support validation in toggleGroup control. ([#71666](https://github.com/WordPress/gutenberg/pull/71666))
+-  DataForm: Add object configuration support for Edit property with some options. ([#71582](https://github.com/WordPress/gutenberg/pull/71582))
+- DataForm: Add summary field support for composed fields. ([#71614](https://github.com/WordPress/gutenberg/pull/71614))
+- DataForm: update radio control to support `required` and `custom` validation. [#71664](https://github.com/WordPress/gutenberg/pull/71664)
 
 ### Bug Fixes
 

package/README.md

@@ -989,24 +989,119 @@ Example:
 }
 ```
 
-### `getValue`
+### `getValue` and `setValue`
 
-React component that returns the value of a field. This value is used to sort or filter the fields.
+These functions control how field values are read from and written to your data structure.
 
--   Type: React component.
+Both functions are optional and automatically generated from the field's `id` when not provided. The `id` is treated as a dot-notation path (e.g., `"user.profile.name"` accesses `item.user.profile.name`).
+
+#### `getValue`
+
+Function that extracts the field value from an item. This value is used to sort, filter, and display the field.
+
+-   Type: `function`.
 -   Optional.
--   Defaults to `item[ id ]`.
--   Props:
-    -   `item` value to be processed.
--   Returns a value that represents the field.
+-   Args:
+    -   `item`: the data item to be processed.
+-   Returns the field's value.
 
-Example:
+#### `setValue`
+
+Function that creates a partial item object with updated field values. This is used by DataForm for editing operations and determines the structure of data passed to the `onChange` callback.
+
+-   Type: `function`.
+-   Optional.
+-   Args:
+    -   `item`: the current item being edited.
+    -   `value`: the new value to be set for the field.
+-   Returns a partial item object with the changes to be applied.
+
+#### Simple field access
+
+For basic field access, you only need to specify the field `id`. Both `getValue` and `setValue` are automatically generated:
 
 ```js
+// Data structure
+const item = {
+	title: 'Hello World',
+	author: 'John Doe'
+};
+
+// Field definition
 {
-	getValue: ( { item } ) => {
-		/* The field's value.  */
-	};
+	id: 'title',
+	label: 'Title'
+	// getValue: automatically becomes ( { item } ) => item.title
+	// setValue: automatically becomes ( { value } ) => ( { title: value } )
+}
+```
+
+#### Nested data access
+
+Use dot notation in the field `id` to access nested properties:
+
+```js
+// Data structure
+const item = {
+	user: {
+		profile: {
+			name: 'John Doe',
+			email: 'john@example.com'
+		}
+	}
+};
+
+// Field definition - using dot notation (automatic)
+{
+	id: 'user.profile.name',
+	label: 'User Name'
+	// getValue: automatically becomes ( { item } ) => item.user.profile.name
+	// setValue: automatically becomes ( { value } ) => ( { user: { profile: { name: value } } } )
+}
+
+// Alternative - using simple ID with custom functions
+{
+	id: 'userName',
+	label: 'User Name',
+	getValue: ( { item } ) => item.user.profile.name,
+	setValue: ( { value } ) => ( {
+		user: {
+			profile: { name: value }
+		}
+	} )
+}
+```
+
+#### Custom data transformation
+
+Provide custom `getValue` and `setValue` functions when you need to transform data between the storage format and display format:
+
+```js
+// Data structure
+const item = {
+	user: {
+		preferences: {
+			notifications: true
+		}
+	}
+};
+
+// Field definition - transform boolean to string options
+{
+	id: 'notifications',
+	label: 'Notifications',
+	Edit: 'radio',
+	elements: [
+		{ label: 'Enabled', value: 'enabled' },
+		{ label: 'Disabled', value: 'disabled' }
+	],
+	getValue: ( { item } ) =>
+		item.user.preferences.notifications === true ? 'enabled' : 'disabled',
+	setValue: ( { value } ) => ( {
+		user: {
+			preferences: { notifications: value === 'enabled' }
+		}
+	} )
 }
 ```
 

package/build/components/dataviews-filters/input-widget.js

@@ -30,12 +30,54 @@ function InputWidget({
   fields
 }) {
   const currentFilter = view.filters?.find(f => f.field === filter.field);
-  const field = fields.find(f => f.id === filter.field);
   const currentValue = (0, _utils.getCurrentValue)(filter, currentFilter);
+
+  /*
+   * We are reusing the field.Edit component for filters. By doing so,
+   * we get for free a filter control specific to the field type
+   * and other aspects of the field API (Edit control configuration, etc.).
+   *
+   * This approach comes with an issue: the field.Edit controls work with getValue
+   * and setValue methods, which take an item (Item) as parameter. But, at this point,
+   * we don't have an item and we don't know how to create one, either.
+   *
+   * So, what we do is to prepare the data and the relevant field configuration
+   * as if Item was a plain object whose keys are the field ids:
+   *
+   * {
+   *   [ fieldOne.id ]: value,
+   *   [ fieldTwo.id ]: value,
+   * }
+   *
+   */
+  const field = (0, _element.useMemo)(() => {
+    const currentField = fields.find(f => f.id === filter.field);
+    if (currentField) {
+      return {
+        ...currentField,
+        // Deactivate validation for filters.
+        isValid: {
+          required: false,
+          custom: () => null
+        },
+        // Configure getValue/setValue as if Item was a plain object.
+        getValue: ({
+          item
+        }) => item[currentField.id],
+        setValue: ({
+          value
+        }) => ({
+          [currentField.id]: value
+        })
+      };
+    }
+    return currentField;
+  }, [fields, filter.field]);
   const data = (0, _element.useMemo)(() => {
     var _view$filters;
-    return ((_view$filters = view.filters) !== null && _view$filters !== void 0 ? _view$filters : []).reduce((acc, f) => {
-      acc[f.field] = f.value;
+    return ((_view$filters = view.filters) !== null && _view$filters !== void 0 ? _view$filters : []).reduce((acc, activeFilter) => {
+      // We can now assume the field is stored as a Item prop.
+      acc[activeFilter.field] = activeFilter.value;
       return acc;
     }, {});
   }, [view.filters]);
@@ -44,7 +86,9 @@ function InputWidget({
     if (!field || !currentFilter) {
       return;
     }
-    const nextValue = updatedData[field.id];
+    const nextValue = field.getValue({
+      item: updatedData
+    });
     if ((0, _es.default)(nextValue, currentValue)) {
       return;
     }

package/build/components/dataviews-filters/input-widget.js.map

@@ -1 +1 @@
-{"version":3,"names":["_es","_interopRequireDefault","require","_compose","_element","_components","_utils","_jsxRuntime","InputWidget","filter","view","onChangeView","fields","currentFilter","filters","find","f","field","id","currentValue","getCurrentValue","data","useMemo","_view$filters","reduce","acc","value","handleChange","useEvent","updatedData","_view$filters2","nextValue","fastDeepEqual","map","_filter","operator","operators","undefined","Edit","jsx","Flex","className","gap","direction","children","hideLabelFromVision","onChange"],"sources":["@wordpress/dataviews/src/components/dataviews-filters/input-widget.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useEvent } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\nimport { Flex } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { View, NormalizedFilter, NormalizedField } from '../../types';\nimport { getCurrentValue } from './utils';\n\ninterface UserInputWidgetProps {\n\tview: View;\n\tfilter: NormalizedFilter;\n\tonChangeView: ( view: View ) => void;\n\tfields: NormalizedField< any >[];\n}\n\nexport default function InputWidget( {\n\tfilter,\n\tview,\n\tonChangeView,\n\tfields,\n}: UserInputWidgetProps ) {\n\tconst currentFilter = view.filters?.find(\n\t\t( f ) => f.field === filter.field\n\t);\n\n\tconst field = fields.find( ( f ) => f.id === filter.field );\n\tconst currentValue = getCurrentValue( filter, currentFilter );\n\tconst data = useMemo( () => {\n\t\treturn ( view.filters ?? [] ).reduce(\n\t\t\t( acc, f ) => {\n\t\t\t\tacc[ f.field ] = f.value;\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t{} as Record< string, any >\n\t\t);\n\t}, [ view.filters ] );\n\n\tconst handleChange = useEvent( ( updatedData: Record< string, any > ) => {\n\t\tif ( ! field || ! currentFilter ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValue = updatedData[ field.id ];\n\t\tif ( fastDeepEqual( nextValue, currentValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tonChangeView( {\n\t\t\t...view,\n\t\t\tfilters: ( view.filters ?? [] ).map( ( _filter ) =>\n\t\t\t\t_filter.field === filter.field\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\tcurrentFilter.operator || filter.operators[ 0 ],\n\t\t\t\t\t\t\t// Consider empty strings as undefined:\n\t\t\t\t\t\t\t//\n\t\t\t\t\t\t\t// - undefined as value means the filter is unset: the filter widget displays no value and the search returns all records\n\t\t\t\t\t\t\t// - empty string as value means \"search empty string\": returns only the records that have an empty string as value\n\t\t\t\t\t\t\t//\n\t\t\t\t\t\t\t// In practice, this means the filter will not be able to find an empty string as the value.\n\t\t\t\t\t\t\tvalue: nextValue === '' ? undefined : nextValue,\n\t\t\t\t\t  }\n\t\t\t\t\t: _filter\n\t\t\t),\n\t\t} );\n\t} );\n\n\tif ( ! field || ! field.Edit || ! currentFilter ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Flex\n\t\t\tclassName=\"dataviews-filters__user-input-widget\"\n\t\t\tgap={ 2.5 }\n\t\t\tdirection=\"column\"\n\t\t>\n\t\t\t<field.Edit\n\t\t\t\thideLabelFromVision\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\toperator={ currentFilter.operator }\n\t\t\t\tonChange={ handleChange }\n\t\t\t/>\n\t\t</Flex>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,GAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAMA,IAAAI,MAAA,GAAAJ,OAAA;AAA0C,IAAAK,WAAA,GAAAL,OAAA;AAhB1C;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAWe,SAASM,WAAWA,CAAE;EACpCC,MAAM;EACNC,IAAI;EACJC,YAAY;EACZC;AACqB,CAAC,EAAG;EACzB,MAAMC,aAAa,GAAGH,IAAI,CAACI,OAAO,EAAEC,IAAI,CACrCC,CAAC,IAAMA,CAAC,CAACC,KAAK,KAAKR,MAAM,CAACQ,KAC7B,CAAC;EAED,MAAMA,KAAK,GAAGL,MAAM,CAACG,IAAI,CAAIC,CAAC,IAAMA,CAAC,CAACE,EAAE,KAAKT,MAAM,CAACQ,KAAM,CAAC;EAC3D,MAAME,YAAY,GAAG,IAAAC,sBAAe,EAAEX,MAAM,EAAEI,aAAc,CAAC;EAC7D,MAAMQ,IAAI,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAAA,IAAAC,aAAA;IAC3B,OAAO,EAAAA,aAAA,GAAEb,IAAI,CAACI,OAAO,cAAAS,aAAA,cAAAA,aAAA,GAAI,EAAE,EAAGC,MAAM,CACnC,CAAEC,GAAG,EAAET,CAAC,KAAM;MACbS,GAAG,CAAET,CAAC,CAACC,KAAK,CAAE,GAAGD,CAAC,CAACU,KAAK;MACxB,OAAOD,GAAG;IACX,CAAC,EACD,CAAC,CACF,CAAC;EACF,CAAC,EAAE,CAAEf,IAAI,CAACI,OAAO,CAAG,CAAC;EAErB,MAAMa,YAAY,GAAG,IAAAC,iBAAQ,EAAIC,WAAkC,IAAM;IAAA,IAAAC,cAAA;IACxE,IAAK,CAAEb,KAAK,IAAI,CAAEJ,aAAa,EAAG;MACjC;IACD;IACA,MAAMkB,SAAS,GAAGF,WAAW,CAAEZ,KAAK,CAACC,EAAE,CAAE;IACzC,IAAK,IAAAc,WAAa,EAAED,SAAS,EAAEZ,YAAa,CAAC,EAAG;MAC/C;IACD;IAEAR,YAAY,CAAE;MACb,GAAGD,IAAI;MACPI,OAAO,EAAE,EAAAgB,cAAA,GAAEpB,IAAI,CAACI,OAAO,cAAAgB,cAAA,cAAAA,cAAA,GAAI,EAAE,EAAGG,GAAG,CAAIC,OAAO,IAC7CA,OAAO,CAACjB,KAAK,KAAKR,MAAM,CAACQ,KAAK,GAC3B;QACA,GAAGiB,OAAO;QACVC,QAAQ,EACPtB,aAAa,CAACsB,QAAQ,IAAI1B,MAAM,CAAC2B,SAAS,CAAE,CAAC,CAAE;QAChD;QACA;QACA;QACA;QACA;QACA;QACAV,KAAK,EAAEK,SAAS,KAAK,EAAE,GAAGM,SAAS,GAAGN;MACtC,CAAC,GACDG,OACJ;IACD,CAAE,CAAC;EACJ,CAAE,CAAC;EAEH,IAAK,CAAEjB,KAAK,IAAI,CAAEA,KAAK,CAACqB,IAAI,IAAI,CAAEzB,aAAa,EAAG;IACjD,OAAO,IAAI;EACZ;EAEA,oBACC,IAAAN,WAAA,CAAAgC,GAAA,EAAClC,WAAA,CAAAmC,IAAI;IACJC,SAAS,EAAC,sCAAsC;IAChDC,GAAG,EAAG,GAAK;IACXC,SAAS,EAAC,QAAQ;IAAAC,QAAA,eAElB,IAAArC,WAAA,CAAAgC,GAAA,EAACtB,KAAK,CAACqB,IAAI;MACVO,mBAAmB;MACnBxB,IAAI,EAAGA,IAAM;MACbJ,KAAK,EAAGA,KAAO;MACfkB,QAAQ,EAAGtB,aAAa,CAACsB,QAAU;MACnCW,QAAQ,EAAGnB;IAAc,CACzB;EAAC,CACG,CAAC;AAET","ignoreList":[]}
+{"version":3,"names":["_es","_interopRequireDefault","require","_compose","_element","_components","_utils","_jsxRuntime","InputWidget","filter","view","onChangeView","fields","currentFilter","filters","find","f","field","currentValue","getCurrentValue","useMemo","currentField","id","isValid","required","custom","getValue","item","setValue","value","data","_view$filters","reduce","acc","activeFilter","handleChange","useEvent","updatedData","_view$filters2","nextValue","fastDeepEqual","map","_filter","operator","operators","undefined","Edit","jsx","Flex","className","gap","direction","children","hideLabelFromVision","onChange"],"sources":["@wordpress/dataviews/src/components/dataviews-filters/input-widget.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useEvent } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\nimport { Flex } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { View, NormalizedFilter, NormalizedField } from '../../types';\nimport { getCurrentValue } from './utils';\n\ninterface UserInputWidgetProps {\n\tview: View;\n\tfilter: NormalizedFilter;\n\tonChangeView: ( view: View ) => void;\n\tfields: NormalizedField< any >[];\n}\n\nexport default function InputWidget( {\n\tfilter,\n\tview,\n\tonChangeView,\n\tfields,\n}: UserInputWidgetProps ) {\n\tconst currentFilter = view.filters?.find(\n\t\t( f ) => f.field === filter.field\n\t);\n\tconst currentValue = getCurrentValue( filter, currentFilter );\n\n\t/*\n\t * We are reusing the field.Edit component for filters. By doing so,\n\t * we get for free a filter control specific to the field type\n\t * and other aspects of the field API (Edit control configuration, etc.).\n\t *\n\t * This approach comes with an issue: the field.Edit controls work with getValue\n\t * and setValue methods, which take an item (Item) as parameter. But, at this point,\n\t * we don't have an item and we don't know how to create one, either.\n\t *\n\t * So, what we do is to prepare the data and the relevant field configuration\n\t * as if Item was a plain object whose keys are the field ids:\n\t *\n\t * {\n\t *   [ fieldOne.id ]: value,\n\t *   [ fieldTwo.id ]: value,\n\t * }\n\t *\n\t */\n\tconst field = useMemo( () => {\n\t\tconst currentField = fields.find( ( f ) => f.id === filter.field );\n\t\tif ( currentField ) {\n\t\t\treturn {\n\t\t\t\t...currentField,\n\t\t\t\t// Deactivate validation for filters.\n\t\t\t\tisValid: {\n\t\t\t\t\trequired: false,\n\t\t\t\t\tcustom: () => null,\n\t\t\t\t},\n\t\t\t\t// Configure getValue/setValue as if Item was a plain object.\n\t\t\t\tgetValue: ( { item }: { item: any } ) =>\n\t\t\t\t\titem[ currentField.id ],\n\t\t\t\tsetValue: ( { value }: { value: any } ) => ( {\n\t\t\t\t\t[ currentField.id ]: value,\n\t\t\t\t} ),\n\t\t\t};\n\t\t}\n\t\treturn currentField;\n\t}, [ fields, filter.field ] );\n\n\tconst data = useMemo( () => {\n\t\treturn ( view.filters ?? [] ).reduce(\n\t\t\t( acc, activeFilter ) => {\n\t\t\t\t// We can now assume the field is stored as a Item prop.\n\t\t\t\tacc[ activeFilter.field ] = activeFilter.value;\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t{} as Record< string, any >\n\t\t);\n\t}, [ view.filters ] );\n\n\tconst handleChange = useEvent( ( updatedData: Record< string, any > ) => {\n\t\tif ( ! field || ! currentFilter ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValue = field.getValue( { item: updatedData } );\n\t\tif ( fastDeepEqual( nextValue, currentValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tonChangeView( {\n\t\t\t...view,\n\t\t\tfilters: ( view.filters ?? [] ).map( ( _filter ) =>\n\t\t\t\t_filter.field === filter.field\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\tcurrentFilter.operator || filter.operators[ 0 ],\n\t\t\t\t\t\t\t// Consider empty strings as undefined:\n\t\t\t\t\t\t\t//\n\t\t\t\t\t\t\t// - undefined as value means the filter is unset: the filter widget displays no value and the search returns all records\n\t\t\t\t\t\t\t// - empty string as value means \"search empty string\": returns only the records that have an empty string as value\n\t\t\t\t\t\t\t//\n\t\t\t\t\t\t\t// In practice, this means the filter will not be able to find an empty string as the value.\n\t\t\t\t\t\t\tvalue: nextValue === '' ? undefined : nextValue,\n\t\t\t\t\t  }\n\t\t\t\t\t: _filter\n\t\t\t),\n\t\t} );\n\t} );\n\n\tif ( ! field || ! field.Edit || ! currentFilter ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Flex\n\t\t\tclassName=\"dataviews-filters__user-input-widget\"\n\t\t\tgap={ 2.5 }\n\t\t\tdirection=\"column\"\n\t\t>\n\t\t\t<field.Edit\n\t\t\t\thideLabelFromVision\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\toperator={ currentFilter.operator }\n\t\t\t\tonChange={ handleChange }\n\t\t\t/>\n\t\t</Flex>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/dataform-controls/array.js

@@ -23,12 +23,13 @@ function ArrayControl({
 }) {
   var _elements$map;
   const {
-    id,
     label,
     placeholder,
-    elements
+    elements,
+    getValue,
+    setValue
   } = field;
-  const value = field.getValue({
+  const value = getValue({
     item: data
   });
   const findElementByValue = (0, _element.useCallback)(suggestionValue => {
@@ -52,10 +53,11 @@ function ArrayControl({
       const tokenByLabel = findElementByLabel(token);
       return tokenByLabel?.value || token;
     });
-    onChange({
-      [id]: stringTokens
-    });
-  }, [id, onChange, findElementByLabel]);
+    onChange(setValue({
+      item: data,
+      value: stringTokens
+    }));
+  }, [onChange, setValue, data, findElementByLabel]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormTokenField, {
     label: hideLabelFromVision ? undefined : label,
     value: arrayValue,

package/build/dataform-controls/array.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_jsxRuntime","ArrayControl","data","field","onChange","hideLabelFromVision","_elements$map","id","label","placeholder","elements","value","getValue","item","findElementByValue","useCallback","suggestionValue","find","suggestion","findElementByLabel","suggestionLabel","arrayValue","useMemo","Array","isArray","map","token","tokenLabel","onChangeControl","tokens","stringTokens","tokenByLabel","jsx","FormTokenField","undefined","suggestions","__experimentalExpandOnFocus","length","__next40pxDefaultSize","__nextHasNoMarginBottom"],"sources":["@wordpress/dataviews/src/dataform-controls/array.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { FormTokenField } from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\n\nexport default function ArrayControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label, placeholder, elements } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst findElementByValue = useCallback(\n\t\t( suggestionValue: string ) => {\n\t\t\treturn elements?.find(\n\t\t\t\t( suggestion ) => suggestion.value === suggestionValue\n\t\t\t);\n\t\t},\n\t\t[ elements ]\n\t);\n\n\tconst findElementByLabel = useCallback(\n\t\t( suggestionLabel: string ) => {\n\t\t\treturn elements?.find(\n\t\t\t\t( suggestion ) => suggestion.label === suggestionLabel\n\t\t\t);\n\t\t},\n\t\t[ elements ]\n\t);\n\n\t// Ensure value is an array\n\tconst arrayValue = 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 tokenLabel = findElementByValue( token )?.label;\n\t\t\t\t\t\treturn tokenLabel || token;\n\t\t\t\t  } )\n\t\t\t\t: [],\n\t\t[ value, findElementByValue ]\n\t);\n\n\tconst onChangeControl = useCallback(\n\t\t( tokens: ( string | { value: string } )[] ) => {\n\t\t\t// Convert TokenItem objects to strings\n\t\t\tconst stringTokens = tokens.map( ( token ) => {\n\t\t\t\tif ( typeof token !== 'string' ) {\n\t\t\t\t\treturn token.value;\n\t\t\t\t}\n\n\t\t\t\tconst tokenByLabel = findElementByLabel( token );\n\n\t\t\t\treturn tokenByLabel?.value || token;\n\t\t\t} );\n\n\t\t\tonChange( {\n\t\t\t\t[ id ]: stringTokens,\n\t\t\t} );\n\t\t},\n\t\t[ id, onChange, findElementByLabel ]\n\t);\n\n\treturn (\n\t\t<FormTokenField\n\t\t\tlabel={ hideLabelFromVision ? undefined : label }\n\t\t\tvalue={ arrayValue }\n\t\t\tonChange={ onChangeControl }\n\t\t\tplaceholder={ placeholder }\n\t\t\tsuggestions={\n\t\t\t\telements?.map( ( suggestion ) => suggestion.label ) ?? []\n\t\t\t}\n\t\t\t__experimentalExpandOnFocus={ elements && elements.length > 0 }\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAA0D,IAAAE,WAAA,GAAAF,OAAA;AAJ1D;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASG,YAAYA,CAAU;EAC7CC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC;AAC6B,CAAC,EAAG;EAAA,IAAAC,aAAA;EACjC,MAAM;IAAEC,EAAE;IAAEC,KAAK;IAAEC,WAAW;IAAEC;EAAS,CAAC,GAAGP,KAAK;EAClD,MAAMQ,KAAK,GAAGR,KAAK,CAACS,QAAQ,CAAE;IAAEC,IAAI,EAAEX;EAAK,CAAE,CAAC;EAE9C,MAAMY,kBAAkB,GAAG,IAAAC,oBAAW,EACnCC,eAAuB,IAAM;IAC9B,OAAON,QAAQ,EAAEO,IAAI,CAClBC,UAAU,IAAMA,UAAU,CAACP,KAAK,KAAKK,eACxC,CAAC;EACF,CAAC,EACD,CAAEN,QAAQ,CACX,CAAC;EAED,MAAMS,kBAAkB,GAAG,IAAAJ,oBAAW,EACnCK,eAAuB,IAAM;IAC9B,OAAOV,QAAQ,EAAEO,IAAI,CAClBC,UAAU,IAAMA,UAAU,CAACV,KAAK,KAAKY,eACxC,CAAC;EACF,CAAC,EACD,CAAEV,QAAQ,CACX,CAAC;;EAED;EACA,MAAMW,UAAU,GAAG,IAAAC,gBAAO,EACzB,MACCC,KAAK,CAACC,OAAO,CAAEb,KAAM,CAAC,GACnBA,KAAK,CAACc,GAAG,CAAIC,KAAK,IAAM;IACxB,MAAMC,UAAU,GAAGb,kBAAkB,CAAEY,KAAM,CAAC,EAAElB,KAAK;IACrD,OAAOmB,UAAU,IAAID,KAAK;EAC1B,CAAE,CAAC,GACH,EAAE,EACN,CAAEf,KAAK,EAAEG,kBAAkB,CAC5B,CAAC;EAED,MAAMc,eAAe,GAAG,IAAAb,oBAAW,EAChCc,MAAwC,IAAM;IAC/C;IACA,MAAMC,YAAY,GAAGD,MAAM,CAACJ,GAAG,CAAIC,KAAK,IAAM;MAC7C,IAAK,OAAOA,KAAK,KAAK,QAAQ,EAAG;QAChC,OAAOA,KAAK,CAACf,KAAK;MACnB;MAEA,MAAMoB,YAAY,GAAGZ,kBAAkB,CAAEO,KAAM,CAAC;MAEhD,OAAOK,YAAY,EAAEpB,KAAK,IAAIe,KAAK;IACpC,CAAE,CAAC;IAEHtB,QAAQ,CAAE;MACT,CAAEG,EAAE,GAAIuB;IACT,CAAE,CAAC;EACJ,CAAC,EACD,CAAEvB,EAAE,EAAEH,QAAQ,EAAEe,kBAAkB,CACnC,CAAC;EAED,oBACC,IAAAnB,WAAA,CAAAgC,GAAA,EAACnC,WAAA,CAAAoC,cAAc;IACdzB,KAAK,EAAGH,mBAAmB,GAAG6B,SAAS,GAAG1B,KAAO;IACjDG,KAAK,EAAGU,UAAY;IACpBjB,QAAQ,EAAGwB,eAAiB;IAC5BnB,WAAW,EAAGA,WAAa;IAC3B0B,WAAW,GAAA7B,aAAA,GACVI,QAAQ,EAAEe,GAAG,CAAIP,UAAU,IAAMA,UAAU,CAACV,KAAM,CAAC,cAAAF,aAAA,cAAAA,aAAA,GAAI,EACvD;IACD8B,2BAA2B,EAAG1B,QAAQ,IAAIA,QAAQ,CAAC2B,MAAM,GAAG,CAAG;IAC/DC,qBAAqB;IACrBC,uBAAuB;EAAA,CACvB,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_components","require","_element","_jsxRuntime","ArrayControl","data","field","onChange","hideLabelFromVision","_elements$map","label","placeholder","elements","getValue","setValue","value","item","findElementByValue","useCallback","suggestionValue","find","suggestion","findElementByLabel","suggestionLabel","arrayValue","useMemo","Array","isArray","map","token","tokenLabel","onChangeControl","tokens","stringTokens","tokenByLabel","jsx","FormTokenField","undefined","suggestions","__experimentalExpandOnFocus","length","__next40pxDefaultSize","__nextHasNoMarginBottom"],"sources":["@wordpress/dataviews/src/dataform-controls/array.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { FormTokenField } from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\n\nexport default function ArrayControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { label, placeholder, elements, getValue, setValue } = field;\n\tconst value = getValue( { item: data } );\n\n\tconst findElementByValue = useCallback(\n\t\t( suggestionValue: string ) => {\n\t\t\treturn elements?.find(\n\t\t\t\t( suggestion ) => suggestion.value === suggestionValue\n\t\t\t);\n\t\t},\n\t\t[ elements ]\n\t);\n\n\tconst findElementByLabel = useCallback(\n\t\t( suggestionLabel: string ) => {\n\t\t\treturn elements?.find(\n\t\t\t\t( suggestion ) => suggestion.label === suggestionLabel\n\t\t\t);\n\t\t},\n\t\t[ elements ]\n\t);\n\n\t// Ensure value is an array\n\tconst arrayValue = 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 tokenLabel = findElementByValue( token )?.label;\n\t\t\t\t\t\treturn tokenLabel || token;\n\t\t\t\t  } )\n\t\t\t\t: [],\n\t\t[ value, findElementByValue ]\n\t);\n\n\tconst onChangeControl = useCallback(\n\t\t( tokens: ( string | { value: string } )[] ) => {\n\t\t\t// Convert TokenItem objects to strings\n\t\t\tconst stringTokens = tokens.map( ( token ) => {\n\t\t\t\tif ( typeof token !== 'string' ) {\n\t\t\t\t\treturn token.value;\n\t\t\t\t}\n\n\t\t\t\tconst tokenByLabel = findElementByLabel( token );\n\n\t\t\t\treturn tokenByLabel?.value || token;\n\t\t\t} );\n\n\t\t\tonChange( setValue( { item: data, value: stringTokens } ) );\n\t\t},\n\t\t[ onChange, setValue, data, findElementByLabel ]\n\t);\n\n\treturn (\n\t\t<FormTokenField\n\t\t\tlabel={ hideLabelFromVision ? undefined : label }\n\t\t\tvalue={ arrayValue }\n\t\t\tonChange={ onChangeControl }\n\t\t\tplaceholder={ placeholder }\n\t\t\tsuggestions={\n\t\t\t\telements?.map( ( suggestion ) => suggestion.label ) ?? []\n\t\t\t}\n\t\t\t__experimentalExpandOnFocus={ elements && elements.length > 0 }\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAA0D,IAAAE,WAAA,GAAAF,OAAA;AAJ1D;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASG,YAAYA,CAAU;EAC7CC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC;AAC6B,CAAC,EAAG;EAAA,IAAAC,aAAA;EACjC,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC;EAAS,CAAC,GAAGR,KAAK;EAClE,MAAMS,KAAK,GAAGF,QAAQ,CAAE;IAAEG,IAAI,EAAEX;EAAK,CAAE,CAAC;EAExC,MAAMY,kBAAkB,GAAG,IAAAC,oBAAW,EACnCC,eAAuB,IAAM;IAC9B,OAAOP,QAAQ,EAAEQ,IAAI,CAClBC,UAAU,IAAMA,UAAU,CAACN,KAAK,KAAKI,eACxC,CAAC;EACF,CAAC,EACD,CAAEP,QAAQ,CACX,CAAC;EAED,MAAMU,kBAAkB,GAAG,IAAAJ,oBAAW,EACnCK,eAAuB,IAAM;IAC9B,OAAOX,QAAQ,EAAEQ,IAAI,CAClBC,UAAU,IAAMA,UAAU,CAACX,KAAK,KAAKa,eACxC,CAAC;EACF,CAAC,EACD,CAAEX,QAAQ,CACX,CAAC;;EAED;EACA,MAAMY,UAAU,GAAG,IAAAC,gBAAO,EACzB,MACCC,KAAK,CAACC,OAAO,CAAEZ,KAAM,CAAC,GACnBA,KAAK,CAACa,GAAG,CAAIC,KAAK,IAAM;IACxB,MAAMC,UAAU,GAAGb,kBAAkB,CAAEY,KAAM,CAAC,EAAEnB,KAAK;IACrD,OAAOoB,UAAU,IAAID,KAAK;EAC1B,CAAE,CAAC,GACH,EAAE,EACN,CAAEd,KAAK,EAAEE,kBAAkB,CAC5B,CAAC;EAED,MAAMc,eAAe,GAAG,IAAAb,oBAAW,EAChCc,MAAwC,IAAM;IAC/C;IACA,MAAMC,YAAY,GAAGD,MAAM,CAACJ,GAAG,CAAIC,KAAK,IAAM;MAC7C,IAAK,OAAOA,KAAK,KAAK,QAAQ,EAAG;QAChC,OAAOA,KAAK,CAACd,KAAK;MACnB;MAEA,MAAMmB,YAAY,GAAGZ,kBAAkB,CAAEO,KAAM,CAAC;MAEhD,OAAOK,YAAY,EAAEnB,KAAK,IAAIc,KAAK;IACpC,CAAE,CAAC;IAEHtB,QAAQ,CAAEO,QAAQ,CAAE;MAAEE,IAAI,EAAEX,IAAI;MAAEU,KAAK,EAAEkB;IAAa,CAAE,CAAE,CAAC;EAC5D,CAAC,EACD,CAAE1B,QAAQ,EAAEO,QAAQ,EAAET,IAAI,EAAEiB,kBAAkB,CAC/C,CAAC;EAED,oBACC,IAAAnB,WAAA,CAAAgC,GAAA,EAACnC,WAAA,CAAAoC,cAAc;IACd1B,KAAK,EAAGF,mBAAmB,GAAG6B,SAAS,GAAG3B,KAAO;IACjDK,KAAK,EAAGS,UAAY;IACpBjB,QAAQ,EAAGwB,eAAiB;IAC5BpB,WAAW,EAAGA,WAAa;IAC3B2B,WAAW,GAAA7B,aAAA,GACVG,QAAQ,EAAEgB,GAAG,CAAIP,UAAU,IAAMA,UAAU,CAACX,KAAM,CAAC,cAAAD,aAAA,cAAAA,aAAA,GAAI,EACvD;IACD8B,2BAA2B,EAAG3B,QAAQ,IAAIA,QAAQ,CAAC4B,MAAM,GAAG,CAAG;IAC/DC,qBAAqB;IACrBC,uBAAuB;EAAA,CACvB,CAAC;AAEJ","ignoreList":[]}

package/build/dataform-controls/checkbox.js

@@ -1,13 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Checkbox;
+var _deepmerge = _interopRequireDefault(require("deepmerge"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 var _lockUnlock = require("../lock-unlock");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -26,28 +32,37 @@ function Checkbox({
   hideLabelFromVision
 }) {
   const {
-    id,
     getValue,
+    setValue,
     label,
     description
   } = field;
   const [customValidity, setCustomValidity] = (0, _element.useState)(undefined);
+  const onChangeControl = (0, _element.useCallback)(() => {
+    onChange(setValue({
+      item: data,
+      value: !getValue({
+        item: data
+      })
+    }));
+  }, [data, getValue, onChange, setValue]);
+  const onValidateControl = (0, _element.useCallback)(newValue => {
+    const message = field.isValid?.custom?.((0, _deepmerge.default)(data, setValue({
+      item: data,
+      value: newValue
+    })), field);
+    if (message) {
+      setCustomValidity({
+        type: 'invalid',
+        message
+      });
+      return;
+    }
+    setCustomValidity(undefined);
+  }, [data, field, setValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidatedCheckboxControl, {
     required: !!field.isValid?.required,
-    onValidate: newValue => {
-      const message = field.isValid?.custom?.({
-        ...data,
-        [id]: newValue
-      }, field);
-      if (message) {
-        setCustomValidity({
-          type: 'invalid',
-          message
-        });
-        return;
-      }
-      setCustomValidity(undefined);
-    },
+    onValidate: onValidateControl,
     customValidity: customValidity,
     hidden: hideLabelFromVision,
     label: label,
@@ -55,11 +70,7 @@ function Checkbox({
     checked: getValue({
       item: data
     }),
-    onChange: () => onChange({
-      [id]: !getValue({
-        item: data
-      })
-    })
+    onChange: onChangeControl
   });
 }
 //# sourceMappingURL=checkbox.js.map

package/build/dataform-controls/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_lockUnlock","_jsxRuntime","ValidatedCheckboxControl","unlock","privateApis","Checkbox","field","onChange","data","hideLabelFromVision","id","getValue","label","description","customValidity","setCustomValidity","useState","undefined","jsx","required","isValid","onValidate","newValue","message","custom","type","hidden","help","checked","item"],"sources":["@wordpress/dataviews/src/dataform-controls/checkbox.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\n\nconst { ValidatedCheckboxControl } = unlock( privateApis );\n\nexport default function Checkbox< Item >( {\n\tfield,\n\tonChange,\n\tdata,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { id, getValue, label, description } = field;\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedCheckboxControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\treturn (\n\t\t<ValidatedCheckboxControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tonValidate={ ( newValue: any ) => {\n\t\t\t\tconst message = field.isValid?.custom?.(\n\t\t\t\t\t{\n\t\t\t\t\t\t...data,\n\t\t\t\t\t\t[ id ]: newValue,\n\t\t\t\t\t},\n\t\t\t\t\tfield\n\t\t\t\t);\n\n\t\t\t\tif ( message ) {\n\t\t\t\t\tsetCustomValidity( {\n\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\tmessage,\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tsetCustomValidity( undefined );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\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={ () =>\n\t\t\t\tonChange( { [ id ]: ! getValue( { item: data } ) } )\n\t\t\t}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,WAAA,GAAAF,OAAA;AAAwC,IAAAG,WAAA,GAAAH,OAAA;AAVxC;AACA;AACA;;AAIA;AACA;AACA;;AAIA,MAAM;EAAEI;AAAyB,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAY,CAAC;AAE3C,SAASC,QAAQA,CAAU;EACzCC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC,QAAQ;IAAEC,KAAK;IAAEC;EAAY,CAAC,GAAGP,KAAK;EAClD,MAAM,CAAEQ,cAAc,EAAEC,iBAAiB,CAAE,GAC1C,IAAAC,iBAAQ,EAILC,SAAU,CAAC;EAEf,oBACC,IAAAhB,WAAA,CAAAiB,GAAA,EAAChB,wBAAwB;IACxBiB,QAAQ,EAAG,CAAC,CAAEb,KAAK,CAACc,OAAO,EAAED,QAAU;IACvCE,UAAU,EAAKC,QAAa,IAAM;MACjC,MAAMC,OAAO,GAAGjB,KAAK,CAACc,OAAO,EAAEI,MAAM,GACpC;QACC,GAAGhB,IAAI;QACP,CAAEE,EAAE,GAAIY;MACT,CAAC,EACDhB,KACD,CAAC;MAED,IAAKiB,OAAO,EAAG;QACdR,iBAAiB,CAAE;UAClBU,IAAI,EAAE,SAAS;UACfF;QACD,CAAE,CAAC;QACH;MACD;MAEAR,iBAAiB,CAAEE,SAAU,CAAC;IAC/B,CAAG;IACHH,cAAc,EAAGA,cAAgB;IACjCY,MAAM,EAAGjB,mBAAqB;IAC9BG,KAAK,EAAGA,KAAO;IACfe,IAAI,EAAGd,WAAa;IACpBe,OAAO,EAAGjB,QAAQ,CAAE;MAAEkB,IAAI,EAAErB;IAAK,CAAE,CAAG;IACtCD,QAAQ,EAAGA,CAAA,KACVA,QAAQ,CAAE;MAAE,CAAEG,EAAE,GAAI,CAAEC,QAAQ,CAAE;QAAEkB,IAAI,EAAErB;MAAK,CAAE;IAAE,CAAE;EACnD,CACD,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_deepmerge","_interopRequireDefault","require","_components","_element","_lockUnlock","_jsxRuntime","ValidatedCheckboxControl","unlock","privateApis","Checkbox","field","onChange","data","hideLabelFromVision","getValue","setValue","label","description","customValidity","setCustomValidity","useState","undefined","onChangeControl","useCallback","item","value","onValidateControl","newValue","message","isValid","custom","deepMerge","type","jsx","required","onValidate","hidden","help","checked"],"sources":["@wordpress/dataviews/src/dataform-controls/checkbox.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useState, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\n\nconst { ValidatedCheckboxControl } = unlock( privateApis );\n\nexport default function Checkbox< Item >( {\n\tfield,\n\tonChange,\n\tdata,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { getValue, setValue, label, description } = field;\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedCheckboxControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\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\tconst onValidateControl = useCallback(\n\t\t( newValue: any ) => {\n\t\t\tconst message = field.isValid?.custom?.(\n\t\t\t\tdeepMerge(\n\t\t\t\t\tdata,\n\t\t\t\t\tsetValue( {\n\t\t\t\t\t\titem: data,\n\t\t\t\t\t\tvalue: newValue,\n\t\t\t\t\t} ) as Partial< Item >\n\t\t\t\t),\n\t\t\t\tfield\n\t\t\t);\n\n\t\t\tif ( message ) {\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\tmessage,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetCustomValidity( undefined );\n\t\t},\n\t\t[ data, field, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedCheckboxControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tonValidate={ onValidateControl }\n\t\t\tcustomValidity={ customValidity }\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":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAMA,IAAAG,WAAA,GAAAH,OAAA;AAAwC,IAAAI,WAAA,GAAAJ,OAAA;AAfxC;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,MAAM;EAAEK;AAAyB,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAY,CAAC;AAE3C,SAASC,QAAQA,CAAU;EACzCC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,KAAK;IAAEC;EAAY,CAAC,GAAGP,KAAK;EACxD,MAAM,CAAEQ,cAAc,EAAEC,iBAAiB,CAAE,GAC1C,IAAAC,iBAAQ,EAILC,SAAU,CAAC;EAEf,MAAMC,eAAe,GAAG,IAAAC,oBAAW,EAAE,MAAM;IAC1CZ,QAAQ,CACPI,QAAQ,CAAE;MAAES,IAAI,EAAEZ,IAAI;MAAEa,KAAK,EAAE,CAAEX,QAAQ,CAAE;QAAEU,IAAI,EAAEZ;MAAK,CAAE;IAAE,CAAE,CAC/D,CAAC;EACF,CAAC,EAAE,CAAEA,IAAI,EAAEE,QAAQ,EAAEH,QAAQ,EAAEI,QAAQ,CAAG,CAAC;EAE3C,MAAMW,iBAAiB,GAAG,IAAAH,oBAAW,EAClCI,QAAa,IAAM;IACpB,MAAMC,OAAO,GAAGlB,KAAK,CAACmB,OAAO,EAAEC,MAAM,GACpC,IAAAC,kBAAS,EACRnB,IAAI,EACJG,QAAQ,CAAE;MACTS,IAAI,EAAEZ,IAAI;MACVa,KAAK,EAAEE;IACR,CAAE,CACH,CAAC,EACDjB,KACD,CAAC;IAED,IAAKkB,OAAO,EAAG;MACdT,iBAAiB,CAAE;QAClBa,IAAI,EAAE,SAAS;QACfJ;MACD,CAAE,CAAC;MACH;IACD;IAEAT,iBAAiB,CAAEE,SAAU,CAAC;EAC/B,CAAC,EACD,CAAET,IAAI,EAAEF,KAAK,EAAEK,QAAQ,CACxB,CAAC;EAED,oBACC,IAAAV,WAAA,CAAA4B,GAAA,EAAC3B,wBAAwB;IACxB4B,QAAQ,EAAG,CAAC,CAAExB,KAAK,CAACmB,OAAO,EAAEK,QAAU;IACvCC,UAAU,EAAGT,iBAAmB;IAChCR,cAAc,EAAGA,cAAgB;IACjCkB,MAAM,EAAGvB,mBAAqB;IAC9BG,KAAK,EAAGA,KAAO;IACfqB,IAAI,EAAGpB,WAAa;IACpBqB,OAAO,EAAGxB,QAAQ,CAAE;MAAEU,IAAI,EAAEZ;IAAK,CAAE,CAAG;IACtCD,QAAQ,EAAGW;EAAiB,CAC5B,CAAC;AAEJ","ignoreList":[]}

package/build/dataform-controls/color.js

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Color;
 var _colord = require("colord");
+var _deepmerge = _interopRequireDefault(require("deepmerge"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 var _lockUnlock = require("../lock-unlock");
@@ -76,41 +78,44 @@ function Color({
   hideLabelFromVision
 }) {
   const {
-    id,
     label,
     placeholder,
-    description
+    description,
+    setValue
   } = field;
   const value = field.getValue({
     item: data
   }) || '';
   const [customValidity, setCustomValidity] = (0, _element.useState)(undefined);
   const handleColorChange = (0, _element.useCallback)(colorObject => {
-    onChange({
-      [id]: colorObject.toHex()
-    });
-  }, [id, onChange]);
+    onChange(setValue({
+      item: data,
+      value: colorObject.toHex()
+    }));
+  }, [data, onChange, setValue]);
   const handleInputChange = (0, _element.useCallback)(newValue => {
-    onChange({
-      [id]: newValue || ''
-    });
-  }, [id, onChange]);
+    onChange(setValue({
+      item: data,
+      value: newValue || ''
+    }));
+  }, [data, onChange, setValue]);
+  const onValidateControl = (0, _element.useCallback)(newValue => {
+    const message = field.isValid?.custom?.((0, _deepmerge.default)(data, setValue({
+      item: data,
+      value: newValue
+    })), field);
+    if (message) {
+      setCustomValidity({
+        type: 'invalid',
+        message
+      });
+      return;
+    }
+    setCustomValidity(undefined);
+  }, [data, field, setValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidatedInputControl, {
     required: !!field.isValid?.required,
-    onValidate: newValue => {
-      const message = field.isValid?.custom?.({
-        ...data,
-        [id]: newValue
-      }, field);
-      if (message) {
-        setCustomValidity({
-          type: 'invalid',
-          message
-        });
-        return;
-      }
-      setCustomValidity(undefined);
-    },
+    onValidate: onValidateControl,
     customValidity: customValidity,
     label: label,
     placeholder: placeholder,

package/build/dataform-controls/color.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_components","_element","_lockUnlock","_jsxRuntime","ValidatedInputControl","Picker","unlock","privateApis","ColorPicker","color","onColorChange","validColor","colord","isValid","jsx","Dropdown","renderToggle","onToggle","isOpen","__experimentalInputControlPrefixWrapper","variant","children","type","onClick","style","width","height","borderRadius","backgroundColor","border","cursor","outline","outlineOffset","display","alignItems","justifyContent","padding","margin","renderContent","onChange","enableAlpha","Color","data","field","hideLabelFromVision","id","label","placeholder","description","value","getValue","item","customValidity","setCustomValidity","useState","undefined","handleColorChange","useCallback","colorObject","toHex","handleInputChange","newValue","required","onValidate","message","custom","help","prefix"],"sources":["@wordpress/dataviews/src/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, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\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}: DataFormControlProps< Item > ) {\n\tconst { id, label, placeholder, description } = field;\n\tconst value = field.getValue( { item: data } ) || '';\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedInputControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\tconst handleColorChange = useCallback(\n\t\t( colorObject: any ) => {\n\t\t\tonChange( { [ id ]: colorObject.toHex() } );\n\t\t},\n\t\t[ id, onChange ]\n\t);\n\n\tconst handleInputChange = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange( { [ id ]: newValue || '' } );\n\t\t},\n\t\t[ id, onChange ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tonValidate={ ( newValue: any ) => {\n\t\t\t\tconst message = field.isValid?.custom?.(\n\t\t\t\t\t{\n\t\t\t\t\t\t...data,\n\t\t\t\t\t\t[ id ]: newValue,\n\t\t\t\t\t},\n\t\t\t\t\tfield\n\t\t\t\t);\n\n\t\t\t\tif ( message ) {\n\t\t\t\t\tsetCustomValidity( {\n\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\tmessage,\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tsetCustomValidity( undefined );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\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":"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","ignoreList":[]}
+{"version":3,"names":["_colord","require","_deepmerge","_interopRequireDefault","_components","_element","_lockUnlock","_jsxRuntime","ValidatedInputControl","Picker","unlock","privateApis","ColorPicker","color","onColorChange","validColor","colord","isValid","jsx","Dropdown","renderToggle","onToggle","isOpen","__experimentalInputControlPrefixWrapper","variant","children","type","onClick","style","width","height","borderRadius","backgroundColor","border","cursor","outline","outlineOffset","display","alignItems","justifyContent","padding","margin","renderContent","onChange","enableAlpha","Color","data","field","hideLabelFromVision","label","placeholder","description","setValue","value","getValue","item","customValidity","setCustomValidity","useState","undefined","handleColorChange","useCallback","colorObject","toHex","handleInputChange","newValue","onValidateControl","message","custom","deepMerge","required","onValidate","help","prefix"],"sources":["@wordpress/dataviews/src/dataform-controls/color.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tDropdown,\n\tprivateApis,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { useCallback, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\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}: DataFormControlProps< Item > ) {\n\tconst { label, placeholder, description, setValue } = field;\n\tconst value = field.getValue( { item: data } ) || '';\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedInputControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\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\tconst onValidateControl = useCallback(\n\t\t( newValue: any ) => {\n\t\t\tconst message = field.isValid?.custom?.(\n\t\t\t\tdeepMerge(\n\t\t\t\t\tdata,\n\t\t\t\t\tsetValue( {\n\t\t\t\t\t\titem: data,\n\t\t\t\t\t\tvalue: newValue,\n\t\t\t\t\t} ) as Partial< Item >\n\t\t\t\t),\n\t\t\t\tfield\n\t\t\t);\n\n\t\t\tif ( message ) {\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\tmessage,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetCustomValidity( undefined );\n\t\t},\n\t\t[ data, field, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tonValidate={ onValidateControl }\n\t\t\tcustomValidity={ customValidity }\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":"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","ignoreList":[]}