@chayns-components/core 5.0.57 → 5.0.59

package/AGENTS.md

@@ -3320,6 +3320,43 @@ import { MultiActionButton } from '@chayns-components/core';
 />
 ```
 
+#### Auto Collapse Responsive
+
+```tsx
+<MultiActionButton
+    isDisabled={false}
+    extendedTimeoutMs={2000}
+    primaryAction={{
+                icon: 'fa fa-pen',
+                label: 'Chatten',
+            }}
+    secondaryAction={{
+                icon: 'fa fa-microphone',
+                label: 'Mitschnitt starten',
+            }}
+    shouldAutoCollapse
+/>
+```
+
+#### Auto Collapse Responsive Full Width
+
+```tsx
+<MultiActionButton
+    isDisabled={false}
+    extendedTimeoutMs={2000}
+    primaryAction={{
+                icon: 'fa fa-pen',
+                label: 'Chatten',
+            }}
+    secondaryAction={{
+                icon: 'fa fa-microphone',
+                label: 'Mitschnitt starten',
+            }}
+    shouldAutoCollapse
+    shouldUseFullWidth
+/>
+```
+
 #### Pulsing Secondary
 
 ```tsx

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = _interopRequireWildcard(require("react"));
+var _element = require("../../hooks/element");
 var _environment = require("../../utils/environment");
 var _ContextMenu = _interopRequireDefault(require("../context-menu/ContextMenu"));
 var _ActionButton = _interopRequireDefault(require("./action-button/ActionButton"));
@@ -18,6 +19,42 @@ const SECONDARY_CONTEXT_MENU_ACTION = {
   icon: 'fa fa-chevron-down',
   label: undefined
 };
