@trackunit/react-table-base-components 2.6.54 → 2.7.0

package/index.cjs.js

@@ -1152,24 +1152,50 @@ const cvaTd = cssClassVarianceUtilities.cva({
     ],
 });
 
-const cvaTextCell = cssClassVarianceUtilities.cva({ base: ["truncate", "text-sm"] });
+// The clamp is `!important` (and the variant adds no display utility of its own) because a display
+// class like `block` would otherwise win the cascade over line-clamp's `display: -webkit-box` —
+// in this workspace's compiled Tailwind output, `.block` etc. are declared after `.line-clamp-2` —
+// silently disabling the two-line truncation. tailwind-merge does not treat display and line-clamp
+// as conflicting, so a consumer-passed display utility survives the merge; the important modifier
+// makes the clamp win regardless.
+const cvaTextCell = cssClassVarianceUtilities.cva({
+    base: ["text-sm"],
+    variants: {
+        variant: {
+            default: ["truncate"],
+            multiline: ["!line-clamp-2", "overflow-hidden", "whitespace-normal"],
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
 const cvaTextCellTooltip = cssClassVarianceUtilities.cva({ base: ["grid"] });
 
 /**
  * The `<TextCell>` component is used for displaying text in a table cell.
- * The text is not editable and will be truncated with an ellipsis if the cell is too narrow.
+ * The text is not editable and will be truncated if the cell is too small:
+ * by default with an ellipsis on a single line, or clamped after two lines with `variant="multiline"`.
  * When truncated, a tooltip automatically appears on hover showing the full content.
+ * Truncation is re-evaluated when the cell is resized (e.g. a resizable table column).
  *
  * ### When to use
  * - Display simple text values in table columns (names, descriptions, statuses)
  * - When text content might be longer than the column width
  * - For read-only text display in data grids
+ * - For longer free-form text (notes, descriptions) - use `variant="multiline"` to show two lines before clamping
  *
  * ### When not to use
  * - For numeric values - use `NumberCell` instead
  * - For dates and times - use `DateTimeCell` instead
  * - For clickable links - use `LinkCell` or `ButtonCell` instead
- * - For multi-line content - consider `IdentityCell` with details
+ * - For structured multi-row content - consider `IdentityCell` or `MultiRowTableCell` instead
+ *
+ * ### Caveats
+ * - The multiline clamp declarations are marked important, so a display utility (`block`, `flex`, ...)
+ *   passed through `className` cannot disable the clamp — but still avoid passing display utilities.
+ * - The multiline clamp only just fits a default `Table` row (`rowHeight` 50 with `Td`'s
+ *   `py-table-spacing`). Prefer not to increase font size via `className`.
  *
  * @example Basic usage
  * ```tsx
@@ -1195,16 +1221,28 @@ const cvaTextCellTooltip = cssClassVarianceUtilities.cva({ base: ["grid"] });
  * // ReactElement content
  * <TextCell content={<span className="font-bold">Bold text</span>} />
  * ```
+ * @example Multiline clamp for longer text
+ * ```tsx
+ * import { TextCell } from "@trackunit/react-table-base-components";
+ *
+ * // Wraps onto two lines, then clamps; tooltip shows the full note on hover
+ * <TextCell content={note} variant="multiline" />
+ * ```
  * @param {TextCellProps} props - The props for the TextCell component
  * @returns {ReactElement} TextCell component
  */
-const TextCell = ({ content = "", className, "data-testid": dataTestId, ref, style }) => {
-    const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
-    const updateTooltipVisibility = (element) => {
-        setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
-    };
-    const mergedRef = reactComponents.useMergeRefs([ref, (elementRef) => updateTooltipVisibility(elementRef)]);
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaTextCellTooltip(), children: jsxRuntime.jsx("span", { className: cvaTextCell({ className }), "data-testid": dataTestId, ref: mergedRef, style: style, children: content }) }) }));
+const TextCell = ({ content = "", className, "data-testid": dataTestId, ref, style, variant = "default", }) => {
+    const { element, geometry, ref: measureRef } = reactComponents.useMeasure();
+    // Reading scroll/client metrics during render keeps the tooltip in sync with resizes:
+    // useMeasure's ResizeObserver re-renders on geometry changes, so overflow introduced by
+    // narrowing a resizable column is picked up (a mount-only ref measurement would not be).
+    const isTooltipVisible = element !== null &&
+        geometry !== undefined &&
+        (variant === "multiline"
+            ? element.scrollHeight > element.clientHeight
+            : element.scrollWidth > element.clientWidth);
+    const mergedRef = reactComponents.useMergeRefs([ref, measureRef]);
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaTextCellTooltip(), children: jsxRuntime.jsx("span", { className: cvaTextCell({ className, variant }), "data-testid": dataTestId, ref: mergedRef, style: style, children: content }) }) }));
 };
 
 /**

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { Button, Icon, CopyableText, Highlight, Heading, ExternalLink, DetailsList, Indicator, Spinner, Tooltip, Text, Tag, Notice, IconButton, MoreMenu, MenuContent, MenuItem, MenuDivider, useMergeRefs } from '@trackunit/react-components';
+import { Button, Icon, CopyableText, Highlight, Heading, ExternalLink, DetailsList, Indicator, Spinner, Tooltip, Text, Tag, Notice, IconButton, MoreMenu, MenuContent, MenuItem, MenuDivider, useMeasure, useMergeRefs } from '@trackunit/react-components';
 import { twMerge } from 'tailwind-merge';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cva } from '@trackunit/css-class-variance-utilities';
@@ -1150,24 +1150,50 @@ const cvaTd = cva({
     ],
 });
 
-const cvaTextCell = cva({ base: ["truncate", "text-sm"] });
+// The clamp is `!important` (and the variant adds no display utility of its own) because a display
+// class like `block` would otherwise win the cascade over line-clamp's `display: -webkit-box` —
+// in this workspace's compiled Tailwind output, `.block` etc. are declared after `.line-clamp-2` —
+// silently disabling the two-line truncation. tailwind-merge does not treat display and line-clamp
+// as conflicting, so a consumer-passed display utility survives the merge; the important modifier
+// makes the clamp win regardless.
+const cvaTextCell = cva({
+    base: ["text-sm"],
+    variants: {
+        variant: {
+            default: ["truncate"],
+            multiline: ["!line-clamp-2", "overflow-hidden", "whitespace-normal"],
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
 const cvaTextCellTooltip = cva({ base: ["grid"] });
 
 /**
  * The `<TextCell>` component is used for displaying text in a table cell.
- * The text is not editable and will be truncated with an ellipsis if the cell is too narrow.
+ * The text is not editable and will be truncated if the cell is too small:
+ * by default with an ellipsis on a single line, or clamped after two lines with `variant="multiline"`.
  * When truncated, a tooltip automatically appears on hover showing the full content.
+ * Truncation is re-evaluated when the cell is resized (e.g. a resizable table column).
  *
  * ### When to use
  * - Display simple text values in table columns (names, descriptions, statuses)
  * - When text content might be longer than the column width
  * - For read-only text display in data grids
+ * - For longer free-form text (notes, descriptions) - use `variant="multiline"` to show two lines before clamping
  *
  * ### When not to use
  * - For numeric values - use `NumberCell` instead
  * - For dates and times - use `DateTimeCell` instead
  * - For clickable links - use `LinkCell` or `ButtonCell` instead
- * - For multi-line content - consider `IdentityCell` with details
+ * - For structured multi-row content - consider `IdentityCell` or `MultiRowTableCell` instead
+ *
+ * ### Caveats
+ * - The multiline clamp declarations are marked important, so a display utility (`block`, `flex`, ...)
+ *   passed through `className` cannot disable the clamp — but still avoid passing display utilities.
+ * - The multiline clamp only just fits a default `Table` row (`rowHeight` 50 with `Td`'s
+ *   `py-table-spacing`). Prefer not to increase font size via `className`.
  *
  * @example Basic usage
  * ```tsx
@@ -1193,16 +1219,28 @@ const cvaTextCellTooltip = cva({ base: ["grid"] });
  * // ReactElement content
  * <TextCell content={<span className="font-bold">Bold text</span>} />
  * ```
+ * @example Multiline clamp for longer text
+ * ```tsx
+ * import { TextCell } from "@trackunit/react-table-base-components";
+ *
+ * // Wraps onto two lines, then clamps; tooltip shows the full note on hover
+ * <TextCell content={note} variant="multiline" />
+ * ```
  * @param {TextCellProps} props - The props for the TextCell component
  * @returns {ReactElement} TextCell component
  */
