@box/blueprint-web 14.26.1 → 14.30.0

package/dist/lib-esm/inline-trigger-button/inline-trigger-button-types.d.ts

@@ -1,22 +1,15 @@
 import { type ReactNode } from 'react';
 import { type BaseButtonIconProps, type BaseButtonProps } from '../primitives/base-button';
-/** Same `loading` / `loadingAriaLabel` contract as {@link BaseButton} and {@link TriggerButton} (`RequireAllOrNone`). */
+/** Same loading contract as {@link BaseButton} (`loading` + `loadingAriaLabel`). */
 export type InlineTriggerButtonProps = Omit<BaseButtonProps, 'size' | 'variant' | 'children'> & {
-    /** Visual style; only secondary and tertiary are supported. */
     variant?: 'secondary' | 'tertiary';
     caretDirection: 'up' | 'down';
     startIcon?: BaseButtonIconProps['icon'];
-    /**
-     * Extra props for `startIcon` (merged after default size/color on the SVG). Use for stroke icons (`strokeWidth`),
-     * filters, opacity, or `className`. For fill/path icons, visual weight is usually a different asset (e.g. Fill vs Medium).
-     */
+    /** Merged after default icon size/color (stroke width, className, etc.). */
     startIconProps?: BaseButtonIconProps['iconProps'];
-    /** Optional custom right icon; when omitted, caret direction icon is used. */
     endIcon?: BaseButtonIconProps['icon'];
-    /** Same as `startIconProps` for the end/caret slot (default chevrons or `endIcon`). */
     endIconProps?: BaseButtonIconProps['iconProps'];
-    /** When true, end icon stays visible when idle or disabled; hidden while `loading`. */
+    /** Keeps end icon visible when idle or disabled; hidden while `loading`. */
     alwaysShowEndIcon?: boolean;
-    /** Custom row UI (chips, styled text, etc.). There is no separate string `label` API. */
     children: ReactNode;
 };

package/dist/lib-esm/inline-trigger-button/inline-trigger-button.d.ts

@@ -1,7 +1,9 @@
 import { type InlineTriggerButtonProps } from './inline-trigger-button-types';
 /**
- * Extra-small trigger for a **custom content row** (`children` only — e.g. chips). `secondary` and `tertiary` only.
- * Supports optional `endIcon` override on the right side.
- * For a standard text label + caret at any size, use {@link TriggerButton}.
+ * Extra-small trigger for arbitrary row content (`children`). Only `secondary` and `tertiary`.
+ * Optional `startIcon` / `endIcon`; otherwise shows chevrons from `caretDirection`.
+ * Prefer {@link TriggerButton} for a simple label + caret.
+ *
+ * @see {@link BaseButton} for `loading` / `loadingAriaLabel` and focus behavior.
  */
 export declare const InlineTriggerButton: import("react").ForwardRefExoticComponent<Omit<InlineTriggerButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/lib-esm/inline-trigger-button/inline-trigger-button.js

@@ -1,18 +1,22 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronUp, ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
+import { bpSize040, bpSize030 } from '@box/blueprint-web-assets/tokens/px-tokens';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { BaseButton } from '../primitives/base-button/index.js';
 import styles from './inline-trigger-button.module.js';
 
 const SECONDARY_ICON_COLOR = 'var(--bp-icon-icon-on-light-secondary)';
+const TERTIARY_ICON_COLOR = 'var(--bp-text-cta-link)';
 function caretIconForDirection(caretDirection) {
   return caretDirection === 'up' ? ChevronUp : ChevronDown;
 }
 /**
- * Extra-small trigger for a **custom content row** (`children` only — e.g. chips). `secondary` and `tertiary` only.
- * Supports optional `endIcon` override on the right side.
- * For a standard text label + caret at any size, use {@link TriggerButton}.
+ * Extra-small trigger for arbitrary row content (`children`). Only `secondary` and `tertiary`.
+ * Optional `startIcon` / `endIcon`; otherwise shows chevrons from `caretDirection`.
+ * Prefer {@link TriggerButton} for a simple label + caret.
+ *
+ * @see {@link BaseButton} for `loading` / `loadingAriaLabel` and focus behavior.
  */
 const InlineTriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -30,33 +34,39 @@ const InlineTriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const RightIcon = endIcon ?? caretIconForDirection(caretDirection);
