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

package/build/dataform-controls/array.js

@@ -1,12 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ArrayControl;
+var _deepmerge = _interopRequireDefault(require("deepmerge"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _lockUnlock = require("../lock-unlock");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -15,56 +23,136 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
+const {
+  ValidatedFormTokenField
+} = (0, _lockUnlock.unlock)(_components.privateApis);
 function ArrayControl({
   data,
   field,
   onChange,
   hideLabelFromVision
 }) {
-  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 => {
-    return elements?.find(suggestion => suggestion.value === suggestionValue);
-  }, [elements]);
-  const findElementByLabel = (0, _element.useCallback)(suggestionLabel => {
-    return elements?.find(suggestion => suggestion.label === suggestionLabel);
-  }, [elements]);
+  const [customValidity, setCustomValidity] = (0, _element.useState)(undefined);
 
-  // Ensure value is an array
-  const arrayValue = (0, _element.useMemo)(() => Array.isArray(value) ? value.map(token => {
-    const tokenLabel = findElementByValue(token)?.label;
-    return tokenLabel || token;
-  }) : [], [value, findElementByValue]);
-  const onChangeControl = (0, _element.useCallback)(tokens => {
-    // Convert TokenItem objects to strings
-    const stringTokens = tokens.map(token => {
-      if (typeof token !== 'string') {
+  // Convert stored values to element objects for the token field
+  const arrayValueAsElements = (0, _element.useMemo)(() => Array.isArray(value) ? value.map(token => {
+    const element = elements?.find(suggestion => suggestion.value === token);
+    return element || {
+      value: token,
+      label: token
+    };
+  }) : [], [value, elements]);
+  const validateTokens = (0, _element.useCallback)(tokens => {
+    // Extract actual values from tokens for validation
+    const tokenValues = tokens.map(token => {
+      if (typeof token === 'object' && 'value' in token) {
         return token.value;
       }
-      const tokenByLabel = findElementByLabel(token);
-      return tokenByLabel?.value || token;
+      return token;
     });
-    onChange({
-      [id]: stringTokens
+
+    // First, check if elements validation is required and any tokens are invalid
+    if (field.isValid?.elements && elements) {
+      const invalidTokens = tokenValues.filter(tokenValue => {
+        return !elements.some(element => element.value === tokenValue);
+      });
+      if (invalidTokens.length > 0) {
+        setCustomValidity({
+          type: 'invalid',
+          message: (0, _i18n.sprintf)(/* translators: %s: list of invalid tokens */
+          (0, _i18n._n)('Please select from the available options: %s is invalid.', 'Please select from the available options: %s are invalid.', invalidTokens.length), invalidTokens.join(', '))
+        });
+        return;
+      }
+    }
+
+    // Then check custom validation if provided.
+    if (field.isValid?.custom) {
+      const result = field.isValid?.custom?.((0, _deepmerge.default)(data, setValue({
+        item: data,
+        value: tokenValues
+      })), field);
+      if (result) {
+        setCustomValidity({
+          type: 'invalid',
+          message: result
+        });
+        return;
+      }
+    }
+
+    // If no validation errors, clear custom validity
+    setCustomValidity(undefined);
+  }, [elements, data, field, setValue]);
+  const onChangeControl = (0, _element.useCallback)(tokens => {
+    const valueTokens = tokens.map(token => {
+      if (typeof token === 'object' && 'value' in token) {
+        return token.value;
+      }
+      // If it's a string, it's either a new suggestion value or user input
+      return token;
     });
-  }, [id, onChange, findElementByLabel]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormTokenField, {
+    onChange(setValue({
+      item: data,
+      value: valueTokens
+    }));
+  }, [onChange, setValue, data]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidatedFormTokenField, {
+    required: !!field.isValid?.required,
+    onValidate: validateTokens,
+    customValidity: customValidity,
     label: hideLabelFromVision ? undefined : label,
-    value: arrayValue,
+    value: arrayValueAsElements,
     onChange: onChangeControl,
     placeholder: placeholder,
-    suggestions: (_elements$map = elements?.map(suggestion => suggestion.label)) !== null && _elements$map !== void 0 ? _elements$map : [],
+    suggestions: elements?.map(element => element.value),
+    __experimentalValidateInput: token => {
+      // If elements validation is required, check if token is valid
+      if (field.isValid?.elements && elements) {
+        return elements.some(element => element.value === token || element.label === token);
+      }
+
+      // For non-elements validation, allow all tokens
+      return true;
+    },
     __experimentalExpandOnFocus: elements && elements.length > 0,
-    __next40pxDefaultSize: true,
-    __nextHasNoMarginBottom: true
+    __experimentalShowHowTo: !field.isValid?.elements,
+    displayTransform: token => {
+      // For existing tokens (element objects), display their label
+      if (typeof token === 'object' && 'label' in token) {
+        return token.label;
+      }
+      // For suggestions (value strings), find the corresponding element and show its label
+      if (typeof token === 'string' && elements) {
+        const element = elements.find(el => el.value === token);
+        return element?.label || token;
+      }
+      return token;
+    },
+    __experimentalRenderItem: ({
+      item
+    }) => {
+      // Custom rendering for suggestion items (item is a value string)
+      if (typeof item === 'string' && elements) {
+        const element = elements.find(el => el.value === item);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: element?.label || item
+        });
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: item
+      });
+    }
   });
 }
 //# sourceMappingURL=array.js.map

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":["_deepmerge","_interopRequireDefault","require","_components","_element","_i18n","_lockUnlock","_jsxRuntime","ValidatedFormTokenField","unlock","privateApis","ArrayControl","data","field","onChange","hideLabelFromVision","label","placeholder","elements","getValue","setValue","value","item","customValidity","setCustomValidity","useState","undefined","arrayValueAsElements","useMemo","Array","isArray","map","token","element","find","suggestion","validateTokens","useCallback","tokens","tokenValues","isValid","invalidTokens","filter","tokenValue","some","length","type","message","sprintf","_n","join","custom","result","deepMerge","onChangeControl","valueTokens","jsx","required","onValidate","suggestions","__experimentalValidateInput","__experimentalExpandOnFocus","__experimentalShowHowTo","displayTransform","el","__experimentalRenderItem","children"],"sources":["@wordpress/dataviews/src/dataform-controls/array.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\n\nconst { ValidatedFormTokenField } = unlock( privateApis );\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 [ customValidity, setCustomValidity ] = useState<\n\t\t| {\n\t\t\t\ttype: 'validating' | 'valid' | 'invalid';\n\t\t\t\tmessage: string;\n\t\t  }\n\t\t| undefined\n\t>( undefined );\n\n\t// Convert stored values to element objects for the token field\n\tconst arrayValueAsElements = useMemo(\n\t\t() =>\n\t\t\tArray.isArray( value )\n\t\t\t\t? value.map( ( token ) => {\n\t\t\t\t\t\tconst element = elements?.find(\n\t\t\t\t\t\t\t( suggestion ) => suggestion.value === token\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn element || { value: token, label: token };\n\t\t\t\t  } )\n\t\t\t\t: [],\n\t\t[ value, elements ]\n\t);\n\n\tconst validateTokens = useCallback(\n\t\t( tokens: ( string | { value: string; label?: string } )[] ) => {\n\t\t\t// Extract actual values from tokens for validation\n\t\t\tconst tokenValues = tokens.map( ( token ) => {\n\t\t\t\tif ( typeof token === 'object' && 'value' in token ) {\n\t\t\t\t\treturn token.value;\n\t\t\t\t}\n\t\t\t\treturn token;\n\t\t\t} );\n\n\t\t\t// First, check if elements validation is required and any tokens are invalid\n\t\t\tif ( field.isValid?.elements && elements ) {\n\t\t\t\tconst invalidTokens = tokenValues.filter( ( tokenValue ) => {\n\t\t\t\t\treturn ! elements.some(\n\t\t\t\t\t\t( element ) => element.value === tokenValue\n\t\t\t\t\t);\n\t\t\t\t} );\n\n\t\t\t\tif ( invalidTokens.length > 0 ) {\n\t\t\t\t\tsetCustomValidity( {\n\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\tmessage: sprintf(\n\t\t\t\t\t\t\t/* translators: %s: list of invalid tokens */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'Please select from the available options: %s is invalid.',\n\t\t\t\t\t\t\t\t'Please select from the available options: %s are invalid.',\n\t\t\t\t\t\t\t\tinvalidTokens.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tinvalidTokens.join( ', ' )\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Then check custom validation if provided.\n\t\t\tif ( field.isValid?.custom ) {\n\t\t\t\tconst result = field.isValid?.custom?.(\n\t\t\t\t\tdeepMerge(\n\t\t\t\t\t\tdata,\n\t\t\t\t\t\tsetValue( {\n\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\tvalue: tokenValues,\n\t\t\t\t\t\t} ) as Partial< Item >\n\t\t\t\t\t),\n\t\t\t\t\tfield\n\t\t\t\t);\n\n\t\t\t\tif ( result ) {\n\t\t\t\t\tsetCustomValidity( {\n\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\tmessage: result,\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// If no validation errors, clear custom validity\n\t\t\tsetCustomValidity( undefined );\n\t\t},\n\t\t[ elements, data, field, setValue ]\n\t);\n\n\tconst onChangeControl = useCallback(\n\t\t( tokens: ( string | { value: string; label?: string } )[] ) => {\n\t\t\tconst valueTokens = tokens.map( ( token ) => {\n\t\t\t\tif ( typeof token === 'object' && 'value' in token ) {\n\t\t\t\t\treturn token.value;\n\t\t\t\t}\n\t\t\t\t// If it's a string, it's either a new suggestion value or user input\n\t\t\t\treturn token;\n\t\t\t} );\n\n\t\t\tonChange( setValue( { item: data, value: valueTokens } ) );\n\t\t},\n\t\t[ onChange, setValue, data ]\n\t);\n\n\treturn (\n\t\t<ValidatedFormTokenField\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tonValidate={ validateTokens }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tlabel={ hideLabelFromVision ? undefined : label }\n\t\t\tvalue={ arrayValueAsElements }\n\t\t\tonChange={ onChangeControl }\n\t\t\tplaceholder={ placeholder }\n\t\t\tsuggestions={ elements?.map( ( element ) => element.value ) }\n\t\t\t__experimentalValidateInput={ ( token: string ) => {\n\t\t\t\t// If elements validation is required, check if token is valid\n\t\t\t\tif ( field.isValid?.elements && elements ) {\n\t\t\t\t\treturn elements.some(\n\t\t\t\t\t\t( element ) =>\n\t\t\t\t\t\t\telement.value === token || element.label === token\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// For non-elements validation, allow all tokens\n\t\t\t\treturn true;\n\t\t\t} }\n\t\t\t__experimentalExpandOnFocus={ elements && elements.length > 0 }\n\t\t\t__experimentalShowHowTo={ ! field.isValid?.elements }\n\t\t\tdisplayTransform={ ( token: any ) => {\n\t\t\t\t// For existing tokens (element objects), display their label\n\t\t\t\tif ( typeof token === 'object' && 'label' in token ) {\n\t\t\t\t\treturn token.label;\n\t\t\t\t}\n\t\t\t\t// For suggestions (value strings), find the corresponding element and show its label\n\t\t\t\tif ( typeof token === 'string' && elements ) {\n\t\t\t\t\tconst element = elements.find(\n\t\t\t\t\t\t( el ) => el.value === token\n\t\t\t\t\t);\n\t\t\t\t\treturn element?.label || token;\n\t\t\t\t}\n\t\t\t\treturn token;\n\t\t\t} }\n\t\t\t__experimentalRenderItem={ ( { item }: { item: any } ) => {\n\t\t\t\t// Custom rendering for suggestion items (item is a value string)\n\t\t\t\tif ( typeof item === 'string' && elements ) {\n\t\t\t\t\tconst element = elements.find(\n\t\t\t\t\t\t( el ) => el.value === item\n\t\t\t\t\t);\n\t\t\t\t\treturn <span>{ element?.label || item }</span>;\n\t\t\t\t}\n\t\t\t\treturn <span>{ item }</span>;\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],"mappings":"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","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":[]}

package/build/dataform-controls/date.js

@@ -121,24 +121,18 @@ function CalendarDateControl({
   });
   const onSelectDate = (0, _element.useCallback)(newDate => {
     const dateValue = newDate ? (0, _dateFns.format)(newDate, 'yyyy-MM-dd') : undefined;
-    onChange({
-      [id]: dateValue
-    });
+    onChange(dateValue);
     setSelectedPresetId(null);
-  }, [id, onChange]);
+  }, [onChange]);
   const handlePresetClick = (0, _element.useCallback)(preset => {
     const presetDate = preset.getValue();
     const dateValue = formatDate(presetDate);
     setCalendarMonth(presetDate);
-    onChange({
-      [id]: dateValue
-    });
+    onChange(dateValue);
     setSelectedPresetId(preset.id);
-  }, [id, onChange]);
+  }, [onChange]);
   const handleManualDateChange = (0, _element.useCallback)(newValue => {
-    onChange({
-      [id]: newValue
-    });
+    onChange(newValue);
     if (newValue) {
       const parsedDate = parseDate(newValue);
       if (parsedDate) {
@@ -146,7 +140,7 @@ function CalendarDateControl({
       }
     }
     setSelectedPresetId(null);
-  }, [id, onChange]);
+  }, [onChange]);
   const {
     timezone: {
       string: timezoneString
@@ -234,16 +228,12 @@ function CalendarDateRangeControl({
   });
   const updateDateRange = (0, _element.useCallback)((fromDate, toDate) => {
     if (fromDate && toDate) {
-      onChange({
-        [id]: [formatDate(fromDate), formatDate(toDate)]
-      });
+      onChange([formatDate(fromDate), formatDate(toDate)]);
     } else if (!fromDate && !toDate) {
-      onChange({
-        [id]: undefined
-      });
+      onChange(undefined);
     }
     // Do nothing if only one date is set - wait for both
-  }, [id, onChange]);
+  }, [onChange]);
   const onSelectCalendarRange = (0, _element.useCallback)(newRange => {
     updateDateRange(newRange?.from, newRange?.to);
     setSelectedPresetId(null);
@@ -342,17 +332,35 @@ function DateControl({
 }) {
   const {
     id,
-    label
+    label,
+    getValue,
+    setValue
   } = field;
-  const value = field.getValue({
+  const value = getValue({
     item: data
   });
+  const onChangeRelativeDateControl = (0, _element.useCallback)(newValue => {
+    onChange(setValue({
+      item: data,
+      value: newValue
+    }));
+  }, [data, onChange, setValue]);
+  const onChangeCalendarDateRangeControl = (0, _element.useCallback)(newValue => {
+    onChange(setValue({
+      item: data,
+      value: newValue
+    }));
+  }, [data, onChange, setValue]);
+  const onChangeCalendarDateControl = (0, _element.useCallback)(newValue => onChange(setValue({
+    item: data,
+    value: newValue
+  })), [data, onChange, setValue]);
   if (operator === _constants.OPERATOR_IN_THE_PAST || operator === _constants.OPERATOR_OVER) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_relativeDateControl.default, {
       className: "dataviews-controls__date",
       id: id,
       value: value && typeof value === 'object' ? value : {},
-      onChange: onChange,
+      onChange: onChangeRelativeDateControl,
       label: label,
       hideLabelFromVision: hideLabelFromVision,
       options: _relativeDateControl.TIME_UNITS_OPTIONS[operator]
@@ -368,7 +376,7 @@ function DateControl({
       className: "dataviews-controls__date",
       id: id,
       value: dateRangeValue,
-      onChange: onChange,
+      onChange: onChangeCalendarDateRangeControl,
       label: label,
       hideLabelFromVision: hideLabelFromVision
     });
@@ -377,7 +385,7 @@ function DateControl({
     className: "dataviews-controls__date",
     id: id,
     value: typeof value === 'string' ? value : undefined,
-    onChange: onChange,
+    onChange: onChangeCalendarDateControl,
     label: label,
     hideLabelFromVision: hideLabelFromVision
   });