@wordpress/dataviews 0.4.1 → 0.5.0

package/build/search-widget.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SearchWidget;
+var _react = require("react");
+var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
+var _removeAccents = _interopRequireDefault(require("remove-accents"));
+var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
+var _primitives = require("@wordpress/primitives");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+
+/**
+ * WordPress dependencies
+ */
+
+const radioCheck = (0, _react.createElement)(_primitives.SVG, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, (0, _react.createElement)(_primitives.Circle, {
+  cx: 12,
+  cy: 12,
+  r: 3
+}));
+function normalizeSearchInput(input = '') {
+  return (0, _removeAccents.default)(input.trim().toLowerCase());
+}
+function SearchWidget({
+  filter,
+  view,
+  onChangeView
+}) {
+  const [searchValue, setSearchValue] = (0, _element.useState)('');
+  const deferredSearchValue = (0, _element.useDeferredValue)(searchValue);
+  const selectedFilter = view.filters.find(_filter => _filter.field === filter.field);
+  const selectedValues = selectedFilter?.value;
+  const matches = (0, _element.useMemo)(() => {
+    const normalizedSearch = normalizeSearchInput(deferredSearchValue);
+    return filter.elements.filter(item => normalizeSearchInput(item.label).includes(normalizedSearch));
+  }, [filter.elements, deferredSearchValue]);
+  return (0, _react.createElement)(Ariakit.ComboboxProvider, {
+    value: searchValue,
+    setSelectedValue: value => {
+      const currentFilter = view.filters.find(_filter => _filter.field === filter.field);
+      const newFilters = currentFilter ? [...view.filters.map(_filter => {
+        if (_filter.field === filter.field) {
+          return {
+            ..._filter,
+            operator: currentFilter.operator || filter.operators[0],
+            value
+          };
+        }
+        return _filter;
+      })] : [...view.filters, {
+        field: filter.field,
+        operator: filter.operators[0],
+        value
+      }];
+      onChangeView({
+        ...view,
+        page: 1,
+        filters: newFilters
+      });
+    },
+    setValue: setSearchValue
+  }, (0, _react.createElement)("div", {
+    className: "dataviews-search-widget-filter-combobox__wrapper"
+  }, (0, _react.createElement)(Ariakit.ComboboxLabel, {
+    render: (0, _react.createElement)(_components.VisuallyHidden, null)
+  }, (0, _i18n.__)('Search items')), (0, _react.createElement)(Ariakit.Combobox, {
+    autoSelect: "always",
+    placeholder: (0, _i18n.__)('Search'),
+    className: "dataviews-search-widget-filter-combobox__input"
+  }), (0, _react.createElement)("div", {
+    className: "dataviews-search-widget-filter-combobox__icon"
+  }, (0, _react.createElement)(_components.Icon, {
+    icon: _icons.search
+  }))), (0, _react.createElement)(Ariakit.ComboboxList, {
+    className: "dataviews-search-widget-filter-combobox-list",
+    alwaysVisible: true
+  }, matches.map(element => {
+    return (0, _react.createElement)(Ariakit.ComboboxItem, {
+      key: element.value,
+      value: element.value,
+      className: "dataviews-search-widget-filter-combobox-item",
+      hideOnClick: false,
+      setValueOnClick: false,
+      focusOnHover: true
+    }, (0, _react.createElement)("span", {
+      className: "dataviews-search-widget-filter-combobox-item-check"
+    }, selectedValues === element.value && (0, _react.createElement)(_components.Icon, {
+      icon: radioCheck
+    })), (0, _react.createElement)("span", null, (0, _react.createElement)(Ariakit.ComboboxItemValue, {
+      className: "dataviews-search-widget-filter-combobox-item-value",
+      value: element.label
+    }), !!element.description && (0, _react.createElement)("span", {
+      className: "dataviews-search-widget-filter-combobox-item-description"
+    }, element.description)));
+  }), !matches.length && (0, _react.createElement)("p", null, (0, _i18n.__)('No results found'))));
+}
+//# sourceMappingURL=search-widget.js.map

