@wordpress/dataviews 3.0.0 → 4.0.0

package/build/components/dataviews-search/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_element","_components","_compose","_dataviewsContext","_interopRequireDefault","_jsxRuntime","DataViewsSearch","memo","Search","label","view","onChangeView","useContext","DataViewsContext","search","setSearch","debouncedSearch","useDebouncedInput","useEffect","_view$search","onChangeViewRef","useRef","viewRef","current","page","searchLabel","__","jsx","SearchControl","__nextHasNoMarginBottom","onChange","value","placeholder","size","_default","exports","default"],"sources":["@wordpress/dataviews/src/components/dataviews-search/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, memo, useContext } from '@wordpress/element';\nimport { SearchControl } from '@wordpress/components';\nimport { useDebouncedInput } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\ninterface SearchProps {\n\tlabel?: string;\n}\n\nconst DataViewsSearch = memo( function Search( { label }: SearchProps ) {\n\tconst { view, onChangeView } = useContext( DataViewsContext );\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput(\n\t\tview.search\n\t);\n\tuseEffect( () => {\n\t\tsetSearch( view.search ?? '' );\n\t}, [ view.search, setSearch ] );\n\tconst onChangeViewRef = useRef( onChangeView );\n\tconst viewRef = useRef( view );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current = onChangeView;\n\t\tviewRef.current = view;\n\t}, [ onChangeView, view ] );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current( {\n\t\t\t...viewRef.current,\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 DataViewsSearch;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,iBAAA,GAAAC,sBAAA,CAAAL,OAAA;AAAoD,IAAAM,WAAA,GAAAN,OAAA;AAXpD;AACA;AACA;;AAMA;AACA;AACA;;AAOA,MAAMO,eAAe,GAAG,IAAAC,aAAI,EAAE,SAASC,MAAMA,CAAE;EAAEC;AAAmB,CAAC,EAAG;EACvE,MAAM;IAAEC,IAAI;IAAEC;EAAa,CAAC,GAAG,IAAAC,mBAAU,EAAEC,yBAAiB,CAAC;EAC7D,MAAM,CAAEC,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAG,IAAAC,0BAAiB,EAC/DP,IAAI,CAACI,MACN,CAAC;EACD,IAAAI,kBAAS,EAAE,MAAM;IAAA,IAAAC,YAAA;IAChBJ,SAAS,EAAAI,YAAA,GAAET,IAAI,CAACI,MAAM,cAAAK,YAAA,cAAAA,YAAA,GAAI,EAAG,CAAC;EAC/B,CAAC,EAAE,CAAET,IAAI,CAACI,MAAM,EAAEC,SAAS,CAAG,CAAC;EAC/B,MAAMK,eAAe,GAAG,IAAAC,eAAM,EAAEV,YAAa,CAAC;EAC9C,MAAMW,OAAO,GAAG,IAAAD,eAAM,EAAEX,IAAK,CAAC;EAC9B,IAAAQ,kBAAS,EAAE,MAAM;IAChBE,eAAe,CAACG,OAAO,GAAGZ,YAAY;IACtCW,OAAO,CAACC,OAAO,GAAGb,IAAI;EACvB,CAAC,EAAE,CAAEC,YAAY,EAAED,IAAI,CAAG,CAAC;EAC3B,IAAAQ,kBAAS,EAAE,MAAM;IAChBE,eAAe,CAACG,OAAO,CAAE;MACxB,GAAGD,OAAO,CAACC,OAAO;MAClBC,IAAI,EAAE,CAAC;MACPV,MAAM,EAAEE;IACT,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEA,eAAe,CAAG,CAAC;EACxB,MAAMS,WAAW,GAAGhB,KAAK,IAAI,IAAAiB,QAAE,EAAE,QAAS,CAAC;EAC3C,oBACC,IAAArB,WAAA,CAAAsB,GAAA,EAAC1B,WAAA,CAAA2B,aAAa;IACbC,uBAAuB;IACvBC,QAAQ,EAAGf,SAAW;IACtBgB,KAAK,EAAGjB,MAAQ;IAChBL,KAAK,EAAGgB,WAAa;IACrBO,WAAW,EAAGP,WAAa;IAC3BQ,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ,CAAE,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEW9B,eAAe","ignoreList":[]}

package/build/{single-selection-checkbox.js → components/dataviews-selection-checkbox/index.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = SingleSelectionCheckbox;
+exports.default = DataViewsSelectionCheckbox;
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -15,9 +15,9 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
-function SingleSelectionCheckbox({
+function DataViewsSelectionCheckbox({
   selection,
-  onSelectionChange,
+  onChangeSelection,
   item,
   getItemId,
   primaryField,
@@ -36,7 +36,7 @@ function SingleSelectionCheckbox({
     selectionLabel = checked ? (0, _i18n.__)('Select a new item') : (0, _i18n.__)('Deselect item');
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
-    className: "dataviews-view-table-selection-checkbox",
+    className: "dataviews-selection-checkbox",
     __nextHasNoMarginBottom: true,
     "aria-label": selectionLabel,
     "aria-disabled": disabled,
@@ -45,8 +45,8 @@ function SingleSelectionCheckbox({
       if (disabled) {
         return;
       }
-      onSelectionChange(selection.includes(id) ? selection.filter(itemId => id !== itemId) : [...selection, id]);
+      onChangeSelection(selection.includes(id) ? selection.filter(itemId => id !== itemId) : [...selection, id]);
     }
   });
 }
-//# sourceMappingURL=single-selection-checkbox.js.map
+//# sourceMappingURL=index.js.map

package/build/components/dataviews-selection-checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_components","_jsxRuntime","DataViewsSelectionCheckbox","selection","onChangeSelection","item","getItemId","primaryField","disabled","id","checked","includes","selectionLabel","getValue","sprintf","__","jsx","CheckboxControl","className","__nextHasNoMarginBottom","onChange","filter","itemId"],"sources":["@wordpress/dataviews/src/components/dataviews-selection-checkbox/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { CheckboxControl } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { Field } from '../../types';\nimport type { SetSelection } from '../../private-types';\n\ninterface DataViewsSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\titem: Item;\n\tgetItemId: ( item: Item ) => string;\n\tprimaryField?: Field< Item >;\n\tdisabled: boolean;\n}\n\nexport default function DataViewsSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\titem,\n\tgetItemId,\n\tprimaryField,\n\tdisabled,\n}: DataViewsSelectionCheckboxProps< Item > ) {\n\tconst id = getItemId( item );\n\tconst checked = ! disabled && 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\tchecked ? __( 'Deselect item: %s' ) : __( 'Select item: %s' ),\n\t\t\tprimaryField.getValue( { item } )\n\t\t);\n\t} else {\n\t\tselectionLabel = checked\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-selection-checkbox\"\n\t\t\t__nextHasNoMarginBottom\n\t\t\taria-label={ selectionLabel }\n\t\t\taria-disabled={ disabled }\n\t\t\tchecked={ checked }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( disabled ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonChangeSelection(\n\t\t\t\t\tselection.includes( id )\n\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t: [ ...selection, id ]\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;AAAwD,IAAAE,WAAA,GAAAF,OAAA;AAJxD;AACA;AACA;;AAIA;AACA;AACA;;AAae,SAASG,0BAA0BA,CAAU;EAC3DC,SAAS;EACTC,iBAAiB;EACjBC,IAAI;EACJC,SAAS;EACTC,YAAY;EACZC;AACwC,CAAC,EAAG;EAC5C,MAAMC,EAAE,GAAGH,SAAS,CAAED,IAAK,CAAC;EAC5B,MAAMK,OAAO,GAAG,CAAEF,QAAQ,IAAIL,SAAS,CAACQ,QAAQ,CAAEF,EAAG,CAAC;EACtD,IAAIG,cAAc;EAClB,IAAKL,YAAY,EAAEM,QAAQ,IAAIR,IAAI,EAAG;IACrC;IACAO,cAAc,GAAG,IAAAE,aAAO,GACvB;IACAJ,OAAO,GAAG,IAAAK,QAAE,EAAE,mBAAoB,CAAC,GAAG,IAAAA,QAAE,EAAE,iBAAkB,CAAC,EAC7DR,YAAY,CAACM,QAAQ,CAAE;MAAER;IAAK,CAAE,CACjC,CAAC;EACF,CAAC,MAAM;IACNO,cAAc,GAAGF,OAAO,GACrB,IAAAK,QAAE,EAAE,mBAAoB,CAAC,GACzB,IAAAA,QAAE,EAAE,eAAgB,CAAC;EACzB;EACA,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAChB,WAAA,CAAAiB,eAAe;IACfC,SAAS,EAAC,8BAA8B;IACxCC,uBAAuB;IACvB,cAAaP,cAAgB;IAC7B,iBAAgBJ,QAAU;IAC1BE,OAAO,EAAGA,OAAS;IACnBU,QAAQ,EAAGA,CAAA,KAAM;MAChB,IAAKZ,QAAQ,EAAG;QACf;MACD;MAEAJ,iBAAiB,CAChBD,SAAS,CAACQ,QAAQ,CAAEF,EAAG,CAAC,GACrBN,SAAS,CAACkB,MAAM,CAAIC,MAAM,IAAMb,EAAE,KAAKa,MAAO,CAAC,GAC/C,CAAE,GAAGnB,SAAS,EAAEM,EAAE,CACtB,CAAC;IACF;EAAG,CACH,CAAC;AAEJ","ignoreList":[]}

package/build/{view-actions.js → components/dataviews-view-config/index.js}

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,9 +9,10 @@ var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
 var _icons = require("@wordpress/icons");
-var _lockUnlock = require("./lock-unlock");
-var _constants = require("./constants");
-var _layouts = require("./layouts");
+var _lockUnlock = require("../../lock-unlock");
+var _constants = require("../../constants");
+var _layouts = require("../../layouts");
+var _dataviewsContext = _interopRequireDefault(require("../dataviews-context"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -115,7 +117,8 @@ function FieldsVisibilityMenu({
   onChangeView,
   fields
 }) {
-  const hidableFields = fields.filter(field => field.enableHiding !== false && field.id !== view?.layout?.mediaField);
+  const mandatoryFields = (0, _layouts.getMandatoryFields)(view);
+  const hidableFields = fields.filter(field => field.enableHiding !== false && !mandatoryFields.includes(field.id));
   const viewFields = view.fields || fields.map(field => field.id);
   if (!hidableFields?.length) {
     return null;
@@ -137,7 +140,7 @@ function FieldsVisibilityMenu({
           });
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
-          children: field.header
+          children: field.label
         })
       }, field.id);
     })
@@ -157,7 +160,7 @@ function SortMenu({
     trigger: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
       suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         "aria-hidden": "true",
-        children: currentSortedField?.header
+        children: currentSortedField?.label
       }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
         children: (0, _i18n.__)('Sort by')
@@ -168,7 +171,7 @@ function SortMenu({
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu, {
         trigger: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
-            children: field.header
+            children: field.label
           })
         }),
         style: {
@@ -204,12 +207,14 @@ function SortMenu({
     })
   });
 }
