@chayns-components/core 5.0.58 → 5.0.59

package/lib/cjs/components/multi-action-button/MultiActionButton.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.utils.js","names":["getSecondaryContextMenuTriggerStyle","height","isCollapsed","isExpanded","shouldUseContentWidth","display","minWidth","opacity","pointerEvents","width","flex","exports"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.utils.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport interface GetSecondaryContextMenuTriggerStyleOptions {\n    height: number;\n    isCollapsed: boolean;\n    isExpanded: boolean;\n    shouldUseContentWidth: boolean;\n}\n\nexport const getSecondaryContextMenuTriggerStyle = ({\n    height,\n    isCollapsed,\n    isExpanded,\n    shouldUseContentWidth,\n}: GetSecondaryContextMenuTriggerStyleOptions): CSSProperties => {\n    if (isCollapsed) {\n        return {\n            display: 'inline-flex',\n            minWidth: 0,\n            opacity: 0,\n            pointerEvents: 'none',\n            width: 0,\n        };\n    }\n\n    if (shouldUseContentWidth) {\n        return {\n            display: 'inline-flex',\n            flex: '0 1 auto',\n            minWidth: 0,\n        };\n    }\n\n    if (isExpanded) {\n        return {\n            display: 'inline-flex',\n            flex: '1 1 auto',\n            minWidth: 0,\n        };\n    }\n\n    return {\n        display: 'inline-flex',\n        flex: '0 0 auto',\n        minWidth: 0,\n        width: height,\n    };\n};\n"],"mappings":";;;;;;AASO,MAAMA,mCAAmC,GAAGA,CAAC;EAChDC,MAAM;EACNC,WAAW;EACXC,UAAU;EACVC;AACwC,CAAC,KAAoB;EAC7D,IAAIF,WAAW,EAAE;IACb,OAAO;MACHG,OAAO,EAAE,aAAa;MACtBC,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAE,CAAC;MACVC,aAAa,EAAE,MAAM;MACrBC,KAAK,EAAE;IACX,CAAC;EACL;EAEA,IAAIL,qBAAqB,EAAE;IACvB,OAAO;MACHC,OAAO,EAAE,aAAa;MACtBK,IAAI,EAAE,UAAU;MAChBJ,QAAQ,EAAE;IACd,CAAC;EACL;EAEA,IAAIH,UAAU,EAAE;IACZ,OAAO;MACHE,OAAO,EAAE,aAAa;MACtBK,IAAI,EAAE,UAAU;MAChBJ,QAAQ,EAAE;IACd,CAAC;EACL;EAEA,OAAO;IACHD,OAAO,EAAE,aAAa;IACtBK,IAAI,EAAE,UAAU;IAChBJ,QAAQ,EAAE,CAAC;IACXG,KAAK,EAAER;EACX,CAAC;AACL,CAAC;AAACU,OAAA,CAAAX,mCAAA,GAAAA,mCAAA","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.utils.js","names":["MultiActionButtonAutoCollapseMode","exports","AUTO_COLLAPSE_HYSTERESIS_PX","MULTI_ACTION_BUTTON_LABEL_GAP_PX","MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX","MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX","getMinimumMultiActionButtonIconsWidth","hasSecondaryAction","height","minimumPrimaryActionWidth","getMinimumPrimaryLabelVisibleWidth","hasVisibleSecondaryAction","minimumPrimaryIconWidth","minimumPrimaryLabelWidth","minimumSecondaryWidth","getMultiActionButtonAutoCollapseMode","availableWidth","expandedWidth","previousMode","Expanded","minimumIconsWidth","PrimaryOnly","IconsOnly","getSecondaryContextMenuTriggerStyle","isCollapsed","isExpanded","shouldUseContentWidth","display","minWidth","opacity","pointerEvents","width","flex"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.utils.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum MultiActionButtonAutoCollapseMode {\n    Expanded = 'expanded',\n    IconsOnly = 'icons-only',\n    PrimaryOnly = 'primary-only',\n}\n\nconst AUTO_COLLAPSE_HYSTERESIS_PX = 12;\nexport const MULTI_ACTION_BUTTON_LABEL_GAP_PX = 6;\nexport const MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX = 18;\nexport const MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX = 1;\n\nexport interface GetMultiActionButtonAutoCollapseModeOptions {\n    availableWidth?: number;\n    expandedWidth: number;\n    hasSecondaryAction: boolean;\n    height: number;\n    previousMode?: MultiActionButtonAutoCollapseMode;\n}\n\nexport const getMinimumMultiActionButtonIconsWidth = ({\n    hasSecondaryAction,\n    height,\n}: Pick<GetMultiActionButtonAutoCollapseModeOptions, 'hasSecondaryAction' | 'height'>): number => {\n    const minimumPrimaryActionWidth = height;\n\n    if (!hasSecondaryAction) {\n        return minimumPrimaryActionWidth;\n    }\n\n    return minimumPrimaryActionWidth * 2 + 1;\n};\n\nexport interface GetMinimumPrimaryLabelVisibleWidthOptions {\n    hasVisibleSecondaryAction: boolean;\n    height: number;\n}\n\nexport const getMinimumPrimaryLabelVisibleWidth = ({\n    hasVisibleSecondaryAction,\n    height,\n}: GetMinimumPrimaryLabelVisibleWidthOptions): number => {\n    const minimumPrimaryIconWidth = height;\n    const minimumPrimaryLabelWidth =\n        MULTI_ACTION_BUTTON_LABEL_GAP_PX + MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX;\n    const minimumSecondaryWidth = hasVisibleSecondaryAction\n        ? height + MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX\n        : 0;\n\n    return minimumPrimaryIconWidth + minimumPrimaryLabelWidth + minimumSecondaryWidth;\n};\n\nexport const getMultiActionButtonAutoCollapseMode = ({\n    availableWidth,\n    expandedWidth,\n    hasSecondaryAction,\n    height,\n    previousMode = MultiActionButtonAutoCollapseMode.Expanded,\n}: GetMultiActionButtonAutoCollapseModeOptions): MultiActionButtonAutoCollapseMode => {\n    if (!availableWidth || expandedWidth <= 0) {\n        return MultiActionButtonAutoCollapseMode.Expanded;\n    }\n\n    const minimumIconsWidth = getMinimumMultiActionButtonIconsWidth({\n        hasSecondaryAction,\n        height,\n    });\n\n    if (!hasSecondaryAction) {\n        if (availableWidth < expandedWidth) {\n            return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n        }\n\n        if (\n            previousMode === MultiActionButtonAutoCollapseMode.PrimaryOnly &&\n            availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX\n        ) {\n            return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n        }\n\n        return MultiActionButtonAutoCollapseMode.Expanded;\n    }\n\n    if (previousMode === MultiActionButtonAutoCollapseMode.Expanded) {\n        if (availableWidth < minimumIconsWidth) {\n            return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n        }\n\n        if (availableWidth < expandedWidth) {\n            return MultiActionButtonAutoCollapseMode.IconsOnly;\n        }\n\n        return MultiActionButtonAutoCollapseMode.Expanded;\n    }\n\n    if (previousMode === MultiActionButtonAutoCollapseMode.IconsOnly) {\n        if (availableWidth < minimumIconsWidth) {\n            return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n        }\n\n        if (availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {\n            return MultiActionButtonAutoCollapseMode.IconsOnly;\n        }\n\n        return MultiActionButtonAutoCollapseMode.Expanded;\n    }\n\n    if (availableWidth < minimumIconsWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {\n        return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n    }\n\n    if (availableWidth < expandedWidth) {\n        return MultiActionButtonAutoCollapseMode.IconsOnly;\n    }\n\n    if (availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {\n        return MultiActionButtonAutoCollapseMode.IconsOnly;\n    }\n\n    return MultiActionButtonAutoCollapseMode.Expanded;\n};\n\nexport interface GetSecondaryContextMenuTriggerStyleOptions {\n    height: number;\n    isCollapsed: boolean;\n    isExpanded: boolean;\n    shouldUseContentWidth: boolean;\n}\n\nexport const getSecondaryContextMenuTriggerStyle = ({\n    height,\n    isCollapsed,\n    isExpanded,\n    shouldUseContentWidth,\n}: GetSecondaryContextMenuTriggerStyleOptions): CSSProperties => {\n    if (isCollapsed) {\n        return {\n            display: 'inline-flex',\n            minWidth: 0,\n            opacity: 0,\n            pointerEvents: 'none',\n            width: 0,\n        };\n    }\n\n    if (shouldUseContentWidth) {\n        return {\n            display: 'inline-flex',\n            flex: '0 1 auto',\n            minWidth: 0,\n        };\n    }\n\n    if (isExpanded) {\n        return {\n            display: 'inline-flex',\n            flex: '1 1 auto',\n            minWidth: 0,\n        };\n    }\n\n    return {\n        display: 'inline-flex',\n        flex: '0 0 auto',\n        minWidth: 0,\n        width: height,\n    };\n};\n"],"mappings":";;;;;;IAEYA,iCAAiC,GAAAC,OAAA,CAAAD,iCAAA,0BAAjCA,iCAAiC;EAAjCA,iCAAiC;EAAjCA,iCAAiC;EAAjCA,iCAAiC;EAAA,OAAjCA,iCAAiC;AAAA;AAM7C,MAAME,2BAA2B,GAAG,EAAE;AAC/B,MAAMC,gCAAgC,GAAAF,OAAA,CAAAE,gCAAA,GAAG,CAAC;AAC1C,MAAMC,0CAA0C,GAAAH,OAAA,CAAAG,0CAAA,GAAG,EAAE;AACrD,MAAMC,sCAAsC,GAAAJ,OAAA,CAAAI,sCAAA,GAAG,CAAC;AAUhD,MAAMC,qCAAqC,GAAGA,CAAC;EAClDC,kBAAkB;EAClBC;AACgF,CAAC,KAAa;EAC9F,MAAMC,yBAAyB,GAAGD,MAAM;EAExC,IAAI,CAACD,kBAAkB,EAAE;IACrB,OAAOE,yBAAyB;EACpC;EAEA,OAAOA,yBAAyB,GAAG,CAAC,GAAG,CAAC;AAC5C,CAAC;AAACR,OAAA,CAAAK,qCAAA,GAAAA,qCAAA;AAOK,MAAMI,kCAAkC,GAAGA,CAAC;EAC/CC,yBAAyB;EACzBH;AACuC,CAAC,KAAa;EACrD,MAAMI,uBAAuB,GAAGJ,MAAM;EACtC,MAAMK,wBAAwB,GAC1BV,gCAAgC,GAAGC,0CAA0C;EACjF,MAAMU,qBAAqB,GAAGH,yBAAyB,GACjDH,MAAM,GAAGH,sCAAsC,GAC/C,CAAC;EAEP,OAAOO,uBAAuB,GAAGC,wBAAwB,GAAGC,qBAAqB;AACrF,CAAC;AAACb,OAAA,CAAAS,kCAAA,GAAAA,kCAAA;AAEK,MAAMK,oCAAoC,GAAGA,CAAC;EACjDC,cAAc;EACdC,aAAa;EACbV,kBAAkB;EAClBC,MAAM;EACNU,YAAY,GAAGlB,iCAAiC,CAACmB;AACR,CAAC,KAAwC;EAClF,IAAI,CAACH,cAAc,IAAIC,aAAa,IAAI,CAAC,EAAE;IACvC,OAAOjB,iCAAiC,CAACmB,QAAQ;EACrD;EAEA,MAAMC,iBAAiB,GAAGd,qCAAqC,CAAC;IAC5DC,kBAAkB;IAClBC;EACJ,CAAC,CAAC;EAEF,IAAI,CAACD,kBAAkB,EAAE;IACrB,IAAIS,cAAc,GAAGC,aAAa,EAAE;MAChC,OAAOjB,iCAAiC,CAACqB,WAAW;IACxD;IAEA,IACIH,YAAY,KAAKlB,iCAAiC,CAACqB,WAAW,IAC9DL,cAAc,GAAGC,aAAa,GAAGf,2BAA2B,EAC9D;MACE,OAAOF,iCAAiC,CAACqB,WAAW;IACxD;IAEA,OAAOrB,iCAAiC,CAACmB,QAAQ;EACrD;EAEA,IAAID,YAAY,KAAKlB,iCAAiC,CAACmB,QAAQ,EAAE;IAC7D,IAAIH,cAAc,GAAGI,iBAAiB,EAAE;MACpC,OAAOpB,iCAAiC,CAACqB,WAAW;IACxD;IAEA,IAAIL,cAAc,GAAGC,aAAa,EAAE;MAChC,OAAOjB,iCAAiC,CAACsB,SAAS;IACtD;IAEA,OAAOtB,iCAAiC,CAACmB,QAAQ;EACrD;EAEA,IAAID,YAAY,KAAKlB,iCAAiC,CAACsB,SAAS,EAAE;IAC9D,IAAIN,cAAc,GAAGI,iBAAiB,EAAE;MACpC,OAAOpB,iCAAiC,CAACqB,WAAW;IACxD;IAEA,IAAIL,cAAc,GAAGC,aAAa,GAAGf,2BAA2B,EAAE;MAC9D,OAAOF,iCAAiC,CAACsB,SAAS;IACtD;IAEA,OAAOtB,iCAAiC,CAACmB,QAAQ;EACrD;EAEA,IAAIH,cAAc,GAAGI,iBAAiB,GAAGlB,2BAA2B,EAAE;IAClE,OAAOF,iCAAiC,CAACqB,WAAW;EACxD;EAEA,IAAIL,cAAc,GAAGC,aAAa,EAAE;IAChC,OAAOjB,iCAAiC,CAACsB,SAAS;EACtD;EAEA,IAAIN,cAAc,GAAGC,aAAa,GAAGf,2BAA2B,EAAE;IAC9D,OAAOF,iCAAiC,CAACsB,SAAS;EACtD;EAEA,OAAOtB,iCAAiC,CAACmB,QAAQ;AACrD,CAAC;AAAClB,OAAA,CAAAc,oCAAA,GAAAA,oCAAA;AASK,MAAMQ,mCAAmC,GAAGA,CAAC;EAChDf,MAAM;EACNgB,WAAW;EACXC,UAAU;EACVC;AACwC,CAAC,KAAoB;EAC7D,IAAIF,WAAW,EAAE;IACb,OAAO;MACHG,OAAO,EAAE,aAAa;MACtBC,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAE,CAAC;MACVC,aAAa,EAAE,MAAM;MACrBC,KAAK,EAAE;IACX,CAAC;EACL;EAEA,IAAIL,qBAAqB,EAAE;IACvB,OAAO;MACHC,OAAO,EAAE,aAAa;MACtBK,IAAI,EAAE,UAAU;MAChBJ,QAAQ,EAAE;IACd,CAAC;EACL;EAEA,IAAIH,UAAU,EAAE;IACZ,OAAO;MACHE,OAAO,EAAE,aAAa;MACtBK,IAAI,EAAE,UAAU;MAChBJ,QAAQ,EAAE;IACd,CAAC;EACL;EAEA,OAAO;IACHD,OAAO,EAAE,aAAa;IACtBK,IAAI,EAAE,UAAU;IAChBJ,QAAQ,EAAE,CAAC;IACXG,KAAK,EAAEvB;EACX,CAAC;AACL,CAAC;AAACP,OAAA,CAAAsB,mCAAA,GAAAA,mCAAA","ignoreList":[]}

package/lib/esm/components/multi-action-button/MultiActionButton.js

@@ -1,15 +1,52 @@
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useElementSize, useMeasuredClone } from '../../hooks/element';
 import { useIsTouch } from '../../utils/environment';
 import ContextMenu from '../context-menu/ContextMenu';
 import ActionButton from './action-button/ActionButton';
 import { StyledMultiActionButton, StyledSeparator } from './MultiActionButton.styles';
-import { getSecondaryContextMenuTriggerStyle } from './MultiActionButton.utils';
+import { getMinimumPrimaryLabelVisibleWidth, getMultiActionButtonAutoCollapseMode, getSecondaryContextMenuTriggerStyle, MultiActionButtonAutoCollapseMode } from './MultiActionButton.utils';
 import { MultiActionButtonHeight } from './MultiActionButton.types';
 const SECONDARY_CONTEXT_MENU_ACTION = {
   icon: 'fa fa-chevron-down',
   label: undefined
 };
+const createMeasuredMultiActionButtonContent = ({
+  backgroundColor,
+  gapColor,
+  height,
+  primaryAction,
+  secondaryAction
+}) => /*#__PURE__*/React.createElement(StyledMultiActionButton, {
+  style: {
+    width: 'fit-content'
+  }
+}, /*#__PURE__*/React.createElement(ActionButton, {
+  action: primaryAction,
+  actionType: "primary",
+  backgroundColor: primaryAction.backgroundColor ?? backgroundColor,
+  isCollapsed: false,
+  isDisabled: false,
+  isShrunk: false,
+  isSolo: !secondaryAction,
+  showLabel: true,
+  shouldUseContentWidth: true,
+  height: height
+}), secondaryAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSeparator, {
+  $gapColor: gapColor,
+  $isHidden: false
+}), /*#__PURE__*/React.createElement(ActionButton, {
+  action: secondaryAction,
+  actionType: "secondary",
+  backgroundColor: secondaryAction.backgroundColor ?? backgroundColor,
+  isCollapsed: false,
+  isDisabled: false,
+  isExpanded: false,
+  isHidden: false,
+  showLabel: false,
+  shouldUseContentWidth: true,
+  height: height
+})));
 
 /**
  * Multi-action button with optional secondary action that can expand on hover/click.
@@ -25,6 +62,7 @@ const MultiActionButton = ({
   primaryAction,
   secondaryAction,
   secondaryContextMenu,
+  shouldAutoCollapse = false,
   shouldUseFullWidth,
   width
 }) => {
@@ -32,18 +70,73 @@ const MultiActionButton = ({
   const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);
   const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);
   const autoCollapseTimeoutRef = useRef(null);
+  const multiActionButtonRef = useRef(null);
   const secondaryContextMenuRef = useRef(null);
+  const [autoCollapseMode, setAutoCollapseMode] = useState(MultiActionButtonAutoCollapseMode.Expanded);
   const isTouch = useIsTouch();
+  const parentSize = useElementSize(multiActionButtonRef, {
+    shouldUseParentElement: true
+  });
   const hasSecondaryContextMenu = Boolean(secondaryContextMenu?.length);
+  const secondaryTriggerAction = hasSecondaryContextMenu ? SECONDARY_CONTEXT_MENU_ACTION : secondaryAction;
   const hasExpandableSecondaryAction = Boolean(secondaryAction) && !hasSecondaryContextMenu;
-  const hasSecondaryAction = hasExpandableSecondaryAction || hasSecondaryContextMenu;
-  const resolvedSecondaryAction = hasSecondaryContextMenu ? SECONDARY_CONTEXT_MENU_ACTION : secondaryAction;
+  const hasSecondaryAction = Boolean(secondaryTriggerAction);
   const shouldUseContentWidth = !width && !shouldUseFullWidth;
-  const resolvedWidth = isCollapsed ? height : width ?? (shouldUseFullWidth ? '100%' : 'fit-content');
+  const expandedMeasuredContent = useMemo(() => createMeasuredMultiActionButtonContent({
+    backgroundColor,
+    gapColor,
+    height,
+    primaryAction,
+    secondaryAction: secondaryTriggerAction
+  }), [backgroundColor, gapColor, height, primaryAction, secondaryTriggerAction]);
+  const {
+    measuredElement,
+    width: expandedMeasuredWidth
+  } = useMeasuredClone({
+    content: expandedMeasuredContent
+  });
+  const availableWidth = useMemo(() => {
+    const parentWidth = parentSize?.width;
+    if (typeof width === 'number') {
+      return typeof parentWidth === 'number' ? Math.min(parentWidth, width) : width;
+    }
+    return parentWidth;
+  }, [parentSize?.width, width]);
+  useEffect(() => {
+    if (!shouldAutoCollapse || isCollapsed) {
+      setAutoCollapseMode(MultiActionButtonAutoCollapseMode.Expanded);
+      return;
+    }
+    if (expandedMeasuredWidth <= 0) {
+      return;
+    }
+    setAutoCollapseMode(previousMode => getMultiActionButtonAutoCollapseMode({
+      availableWidth,
+      expandedWidth: expandedMeasuredWidth,
+      hasSecondaryAction,
+      height,
+      previousMode
+    }));
+  }, [availableWidth, expandedMeasuredWidth, hasSecondaryAction, height, isCollapsed, shouldAutoCollapse]);
+  const isAutoIconsOnly = shouldAutoCollapse && autoCollapseMode === MultiActionButtonAutoCollapseMode.IconsOnly;
+  const isAutoPrimaryOnly = shouldAutoCollapse && autoCollapseMode === MultiActionButtonAutoCollapseMode.PrimaryOnly;
+  const shouldKeepFullWidth = Boolean(shouldUseFullWidth);
+  const shouldHideSecondaryForAutoCollapse = hasSecondaryAction && isAutoPrimaryOnly;
+  const effectiveIsCollapsed = isCollapsed || !shouldKeepFullWidth && isAutoPrimaryOnly;
+  const resolvedSecondaryAction = hasSecondaryAction ? secondaryTriggerAction : undefined;
+  const isSecondaryHidden = effectiveIsCollapsed || shouldHideSecondaryForAutoCollapse;
+  const shouldPreventSecondaryExpansion = isAutoIconsOnly || isSecondaryHidden;
+  const shouldKeepPrimaryLabelVisible = shouldKeepFullWidth && shouldAutoCollapse;
+  const minimumPrimaryLabelVisibleWidth = getMinimumPrimaryLabelVisibleWidth({
+    hasVisibleSecondaryAction: hasSecondaryAction,
+    height
+  });
+  const shouldHidePrimaryLabelForMinimumWidth = shouldKeepPrimaryLabelVisible && typeof availableWidth === 'number' && availableWidth <= minimumPrimaryLabelVisibleWidth;
+  const resolvedWidth = shouldKeepFullWidth ? '100%' : effectiveIsCollapsed ? height : width ?? 'fit-content';
   const secondaryContextMenuTriggerStyle = getSecondaryContextMenuTriggerStyle({
     height,
-    isCollapsed,
-    isExpanded: isSecondaryExpanded,
+    isCollapsed: isSecondaryHidden,
+    isExpanded: false,
     shouldUseContentWidth
   });
 
@@ -91,11 +184,13 @@ const MultiActionButton = ({
    * Collapsing the control should also reset any temporary expansion state.
    */
   useEffect(() => {
-    if (isCollapsed) {
+    if (effectiveIsCollapsed || shouldPreventSecondaryExpansion) {
+      clearAutoCollapseTimeout();
       setIsSecondaryExpanded(false);
       setIsExtendedByClick(false);
+      setIsSecondaryHovered(false);
     }
-  }, [isCollapsed]);
+  }, [clearAutoCollapseTimeout, effectiveIsCollapsed, shouldPreventSecondaryExpansion]);
 
   /**
    * Handler for the primary action button.
@@ -117,7 +212,7 @@ const MultiActionButton = ({
    * Handler for the secondary action button.
    */
   const handleSecondaryClick = useCallback(event => {
-    if (!resolvedSecondaryAction || isCollapsed || isDisabled || resolvedSecondaryAction.isDisabled) {
+    if (!resolvedSecondaryAction || isSecondaryHidden || isDisabled || resolvedSecondaryAction.isDisabled) {
       return;
     }
     if (hasSecondaryContextMenu) {
@@ -131,37 +226,40 @@ const MultiActionButton = ({
       isTouch
     };
     resolvedSecondaryAction.onClick?.(payload);
-    expandSecondaryByClick();
-  }, [expandSecondaryByClick, hasSecondaryContextMenu, isCollapsed, isDisabled, isSecondaryExpanded, isTouch, resolvedSecondaryAction]);
+    if (!shouldPreventSecondaryExpansion) {
+      expandSecondaryByClick();
+    }
+  }, [expandSecondaryByClick, hasSecondaryContextMenu, isSecondaryHidden, isDisabled, isSecondaryExpanded, isTouch, resolvedSecondaryAction, shouldPreventSecondaryExpansion]);
 
   /**
    * Desktop hover behavior keeps the secondary action expanded while hovered.
    */
   const handleSecondaryMouseEnter = useCallback(() => {
-    if (!secondaryAction || isCollapsed || isTouch || isDisabled || secondaryAction.isDisabled) {
+    if (!secondaryAction || isSecondaryHidden || isTouch || isDisabled || shouldPreventSecondaryExpansion || secondaryAction.isDisabled) {
       return;
     }
     setIsSecondaryHovered(true);
     if (!isExtendedByClick) {
       setIsSecondaryExpanded(true);
     }
-  }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);
+  }, [isSecondaryHidden, isDisabled, isExtendedByClick, isTouch, secondaryAction, shouldPreventSecondaryExpansion]);
   const handleSecondaryMouseLeave = useCallback(() => {
     if (isTouch) {
       return;
     }
     setIsSecondaryHovered(false);
-    if (!isExtendedByClick && !isCollapsed) {
+    if (!isExtendedByClick && !effectiveIsCollapsed) {
       setIsSecondaryExpanded(false);
     }
-  }, [isCollapsed, isExtendedByClick, isTouch]);
+  }, [effectiveIsCollapsed, isExtendedByClick, isTouch]);
 
   /**
    * Secondary label is visible when expanded or when hovered (desktop only).
    */
   const isSecondaryLabelVisible = isSecondaryExpanded || !isTouch && isSecondaryHovered;
