@wordpress/dataviews 6.0.0 → 7.0.0

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_i18n","_constants","_lockUnlock","_jsxRuntime","ValidatedNumberControl","unlock","privateApis","BetweenControls","id","value","onChange","hideLabelFromVision","min","max","Array","isArray","onChangeMin","useCallback","newValue","Number","onChangeMax","jsx","BaseControl","__nextHasNoMarginBottom","help","__","children","jsxs","Flex","direction","gap","__experimentalNumberControl","label","undefined","__next40pxDefaultSize","Integer","data","field","operator","_field$getValue","description","getValue","item","onChangeControl","includes","OPERATOR_BETWEEN","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":["_components","require","_element","_i18n","_constants","_lockUnlock","_jsxRuntime","ValidatedNumberControl","unlock","privateApis","BetweenControls","id","value","onChange","hideLabelFromVision","min","max","Array","isArray","onChangeMin","useCallback","newValue","Number","onChangeMax","jsx","BaseControl","__nextHasNoMarginBottom","help","__","children","jsxs","Flex","direction","gap","__experimentalNumberControl","label","undefined","__next40pxDefaultSize","Integer","data","field","operator","_field$getValue","description","getValue","item","customValidity","setCustomValidity","useState","onChangeControl","includes","OPERATOR_BETWEEN","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/dataform-controls/text.js

