@wordpress/dataviews 4.22.0 → 5.0.0

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_jsxRuntime","DateTime","data","field","onChange","hideLabelFromVision","id","label","value","getValue","item","onChangeControl","useCallback","newValue","jsxs","className","children","jsx","BaseControl","VisualLabel","as","VisuallyHidden","TimePicker","currentTime"],"sources":["@wordpress/dataviews/src/dataform-controls/datetime.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { BaseControl, TimePicker, VisuallyHidden } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\n\nexport default function DateTime< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | null ) => onChange( { [ id ]: newValue } ),\n\t\t[ id, onChange ]\n\t);\n\n\treturn (\n\t\t<fieldset className=\"dataviews-controls__datetime\">\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t{ label }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t) }\n\t\t\t{ hideLabelFromVision && (\n\t\t\t\t<VisuallyHidden as=\"legend\">{ label }</VisuallyHidden>\n\t\t\t) }\n\t\t\t<TimePicker\n\t\t\t\tcurrentTime={ value }\n\t\t\t\tonChange={ onChangeControl }\n\t\t\t\thideLabelFromVision\n\t\t\t/>\n\t\t</fieldset>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAiD,IAAAE,WAAA,GAAAF,OAAA;AAJjD;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASG,QAAQA,CAAU;EACzCC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC;EAAM,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,KAAK,GAAGL,KAAK,CAACM,QAAQ,CAAE;IAAEC,IAAI,EAAER;EAAK,CAAE,CAAC;EAE9C,MAAMS,eAAe,GAAG,IAAAC,oBAAW,EAChCC,QAAuB,IAAMT,QAAQ,CAAE;IAAE,CAAEE,EAAE,GAAIO;EAAS,CAAE,CAAC,EAC/D,CAAEP,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,oBACC,IAAAJ,WAAA,CAAAc,IAAA;IAAUC,SAAS,EAAC,8BAA8B;IAAAC,QAAA,GAC/C,CAAEX,mBAAmB,iBACtB,IAAAL,WAAA,CAAAiB,GAAA,EAACpB,WAAA,CAAAqB,WAAW,CAACC,WAAW;MAACC,EAAE,EAAC,QAAQ;MAAAJ,QAAA,EACjCT;IAAK,CACiB,CACzB,EACCF,mBAAmB,iBACpB,IAAAL,WAAA,CAAAiB,GAAA,EAACpB,WAAA,CAAAwB,cAAc;MAACD,EAAE,EAAC,QAAQ;MAAAJ,QAAA,EAAGT;IAAK,CAAkB,CACrD,eACD,IAAAP,WAAA,CAAAiB,GAAA,EAACpB,WAAA,CAAAyB,UAAU;MACVC,WAAW,EAAGf,KAAO;MACrBJ,QAAQ,EAAGO,eAAiB;MAC5BN,mBAAmB;IAAA,CACnB,CAAC;EAAA,CACO,CAAC;AAEb","ignoreList":[]}
+{"version":3,"names":["_components","require","_element","_i18n","_constants","_jsxRuntime","TIME_UNITS_OPTIONS","OPERATOR_IN_THE_PAST","value","label","__","OPERATOR_OVER","RelativeDateControls","id","onChange","hideLabelFromVision","options","relValue","unit","onChangeValue","useCallback","newValue","Number","onChangeUnit","newUnit","jsx","BaseControl","__nextHasNoMarginBottom","className","children","jsxs","__experimentalHStack","spacing","__experimentalNumberControl","__next40pxDefaultSize","spinControls","min","step","SelectControl","DateTime","data","field","operator","getValue","item","onChangeControl","VisualLabel","as","VisuallyHidden","TimePicker","currentTime","undefined"],"sources":["@wordpress/dataviews/src/dataform-controls/datetime.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tTimePicker,\n\tVisuallyHidden,\n\tSelectControl,\n\t__experimentalNumberControl as NumberControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';\n\nconst TIME_UNITS_OPTIONS = {\n\t[ OPERATOR_IN_THE_PAST ]: [\n\t\t{ value: 'days', label: __( 'Days' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks' ) },\n\t\t{ value: 'months', label: __( 'Months' ) },\n\t\t{ value: 'years', label: __( 'Years' ) },\n\t],\n\t[ OPERATOR_OVER ]: [\n\t\t{ value: 'days', label: __( 'Days ago' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks ago' ) },\n\t\t{ value: 'months', label: __( 'Months ago' ) },\n\t\t{ value: 'years', label: __( 'Years ago' ) },\n\t],\n};\n\nfunction RelativeDateControls( {\n\tid,\n\tvalue,\n\tonChange,\n\tlabel,\n\thideLabelFromVision,\n\toptions,\n}: {\n\tid: string;\n\tvalue: { value?: string | number; unit?: string };\n\tonChange: ( value: any ) => void;\n\tlabel: string;\n\thideLabelFromVision?: boolean;\n\toptions: { value: string; label: string }[];\n} ) {\n\tconst { value: relValue = '', unit = options[ 0 ].value } = value;\n\n\tconst onChangeValue = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: { value: Number( newValue ), unit },\n\t\t\t} ),\n\t\t[ id, onChange, unit ]\n\t);\n\n\tconst onChangeUnit = useCallback(\n\t\t( newUnit: string | undefined ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: { value: relValue, unit: newUnit },\n\t\t\t} ),\n\t\t[ id, onChange, relValue ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName=\"dataviews-controls__datetime\"\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t>\n\t\t\t<HStack spacing={ 2.5 }>\n\t\t\t\t<NumberControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"dataviews-controls__datetime-number\"\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tmin={ 1 }\n\t\t\t\t\tstep={ 1 }\n\t\t\t\t\tvalue={ relValue }\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t/>\n\t\t\t\t<SelectControl\n\t\t\t\t\tclassName=\"dataviews-controls__datetime-unit\"\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Unit' ) }\n\t\t\t\t\tvalue={ unit }\n\t\t\t\t\toptions={ options }\n\t\t\t\t\tonChange={ onChangeUnit }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default function DateTime< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | null ) => onChange( { [ id ]: newValue } ),\n\t\t[ id, onChange ]\n\t);\n\n\tif ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {\n\t\treturn (\n\t\t\t<RelativeDateControls\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value && typeof value === 'object' ? value : {} }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\toptions={ TIME_UNITS_OPTIONS[ operator ] }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<fieldset className=\"dataviews-controls__datetime\">\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t{ label }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t) }\n\t\t\t{ hideLabelFromVision && (\n\t\t\t\t<VisuallyHidden as=\"legend\">{ label }</VisuallyHidden>\n\t\t\t) }\n\t\t\t<TimePicker\n\t\t\t\tcurrentTime={ typeof value === 'string' ? value : undefined }\n\t\t\t\tonChange={ onChangeControl }\n\t\t\t\thideLabelFromVision\n\t\t\t/>\n\t\t</fieldset>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/dataform-controls/email.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Email;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function Email({
+  data,
+  field,
+  onChange,
+  hideLabelFromVision
+}) {
+  const {
+    id,
+    label,
+    placeholder,
+    description
+  } = field;
+  const value = field.getValue({
+    item: data
+  });
+  const onChangeControl = (0, _element.useCallback)(newValue => onChange({
+    [id]: newValue
+  }), [id, onChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
+    type: "email",
+    label: label,
+    placeholder: placeholder,
+    value: value !== null && value !== void 0 ? value : '',
+    help: description,
+    onChange: onChangeControl,
+    __next40pxDefaultSize: true,
+    __nextHasNoMarginBottom: true,
+    hideLabelFromVision: hideLabelFromVision
+  });
+}
+//# sourceMappingURL=email.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_element","_jsxRuntime","Email","data","field","onChange","hideLabelFromVision","id","label","placeholder","description","value","getValue","item","onChangeControl","useCallback","newValue","jsx","TextControl","type","help","__next40pxDefaultSize","__nextHasNoMarginBottom"],"sources":["@wordpress/dataviews/src/dataform-controls/email.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { TextControl } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\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<TextControl\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":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAiD,IAAAE,WAAA,GAAAF,OAAA;AAJjD;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASG,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,GAAG,IAAAC,oBAAW,EAChCC,QAAgB,IACjBX,QAAQ,CAAE;IACT,CAAEE,EAAE,GAAIS;EACT,CAAE,CAAC,EACJ,CAAET,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,oBACC,IAAAJ,WAAA,CAAAgB,GAAA,EAACnB,WAAA,CAAAoB,WAAW;IACXC,IAAI,EAAC,OAAO;IACZX,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":[]}

