@box/blueprint-web 11.1.0 → 11.2.0

package/dist/lib-esm/ellipsizable-text/ellipsizable-text.d.ts

@@ -0,0 +1,3 @@
+import { type ElementTypes } from '../text/types';
+import { type EllipsizableTextProps } from './types';
+export declare const EllipsizableText: import("react").ForwardRefExoticComponent<EllipsizableTextProps & import("react").RefAttributes<ElementTypes>>;

package/dist/lib-esm/ellipsizable-text/ellipsizable-text.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, createRef } from 'react';
+import { Focusable } from '../focusable/focusable.js';
+import { Text } from '../text/text.js';
+import { Tooltip } from '../tooltip/tooltip.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import { useIsEllipsized } from '../utils/useIsEllipsized.js';
+
+const Wrapper = ({
+  children,
+  withTooltip,
+  tooltipContent
+}) => {
+  if (withTooltip) {
+    return jsx(Tooltip, {
+      content: tooltipContent,
+      children: jsx(Focusable, {
+        children: children
+      })
+    });
+  }
+  return children;
+};
+const EllipsizableText = /*#__PURE__*/forwardRef(({
+  children,
+  lineClamp,
+  style,
+  ...rest
+}, forwardedRef) => {
+  const textRef = /*#__PURE__*/createRef();
+  const isEllipsized = useIsEllipsized(textRef);
+  return jsx(Wrapper, {
+    tooltipContent: children,
+    withTooltip: isEllipsized,
+    children: jsx(Text, {
+      ref: useForkRef(textRef, forwardedRef),
+      ...rest,
+      style: {
+        ...style,
+        display: '-webkit-box',
+        overflow: 'hidden',
+        WebkitBoxOrient: 'vertical',
+        WebkitLineClamp: lineClamp.toString()
+      },
+      children: children
+    })
+  });
+});
+
+export { EllipsizableText };

package/dist/lib-esm/ellipsizable-text/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ellipsizable-text';
+export * from './types';

package/dist/lib-esm/ellipsizable-text/types.d.ts

@@ -0,0 +1,5 @@
+import { type TextProps } from '../text';
+export type EllipsizableTextProps = TextProps & {
+    /** Number if lines to show before the text is ellipsized. Note lineClamp must be a positive integer. */
+    lineClamp: number;
+};

package/dist/lib-esm/index.css

@@ -2737,7 +2737,7 @@
   transform:translateZ(0);
 }
 
