npm - @chayns-components/core - Versions diffs - 5.4.5 → 5.4.6-alpha.0 - Mend

@chayns-components/core 5.4.5 → 5.4.6-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (472) hide show

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MentionFinderItem.styles.js","names":["styled","css","StyledMentionFinderItem","div","theme","$isActive","StyledMentionFinderItemImage","img","$shouldShowRoundImage","StyledMentionFinderItemContent","text","StyledMentionFinderItemContentName","StyledMentionFinderItemContentInfo"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMentionFinderItemProps = WithTheme<{ $isActive: boolean }>;\n\nexport const StyledMentionFinderItem = styled.div<StyledMentionFinderItemProps>`\n align-items: center;\n cursor: pointer;\n display: flex;\n padding: 10px 8px;\n\n &:not(:last-child) {\n border-bottom: 1px solid\n rgba(${({ theme }: StyledMentionFinderItemProps) => theme['text-rgb']}, 0.15);\n }\n\n ${({ $isActive, theme }) =>\n $isActive &&\n css`\n background-color: ${theme['102']} !important;\n `}\n`;\n\ntype StyledMentionFinderItemImageProps = WithTheme<{\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledMentionFinderItemImage = styled.img<StyledMentionFinderItemImageProps>`\n background-color: rgba(\n ${({ theme }: StyledMentionFinderItemImageProps) => theme['text-rgb']},\n 0.1\n );\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : 'initial')};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledMentionFinderItemImageProps) => theme['009-rgb']}, 0.08) inset;\n flex: 0 0 auto;\n height: 40px;\n object-fit: cover;\n overflow: hidden;\n transition: border-radius 0.3s ease;\n width: 40px;\n`;\n\ntype StyledMentionFinderItemContentProps = WithTheme<unknown>;\n\nexport const StyledMentionFinderItemContent = styled.div`\n color: ${({ theme }: StyledMentionFinderItemContentProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n justify-content: center;\n line-height: normal;\n margin-left: 10px;\n min-width: 0;\n`;\n\nexport const StyledMentionFinderItemContentName = styled.div``;\n\nexport const StyledMentionFinderItemContentInfo = styled.div`\n font-size: 85%;\n margin-top: 2px;\n opacity: 0.75;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;~~AAK~~/C,OAAO,MAAMC,uBAAuB,GAAGF,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAoC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjF;AACA;AACA,MAAM,CAAC;EAAEC,SAAS;EAAED;AAAM,CAAC,KACnBC,SAAS,IACTJ,GAAG;AACX,gCAAgCG,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT,CAAC;AAMD,OAAO,MAAME,4BAA4B,GAAGN,MAAM,CAACO,GAAsC;AACzF;AACA,UAAU,CAAC;EAAEH;AAAyC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA,qBAAqB,CAAC;EAAEI;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,SAAU;AAC/F;AACA,eAAe,CAAC;EAAEJ;AAAyC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMK,8BAA8B,GAAGT,MAAM,CAACG,GAAG;AACxD,aAAa,CAAC;EAAEC;AAA2C,CAAC,KAAKA,KAAK,CAACM,IAAI;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kCAAkC,GAAGX,MAAM,CAACG,GAAG,EAAE;AAE9D,OAAO,MAAMS,kCAAkC,GAAGZ,MAAM,CAACG,GAAG;AAC5D;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"MentionFinderItem.styles.js","names":["styled","css","StyledMentionFinderItem","div","theme","$isActive","StyledMentionFinderItemImage","img","$shouldShowRoundImage","StyledMentionFinderItemContent","text","StyledMentionFinderItemContentName","StyledMentionFinderItemContentInfo"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMentionFinderItemProps = WithTheme<{\n $isActive: boolean;\n}>;\n\nexport const StyledMentionFinderItem = styled.div<StyledMentionFinderItemProps>`\n align-items: center;\n cursor: pointer;\n display: flex;\n padding: 10px 8px;\n\n &:not(:last-child) {\n border-bottom: 1px solid\n rgba(${({ theme }: StyledMentionFinderItemProps) => theme['text-rgb']}, 0.15);\n }\n\n ${({ $isActive, theme }) =>\n $isActive &&\n css`\n background-color: ${theme['102']} !important;\n `}\n`;\n\ntype StyledMentionFinderItemImageProps = WithTheme<{\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledMentionFinderItemImage = styled.img<StyledMentionFinderItemImageProps>`\n background-color: rgba(\n ${({ theme }: StyledMentionFinderItemImageProps) => theme['text-rgb']},\n 0.1\n );\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : 'initial')};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledMentionFinderItemImageProps) => theme['009-rgb']}, 0.08) inset;\n flex: 0 0 auto;\n height: 40px;\n object-fit: cover;\n overflow: hidden;\n transition: border-radius 0.3s ease;\n width: 40px;\n`;\n\ntype StyledMentionFinderItemContentProps = WithTheme<unknown>;\n\nexport const StyledMentionFinderItemContent = styled.div`\n color: ${({ theme }: StyledMentionFinderItemContentProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n justify-content: center;\n line-height: normal;\n margin-left: 10px;\n min-width: 0;\n`;\n\nexport const StyledMentionFinderItemContentName = styled.div``;\n\nexport const StyledMentionFinderItemContentInfo = styled.div`\n font-size: 85%;\n margin-top: 2px;\n opacity: 0.75;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,uBAAuB,GAAGF,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAoC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjF;AACA;AACA,MAAM,CAAC;EAAEC,SAAS;EAAED;AAAM,CAAC,KACnBC,SAAS,IACTJ,GAAG;AACX,gCAAgCG,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT,CAAC;AAMD,OAAO,MAAME,4BAA4B,GAAGN,MAAM,CAACO,GAAsC;AACzF;AACA,UAAU,CAAC;EAAEH;AAAyC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA,qBAAqB,CAAC;EAAEI;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,SAAU;AAC/F;AACA,eAAe,CAAC;EAAEJ;AAAyC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMK,8BAA8B,GAAGT,MAAM,CAACG,GAAG;AACxD,aAAa,CAAC;EAAEC;AAA2C,CAAC,KAAKA,KAAK,CAACM,IAAI;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kCAAkC,GAAGX,MAAM,CAACG,GAAG,EAAE;AAE9D,OAAO,MAAMS,kCAAkC,GAAGZ,MAAM,CAACG,GAAG;AAC5D;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useElementSize, useMeasuredClone } from '../../hooks/element';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { useIsTouch } from '../../utils/environment';
 import ContextMenu from '../context-menu/ContextMenu';
 import ActionButton from './action-button/ActionButton';