package/build/dataform-controls/index.js

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getControl = getControl;
 exports.getControlByType = getControlByType;
+var _checkbox = _interopRequireDefault(require("./checkbox"));
 var _datetime = _interopRequireDefault(require("./datetime"));
+var _email = _interopRequireDefault(require("./email"));
 var _integer = _interopRequireDefault(require("./integer"));
 var _radio = _interopRequireDefault(require("./radio"));
 var _select = _interopRequireDefault(require("./select"));
 var _text = _interopRequireDefault(require("./text"));
+var _toggleGroup = _interopRequireDefault(require("./toggle-group"));
+var _boolean = _interopRequireDefault(require("./boolean"));
 /**
  * External dependencies
  */
@@ -20,11 +24,15 @@ var _text = _interopRequireDefault(require("./text"));
  */
 
 const FORM_CONTROLS = {
+  boolean: _boolean.default,
+  checkbox: _checkbox.default,
   datetime: _datetime.default,
+  email: _email.default,
   integer: _integer.default,
   radio: _radio.default,
   select: _select.default,
-  text: _text.default
+  text: _text.default,
+  toggleGroup: _toggleGroup.default
 };
 function getControl(field, fieldTypeDefinition) {
   if (typeof field.Edit === 'function') {

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

@@ -1 +1 @@
-{"version":3,"names":["_datetime","_interopRequireDefault","require","_integer","_radio","_select","_text","FORM_CONTROLS","datetime","integer","radio","select","text","getControl","field","fieldTypeDefinition","Edit","getControlByType","elements","type","Object","keys","includes"],"sources":["@wordpress/dataviews/src/dataform-controls/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tDataFormControlProps,\n\tField,\n\tFieldTypeDefinition,\n} from '../types';\nimport datetime from './datetime';\nimport integer from './integer';\nimport radio from './radio';\nimport select from './select';\nimport text from './text';\n\ninterface FormControls {\n\t[ key: string ]: ComponentType< DataFormControlProps< any > >;\n}\n\nconst FORM_CONTROLS: FormControls = {\n\tdatetime,\n\tinteger,\n\tradio,\n\tselect,\n\ttext,\n};\n\nexport function getControl< Item >(\n\tfield: Field< Item >,\n\tfieldTypeDefinition: FieldTypeDefinition< Item >\n) {\n\tif ( typeof field.Edit === 'function' ) {\n\t\treturn field.Edit;\n\t}\n\n\tif ( typeof field.Edit === 'string' ) {\n\t\treturn getControlByType( field.Edit );\n\t}\n\n\tif ( field.elements ) {\n\t\treturn getControlByType( 'select' );\n\t}\n\n\tif ( typeof fieldTypeDefinition.Edit === 'string' ) {\n\t\treturn getControlByType( fieldTypeDefinition.Edit );\n\t}\n\n\treturn fieldTypeDefinition.Edit;\n}\n\nexport function getControlByType( type: string ) {\n\tif ( Object.keys( FORM_CONTROLS ).includes( type ) ) {\n\t\treturn FORM_CONTROLS[ type ];\n\t}\n\n\tthrow 'Control ' + type + ' not found';\n}\n"],"mappings":";;;;;;;;AAaA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAgBA,MAAMK,aAA2B,GAAG;EACnCC,QAAQ,EAARA,iBAAQ;EACRC,OAAO,EAAPA,gBAAO;EACPC,KAAK,EAALA,cAAK;EACLC,MAAM,EAANA,eAAM;EACNC,IAAI,EAAJA;AACD,CAAC;AAEM,SAASC,UAAUA,CACzBC,KAAoB,EACpBC,mBAAgD,EAC/C;EACD,IAAK,OAAOD,KAAK,CAACE,IAAI,KAAK,UAAU,EAAG;IACvC,OAAOF,KAAK,CAACE,IAAI;EAClB;EAEA,IAAK,OAAOF,KAAK,CAACE,IAAI,KAAK,QAAQ,EAAG;IACrC,OAAOC,gBAAgB,CAAEH,KAAK,CAACE,IAAK,CAAC;EACtC;EAEA,IAAKF,KAAK,CAACI,QAAQ,EAAG;IACrB,OAAOD,gBAAgB,CAAE,QAAS,CAAC;EACpC;EAEA,IAAK,OAAOF,mBAAmB,CAACC,IAAI,KAAK,QAAQ,EAAG;IACnD,OAAOC,gBAAgB,CAAEF,mBAAmB,CAACC,IAAK,CAAC;EACpD;EAEA,OAAOD,mBAAmB,CAACC,IAAI;AAChC;AAEO,SAASC,gBAAgBA,CAAEE,IAAY,EAAG;EAChD,IAAKC,MAAM,CAACC,IAAI,CAAEd,aAAc,CAAC,CAACe,QAAQ,CAAEH,IAAK,CAAC,EAAG;IACpD,OAAOZ,aAAa,CAAEY,IAAI,CAAE;EAC7B;EAEA,MAAM,UAAU,GAAGA,IAAI,GAAG,YAAY;AACvC","ignoreList":[]}
+{"version":3,"names":["_checkbox","_interopRequireDefault","require","_datetime","_email","_integer","_radio","_select","_text","_toggleGroup","_boolean","FORM_CONTROLS","boolean","checkbox","datetime","email","integer","radio","select","text","toggleGroup","getControl","field","fieldTypeDefinition","Edit","getControlByType","elements","type","Object","keys","includes"],"sources":["@wordpress/dataviews/src/dataform-controls/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tDataFormControlProps,\n\tField,\n\tFieldTypeDefinition,\n} from '../types';\nimport checkbox from './checkbox';\nimport datetime from './datetime';\nimport email from './email';\nimport integer from './integer';\nimport radio from './radio';\nimport select from './select';\nimport text from './text';\nimport toggleGroup from './toggle-group';\nimport boolean from './boolean';\n\ninterface FormControls {\n\t[ key: string ]: ComponentType< DataFormControlProps< any > >;\n}\n\nconst FORM_CONTROLS: FormControls = {\n\tboolean,\n\tcheckbox,\n\tdatetime,\n\temail,\n\tinteger,\n\tradio,\n\tselect,\n\ttext,\n\ttoggleGroup,\n};\n\nexport function getControl< Item >(\n\tfield: Field< Item >,\n\tfieldTypeDefinition: FieldTypeDefinition< Item >\n) {\n\tif ( typeof field.Edit === 'function' ) {\n\t\treturn field.Edit;\n\t}\n\n\tif ( typeof field.Edit === 'string' ) {\n\t\treturn getControlByType( field.Edit );\n\t}\n\n\tif ( field.elements ) {\n\t\treturn getControlByType( 'select' );\n\t}\n\n\tif ( typeof fieldTypeDefinition.Edit === 'string' ) {\n\t\treturn getControlByType( fieldTypeDefinition.Edit );\n\t}\n\n\treturn fieldTypeDefinition.Edit;\n}\n\nexport function getControlByType( type: string ) {\n\tif ( Object.keys( FORM_CONTROLS ).includes( type ) ) {\n\t\treturn FORM_CONTROLS[ type ];\n\t}\n\n\tthrow 'Control ' + type + ' not found';\n}\n"],"mappings":";;;;;;;;AAaA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,QAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,OAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,KAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,YAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,QAAA,GAAAT,sBAAA,CAAAC,OAAA;AArBA;AACA;AACA;;AAGA;AACA;AACA;;AAoBA,MAAMS,aAA2B,GAAG;EACnCC,OAAO,EAAPA,gBAAO;EACPC,QAAQ,EAARA,iBAAQ;EACRC,QAAQ,EAARA,iBAAQ;EACRC,KAAK,EAALA,cAAK;EACLC,OAAO,EAAPA,gBAAO;EACPC,KAAK,EAALA,cAAK;EACLC,MAAM,EAANA,eAAM;EACNC,IAAI,EAAJA,aAAI;EACJC,WAAW,EAAXA;AACD,CAAC;AAEM,SAASC,UAAUA,CACzBC,KAAoB,EACpBC,mBAAgD,EAC/C;EACD,IAAK,OAAOD,KAAK,CAACE,IAAI,KAAK,UAAU,EAAG;IACvC,OAAOF,KAAK,CAACE,IAAI;EAClB;EAEA,IAAK,OAAOF,KAAK,CAACE,IAAI,KAAK,QAAQ,EAAG;IACrC,OAAOC,gBAAgB,CAAEH,KAAK,CAACE,IAAK,CAAC;EACtC;EAEA,IAAKF,KAAK,CAACI,QAAQ,EAAG;IACrB,OAAOD,gBAAgB,CAAE,QAAS,CAAC;EACpC;EAEA,IAAK,OAAOF,mBAAmB,CAACC,IAAI,KAAK,QAAQ,EAAG;IACnD,OAAOC,gBAAgB,CAAEF,mBAAmB,CAACC,IAAK,CAAC;EACpD;EAEA,OAAOD,mBAAmB,CAACC,IAAI;AAChC;AAEO,SAASC,gBAAgBA,CAAEE,IAAY,EAAG;EAChD,IAAKC,MAAM,CAACC,IAAI,CAAElB,aAAc,CAAC,CAACmB,QAAQ,CAAEH,IAAK,CAAC,EAAG;IACpD,OAAOhB,aAAa,CAAEgB,IAAI,CAAE;EAC7B;EAEA,MAAM,UAAU,GAAGA,IAAI,GAAG,YAAY;AACvC","ignoreList":[]}

package/build/dataform-controls/integer.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Integer;
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
@@ -15,11 +17,49 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
+function BetweenControls({
+  id,
+  value,
+  onChange,
+  hideLabelFromVision
+}) {
+  const [min = '', max = ''] = Array.isArray(value) ? value : [];
+  const onChangeMin = (0, _element.useCallback)(newValue => onChange({
+    [id]: [Number(newValue), max]
+  }), [id, onChange, max]);
+  const onChangeMax = (0, _element.useCallback)(newValue => onChange({
+    [id]: [min, Number(newValue)]
+  }), [id, onChange, min]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
+    __nextHasNoMarginBottom: true,
+    help: (0, _i18n.__)('The max. value must be greater than the min. value.'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
+      direction: "row",
+      gap: 4,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
+        label: (0, _i18n.__)('Min.'),
+        value: min,
+        max: max ? Number(max) - 1 : undefined,
+        onChange: onChangeMin,
+        __next40pxDefaultSize: true,
+        hideLabelFromVision: hideLabelFromVision
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
+        label: (0, _i18n.__)('Max.'),
+        value: max,
+        min: min ? Number(min) + 1 : undefined,
+        onChange: onChangeMax,
+        __next40pxDefaultSize: true,
+        hideLabelFromVision: hideLabelFromVision
+      })]
+    })
+  });
+}
 function Integer({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  operator
 }) {
   var _field$getValue;
   const {
@@ -33,6 +73,14 @@ function Integer({
   const onChangeControl = (0, _element.useCallback)(newValue => onChange({
     [id]: Number(newValue)
   }), [id, onChange]);
+  if (operator === _constants.OPERATOR_BETWEEN) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(BetweenControls, {
+      id: id,
+      value: value,
+      onChange: onChange,
+      hideLabelFromVision: hideLabelFromVision
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
     label: label,
     help: description,

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_jsxRuntime","Integer","data","field","onChange","hideLabelFromVision","_field$getValue","id","label","description","value","getValue","item","onChangeControl","useCallback","newValue","Number","jsx","__experimentalNumberControl","help","__next40pxDefaultSize"],"sources":["@wordpress/dataviews/src/dataform-controls/integer.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalNumberControl as NumberControl } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\n\nexport default function Integer< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\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[ id ]: Number( newValue ),\n\t\t\t} ),\n\t\t[ id, onChange ]\n\t);\n\n\treturn (\n\t\t<NumberControl\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":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAiD,IAAAE,WAAA,GAAAF,OAAA;AAJjD;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASG,OAAOA,CAAU;EACxCC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC;AAC6B,CAAC,EAAG;EAAA,IAAAC,eAAA;EACjC,MAAM;IAAEC,EAAE;IAAEC,KAAK;IAAEC;EAAY,CAAC,GAAGN,KAAK;EACxC,MAAMO,KAAK,IAAAJ,eAAA,GAAGH,KAAK,CAACQ,QAAQ,CAAE;IAAEC,IAAI,EAAEV;EAAK,CAAE,CAAC,cAAAI,eAAA,cAAAA,eAAA,GAAI,EAAE;EACpD,MAAMO,eAAe,GAAG,IAAAC,oBAAW,EAChCC,QAA4B,IAC7BX,QAAQ,CAAE;IACT,CAAEG,EAAE,GAAIS,MAAM,CAAED,QAAS;EAC1B,CAAE,CAAC,EACJ,CAAER,EAAE,EAAEH,QAAQ,CACf,CAAC;EAED,oBACC,IAAAJ,WAAA,CAAAiB,GAAA,EAACpB,WAAA,CAAAqB,2BAAa;IACbV,KAAK,EAAGA,KAAO;IACfW,IAAI,EAAGV,WAAa;IACpBC,KAAK,EAAGA,KAAO;IACfN,QAAQ,EAAGS,eAAiB;IAC5BO,qBAAqB;IACrBf,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_components","require","_element","_i18n","_constants","_jsxRuntime","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","OPERATOR_BETWEEN"],"sources":["@wordpress/dataviews/src/dataform-controls/integer.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tBaseControl,\n\t__experimentalNumberControl as NumberControl,\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';\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[ id ]: Number( newValue ),\n\t\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<NumberControl\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/select.js

@@ -48,6 +48,7 @@ function Select({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
     label: label,
     value: value,
+    help: field.description,
     options: elements,
     onChange: onChangeControl,
     __next40pxDefaultSize: true,

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_i18n","_jsxRuntime","Select","data","field","onChange","hideLabelFromVision","_field$getValue","_field$elements","id","label","value","getValue","item","onChangeControl","useCallback","newValue","elements","__","jsx","SelectControl","options","__next40pxDefaultSize","__nextHasNoMarginBottom"],"sources":["@wordpress/dataviews/src/dataform-controls/select.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SelectControl } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\n\nexport default function Select< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label } = field;\n\tconst value = field.getValue( { item: data } ) ?? '';\n\tconst onChangeControl = useCallback(\n\t\t( newValue: any ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: newValue,\n\t\t\t} ),\n\t\t[ id, onChange ]\n\t);\n\n\tconst elements = [\n\t\t/*\n\t\t * Value can be undefined when:\n\t\t *\n\t\t * - the field is not required\n\t\t * - in bulk editing\n\t\t *\n\t\t */\n\t\t{ label: __( 'Select item' ), value: '' },\n\t\t...( field?.elements ?? [] ),\n\t];\n\n\treturn (\n\t\t<SelectControl\n\t\t\tlabel={ label }\n\t\t\tvalue={ value }\n\t\t\toptions={ elements }\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;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAqC,IAAAG,WAAA,GAAAH,OAAA;AALrC;AACA;AACA;;AAKA;AACA;AACA;;AAGe,SAASI,MAAMA,CAAU;EACvCC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC;AAC6B,CAAC,EAAG;EAAA,IAAAC,eAAA,EAAAC,eAAA;EACjC,MAAM;IAAEC,EAAE;IAAEC;EAAM,CAAC,GAAGN,KAAK;EAC3B,MAAMO,KAAK,IAAAJ,eAAA,GAAGH,KAAK,CAACQ,QAAQ,CAAE;IAAEC,IAAI,EAAEV;EAAK,CAAE,CAAC,cAAAI,eAAA,cAAAA,eAAA,GAAI,EAAE;EACpD,MAAMO,eAAe,GAAG,IAAAC,oBAAW,EAChCC,QAAa,IACdX,QAAQ,CAAE;IACT,CAAEI,EAAE,GAAIO;EACT,CAAE,CAAC,EACJ,CAAEP,EAAE,EAAEJ,QAAQ,CACf,CAAC;EAED,MAAMY,QAAQ,GAAG;EAChB;AACF;AACA;AACA;AACA;AACA;AACA;EACE;IAAEP,KAAK,EAAE,IAAAQ,QAAE,EAAE,aAAc,CAAC;IAAEP,KAAK,EAAE;EAAG,CAAC,EACzC,KAAAH,eAAA,GAAKJ,KAAK,EAAEa,QAAQ,cAAAT,eAAA,cAAAA,eAAA,GAAI,EAAE,CAAE,CAC5B;EAED,oBACC,IAAAP,WAAA,CAAAkB,GAAA,EAACtB,WAAA,CAAAuB,aAAa;IACbV,KAAK,EAAGA,KAAO;IACfC,KAAK,EAAGA,KAAO;IACfU,OAAO,EAAGJ,QAAU;IACpBZ,QAAQ,EAAGS,eAAiB;IAC5BQ,qBAAqB;IACrBC,uBAAuB;IACvBjB,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_components","require","_element","_i18n","_jsxRuntime","Select","data","field","onChange","hideLabelFromVision","_field$getValue","_field$elements","id","label","value","getValue","item","onChangeControl","useCallback","newValue","elements","__","jsx","SelectControl","help","description","options","__next40pxDefaultSize","__nextHasNoMarginBottom"],"sources":["@wordpress/dataviews/src/dataform-controls/select.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SelectControl } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\n\nexport default function Select< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label } = field;\n\tconst value = field.getValue( { item: data } ) ?? '';\n\tconst onChangeControl = useCallback(\n\t\t( newValue: any ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: newValue,\n\t\t\t} ),\n\t\t[ id, onChange ]\n\t);\n\n\tconst elements = [\n\t\t/*\n\t\t * Value can be undefined when:\n\t\t *\n\t\t * - the field is not required\n\t\t * - in bulk editing\n\t\t *\n\t\t */\n\t\t{ label: __( 'Select item' ), value: '' },\n\t\t...( field?.elements ?? [] ),\n\t];\n\n\treturn (\n\t\t<SelectControl\n\t\t\tlabel={ label }\n\t\t\tvalue={ value }\n\t\t\thelp={ field.description }\n\t\t\toptions={ elements }\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;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAqC,IAAAG,WAAA,GAAAH,OAAA;AALrC;AACA;AACA;;AAKA;AACA;AACA;;AAGe,SAASI,MAAMA,CAAU;EACvCC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC;AAC6B,CAAC,EAAG;EAAA,IAAAC,eAAA,EAAAC,eAAA;EACjC,MAAM;IAAEC,EAAE;IAAEC;EAAM,CAAC,GAAGN,KAAK;EAC3B,MAAMO,KAAK,IAAAJ,eAAA,GAAGH,KAAK,CAACQ,QAAQ,CAAE;IAAEC,IAAI,EAAEV;EAAK,CAAE,CAAC,cAAAI,eAAA,cAAAA,eAAA,GAAI,EAAE;EACpD,MAAMO,eAAe,GAAG,IAAAC,oBAAW,EAChCC,QAAa,IACdX,QAAQ,CAAE;IACT,CAAEI,EAAE,GAAIO;EACT,CAAE,CAAC,EACJ,CAAEP,EAAE,EAAEJ,QAAQ,CACf,CAAC;EAED,MAAMY,QAAQ,GAAG;EAChB;AACF;AACA;AACA;AACA;AACA;AACA;EACE;IAAEP,KAAK,EAAE,IAAAQ,QAAE,EAAE,aAAc,CAAC;IAAEP,KAAK,EAAE;EAAG,CAAC,EACzC,KAAAH,eAAA,GAAKJ,KAAK,EAAEa,QAAQ,cAAAT,eAAA,cAAAA,eAAA,GAAI,EAAE,CAAE,CAC5B;EAED,oBACC,IAAAP,WAAA,CAAAkB,GAAA,EAACtB,WAAA,CAAAuB,aAAa;IACbV,KAAK,EAAGA,KAAO;IACfC,KAAK,EAAGA,KAAO;IACfU,IAAI,EAAGjB,KAAK,CAACkB,WAAa;IAC1BC,OAAO,EAAGN,QAAU;IACpBZ,QAAQ,EAAGS,eAAiB;IAC5BU,qBAAqB;IACrBC,uBAAuB;IACvBnB,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}