-function _ViewActions({
-  fields,
-  view,
-  onChangeView,
+function _DataViewsViewConfig({
   defaultLayouts
 }) {
+  const {
+    view,
+    fields,
+    onChangeView
+  } = (0, _element.useContext)(_dataviewsContext.default);
   const activeView = _layouts.VIEW_LAYOUTS.find(v => view.type === v.type);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
@@ -253,8 +258,6 @@ function _ViewActions({
     })
   });
 }
-
-// A type assertion is used here to keep the type argument.
-const ViewActions = (0, _element.memo)(_ViewActions);
-var _default = exports.default = ViewActions;
-//# sourceMappingURL=view-actions.js.map
+const DataViewsViewConfig = (0, _element.memo)(_DataViewsViewConfig);
+var _default = exports.default = DataViewsViewConfig;
+//# sourceMappingURL=index.js.map

package/build/components/dataviews-view-config/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_i18n","_element","_icons","_lockUnlock","_constants","_layouts","_dataviewsContext","_interopRequireDefault","_jsxRuntime","DropdownMenuV2","DropdownMenu","DropdownMenuGroupV2","DropdownMenuGroup","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuRadioItemV2","DropdownMenuRadioItem","DropdownMenuCheckboxItemV2","DropdownMenuCheckboxItem","DropdownMenuItemLabelV2","DropdownMenuItemLabel","unlock","componentsPrivateApis","ViewTypeMenu","view","onChangeView","defaultLayouts","list","grid","table","availableLayouts","Object","keys","length","map","layout","config","VIEW_LAYOUTS","find","v","type","jsx","value","name","checked","hideOnClick","onChange","e","target","Error","children","label","PAGE_SIZE_VALUES","PageSizeMenu","trigger","suffix","perPage","__","size","page","FieldsVisibilityMenu","fields","mandatoryFields","getMandatoryFields","hidableFields","filter","field","enableHiding","includes","id","viewFields","SortMenu","sortableFields","enableSorting","currentSortedField","sort","sortedDirection","direction","style","minWidth","SORTING_DIRECTIONS","isChecked","undefined","sortLabels","_DataViewsViewConfig","useContext","DataViewsContext","activeView","Fragment","jsxs","__experimentalHStack","spacing","expanded","flexShrink","Button","icon","cog","_x","DataViewsViewConfig","memo","_default","exports","default"],"sources":["@wordpress/dataviews/src/components/dataviews-view-config/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { memo, useContext } from '@wordpress/element';\nimport { cog } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { SORTING_DIRECTIONS, sortLabels } from '../../constants';\nimport { VIEW_LAYOUTS, getMandatoryFields } from '../../layouts';\nimport type { NormalizedField, View, SupportedLayouts } from '../../types';\nimport DataViewsContext from '../dataviews-context';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuGroupV2: DropdownMenuGroup,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuRadioItemV2: DropdownMenuRadioItem,\n\tDropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,\n\tDropdownMenuItemLabelV2: DropdownMenuItemLabel,\n} = unlock( componentsPrivateApis );\n\ninterface ViewTypeMenuProps {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tdefaultLayouts?: SupportedLayouts;\n}\n\ninterface PageSizeMenuProps {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n}\n\ninterface FieldsVisibilityMenuProps< Item > {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: NormalizedField< Item >[];\n}\n\ninterface SortMenuProps< Item > {\n\tfields: NormalizedField< Item >[];\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n}\n\ninterface ViewActionsProps {\n\tdefaultLayouts?: SupportedLayouts;\n}\n\nfunction ViewTypeMenu( {\n\tview,\n\tonChangeView,\n\tdefaultLayouts = { list: {}, grid: {}, table: {} },\n}: ViewTypeMenuProps ) {\n\tconst availableLayouts = Object.keys( defaultLayouts );\n\tif ( availableLayouts.length <= 1 ) {\n\t\treturn null;\n\t}\n\treturn availableLayouts.map( ( layout ) => {\n\t\tconst config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );\n\t\tif ( ! config ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<DropdownMenuRadioItem\n\t\t\t\tkey={ layout }\n\t\t\t\tvalue={ layout }\n\t\t\t\tname=\"view-actions-available-view\"\n\t\t\t\tchecked={ layout === view.type }\n\t\t\t\thideOnClick\n\t\t\t\tonChange={ ( e: ChangeEvent< HTMLInputElement > ) => {\n\t\t\t\t\tswitch ( e.target.value ) {\n\t\t\t\t\t\tcase 'list':\n\t\t\t\t\t\tcase 'grid':\n\t\t\t\t\t\tcase 'table':\n\t\t\t\t\t\t\treturn onChangeView( {\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\t...defaultLayouts[ e.target.value ],\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t\tthrow new Error( 'Invalid dataview' );\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<DropdownMenuItemLabel>{ config.label }</DropdownMenuItemLabel>\n\t\t\t</DropdownMenuRadioItem>\n\t\t);\n\t} );\n}\n\nconst PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];\nfunction PageSizeMenu( { view, onChangeView }: PageSizeMenuProps ) {\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< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n}: FieldsVisibilityMenuProps< Item > ) {\n\tconst mandatoryFields = getMandatoryFields( view );\n\tconst hidableFields = fields.filter(\n\t\t( field ) =>\n\t\t\tfield.enableHiding !== false &&\n\t\t\t! mandatoryFields.includes( field.id )\n\t);\n\tconst viewFields = view.fields || fields.map( ( field ) => field.id );\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={ viewFields.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\tfields: viewFields.includes( field.id )\n\t\t\t\t\t\t\t\t\t? viewFields.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: [ ...viewFields, field.id ],\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.label }\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< Item >( {\n\tfields,\n\tview,\n\tonChangeView,\n}: SortMenuProps< Item > ) {\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?.label }\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.label }\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{ SORTING_DIRECTIONS.map( ( direction ) => {\n\t\t\t\t\t\t\tconst isChecked =\n\t\t\t\t\t\t\t\tcurrentSortedField !== undefined &&\n\t\t\t\t\t\t\t\tsortedDirection === direction &&\n\t\t\t\t\t\t\t\tfield.id === currentSortedField.id;\n\n\t\t\t\t\t\t\tconst value = `${ field.id }-${ direction }`;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\t\t\t\tkey={ value }\n\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// selecting a sorting option automatically deselects the\n\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// another submenu. The field and direction are passed via\n\t\t\t\t\t\t\t\t\t// the `value` prop.\n\t\t\t\t\t\t\t\t\tname=\"view-actions-sorting\"\n\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t\tchecked={ isChecked }\n\t\t\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\tsort: {\n\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\tdirection,\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>\n\t\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t{ sortLabels[ direction ] }\n\t\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t</DropdownMenuRadioItem>\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\nfunction _DataViewsViewConfig( { defaultLayouts }: ViewActionsProps ) {\n\tconst { view, fields, onChangeView } = useContext( DataViewsContext );\n\tconst activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );\n\treturn (\n\t\t<>\n\t\t\t<HStack\n\t\t\t\tspacing={ 1 }\n\t\t\t\texpanded={ false }\n\t\t\t\tstyle={ { flexShrink: 0 } }\n\t\t\t>\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ttrigger={\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\ticon={ activeView?.icon }\n\t\t\t\t\t\t\tlabel={ __( 'Layout' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<ViewTypeMenu\n\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\tdefaultLayouts={ defaultLayouts }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownMenu>\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ttrigger={\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\ticon={ cog }\n\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t'View options',\n\t\t\t\t\t\t\t\t'View is used as a noun'\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\t\t<DropdownMenuGroup>\n\t\t\t\t\t\t<SortMenu\n\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<FieldsVisibilityMenu\n\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<PageSizeMenu\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</DropdownMenuGroup>\n\t\t\t\t</DropdownMenu>\n\t\t\t</HStack>\n\t\t</>\n\t);\n}\n\nconst DataViewsViewConfig = memo( _DataViewsViewConfig );\n\nexport default DataViewsViewConfig;\n"],"mappings":"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","ignoreList":[]}

package/build/index.js

@@ -28,8 +28,8 @@ Object.defineProperty(exports, "filterSortAndPaginate", {
     return _filterAndSortDataView.filterSortAndPaginate;
   }
 });