package/build/search-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_removeAccents","_interopRequireDefault","_i18n","_element","_components","_icons","_primitives","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","radioCheck","_react","createElement","SVG","xmlns","viewBox","Circle","cx","cy","normalizeSearchInput","input","removeAccents","trim","toLowerCase","SearchWidget","filter","view","onChangeView","searchValue","setSearchValue","useState","deferredSearchValue","useDeferredValue","selectedFilter","filters","find","_filter","field","selectedValues","value","matches","useMemo","normalizedSearch","elements","item","label","includes","ComboboxProvider","setSelectedValue","currentFilter","newFilters","map","operator","operators","page","setValue","className","ComboboxLabel","render","VisuallyHidden","__","Combobox","autoSelect","placeholder","Icon","icon","search","ComboboxList","alwaysVisible","element","ComboboxItem","key","hideOnClick","setValueOnClick","focusOnHover","ComboboxItemValue","description","length"],"sources":["@wordpress/dataviews/src/search-widget.js"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState, useMemo, useDeferredValue } from '@wordpress/element';\nimport { VisuallyHidden, Icon } from '@wordpress/components';\nimport { search } from '@wordpress/icons';\nimport { SVG, Circle } from '@wordpress/primitives';\n\nconst radioCheck = (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>\n\t</SVG>\n);\n\nfunction normalizeSearchInput( input = '' ) {\n\treturn removeAccents( input.trim().toLowerCase() );\n}\n\nexport default function SearchWidget( { filter, view, onChangeView } ) {\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\tconst deferredSearchValue = useDeferredValue( searchValue );\n\tconst selectedFilter = view.filters.find(\n\t\t( _filter ) => _filter.field === filter.field\n\t);\n\tconst selectedValues = selectedFilter?.value;\n\tconst matches = useMemo( () => {\n\t\tconst normalizedSearch = normalizeSearchInput( deferredSearchValue );\n\t\treturn filter.elements.filter( ( item ) =>\n\t\t\tnormalizeSearchInput( item.label ).includes( normalizedSearch )\n\t\t);\n\t}, [ filter.elements, deferredSearchValue ] );\n\treturn (\n\t\t<Ariakit.ComboboxProvider\n\t\t\tvalue={ searchValue }\n\t\t\tsetSelectedValue={ ( value ) => {\n\t\t\t\tconst currentFilter = view.filters.find(\n\t\t\t\t\t( _filter ) => _filter.field === filter.field\n\t\t\t\t);\n\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t? [\n\t\t\t\t\t\t\t...view.filters.map( ( _filter ) => {\n\t\t\t\t\t\t\t\tif ( _filter.field === filter.field ) {\n\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\tfilter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn _filter;\n\t\t\t\t\t\t\t} ),\n\t\t\t\t\t  ]\n\t\t\t\t\t: [\n\t\t\t\t\t\t\t...view.filters,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t  ];\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tpage: 1,\n\t\t\t\t\tfilters: newFilters,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tsetValue={ setSearchValue }\n\t\t>\n\t\t\t<div className=\"dataviews-search-widget-filter-combobox__wrapper\">\n\t\t\t\t<Ariakit.ComboboxLabel render={ <VisuallyHidden /> }>\n\t\t\t\t\t{ __( 'Search items' ) }\n\t\t\t\t</Ariakit.ComboboxLabel>\n\t\t\t\t<Ariakit.Combobox\n\t\t\t\t\tautoSelect=\"always\"\n\t\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t\t\tclassName=\"dataviews-search-widget-filter-combobox__input\"\n\t\t\t\t/>\n\t\t\t\t<div className=\"dataviews-search-widget-filter-combobox__icon\">\n\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<Ariakit.ComboboxList\n\t\t\t\tclassName=\"dataviews-search-widget-filter-combobox-list\"\n\t\t\t\talwaysVisible\n\t\t\t>\n\t\t\t\t{ matches.map( ( element ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Ariakit.ComboboxItem\n\t\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\t\tvalue={ element.value }\n\t\t\t\t\t\t\tclassName=\"dataviews-search-widget-filter-combobox-item\"\n\t\t\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\t\t\tsetValueOnClick={ false }\n\t\t\t\t\t\t\tfocusOnHover\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"dataviews-search-widget-filter-combobox-item-check\">\n\t\t\t\t\t\t\t\t{ selectedValues === element.value && (\n\t\t\t\t\t\t\t\t\t<Icon icon={ radioCheck } />\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<Ariakit.ComboboxItemValue\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-search-widget-filter-combobox-item-value\"\n\t\t\t\t\t\t\t\t\tvalue={ element.label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ !! element.description && (\n\t\t\t\t\t\t\t\t\t<span className=\"dataviews-search-widget-filter-combobox-item-description\">\n\t\t\t\t\t\t\t\t\t\t{ element.description }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Ariakit.ComboboxItem>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ ! matches.length && <p>{ __( 'No results found' ) }</p> }\n\t\t\t</Ariakit.ComboboxList>\n\t\t</Ariakit.ComboboxProvider>\n\t);\n}\n"],"mappings":";;;;;;;;AAIA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AAAoD,SAAAQ,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAdpD;AACA;AACA;AACA;;AAIA;AACA;AACA;;AAOA,MAAMY,UAAU,GACf,IAAAC,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAAyB,GAAG;EAACC,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC;AAAW,GAC1D,IAAAJ,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAA4B,MAAM;EAACC,EAAE,EAAG,EAAI;EAACC,EAAE,EAAG,EAAI;EAAC1B,CAAC,EAAG;AAAG,CAAS,CACxC,CACL;AAED,SAAS2B,oBAAoBA,CAAEC,KAAK,GAAG,EAAE,EAAG;EAC3C,OAAO,IAAAC,sBAAa,EAAED,KAAK,CAACE,IAAI,CAAC,CAAC,CAACC,WAAW,CAAC,CAAE,CAAC;AACnD;AAEe,SAASC,YAAYA,CAAE;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EACtE,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,GAAG,IAAAC,iBAAQ,EAAE,EAAG,CAAC;EACtD,MAAMC,mBAAmB,GAAG,IAAAC,yBAAgB,EAAEJ,WAAY,CAAC;EAC3D,MAAMK,cAAc,GAAGP,IAAI,CAACQ,OAAO,CAACC,IAAI,CACrCC,OAAO,IAAMA,OAAO,CAACC,KAAK,KAAKZ,MAAM,CAACY,KACzC,CAAC;EACD,MAAMC,cAAc,GAAGL,cAAc,EAAEM,KAAK;EAC5C,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC9B,MAAMC,gBAAgB,GAAGvB,oBAAoB,CAAEY,mBAAoB,CAAC;IACpE,OAAON,MAAM,CAACkB,QAAQ,CAAClB,MAAM,CAAImB,IAAI,IACpCzB,oBAAoB,CAAEyB,IAAI,CAACC,KAAM,CAAC,CAACC,QAAQ,CAAEJ,gBAAiB,CAC/D,CAAC;EACF,CAAC,EAAE,CAAEjB,MAAM,CAACkB,QAAQ,EAAEZ,mBAAmB,CAAG,CAAC;EAC7C,OACC,IAAApB,MAAA,CAAAC,aAAA,EAACjC,OAAO,CAACoE,gBAAgB;IACxBR,KAAK,EAAGX,WAAa;IACrBoB,gBAAgB,EAAKT,KAAK,IAAM;MAC/B,MAAMU,aAAa,GAAGvB,IAAI,CAACQ,OAAO,CAACC,IAAI,CACpCC,OAAO,IAAMA,OAAO,CAACC,KAAK,KAAKZ,MAAM,CAACY,KACzC,CAAC;MACD,MAAMa,UAAU,GAAGD,aAAa,GAC7B,CACA,GAAGvB,IAAI,CAACQ,OAAO,CAACiB,GAAG,CAAIf,OAAO,IAAM;QACnC,IAAKA,OAAO,CAACC,KAAK,KAAKZ,MAAM,CAACY,KAAK,EAAG;UACrC,OAAO;YACN,GAAGD,OAAO;YACVgB,QAAQ,EACPH,aAAa,CAACG,QAAQ,IACtB3B,MAAM,CAAC4B,SAAS,CAAE,CAAC,CAAE;YACtBd;UACD,CAAC;QACF;QACA,OAAOH,OAAO;MACf,CAAE,CAAC,CACF,GACD,CACA,GAAGV,IAAI,CAACQ,OAAO,EACf;QACCG,KAAK,EAAEZ,MAAM,CAACY,KAAK;QACnBe,QAAQ,EAAE3B,MAAM,CAAC4B,SAAS,CAAE,CAAC,CAAE;QAC/Bd;MACD,CAAC,CACA;MACJZ,YAAY,CAAE;QACb,GAAGD,IAAI;QACP4B,IAAI,EAAE,CAAC;QACPpB,OAAO,EAAEgB;MACV,CAAE,CAAC;IACJ,CAAG;IACHK,QAAQ,EAAG1B;EAAgB,GAE3B,IAAAlB,MAAA,CAAAC,aAAA;IAAK4C,SAAS,EAAC;EAAkD,GAChE,IAAA7C,MAAA,CAAAC,aAAA,EAACjC,OAAO,CAAC8E,aAAa;IAACC,MAAM,EAAG,IAAA/C,MAAA,CAAAC,aAAA,EAAC1B,WAAA,CAAAyE,cAAc,MAAE;EAAG,GACjD,IAAAC,QAAE,EAAE,cAAe,CACC,CAAC,EACxB,IAAAjD,MAAA,CAAAC,aAAA,EAACjC,OAAO,CAACkF,QAAQ;IAChBC,UAAU,EAAC,QAAQ;IACnBC,WAAW,EAAG,IAAAH,QAAE,EAAE,QAAS,CAAG;IAC9BJ,SAAS,EAAC;EAAgD,CAC1D,CAAC,EACF,IAAA7C,MAAA,CAAAC,aAAA;IAAK4C,SAAS,EAAC;EAA+C,GAC7D,IAAA7C,MAAA,CAAAC,aAAA,EAAC1B,WAAA,CAAA8E,IAAI;IAACC,IAAI,EAAGC;EAAQ,CAAE,CACnB,CACD,CAAC,EACN,IAAAvD,MAAA,CAAAC,aAAA,EAACjC,OAAO,CAACwF,YAAY;IACpBX,SAAS,EAAC,8CAA8C;IACxDY,aAAa;EAAA,GAEX5B,OAAO,CAACW,GAAG,CAAIkB,OAAO,IAAM;IAC7B,OACC,IAAA1D,MAAA,CAAAC,aAAA,EAACjC,OAAO,CAAC2F,YAAY;MACpBC,GAAG,EAAGF,OAAO,CAAC9B,KAAO;MACrBA,KAAK,EAAG8B,OAAO,CAAC9B,KAAO;MACvBiB,SAAS,EAAC,8CAA8C;MACxDgB,WAAW,EAAG,KAAO;MACrBC,eAAe,EAAG,KAAO;MACzBC,YAAY;IAAA,GAEZ,IAAA/D,MAAA,CAAAC,aAAA;MAAM4C,SAAS,EAAC;IAAoD,GACjElB,cAAc,KAAK+B,OAAO,CAAC9B,KAAK,IACjC,IAAA5B,MAAA,CAAAC,aAAA,EAAC1B,WAAA,CAAA8E,IAAI;MAACC,IAAI,EAAGvD;IAAY,CAAE,CAEvB,CAAC,EACP,IAAAC,MAAA,CAAAC,aAAA,gBACC,IAAAD,MAAA,CAAAC,aAAA,EAACjC,OAAO,CAACgG,iBAAiB;MACzBnB,SAAS,EAAC,oDAAoD;MAC9DjB,KAAK,EAAG8B,OAAO,CAACxB;IAAO,CACvB,CAAC,EACA,CAAC,CAAEwB,OAAO,CAACO,WAAW,IACvB,IAAAjE,MAAA,CAAAC,aAAA;MAAM4C,SAAS,EAAC;IAA0D,GACvEa,OAAO,CAACO,WACL,CAEF,CACe,CAAC;EAEzB,CAAE,CAAC,EACD,CAAEpC,OAAO,CAACqC,MAAM,IAAI,IAAAlE,MAAA,CAAAC,aAAA,aAAK,IAAAgD,QAAE,EAAE,kBAAmB,CAAM,CACnC,CACG,CAAC;AAE7B"}

package/build/search.js

@@ -33,7 +33,7 @@ const Search = (0, _element.memo)(function Search({
       search: debouncedSearch
     });
   }, [debouncedSearch]);