-  const iconColor = variant === 'secondary' ? SECONDARY_ICON_COLOR : undefined;
+  const iconColor = variant === 'secondary' ? SECONDARY_ICON_COLOR : TERTIARY_ICON_COLOR;
+  const resolvedClassName = clsx(styles.inlineTriggerButton, styles.extraSmall, styles[variant], styles.row, {
+    [styles.startIcon]: !!startIcon,
+    [styles.endIconAlwaysVisible]: alwaysShowEndIcon && !loading
+  }, className);
   const baseButtonProps = {
     ...rest,
-    className: clsx(styles.inlineTriggerButton, styles.extraSmall, styles[variant], styles.row, {
-      [styles.startIcon]: !!startIcon,
-      [styles.endIconAlwaysVisible]: alwaysShowEndIcon && !loading
-    }, className),
+    className: resolvedClassName,
     'data-inline-trigger-loading': loading ? 'true' : undefined,
     loading,
     size: 'small',
     style,
     variant
   };
+  const resolvedStartIconProps = useMemo(() => ({
+    color: iconColor,
+    height: bpSize040,
+    width: bpSize040,
+    ...startIconProps
+  }), [iconColor, startIconProps]);
+  const resolvedEndIconProps = useMemo(() => ({
+    color: iconColor,
+    height: bpSize030,
+    width: bpSize030,
+    ...endIconProps
+  }), [endIconProps, iconColor]);
   return jsxs(BaseButton, {
     ref: forwardedRef,
     ...baseButtonProps,
     children: [startIcon ? jsx(BaseButton.Icon, {
       className: styles.startIcon,
       icon: startIcon,
-      iconProps: {
-        ...(iconColor ? {
-          color: iconColor
-        } : {}),
-        height: 'var(--bp-size-040, 1rem)',
-        width: 'var(--bp-size-040, 1rem)',
-        ...startIconProps
-      }
+      iconProps: resolvedStartIconProps
     }) : null, jsx(BaseButton.Label, {
       className: styles.contentSlot,
       children: jsx("span", {
@@ -66,14 +76,7 @@ const InlineTriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     }), jsx(BaseButton.Icon, {
       className: styles.caretCorner,
       icon: RightIcon,
-      iconProps: {
-        ...(iconColor ? {
-          color: iconColor
-        } : {}),
-        height: 'var(--bp-size-030, 0.75rem)',
-        width: 'var(--bp-size-030, 0.75rem)',
-        ...endIconProps
-      }
+      iconProps: resolvedEndIconProps
     })]
   });
 });

package/dist/lib-esm/modal/modal-content.js