-var _dataviews = _interopRequireDefault(require("./dataviews"));
+var _dataviews = _interopRequireDefault(require("./components/dataviews"));
+var _dataform = _interopRequireDefault(require("./components/dataform"));
 var _layouts = require("./layouts");
 var _filterAndSortDataView = require("./filter-and-sort-data-view");
-var _dataform = _interopRequireDefault(require("./dataform"));
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_dataviews","_interopRequireDefault","require","_layouts","_filterAndSortDataView","_dataform"],"sources":["@wordpress/dataviews/src/index.ts"],"sourcesContent":["export { default as DataViews } from './dataviews';\nexport { VIEW_LAYOUTS } from './layouts';\nexport { filterSortAndPaginate } from './filter-and-sort-data-view';\nexport type * from './types';\nexport { default as DataForm } from './dataform';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAF,OAAA;AAEA,IAAAG,SAAA,GAAAJ,sBAAA,CAAAC,OAAA","ignoreList":[]}
+{"version":3,"names":["_dataviews","_interopRequireDefault","require","_dataform","_layouts","_filterAndSortDataView"],"sources":["@wordpress/dataviews/src/index.ts"],"sourcesContent":["export { default as DataViews } from './components/dataviews';\nexport { default as DataForm } from './components/dataform';\nexport { VIEW_LAYOUTS } from './layouts';\nexport { filterSortAndPaginate } from './filter-and-sort-data-view';\nexport type * from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,sBAAA,GAAAH,OAAA","ignoreList":[]}

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

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DensityPicker;
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+var _compose = require("@wordpress/compose");
+var _icons = require("@wordpress/icons");
+var _element = require("@wordpress/element");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+const viewportBreaks = {
+  xhuge: {
+    min: 3,
+    max: 6,
+    default: 5
+  },
+  huge: {
+    min: 2,
+    max: 4,
+    default: 4
+  },
+  xlarge: {
+    min: 2,
+    max: 3,
+    default: 3
+  },
+  large: {
+    min: 1,
+    max: 2,
+    default: 2
+  },
+  mobile: {
+    min: 1,
+    max: 2,
+    default: 2
+  }
+};
+function useViewPortBreakpoint() {
+  const isXHuge = (0, _compose.useViewportMatch)('xhuge', '>=');
+  const isHuge = (0, _compose.useViewportMatch)('huge', '>=');
+  const isXlarge = (0, _compose.useViewportMatch)('xlarge', '>=');
+  const isLarge = (0, _compose.useViewportMatch)('large', '>=');
+  const isMobile = (0, _compose.useViewportMatch)('mobile', '>=');
+  if (isXHuge) {
+    return 'xhuge';
+  }
+  if (isHuge) {
+    return 'huge';
+  }
+  if (isXlarge) {
+    return 'xlarge';
+  }
+  if (isLarge) {
+    return 'large';
+  }
+  if (isMobile) {
+    return 'mobile';
+  }
+  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);
+}
+function DensityPicker({
+  density,
+  setDensity
+}) {
+  const viewport = useViewPortBreakpoint();
+  (0, _element.useEffect)(() => {
+    setDensity(_density => {
+      if (!viewport || !_density) {
+        return 0;
+      }
+      const breakValues = viewportBreaks[viewport];
+      if (_density < breakValues.min) {
+        return breakValues.min;
+      }
+      if (_density > breakValues.max) {
+        return breakValues.max;
+      }
+      return _density;
+    });
+  }, [setDensity, viewport]);
+  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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      size: "compact",
+      icon: _icons.lineSolid,
+      disabled: rangeValue <= 0,
+      accessibleWhenDisabled: true,
+      label: (0, _i18n.__)('Decrease size'),
+      onClick: () => {
+        setDensity(densityToUse + 1);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
+      __nextHasNoMarginBottom: true,
+      showTooltip: false,
+      className: "dataviews-density-picker__range-control",
+      label: (0, _i18n.__)('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__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      size: "compact",
+      icon: _icons.plus,
+      disabled: rangeValue >= 100,
+      accessibleWhenDisabled: true,
+      label: (0, _i18n.__)('Increase size'),
+      onClick: () => {
+        setDensity(densityToUse - 1);
+      }
+    })]
+  });
+}
+//# sourceMappingURL=density-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_i18n","_compose","_icons","_element","_jsxRuntime","viewportBreaks","xhuge","min","max","default","huge","xlarge","large","mobile","useViewPortBreakpoint","isXHuge","useViewportMatch","isHuge","isXlarge","isLarge","isMobile","getRangeValue","density","breakValues","inverseDensity","Math","round","DensityPicker","setDensity","viewport","useEffect","_density","densityToUse","rangeValue","step","jsxs","Fragment","children","jsx","Button","size","icon","lineSolid","disabled","accessibleWhenDisabled","label","__","onClick","RangeControl","__nextHasNoMarginBottom","showTooltip","className","hideLabelFromVision","value","withInputField","onChange","inverseValue","plus"],"sources":["@wordpress/dataviews/src/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, lineSolid } 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={ lineSolid }\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":[]}

