@wordpress/dataviews 4.16.0 → 4.18.0

package/build-wp/index.js

@@ -4896,13 +4896,15 @@ function clamp(value, min, max) {
   const baseValue = getNumber(value);
   return Math.max(min, Math.min(baseValue, max));
 }
-function roundClamp(value = 0, min = Infinity, max = Infinity, step = 1) {
+function ensureValidStep(value, min, step) {
   const baseValue = getNumber(value);
   const stepValue = getNumber(step);
-  const precision = getPrecision(step);
-  const rounded2 = Math.round(baseValue / stepValue) * stepValue;
-  const clampedValue = clamp(rounded2, min, max);
-  return precision ? getNumber(clampedValue.toFixed(precision)) : clampedValue;
+  const precision = Math.max(getPrecision(step), getPrecision(min));
+  const realMin = Math.abs(min) === Infinity ? 0 : min;
+  const tare = realMin % stepValue ? realMin : 0;
+  const rounded2 = Math.round((baseValue - tare) / stepValue) * stepValue;
+  const fromMin = rounded2 + tare;
+  return precision ? getNumber(fromMin.toFixed(precision)) : fromMin;
 }
 
 // ../components/build-module/h-stack/utils.js
@@ -5113,10 +5115,13 @@ function UnforwardedNumberControl(props, forwardedRef) {
   const isStepAny = step === "any";
   const baseStep = isStepAny ? 1 : ensureNumber(step);
   const baseSpin = ensureNumber(spinFactor) * baseStep;
-  const baseValue = roundClamp(0, min, max, baseStep);
   const constrainValue = (value, stepOverride) => {
-    return isStepAny ? "" + Math.min(max, Math.max(min, ensureNumber(value))) : "" + roundClamp(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
+    if (!isStepAny) {
+      value = ensureValidStep(value, min, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
+    }
+    return `${clamp(value, min, max)}`;
   };
+  const baseValue = constrainValue(0);
   const autoComplete = typeProp === "number" ? "off" : void 0;
   const classes = clsx6("components-number-control", className);
   const cx = useCx();
@@ -6022,19 +6027,32 @@ var UnforwardedPopover = (props, forwardedRef) => {
     }), content]
   });
 };
-var Popover = contextConnect(UnforwardedPopover, "Popover");
-function PopoverSlot({
+var PopoverSlot = forwardRef(({
   name = SLOT_NAME
-}, ref) {
+}, ref) => {
   return /* @__PURE__ */ _jsx70(Slot3, {
     bubblesVirtually: true,
     name,
     className: "popover-slot",
     ref
   });
-}
-Popover.Slot = forwardRef(PopoverSlot);
-Popover.__unstableSlotNameProvider = slotNameContext.Provider;
+});
+var Popover = Object.assign(contextConnect(UnforwardedPopover, "Popover"), {
+  /**
+   * Renders a slot that is used internally by Popover for rendering content.
+   */
+  Slot: Object.assign(PopoverSlot, {
+    displayName: "Popover.Slot"
+  }),
+  /**
+   * Provides a context to manage popover slot names.
+   *
+   * This is marked as unstable and should not be used directly.
+   */
+  __unstableSlotNameProvider: Object.assign(slotNameContext.Provider, {
+    displayName: "Popover.__unstableSlotNameProvider"
+  })
+});
 var popover_default = Popover;
 
 // ../components/build-module/toggle-group-control/toggle-group-control/styles.js
@@ -11522,7 +11540,7 @@ function ActionModal({
       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__${kebabCase3(
         action.id

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.16.0",
+	"version": "4.18.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",
@@ -46,15 +46,15 @@
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
 		"@babel/runtime": "7.25.7",
-		"@wordpress/components": "^29.6.0",
-		"@wordpress/compose": "^7.20.0",
-		"@wordpress/data": "^10.20.0",
-		"@wordpress/element": "^6.20.0",
-		"@wordpress/i18n": "^5.20.0",
-		"@wordpress/icons": "^10.20.0",
-		"@wordpress/primitives": "^4.20.0",
-		"@wordpress/private-apis": "^1.20.0",
-		"@wordpress/warning": "^3.20.0",
+		"@wordpress/components": "^29.8.0",
+		"@wordpress/compose": "^7.22.0",
+		"@wordpress/data": "^10.22.0",
+		"@wordpress/element": "^6.22.0",
+		"@wordpress/i18n": "^5.22.0",
+		"@wordpress/icons": "^10.22.0",
+		"@wordpress/primitives": "^4.22.0",
+		"@wordpress/private-apis": "^1.22.0",
+		"@wordpress/warning": "^3.22.0",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -67,5 +67,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "72476970386146d450c375e5c71a96dda7c9aaa8"
+	"gitHead": "01a314d7e46a50101e328fdb11959c441e49372d"
 }

package/src/components/dataviews/stories/fixtures.tsx

@@ -582,6 +582,7 @@ export const actions: Action< SpaceObject >[] = [
 		isPrimary: true,
 		icon: trash,
 		hideModalHeader: true,
+		modalFocusOnMount: 'firstContentElement',
 		RenderModal: ( { items, closeModal } ) => {
 			return (
 				<VStack spacing="5">

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/grid/style.scss

@@ -150,6 +150,11 @@
 	top: -9999em;
 	left: $grid-unit-10;
 	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");
+
+	@media (hover: none) {
+		// Show checkboxes on devices that do not support hover.
+		top: $grid-unit-10;
+	}
 }
 
 .dataviews-view-grid__card:hover .dataviews-selection-checkbox,

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 > {