@box/blueprint-web 16.6.2 → 16.6.3

package/dist/lib-esm/index.css

@@ -12912,7 +12912,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:fit-content;
 }
 
-.bp_trigger_button_module_triggerButton--0a1fb[data-modern=false].bp_trigger_button_module_secondary--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b[data-modern=false].bp_trigger_button_module_secondary--8da2b{
   --trigger-button-background:var(--surface-dropdown-secondary-surface);
   --trigger-button-border:var(--border-1) solid var(--border-cta-border-secondary);
   --trigger-button-focus-or-hover-background:var(--surface-dropdown-secondary-surface-hover);
@@ -12921,11 +12921,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --trigger-button-active-background:var(--surface-dropdown-secondary-surface-pressed);
   --trigger-button-active-border:var(--border-1) solid var(--border-cta-border-secondary);
 }
-.bp_trigger_button_module_triggerButton--0a1fb[data-modern=false].bp_trigger_button_module_tertiary--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b[data-modern=false].bp_trigger_button_module_tertiary--8da2b{
   --trigger-button-focus-or-hover-background:var(--surface-dropdown-primary-surface-hover);
   --trigger-button-active-background:var(--surface-dropdown-primary-surface-pressed);
 }
-.bp_trigger_button_module_triggerButton--0a1fb[data-modern=false].bp_trigger_button_module_extraSmall--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b[data-modern=false].bp_trigger_button_module_extraSmall--8da2b{
   --button-xsmall-gap:var(--space-1);
   --button-xsmall-height:var(--size-6);
   --button-xsmall-padding:0.375rem var(--space-1);
@@ -12937,14 +12937,14 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_trigger_button_module_triggerButton--0a1fb[data-modern=false].bp_trigger_button_module_small--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b[data-modern=false].bp_trigger_button_module_small--8da2b{
   --button-small-padding:0.375rem var(--space-2);
 }
-.bp_trigger_button_module_triggerButton--0a1fb[data-modern=false].bp_trigger_button_module_large--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b[data-modern=false].bp_trigger_button_module_large--8da2b{
   --button-large-padding:0.375rem var(--space-3) 0.375rem var(--space-2);
 }
 
-.bp_trigger_button_module_triggerButton--0a1fb[data-modern=true].bp_trigger_button_module_secondary--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b[data-modern=true].bp_trigger_button_module_secondary--8da2b{
   --trigger-button-background:var(--bp-surface-dropdown-secondary-surface);
   --trigger-button-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
   --trigger-button-focus-or-hover-background:var(--bp-surface-dropdown-secondary-surface-hover);
@@ -12953,11 +12953,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --trigger-button-active-background:var(--bp-surface-dropdown-secondary-surface-pressed);
   --trigger-button-active-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
 }
-.bp_trigger_button_module_triggerButton--0a1fb[data-modern=true].bp_trigger_button_module_tertiary--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b[data-modern=true].bp_trigger_button_module_tertiary--8da2b{
   --trigger-button-focus-or-hover-background:var(--bp-surface-dropdown-tertiary-surface-hover);
   --trigger-button-active-background:var(--bp-surface-dropdown-secondary-surface-pressed);
 }
-.bp_trigger_button_module_triggerButton--0a1fb[data-modern=true].bp_trigger_button_module_extraSmall--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b[data-modern=true].bp_trigger_button_module_extraSmall--8da2b{
   --button-xsmall-gap:var(--bp-space-010);
   --button-xsmall-height:var(--bp-size-060);
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -12968,51 +12968,66 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_secondary--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_secondary--8da2b{
   background:var(--trigger-button-background);
   border:var(--trigger-button-border);
 }
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_secondary--0a1fb:not(:disabled):hover,.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_secondary--0a1fb:not(:disabled)[data-focus-visible]{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_secondary--8da2b:not(:disabled):hover,.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_secondary--8da2b:not(:disabled)[data-focus-visible]{
   background:var(--trigger-button-focus-or-hover-background);
   border:var(--trigger-button-focus-or-hover-border);
 }
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_secondary--0a1fb:not(:disabled):active{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_secondary--8da2b:not(:disabled):active{
   background:var(--trigger-button-active-background);
   border:var(--trigger-button-active-border);
 }
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_tertiary--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_tertiary--8da2b{
   background:var(--trigger-button-background);
   border:var(--trigger-button-border);
 }
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_tertiary--0a1fb:not(:disabled):hover,.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_tertiary--0a1fb:not(:disabled)[data-focus-visible]{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_tertiary--8da2b:not(:disabled):hover,.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_tertiary--8da2b:not(:disabled)[data-focus-visible]{
   background:var(--trigger-button-focus-or-hover-background);
 }
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_tertiary--0a1fb:not(:disabled):active{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_tertiary--8da2b:not(:disabled):active{
   background:var(--trigger-button-active-background);
 }
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_extraSmall--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_extraSmall--8da2b{
   border:var(--trigger-button-focus-or-hover-border-xsmall);
   gap:var(--button-xsmall-gap);
   min-height:var(--button-xsmall-height);
 }
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_extraSmall--0a1fb:not(:disabled):active,.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_extraSmall--0a1fb:not(:disabled):hover,.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_extraSmall--0a1fb:not(:disabled)[data-focus-visible]{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_extraSmall--8da2b:not(:disabled):active,.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_extraSmall--8da2b:not(:disabled):hover,.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_extraSmall--8da2b:not(:disabled)[data-focus-visible]{
   border:var(--trigger-button-focus-or-hover-border-xsmall);
 }
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_extraSmall--0a1fb.bp_trigger_button_module_startIcon--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_extraSmall--8da2b.bp_trigger_button_module_startIcon--8da2b{
   padding-left:.625rem;
 }
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_small--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_small--8da2b{
   padding:var(--button-small-padding);
 }
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_small--0a1fb.bp_trigger_button_module_startIcon--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_small--8da2b.bp_trigger_button_module_startIcon--8da2b{
   padding-left:.625rem;
 }
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_large--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_large--8da2b{
   padding:var(--button-large-padding);
 }
-.bp_trigger_button_module_triggerButton--0a1fb.bp_trigger_button_module_large--0a1fb.bp_trigger_button_module_startIcon--0a1fb{
+.bp_trigger_button_module_triggerButton--8da2b.bp_trigger_button_module_large--8da2b.bp_trigger_button_module_startIcon--8da2b{
   padding-left:.625rem;
 }
+.bp_trigger_button_module_triggerButton--8da2b .bp_trigger_button_module_labelEllipsis--8da2b{
+  flex:1 1 0;
+  min-width:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.bp_trigger_button_module_triggerButton--8da2b .bp_trigger_button_module_labelWrap--8da2b{
+  word-wrap:break-word;
+  flex:1 1 0;
+  min-width:0;
+  overflow-wrap:break-word;
+  text-align:left;
+  white-space:normal;
+}
 .bp_styles_module_splitButton--a3588[data-modern=false]{
   --split-button-left-width:100%;
   --split-button-left-gap-margin-inline-end:calc(var(--space-05)/2);

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

@@ -1,5 +1,6 @@
 import { type BaseButtonIconProps, type BaseButtonProps } from '../primitives/base-button';
 export type TriggerButtonSize = 'extraSmall' | Exclude<NonNullable<BaseButtonProps['size']>, 'x-small'>;
+export type TriggerButtonOverflow = 'default' | 'ellipsis' | 'wrap';
 export type TriggerButtonProps = Omit<BaseButtonProps, 'size'> & {
     /** Trigger button label */
     label?: string;
@@ -9,6 +10,8 @@ export type TriggerButtonProps = Omit<BaseButtonProps, 'size'> & {
     caretDirection: 'up' | 'down';
     /** The size of the trigger button */
     size?: TriggerButtonSize;
+    /** Controls how the label handles overflow. 'ellipsis' ellipsizes to one line with a tooltip; 'wrap' allows wrapping. */
+    overflow?: TriggerButtonOverflow;
 };
 /**
  * The TriggerButton is a stylized button that has an optional start icon, optional label, and a caret as the end icon.

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

@@ -2,9 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { CaretUp, CaretDown } from '@box/blueprint-web-assets/icons/Fill';
 import { ChevronUp, ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { BaseButton } from '../primitives/base-button/index.js';
+import { TooltipWrapper } from '../utils/TooltipWrapper.js';
+import { useIsEllipsized } from '../utils/useIsEllipsized.js';
 import styles from './trigger-button.module.js';
 
 const buttonSizeToStartIconSizeMap = {
@@ -20,19 +22,26 @@ const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     caretDirection,
     label,
+    overflow = 'default',
     startIcon,
     size = 'small',
     className,
     variant = 'secondary',
     ...rest
   } = props;
+  const {
+    disabled,
+    loading
+  } = rest;
   const startIconSize = buttonSizeToStartIconSizeMap[size];
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const labelRef = useRef(null);
+  const isEllipsized = useIsEllipsized(labelRef);
   // Map extraSmall to small for BaseButton to accept the extraSmall size, but apply our custom styling. BaseButton does not support extraSmall size.
   const baseButtonSize = size === 'extraSmall' ? 'small' : size;
-  return jsxs(BaseButton, {
+  const button = jsxs(BaseButton, {
     ref: forwardedRef,
     className: clsx(styles.triggerButton, styles[size], styles[variant], {
       [styles.startIcon]: !!startIcon
@@ -48,7 +57,14 @@ const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         height: startIconSize,
         width: startIconSize
       }
-    }), label && jsx(BaseButton.Label, {
+    }), label && overflow === 'ellipsis' && jsx(BaseButton.Label, {
+      ref: labelRef,
+      className: styles.labelEllipsis,
+      children: label
+    }), label && overflow !== 'ellipsis' && jsx(BaseButton.Label, {
+      className: clsx({
+        [styles.labelWrap]: overflow === 'wrap'
+      }),
       children: label
     }), enableModernizedComponents ? jsx(BaseButton.Icon, {
       icon: caretDirection === 'up' ? ChevronUp : ChevronDown
@@ -56,6 +72,11 @@ const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       icon: caretDirection === 'up' ? CaretUp : CaretDown
     })]
   });
+  return overflow === 'ellipsis' && !disabled && !loading ? jsx(TooltipWrapper, {
+    tooltipContent: label,
+    withTooltip: isEllipsized,
+    children: button
+  }) : button;
 });
 
 export { TriggerButton };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"triggerButton":"bp_trigger_button_module_triggerButton--0a1fb","secondary":"bp_trigger_button_module_secondary--0a1fb","tertiary":"bp_trigger_button_module_tertiary--0a1fb","extraSmall":"bp_trigger_button_module_extraSmall--0a1fb","small":"bp_trigger_button_module_small--0a1fb","large":"bp_trigger_button_module_large--0a1fb","startIcon":"bp_trigger_button_module_startIcon--0a1fb"};
+var styles = {"triggerButton":"bp_trigger_button_module_triggerButton--8da2b","secondary":"bp_trigger_button_module_secondary--8da2b","tertiary":"bp_trigger_button_module_tertiary--8da2b","extraSmall":"bp_trigger_button_module_extraSmall--8da2b","small":"bp_trigger_button_module_small--8da2b","large":"bp_trigger_button_module_large--8da2b","startIcon":"bp_trigger_button_module_startIcon--8da2b","labelEllipsis":"bp_trigger_button_module_labelEllipsis--8da2b","labelWrap":"bp_trigger_button_module_labelWrap--8da2b"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "16.6.2",
+    "version": "16.6.3",
     "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": "^5.3.0",
+        "@box/blueprint-web-assets": "^5.3.1",
         "@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": "^1.1.16",
+        "@box/storybook-utils": "^1.1.17",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",