@@ -34,20 +34,27 @@ function Text({
   const value = field.getValue({
     item: data
   });
+  const [customValidity, setCustomValidity] = (0, _element.useState)(undefined);
   const onChangeControl = (0, _element.useCallback)(newValue => onChange({
     [id]: newValue
   }), [id, onChange]);
   return /*#__PURE__*/(0, _jsxRuntime.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/dataform-controls/text.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_lockUnlock","_jsxRuntime","ValidatedTextControl","unlock","privateApis","Text","data","field","onChange","hideLabelFromVision","id","label","placeholder","description","value","getValue","item","onChangeControl","useCallback","newValue","jsx","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":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,WAAA,GAAAF,OAAA;AAAwC,IAAAG,WAAA,GAAAH,OAAA;AAVxC;AACA;AACA;;AAIA;AACA;AACA;;AAIA,MAAM;EAAEI;AAAqB,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAY,CAAC;AAEvC,SAASC,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,GAAG,IAAAC,oBAAW,EAChCC,QAAgB,IACjBX,QAAQ,CAAE;IACT,CAAEE,EAAE,GAAIS;EACT,CAAE,CAAC,EACJ,CAAET,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,oBACC,IAAAP,WAAA,CAAAmB,GAAA,EAAClB,oBAAoB;IACpBmB,QAAQ,EAAG,CAAC,CAAEd,KAAK,CAACe,OAAO,EAAED,QAAU;IACvCE,eAAe,EAAKJ,QAAa,IAAM;MACtC,IAAKZ,KAAK,CAACe,OAAO,EAAEE,MAAM,EAAG;QAC5B,OAAOjB,KAAK,CAACe,OAAO,CAACE,MAAM,CAC1B;UACC,GAAGlB,IAAI;UACP,CAAEI,EAAE,GAAIS;QACT,CAAC,EACDZ,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;IACrBW,IAAI,EAAGZ,WAAa;IACpBL,QAAQ,EAAGS,eAAiB;IAC5BS,qBAAqB;IACrBC,uBAAuB;IACvBlB,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_components","require","_element","_lockUnlock","_jsxRuntime","ValidatedTextControl","unlock","privateApis","Text","data","field","onChange","hideLabelFromVision","id","label","placeholder","description","value","getValue","item","customValidity","setCustomValidity","useState","undefined","onChangeControl","useCallback","newValue","jsx","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":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,WAAA,GAAAF,OAAA;AAAwC,IAAAG,WAAA,GAAAH,OAAA;AAVxC;AACA;AACA;;AAIA;AACA;AACA;;AAIA,MAAM;EAAEI;AAAqB,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAY,CAAC;AAEvC,SAASC,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,GAC1C,IAAAC,iBAAQ,EAILC,SAAU,CAAC;EAEf,MAAMC,eAAe,GAAG,IAAAC,oBAAW,EAChCC,QAAgB,IACjBf,QAAQ,CAAE;IACT,CAAEE,EAAE,GAAIa;EACT,CAAE,CAAC,EACJ,CAAEb,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,oBACC,IAAAP,WAAA,CAAAuB,GAAA,EAACtB,oBAAoB;IACpBuB,QAAQ,EAAG,CAAC,CAAElB,KAAK,CAACmB,OAAO,EAAED,QAAU;IACvCE,UAAU,EAAKJ,QAAa,IAAM;MACjC,MAAMK,OAAO,GAAGrB,KAAK,CAACmB,OAAO,EAAEG,MAAM,GACpC;QACC,GAAGvB,IAAI;QACP,CAAEI,EAAE,GAAIa;MACT,CAAC,EACDhB,KACD,CAAC;MAED,IAAKqB,OAAO,EAAG;QACdV,iBAAiB,CAAE;UAClBY,IAAI,EAAE,SAAS;UACfF;QACD,CAAE,CAAC;QACH;MACD;MAEAV,iBAAiB,CAAEE,SAAU,CAAC;IAC/B,CAAG;IACHH,cAAc,EAAGA,cAAgB;IACjCN,KAAK,EAAGA,KAAO;IACfC,WAAW,EAAGA,WAAa;IAC3BE,KAAK,EAAGA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAI;IACrBiB,IAAI,EAAGlB,WAAa;IACpBL,QAAQ,EAAGa,eAAiB;IAC5BW,qBAAqB;IACrBC,uBAAuB;IACvBxB,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}

package/build/dataforms-layouts/card/index.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FormCardField;
+exports.useCollapsibleCard = useCollapsibleCard;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _icons = require("@wordpress/icons");
+var _ = require("..");
+var _dataformContext = _interopRequireDefault(require("../../components/dataform-context"));
+var _dataFormLayout = require("../data-form-layout");
+var _isCombinedField = require("../is-combined-field");
+var _normalizeFormFields = require("../../normalize-form-fields");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function useCollapsibleCard(initialIsOpen = true) {
+  const [isOpen, setIsOpen] = (0, _element.useState)(initialIsOpen);
+  const toggle = (0, _element.useCallback)(() => {
+    setIsOpen(prev => !prev);
+  }, []);
+  const CollapsibleCardHeader = (0, _element.useCallback)(({
+    children,
+    ...props
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.CardHeader, {
+    ...props,
+    onClick: toggle,
+    style: {
+      cursor: 'pointer',
+      ...props.style
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      },
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      __next40pxDefaultSize: true,
+      variant: "tertiary",
+      icon: isOpen ? _icons.chevronUp : _icons.chevronDown,
+      "aria-expanded": isOpen,
+      "aria-label": isOpen ? 'Collapse' : 'Expand'
+    })]
+  }), [toggle, isOpen]);
+  return {
+    isOpen,
+    CollapsibleCardHeader
+  };
+}
+function FormCardField({
+  data,
+  field,
+  onChange,
+  hideLabelFromVision
+}) {
+  const {
+    fields
+  } = (0, _element.useContext)(_dataformContext.default);
+  const layout = (0, _normalizeFormFields.normalizeLayout)({
+    ...field.layout,
+    type: 'card'
+  });
+  const form = (0, _element.useMemo)(() => ({
+    layout: _normalizeFormFields.DEFAULT_LAYOUT,
+    fields: (0, _isCombinedField.isCombinedField)(field) ? field.children : []
+  }), [field]);
+  const {
+    isOpen,
+    CollapsibleCardHeader
+  } = useCollapsibleCard(layout.isOpened);
+  if ((0, _isCombinedField.isCombinedField)(field)) {
+    const withHeader = !!field.label && layout.withHeader;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Card, {
+      className: "dataforms-layouts-card__field",
+      children: [withHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleCardHeader, {
+        className: "dataforms-layouts-card__field-label",
+        children: field.label
+      }), (isOpen || !withHeader) &&
+      /*#__PURE__*/
+      // If it doesn't have a header, keep it open.
+      // Otherwise, the card will not be visible.
+      (0, _jsxRuntime.jsx)(_components.CardBody, {
+        className: "dataforms-layouts-card__field-control",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataFormLayout.DataFormLayout, {
+          data: data,
+          form: form,
+          onChange: onChange
+        })
+      })]
+    });
+  }
+  const fieldDefinition = fields.find(fieldDef => fieldDef.id === field.id);
+  if (!fieldDefinition || !fieldDefinition.Edit) {
+    return null;
+  }
+  const RegularLayout = (0, _.getFormFieldLayout)('regular')?.component;
+  if (!RegularLayout) {
+    return null;
+  }
+  const withHeader = !!fieldDefinition.label && layout.withHeader;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Card, {
+    className: "dataforms-layouts-card__field",
+    children: [withHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleCardHeader, {
+      className: "dataforms-layouts-card__field-label",
+      children: fieldDefinition.label
+    }), (isOpen || !withHeader) &&
+    /*#__PURE__*/
+    // If it doesn't have a header, keep it open.
+    // Otherwise, the card will not be visible.
+    (0, _jsxRuntime.jsx)(_components.CardBody, {
+      className: "dataforms-layouts-card__field-control",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RegularLayout, {
+        data: data,
+        field: field,
+        onChange: onChange,
+        hideLabelFromVision: hideLabelFromVision || withHeader
+      })
+    })]
+  });
+}
+//# sourceMappingURL=index.js.map

