@trackunit/react-table-base-components 0.0.20 → 0.0.22

package/index.cjs.js

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactFormComponents = require('@trackunit/react-form-components');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactComponents = require('@trackunit/react-components');
+var react = require('react');
 
 const cvaCheckboxCell = cssClassVarianceUtilities.cvaMerge([""]);
 
@@ -205,6 +206,24 @@ const Td = (_a) => {
 };
 const cvaTd = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "align-middle", "py-table-spacing", "px-2", "whitespace-nowrap"]);
 
+const cvaTextCell = cssClassVarianceUtilities.cvaMerge(["truncate"]);
+const cvaTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["grid"]);
+
+/**
+ * The `<TextCell>` component is used for displaying text in a table cell.
+ * The text is not editable and will be truncated if the cell is too narrow.
+ *
+ * @param {TextCellProps} props - The props for the TextCell component
+ * @returns {JSX.Element} TextCell component
+ */
+const TextCell = ({ content = "", className, dataTestId }) => {
+    const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
+    const updateTooltipVisibility = (element) => {
+        setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
+    };
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isTooltipVisible, label: content, className: cvaTextCellTooltip(), children: jsxRuntime.jsx("span", { ref: elementRef => updateTooltipVisibility(elementRef), className: cvaTextCell({ className }), "data-testid": dataTestId, children: content }) }));
+};
+
 /**
  * The Tfoot is a wrapper for the tfoot html element.
  * It is used to render a table, and adds some default styling.
@@ -304,6 +323,7 @@ exports.TableRoot = TableRoot;
 exports.TagsCell = TagsCell;
 exports.Tbody = Tbody;
 exports.Td = Td;
+exports.TextCell = TextCell;
 exports.Tfoot = Tfoot;
 exports.Th = Th;
 exports.Thead = Thead;

package/index.esm.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { ExternalLink, Tag } from '@trackunit/react-components';
+import { ExternalLink, Tag, Tooltip } from '@trackunit/react-components';
+import { useState } from 'react';
 
 const cvaCheckboxCell = cvaMerge([""]);
 
@@ -201,6 +202,24 @@ const Td = (_a) => {
 };
 const cvaTd = cvaMerge(["overflow-hidden", "align-middle", "py-table-spacing", "px-2", "whitespace-nowrap"]);
 
+const cvaTextCell = cvaMerge(["truncate"]);
+const cvaTextCellTooltip = cvaMerge(["grid"]);
+
+/**
+ * The `<TextCell>` component is used for displaying text in a table cell.
+ * The text is not editable and will be truncated if the cell is too narrow.
+ *
+ * @param {TextCellProps} props - The props for the TextCell component
+ * @returns {JSX.Element} TextCell component
+ */
+const TextCell = ({ content = "", className, dataTestId }) => {
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const updateTooltipVisibility = (element) => {
+        setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
+    };
+    return (jsx(Tooltip, { disabled: !isTooltipVisible, label: content, className: cvaTextCellTooltip(), children: jsx("span", { ref: elementRef => updateTooltipVisibility(elementRef), className: cvaTextCell({ className }), "data-testid": dataTestId, children: content }) }));
+};
+
 /**
  * The Tfoot is a wrapper for the tfoot html element.
  * It is used to render a table, and adds some default styling.
@@ -292,4 +311,4 @@ const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
     },
 });
 
-export { CheckboxCell, LinkCell, ResizeHandle, SortIndicator, TableRoot, TagsCell, Tbody, Td, Tfoot, Th, Thead, Tr };
+export { CheckboxCell, LinkCell, ResizeHandle, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,8 +9,8 @@
   "dependencies": {
     "@trackunit/css-class-variance-utilities": "0.0.14",
     "@trackunit/date-and-time-utils": "0.0.1",
-    "@trackunit/react-components": "0.1.161",
-    "@trackunit/react-form-components": "0.0.147",
+    "@trackunit/react-components": "0.1.162",
+    "@trackunit/react-form-components": "0.0.149",
     "@trackunit/ui-design-tokens": "0.0.77",
     "react": "18.2.0"
   },

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

@@ -1 +1,2 @@
 export declare const cvaTextCell: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTextCellTooltip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/index.d.ts

@@ -6,6 +6,7 @@ export * from "./components/TableRoot";
 export * from "./components/TagsCell/TagsCell";
 export * from "./components/Tbody";
 export * from "./components/Td";
+export * from "./components/TextCell/TextCell";
 export * from "./components/Tfoot";
 export * from "./components/Th";
 export * from "./components/Thead";