@czi-sds/data-viz 2.5.1 → 3.0.0

package/dist/shared/StackedBarChart.cjs.js

@@ -21,12 +21,12 @@ const TitleContainer = (0, _emotion_styled.default)("div")`
 	const spaces = (0, _czi_sds_components.getSpaces)(props);
 	return `
       gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
-      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.l}px;
+      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
     `;
 }}
 `;
 const ChartTitle = (0, _emotion_styled.default)("div")`
-  ${_czi_sds_components.fontHeaderS}
+  ${_czi_sds_components.fontBodyMediumXs}
 
   ${(props) => {
 	var _semanticColors$base;
@@ -36,36 +36,19 @@ const ChartTitle = (0, _emotion_styled.default)("div")`
     `;
 }}
 `;
-const StyledBadge = (0, _emotion_styled.default)("div")`
-  ${_czi_sds_components.fontTabularSemiboldXxxxs}
-
-  ${(props) => {
-	var _semanticColors$base2, _semanticColors$base3;
-	const spaces = (0, _czi_sds_components.getSpaces)(props);
-	const corners = (0, _czi_sds_components.getCorners)(props);
-	const semanticColors = (0, _czi_sds_components.getSemanticColors)(props);
-	return `
-      padding: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
-      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
-      background-color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundTertiary};
-      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textSecondary};
-    `;
-}}
-`;
 const BarContainer = (0, _emotion_styled.default)("div")`
   ${(props) => {
-	var _semanticColors$base4;
+	var _semanticColors$base2;
 	const { width, barHeight, isEmpty } = props;
 	const corners = (0, _czi_sds_components.getCorners)(props);
 	const semanticColors = (0, _czi_sds_components.getSemanticColors)(props);
 	const finalWidth = typeof width === "number" ? `${width}px` : width;
 	return `
       display: flex;
-      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.s}px;
+      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
       width: ${finalWidth};
       height: ${barHeight}px;
-      background-color: ${isEmpty ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.backgroundTertiary : "transparent"};
-      overflow: hidden;
+      background-color: ${isEmpty ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundTertiary : "transparent"};
     `;
 }}
 `;
@@ -73,14 +56,17 @@ const BarSegment = (0, _emotion_styled.default)("div")`
   ${(props) => {
 	const { color, height, percentage, opacity, disabled, isLast } = props;
 	const spaces = (0, _czi_sds_components.getSpaces)(props);
+	const corners = (0, _czi_sds_components.getCorners)(props);
 	const gap = (spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) || 0;
+	const marginRight = percentage > 0 && !isLast ? `${gap}px` : 0;
 	return `
       background-color: ${color};
+      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
       height: ${height}px;
       flex-grow: ${percentage};
       flex-basis: 0;
       flex-shrink: 1;
-      margin-right: ${percentage > 0 && !isLast ? `${gap}px` : 0};
+      margin-right: ${marginRight};
       opacity: ${opacity};
       transition: opacity 0.2s ease-in-out, flex-grow 0.25s ease-in-out, margin-right 0.25s ease-out;
       cursor: ${disabled ? "default" : "pointer"};
@@ -94,7 +80,7 @@ const StyledStackedBarChartWrapper = (0, _emotion_styled.default)("div")`
 	return `
       display: flex;
       flex-direction: column;
-      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
     `;
 }}
 `;