-.bp_dropdown_menu_module_content--75742{
+.bp_dropdown_menu_module_content--8752a{
   background-color:var(--surface-menu-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-3);
@@ -2749,7 +2749,7 @@
   font-weight:400;
   letter-spacing:.01875rem;
   line-height:1.25rem;
-  max-height:var(--blueprint-web-dropdown-menu-max-height, var(--radix-dropdown-menu-content-available-height));
+  max-height:min(var(--blueprint-web-dropdown-menu-max-height, var(--radix-dropdown-menu-content-available-height)), var(--radix-dropdown-menu-content-available-height));
   max-width:min(var(--blueprint-web-dropdown-content-max-width, 50vw), var(--radix-dropdown-menu-content-available-width));
   min-width:var(--blueprint-web-dropdown-content-min-width);
   overflow-y:auto;
@@ -2758,7 +2758,7 @@
   text-transform:none;
   z-index:2147483647;
 }
-.bp_dropdown_menu_module_content--75742[data-menu-fullscreen=true]{
+.bp_dropdown_menu_module_content--8752a[data-menu-fullscreen=true]{
   border:unset;
   border-radius:unset;
   display:flex;
@@ -2771,24 +2771,24 @@
   position:relative;
   width:100vw;
 }
-.bp_dropdown_menu_module_content--75742[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--75742{
+.bp_dropdown_menu_module_content--8752a[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--8752a{
   overflow-y:auto;
   padding:var(--space-3);
 }
-.bp_dropdown_menu_module_content--75742 .bp_dropdown_menu_module_subheader--75742{
+.bp_dropdown_menu_module_content--8752a .bp_dropdown_menu_module_subheader--8752a{
   padding:var(--space-2);
 }
-.bp_dropdown_menu_module_content--75742 .bp_dropdown_menu_module_subheader--75742.bp_dropdown_menu_module_uppercased--75742{
+.bp_dropdown_menu_module_content--8752a .bp_dropdown_menu_module_subheader--8752a.bp_dropdown_menu_module_uppercased--8752a{
   text-transform:uppercase;
 }
 
-.bp_dropdown_menu_module_ellipsis--75742{
+.bp_dropdown_menu_module_ellipsis--8752a{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
 
-.bp_dropdown_menu_module_checkmark--75742{
+.bp_dropdown_menu_module_checkmark--8752a{
   align-items:center;
   display:inline-flex;
   justify-content:center;
@@ -2796,7 +2796,7 @@
   position:absolute;
 }
 
-.bp_dropdown_menu_module_item--75742,.bp_dropdown_menu_module_subMenuTrigger--75742{
+.bp_dropdown_menu_module_item--8752a,.bp_dropdown_menu_module_subMenuTrigger--8752a{
   align-items:center;
   border:var(--border-2) solid #0000;
   border-radius:var(--radius-3);
@@ -2808,30 +2808,30 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_dropdown_menu_module_item--75742[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--75742[data-disabled]{
+.bp_dropdown_menu_module_item--8752a[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--8752a[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_dropdown_menu_module_item--75742[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--75742[data-highlighted]{
+.bp_dropdown_menu_module_item--8752a[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--8752a[data-highlighted]{
   background-color:var(--surface-menu-surface-hover);
   border:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_dropdown_menu_module_item--75742:active,.bp_dropdown_menu_module_subMenuTrigger--75742:active{
+.bp_dropdown_menu_module_item--8752a:active,.bp_dropdown_menu_module_subMenuTrigger--8752a:active{
   background-color:var(--surface-menu-surface-hover);
   border:var(--border-2) solid #0000;
 }
-.bp_dropdown_menu_module_item--75742:hover,.bp_dropdown_menu_module_item--75742[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--75742:hover,.bp_dropdown_menu_module_subMenuTrigger--75742[data-state=open]{
+.bp_dropdown_menu_module_item--8752a:hover,.bp_dropdown_menu_module_item--8752a[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--8752a:hover,.bp_dropdown_menu_module_subMenuTrigger--8752a[data-state=open]{
   background-color:var(--surface-menu-surface-hover);
 }
-.bp_dropdown_menu_module_item--75742.bp_dropdown_menu_module_checkboxItem--75742,.bp_dropdown_menu_module_item--75742.bp_dropdown_menu_module_radioItem--75742,.bp_dropdown_menu_module_subMenuTrigger--75742.bp_dropdown_menu_module_checkboxItem--75742,.bp_dropdown_menu_module_subMenuTrigger--75742.bp_dropdown_menu_module_radioItem--75742{
+.bp_dropdown_menu_module_item--8752a.bp_dropdown_menu_module_checkboxItem--8752a,.bp_dropdown_menu_module_item--8752a.bp_dropdown_menu_module_radioItem--8752a,.bp_dropdown_menu_module_subMenuTrigger--8752a.bp_dropdown_menu_module_checkboxItem--8752a,.bp_dropdown_menu_module_subMenuTrigger--8752a.bp_dropdown_menu_module_radioItem--8752a{
   padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
 }
 
-.bp_dropdown_menu_module_dropdownMenuItemSeparator--75742{
+.bp_dropdown_menu_module_dropdownMenuItemSeparator--8752a{
   margin-block:var(--space-2);
 }
 
-.bp_dropdown_menu_module_menuHeader--75742{
+.bp_dropdown_menu_module_menuHeader--8752a{
   align-items:center;
   box-shadow:var(--dropshadow-1);
   display:grid;
@@ -2841,15 +2841,15 @@
   padding:var(--space-3);
 }
 
-.bp_dropdown_menu_module_headerTextContent--75742{
+.bp_dropdown_menu_module_headerTextContent--8752a{
   display:grid;
 }
 
-.bp_dropdown_menu_module_submenuCloseButton--75742{
+.bp_dropdown_menu_module_submenuCloseButton--8752a{
   grid-area:submenu-close;
 }
 
-.bp_dropdown_menu_module_menuCloseButton--75742{
+.bp_dropdown_menu_module_menuCloseButton--8752a{
   grid-area:close;
 }
 

package/dist/lib-esm/index.d.ts

@@ -17,6 +17,7 @@ export * from './content-field';
 export * from './data-table/data-table';
 export * from './date-picker';
 export * from './divider';
+export * from './ellipsizable-text';
 export * from './empty-state';
 export * from './focusable';
 export * from './ghost';

package/dist/lib-esm/index.js

@@ -21,6 +21,7 @@ export { ContentField } from './content-field/content-field.js';
 export { DataTableWrapper, StickyCell } from './data-table/data-table.js';
 export { DatePicker } from './date-picker/date-picker.js';
 export { Divider } from './divider/divider.js';
+export { EllipsizableText } from './ellipsizable-text/ellipsizable-text.js';
 export { EmptyState } from './empty-state/empty-state.js';
 export { Focusable } from './focusable/focusable.js';
 export { Ghost } from './ghost/ghost.js';

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Space2, Space4 } from '@box/blueprint-web-assets/tokens/px-tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, Children, isValidElement } from 'react';
@@ -22,6 +23,8 @@ const sortMenuChildren = children => {
     OtherChildren: []
   });
 };
+const DEFAULT_COLLISION_PADDING = parseInt(Space4, 10);
+const SIDE_OFFSET = parseInt(Space2, 10);
 /**
  * Based on Radix-UI Content
  * @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu#content
@@ -30,6 +33,7 @@ const DropdownMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
     container,
+    collisionPadding = DEFAULT_COLLISION_PADDING,
     className,
     ...rest
   } = props;
@@ -63,8 +67,8 @@ const DropdownMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         ...rest,
         ref: forwardedRef,
         className: clsx(styles.content, className),
-        // TODO: Change a number to a token
-        sideOffset: 8,
+        collisionPadding: collisionPadding,
+        sideOffset: SIDE_OFFSET,
         children: children
       })
     })

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Space3, Space4 } from '@box/blueprint-web-assets/tokens/px-tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
@@ -6,6 +7,8 @@ import { useFullScreenDropdownMenu } from '../menu-utils/responsiveness/FullScre
 import { sortMenuChildren } from './dropdown-menu-content.js';
 import styles from './dropdown-menu.module.js';
 
+const DEFAULT_COLLISION_PADDING = parseInt(Space4, 10);
+const SIDE_OFFSET = parseInt(Space3, 10);
 /**
  * Based on Radix-UI Sub Content
  * @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu#subcontent
@@ -14,6 +17,7 @@ const DropdownMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
   const {
     children,
     container,
+    collisionPadding = DEFAULT_COLLISION_PADDING,
     className,
     ...rest
   } = props;
@@ -51,7 +55,8 @@ const DropdownMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
         ...rest,
         ref: forwardedRef,
         className: clsx(styles.content, className),
-        sideOffset: 12,
+        collisionPadding: collisionPadding,
+        sideOffset: SIDE_OFFSET,
         children: children
       })
     })

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--75742","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--75742","subheader":"bp_dropdown_menu_module_subheader--75742","uppercased":"bp_dropdown_menu_module_uppercased--75742","ellipsis":"bp_dropdown_menu_module_ellipsis--75742","checkmark":"bp_dropdown_menu_module_checkmark--75742","item":"bp_dropdown_menu_module_item--75742","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--75742","radioItem":"bp_dropdown_menu_module_radioItem--75742","checkboxItem":"bp_dropdown_menu_module_checkboxItem--75742","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--75742","menuHeader":"bp_dropdown_menu_module_menuHeader--75742","headerTextContent":"bp_dropdown_menu_module_headerTextContent--75742","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--75742","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--75742"};
+var styles = {"content":"bp_dropdown_menu_module_content--8752a","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--8752a","subheader":"bp_dropdown_menu_module_subheader--8752a","uppercased":"bp_dropdown_menu_module_uppercased--8752a","ellipsis":"bp_dropdown_menu_module_ellipsis--8752a","checkmark":"bp_dropdown_menu_module_checkmark--8752a","item":"bp_dropdown_menu_module_item--8752a","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--8752a","radioItem":"bp_dropdown_menu_module_radioItem--8752a","checkboxItem":"bp_dropdown_menu_module_checkboxItem--8752a","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--8752a","menuHeader":"bp_dropdown_menu_module_menuHeader--8752a","headerTextContent":"bp_dropdown_menu_module_headerTextContent--8752a","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--8752a","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--8752a"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "11.1.0",
+    "version": "11.2.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {