@czi-sds/data-viz 0.15.0 → 0.16.0

package/dist/index.cjs.d.ts

@@ -237,6 +237,30 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
      * Callback when legend selection changes
      */
     onSelectionChange?: (selectedIndices: number[], selectedData: StackedBarChartDataItem[]) => void;
+    /**
+     * Callback when mouse enters a bar segment
+     */
+    onSegmentMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
+    /**
+     * Callback when mouse leaves a bar segment
+     */
+    onSegmentMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
+    /**
+     * Callback when mouse enters a legend item
+     */
+    onLegendItemMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
+    /**
+     * Callback when mouse leaves a legend item
+     */
+    onLegendItemMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
+    /**
+     * Callback when a bar segment is clicked
+     */
+    onSegmentClick?: (item: StackedBarChartDataItem, index: number) => void;
+    /**
+     * Callback when a legend item is clicked
+     */
+    onLegendItemClick?: (item: StackedBarChartDataItem, index: number) => void;
     /**
      * Behavior to apply when items are selected
      * - "dim": Non-selected segments become semi-transparent (20% opacity)

package/dist/index.cjs.js

@@ -1761,6 +1761,7 @@ function makeThemeOptions(appTheme, mode) {
             appTheme.spacing.l,
             appTheme.spacing.xl,
             appTheme.spacing.xxl,
+            appTheme.spacing.xxxl,
         ],
         transitions: {
             duration: {
@@ -19216,7 +19217,7 @@ function useNavigationState() {
     };
 }
 
-function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, items, onChange, value, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, }) {
+function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, items, onChange, value, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, onDrawerStyleNavItemHover, }) {
     const theme = material.useTheme();
     const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
     const [clickedDrawerKey, setClickedDrawerKey] = React.useState(null);
@@ -19265,6 +19266,7 @@ function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, ite
             }
         };
         return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
+                onDrawerStyleNavItemHover?.(item);
                 if (clickedDrawerKey !== key) {
                     onDrawerOpen(key);
                 }
@@ -19516,7 +19518,7 @@ const StyledTag = styled$2__default.default(Tag) `
   margin: 0;
 `;
 
-function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNarrow, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, }) {
+function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNarrow, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, onDrawerStyleNavItemHover, }) {
     const theme = material.useTheme();
     const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
     function onClose() {
@@ -19540,7 +19542,10 @@ function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNa
         const handleClick = (e) => {
             parentOnClick?.(e);
         };
-        return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: () => onDrawerOpen(key), onMouseLeave: onDrawerClose, children: jsxRuntime.jsxs(UnifiedNavItem, __assign({}, rest, { hasInvertedStyle: hasInvertedStyle, active: isDrawerOpen, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, navVariant: "secondary", onClick: handleClick, component: componentProp, href: defaultUrl, target: target, rel: rel, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isDrawerOpen, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })) }, key));
+        return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
+                onDrawerStyleNavItemHover?.(item);
+                onDrawerOpen(key);
+            }, onMouseLeave: onDrawerClose, children: jsxRuntime.jsxs(UnifiedNavItem, __assign({}, rest, { hasInvertedStyle: hasInvertedStyle, active: isDrawerOpen, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, navVariant: "secondary", onClick: handleClick, component: componentProp, href: defaultUrl, target: target, rel: rel, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isDrawerOpen, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })) }, key));
     };
     const renderDropdownItem = (item, key, label, parentOnClick, rest) => {
         const isDropdownOpen = open && activeDropdownKey === key;
@@ -19712,7 +19717,7 @@ React.forwardRef((props, ref) => {
     const { activePrimaryNavKey: controlledActivePrimaryNavKey, buttons, sdsStyle = "dropdown", menuProps = {
         disableScrollLock: true,
         disablePortal: true
-    }, backgroundAppearance = "matchBackground", logo, logoUrl, logoLinkComponent = "a", logoLinkProps, scrollElevation = true, primaryNavItems, primaryNavPosition = "left", searchProps, secondaryNavItems, setActivePrimaryNavKey: onActivePrimaryNavKeyChange, showSearch = true, tag, tagColor, title, drawerOpen: controlledDrawerOpen, setDrawerOpen: onDrawerOpenChange, isSticky = true, topComponentSlot, ...rest } = props;
+    }, backgroundAppearance = "matchBackground", logo, logoUrl, logoLinkComponent = "a", logoLinkProps, scrollElevation = true, primaryNavItems, primaryNavPosition = "left", searchProps, secondaryNavItems, setActivePrimaryNavKey: onActivePrimaryNavKeyChange, showSearch = true, tag, tagColor, title, drawerOpen: controlledDrawerOpen, setDrawerOpen: onDrawerOpenChange, isSticky = true, topComponentSlot, onDrawerStyleNavItemHover, ...rest } = props;
     const navRef = React.useRef(null);
     const topSlotRef = React.useRef(null);
     const [topOffset, setTopOffset] = React.useState(0);
@@ -19865,11 +19870,11 @@ React.forwardRef((props, ref) => {
     };
     const renderPrimaryNav = () => {
         return (primaryNavItems &&
-            primaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handlePrimaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false) })));
+            primaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handlePrimaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false), onDrawerStyleNavItemHover: onDrawerStyleNavItemHover })));
     };
     const renderSecondaryNav = () => {
         return (secondaryNavItems &&
-            secondaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handleSecondaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false) })));
+            secondaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handleSecondaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false), onDrawerStyleNavItemHover: onDrawerStyleNavItemHover })));
     };
     const renderButtonsNode = () => {
         if (!buttons || buttons.length === 0)
@@ -24999,7 +25004,7 @@ 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, 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"]);
+    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, onSegmentMouseEnter = props.onSegmentMouseEnter, onSegmentMouseLeave = props.onSegmentMouseLeave, onLegendItemMouseEnter = props.onLegendItemMouseEnter, onLegendItemMouseLeave = props.onLegendItemMouseLeave, onSegmentClick = props.onSegmentClick, onLegendItemClick = props.onLegendItemClick, _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", "onSegmentMouseEnter", "onSegmentMouseLeave", "onLegendItemMouseEnter", "onLegendItemMouseLeave", "onSegmentClick", "onLegendItemClick", "selectionBehavior", "mode", "maxAmount", "remainingLabel", "remainingUnit", "unit", "colorGeneratorOptions"]);
     // Ensure barHeight is at least 1px
     var barHeight = Math.max(1, barHeightProp);
     var theme = material.useTheme();
@@ -25232,8 +25237,24 @@ var StackedBarChart = function (props) {
         theme,
     ]);
     // Handle legend item hover and leave
-    var handleLegendItemHover = React.useCallback(function (_item, index) { return setHoveredIndex(index); }, []);
-    var handleLegendItemLeave = React.useCallback(function () { return setHoveredIndex(null); }, []);
+    var handleLegendItemHover = React.useCallback(function (_item, index) {
+        setHoveredIndex(index);
+        if (onLegendItemMouseEnter && data[index]) {
+            onLegendItemMouseEnter(data[index], index);
+        }
+    }, [onLegendItemMouseEnter, data]);
+    var handleLegendItemLeave = React.useCallback(function (_item, index) {
+        setHoveredIndex(null);
+        if (onLegendItemMouseLeave && data[index]) {
+            onLegendItemMouseLeave(data[index], index);
+        }
+    }, [onLegendItemMouseLeave, data]);
+    // Handle legend item click
+    var handleLegendItemClickInternal = React.useCallback(function (_item, index) {
+        if (onLegendItemClick && data[index]) {
+            onLegendItemClick(data[index], index);
+        }
+    }, [onLegendItemClick, data]);
     // Handle selection change - reusable logic for both segment and legend
     var handleSelectionChange = React.useCallback(function (newSelectedIndices) {
         if (!onSelectionChange)
@@ -25243,8 +25264,13 @@ var StackedBarChart = function (props) {
         });
         onSelectionChange(newSelectedIndices, selectedData);
     }, [onSelectionChange, data]);
-    // Handle segment click - toggle selection
+    // Handle segment click - toggle selection and call onSegmentClick
     var handleSegmentClick = React.useCallback(function (index) {
+        // Call onSegmentClick callback if provided
+        if (onSegmentClick && data[index]) {
+            onSegmentClick(data[index], index);
+        }
+        // Handle selection change
         if (!onSelectionChange)
             return;
         var isSelected = selectedIndicesSet.has(index);
@@ -25254,6 +25280,8 @@ var StackedBarChart = function (props) {
         handleSelectionChange(newSelectedIndices);
     }, [
         onSelectionChange,
+        onSegmentClick,
+        data,
         selectedIndices,
         selectedIndicesSet,
         handleSelectionChange,
@@ -25276,14 +25304,24 @@ var StackedBarChart = function (props) {
                             selectionBehavior: selectionBehavior,
                             isLast: isLastVisible,
                             onMouseEnter: function () {
-                                return !item.isExiting && setHoveredIndex(item.originalIndex);
+                                if (!item.isExiting) {
+                                    setHoveredIndex(item.originalIndex);
+                                    if (onSegmentMouseEnter && data[item.originalIndex]) {
+                                        onSegmentMouseEnter(data[item.originalIndex], item.originalIndex);
+                                    }
+                                }
+                            },
+                            onMouseLeave: function () {
+                                setHoveredIndex(null);
+                                if (onSegmentMouseLeave && data[item.originalIndex]) {
+                                    onSegmentMouseLeave(data[item.originalIndex], item.originalIndex);
+                                }
                             },
-                            onMouseLeave: function () { return setHoveredIndex(null); },
                             onClick: function () {
                                 return !item.isExiting && handleSegmentClick(item.originalIndex);
                             },
                         });
-                    }), hasRemaining && (jsxRuntime.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 && (jsxRuntime.jsx(Legend, { items: legendItems, showValues: showLegendValues, onItemMouseEnter: handleLegendItemHover, onItemMouseLeave: handleLegendItemLeave, selectedIndices: selectedIndices, onSelectionChange: onSelectionChange ? handleSelectionChange : undefined, hoveredIndex: hoveredIndex }))] }));
+                    }), hasRemaining && (jsxRuntime.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 && (jsxRuntime.jsx(Legend, { items: legendItems, showValues: showLegendValues, onItemMouseEnter: handleLegendItemHover, onItemMouseLeave: handleLegendItemLeave, onItemClick: onLegendItemClick ? handleLegendItemClickInternal : undefined, selectedIndices: selectedIndices, onSelectionChange: onSelectionChange ? handleSelectionChange : undefined, hoveredIndex: hoveredIndex }))] }));
     // If no title, render chart and optional legend without wrapper
     if (!title) {
         return (jsxRuntime.jsx(ChartWrapper, __assign$1({ width: width }, rest, { children: chartContent })));

package/dist/index.esm.d.ts

@@ -237,6 +237,30 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
      * Callback when legend selection changes
      */
     onSelectionChange?: (selectedIndices: number[], selectedData: StackedBarChartDataItem[]) => void;