-  return /*#__PURE__*/React.createElement(StyledMultiActionButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, measuredElement, /*#__PURE__*/React.createElement(StyledMultiActionButton, {
     className: clsx('beta-chayns-multi-action', className),
+    ref: multiActionButtonRef,
     style: {
       maxWidth: '100%',
       width: resolvedWidth
@@ -170,16 +268,17 @@ const MultiActionButton = ({
     action: primaryAction,
     actionType: "primary",
     backgroundColor: primaryAction.backgroundColor ?? backgroundColor,
-    isCollapsed: isCollapsed,
+    isCollapsed: effectiveIsCollapsed,
     isDisabled: isDisabled,
-    isShrunk: hasExpandableSecondaryAction && isSecondaryExpanded,
-    isSolo: !hasSecondaryAction && !isCollapsed,
+    isShrunk: hasSecondaryAction && (!shouldKeepFullWidth && isAutoIconsOnly || isSecondaryExpanded),
+    isSolo: !hasSecondaryAction || isSecondaryHidden || effectiveIsCollapsed,
     onClick: handlePrimaryClick,
-    showLabel: !isCollapsed && (!hasExpandableSecondaryAction || !isSecondaryExpanded),
+    showLabel: !effectiveIsCollapsed && !shouldHidePrimaryLabelForMinimumWidth && (shouldKeepPrimaryLabelVisible || !isAutoIconsOnly) && (shouldKeepPrimaryLabelVisible || !shouldHideSecondaryForAutoCollapse) && (!hasExpandableSecondaryAction || !isSecondaryExpanded),
     shouldUseContentWidth: shouldUseContentWidth,
     height: height
-  }), resolvedSecondaryAction && /*#__PURE__*/React.createElement(React.Fragment, null, !isCollapsed && /*#__PURE__*/React.createElement(StyledSeparator, {
-    $gapColor: gapColor
+  }), hasSecondaryAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSeparator, {
+    $gapColor: gapColor,
+    $isHidden: isSecondaryHidden
   }), hasSecondaryContextMenu ? /*#__PURE__*/React.createElement(ContextMenu, {
     items: secondaryContextMenu ?? [],
     ref: secondaryContextMenuRef,
@@ -189,32 +288,34 @@ const MultiActionButton = ({
     yOffset: -6,
     style: secondaryContextMenuTriggerStyle
   }, /*#__PURE__*/React.createElement(ActionButton, {
-    action: resolvedSecondaryAction,
+    action: resolvedSecondaryAction ?? SECONDARY_CONTEXT_MENU_ACTION,
     actionType: "secondary",
-    backgroundColor: resolvedSecondaryAction.backgroundColor ?? backgroundColor,
-    isCollapsed: isCollapsed,
+    backgroundColor: resolvedSecondaryAction?.backgroundColor ?? backgroundColor,
+    isCollapsed: false,
     isDisabled: isDisabled,
     isExpanded: false,
-    isHidden: isCollapsed,
+    isHidden: isSecondaryHidden,
+    key: "multi-action-secondary-context-menu",
     onClick: handleSecondaryClick,
     showLabel: false,
     shouldUseContentWidth: shouldUseContentWidth,
     height: height
   })) : /*#__PURE__*/React.createElement(ActionButton, {
-    action: resolvedSecondaryAction,
+    action: resolvedSecondaryAction ?? secondaryAction ?? SECONDARY_CONTEXT_MENU_ACTION,
     actionType: "secondary",
-    backgroundColor: resolvedSecondaryAction.backgroundColor ?? backgroundColor,
-    isCollapsed: isCollapsed,
+    backgroundColor: resolvedSecondaryAction?.backgroundColor ?? backgroundColor,
+    isCollapsed: false,
     isDisabled: isDisabled,
-    isExpanded: isSecondaryExpanded,
-    isHidden: isCollapsed,
+    isExpanded: !isAutoIconsOnly && isSecondaryExpanded,
+    isHidden: isSecondaryHidden,
+    key: "multi-action-secondary-button",
     onClick: handleSecondaryClick,
     onMouseEnter: handleSecondaryMouseEnter,
     onMouseLeave: handleSecondaryMouseLeave,
-    showLabel: isSecondaryLabelVisible,
+    showLabel: !isSecondaryHidden && !isAutoIconsOnly && isSecondaryLabelVisible,
     shouldUseContentWidth: shouldUseContentWidth,
     height: height
-  })));
+  }))));
 };
 MultiActionButton.displayName = 'MultiActionButton';
 export default MultiActionButton;

