@automattic/charts 0.59.0 → 1.0.1

package/CHANGELOG.md

@@ -5,6 +5,22 @@ 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.0.1] - 2026-03-30
+### Security
+- Sanitize GeoChart HTML tooltip content with DOMPurify. [#47789]
+
+### Changed
+- Bump minimum Node version to 20.11. [#47770]
+- Support all CSS color formats (HSL, HSLA, RGB, RGBA, named colors) in theme colors. [#46349]
+- Update package dependencies. [#47799]
+
+### Fixed
+- ChartLayout: Display SVG as block to avoid unexpected resizing in certain browser environments. [#47802]
+
+## [1.0.0] - 2026-03-24
+### Changed
+- Internal updates. [#43811]
+
 ## [0.59.0] - 2026-03-23
 ### Added
 - ChartLayout: Add component for shared chart and legend layout. [#47554]
@@ -760,6 +776,8 @@ 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.0.1]: https://github.com/Automattic/charts/compare/v1.0.0...v1.0.1
+[1.0.0]: https://github.com/Automattic/charts/compare/v0.59.0...v1.0.0
 [0.59.0]: https://github.com/Automattic/charts/compare/v0.58.0...v0.59.0
 [0.58.0]: https://github.com/Automattic/charts/compare/v0.57.0...v0.58.0
 [0.57.0]: https://github.com/Automattic/charts/compare/v0.56.7...v0.57.0

package/dist/index.cjs

@@ -993,7 +993,7 @@ var parseRgbString = (rgbString) => {
   }
   return parsed.formatHex();
 };
-var normalizeColorToHex = (color, element, resolveCss) => {
+var normalizeColorToHex = (color, element, resolveCss, _depth = 0) => {
   if (!color || typeof color !== "string") {
     return "";
   }
@@ -1010,22 +1010,23 @@ var normalizeColorToHex = (color, element, resolveCss) => {
   if (trimmed.startsWith("--") || trimmed.startsWith("var(")) {
     if (resolveCss) {
       const resolved = resolveCss(color, element);
-      if (resolved) {
-        return normalizeColorToHex(resolved, element, resolveCss);
+      if (resolved && resolved !== color && _depth < 10) {
+        return normalizeColorToHex(resolved, element, resolveCss, _depth + 1);
       }
     }
     return color;
   }
-  if (trimmed.startsWith("hsl(") || trimmed.startsWith("rgb(")) {
-    if (trimmed.startsWith("rgba(")) {
-      return color;
-    }
-    const parsed = _d3color.color.call(void 0, trimmed);
-    if (parsed) {
-      return parsed.formatHex();
+  if (trimmed.startsWith("hsl(") || trimmed.startsWith("hsla(") || trimmed.startsWith("rgb(") || trimmed.startsWith("rgba(")) {
+    const parsed2 = _d3color.color.call(void 0, trimmed);
+    if (parsed2) {
+      return parsed2.formatHex();
     }
     return color;
   }
+  const parsed = _d3color.color.call(void 0, trimmed);
+  if (parsed) {
+    return parsed.formatHex();
+  }
   return color;
 };
 var lightenHexColor = (hex, blend) => {
@@ -1274,17 +1275,10 @@ var GlobalChartsProvider = ({
     if (Array.isArray(colors)) {
       for (const color of colors) {
         if (color && typeof color === "string") {
-          let colorValue = color;
-          if (color.startsWith("--") || color.startsWith("var(")) {
-            const resolved = resolveCssVariable(color, wrapperRef.current);
-            if (resolved === null || resolved === "") {
-              continue;
-            }
-            colorValue = resolved;
-          }
-          if (colorValue.startsWith("#")) {
-            resolvedColors.push(colorValue);
-            const hslColor = _d3color.hsl.call(void 0, colorValue);
+          const normalizedColor = normalizeColorToHex(color, wrapperRef.current, resolveCssVariable);
+          if (normalizedColor.startsWith("#")) {
+            resolvedColors.push(normalizedColor);
+            const hslColor = _d3color.hsl.call(void 0, normalizedColor);
             if (!isNaN(hslColor.h)) {
               const hslTuple = [hslColor.h, hslColor.s * 100, hslColor.l * 100];
               hues.push(hslTuple[0]);
@@ -2925,7 +2919,7 @@ function paramCase(input, options) {
   return dotCase(input, _tslib.__assign.call(void 0, { delimiter: "-" }, options));
 }
 
-// ../../../node_modules/.pnpm/@wordpress+ui@0.9.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1_stylelint@16.26.1/node_modules/@wordpress/ui/build-module/stack/stack.mjs
+// ../../../node_modules/.pnpm/@wordpress+ui@0.9.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1_stylelint@17.5.0/node_modules/@wordpress/ui/build-module/stack/stack.mjs
 if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='71d20935c2']")) {
   const style = document.createElement("style");
   style.setAttribute("data-wp-hash", "71d20935c2");
@@ -4296,6 +4290,43 @@ ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
 
 var _reactgooglecharts = require('react-google-charts');
 
+// src/utils/sanitize-html.ts
+var _dompurify = require('dompurify'); var _dompurify2 = _interopRequireDefault(_dompurify);
+_dompurify2.default.addHook("afterSanitizeAttributes", (node2) => {
+  if (node2.tagName === "A" && node2.getAttribute("target") === "_blank") {
+    node2.setAttribute("rel", "noopener noreferrer");
+  }
+});
+function sanitizeHtml(html) {
+  return _dompurify2.default.sanitize(html, {
+    ALLOWED_TAGS: [
+      "a",
+      "b",
+      "br",
+      "div",
+      "em",
+      "i",
+      "li",
+      "ol",
+      "p",
+      "small",
+      "span",
+      "strong",
+      "sub",
+      "sup",
+      "table",
+      "tbody",
+      "td",
+      "th",
+      "thead",
+      "tr",
+      "u",
+      "ul"
+    ],
+    ALLOWED_ATTR: ["class", "href", "target", "rel"]
+  });
+}
+
 // src/charts/geo-chart/geo-chart.module.scss
 var geo_chart_module_default = {
   "container": "a8ccharts-JvcqOz"
@@ -4337,7 +4368,40 @@ var GeoChartInternal = ({
   const lightColorHex = lightenHexColor(fullColorHex, 0.8);
   const backgroundColorHex = normalizeColorToHex(backgroundColor, null, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
   const defaultFillColorHex = normalizeColorToHex(featureFillColor, null, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
-  const hasHtmlTooltips = _react.useMemo.call(void 0, () => data.length > 0 && data[0].some((col) => typeof col === "object" && col !== null && "role" in col && col.role === "tooltip" && "p" in col && typeof col.p === "object" && col.p !== null && "html" in col.p && col.p.html === true), [data]);
+  const sanitizedData = _react.useMemo.call(void 0, () => {
+    if (data.length === 0) {
+      return {
+        data,
+        hasHtmlTooltips: false
+      };
+    }
+    const htmlTooltipIndices = [];
+    for (let i2 = 0; i2 < data[0].length; i2++) {
+      const col = data[0][i2];
+      if (typeof col === "object" && col !== null && "role" in col && col.role === "tooltip" && "p" in col && typeof col.p === "object" && col.p !== null && "html" in col.p && col.p.html === true) {
+        htmlTooltipIndices.push(i2);
+      }
+    }
+    if (htmlTooltipIndices.length === 0) {
+      return {
+        data,
+        hasHtmlTooltips: false
+      };
+    }
+    const sanitizedRows = data.slice(1).map((row) => {
+      const newRow = [...row];
+      for (const colIndex of htmlTooltipIndices) {
+        if (typeof newRow[colIndex] === "string") {
+          newRow[colIndex] = sanitizeHtml(newRow[colIndex]);
+        }
+      }
+      return newRow;
+    });
+    return {
+      data: [data[0], ...sanitizedRows],
+      hasHtmlTooltips: true
+    };
+  }, [data]);
   const options = _react.useMemo.call(void 0, () => ({
     ...region !== "world" && {
       region
@@ -4353,11 +4417,11 @@ var GeoChartInternal = ({
     defaultColor: defaultFillColorHex,
     tooltip: {
       trigger: "focus",
-      isHtml: hasHtmlTooltips
+      isHtml: sanitizedData.hasHtmlTooltips
     },
     legend: "none",
     keepAspectRatio: true
-  }), [region, resolution, lightColorHex, fullColorHex, backgroundColorHex, defaultFillColorHex, hasHtmlTooltips]);
+  }), [region, resolution, lightColorHex, fullColorHex, backgroundColorHex, defaultFillColorHex, sanitizedData.hasHtmlTooltips]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
     className: _clsx2.default.call(void 0, "geo-chart", geo_chart_module_default.container, className),
     style: {
@@ -4369,7 +4433,7 @@ var GeoChartInternal = ({
       chartType: "GeoChart",
       width,
       height,
-      data,
+      data: sanitizedData.data,
       options,
       loader: loadingPlaceholder
     })