@wordpress/dataviews 0.8.0 → 1.0.0

package/build/utils.js

@@ -3,76 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPaginationResults = getPaginationResults;
-exports.sortByTextFields = exports.sanitizeOperators = void 0;
+exports.sanitizeOperators = void 0;
 var _constants = require("./constants");
 /**
  * Internal dependencies
  */
 
-/**
- * Helper util to sort data by text fields, when sorting is done client side.
- *
- * @param {Object}   params            Function params.
- * @param {Object[]} params.data       Data to sort.
- * @param {Object}   params.view       Current view object.
- * @param {Object[]} params.fields     Array of available fields.
- * @param {string[]} params.textFields Array of the field ids to sort.
- *
- * @return {Object[]} Sorted data.
- */
-const sortByTextFields = ({
-  data,
-  view,
-  fields,
-  textFields
-}) => {
-  const sortedData = [...data];
-  const fieldId = view.sort.field;
-  if (textFields.includes(fieldId)) {
-    const fieldToSort = fields.find(field => {
-      return field.id === fieldId;
-    });
-    sortedData.sort((a, b) => {
-      var _fieldToSort$getValue, _fieldToSort$getValue2;
-      const valueA = (_fieldToSort$getValue = fieldToSort.getValue({
-        item: a
-      })) !== null && _fieldToSort$getValue !== void 0 ? _fieldToSort$getValue : '';
-      const valueB = (_fieldToSort$getValue2 = fieldToSort.getValue({
-        item: b
-      })) !== null && _fieldToSort$getValue2 !== void 0 ? _fieldToSort$getValue2 : '';
-      return view.sort.direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
-    });
-  }
-  return sortedData;
-};
-
-/**
- * Helper util to get the paginated data and the paginateInfo needed,
- * when pagination is done client side.
- *
- * @param {Object}   params      Function params.
- * @param {Object[]} params.data Available data.
- * @param {Object}   params.view Current view object.
- *
- * @return {Object} Paginated data and paginationInfo.
- */
-exports.sortByTextFields = sortByTextFields;
-function getPaginationResults({
-  data,
-  view
-}) {
-  const start = (view.page - 1) * view.perPage;
-  const totalItems = data?.length || 0;
-  data = data?.slice(start, start + view.perPage);
-  return {
-    data,
-    paginationInfo: {
-      totalItems,
-      totalPages: Math.ceil(totalItems / view.perPage)
-    }
-  };
-}
 const sanitizeOperators = field => {
   let operators = field.filterBy?.operators;
 

package/build/utils.js.map

@@ -1 +1 @@
-{"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","OPERATOR_IS_ANY","OPERATOR_IS_NONE","filter","operator","push","ALL_OPERATORS","OPERATOR_IS","OPERATOR_IS_NOT"],"sources":["@wordpress/dataviews/src/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tALL_OPERATORS,\n\tOPERATOR_IS,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_IS_ANY,\n\tOPERATOR_IS_NONE,\n} 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\n\t// Assign default values.\n\tif ( ! operators || ! Array.isArray( operators ) ) {\n\t\toperators = [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ];\n\t}\n\n\t// Transform legacy in, notIn operators to is, isNot.\n\t// To be removed in the future.\n\tif ( operators.includes( 'in' ) ) {\n\t\toperators = operators.filter( ( operator ) => operator !== 'is' );\n\t\toperators.push( 'is' );\n\t}\n\tif ( operators.includes( 'notIn' ) ) {\n\t\toperators = operators.filter( ( operator ) => operator !== 'notIn' );\n\t\toperators.push( 'isNot' );\n\t}\n\n\t// Make sure only valid operators are used.\n\toperators = operators.filter( ( operator ) =>\n\t\tALL_OPERATORS.includes( operator )\n\t);\n\n\t// Do not allow mixing single & multiselection operators.\n\t// Remove multiselection operators if any of the single selection ones is present.\n\tif (\n\t\toperators.includes( OPERATOR_IS ) ||\n\t\toperators.includes( OPERATOR_IS_NOT )\n\t) {\n\t\toperators = operators.filter( ( operator ) =>\n\t\t\t[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( operator )\n\t\t);\n\t}\n\n\treturn operators;\n};\n"],"mappings":"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"}
+{"version":3,"names":["_constants","require","sanitizeOperators","field","operators","filterBy","Array","isArray","OPERATOR_IS_ANY","OPERATOR_IS_NONE","includes","filter","operator","push","ALL_OPERATORS","OPERATOR_IS","OPERATOR_IS_NOT","exports"],"sources":["@wordpress/dataviews/src/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tALL_OPERATORS,\n\tOPERATOR_IS,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_IS_ANY,\n\tOPERATOR_IS_NONE,\n} from './constants';\n\nexport const sanitizeOperators = ( field ) => {\n\tlet operators = field.filterBy?.operators;\n\n\t// Assign default values.\n\tif ( ! operators || ! Array.isArray( operators ) ) {\n\t\toperators = [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ];\n\t}\n\n\t// Transform legacy in, notIn operators to is, isNot.\n\t// To be removed in the future.\n\tif ( operators.includes( 'in' ) ) {\n\t\toperators = operators.filter( ( operator ) => operator !== 'is' );\n\t\toperators.push( 'is' );\n\t}\n\tif ( operators.includes( 'notIn' ) ) {\n\t\toperators = operators.filter( ( operator ) => operator !== 'notIn' );\n\t\toperators.push( 'isNot' );\n\t}\n\n\t// Make sure only valid operators are used.\n\toperators = operators.filter( ( operator ) =>\n\t\tALL_OPERATORS.includes( operator )\n\t);\n\n\t// Do not allow mixing single & multiselection operators.\n\t// Remove multiselection operators if any of the single selection ones is present.\n\tif (\n\t\toperators.includes( OPERATOR_IS ) ||\n\t\toperators.includes( OPERATOR_IS_NOT )\n\t) {\n\t\toperators = operators.filter( ( operator ) =>\n\t\t\t[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( operator )\n\t\t);\n\t}\n\n\treturn operators;\n};\n"],"mappings":";;;;;;AAGA,IAAAA,UAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AASO,MAAMC,iBAAiB,GAAKC,KAAK,IAAM;EAC7C,IAAIC,SAAS,GAAGD,KAAK,CAACE,QAAQ,EAAED,SAAS;;EAEzC;EACA,IAAK,CAAEA,SAAS,IAAI,CAAEE,KAAK,CAACC,OAAO,CAAEH,SAAU,CAAC,EAAG;IAClDA,SAAS,GAAG,CAAEI,0BAAe,EAAEC,2BAAgB,CAAE;EAClD;;EAEA;EACA;EACA,IAAKL,SAAS,CAACM,QAAQ,CAAE,IAAK,CAAC,EAAG;IACjCN,SAAS,GAAGA,SAAS,CAACO,MAAM,CAAIC,QAAQ,IAAMA,QAAQ,KAAK,IAAK,CAAC;IACjER,SAAS,CAACS,IAAI,CAAE,IAAK,CAAC;EACvB;EACA,IAAKT,SAAS,CAACM,QAAQ,CAAE,OAAQ,CAAC,EAAG;IACpCN,SAAS,GAAGA,SAAS,CAACO,MAAM,CAAIC,QAAQ,IAAMA,QAAQ,KAAK,OAAQ,CAAC;IACpER,SAAS,CAACS,IAAI,CAAE,OAAQ,CAAC;EAC1B;;EAEA;EACAT,SAAS,GAAGA,SAAS,CAACO,MAAM,CAAIC,QAAQ,IACvCE,wBAAa,CAACJ,QAAQ,CAAEE,QAAS,CAClC,CAAC;;EAED;EACA;EACA,IACCR,SAAS,CAACM,QAAQ,CAAEK,sBAAY,CAAC,IACjCX,SAAS,CAACM,QAAQ,CAAEM,0BAAgB,CAAC,EACpC;IACDZ,SAAS,GAAGA,SAAS,CAACO,MAAM,CAAIC,QAAQ,IACvC,CAAEG,sBAAW,EAAEC,0BAAe,CAAE,CAACN,QAAQ,CAAEE,QAAS,CACrD,CAAC;EACF;EAEA,OAAOR,SAAS;AACjB,CAAC;AAACa,OAAA,CAAAf,iBAAA,GAAAA,iBAAA","ignoreList":[]}

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\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":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AAfA;AACA;AACA;;AASA;AACA;AACA;;AAIA,MAAM;EACLM,cAAc,EAAEC,YAAY;EAC5BC,mBAAmB,EAAEC,iBAAiB;EACtCC,kBAAkB,EAAEC,gBAAgB;EACpCC,uBAAuB,EAAEC,qBAAqB;EAC9CC,0BAA0B,EAAEC,wBAAwB;EACpDC,uBAAuB,EAAEC;AAC1B,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;AAEnC,SAASC,YAAYA,CAAE;EAAEC,IAAI;EAAEC,YAAY;EAAEC;AAAiB,CAAC,EAAG;EACjE,IAAIC,eAAe,GAAGC,uBAAY;EAClC,IAAKF,gBAAgB,EAAG;IACvBC,eAAe,GAAGA,eAAe,CAACE,MAAM,CAAIC,KAAK,IAChDJ,gBAAgB,CAACK,QAAQ,CAAED,KAAK,CAACE,IAAK,CACvC,CAAC;EACF;EACA,IAAKL,eAAe,CAACM,MAAM,KAAK,CAAC,EAAG;IACnC,OAAO,IAAI;EACZ;EACA,MAAMC,UAAU,GAAGP,eAAe,CAACQ,IAAI,CAAIC,CAAC,IAAMZ,IAAI,CAACQ,IAAI,KAAKI,CAAC,CAACJ,IAAK,CAAC;EACxE,OACC,IAAAK,MAAA,CAAAC,aAAA,EAAC5B,YAAY;IACZ6B,OAAO,EACN,IAAAF,MAAA,CAAAC,aAAA,EAACxB,gBAAgB;MAChB0B,MAAM,EACL,IAAAH,MAAA,CAAAC,aAAA;QAAM,eAAY;MAAM,GAAGJ,UAAU,CAACO,KAAa;IACnD,GAED,IAAAJ,MAAA,CAAAC,aAAA,EAAClB,qBAAqB,QACnB,IAAAsB,QAAE,EAAE,QAAS,CACO,CACN;EAClB,GAECf,eAAe,CAACgB,GAAG,CAAIC,aAAa,IAAM;IAC3C,OACC,IAAAP,MAAA,CAAAC,aAAA,EAACtB,qBAAqB;MACrB6B,GAAG,EAAGD,aAAa,CAACZ,IAAM;MAC1Bc,KAAK,EAAGF,aAAa,CAACZ,IAAM;MAC5Be,IAAI,EAAC,6BAA6B;MAClCC,OAAO,EAAGJ,aAAa,CAACZ,IAAI,KAAKR,IAAI,CAACQ,IAAM;MAC5CiB,WAAW;MACXC,QAAQ,EAAKC,CAAC,IAAM;QACnB1B,YAAY,CAAE;UACb,GAAGD,IAAI;UACPQ,IAAI,EAAEmB,CAAC,CAACC,MAAM,CAACN;QAChB,CAAE,CAAC;MACJ;IAAG,GAEH,IAAAT,MAAA,CAAAC,aAAA,EAAClB,qBAAqB,QACnBwB,aAAa,CAACH,KACM,CACD,CAAC;EAE1B,CAAE,CACW,CAAC;AAEjB;AAEA,MAAMY,gBAAgB,GAAG,CAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAE;AAC5C,SAASC,YAAYA,CAAE;EAAE9B,IAAI;EAAEC;AAAa,CAAC,EAAG;EAC/C,OACC,IAAAY,MAAA,CAAAC,aAAA,EAAC5B,YAAY;IACZ6B,OAAO,EACN,IAAAF,MAAA,CAAAC,aAAA,EAACxB,gBAAgB;MAChB0B,MAAM,EAAG,IAAAH,MAAA,CAAAC,aAAA;QAAM,eAAY;MAAM,GAAGd,IAAI,CAAC+B,OAAe;IAAG,GAE3D,IAAAlB,MAAA,CAAAC,aAAA,EAAClB,qBAAqB,QACnB,IAAAsB,QAAE,EAAE,gBAAiB,CACD,CACN;EAClB,GAECW,gBAAgB,CAACV,GAAG,CAAIa,IAAI,IAAM;IACnC,OACC,IAAAnB,MAAA,CAAAC,aAAA,EAACtB,qBAAqB;MACrB6B,GAAG,EAAGW,IAAM;MACZV,KAAK,EAAGU,IAAM;MACdT,IAAI,EAAC,wBAAwB;MAC7BC,OAAO,EAAGxB,IAAI,CAAC+B,OAAO,KAAKC,IAAM;MACjCN,QAAQ,EAAGA,CAAA,KAAM;QAChBzB,YAAY,CAAE;UACb,GAAGD,IAAI;UACP;UACA;UACA+B,OAAO,EAAEC,IAAI;UACbC,IAAI,EAAE;QACP,CAAE,CAAC;MACJ;IAAG,GAEH,IAAApB,MAAA,CAAAC,aAAA,EAAClB,qBAAqB,QAAGoC,IAA6B,CAChC,CAAC;EAE1B,CAAE,CACW,CAAC;AAEjB;AAEA,SAASE,oBAAoBA,CAAE;EAAElC,IAAI;EAAEC,YAAY;EAAEkC;AAAO,CAAC,EAAG;EAC/D,MAAMC,aAAa,GAAGD,MAAM,CAAC9B,MAAM,CAChCgC,KAAK,IACNA,KAAK,CAACC,YAAY,KAAK,KAAK,IAAID,KAAK,CAACE,EAAE,KAAKvC,IAAI,CAACwC,MAAM,CAACC,UAC3D,CAAC;EACD,IAAK,CAAEL,aAAa,EAAE3B,MAAM,EAAG;IAC9B,OAAO,IAAI;EACZ;EACA,OACC,IAAAI,MAAA,CAAAC,aAAA,EAAC5B,YAAY;IACZ6B,OAAO,EACN,IAAAF,MAAA,CAAAC,aAAA,EAACxB,gBAAgB,QAChB,IAAAuB,MAAA,CAAAC,aAAA,EAAClB,qBAAqB,QACnB,IAAAsB,QAAE,EAAE,QAAS,CACO,CACN;EAClB,GAECkB,aAAa,EAAEjB,GAAG,CAAIkB,KAAK,IAAM;IAClC,OACC,IAAAxB,MAAA,CAAAC,aAAA,EAACpB,wBAAwB;MACxB2B,GAAG,EAAGgB,KAAK,CAACE,EAAI;MAChBjB,KAAK,EAAGe,KAAK,CAACE,EAAI;MAClBf,OAAO,EAAG,CAAExB,IAAI,CAAC0C,YAAY,EAAEnC,QAAQ,CAAE8B,KAAK,CAACE,EAAG,CAAG;MACrDb,QAAQ,EAAGA,CAAA,KAAM;QAChBzB,YAAY,CAAE;UACb,GAAGD,IAAI;UACP0C,YAAY,EAAE1C,IAAI,CAAC0C,YAAY,EAAEnC,QAAQ,CACxC8B,KAAK,CAACE,EACP,CAAC,GACEvC,IAAI,CAAC0C,YAAY,CAACrC,MAAM,CACtBkC,EAAE,IAAMA,EAAE,KAAKF,KAAK,CAACE,EACvB,CAAC,GACD,CACA,IAAKvC,IAAI,CAAC0C,YAAY,IAAI,EAAE,CAAE,EAC9BL,KAAK,CAACE,EAAE;QAEZ,CAAE,CAAC;MACJ;IAAG,GAEH,IAAA1B,MAAA,CAAAC,aAAA,EAAClB,qBAAqB,QACnByC,KAAK,CAACM,MACc,CACE,CAAC;EAE7B,CAAE,CACW,CAAC;AAEjB;AAEA,SAASC,QAAQA,CAAE;EAAET,MAAM;EAAEnC,IAAI;EAAEC;AAAa,CAAC,EAAG;EACnD,MAAM4C,cAAc,GAAGV,MAAM,CAAC9B,MAAM,CACjCgC,KAAK,IAAMA,KAAK,CAACS,aAAa,KAAK,KACtC,CAAC;EACD,IAAK,CAAED,cAAc,EAAEpC,MAAM,EAAG;IAC/B,OAAO,IAAI;EACZ;EACA,MAAMsC,kBAAkB,GAAGZ,MAAM,CAACxB,IAAI,CACnC0B,KAAK,IAAMA,KAAK,CAACE,EAAE,KAAKvC,IAAI,CAACgD,IAAI,EAAEX,KACtC,CAAC;EACD,OACC,IAAAxB,MAAA,CAAAC,aAAA,EAAC5B,YAAY;IACZ6B,OAAO,EACN,IAAAF,MAAA,CAAAC,aAAA,EAACxB,gBAAgB;MAChB0B,MAAM,EACL,IAAAH,MAAA,CAAAC,aAAA;QAAM,eAAY;MAAM,GACrBiC,kBAAkB,EAAEJ,MACjB;IACN,GAED,IAAA9B,MAAA,CAAAC,aAAA,EAAClB,qBAAqB,QACnB,IAAAsB,QAAE,EAAE,SAAU,CACM,CACN;EAClB,GAEC2B,cAAc,EAAE1B,GAAG,CAAIkB,KAAK,IAAM;IACnC,MAAMY,eAAe,GAAGjD,IAAI,CAACgD,IAAI,EAAEE,SAAS;IAC5C,OACC,IAAArC,MAAA,CAAAC,aAAA,EAAC5B,YAAY;MACZmC,GAAG,EAAGgB,KAAK,CAACE,EAAI;MAChBxB,OAAO,EACN,IAAAF,MAAA,CAAAC,aAAA,EAACxB,gBAAgB,QAChB,IAAAuB,MAAA,CAAAC,aAAA,EAAClB,qBAAqB,QACnByC,KAAK,CAACM,MACc,CACN,CAClB;MACDQ,KAAK,EAAG;QACPC,QAAQ,EAAE;MACX;IAAG,GAEDC,MAAM,CAACC,OAAO,CAAEC,6BAAmB,CAAC,CAACpC,GAAG,CACzC,CAAE,CAAE+B,SAAS,EAAEM,IAAI,CAAE,KAAM;MAC1B,MAAMC,SAAS,GACdV,kBAAkB,KAAKW,SAAS,IAChCT,eAAe,KAAKC,SAAS,IAC7Bb,KAAK,CAACE,EAAE,KAAKQ,kBAAkB,CAACR,EAAE;MAEnC,MAAMjB,KAAK,GAAI,GAAGe,KAAK,CAACE,EAAI,IAAIW,SAAW,EAAC;MAE5C,OACC,IAAArC,MAAA,CAAAC,aAAA,EAACtB,qBAAqB;QACrB6B,GAAG,EAAGC;QACN;QACA;QACA;QACA;QACA;QAAA;QACAC,IAAI,EAAC,sBAAsB;QAC3BD,KAAK,EAAGA,KAAO;QACfE,OAAO,EAAGiC,SAAW;QACrB/B,QAAQ,EAAGA,CAAA,KAAM;UAChBzB,YAAY,CAAE;YACb,GAAGD,IAAI;YACPgD,IAAI,EAAE;cACLX,KAAK,EAAEA,KAAK,CAACE,EAAE;cACfW;YACD;UACD,CAAE,CAAC;QACJ;MAAG,GAEH,IAAArC,MAAA,CAAAC,aAAA,EAAClB,qBAAqB,QACnB4D,IAAI,CAACvC,KACe,CACD,CAAC;IAE1B,CACD,CACa,CAAC;EAEjB,CAAE,CACW,CAAC;AAEjB;AAEA,MAAM0C,WAAW,GAAG,IAAAC,aAAI,EAAE,SAASD,WAAWA,CAAE;EAC/CxB,MAAM;EACNnC,IAAI;EACJC,YAAY;EACZC;AACD,CAAC,EAAG;EACH,OACC,IAAAW,MAAA,CAAAC,aAAA,EAAC5B,YAAY;IACZ6B,OAAO,EACN,IAAAF,MAAA,CAAAC,aAAA,EAACpC,WAAA,CAAAmF,MAAM;MACN7B,IAAI,EAAC,SAAS;MACd8B,IAAI,EAAGC,eAAU;MACjB9C,KAAK,EAAG,IAAAC,QAAE,EAAE,cAAe;IAAG,CAC9B;EACD,GAED,IAAAL,MAAA,CAAAC,aAAA,EAAC1B,iBAAiB,QACjB,IAAAyB,MAAA,CAAAC,aAAA,EAACf,YAAY;IACZC,IAAI,EAAGA,IAAM;IACbC,YAAY,EAAGA,YAAc;IAC7BC,gBAAgB,EAAGA;EAAkB,CACrC,CAAC,EACF,IAAAW,MAAA,CAAAC,aAAA,EAAC8B,QAAQ;IACRT,MAAM,EAAGA,MAAQ;IACjBnC,IAAI,EAAGA,IAAM;IACbC,YAAY,EAAGA;EAAc,CAC7B,CAAC,EACF,IAAAY,MAAA,CAAAC,aAAA,EAACoB,oBAAoB;IACpBC,MAAM,EAAGA,MAAQ;IACjBnC,IAAI,EAAGA,IAAM;IACbC,YAAY,EAAGA;EAAc,CAC7B,CAAC,EACF,IAAAY,MAAA,CAAAC,aAAA,EAACgB,YAAY;IAAC9B,IAAI,EAAGA,IAAM;IAACC,YAAY,EAAGA;EAAc,CAAE,CACzC,CACN,CAAC;AAEjB,CAAE,CAAC;AAAC,IAAA+D,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEWP,WAAW"}
+{"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\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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","ignoreList":[]}

