@wordpress/dataviews 4.19.0 → 4.21.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 4.21.0 (2025-06-04)
+
+## 4.20.0 (2025-05-22)
+
 ## 4.19.0 (2025-05-07)
 
 ## 4.18.0 (2025-04-11)

package/build-style/style-rtl.css

@@ -1,15 +1,12 @@
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
 /**
  * Colors
  */
 /**
  * Breakpoints & Media Queries
  */
+/**
+ * Colors
+ */
 /**
  * SCSS Variables.
  *
@@ -17,15 +14,136 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
 /**
  * Colors
  */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
 /**
  * Fonts & basic variables.
  */
@@ -61,6 +179,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -99,6 +220,9 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 :root {
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: var(--wp-block-synced-color);
   --wp-admin-theme-color: #007cba;
   --wp-admin-theme-color--rgb: 0, 124, 186;
   --wp-admin-theme-color-darker-10: #006ba1;
@@ -106,9 +230,6 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
-  --wp-block-synced-color: #7a00df;
-  --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -408,13 +529,13 @@
 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
+  box-shadow: 0 0 0 transparent;
+  border-radius: 2px;
+  border: 1px solid #949494;
   display: block;
   padding: 0 8px 0 32px;
   background: #f0f0f0;

package/build-style/style.css

@@ -1,15 +1,12 @@
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
 /**
  * Colors
  */
 /**
  * Breakpoints & Media Queries
  */
+/**
+ * Colors
+ */
 /**
  * SCSS Variables.
  *
@@ -17,15 +14,136 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
 /**
  * Colors
  */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
 /**
  * Fonts & basic variables.
  */
@@ -61,6 +179,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -99,6 +220,9 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 :root {
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: var(--wp-block-synced-color);
   --wp-admin-theme-color: #007cba;
   --wp-admin-theme-color--rgb: 0, 124, 186;
   --wp-admin-theme-color-darker-10: #006ba1;
@@ -106,9 +230,6 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
-  --wp-block-synced-color: #7a00df;
-  --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -408,13 +529,13 @@
 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
+  box-shadow: 0 0 0 transparent;
+  border-radius: 2px;
+  border: 1px solid #949494;
   display: block;
   padding: 0 32px 0 8px;
   background: #f0f0f0;

package/build-wp/index.js

@@ -469,7 +469,7 @@ __export(focusable_exports, {
   find: () => find
 });
 function buildSelector(sequential) {
-  return [sequential ? '[tabindex]:not([tabindex^="-"])' : "[tabindex]", "a[href]", "button:not([disabled])", 'input:not([type="hidden"]):not([disabled])', "select:not([disabled])", "textarea:not([disabled])", 'iframe:not([tabindex^="-"])', "object", "embed", "area[href]", "[contenteditable]:not([contenteditable=false])"].join(",");
+  return [sequential ? '[tabindex]:not([tabindex^="-"])' : "[tabindex]", "a[href]", "button:not([disabled])", 'input:not([type="hidden"]):not([disabled])', "select:not([disabled])", "textarea:not([disabled])", 'iframe:not([tabindex^="-"])', "object", "embed", "summary", "area[href]", "[contenteditable]:not([contenteditable=false])"].join(",");
 }
 function isVisible(element) {
   return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;
@@ -4117,7 +4117,7 @@ function useInputControlStateReducer(stateReducer = initialStateReducer, initial
 }
 
 // ../components/build-module/utils/with-ignore-ime-events.js
-function withIgnoreIMEEvents(keydownHandler) {
+function withIgnoreIMEEvents(handler) {
   return (event) => {
     const {
       isComposing
@@ -4128,7 +4128,7 @@ function withIgnoreIMEEvents(keydownHandler) {
     event.keyCode === 229) {
       return;
     }
-    keydownHandler(event);
+    handler(event);
   };
 }
 
@@ -4264,15 +4264,6 @@ function InputField({
     }
   });
   const dragProps = isDragEnabled ? dragGestureProps() : {};
-  let handleOnMouseDown;
-  if (type === "number") {
-    handleOnMouseDown = (event) => {
-      props.onMouseDown?.(event);
-      if (event.currentTarget !== event.currentTarget.ownerDocument.activeElement) {
-        event.currentTarget.focus();
-      }
-    };
-  }
   return /* @__PURE__ */ _jsx54(Input, {
     ...props,
     ...dragProps,
@@ -4284,7 +4275,6 @@ function InputField({
     onBlur: handleOnBlur,
     onChange: handleOnChange,
     onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),
-    onMouseDown: handleOnMouseDown,
     ref,
     inputSize: size3,
     value: value !== null && value !== void 0 ? value : "",
@@ -5257,6 +5247,9 @@ var number_control_default = NumberControl;
 import removeAccents from "remove-accents";
 import { paramCase } from "change-case";
 var ALL_UNICODE_DASH_CHARACTERS = new RegExp(/[\u007e\u00ad\u2053\u207b\u208b\u2212\p{Pd}]/gu);
+var normalizeTextString = (value) => {
+  return removeAccents(value).normalize("NFKC").toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, "-");
+};
 function kebabCase2(str) {
   var _str$toString;
   let input = (_str$toString = str?.toString?.()) !== null && _str$toString !== void 0 ? _str$toString : "";
@@ -10538,7 +10531,9 @@ lock3(privateApis, {
   Theme: theme_default,
   Menu: Menu2,
   kebabCase: kebabCase2,
-  Badge: badge_default
+  withIgnoreIMEEvents,
+  Badge: badge_default,
+  normalizeTextString
 });
 
 // src/constants.ts

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.19.0",
+	"version": "4.21.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.9.0",
-		"@wordpress/compose": "^7.23.0",
-		"@wordpress/data": "^10.23.0",
-		"@wordpress/element": "^6.23.0",
-		"@wordpress/i18n": "^5.23.0",
-		"@wordpress/icons": "^10.23.0",
-		"@wordpress/primitives": "^4.23.0",
-		"@wordpress/private-apis": "^1.23.0",
-		"@wordpress/warning": "^3.23.0",
+		"@wordpress/components": "^29.11.0",
+		"@wordpress/compose": "^7.25.0",
+		"@wordpress/data": "^10.25.0",
+		"@wordpress/element": "^6.25.0",
+		"@wordpress/i18n": "^5.25.0",
+		"@wordpress/icons": "^10.25.0",
+		"@wordpress/primitives": "^4.25.0",
+		"@wordpress/private-apis": "^1.25.0",
+		"@wordpress/warning": "^3.25.0",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -67,5 +67,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "ab5c79cd40adbb68898536c50e035b0a734338ea"
+	"gitHead": "d1acd76ffff33ab01f0a948d2f51e5e45c95158d"
 }