@automattic/charts 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.7.0] - 2026-06-23
+### Added
+- Leaderboard interactive rows gain an opt-in `ariaLabel` for image-only labels, and the hover affordance now shrinks each bar in proportion to its length so small-share rows stay consistent. [#49812]
+
+### Changed
+- Add React 19 compatibility for consumers. [#49661]
+- Type `leaderboardChart.labelSpacing` as a WPDS `GapSize` token instead of `number` (the numeric value was silently ignored by `@wordpress/ui`'s Stack) to fix `@wordpress/ui` 0.15 type errors. [#49797]
+
 ## [1.6.0] - 2026-06-22
 ### Added
 - Allow Leaderboard items to be made interactive via a per-entry onClick, rendering the row as a keyboard-accessible button with a hover chevron. [#49733]
@@ -870,6 +878,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[1.7.0]: https://github.com/Automattic/charts/compare/v1.6.0...v1.7.0
 [1.6.0]: https://github.com/Automattic/charts/compare/v1.5.3...v1.6.0
 [1.5.3]: https://github.com/Automattic/charts/compare/v1.5.2...v1.5.3
 [1.5.2]: https://github.com/Automattic/charts/compare/v1.5.1...v1.5.2

package/README.md

@@ -6,8 +6,8 @@ Explore the available charts and their documentation in [Storybook](https://auto
 
 ## Requirements
 
-- **Node.js**: >= 20.10.0 (required by `@wordpress/ui` dependency)
-- **React**: 17.x or 18.x
+- **Node.js**: >= 20.11.0
+- **React**: 18.x or 19.x
 
 ## Quick Start
 

package/dist/index.cjs

@@ -43,7 +43,6 @@ let _visx_gradient = require("@visx/gradient");
 let _visx_curve = require("@visx/curve");
 let _visx_responsive = require("@visx/responsive");
 let _visx_annotation = require("@visx/annotation");
-let _wordpress_icons = require("@wordpress/icons");
 let _visx_pattern = require("@visx/pattern");
 let _visx_tooltip = require("@visx/tooltip");
 let react_google_charts = require("react-google-charts");
@@ -52,6 +51,7 @@ dompurify = __toESM(dompurify, 1);
 let _babel_runtime_helpers_esm_extends = require("@babel/runtime/helpers/esm/extends");
 _babel_runtime_helpers_esm_extends = __toESM(_babel_runtime_helpers_esm_extends);
 require("@babel/runtime/helpers/extends");
+let _wordpress_icons = require("@wordpress/icons");
 let _visx_shape = require("@visx/shape");
 //#region src/charts/private/single-chart-context/single-chart-context.tsx
 const ChartInstanceContext = (0, react$1.createContext)(null);
@@ -713,7 +713,7 @@ const defaultTheme = {
 	leaderboardChart: {
 		rowGap: 12,
 		columnGap: 4,
-		labelSpacing: 1.5,
+		labelSpacing: "xs",
 		deltaColors: [
 			"#FF8C8F",
 			"#757575",
@@ -3063,6 +3063,19 @@ const LineChartAnnotationsOverlay = ({ children }) => {
 		})
 	});
 };
+const CloseIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M6 6l12 12M18 6L6 18" })
+});
 const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, renderLabelPopover }) => {
 	const popoverId = (0, react$1.useId)();
 	const buttonRef = (0, react$1.useRef)(null);
@@ -3124,10 +3137,7 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 					popovertargetaction: "hide",
 					className: line_chart_module_default["line-chart__annotation-label-popover-close-button"],
 					"aria-label": (0, _wordpress_i18n.__)("Close", "jetpack-charts"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_icons.Icon, {
-						icon: _wordpress_icons.close,
-						size: 16
-					})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, {})
 				})]
 			})
 		})]
@@ -8142,13 +8152,15 @@ const defaultDeltaFormatter = (value) => {
 };
 /**
 * Build a bar's width. A hover-inset CSS variable (0 by default) is subtracted
-* so interactive rows can pull the bar's right edge back by a fixed pixel amount
-* on hover — instead of a percentage scale — keeping the bar↔value gap constant.
+* on hover, scaled by the bar's share so the pull-back is proportional to its
+* length: the full-length (100%) bar — the one that reaches the value — pulls
+* back the whole inset to keep its gap with the value, while shorter bars pull
+* back proportionally less, down to ~0 for a very short bar.
 *
 * @param share - The bar's share of the row width, as a percentage.
 * @return A CSS width value.
 */
-const getBarWidth = (share) => `calc(${share}% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px))`;
+const getBarWidth = (share) => `calc(${share}% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px) * ${share} / 100)`;
 const BarLabel = ({ label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: typeof label === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text$2, {
 	className: leaderboard_chart_module_default.label,
 	children: label
@@ -8357,6 +8369,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 							type: "button",
 							className: leaderboard_chart_module_default.interactiveRow,
 							onClick: entry.onClick,
+							"aria-label": entry.ariaLabel,
 							children: [rowCells, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_icons.Icon, {
 								className: leaderboard_chart_module_default.chevron,
 								icon: _wordpress_icons.chevronRight,