package/build/{view-grid.js → layouts/grid/index.js}

@@ -8,9 +8,9 @@ exports.default = ViewGrid;
 var _clsx = _interopRequireDefault(require("clsx"));
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
-var _itemActions = _interopRequireDefault(require("./item-actions"));
-var _singleSelectionCheckbox = _interopRequireDefault(require("./single-selection-checkbox"));
-var _bulkActions = require("./bulk-actions");
+var _dataviewsItemActions = _interopRequireDefault(require("../../components/dataviews-item-actions"));
+var _dataviewsSelectionCheckbox = _interopRequireDefault(require("../../components/dataviews-selection-checkbox"));
+var _dataviewsBulkActions = require("../../components/dataviews-bulk-actions");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -26,7 +26,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function GridItem({
   selection,
-  onSelectionChange,
+  onChangeSelection,
   getItemId,
   item,
   actions,
@@ -36,9 +36,15 @@ function GridItem({
   badgeFields,
   columnFields
 }) {
-  const hasBulkAction = (0, _bulkActions.useHasAPossibleBulkAction)(actions, item);
+  const hasBulkAction = (0, _dataviewsBulkActions.useHasAPossibleBulkAction)(actions, item);
   const id = getItemId(item);
   const isSelected = selection.includes(id);
+  const renderedMediaField = mediaField?.render ? /*#__PURE__*/(0, _jsxRuntime.jsx)(mediaField.render, {
+    item: item
+  }) : null;
+  const renderedPrimaryField = primaryField?.render ? /*#__PURE__*/(0, _jsxRuntime.jsx)(primaryField.render, {
+    item: item
+  }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
     spacing: 0,
     className: (0, _clsx.default)('dataviews-view-grid__card', {
@@ -51,30 +57,26 @@ function GridItem({
         if (!hasBulkAction) {
           return;
         }
-        onSelectionChange(selection.includes(id) ? selection.filter(itemId => id !== itemId) : [...selection, id]);
+        onChangeSelection(selection.includes(id) ? selection.filter(itemId => id !== itemId) : [...selection, id]);
       }
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "dataviews-view-grid__media",
-      children: mediaField?.render({
-        item
-      })
+      children: renderedMediaField
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
       justify: "space-between",
       className: "dataviews-view-grid__title-actions",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_singleSelectionCheckbox.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsSelectionCheckbox.default, {
         item: item,
         selection: selection,
-        onSelectionChange: onSelectionChange,
+        onChangeSelection: onChangeSelection,
         getItemId: getItemId,
         primaryField: primaryField,
         disabled: !hasBulkAction
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
         className: "dataviews-view-grid__primary-field",
-        children: primaryField?.render({
-          item
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemActions.default, {
+        children: renderedPrimaryField
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsItemActions.default, {
         item: item,
         actions: actions,
         isCompact: true
@@ -86,27 +88,17 @@ function GridItem({
       alignment: "top",
       justify: "flex-start",
       children: badgeFields.map(field => {
-        const renderedValue = field.render({
-          item
-        });
-        if (!renderedValue) {
-          return null;
-        }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
           className: "dataviews-view-grid__field-value",
-          children: renderedValue
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(field.render, {
+            item: item
+          })
         }, field.id);
       })
     }), !!visibleFields?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
       className: "dataviews-view-grid__fields",
-      spacing: 3,
+      spacing: 1,
       children: visibleFields.map(field => {
-        const renderedValue = field.render({
-          item
-        });
-        if (!renderedValue) {
-          return null;
-        }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Flex, {
           className: (0, _clsx.default)('dataviews-view-grid__field', columnFields?.includes(field.id) ? 'is-column' : 'is-row'),
           gap: 1,
@@ -119,13 +111,15 @@ function GridItem({
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
               className: "dataviews-view-grid__field-name",
-              children: field.header
+              children: field.label
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
               className: "dataviews-view-grid__field-value",
               style: {
                 maxHeight: 'none'
               },
-              children: renderedValue
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(field.render, {
+                item: item
+              })
             })]
           })
         }, field.id);
@@ -139,9 +133,10 @@ function ViewGrid({
   fields,
   getItemId,
   isLoading,
-  onSelectionChange,
+  onChangeSelection,
   selection,
-  view
+  view,
+  density
 }) {
   const mediaField = fields.find(field => field.id === view.layout?.mediaField);
   const primaryField = fields.find(field => field.id === view.layout?.primaryField);
@@ -163,17 +158,21 @@ function ViewGrid({
     badgeFields: []
   });
   const hasData = !!data?.length;
+  const gridStyle = density ? {
+    gridTemplateColumns: `repeat(${density}, minmax(0, 1fr))`
+  } : {};
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [hasData && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalGrid, {
       gap: 8,
       columns: 2,
       alignment: "top",
       className: "dataviews-view-grid",
+      style: gridStyle,
       "aria-busy": isLoading,
       children: data.map(item => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridItem, {
           selection: selection,
-          onSelectionChange: onSelectionChange,
+          onChangeSelection: onChangeSelection,
           getItemId: getItemId,
           item: item,
           actions: actions,
@@ -195,4 +194,4 @@ function ViewGrid({
     })]
   });
 }
-//# sourceMappingURL=view-grid.js.map
+//# sourceMappingURL=index.js.map

package/build/layouts/grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_components","_i18n","_dataviewsItemActions","_dataviewsSelectionCheckbox","_dataviewsBulkActions","_jsxRuntime","GridItem","selection","onChangeSelection","getItemId","item","actions","mediaField","primaryField","visibleFields","badgeFields","columnFields","hasBulkAction","useHasAPossibleBulkAction","id","isSelected","includes","renderedMediaField","render","jsx","renderedPrimaryField","jsxs","__experimentalVStack","spacing","className","clsx","onClickCapture","event","ctrlKey","metaKey","stopPropagation","preventDefault","filter","itemId","children","__experimentalHStack","justify","default","disabled","isCompact","length","wrap","alignment","map","field","FlexItem","Flex","gap","expanded","style","height","direction","Fragment","label","maxHeight","ViewGrid","data","fields","isLoading","view","density","find","layout","viewFields","reduce","accumulator","key","push","hasData","gridStyle","gridTemplateColumns","__experimentalGrid","columns","Spinner","__"],"sources":["@wordpress/dataviews/src/layouts/grid/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tSpinner,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from '../../components/dataviews-item-actions';\nimport SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';\nimport { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';\nimport type { Action, NormalizedField, ViewGridProps } from '../../types';\nimport type { SetSelection } from '../../private-types';\n\ninterface GridItemProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\n\titem: Item;\n\tactions: Action< Item >[];\n\tmediaField?: NormalizedField< Item >;\n\tprimaryField?: NormalizedField< Item >;\n\tvisibleFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\tcolumnFields?: string[];\n}\n\nfunction GridItem< Item >( {\n\tselection,\n\tonChangeSelection,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n\tbadgeFields,\n\tcolumnFields,\n}: GridItemProps< Item > ) {\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\tconst renderedMediaField = mediaField?.render ? (\n\t\t<mediaField.render item={ item } />\n\t) : null;\n\tconst renderedPrimaryField = primaryField?.render ? (\n\t\t<primaryField.render item={ item } />\n\t) : null;\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ clsx( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t} ) }\n\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\tif ( event.ctrlKey || event.metaKey ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif ( ! hasBulkAction ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.includes( id )\n\t\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t\t: [ ...selection, id ]\n\t\t\t\t\t);\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{ renderedMediaField }\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\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t{ renderedPrimaryField }\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{ !! badgeFields?.length && (\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\twrap\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t>\n\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<field.render item={ item } />\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ !! visibleFields?.length && (\n\t\t\t\t<VStack className=\"dataviews-view-grid__fields\" spacing={ 1 }>\n\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'dataviews-view-grid__field',\n\t\t\t\t\t\t\t\t\tcolumnFields?.includes( field.id )\n\t\t\t\t\t\t\t\t\t\t? 'is-column'\n\t\t\t\t\t\t\t\t\t\t: 'is-row'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\t\t\tcolumnFields?.includes( field.id )\n\t\t\t\t\t\t\t\t\t\t? 'column'\n\t\t\t\t\t\t\t\t\t\t: 'row'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<FlexItem className=\"dataviews-view-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<field.render item={ item } />\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default function ViewGrid< Item >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonChangeSelection,\n\tselection,\n\tview,\n\tdensity,\n}: ViewGridProps< Item > ) {\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 viewFields = view.fields || fields.map( ( field ) => field.id );\n\tconst { visibleFields, badgeFields } = fields.reduce(\n\t\t( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {\n\t\t\tif (\n\t\t\t\t! viewFields.includes( field.id ) ||\n\t\t\t\t[\n\t\t\t\t\tview.layout?.mediaField,\n\t\t\t\t\tview?.layout?.primaryField,\n\t\t\t\t].includes( field.id )\n\t\t\t) {\n\t\t\t\treturn accumulator;\n\t\t\t}\n\t\t\t// If the field is a badge field, add it to the badgeFields array\n\t\t\t// otherwise add it to the rest visibleFields array.\n\t\t\tconst key = view.layout?.badgeFields?.includes( field.id )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'visibleFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ visibleFields: [], badgeFields: [] }\n\t);\n\tconst hasData = !! data?.length;\n\tconst gridStyle = density\n\t\t? { gridTemplateColumns: `repeat(${ density }, minmax(0, 1fr))` }\n\t\t: {};\n\treturn (\n\t\t<>\n\t\t\t{ hasData && (\n\t\t\t\t<Grid\n\t\t\t\t\tgap={ 8 }\n\t\t\t\t\tcolumns={ 2 }\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tclassName=\"dataviews-view-grid\"\n\t\t\t\t\tstyle={ gridStyle }\n\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t>\n\t\t\t\t\t{ data.map( ( item ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\tcolumnFields={ view.layout?.columnFields }\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</Grid>\n\t\t\t) }\n\t\t\t{ ! hasData && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/layouts/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VIEW_LAYOUTS = void 0;
+exports.getMandatoryFields = getMandatoryFields;
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _table = _interopRequireDefault(require("./table"));
+var _grid = _interopRequireDefault(require("./grid"));
+var _list = _interopRequireDefault(require("./list"));
+var _constants = require("../constants");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const VIEW_LAYOUTS = exports.VIEW_LAYOUTS = [{
+  type: _constants.LAYOUT_TABLE,
+  label: (0, _i18n.__)('Table'),
+  component: _table.default,
+  icon: _icons.blockTable
+}, {
+  type: _constants.LAYOUT_GRID,
+  label: (0, _i18n.__)('Grid'),
+  component: _grid.default,
+  icon: _icons.category
+}, {
+  type: _constants.LAYOUT_LIST,
+  label: (0, _i18n.__)('List'),
+  component: _list.default,
+  icon: (0, _i18n.isRTL)() ? _icons.formatListBulletsRTL : _icons.formatListBullets
+}];
+function getMandatoryFields(view) {
+  if (view.type === 'table') {
+    var _view$layout$combined;
+    return [view.layout?.primaryField].concat((_view$layout$combined = view.layout?.combinedFields?.flatMap(field => field.children)) !== null && _view$layout$combined !== void 0 ? _view$layout$combined : []).filter(item => !!item);
+  }
+  if (view.type === 'grid') {
+    return [view.layout?.primaryField, view.layout?.mediaField].filter(item => !!item);
+  }
+  if (view.type === 'list') {
+    return [view.layout?.primaryField, view.layout?.mediaField].filter(item => !!item);
+  }
+  return [];
+}
+//# sourceMappingURL=index.js.map