@wordpress/dataviews 4.5.0 → 4.6.0

package/build-module/dataviews-layouts/table/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","__","Spinner","__experimentalHStack","HStack","__experimentalVStack","VStack","useEffect","useId","useRef","useState","SingleSelectionCheckbox","ItemActions","sortValues","useSomeItemHasAPossibleBulkAction","useHasAPossibleBulkAction","BulkSelectionCheckbox","ColumnHeaderMenu","getVisibleFieldIds","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TableColumn","column","fields","view","props","field","find","f","id","TableColumnField","combinedField","layout","combinedFields","TableColumnCombined","primaryField","item","className","children","render","map","child","direction","spacing","TableRow","hasBulkActions","actions","selection","getItemId","onChangeSelection","hasPossibleBulkAction","isSelected","includes","isHovered","setIsHovered","handleMouseEnter","handleMouseLeave","isTouchDeviceRef","columns","onMouseEnter","onMouseLeave","onTouchStart","current","onClick","document","getSelection","type","filter","itemId","style","width","disabled","_view$layout$styles$c","maxWidth","minWidth","styles","length","e","stopPropagation","ViewTable","data","isLoading","onChangeView","setOpenedFilter","headerMenuRefs","Map","headerMenuToFocusRef","nextHeaderMenuToFocus","setNextHeaderMenuToFocus","focus","undefined","tableNoticeId","onHide","hidden","get","fallback","node","hasData","scope","index","_view$layout$styles$c2","sort","ref","set","delete","fieldId","toString"],"sources":["@wordpress/dataviews/src/dataviews-layouts/table/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tSpinner,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useEffect, useId, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';\nimport ItemActions from '../../components/dataviews-item-actions';\nimport { sortValues } from '../../constants';\nimport {\n\tuseSomeItemHasAPossibleBulkAction,\n\tuseHasAPossibleBulkAction,\n\tBulkSelectionCheckbox,\n} from '../../components/dataviews-bulk-actions';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewTable as ViewTableType,\n\tViewTableProps,\n\tCombinedField,\n} from '../../types';\nimport type { SetSelection } from '../../private-types';\nimport ColumnHeaderMenu from './column-header-menu';\nimport { getVisibleFieldIds } from '../index';\n\ninterface TableColumnFieldProps< Item > {\n\tprimaryField?: NormalizedField< Item >;\n\tfield: NormalizedField< Item >;\n\titem: Item;\n}\n\ninterface TableColumnCombinedProps< Item > {\n\tprimaryField?: NormalizedField< Item >;\n\tfields: NormalizedField< Item >[];\n\tfield: CombinedField;\n\titem: Item;\n\tview: ViewTableType;\n}\n\ninterface TableColumnProps< Item > {\n\tprimaryField?: NormalizedField< Item >;\n\tfields: NormalizedField< Item >[];\n\titem: Item;\n\tcolumn: string;\n\tview: ViewTableType;\n}\n\ninterface TableRowProps< Item > {\n\thasBulkActions: boolean;\n\titem: Item;\n\tactions: Action< Item >[];\n\tfields: NormalizedField< Item >[];\n\tid: string;\n\tview: ViewTableType;\n\tprimaryField?: NormalizedField< Item >;\n\tselection: string[];\n\tgetItemId: ( item: Item ) => string;\n\tonChangeSelection: SetSelection;\n}\n\nfunction TableColumn< Item >( {\n\tcolumn,\n\tfields,\n\tview,\n\t...props\n}: TableColumnProps< Item > ) {\n\tconst field = fields.find( ( f ) => f.id === column );\n\tif ( !! field ) {\n\t\treturn <TableColumnField { ...props } field={ field } />;\n\t}\n\tconst combinedField = view.layout?.combinedFields?.find(\n\t\t( f ) => f.id === column\n\t);\n\tif ( !! combinedField ) {\n\t\treturn (\n\t\t\t<TableColumnCombined\n\t\t\t\t{ ...props }\n\t\t\t\tfields={ fields }\n\t\t\t\tview={ view }\n\t\t\t\tfield={ combinedField }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n\nfunction TableColumnField< Item >( {\n\tprimaryField,\n\titem,\n\tfield,\n}: TableColumnFieldProps< Item > ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'dataviews-view-table__cell-content-wrapper', {\n\t\t\t\t'dataviews-view-table__primary-field':\n\t\t\t\t\tprimaryField?.id === field.id,\n\t\t\t} ) }\n\t\t>\n\t\t\t<field.render { ...{ item } } />\n\t\t</div>\n\t);\n}\n\nfunction TableColumnCombined< Item >( {\n\tfield,\n\t...props\n}: TableColumnCombinedProps< Item > ) {\n\tconst children = field.children.map( ( child ) => (\n\t\t<TableColumn key={ child } { ...props } column={ child } />\n\t) );\n\n\tif ( field.direction === 'horizontal' ) {\n\t\treturn <HStack spacing={ 3 }>{ children }</HStack>;\n\t}\n\treturn <VStack spacing={ 0 }>{ children }</VStack>;\n}\n\nfunction TableRow< Item >( {\n\thasBulkActions,\n\titem,\n\tactions,\n\tfields,\n\tid,\n\tview,\n\tprimaryField,\n\tselection,\n\tgetItemId,\n\tonChangeSelection,\n}: TableRowProps< Item > ) {\n\tconst hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst isSelected = hasPossibleBulkAction && selection.includes( id );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\n\tconst handleMouseEnter = () => {\n\t\tsetIsHovered( true );\n\t};\n\tconst handleMouseLeave = () => {\n\t\tsetIsHovered( false );\n\t};\n\n\t// Will be set to true if `onTouchStart` fires. This happens before\n\t// `onClick` and can be used to exclude touchscreen devices from certain\n\t// behaviours.\n\tconst isTouchDeviceRef = useRef( false );\n\tconst columns = getVisibleFieldIds( view, fields );\n\n\treturn (\n\t\t<tr\n\t\t\tclassName={ clsx( 'dataviews-view-table__row', {\n\t\t\t\t'is-selected': hasPossibleBulkAction && isSelected,\n\t\t\t\t'is-hovered': isHovered,\n\t\t\t\t'has-bulk-actions': hasPossibleBulkAction,\n\t\t\t} ) }\n\t\t\tonMouseEnter={ handleMouseEnter }\n\t\t\tonMouseLeave={ handleMouseLeave }\n\t\t\tonTouchStart={ () => {\n\t\t\t\tisTouchDeviceRef.current = true;\n\t\t\t} }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( ! hasPossibleBulkAction ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (\n\t\t\t\t\t! isTouchDeviceRef.current &&\n\t\t\t\t\tdocument.getSelection()?.type !== 'Range'\n\t\t\t\t) {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.includes( id )\n\t\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t\t: [ id ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t{ hasBulkActions && (\n\t\t\t\t<td\n\t\t\t\t\tclassName=\"dataviews-view-table__checkbox-column\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '1%',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"dataviews-view-table__cell-content-wrapper\">\n\t\t\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\tdisabled={ ! hasPossibleBulkAction }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</td>\n\t\t\t) }\n\t\t\t{ columns.map( ( column: string ) => {\n\t\t\t\t// Explicits picks the supported styles.\n\t\t\t\tconst { width, maxWidth, minWidth } =\n\t\t\t\t\tview.layout?.styles?.[ column ] ?? {};\n\n\t\t\t\treturn (\n\t\t\t\t\t<td key={ column } style={ { width, maxWidth, minWidth } }>\n\t\t\t\t\t\t<TableColumn\n\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tcolumn={ column }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ !! actions?.length && (\n\t\t\t\t// Disable reason: we are not making the element interactive,\n\t\t\t\t// but preventing any click events from bubbling up to the\n\t\t\t\t// table row. This allows us to add a click handler to the row\n\t\t\t\t// itself (to toggle row selection) without erroneously\n\t\t\t\t// intercepting click events from ItemActions.\n\n\t\t\t\t/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */\n\t\t\t\t<td\n\t\t\t\t\tclassName=\"dataviews-view-table__actions-column\"\n\t\t\t\t\tonClick={ ( e ) => e.stopPropagation() }\n\t\t\t\t>\n\t\t\t\t\t<ItemActions item={ item } actions={ actions } />\n\t\t\t\t</td>\n\t\t\t\t/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */\n\t\t\t) }\n\t\t</tr>\n\t);\n}\n\nfunction ViewTable< Item >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading = false,\n\tonChangeView,\n\tonChangeSelection,\n\tselection,\n\tsetOpenedFilter,\n\tview,\n}: ViewTableProps< Item > ) {\n\tconst headerMenuRefs = useRef<\n\t\tMap< string, { node: HTMLButtonElement; fallback: string } >\n\t>( new Map() );\n\tconst headerMenuToFocusRef = useRef< HTMLButtonElement >();\n\tconst [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] =\n\t\tuseState< HTMLButtonElement >();\n\tconst hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );\n\n\tuseEffect( () => {\n\t\tif ( headerMenuToFocusRef.current ) {\n\t\t\theaderMenuToFocusRef.current.focus();\n\t\t\theaderMenuToFocusRef.current = undefined;\n\t\t}\n\t} );\n\n\tconst tableNoticeId = useId();\n\n\tif ( nextHeaderMenuToFocus ) {\n\t\t// If we need to force focus, we short-circuit rendering here\n\t\t// to prevent any additional work while we handle that.\n\t\t// Clearing out the focus directive is necessary to make sure\n\t\t// future renders don't cause unexpected focus jumps.\n\t\theaderMenuToFocusRef.current = nextHeaderMenuToFocus;\n\t\tsetNextHeaderMenuToFocus( undefined );\n\t\treturn;\n\t}\n\n\tconst onHide = ( field: NormalizedField< Item > ) => {\n\t\tconst hidden = headerMenuRefs.current.get( field.id );\n\t\tconst fallback = hidden\n\t\t\t? headerMenuRefs.current.get( hidden.fallback )\n\t\t\t: undefined;\n\t\tsetNextHeaderMenuToFocus( fallback?.node );\n\t};\n\n\tconst columns = getVisibleFieldIds( view, fields );\n\tconst hasData = !! data?.length;\n\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout?.primaryField\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<table\n\t\t\t\tclassName=\"dataviews-view-table\"\n\t\t\t\taria-busy={ isLoading }\n\t\t\t\taria-describedby={ tableNoticeId }\n\t\t\t>\n\t\t\t\t<thead>\n\t\t\t\t\t<tr className=\"dataviews-view-table__row\">\n\t\t\t\t\t\t{ hasBulkActions && (\n\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-table__checkbox-column\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\twidth: '1%',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BulkSelectionCheckbox\n\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ columns.map( ( column, index ) => {\n\t\t\t\t\t\t\t// Explicits picks the supported styles.\n\t\t\t\t\t\t\tconst { width, maxWidth, minWidth } =\n\t\t\t\t\t\t\t\tview.layout?.styles?.[ column ] ?? {};\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\tkey={ column }\n\t\t\t\t\t\t\t\t\tstyle={ { width, maxWidth, minWidth } }\n\t\t\t\t\t\t\t\t\taria-sort={\n\t\t\t\t\t\t\t\t\t\tview.sort?.field === column\n\t\t\t\t\t\t\t\t\t\t\t? sortValues[ view.sort.direction ]\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ColumnHeaderMenu\n\t\t\t\t\t\t\t\t\t\tref={ ( node ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( node ) {\n\t\t\t\t\t\t\t\t\t\t\t\theaderMenuRefs.current.set(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolumn,\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnode,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfallback:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolumns[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex > 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? index - 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\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} else {\n\t\t\t\t\t\t\t\t\t\t\t\theaderMenuRefs.current.delete(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolumn\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\tfieldId={ column }\n\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\t\t\t\tonHide={ onHide }\n\t\t\t\t\t\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t{ !! actions?.length && (\n\t\t\t\t\t\t\t<th className=\"dataviews-view-table__actions-column\">\n\t\t\t\t\t\t\t\t<span className=\"dataviews-view-table-header\">\n\t\t\t\t\t\t\t\t\t{ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t{ hasData &&\n\t\t\t\t\t\tdata.map( ( item, index ) => (\n\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\thasBulkActions={ hasBulkActions }\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\t\tid={ getItemId( item ) || index.toString() }\n\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t\tid={ tableNoticeId }\n\t\t\t>\n\t\t\t\t{ ! hasData && (\n\t\t\t\t\t<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ViewTable;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","__","Spinner","__experimentalHStack","HStack","__experimentalVStack","VStack","useEffect","useId","useRef","useState","SingleSelectionCheckbox","ItemActions","sortValues","useSomeItemHasAPossibleBulkAction","useHasAPossibleBulkAction","BulkSelectionCheckbox","ColumnHeaderMenu","getVisibleFieldIds","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TableColumn","column","fields","view","props","field","find","f","id","TableColumnField","combinedField","layout","combinedFields","TableColumnCombined","primaryField","item","className","children","render","map","child","direction","spacing","TableRow","hasBulkActions","actions","selection","getItemId","onChangeSelection","hasPossibleBulkAction","isSelected","includes","isHovered","setIsHovered","handleMouseEnter","handleMouseLeave","isTouchDeviceRef","columns","onMouseEnter","onMouseLeave","onTouchStart","current","onClick","document","getSelection","type","filter","itemId","style","width","disabled","_view$layout$styles$c","maxWidth","minWidth","styles","length","e","stopPropagation","ViewTable","data","isLoading","onChangeView","setOpenedFilter","headerMenuRefs","Map","headerMenuToFocusRef","nextHeaderMenuToFocus","setNextHeaderMenuToFocus","focus","undefined","tableNoticeId","onHide","hidden","get","fallback","node","hasData","scope","index","_view$layout$styles$c2","sort","ref","set","delete","fieldId","toString"],"sources":["@wordpress/dataviews/src/dataviews-layouts/table/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tSpinner,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useEffect, useId, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';\nimport ItemActions from '../../components/dataviews-item-actions';\nimport { sortValues } from '../../constants';\nimport {\n\tuseSomeItemHasAPossibleBulkAction,\n\tuseHasAPossibleBulkAction,\n\tBulkSelectionCheckbox,\n} from '../../components/dataviews-bulk-actions';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewTable as ViewTableType,\n\tViewTableProps,\n\tCombinedField,\n} from '../../types';\nimport type { SetSelection } from '../../private-types';\nimport ColumnHeaderMenu from './column-header-menu';\nimport { getVisibleFieldIds } from '../index';\n\ninterface TableColumnFieldProps< Item > {\n\tprimaryField?: NormalizedField< Item >;\n\tfield: NormalizedField< Item >;\n\titem: Item;\n}\n\ninterface TableColumnCombinedProps< Item > {\n\tprimaryField?: NormalizedField< Item >;\n\tfields: NormalizedField< Item >[];\n\tfield: CombinedField;\n\titem: Item;\n\tview: ViewTableType;\n}\n\ninterface TableColumnProps< Item > {\n\tprimaryField?: NormalizedField< Item >;\n\tfields: NormalizedField< Item >[];\n\titem: Item;\n\tcolumn: string;\n\tview: ViewTableType;\n}\n\ninterface TableRowProps< Item > {\n\thasBulkActions: boolean;\n\titem: Item;\n\tactions: Action< Item >[];\n\tfields: NormalizedField< Item >[];\n\tid: string;\n\tview: ViewTableType;\n\tprimaryField?: NormalizedField< Item >;\n\tselection: string[];\n\tgetItemId: ( item: Item ) => string;\n\tonChangeSelection: SetSelection;\n}\n\nfunction TableColumn< Item >( {\n\tcolumn,\n\tfields,\n\tview,\n\t...props\n}: TableColumnProps< Item > ) {\n\tconst field = fields.find( ( f ) => f.id === column );\n\tif ( !! field ) {\n\t\treturn <TableColumnField { ...props } field={ field } />;\n\t}\n\tconst combinedField = view.layout?.combinedFields?.find(\n\t\t( f ) => f.id === column\n\t);\n\tif ( !! combinedField ) {\n\t\treturn (\n\t\t\t<TableColumnCombined\n\t\t\t\t{ ...props }\n\t\t\t\tfields={ fields }\n\t\t\t\tview={ view }\n\t\t\t\tfield={ combinedField }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n\nfunction TableColumnField< Item >( {\n\tprimaryField,\n\titem,\n\tfield,\n}: TableColumnFieldProps< Item > ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'dataviews-view-table__cell-content-wrapper', {\n\t\t\t\t'dataviews-view-table__primary-field':\n\t\t\t\t\tprimaryField?.id === field.id,\n\t\t\t} ) }\n\t\t>\n\t\t\t<field.render { ...{ item } } />\n\t\t</div>\n\t);\n}\n\nfunction TableColumnCombined< Item >( {\n\tfield,\n\t...props\n}: TableColumnCombinedProps< Item > ) {\n\tconst children = field.children.map( ( child ) => (\n\t\t<TableColumn key={ child } { ...props } column={ child } />\n\t) );\n\n\tif ( field.direction === 'horizontal' ) {\n\t\treturn <HStack spacing={ 3 }>{ children }</HStack>;\n\t}\n\treturn <VStack spacing={ 0 }>{ children }</VStack>;\n}\n\nfunction TableRow< Item >( {\n\thasBulkActions,\n\titem,\n\tactions,\n\tfields,\n\tid,\n\tview,\n\tprimaryField,\n\tselection,\n\tgetItemId,\n\tonChangeSelection,\n}: TableRowProps< Item > ) {\n\tconst hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst isSelected = hasPossibleBulkAction && selection.includes( id );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\n\tconst handleMouseEnter = () => {\n\t\tsetIsHovered( true );\n\t};\n\tconst handleMouseLeave = () => {\n\t\tsetIsHovered( false );\n\t};\n\n\t// Will be set to true if `onTouchStart` fires. This happens before\n\t// `onClick` and can be used to exclude touchscreen devices from certain\n\t// behaviours.\n\tconst isTouchDeviceRef = useRef( false );\n\tconst columns = getVisibleFieldIds( view, fields );\n\n\treturn (\n\t\t<tr\n\t\t\tclassName={ clsx( 'dataviews-view-table__row', {\n\t\t\t\t'is-selected': hasPossibleBulkAction && isSelected,\n\t\t\t\t'is-hovered': isHovered,\n\t\t\t\t'has-bulk-actions': hasPossibleBulkAction,\n\t\t\t} ) }\n\t\t\tonMouseEnter={ handleMouseEnter }\n\t\t\tonMouseLeave={ handleMouseLeave }\n\t\t\tonTouchStart={ () => {\n\t\t\t\tisTouchDeviceRef.current = true;\n\t\t\t} }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( ! hasPossibleBulkAction ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (\n\t\t\t\t\t! isTouchDeviceRef.current &&\n\t\t\t\t\tdocument.getSelection()?.type !== 'Range'\n\t\t\t\t) {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.includes( id )\n\t\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t\t: [ id ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t{ hasBulkActions && (\n\t\t\t\t<td\n\t\t\t\t\tclassName=\"dataviews-view-table__checkbox-column\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '1%',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"dataviews-view-table__cell-content-wrapper\">\n\t\t\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\tdisabled={ ! hasPossibleBulkAction }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</td>\n\t\t\t) }\n\t\t\t{ columns.map( ( column: string ) => {\n\t\t\t\t// Explicits picks the supported styles.\n\t\t\t\tconst { width, maxWidth, minWidth } =\n\t\t\t\t\tview.layout?.styles?.[ column ] ?? {};\n\n\t\t\t\treturn (\n\t\t\t\t\t<td key={ column } style={ { width, maxWidth, minWidth } }>\n\t\t\t\t\t\t<TableColumn\n\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tcolumn={ column }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ !! actions?.length && (\n\t\t\t\t// Disable reason: we are not making the element interactive,\n\t\t\t\t// but preventing any click events from bubbling up to the\n\t\t\t\t// table row. This allows us to add a click handler to the row\n\t\t\t\t// itself (to toggle row selection) without erroneously\n\t\t\t\t// intercepting click events from ItemActions.\n\n\t\t\t\t/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */\n\t\t\t\t<td\n\t\t\t\t\tclassName=\"dataviews-view-table__actions-column\"\n\t\t\t\t\tonClick={ ( e ) => e.stopPropagation() }\n\t\t\t\t>\n\t\t\t\t\t<ItemActions item={ item } actions={ actions } />\n\t\t\t\t</td>\n\t\t\t\t/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */\n\t\t\t) }\n\t\t</tr>\n\t);\n}\n\nfunction ViewTable< Item >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading = false,\n\tonChangeView,\n\tonChangeSelection,\n\tselection,\n\tsetOpenedFilter,\n\tview,\n}: ViewTableProps< Item > ) {\n\tconst headerMenuRefs = useRef<\n\t\tMap< string, { node: HTMLButtonElement; fallback: string } >\n\t>( new Map() );\n\tconst headerMenuToFocusRef = useRef< HTMLButtonElement >();\n\tconst [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] =\n\t\tuseState< HTMLButtonElement >();\n\tconst hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );\n\n\tuseEffect( () => {\n\t\tif ( headerMenuToFocusRef.current ) {\n\t\t\theaderMenuToFocusRef.current.focus();\n\t\t\theaderMenuToFocusRef.current = undefined;\n\t\t}\n\t} );\n\n\tconst tableNoticeId = useId();\n\n\tif ( nextHeaderMenuToFocus ) {\n\t\t// If we need to force focus, we short-circuit rendering here\n\t\t// to prevent any additional work while we handle that.\n\t\t// Clearing out the focus directive is necessary to make sure\n\t\t// future renders don't cause unexpected focus jumps.\n\t\theaderMenuToFocusRef.current = nextHeaderMenuToFocus;\n\t\tsetNextHeaderMenuToFocus( undefined );\n\t\treturn;\n\t}\n\n\tconst onHide = ( field: NormalizedField< Item > ) => {\n\t\tconst hidden = headerMenuRefs.current.get( field.id );\n\t\tconst fallback = hidden\n\t\t\t? headerMenuRefs.current.get( hidden.fallback )\n\t\t\t: undefined;\n\t\tsetNextHeaderMenuToFocus( fallback?.node );\n\t};\n\n\tconst columns = getVisibleFieldIds( view, fields );\n\tconst hasData = !! data?.length;\n\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout?.primaryField\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<table\n\t\t\t\tclassName=\"dataviews-view-table\"\n\t\t\t\taria-busy={ isLoading }\n\t\t\t\taria-describedby={ tableNoticeId }\n\t\t\t>\n\t\t\t\t<thead>\n\t\t\t\t\t<tr className=\"dataviews-view-table__row\">\n\t\t\t\t\t\t{ hasBulkActions && (\n\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-table__checkbox-column\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\twidth: '1%',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BulkSelectionCheckbox\n\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ columns.map( ( column, index ) => {\n\t\t\t\t\t\t\t// Explicits picks the supported styles.\n\t\t\t\t\t\t\tconst { width, maxWidth, minWidth } =\n\t\t\t\t\t\t\t\tview.layout?.styles?.[ column ] ?? {};\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\tkey={ column }\n\t\t\t\t\t\t\t\t\tstyle={ { width, maxWidth, minWidth } }\n\t\t\t\t\t\t\t\t\taria-sort={\n\t\t\t\t\t\t\t\t\t\tview.sort?.field === column\n\t\t\t\t\t\t\t\t\t\t\t? sortValues[ view.sort.direction ]\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ColumnHeaderMenu\n\t\t\t\t\t\t\t\t\t\tref={ ( node ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( node ) {\n\t\t\t\t\t\t\t\t\t\t\t\theaderMenuRefs.current.set(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolumn,\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnode,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfallback:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolumns[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex > 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? index - 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\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} else {\n\t\t\t\t\t\t\t\t\t\t\t\theaderMenuRefs.current.delete(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolumn\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\tfieldId={ column }\n\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\t\t\t\tonHide={ onHide }\n\t\t\t\t\t\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t{ !! actions?.length && (\n\t\t\t\t\t\t\t<th className=\"dataviews-view-table__actions-column\">\n\t\t\t\t\t\t\t\t<span className=\"dataviews-view-table-header\">\n\t\t\t\t\t\t\t\t\t{ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t{ hasData &&\n\t\t\t\t\t\tdata.map( ( item, index ) => (\n\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\thasBulkActions={ hasBulkActions }\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\t\tid={ getItemId( item ) || index.toString() }\n\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t\tid={ tableNoticeId }\n\t\t\t>\n\t\t\t\t{ ! hasData && (\n\t\t\t\t\t<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ViewTable;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SACCC,OAAO,EACPC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,SAAS,EAAEC,KAAK,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,oBAAoB;;AAEvE;AACA;AACA;AACA,OAAOC,uBAAuB,MAAM,+CAA+C;AACnF,OAAOC,WAAW,MAAM,yCAAyC;AACjE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SACCC,iCAAiC,EACjCC,yBAAyB,EACzBC,qBAAqB,QACf,yCAAyC;AAShD,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,SAASC,kBAAkB,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAqC9C,SAASC,WAAWA,CAAU;EAC7BC,MAAM;EACNC,MAAM;EACNC,IAAI;EACJ,GAAGC;AACsB,CAAC,EAAG;EAC7B,MAAMC,KAAK,GAAGH,MAAM,CAACI,IAAI,CAAIC,CAAC,IAAMA,CAAC,CAACC,EAAE,KAAKP,MAAO,CAAC;EACrD,IAAK,CAAC,CAAEI,KAAK,EAAG;IACf,oBAAOV,IAAA,CAACc,gBAAgB;MAAA,GAAML,KAAK;MAAGC,KAAK,EAAGA;IAAO,CAAE,CAAC;EACzD;EACA,MAAMK,aAAa,GAAGP,IAAI,CAACQ,MAAM,EAAEC,cAAc,EAAEN,IAAI,CACpDC,CAAC,IAAMA,CAAC,CAACC,EAAE,KAAKP,MACnB,CAAC;EACD,IAAK,CAAC,CAAES,aAAa,EAAG;IACvB,oBACCf,IAAA,CAACkB,mBAAmB;MAAA,GACdT,KAAK;MACVF,MAAM,EAAGA,MAAQ;MACjBC,IAAI,EAAGA,IAAM;MACbE,KAAK,EAAGK;IAAe,CACvB,CAAC;EAEJ;EAEA,OAAO,IAAI;AACZ;AAEA,SAASD,gBAAgBA,CAAU;EAClCK,YAAY;EACZC,IAAI;EACJV;AAC8B,CAAC,EAAG;EAClC,oBACCV,IAAA;IACCqB,SAAS,EAAGzC,IAAI,CAAE,4CAA4C,EAAE;MAC/D,qCAAqC,EACpCuC,YAAY,EAAEN,EAAE,KAAKH,KAAK,CAACG;IAC7B,CAAE,CAAG;IAAAS,QAAA,eAELtB,IAAA,CAACU,KAAK,CAACa,MAAM;MAAQH;IAAI,CAAM;EAAC,CAC5B,CAAC;AAER;AAEA,SAASF,mBAAmBA,CAAU;EACrCR,KAAK;EACL,GAAGD;AAC8B,CAAC,EAAG;EACrC,MAAMa,QAAQ,GAAGZ,KAAK,CAACY,QAAQ,CAACE,GAAG,CAAIC,KAAK,iBAC3CzB,IAAA,CAACK,WAAW;IAAA,GAAoBI,KAAK;IAAGH,MAAM,EAAGmB;EAAO,GAArCA,KAAuC,CACzD,CAAC;EAEH,IAAKf,KAAK,CAACgB,SAAS,KAAK,YAAY,EAAG;IACvC,oBAAO1B,IAAA,CAAChB,MAAM;MAAC2C,OAAO,EAAG,CAAG;MAAAL,QAAA,EAAGA;IAAQ,CAAU,CAAC;EACnD;EACA,oBAAOtB,IAAA,CAACd,MAAM;IAACyC,OAAO,EAAG,CAAG;IAAAL,QAAA,EAAGA;EAAQ,CAAU,CAAC;AACnD;AAEA,SAASM,QAAQA,CAAU;EAC1BC,cAAc;EACdT,IAAI;EACJU,OAAO;EACPvB,MAAM;EACNM,EAAE;EACFL,IAAI;EACJW,YAAY;EACZY,SAAS;EACTC,SAAS;EACTC;AACsB,CAAC,EAAG;EAC1B,MAAMC,qBAAqB,GAAGvC,yBAAyB,CAAEmC,OAAO,EAAEV,IAAK,CAAC;EACxE,MAAMe,UAAU,GAAGD,qBAAqB,IAAIH,SAAS,CAACK,QAAQ,CAAEvB,EAAG,CAAC;EACpE,MAAM,CAAEwB,SAAS,EAAEC,YAAY,CAAE,GAAGhD,QAAQ,CAAE,KAAM,CAAC;EAErD,MAAMiD,gBAAgB,GAAGA,CAAA,KAAM;IAC9BD,YAAY,CAAE,IAAK,CAAC;EACrB,CAAC;EACD,MAAME,gBAAgB,GAAGA,CAAA,KAAM;IAC9BF,YAAY,CAAE,KAAM,CAAC;EACtB,CAAC;;EAED;EACA;EACA;EACA,MAAMG,gBAAgB,GAAGpD,MAAM,CAAE,KAAM,CAAC;EACxC,MAAMqD,OAAO,GAAG5C,kBAAkB,CAAEU,IAAI,EAAED,MAAO,CAAC;EAElD,oBACCL,KAAA;IACCmB,SAAS,EAAGzC,IAAI,CAAE,2BAA2B,EAAE;MAC9C,aAAa,EAAEsD,qBAAqB,IAAIC,UAAU;MAClD,YAAY,EAAEE,SAAS;MACvB,kBAAkB,EAAEH;IACrB,CAAE,CAAG;IACLS,YAAY,EAAGJ,gBAAkB;IACjCK,YAAY,EAAGJ,gBAAkB;IACjCK,YAAY,EAAGA,CAAA,KAAM;MACpBJ,gBAAgB,CAACK,OAAO,GAAG,IAAI;IAChC,CAAG;IACHC,OAAO,EAAGA,CAAA,KAAM;MACf,IAAK,CAAEb,qBAAqB,EAAG;QAC9B;MACD;MACA,IACC,CAAEO,gBAAgB,CAACK,OAAO,IAC1BE,QAAQ,CAACC,YAAY,CAAC,CAAC,EAAEC,IAAI,KAAK,OAAO,EACxC;QACDjB,iBAAiB,CAChBF,SAAS,CAACK,QAAQ,CAAEvB,EAAG,CAAC,GACrBkB,SAAS,CAACoB,MAAM,CAAIC,MAAM,IAAMvC,EAAE,KAAKuC,MAAO,CAAC,GAC/C,CAAEvC,EAAE,CACR,CAAC;MACF;IACD,CAAG;IAAAS,QAAA,GAEDO,cAAc,iBACf7B,IAAA;MACCqB,SAAS,EAAC,uCAAuC;MACjDgC,KAAK,EAAG;QACPC,KAAK,EAAE;MACR,CAAG;MAAAhC,QAAA,eAEHtB,IAAA;QAAKqB,SAAS,EAAC,4CAA4C;QAAAC,QAAA,eAC1DtB,IAAA,CAACT,uBAAuB;UACvB6B,IAAI,EAAGA,IAAM;UACbW,SAAS,EAAGA,SAAW;UACvBE,iBAAiB,EAAGA,iBAAmB;UACvCD,SAAS,EAAGA,SAAW;UACvBb,YAAY,EAAGA,YAAc;UAC7BoC,QAAQ,EAAG,CAAErB;QAAuB,CACpC;MAAC,CACE;IAAC,CACH,CACJ,EACCQ,OAAO,CAAClB,GAAG,CAAIlB,MAAc,IAAM;MAAA,IAAAkD,qBAAA;MACpC;MACA,MAAM;QAAEF,KAAK;QAAEG,QAAQ;QAAEC;MAAS,CAAC,IAAAF,qBAAA,GAClChD,IAAI,CAACQ,MAAM,EAAE2C,MAAM,GAAIrD,MAAM,CAAE,cAAAkD,qBAAA,cAAAA,qBAAA,GAAI,CAAC,CAAC;MAEtC,oBACCxD,IAAA;QAAmBqD,KAAK,EAAG;UAAEC,KAAK;UAAEG,QAAQ;UAAEC;QAAS,CAAG;QAAApC,QAAA,eACzDtB,IAAA,CAACK,WAAW;UACXc,YAAY,EAAGA,YAAc;UAC7BZ,MAAM,EAAGA,MAAQ;UACjBa,IAAI,EAAGA,IAAM;UACbd,MAAM,EAAGA,MAAQ;UACjBE,IAAI,EAAGA;QAAM,CACb;MAAC,GAPOF,MAQN,CAAC;IAEP,CAAE,CAAC,EACD,CAAC,CAAEwB,OAAO,EAAE8B,MAAM;IAAA;IACnB;IACA;IACA;IACA;IACA;IAEA;IACA5D,IAAA;MACCqB,SAAS,EAAC,sCAAsC;MAChD0B,OAAO,EAAKc,CAAC,IAAMA,CAAC,CAACC,eAAe,CAAC,CAAG;MAAAxC,QAAA,eAExCtB,IAAA,CAACR,WAAW;QAAC4B,IAAI,EAAGA,IAAM;QAACU,OAAO,EAAGA;MAAS,CAAE;IAAC,CAC9C;IACJ,0GACA;EAAA,CACE,CAAC;AAEP;AAEA,SAASiC,SAASA,CAAU;EAC3BjC,OAAO;EACPkC,IAAI;EACJzD,MAAM;EACNyB,SAAS;EACTiC,SAAS,GAAG,KAAK;EACjBC,YAAY;EACZjC,iBAAiB;EACjBF,SAAS;EACToC,eAAe;EACf3D;AACuB,CAAC,EAAG;EAC3B,MAAM4D,cAAc,GAAG/E,MAAM,CAE1B,IAAIgF,GAAG,CAAC,CAAE,CAAC;EACd,MAAMC,oBAAoB,GAAGjF,MAAM,CAAsB,CAAC;EAC1D,MAAM,CAAEkF,qBAAqB,EAAEC,wBAAwB,CAAE,GACxDlF,QAAQ,CAAsB,CAAC;EAChC,MAAMuC,cAAc,GAAGnC,iCAAiC,CAAEoC,OAAO,EAAEkC,IAAK,CAAC;EAEzE7E,SAAS,CAAE,MAAM;IAChB,IAAKmF,oBAAoB,CAACxB,OAAO,EAAG;MACnCwB,oBAAoB,CAACxB,OAAO,CAAC2B,KAAK,CAAC,CAAC;MACpCH,oBAAoB,CAACxB,OAAO,GAAG4B,SAAS;IACzC;EACD,CAAE,CAAC;EAEH,MAAMC,aAAa,GAAGvF,KAAK,CAAC,CAAC;EAE7B,IAAKmF,qBAAqB,EAAG;IAC5B;IACA;IACA;IACA;IACAD,oBAAoB,CAACxB,OAAO,GAAGyB,qBAAqB;IACpDC,wBAAwB,CAAEE,SAAU,CAAC;IACrC;EACD;EAEA,MAAME,MAAM,GAAKlE,KAA8B,IAAM;IACpD,MAAMmE,MAAM,GAAGT,cAAc,CAACtB,OAAO,CAACgC,GAAG,CAAEpE,KAAK,CAACG,EAAG,CAAC;IACrD,MAAMkE,QAAQ,GAAGF,MAAM,GACpBT,cAAc,CAACtB,OAAO,CAACgC,GAAG,CAAED,MAAM,CAACE,QAAS,CAAC,GAC7CL,SAAS;IACZF,wBAAwB,CAAEO,QAAQ,EAAEC,IAAK,CAAC;EAC3C,CAAC;EAED,MAAMtC,OAAO,GAAG5C,kBAAkB,CAAEU,IAAI,EAAED,MAAO,CAAC;EAClD,MAAM0E,OAAO,GAAG,CAAC,CAAEjB,IAAI,EAAEJ,MAAM;EAE/B,MAAMzC,YAAY,GAAGZ,MAAM,CAACI,IAAI,CAC7BD,KAAK,IAAMA,KAAK,CAACG,EAAE,KAAKL,IAAI,CAACQ,MAAM,EAAEG,YACxC,CAAC;EAED,oBACCjB,KAAA,CAAAE,SAAA;IAAAkB,QAAA,gBACCpB,KAAA;MACCmB,SAAS,EAAC,sBAAsB;MAChC,aAAY4C,SAAW;MACvB,oBAAmBU,aAAe;MAAArD,QAAA,gBAElCtB,IAAA;QAAAsB,QAAA,eACCpB,KAAA;UAAImB,SAAS,EAAC,2BAA2B;UAAAC,QAAA,GACtCO,cAAc,iBACf7B,IAAA;YACCqB,SAAS,EAAC,uCAAuC;YACjDgC,KAAK,EAAG;cACPC,KAAK,EAAE;YACR,CAAG;YACH4B,KAAK,EAAC,KAAK;YAAA5D,QAAA,eAEXtB,IAAA,CAACJ,qBAAqB;cACrBmC,SAAS,EAAGA,SAAW;cACvBE,iBAAiB,EAAGA,iBAAmB;cACvC+B,IAAI,EAAGA,IAAM;cACblC,OAAO,EAAGA,OAAS;cACnBE,SAAS,EAAGA;YAAW,CACvB;UAAC,CACC,CACJ,EACCU,OAAO,CAAClB,GAAG,CAAE,CAAElB,MAAM,EAAE6E,KAAK,KAAM;YAAA,IAAAC,sBAAA;YACnC;YACA,MAAM;cAAE9B,KAAK;cAAEG,QAAQ;cAAEC;YAAS,CAAC,IAAA0B,sBAAA,GAClC5E,IAAI,CAACQ,MAAM,EAAE2C,MAAM,GAAIrD,MAAM,CAAE,cAAA8E,sBAAA,cAAAA,sBAAA,GAAI,CAAC,CAAC;YACtC,oBACCpF,IAAA;cAECqD,KAAK,EAAG;gBAAEC,KAAK;gBAAEG,QAAQ;gBAAEC;cAAS,CAAG;cACvC,aACClD,IAAI,CAAC6E,IAAI,EAAE3E,KAAK,KAAKJ,MAAM,GACxBb,UAAU,CAAEe,IAAI,CAAC6E,IAAI,CAAC3D,SAAS,CAAE,GACjCgD,SACH;cACDQ,KAAK,EAAC,KAAK;cAAA5D,QAAA,eAEXtB,IAAA,CAACH,gBAAgB;gBAChByF,GAAG,EAAKN,IAAI,IAAM;kBACjB,IAAKA,IAAI,EAAG;oBACXZ,cAAc,CAACtB,OAAO,CAACyC,GAAG,CACzBjF,MAAM,EACN;sBACC0E,IAAI;sBACJD,QAAQ,EACPrC,OAAO,CACNyC,KAAK,GAAG,CAAC,GACNA,KAAK,GAAG,CAAC,GACT,CAAC;oBAEP,CACD,CAAC;kBACF,CAAC,MAAM;oBACNf,cAAc,CAACtB,OAAO,CAAC0C,MAAM,CAC5BlF,MACD,CAAC;kBACF;gBACD,CAAG;gBACHmF,OAAO,EAAGnF,MAAQ;gBAClBE,IAAI,EAAGA,IAAM;gBACbD,MAAM,EAAGA,MAAQ;gBACjB2D,YAAY,EAAGA,YAAc;gBAC7BU,MAAM,EAAGA,MAAQ;gBACjBT,eAAe,EAAGA;cAAiB,CACnC;YAAC,GApCI7D,MAqCH,CAAC;UAEP,CAAE,CAAC,EACD,CAAC,CAAEwB,OAAO,EAAE8B,MAAM,iBACnB5D,IAAA;YAAIqB,SAAS,EAAC,sCAAsC;YAAAC,QAAA,eACnDtB,IAAA;cAAMqB,SAAS,EAAC,6BAA6B;cAAAC,QAAA,EAC1CzC,EAAE,CAAE,SAAU;YAAC,CACZ;UAAC,CACJ,CACJ;QAAA,CACE;MAAC,CACC,CAAC,eACRmB,IAAA;QAAAsB,QAAA,EACG2D,OAAO,IACRjB,IAAI,CAACxC,GAAG,CAAE,CAAEJ,IAAI,EAAE+D,KAAK,kBACtBnF,IAAA,CAAC4B,QAAQ;UAERR,IAAI,EAAGA,IAAM;UACbS,cAAc,EAAGA,cAAgB;UACjCC,OAAO,EAAGA,OAAS;UACnBvB,MAAM,EAAGA,MAAQ;UACjBM,EAAE,EAAGmB,SAAS,CAAEZ,IAAK,CAAC,IAAI+D,KAAK,CAACO,QAAQ,CAAC,CAAG;UAC5ClF,IAAI,EAAGA,IAAM;UACbW,YAAY,EAAGA,YAAc;UAC7BY,SAAS,EAAGA,SAAW;UACvBC,SAAS,EAAGA,SAAW;UACvBC,iBAAiB,EAAGA;QAAmB,GAVjCD,SAAS,CAAEZ,IAAK,CAWtB,CACA;MAAC,CACE,CAAC;IAAA,CACF,CAAC,eACRpB,IAAA;MACCqB,SAAS,EAAGzC,IAAI,CAAE;QACjB,mBAAmB,EAAEqF,SAAS;QAC9B,sBAAsB,EAAE,CAAEgB,OAAO,IAAI,CAAEhB;MACxC,CAAE,CAAG;MACLpD,EAAE,EAAG8D,aAAe;MAAArD,QAAA,EAElB,CAAE2D,OAAO,iBACVjF,IAAA;QAAAsB,QAAA,EAAK2C,SAAS,gBAAGjE,IAAA,CAAClB,OAAO,IAAE,CAAC,GAAGD,EAAE,CAAE,YAAa;MAAC,CAAK;IACtD,CACG,CAAC;EAAA,CACL,CAAC;AAEL;AAEA,eAAekF,SAAS","ignoreList":[]}