@@ -64,11 +65,13 @@ const MultiActionButton = ({
   secondaryContextMenu,
   shouldAutoCollapse = false,
   shouldUseFullWidth,
+  shouldEnableKeyboardHighlighting,
   width
 }) => {
   const [isExtendedByClick, setIsExtendedByClick] = useState(false);
   const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);
   const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);
+  const [isSecondaryFocused, setIsSecondaryFocused] = useState(false);
   const autoCollapseTimeoutRef = useRef(null);
   const multiActionButtonRef = useRef(null);
   const secondaryContextMenuRef = useRef(null);
@@ -82,6 +85,7 @@ const MultiActionButton = ({
   const hasExpandableSecondaryAction = Boolean(secondaryAction) && !hasSecondaryContextMenu;
   const hasSecondaryAction = Boolean(secondaryTriggerAction);
   const shouldUseContentWidth = !width && !shouldUseFullWidth;
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   const expandedMeasuredContent = useMemo(() => createMeasuredMultiActionButtonContent({
     backgroundColor,
     gapColor,
@@ -132,7 +136,15 @@ const MultiActionButton = ({
     height
   });
   const shouldHidePrimaryLabelForMinimumWidth = shouldKeepPrimaryLabelVisible && typeof availableWidth === 'number' && availableWidth <= minimumPrimaryLabelVisibleWidth;
-  const resolvedWidth = shouldKeepFullWidth ? '100%' : effectiveIsCollapsed ? height : width ?? 'fit-content';
+  const resolvedWidth = useMemo(() => {
+    if (shouldKeepFullWidth) {
+      return '100%';
+    }
+    if (effectiveIsCollapsed) {
+      return height;
+    }
+    return width ?? 'fit-content';
+  }, [effectiveIsCollapsed, height, shouldKeepFullWidth, width]);
   const secondaryContextMenuTriggerStyle = getSecondaryContextMenuTriggerStyle({
     height,
     isCollapsed: isSecondaryHidden,
@@ -189,6 +201,7 @@ const MultiActionButton = ({
       setIsSecondaryExpanded(false);
       setIsExtendedByClick(false);
       setIsSecondaryHovered(false);
+      setIsSecondaryFocused(false);
     }
   }, [clearAutoCollapseTimeout, effectiveIsCollapsed, shouldPreventSecondaryExpansion]);
@@ -252,11 +265,26 @@ const MultiActionButton = ({
       setIsSecondaryExpanded(false);
     }
   }, [effectiveIsCollapsed, isExtendedByClick, isTouch]);
+  const handleSecondaryFocus = useCallback(() => {
+    if (!secondaryAction || isSecondaryHidden || isDisabled || shouldPreventSecondaryExpansion || secondaryAction.isDisabled) {
+      return;
+    }
+    setIsSecondaryFocused(true);
+    if (!isExtendedByClick) {
+      setIsSecondaryExpanded(true);
+    }
+  }, [isDisabled, isExtendedByClick, isSecondaryHidden, secondaryAction, shouldPreventSecondaryExpansion]);
+  const handleSecondaryBlur = useCallback(() => {
+    setIsSecondaryFocused(false);
+    if (!isExtendedByClick && !effectiveIsCollapsed) {
+      setIsSecondaryExpanded(false);
+    }
+  }, [effectiveIsCollapsed, isExtendedByClick]);
   /**
-   * Secondary label is visible when expanded or when hovered (desktop only).
+   * Secondary label is visible when expanded or when hovered/focused.
    */
-  const isSecondaryLabelVisible = isSecondaryExpanded || !isTouch && isSecondaryHovered;
+  const isSecondaryLabelVisible = isSecondaryExpanded || !isTouch && isSecondaryHovered || isSecondaryFocused;
   return /*#__PURE__*/React.createElement(React.Fragment, null, measuredElement, /*#__PURE__*/React.createElement(StyledMultiActionButton, {
     className: clsx('beta-chayns-multi-action', className),
     ref: multiActionButtonRef,
@@ -274,6 +302,7 @@ const MultiActionButton = ({
     isSolo: !hasSecondaryAction || isSecondaryHidden || effectiveIsCollapsed,
     onClick: handlePrimaryClick,
     showLabel: !effectiveIsCollapsed && !shouldHidePrimaryLabelForMinimumWidth && (shouldKeepPrimaryLabelVisible || !isAutoIconsOnly) && (shouldKeepPrimaryLabelVisible || !shouldHideSecondaryForAutoCollapse) && (!hasExpandableSecondaryAction || !isSecondaryExpanded),
+    shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     shouldUseContentWidth: shouldUseContentWidth,
     height: height
   }), hasSecondaryAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSeparator, {
@@ -298,6 +327,7 @@ const MultiActionButton = ({
     key: "multi-action-secondary-context-menu",
     onClick: handleSecondaryClick,
     showLabel: false,
+    shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     shouldUseContentWidth: shouldUseContentWidth,
     height: height
   })) : /*#__PURE__*/React.createElement(ActionButton, {
@@ -312,7 +342,10 @@ const MultiActionButton = ({
     onClick: handleSecondaryClick,
     onMouseEnter: handleSecondaryMouseEnter,
     onMouseLeave: handleSecondaryMouseLeave,
+    onFocus: handleSecondaryFocus,
+    onBlur: handleSecondaryBlur,
     showLabel: !isSecondaryHidden && !isAutoIconsOnly && isSecondaryLabelVisible,
+    shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     shouldUseContentWidth: shouldUseContentWidth,
     height: height
   }))));

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

	@@ -1 +1 @@
1	- {"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":[]}
1	+ {"version":3,"file":"MultiActionButton.js","names":["clsx","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","useMeasuredClone","useKeyboardFocusHighlighting","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","shouldEnableKeyboardHighlighting","isExtendedByClick","setIsExtendedByClick","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","isSecondaryFocused","setIsSecondaryFocused","autoCollapseTimeoutRef","multiActionButtonRef","secondaryContextMenuRef","autoCollapseMode","setAutoCollapseMode","Expanded","isTouch","parentSize","shouldUseParentElement","hasSecondaryContextMenu","Boolean","length","secondaryTriggerAction","hasExpandableSecondaryAction","hasSecondaryAction","shouldShowKeyboardHighlighting","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","handleSecondaryFocus","handleSecondaryBlur","isSecondaryLabelVisible","ref","maxWidth","items","shouldDisableClick","shouldUseDefaultTriggerStyles","shouldHidePopupArrow","yOffset","key","onMouseEnter","onMouseLeave","onFocus","onBlur","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 { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\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 shouldEnableKeyboardHighlighting,\n width,\n}) => {\n const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n const [isSecondaryFocused, setIsSecondaryFocused] = 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 const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\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 = useMemo(() => {\n if (shouldKeepFullWidth) {\n return '100%';\n }\n\n if (effectiveIsCollapsed) {\n return height;\n }\n\n return width ?? 'fit-content';\n }, [effectiveIsCollapsed, height, shouldKeepFullWidth, width]);\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 setIsSecondaryFocused(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 const handleSecondaryFocus = useCallback(() => {\n if (\n !secondaryAction \|\|\n isSecondaryHidden \|\|\n isDisabled \|\|\n shouldPreventSecondaryExpansion \|\|\n secondaryAction.isDisabled\n ) {\n return;\n }\n\n setIsSecondaryFocused(true);\n if (!isExtendedByClick) {\n setIsSecondaryExpanded(true);\n }\n }, [\n isDisabled,\n isExtendedByClick,\n isSecondaryHidden,\n secondaryAction,\n shouldPreventSecondaryExpansion,\n ]);\n\n const handleSecondaryBlur = useCallback(() => {\n setIsSecondaryFocused(false);\n if (!isExtendedByClick && !effectiveIsCollapsed) {\n setIsSecondaryExpanded(false);\n }\n }, [effectiveIsCollapsed, isExtendedByClick]);\n\n /\n Secondary label is visible when expanded or when hovered/focused.\n */\n const isSecondaryLabelVisible =\n isSecondaryExpanded \|\| (!isTouch && isSecondaryHovered) \|\| isSecondaryFocused;\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 shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\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 shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\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 onFocus={handleSecondaryFocus}\n onBlur={handleSecondaryBlur}\n showLabel={\n !isSecondaryHidden &&\n !isAutoIconsOnly &&\n isSecondaryLabelVisible\n }\n shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\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 CHANGED Viewed

@@ -9,6 +9,12 @@ export const StyledMultiActionButton = styled(motion.div)`
     position: relative;
     transition: width 0.2s ease;
     width: fit-content;
+    /* Keep normal clipping, but let focus-ring paint outside while focused. */
+    &:focus-within {
+        overflow: visible;
+        z-index: 1;
+    }
 `;
 export const StyledSeparator = styled.span`
     align-self: stretch;

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

	@@ -1 +1 @@
1	- {"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":[]}
1	+ {"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 /* Keep normal clipping, but let focus-ring paint outside while focused. */\n &:focus-within {\n overflow: visible;\n z-index: 1;\n }\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;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 CHANGED Viewed

	@@ -1 +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 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":[]}
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 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 Enables keyboard-only focus highlighting for interactive action buttons.\n * @description When enabled, focus ring styles are only shown for keyboard navigation.\n * @default false\n * @optional\n /\n shouldEnableKeyboardHighlighting?: 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/action-button/ActionButton.js CHANGED Viewed

@@ -25,9 +25,12 @@ const ActionButton = ({
   onClick,
   onMouseEnter,
   onMouseLeave,
+  onFocus,
+  onBlur,
   showLabel,
   shouldUseContentWidth,
-  height
+  height,
+  shouldShowKeyboardHighlighting = false
 }) => {
   const isPrimary = actionType === 'primary';
   const isSecondary = actionType === 'secondary';
@@ -83,9 +86,12 @@ const ActionButton = ({
     $height: height,
     $statusType: action.status?.type,
     $shouldUseContentWidth: shouldUseContentWidth,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
+    onFocus: onFocus,
+    onBlur: onBlur,
     type: "button"
   }, shouldShowDisabledReason && disabledReason ? /*#__PURE__*/React.createElement(Tooltip, {
     alignment: PopupAlignment.BottomRight,

package/lib/esm/components/multi-action-button/action-button/ActionButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","Tooltip","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","PopupAlignment","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","isPrimary","isSecondary","actionColor","color","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","iconSize","actionContent","createElement","$height","$isDisabled","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","alignment","BottomRight","item","text","maxItemWidth","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n StyledActionButton,\n StyledActionContent,\n StyledIconSlot,\n StyledLabelWrapper,\n StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n action: MultiActionButtonAction;\n actionType: 'primary' \| 'secondary';\n backgroundColor?: string;\n isCollapsed: boolean;\n isDisabled: boolean;\n isExpanded?: boolean;\n isHidden?: boolean;\n isShrunk?: boolean;\n isSolo?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n showLabel: boolean;\n shouldUseContentWidth: boolean;\n height: number;\n};\n\n/*\n Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n /\nconst ActionButton: FC<ActionButtonProps> = ({\n action,\n actionType,\n backgroundColor,\n isCollapsed,\n isDisabled,\n isExpanded,\n isHidden,\n isShrunk,\n isSolo,\n onClick,\n onMouseEnter,\n onMouseLeave,\n showLabel,\n shouldUseContentWidth,\n height,\n}) => {\n const isPrimary = actionType === 'primary';\n const isSecondary = actionType === 'secondary';\n const actionColor = action.color ?? '#FFFFFF';\n const isActionDisabled = isDisabled \|\| Boolean(action.isDisabled);\n const disabledReason = action.disabledReason?.trim();\n const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n const iconSize = height - 24;\n\n const actionContent = (\n <StyledActionContent>\n <StyledIconSlot $height={height} $isDisabled={isActionDisabled}>\n {typeof action.icon === 'string' ? (\n <Icon icons={[action.icon]} color={actionColor} size={iconSize} />\n ) : (\n action.icon\n )}\n </StyledIconSlot>\n <AnimatePresence initial={false}>\n {/ Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n {showLabel && (\n <StyledLabelWrapper\n animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n transition={LABEL_TRANSITION}\n >\n <StyledSecondaryLabel style={{ color: actionColor }}>\n {action.label}\n </StyledSecondaryLabel>\n </StyledLabelWrapper>\n )}\n </AnimatePresence>\n </StyledActionContent>\n );\n\n return (\n <StyledActionButton\n aria-disabled={isActionDisabled}\n disabled={isActionDisabled && !shouldShowDisabledReason}\n $backgroundColor={backgroundColor}\n $isCollapsed={isCollapsed}\n $isExpanded={isSecondary ? isExpanded : undefined}\n $isInteractionDisabled={isActionDisabled}\n $isHidden={isSecondary ? isHidden : undefined}\n $isPrimary={isPrimary}\n $isSecondary={isSecondary}\n $isShrunk={isPrimary ? isShrunk : undefined}\n $isSolo={isPrimary ? isSolo : undefined}\n $pulseColors={action.status?.pulseColors}\n $height={height}\n $statusType={action.status?.type}\n $shouldUseContentWidth={shouldUseContentWidth}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n type=\"button\"\n >\n {shouldShowDisabledReason && disabledReason ? (\n <Tooltip\n alignment={PopupAlignment.BottomRight}\n item={{ text: disabledReason }}\n maxItemWidth={400}\n >\n {actionContent}\n </Tooltip>\n ) : (\n actionContent\n )}\n </StyledActionButton>\n );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,~~MAA0B~~,OAAO;~~AAC7C~~,OAAOC,IAAI,MAAM,iBAAiB;AAClC,OAAOC,OAAO,MAAM,uBAAuB;AAC3C,SACIC,kBAAkB,EAClBC,mBAAmB,EACnBC,cAAc,EACdC,kBAAkB,EAClBC,oBAAoB,QACjB,uBAAuB;AAE9B,SAASC,cAAc,QAAQ,sBAAsB;AAErD,MAAMC,SAAS,GAAG,CAAC;AACnB,MAAMC,gBAAgB,GAAG;EAAEC,QAAQ,EAAE;AAAI,CAAC;~~AAoB1C~~;AACA;AACA;AACA;AACA,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,MAAM;EACNC,UAAU;EACVC,eAAe;EACfC,WAAW;EACXC,UAAU;EACVC,UAAU;EACVC,QAAQ;EACRC,QAAQ;EACRC,MAAM;EACNC,OAAO;EACPC,YAAY;EACZC,YAAY;EACZC,SAAS;EACTC,qBAAqB;EACrBC;~~AACJ~~,CAAC,KAAK;EACF,MAAMC,SAAS,~~GAAGd~~,UAAU,KAAK,SAAS;EAC1C,~~MAAMe~~,WAAW,~~GAAGf~~,UAAU,KAAK,WAAW;EAC9C,~~MAAMgB~~,WAAW,~~GAAGjB~~,MAAM,~~CAACkB~~,KAAK,IAAI,SAAS;EAC7C,MAAMC,gBAAgB,~~GAAGf~~,UAAU,~~IAAIgB~~,OAAO,~~CAACpB~~,MAAM,CAACI,UAAU,CAAC;EACjE,~~MAAMiB~~,cAAc,~~GAAGrB~~,MAAM,~~CAACqB~~,cAAc,EAAEC,IAAI,CAAC,CAAC;EACpD,MAAMC,wBAAwB,GAAGH,OAAO,CAACC,cAAc,CAAC,IAAIF,gBAAgB;EAC5E,MAAMK,QAAQ,~~GAAGV~~,MAAM,GAAG,EAAE;EAE5B,~~MAAMW~~,aAAa,~~gBACftC~~,KAAA,~~CAAAuC~~,aAAA,~~CAACnC~~,mBAAmB,qBAChBJ,KAAA,~~CAAAuC~~,aAAA,~~CAAClC~~,cAAc;~~IAACmC~~,OAAO,~~EAAEb~~,MAAO;~~IAACc~~,WAAW,EAAET;EAAiB,GAC1D,~~OAAOnB~~,MAAM,~~CAAC6B~~,IAAI,KAAK,QAAQ,~~gBAC5B1C~~,KAAA,~~CAAAuC~~,aAAA,~~CAACtC~~,IAAI;~~IAAC0C~~,KAAK,EAAE,~~CAAC9B~~,MAAM,~~CAAC6B~~,IAAI,CAAE;IAACX,KAAK,EAAED,WAAY;IAACc,IAAI,EAAEP;EAAS,CAAE,CAAC,~~GAElExB~~,MAAM,~~CAAC6B~~,IAEC,CAAC,~~eACjB1C~~,KAAA,~~CAAAuC~~,aAAA,~~CAACxC~~,eAAe;~~IAAC8C~~,OAAO,EAAE;EAAM,~~GAE3BpB~~,SAAS,~~iBACNzB~~,KAAA,~~CAAAuC~~,aAAA,~~CAACjC~~,kBAAkB;~~IACfwC~~,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE,MAAM;MAAEC,UAAU,~~EAAExC~~;IAAU,CAAE;~~IAC9DyC~~,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAE,CAAE;IAC9CJ,OAAO,EAAE;MAAEE,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAE,CAAE;IACjDE,UAAU,~~EAAEzC~~;EAAiB,gBAE7BV,KAAA,~~CAAAuC~~,aAAA,~~CAAChC~~,oBAAoB;~~IAAC6C~~,KAAK,EAAE;MAAErB,KAAK,EAAED;IAAY;EAAE,GAC/~~CjB~~,MAAM,~~CAACwC~~,KACU,CACN,CAEX,CACA,CACxB;EAED,~~oBACIrD~~,KAAA,~~CAAAuC~~,aAAA,~~CAACpC~~,kBAAkB;IACf,~~iBAAe6B~~,gBAAiB;IAChCsB,QAAQ,EAAEtB,gBAAgB,IAAI,CAACI,wBAAyB;IACxDmB,gBAAgB,~~EAAExC~~,eAAgB;~~IAClCyC~~,YAAY,~~EAAExC~~,WAAY;~~IAC1ByC~~,WAAW,EAAE5B,WAAW,~~GAAGX~~,UAAU,~~GAAGwC~~,SAAU;IAClDC,sBAAsB,EAAE3B,gBAAiB;IACzC4B,SAAS,EAAE/B,WAAW,~~GAAGV~~,QAAQ,~~GAAGuC~~,SAAU;IAC9CG,UAAU,EAAEjC,SAAU;IACtBkC,YAAY,EAAEjC,WAAY;IAC1BkC,SAAS,EAAEnC,SAAS,~~GAAGR~~,QAAQ,~~GAAGsC~~,SAAU;IAC5CM,OAAO,EAAEpC,SAAS,~~GAAGP~~,MAAM,~~GAAGqC~~,SAAU;IACxCO,YAAY,~~EAAEpD~~,MAAM,~~CAACqD~~,MAAM,EAAEC,WAAY;IACzC3B,OAAO,~~EAAEb~~,MAAO;~~IAChByC~~,WAAW,~~EAAEvD~~,MAAM,~~CAACqD~~,MAAM,EAAEG,IAAK;IACjCC,sBAAsB,~~EAAE5C~~,qBAAsB;~~IAC9CJ~~,OAAO,EAAEA,OAAQ;IACjBC,YAAY,EAAEA,YAAa;IAC3BC,YAAY,EAAEA,YAAa;~~IAC3B6C~~,IAAI,EAAC;EAAQ,GAEZjC,wBAAwB,IAAIF,cAAc,~~gBACvClC~~,KAAA,~~CAAAuC~~,aAAA,~~CAACrC~~,OAAO;~~IACJqE~~,SAAS,~~EAAE/D~~,cAAc,~~CAACgE~~,WAAY;IACtCC,IAAI,EAAE;MAAEC,IAAI,~~EAAExC~~;IAAe,CAAE;IAC/~~ByC~~,YAAY,EAAE;EAAI,~~GAEjBrC~~,aACI,CAAC,GAEVA,aAEY,CAAC;AAE7B,CAAC;~~AAED1B~~,YAAY,~~CAACgE~~,WAAW,GAAG,cAAc;AAEzC,~~eAAehE~~,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","Tooltip","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","PopupAlignment","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","showLabel","shouldUseContentWidth","height","shouldShowKeyboardHighlighting","isPrimary","isSecondary","actionColor","color","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","iconSize","actionContent","createElement","$height","$isDisabled","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","$shouldShowKeyboardHighlighting","alignment","BottomRight","item","text","maxItemWidth","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, FocusEventHandler, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n StyledActionButton,\n StyledActionContent,\n StyledIconSlot,\n StyledLabelWrapper,\n StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n action: MultiActionButtonAction;\n actionType: 'primary' \| 'secondary';\n backgroundColor?: string;\n isCollapsed: boolean;\n isDisabled: boolean;\n isExpanded?: boolean;\n isHidden?: boolean;\n isShrunk?: boolean;\n isSolo?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n onFocus?: FocusEventHandler<HTMLButtonElement>;\n onBlur?: FocusEventHandler<HTMLButtonElement>;\n showLabel: boolean;\n shouldUseContentWidth: boolean;\n height: number;\n shouldShowKeyboardHighlighting?: boolean;\n};\n\n/*\n Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n /\nconst ActionButton: FC<ActionButtonProps> = ({\n action,\n actionType,\n backgroundColor,\n isCollapsed,\n isDisabled,\n isExpanded,\n isHidden,\n isShrunk,\n isSolo,\n onClick,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n showLabel,\n shouldUseContentWidth,\n height,\n shouldShowKeyboardHighlighting = false,\n}) => {\n const isPrimary = actionType === 'primary';\n const isSecondary = actionType === 'secondary';\n const actionColor = action.color ?? '#FFFFFF';\n const isActionDisabled = isDisabled \|\| Boolean(action.isDisabled);\n const disabledReason = action.disabledReason?.trim();\n const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n const iconSize = height - 24;\n\n const actionContent = (\n <StyledActionContent>\n <StyledIconSlot $height={height} $isDisabled={isActionDisabled}>\n {typeof action.icon === 'string' ? (\n <Icon icons={[action.icon]} color={actionColor} size={iconSize} />\n ) : (\n action.icon\n )}\n </StyledIconSlot>\n <AnimatePresence initial={false}>\n {/ Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n {showLabel && (\n <StyledLabelWrapper\n animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n transition={LABEL_TRANSITION}\n >\n <StyledSecondaryLabel style={{ color: actionColor }}>\n {action.label}\n </StyledSecondaryLabel>\n </StyledLabelWrapper>\n )}\n </AnimatePresence>\n </StyledActionContent>\n );\n\n return (\n <StyledActionButton\n aria-disabled={isActionDisabled}\n disabled={isActionDisabled && !shouldShowDisabledReason}\n $backgroundColor={backgroundColor}\n $isCollapsed={isCollapsed}\n $isExpanded={isSecondary ? isExpanded : undefined}\n $isInteractionDisabled={isActionDisabled}\n $isHidden={isSecondary ? isHidden : undefined}\n $isPrimary={isPrimary}\n $isSecondary={isSecondary}\n $isShrunk={isPrimary ? isShrunk : undefined}\n $isSolo={isPrimary ? isSolo : undefined}\n $pulseColors={action.status?.pulseColors}\n $height={height}\n $statusType={action.status?.type}\n $shouldUseContentWidth={shouldUseContentWidth}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n type=\"button\"\n >\n {shouldShowDisabledReason && disabledReason ? (\n <Tooltip\n alignment={PopupAlignment.BottomRight}\n item={{ text: disabledReason }}\n maxItemWidth={400}\n >\n {actionContent}\n </Tooltip>\n ) : (\n actionContent\n )}\n </StyledActionButton>\n );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js CHANGED Viewed

@@ -169,6 +169,18 @@ export const StyledActionButton = styled.button`
                 background-color: ${`color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};
             }
         `}
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                transition: none;
+                outline: solid 2px color-mix(in srgb, currentColor 70%, transparent);
+                box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
+                outline-offset: 1px;
+                color: white;
+            }
+        `}
 `;
 export const StyledActionContent = styled.span`
     align-items: center;

package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionButton.styles.js","names":["motion","styled","css","keyframes","MultiActionButtonStatusType","pulse","color1","color2","StyledActionButton","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$isInteractionDisabled","$statusType","$pulseColors","Pulse","StyledActionContent","span","StyledIconSlot","$isDisabled","StyledLabelWrapper","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n $backgroundColor?: string;\n $isCollapsed?: boolean;\n $isExpanded?: boolean;\n $isHidden?: boolean;\n $isPrimary?: boolean;\n $isSecondary?: boolean;\n $isShrunk?: boolean;\n $isSolo?: boolean;\n $pulseColors?: [string, string];\n $isInteractionDisabled?: boolean;\n $height: number;\n $statusType?: MultiActionButtonStatusType;\n $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n 0% {\n background: ${color1};\n }\n 50% {\n background: ${color2};\n }\n 100% {\n background: ${color1};\n }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n align-items: center;\n border: none;\n border-radius: ${({ $height }) => $height / 2}px;\n cursor: pointer;\n display: inline-flex;\n flex: 1 1 auto;\n height: ${({ $height }) => $height}px;\n line-height: 22px;\n min-height: ${({ $height }) => $height}px;\n overflow: hidden;\n padding: 0;\n position: relative;\n transition:\n background-color 0.2s ease,\n border-radius 0.2s ease,\n color 0.2s ease,\n flex-grow 0.2s ease,\n opacity 0.2s ease,\n padding 0.2s ease,\n width 0.2s ease;\n user-select: none;\n white-space: nowrap;\n\n background-color: ${({ $backgroundColor, theme }) =>\n $backgroundColor \|\| theme?.primary \|\| '#000'};\n color: #fff;\n\n /* When width is content-driven, avoid flex stretching. /\n ${({ $shouldUseContentWidth }) =>\n $shouldUseContentWidth &&\n css`\n flex: 0 1 auto;\n `}\n\n / Expanded secondary button when width is not content-driven. /\n ${({ $isExpanded, $shouldUseContentWidth }) =>\n $isExpanded &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n / Collapsed state clamps to a fixed icon size. /\n ${(props) =>\n props.$isCollapsed &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n / Primary action stretches unless content-driven. /\n ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n $isPrimary &&\n !$isCollapsed &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n / Shrink the primary action to icon size when secondary is expanded. /\n ${(props) =>\n props.$isShrunk &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n / Keep secondary icon-only when collapsed and not expanded. /\n ${(props) =>\n props.$isSecondary &&\n !props.$isExpanded &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n / Fully hide the secondary action when the whole control is collapsed. /\n ${({ $isHidden }) =>\n $isHidden &&\n css`\n opacity: 0;\n pointer-events: none;\n width: 0;\n `}\n\n / Joining both buttons into a pill shape. /\n ${({ $isPrimary }) =>\n $isPrimary &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `}\n\n ${(props) =>\n props.$isPrimary &&\n props.$isCollapsed &&\n css`\n border-bottom-right-radius: ${props.$height / 2}px;\n border-top-right-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isSecondary }) =>\n $isSecondary &&\n css`\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n `}\n\n ${(props) =>\n props.$isSolo &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${(props) =>\n props.$isCollapsed &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isInteractionDisabled }) =>\n $isInteractionDisabled &&\n css`\n cursor: default;\n `}\n\n / Optional pulse overlay used by status. /\n ${({ $statusType, $pulseColors }) =>\n $statusType === MultiActionButtonStatusType.Pulse &&\n css`\n overflow: hidden;\n\n &::before {\n animation: ${pulse($pulseColors?.[0] \|\| '#A50000', $pulseColors?.[1] \|\| '#630000')}\n 1.6s ease-in-out infinite;\n border-radius: 3px;\n content: '';\n inset: 0;\n pointer-events: none;\n position: absolute;\n }\n `}\n\n &:disabled {\n cursor: default;\n }\n\n ${({ $isInteractionDisabled, $backgroundColor, theme }) =>\n !$isInteractionDisabled &&\n css`\n &:hover:not(:disabled) {\n background-color: ${`color-mix(in srgb, ${$backgroundColor \|\| theme?.primary \|\| '#000'} 85%, black)`};\n }\n `}\n`;\n\nexport const StyledActionContent = styled.span`\n align-items: center;\n display: inline-flex;\n flex: 1 1 auto;\n gap: 0;\n min-width: 0;\n position: relative;\n z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number; $isDisabled?: boolean }>`\n align-items: center;\n display: inline-flex;\n flex: 0 0 auto;\n height: ${({ $height }) => $height}px;\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n / The wrapper animates width/margin to avoid layout jumps. */\n display: inline-flex;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n padding-right: 18px;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAE1D,SAASC,2BAA2B,QAAQ,4BAA4B;AAkBxE,MAAMC,KAAK,GAAGA,CAACC,MAAc,EAAEC,MAAc,KAAKJ,SAAS;AAC3D;AACA,sBAAsBG,MAAM;AAC5B;AACA;AACA,sBAAsBC,MAAM;AAC5B;AACA;AACA,sBAAsBD,MAAM;AAC5B;AACA,CAAC;AAED,OAAO,MAAME,kBAAkB,GAAGP,MAAM,CAACQ,MAA+B;AACxE;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO,GAAG,CAAC;AACjD;AACA;AACA;AACA,cAAc,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,kBAAkB,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC,gBAAgB;EAAEC;AAAM,CAAC,KAC5CD,gBAAgB,IAAIC,KAAK,EAAEC,OAAO,IAAI,MAAM;AACpD;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAuB,CAAC,KACzBA,sBAAsB,IACtBZ,GAAG;AACX;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEa,WAAW;EAAED;AAAuB,CAAC,KACtCC,WAAW,IACX,CAACD,sBAAsB,IACvBZ,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA,MAAOc,KAAK,IACJA,KAAK,CAACC,YAAY,IAClBf,GAAG;AACX;AACA;AACA,qBAAqBc,KAAK,CAACN,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEQ,UAAU;EAAED,YAAY;EAAEH;AAAuB,CAAC,KACnDI,UAAU,IACV,CAACD,YAAY,IACb,CAACH,sBAAsB,IACvBZ,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA,MAAOc,KAAK,IACJA,KAAK,CAACG,SAAS,IACf,CAACH,KAAK,CAACF,sBAAsB,IAC7BZ,GAAG;AACX;AACA;AACA,qBAAqBc,KAAK,CAACN,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAOM,KAAK,IACJA,KAAK,CAACI,YAAY,IAClB,CAACJ,KAAK,CAACD,WAAW,IAClB,CAACC,KAAK,CAACF,sBAAsB,IAC7BZ,GAAG;AACX;AACA;AACA,qBAAqBc,KAAK,CAACN,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEW;AAAU,CAAC,KACZA,SAAS,IACTnB,GAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEgB;AAAW,CAAC,KACbA,UAAU,IACVhB,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAOc,KAAK,IACJA,KAAK,CAACE,UAAU,IAChBF,KAAK,CAACC,YAAY,IAClBf,GAAG;AACX,0CAA0Cc,KAAK,CAACN,OAAO,GAAG,CAAC;AAC3D,uCAAuCM,KAAK,CAACN,OAAO,GAAG,CAAC;AACxD,SAAS;AACT;AACA,MAAM,CAAC;EAAEU;AAAa,CAAC,KACfA,YAAY,IACZlB,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAOc,KAAK,IACJA,KAAK,CAACM,OAAO,IACbpB,GAAG;AACX,6BAA6Bc,KAAK,CAACN,OAAO,GAAG,CAAC;AAC9C,SAAS;AACT;AACA,MAAOM,KAAK,IACJA,KAAK,CAACC,YAAY,IAClBf,GAAG;AACX,6BAA6Bc,KAAK,CAACN,OAAO,GAAG,CAAC;AAC9C,SAAS;AACT;AACA,MAAM,CAAC;EAAEa;AAAuB,CAAC,KACzBA,sBAAsB,IACtBrB,GAAG;AACX;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEsB,WAAW;EAAEC;AAAa,CAAC,KAC5BD,WAAW,KAAKpB,2BAA2B,CAACsB,KAAK,IACjDxB,GAAG;AACX;AACA;AACA;AACA,6BAA6BG,KAAK,CAACoB,YAAY,GAAG,CAAC,CAAC,IAAI,SAAS,EAAEA,YAAY,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEF,sBAAsB;EAAEZ,gBAAgB;EAAEC;AAAM,CAAC,KAClD,CAACW,sBAAsB,IACvBrB,GAAG;AACX;AACA,oCAAoC,sBAAsBS,gBAAgB,IAAIC,KAAK,EAAEC,OAAO,IAAI,MAAM,cAAc;AACpH;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMc,mBAAmB,GAAG1B,MAAM,CAAC2B,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,cAAc,GAAG5B,MAAM,CAAC2B,IAAgD;AACrF;AACA;AACA;AACA,cAAc,CAAC;EAAElB;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,eAAe,CAAC;EAAEoB;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,aAAa,CAAC;EAAEpB;AAAQ,CAAC,KAAKA,OAAO;AACrC,CAAC;AAED,OAAO,MAAMqB,kBAAkB,GAAG9B,MAAM,CAACD,MAAM,CAAC4B,IAAI,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,oBAAoB,GAAG/B,MAAM,CAAC2B,IAAI;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ActionButton.styles.js","names":["motion","styled","css","keyframes","MultiActionButtonStatusType","pulse","color1","color2","StyledActionButton","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$isInteractionDisabled","$statusType","$pulseColors","Pulse","$shouldShowKeyboardHighlighting","StyledActionContent","span","StyledIconSlot","$isDisabled","StyledLabelWrapper","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n $backgroundColor?: string;\n $isCollapsed?: boolean;\n $isExpanded?: boolean;\n $isHidden?: boolean;\n $isPrimary?: boolean;\n $isSecondary?: boolean;\n $isShrunk?: boolean;\n $isSolo?: boolean;\n $pulseColors?: [string, string];\n $isInteractionDisabled?: boolean;\n $height: number;\n $statusType?: MultiActionButtonStatusType;\n $shouldUseContentWidth?: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n 0% {\n background: ${color1};\n }\n 50% {\n background: ${color2};\n }\n 100% {\n background: ${color1};\n }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n align-items: center;\n border: none;\n border-radius: ${({ $height }) => $height / 2}px;\n cursor: pointer;\n display: inline-flex;\n flex: 1 1 auto;\n height: ${({ $height }) => $height}px;\n line-height: 22px;\n min-height: ${({ $height }) => $height}px;\n overflow: hidden;\n padding: 0;\n position: relative;\n transition:\n background-color 0.2s ease,\n border-radius 0.2s ease,\n color 0.2s ease,\n flex-grow 0.2s ease,\n opacity 0.2s ease,\n padding 0.2s ease,\n width 0.2s ease;\n user-select: none;\n white-space: nowrap;\n\n background-color: ${({ $backgroundColor, theme }) =>\n $backgroundColor \|\| theme?.primary \|\| '#000'};\n color: #fff;\n\n /* When width is content-driven, avoid flex stretching. /\n ${({ $shouldUseContentWidth }) =>\n $shouldUseContentWidth &&\n css`\n flex: 0 1 auto;\n `}\n\n / Expanded secondary button when width is not content-driven. /\n ${({ $isExpanded, $shouldUseContentWidth }) =>\n $isExpanded &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n / Collapsed state clamps to a fixed icon size. /\n ${(props) =>\n props.$isCollapsed &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n / Primary action stretches unless content-driven. /\n ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n $isPrimary &&\n !$isCollapsed &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n / Shrink the primary action to icon size when secondary is expanded. /\n ${(props) =>\n props.$isShrunk &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n / Keep secondary icon-only when collapsed and not expanded. /\n ${(props) =>\n props.$isSecondary &&\n !props.$isExpanded &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n / Fully hide the secondary action when the whole control is collapsed. /\n ${({ $isHidden }) =>\n $isHidden &&\n css`\n opacity: 0;\n pointer-events: none;\n width: 0;\n `}\n\n / Joining both buttons into a pill shape. /\n ${({ $isPrimary }) =>\n $isPrimary &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `}\n\n ${(props) =>\n props.$isPrimary &&\n props.$isCollapsed &&\n css`\n border-bottom-right-radius: ${props.$height / 2}px;\n border-top-right-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isSecondary }) =>\n $isSecondary &&\n css`\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n `}\n\n ${(props) =>\n props.$isSolo &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${(props) =>\n props.$isCollapsed &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isInteractionDisabled }) =>\n $isInteractionDisabled &&\n css`\n cursor: default;\n `}\n\n / Optional pulse overlay used by status. /\n ${({ $statusType, $pulseColors }) =>\n $statusType === MultiActionButtonStatusType.Pulse &&\n css`\n overflow: hidden;\n\n &::before {\n animation: ${pulse($pulseColors?.[0] \|\| '#A50000', $pulseColors?.[1] \|\| '#630000')}\n 1.6s ease-in-out infinite;\n border-radius: 3px;\n content: '';\n inset: 0;\n pointer-events: none;\n position: absolute;\n }\n `}\n\n &:disabled {\n cursor: default;\n }\n\n ${({ $isInteractionDisabled, $backgroundColor, theme }) =>\n !$isInteractionDisabled &&\n css`\n &:hover:not(:disabled) {\n background-color: ${`color-mix(in srgb, ${$backgroundColor \|\| theme?.primary \|\| '#000'} 85%, black)`};\n }\n `}\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n transition: none;\n outline: solid 2px color-mix(in srgb, currentColor 70%, transparent);\n box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);\n outline-offset: 1px;\n color: white;\n }\n `}\n`;\n\nexport const StyledActionContent = styled.span`\n align-items: center;\n display: inline-flex;\n flex: 1 1 auto;\n gap: 0;\n min-width: 0;\n position: relative;\n z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number; $isDisabled?: boolean }>`\n align-items: center;\n display: inline-flex;\n flex: 0 0 auto;\n height: ${({ $height }) => $height}px;\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n / The wrapper animates width/margin to avoid layout jumps. */\n display: inline-flex;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n padding-right: 18px;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAE1D,SAASC,2BAA2B,QAAQ,4BAA4B;AAmBxE,MAAMC,KAAK,GAAGA,CAACC,MAAc,EAAEC,MAAc,KAAKJ,SAAS;AAC3D;AACA,sBAAsBG,MAAM;AAC5B;AACA;AACA,sBAAsBC,MAAM;AAC5B;AACA;AACA,sBAAsBD,MAAM;AAC5B;AACA,CAAC;AAED,OAAO,MAAME,kBAAkB,GAAGP,MAAM,CAACQ,MAA+B;AACxE;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO,GAAG,CAAC;AACjD;AACA;AACA;AACA,cAAc,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,kBAAkB,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC,gBAAgB;EAAEC;AAAM,CAAC,KAC5CD,gBAAgB,IAAIC,KAAK,EAAEC,OAAO,IAAI,MAAM;AACpD;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAuB,CAAC,KACzBA,sBAAsB,IACtBZ,GAAG;AACX;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEa,WAAW;EAAED;AAAuB,CAAC,KACtCC,WAAW,IACX,CAACD,sBAAsB,IACvBZ,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA,MAAOc,KAAK,IACJA,KAAK,CAACC,YAAY,IAClBf,GAAG;AACX;AACA;AACA,qBAAqBc,KAAK,CAACN,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEQ,UAAU;EAAED,YAAY;EAAEH;AAAuB,CAAC,KACnDI,UAAU,IACV,CAACD,YAAY,IACb,CAACH,sBAAsB,IACvBZ,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA,MAAOc,KAAK,IACJA,KAAK,CAACG,SAAS,IACf,CAACH,KAAK,CAACF,sBAAsB,IAC7BZ,GAAG;AACX;AACA;AACA,qBAAqBc,KAAK,CAACN,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAOM,KAAK,IACJA,KAAK,CAACI,YAAY,IAClB,CAACJ,KAAK,CAACD,WAAW,IAClB,CAACC,KAAK,CAACF,sBAAsB,IAC7BZ,GAAG;AACX;AACA;AACA,qBAAqBc,KAAK,CAACN,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEW;AAAU,CAAC,KACZA,SAAS,IACTnB,GAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEgB;AAAW,CAAC,KACbA,UAAU,IACVhB,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAOc,KAAK,IACJA,KAAK,CAACE,UAAU,IAChBF,KAAK,CAACC,YAAY,IAClBf,GAAG;AACX,0CAA0Cc,KAAK,CAACN,OAAO,GAAG,CAAC;AAC3D,uCAAuCM,KAAK,CAACN,OAAO,GAAG,CAAC;AACxD,SAAS;AACT;AACA,MAAM,CAAC;EAAEU;AAAa,CAAC,KACfA,YAAY,IACZlB,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAOc,KAAK,IACJA,KAAK,CAACM,OAAO,IACbpB,GAAG;AACX,6BAA6Bc,KAAK,CAACN,OAAO,GAAG,CAAC;AAC9C,SAAS;AACT;AACA,MAAOM,KAAK,IACJA,KAAK,CAACC,YAAY,IAClBf,GAAG;AACX,6BAA6Bc,KAAK,CAACN,OAAO,GAAG,CAAC;AAC9C,SAAS;AACT;AACA,MAAM,CAAC;EAAEa;AAAuB,CAAC,KACzBA,sBAAsB,IACtBrB,GAAG;AACX;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEsB,WAAW;EAAEC;AAAa,CAAC,KAC5BD,WAAW,KAAKpB,2BAA2B,CAACsB,KAAK,IACjDxB,GAAG;AACX;AACA;AACA;AACA,6BAA6BG,KAAK,CAACoB,YAAY,GAAG,CAAC,CAAC,IAAI,SAAS,EAAEA,YAAY,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEF,sBAAsB;EAAEZ,gBAAgB;EAAEC;AAAM,CAAC,KAClD,CAACW,sBAAsB,IACvBrB,GAAG;AACX;AACA,oCAAoC,sBAAsBS,gBAAgB,IAAIC,KAAK,EAAEC,OAAO,IAAI,MAAM,cAAc;AACpH;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEc;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BzB,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAM0B,mBAAmB,GAAG3B,MAAM,CAAC4B,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,cAAc,GAAG7B,MAAM,CAAC4B,IAAgD;AACrF;AACA;AACA;AACA,cAAc,CAAC;EAAEnB;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,eAAe,CAAC;EAAEqB;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,aAAa,CAAC;EAAErB;AAAQ,CAAC,KAAKA,OAAO;AACrC,CAAC;AAED,OAAO,MAAMsB,kBAAkB,GAAG/B,MAAM,CAACD,MAAM,CAAC6B,IAAI,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,oBAAoB,GAAGhC,MAAM,CAAC4B,IAAI;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/number-input/NumberInput.js CHANGED Viewed

@@ -6,7 +6,7 @@ import Input from '../input/Input';
 const NumberInput = t0 => {
   "use memo";
-  const $ = _c(41);
+  const $ = _c(42);
   const {
     isDecimalInput,
     isMoneyInput,
@@ -20,7 +20,8 @@ const NumberInput = t0 => {
     isDisabled,
     onChange,
     shouldShowOnlyBottomBorder,
-    minNumber: t3
+    minNumber: t3,
+    shouldEnableKeyboardHighlighting
   } = t0;
   const maxNumber = t1 === undefined ? Infinity : t1;
   const shouldTriggerChangeOnFormat = t2 === undefined ? true : t2;
@@ -198,7 +199,7 @@ const NumberInput = t0 => {
   const t11 = hasFocus ? plainText : formattedValue;
   const t12 = typeof isInvalid === "boolean" ? isInvalid : isValueInvalid;
   let t13;
-  if ($[31] !== isDisabled || $[32] !== localPlaceholder || $[33] !== onLocalBlur || $[34] !== onLocalChange || $[35] !== onLocalFocus || $[36] !== shouldRemainPlaceholder || $[37] !== shouldShowOnlyBottomBorder || $[38] !== t11 || $[39] !== t12) {
+  if ($[31] !== isDisabled || $[32] !== localPlaceholder || $[33] !== onLocalBlur || $[34] !== onLocalChange || $[35] !== onLocalFocus || $[36] !== shouldEnableKeyboardHighlighting || $[37] !== shouldRemainPlaceholder || $[38] !== shouldShowOnlyBottomBorder || $[39] !== t11 || $[40] !== t12) {
     t13 = /*#__PURE__*/React.createElement(Input, {
       shouldRemainPlaceholder: shouldRemainPlaceholder,
       shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
@@ -210,20 +211,22 @@ const NumberInput = t0 => {
       onFocus: onLocalFocus,
       isDisabled: isDisabled,
       isInvalid: t12,
-      shouldShowCenteredContent: shouldShowOnlyBottomBorder
+      shouldShowCenteredContent: shouldShowOnlyBottomBorder,
+      shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
     });
     $[31] = isDisabled;
     $[32] = localPlaceholder;
     $[33] = onLocalBlur;
     $[34] = onLocalChange;
     $[35] = onLocalFocus;
-    $[36] = shouldRemainPlaceholder;
-    $[37] = shouldShowOnlyBottomBorder;
-    $[38] = t11;
-    $[39] = t12;
-    $[40] = t13;
+    $[36] = shouldEnableKeyboardHighlighting;
+    $[37] = shouldRemainPlaceholder;
+    $[38] = shouldShowOnlyBottomBorder;
+    $[39] = t11;
+    $[40] = t12;
+    $[41] = t13;
   } else {
-    t13 = $[40];
+    t13 = $[41];
   }
   return t13;
 };