@wordpress/dataviews 4.1.0 → 4.3.0

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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, TimePicker, VisuallyHidden } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function DateTime({
+  data,
+  field,
+  onChange,
+  hideLabelFromVision
+}) {
+  const {
+    id,
+    label
+  } = field;
+  const value = field.getValue({
+    item: data
+  });
+  const onChangeControl = useCallback(newValue => onChange({
+    [id]: newValue
+  }), [id, onChange]);
+  return /*#__PURE__*/_jsxs("fieldset", {
+    className: "dataviews-controls__datetime",
+    children: [!hideLabelFromVision && /*#__PURE__*/_jsx(BaseControl.VisualLabel, {
+      as: "legend",
+      children: label
+    }), hideLabelFromVision && /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "legend",
+      children: label
+    }), /*#__PURE__*/_jsx(TimePicker, {
+      currentTime: value,
+      onChange: onChangeControl,
+      hideLabelFromVision: true
+    })]
+  });
+}
+//# sourceMappingURL=datetime.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["BaseControl","TimePicker","VisuallyHidden","useCallback","jsx","_jsx","jsxs","_jsxs","DateTime","data","field","onChange","hideLabelFromVision","id","label","value","getValue","item","onChangeControl","newValue","className","children","VisualLabel","as","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":"AAAA;AACA;AACA;AACA,SAASA,WAAW,EAAEC,UAAU,EAAEC,cAAc,QAAQ,uBAAuB;AAC/E,SAASC,WAAW,QAAQ,oBAAoB;;AAEhD;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAKA,eAAe,SAASC,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,GAAGf,WAAW,CAChCgB,QAAuB,IAAMR,QAAQ,CAAE;IAAE,CAAEE,EAAE,GAAIM;EAAS,CAAE,CAAC,EAC/D,CAAEN,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,oBACCJ,KAAA;IAAUa,SAAS,EAAC,8BAA8B;IAAAC,QAAA,GAC/C,CAAET,mBAAmB,iBACtBP,IAAA,CAACL,WAAW,CAACsB,WAAW;MAACC,EAAE,EAAC,QAAQ;MAAAF,QAAA,EACjCP;IAAK,CACiB,CACzB,EACCF,mBAAmB,iBACpBP,IAAA,CAACH,cAAc;MAACqB,EAAE,EAAC,QAAQ;MAAAF,QAAA,EAAGP;IAAK,CAAkB,CACrD,eACDT,IAAA,CAACJ,UAAU;MACVuB,WAAW,EAAGT,KAAO;MACrBJ,QAAQ,EAAGO,eAAiB;MAC5BN,mBAAmB;IAAA,CACnB,CAAC;EAAA,CACO,CAAC;AAEb","ignoreList":[]}

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+import datetime from './datetime';
+import integer from './integer';
+import radio from './radio';
+import select from './select';
+import text from './text';
+const FORM_CONTROLS = {
+  datetime,
+  integer,
+  radio,
+  select,
+  text
+};
+export function getControl(field, fieldTypeDefinition) {
+  if (typeof field.Edit === 'function') {
+    return field.Edit;
+  }
+  if (typeof field.Edit === 'string') {
+    return getControlByType(field.Edit);
+  }
+  if (field.elements) {
+    return getControlByType('select');
+  }
+  if (typeof fieldTypeDefinition.Edit === 'string') {
+    return getControlByType(fieldTypeDefinition.Edit);
+  }
+  return fieldTypeDefinition.Edit;
+}
+export function getControlByType(type) {
+  if (Object.keys(FORM_CONTROLS).includes(type)) {
+    return FORM_CONTROLS[type];
+  }
+  throw 'Control ' + type + ' not found';
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["datetime","integer","radio","select","text","FORM_CONTROLS","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;AACA;AACA;;AAGA;AACA;AACA;;AAMA,OAAOA,QAAQ,MAAM,YAAY;AACjC,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,IAAI,MAAM,QAAQ;AAMzB,MAAMC,aAA2B,GAAG;EACnCL,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,MAAM;EACNC;AACD,CAAC;AAED,OAAO,SAASE,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;AAEA,OAAO,SAASC,gBAAgBA,CAAEE,IAAY,EAAG;EAChD,IAAKC,MAAM,CAACC,IAAI,CAAET,aAAc,CAAC,CAACU,QAAQ,CAAEH,IAAK,CAAC,EAAG;IACpD,OAAOP,aAAa,CAAEO,IAAI,CAAE;EAC7B;EAEA,MAAM,UAAU,GAAGA,IAAI,GAAG,YAAY;AACvC","ignoreList":[]}

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

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Integer({
+  data,
+  field,
+  onChange,
+  hideLabelFromVision
+}) {
+  var _field$getValue;
+  const {
+    id,
+    label,
+    description
+  } = field;
+  const value = (_field$getValue = field.getValue({
+    item: data
+  })) !== null && _field$getValue !== void 0 ? _field$getValue : '';
+  const onChangeControl = useCallback(newValue => onChange({
+    [id]: Number(newValue)
+  }), [id, onChange]);
+  return /*#__PURE__*/_jsx(NumberControl, {
+    label: label,
+    help: description,
+    value: value,
+    onChange: onChangeControl,
+    __next40pxDefaultSize: true,
+    hideLabelFromVision: hideLabelFromVision
+  });
+}
+//# sourceMappingURL=integer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalNumberControl","NumberControl","useCallback","jsx","_jsx","Integer","data","field","onChange","hideLabelFromVision","_field$getValue","id","label","description","value","getValue","item","onChangeControl","newValue","Number","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":"AAAA;AACA;AACA;AACA,SAASA,2BAA2B,IAAIC,aAAa,QAAQ,uBAAuB;AACpF,SAASC,WAAW,QAAQ,oBAAoB;;AAEhD;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAKA,eAAe,SAASC,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,GAAGf,WAAW,CAChCgB,QAA4B,IAC7BV,QAAQ,CAAE;IACT,CAAEG,EAAE,GAAIQ,MAAM,CAAED,QAAS;EAC1B,CAAE,CAAC,EACJ,CAAEP,EAAE,EAAEH,QAAQ,CACf,CAAC;EAED,oBACCJ,IAAA,CAACH,aAAa;IACbW,KAAK,EAAGA,KAAO;IACfQ,IAAI,EAAGP,WAAa;IACpBC,KAAK,EAAGA,KAAO;IACfN,QAAQ,EAAGS,eAAiB;IAC5BI,qBAAqB;IACrBZ,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}

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

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { RadioControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Radio({
+  data,
+  field,
+  onChange,
+  hideLabelFromVision
+}) {
+  const {
+    id,
+    label
+  } = field;
+  const value = field.getValue({
+    item: data
+  });
+  const onChangeControl = useCallback(newValue => onChange({
+    [id]: newValue
+  }), [id, onChange]);
+  if (field.elements) {
+    return /*#__PURE__*/_jsx(RadioControl, {
+      label: label,
+      onChange: onChangeControl,
+      options: field.elements,
+      selected: value,
+      hideLabelFromVision: hideLabelFromVision
+    });
+  }
+  return null;
+}
+//# sourceMappingURL=radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["RadioControl","useCallback","jsx","_jsx","Radio","data","field","onChange","hideLabelFromVision","id","label","value","getValue","item","onChangeControl","newValue","elements","options","selected"],"sources":["@wordpress/dataviews/src/dataform-controls/radio.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { RadioControl } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\n\nexport default function Radio< 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 ) =>\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\treturn (\n\t\t\t<RadioControl\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChangeControl }\n\t\t\t\toptions={ field.elements }\n\t\t\t\tselected={ value }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,uBAAuB;AACpD,SAASC,WAAW,QAAQ,oBAAoB;;AAEhD;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAKA,eAAe,SAASC,KAAKA,CAAU;EACtCC,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,GAAGb,WAAW,CAChCc,QAAgB,IACjBR,QAAQ,CAAE;IACT,CAAEE,EAAE,GAAIM;EACT,CAAE,CAAC,EACJ,CAAEN,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,IAAKD,KAAK,CAACU,QAAQ,EAAG;IACrB,oBACCb,IAAA,CAACH,YAAY;MACZU,KAAK,EAAGA,KAAO;MACfH,QAAQ,EAAGO,eAAiB;MAC5BG,OAAO,EAAGX,KAAK,CAACU,QAAU;MAC1BE,QAAQ,EAAGP,KAAO;MAClBH,mBAAmB,EAAGA;IAAqB,CAC3C,CAAC;EAEJ;EAEA,OAAO,IAAI;AACZ","ignoreList":[]}

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

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Select({
+  data,
+  field,
+  onChange,
+  hideLabelFromVision
+}) {
+  var _field$getValue, _field$elements;
+  const {
+    id,
+    label
+  } = field;
+  const value = (_field$getValue = field.getValue({
+    item: data
+  })) !== null && _field$getValue !== void 0 ? _field$getValue : '';
+  const onChangeControl = useCallback(newValue => onChange({
+    [id]: newValue
+  }), [id, onChange]);
+  const elements = [
+  /*
+   * Value can be undefined when:
+   *
+   * - the field is not required
+   * - in bulk editing
+   *
+   */
+  {
+    label: __('Select item'),
+    value: ''
+  }, ...((_field$elements = field?.elements) !== null && _field$elements !== void 0 ? _field$elements : [])];
+  return /*#__PURE__*/_jsx(SelectControl, {
+    label: label,
+    value: value,
+    options: elements,
+    onChange: onChangeControl,
+    __next40pxDefaultSize: true,
+    __nextHasNoMarginBottom: true,
+    hideLabelFromVision: hideLabelFromVision
+  });
+}
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["SelectControl","useCallback","__","jsx","_jsx","Select","data","field","onChange","hideLabelFromVision","_field$getValue","_field$elements","id","label","value","getValue","item","onChangeControl","newValue","elements","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":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,uBAAuB;AACrD,SAASC,WAAW,QAAQ,oBAAoB;AAChD,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAKA,eAAe,SAASC,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,GAAGhB,WAAW,CAChCiB,QAAa,IACdV,QAAQ,CAAE;IACT,CAAEI,EAAE,GAAIM;EACT,CAAE,CAAC,EACJ,CAAEN,EAAE,EAAEJ,QAAQ,CACf,CAAC;EAED,MAAMW,QAAQ,GAAG;EAChB;AACF;AACA;AACA;AACA;AACA;AACA;EACE;IAAEN,KAAK,EAAEX,EAAE,CAAE,aAAc,CAAC;IAAEY,KAAK,EAAE;EAAG,CAAC,EACzC,KAAAH,eAAA,GAAKJ,KAAK,EAAEY,QAAQ,cAAAR,eAAA,cAAAA,eAAA,GAAI,EAAE,CAAE,CAC5B;EAED,oBACCP,IAAA,CAACJ,aAAa;IACba,KAAK,EAAGA,KAAO;IACfC,KAAK,EAAGA,KAAO;IACfM,OAAO,EAAGD,QAAU;IACpBX,QAAQ,EAAGS,eAAiB;IAC5BI,qBAAqB;IACrBC,uBAAuB;IACvBb,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}

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

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Text({
+  data,
+  field,
+  onChange,
+  hideLabelFromVision
+}) {
+  const {
+    id,
+    label,
+    placeholder
+  } = field;
+  const value = field.getValue({
+    item: data
+  });
+  const onChangeControl = useCallback(newValue => onChange({
+    [id]: newValue
+  }), [id, onChange]);
+  return /*#__PURE__*/_jsx(TextControl, {
+    label: label,
+    placeholder: placeholder,
+    value: value !== null && value !== void 0 ? value : '',
+    onChange: onChangeControl,
+    __next40pxDefaultSize: true,
+    __nextHasNoMarginBottom: true,
+    hideLabelFromVision: hideLabelFromVision
+  });
+}
+//# sourceMappingURL=text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["TextControl","useCallback","jsx","_jsx","Text","data","field","onChange","hideLabelFromVision","id","label","placeholder","value","getValue","item","onChangeControl","newValue","__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":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,uBAAuB;AACnD,SAASC,WAAW,QAAQ,oBAAoB;;AAEhD;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAKA,eAAe,SAASC,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,GAAGd,WAAW,CAChCe,QAAgB,IACjBT,QAAQ,CAAE;IACT,CAAEE,EAAE,GAAIO;EACT,CAAE,CAAC,EACJ,CAAEP,EAAE,EAAEF,QAAQ,CACf,CAAC;EAED,oBACCJ,IAAA,CAACH,WAAW;IACXU,KAAK,EAAGA,KAAO;IACfC,WAAW,EAAGA,WAAa;IAC3BC,KAAK,EAAGA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAI;IACrBL,QAAQ,EAAGQ,eAAiB;IAC5BE,qBAAqB;IACrBC,uBAAuB;IACvBV,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC;AAEJ","ignoreList":[]}

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

@@ -26,7 +26,10 @@ function DropdownHeader({
         level: 2,
         size: 13,
         children: title
-      }), /*#__PURE__*/_jsx(Spacer, {}), onClose && /*#__PURE__*/_jsx(Button, {
+      }), /*#__PURE__*/_jsx(Spacer, {}), onClose && /*#__PURE__*/_jsx(Button
+      // TODO: Switch to `true` (40px size) if possible
+      , {
+        __next40pxDefaultSize: false,
         className: "dataforms-layouts-panel__dropdown-header-action",
         label: __('Close'),
         icon: closeSmall,
@@ -107,9 +110,12 @@ export default function FormPanel({
   form,
   onChange
 }) {
-  const visibleFields = useMemo(() => normalizeFields(fields.filter(({
-    id
-  }) => !!form.fields?.includes(id))), [fields, form.fields]);
+  const visibleFields = useMemo(() => {
+    var _form$fields;
+    return normalizeFields(((_form$fields = form.fields) !== null && _form$fields !== void 0 ? _form$fields : []).map(fieldId => fields.find(({
+      id
+    }) => id === fieldId)).filter(field => !!field));
+  }, [fields, form.fields]);
   return /*#__PURE__*/_jsx(VStack, {
     spacing: 2,
     children: visibleFields.map(field => {

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalVStack","VStack","__experimentalHStack","HStack","__experimentalHeading","Heading","__experimentalSpacer","Spacer","Dropdown","Button","useState","useMemo","sprintf","__","closeSmall","normalizeFields","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DropdownHeader","title","onClose","className","spacing","children","alignment","level","size","label","icon","onClick","FormField","data","field","onChange","popoverAnchor","setPopoverAnchor","popoverProps","anchor","placement","offset","shift","ref","contentClassName","focusOnMount","toggleProps","variant","tooltipPosition","renderToggle","isOpen","onToggle","render","item","renderContent","Edit","hideLabelFromVision","id","FormPanel","fields","form","visibleFields","filter","includes","map"],"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 { useState, useMemo } from '@wordpress/element';\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { normalizeFields } from '../../normalize-fields';\nimport type { DataFormProps, NormalizedField } from '../../types';\n\ninterface FormFieldProps< Item > {\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: any ) => void;\n}\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<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\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\tclassName=\"dataforms-layouts-panel__dropdown-header-action\"\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/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nfunction FormField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n}: FormFieldProps< Item > ) {\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\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<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{ field.label }\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<Dropdown\n\t\t\t\t\tcontentClassName=\"dataforms-layouts-panel__field-dropdown\"\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tfocusOnMount\n\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\tsize: 'compact',\n\t\t\t\t\t\tvariant: 'tertiary',\n\t\t\t\t\t\ttooltipPosition: 'middle left',\n\t\t\t\t\t} }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"dataforms-layouts-panel__field-control\"\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s: Field name.\n\t\t\t\t\t\t\t\t__( 'Edit %s' ),\n\t\t\t\t\t\t\t\tfield.label\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<field.render item={ data } />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DropdownHeader\n\t\t\t\t\t\t\t\ttitle={ field.label }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<field.Edit\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tfield={ field }\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/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</HStack>\n\t);\n}\n\nexport default function FormPanel< Item >( {\n\tdata,\n\tfields,\n\tform,\n\tonChange,\n}: DataFormProps< Item > ) {\n\tconst visibleFields = useMemo(\n\t\t() =>\n\t\t\tnormalizeFields(\n\t\t\t\tfields.filter( ( { id } ) => !! form.fields?.includes( id ) )\n\t\t\t),\n\t\t[ fields, form.fields ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<FormField\n\t\t\t\t\t\tkey={ field.id }\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/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__experimentalVStack","VStack","__experimentalHStack","HStack","__experimentalHeading","Heading","__experimentalSpacer","Spacer","Dropdown","Button","useState","useMemo","sprintf","__","closeSmall","normalizeFields","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DropdownHeader","title","onClose","className","spacing","children","alignment","level","size","__next40pxDefaultSize","label","icon","onClick","FormField","data","field","onChange","popoverAnchor","setPopoverAnchor","popoverProps","anchor","placement","offset","shift","ref","contentClassName","focusOnMount","toggleProps","variant","tooltipPosition","renderToggle","isOpen","onToggle","render","item","renderContent","Edit","hideLabelFromVision","id","FormPanel","fields","form","visibleFields","_form$fields","map","fieldId","find","filter"],"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 { useState, useMemo } from '@wordpress/element';\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { normalizeFields } from '../../normalize-fields';\nimport type { DataFormProps, NormalizedField, Field } from '../../types';\n\ninterface FormFieldProps< Item > {\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: any ) => void;\n}\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<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\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\t// TODO: Switch to `true` (40px size) if possible\n\t\t\t\t\t\t__next40pxDefaultSize={ false }\n\t\t\t\t\t\tclassName=\"dataforms-layouts-panel__dropdown-header-action\"\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/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nfunction FormField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n}: FormFieldProps< Item > ) {\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\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<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{ field.label }\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<Dropdown\n\t\t\t\t\tcontentClassName=\"dataforms-layouts-panel__field-dropdown\"\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tfocusOnMount\n\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\tsize: 'compact',\n\t\t\t\t\t\tvariant: 'tertiary',\n\t\t\t\t\t\ttooltipPosition: 'middle left',\n\t\t\t\t\t} }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"dataforms-layouts-panel__field-control\"\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s: Field name.\n\t\t\t\t\t\t\t\t__( 'Edit %s' ),\n\t\t\t\t\t\t\t\tfield.label\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<field.render item={ data } />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DropdownHeader\n\t\t\t\t\t\t\t\ttitle={ field.label }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<field.Edit\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tfield={ field }\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/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</HStack>\n\t);\n}\n\nexport default function FormPanel< Item >( {\n\tdata,\n\tfields,\n\tform,\n\tonChange,\n}: DataFormProps< Item > ) {\n\tconst visibleFields = useMemo(\n\t\t() =>\n\t\t\tnormalizeFields(\n\t\t\t\t( form.fields ?? [] )\n\t\t\t\t\t.map( ( fieldId ) =>\n\t\t\t\t\t\tfields.find( ( { id } ) => id === fieldId )\n\t\t\t\t\t)\n\t\t\t\t\t.filter( ( field ): field is Field< Item > => !! field )\n\t\t\t),\n\t\t[ fields, form.fields ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<FormField\n\t\t\t\t\t\tkey={ field.id }\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/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -15,9 +15,12 @@ export default function FormRegular({
   form,
   onChange
 }) {
-  const visibleFields = useMemo(() => normalizeFields(fields.filter(({
-    id
-  }) => !!form.fields?.includes(id))), [fields, form.fields]);
+  const visibleFields = useMemo(() => {
+    var _form$fields;
+    return normalizeFields(((_form$fields = form.fields) !== null && _form$fields !== void 0 ? _form$fields : []).map(fieldId => fields.find(({
+      id
+    }) => id === fieldId)).filter(field => !!field));
+  }, [fields, form.fields]);
   return /*#__PURE__*/_jsx(VStack, {
     spacing: 4,
     children: visibleFields.map(field => {

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalVStack","VStack","useMemo","normalizeFields","jsx","_jsx","FormRegular","data","fields","form","onChange","visibleFields","filter","id","includes","spacing","children","map","field","Edit"],"sources":["@wordpress/dataviews/src/dataforms-layouts/regular/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { normalizeFields } from '../../normalize-fields';\nimport type { DataFormProps } from '../../types';\n\nexport default function FormRegular< Item >( {\n\tdata,\n\tfields,\n\tform,\n\tonChange,\n}: DataFormProps< Item > ) {\n\tconst visibleFields = useMemo(\n\t\t() =>\n\t\t\tnormalizeFields(\n\t\t\t\tfields.filter( ( { id } ) => !! form.fields?.includes( id ) )\n\t\t\t),\n\t\t[ fields, form.fields ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ 4 }>\n\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<field.Edit\n\t\t\t\t\t\tkey={ field.id }\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/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;AACA,SAASC,eAAe,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzD,eAAe,SAASC,WAAWA,CAAU;EAC5CC,IAAI;EACJC,MAAM;EACNC,IAAI;EACJC;AACsB,CAAC,EAAG;EAC1B,MAAMC,aAAa,GAAGT,OAAO,CAC5B,MACCC,eAAe,CACdK,MAAM,CAACI,MAAM,CAAE,CAAE;IAAEC;EAAG,CAAC,KAAM,CAAC,CAAEJ,IAAI,CAACD,MAAM,EAAEM,QAAQ,CAAED,EAAG,CAAE,CAC7D,CAAC,EACF,CAAEL,MAAM,EAAEC,IAAI,CAACD,MAAM,CACtB,CAAC;EAED,oBACCH,IAAA,CAACJ,MAAM;IAACc,OAAO,EAAG,CAAG;IAAAC,QAAA,EAClBL,aAAa,CAACM,GAAG,CAAIC,KAAK,IAAM;MACjC,oBACCb,IAAA,CAACa,KAAK,CAACC,IAAI;QAEVZ,IAAI,EAAGA,IAAM;QACbW,KAAK,EAAGA,KAAO;QACfR,QAAQ,EAAGA;MAAU,GAHfQ,KAAK,CAACL,EAIZ,CAAC;IAEJ,CAAE;EAAC,CACI,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["__experimentalVStack","VStack","useMemo","normalizeFields","jsx","_jsx","FormRegular","data","fields","form","onChange","visibleFields","_form$fields","map","fieldId","find","id","filter","field","spacing","children","Edit"],"sources":["@wordpress/dataviews/src/dataforms-layouts/regular/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { normalizeFields } from '../../normalize-fields';\nimport type { DataFormProps, Field } from '../../types';\n\nexport default function FormRegular< Item >( {\n\tdata,\n\tfields,\n\tform,\n\tonChange,\n}: DataFormProps< Item > ) {\n\tconst visibleFields = useMemo(\n\t\t() =>\n\t\t\tnormalizeFields(\n\t\t\t\t( form.fields ?? [] )\n\t\t\t\t\t.map( ( fieldId ) =>\n\t\t\t\t\t\tfields.find( ( { id } ) => id === fieldId )\n\t\t\t\t\t)\n\t\t\t\t\t.filter( ( field ): field is Field< Item > => !! field )\n\t\t\t),\n\t\t[ fields, form.fields ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ 4 }>\n\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<field.Edit\n\t\t\t\t\t\tkey={ field.id }\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/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;AACA,SAASC,eAAe,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzD,eAAe,SAASC,WAAWA,CAAU;EAC5CC,IAAI;EACJC,MAAM;EACNC,IAAI;EACJC;AACsB,CAAC,EAAG;EAC1B,MAAMC,aAAa,GAAGT,OAAO,CAC5B;IAAA,IAAAU,YAAA;IAAA,OACCT,eAAe,CACd,EAAAS,YAAA,GAAEH,IAAI,CAACD,MAAM,cAAAI,YAAA,cAAAA,YAAA,GAAI,EAAE,EACjBC,GAAG,CAAIC,OAAO,IACdN,MAAM,CAACO,IAAI,CAAE,CAAE;MAAEC;IAAG,CAAC,KAAMA,EAAE,KAAKF,OAAQ,CAC3C,CAAC,CACAG,MAAM,CAAIC,KAAK,IAA8B,CAAC,CAAEA,KAAM,CACzD,CAAC;EAAA,GACF,CAAEV,MAAM,EAAEC,IAAI,CAACD,MAAM,CACtB,CAAC;EAED,oBACCH,IAAA,CAACJ,MAAM;IAACkB,OAAO,EAAG,CAAG;IAAAC,QAAA,EAClBT,aAAa,CAACE,GAAG,CAAIK,KAAK,IAAM;MACjC,oBACCb,IAAA,CAACa,KAAK,CAACG,IAAI;QAEVd,IAAI,EAAGA,IAAM;QACbW,KAAK,EAAGA,KAAO;QACfR,QAAQ,EAAGA;MAAU,GAHfQ,KAAK,CAACF,EAIZ,CAAC;IAEJ,CAAE;EAAC,CACI,CAAC;AAEX","ignoreList":[]}

package/build-module/dataviews-layouts/grid/density-picker.js

@@ -1,14 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { RangeControl, Button } from '@wordpress/components';
+import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { plus, reset } from '@wordpress/icons';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const viewportBreaks = {
   xhuge: {
     min: 3,
@@ -59,18 +56,6 @@ function useViewPortBreakpoint() {
   }
   return null;
 }
-
-// Value is number from 0 to 100 representing how big an item is in the grid
-// 100 being the biggest and 0 being the smallest.
-// The size is relative to the viewport size, if one a given viewport the
-// number of allowed items in a grid is 3 to 6 a 0 ( the smallest ) will mean that the grid will
-// have 6 items in a row, a 100 ( the biggest ) will mean that the grid will have 3 items in a row.
-// A value of 75 will mean that the grid will have 4 items in a row.
-function getRangeValue(density, breakValues) {
-  const inverseDensity = breakValues.max - density;
-  const max = breakValues.max - breakValues.min;
-  return Math.round(inverseDensity * 100 / max);
-}
 export default function DensityPicker({
   density,
   setDensity
@@ -91,48 +76,32 @@ export default function DensityPicker({
       return _density;
     });
   }, [setDensity, viewport]);
+  const breakValues = viewportBreaks[viewport || 'mobile'];
+  const densityToUse = density || breakValues.default;
+  const marks = useMemo(() => Array.from({
+    length: breakValues.max - breakValues.min + 1
+  }, (_, i) => {
+    return {
+      value: breakValues.min + i
+    };
+  }), [breakValues]);
   if (!viewport) {
     return null;
   }
-  const breakValues = viewportBreaks[viewport];
-  const densityToUse = density || breakValues.default;
-  const rangeValue = getRangeValue(densityToUse, breakValues);
-  const step = 100 / (breakValues.max - breakValues.min + 1);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Button, {
-      size: "compact",
-      icon: reset,
-      disabled: rangeValue <= 0,
-      accessibleWhenDisabled: true,
-      label: __('Decrease size'),
-      onClick: () => {
-        setDensity(densityToUse + 1);
-      }
-    }), /*#__PURE__*/_jsx(RangeControl, {
-      __nextHasNoMarginBottom: true,
-      showTooltip: false,
-      className: "dataviews-density-picker__range-control",
-      label: __('Item size'),
-      hideLabelFromVision: true,
-      value: rangeValue,
-      min: 0,
-      max: 100,
-      withInputField: false,
-      onChange: (value = 0) => {
-        const inverseValue = 100 - value;
-        setDensity(Math.round(inverseValue * (breakValues.max - breakValues.min) / 100 + breakValues.min));
-      },
-      step: step
-    }), /*#__PURE__*/_jsx(Button, {
-      size: "compact",
-      icon: plus,
-      disabled: rangeValue >= 100,
-      accessibleWhenDisabled: true,
-      label: __('Increase size'),
-      onClick: () => {
-        setDensity(densityToUse - 1);
-      }
-    })]
+  return /*#__PURE__*/_jsx(RangeControl, {
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: true,
+    showTooltip: false,
+    label: __('Preview size'),
+    value: breakValues.max + breakValues.min - densityToUse,
+    marks: marks,
+    min: breakValues.min,
+    max: breakValues.max,
+    withInputField: false,
+    onChange: (value = 0) => {
+      setDensity(breakValues.max + breakValues.min - value);
+    },
+    step: 1
   });
 }
 //# sourceMappingURL=density-picker.js.map

package/build-module/dataviews-layouts/grid/density-picker.js.map

@@ -1 +1 @@
-{"version":3,"names":["RangeControl","Button","__","useViewportMatch","plus","reset","useEffect","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","viewportBreaks","xhuge","min","max","default","huge","xlarge","large","mobile","useViewPortBreakpoint","isXHuge","isHuge","isXlarge","isLarge","isMobile","getRangeValue","density","breakValues","inverseDensity","Math","round","DensityPicker","setDensity","viewport","_density","densityToUse","rangeValue","step","children","size","icon","disabled","accessibleWhenDisabled","label","onClick","__nextHasNoMarginBottom","showTooltip","className","hideLabelFromVision","value","withInputField","onChange","inverseValue"],"sources":["@wordpress/dataviews/src/dataviews-layouts/grid/density-picker.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { RangeControl, Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { plus, reset } from '@wordpress/icons';\nimport { useEffect } from '@wordpress/element';\n\nconst viewportBreaks = {\n\txhuge: { min: 3, max: 6, default: 5 },\n\thuge: { min: 2, max: 4, default: 4 },\n\txlarge: { min: 2, max: 3, default: 3 },\n\tlarge: { min: 1, max: 2, default: 2 },\n\tmobile: { min: 1, max: 2, default: 2 },\n};\n\nfunction useViewPortBreakpoint() {\n\tconst isXHuge = useViewportMatch( 'xhuge', '>=' );\n\tconst isHuge = useViewportMatch( 'huge', '>=' );\n\tconst isXlarge = useViewportMatch( 'xlarge', '>=' );\n\tconst isLarge = useViewportMatch( 'large', '>=' );\n\tconst isMobile = useViewportMatch( 'mobile', '>=' );\n\n\tif ( isXHuge ) {\n\t\treturn 'xhuge';\n\t}\n\tif ( isHuge ) {\n\t\treturn 'huge';\n\t}\n\tif ( isXlarge ) {\n\t\treturn 'xlarge';\n\t}\n\tif ( isLarge ) {\n\t\treturn 'large';\n\t}\n\tif ( isMobile ) {\n\t\treturn 'mobile';\n\t}\n\treturn null;\n}\n\n// Value is number from 0 to 100 representing how big an item is in the grid\n// 100 being the biggest and 0 being the smallest.\n// The size is relative to the viewport size, if one a given viewport the\n// number of allowed items in a grid is 3 to 6 a 0 ( the smallest ) will mean that the grid will\n// have 6 items in a row, a 100 ( the biggest ) will mean that the grid will have 3 items in a row.\n// A value of 75 will mean that the grid will have 4 items in a row.\nfunction getRangeValue(\n\tdensity: number,\n\tbreakValues: { min: number; max: number; default: number }\n) {\n\tconst inverseDensity = breakValues.max - density;\n\tconst max = breakValues.max - breakValues.min;\n\treturn Math.round( ( inverseDensity * 100 ) / max );\n}\n\nexport default function DensityPicker( {\n\tdensity,\n\tsetDensity,\n}: {\n\tdensity: number;\n\tsetDensity: React.Dispatch< React.SetStateAction< number > >;\n} ) {\n\tconst viewport = useViewPortBreakpoint();\n\tuseEffect( () => {\n\t\tsetDensity( ( _density ) => {\n\t\t\tif ( ! viewport || ! _density ) {\n\t\t\t\treturn 0;\n\t\t\t}\n\t\t\tconst breakValues = viewportBreaks[ viewport ];\n\t\t\tif ( _density < breakValues.min ) {\n\t\t\t\treturn breakValues.min;\n\t\t\t}\n\t\t\tif ( _density > breakValues.max ) {\n\t\t\t\treturn breakValues.max;\n\t\t\t}\n\t\t\treturn _density;\n\t\t} );\n\t}, [ setDensity, viewport ] );\n\tif ( ! viewport ) {\n\t\treturn null;\n\t}\n\tconst breakValues = viewportBreaks[ viewport ];\n\tconst densityToUse = density || breakValues.default;\n\tconst rangeValue = getRangeValue( densityToUse, breakValues );\n\n\tconst step = 100 / ( breakValues.max - breakValues.min + 1 );\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tsize=\"compact\"\n\t\t\t\ticon={ reset }\n\t\t\t\tdisabled={ rangeValue <= 0 }\n\t\t\t\taccessibleWhenDisabled\n\t\t\t\tlabel={ __( 'Decrease size' ) }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tsetDensity( densityToUse + 1 );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tshowTooltip={ false }\n\t\t\t\tclassName=\"dataviews-density-picker__range-control\"\n\t\t\t\tlabel={ __( 'Item size' ) }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ rangeValue }\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\twithInputField={ false }\n\t\t\t\tonChange={ ( value = 0 ) => {\n\t\t\t\t\tconst inverseValue = 100 - value;\n\t\t\t\t\tsetDensity(\n\t\t\t\t\t\tMath.round(\n\t\t\t\t\t\t\t( inverseValue *\n\t\t\t\t\t\t\t\t( breakValues.max - breakValues.min ) ) /\n\t\t\t\t\t\t\t\t100 +\n\t\t\t\t\t\t\t\tbreakValues.min\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t\tstep={ step }\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tsize=\"compact\"\n\t\t\t\ticon={ plus }\n\t\t\t\tdisabled={ rangeValue >= 100 }\n\t\t\t\taccessibleWhenDisabled\n\t\t\t\tlabel={ __( 'Increase size' ) }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tsetDensity( densityToUse - 1 );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["RangeControl","__","useViewportMatch","useEffect","useMemo","jsx","_jsx","viewportBreaks","xhuge","min","max","default","huge","xlarge","large","mobile","useViewPortBreakpoint","isXHuge","isHuge","isXlarge","isLarge","isMobile","DensityPicker","density","setDensity","viewport","_density","breakValues","densityToUse","marks","Array","from","length","_","i","value","__nextHasNoMarginBottom","__next40pxDefaultSize","showTooltip","label","withInputField","onChange","step"],"sources":["@wordpress/dataviews/src/dataviews-layouts/grid/density-picker.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { RangeControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { useEffect, useMemo } from '@wordpress/element';\n\nconst viewportBreaks = {\n\txhuge: { min: 3, max: 6, default: 5 },\n\thuge: { min: 2, max: 4, default: 4 },\n\txlarge: { min: 2, max: 3, default: 3 },\n\tlarge: { min: 1, max: 2, default: 2 },\n\tmobile: { min: 1, max: 2, default: 2 },\n};\n\nfunction useViewPortBreakpoint() {\n\tconst isXHuge = useViewportMatch( 'xhuge', '>=' );\n\tconst isHuge = useViewportMatch( 'huge', '>=' );\n\tconst isXlarge = useViewportMatch( 'xlarge', '>=' );\n\tconst isLarge = useViewportMatch( 'large', '>=' );\n\tconst isMobile = useViewportMatch( 'mobile', '>=' );\n\n\tif ( isXHuge ) {\n\t\treturn 'xhuge';\n\t}\n\tif ( isHuge ) {\n\t\treturn 'huge';\n\t}\n\tif ( isXlarge ) {\n\t\treturn 'xlarge';\n\t}\n\tif ( isLarge ) {\n\t\treturn 'large';\n\t}\n\tif ( isMobile ) {\n\t\treturn 'mobile';\n\t}\n\treturn null;\n}\n\nexport default function DensityPicker( {\n\tdensity,\n\tsetDensity,\n}: {\n\tdensity: number;\n\tsetDensity: React.Dispatch< React.SetStateAction< number > >;\n} ) {\n\tconst viewport = useViewPortBreakpoint();\n\tuseEffect( () => {\n\t\tsetDensity( ( _density ) => {\n\t\t\tif ( ! viewport || ! _density ) {\n\t\t\t\treturn 0;\n\t\t\t}\n\t\t\tconst breakValues = viewportBreaks[ viewport ];\n\t\t\tif ( _density < breakValues.min ) {\n\t\t\t\treturn breakValues.min;\n\t\t\t}\n\t\t\tif ( _density > breakValues.max ) {\n\t\t\t\treturn breakValues.max;\n\t\t\t}\n\t\t\treturn _density;\n\t\t} );\n\t}, [ setDensity, viewport ] );\n\tconst breakValues = viewportBreaks[ viewport || 'mobile' ];\n\tconst densityToUse = density || breakValues.default;\n\n\tconst marks = useMemo(\n\t\t() =>\n\t\t\tArray.from(\n\t\t\t\t{ length: breakValues.max - breakValues.min + 1 },\n\t\t\t\t( _, i ) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tvalue: breakValues.min + i,\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t),\n\t\t[ breakValues ]\n\t);\n\n\tif ( ! viewport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<RangeControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tshowTooltip={ false }\n\t\t\tlabel={ __( 'Preview size' ) }\n\t\t\tvalue={ breakValues.max + breakValues.min - densityToUse }\n\t\t\tmarks={ marks }\n\t\t\tmin={ breakValues.min }\n\t\t\tmax={ breakValues.max }\n\t\t\twithInputField={ false }\n\t\t\tonChange={ ( value = 0 ) => {\n\t\t\t\tsetDensity( breakValues.max + breakValues.min - value );\n\t\t\t} }\n\t\t\tstep={ 1 }\n\t\t/>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -105,7 +105,7 @@ function GridItem({
           children: /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(FlexItem, {
               className: "dataviews-view-grid__field-name",
-              children: field.label
+              children: field.header
             }), /*#__PURE__*/_jsx(FlexItem, {
               className: "dataviews-view-grid__field-value",
               style: {