@@ -124,17 +110,18 @@ const _excluded = [
 	"remainingLabel",
 	"remainingUnit",
 	"unit",
-	"colorGeneratorOptions"
+	"colorGeneratorOptions",
+	"maxItems"
 ];
 const calculateBadgeText = (totalItems, selectedCount) => {
 	if (selectedCount === 0 || selectedCount === totalItems) return `${totalItems}`;
 	return `${selectedCount} of ${totalItems}`;
 };
 const calculateLegendValue = (item, showLegendValues, legendValueFormat, globalUnit) => {
+	var _ref, _item$unit;
 	if (!showLegendValues) return void 0;
 	if (legendValueFormat === "percentage") return `${Math.round(item.percentage)}%`;
-	const effectiveUnit = item.unit || globalUnit;
-	return effectiveUnit ? `${item.value} ${effectiveUnit}` : `${item.value}`;
+	return `${item.value.toLocaleString()} ${(_ref = (_item$unit = item.unit) !== null && _item$unit !== void 0 ? _item$unit : globalUnit) !== null && _ref !== void 0 ? _ref : ""}`.trim();
 };
 const getSegmentOpacity = (index, hoveredIndex, selectedIndicesSet, selectionBehavior) => {
 	const hasSelection = selectedIndicesSet.size > 0;
@@ -181,7 +168,7 @@ const applySelectionStyling = (items, selectedIndicesSet, selectionBehavior, mod
 	return mode === "cumulative" ? applyCumulativeHideStyling(items, selectedIndicesSet, selectedTotal, hasRemaining, effectiveMaxAmount) : applyProportionalHideStyling(items, selectedIndicesSet, selectedTotal);
 };
 const buildLegendItems = (dataWithPercentages, options) => {
-	const { showLegendValues, legendValueFormat, unit, hasRemaining, showLegend, remainingValue, remainingPercentage, remainingLabel, remainingUnit, theme } = options;
+	const { showLegendValues, legendValueFormat, unit, hasRemaining, showLegend, remainingValue, remainingPercentage, remainingLabel, remainingUnit, remainingOpensMenu, theme } = options;
 	const legendItems = dataWithPercentages.map((item) => ({
 		name: item.name,
 		value: calculateLegendValue(item, showLegendValues, legendValueFormat, unit),
@@ -195,13 +182,13 @@ const buildLegendItems = (dataWithPercentages, options) => {
 		else if (legendValueFormat === "percentage") remainingValueDisplay = `${Math.round(remainingPercentage)}%`;
 		else {
 			const effectiveRemainingUnit = remainingUnit || unit || "";
-			remainingValueDisplay = effectiveRemainingUnit ? `${remainingValue} ${effectiveRemainingUnit}` : `${remainingValue}`;
+			remainingValueDisplay = effectiveRemainingUnit ? `${remainingValue.toLocaleString()} ${effectiveRemainingUnit}` : `${remainingValue.toLocaleString()}`;
 		}
 		legendItems.push({
 			name: remainingLabel,
 			value: remainingValueDisplay,
 			color: theme === null || theme === void 0 || (_theme$palette = theme.palette) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.sds) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.base) === null || _theme$palette === void 0 ? void 0 : _theme$palette.backgroundTertiary,
-			disabled: true
+			disabled: !remainingOpensMenu
 		});
 	}
 	return legendItems;
@@ -237,10 +224,13 @@ const renderBarSegment = (item, options) => {
 	}, item.key) : (0, react.cloneElement)(barSegment, { key: item.key });
 };
 const StackedBarChart = (props) => {
-	var _theme$palette4;
-	const { title, badge, hideBadge = false, data, width = "100%", barHeight: barHeightProp = 16, showLegend = true, showLegendValues = true, legendValueFormat = "percentage", selectedIndices = [], onSelectionChange, onSegmentMouseEnter, onSegmentMouseLeave, onLegendItemMouseEnter, onLegendItemMouseLeave, onSegmentClick, onLegendItemClick, selectionBehavior = "dim", mode = "proportional", maxAmount, remainingLabel = "Remaining", remainingUnit, unit, colorGeneratorOptions } = props, rest = require_objectSpread2._objectWithoutProperties(props, _excluded);
+	var _theme$palette5;
+	const { title, badge, hideBadge = false, data, width = "100%", barHeight: barHeightProp = 8, showLegend = true, showLegendValues = true, legendValueFormat = "percentage", selectedIndices = [], onSelectionChange, onSegmentMouseEnter, onSegmentMouseLeave, onLegendItemMouseEnter, onLegendItemMouseLeave, onSegmentClick, onLegendItemClick, selectionBehavior = "dim", mode = "proportional", maxAmount, remainingLabel = "Remaining", remainingUnit, unit, colorGeneratorOptions, maxItems } = props, rest = require_objectSpread2._objectWithoutProperties(props, _excluded);
 	const barHeight = Math.max(1, barHeightProp);
 	const theme = (0, _mui_material.useTheme)();
+	const visibleCount = mode === "cumulative" && maxItems !== void 0 && maxItems < data.length ? Math.max(0, maxItems) : data.length;
+	const chartData = (0, react.useMemo)(() => data.slice(0, visibleCount), [data, visibleCount]);
+	const hiddenItems = (0, react.useMemo)(() => data.slice(visibleCount), [data, visibleCount]);
 	const [hoveredIndex, setHoveredIndex] = (0, react.useState)(null);
 	const [animatedItems, setAnimatedItems] = (0, react.useState)([]);
 	const [autoColorMap, setAutoColorMap] = (0, react.useState)(/* @__PURE__ */ new Map());
@@ -263,8 +253,8 @@ const StackedBarChart = (props) => {
 		theme
 	]);
 	(0, react.useEffect)(() => {
-		const autoItems = data.filter((item) => !item.color);
-		const currentDataKeys = new Set(data.map((item) => item.name));
+		const autoItems = chartData.filter((item) => !item.color);
+		const currentDataKeys = new Set(chartData.map((item) => item.name));
 		const previousDataKeys = previousDataKeysRef.current;
 		const previousColorOptions = previousColorOptionsRef.current;
 		const colorOptionsChanged = !previousColorOptions || previousColorOptions.isDarkMode !== isDarkMode || previousColorOptions.options !== colorGeneratorOptions;
@@ -290,7 +280,7 @@ const StackedBarChart = (props) => {
 			if (hasChanges) setAutoColorMap(updatedMap);
 		}
 	}, [
-		data,
+		chartData,
 		colorGeneratorOptions,
 		isDarkMode,
 		theme,
@@ -299,9 +289,10 @@ const StackedBarChart = (props) => {
 	const displayBadge = badge !== null && badge !== void 0 ? badge : calculateBadgeText(data.length, selectedIndices.length);
 	const { effectiveMaxAmount, hasRemaining, remainingValue, remainingPercentage } = (0, react.useMemo)(() => {
 		const total = data.reduce((sum, item) => sum + item.value, 0);
+		const visibleTotal = chartData.reduce((sum, item) => sum + item.value, 0);
 		const maxAmountValue = mode === "cumulative" && maxAmount ? maxAmount : total;
-		const hasRemainingSegment = mode === "cumulative" && total < maxAmountValue;
-		const remaining = hasRemainingSegment ? maxAmountValue - total : 0;
+		const hasRemainingSegment = mode === "cumulative" && visibleTotal < maxAmountValue;
+		const remaining = hasRemainingSegment ? maxAmountValue - visibleTotal : 0;
 		return {
 			effectiveMaxAmount: maxAmountValue,
 			hasRemaining: hasRemainingSegment,
@@ -310,11 +301,20 @@ const StackedBarChart = (props) => {
 		};
 	}, [
 		data,
+		chartData,
 		mode,
 		maxAmount
 	]);
+	const hasOverflow = hasRemaining && hiddenItems.length > 0;
+	const overflowIndex = data.length;
+	const hiddenColors = (0, react.useMemo)(() => hasOverflow ? (0, _czi_sds_components.generateDiscreteColors)(hiddenItems.length, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, colorGeneratorOptions || {}), {}, { isDarkMode })) : [], [
+		hasOverflow,
+		hiddenItems.length,
+		colorGeneratorOptions,
+		isDarkMode
+	]);
 	const dataWithPercentages = (0, react.useMemo)(() => {
-		return data.map((item, index) => {
+		return chartData.map((item, index) => {
 			var _theme$palette3;
 			const resolvedColor = item.color || autoColorMap.get(item.name) || (theme === null || theme === void 0 || (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.sds) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.base) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.ornamentSecondary);
 			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, {
@@ -327,7 +327,7 @@ const StackedBarChart = (props) => {
 			});
 		});
 	}, [
-		data,
+		chartData,
 		effectiveMaxAmount,
 		autoColorMap,
 		theme
@@ -368,10 +368,16 @@ const StackedBarChart = (props) => {
 			timeoutIds.forEach((id) => window.clearTimeout(id));
 		};
 	}, [dataWithPercentages, remainingPercentage]);
-	const selectedIndicesSet = (0, react.useMemo)(() => new Set(selectedIndices), [selectedIndices]);
-	const { styledItems, updatedRemainingPercentage, updatedRemainingValue } = (0, react.useMemo)(() => applySelectionStyling(animatedItems, selectedIndicesSet, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, animatedRemainingPercentage, remainingValue), [
+	const toChartIndex = (0, react.useCallback)((index) => hasOverflow && index >= visibleCount ? overflowIndex : index, [
+		hasOverflow,
+		visibleCount,
+		overflowIndex
+	]);
+	const hoveredChartIndex = hoveredIndex === null ? null : toChartIndex(hoveredIndex);
+	const selectedChartIndices = (0, react.useMemo)(() => new Set(selectedIndices.map(toChartIndex)), [selectedIndices, toChartIndex]);
+	const { styledItems, updatedRemainingPercentage, updatedRemainingValue } = (0, react.useMemo)(() => applySelectionStyling(animatedItems, selectedChartIndices, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, animatedRemainingPercentage, remainingValue), [
 		animatedItems,
-		selectedIndicesSet,
+		selectedChartIndices,
 		selectionBehavior,
 		mode,
 		hasRemaining,
@@ -392,6 +398,7 @@ const StackedBarChart = (props) => {
 		remainingPercentage: displayRemainingPercentage,
 		remainingLabel,
 		remainingUnit,
+		remainingOpensMenu: hasOverflow,
 		theme
 	}), [
 		dataWithPercentages,
@@ -404,19 +411,51 @@ const StackedBarChart = (props) => {
 		displayRemainingPercentage,
 		remainingLabel,
 		remainingUnit,
+		hasOverflow,
 		theme
 	]);
-	const handleLegendItemHover = (0, react.useCallback)((_item, index) => {
+	const toLegendIndex = (0, react.useCallback)((index) => {
+		if (!hasOverflow || index < visibleCount) return index;
+		return index === overflowIndex ? visibleCount : index + 1;
+	}, [
+		hasOverflow,
+		visibleCount,
+		overflowIndex
+	]);
+	const fromLegendIndex = (0, react.useCallback)((index) => {
+		if (!hasOverflow || index < visibleCount) return index;
+		return index === visibleCount ? overflowIndex : index - 1;
+	}, [
+		hasOverflow,
+		visibleCount,
+		overflowIndex
+	]);
+	const handleLegendItemHover = (0, react.useCallback)((_item, legendIndex) => {
+		const index = fromLegendIndex(legendIndex);
 		setHoveredIndex(index);
 		if (onLegendItemMouseEnter && data[index]) onLegendItemMouseEnter(data[index], index);
-	}, [onLegendItemMouseEnter, data]);
-	const handleLegendItemLeave = (0, react.useCallback)((_item, index) => {
+	}, [
+		onLegendItemMouseEnter,
+		data,
+		fromLegendIndex
+	]);
+	const handleLegendItemLeave = (0, react.useCallback)((_item, legendIndex) => {
+		const index = fromLegendIndex(legendIndex);
 		setHoveredIndex(null);
 		if (onLegendItemMouseLeave && data[index]) onLegendItemMouseLeave(data[index], index);
-	}, [onLegendItemMouseLeave, data]);
-	const handleLegendItemClickInternal = (0, react.useCallback)((_item, index) => {
+	}, [
+		onLegendItemMouseLeave,
+		data,
+		fromLegendIndex
+	]);
+	const handleLegendItemClickInternal = (0, react.useCallback)((_item, legendIndex) => {
+		const index = fromLegendIndex(legendIndex);
 		if (onLegendItemClick && data[index]) onLegendItemClick(data[index], index);
-	}, [onLegendItemClick, data]);
+	}, [
+		onLegendItemClick,
+		data,
+		fromLegendIndex
+	]);
 	const handleSelectionChange = (0, react.useCallback)((newSelectedIndices) => {
 		if (!onSelectionChange) return;
 		onSelectionChange(newSelectedIndices, data.filter((item, itemIndex) => newSelectedIndices.includes(itemIndex)));
@@ -424,15 +463,29 @@ const StackedBarChart = (props) => {
 	const handleSegmentClick = (0, react.useCallback)((index) => {
 		if (onSegmentClick && data[index]) onSegmentClick(data[index], index);
 		if (!onSelectionChange) return;
-		handleSelectionChange(selectedIndicesSet.has(index) ? selectedIndices.filter((i) => i !== index) : [...selectedIndices, index]);
+		handleSelectionChange(selectedChartIndices.has(index) ? selectedIndices.filter((i) => i !== index) : [...selectedIndices, index]);
 	}, [
 		onSelectionChange,
 		onSegmentClick,
 		data,
 		selectedIndices,
-		selectedIndicesSet,
+		selectedChartIndices,
 		handleSelectionChange
 	]);
+	const remainingMenuItems = (0, react.useMemo)(() => hasOverflow ? hiddenItems.map((item, index) => {
+		var _theme$palette4;
+		return {
+			name: item.name,
+			value: item.value,
+			color: item.color || hiddenColors[index] || (theme === null || theme === void 0 || (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.sds) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.base) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.ornamentSecondary),
+			disabled: item.disabled
+		};
+	}) : [], [
+		hasOverflow,
+		hiddenItems,
+		hiddenColors,
+		theme
+	]);
 	const lastVisibleIndex = (0, react.useMemo)(() => {
 		for (let i = styledItems.length - 1; i >= 0; i--) if (styledItems[i].percentage > 0) return i;
 		return -1;
@@ -444,8 +497,8 @@ const StackedBarChart = (props) => {
 		children: [styledItems.map((item, index) => {
 			return renderBarSegment(item, {
 				barHeight,
-				hoveredIndex,
-				selectedIndicesSet,
+				hoveredIndex: hoveredChartIndex,
+				selectedIndicesSet: selectedChartIndices,
 				selectionBehavior,
 				isLast: index === lastVisibleIndex && !hasRemaining,
 				onMouseEnter: () => {
@@ -461,25 +514,31 @@ const StackedBarChart = (props) => {
 				onClick: () => !item.isExiting && handleSegmentClick(item.originalIndex)
 			});
 		}), previousProcessedRef.current.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarSegment, {
-			color: theme === null || theme === void 0 || (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.sds) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.base) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.backgroundTertiary,
+			color: theme === null || theme === void 0 || (_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 || (_theme$palette5 = _theme$palette5.sds) === null || _theme$palette5 === void 0 || (_theme$palette5 = _theme$palette5.base) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.backgroundTertiary,
 			percentage: displayRemainingPercentage,
 			height: barHeight,
 			isLast: true,
-			opacity: 1,
+			opacity: hasOverflow ? getSegmentOpacity(overflowIndex, hoveredChartIndex, selectedChartIndices, selectionBehavior) : 1,
 			disabled: true
 		}, "remaining")]
 	}), showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Legend, {
 		items: legendItems,
+		lastItemMenuItems: remainingMenuItems,
 		showValues: showLegendValues,
 		onItemMouseEnter: handleLegendItemHover,
 		onItemMouseLeave: handleLegendItemLeave,
 		onItemClick: onLegendItemClick ? handleLegendItemClickInternal : void 0,
-		selectedIndices,
-		onSelectionChange: onSelectionChange ? handleSelectionChange : void 0,
-		hoveredIndex
+		selectedIndices: selectedIndices.map(toLegendIndex),
+		onSelectionChange: onSelectionChange ? (indices) => handleSelectionChange(indices.map(fromLegendIndex)) : void 0,
+		hoveredIndex: hoveredIndex === null ? null : toLegendIndex(hoveredIndex)
 	})] });
 	if (!title) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartWrapper, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ width }, rest), {}, { children: chartContent }));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartWrapper, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ width }, rest), {}, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TitleContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartTitle, { children: title }), !hideBadge && displayBadge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBadge, { children: displayBadge })] }), chartContent] }));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartWrapper, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ width }, rest), {}, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TitleContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartTitle, { children: title }), !hideBadge && displayBadge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Tag, {
+		label: displayBadge,
+		sdsStyle: "outline",
+		color: "neutral",
+		size: "small"
+	})] }), chartContent] }));
 };
 //#endregion
 Object.defineProperty(exports, "StackedBarChart", {

package/dist/shared/StackedBarChart.esm.js

@@ -3,7 +3,7 @@ import { n as _objectWithoutProperties, t as _objectSpread2 } from "./objectSpre
 import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Legend, Tooltip, TooltipTable, fontHeaderS, fontTabularSemiboldXxxxs, generateDiscreteColors, getCorners, getMode, getSemanticColors, getSpaces } from "@czi-sds/components";
+import { Legend, Tag, Tooltip, TooltipTable, fontBodyMediumXs, generateDiscreteColors, getCorners, getMode, getSemanticColors, getSpaces } from "@czi-sds/components";
 import { useTheme } from "@mui/material";
 //#region src/core/StackedBarChart/style.ts
 const ChartWrapper = styled("div")`
@@ -19,12 +19,12 @@ const TitleContainer = styled("div")`
 	const spaces = getSpaces(props);
 	return `
       gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
-      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.l}px;
+      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
     `;
 }}
 `;
 const ChartTitle = styled("div")`
