@czi-sds/data-viz 0.14.0 → 0.14.2

package/dist/index.esm.js

@@ -1023,7 +1023,7 @@ const SDSLightThemeColors = {
     purple: {
         "100": "#efeafe",
         "200": "#e4dbfc",
-        "300": "#cbbaF8",
+        "300": "#cbbaf8",
         "400": "#b296f2",
         "500": "#8b54e2",
         "600": "#6526b5",
@@ -1194,7 +1194,7 @@ const percentToHex = (percentOpacity) => {
     // Convert percentage to 0-255 range
     const alphaValue = Math.round((clampedPercent / 100) * 255);
     // Convert to hex and pad with leading zero if needed
-    return alphaValue.toString(16).padStart(2, "0").toUpperCase();
+    return alphaValue.toString(16).padStart(2, "0").toLowerCase();
 };
 /**
  * Adds opacity to a hex color by appending the hex opacity value.
@@ -1873,10 +1873,10 @@ const fontBodyS$1 = fontBody("s", "regular");
 const fontBodyXs$2 = fontBody("xs", "regular");
 const fontBodyXxs$1 = fontBody("xxs", "regular");
 const fontBodyXxxs$1 = fontBody("xxxs", "regular");
-const fontBodyXxxxs = fontBody("xxxxs", "regular");
 const fontBodyMediumL = fontBody("l", "medium");
 const fontBodyMediumS = fontBody("s", "medium");
 const fontBodyMediumXs = fontBody("xs", "medium");
+const fontBodyMediumXxxs = fontBody("xxxs", "medium");
 const fontBodySemiboldL = fontBody("l", "semibold");
 const fontBodySemiboldM = fontBody("m", "semibold");
 const fontBodySemiboldS = fontBody("s", "semibold");
@@ -10515,7 +10515,7 @@ const LegendItem = styled$2("div") `
       align-items: center;
       cursor: ${disabled ? "not-allowed" : "pointer"} !important;
       transition: background-color 0.2s ease-in-out;
-      padding: 0 ${spaces?.xxs}px;
+      padding: ${spaces?.xxxs}px ${spaces?.xxs}px;
       border-radius: ${corners?.s}px;
       background-color: ${isSelected ? semanticColors?.base?.backgroundTertiary : "transparent"};
       pointer-events: ${disabled ? "none" : "auto"};
@@ -10532,8 +10532,8 @@ const LegendIcon = styled$2("div") `
     const spaces = getSpaces(props);
     const corners = getCorners(props);
     return `
-      width: 8px;
-      height: 8px;
+      width: ${spaces?.m}px;
+      height: ${spaces?.m}px;
       border-radius: ${corners?.s}px;
       background-color: ${color};
       flex-shrink: 0;
@@ -10544,7 +10544,7 @@ const LegendIcon = styled$2("div") `
 }}
 `;
 const LegendLabel = styled$2("span") `
-  ${fontBodyXxxxs}
+  ${fontBodyMediumXxxs}
   ${(props) => {
     const semanticColors = getSemanticColors(props);
     return `
@@ -10553,13 +10553,13 @@ const LegendLabel = styled$2("span") `
 }}
 `;
 const LegendValue = styled$2("span") `
-  ${fontBodyXxxxs}
+  ${fontBodyMediumXxxs}
   ${(props) => {
     const semanticColors = getSemanticColors(props);
     const spaces = getSpaces(props);
     return `
       color: ${semanticColors?.base?.textSecondary};
-      margin-left: ${spaces?.xxxs}px;
+      margin-left: ${spaces?.xxs}px;
     `;
 }}
 `;
@@ -24751,7 +24751,7 @@ Object.assign(chroma, {
 const generateDiscreteColors = (count, options = {}) => {
     if (count === 0)
         return [];
-    const { isDarkMode = false, start = 249, rotations = 1, gamma = 0.7, lightness = [0.3, 0.7], correctLightness = true, } = options;
+    const { isDarkMode = false, start = 250, rotations = 0.85, gamma = 0.7, lightness = [0.4, 0.7], correctLightness = true, } = options;
     let scale = chroma
         .cubehelix()
         .start(start)
@@ -24787,33 +24787,22 @@ var StyledBadge = styled$2("div")(templateObject_4 || (templateObject_4 = __make
     return "\n      padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundTertiary, ";\n      color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n    ");
 });
 var BarContainer = styled$2("div")(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var width = props.width, barHeight = props.barHeight;
+    var _a;
+    var width = props.width, barHeight = props.barHeight, isEmpty = props.isEmpty;
     var corners = getCorners(props);
+    var semanticColors = getSemanticColors(props);
     var finalWidth = typeof width === "number" ? "".concat(width, "px") : width;
-    return "\n      display: flex;\n      border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.s, "px;\n      width: ").concat(finalWidth, ";\n      height: ").concat(barHeight, "px;\n    ");
+    return "\n      display: flex;\n      border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.s, "px;\n      width: ").concat(finalWidth, ";\n      height: ").concat(barHeight, "px;\n      background-color: ").concat(isEmpty ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundTertiary : "transparent", ";\n      overflow: hidden;\n    ");
 });
 var BarSegment = styled$2("div")(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var isFirst = props.isFirst, isLast = props.isLast, color = props.color, height = props.height, percentage = props.percentage, opacity = props.opacity, disabled = props.disabled;
+    var color = props.color, height = props.height, percentage = props.percentage, opacity = props.opacity, disabled = props.disabled, isLast = props.isLast;
     var spaces = getSpaces(props);
     var gap = (spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) || 0;
-    var getBorderRadius = function () {
-        var corners = getCorners(props);
-        var borderRadius = corners === null || corners === void 0 ? void 0 : corners.s;
-        if (isFirst && isLast) {
-            return "border-radius: ".concat(borderRadius, "px;");
-        }
-        if (isFirst) {
-            return "\n          border-top-left-radius: ".concat(borderRadius, "px; \n          border-bottom-left-radius: ").concat(borderRadius, "px;\n        ");
-        }
-        if (isLast) {
-            return "\n          border-top-right-radius: ".concat(borderRadius, "px; \n          border-bottom-right-radius: ").concat(borderRadius, "px;\n        ");
-        }
-        return "";
-    };
-    // Add gap as margin-right, except for last item
+    // Add gap as margin-right for spacing between segments
     // When percentage is 0, margin also becomes 0 (animates away with the segment)
-    var marginRight = !isLast && percentage > 0 ? "".concat(gap, "px") : 0;
-    return "\n      background-color: ".concat(color, ";\n      height: ").concat(height, "px;\n      flex-grow: ").concat(percentage, ";\n      flex-basis: 0;\n      flex-shrink: 1;\n      margin-right: ").concat(marginRight, ";\n      opacity: ").concat(opacity, ";\n      transition: opacity 0.2s ease-in-out, flex-grow 0.25s ease-out, margin-right 0.2s ease-out;\n      cursor: ").concat(disabled ? "default" : "pointer", ";\n      pointer-events: ").concat(disabled ? "none" : "auto", ";\n      ").concat(getBorderRadius(), "\n    ");
+    // Last visible segment also gets no margin
+    var marginRight = percentage > 0 && !isLast ? "".concat(gap, "px") : 0;
+    return "\n      background-color: ".concat(color, ";\n      height: ").concat(height, "px;\n      flex-grow: ").concat(percentage, ";\n      flex-basis: 0;\n      flex-shrink: 1;\n      margin-right: ").concat(marginRight, ";\n      opacity: ").concat(opacity, ";\n      transition: opacity 0.2s ease-in-out, flex-grow 0.25s ease-in-out, margin-right 0.25s ease-out;\n      cursor: ").concat(disabled ? "default" : "pointer", ";\n      pointer-events: ").concat(disabled ? "none" : "auto", ";\n    ");
 });
 var StyledStackedBarChartWrapper = styled$2("div")(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
@@ -24823,56 +24812,126 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
 
 // Helper: Calculate badge display text based on selection state
 var calculateBadgeText = function (totalItems, selectedCount) {
-    if (selectedCount === 0)
+    if (selectedCount === 0 || selectedCount === totalItems)
         return "".concat(totalItems);
-    if (selectedCount === totalItems)
-        return "All";
     return "".concat(selectedCount, " of ").concat(totalItems);
 };
 // Helper: Calculate legend value display
-var calculateLegendValue = function (item, mode, showLegendValues, globalUnit) {
+var calculateLegendValue = function (item, showLegendValues, legendValueFormat, globalUnit) {
     if (!showLegendValues)
         return undefined;
-    if (mode === "percentage") {
+    if (legendValueFormat === "percentage") {
         return "".concat(Math.round(item.percentage), "%");
     }
-    // Amount mode: show value with optional unit
+    // Count format: show value with optional unit
     var effectiveUnit = item.unit || globalUnit;
     return effectiveUnit ? "".concat(item.value, " ").concat(effectiveUnit) : "".concat(item.value);
 };
 // Helper: Get segment opacity based on hover and selection state
-var getSegmentOpacity = function (index, hoveredIndex, selectedIndices) {
-    var hasSelection = selectedIndices.length > 0;
+var getSegmentOpacity = function (index, hoveredIndex, selectedIndicesSet, selectionBehavior) {
+    var hasSelection = selectedIndicesSet.size > 0;
+    // Hide mode doesn't use opacity - segments animate to 0% width instead
+    if (selectionBehavior === "hide") {
+        return 1;
+    }
+    // Dim mode
     if (hoveredIndex !== null) {
-        return hoveredIndex === index || selectedIndices.includes(index) ? 1 : 0.3;
+        return hoveredIndex === index || selectedIndicesSet.has(index) ? 1 : 0.2;
     }
     if (hasSelection) {
-        return selectedIndices.includes(index) ? 1 : 0.3;
+        return selectedIndicesSet.has(index) ? 1 : 0.2;
     }
     return 1;
 };
+// Helper: Apply cumulative mode hide styling
+var applyCumulativeHideStyling = function (items, selectedIndicesSet, selectedTotal, hasRemaining, effectiveMaxAmount) {
+    var newRemainingValue = hasRemaining
+        ? effectiveMaxAmount - selectedTotal
+        : 0;
+    var newRemainingPercentage = hasRemaining
+        ? (newRemainingValue / effectiveMaxAmount) * 100
+        : 0;
+    var styledItems = items.map(function (item) {
+        var isSelected = selectedIndicesSet.has(item.originalIndex);
+        return __assign$1(__assign$1({}, item), { percentage: isSelected ? item.percentage : 0 });
+    });
+    return {
+        styledItems: styledItems,
+        updatedRemainingPercentage: newRemainingPercentage,
+        updatedRemainingValue: newRemainingValue,
+    };
+};
+// Helper: Apply proportional mode hide styling
+var applyProportionalHideStyling = function (items, selectedIndicesSet, selectedTotal) {
+    if (selectedTotal === 0) {
+        return {
+            styledItems: items.map(function (item) { return (__assign$1(__assign$1({}, item), { percentage: 0 })); }),
+            updatedRemainingPercentage: 0,
+            updatedRemainingValue: 0,
+        };
+    }
+    var styledItems = items.map(function (item) {
+        var isSelected = selectedIndicesSet.has(item.originalIndex);
+        var newPercentage = isSelected ? (item.value / selectedTotal) * 100 : 0;
+        return __assign$1(__assign$1({}, item), { percentage: newPercentage });
+    });
+    return {
+        styledItems: styledItems,
+        updatedRemainingPercentage: 0,
+        updatedRemainingValue: 0,
+    };
+};
+// Helper: Apply selection styling and recalculate percentages for hide mode
+var applySelectionStyling = function (items, selectedIndicesSet, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, baseRemainingPercentage, baseRemainingValue) {
+    var hasSelection = selectedIndicesSet.size > 0;
+    // If no selection or dim mode, return items as-is with base remaining values
+    if (selectionBehavior !== "hide" || !hasSelection) {
+        return {
+            styledItems: items,
+            updatedRemainingPercentage: baseRemainingPercentage,
+            updatedRemainingValue: baseRemainingValue,
+        };
+    }
+    // Calculate total of selected items
+    var selectedTotal = items
+        .filter(function (item) { return selectedIndicesSet.has(item.originalIndex); })
+        .reduce(function (sum, item) { return sum + item.value; }, 0);
+    // Apply mode-specific styling
+    return mode === "cumulative"
+        ? applyCumulativeHideStyling(items, selectedIndicesSet, selectedTotal, hasRemaining, effectiveMaxAmount)
+        : applyProportionalHideStyling(items, selectedIndicesSet, selectedTotal);
+};
 // Helper: Build legend items from data with optional remaining segment
 var buildLegendItems = function (dataWithPercentages, options) {
-    var _a, _b, _c, _d;
-    var mode = options.mode, showLegendValues = options.showLegendValues, unit = options.unit, hasRemaining = options.hasRemaining, showLegend = options.showLegend, remainingValue = options.remainingValue, remainingLabel = options.remainingLabel, remainingUnit = options.remainingUnit, data = options.data, theme = options.theme;
+    var _a, _b, _c;
+    var showLegendValues = options.showLegendValues, legendValueFormat = options.legendValueFormat, unit = options.unit, hasRemaining = options.hasRemaining, showLegend = options.showLegend, remainingValue = options.remainingValue, remainingPercentage = options.remainingPercentage, remainingLabel = options.remainingLabel, remainingUnit = options.remainingUnit, theme = options.theme;
     var legendItems = dataWithPercentages.map(function (item) { return ({
         name: item.name,
-        value: calculateLegendValue(item, mode, showLegendValues, unit),
+        value: calculateLegendValue(item, showLegendValues, legendValueFormat, unit),
         color: item.color,
         disabled: item.disabled,
     }); });
     // Add remaining item to legend if applicable
     if (hasRemaining && showLegend) {
-        var effectiveRemainingUnit = remainingUnit || ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.unit) || unit || "";
-        var remainingValueDisplay = showLegendValues
-            ? effectiveRemainingUnit
+        var remainingValueDisplay = void 0;
+        if (!showLegendValues) {
+            remainingValueDisplay = undefined;
+        }
+        else if (legendValueFormat === "percentage") {
+            remainingValueDisplay = "".concat(Math.round(remainingPercentage), "%");
+        }
+        else {
+            // Count format
+            // Use remainingUnit or global unit (never a custom unit from data items)
+            var effectiveRemainingUnit = remainingUnit || unit || "";
+            remainingValueDisplay = effectiveRemainingUnit
                 ? "".concat(remainingValue, " ").concat(effectiveRemainingUnit)
-                : "".concat(remainingValue)
-            : undefined;
+                : "".concat(remainingValue);
+        }
         legendItems.push({
             name: remainingLabel,
             value: remainingValueDisplay,
-            color: (_d = (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.sds) === null || _c === void 0 ? void 0 : _c.base) === null || _d === void 0 ? void 0 : _d.backgroundTertiary,
+            color: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.sds) === null || _b === void 0 ? void 0 : _b.base) === null || _c === void 0 ? void 0 : _c.backgroundTertiary,
             disabled: true,
         });
     }
@@ -24880,8 +24939,10 @@ var buildLegendItems = function (dataWithPercentages, options) {
 };
 // Helper: Render a bar segment with optional tooltip
 var renderBarSegment = function (item, index, options) {
-    var isFirst = options.isFirst, isLast = options.isLast, barHeight = options.barHeight, hoveredIndex = options.hoveredIndex, selectedIndices = options.selectedIndices, onMouseEnter = options.onMouseEnter, onMouseLeave = options.onMouseLeave, onClick = options.onClick;
-    var barSegment = (jsx(BarSegment, { color: item.color, percentage: item.percentage, height: barHeight, isFirst: isFirst, isLast: isLast, opacity: getSegmentOpacity(item.originalIndex, hoveredIndex, selectedIndices), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }));
+    var barHeight = options.barHeight, hoveredIndex = options.hoveredIndex, selectedIndicesSet = options.selectedIndicesSet, selectionBehavior = options.selectionBehavior, isLast = options.isLast, onMouseEnter = options.onMouseEnter, onMouseLeave = options.onMouseLeave, onClick = options.onClick;
+    // Mark hidden segments with data-hide attribute when in hide mode
+    var isHidden = selectionBehavior === "hide" && item.percentage === 0;
+    var barSegment = (jsx(BarSegment, { color: item.color, percentage: item.percentage, height: barHeight, opacity: getSegmentOpacity(item.originalIndex, hoveredIndex, selectedIndicesSet, selectionBehavior), isLast: isLast, "data-hide": isHidden, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }));
     return item.tooltip !== undefined ? (jsx(Tooltip, { title: null, componentSlot: jsx(TooltipTableContent, __assign$1({}, item.tooltip)), placement: "top", hasInvertedStyle: false, open: hoveredIndex === item.originalIndex, disableInteractive: true, PopperProps: {
             disablePortal: false,
             modifiers: [
@@ -24896,18 +24957,20 @@ var renderBarSegment = function (item, index, options) {
 };
 var StackedBarChart = function (props) {
     var _a, _b, _c;
-    var title = props.title, badge = props.badge, _d = props.hideBadge, hideBadge = _d === void 0 ? false : _d, data = props.data, _e = props.width, width = _e === void 0 ? "100%" : _e, _f = props.barHeight, barHeight = _f === void 0 ? 16 : _f, _g = props.showLegend, showLegend = _g === void 0 ? true : _g, _h = props.showLegendValues, showLegendValues = _h === void 0 ? true : _h, _j = props.selectedIndices, selectedIndices = _j === void 0 ? [] : _j, onSelectionChange = props.onSelectionChange, _k = props.mode, mode = _k === void 0 ? "percentage" : _k, maxAmount = props.maxAmount, _l = props.remainingLabel, remainingLabel = _l === void 0 ? "Remaining" : _l, remainingUnit = props.remainingUnit, unit = props.unit, colorGeneratorOptions = props.colorGeneratorOptions, rest = __rest(props, ["title", "badge", "hideBadge", "data", "width", "barHeight", "showLegend", "showLegendValues", "selectedIndices", "onSelectionChange", "mode", "maxAmount", "remainingLabel", "remainingUnit", "unit", "colorGeneratorOptions"]);
+    var title = props.title, badge = props.badge, _d = props.hideBadge, hideBadge = _d === void 0 ? false : _d, data = props.data, _e = props.width, width = _e === void 0 ? "100%" : _e, _f = props.barHeight, barHeightProp = _f === void 0 ? 16 : _f, _g = props.showLegend, showLegend = _g === void 0 ? true : _g, _h = props.showLegendValues, showLegendValues = _h === void 0 ? true : _h, _j = props.legendValueFormat, legendValueFormat = _j === void 0 ? "percentage" : _j, _k = props.selectedIndices, selectedIndices = _k === void 0 ? [] : _k, onSelectionChange = props.onSelectionChange, _l = props.selectionBehavior, selectionBehavior = _l === void 0 ? "dim" : _l, _m = props.mode, mode = _m === void 0 ? "proportional" : _m, maxAmount = props.maxAmount, _o = props.remainingLabel, remainingLabel = _o === void 0 ? "Remaining" : _o, remainingUnit = props.remainingUnit, unit = props.unit, colorGeneratorOptions = props.colorGeneratorOptions, rest = __rest(props, ["title", "badge", "hideBadge", "data", "width", "barHeight", "showLegend", "showLegendValues", "legendValueFormat", "selectedIndices", "onSelectionChange", "selectionBehavior", "mode", "maxAmount", "remainingLabel", "remainingUnit", "unit", "colorGeneratorOptions"]);
+    // Ensure barHeight is at least 1px
+    var barHeight = Math.max(1, barHeightProp);
     var theme = useTheme$4();
-    var _m = useState(null), hoveredIndex = _m[0], setHoveredIndex = _m[1];
-    var _o = useState([]), animatedItems = _o[0], setAnimatedItems = _o[1];
-    var _p = useState(new Map()), autoColorMap = _p[0], setAutoColorMap = _p[1];
-    var _q = useState(0), animatedRemainingPercentage = _q[0], setAnimatedRemainingPercentage = _q[1];
+    var _p = useState(null), hoveredIndex = _p[0], setHoveredIndex = _p[1];
+    var _q = useState([]), animatedItems = _q[0], setAnimatedItems = _q[1];
+    var _r = useState(new Map()), autoColorMap = _r[0], setAutoColorMap = _r[1];
+    var _s = useState(0), animatedRemainingPercentage = _s[0], setAnimatedRemainingPercentage = _s[1];
     var previousProcessedRef = useRef([]);
     var previousDataKeysRef = useRef(new Set());
     var previousColorOptionsRef = useRef(null);
     var previousRemainingPercentageRef = useRef(0);
-    // Helper to animate items when removals occur
-    var animateItemRemoval = function (previousItems, nextItems, currentRemainingPercentage, newRemainingPercentage) {
+    // Animate items when removals occur
+    var animateItemRemoval = useCallback(function (previousItems, nextItems, currentRemainingPercentage, newRemainingPercentage) {
         if (typeof window === "undefined") {
             setAnimatedItems(nextItems);
             previousProcessedRef.current = nextItems;
@@ -24966,9 +25029,9 @@ var StackedBarChart = function (props) {
             frameIds.forEach(function (id) { return window.cancelAnimationFrame(id); });
             window.clearTimeout(timeoutId);
         };
-    };
+    }, []);
     // Detect dark mode from theme
-    var isDarkMode = getMode({ theme: theme }) === "dark";
+    var isDarkMode = useMemo(function () { return getMode({ theme: theme }) === "dark"; }, [theme]);
     // Helper to generate color map for auto items
     var generateColorMap = useCallback(function (items) {
         var palette = generateDiscreteColors(items.length, __assign$1(__assign$1({}, (colorGeneratorOptions || {})), { isDarkMode: isDarkMode }));
@@ -24988,8 +25051,7 @@ var StackedBarChart = function (props) {
         // Check if color generation options changed
         var colorOptionsChanged = !previousColorOptions ||
             previousColorOptions.isDarkMode !== isDarkMode ||
-            JSON.stringify(previousColorOptions.options) !==
-                JSON.stringify(colorGeneratorOptions);
+            previousColorOptions.options !== colorGeneratorOptions;
         // Update refs
         previousDataKeysRef.current = currentDataKeys;
         previousColorOptionsRef.current = {
@@ -25022,36 +25084,38 @@ var StackedBarChart = function (props) {
                 setAutoColorMap(updatedMap);
             }
         }
-    }, [
-        data,
-        colorGeneratorOptions,
-        isDarkMode,
-        theme,
-        autoColorMap,
-        generateColorMap,
-    ]);
-    // Calculate default badge value
-    var defaultBadge = calculateBadgeText(data.length, selectedIndices.length);
-    var displayBadge = badge ? badge : defaultBadge;
-    // Calculate total value from data
-    var dataTotal = data.reduce(function (sum, item) { return sum + item.value; }, 0);
-    // Determine the effective max amount
-    var effectiveMaxAmount = mode === "amount" && maxAmount ? maxAmount : dataTotal;
-    // Calculate if there's a remaining segment
-    var hasRemaining = mode === "amount" && dataTotal < effectiveMaxAmount;
-    var remainingValue = hasRemaining ? effectiveMaxAmount - dataTotal : 0;
-    var remainingPercentage = hasRemaining
-        ? (remainingValue / effectiveMaxAmount) * 100
-        : 0;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data, colorGeneratorOptions, isDarkMode, theme, generateColorMap]);
+    // Calculate display badge value
+    var displayBadge = badge !== null && badge !== void 0 ? badge : calculateBadgeText(data.length, selectedIndices.length);
+    // Calculate totals and remaining segments for cumulative mode
+    var _t = useMemo(function () {
+        var total = data.reduce(function (sum, item) { return sum + item.value; }, 0);
+        var maxAmountValue = mode === "cumulative" && maxAmount ? maxAmount : total;
+        var hasRemainingSegment = mode === "cumulative" && total < maxAmountValue;
+        var remaining = hasRemainingSegment ? maxAmountValue - total : 0;
+        var remainingPct = hasRemainingSegment
+            ? (remaining / maxAmountValue) * 100
+            : 0;
+        return {
+            effectiveMaxAmount: maxAmountValue,
+            hasRemaining: hasRemainingSegment,
+            remainingValue: remaining,
+            remainingPercentage: remainingPct,
+        };
+    }, [data, mode, maxAmount]), effectiveMaxAmount = _t.effectiveMaxAmount, hasRemaining = _t.hasRemaining, remainingValue = _t.remainingValue, remainingPercentage = _t.remainingPercentage;
     // Calculate percentages and assign colors for each segment
     // default to ornament secondary color if no color is provided
-    var dataWithPercentages = data.map(function (item, index) {
-        var _a, _b, _c;
-        var resolvedColor = item.color ||
-            autoColorMap.get(item.name) ||
-            ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.sds) === null || _b === void 0 ? void 0 : _b.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondary);
-        return __assign$1(__assign$1({}, item), { color: resolvedColor, percentage: effectiveMaxAmount > 0 ? (item.value / effectiveMaxAmount) * 100 : 0, key: item.name, originalIndex: index });
-    });
+    // Memoize to prevent unnecessary recalculations and re-renders
+    var dataWithPercentages = useMemo(function () {
+        return data.map(function (item, index) {
+            var _a, _b, _c;
+            var resolvedColor = item.color ||
+                autoColorMap.get(item.name) ||
+                ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.sds) === null || _b === void 0 ? void 0 : _b.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondary);
+            return __assign$1(__assign$1({}, item), { color: resolvedColor, percentage: effectiveMaxAmount > 0 ? (item.value / effectiveMaxAmount) * 100 : 0, key: item.name, originalIndex: index });
+        });
+    }, [data, effectiveMaxAmount, autoColorMap, theme]);
     // Handle data changes and animate exits
     useEffect(function () {
         var previousProcessed = previousProcessedRef.current;
@@ -25071,53 +25135,104 @@ var StackedBarChart = function (props) {
         previousProcessedRef.current = dataWithPercentages;
         setAnimatedRemainingPercentage(remainingPercentage);
         previousRemainingPercentageRef.current = remainingPercentage;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [data, effectiveMaxAmount, autoColorMap]);
-    // Convert data to legend items format
-    var legendItems = buildLegendItems(dataWithPercentages, {
-        mode: mode,
-        showLegendValues: showLegendValues,
-        unit: unit,
-        hasRemaining: hasRemaining,
-        showLegend: showLegend,
-        remainingValue: remainingValue,
-        remainingLabel: remainingLabel,
-        remainingUnit: remainingUnit,
-        data: data,
-        theme: theme,
-    });
-    // Handle legend item hover
-    var handleLegendItemHover = function (item, index) {
-        setHoveredIndex(index);
-    };
-    // Handle legend item leave
-    var handleLegendItemLeave = function () {
-        setHoveredIndex(null);
-    };
-    // Handle segment click - toggle selection
-    var handleSegmentClick = function (index) {
+    }, [dataWithPercentages, remainingPercentage, animateItemRemoval]);
+    // Create a Set for O(1) lookups of selected indices
+    var selectedIndicesSet = useMemo(function () { return new Set(selectedIndices); }, [selectedIndices]);
+    // Apply selection styling for hide mode
+    // This modifies percentages but keeps all items (including hidden ones at 0%)
+    // so animations continue to work smoothly
+    var _u = useMemo(function () {
+        return applySelectionStyling(animatedItems, selectedIndicesSet, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, animatedRemainingPercentage, remainingValue);
+    }, [
+        animatedItems,
+        selectedIndicesSet,
+        selectionBehavior,
+        mode,
+        hasRemaining,
+        effectiveMaxAmount,
+        animatedRemainingPercentage,
+        remainingValue,
+    ]), styledItems = _u.styledItems, updatedRemainingPercentage = _u.updatedRemainingPercentage, updatedRemainingValue = _u.updatedRemainingValue;
+    // Calculate display values for hide mode
+    var isHideMode = selectionBehavior === "hide" && selectedIndices.length > 0;
+    var displayRemainingPercentage = isHideMode
+        ? updatedRemainingPercentage
+        : animatedRemainingPercentage;
+    var displayRemainingValue = isHideMode
+        ? updatedRemainingValue
+        : remainingValue;
+    // Convert data to legend items format (always use full data, not filtered)
+    // Use updated remaining values when in hide mode with selections
+    var legendItems = useMemo(function () {
+        return buildLegendItems(dataWithPercentages, {
+            showLegendValues: showLegendValues,
+            legendValueFormat: legendValueFormat,
+            unit: unit,
+            hasRemaining: hasRemaining,
+            showLegend: showLegend,
+            remainingValue: displayRemainingValue,
+            remainingPercentage: displayRemainingPercentage,
+            remainingLabel: remainingLabel,
+            remainingUnit: remainingUnit,
+            theme: theme,
+        });
+    }, [
+        dataWithPercentages,
+        showLegendValues,
+        legendValueFormat,
+        unit,
+        hasRemaining,
+        showLegend,
+        displayRemainingValue,
+        displayRemainingPercentage,
+        remainingLabel,
+        remainingUnit,
+        theme,
+    ]);
+    // Handle legend item hover and leave
+    var handleLegendItemHover = useCallback(function (_item, index) { return setHoveredIndex(index); }, []);
+    var handleLegendItemLeave = useCallback(function () { return setHoveredIndex(null); }, []);
+    // Handle selection change - reusable logic for both segment and legend
+    var handleSelectionChange = useCallback(function (newSelectedIndices) {
         if (!onSelectionChange)
             return;
-        var isSelected = selectedIndices.includes(index);
-        var newSelectedIndices;
-        if (isSelected) {
-            newSelectedIndices = selectedIndices.filter(function (i) { return i !== index; });
-        }
-        else {
-            newSelectedIndices = __spreadArray(__spreadArray([], selectedIndices, true), [index], false);
-        }
         var selectedData = data.filter(function (item, itemIndex) {
             return newSelectedIndices.includes(itemIndex);
         });
         onSelectionChange(newSelectedIndices, selectedData);
-    };
-    var chartContent = (jsxs(StyledStackedBarChartWrapper, { children: [jsxs(BarContainer, { width: width, barHeight: barHeight, children: [animatedItems.map(function (item, index) {
+    }, [onSelectionChange, data]);
+    // Handle segment click - toggle selection
+    var handleSegmentClick = useCallback(function (index) {
+        if (!onSelectionChange)
+            return;
+        var isSelected = selectedIndicesSet.has(index);
+        var newSelectedIndices = isSelected
+            ? selectedIndices.filter(function (i) { return i !== index; })
+            : __spreadArray(__spreadArray([], selectedIndices, true), [index], false);
+        handleSelectionChange(newSelectedIndices);
+    }, [
+        onSelectionChange,
+        selectedIndices,
+        selectedIndicesSet,
+        handleSelectionChange,
+    ]);
+    // Calculate the last visible segment (percentage > 0)
+    var lastVisibleIndex = useMemo(function () {
+        for (var i = styledItems.length - 1; i >= 0; i--) {
+            if (styledItems[i].percentage > 0) {
+                return i;
+            }
+        }
+        return -1;
+    }, [styledItems]);
+    var chartContent = (jsxs(StyledStackedBarChartWrapper, { children: [jsxs(BarContainer, { width: width, barHeight: barHeight, isEmpty: styledItems.length === 0 && !hasRemaining, children: [styledItems.map(function (item, index) {
+                        var isLastVisible = index === lastVisibleIndex && !hasRemaining;
                         return renderBarSegment(item, index, {
-                            isFirst: index === 0,
-                            isLast: index === animatedItems.length - 1 && !hasRemaining,
                             barHeight: barHeight,
                             hoveredIndex: hoveredIndex,
-                            selectedIndices: selectedIndices,
+                            selectedIndicesSet: selectedIndicesSet,
+                            selectionBehavior: selectionBehavior,
+                            isLast: isLastVisible,
                             onMouseEnter: function () {
                                 return !item.isExiting && setHoveredIndex(item.originalIndex);
                             },
@@ -25126,14 +25241,7 @@ var StackedBarChart = function (props) {
                                 return !item.isExiting && handleSegmentClick(item.originalIndex);
                             },
                         });
-                    }), hasRemaining && (jsx(BarSegment, { color: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.sds) === null || _b === void 0 ? void 0 : _b.base) === null || _c === void 0 ? void 0 : _c.backgroundTertiary, percentage: animatedRemainingPercentage, height: barHeight, isFirst: animatedItems.length === 0, isLast: true, opacity: 1, disabled: true }, "remaining"))] }), showLegend && (jsx(Legend, { items: legendItems, showValues: showLegendValues, onItemMouseEnter: handleLegendItemHover, onItemMouseLeave: handleLegendItemLeave, selectedIndices: selectedIndices, onSelectionChange: onSelectionChange
-                    ? function (newSelectedIndices) {
-                        var selectedData = data.filter(function (item, itemIndex) {
-                            return newSelectedIndices.includes(itemIndex);
-                        });
-                        onSelectionChange(newSelectedIndices, selectedData);
-                    }
-                    : undefined, hoveredIndex: hoveredIndex }))] }));
+                    }), hasRemaining && (jsx(BarSegment, { color: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.sds) === null || _b === void 0 ? void 0 : _b.base) === null || _c === void 0 ? void 0 : _c.backgroundTertiary, percentage: displayRemainingPercentage, height: barHeight, isLast: true, opacity: 1, disabled: true }, "remaining"))] }), showLegend && (jsx(Legend, { items: legendItems, showValues: showLegendValues, onItemMouseEnter: handleLegendItemHover, onItemMouseLeave: handleLegendItemLeave, selectedIndices: selectedIndices, onSelectionChange: onSelectionChange ? handleSelectionChange : undefined, hoveredIndex: hoveredIndex }))] }));
     // If no title, render chart and optional legend without wrapper
     if (!title) {
         return (jsx(ChartWrapper, __assign$1({ width: width }, rest, { children: chartContent })));