package/lib/esm/components/multi-action-button/MultiActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.js","names":["clsx","React","useCallback","useEffect","useRef","useState","useIsTouch","ContextMenu","ActionButton","StyledMultiActionButton","StyledSeparator","getSecondaryContextMenuTriggerStyle","MultiActionButtonHeight","SECONDARY_CONTEXT_MENU_ACTION","icon","label","undefined","MultiActionButton","backgroundColor","className","extendedTimeoutMs","gapColor","height","Medium","isCollapsed","isDisabled","primaryAction","secondaryAction","secondaryContextMenu","shouldUseFullWidth","width","isExtendedByClick","setIsExtendedByClick","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","secondaryContextMenuRef","isTouch","hasSecondaryContextMenu","Boolean","length","hasExpandableSecondaryAction","hasSecondaryAction","resolvedSecondaryAction","shouldUseContentWidth","resolvedWidth","secondaryContextMenuTriggerStyle","isExpanded","clearAutoCollapseTimeout","current","window","clearTimeout","resetAutoCollapseTimeout","setTimeout","expandSecondaryByClick","handlePrimaryClick","event","payload","action","isExtended","onClick","handleSecondaryClick","show","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","createElement","style","maxWidth","actionType","isShrunk","isSolo","showLabel","Fragment","$gapColor","items","ref","shouldDisableClick","shouldUseDefaultTriggerStyles","shouldHidePopupArrow","yOffset","isHidden","onMouseEnter","onMouseLeave","displayName"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport type { ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport ActionButton from './action-button/ActionButton';\nimport { StyledMultiActionButton, StyledSeparator } from './MultiActionButton.styles';\nimport { getSecondaryContextMenuTriggerStyle } from './MultiActionButton.utils';\nimport { MultiActionButtonHeight } from './MultiActionButton.types';\nimport type {\n    MultiActionButtonAction,\n    MultiActionButtonActionEvent,\n    MultiActionButtonProps,\n} from './MultiActionButton.types';\n\nconst SECONDARY_CONTEXT_MENU_ACTION: MultiActionButtonAction = {\n    icon: 'fa fa-chevron-down',\n    label: undefined,\n};\n\n/**\n * Multi-action button with optional secondary action that can expand on hover/click.\n */\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n    backgroundColor,\n    className,\n    extendedTimeoutMs = 3000,\n    gapColor,\n    height = MultiActionButtonHeight.Medium,\n    isCollapsed = false,\n    isDisabled = false,\n    primaryAction,\n    secondaryAction,\n    secondaryContextMenu,\n    shouldUseFullWidth,\n    width,\n}) => {\n    const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n    const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n    const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n\n    const autoCollapseTimeoutRef = useRef<number | null>(null);\n    const secondaryContextMenuRef = useRef<ContextMenuRef>(null);\n\n    const isTouch = useIsTouch();\n\n    const hasSecondaryContextMenu = Boolean(secondaryContextMenu?.length);\n    const hasExpandableSecondaryAction = Boolean(secondaryAction) && !hasSecondaryContextMenu;\n    const hasSecondaryAction = hasExpandableSecondaryAction || hasSecondaryContextMenu;\n    const resolvedSecondaryAction = hasSecondaryContextMenu\n        ? SECONDARY_CONTEXT_MENU_ACTION\n        : secondaryAction;\n    const shouldUseContentWidth = !width && !shouldUseFullWidth;\n\n    const resolvedWidth = isCollapsed\n        ? height\n        : (width ?? (shouldUseFullWidth ? '100%' : 'fit-content'));\n\n    const secondaryContextMenuTriggerStyle = getSecondaryContextMenuTriggerStyle({\n        height,\n        isCollapsed,\n        isExpanded: isSecondaryExpanded,\n        shouldUseContentWidth,\n    });\n\n    /**\n     * Clears the current auto-collapse timer without changing visual state.\n     */\n    const clearAutoCollapseTimeout = useCallback(() => {\n        if (autoCollapseTimeoutRef.current) {\n            window.clearTimeout(autoCollapseTimeoutRef.current);\n            autoCollapseTimeoutRef.current = null;\n        }\n    }, []);\n\n    /**\n     * Clears and restarts the auto-collapse timer used after click-triggered expansion.\n     */\n    const resetAutoCollapseTimeout = useCallback(() => {\n        clearAutoCollapseTimeout();\n\n        if (extendedTimeoutMs <= 0) {\n            return;\n        }\n\n        autoCollapseTimeoutRef.current = window.setTimeout(() => {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }, extendedTimeoutMs);\n    }, [clearAutoCollapseTimeout, extendedTimeoutMs]);\n\n    /**\n     * Expands the secondary action and remembers that it originated from a click.\n     */\n    const expandSecondaryByClick = useCallback(() => {\n        setIsSecondaryExpanded(true);\n        setIsExtendedByClick(true);\n        resetAutoCollapseTimeout();\n    }, [resetAutoCollapseTimeout]);\n\n    /**\n     * Cleanup timers on unmount.\n     */\n    useEffect(\n        () => () => {\n            clearAutoCollapseTimeout();\n        },\n        [clearAutoCollapseTimeout],\n    );\n\n    /**\n     * Collapsing the control should also reset any temporary expansion state.\n     */\n    useEffect(() => {\n        if (isCollapsed) {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }\n    }, [isCollapsed]);\n\n    /**\n     * Handler for the primary action button.\n     */\n    const handlePrimaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (isDisabled || primaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'primary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            primaryAction.onClick?.(payload);\n        },\n        [isDisabled, isSecondaryExpanded, isTouch, primaryAction],\n    );\n\n    /**\n     * Handler for the secondary action button.\n     */\n    const handleSecondaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (\n                !resolvedSecondaryAction ||\n                isCollapsed ||\n                isDisabled ||\n                resolvedSecondaryAction.isDisabled\n            ) {\n                return;\n            }\n\n            if (hasSecondaryContextMenu) {\n                secondaryContextMenuRef.current?.show();\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'secondary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            resolvedSecondaryAction.onClick?.(payload);\n            expandSecondaryByClick();\n        },\n        [\n            expandSecondaryByClick,\n            hasSecondaryContextMenu,\n            isCollapsed,\n            isDisabled,\n            isSecondaryExpanded,\n            isTouch,\n            resolvedSecondaryAction,\n        ],\n    );\n\n    /**\n     * Desktop hover behavior keeps the secondary action expanded while hovered.\n     */\n    const handleSecondaryMouseEnter = useCallback(() => {\n        if (\n            !secondaryAction ||\n            isCollapsed ||\n            isTouch ||\n            isDisabled ||\n            secondaryAction.isDisabled\n        ) {\n            return;\n        }\n\n        setIsSecondaryHovered(true);\n        if (!isExtendedByClick) {\n            setIsSecondaryExpanded(true);\n        }\n    }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);\n\n    const handleSecondaryMouseLeave = useCallback(() => {\n        if (isTouch) {\n            return;\n        }\n\n        setIsSecondaryHovered(false);\n        if (!isExtendedByClick && !isCollapsed) {\n            setIsSecondaryExpanded(false);\n        }\n    }, [isCollapsed, isExtendedByClick, isTouch]);\n\n    /**\n     * Secondary label is visible when expanded or when hovered (desktop only).\n     */\n    const isSecondaryLabelVisible = isSecondaryExpanded || (!isTouch && isSecondaryHovered);\n\n    return (\n        <StyledMultiActionButton\n            className={clsx('beta-chayns-multi-action', className)}\n            style={{ maxWidth: '100%', width: resolvedWidth }}\n        >\n            <ActionButton\n                action={primaryAction}\n                actionType=\"primary\"\n                backgroundColor={primaryAction.backgroundColor ?? backgroundColor}\n                isCollapsed={isCollapsed}\n                isDisabled={isDisabled}\n                isShrunk={hasExpandableSecondaryAction && isSecondaryExpanded}\n                isSolo={!hasSecondaryAction && !isCollapsed}\n                onClick={handlePrimaryClick}\n                showLabel={!isCollapsed && (!hasExpandableSecondaryAction || !isSecondaryExpanded)}\n                shouldUseContentWidth={shouldUseContentWidth}\n                height={height}\n            />\n            {resolvedSecondaryAction && (\n                <>\n                    {!isCollapsed && <StyledSeparator $gapColor={gapColor} />}\n                    {hasSecondaryContextMenu ? (\n                        <ContextMenu\n                            items={secondaryContextMenu ?? []}\n                            ref={secondaryContextMenuRef}\n                            shouldDisableClick\n                            shouldUseDefaultTriggerStyles={false}\n                            shouldHidePopupArrow\n                            yOffset={-6}\n                            style={secondaryContextMenuTriggerStyle}\n                        >\n                            <ActionButton\n                                action={resolvedSecondaryAction}\n                                actionType=\"secondary\"\n                                backgroundColor={\n                                    resolvedSecondaryAction.backgroundColor ?? backgroundColor\n                                }\n                                isCollapsed={isCollapsed}\n                                isDisabled={isDisabled}\n                                isExpanded={false}\n                                isHidden={isCollapsed}\n                                onClick={handleSecondaryClick}\n                                showLabel={false}\n                                shouldUseContentWidth={shouldUseContentWidth}\n                                height={height}\n                            />\n                        </ContextMenu>\n                    ) : (\n                        <ActionButton\n                            action={resolvedSecondaryAction}\n                            actionType=\"secondary\"\n                            backgroundColor={\n                                resolvedSecondaryAction.backgroundColor ?? backgroundColor\n                            }\n                            isCollapsed={isCollapsed}\n                            isDisabled={isDisabled}\n                            isExpanded={isSecondaryExpanded}\n                            isHidden={isCollapsed}\n                            onClick={handleSecondaryClick}\n                            onMouseEnter={handleSecondaryMouseEnter}\n                            onMouseLeave={handleSecondaryMouseLeave}\n                            showLabel={isSecondaryLabelVisible}\n                            shouldUseContentWidth={shouldUseContentWidth}\n                            height={height}\n                        />\n                    )}\n                </>\n            )}\n        </StyledMultiActionButton>\n    );\n};\n\nMultiActionButton.displayName = 'MultiActionButton';\n\nexport default MultiActionButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.js","names":["clsx","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","useMeasuredClone","useIsTouch","ContextMenu","ActionButton","StyledMultiActionButton","StyledSeparator","getMinimumPrimaryLabelVisibleWidth","getMultiActionButtonAutoCollapseMode","getSecondaryContextMenuTriggerStyle","MultiActionButtonAutoCollapseMode","MultiActionButtonHeight","SECONDARY_CONTEXT_MENU_ACTION","icon","label","undefined","createMeasuredMultiActionButtonContent","backgroundColor","gapColor","height","primaryAction","secondaryAction","createElement","style","width","action","actionType","isCollapsed","isDisabled","isShrunk","isSolo","showLabel","shouldUseContentWidth","Fragment","$gapColor","$isHidden","isExpanded","isHidden","MultiActionButton","className","extendedTimeoutMs","Medium","secondaryContextMenu","shouldAutoCollapse","shouldUseFullWidth","isExtendedByClick","setIsExtendedByClick","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","multiActionButtonRef","secondaryContextMenuRef","autoCollapseMode","setAutoCollapseMode","Expanded","isTouch","parentSize","shouldUseParentElement","hasSecondaryContextMenu","Boolean","length","secondaryTriggerAction","hasExpandableSecondaryAction","hasSecondaryAction","expandedMeasuredContent","measuredElement","expandedMeasuredWidth","content","availableWidth","parentWidth","Math","min","previousMode","expandedWidth","isAutoIconsOnly","IconsOnly","isAutoPrimaryOnly","PrimaryOnly","shouldKeepFullWidth","shouldHideSecondaryForAutoCollapse","effectiveIsCollapsed","resolvedSecondaryAction","isSecondaryHidden","shouldPreventSecondaryExpansion","shouldKeepPrimaryLabelVisible","minimumPrimaryLabelVisibleWidth","hasVisibleSecondaryAction","shouldHidePrimaryLabelForMinimumWidth","resolvedWidth","secondaryContextMenuTriggerStyle","clearAutoCollapseTimeout","current","window","clearTimeout","resetAutoCollapseTimeout","setTimeout","expandSecondaryByClick","handlePrimaryClick","event","payload","isExtended","onClick","handleSecondaryClick","show","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","ref","maxWidth","items","shouldDisableClick","shouldUseDefaultTriggerStyles","shouldHidePopupArrow","yOffset","key","onMouseEnter","onMouseLeave","displayName"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, {\n    FC,\n    MouseEvent,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useElementSize, useMeasuredClone } from '../../hooks/element';\nimport { useIsTouch } from '../../utils/environment';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport type { ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport ActionButton from './action-button/ActionButton';\nimport { StyledMultiActionButton, StyledSeparator } from './MultiActionButton.styles';\nimport {\n    getMinimumPrimaryLabelVisibleWidth,\n    getMultiActionButtonAutoCollapseMode,\n    getSecondaryContextMenuTriggerStyle,\n    MultiActionButtonAutoCollapseMode,\n} from './MultiActionButton.utils';\nimport { MultiActionButtonHeight } from './MultiActionButton.types';\nimport type {\n    MultiActionButtonAction,\n    MultiActionButtonActionEvent,\n    MultiActionButtonProps,\n} from './MultiActionButton.types';\n\nconst SECONDARY_CONTEXT_MENU_ACTION: MultiActionButtonAction = {\n    icon: 'fa fa-chevron-down',\n    label: undefined,\n};\n\ninterface CreateMeasuredMultiActionButtonContentOptions {\n    backgroundColor?: string;\n    gapColor?: string;\n    height: number;\n    primaryAction: MultiActionButtonAction;\n    secondaryAction?: MultiActionButtonAction;\n}\n\nconst createMeasuredMultiActionButtonContent = ({\n    backgroundColor,\n    gapColor,\n    height,\n    primaryAction,\n    secondaryAction,\n}: CreateMeasuredMultiActionButtonContentOptions): ReactNode => (\n    <StyledMultiActionButton style={{ width: 'fit-content' }}>\n        <ActionButton\n            action={primaryAction}\n            actionType=\"primary\"\n            backgroundColor={primaryAction.backgroundColor ?? backgroundColor}\n            isCollapsed={false}\n            isDisabled={false}\n            isShrunk={false}\n            isSolo={!secondaryAction}\n            showLabel\n            shouldUseContentWidth\n            height={height}\n        />\n        {secondaryAction && (\n            <>\n                <StyledSeparator $gapColor={gapColor} $isHidden={false} />\n                <ActionButton\n                    action={secondaryAction}\n                    actionType=\"secondary\"\n                    backgroundColor={secondaryAction.backgroundColor ?? backgroundColor}\n                    isCollapsed={false}\n                    isDisabled={false}\n                    isExpanded={false}\n                    isHidden={false}\n                    showLabel={false}\n                    shouldUseContentWidth\n                    height={height}\n                />\n            </>\n        )}\n    </StyledMultiActionButton>\n);\n\n/**\n * Multi-action button with optional secondary action that can expand on hover/click.\n */\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n    backgroundColor,\n    className,\n    extendedTimeoutMs = 3000,\n    gapColor,\n    height = MultiActionButtonHeight.Medium,\n    isCollapsed = false,\n    isDisabled = false,\n    primaryAction,\n    secondaryAction,\n    secondaryContextMenu,\n    shouldAutoCollapse = false,\n    shouldUseFullWidth,\n    width,\n}) => {\n    const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n    const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n    const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n\n    const autoCollapseTimeoutRef = useRef<number | null>(null);\n    const multiActionButtonRef = useRef<HTMLDivElement | null>(null);\n    const secondaryContextMenuRef = useRef<ContextMenuRef>(null);\n    const [autoCollapseMode, setAutoCollapseMode] = useState<MultiActionButtonAutoCollapseMode>(\n        MultiActionButtonAutoCollapseMode.Expanded,\n    );\n\n    const isTouch = useIsTouch();\n    const parentSize = useElementSize(multiActionButtonRef, { shouldUseParentElement: true });\n\n    const hasSecondaryContextMenu = Boolean(secondaryContextMenu?.length);\n    const secondaryTriggerAction = hasSecondaryContextMenu\n        ? SECONDARY_CONTEXT_MENU_ACTION\n        : secondaryAction;\n    const hasExpandableSecondaryAction = Boolean(secondaryAction) && !hasSecondaryContextMenu;\n    const hasSecondaryAction = Boolean(secondaryTriggerAction);\n    const shouldUseContentWidth = !width && !shouldUseFullWidth;\n\n    const expandedMeasuredContent = useMemo(\n        () =>\n            createMeasuredMultiActionButtonContent({\n                backgroundColor,\n                gapColor,\n                height,\n                primaryAction,\n                secondaryAction: secondaryTriggerAction,\n            }),\n        [backgroundColor, gapColor, height, primaryAction, secondaryTriggerAction],\n    );\n\n    const { measuredElement, width: expandedMeasuredWidth } = useMeasuredClone({\n        content: expandedMeasuredContent,\n    });\n\n    const availableWidth = useMemo(() => {\n        const parentWidth = parentSize?.width;\n\n        if (typeof width === 'number') {\n            return typeof parentWidth === 'number' ? Math.min(parentWidth, width) : width;\n        }\n\n        return parentWidth;\n    }, [parentSize?.width, width]);\n\n    useEffect(() => {\n        if (!shouldAutoCollapse || isCollapsed) {\n            setAutoCollapseMode(MultiActionButtonAutoCollapseMode.Expanded);\n            return;\n        }\n\n        if (expandedMeasuredWidth <= 0) {\n            return;\n        }\n\n        setAutoCollapseMode((previousMode) =>\n            getMultiActionButtonAutoCollapseMode({\n                availableWidth,\n                expandedWidth: expandedMeasuredWidth,\n                hasSecondaryAction,\n                height,\n                previousMode,\n            }),\n        );\n    }, [\n        availableWidth,\n        expandedMeasuredWidth,\n        hasSecondaryAction,\n        height,\n        isCollapsed,\n        shouldAutoCollapse,\n    ]);\n\n    const isAutoIconsOnly =\n        shouldAutoCollapse && autoCollapseMode === MultiActionButtonAutoCollapseMode.IconsOnly;\n    const isAutoPrimaryOnly =\n        shouldAutoCollapse && autoCollapseMode === MultiActionButtonAutoCollapseMode.PrimaryOnly;\n    const shouldKeepFullWidth = Boolean(shouldUseFullWidth);\n    const shouldHideSecondaryForAutoCollapse = hasSecondaryAction && isAutoPrimaryOnly;\n    const effectiveIsCollapsed = isCollapsed || (!shouldKeepFullWidth && isAutoPrimaryOnly);\n    const resolvedSecondaryAction = hasSecondaryAction ? secondaryTriggerAction : undefined;\n    const isSecondaryHidden = effectiveIsCollapsed || shouldHideSecondaryForAutoCollapse;\n    const shouldPreventSecondaryExpansion = isAutoIconsOnly || isSecondaryHidden;\n    const shouldKeepPrimaryLabelVisible = shouldKeepFullWidth && shouldAutoCollapse;\n    const minimumPrimaryLabelVisibleWidth = getMinimumPrimaryLabelVisibleWidth({\n        hasVisibleSecondaryAction: hasSecondaryAction,\n        height,\n    });\n    const shouldHidePrimaryLabelForMinimumWidth =\n        shouldKeepPrimaryLabelVisible &&\n        typeof availableWidth === 'number' &&\n        availableWidth <= minimumPrimaryLabelVisibleWidth;\n\n    const resolvedWidth = shouldKeepFullWidth\n        ? '100%'\n        : effectiveIsCollapsed\n          ? height\n          : (width ?? 'fit-content');\n\n    const secondaryContextMenuTriggerStyle = getSecondaryContextMenuTriggerStyle({\n        height,\n        isCollapsed: isSecondaryHidden,\n        isExpanded: false,\n        shouldUseContentWidth,\n    });\n\n    /**\n     * Clears the current auto-collapse timer without changing visual state.\n     */\n    const clearAutoCollapseTimeout = useCallback(() => {\n        if (autoCollapseTimeoutRef.current) {\n            window.clearTimeout(autoCollapseTimeoutRef.current);\n            autoCollapseTimeoutRef.current = null;\n        }\n    }, []);\n\n    /**\n     * Clears and restarts the auto-collapse timer used after click-triggered expansion.\n     */\n    const resetAutoCollapseTimeout = useCallback(() => {\n        clearAutoCollapseTimeout();\n\n        if (extendedTimeoutMs <= 0) {\n            return;\n        }\n\n        autoCollapseTimeoutRef.current = window.setTimeout(() => {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }, extendedTimeoutMs);\n    }, [clearAutoCollapseTimeout, extendedTimeoutMs]);\n\n    /**\n     * Expands the secondary action and remembers that it originated from a click.\n     */\n    const expandSecondaryByClick = useCallback(() => {\n        setIsSecondaryExpanded(true);\n        setIsExtendedByClick(true);\n        resetAutoCollapseTimeout();\n    }, [resetAutoCollapseTimeout]);\n\n    /**\n     * Cleanup timers on unmount.\n     */\n    useEffect(\n        () => () => {\n            clearAutoCollapseTimeout();\n        },\n        [clearAutoCollapseTimeout],\n    );\n\n    /**\n     * Collapsing the control should also reset any temporary expansion state.\n     */\n    useEffect(() => {\n        if (effectiveIsCollapsed || shouldPreventSecondaryExpansion) {\n            clearAutoCollapseTimeout();\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n            setIsSecondaryHovered(false);\n        }\n    }, [clearAutoCollapseTimeout, effectiveIsCollapsed, shouldPreventSecondaryExpansion]);\n\n    /**\n     * Handler for the primary action button.\n     */\n    const handlePrimaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (isDisabled || primaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'primary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            primaryAction.onClick?.(payload);\n        },\n        [isDisabled, isSecondaryExpanded, isTouch, primaryAction],\n    );\n\n    /**\n     * Handler for the secondary action button.\n     */\n    const handleSecondaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (\n                !resolvedSecondaryAction ||\n                isSecondaryHidden ||\n                isDisabled ||\n                resolvedSecondaryAction.isDisabled\n            ) {\n                return;\n            }\n\n            if (hasSecondaryContextMenu) {\n                secondaryContextMenuRef.current?.show();\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'secondary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            resolvedSecondaryAction.onClick?.(payload);\n            if (!shouldPreventSecondaryExpansion) {\n                expandSecondaryByClick();\n            }\n        },\n        [\n            expandSecondaryByClick,\n            hasSecondaryContextMenu,\n            isSecondaryHidden,\n            isDisabled,\n            isSecondaryExpanded,\n            isTouch,\n            resolvedSecondaryAction,\n            shouldPreventSecondaryExpansion,\n        ],\n    );\n\n    /**\n     * Desktop hover behavior keeps the secondary action expanded while hovered.\n     */\n    const handleSecondaryMouseEnter = useCallback(() => {\n        if (\n            !secondaryAction ||\n            isSecondaryHidden ||\n            isTouch ||\n            isDisabled ||\n            shouldPreventSecondaryExpansion ||\n            secondaryAction.isDisabled\n        ) {\n            return;\n        }\n\n        setIsSecondaryHovered(true);\n        if (!isExtendedByClick) {\n            setIsSecondaryExpanded(true);\n        }\n    }, [\n        isSecondaryHidden,\n        isDisabled,\n        isExtendedByClick,\n        isTouch,\n        secondaryAction,\n        shouldPreventSecondaryExpansion,\n    ]);\n\n    const handleSecondaryMouseLeave = useCallback(() => {\n        if (isTouch) {\n            return;\n        }\n\n        setIsSecondaryHovered(false);\n        if (!isExtendedByClick && !effectiveIsCollapsed) {\n            setIsSecondaryExpanded(false);\n        }\n    }, [effectiveIsCollapsed, isExtendedByClick, isTouch]);\n\n    /**\n     * Secondary label is visible when expanded or when hovered (desktop only).\n     */\n    const isSecondaryLabelVisible = isSecondaryExpanded || (!isTouch && isSecondaryHovered);\n\n    return (\n        <>\n            {measuredElement}\n            <StyledMultiActionButton\n                className={clsx('beta-chayns-multi-action', className)}\n                ref={multiActionButtonRef}\n                style={{ maxWidth: '100%', width: resolvedWidth }}\n            >\n                <ActionButton\n                    action={primaryAction}\n                    actionType=\"primary\"\n                    backgroundColor={primaryAction.backgroundColor ?? backgroundColor}\n                    isCollapsed={effectiveIsCollapsed}\n                    isDisabled={isDisabled}\n                    isShrunk={\n                        hasSecondaryAction &&\n                        ((!shouldKeepFullWidth && isAutoIconsOnly) || isSecondaryExpanded)\n                    }\n                    isSolo={!hasSecondaryAction || isSecondaryHidden || effectiveIsCollapsed}\n                    onClick={handlePrimaryClick}\n                    showLabel={\n                        !effectiveIsCollapsed &&\n                        !shouldHidePrimaryLabelForMinimumWidth &&\n                        (shouldKeepPrimaryLabelVisible || !isAutoIconsOnly) &&\n                        (shouldKeepPrimaryLabelVisible || !shouldHideSecondaryForAutoCollapse) &&\n                        (!hasExpandableSecondaryAction || !isSecondaryExpanded)\n                    }\n                    shouldUseContentWidth={shouldUseContentWidth}\n                    height={height}\n                />\n                {hasSecondaryAction && (\n                    <>\n                        <StyledSeparator $gapColor={gapColor} $isHidden={isSecondaryHidden} />\n                        {hasSecondaryContextMenu ? (\n                            <ContextMenu\n                                items={secondaryContextMenu ?? []}\n                                ref={secondaryContextMenuRef}\n                                shouldDisableClick\n                                shouldUseDefaultTriggerStyles={false}\n                                shouldHidePopupArrow\n                                yOffset={-6}\n                                style={secondaryContextMenuTriggerStyle}\n                            >\n                                <ActionButton\n                                    action={\n                                        resolvedSecondaryAction ?? SECONDARY_CONTEXT_MENU_ACTION\n                                    }\n                                    actionType=\"secondary\"\n                                    backgroundColor={\n                                        resolvedSecondaryAction?.backgroundColor ?? backgroundColor\n                                    }\n                                    isCollapsed={false}\n                                    isDisabled={isDisabled}\n                                    isExpanded={false}\n                                    isHidden={isSecondaryHidden}\n                                    key=\"multi-action-secondary-context-menu\"\n                                    onClick={handleSecondaryClick}\n                                    showLabel={false}\n                                    shouldUseContentWidth={shouldUseContentWidth}\n                                    height={height}\n                                />\n                            </ContextMenu>\n                        ) : (\n                            <ActionButton\n                                action={\n                                    resolvedSecondaryAction ??\n                                    secondaryAction ??\n                                    SECONDARY_CONTEXT_MENU_ACTION\n                                }\n                                actionType=\"secondary\"\n                                backgroundColor={\n                                    resolvedSecondaryAction?.backgroundColor ?? backgroundColor\n                                }\n                                isCollapsed={false}\n                                isDisabled={isDisabled}\n                                isExpanded={!isAutoIconsOnly && isSecondaryExpanded}\n                                isHidden={isSecondaryHidden}\n                                key=\"multi-action-secondary-button\"\n                                onClick={handleSecondaryClick}\n                                onMouseEnter={handleSecondaryMouseEnter}\n                                onMouseLeave={handleSecondaryMouseLeave}\n                                showLabel={\n                                    !isSecondaryHidden &&\n                                    !isAutoIconsOnly &&\n                                    isSecondaryLabelVisible\n                                }\n                                shouldUseContentWidth={shouldUseContentWidth}\n                                height={height}\n                            />\n                        )}\n                    </>\n                )}\n            </StyledMultiActionButton>\n        </>\n    );\n};\n\nMultiActionButton.displayName = 'MultiActionButton';\n\nexport default MultiActionButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/multi-action-button/MultiActionButton.styles.js

@@ -4,6 +4,8 @@ export const StyledMultiActionButton = styled(motion.div)`
     align-items: stretch;
     display: inline-flex;
     max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
     position: relative;
     transition: width 0.2s ease;
     width: fit-content;
@@ -14,7 +16,19 @@ export const StyledSeparator = styled.span`
   $gapColor,
   theme
 }) => $gapColor || theme?.['cw-body-background'] || '#fff'};
