@wordpress/dataviews 4.17.0 → 4.18.0

package/src/components/dataviews-item-actions/index.tsx

@@ -110,7 +110,7 @@ export function ActionModal< Item >( {
 			title={ action.modalHeader || label }
 			__experimentalHideHeader={ !! action.hideModalHeader }
 			onRequestClose={ closeModal }
-			focusOnMount="firstContentElement"
+			focusOnMount={ action.modalFocusOnMount ?? true }
 			size={ action.modalSize || 'medium' }
 			overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
 				action.id

package/src/dataviews-layouts/list/style.scss

@@ -16,29 +16,41 @@ div.dataviews-view-list {
 		}
 
 		.dataviews-view-list__item-actions {
-			flex: 0;
-			overflow: hidden;
+			display: flex;
+			width: max-content;
+			flex: 0 0 auto;
+			gap: $grid-unit-05;
+
+			.components-button {
+				position: relative;
+				z-index: 1;
+			}
 
 			> div {
 				height: $button-size-small;
 			}
 
-			.components-button {
-				position: relative;
-				z-index: 1;
-				opacity: 0;
+			> :not(:last-child) {
+				flex: 0;
+				overflow: hidden;
+				width: 0;
 			}
 		}
 
 		&:where(.is-selected, .is-hovered, :focus-within) {
-			.dataviews-view-list__item-actions {
+			.dataviews-view-list__item-actions > :not(:last-child) {
 				flex-basis: min-content;
+				width: auto;
 				overflow: unset;
-				padding-inline-end: $grid-unit-05;
+			}
+		}
 
-				.components-button {
-					opacity: 1;
-				}
+		@media (hover: none) {
+			// Show primary action on devices that do not support hover.
+			.dataviews-view-list__item-actions > :not(:last-child) {
+				flex-basis: min-content;
+				width: auto;
+				overflow: unset;
 			}
 		}
 

package/src/types.ts

@@ -8,6 +8,11 @@ import type { ReactElement, ComponentType } from 'react';
  */
 import type { SetSelection } from './private-types';
 
+/**
+ * WordPress dependencies
+ */
+import type { useFocusOnMount } from '@wordpress/compose';
+
 export type SortDirection = 'asc' | 'desc';
 
 /**
@@ -470,6 +475,13 @@ export interface ActionModal< Item > extends ActionBase< Item > {
 	 * @default 'medium'
 	 */
 	modalSize?: 'small' | 'medium' | 'large' | 'fill';
+
+	/**
+	 * The focus on mount property of the modal.
+	 */
+	modalFocusOnMount?:
+		| Parameters< typeof useFocusOnMount >[ 0 ]
+		| 'firstContentElement';
 }
 
 export interface ActionButton< Item > extends ActionBase< Item > {