-const TextCell = ({ content = "", className, "data-testid": dataTestId, ref, style }) => {
-    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-    const updateTooltipVisibility = (element) => {
-        setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
-    };
-    const mergedRef = useMergeRefs([ref, (elementRef) => updateTooltipVisibility(elementRef)]);
-    return (jsx(Tooltip, { disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsx("div", { className: cvaTextCellTooltip(), children: jsx("span", { className: cvaTextCell({ className }), "data-testid": dataTestId, ref: mergedRef, style: style, children: content }) }) }));
+const TextCell = ({ content = "", className, "data-testid": dataTestId, ref, style, variant = "default", }) => {
+    const { element, geometry, ref: measureRef } = useMeasure();
+    // Reading scroll/client metrics during render keeps the tooltip in sync with resizes:
+    // useMeasure's ResizeObserver re-renders on geometry changes, so overflow introduced by
+    // narrowing a resizable column is picked up (a mount-only ref measurement would not be).
+    const isTooltipVisible = element !== null &&
+        geometry !== undefined &&
+        (variant === "multiline"
+            ? element.scrollHeight > element.clientHeight
+            : element.scrollWidth > element.clientWidth);
+    const mergedRef = useMergeRefs([ref, measureRef]);
+    return (jsx(Tooltip, { disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsx("div", { className: cvaTextCellTooltip(), children: jsx("span", { className: cvaTextCell({ className, variant }), "data-testid": dataTestId, ref: mergedRef, style: style, children: content }) }) }));
 };
 
 /**

package/migrations/entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/table-base-components/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "2.6.54",
+  "version": "2.7.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/TextCell/TextCell.d.ts

@@ -7,22 +7,38 @@ export interface TextCellProps extends CommonProps, Refable<HTMLSpanElement>, St
      * and a tooltip will appear on hover showing the full content.
      */
     content?: string | ReactElement;
+    /**
+     * Visual variant of the cell. Defaults to `"default"`.
+     * - `"default"`: single line, truncated with an ellipsis on horizontal overflow.
+     * - `"multiline"`: wraps and clamps after two lines on vertical overflow.
+     * Either way, a tooltip with the full content appears on hover when truncated.
+     */
+    variant?: "default" | "multiline";
 }
 /**
  * The `<TextCell>` component is used for displaying text in a table cell.
- * The text is not editable and will be truncated with an ellipsis if the cell is too narrow.
+ * The text is not editable and will be truncated if the cell is too small:
+ * by default with an ellipsis on a single line, or clamped after two lines with `variant="multiline"`.
  * When truncated, a tooltip automatically appears on hover showing the full content.
+ * Truncation is re-evaluated when the cell is resized (e.g. a resizable table column).
  *
  * ### When to use
  * - Display simple text values in table columns (names, descriptions, statuses)
  * - When text content might be longer than the column width
  * - For read-only text display in data grids
+ * - For longer free-form text (notes, descriptions) - use `variant="multiline"` to show two lines before clamping
  *
  * ### When not to use
  * - For numeric values - use `NumberCell` instead
  * - For dates and times - use `DateTimeCell` instead
  * - For clickable links - use `LinkCell` or `ButtonCell` instead
- * - For multi-line content - consider `IdentityCell` with details
+ * - For structured multi-row content - consider `IdentityCell` or `MultiRowTableCell` instead
+ *
+ * ### Caveats
+ * - The multiline clamp declarations are marked important, so a display utility (`block`, `flex`, ...)
+ *   passed through `className` cannot disable the clamp — but still avoid passing display utilities.
+ * - The multiline clamp only just fits a default `Table` row (`rowHeight` 50 with `Td`'s
+ *   `py-table-spacing`). Prefer not to increase font size via `className`.
  *
  * @example Basic usage
  * ```tsx
@@ -48,7 +64,14 @@ export interface TextCellProps extends CommonProps, Refable<HTMLSpanElement>, St
  * // ReactElement content
  * <TextCell content={<span className="font-bold">Bold text</span>} />
  * ```
+ * @example Multiline clamp for longer text
+ * ```tsx
+ * import { TextCell } from "@trackunit/react-table-base-components";
+ *
+ * // Wraps onto two lines, then clamps; tooltip shows the full note on hover
+ * <TextCell content={note} variant="multiline" />
+ * ```
  * @param {TextCellProps} props - The props for the TextCell component
  * @returns {ReactElement} TextCell component
  */
-export declare const TextCell: ({ content, className, "data-testid": dataTestId, ref, style }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextCell: ({ content, className, "data-testid": dataTestId, ref, style, variant, }: TextCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/TextCell/TextCell.variants.d.ts

@@ -1,9 +1,30 @@
 export declare const cvaTextCell: import("cva").CVAComponent<Omit<{
     base: string[];
+    variants: {
+        variant: {
+            default: string[];
+            multiline: string[];
+        };
+    };
+    defaultVariants: {
+        variant: "default";
+    };
 }, "defaultVariants"> & {
-    variants: unknown;
-    defaultVariants: Omit<{}, never>;
-}, unknown>;
+    variants: {
+        variant: {
+            default: string[];
+            multiline: string[];
+        };
+    };
+    defaultVariants: Omit<{}, "variant"> & {
+        variant: "default";
+    };
+}, {
+    variant: {
+        default: string[];
+        multiline: string[];
+    };
+}>;
 export declare const cvaTextCellTooltip: import("cva").CVAComponent<Omit<{
     base: string[];
 }, "defaultVariants"> & {