-    flex: 0 0 1px;
-    width: 1px;
+    flex: 0 0 ${({
+  $isHidden
+}) => $isHidden ? 0 : 1}px;
+    opacity: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1};
+    overflow: hidden;
+    transition:
+        flex-basis 0.2s ease,
+        opacity 0.2s ease,
+        width 0.2s ease;
+    width: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1}px;
 `;
 //# sourceMappingURL=MultiActionButton.styles.js.map

package/lib/esm/components/multi-action-button/MultiActionButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.styles.js","names":["motion","styled","StyledMultiActionButton","div","StyledSeparator","span","$gapColor","theme"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMultiActionButton = styled(motion.div)`\n    align-items: stretch;\n    display: inline-flex;\n    max-width: 100%;\n    position: relative;\n    transition: width 0.2s ease;\n    width: fit-content;\n`;\n\ntype StyledSeparatorProps = WithTheme<{\n    $gapColor?: string;\n}>;\n\nexport const StyledSeparator = styled.span<StyledSeparatorProps>`\n    align-self: stretch;\n    background: ${({ $gapColor, theme }) => $gapColor || theme?.['cw-body-background'] || '#fff'};\n    flex: 0 0 1px;\n    width: 1px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,eAAe,GAAGH,MAAM,CAACI,IAA0B;AAChE;AACA,kBAAkB,CAAC;EAAEC,SAAS;EAAEC;AAAM,CAAC,KAAKD,SAAS,IAAIC,KAAK,GAAG,oBAAoB,CAAC,IAAI,MAAM;AAChG;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.styles.js","names":["motion","styled","StyledMultiActionButton","div","StyledSeparator","span","$gapColor","theme","$isHidden"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMultiActionButton = styled(motion.div)`\n    align-items: stretch;\n    display: inline-flex;\n    max-width: 100%;\n    min-width: 0;\n    overflow: hidden;\n    position: relative;\n    transition: width 0.2s ease;\n    width: fit-content;\n`;\n\ntype StyledSeparatorProps = WithTheme<{\n    $gapColor?: string;\n    $isHidden?: boolean;\n}>;\n\nexport const StyledSeparator = styled.span<StyledSeparatorProps>`\n    align-self: stretch;\n    background: ${({ $gapColor, theme }) => $gapColor || theme?.['cw-body-background'] || '#fff'};\n    flex: 0 0 ${({ $isHidden }) => ($isHidden ? 0 : 1)}px;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    overflow: hidden;\n    transition:\n        flex-basis 0.2s ease,\n        opacity 0.2s ease,\n        width 0.2s ease;\n    width: ${({ $isHidden }) => ($isHidden ? 0 : 1)}px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,eAAe,GAAGH,MAAM,CAACI,IAA0B;AAChE;AACA,kBAAkB,CAAC;EAAEC,SAAS;EAAEC;AAAM,CAAC,KAAKD,SAAS,IAAIC,KAAK,GAAG,oBAAoB,CAAC,IAAI,MAAM;AAChG,gBAAgB,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACtD,eAAe,CAAC;EAAEA;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACnD,CAAC","ignoreList":[]}

