@box/blueprint-web 11.1.1 → 11.3.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.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';
@@ -79,5 +80,6 @@ export * from './utils/useBreakpoint';
 export * from './utils/useControllableState';
 export * from './utils/useForkRef';
 export * from './utils/useFullTextTooltip';
+export * from './utils/useIsEllipsized';
 export * from './utils/useUniqueId';
 export * from './visually-hidden';

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';
@@ -96,6 +97,7 @@ export { Breakpoint, useBreakpoint } from './utils/useBreakpoint.js';
 export { useControllableState } from './utils/useControllableState.js';
 export { useForkRef } from './utils/useForkRef.js';
 export { useFullTextTooltip } from './utils/useFullTextTooltip.js';
+export { useIsEllipsized } from './utils/useIsEllipsized.js';
 export { getUniqueId, useUniqueId } from './utils/useUniqueId.js';
 export { VisuallyHidden } from './visually-hidden/visually-hidden.js';
 export { useMainSectionSidebar, usePageNavigation } from './page/page-context.js';

package/dist/lib-esm/utils/useIsEllipsized.js

@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
 import noop from 'lodash/noop';
+import { useState, useEffect } from 'react';
 
 const useIsEllipsized = ref => {
   const [isEllipsized, setIsEllipsized] = useState(false);

package/package.json

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