+const createMeasuredMultiActionButtonContent = ({
+  backgroundColor,
+  gapColor,
+  height,
+  primaryAction,
+  secondaryAction
+}) => /*#__PURE__*/_react.default.createElement(_MultiActionButton.StyledMultiActionButton, {
+  style: {
+    width: 'fit-content'
+  }
+}, /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+  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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MultiActionButton.StyledSeparator, {
+  $gapColor: gapColor,
+  $isHidden: false
+}), /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+  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.
@@ -33,6 +70,7 @@ const MultiActionButton = ({
   primaryAction,
   secondaryAction,
   secondaryContextMenu,
+  shouldAutoCollapse = false,
   shouldUseFullWidth,
   width
 }) => {
@@ -40,18 +78,73 @@ const MultiActionButton = ({
   const [isSecondaryExpanded, setIsSecondaryExpanded] = (0, _react.useState)(false);
   const [isSecondaryHovered, setIsSecondaryHovered] = (0, _react.useState)(false);
   const autoCollapseTimeoutRef = (0, _react.useRef)(null);
+  const multiActionButtonRef = (0, _react.useRef)(null);
   const secondaryContextMenuRef = (0, _react.useRef)(null);
+  const [autoCollapseMode, setAutoCollapseMode] = (0, _react.useState)(_MultiActionButton2.MultiActionButtonAutoCollapseMode.Expanded);
   const isTouch = (0, _environment.useIsTouch)();
+  const parentSize = (0, _element.useElementSize)(multiActionButtonRef, {
+    shouldUseParentElement: true
+  });
   const hasSecondaryContextMenu = Boolean(secondaryContextMenu === null || secondaryContextMenu === void 0 ? void 0 : 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 = (0, _react.useMemo)(() => createMeasuredMultiActionButtonContent({
+    backgroundColor,
+    gapColor,
+    height,
+    primaryAction,
+    secondaryAction: secondaryTriggerAction
+  }), [backgroundColor, gapColor, height, primaryAction, secondaryTriggerAction]);
+  const {
+    measuredElement,
+    width: expandedMeasuredWidth
+  } = (0, _element.useMeasuredClone)({
+    content: expandedMeasuredContent
+  });
+  const availableWidth = (0, _react.useMemo)(() => {
+    const parentWidth = parentSize === null || parentSize === void 0 ? void 0 : parentSize.width;
+    if (typeof width === 'number') {
+      return typeof parentWidth === 'number' ? Math.min(parentWidth, width) : width;
+    }
+    return parentWidth;
+  }, [parentSize === null || parentSize === void 0 ? void 0 : parentSize.width, width]);
+  (0, _react.useEffect)(() => {
+    if (!shouldAutoCollapse || isCollapsed) {
+      setAutoCollapseMode(_MultiActionButton2.MultiActionButtonAutoCollapseMode.Expanded);
+      return;
+    }
+    if (expandedMeasuredWidth <= 0) {
+      return;
+    }
+    setAutoCollapseMode(previousMode => (0, _MultiActionButton2.getMultiActionButtonAutoCollapseMode)({
+      availableWidth,
+      expandedWidth: expandedMeasuredWidth,
+      hasSecondaryAction,
+      height,
+      previousMode
+    }));
+  }, [availableWidth, expandedMeasuredWidth, hasSecondaryAction, height, isCollapsed, shouldAutoCollapse]);
+  const isAutoIconsOnly = shouldAutoCollapse && autoCollapseMode === _MultiActionButton2.MultiActionButtonAutoCollapseMode.IconsOnly;
+  const isAutoPrimaryOnly = shouldAutoCollapse && autoCollapseMode === _MultiActionButton2.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 = (0, _MultiActionButton2.getMinimumPrimaryLabelVisibleWidth)({
+    hasVisibleSecondaryAction: hasSecondaryAction,
+    height
+  });
+  const shouldHidePrimaryLabelForMinimumWidth = shouldKeepPrimaryLabelVisible && typeof availableWidth === 'number' && availableWidth <= minimumPrimaryLabelVisibleWidth;
+  const resolvedWidth = shouldKeepFullWidth ? '100%' : effectiveIsCollapsed ? height : width ?? 'fit-content';
   const secondaryContextMenuTriggerStyle = (0, _MultiActionButton2.getSecondaryContextMenuTriggerStyle)({
     height,
-    isCollapsed,
-    isExpanded: isSecondaryExpanded,
+    isCollapsed: isSecondaryHidden,
+    isExpanded: false,
     shouldUseContentWidth
   });
 
@@ -99,11 +192,13 @@ const MultiActionButton = ({
    * Collapsing the control should also reset any temporary expansion state.
    */
   (0, _react.useEffect)(() => {
-    if (isCollapsed) {
+    if (effectiveIsCollapsed || shouldPreventSecondaryExpansion) {
+      clearAutoCollapseTimeout();
       setIsSecondaryExpanded(false);
       setIsExtendedByClick(false);
+      setIsSecondaryHovered(false);
     }
-  }, [isCollapsed]);
+  }, [clearAutoCollapseTimeout, effectiveIsCollapsed, shouldPreventSecondaryExpansion]);
 
   /**
    * Handler for the primary action button.
@@ -127,7 +222,7 @@ const MultiActionButton = ({
    */
   const handleSecondaryClick = (0, _react.useCallback)(event => {
     var _resolvedSecondaryAct;
-    if (!resolvedSecondaryAction || isCollapsed || isDisabled || resolvedSecondaryAction.isDisabled) {
+    if (!resolvedSecondaryAction || isSecondaryHidden || isDisabled || resolvedSecondaryAction.isDisabled) {
       return;
     }
     if (hasSecondaryContextMenu) {
@@ -142,37 +237,40 @@ const MultiActionButton = ({
       isTouch
     };
     (_resolvedSecondaryAct = resolvedSecondaryAction.onClick) === null || _resolvedSecondaryAct === void 0 || _resolvedSecondaryAct.call(resolvedSecondaryAction, 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 = (0, _react.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 = (0, _react.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.default.createElement(_MultiActionButton.StyledMultiActionButton, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, measuredElement, /*#__PURE__*/_react.default.createElement(_MultiActionButton.StyledMultiActionButton, {
     className: (0, _clsx.default)('beta-chayns-multi-action', className),
+    ref: multiActionButtonRef,
     style: {
       maxWidth: '100%',
       width: resolvedWidth
@@ -181,16 +279,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.default.createElement(_react.default.Fragment, null, !isCollapsed && /*#__PURE__*/_react.default.createElement(_MultiActionButton.StyledSeparator, {
-    $gapColor: gapColor
+  }), hasSecondaryAction && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MultiActionButton.StyledSeparator, {
+    $gapColor: gapColor,
+    $isHidden: isSecondaryHidden
   }), hasSecondaryContextMenu ? /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
     items: secondaryContextMenu ?? [],
     ref: secondaryContextMenuRef,
@@ -200,32 +299,34 @@ const MultiActionButton = ({
     yOffset: -6,
     style: secondaryContextMenuTriggerStyle
   }, /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
-    action: resolvedSecondaryAction,
+    action: resolvedSecondaryAction ?? SECONDARY_CONTEXT_MENU_ACTION,
     actionType: "secondary",
-    backgroundColor: resolvedSecondaryAction.backgroundColor ?? backgroundColor,
-    isCollapsed: isCollapsed,
+    backgroundColor: (resolvedSecondaryAction === null || resolvedSecondaryAction === void 0 ? void 0 : 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.default.createElement(_ActionButton.default, {
-    action: resolvedSecondaryAction,
+    action: resolvedSecondaryAction ?? secondaryAction ?? SECONDARY_CONTEXT_MENU_ACTION,
     actionType: "secondary",
-    backgroundColor: resolvedSecondaryAction.backgroundColor ?? backgroundColor,
-    isCollapsed: isCollapsed,
+    backgroundColor: (resolvedSecondaryAction === null || resolvedSecondaryAction === void 0 ? void 0 : 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';
 var _default = exports.default = MultiActionButton;

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

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.js","names":["_clsx","_interopRequireDefault","require","_react","_interopRequireWildcard","_environment","_ContextMenu","_ActionButton","_MultiActionButton","_MultiActionButton2","_MultiActionButton3","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SECONDARY_CONTEXT_MENU_ACTION","icon","label","undefined","MultiActionButton","backgroundColor","className","extendedTimeoutMs","gapColor","height","MultiActionButtonHeight","Medium","isCollapsed","isDisabled","primaryAction","secondaryAction","secondaryContextMenu","shouldUseFullWidth","width","isExtendedByClick","setIsExtendedByClick","useState","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","useRef","secondaryContextMenuRef","isTouch","useIsTouch","hasSecondaryContextMenu","Boolean","length","hasExpandableSecondaryAction","hasSecondaryAction","resolvedSecondaryAction","shouldUseContentWidth","resolvedWidth","secondaryContextMenuTriggerStyle","getSecondaryContextMenuTriggerStyle","isExpanded","clearAutoCollapseTimeout","useCallback","current","window","clearTimeout","resetAutoCollapseTimeout","setTimeout","expandSecondaryByClick","useEffect","handlePrimaryClick","event","_primaryAction$onClic","payload","action","isExtended","onClick","handleSecondaryClick","_resolvedSecondaryAct","_secondaryContextMenu","show","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","createElement","StyledMultiActionButton","clsx","style","maxWidth","actionType","isShrunk","isSolo","showLabel","Fragment","StyledSeparator","$gapColor","items","ref","shouldDisableClick","shouldUseDefaultTriggerStyles","shouldHidePopupArrow","yOffset","isHidden","onMouseEnter","onMouseLeave","displayName","_default","exports"],"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","_interopRequireDefault","require","_react","_interopRequireWildcard","_element","_environment","_ContextMenu","_ActionButton","_MultiActionButton","_MultiActionButton2","_MultiActionButton3","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SECONDARY_CONTEXT_MENU_ACTION","icon","label","undefined","createMeasuredMultiActionButtonContent","backgroundColor","gapColor","height","primaryAction","secondaryAction","createElement","StyledMultiActionButton","style","width","action","actionType","isCollapsed","isDisabled","isShrunk","isSolo","showLabel","shouldUseContentWidth","Fragment","StyledSeparator","$gapColor","$isHidden","isExpanded","isHidden","MultiActionButton","className","extendedTimeoutMs","MultiActionButtonHeight","Medium","secondaryContextMenu","shouldAutoCollapse","shouldUseFullWidth","isExtendedByClick","setIsExtendedByClick","useState","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","useRef","multiActionButtonRef","secondaryContextMenuRef","autoCollapseMode","setAutoCollapseMode","MultiActionButtonAutoCollapseMode","Expanded","isTouch","useIsTouch","parentSize","useElementSize","shouldUseParentElement","hasSecondaryContextMenu","Boolean","length","secondaryTriggerAction","hasExpandableSecondaryAction","hasSecondaryAction","expandedMeasuredContent","useMemo","measuredElement","expandedMeasuredWidth","useMeasuredClone","content","availableWidth","parentWidth","Math","min","useEffect","previousMode","getMultiActionButtonAutoCollapseMode","expandedWidth","isAutoIconsOnly","IconsOnly","isAutoPrimaryOnly","PrimaryOnly","shouldKeepFullWidth","shouldHideSecondaryForAutoCollapse","effectiveIsCollapsed","resolvedSecondaryAction","isSecondaryHidden","shouldPreventSecondaryExpansion","shouldKeepPrimaryLabelVisible","minimumPrimaryLabelVisibleWidth","getMinimumPrimaryLabelVisibleWidth","hasVisibleSecondaryAction","shouldHidePrimaryLabelForMinimumWidth","resolvedWidth","secondaryContextMenuTriggerStyle","getSecondaryContextMenuTriggerStyle","clearAutoCollapseTimeout","useCallback","current","window","clearTimeout","resetAutoCollapseTimeout","setTimeout","expandSecondaryByClick","handlePrimaryClick","event","_primaryAction$onClic","payload","isExtended","onClick","handleSecondaryClick","_resolvedSecondaryAct","_secondaryContextMenu","show","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","clsx","ref","maxWidth","items","shouldDisableClick","shouldUseDefaultTriggerStyles","shouldHidePopupArrow","yOffset","key","onMouseEnter","onMouseLeave","displayName","_default","exports"],"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/cjs/components/multi-action-button/MultiActionButton.styles.js

@@ -11,6 +11,8 @@ const StyledMultiActionButton = exports.StyledMultiActionButton = (0, _styledCom
     align-items: stretch;
     display: inline-flex;
     max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
     position: relative;
     transition: width 0.2s ease;
     width: fit-content;
@@ -21,7 +23,19 @@ const StyledSeparator = exports.StyledSeparator = _styledComponents.default.span
   $gapColor,
   theme
 }) => $gapColor || (theme === null || theme === void 0 ? void 0 : 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/cjs/components/multi-action-button/MultiActionButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMultiActionButton","exports","styled","motion","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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,eAAe,GAAAJ,OAAA,CAAAI,eAAA,GAAGH,yBAAM,CAACI,IAA0B;AAChE;AACA,kBAAkB,CAAC;EAAEC,SAAS;EAAEC;AAAM,CAAC,KAAKD,SAAS,KAAIC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,oBAAoB,CAAC,KAAI,MAAM;AAChG;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMultiActionButton","exports","styled","motion","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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMC,eAAe,GAAAJ,OAAA,CAAAI,eAAA,GAAGH,yBAAM,CAACI,IAA0B;AAChE;AACA,kBAAkB,CAAC;EAAEC,SAAS;EAAEC;AAAM,CAAC,KAAKD,SAAS,KAAIC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,oBAAoB,CAAC,KAAI,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/cjs/components/multi-action-button/MultiActionButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","exports","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;AAFA,IAGYA,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;AASvC;AACA;AACA;AAFA,IAGYE,uBAAuB,GAAAD,OAAA,CAAAC,uBAAA,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","exports","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;AAFA,IAGYA,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;AASvC;AACA;AACA;AAFA,IAGYE,uBAAuB,GAAAD,OAAA,CAAAC,uBAAA,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/cjs/components/multi-action-button/MultiActionButton.utils.js

@@ -3,7 +3,91 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSecondaryContextMenuTriggerStyle = void 0;
+exports.getSecondaryContextMenuTriggerStyle = exports.getMultiActionButtonAutoCollapseMode = exports.getMinimumPrimaryLabelVisibleWidth = exports.getMinimumMultiActionButtonIconsWidth = exports.MultiActionButtonAutoCollapseMode = exports.MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX = exports.MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX = exports.MULTI_ACTION_BUTTON_LABEL_GAP_PX = void 0;
+let MultiActionButtonAutoCollapseMode = exports.MultiActionButtonAutoCollapseMode = /*#__PURE__*/function (MultiActionButtonAutoCollapseMode) {
+  MultiActionButtonAutoCollapseMode["Expanded"] = "expanded";
+  MultiActionButtonAutoCollapseMode["IconsOnly"] = "icons-only";
+  MultiActionButtonAutoCollapseMode["PrimaryOnly"] = "primary-only";
+  return MultiActionButtonAutoCollapseMode;
+}({});
+const AUTO_COLLAPSE_HYSTERESIS_PX = 12;
+const MULTI_ACTION_BUTTON_LABEL_GAP_PX = exports.MULTI_ACTION_BUTTON_LABEL_GAP_PX = 6;
+const MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX = exports.MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX = 18;
+const MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX = exports.MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX = 1;
+const getMinimumMultiActionButtonIconsWidth = ({
+  hasSecondaryAction,
+  height
+}) => {
+  const minimumPrimaryActionWidth = height;
+  if (!hasSecondaryAction) {
+    return minimumPrimaryActionWidth;
+  }
+  return minimumPrimaryActionWidth * 2 + 1;
+};
+exports.getMinimumMultiActionButtonIconsWidth = getMinimumMultiActionButtonIconsWidth;
+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;
+};
+exports.getMinimumPrimaryLabelVisibleWidth = getMinimumPrimaryLabelVisibleWidth;
+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;
+};
+exports.getMultiActionButtonAutoCollapseMode = getMultiActionButtonAutoCollapseMode;
 const getSecondaryContextMenuTriggerStyle = ({
   height,
   isCollapsed,