package/lib/esm/components/multi-action-button/MultiActionButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactElement, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\nimport type { ContextMenuItem } from '../context-menu/ContextMenu.types';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n    /**\n     * Pulsing background effect.\n     * @description Applies a subtle animated overlay on the action background to draw attention.\n     * This is intended for temporary states like recording or live activity indicators.\n     */\n    Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n    /**\n     * Medium height (42px).\n     */\n    Medium = 42,\n    /**\n     * Large height (48px).\n     */\n    Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n    /**\n     * Optional pulse colors for the animation.\n     * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n     * @optional\n     */\n    pulseColors?: [string, string];\n    /**\n     * Status type to apply.\n     * @description Selects the visual emphasis type applied to the action. The component currently\n     * supports a pulsing overlay, and additional types may be added later.\n     * @optional\n     */\n    type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n    /**\n     * Which action was clicked.\n     * @description Indicates whether the primary or secondary action fired. This is helpful when\n     * sharing a handler between both actions.\n     */\n    action: 'primary' | 'secondary';\n    /**\n     * Original click event.\n     * @description Useful to access modifier keys, prevent default, or stop propagation.\n     */\n    event: MouseEvent<HTMLButtonElement>;\n    /**\n     * Whether the secondary action is currently extended.\n     * @description Useful for flows that need to distinguish between a collapsed and expanded\n     * secondary action, especially on touch devices.\n     */\n    isExtended: boolean;\n    /**\n     * Whether the device is considered touch.\n     * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n     */\n    isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n    /**\n     * Optional background color for this action.\n     * @description Overrides the component-level background color for this specific action.\n     * If omitted, `MultiActionButton.backgroundColor` is used as fallback.\n     * @optional\n     */\n    backgroundColor?: string;\n    /**\n     * Optional color for the icon and label.\n     * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon for the action.\n     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom React element.\n     * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n     */\n    icon: string | ReactElement;\n    /**\n     * Whether the action is disabled.\n     * @description Disabled actions do not respond to hover or click and are visually dimmed.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Optional reason shown in a tooltip when the action is disabled.\n     * @description Use this to explain why the action is currently unavailable.\n     * @optional\n     */\n    disabledReason?: string;\n    /**\n     * The optional label for the action.\n     * @description The label is shown next to the icon and will be truncated with ellipsis when\n     * there is not enough horizontal space.\n     * @optional\n     */\n    label: ReactNode;\n    /**\n     * Click handler for the action.\n     * @description Receives a payload that includes the action type, extension state, and device info.\n     * This allows external logic to decide whether the click should trigger an action immediately.\n     * @optional\n     */\n    onClick?: (info: MultiActionButtonActionEvent) => void;\n    /**\n     * Status effect configuration for the action.\n     * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n     * @optional\n     */\n    status?: MultiActionButtonActionStatus;\n};\n\nexport type MultiActionButtonSecondaryContextMenu = ContextMenuItem[];\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n    /**\n     * Optional background color for both actions.\n     * @description Overrides the default background color for the action buttons. This is useful\n     * when the button is used on different backgrounds or when a specific brand color is needed.\n     * If omitted, the primary color from the theme is used.\n     * @default theme.primary\n     * @optional\n     */\n    backgroundColor?: string;\n    /**\n     * Additional class name for the wrapper element.\n     * @description Useful for custom styling or testing hooks.\n     * @optional\n     */\n    className?: string;\n    /**\n     * Timeout in ms before the secondary action collapses after a click.\n     * @description Set to 0 to keep the secondary action extended until the user collapses it.\n     * @example\n     * <MultiActionButton\n     *   primaryAction={primaryAction}\n     *   secondaryAction={secondaryAction}\n     *   extendedTimeoutMs={0}\n     * />\n     * @default 3000\n     * @optional\n     */\n    extendedTimeoutMs?: number;\n    /**\n     * Height of the button.\n     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n     * @default MultiActionButtonHeight.Medium\n     * @optional\n     */\n    height?: number;\n    /**\n     * Optional color for the 1px separator line between actions.\n     * @description Defaults to theme.cw-body-background and falls back to #fff if not available.\n     * @optional\n     */\n    gapColor?: string;\n    /**\n     * Whether the button is collapsed to a single icon.\n     * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n     * Use this to provide compact states or toolbar modes.\n     * @default false\n     * @optional\n     */\n    isCollapsed?: boolean;\n    /**\n     * Whether the whole control is disabled.\n     * @description Disables interactions for both actions, including hover expansion and clicks.\n     * @default false\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Primary action configuration.\n     * @description Required action shown on the left side (or as the only action when no secondary is provided).\n     */\n    primaryAction: MultiActionButtonAction;\n    /**\n     * Secondary action configuration.\n     * @description Optional action shown on the right side. When present, it can expand on hover or click.\n     * @optional\n     */\n    secondaryAction?: MultiActionButtonAction;\n    /**\n     * Context menu rendered as the secondary action.\n     * @description When the list contains entries, the secondary slot renders a fixed down-arrow\n     * trigger that opens a ContextMenu. If the list is empty or undefined, no context menu trigger\n     * is shown and `secondaryAction` can be used as usual.\n     * @optional\n     */\n    secondaryContextMenu?: MultiActionButtonSecondaryContextMenu;\n    /**\n     * Whether the button should take the full width of its parent.\n     * @description When true, the control stretches to 100% width unless `width` is provided.\n     * @optional\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * Optional width override for the whole button.\n     * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n     * the width is driven by the content unless `shouldUseFullWidth` is true.\n     * @optional\n     */\n    width?: number | MotionValue<number>;\n};\n"],"mappings":"AAIA;AACA;AACA;AACA,WAAYA,2BAA2B,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;;AASvC;AACA;AACA;AACA,WAAYC,uBAAuB,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;;AAWnC;AACA;AACA;;AAiBA;AACA;AACA;;AA0BA;AACA;AACA;;AAyDA;AACA;AACA","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactElement, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\nimport type { ContextMenuItem } from '../context-menu/ContextMenu.types';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n    /**\n     * Pulsing background effect.\n     * @description Applies a subtle animated overlay on the action background to draw attention.\n     * This is intended for temporary states like recording or live activity indicators.\n     */\n    Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n    /**\n     * Medium height (42px).\n     */\n    Medium = 42,\n    /**\n     * Large height (48px).\n     */\n    Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n    /**\n     * Optional pulse colors for the animation.\n     * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n     * @optional\n     */\n    pulseColors?: [string, string];\n    /**\n     * Status type to apply.\n     * @description Selects the visual emphasis type applied to the action. The component currently\n     * supports a pulsing overlay, and additional types may be added later.\n     * @optional\n     */\n    type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n    /**\n     * Which action was clicked.\n     * @description Indicates whether the primary or secondary action fired. This is helpful when\n     * sharing a handler between both actions.\n     */\n    action: 'primary' | 'secondary';\n    /**\n     * Original click event.\n     * @description Useful to access modifier keys, prevent default, or stop propagation.\n     */\n    event: MouseEvent<HTMLButtonElement>;\n    /**\n     * Whether the secondary action is currently extended.\n     * @description Useful for flows that need to distinguish between a collapsed and expanded\n     * secondary action, especially on touch devices.\n     */\n    isExtended: boolean;\n    /**\n     * Whether the device is considered touch.\n     * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n     */\n    isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n    /**\n     * Optional background color for this action.\n     * @description Overrides the component-level background color for this specific action.\n     * If omitted, `MultiActionButton.backgroundColor` is used as fallback.\n     * @optional\n     */\n    backgroundColor?: string;\n    /**\n     * Optional color for the icon and label.\n     * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon for the action.\n     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom React element.\n     * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n     */\n    icon: string | ReactElement;\n    /**\n     * Whether the action is disabled.\n     * @description Disabled actions do not respond to hover or click and are visually dimmed.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Optional reason shown in a tooltip when the action is disabled.\n     * @description Use this to explain why the action is currently unavailable.\n     * @optional\n     */\n    disabledReason?: string;\n    /**\n     * The optional label for the action.\n     * @description The label is shown next to the icon and will be truncated with ellipsis when\n     * there is not enough horizontal space.\n     * @optional\n     */\n    label: ReactNode;\n    /**\n     * Click handler for the action.\n     * @description Receives a payload that includes the action type, extension state, and device info.\n     * This allows external logic to decide whether the click should trigger an action immediately.\n     * @optional\n     */\n    onClick?: (info: MultiActionButtonActionEvent) => void;\n    /**\n     * Status effect configuration for the action.\n     * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n     * @optional\n     */\n    status?: MultiActionButtonActionStatus;\n};\n\nexport type MultiActionButtonSecondaryContextMenu = ContextMenuItem[];\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n    /**\n     * Optional background color for both actions.\n     * @description Overrides the default background color for the action buttons. This is useful\n     * when the button is used on different backgrounds or when a specific brand color is needed.\n     * If omitted, the primary color from the theme is used.\n     * @default theme.primary\n     * @optional\n     */\n    backgroundColor?: string;\n    /**\n     * Additional class name for the wrapper element.\n     * @description Useful for custom styling or testing hooks.\n     * @optional\n     */\n    className?: string;\n    /**\n     * Timeout in ms before the secondary action collapses after a click.\n     * @description Set to 0 to keep the secondary action extended until the user collapses it.\n     * @example\n     * <MultiActionButton\n     *   primaryAction={primaryAction}\n     *   secondaryAction={secondaryAction}\n     *   extendedTimeoutMs={0}\n     * />\n     * @default 3000\n     * @optional\n     */\n    extendedTimeoutMs?: number;\n    /**\n     * Height of the button.\n     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n     * @default MultiActionButtonHeight.Medium\n     * @optional\n     */\n    height?: number;\n    /**\n     * Optional color for the 1px separator line between actions.\n     * @description Defaults to theme.cw-body-background and falls back to #fff if not available.\n     * @optional\n     */\n    gapColor?: string;\n    /**\n     * Whether the button is collapsed to a single icon.\n     * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n     * Use this to provide compact states or toolbar modes.\n     * @default false\n     * @optional\n     */\n    isCollapsed?: boolean;\n    /**\n     * Whether the whole control is disabled.\n     * @description Disables interactions for both actions, including hover expansion and clicks.\n     * @default false\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Primary action configuration.\n     * @description Required action shown on the left side (or as the only action when no secondary is provided).\n     */\n    primaryAction: MultiActionButtonAction;\n    /**\n     * Secondary action configuration.\n     * @description Optional action shown on the right side. When present, it can expand on hover or click.\n     * @optional\n     */\n    secondaryAction?: MultiActionButtonAction;\n    /**\n     * Context menu rendered as the secondary action.\n     * @description When the list contains entries, the secondary slot renders a fixed down-arrow\n     * trigger that opens a ContextMenu. If the list is empty or undefined, no context menu trigger\n     * is shown and `secondaryAction` can be used as usual.\n     * @optional\n     */\n    secondaryContextMenu?: MultiActionButtonSecondaryContextMenu;\n    /**\n     * Whether the button should collapse automatically based on the available width.\n     * @description When enabled, the control switches from the default layout to an icon-only\n     * layout and finally to a primary-only icon layout as space becomes tighter.\n     * @default false\n     * @optional\n     */\n    shouldAutoCollapse?: boolean;\n    /**\n     * Whether the button should take the full width of its parent.\n     * @description When true, the control stretches to 100% width unless `width` is provided.\n     * @optional\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * Optional width override for the whole button.\n     * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n     * the width is driven by the content unless `shouldUseFullWidth` is true.\n     * @optional\n     */\n    width?: number | MotionValue<number>;\n};\n"],"mappings":"AAIA;AACA;AACA;AACA,WAAYA,2BAA2B,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;;AASvC;AACA;AACA;AACA,WAAYC,uBAAuB,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;;AAWnC;AACA;AACA;;AAiBA;AACA;AACA;;AA0BA;AACA;AACA;;AAyDA;AACA;AACA","ignoreList":[]}