package/build/dataform-controls/text.js

@@ -24,7 +24,8 @@ function Text({
   const {
     id,
     label,
-    placeholder
+    placeholder,
+    description
   } = field;
   const value = field.getValue({
     item: data
@@ -36,6 +37,7 @@ function Text({
     label: label,
     placeholder: placeholder,
     value: value !== null && value !== void 0 ? value : '',
+    help: description,
     onChange: onChangeControl,
     __next40pxDefaultSize: true,
     __nextHasNoMarginBottom: true,

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_jsxRuntime","Text","data","field","onChange","hideLabelFromVision","id","label","placeholder","value","getValue","item","onChangeControl","useCallback","newValue","jsx","TextControl","__next40pxDefaultSize","__nextHasNoMarginBottom"],"sources":["@wordpress/dataviews/src/dataform-controls/text.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { TextControl } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\n\nexport default function Text< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label, placeholder } = 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<TextControl\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\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;AAAiD,IAAAE,WAAA,GAAAF,OAAA;AAJjD;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASG,IAAIA,CAAU;EACrCC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC,KAAK;IAAEC;EAAY,CAAC,GAAGL,KAAK;EACxC,MAAMM,KAAK,GAAGN,KAAK,CAACO,QAAQ,CAAE;IAAEC,IAAI,EAAET;EAAK,CAAE,CAAC;EAE9C,MAAMU,eAAe,GAAG,IAAAC,oBAAW,EAChCC,QAAgB,IACjBV,QAAQ,CAAE;IACT,CAAEE,EAAE,GAAIQ;EACT,CAAE,CAAC,EACJ,CAAER,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,oBACC,IAAAJ,WAAA,CAAAe,GAAA,EAAClB,WAAA,CAAAmB,WAAW;IACXT,KAAK,EAAGA,KAAO;IACfC,WAAW,EAAGA,WAAa;IAC3BC,KAAK,EAAGA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAI;IACrBL,QAAQ,EAAGQ,eAAiB;IAC5BK,qBAAqB;IACrBC,uBAAuB;IACvBb,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_components","require","_element","_jsxRuntime","Text","data","field","onChange","hideLabelFromVision","id","label","placeholder","description","value","getValue","item","onChangeControl","useCallback","newValue","jsx","TextControl","help","__next40pxDefaultSize","__nextHasNoMarginBottom"],"sources":["@wordpress/dataviews/src/dataform-controls/text.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { TextControl } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\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<TextControl\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;AAAiD,IAAAE,WAAA,GAAAF,OAAA;AAJjD;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASG,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,IAAAJ,WAAA,CAAAgB,GAAA,EAACnB,WAAA,CAAAoB,WAAW;IACXV,KAAK,EAAGA,KAAO;IACfC,WAAW,EAAGA,WAAa;IAC3BE,KAAK,EAAGA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAI;IACrBQ,IAAI,EAAGT,WAAa;IACpBL,QAAQ,EAAGS,eAAiB;IAC5BM,qBAAqB;IACrBC,uBAAuB;IACvBf,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}

package/build/dataform-controls/toggle-group.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ToggleGroup;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function ToggleGroup({
+  data,
+  field,
+  onChange,
+  hideLabelFromVision
+}) {
+  const {
+    id
+  } = field;
+  const value = field.getValue({
+    item: data
+  });
+  const onChangeControl = (0, _element.useCallback)(newValue => onChange({
+    [id]: newValue
+  }), [id, onChange]);
+  if (field.elements) {
+    const selectedOption = field.elements.find(el => el.value === value);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      isBlock: true,
+      label: field.label,
+      help: selectedOption?.description || field.description,
+      onChange: onChangeControl,
+      value: value,
+      hideLabelFromVision: hideLabelFromVision,
+      children: field.elements.map(el => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
+        label: el.label,
+        value: el.value
+      }, el.value))
+    });
+  }
+  return null;
+}
+//# sourceMappingURL=toggle-group.js.map