+    /**
+     * Callback when mouse enters a bar segment
+     */
+    onSegmentMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
+    /**
+     * Callback when mouse leaves a bar segment
+     */
+    onSegmentMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
+    /**
+     * Callback when mouse enters a legend item
+     */
+    onLegendItemMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
+    /**
+     * Callback when mouse leaves a legend item
+     */
+    onLegendItemMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
+    /**
+     * Callback when a bar segment is clicked
+     */
+    onSegmentClick?: (item: StackedBarChartDataItem, index: number) => void;
+    /**
+     * Callback when a legend item is clicked
+     */
+    onLegendItemClick?: (item: StackedBarChartDataItem, index: number) => void;
     /**
      * Behavior to apply when items are selected
      * - "dim": Non-selected segments become semi-transparent (20% opacity)

package/dist/index.esm.js

@@ -1737,6 +1737,7 @@ function makeThemeOptions(appTheme, mode) {
             appTheme.spacing.l,
             appTheme.spacing.xl,
             appTheme.spacing.xxl,
+            appTheme.spacing.xxxl,
         ],
         transitions: {
             duration: {
@@ -19192,7 +19193,7 @@ function useNavigationState() {
     };
 }
 
-function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, items, onChange, value, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, }) {
+function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, items, onChange, value, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, onDrawerStyleNavItemHover, }) {
     const theme = useTheme$4();
     const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
     const [clickedDrawerKey, setClickedDrawerKey] = useState(null);
@@ -19241,6 +19242,7 @@ function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, ite
             }
         };
         return (jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
+                onDrawerStyleNavItemHover?.(item);
                 if (clickedDrawerKey !== key) {
                     onDrawerOpen(key);
                 }
@@ -19492,7 +19494,7 @@ const StyledTag = styled$2(Tag) `
   margin: 0;
 `;
 
-function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNarrow, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, }) {
+function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNarrow, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, onDrawerStyleNavItemHover, }) {
     const theme = useTheme$4();
     const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
     function onClose() {
@@ -19516,7 +19518,10 @@ function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNa
         const handleClick = (e) => {
             parentOnClick?.(e);
         };
-        return (jsx(StyledHoverDrawerContainer, { onMouseEnter: () => onDrawerOpen(key), onMouseLeave: onDrawerClose, children: jsxs(UnifiedNavItem, __assign({}, rest, { hasInvertedStyle: hasInvertedStyle, active: isDrawerOpen, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, navVariant: "secondary", onClick: handleClick, component: componentProp, href: defaultUrl, target: target, rel: rel, children: [jsx(StyledLabelTextWrapper$1, { active: isDrawerOpen, isNarrow: isNarrow, children: label }), jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })) }, key));
+        return (jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
+                onDrawerStyleNavItemHover?.(item);
+                onDrawerOpen(key);
+            }, onMouseLeave: onDrawerClose, children: jsxs(UnifiedNavItem, __assign({}, rest, { hasInvertedStyle: hasInvertedStyle, active: isDrawerOpen, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, navVariant: "secondary", onClick: handleClick, component: componentProp, href: defaultUrl, target: target, rel: rel, children: [jsx(StyledLabelTextWrapper$1, { active: isDrawerOpen, isNarrow: isNarrow, children: label }), jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })) }, key));
     };
     const renderDropdownItem = (item, key, label, parentOnClick, rest) => {
         const isDropdownOpen = open && activeDropdownKey === key;
@@ -19688,7 +19693,7 @@ forwardRef((props, ref) => {
     const { activePrimaryNavKey: controlledActivePrimaryNavKey, buttons, sdsStyle = "dropdown", menuProps = {
         disableScrollLock: true,
         disablePortal: true
-    }, backgroundAppearance = "matchBackground", logo, logoUrl, logoLinkComponent = "a", logoLinkProps, scrollElevation = true, primaryNavItems, primaryNavPosition = "left", searchProps, secondaryNavItems, setActivePrimaryNavKey: onActivePrimaryNavKeyChange, showSearch = true, tag, tagColor, title, drawerOpen: controlledDrawerOpen, setDrawerOpen: onDrawerOpenChange, isSticky = true, topComponentSlot, ...rest } = props;
+    }, backgroundAppearance = "matchBackground", logo, logoUrl, logoLinkComponent = "a", logoLinkProps, scrollElevation = true, primaryNavItems, primaryNavPosition = "left", searchProps, secondaryNavItems, setActivePrimaryNavKey: onActivePrimaryNavKeyChange, showSearch = true, tag, tagColor, title, drawerOpen: controlledDrawerOpen, setDrawerOpen: onDrawerOpenChange, isSticky = true, topComponentSlot, onDrawerStyleNavItemHover, ...rest } = props;
     const navRef = useRef(null);
     const topSlotRef = useRef(null);
     const [topOffset, setTopOffset] = useState(0);
@@ -19841,11 +19846,11 @@ forwardRef((props, ref) => {
     };
     const renderPrimaryNav = () => {
         return (primaryNavItems &&
-            primaryNavItems.length > 0 && (jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handlePrimaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false) })));
+            primaryNavItems.length > 0 && (jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handlePrimaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false), onDrawerStyleNavItemHover: onDrawerStyleNavItemHover })));
     };
     const renderSecondaryNav = () => {
         return (secondaryNavItems &&
-            secondaryNavItems.length > 0 && (jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handleSecondaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false) })));
+            secondaryNavItems.length > 0 && (jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handleSecondaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false), onDrawerStyleNavItemHover: onDrawerStyleNavItemHover })));
     };
     const renderButtonsNode = () => {
         if (!buttons || buttons.length === 0)
@@ -24975,7 +24980,7 @@ 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, 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"]);
+    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, onSegmentMouseEnter = props.onSegmentMouseEnter, onSegmentMouseLeave = props.onSegmentMouseLeave, onLegendItemMouseEnter = props.onLegendItemMouseEnter, onLegendItemMouseLeave = props.onLegendItemMouseLeave, onSegmentClick = props.onSegmentClick, onLegendItemClick = props.onLegendItemClick, _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", "onSegmentMouseEnter", "onSegmentMouseLeave", "onLegendItemMouseEnter", "onLegendItemMouseLeave", "onSegmentClick", "onLegendItemClick", "selectionBehavior", "mode", "maxAmount", "remainingLabel", "remainingUnit", "unit", "colorGeneratorOptions"]);
     // Ensure barHeight is at least 1px
     var barHeight = Math.max(1, barHeightProp);
     var theme = useTheme$4();
@@ -25208,8 +25213,24 @@ var StackedBarChart = function (props) {
         theme,
     ]);
     // Handle legend item hover and leave
-    var handleLegendItemHover = useCallback(function (_item, index) { return setHoveredIndex(index); }, []);
-    var handleLegendItemLeave = useCallback(function () { return setHoveredIndex(null); }, []);
+    var handleLegendItemHover = useCallback(function (_item, index) {
+        setHoveredIndex(index);
+        if (onLegendItemMouseEnter && data[index]) {
+            onLegendItemMouseEnter(data[index], index);
+        }
+    }, [onLegendItemMouseEnter, data]);
+    var handleLegendItemLeave = useCallback(function (_item, index) {
+        setHoveredIndex(null);
+        if (onLegendItemMouseLeave && data[index]) {
+            onLegendItemMouseLeave(data[index], index);
+        }
+    }, [onLegendItemMouseLeave, data]);
+    // Handle legend item click
+    var handleLegendItemClickInternal = useCallback(function (_item, index) {
+        if (onLegendItemClick && data[index]) {
+            onLegendItemClick(data[index], index);
+        }
+    }, [onLegendItemClick, data]);
     // Handle selection change - reusable logic for both segment and legend
     var handleSelectionChange = useCallback(function (newSelectedIndices) {
         if (!onSelectionChange)
@@ -25219,8 +25240,13 @@ var StackedBarChart = function (props) {
         });
         onSelectionChange(newSelectedIndices, selectedData);
     }, [onSelectionChange, data]);
-    // Handle segment click - toggle selection
+    // Handle segment click - toggle selection and call onSegmentClick
     var handleSegmentClick = useCallback(function (index) {
+        // Call onSegmentClick callback if provided
+        if (onSegmentClick && data[index]) {
+            onSegmentClick(data[index], index);
+        }
+        // Handle selection change
         if (!onSelectionChange)
             return;
         var isSelected = selectedIndicesSet.has(index);
@@ -25230,6 +25256,8 @@ var StackedBarChart = function (props) {
         handleSelectionChange(newSelectedIndices);
     }, [
         onSelectionChange,
+        onSegmentClick,
+        data,
         selectedIndices,
         selectedIndicesSet,
         handleSelectionChange,
@@ -25252,14 +25280,24 @@ var StackedBarChart = function (props) {
                             selectionBehavior: selectionBehavior,
                             isLast: isLastVisible,
                             onMouseEnter: function () {
-                                return !item.isExiting && setHoveredIndex(item.originalIndex);
+                                if (!item.isExiting) {
+                                    setHoveredIndex(item.originalIndex);
+                                    if (onSegmentMouseEnter && data[item.originalIndex]) {
+                                        onSegmentMouseEnter(data[item.originalIndex], item.originalIndex);
+                                    }
+                                }
+                            },
+                            onMouseLeave: function () {
+                                setHoveredIndex(null);
+                                if (onSegmentMouseLeave && data[item.originalIndex]) {
+                                    onSegmentMouseLeave(data[item.originalIndex], item.originalIndex);
+                                }
                             },
-                            onMouseLeave: function () { return setHoveredIndex(null); },
                             onClick: function () {
                                 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: 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 }))] }));
+                    }), 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, onItemClick: onLegendItemClick ? handleLegendItemClickInternal : undefined, 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 })));