@wordpress/dataviews 8.0.2-next.836ecdcae.0 → 9.0.0

package/CHANGELOG.md

@@ -2,12 +2,34 @@
 
 ## Unreleased
 
-## 8.0.1-next.0 (2025-09-05)
+## 9.0.0 (2025-09-17)
+
+### Breaking changes
+
+- Remove `boolean` form control. Fields using `Edit: 'boolean'` must now use `Edit: 'checkbox'` or `Edit: 'toggle'` instead. Boolean field types now use checkboxes by default. [#71505](https://github.com/WordPress/gutenberg/pull/71505)
+- DataViews: Custom `empty` elements are no longer wrapped in `<p>` tags to improve accessibility. [#71561](https://github.com/WordPress/gutenberg/pull/71561)
 
 ### 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)
+- Dataform: Add new `url` field type and field control. [#71518](https://github.com/WordPress/gutenberg/pull/71518)
+- 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
+
+- DataViews grid layout: make sure media previews have rounded corners. [#71543](https://github.com/WordPress/gutenberg/pull/71543)
+- DataForm regular layout: Remove label style overrides as they cause inconsistent results. ([#71574](https://github.com/WordPress/gutenberg/pull/71574))
+- DataForm regular layout: Use BaseControl visual label for readonly fields when in top labelPosition. ([#71597](https://github.com/WordPress/gutenberg/pull/71597))
 
 ## 8.0.0 (2025-09-03)
 

package/README.md

@@ -426,7 +426,7 @@ Optional. Pass an object with a list of `perPageSizes` to control the available
 
 #### `empty`: React node
 
-A message or element to be displayed instead of the dataview's default empty message.
+An element to display when the `data` prop is empty. Defaults to `<p>No results</p>`.
 
 ### Composition modes
 
@@ -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' }
+		}
+	} )
 }
 ```
 
@@ -1379,7 +1474,7 @@ Example:
 
 ### `layout`
 
-Represents the type of layout used to render the field. It'll be one of Regular, Panel, or Card. This prop is the same as the `form.layout` prop.
+Represents the type of layout used to render the field. It'll be one of Regular, Panel, Card, or Row. This prop is the same as the `form.layout` prop.
 
 #### Regular
 
@@ -1433,6 +1528,25 @@ For example:
 }
 ```
 
+#### Row
+
+- `type`: `row`. Required.
+- `alignment`: one of `start`, `center`, or `end`. Optional. `center` by default.
+
+The Row layout displays fields horizontally in a single row. It's particularly useful for grouping related fields that should be displayed side by side. This layout can be used both as a top-level form layout and for individual field groups.
+
+For example:
+
+```js
+{
+	id: 'field_id',
+	layout: {
+		type: 'row',
+		alignment: 'start'
+	},
+}
+```
+
 ### `label`
 
 The label used when displaying a combined field, this requires the use of `children` as well.

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/components/dataviews-layout/index.js

@@ -41,7 +41,9 @@ function DataViewsLayout({
     isItemClickable,
     renderItemLink,
     defaultLayouts,
-    empty = (0, _i18n.__)('No results')
+    empty = /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: (0, _i18n.__)('No results')
+    })
   } = (0, _element.useContext)(_dataviewsContext.default);
   const ViewComponent = _dataviewsLayouts.VIEW_LAYOUTS.find(v => v.type === view.type && defaultLayouts[v.type])?.component;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ViewComponent, {

package/build/components/dataviews-layout/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_i18n","_dataviewsContext","_interopRequireDefault","_dataviewsLayouts","_jsxRuntime","DataViewsLayout","className","actions","data","fields","getItemId","getItemLevel","isLoading","view","onChangeView","selection","onChangeSelection","setOpenedFilter","onClickItem","isItemClickable","renderItemLink","defaultLayouts","empty","__","useContext","DataViewsContext","ViewComponent","VIEW_LAYOUTS","find","v","type","component","jsx"],"sources":["@wordpress/dataviews/src/components/dataviews-layout/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { VIEW_LAYOUTS } from '../../dataviews-layouts';\nimport type { ViewBaseProps } from '../../types';\n\ntype DataViewsLayoutProps = {\n\tclassName?: string;\n};\n\nexport default function DataViewsLayout( { className }: DataViewsLayoutProps ) {\n\tconst {\n\t\tactions = [],\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tgetItemLevel,\n\t\tisLoading,\n\t\tview,\n\t\tonChangeView,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tsetOpenedFilter,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tdefaultLayouts,\n\t\tempty = __( 'No results' ),\n\t} = useContext( DataViewsContext );\n\n\tconst ViewComponent = VIEW_LAYOUTS.find(\n\t\t( v ) => v.type === view.type && defaultLayouts[ v.type ]\n\t)?.component as ComponentType< ViewBaseProps< any > >;\n\n\treturn (\n\t\t<ViewComponent\n\t\t\tclassName={ className }\n\t\t\tactions={ actions }\n\t\t\tdata={ data }\n\t\t\tfields={ fields }\n\t\t\tgetItemId={ getItemId }\n\t\t\tgetItemLevel={ getItemLevel }\n\t\t\tisLoading={ isLoading }\n\t\t\tonChangeView={ onChangeView }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tselection={ selection }\n\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\tonClickItem={ onClickItem }\n\t\t\trenderItemLink={ renderItemLink }\n\t\t\tisItemClickable={ isItemClickable }\n\t\t\tview={ view }\n\t\t\tempty={ empty }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAAuD,IAAAK,WAAA,GAAAL,OAAA;AAfvD;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AASe,SAASM,eAAeA,CAAE;EAAEC;AAAgC,CAAC,EAAG;EAC9E,MAAM;IACLC,OAAO,GAAG,EAAE;IACZC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,YAAY;IACZC,SAAS;IACTC,IAAI;IACJC,YAAY;IACZC,SAAS;IACTC,iBAAiB;IACjBC,eAAe;IACfC,WAAW;IACXC,eAAe;IACfC,cAAc;IACdC,cAAc;IACdC,KAAK,GAAG,IAAAC,QAAE,EAAE,YAAa;EAC1B,CAAC,GAAG,IAAAC,mBAAU,EAAEC,yBAAiB,CAAC;EAElC,MAAMC,aAAa,GAAGC,8BAAY,CAACC,IAAI,CACpCC,CAAC,IAAMA,CAAC,CAACC,IAAI,KAAKjB,IAAI,CAACiB,IAAI,IAAIT,cAAc,CAAEQ,CAAC,CAACC,IAAI,CACxD,CAAC,EAAEC,SAAkD;EAErD,oBACC,IAAA3B,WAAA,CAAA4B,GAAA,EAACN,aAAa;IACbpB,SAAS,EAAGA,SAAW;IACvBC,OAAO,EAAGA,OAAS;IACnBC,IAAI,EAAGA,IAAM;IACbC,MAAM,EAAGA,MAAQ;IACjBC,SAAS,EAAGA,SAAW;IACvBC,YAAY,EAAGA,YAAc;IAC7BC,SAAS,EAAGA,SAAW;IACvBE,YAAY,EAAGA,YAAc;IAC7BE,iBAAiB,EAAGA,iBAAmB;IACvCD,SAAS,EAAGA,SAAW;IACvBE,eAAe,EAAGA,eAAiB;IACnCC,WAAW,EAAGA,WAAa;IAC3BE,cAAc,EAAGA,cAAgB;IACjCD,eAAe,EAAGA,eAAiB;IACnCN,IAAI,EAAGA,IAAM;IACbS,KAAK,EAAGA;EAAO,CACf,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_element","require","_i18n","_dataviewsContext","_interopRequireDefault","_dataviewsLayouts","_jsxRuntime","DataViewsLayout","className","actions","data","fields","getItemId","getItemLevel","isLoading","view","onChangeView","selection","onChangeSelection","setOpenedFilter","onClickItem","isItemClickable","renderItemLink","defaultLayouts","empty","jsx","children","__","useContext","DataViewsContext","ViewComponent","VIEW_LAYOUTS","find","v","type","component"],"sources":["@wordpress/dataviews/src/components/dataviews-layout/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { VIEW_LAYOUTS } from '../../dataviews-layouts';\nimport type { ViewBaseProps } from '../../types';\n\ntype DataViewsLayoutProps = {\n\tclassName?: string;\n};\n\nexport default function DataViewsLayout( { className }: DataViewsLayoutProps ) {\n\tconst {\n\t\tactions = [],\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tgetItemLevel,\n\t\tisLoading,\n\t\tview,\n\t\tonChangeView,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tsetOpenedFilter,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tdefaultLayouts,\n\t\tempty = <p>{ __( 'No results' ) }</p>,\n\t} = useContext( DataViewsContext );\n\n\tconst ViewComponent = VIEW_LAYOUTS.find(\n\t\t( v ) => v.type === view.type && defaultLayouts[ v.type ]\n\t)?.component as ComponentType< ViewBaseProps< any > >;\n\n\treturn (\n\t\t<ViewComponent\n\t\t\tclassName={ className }\n\t\t\tactions={ actions }\n\t\t\tdata={ data }\n\t\t\tfields={ fields }\n\t\t\tgetItemId={ getItemId }\n\t\t\tgetItemLevel={ getItemLevel }\n\t\t\tisLoading={ isLoading }\n\t\t\tonChangeView={ onChangeView }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tselection={ selection }\n\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\tonClickItem={ onClickItem }\n\t\t\trenderItemLink={ renderItemLink }\n\t\t\tisItemClickable={ isItemClickable }\n\t\t\tview={ view }\n\t\t\tempty={ empty }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAAuD,IAAAK,WAAA,GAAAL,OAAA;AAfvD;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AASe,SAASM,eAAeA,CAAE;EAAEC;AAAgC,CAAC,EAAG;EAC9E,MAAM;IACLC,OAAO,GAAG,EAAE;IACZC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,YAAY;IACZC,SAAS;IACTC,IAAI;IACJC,YAAY;IACZC,SAAS;IACTC,iBAAiB;IACjBC,eAAe;IACfC,WAAW;IACXC,eAAe;IACfC,cAAc;IACdC,cAAc;IACdC,KAAK,gBAAG,IAAAlB,WAAA,CAAAmB,GAAA;MAAAC,QAAA,EAAK,IAAAC,QAAE,EAAE,YAAa;IAAC,CAAK;EACrC,CAAC,GAAG,IAAAC,mBAAU,EAAEC,yBAAiB,CAAC;EAElC,MAAMC,aAAa,GAAGC,8BAAY,CAACC,IAAI,CACpCC,CAAC,IAAMA,CAAC,CAACC,IAAI,KAAKnB,IAAI,CAACmB,IAAI,IAAIX,cAAc,CAAEU,CAAC,CAACC,IAAI,CACxD,CAAC,EAAEC,SAAkD;EAErD,oBACC,IAAA7B,WAAA,CAAAmB,GAAA,EAACK,aAAa;IACbtB,SAAS,EAAGA,SAAW;IACvBC,OAAO,EAAGA,OAAS;IACnBC,IAAI,EAAGA,IAAM;IACbC,MAAM,EAAGA,MAAQ;IACjBC,SAAS,EAAGA,SAAW;IACvBC,YAAY,EAAGA,YAAc;IAC7BC,SAAS,EAAGA,SAAW;IACvBE,YAAY,EAAGA,YAAc;IAC7BE,iBAAiB,EAAGA,iBAAmB;IACvCD,SAAS,EAAGA,SAAW;IACvBE,eAAe,EAAGA,eAAiB;IACnCC,WAAW,EAAGA,WAAa;IAC3BE,cAAc,EAAGA,cAAgB;IACjCD,eAAe,EAAGA,eAAiB;IACnCN,IAAI,EAAGA,IAAM;IACbS,KAAK,EAAGA;EAAO,CACf,CAAC;AAEJ","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,11 +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
  */
@@ -14,6 +22,9 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
+const {
+  ValidatedCheckboxControl
+} = (0, _lockUnlock.unlock)(_components.privateApis);
 function Checkbox({
   field,
   onChange,
@@ -21,24 +32,45 @@ function Checkbox({
   hideLabelFromVision
 }) {
   const {
-    id,
     getValue,
+    setValue,
     label,
     description
   } = field;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
-    __nextHasNoMarginBottom: true,
+  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: onValidateControl,
+    customValidity: customValidity,
     hidden: hideLabelFromVision,
     label: label,
     help: description,
     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","_jsxRuntime","Checkbox","field","onChange","data","hideLabelFromVision","id","getValue","label","description","jsx","CheckboxControl","__nextHasNoMarginBottom","hidden","help","checked","item"],"sources":["@wordpress/dataviews/src/dataform-controls/checkbox.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { CheckboxControl } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\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\n\treturn (\n\t\t<CheckboxControl\n\t\t\t__nextHasNoMarginBottom\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;AAAwD,IAAAC,WAAA,GAAAD,OAAA;AAHxD;AACA;AACA;;AAGA;AACA;AACA;;AAGe,SAASE,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;EAElD,oBACC,IAAAF,WAAA,CAAAU,GAAA,EAACZ,WAAA,CAAAa,eAAe;IACfC,uBAAuB;IACvBC,MAAM,EAAGR,mBAAqB;IAC9BG,KAAK,EAAGA,KAAO;IACfM,IAAI,EAAGL,WAAa;IACpBM,OAAO,EAAGR,QAAQ,CAAE;MAAES,IAAI,EAAEZ;IAAK,CAAE,CAAG;IACtCD,QAAQ,EAAGA,CAAA,KACVA,QAAQ,CAAE;MAAE,CAAEG,EAAE,GAAI,CAAEC,QAAQ,CAAE;QAAES,IAAI,EAAEZ;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

@@ -0,0 +1,133 @@
+"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");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  ValidatedInputControl,
+  Picker
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+const ColorPicker = ({
+  color,
+  onColorChange
+}) => {
+  const validColor = color && (0, _colord.colord)(color).isValid() ? color : '#ffffff';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
+    renderToggle: ({
+      onToggle,
+      isOpen
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControlPrefixWrapper, {
+      variant: "icon",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("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"
+      })
+    }),
+    renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        padding: '16px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
+        color: (0, _colord.colord)(validColor),
+        onChange: onColorChange,
+        enableAlpha: true
+      })
+    })
+  });
+};
+function Color({
+  data,
+  field,
+  onChange,
+  hideLabelFromVision
+}) {
+  const {
+    label,
+    placeholder,
+    description,
+    setValue
+  } = field;
+  const value = field.getValue({
+    item: data
+  }) || '';
+  const [customValidity, setCustomValidity] = (0, _element.useState)(undefined);
+  const handleColorChange = (0, _element.useCallback)(colorObject => {
+    onChange(setValue({
+      item: data,
+      value: colorObject.toHex()
+    }));
+  }, [data, onChange, setValue]);
+  const handleInputChange = (0, _element.useCallback)(newValue => {
+    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: onValidateControl,
+    customValidity: customValidity,
+    label: label,
+    placeholder: placeholder,
+    value: value,
+    help: description,
+    onChange: handleInputChange,
+    hideLabelFromVision: hideLabelFromVision,
+    type: "text",
+    prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorPicker, {
+      color: value,
+      onColorChange: handleColorChange
+    })
+  });
+}
+//# sourceMappingURL=color.js.map