package/lib/esm/components/multi-action-button/MultiActionButton.utils.js

@@ -1,3 +1,84 @@
+export let MultiActionButtonAutoCollapseMode = /*#__PURE__*/function (MultiActionButtonAutoCollapseMode) {
+  MultiActionButtonAutoCollapseMode["Expanded"] = "expanded";
+  MultiActionButtonAutoCollapseMode["IconsOnly"] = "icons-only";
+  MultiActionButtonAutoCollapseMode["PrimaryOnly"] = "primary-only";
+  return MultiActionButtonAutoCollapseMode;
+}({});
+const AUTO_COLLAPSE_HYSTERESIS_PX = 12;
+export const MULTI_ACTION_BUTTON_LABEL_GAP_PX = 6;
+export const MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX = 18;
+export const MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX = 1;
+export const getMinimumMultiActionButtonIconsWidth = ({
+  hasSecondaryAction,
+  height
+}) => {
+  const minimumPrimaryActionWidth = height;
+  if (!hasSecondaryAction) {
+    return minimumPrimaryActionWidth;
+  }
+  return minimumPrimaryActionWidth * 2 + 1;
+};
+export const getMinimumPrimaryLabelVisibleWidth = ({
+  hasVisibleSecondaryAction,
+  height
+}) => {
+  const minimumPrimaryIconWidth = height;
+  const minimumPrimaryLabelWidth = MULTI_ACTION_BUTTON_LABEL_GAP_PX + MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX;
+  const minimumSecondaryWidth = hasVisibleSecondaryAction ? height + MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX : 0;
+  return minimumPrimaryIconWidth + minimumPrimaryLabelWidth + minimumSecondaryWidth;
+};
+export const getMultiActionButtonAutoCollapseMode = ({
+  availableWidth,
+  expandedWidth,
+  hasSecondaryAction,
+  height,
+  previousMode = MultiActionButtonAutoCollapseMode.Expanded
+}) => {
+  if (!availableWidth || expandedWidth <= 0) {
+    return MultiActionButtonAutoCollapseMode.Expanded;
+  }
+  const minimumIconsWidth = getMinimumMultiActionButtonIconsWidth({
+    hasSecondaryAction,
+    height
+  });
+  if (!hasSecondaryAction) {
+    if (availableWidth < expandedWidth) {
+      return MultiActionButtonAutoCollapseMode.PrimaryOnly;
+    }
+    if (previousMode === MultiActionButtonAutoCollapseMode.PrimaryOnly && availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {
+      return MultiActionButtonAutoCollapseMode.PrimaryOnly;
+    }
+    return MultiActionButtonAutoCollapseMode.Expanded;
+  }
+  if (previousMode === MultiActionButtonAutoCollapseMode.Expanded) {
+    if (availableWidth < minimumIconsWidth) {
+      return MultiActionButtonAutoCollapseMode.PrimaryOnly;
+    }
+    if (availableWidth < expandedWidth) {
+      return MultiActionButtonAutoCollapseMode.IconsOnly;
+    }
+    return MultiActionButtonAutoCollapseMode.Expanded;
+  }
+  if (previousMode === MultiActionButtonAutoCollapseMode.IconsOnly) {
+    if (availableWidth < minimumIconsWidth) {
+      return MultiActionButtonAutoCollapseMode.PrimaryOnly;
+    }
+    if (availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {
+      return MultiActionButtonAutoCollapseMode.IconsOnly;
+    }
+    return MultiActionButtonAutoCollapseMode.Expanded;
+  }
+  if (availableWidth < minimumIconsWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {
+    return MultiActionButtonAutoCollapseMode.PrimaryOnly;
+  }
+  if (availableWidth < expandedWidth) {
+    return MultiActionButtonAutoCollapseMode.IconsOnly;
+  }
+  if (availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {
+    return MultiActionButtonAutoCollapseMode.IconsOnly;
+  }
+  return MultiActionButtonAutoCollapseMode.Expanded;
+};
 export const getSecondaryContextMenuTriggerStyle = ({
   height,
   isCollapsed,

package/lib/esm/components/multi-action-button/MultiActionButton.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.utils.js","names":["getSecondaryContextMenuTriggerStyle","height","isCollapsed","isExpanded","shouldUseContentWidth","display","minWidth","opacity","pointerEvents","width","flex"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.utils.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport interface GetSecondaryContextMenuTriggerStyleOptions {\n    height: number;\n    isCollapsed: boolean;\n    isExpanded: boolean;\n    shouldUseContentWidth: boolean;\n}\n\nexport const getSecondaryContextMenuTriggerStyle = ({\n    height,\n    isCollapsed,\n    isExpanded,\n    shouldUseContentWidth,\n}: GetSecondaryContextMenuTriggerStyleOptions): CSSProperties => {\n    if (isCollapsed) {\n        return {\n            display: 'inline-flex',\n            minWidth: 0,\n            opacity: 0,\n            pointerEvents: 'none',\n            width: 0,\n        };\n    }\n\n    if (shouldUseContentWidth) {\n        return {\n            display: 'inline-flex',\n            flex: '0 1 auto',\n            minWidth: 0,\n        };\n    }\n\n    if (isExpanded) {\n        return {\n            display: 'inline-flex',\n            flex: '1 1 auto',\n            minWidth: 0,\n        };\n    }\n\n    return {\n        display: 'inline-flex',\n        flex: '0 0 auto',\n        minWidth: 0,\n        width: height,\n    };\n};\n"],"mappings":"AASA,OAAO,MAAMA,mCAAmC,GAAGA,CAAC;EAChDC,MAAM;EACNC,WAAW;EACXC,UAAU;EACVC;AACwC,CAAC,KAAoB;EAC7D,IAAIF,WAAW,EAAE;IACb,OAAO;MACHG,OAAO,EAAE,aAAa;MACtBC,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAE,CAAC;MACVC,aAAa,EAAE,MAAM;MACrBC,KAAK,EAAE;IACX,CAAC;EACL;EAEA,IAAIL,qBAAqB,EAAE;IACvB,OAAO;MACHC,OAAO,EAAE,aAAa;MACtBK,IAAI,EAAE,UAAU;MAChBJ,QAAQ,EAAE;IACd,CAAC;EACL;EAEA,IAAIH,UAAU,EAAE;IACZ,OAAO;MACHE,OAAO,EAAE,aAAa;MACtBK,IAAI,EAAE,UAAU;MAChBJ,QAAQ,EAAE;IACd,CAAC;EACL;EAEA,OAAO;IACHD,OAAO,EAAE,aAAa;IACtBK,IAAI,EAAE,UAAU;IAChBJ,QAAQ,EAAE,CAAC;IACXG,KAAK,EAAER;EACX,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.utils.js","names":["MultiActionButtonAutoCollapseMode","AUTO_COLLAPSE_HYSTERESIS_PX","MULTI_ACTION_BUTTON_LABEL_GAP_PX","MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX","MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX","getMinimumMultiActionButtonIconsWidth","hasSecondaryAction","height","minimumPrimaryActionWidth","getMinimumPrimaryLabelVisibleWidth","hasVisibleSecondaryAction","minimumPrimaryIconWidth","minimumPrimaryLabelWidth","minimumSecondaryWidth","getMultiActionButtonAutoCollapseMode","availableWidth","expandedWidth","previousMode","Expanded","minimumIconsWidth","PrimaryOnly","IconsOnly","getSecondaryContextMenuTriggerStyle","isCollapsed","isExpanded","shouldUseContentWidth","display","minWidth","opacity","pointerEvents","width","flex"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.utils.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum MultiActionButtonAutoCollapseMode {\n    Expanded = 'expanded',\n    IconsOnly = 'icons-only',\n    PrimaryOnly = 'primary-only',\n}\n\nconst AUTO_COLLAPSE_HYSTERESIS_PX = 12;\nexport const MULTI_ACTION_BUTTON_LABEL_GAP_PX = 6;\nexport const MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX = 18;\nexport const MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX = 1;\n\nexport interface GetMultiActionButtonAutoCollapseModeOptions {\n    availableWidth?: number;\n    expandedWidth: number;\n    hasSecondaryAction: boolean;\n    height: number;\n    previousMode?: MultiActionButtonAutoCollapseMode;\n}\n\nexport const getMinimumMultiActionButtonIconsWidth = ({\n    hasSecondaryAction,\n    height,\n}: Pick<GetMultiActionButtonAutoCollapseModeOptions, 'hasSecondaryAction' | 'height'>): number => {\n    const minimumPrimaryActionWidth = height;\n\n    if (!hasSecondaryAction) {\n        return minimumPrimaryActionWidth;\n    }\n\n    return minimumPrimaryActionWidth * 2 + 1;\n};\n\nexport interface GetMinimumPrimaryLabelVisibleWidthOptions {\n    hasVisibleSecondaryAction: boolean;\n    height: number;\n}\n\nexport const getMinimumPrimaryLabelVisibleWidth = ({\n    hasVisibleSecondaryAction,\n    height,\n}: GetMinimumPrimaryLabelVisibleWidthOptions): number => {\n    const minimumPrimaryIconWidth = height;\n    const minimumPrimaryLabelWidth =\n        MULTI_ACTION_BUTTON_LABEL_GAP_PX + MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX;\n    const minimumSecondaryWidth = hasVisibleSecondaryAction\n        ? height + MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX\n        : 0;\n\n    return minimumPrimaryIconWidth + minimumPrimaryLabelWidth + minimumSecondaryWidth;\n};\n\nexport const getMultiActionButtonAutoCollapseMode = ({\n    availableWidth,\n    expandedWidth,\n    hasSecondaryAction,\n    height,\n    previousMode = MultiActionButtonAutoCollapseMode.Expanded,\n}: GetMultiActionButtonAutoCollapseModeOptions): MultiActionButtonAutoCollapseMode => {\n    if (!availableWidth || expandedWidth <= 0) {\n        return MultiActionButtonAutoCollapseMode.Expanded;\n    }\n\n    const minimumIconsWidth = getMinimumMultiActionButtonIconsWidth({\n        hasSecondaryAction,\n        height,\n    });\n\n    if (!hasSecondaryAction) {\n        if (availableWidth < expandedWidth) {\n            return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n        }\n\n        if (\n            previousMode === MultiActionButtonAutoCollapseMode.PrimaryOnly &&\n            availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX\n        ) {\n            return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n        }\n\n        return MultiActionButtonAutoCollapseMode.Expanded;\n    }\n\n    if (previousMode === MultiActionButtonAutoCollapseMode.Expanded) {\n        if (availableWidth < minimumIconsWidth) {\n            return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n        }\n\n        if (availableWidth < expandedWidth) {\n            return MultiActionButtonAutoCollapseMode.IconsOnly;\n        }\n\n        return MultiActionButtonAutoCollapseMode.Expanded;\n    }\n\n    if (previousMode === MultiActionButtonAutoCollapseMode.IconsOnly) {\n        if (availableWidth < minimumIconsWidth) {\n            return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n        }\n\n        if (availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {\n            return MultiActionButtonAutoCollapseMode.IconsOnly;\n        }\n\n        return MultiActionButtonAutoCollapseMode.Expanded;\n    }\n\n    if (availableWidth < minimumIconsWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {\n        return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n    }\n\n    if (availableWidth < expandedWidth) {\n        return MultiActionButtonAutoCollapseMode.IconsOnly;\n    }\n\n    if (availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {\n        return MultiActionButtonAutoCollapseMode.IconsOnly;\n    }\n\n    return MultiActionButtonAutoCollapseMode.Expanded;\n};\n\nexport interface GetSecondaryContextMenuTriggerStyleOptions {\n    height: number;\n    isCollapsed: boolean;\n    isExpanded: boolean;\n    shouldUseContentWidth: boolean;\n}\n\nexport const getSecondaryContextMenuTriggerStyle = ({\n    height,\n    isCollapsed,\n    isExpanded,\n    shouldUseContentWidth,\n}: GetSecondaryContextMenuTriggerStyleOptions): CSSProperties => {\n    if (isCollapsed) {\n        return {\n            display: 'inline-flex',\n            minWidth: 0,\n            opacity: 0,\n            pointerEvents: 'none',\n            width: 0,\n        };\n    }\n\n    if (shouldUseContentWidth) {\n        return {\n            display: 'inline-flex',\n            flex: '0 1 auto',\n            minWidth: 0,\n        };\n    }\n\n    if (isExpanded) {\n        return {\n            display: 'inline-flex',\n            flex: '1 1 auto',\n            minWidth: 0,\n        };\n    }\n\n    return {\n        display: 'inline-flex',\n        flex: '0 0 auto',\n        minWidth: 0,\n        width: height,\n    };\n};\n"],"mappings":"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","ignoreList":[]}