package/build-style/style-rtl.css

@@ -826,44 +826,31 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list li {
   margin: 0;
-  cursor: pointer;
   border-top: 1px solid #f0f0f0;
 }
 .dataviews-view-list li .dataviews-view-list__item-wrapper {
   position: relative;
-  border-radius: 4px;
-}
-.dataviews-view-list li .dataviews-view-list__item-wrapper > * {
-  width: 100%;
+  padding: 16px 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions {
-  position: absolute;
-  top: 16px;
-  left: 0;
+  flex: 0;
+  overflow: hidden;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions > div {
   height: 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
+  position: relative;
+  z-index: 1;
   opacity: 0;
 }
-.dataviews-view-list li:has(.dataviews-view-list__fields:empty) .dataviews-view-list__item-actions {
-  top: 50%;
-  transform: translateY(-50%);
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions {
-  background: #f8f8f8;
-  padding-right: 8px;
-  margin-left: 24px;
-  box-shadow: 12px 0 8px 0 #f8f8f8;
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions {
+  flex-basis: min-content;
+  overflow: unset;
+  margin-inline: 8px 0;
 }
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions .components-button, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions .components-button, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions .components-button {
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions .components-button {
   opacity: 1;
-  position: static;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions {
-  background-color: #f7f8ff;
-  box-shadow: 12px 0 8px 0 #f7f8ff;
 }
 .dataviews-view-list li.is-selected.is-selected {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
@@ -896,26 +883,36 @@ ul.dataviews-view-list {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list .dataviews-view-list__item {
-  box-sizing: border-box;
-  padding: 16px 24px;
-  width: 100%;
+  position: absolute;
+  z-index: 1;
+  inset: 0;
   scroll-margin: 8px 0;
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+.dataviews-view-list .dataviews-view-list__item:focus-visible {
+  outline: none;
 }
 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
   position: absolute;
   content: "";
-  top: var(--wp-admin-border-width-focus);
-  left: var(--wp-admin-border-width-focus);
-  bottom: var(--wp-admin-border-width-focus);
-  right: var(--wp-admin-border-width-focus);
+  inset: var(--wp-admin-border-width-focus);
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   border-radius: 2px;
+  outline: 2px solid transparent;
 }
-.dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
+.dataviews-view-list .dataviews-view-list__primary-field {
+  flex: 1;
   min-height: 24px;
   line-height: 24px;
   overflow: hidden;
 }
+.dataviews-view-list .dataviews-view-list__primary-field:has(a, button) {
+  z-index: 1;
+}
 .dataviews-view-list .dataviews-view-list__media-wrapper {
   width: 52px;
   height: 52px;
@@ -947,6 +944,7 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list .dataviews-view-list__field-wrapper {
   min-height: 52px;
+  flex-grow: 1;
 }
 .dataviews-view-list .dataviews-view-list__fields {
   color: #757575;
@@ -1154,8 +1152,7 @@ ul.dataviews-view-list {
   align-items: center;
   padding: 6px 0;
   line-height: 20px;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 }
 
 .dataforms-layouts-panel__field-control {

package/build-style/style.css

@@ -826,44 +826,31 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list li {
   margin: 0;
-  cursor: pointer;
   border-top: 1px solid #f0f0f0;
 }
 .dataviews-view-list li .dataviews-view-list__item-wrapper {
   position: relative;
-  border-radius: 4px;
-}
-.dataviews-view-list li .dataviews-view-list__item-wrapper > * {
-  width: 100%;
+  padding: 16px 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions {
-  position: absolute;
-  top: 16px;
-  right: 0;
+  flex: 0;
+  overflow: hidden;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions > div {
   height: 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
+  position: relative;
+  z-index: 1;
   opacity: 0;
 }
-.dataviews-view-list li:has(.dataviews-view-list__fields:empty) .dataviews-view-list__item-actions {
-  top: 50%;
-  transform: translateY(-50%);
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions {
-  background: #f8f8f8;
-  padding-left: 8px;
-  margin-right: 24px;
-  box-shadow: -12px 0 8px 0 #f8f8f8;
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions {
+  flex-basis: min-content;
+  overflow: unset;
+  margin-inline: 8px 0;
 }
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions .components-button, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions .components-button, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions .components-button {
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions .components-button {
   opacity: 1;
-  position: static;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions {
-  background-color: #f7f8ff;
-  box-shadow: -12px 0 8px 0 #f7f8ff;
 }
 .dataviews-view-list li.is-selected.is-selected {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
@@ -896,26 +883,36 @@ ul.dataviews-view-list {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list .dataviews-view-list__item {
-  box-sizing: border-box;
-  padding: 16px 24px;
-  width: 100%;
+  position: absolute;
+  z-index: 1;
+  inset: 0;
   scroll-margin: 8px 0;
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+.dataviews-view-list .dataviews-view-list__item:focus-visible {
+  outline: none;
 }
 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
   position: absolute;
   content: "";
-  top: var(--wp-admin-border-width-focus);
-  right: var(--wp-admin-border-width-focus);
-  bottom: var(--wp-admin-border-width-focus);
-  left: var(--wp-admin-border-width-focus);
+  inset: var(--wp-admin-border-width-focus);
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   border-radius: 2px;
+  outline: 2px solid transparent;
 }
-.dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
+.dataviews-view-list .dataviews-view-list__primary-field {
+  flex: 1;
   min-height: 24px;
   line-height: 24px;
   overflow: hidden;
 }
+.dataviews-view-list .dataviews-view-list__primary-field:has(a, button) {
+  z-index: 1;
+}
 .dataviews-view-list .dataviews-view-list__media-wrapper {
   width: 52px;
   height: 52px;
@@ -947,6 +944,7 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list .dataviews-view-list__field-wrapper {
   min-height: 52px;
+  flex-grow: 1;
 }
 .dataviews-view-list .dataviews-view-list__fields {
   color: #757575;
@@ -1154,8 +1152,7 @@ ul.dataviews-view-list {
   align-items: center;
   padding: 6px 0;
   line-height: 20px;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 }
 
 .dataforms-layouts-panel__field-control {

package/build-types/dataviews-layouts/list/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dataviews-layouts/list/index.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAA2B,aAAa,EAAE,MAAM,aAAa,CAAC;AAoR1E,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAE,IAAI,EAAI,KAAK,EAAE,aAAa,CAAE,IAAI,CAAE,+BAyLrE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dataviews-layouts/list/index.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAA2B,aAAa,EAAE,MAAM,aAAa,CAAC;AAiQ1E,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAE,IAAI,EAAI,KAAK,EAAE,aAAa,CAAE,IAAI,CAAE,+BAyLrE"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.5.0",
+	"version": "4.6.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,16 +29,16 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.10",
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/components": "^28.9.0",
-		"@wordpress/compose": "^7.9.0",
-		"@wordpress/data": "^10.9.0",
-		"@wordpress/element": "^6.9.0",
-		"@wordpress/i18n": "^5.9.0",
-		"@wordpress/icons": "^10.9.0",
-		"@wordpress/primitives": "^4.9.0",
-		"@wordpress/private-apis": "^1.9.0",
-		"@wordpress/warning": "^3.9.0",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/components": "^28.10.0",
+		"@wordpress/compose": "^7.10.0",
+		"@wordpress/data": "^10.10.0",
+		"@wordpress/element": "^6.10.0",
+		"@wordpress/i18n": "^5.10.0",
+		"@wordpress/icons": "^10.10.0",
+		"@wordpress/primitives": "^4.10.0",
+		"@wordpress/private-apis": "^1.10.0",
+		"@wordpress/warning": "^3.10.0",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -48,5 +48,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
+	"gitHead": "ab34a7ac935fd1478eac63b596242d83270897ee"
 }

package/src/components/dataviews-view-config/index.tsx

@@ -358,7 +358,7 @@ function FieldItem( {
 								}
 							}, 50 );
 						} }
-						icon={ isVisible ? seen : unseen }
+						icon={ isVisible ? unseen : seen }
 						label={
 							isVisible
 								? sprintf(

package/src/dataviews-layouts/list/index.tsx

@@ -145,11 +145,9 @@ function ListItem< Item >( {
 	const descriptionId = `${ idPrefix }-description`;
 
 	const [ isHovered, setIsHovered ] = useState( false );
-	const handleMouseEnter = () => {
-		setIsHovered( true );
-	};
-	const handleMouseLeave = () => {
-		setIsHovered( false );
+	const handleHover: React.MouseEventHandler = ( { type } ) => {
+		const isHover = type === 'mouseenter';
+		setIsHovered( isHover );
 	};
 
 	useEffect( () => {
@@ -187,6 +185,45 @@ function ListItem< Item >( {
 		<primaryField.render item={ item } />
 	) : null;
 
+	const usedActions = eligibleActions?.length > 0 && (
+		<HStack spacing={ 3 } className="dataviews-view-list__item-actions">
+			{ primaryAction && (
+				<PrimaryActionGridCell
+					idPrefix={ idPrefix }
+					primaryAction={ primaryAction }
+					item={ item }
+				/>
+			) }
+			<div role="gridcell">
+				<DropdownMenu
+					trigger={
+						<Composite.Item
+							id={ generateDropdownTriggerCompositeId(
+								idPrefix
+							) }
+							render={
+								<Button
+									size="small"
+									icon={ moreVertical }
+									label={ __( 'Actions' ) }
+									accessibleWhenDisabled
+									disabled={ ! actions.length }
+									onKeyDown={ onDropdownTriggerKeyDown }
+								/>
+							}
+						/>
+					}
+					placement="bottom-end"
+				>
+					<ActionsDropdownMenuGroup
+						actions={ eligibleActions }
+						item={ item }
+					/>
+				</DropdownMenu>
+			</div>
+		</HStack>
+	);
+
 	return (
 		<Composite.Row
 			ref={ itemRef }
@@ -196,116 +233,60 @@ function ListItem< Item >( {
 				'is-selected': isSelected,
 				'is-hovered': isHovered,
 			} ) }
-			onMouseEnter={ handleMouseEnter }
-			onMouseLeave={ handleMouseLeave }
+			onMouseEnter={ handleHover }
+			onMouseLeave={ handleHover }
 		>
-			<HStack
-				className="dataviews-view-list__item-wrapper"
-				alignment="center"
-				spacing={ 0 }
-			>
+			<HStack className="dataviews-view-list__item-wrapper" spacing={ 0 }>
 				<div role="gridcell">
 					<Composite.Item
-						render={ <div /> }
-						role="button"
 						id={ generateItemWrapperCompositeId( idPrefix ) }
 						aria-pressed={ isSelected }
 						aria-labelledby={ labelId }
 						aria-describedby={ descriptionId }
 						className="dataviews-view-list__item"
 						onClick={ () => onSelect( item ) }
+					/>
+				</div>
+				<HStack spacing={ 3 } justify="start" alignment="flex-start">
+					<div className="dataviews-view-list__media-wrapper">
+						{ renderedMediaField }
+					</div>
+					<VStack
+						spacing={ 1 }
+						className="dataviews-view-list__field-wrapper"
 					>
-						<HStack
-							spacing={ 3 }
-							justify="start"
-							alignment="flex-start"
-						>
-							<div className="dataviews-view-list__media-wrapper">
-								{ renderedMediaField }
-							</div>
-							<VStack
-								spacing={ 1 }
-								className="dataviews-view-list__field-wrapper"
+						<HStack spacing={ 0 }>
+							<div
+								className="dataviews-view-list__primary-field"
+								id={ labelId }
 							>
-								<span
-									className="dataviews-view-list__primary-field"
-									id={ labelId }
-								>
-									{ renderedPrimaryField }
-								</span>
+								{ renderedPrimaryField }
+							</div>
+							{ usedActions }
+						</HStack>
+						<div
+							className="dataviews-view-list__fields"
+							id={ descriptionId }
+						>
+							{ visibleFields.map( ( field ) => (
 								<div
-									className="dataviews-view-list__fields"
-									id={ descriptionId }
+									key={ field.id }
+									className="dataviews-view-list__field"
 								>
-									{ visibleFields.map( ( field ) => (
-										<div
-											key={ field.id }
-											className="dataviews-view-list__field"
-										>
-											<VisuallyHidden
-												as="span"
-												className="dataviews-view-list__field-label"
-											>
-												{ field.label }
-											</VisuallyHidden>
-											<span className="dataviews-view-list__field-value">
-												<field.render item={ item } />
-											</span>
-										</div>
-									) ) }
+									<VisuallyHidden
+										as="span"
+										className="dataviews-view-list__field-label"
+									>
+										{ field.label }
+									</VisuallyHidden>
+									<span className="dataviews-view-list__field-value">
+										<field.render item={ item } />
+									</span>
 								</div>
-							</VStack>
-						</HStack>
-					</Composite.Item>
-				</div>
-				{ eligibleActions?.length > 0 && (
-					<HStack
-						spacing={ 3 }
-						justify="flex-end"
-						className="dataviews-view-list__item-actions"
-						style={ {
-							flexShrink: '0',
-							width: 'auto',
-						} }
-					>
-						{ primaryAction && (
-							<PrimaryActionGridCell
-								idPrefix={ idPrefix }
-								primaryAction={ primaryAction }
-								item={ item }
-							/>
-						) }
-						<div role="gridcell">
-							<DropdownMenu
-								trigger={
-									<Composite.Item
-										id={ generateDropdownTriggerCompositeId(
-											idPrefix
-										) }
-										render={
-											<Button
-												size="small"
-												icon={ moreVertical }
-												label={ __( 'Actions' ) }
-												accessibleWhenDisabled
-												disabled={ ! actions.length }
-												onKeyDown={
-													onDropdownTriggerKeyDown
-												}
-											/>
-										}
-									/>
-								}
-								placement="bottom-end"
-							>
-								<ActionsDropdownMenuGroup
-									actions={ eligibleActions }
-									item={ item }
-								/>
-							</DropdownMenu>
+							) ) }
 						</div>
-					</HStack>
-				) }
+					</VStack>
+				</HStack>
 			</HStack>
 		</Composite.Row>
 	);