-  const searchLabel = label || (0, _i18n.__)('Filter list');
+  const searchLabel = label || (0, _i18n.__)('Search');
   return (0, _react.createElement)(_components.SearchControl, {
     __nextHasNoMarginBottom: true,
     onChange: setSearch,
@@ -43,6 +43,5 @@ const Search = (0, _element.memo)(function Search({
     size: "compact"
   });
 });
-var _default = Search;
-exports.default = _default;
+var _default = exports.default = Search;
 //# sourceMappingURL=search.js.map

package/build/search.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_element","_components","_compose","Search","memo","label","view","onChangeView","search","setSearch","debouncedSearch","useDebouncedInput","useEffect","onChangeViewRef","useRef","current","page","searchLabel","__","_react","createElement","SearchControl","__nextHasNoMarginBottom","onChange","value","placeholder","size","_default","exports","default"],"sources":["@wordpress/dataviews/src/search.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, memo } from '@wordpress/element';\nimport { SearchControl } from '@wordpress/components';\nimport { useDebouncedInput } from '@wordpress/compose';\n\nconst Search = memo( function Search( { label, view, onChangeView } ) {\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput(\n\t\tview.search\n\t);\n\tuseEffect( () => {\n\t\tsetSearch( view.search );\n\t}, [ view ] );\n\tconst onChangeViewRef = useRef( onChangeView );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current = onChangeView;\n\t}, [ onChangeView ] );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current( {\n\t\t\t...view,\n\t\t\tpage: 1,\n\t\t\tsearch: debouncedSearch,\n\t\t} );\n\t}, [ debouncedSearch ] );\n\tconst searchLabel = label || __( 'Filter list' );\n\treturn (\n\t\t<SearchControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tonChange={ setSearch }\n\t\t\tvalue={ search }\n\t\t\tlabel={ searchLabel }\n\t\t\tplaceholder={ searchLabel }\n\t\t\tsize=\"compact\"\n\t\t/>\n\t);\n} );\n\nexport default Search;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AANA;AACA;AACA;;AAMA,MAAMI,MAAM,GAAG,IAAAC,aAAI,EAAE,SAASD,MAAMA,CAAE;EAAEE,KAAK;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EACrE,MAAM,CAAEC,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAG,IAAAC,0BAAiB,EAC/DL,IAAI,CAACE,MACN,CAAC;EACD,IAAAI,kBAAS,EAAE,MAAM;IAChBH,SAAS,CAAEH,IAAI,CAACE,MAAO,CAAC;EACzB,CAAC,EAAE,CAAEF,IAAI,CAAG,CAAC;EACb,MAAMO,eAAe,GAAG,IAAAC,eAAM,EAAEP,YAAa,CAAC;EAC9C,IAAAK,kBAAS,EAAE,MAAM;IAChBC,eAAe,CAACE,OAAO,GAAGR,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EACrB,IAAAK,kBAAS,EAAE,MAAM;IAChBC,eAAe,CAACE,OAAO,CAAE;MACxB,GAAGT,IAAI;MACPU,IAAI,EAAE,CAAC;MACPR,MAAM,EAAEE;IACT,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEA,eAAe,CAAG,CAAC;EACxB,MAAMO,WAAW,GAAGZ,KAAK,IAAI,IAAAa,QAAE,EAAE,aAAc,CAAC;EAChD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAAoB,aAAa;IACbC,uBAAuB;IACvBC,QAAQ,EAAGd,SAAW;IACtBe,KAAK,EAAGhB,MAAQ;IAChBH,KAAK,EAAGY,WAAa;IACrBQ,WAAW,EAAGR,WAAa;IAC3BS,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ,CAAE,CAAC;AAAC,IAAAC,QAAA,GAEWxB,MAAM;AAAAyB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_i18n","require","_element","_components","_compose","Search","memo","label","view","onChangeView","search","setSearch","debouncedSearch","useDebouncedInput","useEffect","onChangeViewRef","useRef","current","page","searchLabel","__","_react","createElement","SearchControl","__nextHasNoMarginBottom","onChange","value","placeholder","size","_default","exports","default"],"sources":["@wordpress/dataviews/src/search.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, memo } from '@wordpress/element';\nimport { SearchControl } from '@wordpress/components';\nimport { useDebouncedInput } from '@wordpress/compose';\n\nconst Search = memo( function Search( { label, view, onChangeView } ) {\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput(\n\t\tview.search\n\t);\n\tuseEffect( () => {\n\t\tsetSearch( view.search );\n\t}, [ view ] );\n\tconst onChangeViewRef = useRef( onChangeView );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current = onChangeView;\n\t}, [ onChangeView ] );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current( {\n\t\t\t...view,\n\t\t\tpage: 1,\n\t\t\tsearch: debouncedSearch,\n\t\t} );\n\t}, [ debouncedSearch ] );\n\tconst searchLabel = label || __( 'Search' );\n\treturn (\n\t\t<SearchControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tonChange={ setSearch }\n\t\t\tvalue={ search }\n\t\t\tlabel={ searchLabel }\n\t\t\tplaceholder={ searchLabel }\n\t\t\tsize=\"compact\"\n\t\t/>\n\t);\n} );\n\nexport default Search;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AANA;AACA;AACA;;AAMA,MAAMI,MAAM,GAAG,IAAAC,aAAI,EAAE,SAASD,MAAMA,CAAE;EAAEE,KAAK;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EACrE,MAAM,CAAEC,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAG,IAAAC,0BAAiB,EAC/DL,IAAI,CAACE,MACN,CAAC;EACD,IAAAI,kBAAS,EAAE,MAAM;IAChBH,SAAS,CAAEH,IAAI,CAACE,MAAO,CAAC;EACzB,CAAC,EAAE,CAAEF,IAAI,CAAG,CAAC;EACb,MAAMO,eAAe,GAAG,IAAAC,eAAM,EAAEP,YAAa,CAAC;EAC9C,IAAAK,kBAAS,EAAE,MAAM;IAChBC,eAAe,CAACE,OAAO,GAAGR,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EACrB,IAAAK,kBAAS,EAAE,MAAM;IAChBC,eAAe,CAACE,OAAO,CAAE;MACxB,GAAGT,IAAI;MACPU,IAAI,EAAE,CAAC;MACPR,MAAM,EAAEE;IACT,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEA,eAAe,CAAG,CAAC;EACxB,MAAMO,WAAW,GAAGZ,KAAK,IAAI,IAAAa,QAAE,EAAE,QAAS,CAAC;EAC3C,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAAoB,aAAa;IACbC,uBAAuB;IACvBC,QAAQ,EAAGd,SAAW;IACtBe,KAAK,EAAGhB,MAAQ;IAChBH,KAAK,EAAGY,WAAa;IACrBQ,WAAW,EAAGR,WAAa;IAC3BS,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ,CAAE,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEW1B,MAAM"}

package/build/single-selection-checkbox.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SingleSelectionCheckbox;
+var _react = require("react");
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+/**
+ * WordPress dependencies
+ */
+
+function SingleSelectionCheckbox({
+  selection,
+  onSelectionChange,
+  item,
+  data,
+  getItemId,
+  primaryField
+}) {
+  const id = getItemId(item);
+  const isSelected = selection.includes(id);
+  let selectionLabel;
+  if (primaryField?.getValue && item) {
+    // eslint-disable-next-line @wordpress/valid-sprintf
+    selectionLabel = (0, _i18n.sprintf)( /* translators: %s: item title. */
+    isSelected ? (0, _i18n.__)('Deselect item: %s') : (0, _i18n.__)('Select item: %s'), primaryField.getValue({
+      item
+    }));
+  } else {
+    selectionLabel = isSelected ? (0, _i18n.__)('Select a new item') : (0, _i18n.__)('Deselect item');
+  }
+  return (0, _react.createElement)(_components.CheckboxControl, {
+    className: "dataviews-view-table-selection-checkbox",
+    __nextHasNoMarginBottom: true,
+    checked: isSelected,
+    label: selectionLabel,
+    onChange: () => {
+      if (!isSelected) {
+        onSelectionChange(data.filter(_item => {
+          const itemId = getItemId?.(_item);
+          return itemId === id || selection.includes(itemId);
+        }));
+      } else {
+        onSelectionChange(data.filter(_item => {
+          const itemId = getItemId?.(_item);
+          return itemId !== id && selection.includes(itemId);
+        }));
+      }
+    }
+  });
+}
+//# sourceMappingURL=single-selection-checkbox.js.map

