@wordpress/dataviews 11.0.0 → 11.1.0

package/build-module/constants.js

@@ -1,12 +1,15 @@
 // packages/dataviews/src/constants.ts
 import { __ } from "@wordpress/i18n";
 import { arrowDown, arrowUp } from "@wordpress/icons";
-var OPERATOR_IS = "is";
-var OPERATOR_IS_NOT = "isNot";
 var OPERATOR_IS_ANY = "isAny";
 var OPERATOR_IS_NONE = "isNone";
 var OPERATOR_IS_ALL = "isAll";
 var OPERATOR_IS_NOT_ALL = "isNotAll";
+var OPERATOR_BETWEEN = "between";
+var OPERATOR_IN_THE_PAST = "inThePast";
+var OPERATOR_OVER = "over";
+var OPERATOR_IS = "is";
+var OPERATOR_IS_NOT = "isNot";
 var OPERATOR_LESS_THAN = "lessThan";
 var OPERATOR_GREATER_THAN = "greaterThan";
 var OPERATOR_LESS_THAN_OR_EQUAL = "lessThanOrEqual";
@@ -18,142 +21,8 @@ var OPERATOR_AFTER_INC = "afterInc";
 var OPERATOR_CONTAINS = "contains";
 var OPERATOR_NOT_CONTAINS = "notContains";
 var OPERATOR_STARTS_WITH = "startsWith";
-var OPERATOR_BETWEEN = "between";
 var OPERATOR_ON = "on";
 var OPERATOR_NOT_ON = "notOn";
-var OPERATOR_IN_THE_PAST = "inThePast";
-var OPERATOR_OVER = "over";
-var ALL_OPERATORS = [
-  OPERATOR_IS,
-  OPERATOR_IS_NOT,
-  OPERATOR_IS_ANY,
-  OPERATOR_IS_NONE,
-  OPERATOR_IS_ALL,
-  OPERATOR_IS_NOT_ALL,
-  OPERATOR_LESS_THAN,
-  OPERATOR_GREATER_THAN,
-  OPERATOR_LESS_THAN_OR_EQUAL,
-  OPERATOR_GREATER_THAN_OR_EQUAL,
-  OPERATOR_BEFORE,
-  OPERATOR_AFTER,
-  OPERATOR_BEFORE_INC,
-  OPERATOR_AFTER_INC,
-  OPERATOR_CONTAINS,
-  OPERATOR_NOT_CONTAINS,
-  OPERATOR_STARTS_WITH,
-  OPERATOR_BETWEEN,
-  OPERATOR_ON,
-  OPERATOR_NOT_ON,
-  OPERATOR_IN_THE_PAST,
-  OPERATOR_OVER
-];
-var SINGLE_SELECTION_OPERATORS = [
-  OPERATOR_IS,
-  OPERATOR_IS_NOT,
-  OPERATOR_LESS_THAN,
-  OPERATOR_GREATER_THAN,
-  OPERATOR_LESS_THAN_OR_EQUAL,
-  OPERATOR_GREATER_THAN_OR_EQUAL,
-  OPERATOR_BEFORE,
-  OPERATOR_AFTER,
-  OPERATOR_BEFORE_INC,
-  OPERATOR_AFTER_INC,
-  OPERATOR_CONTAINS,
-  OPERATOR_NOT_CONTAINS,
-  OPERATOR_STARTS_WITH,
-  OPERATOR_ON,
-  OPERATOR_NOT_ON
-];
-var OPERATORS = {
-  [OPERATOR_IS]: {
-    key: "is-filter",
-    label: __("Is")
-  },
-  [OPERATOR_IS_NOT]: {
-    key: "is-not-filter",
-    label: __("Is not")
-  },
-  [OPERATOR_IS_ANY]: {
-    key: "is-any-filter",
-    label: __("Is any")
-  },
-  [OPERATOR_IS_NONE]: {
-    key: "is-none-filter",
-    label: __("Is none")
-  },
-  [OPERATOR_IS_ALL]: {
-    key: "is-all-filter",
-    label: __("Is all")
-  },
-  [OPERATOR_IS_NOT_ALL]: {
-    key: "is-not-all-filter",
-    label: __("Is not all")
-  },
-  [OPERATOR_LESS_THAN]: {
-    key: "less-than-filter",
-    label: __("Less than")
-  },
-  [OPERATOR_GREATER_THAN]: {
-    key: "greater-than-filter",
-    label: __("Greater than")
-  },
-  [OPERATOR_LESS_THAN_OR_EQUAL]: {
-    key: "less-than-or-equal-filter",
-    label: __("Less than or equal")
-  },
-  [OPERATOR_GREATER_THAN_OR_EQUAL]: {
-    key: "greater-than-or-equal-filter",
-    label: __("Greater than or equal")
-  },
-  [OPERATOR_BEFORE]: {
-    key: "before-filter",
-    label: __("Before")
-  },
-  [OPERATOR_AFTER]: {
-    key: "after-filter",
-    label: __("After")
-  },
-  [OPERATOR_BEFORE_INC]: {
-    key: "before-inc-filter",
-    label: __("Before (inc)")
-  },
-  [OPERATOR_AFTER_INC]: {
-    key: "after-inc-filter",
-    label: __("After (inc)")
-  },
-  [OPERATOR_CONTAINS]: {
-    key: "contains-filter",
-    label: __("Contains")
-  },
-  [OPERATOR_NOT_CONTAINS]: {
-    key: "not-contains-filter",
-    label: __("Doesn't contain")
-  },
-  [OPERATOR_STARTS_WITH]: {
-    key: "starts-with-filter",
-    label: __("Starts with")
-  },
-  [OPERATOR_BETWEEN]: {
-    key: "between-filter",
-    label: __("Between (inc)")
-  },
-  [OPERATOR_ON]: {
-    key: "on-filter",
-    label: __("On")
-  },
-  [OPERATOR_NOT_ON]: {
-    key: "not-on-filter",
-    label: __("Not on")
-  },
-  [OPERATOR_IN_THE_PAST]: {
-    key: "in-the-past-filter",
-    label: __("In the past")
-  },
-  [OPERATOR_OVER]: {
-    key: "over-filter",
-    label: __("Over")
-  }
-};
 var SORTING_DIRECTIONS = ["asc", "desc"];
 var sortArrows = { asc: "\u2191", desc: "\u2193" };
 var sortValues = { asc: "ascending", desc: "descending" };