@@ -30,6 +30,7 @@ const ModalContent = /*#__PURE__*/forwardRef(({
     container: container,
     children: jsx(RadixDialog.Overlay, {
       className: styles.overlay,
+      "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
       "data-modern": enableModernizedComponents ? 'true' : 'false',
       children: jsx(RadixDialog.Content, {
         ...props,

package/dist/lib-esm/modal/modal.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"overlay":"bp_modal_module_overlay--e96d7","headerDividerLine":"bp_modal_module_headerDividerLine--e96d7","footerDividerLine":"bp_modal_module_footerDividerLine--e96d7","content":"bp_modal_module_content--e96d7","smallSizeModal":"bp_modal_module_smallSizeModal--e96d7","mediumSizeModal":"bp_modal_module_mediumSizeModal--e96d7","largeSizeModal":"bp_modal_module_largeSizeModal--e96d7","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--e96d7","loadingContainerActive":"bp_modal_module_loadingContainerActive--e96d7","popup_bounce_in":"bp_modal_module_popup_bounce_in--e96d7","bpModalEnter":"bp_modal_module_bpModalEnter--e96d7","bpModalExit":"bp_modal_module_bpModalExit--e96d7","scrollableContainer":"bp_modal_module_scrollableContainer--e96d7","close":"bp_modal_module_close--e96d7","onColor":"bp_modal_module_onColor--e96d7","backButton":"bp_modal_module_backButton--e96d7","modalHeader":"bp_modal_module_modalHeader--e96d7","modalTitle":"bp_modal_module_modalTitle--e96d7","body":"bp_modal_module_body--e96d7","footer":"bp_modal_module_footer--e96d7","footerButton":"bp_modal_module_footerButton--e96d7","loadingContainer":"bp_modal_module_loadingContainer--e96d7","loading":"bp_modal_module_loading--e96d7","loadingOverlay":"bp_modal_module_loadingOverlay--e96d7","loadingContent":"bp_modal_module_loadingContent--e96d7","loadingContentVisible":"bp_modal_module_loadingContentVisible--e96d7"};
+var styles = {"overlay":"bp_modal_module_overlay--178e7","headerDividerLine":"bp_modal_module_headerDividerLine--178e7","footerDividerLine":"bp_modal_module_footerDividerLine--178e7","content":"bp_modal_module_content--178e7","smallSizeModal":"bp_modal_module_smallSizeModal--178e7","mediumSizeModal":"bp_modal_module_mediumSizeModal--178e7","largeSizeModal":"bp_modal_module_largeSizeModal--178e7","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--178e7","loadingContainerActive":"bp_modal_module_loadingContainerActive--178e7","popup_bounce_in":"bp_modal_module_popup_bounce_in--178e7","bpModalEnter":"bp_modal_module_bpModalEnter--178e7","bpModalExit":"bp_modal_module_bpModalExit--178e7","scrollableContainer":"bp_modal_module_scrollableContainer--178e7","close":"bp_modal_module_close--178e7","onColor":"bp_modal_module_onColor--178e7","backButton":"bp_modal_module_backButton--178e7","modalHeader":"bp_modal_module_modalHeader--178e7","modalTitle":"bp_modal_module_modalTitle--178e7","body":"bp_modal_module_body--178e7","footer":"bp_modal_module_footer--178e7","footerButton":"bp_modal_module_footerButton--178e7","loadingContainer":"bp_modal_module_loadingContainer--178e7","loading":"bp_modal_module_loading--178e7","loadingOverlay":"bp_modal_module_loadingOverlay--178e7","loadingContent":"bp_modal_module_loadingContent--178e7","loadingContentVisible":"bp_modal_module_loadingContentVisible--178e7"};
 
 export { styles as default };

package/dist/lib-esm/primitives/context-menu/context-menu-menu-content.js

@@ -2,7 +2,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
 import clsx from 'clsx';
 import { forwardRef, Children, isValidElement } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { useContentSizeObserver } from '../../utils/useContentSizeObserver.js';
+import { useForkRef } from '../../utils/useForkRef.js';
 import { useFullScreenContextMenu } from '../menu-utils/responsiveness/FullScreenContextMenuContext.js';
 import { ContextMenuHeader } from './context-menu-menu-header.js';
 import styles from './context-menu.module.js';
@@ -36,6 +40,12 @@ const ContextMenuMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) =>
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('ContextMenu');
+  const sizeObserverRef = useContentSizeObserver(360, 360);
+  const ref = useForkRef(forwardedRef, sizeObserverRef);
   const {
     isMenuFullScreenEnabled
   } = useFullScreenContextMenu();
@@ -48,7 +58,7 @@ const ContextMenuMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) =>
       container: container,
       children: jsxs(ContextMenuPrimitve.Content, {
         ...rest,
-        ref: forwardedRef,
+        ref: ref,
         className: clsx(styles.menuBlock, className),
         "data-menu-fullscreen": true,
         "data-modern": enableModernizedComponents ? 'true' : 'false',
@@ -63,9 +73,10 @@ const ContextMenuMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     container: container,
     children: jsx(ContextMenuPrimitve.Content, {
       ...rest,
-      ref: forwardedRef,
+      ref: ref,
       className: clsx(styles.menuBlock, className),
       "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
       children: children
     })
   });

package/dist/lib-esm/primitives/context-menu/context-menu-sub-menu-content.js

@@ -2,7 +2,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { useContentSizeObserver } from '../../utils/useContentSizeObserver.js';
+import { useForkRef } from '../../utils/useForkRef.js';
 import { useFullScreenContextMenu } from '../menu-utils/responsiveness/FullScreenContextMenuContext.js';
 import { sortMenuChildren } from './context-menu-menu-content.js';
 import styles from './context-menu.module.js';
@@ -23,6 +27,12 @@ const ContextMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('ContextMenu');
+  const sizeObserverRef = useContentSizeObserver(360, 360);
+  const ref = useForkRef(forwardedRef, sizeObserverRef);
   const {
     isMenuFullScreenEnabled
   } = useFullScreenContextMenu();
@@ -36,7 +46,7 @@ const ContextMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
       container: container,
       children: jsxs(ContextMenuPrimitve.SubContent, {
         ...rest,
-        ref: forwardedRef,
+        ref: ref,
         alignOffset: alignOffsetPx,
         className: clsx(styles.menuBlock, className),
         "data-menu-fullscreen": true,
@@ -56,10 +66,11 @@ const ContextMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
     container: container,
     children: jsx(ContextMenuPrimitve.SubContent, {
       ...rest,
-      ref: forwardedRef,
+      ref: ref,
       alignOffset: alignOffsetPx,
       className: clsx(styles.menuBlock, className),
       "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
       sideOffset: sideOffsetPx,
       children: children
     })

package/dist/lib-esm/primitives/context-menu/context-menu.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"menuBlock":"bp_context_menu_module_menuBlock--2df31","menuHeader":"bp_context_menu_module_menuHeader--2df31","fullScreenContent":"bp_context_menu_module_fullScreenContent--2df31","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--2df31","menuItem":"bp_context_menu_module_menuItem--2df31","startElement":"bp_context_menu_module_startElement--2df31","endElement":"bp_context_menu_module_endElement--2df31","headerTextContent":"bp_context_menu_module_headerTextContent--2df31","submenuCloseButton":"bp_context_menu_module_submenuCloseButton--2df31","menuCloseButton":"bp_context_menu_module_menuCloseButton--2df31","ellipsis":"bp_context_menu_module_ellipsis--2df31"};
+var styles = {"menuBlock":"bp_context_menu_module_menuBlock--32816","menuHeader":"bp_context_menu_module_menuHeader--32816","fullScreenContent":"bp_context_menu_module_fullScreenContent--32816","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--32816","menuItem":"bp_context_menu_module_menuItem--32816","startElement":"bp_context_menu_module_startElement--32816","endElement":"bp_context_menu_module_endElement--32816","headerTextContent":"bp_context_menu_module_headerTextContent--32816","submenuCloseButton":"bp_context_menu_module_submenuCloseButton--32816","menuCloseButton":"bp_context_menu_module_menuCloseButton--32816","ellipsis":"bp_context_menu_module_ellipsis--32816"};
 
 export { styles as default };

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"content":"bp_dropdown_menu_module_content--00e77","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--00e77","subheader":"bp_dropdown_menu_module_subheader--00e77","uppercased":"bp_dropdown_menu_module_uppercased--00e77","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--00e77","ellipsis":"bp_dropdown_menu_module_ellipsis--00e77","itemBody":"bp_dropdown_menu_module_itemBody--00e77","itemOverflow":"bp_dropdown_menu_module_itemOverflow--00e77","menuItemCaption":"bp_dropdown_menu_module_menuItemCaption--00e77","checkmark":"bp_dropdown_menu_module_checkmark--00e77","mediumSpacing":"bp_dropdown_menu_module_mediumSpacing--00e77","item":"bp_dropdown_menu_module_item--00e77","radioItem":"bp_dropdown_menu_module_radioItem--00e77","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--00e77","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--00e77","checkboxItem":"bp_dropdown_menu_module_checkboxItem--00e77","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--00e77","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--00e77","startElement":"bp_dropdown_menu_module_startElement--00e77","menuItemMainContent_directChild":"bp_dropdown_menu_module_menuItemMainContent_directChild--00e77","endElement":"bp_dropdown_menu_module_endElement--00e77","destructive":"bp_dropdown_menu_module_destructive--00e77","menuHeader":"bp_dropdown_menu_module_menuHeader--00e77","headerTextContent":"bp_dropdown_menu_module_headerTextContent--00e77","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--00e77","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--00e77"};
+var styles = {"content":"bp_dropdown_menu_module_content--6e932","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--6e932","subheader":"bp_dropdown_menu_module_subheader--6e932","uppercased":"bp_dropdown_menu_module_uppercased--6e932","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--6e932","ellipsis":"bp_dropdown_menu_module_ellipsis--6e932","itemBody":"bp_dropdown_menu_module_itemBody--6e932","itemOverflow":"bp_dropdown_menu_module_itemOverflow--6e932","menuItemCaption":"bp_dropdown_menu_module_menuItemCaption--6e932","checkmark":"bp_dropdown_menu_module_checkmark--6e932","mediumSpacing":"bp_dropdown_menu_module_mediumSpacing--6e932","item":"bp_dropdown_menu_module_item--6e932","radioItem":"bp_dropdown_menu_module_radioItem--6e932","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--6e932","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--6e932","checkboxItem":"bp_dropdown_menu_module_checkboxItem--6e932","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--6e932","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--6e932","startElement":"bp_dropdown_menu_module_startElement--6e932","menuItemMainContent_directChild":"bp_dropdown_menu_module_menuItemMainContent_directChild--6e932","endElement":"bp_dropdown_menu_module_endElement--6e932","destructive":"bp_dropdown_menu_module_destructive--6e932","menuHeader":"bp_dropdown_menu_module_menuHeader--6e932","headerTextContent":"bp_dropdown_menu_module_headerTextContent--6e932","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--6e932","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--6e932"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.26.1",
+    "version": "14.30.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.116.5",
+        "@box/blueprint-web-assets": "^4.117.2",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.18.19",
+        "@box/storybook-utils": "^0.19.2",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",