package/build/dataform-controls/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_element","_jsxRuntime","ToggleGroup","data","field","onChange","hideLabelFromVision","id","value","getValue","item","onChangeControl","useCallback","newValue","elements","selectedOption","find","el","jsx","__experimentalToggleGroupControl","__next40pxDefaultSize","__nextHasNoMarginBottom","isBlock","label","help","description","children","map","__experimentalToggleGroupControlOption"],"sources":["@wordpress/dataviews/src/dataform-controls/toggle-group.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\n\nexport default function ToggleGroup< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { id } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | number | undefined ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: newValue,\n\t\t\t} ),\n\t\t[ id, onChange ]\n\t);\n\n\tif ( field.elements ) {\n\t\tconst selectedOption = field.elements.find(\n\t\t\t( el ) => el.value === value\n\t\t);\n\t\treturn (\n\t\t\t<ToggleGroupControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tisBlock\n\t\t\t\tlabel={ field.label }\n\t\t\t\thelp={ selectedOption?.description || field.description }\n\t\t\t\tonChange={ onChangeControl }\n\t\t\t\tvalue={ value }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t>\n\t\t\t\t{ field.elements.map( ( el ) => (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ el.value }\n\t\t\t\t\t\tlabel={ el.label }\n\t\t\t\t\t\tvalue={ el.value }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t);\n\t}\n\n\treturn null;\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AAAiD,IAAAE,WAAA,GAAAF,OAAA;AAPjD;AACA;AACA;;AAOA;AACA;AACA;;AAGe,SAASG,WAAWA,CAAU;EAC5CC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC;EAAG,CAAC,GAAGH,KAAK;EACpB,MAAMI,KAAK,GAAGJ,KAAK,CAACK,QAAQ,CAAE;IAAEC,IAAI,EAAEP;EAAK,CAAE,CAAC;EAE9C,MAAMQ,eAAe,GAAG,IAAAC,oBAAW,EAChCC,QAAqC,IACtCR,QAAQ,CAAE;IACT,CAAEE,EAAE,GAAIM;EACT,CAAE,CAAC,EACJ,CAAEN,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,IAAKD,KAAK,CAACU,QAAQ,EAAG;IACrB,MAAMC,cAAc,GAAGX,KAAK,CAACU,QAAQ,CAACE,IAAI,CACvCC,EAAE,IAAMA,EAAE,CAACT,KAAK,KAAKA,KACxB,CAAC;IACD,oBACC,IAAAP,WAAA,CAAAiB,GAAA,EAACpB,WAAA,CAAAqB,gCAAkB;MAClBC,qBAAqB;MACrBC,uBAAuB;MACvBC,OAAO;MACPC,KAAK,EAAGnB,KAAK,CAACmB,KAAO;MACrBC,IAAI,EAAGT,cAAc,EAAEU,WAAW,IAAIrB,KAAK,CAACqB,WAAa;MACzDpB,QAAQ,EAAGM,eAAiB;MAC5BH,KAAK,EAAGA,KAAO;MACfF,mBAAmB,EAAGA,mBAAqB;MAAAoB,QAAA,EAEzCtB,KAAK,CAACU,QAAQ,CAACa,GAAG,CAAIV,EAAE,iBACzB,IAAAhB,WAAA,CAAAiB,GAAA,EAACpB,WAAA,CAAA8B,sCAAwB;QAExBL,KAAK,EAAGN,EAAE,CAACM,KAAO;QAClBf,KAAK,EAAGS,EAAE,CAACT;MAAO,GAFZS,EAAE,CAACT,KAGT,CACA;IAAC,CACgB,CAAC;EAEvB;EAEA,OAAO,IAAI;AACZ","ignoreList":[]}

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

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

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","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={ 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,EAAG,CAAG;IAAAhB,QAAA,EAClBW,oBAAoB,CAACM,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,MAAMT,eAAe,GAAG,CAAE,IAAAa,gCAAe,EAAEL,SAAU,CAAC,GACnDb,kBAAkB,CAAEa,SAAU,CAAC,GAC/BM,SAAS;MAEZ,IACCd,eAAe,IACfA,eAAe,CAACe,SAAS,IACzB,CAAEf,eAAe,CAACe,SAAS,CAAE5B,IAAK,CAAC,EAClC;QACD,OAAO,IAAI;MACZ;MAEA,IAAKG,QAAQ,EAAG;QACf,OAAOA,QAAQ,CAAEmB,WAAW,EAAED,SAAU,CAAC;MAC1C;MAEA,oBACC,IAAAvB,WAAA,CAAAmB,GAAA,EAACK,WAAW;QAEXtB,IAAI,EAAGA,IAAM;QACbS,KAAK,EAAGY,SAAW;QACnBnB,QAAQ,EAAGA;MAAU,GAHfmB,SAAS,CAACV,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","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":[]}

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FormPanelField;
+var _clsx = _interopRequireDefault(require("clsx"));
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
@@ -13,6 +14,10 @@ var _dataformContext = _interopRequireDefault(require("../../components/dataform
 var _dataFormLayout = require("../data-form-layout");
 var _isCombinedField = require("../is-combined-field");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -103,10 +108,13 @@ function PanelDropdown({
       "aria-expanded": isOpen,
       "aria-label": (0, _i18n.sprintf)(
       // translators: %s: Field name.
-      (0, _i18n._x)('Edit %s', 'field'), fieldLabel),
+      (0, _i18n._x)('Edit %s', 'field'), fieldLabel || ''),
       onClick: onToggle,
+      disabled: fieldDefinition.readOnly === true,
+      accessibleWhenDisabled: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(fieldDefinition.render, {
-        item: data
+        item: data,
+        field: fieldDefinition
       })
     }),
     renderContent: ({
@@ -150,7 +158,6 @@ function FormPanelField({
     }
     return fieldDef.id === field.id;
   });
-  const labelPosition = (_field$labelPosition = field.labelPosition) !== null && _field$labelPosition !== void 0 ? _field$labelPosition : 'side';
 
   // Use internal state instead of a ref to make sure that the component
   // re-renders when the popover's anchor updates.
@@ -158,13 +165,15 @@ function FormPanelField({
   if (!fieldDefinition) {
     return null;
   }
+  const labelPosition = (_field$labelPosition = field.labelPosition) !== null && _field$labelPosition !== void 0 ? _field$labelPosition : 'side';
+  const labelClassName = (0, _clsx.default)('dataforms-layouts-panel__field-label', `dataforms-layouts-panel__field-label--label-position-${labelPosition}`);
   const fieldLabel = (0, _isCombinedField.isCombinedField)(field) ? field.label : fieldDefinition?.label;
   if (labelPosition === 'top') {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
       className: "dataforms-layouts-panel__field",
       spacing: 0,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "dataforms-layouts-panel__field-label",
+        className: labelClassName,
         style: {
           paddingBottom: 0
         },
@@ -201,7 +210,7 @@ function FormPanelField({
     ref: setPopoverAnchor,
     className: "dataforms-layouts-panel__field",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "dataforms-layouts-panel__field-label",
+      className: labelClassName,
       children: fieldLabel
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "dataforms-layouts-panel__field-control",

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_element","_icons","_dataformContext","_interopRequireDefault","_dataFormLayout","_isCombinedField","_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","type","fields","map","child","id","popoverProps","anchor","placement","offset","shift","Dropdown","contentClassName","focusOnMount","toggleProps","variant","tooltipPosition","renderToggle","isOpen","onToggle","includes","sprintf","_x","render","item","renderContent","Fragment","DataFormLayout","FieldLayout","nestedField","_form$fields","hideLabelFromVision","length","FormPanelField","_field$labelPosition","useContext","DataFormContext","find","fieldDef","filter","firstChildFieldId","setPopoverAnchor","useState","style","paddingBottom","ref"],"sources":["@wordpress/dataviews/src/dataforms-layouts/panel/index.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 { useState, useMemo, useContext } from '@wordpress/element';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tForm,\n\tFormField,\n\tFieldLayoutProps,\n\tNormalizedField,\n\tSimpleFormField,\n} from '../../types';\nimport DataFormContext from '../../components/dataform-context';\nimport { DataFormLayout } from '../data-form-layout';\nimport { isCombinedField } from '../is-combined-field';\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\tconst form = useMemo( () => {\n\t\tif ( isCombinedField( field ) ) {\n\t\t\treturn {\n\t\t\t\ttype: 'regular' as const,\n\t\t\t\tfields: field.children.map( ( child ) => {\n\t\t\t\t\tif ( typeof child === 'string' ) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: child,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\treturn child;\n\t\t\t\t} ),\n\t\t\t};\n\t\t}\n\t\t// If not explicit children return the field id itself.\n\t\treturn {\n\t\t\ttype: 'regular' as const,\n\t\t\tfields: [ { id: field.id } ],\n\t\t};\n\t}, [ field ] );\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>\n\t\t\t\t\t<fieldDefinition.render item={ data } />\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 as 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 function FormPanelField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst fieldDefinition = fields.find( ( fieldDef ) => {\n\t\t// Default to the first child if it is a combined field.\n\t\tif ( isCombinedField( field ) ) {\n\t\t\tconst children = field.children.filter(\n\t\t\t\t( child ): child is string | SimpleFormField =>\n\t\t\t\t\ttypeof child === 'string' || ! isCombinedField( child )\n\t\t\t);\n\t\t\tconst firstChildFieldId =\n\t\t\t\ttypeof children[ 0 ] === 'string'\n\t\t\t\t\t? children[ 0 ]\n\t\t\t\t\t: children[ 0 ].id;\n\t\t\treturn fieldDef.id === firstChildFieldId;\n\t\t}\n\t\treturn fieldDef.id === field.id;\n\t} );\n\tconst labelPosition = field.labelPosition ?? 'side';\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\n\tif ( ! fieldDefinition ) {\n\t\treturn null;\n\t}\n\n\tconst fieldLabel = isCombinedField( field )\n\t\t? field.label\n\t\t: fieldDefinition?.label;\n\n\tif ( labelPosition === 'top' ) {\n\t\treturn (\n\t\t\t<VStack className=\"dataforms-layouts-panel__field\" spacing={ 0 }>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"dataforms-layouts-panel__field-label\"\n\t\t\t\t\tstyle={ { paddingBottom: 0 } }\n\t\t\t\t>\n\t\t\t\t\t{ fieldLabel }\n\t\t\t\t</div>\n\t\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t\t<PanelDropdown\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t);\n\t}\n\n\tif ( labelPosition === 'none' ) {\n\t\treturn (\n\t\t\t<div className=\"dataforms-layouts-panel__field\">\n\t\t\t\t<PanelDropdown\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Defaults to label position side.\n\treturn (\n\t\t<HStack\n\t\t\tref={ setPopoverAnchor }\n\t\t\tclassName=\"dataforms-layouts-panel__field\"\n\t\t>\n\t\t\t<div className=\"dataforms-layouts-panel__field-label\">\n\t\t\t\t{ fieldLabel }\n\t\t\t</div>\n\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t<PanelDropdown\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</HStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_components","_i18n","_element","_icons","_dataformContext","_dataFormLayout","_isCombinedField","_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","type","fields","map","child","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","FormPanelField","_field$labelPosition","useContext","DataFormContext","find","fieldDef","filter","firstChildFieldId","setPopoverAnchor","useState","labelClassName","clsx","style","paddingBottom","ref"],"sources":["@wordpress/dataviews/src/dataforms-layouts/panel/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\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 { useState, useMemo, useContext } from '@wordpress/element';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tForm,\n\tFormField,\n\tFieldLayoutProps,\n\tNormalizedField,\n\tSimpleFormField,\n} from '../../types';\nimport DataFormContext from '../../components/dataform-context';\nimport { DataFormLayout } from '../data-form-layout';\nimport { isCombinedField } from '../is-combined-field';\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\tconst form = useMemo( () => {\n\t\tif ( isCombinedField( field ) ) {\n\t\t\treturn {\n\t\t\t\ttype: 'regular' as const,\n\t\t\t\tfields: field.children.map( ( child ) => {\n\t\t\t\t\tif ( typeof child === 'string' ) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: child,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\treturn child;\n\t\t\t\t} ),\n\t\t\t};\n\t\t}\n\t\t// If not explicit children return the field id itself.\n\t\treturn {\n\t\t\ttype: 'regular' as const,\n\t\t\tfields: [ { id: field.id } ],\n\t\t};\n\t}, [ field ] );\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 as 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 function FormPanelField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst fieldDefinition = fields.find( ( fieldDef ) => {\n\t\t// Default to the first child if it is a combined field.\n\t\tif ( isCombinedField( field ) ) {\n\t\t\tconst children = field.children.filter(\n\t\t\t\t( child ): child is string | SimpleFormField =>\n\t\t\t\t\ttypeof child === 'string' || ! isCombinedField( child )\n\t\t\t);\n\t\t\tconst firstChildFieldId =\n\t\t\t\ttypeof children[ 0 ] === 'string'\n\t\t\t\t\t? children[ 0 ]\n\t\t\t\t\t: children[ 0 ].id;\n\t\t\treturn fieldDef.id === firstChildFieldId;\n\t\t}\n\t\treturn fieldDef.id === field.id;\n\t} );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\n\tif ( ! fieldDefinition ) {\n\t\treturn null;\n\t}\n\n\tconst labelPosition = field.labelPosition ?? 'side';\n\tconst labelClassName = clsx(\n\t\t'dataforms-layouts-panel__field-label',\n\t\t`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`\n\t);\n\tconst fieldLabel = isCombinedField( field )\n\t\t? field.label\n\t\t: fieldDefinition?.label;\n\n\tif ( labelPosition === 'top' ) {\n\t\treturn (\n\t\t\t<VStack className=\"dataforms-layouts-panel__field\" spacing={ 0 }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ labelClassName }\n\t\t\t\t\tstyle={ { paddingBottom: 0 } }\n\t\t\t\t>\n\t\t\t\t\t{ fieldLabel }\n\t\t\t\t</div>\n\t\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t\t<PanelDropdown\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t);\n\t}\n\n\tif ( labelPosition === 'none' ) {\n\t\treturn (\n\t\t\t<div className=\"dataforms-layouts-panel__field\">\n\t\t\t\t<PanelDropdown\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Defaults to label position side.\n\treturn (\n\t\t<HStack\n\t\t\tref={ setPopoverAnchor }\n\t\t\tclassName=\"dataforms-layouts-panel__field\"\n\t\t>\n\t\t\t<div className={ labelClassName }>{ fieldLabel }</div>\n\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t<PanelDropdown\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</HStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -5,12 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FormRegularField;
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _dataformContext = _interopRequireDefault(require("../../components/dataform-context"));
 var _dataFormLayout = require("../data-form-layout");
 var _isCombinedField = require("../is-combined-field");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -77,18 +82,21 @@ function FormRegularField({
   }
   const labelPosition = (_field$labelPosition = field.labelPosition) !== null && _field$labelPosition !== void 0 ? _field$labelPosition : 'top';
   const fieldDefinition = fields.find(fieldDef => fieldDef.id === field.id);
-  if (!fieldDefinition) {
+  if (!fieldDefinition || !fieldDefinition.Edit) {
     return null;
   }
   if (labelPosition === 'side') {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
       className: "dataforms-layouts-regular__field",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "dataforms-layouts-regular__field-label",
+        className: (0, _clsx.default)('dataforms-layouts-regular__field-label', `dataforms-layouts-regular__field-label--label-position-${labelPosition}`),
         children: fieldDefinition.label
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "dataforms-layouts-regular__field-control",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(fieldDefinition.Edit, {
+        children: fieldDefinition.readOnly === true ? /*#__PURE__*/(0, _jsxRuntime.jsx)(fieldDefinition.render, {
+          item: data,
+          field: fieldDefinition
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(fieldDefinition.Edit, {
           data: data,
           field: fieldDefinition,
           onChange: onChange,
@@ -99,7 +107,18 @@ function FormRegularField({
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "dataforms-layouts-regular__field",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(fieldDefinition.Edit, {
+    children: fieldDefinition.readOnly === true ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [!hideLabelFromVision && labelPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dataforms-layouts-regular__field-label",
+        children: fieldDefinition.label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dataforms-layouts-regular__field-control",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(fieldDefinition.render, {
+          item: data,
+          field: fieldDefinition
+        })
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(fieldDefinition.Edit, {
       data: data,
       field: fieldDefinition,
       onChange: onChange,