@@ -173,7 +42,6 @@ var LAYOUT_PICKER_GRID = "pickerGrid";
 var LAYOUT_PICKER_TABLE = "pickerTable";
 var DAYS_OF_WEEK = [0, 1, 2, 3, 4, 5, 6];
 export {
-  ALL_OPERATORS,
   DAYS_OF_WEEK,
   LAYOUT_ACTIVITY,
   LAYOUT_GRID,
@@ -181,7 +49,6 @@ export {
   LAYOUT_PICKER_GRID,
   LAYOUT_PICKER_TABLE,
   LAYOUT_TABLE,
-  OPERATORS,
   OPERATOR_AFTER,
   OPERATOR_AFTER_INC,
   OPERATOR_BEFORE,
@@ -204,7 +71,6 @@ export {
   OPERATOR_ON,
   OPERATOR_OVER,
   OPERATOR_STARTS_WITH,
-  SINGLE_SELECTION_OPERATORS,
   SORTING_DIRECTIONS,
   sortArrows,
   sortIcons,

package/build-module/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/constants.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { arrowDown, arrowUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { Operator, DayNumber } from './types';\n\n// Filter operators.\nexport const OPERATOR_IS = 'is';\nexport const OPERATOR_IS_NOT = 'isNot';\nexport const OPERATOR_IS_ANY = 'isAny';\nexport const OPERATOR_IS_NONE = 'isNone';\nexport const OPERATOR_IS_ALL = 'isAll';\nexport const OPERATOR_IS_NOT_ALL = 'isNotAll';\nexport const OPERATOR_LESS_THAN = 'lessThan';\nexport const OPERATOR_GREATER_THAN = 'greaterThan';\nexport const OPERATOR_LESS_THAN_OR_EQUAL = 'lessThanOrEqual';\nexport const OPERATOR_GREATER_THAN_OR_EQUAL = 'greaterThanOrEqual';\nexport const OPERATOR_BEFORE = 'before';\nexport const OPERATOR_AFTER = 'after';\nexport const OPERATOR_BEFORE_INC = 'beforeInc';\nexport const OPERATOR_AFTER_INC = 'afterInc';\nexport const OPERATOR_CONTAINS = 'contains';\nexport const OPERATOR_NOT_CONTAINS = 'notContains';\nexport const OPERATOR_STARTS_WITH = 'startsWith';\nexport const OPERATOR_BETWEEN = 'between';\nexport const OPERATOR_ON = 'on';\nexport const OPERATOR_NOT_ON = 'notOn';\nexport const OPERATOR_IN_THE_PAST = 'inThePast';\nexport const OPERATOR_OVER = 'over';\n\nexport const ALL_OPERATORS: Operator[] = [\n\tOPERATOR_IS,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_IS_ANY,\n\tOPERATOR_IS_NONE,\n\tOPERATOR_IS_ALL,\n\tOPERATOR_IS_NOT_ALL,\n\tOPERATOR_LESS_THAN,\n\tOPERATOR_GREATER_THAN,\n\tOPERATOR_LESS_THAN_OR_EQUAL,\n\tOPERATOR_GREATER_THAN_OR_EQUAL,\n\tOPERATOR_BEFORE,\n\tOPERATOR_AFTER,\n\tOPERATOR_BEFORE_INC,\n\tOPERATOR_AFTER_INC,\n\tOPERATOR_CONTAINS,\n\tOPERATOR_NOT_CONTAINS,\n\tOPERATOR_STARTS_WITH,\n\tOPERATOR_BETWEEN,\n\tOPERATOR_ON,\n\tOPERATOR_NOT_ON,\n\tOPERATOR_IN_THE_PAST,\n\tOPERATOR_OVER,\n];\n\nexport const SINGLE_SELECTION_OPERATORS: Operator[] = [\n\tOPERATOR_IS,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_LESS_THAN,\n\tOPERATOR_GREATER_THAN,\n\tOPERATOR_LESS_THAN_OR_EQUAL,\n\tOPERATOR_GREATER_THAN_OR_EQUAL,\n\tOPERATOR_BEFORE,\n\tOPERATOR_AFTER,\n\tOPERATOR_BEFORE_INC,\n\tOPERATOR_AFTER_INC,\n\tOPERATOR_CONTAINS,\n\tOPERATOR_NOT_CONTAINS,\n\tOPERATOR_STARTS_WITH,\n\tOPERATOR_ON,\n\tOPERATOR_NOT_ON,\n];\n\nexport const OPERATORS: Record< Operator, { key: string; label: string } > = {\n\t[ OPERATOR_IS ]: {\n\t\tkey: 'is-filter',\n\t\tlabel: __( 'Is' ),\n\t},\n\t[ OPERATOR_IS_NOT ]: {\n\t\tkey: 'is-not-filter',\n\t\tlabel: __( 'Is not' ),\n\t},\n\t[ OPERATOR_IS_ANY ]: {\n\t\tkey: 'is-any-filter',\n\t\tlabel: __( 'Is any' ),\n\t},\n\t[ OPERATOR_IS_NONE ]: {\n\t\tkey: 'is-none-filter',\n\t\tlabel: __( 'Is none' ),\n\t},\n\t[ OPERATOR_IS_ALL ]: {\n\t\tkey: 'is-all-filter',\n\t\tlabel: __( 'Is all' ),\n\t},\n\t[ OPERATOR_IS_NOT_ALL ]: {\n\t\tkey: 'is-not-all-filter',\n\t\tlabel: __( 'Is not all' ),\n\t},\n\t[ OPERATOR_LESS_THAN ]: {\n\t\tkey: 'less-than-filter',\n\t\tlabel: __( 'Less than' ),\n\t},\n\t[ OPERATOR_GREATER_THAN ]: {\n\t\tkey: 'greater-than-filter',\n\t\tlabel: __( 'Greater than' ),\n\t},\n\t[ OPERATOR_LESS_THAN_OR_EQUAL ]: {\n\t\tkey: 'less-than-or-equal-filter',\n\t\tlabel: __( 'Less than or equal' ),\n\t},\n\t[ OPERATOR_GREATER_THAN_OR_EQUAL ]: {\n\t\tkey: 'greater-than-or-equal-filter',\n\t\tlabel: __( 'Greater than or equal' ),\n\t},\n\t[ OPERATOR_BEFORE ]: {\n\t\tkey: 'before-filter',\n\t\tlabel: __( 'Before' ),\n\t},\n\t[ OPERATOR_AFTER ]: {\n\t\tkey: 'after-filter',\n\t\tlabel: __( 'After' ),\n\t},\n\t[ OPERATOR_BEFORE_INC ]: {\n\t\tkey: 'before-inc-filter',\n\t\tlabel: __( 'Before (inc)' ),\n\t},\n\t[ OPERATOR_AFTER_INC ]: {\n\t\tkey: 'after-inc-filter',\n\t\tlabel: __( 'After (inc)' ),\n\t},\n\t[ OPERATOR_CONTAINS ]: {\n\t\tkey: 'contains-filter',\n\t\tlabel: __( 'Contains' ),\n\t},\n\t[ OPERATOR_NOT_CONTAINS ]: {\n\t\tkey: 'not-contains-filter',\n\t\tlabel: __( \"Doesn't contain\" ),\n\t},\n\t[ OPERATOR_STARTS_WITH ]: {\n\t\tkey: 'starts-with-filter',\n\t\tlabel: __( 'Starts with' ),\n\t},\n\t[ OPERATOR_BETWEEN ]: {\n\t\tkey: 'between-filter',\n\t\tlabel: __( 'Between (inc)' ),\n\t},\n\t[ OPERATOR_ON ]: {\n\t\tkey: 'on-filter',\n\t\tlabel: __( 'On' ),\n\t},\n\t[ OPERATOR_NOT_ON ]: {\n\t\tkey: 'not-on-filter',\n\t\tlabel: __( 'Not on' ),\n\t},\n\t[ OPERATOR_IN_THE_PAST ]: {\n\t\tkey: 'in-the-past-filter',\n\t\tlabel: __( 'In the past' ),\n\t},\n\t[ OPERATOR_OVER ]: {\n\t\tkey: 'over-filter',\n\t\tlabel: __( 'Over' ),\n\t},\n};\n\nexport const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;\nexport const sortArrows = { asc: '\u2191', desc: '\u2193' };\nexport const sortValues = { asc: 'ascending', desc: 'descending' } as const;\nexport const sortLabels = {\n\tasc: __( 'Sort ascending' ),\n\tdesc: __( 'Sort descending' ),\n};\nexport const sortIcons = {\n\tasc: arrowUp,\n\tdesc: arrowDown,\n};\n\n// View layouts.\nexport const LAYOUT_TABLE = 'table';\nexport const LAYOUT_GRID = 'grid';\nexport const LAYOUT_LIST = 'list';\nexport const LAYOUT_ACTIVITY = 'activity';\n\n// Picker view layouts.\nexport const LAYOUT_PICKER_GRID = 'pickerGrid';\nexport const LAYOUT_PICKER_TABLE = 'pickerTable';\n\nexport const DAYS_OF_WEEK: DayNumber[] = [ 0, 1, 2, 3, 4, 5, 6 ];\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { arrowDown, arrowUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { DayNumber } from './types';\n\n// Filter operators.\nexport const OPERATOR_IS_ANY = 'isAny';\nexport const OPERATOR_IS_NONE = 'isNone';\nexport const OPERATOR_IS_ALL = 'isAll';\nexport const OPERATOR_IS_NOT_ALL = 'isNotAll';\nexport const OPERATOR_BETWEEN = 'between';\nexport const OPERATOR_IN_THE_PAST = 'inThePast';\nexport const OPERATOR_OVER = 'over';\nexport const OPERATOR_IS = 'is';\nexport const OPERATOR_IS_NOT = 'isNot';\nexport const OPERATOR_LESS_THAN = 'lessThan';\nexport const OPERATOR_GREATER_THAN = 'greaterThan';\nexport const OPERATOR_LESS_THAN_OR_EQUAL = 'lessThanOrEqual';\nexport const OPERATOR_GREATER_THAN_OR_EQUAL = 'greaterThanOrEqual';\nexport const OPERATOR_BEFORE = 'before';\nexport const OPERATOR_AFTER = 'after';\nexport const OPERATOR_BEFORE_INC = 'beforeInc';\nexport const OPERATOR_AFTER_INC = 'afterInc';\nexport const OPERATOR_CONTAINS = 'contains';\nexport const OPERATOR_NOT_CONTAINS = 'notContains';\nexport const OPERATOR_STARTS_WITH = 'startsWith';\nexport const OPERATOR_ON = 'on';\nexport const OPERATOR_NOT_ON = 'notOn';\n\nexport const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;\nexport const sortArrows = { asc: '\u2191', desc: '\u2193' };\nexport const sortValues = { asc: 'ascending', desc: 'descending' } as const;\nexport const sortLabels = {\n\tasc: __( 'Sort ascending' ),\n\tdesc: __( 'Sort descending' ),\n};\nexport const sortIcons = {\n\tasc: arrowUp,\n\tdesc: arrowDown,\n};\n\n// View layouts.\nexport const LAYOUT_TABLE = 'table';\nexport const LAYOUT_GRID = 'grid';\nexport const LAYOUT_LIST = 'list';\nexport const LAYOUT_ACTIVITY = 'activity';\n\n// Picker view layouts.\nexport const LAYOUT_PICKER_GRID = 'pickerGrid';\nexport const LAYOUT_PICKER_TABLE = 'pickerTable';\n\nexport const DAYS_OF_WEEK: DayNumber[] = [ 0, 1, 2, 3, 4, 5, 6 ];\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,WAAW,eAAe;AAQ5B,IAAM,kBAAkB;AACxB,IAAM,mBAAmB;AACzB,IAAM,kBAAkB;AACxB,IAAM,sBAAsB;AAC5B,IAAM,mBAAmB;AACzB,IAAM,uBAAuB;AAC7B,IAAM,gBAAgB;AACtB,IAAM,cAAc;AACpB,IAAM,kBAAkB;AACxB,IAAM,qBAAqB;AAC3B,IAAM,wBAAwB;AAC9B,IAAM,8BAA8B;AACpC,IAAM,iCAAiC;AACvC,IAAM,kBAAkB;AACxB,IAAM,iBAAiB;AACvB,IAAM,sBAAsB;AAC5B,IAAM,qBAAqB;AAC3B,IAAM,oBAAoB;AAC1B,IAAM,wBAAwB;AAC9B,IAAM,uBAAuB;AAC7B,IAAM,cAAc;AACpB,IAAM,kBAAkB;AAExB,IAAM,qBAAqB,CAAE,OAAO,MAAO;AAC3C,IAAM,aAAa,EAAE,KAAK,UAAK,MAAM,SAAI;AACzC,IAAM,aAAa,EAAE,KAAK,aAAa,MAAM,aAAa;AAC1D,IAAM,aAAa;AAAA,EACzB,KAAK,GAAI,gBAAiB;AAAA,EAC1B,MAAM,GAAI,iBAAkB;AAC7B;AACO,IAAM,YAAY;AAAA,EACxB,KAAK;AAAA,EACL,MAAM;AACP;AAGO,IAAM,eAAe;AACrB,IAAM,cAAc;AACpB,IAAM,cAAc;AACpB,IAAM,kBAAkB;AAGxB,IAAM,qBAAqB;AAC3B,IAAM,sBAAsB;AAE5B,IAAM,eAA4B,CAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAE;",
   "names": []
 }

package/build-module/dataform-controls/number.js

@@ -2,7 +2,8 @@
 import ValidatedNumber from "./utils/validated-number";
 import { jsx } from "react/jsx-runtime";
 function Number(props) {
-  return /* @__PURE__ */ jsx(ValidatedNumber, { ...props, decimals: 2 });
+  const decimals = props.field.format?.decimals ?? 2;
+  return /* @__PURE__ */ jsx(ValidatedNumber, { ...props, decimals });
 }
 export {
   Number as default

package/build-module/dataform-controls/number.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-controls/number.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport ValidatedNumber from './utils/validated-number';\n\nexport default function Number< Item >( props: DataFormControlProps< Item > ) {\n\t// TODO: remove this hardcoded value when the decimal number is configurable\n\treturn <ValidatedNumber { ...props } decimals={ 2 } />;\n}\n"],
-  "mappings": ";AAIA,OAAO,qBAAqB;AAIpB;AAFO,SAAR,OAAiC,OAAsC;AAE7E,SAAO,oBAAC,mBAAkB,GAAG,OAAQ,UAAW,GAAI;AACrD;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { DataFormControlProps, FormatNumber } from '../types';\nimport ValidatedNumber from './utils/validated-number';\n\nexport default function Number< Item >( props: DataFormControlProps< Item > ) {\n\tconst decimals = ( props.field.format as FormatNumber )?.decimals ?? 2;\n\treturn <ValidatedNumber { ...props } decimals={ decimals } />;\n}\n"],
+  "mappings": ";AAIA,OAAO,qBAAqB;AAIpB;AAFO,SAAR,OAAiC,OAAsC;AAC7E,QAAM,WAAa,MAAM,MAAM,QAA0B,YAAY;AACrE,SAAO,oBAAC,mBAAkB,GAAG,OAAQ,UAAsB;AAC5D;",
   "names": []
 }

package/build-module/dataform-controls/textarea.js

@@ -23,7 +23,7 @@ function Textarea({
   return /* @__PURE__ */ jsx(
     ValidatedTextareaControl,
     {
-      required: !!isValid?.required,
+      required: !!isValid.required,
       customValidity: getCustomValidity(isValid, validity),
       label,
       placeholder,
@@ -31,6 +31,8 @@ function Textarea({
       help: description,
       onChange: onChangeControl,
       rows,
+      minLength: isValid.minLength ? isValid.minLength.constraint : void 0,
+      maxLength: isValid.maxLength ? isValid.maxLength.constraint : void 0,
       __next40pxDefaultSize: true,
       __nextHasNoMarginBottom: true,
       hideLabelFromVision

package/build-module/dataform-controls/textarea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-controls/textarea.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedTextareaControl } = unlock( privateApis );\n\nexport default function Textarea< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tconfig,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { rows = 4 } = config || {};\n\tconst { label, placeholder, description, setValue, isValid } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedTextareaControl\n\t\t\trequired={ !! isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\trows={ rows }\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAuB5B;AArBF,IAAM,EAAE,yBAAyB,IAAI,OAAQ,WAAY;AAE1C,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,EAAE,IAAI,UAAU,CAAC;AAChC,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,QAAQ,IAAI;AAC/D,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE;AAE7C,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,SAAS;AAAA,MACvB,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA,uBAAqB;AAAA,MACrB,yBAAuB;AAAA,MACvB;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedTextareaControl } = unlock( privateApis );\n\nexport default function Textarea< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tconfig,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { rows = 4 } = config || {};\n\tconst { label, placeholder, description, setValue, isValid } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedTextareaControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\trows={ rows }\n\t\t\tminLength={\n\t\t\t\tisValid.minLength ? isValid.minLength.constraint : undefined\n\t\t\t}\n\t\t\tmaxLength={\n\t\t\t\tisValid.maxLength ? isValid.maxLength.constraint : undefined\n\t\t\t}\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAuB5B;AArBF,IAAM,EAAE,yBAAyB,IAAI,OAAQ,WAAY;AAE1C,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,EAAE,IAAI,UAAU,CAAC;AAChC,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,QAAQ,IAAI;AAC/D,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE;AAE7C,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,QAAQ;AAAA,MACtB,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,uBAAqB;AAAA,MACrB,yBAAuB;AAAA,MACvB;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/dataform-controls/utils/get-custom-validity.js

@@ -5,6 +5,14 @@ function getCustomValidity(isValid, validity) {
     customValidity = validity?.required?.message ? validity.required : void 0;
   } else if (isValid?.pattern && validity?.pattern) {
     customValidity = validity.pattern;
+  } else if (isValid?.min && validity?.min) {
+    customValidity = validity.min;
+  } else if (isValid?.max && validity?.max) {
+    customValidity = validity.max;
+  } else if (isValid?.minLength && validity?.minLength) {
+    customValidity = validity.minLength;
+  } else if (isValid?.maxLength && validity?.maxLength) {
+    customValidity = validity.maxLength;
   } else if (isValid?.elements && validity?.elements) {
     customValidity = validity.elements;
   } else if (validity?.custom) {

package/build-module/dataform-controls/utils/get-custom-validity.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/dataform-controls/utils/get-custom-validity.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Rules, FieldValidity } from '../../types';\n\nexport default function getCustomValidity< Item >(\n\tisValid: Rules< Item >,\n\tvalidity: FieldValidity | undefined\n) {\n\tlet customValidity;\n\tif ( isValid?.required && validity?.required ) {\n\t\t// If the consumer provides a message for required,\n\t\t// use it instead of the native built-in message.\n\t\tcustomValidity = validity?.required?.message\n\t\t\t? validity.required\n\t\t\t: undefined;\n\t} else if ( isValid?.pattern && validity?.pattern ) {\n\t\tcustomValidity = validity.pattern;\n\t} else if ( isValid?.elements && validity?.elements ) {\n\t\tcustomValidity = validity.elements;\n\t} else if ( validity?.custom ) {\n\t\tcustomValidity = validity.custom;\n\t}\n\n\treturn customValidity;\n}\n"],
-  "mappings": ";AAKe,SAAR,kBACN,SACA,UACC;AACD,MAAI;AACJ,MAAK,SAAS,YAAY,UAAU,UAAW;AAG9C,qBAAiB,UAAU,UAAU,UAClC,SAAS,WACT;AAAA,EACJ,WAAY,SAAS,WAAW,UAAU,SAAU;AACnD,qBAAiB,SAAS;AAAA,EAC3B,WAAY,SAAS,YAAY,UAAU,UAAW;AACrD,qBAAiB,SAAS;AAAA,EAC3B,WAAY,UAAU,QAAS;AAC9B,qBAAiB,SAAS;AAAA,EAC3B;AAEA,SAAO;AACR;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { NormalizedRules, FieldValidity } from '../../types';\n\nexport default function getCustomValidity< Item >(\n\tisValid: NormalizedRules< Item >,\n\tvalidity: FieldValidity | undefined\n) {\n\tlet customValidity;\n\tif ( isValid?.required && validity?.required ) {\n\t\t// If the consumer provides a message for required,\n\t\t// use it instead of the native built-in message.\n\t\tcustomValidity = validity?.required?.message\n\t\t\t? validity.required\n\t\t\t: undefined;\n\t} else if ( isValid?.pattern && validity?.pattern ) {\n\t\tcustomValidity = validity.pattern;\n\t} else if ( isValid?.min && validity?.min ) {\n\t\tcustomValidity = validity.min;\n\t} else if ( isValid?.max && validity?.max ) {\n\t\tcustomValidity = validity.max;\n\t} else if ( isValid?.minLength && validity?.minLength ) {\n\t\tcustomValidity = validity.minLength;\n\t} else if ( isValid?.maxLength && validity?.maxLength ) {\n\t\tcustomValidity = validity.maxLength;\n\t} else if ( isValid?.elements && validity?.elements ) {\n\t\tcustomValidity = validity.elements;\n\t} else if ( validity?.custom ) {\n\t\tcustomValidity = validity.custom;\n\t}\n\n\treturn customValidity;\n}\n"],
+  "mappings": ";AAKe,SAAR,kBACN,SACA,UACC;AACD,MAAI;AACJ,MAAK,SAAS,YAAY,UAAU,UAAW;AAG9C,qBAAiB,UAAU,UAAU,UAClC,SAAS,WACT;AAAA,EACJ,WAAY,SAAS,WAAW,UAAU,SAAU;AACnD,qBAAiB,SAAS;AAAA,EAC3B,WAAY,SAAS,OAAO,UAAU,KAAM;AAC3C,qBAAiB,SAAS;AAAA,EAC3B,WAAY,SAAS,OAAO,UAAU,KAAM;AAC3C,qBAAiB,SAAS;AAAA,EAC3B,WAAY,SAAS,aAAa,UAAU,WAAY;AACvD,qBAAiB,SAAS;AAAA,EAC3B,WAAY,SAAS,aAAa,UAAU,WAAY;AACvD,qBAAiB,SAAS;AAAA,EAC3B,WAAY,SAAS,YAAY,UAAU,UAAW;AACrD,qBAAiB,SAAS;AAAA,EAC3B,WAAY,UAAU,QAAS;AAC9B,qBAAiB,SAAS;AAAA,EAC3B;AAEA,SAAO;AACR;",
   "names": []
 }

package/build-module/dataform-controls/utils/validated-input.js

@@ -29,7 +29,7 @@ function ValidatedText({
   return /* @__PURE__ */ jsx(
     ValidatedInputControl,
     {
-      required: !!isValid?.required,
+      required: !!isValid.required,
       customValidity: getCustomValidity(isValid, validity),
       label,
       placeholder,
@@ -40,7 +40,9 @@ function ValidatedText({
       type,
       prefix,
       suffix,
-      pattern: isValid?.pattern,
+      pattern: isValid.pattern ? isValid.pattern.constraint : void 0,
+      minLength: isValid.minLength ? isValid.minLength.constraint : void 0,
+      maxLength: isValid.maxLength ? isValid.maxLength.constraint : void 0,
       __next40pxDefaultSize: true
     }
   );

package/build-module/dataform-controls/utils/validated-input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/dataform-controls/utils/validated-input.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './get-custom-validity';\n\nconst { ValidatedInputControl } = unlock( privateApis );\n\nexport type DataFormValidatedTextControlProps< Item > =\n\tDataFormControlProps< Item > & {\n\t\t/**\n\t\t * The input type of the control.\n\t\t */\n\t\ttype?: 'text' | 'email' | 'tel' | 'url' | 'password';\n\t\t/**\n\t\t * Optional prefix element to display before the input.\n\t\t */\n\t\tprefix?: React.ReactElement;\n\t\t/**\n\t\t * Optional suffix element to display after the input.\n\t\t */\n\t\tsuffix?: React.ReactElement;\n\t};\n\nexport default function ValidatedText< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\ttype,\n\tprefix,\n\tsuffix,\n\tvalidity,\n}: DataFormValidatedTextControlProps< Item > ) {\n\tconst { label, placeholder, description, getValue, setValue, isValid } =\n\t\tfield;\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t),\n\t\t[ data, setValue, onChange ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\ttype={ type }\n\t\t\tprefix={ prefix }\n\t\t\tsuffix={ suffix }\n\t\t\tpattern={ isValid?.pattern }\n\t\t\t__next40pxDefaultSize\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AA8C5B;AA5CF,IAAM,EAAE,sBAAsB,IAAI,OAAQ,WAAY;AAkBvC,SAAR,cAAwC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA+C;AAC9C,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,UAAU,QAAQ,IACpE;AACD,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MACR,CAAE;AAAA,IACH;AAAA,IACD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,SAAS;AAAA,MACvB,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAU,SAAS;AAAA,MACnB,uBAAqB;AAAA;AAAA,EACtB;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './get-custom-validity';\n\nconst { ValidatedInputControl } = unlock( privateApis );\n\nexport type DataFormValidatedTextControlProps< Item > =\n\tDataFormControlProps< Item > & {\n\t\t/**\n\t\t * The input type of the control.\n\t\t */\n\t\ttype?: 'text' | 'email' | 'tel' | 'url' | 'password';\n\t\t/**\n\t\t * Optional prefix element to display before the input.\n\t\t */\n\t\tprefix?: React.ReactElement;\n\t\t/**\n\t\t * Optional suffix element to display after the input.\n\t\t */\n\t\tsuffix?: React.ReactElement;\n\t};\n\nexport default function ValidatedText< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\ttype,\n\tprefix,\n\tsuffix,\n\tvalidity,\n}: DataFormValidatedTextControlProps< Item > ) {\n\tconst { label, placeholder, description, getValue, setValue, isValid } =\n\t\tfield;\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t),\n\t\t[ data, setValue, onChange ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\ttype={ type }\n\t\t\tprefix={ prefix }\n\t\t\tsuffix={ suffix }\n\t\t\tpattern={ isValid.pattern ? isValid.pattern.constraint : undefined }\n\t\t\tminLength={\n\t\t\t\tisValid.minLength ? isValid.minLength.constraint : undefined\n\t\t\t}\n\t\t\tmaxLength={\n\t\t\t\tisValid.maxLength ? isValid.maxLength.constraint : undefined\n\t\t\t}\n\t\t\t__next40pxDefaultSize\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AA8C5B;AA5CF,IAAM,EAAE,sBAAsB,IAAI,OAAQ,WAAY;AAkBvC,SAAR,cAAwC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA+C;AAC9C,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,UAAU,QAAQ,IACpE;AACD,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MACR,CAAE;AAAA,IACH;AAAA,IACD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,QAAQ;AAAA,MACtB,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAU,QAAQ,UAAU,QAAQ,QAAQ,aAAa;AAAA,MACzD,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,uBAAqB;AAAA;AAAA,EACtB;AAEF;",
   "names": []
 }

package/build-module/dataform-controls/utils/validated-number.js

@@ -125,7 +125,7 @@ function ValidatedNumber({
   return /* @__PURE__ */ jsx(
     ValidatedNumberControl,
     {
-      required: !!isValid?.required,
+      required: !!isValid.required,
       customValidity: getCustomValidity(isValid, validity),
       label,
       help: description,
@@ -133,7 +133,9 @@ function ValidatedNumber({
       onChange: onChangeControl,
       __next40pxDefaultSize: true,
       hideLabelFromVision,
-      step
+      step,
+      min: isValid.min ? isValid.min.constraint : void 0,
+      max: isValid.max ? isValid.max.constraint : void 0
     }
   );
 }

package/build-module/dataform-controls/utils/validated-number.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/dataform-controls/utils/validated-number.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tBaseControl,\n\t__experimentalNumberControl as NumberControl,\n\tprivateApis,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_BETWEEN } from '../../constants';\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './get-custom-validity';\n\nconst { ValidatedNumberControl } = unlock( privateApis );\n\ntype NumberBetween = [ number | string, number | string ];\n\nfunction toNumberOrEmpty( value?: string ) {\n\tif ( value === '' || value === undefined ) {\n\t\treturn '';\n\t}\n\tconst number = Number( value );\n\treturn Number.isFinite( number ) ? number : '';\n}\n\nfunction BetweenControls( {\n\tvalue,\n\tonChange,\n\thideLabelFromVision,\n\tstep,\n}: {\n\tvalue: NumberBetween;\n\tonChange: ( [ min, max ]: NumberBetween ) => void;\n\thideLabelFromVision?: boolean;\n\tstep: number;\n} ) {\n\tconst [ min = '', max = '' ] = value;\n\n\tconst onChangeMin = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ toNumberOrEmpty( newValue ), max ] ),\n\t\t[ onChange, max ]\n\t);\n\n\tconst onChangeMax = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ min, toNumberOrEmpty( newValue ) ] ),\n\t\t[ onChange, min ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\thelp={ __( 'The max. value must be greater than the min. value.' ) }\n\t\t>\n\t\t\t<Flex direction=\"row\" gap={ 4 }>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Min.' ) }\n\t\t\t\t\tvalue={ min }\n\t\t\t\t\tmax={ max ? Number( max ) - step : undefined }\n\t\t\t\t\tonChange={ onChangeMin }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Max.' ) }\n\t\t\t\t\tvalue={ max }\n\t\t\t\t\tmin={ min ? Number( min ) + step : undefined }\n\t\t\t\t\tonChange={ onChangeMax }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t</Flex>\n\t\t</BaseControl>\n\t);\n}\n\nexport type DataFormValidatedNumberControlProps< Item > =\n\tDataFormControlProps< Item > & {\n\t\t/**\n\t\t * Number of decimals, acceps non-negative integer.\n\t\t */\n\t\tdecimals: number;\n\t};\n\nexport default function ValidatedNumber< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n\tdecimals,\n\tvalidity,\n}: DataFormValidatedNumberControlProps< Item > ) {\n\tconst step = Math.pow( 10, Math.abs( decimals ) * -1 );\n\tconst { label, description, getValue, setValue, isValid } = field;\n\tconst value = getValue( { item: data } ) ?? '';\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\t// Do not convert an empty string or undefined to a number,\n\t\t\t\t\t// otherwise there's a mismatch between the UI control (empty)\n\t\t\t\t\t// and the data relied by onChange (0).\n\t\t\t\t\tvalue: [ '', undefined ].includes( newValue )\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onChangeBetweenControls = useCallback(\n\t\t( newValue: NumberBetween ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tif ( operator === OPERATOR_BETWEEN ) {\n\t\tlet valueBetween: NumberBetween = [ '', '' ];\n\t\tif (\n\t\t\tArray.isArray( value ) &&\n\t\t\tvalue.length === 2 &&\n\t\t\tvalue.every(\n\t\t\t\t( element ) => typeof element === 'number' || element === ''\n\t\t\t)\n\t\t) {\n\t\t\tvalueBetween = value as NumberBetween;\n\t\t}\n\t\treturn (\n\t\t\t<BetweenControls\n\t\t\t\tvalue={ valueBetween }\n\t\t\t\tonChange={ onChangeBetweenControls }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tstep={ step }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ValidatedNumberControl\n\t\t\trequired={ !! isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tstep={ step }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tBaseControl,\n\t__experimentalNumberControl as NumberControl,\n\tprivateApis,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_BETWEEN } from '../../constants';\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './get-custom-validity';\n\nconst { ValidatedNumberControl } = unlock( privateApis );\n\ntype NumberBetween = [ number | string, number | string ];\n\nfunction toNumberOrEmpty( value?: string ) {\n\tif ( value === '' || value === undefined ) {\n\t\treturn '';\n\t}\n\tconst number = Number( value );\n\treturn Number.isFinite( number ) ? number : '';\n}\n\nfunction BetweenControls( {\n\tvalue,\n\tonChange,\n\thideLabelFromVision,\n\tstep,\n}: {\n\tvalue: NumberBetween;\n\tonChange: ( [ min, max ]: NumberBetween ) => void;\n\thideLabelFromVision?: boolean;\n\tstep: number;\n} ) {\n\tconst [ min = '', max = '' ] = value;\n\n\tconst onChangeMin = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ toNumberOrEmpty( newValue ), max ] ),\n\t\t[ onChange, max ]\n\t);\n\n\tconst onChangeMax = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ min, toNumberOrEmpty( newValue ) ] ),\n\t\t[ onChange, min ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\thelp={ __( 'The max. value must be greater than the min. value.' ) }\n\t\t>\n\t\t\t<Flex direction=\"row\" gap={ 4 }>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Min.' ) }\n\t\t\t\t\tvalue={ min }\n\t\t\t\t\tmax={ max ? Number( max ) - step : undefined }\n\t\t\t\t\tonChange={ onChangeMin }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Max.' ) }\n\t\t\t\t\tvalue={ max }\n\t\t\t\t\tmin={ min ? Number( min ) + step : undefined }\n\t\t\t\t\tonChange={ onChangeMax }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t</Flex>\n\t\t</BaseControl>\n\t);\n}\n\nexport type DataFormValidatedNumberControlProps< Item > =\n\tDataFormControlProps< Item > & {\n\t\t/**\n\t\t * Number of decimals, acceps non-negative integer.\n\t\t */\n\t\tdecimals: number;\n\t};\n\nexport default function ValidatedNumber< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n\tdecimals,\n\tvalidity,\n}: DataFormValidatedNumberControlProps< Item > ) {\n\tconst step = Math.pow( 10, Math.abs( decimals ) * -1 );\n\tconst { label, description, getValue, setValue, isValid } = field;\n\tconst value = getValue( { item: data } ) ?? '';\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\t// Do not convert an empty string or undefined to a number,\n\t\t\t\t\t// otherwise there's a mismatch between the UI control (empty)\n\t\t\t\t\t// and the data relied by onChange (0).\n\t\t\t\t\tvalue: [ '', undefined ].includes( newValue )\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onChangeBetweenControls = useCallback(\n\t\t( newValue: NumberBetween ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tif ( operator === OPERATOR_BETWEEN ) {\n\t\tlet valueBetween: NumberBetween = [ '', '' ];\n\t\tif (\n\t\t\tArray.isArray( value ) &&\n\t\t\tvalue.length === 2 &&\n\t\t\tvalue.every(\n\t\t\t\t( element ) => typeof element === 'number' || element === ''\n\t\t\t)\n\t\t) {\n\t\t\tvalueBetween = value as NumberBetween;\n\t\t}\n\t\treturn (\n\t\t\t<BetweenControls\n\t\t\t\tvalue={ valueBetween }\n\t\t\t\tonChange={ onChangeBetweenControls }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tstep={ step }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ValidatedNumberControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tstep={ step }\n\t\t\tmin={ isValid.min ? isValid.min.constraint : undefined }\n\t\t\tmax={ isValid.max ? isValid.max.constraint : undefined }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/dataform-layouts/panel/modal.js

@@ -39,11 +39,20 @@ function ModalContent({
     }),
     [field]
   );
-  const { validity } = useFormValidity(
-    modalData,
-    fields,
-    form
-  );
+  const fieldsAsFieldType = fields.map((f) => ({
+    ...f,
+    Edit: f.Edit === null ? void 0 : f.Edit,
+    isValid: {
+      required: f.isValid.required?.constraint,
+      elements: f.isValid.elements?.constraint,
+      min: f.isValid.min?.constraint,
+      max: f.isValid.max?.constraint,
+      pattern: f.isValid.pattern?.constraint,
+      minLength: f.isValid.minLength?.constraint,
+      maxLength: f.isValid.maxLength?.constraint
+    }
+  }));
+  const { validity } = useFormValidity(modalData, fieldsAsFieldType, form);
   const onApply = () => {
     onChange(changes);
     onClose();

package/build-module/dataform-layouts/panel/modal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/dataform-layouts/panel/modal.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useState, useMemo } from '@wordpress/element';\nimport { useFocusOnMount } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tField,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tNormalizedField,\n} from '../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport SummaryButton from './summary-button';\nimport useFormValidity from '../../hooks/use-form-validity';\nimport DataFormContext from '../../components/dataform-context';\n\nfunction ModalContent< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tfieldLabel,\n\tonClose,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( data: Partial< Item > ) => void;\n\tonClose: () => void;\n\tfieldLabel: string;\n} ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst [ changes, setChanges ] = useState< Partial< Item > >( {} );\n\tconst modalData = useMemo( () => {\n\t\treturn deepMerge( data, changes, {\n\t\t\tarrayMerge: ( target, source ) => source,\n\t\t} );\n\t}, [ data, changes ] );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children\n\t\t\t\t? field.children\n\t\t\t\t: // If not explicit children return the field id itself.\n\t\t\t\t  [ { id: field.id, layout: DEFAULT_LAYOUT } ],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { validity } = useFormValidity(\n\t\tmodalData,\n\t\tfields as Field< any >[],\n\t\tform\n\t);\n\n\tconst onApply = () => {\n\t\tonChange( changes );\n\t\tonClose();\n\t};\n\n\tconst handleOnChange = ( newValue: Partial< Item > ) => {\n\t\tsetChanges( ( prev ) =>\n\t\t\tdeepMerge( prev, newValue, {\n\t\t\t\tarrayMerge: ( target, source ) => source,\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstInputElement' );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"dataforms-layouts-panel__modal\"\n\t\t\tonRequestClose={ onClose }\n\t\t\tisFullScreen={ false }\n\t\t\ttitle={ fieldLabel }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t<div ref={ focusOnMountRef }>\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ modalData }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tvalidity={ validity }\n\t\t\t\t>\n\t\t\t\t\t{ ( FieldLayout, childField, childFieldValidity ) => (\n\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\tdata={ modalData }\n\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\t\t\thideLabelFromVision={ form.fields.length < 2 }\n\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</DataFormLayout>\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tclassName=\"dataforms-layouts-panel__modal-footer\"\n\t\t\t\tspacing={ 3 }\n\t\t\t>\n\t\t\t\t<Spacer />\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ onApply }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t</Button>\n\t\t\t</HStack>\n\t\t</Modal>\n\t);\n}\n\nfunction PanelModal< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tlabelPosition,\n\tsummaryFields,\n\tfieldDefinition,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( value: any ) => void;\n\tlabelPosition: 'side' | 'top' | 'none';\n\tsummaryFields: NormalizedField< Item >[];\n\tfieldDefinition: NormalizedField< Item >;\n} ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst fieldLabel = !! field.children ? field.label : fieldDefinition?.label;\n\n\treturn (\n\t\t<>\n\t\t\t<SummaryButton\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tdata={ data }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tfieldLabel={ fieldLabel }\n\t\t\t\tdisabled={ fieldDefinition.readOnly === true }\n\t\t\t\tonClick={ () => setIsOpen( true ) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t/>\n\t\t\t{ isOpen && (\n\t\t\t\t<ModalContent\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tfieldLabel={ fieldLabel ?? '' }\n\t\t\t\t\tonClose={ () => setIsOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PanelModal;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useState, useMemo } from '@wordpress/element';\nimport { useFocusOnMount } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tField,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tNormalizedField,\n} from '../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport SummaryButton from './summary-button';\nimport useFormValidity from '../../hooks/use-form-validity';\nimport DataFormContext from '../../components/dataform-context';\n\nfunction ModalContent< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tfieldLabel,\n\tonClose,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( data: Partial< Item > ) => void;\n\tonClose: () => void;\n\tfieldLabel: string;\n} ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst [ changes, setChanges ] = useState< Partial< Item > >( {} );\n\tconst modalData = useMemo( () => {\n\t\treturn deepMerge( data, changes, {\n\t\t\tarrayMerge: ( target, source ) => source,\n\t\t} );\n\t}, [ data, changes ] );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children\n\t\t\t\t? field.children\n\t\t\t\t: // If not explicit children return the field id itself.\n\t\t\t\t  [ { id: field.id, layout: DEFAULT_LAYOUT } ],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst fieldsAsFieldType: Field< Item >[] = fields.map( ( f ) => ( {\n\t\t...f,\n\t\tEdit: f.Edit === null ? undefined : f.Edit,\n\t\tisValid: {\n\t\t\trequired: f.isValid.required?.constraint,\n\t\t\telements: f.isValid.elements?.constraint,\n\t\t\tmin: f.isValid.min?.constraint,\n\t\t\tmax: f.isValid.max?.constraint,\n\t\t\tpattern: f.isValid.pattern?.constraint,\n\t\t\tminLength: f.isValid.minLength?.constraint,\n\t\t\tmaxLength: f.isValid.maxLength?.constraint,\n\t\t},\n\t} ) );\n\tconst { validity } = useFormValidity( modalData, fieldsAsFieldType, form );\n\n\tconst onApply = () => {\n\t\tonChange( changes );\n\t\tonClose();\n\t};\n\n\tconst handleOnChange = ( newValue: Partial< Item > ) => {\n\t\tsetChanges( ( prev ) =>\n\t\t\tdeepMerge( prev, newValue, {\n\t\t\t\tarrayMerge: ( target, source ) => source,\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstInputElement' );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"dataforms-layouts-panel__modal\"\n\t\t\tonRequestClose={ onClose }\n\t\t\tisFullScreen={ false }\n\t\t\ttitle={ fieldLabel }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t<div ref={ focusOnMountRef }>\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ modalData }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tvalidity={ validity }\n\t\t\t\t>\n\t\t\t\t\t{ ( FieldLayout, childField, childFieldValidity ) => (\n\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\tdata={ modalData }\n\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\t\t\thideLabelFromVision={ form.fields.length < 2 }\n\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</DataFormLayout>\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tclassName=\"dataforms-layouts-panel__modal-footer\"\n\t\t\t\tspacing={ 3 }\n\t\t\t>\n\t\t\t\t<Spacer />\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ onApply }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t</Button>\n\t\t\t</HStack>\n\t\t</Modal>\n\t);\n}\n\nfunction PanelModal< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tlabelPosition,\n\tsummaryFields,\n\tfieldDefinition,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( value: any ) => void;\n\tlabelPosition: 'side' | 'top' | 'none';\n\tsummaryFields: NormalizedField< Item >[];\n\tfieldDefinition: NormalizedField< Item >;\n} ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst fieldLabel = !! field.children ? field.label : fieldDefinition?.label;\n\n\treturn (\n\t\t<>\n\t\t\t<SummaryButton\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tdata={ data }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tfieldLabel={ fieldLabel }\n\t\t\t\tdisabled={ fieldDefinition.readOnly === true }\n\t\t\t\tonClick={ () => setIsOpen( true ) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t/>\n\t\t\t{ isOpen && (\n\t\t\t\t<ModalContent\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tfieldLabel={ fieldLabel ?? '' }\n\t\t\t\t\tonClose={ () => setIsOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PanelModal;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/dataviews-layouts/grid/composite-grid.js

@@ -12,7 +12,7 @@ import {
 import { __, sprintf } from "@wordpress/i18n";
 import { useInstanceId } from "@wordpress/compose";
 import { isAppleOS } from "@wordpress/keycodes";
-import { useContext } from "@wordpress/element";
+import { useContext, forwardRef } from "@wordpress/element";
 import { unlock } from "../../lock-unlock";
 import ItemActions from "../../components/dataviews-item-actions";
 import DataViewsSelectionCheckbox from "../../components/dataviews-selection-checkbox";
@@ -32,7 +32,7 @@ function chunk(array, size) {
   }
   return chunks;
 }
-function GridItem({
+var GridItem = forwardRef(function GridItem2({
   view,
   selection,
   onChangeSelection,
@@ -48,12 +48,13 @@ function GridItem({
   regularFields,
   badgeFields,
   hasBulkActions,
-  config
-}) {
+  config,
+  ...props
+}, ref) {
   const { showTitle = true, showMedia = true, showDescription = true } = view;
   const hasBulkAction = useHasAPossibleBulkAction(actions, item);
   const id = getItemId(item);
-  const instanceId = useInstanceId(GridItem);
+  const instanceId = useInstanceId(GridItem2);
   const isSelected = selection.includes(id);
   const renderedMediaField = mediaField?.render ? /* @__PURE__ */ jsx(
     mediaField.render,
@@ -84,11 +85,19 @@ function GridItem({
   return /* @__PURE__ */ jsxs(
     VStack,
     {
+      ...props,
+      ref,
       spacing: 0,
-      className: clsx("dataviews-view-grid__card", {
-        "is-selected": hasBulkAction && isSelected
-      }),
+      className: clsx(
+        props.className,
+        "dataviews-view-grid__row__gridcell",
+        "dataviews-view-grid__card",
+        {
+          "is-selected": hasBulkAction && isSelected
+        }
+      ),
       onClickCapture: (event) => {
+        props.onClickCapture?.(event);
         if (isAppleOS() ? event.metaKey : event.ctrlKey) {
           event.stopPropagation();
           event.preventDefault();
@@ -228,10 +237,9 @@ function GridItem({
           )
         ] })
       ]
-    },
-    id
+    }
   );
-}
+});
 function CompositeGrid({
   data,
   isInfiniteScroll,
@@ -307,37 +315,31 @@ function CompositeGrid({
             return /* @__PURE__ */ jsx(
               Composite.Item,
               {
-                render: /* @__PURE__ */ jsx(
-                  "div",
+                render: (props) => /* @__PURE__ */ jsx(
+                  GridItem,
                   {
-                    id: getItemId(item),
-                    className: "dataviews-view-grid__row__gridcell",
+                    ...props,
                     role: isInfiniteScroll ? "article" : "gridcell",
                     "aria-setsize": isInfiniteScroll ? paginationInfo.totalItems : void 0,
                     "aria-posinset": isInfiniteScroll ? index + 1 : void 0,
-                    children: /* @__PURE__ */ jsx(
-                      GridItem,
-                      {
-                        view,
-                        selection,
-                        onChangeSelection,
-                        onClickItem,
-                        isItemClickable,
-                        renderItemLink,
-                        getItemId,
-                        item,
-                        actions,
-                        mediaField,
-                        titleField,
-                        descriptionField,
-                        regularFields,
-                        badgeFields,
-                        hasBulkActions,
-                        config: {
-                          sizes: size
-                        }
-                      }
-                    )
+                    view,
+                    selection,
+                    onChangeSelection,
+                    onClickItem,
+                    isItemClickable,
+                    renderItemLink,
+                    getItemId,
+                    item,
+                    actions,
+                    mediaField,
+                    titleField,
+                    descriptionField,
+                    regularFields,
+                    badgeFields,
+                    hasBulkActions,
+                    config: {
+                      sizes: size
+                    }
                   }
                 )
               },