-  ${fontHeaderS}
+  ${fontBodyMediumXs}
 
   ${(props) => {
 	var _semanticColors$base;
@@ -34,36 +34,19 @@ const ChartTitle = styled("div")`
     `;
 }}
 `;
-const StyledBadge = styled("div")`
-  ${fontTabularSemiboldXxxxs}
-
-  ${(props) => {
-	var _semanticColors$base2, _semanticColors$base3;
-	const spaces = getSpaces(props);
-	const corners = getCorners(props);
-	const semanticColors = getSemanticColors(props);
-	return `
-      padding: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
-      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
-      background-color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundTertiary};
-      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textSecondary};
-    `;
-}}
-`;
 const BarContainer = styled("div")`
   ${(props) => {
-	var _semanticColors$base4;
+	var _semanticColors$base2;
 	const { width, barHeight, isEmpty } = props;
 	const corners = getCorners(props);
 	const semanticColors = getSemanticColors(props);
 	const finalWidth = typeof width === "number" ? `${width}px` : width;
 	return `
       display: flex;
-      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.s}px;
+      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
       width: ${finalWidth};
       height: ${barHeight}px;
-      background-color: ${isEmpty ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.backgroundTertiary : "transparent"};
-      overflow: hidden;
+      background-color: ${isEmpty ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundTertiary : "transparent"};
     `;
 }}
 `;
@@ -71,14 +54,17 @@ const BarSegment = styled("div")`
   ${(props) => {
 	const { color, height, percentage, opacity, disabled, isLast } = props;
 	const spaces = getSpaces(props);
+	const corners = getCorners(props);
 	const gap = (spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) || 0;
+	const marginRight = percentage > 0 && !isLast ? `${gap}px` : 0;
 	return `
       background-color: ${color};
+      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
       height: ${height}px;
       flex-grow: ${percentage};
       flex-basis: 0;
       flex-shrink: 1;
-      margin-right: ${percentage > 0 && !isLast ? `${gap}px` : 0};
+      margin-right: ${marginRight};
       opacity: ${opacity};
       transition: opacity 0.2s ease-in-out, flex-grow 0.25s ease-in-out, margin-right 0.25s ease-out;
       cursor: ${disabled ? "default" : "pointer"};
@@ -92,7 +78,7 @@ const StyledStackedBarChartWrapper = styled("div")`
 	return `
       display: flex;
       flex-direction: column;
-      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
     `;
 }}
 `;
@@ -122,17 +108,18 @@ const _excluded = [
 	"remainingLabel",
 	"remainingUnit",
 	"unit",
-	"colorGeneratorOptions"
+	"colorGeneratorOptions",
+	"maxItems"
 ];
 const calculateBadgeText = (totalItems, selectedCount) => {
 	if (selectedCount === 0 || selectedCount === totalItems) return `${totalItems}`;
 	return `${selectedCount} of ${totalItems}`;
 };
 const calculateLegendValue = (item, showLegendValues, legendValueFormat, globalUnit) => {
+	var _ref, _item$unit;
 	if (!showLegendValues) return void 0;
 	if (legendValueFormat === "percentage") return `${Math.round(item.percentage)}%`;
-	const effectiveUnit = item.unit || globalUnit;
-	return effectiveUnit ? `${item.value} ${effectiveUnit}` : `${item.value}`;
+	return `${item.value.toLocaleString()} ${(_ref = (_item$unit = item.unit) !== null && _item$unit !== void 0 ? _item$unit : globalUnit) !== null && _ref !== void 0 ? _ref : ""}`.trim();
 };
 const getSegmentOpacity = (index, hoveredIndex, selectedIndicesSet, selectionBehavior) => {
 	const hasSelection = selectedIndicesSet.size > 0;
@@ -179,7 +166,7 @@ const applySelectionStyling = (items, selectedIndicesSet, selectionBehavior, mod
 	return mode === "cumulative" ? applyCumulativeHideStyling(items, selectedIndicesSet, selectedTotal, hasRemaining, effectiveMaxAmount) : applyProportionalHideStyling(items, selectedIndicesSet, selectedTotal);
 };
 const buildLegendItems = (dataWithPercentages, options) => {
-	const { showLegendValues, legendValueFormat, unit, hasRemaining, showLegend, remainingValue, remainingPercentage, remainingLabel, remainingUnit, theme } = options;
+	const { showLegendValues, legendValueFormat, unit, hasRemaining, showLegend, remainingValue, remainingPercentage, remainingLabel, remainingUnit, remainingOpensMenu, theme } = options;
 	const legendItems = dataWithPercentages.map((item) => ({
 		name: item.name,
 		value: calculateLegendValue(item, showLegendValues, legendValueFormat, unit),
@@ -193,13 +180,13 @@ const buildLegendItems = (dataWithPercentages, options) => {
 		else if (legendValueFormat === "percentage") remainingValueDisplay = `${Math.round(remainingPercentage)}%`;
 		else {
 			const effectiveRemainingUnit = remainingUnit || unit || "";
-			remainingValueDisplay = effectiveRemainingUnit ? `${remainingValue} ${effectiveRemainingUnit}` : `${remainingValue}`;
+			remainingValueDisplay = effectiveRemainingUnit ? `${remainingValue.toLocaleString()} ${effectiveRemainingUnit}` : `${remainingValue.toLocaleString()}`;
 		}
 		legendItems.push({
 			name: remainingLabel,
 			value: remainingValueDisplay,
 			color: theme === null || theme === void 0 || (_theme$palette = theme.palette) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.sds) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.base) === null || _theme$palette === void 0 ? void 0 : _theme$palette.backgroundTertiary,
-			disabled: true
+			disabled: !remainingOpensMenu
 		});
 	}
 	return legendItems;
@@ -235,10 +222,13 @@ const renderBarSegment = (item, options) => {
 	}, item.key) : cloneElement(barSegment, { key: item.key });
 };
 const StackedBarChart = (props) => {
-	var _theme$palette4;
-	const { title, badge, hideBadge = false, data, width = "100%", barHeight: barHeightProp = 16, showLegend = true, showLegendValues = true, legendValueFormat = "percentage", selectedIndices = [], onSelectionChange, onSegmentMouseEnter, onSegmentMouseLeave, onLegendItemMouseEnter, onLegendItemMouseLeave, onSegmentClick, onLegendItemClick, selectionBehavior = "dim", mode = "proportional", maxAmount, remainingLabel = "Remaining", remainingUnit, unit, colorGeneratorOptions } = props, rest = _objectWithoutProperties(props, _excluded);
+	var _theme$palette5;
+	const { title, badge, hideBadge = false, data, width = "100%", barHeight: barHeightProp = 8, showLegend = true, showLegendValues = true, legendValueFormat = "percentage", selectedIndices = [], onSelectionChange, onSegmentMouseEnter, onSegmentMouseLeave, onLegendItemMouseEnter, onLegendItemMouseLeave, onSegmentClick, onLegendItemClick, selectionBehavior = "dim", mode = "proportional", maxAmount, remainingLabel = "Remaining", remainingUnit, unit, colorGeneratorOptions, maxItems } = props, rest = _objectWithoutProperties(props, _excluded);
 	const barHeight = Math.max(1, barHeightProp);
 	const theme = useTheme();
+	const visibleCount = mode === "cumulative" && maxItems !== void 0 && maxItems < data.length ? Math.max(0, maxItems) : data.length;
+	const chartData = useMemo(() => data.slice(0, visibleCount), [data, visibleCount]);
+	const hiddenItems = useMemo(() => data.slice(visibleCount), [data, visibleCount]);
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const [animatedItems, setAnimatedItems] = useState([]);
 	const [autoColorMap, setAutoColorMap] = useState(/* @__PURE__ */ new Map());
@@ -261,8 +251,8 @@ const StackedBarChart = (props) => {
 		theme
 	]);
 	useEffect(() => {
-		const autoItems = data.filter((item) => !item.color);
-		const currentDataKeys = new Set(data.map((item) => item.name));
+		const autoItems = chartData.filter((item) => !item.color);
+		const currentDataKeys = new Set(chartData.map((item) => item.name));
 		const previousDataKeys = previousDataKeysRef.current;
 		const previousColorOptions = previousColorOptionsRef.current;
 		const colorOptionsChanged = !previousColorOptions || previousColorOptions.isDarkMode !== isDarkMode || previousColorOptions.options !== colorGeneratorOptions;
@@ -288,7 +278,7 @@ const StackedBarChart = (props) => {
 			if (hasChanges) setAutoColorMap(updatedMap);
 		}
 	}, [
-		data,
+		chartData,
 		colorGeneratorOptions,
 		isDarkMode,
 		theme,
@@ -297,9 +287,10 @@ const StackedBarChart = (props) => {
 	const displayBadge = badge !== null && badge !== void 0 ? badge : calculateBadgeText(data.length, selectedIndices.length);
 	const { effectiveMaxAmount, hasRemaining, remainingValue, remainingPercentage } = useMemo(() => {
 		const total = data.reduce((sum, item) => sum + item.value, 0);
+		const visibleTotal = chartData.reduce((sum, item) => sum + item.value, 0);
 		const maxAmountValue = mode === "cumulative" && maxAmount ? maxAmount : total;
-		const hasRemainingSegment = mode === "cumulative" && total < maxAmountValue;
-		const remaining = hasRemainingSegment ? maxAmountValue - total : 0;
+		const hasRemainingSegment = mode === "cumulative" && visibleTotal < maxAmountValue;
+		const remaining = hasRemainingSegment ? maxAmountValue - visibleTotal : 0;
 		return {
 			effectiveMaxAmount: maxAmountValue,
 			hasRemaining: hasRemainingSegment,
@@ -308,11 +299,20 @@ const StackedBarChart = (props) => {
 		};
 	}, [
 		data,
+		chartData,
 		mode,
 		maxAmount
 	]);
+	const hasOverflow = hasRemaining && hiddenItems.length > 0;
+	const overflowIndex = data.length;
+	const hiddenColors = useMemo(() => hasOverflow ? generateDiscreteColors(hiddenItems.length, _objectSpread2(_objectSpread2({}, colorGeneratorOptions || {}), {}, { isDarkMode })) : [], [
+		hasOverflow,
+		hiddenItems.length,
+		colorGeneratorOptions,
+		isDarkMode
+	]);
 	const dataWithPercentages = useMemo(() => {
-		return data.map((item, index) => {
+		return chartData.map((item, index) => {
 			var _theme$palette3;
 			const resolvedColor = item.color || autoColorMap.get(item.name) || (theme === null || theme === void 0 || (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.sds) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.base) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.ornamentSecondary);
 			return _objectSpread2(_objectSpread2({}, item), {}, {
@@ -325,7 +325,7 @@ const StackedBarChart = (props) => {
 			});
 		});
 	}, [
-		data,
+		chartData,
 		effectiveMaxAmount,
 		autoColorMap,
 		theme
@@ -366,10 +366,16 @@ const StackedBarChart = (props) => {
 			timeoutIds.forEach((id) => window.clearTimeout(id));
 		};
 	}, [dataWithPercentages, remainingPercentage]);
-	const selectedIndicesSet = useMemo(() => new Set(selectedIndices), [selectedIndices]);
-	const { styledItems, updatedRemainingPercentage, updatedRemainingValue } = useMemo(() => applySelectionStyling(animatedItems, selectedIndicesSet, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, animatedRemainingPercentage, remainingValue), [
+	const toChartIndex = useCallback((index) => hasOverflow && index >= visibleCount ? overflowIndex : index, [
+		hasOverflow,
+		visibleCount,
+		overflowIndex
+	]);
+	const hoveredChartIndex = hoveredIndex === null ? null : toChartIndex(hoveredIndex);
+	const selectedChartIndices = useMemo(() => new Set(selectedIndices.map(toChartIndex)), [selectedIndices, toChartIndex]);
+	const { styledItems, updatedRemainingPercentage, updatedRemainingValue } = useMemo(() => applySelectionStyling(animatedItems, selectedChartIndices, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, animatedRemainingPercentage, remainingValue), [
 		animatedItems,
-		selectedIndicesSet,
+		selectedChartIndices,
 		selectionBehavior,
 		mode,
 		hasRemaining,
@@ -390,6 +396,7 @@ const StackedBarChart = (props) => {
 		remainingPercentage: displayRemainingPercentage,
 		remainingLabel,
 		remainingUnit,
+		remainingOpensMenu: hasOverflow,
 		theme
 	}), [
 		dataWithPercentages,
@@ -402,19 +409,51 @@ const StackedBarChart = (props) => {
 		displayRemainingPercentage,
 		remainingLabel,
 		remainingUnit,
+		hasOverflow,
 		theme
 	]);
-	const handleLegendItemHover = useCallback((_item, index) => {
+	const toLegendIndex = useCallback((index) => {
+		if (!hasOverflow || index < visibleCount) return index;
+		return index === overflowIndex ? visibleCount : index + 1;
+	}, [
+		hasOverflow,
+		visibleCount,
+		overflowIndex
+	]);
+	const fromLegendIndex = useCallback((index) => {
+		if (!hasOverflow || index < visibleCount) return index;
+		return index === visibleCount ? overflowIndex : index - 1;
+	}, [
+		hasOverflow,
+		visibleCount,
+		overflowIndex
+	]);
+	const handleLegendItemHover = useCallback((_item, legendIndex) => {
+		const index = fromLegendIndex(legendIndex);
 		setHoveredIndex(index);
 		if (onLegendItemMouseEnter && data[index]) onLegendItemMouseEnter(data[index], index);
-	}, [onLegendItemMouseEnter, data]);
-	const handleLegendItemLeave = useCallback((_item, index) => {
+	}, [
+		onLegendItemMouseEnter,
+		data,
+		fromLegendIndex
+	]);
+	const handleLegendItemLeave = useCallback((_item, legendIndex) => {
+		const index = fromLegendIndex(legendIndex);
 		setHoveredIndex(null);
 		if (onLegendItemMouseLeave && data[index]) onLegendItemMouseLeave(data[index], index);
-	}, [onLegendItemMouseLeave, data]);
-	const handleLegendItemClickInternal = useCallback((_item, index) => {
+	}, [
+		onLegendItemMouseLeave,
+		data,
+		fromLegendIndex
+	]);
+	const handleLegendItemClickInternal = useCallback((_item, legendIndex) => {
+		const index = fromLegendIndex(legendIndex);
 		if (onLegendItemClick && data[index]) onLegendItemClick(data[index], index);
-	}, [onLegendItemClick, data]);
+	}, [
+		onLegendItemClick,
+		data,
+		fromLegendIndex
+	]);
 	const handleSelectionChange = useCallback((newSelectedIndices) => {
 		if (!onSelectionChange) return;
 		onSelectionChange(newSelectedIndices, data.filter((item, itemIndex) => newSelectedIndices.includes(itemIndex)));
@@ -422,15 +461,29 @@ const StackedBarChart = (props) => {
 	const handleSegmentClick = useCallback((index) => {
 		if (onSegmentClick && data[index]) onSegmentClick(data[index], index);
 		if (!onSelectionChange) return;
-		handleSelectionChange(selectedIndicesSet.has(index) ? selectedIndices.filter((i) => i !== index) : [...selectedIndices, index]);
+		handleSelectionChange(selectedChartIndices.has(index) ? selectedIndices.filter((i) => i !== index) : [...selectedIndices, index]);
 	}, [
 		onSelectionChange,
 		onSegmentClick,
 		data,
 		selectedIndices,
-		selectedIndicesSet,
+		selectedChartIndices,
 		handleSelectionChange
 	]);
+	const remainingMenuItems = useMemo(() => hasOverflow ? hiddenItems.map((item, index) => {
+		var _theme$palette4;
+		return {
+			name: item.name,
+			value: item.value,
+			color: item.color || hiddenColors[index] || (theme === null || theme === void 0 || (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.sds) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.base) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.ornamentSecondary),
+			disabled: item.disabled
+		};
+	}) : [], [
+		hasOverflow,
+		hiddenItems,
+		hiddenColors,
+		theme
+	]);
 	const lastVisibleIndex = useMemo(() => {
 		for (let i = styledItems.length - 1; i >= 0; i--) if (styledItems[i].percentage > 0) return i;
 		return -1;
@@ -442,8 +495,8 @@ const StackedBarChart = (props) => {
 		children: [styledItems.map((item, index) => {
 			return renderBarSegment(item, {
 				barHeight,
-				hoveredIndex,
-				selectedIndicesSet,
+				hoveredIndex: hoveredChartIndex,
+				selectedIndicesSet: selectedChartIndices,
 				selectionBehavior,
 				isLast: index === lastVisibleIndex && !hasRemaining,
 				onMouseEnter: () => {
@@ -459,25 +512,31 @@ const StackedBarChart = (props) => {
 				onClick: () => !item.isExiting && handleSegmentClick(item.originalIndex)
 			});
 		}), previousProcessedRef.current.length > 0 && /* @__PURE__ */ jsx(BarSegment, {
-			color: theme === null || theme === void 0 || (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.sds) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.base) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.backgroundTertiary,
+			color: theme === null || theme === void 0 || (_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 || (_theme$palette5 = _theme$palette5.sds) === null || _theme$palette5 === void 0 || (_theme$palette5 = _theme$palette5.base) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.backgroundTertiary,
 			percentage: displayRemainingPercentage,
 			height: barHeight,
 			isLast: true,
-			opacity: 1,
+			opacity: hasOverflow ? getSegmentOpacity(overflowIndex, hoveredChartIndex, selectedChartIndices, selectionBehavior) : 1,
 			disabled: true
 		}, "remaining")]
 	}), showLegend && /* @__PURE__ */ jsx(Legend, {
 		items: legendItems,
+		lastItemMenuItems: remainingMenuItems,
 		showValues: showLegendValues,
 		onItemMouseEnter: handleLegendItemHover,
 		onItemMouseLeave: handleLegendItemLeave,
 		onItemClick: onLegendItemClick ? handleLegendItemClickInternal : void 0,
-		selectedIndices,
-		onSelectionChange: onSelectionChange ? handleSelectionChange : void 0,
-		hoveredIndex
+		selectedIndices: selectedIndices.map(toLegendIndex),
+		onSelectionChange: onSelectionChange ? (indices) => handleSelectionChange(indices.map(fromLegendIndex)) : void 0,
+		hoveredIndex: hoveredIndex === null ? null : toLegendIndex(hoveredIndex)
 	})] });
 	if (!title) return /* @__PURE__ */ jsx(ChartWrapper, _objectSpread2(_objectSpread2({ width }, rest), {}, { children: chartContent }));
-	return /* @__PURE__ */ jsxs(ChartWrapper, _objectSpread2(_objectSpread2({ width }, rest), {}, { children: [/* @__PURE__ */ jsxs(TitleContainer, { children: [/* @__PURE__ */ jsx(ChartTitle, { children: title }), !hideBadge && displayBadge && /* @__PURE__ */ jsx(StyledBadge, { children: displayBadge })] }), chartContent] }));
+	return /* @__PURE__ */ jsxs(ChartWrapper, _objectSpread2(_objectSpread2({ width }, rest), {}, { children: [/* @__PURE__ */ jsxs(TitleContainer, { children: [/* @__PURE__ */ jsx(ChartTitle, { children: title }), !hideBadge && displayBadge && /* @__PURE__ */ jsx(Tag, {
+		label: displayBadge,
+		sdsStyle: "outline",
+		color: "neutral",
+		size: "small"
+	})] }), chartContent] }));
 };
 //#endregion
 export { StackedBarChart as t };

package/dist/shared/index4.cjs.d.ts

@@ -64,7 +64,7 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Height of the bar in pixels. Values below 1 are clamped to 1, so the bar
    * cannot disappear.
-   * @default 16
+   * @default 8
    */
   barHeight?: number;
   /**
@@ -139,6 +139,12 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
    * between it and the sum of the data is drawn as the Remaining segment.
    */
   maxAmount?: number;
+  /**
+   * Cumulative mode only. How many items are drawn as their own segment. The
+   * rest fold into the Remaining segment, whose legend item opens a menu
+   * listing them.
+   */
+  maxItems?: number;
   /**
    * Name of the grey gap segment in cumulative mode.
    * @default "Remaining"

package/dist/shared/index4.esm.d.ts

@@ -64,7 +64,7 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Height of the bar in pixels. Values below 1 are clamped to 1, so the bar
    * cannot disappear.
-   * @default 16
+   * @default 8
    */
   barHeight?: number;
   /**
@@ -139,6 +139,12 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
    * between it and the sum of the data is drawn as the Remaining segment.
    */
   maxAmount?: number;
+  /**
+   * Cumulative mode only. How many items are drawn as their own segment. The
+   * rest fold into the Remaining segment, whose legend item opens a menu
+   * listing them.
+   */
+  maxItems?: number;
   /**
    * Name of the grey gap segment in cumulative mode.
    * @default "Remaining"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/data-viz",
-  "version": "2.5.1",
+  "version": "3.0.0",
   "main": "dist/index.cjs.js",
   "types": "dist/index.cjs.d.ts",
   "module": "dist/index.esm.js",
@@ -121,7 +121,7 @@
     "namespace-check": "tsc --p tsconfig-namespace-check.json"
   },
   "peerDependencies": {
-    "@czi-sds/components": "^24.0.0",
+    "@czi-sds/components": "^25.0.0",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^9.0.0",
     "@phosphor-icons/react": "^2.1.10",
@@ -157,5 +157,5 @@
     "echarts": "^6.0.0",
     "lodash": "^4.17.21"
   },
-  "gitHead": "aa0c756f82d9b899e9e7cc66ab2a6d1684ceb1f7"
+  "gitHead": "d38c18e3aca773081cb5c0413dbfefb10da774b8"
 }