@trackunit/react-table-base-components 0.0.177 → 0.0.178

package/index.cjs.js

@@ -334,8 +334,14 @@ const Tfoot = (_a) => {
  * @returns {JSX.Element} Th component
  */
 const Th = (_a) => {
-    var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
-    return (jsxRuntime.jsx("th", Object.assign({ "data-testid": dataTestId, className: cvaTh({ className }) }, rest, { children: children })));
+    var { dataTestId, className, children, tooltipLabel } = _a, rest = __rest(_a, ["dataTestId", "className", "children", "tooltipLabel"]);
+    const [showToolTip, setShowTooltipVisible] = react.useState(false);
+    const [thWidth, setThWidth] = react.useState(0);
+    const [childrenWidth, setChildrenWidth] = react.useState(0);
+    react.useEffect(() => {
+        setShowTooltipVisible(thWidth > childrenWidth);
+    }, [thWidth, childrenWidth, tooltipLabel]);
+    return (jsxRuntime.jsx("th", Object.assign({ ref: elementRef => setThWidth(elementRef ? elementRef.clientWidth : 0), className: cvaTh({ className }), "data-testid": dataTestId }, rest, { children: tooltipLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: showToolTip, label: tooltipLabel, placement: "bottom", className: cvaTooltip(), children: jsxRuntime.jsx("div", { className: cvaChildrenContainer(), ref: elementRef => setChildrenWidth(elementRef ? elementRef.clientWidth : 0), children: children }) })) : (jsxRuntime.jsx("div", { className: cvaChildrenContainer(), ref: elementRef => setChildrenWidth(elementRef ? elementRef.clientWidth : 0), children: children })) })));
 };
 const cvaTh = cssClassVarianceUtilities.cvaMerge([
     "hover:bg-neutral-200",
@@ -343,9 +349,10 @@ const cvaTh = cssClassVarianceUtilities.cvaMerge([
     "overflow-hidden",
     "font-medium",
     "whitespace-nowrap",
-    "px-3",
-    "py-table-spacing",
+    "p-0",
 ]);
+const cvaTooltip = cssClassVarianceUtilities.cvaMerge(["w-full"]);
+const cvaChildrenContainer = cssClassVarianceUtilities.cvaMerge(["max-w-full", "px-3", "py-table-spacing"]);
 
 /**
  * The Thead is a wrapper for the thead html element.

package/index.esm.js

@@ -3,7 +3,7 @@ import { Checkbox } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { formatDateUtil, timeSinceAuto } from '@trackunit/date-and-time-utils';
 import { Indicator, ExternalLink, Tooltip, Tag } from '@trackunit/react-components';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 const cvaCheckboxCell = cvaMerge([""]);
 
@@ -330,8 +330,14 @@ const Tfoot = (_a) => {
  * @returns {JSX.Element} Th component
  */
 const Th = (_a) => {
-    var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
-    return (jsx("th", Object.assign({ "data-testid": dataTestId, className: cvaTh({ className }) }, rest, { children: children })));
+    var { dataTestId, className, children, tooltipLabel } = _a, rest = __rest(_a, ["dataTestId", "className", "children", "tooltipLabel"]);
+    const [showToolTip, setShowTooltipVisible] = useState(false);
+    const [thWidth, setThWidth] = useState(0);
+    const [childrenWidth, setChildrenWidth] = useState(0);
+    useEffect(() => {
+        setShowTooltipVisible(thWidth > childrenWidth);
+    }, [thWidth, childrenWidth, tooltipLabel]);
+    return (jsx("th", Object.assign({ ref: elementRef => setThWidth(elementRef ? elementRef.clientWidth : 0), className: cvaTh({ className }), "data-testid": dataTestId }, rest, { children: tooltipLabel ? (jsx(Tooltip, { disabled: showToolTip, label: tooltipLabel, placement: "bottom", className: cvaTooltip(), children: jsx("div", { className: cvaChildrenContainer(), ref: elementRef => setChildrenWidth(elementRef ? elementRef.clientWidth : 0), children: children }) })) : (jsx("div", { className: cvaChildrenContainer(), ref: elementRef => setChildrenWidth(elementRef ? elementRef.clientWidth : 0), children: children })) })));
 };
 const cvaTh = cvaMerge([
     "hover:bg-neutral-200",
@@ -339,9 +345,10 @@ const cvaTh = cvaMerge([
     "overflow-hidden",
     "font-medium",
     "whitespace-nowrap",
-    "px-3",
-    "py-table-spacing",
+    "p-0",
 ]);
+const cvaTooltip = cvaMerge(["w-full"]);
+const cvaChildrenContainer = cvaMerge(["max-w-full", "px-3", "py-table-spacing"]);
 
 /**
  * The Thead is a wrapper for the thead html element.

package/package.json

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

package/src/components/Th.d.ts

@@ -13,6 +13,10 @@ export interface ThProps extends CommonProps, React.HTMLAttributes<HTMLTableCell
      * Children to render in the table cell.
      */
     children?: ReactNode;
+    /**
+     * Label for the tooltip.
+     */
+    tooltipLabel?: string;
 }
 /**
  * The Th is a wrapper for the th html element.
@@ -24,4 +28,4 @@ export interface ThProps extends CommonProps, React.HTMLAttributes<HTMLTableCell
  * @param {ThProps} props - The props for the Th component
  * @returns {JSX.Element} Th component
  */
-export declare const Th: ({ dataTestId, className, children, ...rest }: ThProps) => JSX.Element;
+export declare const Th: ({ dataTestId, className, children, tooltipLabel, ...rest }: ThProps) => JSX.Element;