package/build/single-selection-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_components","SingleSelectionCheckbox","selection","onSelectionChange","item","data","getItemId","primaryField","id","isSelected","includes","selectionLabel","getValue","sprintf","__","_react","createElement","CheckboxControl","className","__nextHasNoMarginBottom","checked","label","onChange","filter","_item","itemId"],"sources":["@wordpress/dataviews/src/single-selection-checkbox.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { CheckboxControl } from '@wordpress/components';\n\nexport default function SingleSelectionCheckbox( {\n\tselection,\n\tonSelectionChange,\n\titem,\n\tdata,\n\tgetItemId,\n\tprimaryField,\n} ) {\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\tlet selectionLabel;\n\tif ( primaryField?.getValue && item ) {\n\t\t// eslint-disable-next-line @wordpress/valid-sprintf\n\t\tselectionLabel = sprintf(\n\t\t\t/* translators: %s: item title. */\n\t\t\tisSelected ? __( 'Deselect item: %s' ) : __( 'Select item: %s' ),\n\t\t\tprimaryField.getValue( { item } )\n\t\t);\n\t} else {\n\t\tselectionLabel = isSelected\n\t\t\t? __( 'Select a new item' )\n\t\t\t: __( 'Deselect item' );\n\t}\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\t__nextHasNoMarginBottom\n\t\t\tchecked={ isSelected }\n\t\t\tlabel={ selectionLabel }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( ! isSelected ) {\n\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\titemId === id || selection.includes( itemId )\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} else {\n\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\titemId !== id && selection.includes( itemId )\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} }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIe,SAASE,uBAAuBA,CAAE;EAChDC,SAAS;EACTC,iBAAiB;EACjBC,IAAI;EACJC,IAAI;EACJC,SAAS;EACTC;AACD,CAAC,EAAG;EACH,MAAMC,EAAE,GAAGF,SAAS,CAAEF,IAAK,CAAC;EAC5B,MAAMK,UAAU,GAAGP,SAAS,CAACQ,QAAQ,CAAEF,EAAG,CAAC;EAC3C,IAAIG,cAAc;EAClB,IAAKJ,YAAY,EAAEK,QAAQ,IAAIR,IAAI,EAAG;IACrC;IACAO,cAAc,GAAG,IAAAE,aAAO,GACvB;IACAJ,UAAU,GAAG,IAAAK,QAAE,EAAE,mBAAoB,CAAC,GAAG,IAAAA,QAAE,EAAE,iBAAkB,CAAC,EAChEP,YAAY,CAACK,QAAQ,CAAE;MAAER;IAAK,CAAE,CACjC,CAAC;EACF,CAAC,MAAM;IACNO,cAAc,GAAGF,UAAU,GACxB,IAAAK,QAAE,EAAE,mBAAoB,CAAC,GACzB,IAAAA,QAAE,EAAE,eAAgB,CAAC;EACzB;EACA,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAChB,WAAA,CAAAiB,eAAe;IACfC,SAAS,EAAC,yCAAyC;IACnDC,uBAAuB;IACvBC,OAAO,EAAGX,UAAY;IACtBY,KAAK,EAAGV,cAAgB;IACxBW,QAAQ,EAAGA,CAAA,KAAM;MAChB,IAAK,CAAEb,UAAU,EAAG;QACnBN,iBAAiB,CAChBE,IAAI,CAACkB,MAAM,CAAIC,KAAK,IAAM;UACzB,MAAMC,MAAM,GAAGnB,SAAS,GAAIkB,KAAM,CAAC;UACnC,OACCC,MAAM,KAAKjB,EAAE,IAAIN,SAAS,CAACQ,QAAQ,CAAEe,MAAO,CAAC;QAE/C,CAAE,CACH,CAAC;MACF,CAAC,MAAM;QACNtB,iBAAiB,CAChBE,IAAI,CAACkB,MAAM,CAAIC,KAAK,IAAM;UACzB,MAAMC,MAAM,GAAGnB,SAAS,GAAIkB,KAAM,CAAC;UACnC,OACCC,MAAM,KAAKjB,EAAE,IAAIN,SAAS,CAACQ,QAAQ,CAAEe,MAAO,CAAC;QAE/C,CAAE,CACH,CAAC;MACF;IACD;EAAG,CACH,CAAC;AAEJ"}

package/build/utils.js

@@ -4,7 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPaginationResults = getPaginationResults;
-exports.sortByTextFields = void 0;
+exports.sortByTextFields = exports.sanitizeOperators = void 0;
+var _constants = require("./constants");
+/**
+ * Internal dependencies
+ */
+
 /**
  * Helper util to sort data by text fields, when sorting is done client side.
  *
@@ -68,4 +73,12 @@ function getPaginationResults({
     }
   };
 }
+const sanitizeOperators = field => {
+  let operators = field.filterBy?.operators;
+  if (!operators || !Array.isArray(operators)) {
+    operators = Object.keys(_constants.OPERATORS);
+  }
+  return operators.filter(operator => Object.keys(_constants.OPERATORS).includes(operator));
+};
+exports.sanitizeOperators = sanitizeOperators;
 //# sourceMappingURL=utils.js.map

package/build/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["sortByTextFields","data","view","fields","textFields","sortedData","fieldId","sort","field","includes","fieldToSort","find","id","a","b","_fieldToSort$getValue","_fieldToSort$getValue2","valueA","getValue","item","valueB","direction","localeCompare","exports","getPaginationResults","start","page","perPage","totalItems","length","slice","paginationInfo","totalPages","Math","ceil"],"sources":["@wordpress/dataviews/src/utils.js"],"sourcesContent":["/**\n * Helper util to sort data by text fields, when sorting is done client side.\n *\n * @param {Object}   params            Function params.\n * @param {Object[]} params.data       Data to sort.\n * @param {Object}   params.view       Current view object.\n * @param {Object[]} params.fields     Array of available fields.\n * @param {string[]} params.textFields Array of the field ids to sort.\n *\n * @return {Object[]} Sorted data.\n */\nexport const sortByTextFields = ( { data, view, fields, textFields } ) => {\n\tconst sortedData = [ ...data ];\n\tconst fieldId = view.sort.field;\n\tif ( textFields.includes( fieldId ) ) {\n\t\tconst fieldToSort = fields.find( ( field ) => {\n\t\t\treturn field.id === fieldId;\n\t\t} );\n\t\tsortedData.sort( ( a, b ) => {\n\t\t\tconst valueA = fieldToSort.getValue( { item: a } ) ?? '';\n\t\t\tconst valueB = fieldToSort.getValue( { item: b } ) ?? '';\n\t\t\treturn view.sort.direction === 'asc'\n\t\t\t\t? valueA.localeCompare( valueB )\n\t\t\t\t: valueB.localeCompare( valueA );\n\t\t} );\n\t}\n\treturn sortedData;\n};\n\n/**\n * Helper util to get the paginated data and the paginateInfo needed,\n * when pagination is done client side.\n *\n * @param {Object}   params      Function params.\n * @param {Object[]} params.data Available data.\n * @param {Object}   params.view Current view object.\n *\n * @return {Object} Paginated data and paginationInfo.\n */\nexport function getPaginationResults( { data, view } ) {\n\tconst start = ( view.page - 1 ) * view.perPage;\n\tconst totalItems = data?.length || 0;\n\tdata = data?.slice( start, start + view.perPage );\n\treturn {\n\t\tdata,\n\t\tpaginationInfo: {\n\t\t\ttotalItems,\n\t\t\ttotalPages: Math.ceil( totalItems / view.perPage ),\n\t\t},\n\t};\n}\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAGA,CAAE;EAAEC,IAAI;EAAEC,IAAI;EAAEC,MAAM;EAAEC;AAAW,CAAC,KAAM;EACzE,MAAMC,UAAU,GAAG,CAAE,GAAGJ,IAAI,CAAE;EAC9B,MAAMK,OAAO,GAAGJ,IAAI,CAACK,IAAI,CAACC,KAAK;EAC/B,IAAKJ,UAAU,CAACK,QAAQ,CAAEH,OAAQ,CAAC,EAAG;IACrC,MAAMI,WAAW,GAAGP,MAAM,CAACQ,IAAI,CAAIH,KAAK,IAAM;MAC7C,OAAOA,KAAK,CAACI,EAAE,KAAKN,OAAO;IAC5B,CAAE,CAAC;IACHD,UAAU,CAACE,IAAI,CAAE,CAAEM,CAAC,EAAEC,CAAC,KAAM;MAAA,IAAAC,qBAAA,EAAAC,sBAAA;MAC5B,MAAMC,MAAM,IAAAF,qBAAA,GAAGL,WAAW,CAACQ,QAAQ,CAAE;QAAEC,IAAI,EAAEN;MAAE,CAAE,CAAC,cAAAE,qBAAA,cAAAA,qBAAA,GAAI,EAAE;MACxD,MAAMK,MAAM,IAAAJ,sBAAA,GAAGN,WAAW,CAACQ,QAAQ,CAAE;QAAEC,IAAI,EAAEL;MAAE,CAAE,CAAC,cAAAE,sBAAA,cAAAA,sBAAA,GAAI,EAAE;MACxD,OAAOd,IAAI,CAACK,IAAI,CAACc,SAAS,KAAK,KAAK,GACjCJ,MAAM,CAACK,aAAa,CAAEF,MAAO,CAAC,GAC9BA,MAAM,CAACE,aAAa,CAAEL,MAAO,CAAC;IAClC,CAAE,CAAC;EACJ;EACA,OAAOZ,UAAU;AAClB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AATAkB,OAAA,CAAAvB,gBAAA,GAAAA,gBAAA;AAUO,SAASwB,oBAAoBA,CAAE;EAAEvB,IAAI;EAAEC;AAAK,CAAC,EAAG;EACtD,MAAMuB,KAAK,GAAG,CAAEvB,IAAI,CAACwB,IAAI,GAAG,CAAC,IAAKxB,IAAI,CAACyB,OAAO;EAC9C,MAAMC,UAAU,GAAG3B,IAAI,EAAE4B,MAAM,IAAI,CAAC;EACpC5B,IAAI,GAAGA,IAAI,EAAE6B,KAAK,CAAEL,KAAK,EAAEA,KAAK,GAAGvB,IAAI,CAACyB,OAAQ,CAAC;EACjD,OAAO;IACN1B,IAAI;IACJ8B,cAAc,EAAE;MACfH,UAAU;MACVI,UAAU,EAAEC,IAAI,CAACC,IAAI,CAAEN,UAAU,GAAG1B,IAAI,CAACyB,OAAQ;IAClD;EACD,CAAC;AACF"}
+{"version":3,"names":["_constants","require","sortByTextFields","data","view","fields","textFields","sortedData","fieldId","sort","field","includes","fieldToSort","find","id","a","b","_fieldToSort$getValue","_fieldToSort$getValue2","valueA","getValue","item","valueB","direction","localeCompare","exports","getPaginationResults","start","page","perPage","totalItems","length","slice","paginationInfo","totalPages","Math","ceil","sanitizeOperators","operators","filterBy","Array","isArray","Object","keys","OPERATORS","filter","operator"],"sources":["@wordpress/dataviews/src/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { OPERATORS } from './constants';\n\n/**\n * Helper util to sort data by text fields, when sorting is done client side.\n *\n * @param {Object}   params            Function params.\n * @param {Object[]} params.data       Data to sort.\n * @param {Object}   params.view       Current view object.\n * @param {Object[]} params.fields     Array of available fields.\n * @param {string[]} params.textFields Array of the field ids to sort.\n *\n * @return {Object[]} Sorted data.\n */\nexport const sortByTextFields = ( { data, view, fields, textFields } ) => {\n\tconst sortedData = [ ...data ];\n\tconst fieldId = view.sort.field;\n\tif ( textFields.includes( fieldId ) ) {\n\t\tconst fieldToSort = fields.find( ( field ) => {\n\t\t\treturn field.id === fieldId;\n\t\t} );\n\t\tsortedData.sort( ( a, b ) => {\n\t\t\tconst valueA = fieldToSort.getValue( { item: a } ) ?? '';\n\t\t\tconst valueB = fieldToSort.getValue( { item: b } ) ?? '';\n\t\t\treturn view.sort.direction === 'asc'\n\t\t\t\t? valueA.localeCompare( valueB )\n\t\t\t\t: valueB.localeCompare( valueA );\n\t\t} );\n\t}\n\treturn sortedData;\n};\n\n/**\n * Helper util to get the paginated data and the paginateInfo needed,\n * when pagination is done client side.\n *\n * @param {Object}   params      Function params.\n * @param {Object[]} params.data Available data.\n * @param {Object}   params.view Current view object.\n *\n * @return {Object} Paginated data and paginationInfo.\n */\nexport function getPaginationResults( { data, view } ) {\n\tconst start = ( view.page - 1 ) * view.perPage;\n\tconst totalItems = data?.length || 0;\n\tdata = data?.slice( start, start + view.perPage );\n\treturn {\n\t\tdata,\n\t\tpaginationInfo: {\n\t\t\ttotalItems,\n\t\t\ttotalPages: Math.ceil( totalItems / view.perPage ),\n\t\t},\n\t};\n}\n\nexport const sanitizeOperators = ( field ) => {\n\tlet operators = field.filterBy?.operators;\n\tif ( ! operators || ! Array.isArray( operators ) ) {\n\t\toperators = Object.keys( OPERATORS );\n\t}\n\treturn operators.filter( ( operator ) =>\n\t\tObject.keys( OPERATORS ).includes( operator )\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,gBAAgB,GAAGA,CAAE;EAAEC,IAAI;EAAEC,IAAI;EAAEC,MAAM;EAAEC;AAAW,CAAC,KAAM;EACzE,MAAMC,UAAU,GAAG,CAAE,GAAGJ,IAAI,CAAE;EAC9B,MAAMK,OAAO,GAAGJ,IAAI,CAACK,IAAI,CAACC,KAAK;EAC/B,IAAKJ,UAAU,CAACK,QAAQ,CAAEH,OAAQ,CAAC,EAAG;IACrC,MAAMI,WAAW,GAAGP,MAAM,CAACQ,IAAI,CAAIH,KAAK,IAAM;MAC7C,OAAOA,KAAK,CAACI,EAAE,KAAKN,OAAO;IAC5B,CAAE,CAAC;IACHD,UAAU,CAACE,IAAI,CAAE,CAAEM,CAAC,EAAEC,CAAC,KAAM;MAAA,IAAAC,qBAAA,EAAAC,sBAAA;MAC5B,MAAMC,MAAM,IAAAF,qBAAA,GAAGL,WAAW,CAACQ,QAAQ,CAAE;QAAEC,IAAI,EAAEN;MAAE,CAAE,CAAC,cAAAE,qBAAA,cAAAA,qBAAA,GAAI,EAAE;MACxD,MAAMK,MAAM,IAAAJ,sBAAA,GAAGN,WAAW,CAACQ,QAAQ,CAAE;QAAEC,IAAI,EAAEL;MAAE,CAAE,CAAC,cAAAE,sBAAA,cAAAA,sBAAA,GAAI,EAAE;MACxD,OAAOd,IAAI,CAACK,IAAI,CAACc,SAAS,KAAK,KAAK,GACjCJ,MAAM,CAACK,aAAa,CAAEF,MAAO,CAAC,GAC9BA,MAAM,CAACE,aAAa,CAAEL,MAAO,CAAC;IAClC,CAAE,CAAC;EACJ;EACA,OAAOZ,UAAU;AAClB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AATAkB,OAAA,CAAAvB,gBAAA,GAAAA,gBAAA;AAUO,SAASwB,oBAAoBA,CAAE;EAAEvB,IAAI;EAAEC;AAAK,CAAC,EAAG;EACtD,MAAMuB,KAAK,GAAG,CAAEvB,IAAI,CAACwB,IAAI,GAAG,CAAC,IAAKxB,IAAI,CAACyB,OAAO;EAC9C,MAAMC,UAAU,GAAG3B,IAAI,EAAE4B,MAAM,IAAI,CAAC;EACpC5B,IAAI,GAAGA,IAAI,EAAE6B,KAAK,CAAEL,KAAK,EAAEA,KAAK,GAAGvB,IAAI,CAACyB,OAAQ,CAAC;EACjD,OAAO;IACN1B,IAAI;IACJ8B,cAAc,EAAE;MACfH,UAAU;MACVI,UAAU,EAAEC,IAAI,CAACC,IAAI,CAAEN,UAAU,GAAG1B,IAAI,CAACyB,OAAQ;IAClD;EACD,CAAC;AACF;AAEO,MAAMQ,iBAAiB,GAAK3B,KAAK,IAAM;EAC7C,IAAI4B,SAAS,GAAG5B,KAAK,CAAC6B,QAAQ,EAAED,SAAS;EACzC,IAAK,CAAEA,SAAS,IAAI,CAAEE,KAAK,CAACC,OAAO,CAAEH,SAAU,CAAC,EAAG;IAClDA,SAAS,GAAGI,MAAM,CAACC,IAAI,CAAEC,oBAAU,CAAC;EACrC;EACA,OAAON,SAAS,CAACO,MAAM,CAAIC,QAAQ,IAClCJ,MAAM,CAACC,IAAI,CAAEC,oBAAU,CAAC,CAACjC,QAAQ,CAAEmC,QAAS,CAC7C,CAAC;AACF,CAAC;AAACrB,OAAA,CAAAY,iBAAA,GAAAA,iBAAA"}

package/build/view-actions.js

@@ -72,7 +72,7 @@ function PageSizeMenu({
       suffix: (0, _react.createElement)("span", {
         "aria-hidden": "true"
       }, view.perPage)
-    }, (0, _react.createElement)(DropdownMenuItemLabel, null, (0, _i18n.__)('Rows per page')))
+    }, (0, _react.createElement)(DropdownMenuItemLabel, null, (0, _i18n.__)('Items per page')))
   }, PAGE_SIZE_VALUES.map(size => {
     return (0, _react.createElement)(DropdownMenuRadioItem, {
       key: size,
@@ -196,6 +196,5 @@ const ViewActions = (0, _element.memo)(function ViewActions({
     onChangeView: onChangeView
   })));
 });
-var _default = ViewActions;
-exports.default = _default;
+var _default = exports.default = ViewActions;
 //# sourceMappingURL=view-actions.js.map

package/build/view-actions.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_element","_icons","_lockUnlock","_constants","DropdownMenuV2","DropdownMenu","DropdownMenuGroupV2","DropdownMenuGroup","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuRadioItemV2","DropdownMenuRadioItem","DropdownMenuCheckboxItemV2","DropdownMenuCheckboxItem","DropdownMenuItemLabelV2","DropdownMenuItemLabel","unlock","componentsPrivateApis","ViewTypeMenu","view","onChangeView","supportedLayouts","_availableViews","VIEW_LAYOUTS","filter","_view","includes","type","length","activeView","find","v","_react","createElement","trigger","suffix","label","__","map","availableView","key","value","name","checked","hideOnClick","onChange","e","target","PAGE_SIZE_VALUES","PageSizeMenu","perPage","size","page","FieldsVisibilityMenu","fields","hidableFields","field","enableHiding","id","layout","mediaField","hiddenFields","header","SortMenu","sortableFields","enableSorting","currentSortedField","sort","sortedDirection","direction","style","minWidth","Object","entries","SORTING_DIRECTIONS","info","isChecked","undefined","ViewActions","memo","Button","icon","settings","_default","exports","default"],"sources":["@wordpress/dataviews/src/view-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { memo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\nimport { VIEW_LAYOUTS, SORTING_DIRECTIONS } from './constants';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuGroupV2: DropdownMenuGroup,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuRadioItemV2: DropdownMenuRadioItem,\n\tDropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,\n\tDropdownMenuItemLabelV2: DropdownMenuItemLabel,\n} = unlock( componentsPrivateApis );\n\nfunction ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {\n\tlet _availableViews = VIEW_LAYOUTS;\n\tif ( supportedLayouts ) {\n\t\t_availableViews = _availableViews.filter( ( _view ) =>\n\t\t\tsupportedLayouts.includes( _view.type )\n\t\t);\n\t}\n\tif ( _availableViews.length === 1 ) {\n\t\treturn null;\n\t}\n\tconst activeView = _availableViews.find( ( v ) => view.type === v.type );\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownMenuItem\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<span aria-hidden=\"true\">{ activeView.label }</span>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t</DropdownMenuItem>\n\t\t\t}\n\t\t>\n\t\t\t{ _availableViews.map( ( availableView ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\tkey={ availableView.type }\n\t\t\t\t\t\tvalue={ availableView.type }\n\t\t\t\t\t\tname=\"view-actions-available-view\"\n\t\t\t\t\t\tchecked={ availableView.type === view.type }\n\t\t\t\t\t\thideOnClick={ true }\n\t\t\t\t\t\tonChange={ ( e ) => {\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\ttype: e.target.value,\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\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t{ availableView.label }\n\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t</DropdownMenuRadioItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n\nconst PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];\nfunction PageSizeMenu( { view, onChangeView } ) {\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownMenuItem\n\t\t\t\t\tsuffix={ <span aria-hidden=\"true\">{ view.perPage }</span> }\n\t\t\t\t>\n\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t{ /* TODO: probably label per view type. */ }\n\t\t\t\t\t\t{ __( 'Rows per page' ) }\n\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t</DropdownMenuItem>\n\t\t\t}\n\t\t>\n\t\t\t{ PAGE_SIZE_VALUES.map( ( size ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\tkey={ size }\n\t\t\t\t\t\tvalue={ size }\n\t\t\t\t\t\tname=\"view-actions-page-size\"\n\t\t\t\t\t\tchecked={ view.perPage === size }\n\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t// `e.target.value` holds the same value as `size` but as a string,\n\t\t\t\t\t\t\t\t// so we use `size` directly to avoid parsing to int.\n\t\t\t\t\t\t\t\tperPage: size,\n\t\t\t\t\t\t\t\tpage: 1,\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\t\t<DropdownMenuItemLabel>{ size }</DropdownMenuItemLabel>\n\t\t\t\t\t</DropdownMenuRadioItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction FieldsVisibilityMenu( { view, onChangeView, fields } ) {\n\tconst hidableFields = fields.filter(\n\t\t( field ) =>\n\t\t\tfield.enableHiding !== false && field.id !== view.layout.mediaField\n\t);\n\tif ( ! hidableFields?.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownMenuItem>\n\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t{ __( 'Fields' ) }\n\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t</DropdownMenuItem>\n\t\t\t}\n\t\t>\n\t\t\t{ hidableFields?.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\tvalue={ field.id }\n\t\t\t\t\t\tchecked={ ! view.hiddenFields?.includes( field.id ) }\n\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\thiddenFields: view.hiddenFields?.includes(\n\t\t\t\t\t\t\t\t\tfield.id\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t? view.hiddenFields.filter(\n\t\t\t\t\t\t\t\t\t\t\t( id ) => id !== field.id\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: [\n\t\t\t\t\t\t\t\t\t\t\t...( view.hiddenFields || [] ),\n\t\t\t\t\t\t\t\t\t\t\tfield.id,\n\t\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>\n\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t</DropdownMenuCheckboxItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction SortMenu( { fields, view, onChangeView } ) {\n\tconst sortableFields = fields.filter(\n\t\t( field ) => field.enableSorting !== false\n\t);\n\tif ( ! sortableFields?.length ) {\n\t\treturn null;\n\t}\n\tconst currentSortedField = fields.find(\n\t\t( field ) => field.id === view.sort?.field\n\t);\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownMenuItem\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t{ currentSortedField?.header }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t{ __( 'Sort by' ) }\n\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t</DropdownMenuItem>\n\t\t\t}\n\t\t>\n\t\t\t{ sortableFields?.map( ( field ) => {\n\t\t\t\tconst sortedDirection = view.sort?.direction;\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t<DropdownMenuItem>\n\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tminWidth: '220px',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ Object.entries( SORTING_DIRECTIONS ).map(\n\t\t\t\t\t\t\t( [ direction, info ] ) => {\n\t\t\t\t\t\t\t\tconst isChecked =\n\t\t\t\t\t\t\t\t\tcurrentSortedField !== undefined &&\n\t\t\t\t\t\t\t\t\tsortedDirection === direction &&\n\t\t\t\t\t\t\t\t\tfield.id === currentSortedField.id;\n\n\t\t\t\t\t\t\t\tconst value = `${ field.id }-${ direction }`;\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\t\t\t\t\t// All sorting radio items share the same name, so that\n\t\t\t\t\t\t\t\t\t\t// selecting a sorting option automatically deselects the\n\t\t\t\t\t\t\t\t\t\t// previously selected one, even if it is displayed in\n\t\t\t\t\t\t\t\t\t\t// another submenu. The field and direction are passed via\n\t\t\t\t\t\t\t\t\t\t// the `value` prop.\n\t\t\t\t\t\t\t\t\t\tname=\"view-actions-sorting\"\n\t\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t\t\tchecked={ isChecked }\n\t\t\t\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\tsort: {\n\t\t\t\t\t\t\t\t\t\t\t\t\tfield: field.id,\n\t\t\t\t\t\t\t\t\t\t\t\t\tdirection,\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t{ info.label }\n\t\t\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t</DropdownMenuRadioItem>\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</DropdownMenu>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n\nconst ViewActions = memo( function ViewActions( {\n\tfields,\n\tview,\n\tonChangeView,\n\tsupportedLayouts,\n} ) {\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ticon={ settings }\n\t\t\t\t\tlabel={ __( 'View options' ) }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<DropdownMenuGroup>\n\t\t\t\t<ViewTypeMenu\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\tsupportedLayouts={ supportedLayouts }\n\t\t\t\t/>\n\t\t\t\t<SortMenu\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t\t<FieldsVisibilityMenu\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t\t<PageSizeMenu view={ view } onChangeView={ onChangeView } />\n\t\t\t</DropdownMenuGroup>\n\t\t</DropdownMenu>\n\t);\n} );\n\nexport default ViewActions;\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_i18n","_element","_icons","_lockUnlock","_constants","DropdownMenuV2","DropdownMenu","DropdownMenuGroupV2","DropdownMenuGroup","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuRadioItemV2","DropdownMenuRadioItem","DropdownMenuCheckboxItemV2","DropdownMenuCheckboxItem","DropdownMenuItemLabelV2","DropdownMenuItemLabel","unlock","componentsPrivateApis","ViewTypeMenu","view","onChangeView","supportedLayouts","_availableViews","VIEW_LAYOUTS","filter","_view","includes","type","length","activeView","find","v","_react","createElement","trigger","suffix","label","__","map","availableView","key","value","name","checked","hideOnClick","onChange","e","target","PAGE_SIZE_VALUES","PageSizeMenu","perPage","size","page","FieldsVisibilityMenu","fields","hidableFields","field","enableHiding","id","layout","mediaField","hiddenFields","header","SortMenu","sortableFields","enableSorting","currentSortedField","sort","sortedDirection","direction","style","minWidth","Object","entries","SORTING_DIRECTIONS","info","isChecked","undefined","ViewActions","memo","Button","icon","settings","_default","exports","default"],"sources":["@wordpress/dataviews/src/view-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { memo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\nimport { VIEW_LAYOUTS, SORTING_DIRECTIONS } from './constants';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuGroupV2: DropdownMenuGroup,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuRadioItemV2: DropdownMenuRadioItem,\n\tDropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,\n\tDropdownMenuItemLabelV2: DropdownMenuItemLabel,\n} = unlock( componentsPrivateApis );\n\nfunction ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {\n\tlet _availableViews = VIEW_LAYOUTS;\n\tif ( supportedLayouts ) {\n\t\t_availableViews = _availableViews.filter( ( _view ) =>\n\t\t\tsupportedLayouts.includes( _view.type )\n\t\t);\n\t}\n\tif ( _availableViews.length === 1 ) {\n\t\treturn null;\n\t}\n\tconst activeView = _availableViews.find( ( v ) => view.type === v.type );\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownMenuItem\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<span aria-hidden=\"true\">{ activeView.label }</span>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t</DropdownMenuItem>\n\t\t\t}\n\t\t>\n\t\t\t{ _availableViews.map( ( availableView ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\tkey={ availableView.type }\n\t\t\t\t\t\tvalue={ availableView.type }\n\t\t\t\t\t\tname=\"view-actions-available-view\"\n\t\t\t\t\t\tchecked={ availableView.type === view.type }\n\t\t\t\t\t\thideOnClick={ true }\n\t\t\t\t\t\tonChange={ ( e ) => {\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\ttype: e.target.value,\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\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t{ availableView.label }\n\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t</DropdownMenuRadioItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n\nconst PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];\nfunction PageSizeMenu( { view, onChangeView } ) {\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownMenuItem\n\t\t\t\t\tsuffix={ <span aria-hidden=\"true\">{ view.perPage }</span> }\n\t\t\t\t>\n\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t{ __( 'Items per page' ) }\n\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t</DropdownMenuItem>\n\t\t\t}\n\t\t>\n\t\t\t{ PAGE_SIZE_VALUES.map( ( size ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\tkey={ size }\n\t\t\t\t\t\tvalue={ size }\n\t\t\t\t\t\tname=\"view-actions-page-size\"\n\t\t\t\t\t\tchecked={ view.perPage === size }\n\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t// `e.target.value` holds the same value as `size` but as a string,\n\t\t\t\t\t\t\t\t// so we use `size` directly to avoid parsing to int.\n\t\t\t\t\t\t\t\tperPage: size,\n\t\t\t\t\t\t\t\tpage: 1,\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\t\t<DropdownMenuItemLabel>{ size }</DropdownMenuItemLabel>\n\t\t\t\t\t</DropdownMenuRadioItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction FieldsVisibilityMenu( { view, onChangeView, fields } ) {\n\tconst hidableFields = fields.filter(\n\t\t( field ) =>\n\t\t\tfield.enableHiding !== false && field.id !== view.layout.mediaField\n\t);\n\tif ( ! hidableFields?.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownMenuItem>\n\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t{ __( 'Fields' ) }\n\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t</DropdownMenuItem>\n\t\t\t}\n\t\t>\n\t\t\t{ hidableFields?.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\tvalue={ field.id }\n\t\t\t\t\t\tchecked={ ! view.hiddenFields?.includes( field.id ) }\n\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\thiddenFields: view.hiddenFields?.includes(\n\t\t\t\t\t\t\t\t\tfield.id\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t? view.hiddenFields.filter(\n\t\t\t\t\t\t\t\t\t\t\t( id ) => id !== field.id\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: [\n\t\t\t\t\t\t\t\t\t\t\t...( view.hiddenFields || [] ),\n\t\t\t\t\t\t\t\t\t\t\tfield.id,\n\t\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>\n\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t</DropdownMenuCheckboxItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction SortMenu( { fields, view, onChangeView } ) {\n\tconst sortableFields = fields.filter(\n\t\t( field ) => field.enableSorting !== false\n\t);\n\tif ( ! sortableFields?.length ) {\n\t\treturn null;\n\t}\n\tconst currentSortedField = fields.find(\n\t\t( field ) => field.id === view.sort?.field\n\t);\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownMenuItem\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t{ currentSortedField?.header }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t{ __( 'Sort by' ) }\n\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t</DropdownMenuItem>\n\t\t\t}\n\t\t>\n\t\t\t{ sortableFields?.map( ( field ) => {\n\t\t\t\tconst sortedDirection = view.sort?.direction;\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t<DropdownMenuItem>\n\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tminWidth: '220px',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ Object.entries( SORTING_DIRECTIONS ).map(\n\t\t\t\t\t\t\t( [ direction, info ] ) => {\n\t\t\t\t\t\t\t\tconst isChecked =\n\t\t\t\t\t\t\t\t\tcurrentSortedField !== undefined &&\n\t\t\t\t\t\t\t\t\tsortedDirection === direction &&\n\t\t\t\t\t\t\t\t\tfield.id === currentSortedField.id;\n\n\t\t\t\t\t\t\t\tconst value = `${ field.id }-${ direction }`;\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\t\t\t\t\t// All sorting radio items share the same name, so that\n\t\t\t\t\t\t\t\t\t\t// selecting a sorting option automatically deselects the\n\t\t\t\t\t\t\t\t\t\t// previously selected one, even if it is displayed in\n\t\t\t\t\t\t\t\t\t\t// another submenu. The field and direction are passed via\n\t\t\t\t\t\t\t\t\t\t// the `value` prop.\n\t\t\t\t\t\t\t\t\t\tname=\"view-actions-sorting\"\n\t\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t\t\tchecked={ isChecked }\n\t\t\t\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\tsort: {\n\t\t\t\t\t\t\t\t\t\t\t\t\tfield: field.id,\n\t\t\t\t\t\t\t\t\t\t\t\t\tdirection,\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t{ info.label }\n\t\t\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t</DropdownMenuRadioItem>\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</DropdownMenu>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n\nconst ViewActions = memo( function ViewActions( {\n\tfields,\n\tview,\n\tonChangeView,\n\tsupportedLayouts,\n} ) {\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ticon={ settings }\n\t\t\t\t\tlabel={ __( 'View options' ) }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<DropdownMenuGroup>\n\t\t\t\t<ViewTypeMenu\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\tsupportedLayouts={ supportedLayouts }\n\t\t\t\t/>\n\t\t\t\t<SortMenu\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t\t<FieldsVisibilityMenu\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t\t<PageSizeMenu view={ view } onChangeView={ onChangeView } />\n\t\t\t</DropdownMenuGroup>\n\t\t</DropdownMenu>\n\t);\n} );\n\nexport default ViewActions;\n"],"mappings":"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"}

