@wordpress/dataviews 1.2.0 → 2.0.1

package/build-module/view-grid.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
@@ -16,6 +15,9 @@ import { __ } from '@wordpress/i18n';
 import ItemActions from './item-actions';
 import SingleSelectionCheckbox from './single-selection-checkbox';
 import { useHasAPossibleBulkAction } from './bulk-actions';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 function GridItem({
   selection,
   data,
@@ -32,9 +34,8 @@ function GridItem({
   const hasBulkAction = useHasAPossibleBulkAction(actions, item);
   const id = getItemId(item);
   const isSelected = selection.includes(id);
-  return createElement(VStack, {
+  return /*#__PURE__*/_jsxs(VStack, {
     spacing: 0,
-    key: id,
     className: clsx('dataviews-view-grid__card', {
       'is-selected': hasBulkAction && isSelected
     }),
@@ -57,76 +58,86 @@ function GridItem({
           }));
         }
       }
-    }
-  }, createElement("div", {
-    className: "dataviews-view-grid__media"
-  }, mediaField?.render({
-    item
-  })), createElement(HStack, {
-    justify: "space-between",
-    className: "dataviews-view-grid__title-actions"
-  }, createElement(SingleSelectionCheckbox, {
-    item: item,
-    selection: selection,
-    onSelectionChange: onSelectionChange,
-    getItemId: getItemId,
-    data: data,
-    primaryField: primaryField,
-    disabled: !hasBulkAction
-  }), createElement(HStack, {
-    className: "dataviews-view-grid__primary-field"
-  }, primaryField?.render({
-    item
-  })), createElement(ItemActions, {
-    item: item,
-    actions: actions,
-    isCompact: true
-  })), !!badgeFields?.length && createElement(HStack, {
-    className: "dataviews-view-grid__badge-fields",
-    spacing: 2,
-    wrap: true,
-    alignment: "top",
-    justify: "flex-start"
-  }, badgeFields.map(field => {
-    const renderedValue = field.render({
-      item
-    });
-    if (!renderedValue) {
-      return null;
-    }
-    return createElement(FlexItem, {
-      key: field.id,
-      className: 'dataviews-view-grid__field-value'
-    }, renderedValue);
-  })), !!visibleFields?.length && createElement(VStack, {
-    className: "dataviews-view-grid__fields",
-    spacing: 3
-  }, visibleFields.map(field => {
-    const renderedValue = field.render({
-      item
-    });
-    if (!renderedValue) {
-      return null;
-    }
-    return createElement(Flex, {
-      className: clsx('dataviews-view-grid__field', columnFields?.includes(field.id) ? 'is-column' : 'is-row'),
-      key: field.id,
-      gap: 1,
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "dataviews-view-grid__media",
+      children: mediaField?.render({
+        item
+      })
+    }), /*#__PURE__*/_jsxs(HStack, {
+      justify: "space-between",
+      className: "dataviews-view-grid__title-actions",
+      children: [/*#__PURE__*/_jsx(SingleSelectionCheckbox, {
+        item: item,
+        selection: selection,
+        onSelectionChange: onSelectionChange,
+        getItemId: getItemId,
+        data: data,
+        primaryField: primaryField,
+        disabled: !hasBulkAction
+      }), /*#__PURE__*/_jsx(HStack, {
+        className: "dataviews-view-grid__primary-field",
+        children: primaryField?.render({
+          item
+        })
+      }), /*#__PURE__*/_jsx(ItemActions, {
+        item: item,
+        actions: actions,
+        isCompact: true
+      })]
+    }), !!badgeFields?.length && /*#__PURE__*/_jsx(HStack, {
+      className: "dataviews-view-grid__badge-fields",
+      spacing: 2,
+      wrap: true,
+      alignment: "top",
       justify: "flex-start",
-      expanded: true,
-      style: {
-        height: 'auto'
-      },
-      direction: columnFields?.includes(field.id) ? 'column' : 'row'
-    }, createElement(Fragment, null, createElement(FlexItem, {
-      className: "dataviews-view-grid__field-name"
-    }, field.header), createElement(FlexItem, {
-      className: "dataviews-view-grid__field-value",
-      style: {
-        maxHeight: 'none'
-      }
-    }, renderedValue)));
-  })));
+      children: badgeFields.map(field => {
+        const renderedValue = field.render({
+          item
+        });
+        if (!renderedValue) {
+          return null;
+        }
+        return /*#__PURE__*/_jsx(FlexItem, {
+          className: "dataviews-view-grid__field-value",
+          children: renderedValue
+        }, field.id);
+      })
+    }), !!visibleFields?.length && /*#__PURE__*/_jsx(VStack, {
+      className: "dataviews-view-grid__fields",
+      spacing: 3,
+      children: visibleFields.map(field => {
+        const renderedValue = field.render({
+          item
+        });
+        if (!renderedValue) {
+          return null;
+        }
+        return /*#__PURE__*/_jsx(Flex, {
+          className: clsx('dataviews-view-grid__field', columnFields?.includes(field.id) ? 'is-column' : 'is-row'),
+          gap: 1,
+          justify: "flex-start",
+          expanded: true,
+          style: {
+            height: 'auto'
+          },
+          direction: columnFields?.includes(field.id) ? 'column' : 'row',
+          children: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(FlexItem, {
+              className: "dataviews-view-grid__field-name",
+              children: field.header
+            }), /*#__PURE__*/_jsx(FlexItem, {
+              className: "dataviews-view-grid__field-value",
+              style: {
+                maxHeight: 'none'
+              },
+              children: renderedValue
+            })]
+          })
+        }, field.id);
+      })
+    })]
+  }, id);
 }
 export default function ViewGrid({
   actions,
@@ -157,32 +168,37 @@ export default function ViewGrid({
     badgeFields: []
   });
   const hasData = !!data?.length;
-  return createElement(Fragment, null, hasData && createElement(Grid, {
-    gap: 6,
-    columns: 2,
-    alignment: "top",
-    className: "dataviews-view-grid",
-    "aria-busy": isLoading
-  }, data.map(item => {
-    return createElement(GridItem, {
-      key: getItemId(item),
-      selection: selection,
-      data: data,
-      onSelectionChange: onSelectionChange,
-      getItemId: getItemId,
-      item: item,
-      actions: actions,
-      mediaField: mediaField,
-      primaryField: primaryField,
-      visibleFields: visibleFields,
-      badgeFields: badgeFields,
-      columnFields: view.layout.columnFields
-    });
-  })), !hasData && createElement("div", {
-    className: clsx({
-      'dataviews-loading': isLoading,
-      'dataviews-no-results': !isLoading
-    })
-  }, createElement("p", null, isLoading ? createElement(Spinner, null) : __('No results'))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [hasData && /*#__PURE__*/_jsx(Grid, {
+      gap: 8,
+      columns: 2,
+      alignment: "top",
+      className: "dataviews-view-grid",
+      "aria-busy": isLoading,
+      children: data.map(item => {
+        return /*#__PURE__*/_jsx(GridItem, {
+          selection: selection,
+          data: data,
+          onSelectionChange: onSelectionChange,
+          getItemId: getItemId,
+          item: item,
+          actions: actions,
+          mediaField: mediaField,
+          primaryField: primaryField,
+          visibleFields: visibleFields,
+          badgeFields: badgeFields,
+          columnFields: view.layout.columnFields
+        }, getItemId(item));
+      })
+    }), !hasData && /*#__PURE__*/_jsx("div", {
+      className: clsx({
+        'dataviews-loading': isLoading,
+        'dataviews-no-results': !isLoading
+      }),
+      children: /*#__PURE__*/_jsx("p", {
+        children: isLoading ? /*#__PURE__*/_jsx(Spinner, {}) : __('No results')
+      })
+    })]
+  });
 }
 //# sourceMappingURL=view-grid.js.map

package/build-module/view-grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","Spinner","Flex","FlexItem","__","ItemActions","SingleSelectionCheckbox","useHasAPossibleBulkAction","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","badgeFields","columnFields","hasBulkAction","id","isSelected","includes","createElement","spacing","key","className","onClickCapture","event","ctrlKey","metaKey","stopPropagation","preventDefault","filter","_item","itemId","render","justify","disabled","isCompact","length","wrap","alignment","map","field","renderedValue","gap","expanded","style","height","direction","Fragment","header","maxHeight","ViewGrid","fields","isLoading","view","find","layout","reduce","accumulator","hiddenFields","push","hasData","columns"],"sources":["@wordpress/dataviews/src/view-grid.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 './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\nimport { useHasAPossibleBulkAction } from './bulk-actions';\nimport type {\n\tAction,\n\tAnyItem,\n\tNormalizedField,\n\tViewGrid as ViewGridType,\n} from './types';\n\ninterface GridItemProps< Item extends AnyItem > {\n\tselection: string[];\n\tdata: Item[];\n\tonSelectionChange: ( items: Item[] ) => void;\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\ninterface ViewGridProps< Item extends AnyItem > {\n\tactions: Action< Item >[];\n\tdata: Item[];\n\tfields: NormalizedField< Item >[];\n\tgetItemId: ( item: Item ) => string;\n\tisLoading: boolean;\n\tonSelectionChange: ( items: Item[] ) => void;\n\tselection: string[];\n\tview: ViewGridType;\n}\n\nfunction GridItem< Item extends AnyItem >( {\n\tselection,\n\tdata,\n\tonSelectionChange,\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\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\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\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\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\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={ 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.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< Item extends AnyItem >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonSelectionChange,\n\tselection,\n\tview,\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 { visibleFields, badgeFields } = fields.reduce(\n\t\t( accumulator: Record< string, NormalizedField< Item >[] >, 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={ 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":[]}
+{"version":3,"names":["clsx","__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","Spinner","Flex","FlexItem","__","ItemActions","SingleSelectionCheckbox","useHasAPossibleBulkAction","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","badgeFields","columnFields","hasBulkAction","id","isSelected","includes","spacing","className","onClickCapture","event","ctrlKey","metaKey","stopPropagation","preventDefault","filter","_item","itemId","children","render","justify","disabled","isCompact","length","wrap","alignment","map","field","renderedValue","gap","expanded","style","height","direction","header","maxHeight","ViewGrid","fields","isLoading","view","find","layout","reduce","accumulator","hiddenFields","key","push","hasData","columns"],"sources":["@wordpress/dataviews/src/view-grid.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 './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\nimport { useHasAPossibleBulkAction } from './bulk-actions';\nimport type { Action, AnyItem, NormalizedField, ViewGridProps } from './types';\n\ninterface GridItemProps< Item extends AnyItem > {\n\tselection: string[];\n\tdata: Item[];\n\tonSelectionChange: ( items: Item[] ) => void;\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 extends AnyItem >( {\n\tselection,\n\tdata,\n\tonSelectionChange,\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\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\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\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\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\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={ 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.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< Item extends AnyItem >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonSelectionChange,\n\tselection,\n\tview,\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 { visibleFields, badgeFields } = fields.reduce(\n\t\t( accumulator: Record< string, NormalizedField< Item >[] >, 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={ 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\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={ 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":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SACCC,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,OAAO,EACPC,IAAI,EACJC,QAAQ,QACF,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,uBAAuB,MAAM,6BAA6B;AACjE,SAASC,yBAAyB,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAiB3D,SAASC,QAAQA,CAA0B;EAC1CC,SAAS;EACTC,IAAI;EACJC,iBAAiB;EACjBC,SAAS;EACTC,IAAI;EACJC,OAAO;EACPC,UAAU;EACVC,YAAY;EACZC,aAAa;EACbC,WAAW;EACXC;AACsB,CAAC,EAAG;EAC1B,MAAMC,aAAa,GAAGnB,yBAAyB,CAAEa,OAAO,EAAED,IAAK,CAAC;EAChE,MAAMQ,EAAE,GAAGT,SAAS,CAAEC,IAAK,CAAC;EAC5B,MAAMS,UAAU,GAAGb,SAAS,CAACc,QAAQ,CAAEF,EAAG,CAAC;EAC3C,oBACChB,KAAA,CAACX,MAAM;IACN8B,OAAO,EAAG,CAAG;IAEbC,SAAS,EAAGrC,IAAI,CAAE,2BAA2B,EAAE;MAC9C,aAAa,EAAEgC,aAAa,IAAIE;IACjC,CAAE,CAAG;IACLI,cAAc,EAAKC,KAAK,IAAM;MAC7B,IAAKA,KAAK,CAACC,OAAO,IAAID,KAAK,CAACE,OAAO,EAAG;QACrCF,KAAK,CAACG,eAAe,CAAC,CAAC;QACvBH,KAAK,CAACI,cAAc,CAAC,CAAC;QACtB,IAAK,CAAEX,aAAa,EAAG;UACtB;QACD;QACA,IAAK,CAAEE,UAAU,EAAG;UACnBX,iBAAiB,CAChBD,IAAI,CAACsB,MAAM,CAAIC,KAAK,IAAM;YACzB,MAAMC,MAAM,GAAGtB,SAAS,GAAIqB,KAAM,CAAC;YACnC,OACCC,MAAM,KAAKb,EAAE,IACbZ,SAAS,CAACc,QAAQ,CAAEW,MAAO,CAAC;UAE9B,CAAE,CACH,CAAC;QACF,CAAC,MAAM;UACNvB,iBAAiB,CAChBD,IAAI,CAACsB,MAAM,CAAIC,KAAK,IAAM;YACzB,MAAMC,MAAM,GAAGtB,SAAS,GAAIqB,KAAM,CAAC;YACnC,OACCC,MAAM,KAAKb,EAAE,IACbZ,SAAS,CAACc,QAAQ,CAAEW,MAAO,CAAC;UAE9B,CAAE,CACH,CAAC;QACF;MACD;IACD,CAAG;IAAAC,QAAA,gBAEHhC,IAAA;MAAKsB,SAAS,EAAC,4BAA4B;MAAAU,QAAA,EACxCpB,UAAU,EAAEqB,MAAM,CAAE;QAAEvB;MAAK,CAAE;IAAC,CAC5B,CAAC,eACNR,KAAA,CAACb,MAAM;MACN6C,OAAO,EAAC,eAAe;MACvBZ,SAAS,EAAC,oCAAoC;MAAAU,QAAA,gBAE9ChC,IAAA,CAACH,uBAAuB;QACvBa,IAAI,EAAGA,IAAM;QACbJ,SAAS,EAAGA,SAAW;QACvBE,iBAAiB,EAAGA,iBAAmB;QACvCC,SAAS,EAAGA,SAAW;QACvBF,IAAI,EAAGA,IAAM;QACbM,YAAY,EAAGA,YAAc;QAC7BsB,QAAQ,EAAG,CAAElB;MAAe,CAC5B,CAAC,eACFjB,IAAA,CAACX,MAAM;QAACiC,SAAS,EAAC,oCAAoC;QAAAU,QAAA,EACnDnB,YAAY,EAAEoB,MAAM,CAAE;UAAEvB;QAAK,CAAE;MAAC,CAC3B,CAAC,eACTV,IAAA,CAACJ,WAAW;QAACc,IAAI,EAAGA,IAAM;QAACC,OAAO,EAAGA,OAAS;QAACyB,SAAS;MAAA,CAAE,CAAC;IAAA,CACpD,CAAC,EACP,CAAC,CAAErB,WAAW,EAAEsB,MAAM,iBACvBrC,IAAA,CAACX,MAAM;MACNiC,SAAS,EAAC,mCAAmC;MAC7CD,OAAO,EAAG,CAAG;MACbiB,IAAI;MACJC,SAAS,EAAC,KAAK;MACfL,OAAO,EAAC,YAAY;MAAAF,QAAA,EAElBjB,WAAW,CAACyB,GAAG,CAAIC,KAAK,IAAM;QAC/B,MAAMC,aAAa,GAAGD,KAAK,CAACR,MAAM,CAAE;UACnCvB;QACD,CAAE,CAAC;QACH,IAAK,CAAEgC,aAAa,EAAG;UACtB,OAAO,IAAI;QACZ;QACA,oBACC1C,IAAA,CAACN,QAAQ;UAER4B,SAAS,EAAC,kCAAkC;UAAAU,QAAA,EAE1CU;QAAa,GAHTD,KAAK,CAACvB,EAIH,CAAC;MAEb,CAAE;IAAC,CACI,CACR,EACC,CAAC,CAAEJ,aAAa,EAAEuB,MAAM,iBACzBrC,IAAA,CAACT,MAAM;MAAC+B,SAAS,EAAC,6BAA6B;MAACD,OAAO,EAAG,CAAG;MAAAW,QAAA,EAC1DlB,aAAa,CAAC0B,GAAG,CAAIC,KAAK,IAAM;QACjC,MAAMC,aAAa,GAAGD,KAAK,CAACR,MAAM,CAAE;UACnCvB;QACD,CAAE,CAAC;QACH,IAAK,CAAEgC,aAAa,EAAG;UACtB,OAAO,IAAI;QACZ;QACA,oBACC1C,IAAA,CAACP,IAAI;UACJ6B,SAAS,EAAGrC,IAAI,CACf,4BAA4B,EAC5B+B,YAAY,EAAEI,QAAQ,CAAEqB,KAAK,CAACvB,EAAG,CAAC,GAC/B,WAAW,GACX,QACJ,CAAG;UAEHyB,GAAG,EAAG,CAAG;UACTT,OAAO,EAAC,YAAY;UACpBU,QAAQ;UACRC,KAAK,EAAG;YAAEC,MAAM,EAAE;UAAO,CAAG;UAC5BC,SAAS,EACR/B,YAAY,EAAEI,QAAQ,CAAEqB,KAAK,CAACvB,EAAG,CAAC,GAC/B,QAAQ,GACR,KACH;UAAAc,QAAA,eAED9B,KAAA,CAAAE,SAAA;YAAA4B,QAAA,gBACChC,IAAA,CAACN,QAAQ;cAAC4B,SAAS,EAAC,iCAAiC;cAAAU,QAAA,EAClDS,KAAK,CAACO;YAAM,CACL,CAAC,eACXhD,IAAA,CAACN,QAAQ;cACR4B,SAAS,EAAC,kCAAkC;cAC5CuB,KAAK,EAAG;gBAAEI,SAAS,EAAE;cAAO,CAAG;cAAAjB,QAAA,EAE7BU;YAAa,CACN,CAAC;UAAA,CACV;QAAC,GArBGD,KAAK,CAACvB,EAsBP,CAAC;MAET,CAAE;IAAC,CACI,CACR;EAAA,GA7HKA,EA8HC,CAAC;AAEX;AAEA,eAAe,SAASgC,QAAQA,CAA0B;EACzDvC,OAAO;EACPJ,IAAI;EACJ4C,MAAM;EACN1C,SAAS;EACT2C,SAAS;EACT5C,iBAAiB;EACjBF,SAAS;EACT+C;AACsB,CAAC,EAAG;EAC1B,MAAMzC,UAAU,GAAGuC,MAAM,CAACG,IAAI,CAC3Bb,KAAK,IAAMA,KAAK,CAACvB,EAAE,KAAKmC,IAAI,CAACE,MAAM,CAAC3C,UACvC,CAAC;EACD,MAAMC,YAAY,GAAGsC,MAAM,CAACG,IAAI,CAC7Bb,KAAK,IAAMA,KAAK,CAACvB,EAAE,KAAKmC,IAAI,CAACE,MAAM,CAAC1C,YACvC,CAAC;EACD,MAAM;IAAEC,aAAa;IAAEC;EAAY,CAAC,GAAGoC,MAAM,CAACK,MAAM,CACnD,CAAEC,WAAwD,EAAEhB,KAAK,KAAM;IACtE,IACCY,IAAI,CAACK,YAAY,CAACtC,QAAQ,CAAEqB,KAAK,CAACvB,EAAG,CAAC,IACtC,CAAEmC,IAAI,CAACE,MAAM,CAAC3C,UAAU,EAAEyC,IAAI,CAACE,MAAM,CAAC1C,YAAY,CAAE,CAACO,QAAQ,CAC5DqB,KAAK,CAACvB,EACP,CAAC,EACA;MACD,OAAOuC,WAAW;IACnB;IACA;IACA;IACA,MAAME,GAAG,GAAGN,IAAI,CAACE,MAAM,CAACxC,WAAW,EAAEK,QAAQ,CAAEqB,KAAK,CAACvB,EAAG,CAAC,GACtD,aAAa,GACb,eAAe;IAClBuC,WAAW,CAAEE,GAAG,CAAE,CAACC,IAAI,CAAEnB,KAAM,CAAC;IAChC,OAAOgB,WAAW;EACnB,CAAC,EACD;IAAE3C,aAAa,EAAE,EAAE;IAAEC,WAAW,EAAE;EAAG,CACtC,CAAC;EACD,MAAM8C,OAAO,GAAG,CAAC,CAAEtD,IAAI,EAAE8B,MAAM;EAC/B,oBACCnC,KAAA,CAAAE,SAAA;IAAA4B,QAAA,GACG6B,OAAO,iBACR7D,IAAA,CAACb,IAAI;MACJwD,GAAG,EAAG,CAAG;MACTmB,OAAO,EAAG,CAAG;MACbvB,SAAS,EAAC,KAAK;MACfjB,SAAS,EAAC,qBAAqB;MAC/B,aAAY8B,SAAW;MAAApB,QAAA,EAErBzB,IAAI,CAACiC,GAAG,CAAI9B,IAAI,IAAM;QACvB,oBACCV,IAAA,CAACK,QAAQ;UAERC,SAAS,EAAGA,SAAW;UACvBC,IAAI,EAAGA,IAAM;UACbC,iBAAiB,EAAGA,iBAAmB;UACvCC,SAAS,EAAGA,SAAW;UACvBC,IAAI,EAAGA,IAAM;UACbC,OAAO,EAAGA,OAAS;UACnBC,UAAU,EAAGA,UAAY;UACzBC,YAAY,EAAGA,YAAc;UAC7BC,aAAa,EAAGA,aAAe;UAC/BC,WAAW,EAAGA,WAAa;UAC3BC,YAAY,EAAGqC,IAAI,CAACE,MAAM,CAACvC;QAAc,GAXnCP,SAAS,CAAEC,IAAK,CAYtB,CAAC;MAEJ,CAAE;IAAC,CACE,CACN,EACC,CAAEmD,OAAO,iBACV7D,IAAA;MACCsB,SAAS,EAAGrC,IAAI,CAAE;QACjB,mBAAmB,EAAEmE,SAAS;QAC9B,sBAAsB,EAAE,CAAEA;MAC3B,CAAE,CAAG;MAAApB,QAAA,eAELhC,IAAA;QAAAgC,QAAA,EAAKoB,SAAS,gBAAGpD,IAAA,CAACR,OAAO,IAAE,CAAC,GAAGG,EAAE,CAAE,YAAa;MAAC,CAAK;IAAC,CACnD,CACL;EAAA,CACA,CAAC;AAEL","ignoreList":[]}

package/build-module/view-list.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -20,6 +19,8 @@ import { moreVertical } from '@wordpress/icons';
  */
 import { unlock } from './lock-unlock';
 import { ActionsDropdownMenuGroup, ActionModal } from './item-actions';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   useCompositeStoreV2: useCompositeStore,
   CompositeV2: Composite,
@@ -71,125 +72,144 @@ function ListItem({
     };
   }, [actions, item]);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  return createElement(CompositeRow, {
+  const primaryActionLabel = primaryAction && (typeof primaryAction.label === 'string' ? primaryAction.label : primaryAction.label([item]));
+  return /*#__PURE__*/_jsx(CompositeRow, {
     ref: itemRef,
-    render: createElement("li", null),
+    render: /*#__PURE__*/_jsx("li", {}),
     role: "row",
     className: clsx({
       'is-selected': isSelected,
       'is-hovered': isHovered
     }),
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, createElement(HStack, {
-    className: "dataviews-view-list__item-wrapper",
-    alignment: "top"
-  }, createElement("div", {
-    role: "gridcell"
-  }, createElement(CompositeItem, {
-    store: store,
-    render: createElement("div", null),
-    role: "button",
-    id: id,
-    "aria-pressed": isSelected,
-    "aria-labelledby": labelId,
-    "aria-describedby": descriptionId,
-    className: "dataviews-view-list__item",
-    onClick: () => onSelect(item)
-  }, createElement(HStack, {
-    spacing: 3,
-    justify: "start",
-    alignment: "flex-start"
-  }, createElement("div", {
-    className: "dataviews-view-list__media-wrapper"
-  }, mediaField?.render({
-    item
-  }) || createElement("div", {
-    className: "dataviews-view-list__media-placeholder"
-  })), createElement(VStack, {
-    spacing: 1
-  }, createElement("span", {
-    className: "dataviews-view-list__primary-field",
-    id: labelId
-  }, primaryField?.render({
-    item
-  })), createElement("div", {
-    className: "dataviews-view-list__fields",
-    id: descriptionId
-  }, visibleFields.map(field => createElement("div", {
-    key: field.id,
-    className: "dataviews-view-list__field"
-  }, createElement(VisuallyHidden, {
-    as: "span",
-    className: "dataviews-view-list__field-label"
-  }, field.header), createElement("span", {
-    className: "dataviews-view-list__field-value"
-  }, field.render({
-    item
-  }))))))))), actions?.length > 0 && createElement(HStack, {
-    spacing: 1,
-    justify: "flex-end",
-    className: "dataviews-view-list__item-actions",
-    style: {
-      flexShrink: '0',
-      width: 'auto'
-    }
-  }, primaryAction && 'RenderModal' in primaryAction && createElement("div", {
-    role: "gridcell"
-  }, createElement(CompositeItem, {
-    store: store,
-    render: createElement(Button, {
-      label: primaryAction.label,
-      icon: primaryAction.icon,
-      isDestructive: primaryAction.isDestructive,
-      size: "compact",
-      onClick: () => setIsModalOpen(true)
+    onMouseLeave: handleMouseLeave,
+    children: /*#__PURE__*/_jsxs(HStack, {
+      className: "dataviews-view-list__item-wrapper",
+      alignment: "center",
+      spacing: 0,
+      children: [/*#__PURE__*/_jsx("div", {
+        role: "gridcell",
+        children: /*#__PURE__*/_jsx(CompositeItem, {
+          store: store,
+          render: /*#__PURE__*/_jsx("div", {}),
+          role: "button",
+          id: id,
+          "aria-pressed": isSelected,
+          "aria-labelledby": labelId,
+          "aria-describedby": descriptionId,
+          className: "dataviews-view-list__item",
+          onClick: () => onSelect(item),
+          children: /*#__PURE__*/_jsxs(HStack, {
+            spacing: 3,
+            justify: "start",
+            alignment: "flex-start",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "dataviews-view-list__media-wrapper",
+              children: mediaField?.render({
+                item
+              }) || /*#__PURE__*/_jsx("div", {
+                className: "dataviews-view-list__media-placeholder"
+              })
+            }), /*#__PURE__*/_jsxs(VStack, {
+              spacing: 0,
+              children: [/*#__PURE__*/_jsx("span", {
+                className: "dataviews-view-list__primary-field",
+                id: labelId,
+                children: primaryField?.render({
+                  item
+                })
+              }), /*#__PURE__*/_jsx("div", {
+                className: "dataviews-view-list__fields",
+                id: descriptionId,
+                children: visibleFields.map(field => /*#__PURE__*/_jsxs("div", {
+                  className: "dataviews-view-list__field",
+                  children: [/*#__PURE__*/_jsx(VisuallyHidden, {
+                    as: "span",
+                    className: "dataviews-view-list__field-label",
+                    children: field.header
+                  }), /*#__PURE__*/_jsx("span", {
+                    className: "dataviews-view-list__field-value",
+                    children: field.render({
+                      item
+                    })
+                  })]
+                }, field.id))
+              })]
+            })]
+          })
+        })
+      }), actions?.length > 0 && /*#__PURE__*/_jsxs(HStack, {
+        spacing: 1,
+        justify: "flex-end",
+        className: "dataviews-view-list__item-actions",
+        style: {
+          flexShrink: '0',
+          width: 'auto'
+        },
+        children: [primaryAction && 'RenderModal' in primaryAction && /*#__PURE__*/_jsx("div", {
+          role: "gridcell",
+          children: /*#__PURE__*/_jsx(CompositeItem, {
+            store: store,
+            render: /*#__PURE__*/_jsx(Button, {
+              label: primaryActionLabel,
+              icon: primaryAction.icon,
+              isDestructive: primaryAction.isDestructive,
+              size: "compact",
+              onClick: () => setIsModalOpen(true)
+            }),
+            children: isModalOpen && /*#__PURE__*/_jsx(ActionModal, {
+              action: primaryAction,
+              items: [item],
+              closeModal: () => setIsModalOpen(false)
+            })
+          })
+        }), primaryAction && !('RenderModal' in primaryAction) && /*#__PURE__*/_jsx("div", {
+          role: "gridcell",
+          children: /*#__PURE__*/_jsx(CompositeItem, {
+            store: store,
+            render: /*#__PURE__*/_jsx(Button, {
+              label: primaryActionLabel,
+              icon: primaryAction.icon,
+              isDestructive: primaryAction.isDestructive,
+              size: "compact",
+              onClick: () => primaryAction.callback([item])
+            })
+          })
+        }, primaryAction.id), /*#__PURE__*/_jsx("div", {
+          role: "gridcell",
+          children: /*#__PURE__*/_jsx(DropdownMenu, {
+            trigger: /*#__PURE__*/_jsx(CompositeItem, {
+              store: store,
+              render: /*#__PURE__*/_jsx(Button, {
+                size: "compact",
+                icon: moreVertical,
+                label: __('Actions'),
+                __experimentalIsFocusable: true,
+                disabled: !actions.length,
+                onKeyDown: event => {
+                  if (event.key === 'ArrowDown') {
+                    // Prevent the default behaviour (open dropdown menu) and go down.
+                    event.preventDefault();
+                    store.move(store.down());
+                  }
+                  if (event.key === 'ArrowUp') {
+                    // Prevent the default behavior (open dropdown menu) and go up.
+                    event.preventDefault();
+                    store.move(store.up());
+                  }
+                }
+              })
+            }),
+            placement: "bottom-end",
+            children: /*#__PURE__*/_jsx(ActionsDropdownMenuGroup, {
+              actions: eligibleActions,
+              item: item
+            })
+          })
+        })]
+      })]
     })
-  }, isModalOpen && createElement(ActionModal, {
-    action: primaryAction,
-    items: [item],
-    closeModal: () => setIsModalOpen(false)
-  }))), primaryAction && !('RenderModal' in primaryAction) && createElement("div", {
-    role: "gridcell",
-    key: primaryAction.id
-  }, createElement(CompositeItem, {
-    store: store,
-    render: createElement(Button, {
-      label: primaryAction.label,
-      icon: primaryAction.icon,
-      isDestructive: primaryAction.isDestructive,
-      size: "compact",
-      onClick: () => primaryAction.callback([item])
-    })
-  })), createElement("div", {
-    role: "gridcell"
-  }, createElement(DropdownMenu, {
-    trigger: createElement(CompositeItem, {
-      store: store,
-      render: createElement(Button, {
-        size: "compact",
-        icon: moreVertical,
-        label: __('Actions'),
-        disabled: !actions.length,
-        onKeyDown: event => {
-          if (event.key === 'ArrowDown') {
-            // Prevent the default behaviour (open dropdown menu) and go down.
-            event.preventDefault();
-            store.move(store.down());
-          }
-          if (event.key === 'ArrowUp') {
-            // Prevent the default behavior (open dropdown menu) and go up.
-            event.preventDefault();
-            store.move(store.up());
-          }
-        }
-      })
-    }),
-    placement: "bottom-end"
-  }, createElement(ActionsDropdownMenuGroup, {
-    actions: eligibleActions,
-    item: item
-  }))))));
+  });
 }
 export default function ViewList(props) {
   const {
@@ -227,33 +247,36 @@ export default function ViewList(props) {
   }, [isActiveIdInList]);
   const hasData = data?.length;
   if (!hasData) {
-    return createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: clsx({
         'dataviews-loading': isLoading,
         'dataviews-no-results': !hasData && !isLoading
+      }),
+      children: !hasData && /*#__PURE__*/_jsx("p", {
+        children: isLoading ? /*#__PURE__*/_jsx(Spinner, {}) : __('No results')
       })
-    }, !hasData && createElement("p", null, isLoading ? createElement(Spinner, null) : __('No results')));
+    });
   }
-  return createElement(Composite, {
+  return /*#__PURE__*/_jsx(Composite, {
     id: baseId,
-    render: createElement("ul", null),
+    render: /*#__PURE__*/_jsx("ul", {}),
     className: "dataviews-view-list",
     role: "grid",
-    store: store
-  }, data.map(item => {
-    const id = getItemDomId(item);
-    return createElement(ListItem, {
-      key: id,
-      id: id,
-      actions: actions,
-      item: item,
-      isSelected: item === selectedItem,
-      onSelect: onSelect,
-      mediaField: mediaField,
-      primaryField: primaryField,
-      store: store,
-      visibleFields: visibleFields
-    });
-  }));
+    store: store,
+    children: data.map(item => {
+      const id = getItemDomId(item);
+      return /*#__PURE__*/_jsx(ListItem, {
+        id: id,
+        actions: actions,
+        item: item,
+        isSelected: item === selectedItem,
+        onSelect: onSelect,
+        mediaField: mediaField,
+        primaryField: primaryField,
+        store: store,
+        visibleFields: visibleFields
+      }, id);
+    })
+  });
 }
 //# sourceMappingURL=view-list.js.map