package/build/dataforms-layouts/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_element","_icons","_","_dataformContext","_interopRequireDefault","_dataFormLayout","_isCombinedField","_normalizeFormFields","_jsxRuntime","useCollapsibleCard","initialIsOpen","isOpen","setIsOpen","useState","toggle","useCallback","prev","CollapsibleCardHeader","children","props","jsxs","CardHeader","onClick","style","cursor","jsx","width","display","justifyContent","alignItems","Button","__next40pxDefaultSize","variant","icon","chevronUp","chevronDown","FormCardField","data","field","onChange","hideLabelFromVision","fields","useContext","DataFormContext","layout","normalizeLayout","type","form","useMemo","DEFAULT_LAYOUT","isCombinedField","isOpened","withHeader","label","Card","className","CardBody","DataFormLayout","fieldDefinition","find","fieldDef","id","Edit","RegularLayout","getFormFieldLayout","component"],"sources":["@wordpress/dataviews/src/dataforms-layouts/card/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { Button, Card, CardBody, CardHeader } from '@wordpress/components';\nimport { useCallback, useContext, useMemo, useState } from '@wordpress/element';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getFormFieldLayout } from '..';\nimport DataFormContext from '../../components/dataform-context';\nimport type { NormalizedCardLayout, FieldLayoutProps, Form } from '../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { isCombinedField } from '../is-combined-field';\nimport { DEFAULT_LAYOUT, normalizeLayout } from '../../normalize-form-fields';\n\nexport function useCollapsibleCard( initialIsOpen: boolean = true ) {\n\tconst [ isOpen, setIsOpen ] = useState( initialIsOpen );\n\n\tconst toggle = useCallback( () => {\n\t\tsetIsOpen( ( prev ) => ! prev );\n\t}, [] );\n\n\tconst CollapsibleCardHeader = useCallback(\n\t\t( {\n\t\t\tchildren,\n\t\t\t...props\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\t[ key: string ]: any;\n\t\t} ) => (\n\t\t\t<CardHeader\n\t\t\t\t{ ...props }\n\t\t\t\tonClick={ toggle }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t...props.style,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\ticon={ isOpen ? chevronUp : chevronDown }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-label={ isOpen ? 'Collapse' : 'Expand' }\n\t\t\t\t/>\n\t\t\t</CardHeader>\n\t\t),\n\t\t[ toggle, isOpen ]\n\t);\n\n\treturn { isOpen, CollapsibleCardHeader };\n}\n\nexport default function FormCardField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\n\tconst layout: NormalizedCardLayout = normalizeLayout( {\n\t\t...field.layout,\n\t\ttype: 'card',\n\t} ) as NormalizedCardLayout;\n\n\tconst form: Form = useMemo(\n\t\t(): Form => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: isCombinedField( field ) ? field.children : [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { isOpen, CollapsibleCardHeader } = useCollapsibleCard(\n\t\tlayout.isOpened\n\t);\n\tif ( isCombinedField( field ) ) {\n\t\tconst withHeader = !! field.label && layout.withHeader;\n\t\treturn (\n\t\t\t<Card className=\"dataforms-layouts-card__field\">\n\t\t\t\t{ withHeader && (\n\t\t\t\t\t<CollapsibleCardHeader className=\"dataforms-layouts-card__field-label\">\n\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t</CollapsibleCardHeader>\n\t\t\t\t) }\n\t\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t\t<CardBody className=\"dataforms-layouts-card__field-control\">\n\t\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardBody>\n\t\t\t\t) }\n\t\t\t</Card>\n\t\t);\n\t}\n\n\tconst fieldDefinition = fields.find(\n\t\t( fieldDef ) => fieldDef.id === field.id\n\t);\n\n\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\treturn null;\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\tconst withHeader = !! fieldDefinition.label && layout.withHeader;\n\treturn (\n\t\t<Card className=\"dataforms-layouts-card__field\">\n\t\t\t{ withHeader && (\n\t\t\t\t<CollapsibleCardHeader className=\"dataforms-layouts-card__field-label\">\n\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t</CollapsibleCardHeader>\n\t\t\t) }\n\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t<CardBody className=\"dataforms-layouts-card__field-control\">\n\t\t\t\t\t<RegularLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\thideLabelFromVision || withHeader\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</CardBody>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/dataforms-layouts/data-form-layout.js

