@wordpress/dataviews 7.0.1-next.0f6f9d12c.0 → 7.0.1-next.f34ab90e9.0

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,17 +24,24 @@ export default function Boolean({
     getValue,
     label
   } = field;
+  const [customValidity, setCustomValidity] = useState(undefined);
   return /*#__PURE__*/_jsx(ValidatedToggleControl, {
     required: !!field.isValid.required,
-    customValidator: newValue => {
-      if (field.isValid?.custom) {
-        return field.isValid.custom({
-          ...data,
-          [id]: newValue
-        }, field);
+    onValidate: newValue => {
+      const message = field.isValid?.custom?.({
+        ...data,
+        [id]: newValue
+      }, field);
+      if (message) {
+        setCustomValidity({
+          type: 'invalid',
+          message
+        });
+        return;
       }
-      return null;
+      setCustomValidity(undefined);
     },
+    customValidity: customValidity,
     hidden: hideLabelFromVision,
     __nextHasNoMarginBottom: true,
     label: label,

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

@@ -1 +1 @@
-{"version":3,"names":["privateApis","unlock","jsx","_jsx","ValidatedToggleControl","Boolean","field","onChange","data","hideLabelFromVision","id","getValue","label","required","isValid","customValidator","newValue","custom","hidden","__nextHasNoMarginBottom","checked","item"],"sources":["@wordpress/dataviews/src/dataform-controls/boolean.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\n\nconst { ValidatedToggleControl } = unlock( privateApis );\n\nexport default function Boolean< Item >( {\n\tfield,\n\tonChange,\n\tdata,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { id, getValue, label } = field;\n\n\treturn (\n\t\t<ValidatedToggleControl\n\t\t\trequired={ !! field.isValid.required }\n\t\t\tcustomValidator={ ( newValue: any ) => {\n\t\t\t\tif ( field.isValid?.custom ) {\n\t\t\t\t\treturn field.isValid.custom(\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t...data,\n\t\t\t\t\t\t\t[ id ]: newValue,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tfield\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t} }\n\t\t\thidden={ hideLabelFromVision }\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\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":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,uBAAuB;;AAEnD;AACA;AACA;;AAEA,SAASC,MAAM,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,MAAM;EAAEC;AAAuB,CAAC,GAAGH,MAAM,CAAED,WAAY,CAAC;AAExD,eAAe,SAASK,OAAOA,CAAU;EACxCC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGN,KAAK;EAErC,oBACCH,IAAA,CAACC,sBAAsB;IACtBS,QAAQ,EAAG,CAAC,CAAEP,KAAK,CAACQ,OAAO,CAACD,QAAU;IACtCE,eAAe,EAAKC,QAAa,IAAM;MACtC,IAAKV,KAAK,CAACQ,OAAO,EAAEG,MAAM,EAAG;QAC5B,OAAOX,KAAK,CAACQ,OAAO,CAACG,MAAM,CAC1B;UACC,GAAGT,IAAI;UACP,CAAEE,EAAE,GAAIM;QACT,CAAC,EACDV,KACD,CAAC;MACF;MAEA,OAAO,IAAI;IACZ,CAAG;IACHY,MAAM,EAAGT,mBAAqB;IAC9BU,uBAAuB;IACvBP,KAAK,EAAGA,KAAO;IACfQ,OAAO,EAAGT,QAAQ,CAAE;MAAEU,IAAI,EAAEb;IAAK,CAAE,CAAG;IACtCD,QAAQ,EAAGA,CAAA,KACVA,QAAQ,CAAE;MAAE,CAAEG,EAAE,GAAI,CAAEC,QAAQ,CAAE;QAAEU,IAAI,EAAEb;MAAK,CAAE;IAAE,CAAE;EACnD,CACD,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["privateApis","useState","unlock","jsx","_jsx","ValidatedToggleControl","Boolean","field","onChange","data","hideLabelFromVision","id","getValue","label","customValidity","setCustomValidity","undefined","required","isValid","onValidate","newValue","message","custom","type","hidden","__nextHasNoMarginBottom","checked","item"],"sources":["@wordpress/dataviews/src/dataform-controls/boolean.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 { ValidatedToggleControl } = unlock( privateApis );\n\nexport default function Boolean< Item >( {\n\tfield,\n\tonChange,\n\tdata,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { id, getValue, label } = field;\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedToggleControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\treturn (\n\t\t<ValidatedToggleControl\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\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\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":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,uBAAuB;AACnD,SAASC,QAAQ,QAAQ,oBAAoB;;AAE7C;AACA;AACA;;AAEA,SAASC,MAAM,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,MAAM;EAAEC;AAAuB,CAAC,GAAGH,MAAM,CAAEF,WAAY,CAAC;AAExD,eAAe,SAASM,OAAOA,CAAU;EACxCC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGN,KAAK;EACrC,MAAM,CAAEO,cAAc,EAAEC,iBAAiB,CAAE,GAC1Cd,QAAQ,CAILe,SAAU,CAAC;EAEf,oBACCZ,IAAA,CAACC,sBAAsB;IACtBY,QAAQ,EAAG,CAAC,CAAEV,KAAK,CAACW,OAAO,CAACD,QAAU;IACtCE,UAAU,EAAKC,QAAa,IAAM;MACjC,MAAMC,OAAO,GAAGd,KAAK,CAACW,OAAO,EAAEI,MAAM,GACpC;QACC,GAAGb,IAAI;QACP,CAAEE,EAAE,GAAIS;MACT,CAAC,EACDb,KACD,CAAC;MAED,IAAKc,OAAO,EAAG;QACdN,iBAAiB,CAAE;UAClBQ,IAAI,EAAE,SAAS;UACfF;QACD,CAAE,CAAC;QACH;MACD;MAEAN,iBAAiB,CAAEC,SAAU,CAAC;IAC/B,CAAG;IACHF,cAAc,EAAGA,cAAgB;IACjCU,MAAM,EAAGd,mBAAqB;IAC9Be,uBAAuB;IACvBZ,KAAK,EAAGA,KAAO;IACfa,OAAO,EAAGd,QAAQ,CAAE;MAAEe,IAAI,EAAElB;IAAK,CAAE,CAAG;IACtCD,QAAQ,EAAGA,CAAA,KACVA,QAAQ,CAAE;MAAE,CAAEG,EAAE,GAAI,CAAEC,QAAQ,CAAE;QAAEe,IAAI,EAAElB;MAAK,CAAE;IAAE,CAAE;EACnD,CACD,CAAC;AAEJ","ignoreList":[]}

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,20 +28,27 @@ export default function Email({
   const value = field.getValue({
     item: data
   });
+  const [customValidity, setCustomValidity] = useState(undefined);
   const onChangeControl = useCallback(newValue => onChange({
     [id]: newValue
   }), [id, onChange]);
   return /*#__PURE__*/_jsx(ValidatedTextControl, {
     required: !!field.isValid?.required,
-    customValidator: newValue => {
-      if (field.isValid?.custom) {
-        return field.isValid.custom({
-          ...data,
-          [id]: newValue
-        }, field);
+    onValidate: newValue => {
+      const message = field.isValid?.custom?.({
+        ...data,
+        [id]: newValue
+      }, field);
+      if (message) {
+        setCustomValidity({
+          type: 'invalid',
+          message
+        });
+        return;
       }
-      return null;
+      setCustomValidity(undefined);
     },
+    customValidity: customValidity,
     type: "email",
     label: label,
     placeholder: placeholder,

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

@@ -1 +1 @@
-{"version":3,"names":["privateApis","useCallback","unlock","jsx","_jsx","ValidatedTextControl","Email","data","field","onChange","hideLabelFromVision","id","label","placeholder","description","value","getValue","item","onChangeControl","newValue","required","isValid","customValidator","custom","type","help","__next40pxDefaultSize","__nextHasNoMarginBottom"],"sources":["@wordpress/dataviews/src/dataform-controls/email.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';\n\nconst { ValidatedTextControl } = unlock( privateApis );\n\nexport default function Email< 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\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: newValue,\n\t\t\t} ),\n\t\t[ id, onChange ]\n\t);\n\n\treturn (\n\t\t<ValidatedTextControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidator={ ( newValue: any ) => {\n\t\t\t\tif ( field.isValid?.custom ) {\n\t\t\t\t\treturn field.isValid.custom(\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t...data,\n\t\t\t\t\t\t\t[ id ]: newValue,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tfield\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t} }\n\t\t\ttype=\"email\"\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\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,uBAAuB;AACnD,SAASC,WAAW,QAAQ,oBAAoB;;AAEhD;AACA;AACA;;AAEA,SAASC,MAAM,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,MAAM;EAAEC;AAAqB,CAAC,GAAGH,MAAM,CAAEF,WAAY,CAAC;AAEtD,eAAe,SAASM,KAAKA,CAAU;EACtCC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC,KAAK;IAAEC,WAAW;IAAEC;EAAY,CAAC,GAAGN,KAAK;EACrD,MAAMO,KAAK,GAAGP,KAAK,CAACQ,QAAQ,CAAE;IAAEC,IAAI,EAAEV;EAAK,CAAE,CAAC;EAE9C,MAAMW,eAAe,GAAGjB,WAAW,CAChCkB,QAAgB,IACjBV,QAAQ,CAAE;IACT,CAAEE,EAAE,GAAIQ;EACT,CAAE,CAAC,EACJ,CAAER,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,oBACCL,IAAA,CAACC,oBAAoB;IACpBe,QAAQ,EAAG,CAAC,CAAEZ,KAAK,CAACa,OAAO,EAAED,QAAU;IACvCE,eAAe,EAAKH,QAAa,IAAM;MACtC,IAAKX,KAAK,CAACa,OAAO,EAAEE,MAAM,EAAG;QAC5B,OAAOf,KAAK,CAACa,OAAO,CAACE,MAAM,CAC1B;UACC,GAAGhB,IAAI;UACP,CAAEI,EAAE,GAAIQ;QACT,CAAC,EACDX,KACD,CAAC;MACF;MAEA,OAAO,IAAI;IACZ,CAAG;IACHgB,IAAI,EAAC,OAAO;IACZZ,KAAK,EAAGA,KAAO;IACfC,WAAW,EAAGA,WAAa;IAC3BE,KAAK,EAAGA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAI;IACrBU,IAAI,EAAGX,WAAa;IACpBL,QAAQ,EAAGS,eAAiB;IAC5BQ,qBAAqB;IACrBC,uBAAuB;IACvBjB,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["privateApis","useCallback","useState","unlock","jsx","_jsx","ValidatedTextControl","Email","data","field","onChange","hideLabelFromVision","id","label","placeholder","description","value","getValue","item","customValidity","setCustomValidity","undefined","onChangeControl","newValue","required","isValid","onValidate","message","custom","type","help","__next40pxDefaultSize","__nextHasNoMarginBottom"],"sources":["@wordpress/dataviews/src/dataform-controls/email.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis } 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 { ValidatedTextControl } = unlock( privateApis );\n\nexport default function Email< 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 ValidatedTextControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: newValue,\n\t\t\t} ),\n\t\t[ id, onChange ]\n\t);\n\n\treturn (\n\t\t<ValidatedTextControl\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\ttype=\"email\"\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\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,uBAAuB;AACnD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,oBAAoB;;AAE1D;AACA;AACA;;AAEA,SAASC,MAAM,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,MAAM;EAAEC;AAAqB,CAAC,GAAGH,MAAM,CAAEH,WAAY,CAAC;AAEtD,eAAe,SAASO,KAAKA,CAAU;EACtCC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC,KAAK;IAAEC,WAAW;IAAEC;EAAY,CAAC,GAAGN,KAAK;EACrD,MAAMO,KAAK,GAAGP,KAAK,CAACQ,QAAQ,CAAE;IAAEC,IAAI,EAAEV;EAAK,CAAE,CAAC;EAC9C,MAAM,CAAEW,cAAc,EAAEC,iBAAiB,CAAE,GAC1ClB,QAAQ,CAILmB,SAAU,CAAC;EAEf,MAAMC,eAAe,GAAGrB,WAAW,CAChCsB,QAAgB,IACjBb,QAAQ,CAAE;IACT,CAAEE,EAAE,GAAIW;EACT,CAAE,CAAC,EACJ,CAAEX,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,oBACCL,IAAA,CAACC,oBAAoB;IACpBkB,QAAQ,EAAG,CAAC,CAAEf,KAAK,CAACgB,OAAO,EAAED,QAAU;IACvCE,UAAU,EAAKH,QAAa,IAAM;MACjC,MAAMI,OAAO,GAAGlB,KAAK,CAACgB,OAAO,EAAEG,MAAM,GACpC;QACC,GAAGpB,IAAI;QACP,CAAEI,EAAE,GAAIW;MACT,CAAC,EACDd,KACD,CAAC;MAED,IAAKkB,OAAO,EAAG;QACdP,iBAAiB,CAAE;UAClBS,IAAI,EAAE,SAAS;UACfF;QACD,CAAE,CAAC;QACH;MACD;MAEAP,iBAAiB,CAAEC,SAAU,CAAC;IAC/B,CAAG;IACHF,cAAc,EAAGA,cAAgB;IACjCU,IAAI,EAAC,OAAO;IACZhB,KAAK,EAAGA,KAAO;IACfC,WAAW,EAAGA,WAAa;IAC3BE,KAAK,EAAGA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAI;IACrBc,IAAI,EAAGf,WAAa;IACpBL,QAAQ,EAAGY,eAAiB;IAC5BS,qBAAqB;IACrBC,uBAAuB;IACvBrB,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Flex, BaseControl, __experimentalNumberControl as NumberControl, privateApis } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -67,6 +67,7 @@ export default function Integer({
   const value = (_field$getValue = field.getValue({
     item: data
   })) !== null && _field$getValue !== void 0 ? _field$getValue : '';
+  const [customValidity, setCustomValidity] = useState(undefined);
   const onChangeControl = useCallback(newValue => {
     onChange({
       // Do not convert an empty string or undefined to a number,
@@ -85,15 +86,21 @@ export default function Integer({
   }
   return /*#__PURE__*/_jsx(ValidatedNumberControl, {
     required: !!field.isValid?.required,
-    customValidator: newValue => {
-      if (field.isValid?.custom) {
-        return field.isValid.custom({
-          ...data,
-          [id]: [undefined, '', null].includes(newValue) ? undefined : Number(newValue)
-        }, field);
+    onValidate: newValue => {
+      const message = field.isValid?.custom?.({
+        ...data,
+        [id]: [undefined, '', null].includes(newValue) ? undefined : Number(newValue)
+      }, field);
+      if (message) {
+        setCustomValidity({
+          type: 'invalid',
+          message
+        });
+        return;
       }
-      return null;
+      setCustomValidity(undefined);
     },
+    customValidity: customValidity,
     label: label,
     help: description,
     value: value,

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

@@ -1 +1 @@
-{"version":3,"names":["Flex","BaseControl","__experimentalNumberControl","NumberControl","privateApis","useCallback","__","OPERATOR_BETWEEN","unlock","jsx","_jsx","jsxs","_jsxs","ValidatedNumberControl","BetweenControls","id","value","onChange","hideLabelFromVision","min","max","Array","isArray","onChangeMin","newValue","Number","onChangeMax","__nextHasNoMarginBottom","help","children","direction","gap","label","undefined","__next40pxDefaultSize","Integer","data","field","operator","_field$getValue","description","getValue","item","onChangeControl","includes","required","isValid","customValidator","custom"],"sources":["@wordpress/dataviews/src/dataform-controls/integer.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';\n\nconst { ValidatedNumberControl } = unlock( privateApis );\n\nfunction BetweenControls< Item >( {\n\tid,\n\tvalue,\n\tonChange,\n\thideLabelFromVision,\n}: {\n\tid: string;\n\tvalue: any;\n\tonChange: DataFormControlProps< Item >[ 'onChange' ];\n\thideLabelFromVision?: boolean;\n} ) {\n\tconst [ min = '', max = '' ] = Array.isArray( value ) ? value : [];\n\n\tconst onChangeMin = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: [ Number( newValue ), max ],\n\t\t\t} ),\n\t\t[ id, onChange, max ]\n\t);\n\n\tconst onChangeMax = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: [ min, Number( newValue ) ],\n\t\t\t} ),\n\t\t[ id, 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 ) - 1 : 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/>\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 ) + 1 : 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/>\n\t\t\t</Flex>\n\t\t</BaseControl>\n\t);\n}\n\nexport default function Integer< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label, description } = field;\n\tconst value = field.getValue( { item: data } ) ?? '';\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange( {\n\t\t\t\t// Do not convert an empty string or undefined to a number,\n\t\t\t\t// otherwise there's a mismatch between the UI control (empty)\n\t\t\t\t// and the data relied by onChange (0).\n\t\t\t\t[ id ]: [ '', undefined ].includes( newValue )\n\t\t\t\t\t? undefined\n\t\t\t\t\t: Number( newValue ),\n\t\t\t} );\n\t\t},\n\t\t[ id, onChange ]\n\t);\n\n\tif ( operator === OPERATOR_BETWEEN ) {\n\t\treturn (\n\t\t\t<BetweenControls\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ValidatedNumberControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidator={ ( newValue: any ) => {\n\t\t\t\tif ( field.isValid?.custom ) {\n\t\t\t\t\treturn field.isValid.custom(\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t...data,\n\t\t\t\t\t\t\t[ id ]: [ undefined, '', null ].includes( newValue )\n\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t\t\t},\n\t\t\t\t\t\tfield\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t} }\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/>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Flex","BaseControl","__experimentalNumberControl","NumberControl","privateApis","useCallback","useState","__","OPERATOR_BETWEEN","unlock","jsx","_jsx","jsxs","_jsxs","ValidatedNumberControl","BetweenControls","id","value","onChange","hideLabelFromVision","min","max","Array","isArray","onChangeMin","newValue","Number","onChangeMax","__nextHasNoMarginBottom","help","children","direction","gap","label","undefined","__next40pxDefaultSize","Integer","data","field","operator","_field$getValue","description","getValue","item","customValidity","setCustomValidity","onChangeControl","includes","required","isValid","onValidate","message","custom","type"],"sources":["@wordpress/dataviews/src/dataform-controls/integer.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tBaseControl,\n\t__experimentalNumberControl as NumberControl,\n\tprivateApis,\n} from '@wordpress/components';\nimport { useCallback, useState } 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';\n\nconst { ValidatedNumberControl } = unlock( privateApis );\n\nfunction BetweenControls< Item >( {\n\tid,\n\tvalue,\n\tonChange,\n\thideLabelFromVision,\n}: {\n\tid: string;\n\tvalue: any;\n\tonChange: DataFormControlProps< Item >[ 'onChange' ];\n\thideLabelFromVision?: boolean;\n} ) {\n\tconst [ min = '', max = '' ] = Array.isArray( value ) ? value : [];\n\n\tconst onChangeMin = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: [ Number( newValue ), max ],\n\t\t\t} ),\n\t\t[ id, onChange, max ]\n\t);\n\n\tconst onChangeMax = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: [ min, Number( newValue ) ],\n\t\t\t} ),\n\t\t[ id, 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 ) - 1 : 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/>\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 ) + 1 : 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/>\n\t\t\t</Flex>\n\t\t</BaseControl>\n\t);\n}\n\nexport default function Integer< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label, 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 ValidatedNumberControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange( {\n\t\t\t\t// Do not convert an empty string or undefined to a number,\n\t\t\t\t// otherwise there's a mismatch between the UI control (empty)\n\t\t\t\t// and the data relied by onChange (0).\n\t\t\t\t[ id ]: [ '', undefined ].includes( newValue )\n\t\t\t\t\t? undefined\n\t\t\t\t\t: Number( newValue ),\n\t\t\t} );\n\t\t},\n\t\t[ id, onChange ]\n\t);\n\n\tif ( operator === OPERATOR_BETWEEN ) {\n\t\treturn (\n\t\t\t<BetweenControls\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ValidatedNumberControl\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 ]: [ undefined, '', null ].includes( newValue )\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: Number( 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\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/>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,20 +28,27 @@ export default function Text({
   const value = field.getValue({
     item: data
   });
+  const [customValidity, setCustomValidity] = useState(undefined);
   const onChangeControl = useCallback(newValue => onChange({
     [id]: newValue
   }), [id, onChange]);
   return /*#__PURE__*/_jsx(ValidatedTextControl, {
     required: !!field.isValid?.required,
-    customValidator: newValue => {
-      if (field.isValid?.custom) {
-        return field.isValid.custom({
-          ...data,
-          [id]: newValue
-        }, field);
+    onValidate: newValue => {
+      const message = field.isValid?.custom?.({
+        ...data,
+        [id]: newValue
+      }, field);
+      if (message) {
+        setCustomValidity({
+          type: 'invalid',
+          message
+        });
+        return;
       }
-      return null;
+      setCustomValidity(undefined);
     },
+    customValidity: customValidity,
     label: label,
     placeholder: placeholder,
     value: value !== null && value !== void 0 ? value : '',

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

@@ -1 +1 @@
-{"version":3,"names":["privateApis","useCallback","unlock","jsx","_jsx","ValidatedTextControl","Text","data","field","onChange","hideLabelFromVision","id","label","placeholder","description","value","getValue","item","onChangeControl","newValue","required","isValid","customValidator","custom","help","__next40pxDefaultSize","__nextHasNoMarginBottom"],"sources":["@wordpress/dataviews/src/dataform-controls/text.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';\n\nconst { ValidatedTextControl } = unlock( privateApis );\n\nexport default function Text< 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\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: newValue,\n\t\t\t} ),\n\t\t[ id, onChange ]\n\t);\n\n\treturn (\n\t\t<ValidatedTextControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidator={ ( newValue: any ) => {\n\t\t\t\tif ( field.isValid?.custom ) {\n\t\t\t\t\treturn field.isValid.custom(\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t...data,\n\t\t\t\t\t\t\t[ id ]: newValue,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tfield\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t} }\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\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,uBAAuB;AACnD,SAASC,WAAW,QAAQ,oBAAoB;;AAEhD;AACA;AACA;;AAEA,SAASC,MAAM,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,MAAM;EAAEC;AAAqB,CAAC,GAAGH,MAAM,CAAEF,WAAY,CAAC;AAEtD,eAAe,SAASM,IAAIA,CAAU;EACrCC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC,KAAK;IAAEC,WAAW;IAAEC;EAAY,CAAC,GAAGN,KAAK;EACrD,MAAMO,KAAK,GAAGP,KAAK,CAACQ,QAAQ,CAAE;IAAEC,IAAI,EAAEV;EAAK,CAAE,CAAC;EAE9C,MAAMW,eAAe,GAAGjB,WAAW,CAChCkB,QAAgB,IACjBV,QAAQ,CAAE;IACT,CAAEE,EAAE,GAAIQ;EACT,CAAE,CAAC,EACJ,CAAER,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,oBACCL,IAAA,CAACC,oBAAoB;IACpBe,QAAQ,EAAG,CAAC,CAAEZ,KAAK,CAACa,OAAO,EAAED,QAAU;IACvCE,eAAe,EAAKH,QAAa,IAAM;MACtC,IAAKX,KAAK,CAACa,OAAO,EAAEE,MAAM,EAAG;QAC5B,OAAOf,KAAK,CAACa,OAAO,CAACE,MAAM,CAC1B;UACC,GAAGhB,IAAI;UACP,CAAEI,EAAE,GAAIQ;QACT,CAAC,EACDX,KACD,CAAC;MACF;MAEA,OAAO,IAAI;IACZ,CAAG;IACHI,KAAK,EAAGA,KAAO;IACfC,WAAW,EAAGA,WAAa;IAC3BE,KAAK,EAAGA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAI;IACrBS,IAAI,EAAGV,WAAa;IACpBL,QAAQ,EAAGS,eAAiB;IAC5BO,qBAAqB;IACrBC,uBAAuB;IACvBhB,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["privateApis","useCallback","useState","unlock","jsx","_jsx","ValidatedTextControl","Text","data","field","onChange","hideLabelFromVision","id","label","placeholder","description","value","getValue","item","customValidity","setCustomValidity","undefined","onChangeControl","newValue","required","isValid","onValidate","message","custom","type","help","__next40pxDefaultSize","__nextHasNoMarginBottom"],"sources":["@wordpress/dataviews/src/dataform-controls/text.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis } 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 { ValidatedTextControl } = unlock( privateApis );\n\nexport default function Text< 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 ValidatedTextControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: newValue,\n\t\t\t} ),\n\t\t[ id, onChange ]\n\t);\n\n\treturn (\n\t\t<ValidatedTextControl\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={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,uBAAuB;AACnD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,oBAAoB;;AAE1D;AACA;AACA;;AAEA,SAASC,MAAM,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,MAAM;EAAEC;AAAqB,CAAC,GAAGH,MAAM,CAAEH,WAAY,CAAC;AAEtD,eAAe,SAASO,IAAIA,CAAU;EACrCC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC,KAAK;IAAEC,WAAW;IAAEC;EAAY,CAAC,GAAGN,KAAK;EACrD,MAAMO,KAAK,GAAGP,KAAK,CAACQ,QAAQ,CAAE;IAAEC,IAAI,EAAEV;EAAK,CAAE,CAAC;EAC9C,MAAM,CAAEW,cAAc,EAAEC,iBAAiB,CAAE,GAC1ClB,QAAQ,CAILmB,SAAU,CAAC;EAEf,MAAMC,eAAe,GAAGrB,WAAW,CAChCsB,QAAgB,IACjBb,QAAQ,CAAE;IACT,CAAEE,EAAE,GAAIW;EACT,CAAE,CAAC,EACJ,CAAEX,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,oBACCL,IAAA,CAACC,oBAAoB;IACpBkB,QAAQ,EAAG,CAAC,CAAEf,KAAK,CAACgB,OAAO,EAAED,QAAU;IACvCE,UAAU,EAAKH,QAAa,IAAM;MACjC,MAAMI,OAAO,GAAGlB,KAAK,CAACgB,OAAO,EAAEG,MAAM,GACpC;QACC,GAAGpB,IAAI;QACP,CAAEI,EAAE,GAAIW;MACT,CAAC,EACDd,KACD,CAAC;MAED,IAAKkB,OAAO,EAAG;QACdP,iBAAiB,CAAE;UAClBS,IAAI,EAAE,SAAS;UACfF;QACD,CAAE,CAAC;QACH;MACD;MAEAP,iBAAiB,CAAEC,SAAU,CAAC;IAC/B,CAAG;IACHF,cAAc,EAAGA,cAAgB;IACjCN,KAAK,EAAGA,KAAO;IACfC,WAAW,EAAGA,WAAa;IAC3BE,KAAK,EAAGA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAI;IACrBc,IAAI,EAAGf,WAAa;IACpBL,QAAQ,EAAGY,eAAiB;IAC5BS,qBAAqB;IACrBC,uBAAuB;IACvBrB,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}

package/build-module/dataforms-layouts/panel/dropdown.js

@@ -0,0 +1,118 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack, __experimentalHStack as HStack, __experimentalHeading as Heading, __experimentalSpacer as Spacer, Dropdown, Button } from '@wordpress/components';
+import { sprintf, __, _x } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+
+import { DataFormLayout } from '../data-form-layout';
+import { isCombinedField } from '../is-combined-field';
+import { DEFAULT_LAYOUT } from '../../normalize-form-fields';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function DropdownHeader({
+  title,
+  onClose
+}) {
+  return /*#__PURE__*/_jsx(VStack, {
+    className: "dataforms-layouts-panel__dropdown-header",
+    spacing: 4,
+    children: /*#__PURE__*/_jsxs(HStack, {
+      alignment: "center",
+      children: [title && /*#__PURE__*/_jsx(Heading, {
+        level: 2,
+        size: 13,
+        children: title
+      }), /*#__PURE__*/_jsx(Spacer, {}), onClose && /*#__PURE__*/_jsx(Button, {
+        label: __('Close'),
+        icon: closeSmall,
+        onClick: onClose,
+        size: "small"
+      })]
+    })
+  });
+}
+function PanelDropdown({
+  fieldDefinition,
+  popoverAnchor,
+  labelPosition = 'side',
+  data,
+  onChange,
+  field
+}) {
+  const fieldLabel = isCombinedField(field) ? field.label : fieldDefinition?.label;
+  const form = useMemo(() => ({
+    layout: DEFAULT_LAYOUT,
+    fields: isCombinedField(field) ? field.children :
+    // If not explicit children return the field id itself.
+    [{
+      id: field.id
+    }]
+  }), [field]);
+
+  // Memoize popoverProps to avoid returning a new object every time.
+  const popoverProps = useMemo(() => ({
+    // Anchor the popover to the middle of the entire row so that it doesn't
+    // move around when the label changes.
+    anchor: popoverAnchor,
+    placement: 'left-start',
+    offset: 36,
+    shift: true
+  }), [popoverAnchor]);
+  return /*#__PURE__*/_jsx(Dropdown, {
+    contentClassName: "dataforms-layouts-panel__field-dropdown",
+    popoverProps: popoverProps,
+    focusOnMount: true,
+    toggleProps: {
+      size: 'compact',
+      variant: 'tertiary',
+      tooltipPosition: 'middle left'
+    },
+    renderToggle: ({
+      isOpen,
+      onToggle
+    }) => /*#__PURE__*/_jsx(Button, {
+      className: "dataforms-layouts-panel__field-control",
+      size: "compact",
+      variant: ['none', 'top'].includes(labelPosition) ? 'link' : 'tertiary',
+      "aria-expanded": isOpen,
+      "aria-label": sprintf(
+      // translators: %s: Field name.
+      _x('Edit %s', 'field'), fieldLabel || ''),
+      onClick: onToggle,
+      disabled: fieldDefinition.readOnly === true,
+      accessibleWhenDisabled: true,
+      children: /*#__PURE__*/_jsx(fieldDefinition.render, {
+        item: data,
+        field: fieldDefinition
+      })
+    }),
+    renderContent: ({
+      onClose
+    }) => /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(DropdownHeader, {
+        title: fieldLabel,
+        onClose: onClose
+      }), /*#__PURE__*/_jsx(DataFormLayout, {
+        data: data,
+        form: form,
+        onChange: onChange,
+        children: (FieldLayout, nestedField) => {
+          var _form$fields;
+          return /*#__PURE__*/_jsx(FieldLayout, {
+            data: data,
+            field: nestedField,
+            onChange: onChange,
+            hideLabelFromVision: ((_form$fields = form?.fields) !== null && _form$fields !== void 0 ? _form$fields : []).length < 2
+          }, nestedField.id);
+        }
+      })]
+    })
+  });
+}
+export default PanelDropdown;
+//# sourceMappingURL=dropdown.js.map

package/build-module/dataforms-layouts/panel/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalVStack","VStack","__experimentalHStack","HStack","__experimentalHeading","Heading","__experimentalSpacer","Spacer","Dropdown","Button","sprintf","__","_x","useMemo","closeSmall","DataFormLayout","isCombinedField","DEFAULT_LAYOUT","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DropdownHeader","title","onClose","className","spacing","children","alignment","level","size","label","icon","onClick","PanelDropdown","fieldDefinition","popoverAnchor","labelPosition","data","onChange","field","fieldLabel","form","layout","fields","id","popoverProps","anchor","placement","offset","shift","contentClassName","focusOnMount","toggleProps","variant","tooltipPosition","renderToggle","isOpen","onToggle","includes","disabled","readOnly","accessibleWhenDisabled","render","item","renderContent","FieldLayout","nestedField","_form$fields","hideLabelFromVision","length"],"sources":["@wordpress/dataviews/src/dataforms-layouts/panel/dropdown.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\t__experimentalSpacer as Spacer,\n\tDropdown,\n\tButton,\n} from '@wordpress/components';\nimport { sprintf, __, _x } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { Form, FormField, NormalizedField } from '../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { isCombinedField } from '../is-combined-field';\nimport { DEFAULT_LAYOUT } from '../../normalize-form-fields';\n\nfunction DropdownHeader( {\n\ttitle,\n\tonClose,\n}: {\n\ttitle?: string;\n\tonClose: () => void;\n} ) {\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"dataforms-layouts-panel__dropdown-header\"\n\t\t\tspacing={ 4 }\n\t\t>\n\t\t\t<HStack alignment=\"center\">\n\t\t\t\t{ title && (\n\t\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</Heading>\n\t\t\t\t) }\n\t\t\t\t<Spacer />\n\t\t\t\t{ onClose && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nfunction PanelDropdown< Item >( {\n\tfieldDefinition,\n\tpopoverAnchor,\n\tlabelPosition = 'side',\n\tdata,\n\tonChange,\n\tfield,\n}: {\n\tfieldDefinition: NormalizedField< Item >;\n\tpopoverAnchor: HTMLElement | null;\n\tlabelPosition: 'side' | 'top' | 'none';\n\tdata: Item;\n\tonChange: ( value: any ) => void;\n\tfield: FormField;\n} ) {\n\tconst fieldLabel = isCombinedField( field )\n\t\t? field.label\n\t\t: fieldDefinition?.label;\n\n\tconst form: Form = useMemo(\n\t\t(): Form => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: isCombinedField( field )\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 } ],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t// Anchor the popover to the middle of the entire row so that it doesn't\n\t\t\t// move around when the label changes.\n\t\t\tanchor: popoverAnchor,\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\tshift: true,\n\t\t} ),\n\t\t[ popoverAnchor ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"dataforms-layouts-panel__field-dropdown\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tfocusOnMount\n\t\t\ttoggleProps={ {\n\t\t\t\tsize: 'compact',\n\t\t\t\tvariant: 'tertiary',\n\t\t\t\ttooltipPosition: 'middle left',\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"dataforms-layouts-panel__field-control\"\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tvariant={\n\t\t\t\t\t\t[ 'none', 'top' ].includes( labelPosition )\n\t\t\t\t\t\t\t? 'link'\n\t\t\t\t\t\t\t: 'tertiary'\n\t\t\t\t\t}\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %s: Field name.\n\t\t\t\t\t\t_x( 'Edit %s', 'field' ),\n\t\t\t\t\t\tfieldLabel || ''\n\t\t\t\t\t) }\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tdisabled={ fieldDefinition.readOnly === true }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t>\n\t\t\t\t\t<fieldDefinition.render\n\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\t/>\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t<>\n\t\t\t\t\t<DropdownHeader title={ fieldLabel } onClose={ onClose } />\n\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( FieldLayout, nestedField ) => (\n\t\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\t\tkey={ nestedField.id }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tfield={ nestedField }\n\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\t\t\t( form?.fields ?? [] ).length < 2\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DataFormLayout>\n\t\t\t\t</>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default PanelDropdown;\n"],"mappings":"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","ignoreList":[]}

package/build-module/dataforms-layouts/panel/index.js

@@ -6,120 +6,19 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __experimentalVStack as VStack, __experimentalHStack as HStack, __experimentalHeading as Heading, __experimentalSpacer as Spacer, Dropdown, Button } from '@wordpress/components';
-import { sprintf, __, _x } from '@wordpress/i18n';
-import { useState, useMemo, useContext } from '@wordpress/element';
-import { closeSmall } from '@wordpress/icons';
+import { __experimentalVStack as VStack, __experimentalHStack as HStack } from '@wordpress/components';
+import { useState, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 
 import DataFormContext from '../../components/dataform-context';
-import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
-import { DEFAULT_LAYOUT, normalizeLayout } from '../../normalize-form-fields';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function DropdownHeader({
-  title,
-  onClose
-}) {
-  return /*#__PURE__*/_jsx(VStack, {
-    className: "dataforms-layouts-panel__dropdown-header",
-    spacing: 4,
-    children: /*#__PURE__*/_jsxs(HStack, {
-      alignment: "center",
-      children: [title && /*#__PURE__*/_jsx(Heading, {
-        level: 2,
-        size: 13,
-        children: title
-      }), /*#__PURE__*/_jsx(Spacer, {}), onClose && /*#__PURE__*/_jsx(Button, {
-        label: __('Close'),
-        icon: closeSmall,
-        onClick: onClose,
-        size: "small"
-      })]
-    })
-  });
-}
-function PanelDropdown({
-  fieldDefinition,
-  popoverAnchor,
-  labelPosition = 'side',
-  data,
-  onChange,
-  field
-}) {
-  const fieldLabel = isCombinedField(field) ? field.label : fieldDefinition?.label;
-  const form = useMemo(() => ({
-    layout: DEFAULT_LAYOUT,
-    fields: isCombinedField(field) ? field.children :
-    // If not explicit children return the field id itself.
-    [{
-      id: field.id
-    }]
-  }), [field]);
-
-  // Memoize popoverProps to avoid returning a new object every time.
-  const popoverProps = useMemo(() => ({
-    // Anchor the popover to the middle of the entire row so that it doesn't
-    // move around when the label changes.
-    anchor: popoverAnchor,
-    placement: 'left-start',
-    offset: 36,
-    shift: true
-  }), [popoverAnchor]);
-  return /*#__PURE__*/_jsx(Dropdown, {
-    contentClassName: "dataforms-layouts-panel__field-dropdown",
-    popoverProps: popoverProps,
-    focusOnMount: true,
-    toggleProps: {
-      size: 'compact',
-      variant: 'tertiary',
-      tooltipPosition: 'middle left'
-    },
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => /*#__PURE__*/_jsx(Button, {
-      className: "dataforms-layouts-panel__field-control",
-      size: "compact",
-      variant: ['none', 'top'].includes(labelPosition) ? 'link' : 'tertiary',
-      "aria-expanded": isOpen,
-      "aria-label": sprintf(
-      // translators: %s: Field name.
-      _x('Edit %s', 'field'), fieldLabel || ''),
-      onClick: onToggle,
-      disabled: fieldDefinition.readOnly === true,
-      accessibleWhenDisabled: true,
-      children: /*#__PURE__*/_jsx(fieldDefinition.render, {
-        item: data,
-        field: fieldDefinition
-      })
-    }),
-    renderContent: ({
-      onClose
-    }) => /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(DropdownHeader, {
-        title: fieldLabel,
-        onClose: onClose
-      }), /*#__PURE__*/_jsx(DataFormLayout, {
-        data: data,
-        form: form,
-        onChange: onChange,
-        children: (FieldLayout, nestedField) => {
-          var _form$fields;
-          return /*#__PURE__*/_jsx(FieldLayout, {
-            data: data,
-            field: nestedField,
-            onChange: onChange,
-            hideLabelFromVision: ((_form$fields = form?.fields) !== null && _form$fields !== void 0 ? _form$fields : []).length < 2
-          }, nestedField.id);
-        }
-      })]
-    })
-  });
-}
+import { normalizeLayout } from '../../normalize-form-fields';
+import PanelDropdown from './dropdown';
+import PanelModal from './modal';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function FormPanelField({
   data,
   field,
@@ -154,6 +53,20 @@ export default function FormPanelField({
   const labelPosition = layout.labelPosition;
   const labelClassName = clsx('dataforms-layouts-panel__field-label', `dataforms-layouts-panel__field-label--label-position-${labelPosition}`);
   const fieldLabel = isCombinedField(field) ? field.label : fieldDefinition?.label;
+  const renderedControl = layout.openAs === 'modal' ? /*#__PURE__*/_jsx(PanelModal, {
+    field: field,
+    fieldDefinition: fieldDefinition,
+    data: data,
+    onChange: onChange,
+    labelPosition: labelPosition
+  }) : /*#__PURE__*/_jsx(PanelDropdown, {
+    field: field,
+    popoverAnchor: popoverAnchor,
+    fieldDefinition: fieldDefinition,
+    data: data,
+    onChange: onChange,
+    labelPosition: labelPosition
+  });
   if (labelPosition === 'top') {
     return /*#__PURE__*/_jsxs(VStack, {
       className: "dataforms-layouts-panel__field",
@@ -166,28 +79,14 @@ export default function FormPanelField({
         children: fieldLabel
       }), /*#__PURE__*/_jsx("div", {
         className: "dataforms-layouts-panel__field-control",
-        children: /*#__PURE__*/_jsx(PanelDropdown, {
-          field: field,
-          popoverAnchor: popoverAnchor,
-          fieldDefinition: fieldDefinition,
-          data: data,
-          onChange: onChange,
-          labelPosition: labelPosition
-        })
+        children: renderedControl
       })]
     });
   }
   if (labelPosition === 'none') {
     return /*#__PURE__*/_jsx("div", {
       className: "dataforms-layouts-panel__field",
-      children: /*#__PURE__*/_jsx(PanelDropdown, {
-        field: field,
-        popoverAnchor: popoverAnchor,
-        fieldDefinition: fieldDefinition,
-        data: data,
-        onChange: onChange,
-        labelPosition: labelPosition
-      })
+      children: renderedControl
     });
   }
 
@@ -200,14 +99,7 @@ export default function FormPanelField({
       children: fieldLabel
     }), /*#__PURE__*/_jsx("div", {
       className: "dataforms-layouts-panel__field-control",
-      children: /*#__PURE__*/_jsx(PanelDropdown, {
-        field: field,
-        popoverAnchor: popoverAnchor,
-        fieldDefinition: fieldDefinition,
-        data: data,
-        onChange: onChange,
-        labelPosition: labelPosition
-      })
+      children: renderedControl
     })]
   });
 }