package/build/view-grid.js

@@ -9,7 +9,6 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
-var _compose = require("@wordpress/compose");
 var _itemActions = _interopRequireDefault(require("./item-actions"));
 var _singleSelectionCheckbox = _interopRequireDefault(require("./single-selection-checkbox"));
 var _bulkActions = require("./bulk-actions");
@@ -34,7 +33,9 @@ function GridItem({
   actions,
   mediaField,
   primaryField,
-  visibleFields
+  visibleFields,
+  badgeFields,
+  columnFields
 }) {
   const hasBulkAction = (0, _bulkActions.useHasAPossibleBulkAction)(actions, item);
   const id = getItemId(item);
@@ -89,7 +90,24 @@ function GridItem({
     item: item,
     actions: actions,
     isCompact: true
-  })), (0, _react.createElement)(_components.__experimentalVStack, {
+  })), !!badgeFields?.length && (0, _react.createElement)(_components.__experimentalHStack, {
+    className: "dataviews-view-grid__badge-fields",
+    spacing: 2,
+    wrap: true,
+    align: "top",
+    justify: "flex-start"
+  }, badgeFields.map(field => {
+    const renderedValue = field.render({
+      item
+    });
+    if (!renderedValue) {
+      return null;
+    }
+    return (0, _react.createElement)(_components.FlexItem, {
+      key: field.id,
+      className: 'dataviews-view-grid__field-value'
+    }, renderedValue);
+  })), !!visibleFields?.length && (0, _react.createElement)(_components.__experimentalVStack, {
     className: "dataviews-view-grid__fields",
     spacing: 3
   }, visibleFields.map(field => {
@@ -99,15 +117,23 @@ function GridItem({
     if (!renderedValue) {
       return null;
     }
-    return (0, _react.createElement)(_components.__experimentalVStack, {
-      className: "dataviews-view-grid__field",
+    return (0, _react.createElement)(_components.Flex, {
+      className: (0, _classnames.default)('dataviews-view-grid__field', columnFields?.includes(field.id) ? 'is-column' : 'is-row'),
       key: field.id,
-      spacing: 1
-    }, (0, _react.createElement)(_components.Tooltip, {
-      text: field.header,
-      placement: "left"
-    }, (0, _react.createElement)("div", {
-      className: "dataviews-view-grid__field-value"
+      gap: 1,
+      justify: "flex-start",
+      expanded: true,
+      style: {
+        height: 'auto'
+      },
+      direction: columnFields?.includes(field.id) ? 'column' : 'row'
+    }, (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.FlexItem, {
+      className: "dataviews-view-grid__field-name"
+    }, field.header), (0, _react.createElement)(_components.FlexItem, {
+      className: "dataviews-view-grid__field-value",
+      style: {
+        maxHeight: 'none'
+      }
     }, renderedValue)));
   })));
 }
@@ -118,25 +144,35 @@ function ViewGrid({
   actions,
   isLoading,
   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 {
+    visibleFields,
+    badgeFields
+  } = fields.reduce((accumulator, field) => {
+    if (view.hiddenFields.includes(field.id) || [view.layout.mediaField, view.layout.primaryField].includes(field.id)) {
+      return accumulator;
+    }
+    // If the field is a badge field, add it to the badgeFields array
+    // otherwise add it to the rest visibleFields array.
+    const key = view.layout.badgeFields?.includes(field.id) ? 'badgeFields' : 'visibleFields';
+    accumulator[key].push(field);
+    return accumulator;
+  }, {
+    visibleFields: [],
+    badgeFields: []
   });
-  const usedData = deferredRendering ? shownData : data;
-  const hasData = !!usedData?.length;
+  const hasData = !!data?.length;
   return (0, _react.createElement)(_react.Fragment, null, hasData && (0, _react.createElement)(_components.__experimentalGrid, {
     gap: 6,
     columns: 2,
     alignment: "top",
     className: "dataviews-view-grid",
     "aria-busy": isLoading
-  }, usedData.map(item => {
+  }, data.map(item => {
     return (0, _react.createElement)(GridItem, {
       key: getItemId(item),
       selection: selection,
@@ -147,7 +183,9 @@ function ViewGrid({
       actions: actions,
       mediaField: mediaField,
       primaryField: primaryField,
-      visibleFields: visibleFields
+      visibleFields: visibleFields,
+      badgeFields: badgeFields,
+      columnFields: view.layout.columnFields
     });
   })), !hasData && (0, _react.createElement)("div", {
     className: (0, _classnames.default)({

package/build/view-grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_i18n","_compose","_itemActions","_singleSelectionCheckbox","_bulkActions","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","hasBulkAction","useHasAPossibleBulkAction","id","isSelected","includes","_react","createElement","__experimentalVStack","spacing","key","className","classnames","onClickCapture","event","ctrlKey","metaKey","stopPropagation","preventDefault","filter","_item","itemId","render","__experimentalHStack","justify","default","disabled","isCompact","map","field","renderedValue","Tooltip","text","header","placement","ViewGrid","fields","view","isLoading","deferredRendering","find","layout","hiddenFields","shownData","useAsyncList","step","usedData","hasData","length","Fragment","__experimentalGrid","gap","columns","alignment","Spinner","__"],"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\tSpinner,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useAsyncList } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\n\nimport { useHasAPossibleBulkAction } from './bulk-actions';\n\nfunction GridItem( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n} ) {\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\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': 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\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>\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\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{ 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\tisLoading,\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\tconst hasData = !! usedData?.length;\n\treturn (\n\t\t<>\n\t\t\t{ hasData && (\n\t\t\t\t<Grid\n\t\t\t\t\tgap={ 6 }\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\taria-busy={ isLoading }\n\t\t\t\t>\n\t\t\t\t\t{ usedData.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\tdata={ data }\n\t\t\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\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/>\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={ classnames( {\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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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_i18n","_itemActions","_singleSelectionCheckbox","_bulkActions","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","badgeFields","columnFields","hasBulkAction","useHasAPossibleBulkAction","id","isSelected","includes","_react","createElement","__experimentalVStack","spacing","key","className","classnames","onClickCapture","event","ctrlKey","metaKey","stopPropagation","preventDefault","filter","_item","itemId","render","__experimentalHStack","justify","default","disabled","isCompact","length","wrap","align","map","field","renderedValue","FlexItem","Flex","gap","expanded","style","height","direction","Fragment","header","maxHeight","ViewGrid","fields","view","isLoading","find","layout","reduce","accumulator","hiddenFields","push","hasData","__experimentalGrid","columns","alignment","Spinner","__"],"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\tSpinner,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\n\nimport { useHasAPossibleBulkAction } from './bulk-actions';\n\nfunction GridItem( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n\tbadgeFields,\n\tcolumnFields,\n} ) {\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\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': 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\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>\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\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{ 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{ !! 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\talign=\"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\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\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{ renderedValue }\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={ 3 }>\n\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\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={ classnames(\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.header }\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{ renderedValue }\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( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tisLoading,\n\tgetItemId,\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, badgeFields } = fields.reduce(\n\t\t( accumulator, field ) => {\n\t\t\tif (\n\t\t\t\tview.hiddenFields.includes( field.id ) ||\n\t\t\t\t[ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\t\tfield.id\n\t\t\t\t)\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\treturn (\n\t\t<>\n\t\t\t{ hasData && (\n\t\t\t\t<Grid\n\t\t\t\t\tgap={ 6 }\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\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\tdata={ data }\n\t\t\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\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={ classnames( {\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/view-list.js

@@ -9,9 +9,9 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
 var _components = require("@wordpress/components");
-var _keycodes = require("@wordpress/keycodes");
-var _icons = require("@wordpress/icons");
+var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
+var _lockUnlock = require("./lock-unlock");
 /**
  * External dependencies
  */
@@ -20,6 +20,89 @@ var _i18n = require("@wordpress/i18n");
  * WordPress dependencies
  */
 
+/**
+ * Internal dependencies
+ */
+
+const {
+  useCompositeStoreV2: useCompositeStore,
+  CompositeV2: Composite,
+  CompositeItemV2: CompositeItem,
+  CompositeRowV2: CompositeRow
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+function ListItem({
+  id,
+  item,
+  isSelected,
+  onSelect,
+  mediaField,
+  primaryField,
+  visibleFields
+}) {
+  const itemRef = (0, _element.useRef)(null);
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  (0, _element.useEffect)(() => {
+    if (isSelected) {
+      itemRef.current?.scrollIntoView({
+        behavior: 'auto',
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }, [isSelected]);
+  return (0, _react.createElement)(CompositeRow, {
+    ref: itemRef,
+    render: (0, _react.createElement)("li", null),
+    role: "row",
+    className: (0, _classnames.default)({
+      'is-selected': isSelected
+    })
+  }, (0, _react.createElement)(_components.__experimentalHStack, {
+    className: "dataviews-view-list__item-wrapper"
+  }, (0, _react.createElement)("div", {
+    role: "gridcell"
+  }, (0, _react.createElement)(CompositeItem, {
+    render: (0, _react.createElement)("div", null),
+    role: "button",
+    id: id,
+    "aria-pressed": isSelected,
+    "aria-labelledby": labelId,
+    "aria-describedby": descriptionId,
+    className: "dataviews-view-list__item",
+    onClick: () => onSelect(item)
+  }, (0, _react.createElement)(_components.__experimentalHStack, {
+    spacing: 3,
+    justify: "start",
+    alignment: "flex-start"
+  }, (0, _react.createElement)("div", {
+    className: "dataviews-view-list__media-wrapper"
+  }, mediaField?.render({
+    item
+  }) || (0, _react.createElement)("div", {
+    className: "dataviews-view-list__media-placeholder"
+  })), (0, _react.createElement)(_components.__experimentalVStack, {
+    spacing: 1
+  }, (0, _react.createElement)("span", {
+    className: "dataviews-view-list__primary-field",
+    id: labelId
+  }, primaryField?.render({
+    item
+  })), (0, _react.createElement)("div", {
+    className: "dataviews-view-list__fields",
+    id: descriptionId
+  }, visibleFields.map(field => (0, _react.createElement)("div", {
+    key: field.id,
+    className: "dataviews-view-list__field"
+  }, (0, _react.createElement)(_components.VisuallyHidden, {
+    as: "span",
+    className: "dataviews-view-list__field-label"
+  }, field.header), (0, _react.createElement)("span", {
+    className: "dataviews-view-list__field-value"
+  }, field.render({
+    item
+  })))))))))));
+}
 function ViewList({
   view,
   fields,
@@ -27,26 +110,20 @@ function ViewList({
   isLoading,
   getItemId,
   onSelectionChange,
-  onDetailsChange,
   selection,
-  deferredRendering
+  id: preferredId
 }) {
-  const shownData = (0, _compose.useAsyncList)(data, {
-    step: 3
-  });
-  const usedData = deferredRendering ? shownData : data;
+  const baseId = (0, _compose.useInstanceId)(ViewList, 'view-list', preferredId);
+  const selectedItem = data?.findLast(item => selection.includes(item.id));
   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.primaryField, view.layout.mediaField].includes(field.id));
-  const onEnter = item => event => {
-    const {
-      keyCode
-    } = event;
-    if ([_keycodes.ENTER, _keycodes.SPACE].includes(keyCode)) {
-      onSelectionChange([item]);
-    }
-  };
-  const hasData = usedData?.length;
+  const onSelect = (0, _element.useCallback)(item => onSelectionChange([item]), [onSelectionChange]);
+  const getItemDomId = (0, _element.useCallback)(item => item ? `${baseId}-${getItemId(item)}` : undefined, [baseId, getItemId]);
+  const store = useCompositeStore({
+    defaultActiveId: getItemDomId(selectedItem)
+  });
+  const hasData = data?.length;
   if (!hasData) {
     return (0, _react.createElement)("div", {
       className: (0, _classnames.default)({
@@ -55,55 +132,24 @@ function ViewList({
       })
     }, !hasData && (0, _react.createElement)("p", null, isLoading ? (0, _react.createElement)(_components.Spinner, null) : (0, _i18n.__)('No results')));
   }
-  return (0, _react.createElement)("ul", {
-    className: "dataviews-view-list"
-  }, usedData.map(item => {
-    return (0, _react.createElement)("li", {
-      key: getItemId(item),
-      className: (0, _classnames.default)({
-        'is-selected': selection.includes(item.id)
-      })
-    }, (0, _react.createElement)(_components.__experimentalHStack, {
-      className: "dataviews-view-list__item-wrapper"
-    }, (0, _react.createElement)("div", {
-      role: "button",
-      tabIndex: 0,
-      "aria-pressed": selection.includes(item.id),
-      onKeyDown: onEnter(item),
-      className: "dataviews-view-list__item",
-      onClick: () => onSelectionChange([item])
-    }, (0, _react.createElement)(_components.__experimentalHStack, {
-      spacing: 3,
-      justify: "start",
-      alignment: "flex-start"
-    }, (0, _react.createElement)("div", {
-      className: "dataviews-view-list__media-wrapper"
-    }, mediaField?.render({
-      item
-    }) || (0, _react.createElement)("div", {
-      className: "dataviews-view-list__media-placeholder"
-    })), (0, _react.createElement)(_components.__experimentalVStack, {
-      spacing: 1
-    }, (0, _react.createElement)("span", {
-      className: "dataviews-view-list__primary-field"
-    }, primaryField?.render({
-      item
-    })), (0, _react.createElement)("div", {
-      className: "dataviews-view-list__fields"
-    }, visibleFields.map(field => {
-      return (0, _react.createElement)("span", {
-        key: field.id,
-        className: "dataviews-view-list__field"
-      }, field.render({
-        item
-      }));
-    }))))), onDetailsChange && (0, _react.createElement)(_components.Button, {
-      className: "dataviews-view-list__details-button",
-      onClick: () => onDetailsChange([item]),
-      icon: _icons.info,
-      label: (0, _i18n.__)('View details'),
-      size: "compact"
-    })));
+  return (0, _react.createElement)(Composite, {
+    id: baseId,
+    render: (0, _react.createElement)("ul", null),
+    className: "dataviews-view-list",
+    role: "grid",
+    store: store
+  }, data.map(item => {
+    const id = getItemDomId(item);
+    return (0, _react.createElement)(ListItem, {
+      key: id,
+      id: id,
+      item: item,
+      isSelected: item === selectedItem,
+      onSelect: onSelect,
+      mediaField: mediaField,
+      primaryField: primaryField,
+      visibleFields: visibleFields
+    });
   }));
 }
 //# sourceMappingURL=view-list.js.map