package/build/view-grid.js

@@ -6,9 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ViewGrid;
 var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _itemActions = _interopRequireDefault(require("./item-actions"));
+var _singleSelectionCheckbox = _interopRequireDefault(require("./single-selection-checkbox"));
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -17,30 +24,48 @@ var _itemActions = _interopRequireDefault(require("./item-actions"));
  * Internal dependencies
  */
 
-function ViewGrid({
+function GridItem({
+  selection,
   data,
-  fields,
-  view,
-  actions,
+  onSelectionChange,
   getItemId,
-  deferredRendering
+  item,
+  actions,
+  mediaField,
+  primaryField,
+  visibleFields
 }) {
-  const mediaField = fields.find(field => field.id === view.layout.mediaField);
-  const primaryField = fields.find(field => field.id === view.layout.primaryField);
-  const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && ![view.layout.mediaField, view.layout.primaryField].includes(field.id));
-  const shownData = (0, _compose.useAsyncList)(data, {
-    step: 3
-  });
-  const usedData = deferredRendering ? shownData : data;
-  return (0, _react.createElement)(_components.__experimentalGrid, {
-    gap: 6,
-    columns: 2,
-    alignment: "top",
-    className: "dataviews-view-grid"
-  }, usedData.map(item => (0, _react.createElement)(_components.__experimentalVStack, {
+  const [hasNoPointerEvents, setHasNoPointerEvents] = (0, _element.useState)(false);
+  const id = getItemId(item);
+  const isSelected = selection.includes(id);
+  return (0, _react.createElement)(_components.__experimentalVStack, {
     spacing: 0,
-    key: getItemId(item),
-    className: "dataviews-view-grid__card"
+    key: id,
+    className: (0, _classnames.default)('dataviews-view-grid__card', {
+      'is-selected': isSelected,
+      'has-no-pointer-events': hasNoPointerEvents
+    }),
+    onMouseDown: event => {
+      if (event.ctrlKey || event.metaKey) {
+        setHasNoPointerEvents(true);
+        if (!isSelected) {
+          onSelectionChange(data.filter(_item => {
+            const itemId = getItemId?.(_item);
+            return itemId === id || selection.includes(itemId);
+          }));
+        } else {
+          onSelectionChange(data.filter(_item => {
+            const itemId = getItemId?.(_item);
+            return itemId !== id && selection.includes(itemId);
+          }));
+        }
+      }
+    },
+    onClick: () => {
+      if (hasNoPointerEvents) {
+        setHasNoPointerEvents(false);
+      }
+    }
   }, (0, _react.createElement)("div", {
     className: "dataviews-view-grid__media"
   }, mediaField?.render({
@@ -48,7 +73,15 @@ function ViewGrid({
   })), (0, _react.createElement)(_components.__experimentalHStack, {
     justify: "space-between",
     className: "dataviews-view-grid__title-actions"
-  }, (0, _react.createElement)(_components.__experimentalHStack, {
+  }, (0, _react.createElement)(_singleSelectionCheckbox.default, {
+    id: id,
+    item: item,
+    selection: selection,
+    onSelectionChange: onSelectionChange,
+    getItemId: getItemId,
+    data: data,
+    primaryField: primaryField
+  }), (0, _react.createElement)(_components.__experimentalHStack, {
     className: "dataviews-view-grid__primary-field"
   }, primaryField?.render({
     item
@@ -76,6 +109,43 @@ function ViewGrid({
     }, (0, _react.createElement)("div", {
       className: "dataviews-view-grid__field-value"
     }, renderedValue)));
-  })))));
+  })));
+}
+function ViewGrid({
+  data,
+  fields,
+  view,
+  actions,
+  getItemId,
+  deferredRendering,
+  selection,
+  onSelectionChange
+}) {
+  const mediaField = fields.find(field => field.id === view.layout.mediaField);
+  const primaryField = fields.find(field => field.id === view.layout.primaryField);
+  const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && ![view.layout.mediaField, view.layout.primaryField].includes(field.id));
+  const shownData = (0, _compose.useAsyncList)(data, {
+    step: 3
+  });
+  const usedData = deferredRendering ? shownData : data;
+  return (0, _react.createElement)(_components.__experimentalGrid, {
+    gap: 6,
+    columns: 2,
+    alignment: "top",
+    className: "dataviews-view-grid"
+  }, usedData.map(item => {
+    return (0, _react.createElement)(GridItem, {
+      key: getItemId(item),
+      selection: selection,
+      data: data,
+      onSelectionChange: onSelectionChange,
+      getItemId: getItemId,
+      item: item,
+      actions: actions,
+      mediaField: mediaField,
+      primaryField: primaryField,
+      visibleFields: visibleFields
+    });
+  }));
 }
 //# sourceMappingURL=view-grid.js.map

package/build/view-grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_compose","_itemActions","_interopRequireDefault","ViewGrid","data","fields","view","actions","getItemId","deferredRendering","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","shownData","useAsyncList","step","usedData","_react","createElement","__experimentalGrid","gap","columns","alignment","className","map","item","__experimentalVStack","spacing","key","render","__experimentalHStack","justify","default","isCompact","renderedValue","Tooltip","text","header","placement"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tTooltip,\n} from '@wordpress/components';\nimport { useAsyncList } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tgetItemId,\n\tdeferredRendering,\n} ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\treturn (\n\t\t<Grid\n\t\t\tgap={ 6 }\n\t\t\tcolumns={ 2 }\n\t\t\talignment=\"top\"\n\t\t\tclassName=\"dataviews-view-grid\"\n\t\t>\n\t\t\t{ usedData.map( ( item ) => (\n\t\t\t\t<VStack\n\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\tclassName=\"dataviews-view-grid__card\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t\t\t</div>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t<ItemActions\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\tisCompact\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\t\t\ttext={ field.header }\n\t\t\t\t\t\t\t\t\t\tplacement=\"left\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-grid__field-value\">\n\t\t\t\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_compose","_element","_itemActions","_singleSelectionCheckbox","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","hasNoPointerEvents","setHasNoPointerEvents","useState","id","isSelected","includes","_react","createElement","__experimentalVStack","spacing","key","className","classnames","onMouseDown","event","ctrlKey","metaKey","filter","_item","itemId","onClick","render","__experimentalHStack","justify","default","isCompact","map","field","renderedValue","Tooltip","text","header","placement","ViewGrid","fields","view","deferredRendering","find","layout","hiddenFields","shownData","useAsyncList","step","usedData","__experimentalGrid","gap","columns","alignment"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tTooltip,\n} from '@wordpress/components';\nimport { useAsyncList } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\n\nfunction GridItem( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n} ) {\n\tconst [ hasNoPointerEvents, setHasNoPointerEvents ] = useState( false );\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ classnames( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t\t'has-no-pointer-events': hasNoPointerEvents,\n\t\t\t} ) }\n\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\tif ( event.ctrlKey || event.metaKey ) {\n\t\t\t\t\tsetHasNoPointerEvents( true );\n\t\t\t\t\tif ( ! isSelected ) {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId === id ||\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\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} else {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId !== id &&\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\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}\n\t\t\t\t}\n\t\t\t} }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( hasNoPointerEvents ) {\n\t\t\t\t\tsetHasNoPointerEvents( false );\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t>\n\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\tid={ id }\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t/>\n\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t</HStack>\n\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t</HStack>\n\t\t\t<VStack className=\"dataviews-view-grid__fields\" spacing={ 3 }>\n\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\titem,\n\t\t\t\t\t} );\n\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip text={ field.header } placement=\"left\">\n\t\t\t\t\t\t\t\t<div className=\"dataviews-view-grid__field-value\">\n\t\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</VStack>\n\t\t</VStack>\n\t);\n}\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tgetItemId,\n\tdeferredRendering,\n\tselection,\n\tonSelectionChange,\n} ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\treturn (\n\t\t<Grid\n\t\t\tgap={ 6 }\n\t\t\tcolumns={ 2 }\n\t\t\talignment=\"top\"\n\t\t\tclassName=\"dataviews-view-grid\"\n\t\t>\n\t\t\t{ usedData.map( ( item ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<GridItem\n\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":"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"}

package/build/view-list.js

@@ -74,7 +74,8 @@ function ViewList({
       onClick: () => onSelectionChange([item])
     }, (0, _react.createElement)(_components.__experimentalHStack, {
       spacing: 3,
-      justify: "start"
+      justify: "start",
+      alignment: "flex-start"
     }, (0, _react.createElement)("div", {
       className: "dataviews-view-list__media-wrapper"
     }, mediaField?.render({