@@ -35,9 +35,9 @@ function DataFormLayout({
   }
   const normalizedFormFields = (0, _element.useMemo)(() => (0, _normalizeFormFields.default)(form), [form]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-    spacing: form?.type === 'panel' ? 2 : 4,
+    spacing: form.layout?.type === 'panel' ? 2 : 4,
     children: normalizedFormFields.map(formField => {
-      const FieldLayout = (0, _index.getFormFieldLayout)(formField.layout)?.component;
+      const FieldLayout = (0, _index.getFormFieldLayout)(formField.layout.type)?.component;
       if (!FieldLayout) {
         return null;
       }

package/build/dataforms-layouts/data-form-layout.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_index","_dataformContext","_interopRequireDefault","_isCombinedField","_normalizeFormFields","_jsxRuntime","DataFormLayout","data","form","onChange","children","fields","fieldDefinitions","useContext","DataFormContext","getFieldDefinition","field","fieldId","id","find","fieldDefinition","normalizedFormFields","useMemo","normalizeFormFields","jsx","__experimentalVStack","spacing","type","map","formField","FieldLayout","getFormFieldLayout","layout","component","isCombinedField","undefined","isVisible"],"sources":["@wordpress/dataviews/src/dataforms-layouts/data-form-layout.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { Form, FormField, SimpleFormField } from '../types';\nimport { getFormFieldLayout } from './index';\nimport DataFormContext from '../components/dataform-context';\nimport { isCombinedField } from './is-combined-field';\nimport normalizeFormFields from '../normalize-form-fields';\n\nexport function DataFormLayout< Item >( {\n\tdata,\n\tform,\n\tonChange,\n\tchildren,\n}: {\n\tdata: Item;\n\tform: Form;\n\tonChange: ( value: any ) => void;\n\tchildren?: (\n\t\tFieldLayout: ( props: {\n\t\t\tdata: Item;\n\t\t\tfield: FormField;\n\t\t\tonChange: ( value: any ) => void;\n\t\t\thideLabelFromVision?: boolean;\n\t\t} ) => React.JSX.Element | null,\n\t\tfield: FormField\n\t) => React.JSX.Element;\n} ) {\n\tconst { fields: fieldDefinitions } = useContext( DataFormContext );\n\n\tfunction getFieldDefinition( field: SimpleFormField | string ) {\n\t\tconst fieldId = typeof field === 'string' ? field : field.id;\n\n\t\treturn fieldDefinitions.find(\n\t\t\t( fieldDefinition ) => fieldDefinition.id === fieldId\n\t\t);\n\t}\n\n\tconst normalizedFormFields = useMemo(\n\t\t() => normalizeFormFields( form ),\n\t\t[ form ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ form?.type === 'panel' ? 2 : 4 }>\n\t\t\t{ normalizedFormFields.map( ( formField ) => {\n\t\t\t\tconst FieldLayout = getFormFieldLayout( formField.layout )\n\t\t\t\t\t?.component;\n\n\t\t\t\tif ( ! FieldLayout ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst fieldDefinition = ! isCombinedField( formField )\n\t\t\t\t\t? getFieldDefinition( formField )\n\t\t\t\t\t: undefined;\n\n\t\t\t\tif (\n\t\t\t\t\tfieldDefinition &&\n\t\t\t\t\tfieldDefinition.isVisible &&\n\t\t\t\t\t! fieldDefinition.isVisible( data )\n\t\t\t\t) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tif ( children ) {\n\t\t\t\t\treturn children( FieldLayout, formField );\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\tkey={ formField.id }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ formField }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,oBAAA,GAAAF,sBAAA,CAAAJ,OAAA;AAA2D,IAAAO,WAAA,GAAAP,OAAA;AAb3D;AACA;AACA;;AAIA;AACA;AACA;;AAOO,SAASQ,cAAcA,CAAU;EACvCC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC;AAcD,CAAC,EAAG;EACH,MAAM;IAAEC,MAAM,EAAEC;EAAiB,CAAC,GAAG,IAAAC,mBAAU,EAAEC,wBAAgB,CAAC;EAElE,SAASC,kBAAkBA,CAAEC,KAA+B,EAAG;IAC9D,MAAMC,OAAO,GAAG,OAAOD,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGA,KAAK,CAACE,EAAE;IAE5D,OAAON,gBAAgB,CAACO,IAAI,CACzBC,eAAe,IAAMA,eAAe,CAACF,EAAE,KAAKD,OAC/C,CAAC;EACF;EAEA,MAAMI,oBAAoB,GAAG,IAAAC,gBAAO,EACnC,MAAM,IAAAC,4BAAmB,EAAEf,IAAK,CAAC,EACjC,CAAEA,IAAI,CACP,CAAC;EAED,oBACC,IAAAH,WAAA,CAAAmB,GAAA,EAAC3B,WAAA,CAAA4B,oBAAM;IAACC,OAAO,EAAGlB,IAAI,EAAEmB,IAAI,KAAK,OAAO,GAAG,CAAC,GAAG,CAAG;IAAAjB,QAAA,EAC/CW,oBAAoB,CAACO,GAAG,CAAIC,SAAS,IAAM;MAC5C,MAAMC,WAAW,GAAG,IAAAC,yBAAkB,EAAEF,SAAS,CAACG,MAAO,CAAC,EACvDC,SAAS;MAEZ,IAAK,CAAEH,WAAW,EAAG;QACpB,OAAO,IAAI;MACZ;MAEA,MAAMV,eAAe,GAAG,CAAE,IAAAc,gCAAe,EAAEL,SAAU,CAAC,GACnDd,kBAAkB,CAAEc,SAAU,CAAC,GAC/BM,SAAS;MAEZ,IACCf,eAAe,IACfA,eAAe,CAACgB,SAAS,IACzB,CAAEhB,eAAe,CAACgB,SAAS,CAAE7B,IAAK,CAAC,EAClC;QACD,OAAO,IAAI;MACZ;MAEA,IAAKG,QAAQ,EAAG;QACf,OAAOA,QAAQ,CAAEoB,WAAW,EAAED,SAAU,CAAC;MAC1C;MAEA,oBACC,IAAAxB,WAAA,CAAAmB,GAAA,EAACM,WAAW;QAEXvB,IAAI,EAAGA,IAAM;QACbS,KAAK,EAAGa,SAAW;QACnBpB,QAAQ,EAAGA;MAAU,GAHfoB,SAAS,CAACX,EAIhB,CAAC;IAEJ,CAAE;EAAC,CACI,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["_components","require","_element","_index","_dataformContext","_interopRequireDefault","_isCombinedField","_normalizeFormFields","_jsxRuntime","DataFormLayout","data","form","onChange","children","fields","fieldDefinitions","useContext","DataFormContext","getFieldDefinition","field","fieldId","id","find","fieldDefinition","normalizedFormFields","useMemo","normalizeFormFields","jsx","__experimentalVStack","spacing","layout","type","map","formField","FieldLayout","getFormFieldLayout","component","isCombinedField","undefined","isVisible"],"sources":["@wordpress/dataviews/src/dataforms-layouts/data-form-layout.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { Form, FormField, SimpleFormField } from '../types';\nimport { getFormFieldLayout } from './index';\nimport DataFormContext from '../components/dataform-context';\nimport { isCombinedField } from './is-combined-field';\nimport normalizeFormFields from '../normalize-form-fields';\n\nexport function DataFormLayout< Item >( {\n\tdata,\n\tform,\n\tonChange,\n\tchildren,\n}: {\n\tdata: Item;\n\tform: Form;\n\tonChange: ( value: any ) => void;\n\tchildren?: (\n\t\tFieldLayout: ( props: {\n\t\t\tdata: Item;\n\t\t\tfield: FormField;\n\t\t\tonChange: ( value: any ) => void;\n\t\t\thideLabelFromVision?: boolean;\n\t\t} ) => React.JSX.Element | null,\n\t\tfield: FormField\n\t) => React.JSX.Element;\n} ) {\n\tconst { fields: fieldDefinitions } = useContext( DataFormContext );\n\n\tfunction getFieldDefinition( field: SimpleFormField | string ) {\n\t\tconst fieldId = typeof field === 'string' ? field : field.id;\n\n\t\treturn fieldDefinitions.find(\n\t\t\t( fieldDefinition ) => fieldDefinition.id === fieldId\n\t\t);\n\t}\n\n\tconst normalizedFormFields = useMemo(\n\t\t() => normalizeFormFields( form ),\n\t\t[ form ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ form.layout?.type === 'panel' ? 2 : 4 }>\n\t\t\t{ normalizedFormFields.map( ( formField ) => {\n\t\t\t\tconst FieldLayout = getFormFieldLayout( formField.layout.type )\n\t\t\t\t\t?.component;\n\n\t\t\t\tif ( ! FieldLayout ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst fieldDefinition = ! isCombinedField( formField )\n\t\t\t\t\t? getFieldDefinition( formField )\n\t\t\t\t\t: undefined;\n\n\t\t\t\tif (\n\t\t\t\t\tfieldDefinition &&\n\t\t\t\t\tfieldDefinition.isVisible &&\n\t\t\t\t\t! fieldDefinition.isVisible( data )\n\t\t\t\t) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tif ( children ) {\n\t\t\t\t\treturn children( FieldLayout, formField );\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\tkey={ formField.id }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ formField }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,oBAAA,GAAAF,sBAAA,CAAAJ,OAAA;AAA2D,IAAAO,WAAA,GAAAP,OAAA;AAb3D;AACA;AACA;;AAIA;AACA;AACA;;AAOO,SAASQ,cAAcA,CAAU;EACvCC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC;AAcD,CAAC,EAAG;EACH,MAAM;IAAEC,MAAM,EAAEC;EAAiB,CAAC,GAAG,IAAAC,mBAAU,EAAEC,wBAAgB,CAAC;EAElE,SAASC,kBAAkBA,CAAEC,KAA+B,EAAG;IAC9D,MAAMC,OAAO,GAAG,OAAOD,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGA,KAAK,CAACE,EAAE;IAE5D,OAAON,gBAAgB,CAACO,IAAI,CACzBC,eAAe,IAAMA,eAAe,CAACF,EAAE,KAAKD,OAC/C,CAAC;EACF;EAEA,MAAMI,oBAAoB,GAAG,IAAAC,gBAAO,EACnC,MAAM,IAAAC,4BAAmB,EAAEf,IAAK,CAAC,EACjC,CAAEA,IAAI,CACP,CAAC;EAED,oBACC,IAAAH,WAAA,CAAAmB,GAAA,EAAC3B,WAAA,CAAA4B,oBAAM;IAACC,OAAO,EAAGlB,IAAI,CAACmB,MAAM,EAAEC,IAAI,KAAK,OAAO,GAAG,CAAC,GAAG,CAAG;IAAAlB,QAAA,EACtDW,oBAAoB,CAACQ,GAAG,CAAIC,SAAS,IAAM;MAC5C,MAAMC,WAAW,GAAG,IAAAC,yBAAkB,EAAEF,SAAS,CAACH,MAAM,CAACC,IAAK,CAAC,EAC5DK,SAAS;MAEZ,IAAK,CAAEF,WAAW,EAAG;QACpB,OAAO,IAAI;MACZ;MAEA,MAAMX,eAAe,GAAG,CAAE,IAAAc,gCAAe,EAAEJ,SAAU,CAAC,GACnDf,kBAAkB,CAAEe,SAAU,CAAC,GAC/BK,SAAS;MAEZ,IACCf,eAAe,IACfA,eAAe,CAACgB,SAAS,IACzB,CAAEhB,eAAe,CAACgB,SAAS,CAAE7B,IAAK,CAAC,EAClC;QACD,OAAO,IAAI;MACZ;MAEA,IAAKG,QAAQ,EAAG;QACf,OAAOA,QAAQ,CAAEqB,WAAW,EAAED,SAAU,CAAC;MAC1C;MAEA,oBACC,IAAAzB,WAAA,CAAAmB,GAAA,EAACO,WAAW;QAEXxB,IAAI,EAAGA,IAAM;QACbS,KAAK,EAAGc,SAAW;QACnBrB,QAAQ,EAAGA;MAAU,GAHfqB,SAAS,CAACZ,EAIhB,CAAC;IAEJ,CAAE;EAAC,CACI,CAAC;AAEX","ignoreList":[]}

package/build/dataforms-layouts/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getFormFieldLayout = getFormFieldLayout;
 var _regular = _interopRequireDefault(require("./regular"));
 var _panel = _interopRequireDefault(require("./panel"));
+var _card = _interopRequireDefault(require("./card"));
 /**
  * Internal dependencies
  */
@@ -17,6 +18,9 @@ const FORM_FIELD_LAYOUTS = [{
 }, {
   type: 'panel',
   component: _panel.default
+}, {
+  type: 'card',
+  component: _card.default
 }];
 function getFormFieldLayout(type) {
   return FORM_FIELD_LAYOUTS.find(layout => layout.type === type);

package/build/dataforms-layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_regular","_interopRequireDefault","require","_panel","FORM_FIELD_LAYOUTS","type","component","FormRegularField","FormPanelField","getFormFieldLayout","find","layout"],"sources":["@wordpress/dataviews/src/dataforms-layouts/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport FormRegularField from './regular';\nimport FormPanelField from './panel';\n\nconst FORM_FIELD_LAYOUTS = [\n\t{\n\t\ttype: 'regular',\n\t\tcomponent: FormRegularField,\n\t},\n\t{\n\t\ttype: 'panel',\n\t\tcomponent: FormPanelField,\n\t},\n];\n\nexport function getFormFieldLayout( type: string ) {\n\treturn FORM_FIELD_LAYOUTS.find( ( layout ) => layout.type === type );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AAJA;AACA;AACA;;AAIA,MAAME,kBAAkB,GAAG,CAC1B;EACCC,IAAI,EAAE,SAAS;EACfC,SAAS,EAAEC;AACZ,CAAC,EACD;EACCF,IAAI,EAAE,OAAO;EACbC,SAAS,EAAEE;AACZ,CAAC,CACD;AAEM,SAASC,kBAAkBA,CAAEJ,IAAY,EAAG;EAClD,OAAOD,kBAAkB,CAACM,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACN,IAAI,KAAKA,IAAK,CAAC;AACrE","ignoreList":[]}
+{"version":3,"names":["_regular","_interopRequireDefault","require","_panel","_card","FORM_FIELD_LAYOUTS","type","component","FormRegularField","FormPanelField","FormCardField","getFormFieldLayout","find","layout"],"sources":["@wordpress/dataviews/src/dataforms-layouts/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport FormRegularField from './regular';\nimport FormPanelField from './panel';\nimport FormCardField from './card';\n\nconst FORM_FIELD_LAYOUTS = [\n\t{\n\t\ttype: 'regular',\n\t\tcomponent: FormRegularField,\n\t},\n\t{\n\t\ttype: 'panel',\n\t\tcomponent: FormPanelField,\n\t},\n\t{\n\t\ttype: 'card',\n\t\tcomponent: FormCardField,\n\t},\n];\n\nexport function getFormFieldLayout( type: string ) {\n\treturn FORM_FIELD_LAYOUTS.find( ( layout ) => layout.type === type );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AALA;AACA;AACA;;AAKA,MAAMG,kBAAkB,GAAG,CAC1B;EACCC,IAAI,EAAE,SAAS;EACfC,SAAS,EAAEC;AACZ,CAAC,EACD;EACCF,IAAI,EAAE,OAAO;EACbC,SAAS,EAAEE;AACZ,CAAC,EACD;EACCH,IAAI,EAAE,MAAM;EACZC,SAAS,EAAEG;AACZ,CAAC,CACD;AAEM,SAASC,kBAAkBA,CAAEL,IAAY,EAAG;EAClD,OAAOD,kBAAkB,CAACO,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACP,IAAI,KAAKA,IAAK,CAAC;AACrE","ignoreList":[]}

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

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
+var _icons = require("@wordpress/icons");
+var _dataFormLayout = require("../data-form-layout");
+var _isCombinedField = require("../is-combined-field");
+var _normalizeFormFields = require("../../normalize-form-fields");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function DropdownHeader({
+  title,
+  onClose
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
+    className: "dataforms-layouts-panel__dropdown-header",
+    spacing: 4,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      alignment: "center",
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
+        level: 2,
+        size: 13,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {}), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        label: (0, _i18n.__)('Close'),
+        icon: _icons.closeSmall,
+        onClick: onClose,
+        size: "small"
+      })]
+    })
+  });
+}
+function PanelDropdown({
+  fieldDefinition,
+  popoverAnchor,
+  labelPosition = 'side',
+  data,
+  onChange,
+  field
+}) {
+  const fieldLabel = (0, _isCombinedField.isCombinedField)(field) ? field.label : fieldDefinition?.label;
+  const form = (0, _element.useMemo)(() => ({
+    layout: _normalizeFormFields.DEFAULT_LAYOUT,
+    fields: (0, _isCombinedField.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 = (0, _element.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__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
+    contentClassName: "dataforms-layouts-panel__field-dropdown",
+    popoverProps: popoverProps,
+    focusOnMount: true,
+    toggleProps: {
+      size: 'compact',
+      variant: 'tertiary',
+      tooltipPosition: 'middle left'
+    },
+    renderToggle: ({
+      isOpen,
+      onToggle
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      className: "dataforms-layouts-panel__field-control",
+      size: "compact",
+      variant: ['none', 'top'].includes(labelPosition) ? 'link' : 'tertiary',
+      "aria-expanded": isOpen,
+      "aria-label": (0, _i18n.sprintf)(
+      // translators: %s: Field name.
+      (0, _i18n._x)('Edit %s', 'field'), fieldLabel || ''),
+      onClick: onToggle,
+      disabled: fieldDefinition.readOnly === true,
+      accessibleWhenDisabled: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(fieldDefinition.render, {
+        item: data,
+        field: fieldDefinition
+      })
+    }),
+    renderContent: ({
+      onClose
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownHeader, {
+        title: fieldLabel,
+        onClose: onClose
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataFormLayout.DataFormLayout, {
+        data: data,
+        form: form,
+        onChange: onChange,
+        children: (FieldLayout, nestedField) => {
+          var _form$fields;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldLayout, {
+            data: data,
+            field: nestedField,
+            onChange: onChange,
+            hideLabelFromVision: ((_form$fields = form?.fields) !== null && _form$fields !== void 0 ? _form$fields : []).length < 2
+          }, nestedField.id);
+        }
+      })]
+    })
+  });
+}
+var _default = exports.default = PanelDropdown;
+//# sourceMappingURL=dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_i18n","_element","_icons","_dataFormLayout","_isCombinedField","_normalizeFormFields","_jsxRuntime","DropdownHeader","title","onClose","jsx","__experimentalVStack","className","spacing","children","jsxs","__experimentalHStack","alignment","__experimentalHeading","level","size","__experimentalSpacer","Button","label","__","icon","closeSmall","onClick","PanelDropdown","fieldDefinition","popoverAnchor","labelPosition","data","onChange","field","fieldLabel","isCombinedField","form","useMemo","layout","DEFAULT_LAYOUT","fields","id","popoverProps","anchor","placement","offset","shift","Dropdown","contentClassName","focusOnMount","toggleProps","variant","tooltipPosition","renderToggle","isOpen","onToggle","includes","sprintf","_x","disabled","readOnly","accessibleWhenDisabled","render","item","renderContent","Fragment","DataFormLayout","FieldLayout","nestedField","_form$fields","hideLabelFromVision","length","_default","exports","default"],"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":[]}