@trackunit/react-table-base-components 1.6.17 → 1.6.18

package/index.cjs.js

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactComponents = require('@trackunit/react-components');
+var tailwindMerge = require('tailwind-merge');
 var reactFormComponents = require('@trackunit/react-form-components');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
@@ -10,13 +11,13 @@ var polyfill = require('@js-temporal/polyfill');
 var sharedUtils = require('@trackunit/shared-utils');
 
 /**
- * The ButtonCell is used to render buttons in a table cell
+ * The ButtonCell is used to display interactive data in table columns.
  *
  * @param {ButtonCellProps} props - The props for the ButtonCell component
  * @returns {ReactElement} ButtonCell component
  */
-const ButtonCell = ({ dataTestId, children, iconName, iconColor = "primary", variant = "ghost-neutral", ...rest }) => {
-    return (jsxRuntime.jsx(reactComponents.Button, { prefix: iconName ? jsxRuntime.jsx(reactComponents.Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, dataTestId: `button-cell-${dataTestId}`, variant: variant, children: children }));
+const ButtonCell = ({ children, className, dataTestId, iconColor = "primary", iconName, variant = "ghost-neutral", ...rest }) => {
+    return (jsxRuntime.jsx(reactComponents.Button, { prefix: iconName ? jsxRuntime.jsx(reactComponents.Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, className: tailwindMerge.twMerge("px-2 text-sm font-normal text-black hover:text-black", className), dataTestId: `button-cell-${dataTestId}`, variant: variant, children: children }));
 };
 
 const cvaCheckboxCell = cssClassVarianceUtilities.cvaMerge([""]);
@@ -207,14 +208,7 @@ const NoticeCell = ({ ...rest }) => {
     return jsxRuntime.jsx(reactComponents.Notice, { ...rest });
 };
 
-const cvaNumberCell = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "gap-1",
-    "slashed-zero",
-    "text-neutral-700",
-    "text-sm",
-    "text-ellipsis",
-]);
+const cvaNumberCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-1", "slashed-zero", "text-sm", "text-ellipsis"]);
 
 /**
  * The `<NumberCell>` component is used for displaying numbers with units in a table cell.

package/index.esm.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button, Icon, Highlight, Heading, Indicator, ExternalLink, Tooltip, Tag, Notice, IconButton, MoreMenu, MenuList, MenuItem, MenuDivider, Spinner } from '@trackunit/react-components';
+import { twMerge } from 'tailwind-merge';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { formatDateUtil, timeSinceAuto, timeSinceInDays } from '@trackunit/date-and-time-utils';
@@ -8,13 +9,13 @@ import { Temporal } from '@js-temporal/polyfill';
 import { DateTimeFormat } from '@trackunit/shared-utils';
 
 /**
- * The ButtonCell is used to render buttons in a table cell
+ * The ButtonCell is used to display interactive data in table columns.
  *
  * @param {ButtonCellProps} props - The props for the ButtonCell component
  * @returns {ReactElement} ButtonCell component
  */
-const ButtonCell = ({ dataTestId, children, iconName, iconColor = "primary", variant = "ghost-neutral", ...rest }) => {
-    return (jsx(Button, { prefix: iconName ? jsx(Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, dataTestId: `button-cell-${dataTestId}`, variant: variant, children: children }));
+const ButtonCell = ({ children, className, dataTestId, iconColor = "primary", iconName, variant = "ghost-neutral", ...rest }) => {
+    return (jsx(Button, { prefix: iconName ? jsx(Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, className: twMerge("px-2 text-sm font-normal text-black hover:text-black", className), dataTestId: `button-cell-${dataTestId}`, variant: variant, children: children }));
 };
 
 const cvaCheckboxCell = cvaMerge([""]);
@@ -205,14 +206,7 @@ const NoticeCell = ({ ...rest }) => {
     return jsx(Notice, { ...rest });
 };
 
-const cvaNumberCell = cvaMerge([
-    "flex",
-    "gap-1",
-    "slashed-zero",
-    "text-neutral-700",
-    "text-sm",
-    "text-ellipsis",
-]);
+const cvaNumberCell = cvaMerge(["flex", "gap-1", "slashed-zero", "text-sm", "text-ellipsis"]);
 
 /**
  * The `<NumberCell>` component is used for displaying numbers with units in a table cell.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "1.6.17",
+  "version": "1.6.18",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,7 +15,8 @@
     "@trackunit/css-class-variance-utilities": "1.6.13",
     "@trackunit/date-and-time-utils": "1.6.13",
     "@trackunit/shared-utils": "1.8.13",
-    "@trackunit/react-test-setup": "1.3.13"
+    "@trackunit/react-test-setup": "1.3.13",
+    "tailwind-merge": "^2.0.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/ButtonCell/ButtonCell.d.ts

@@ -7,9 +7,9 @@ export interface ButtonCellProps extends ButtonCommonProps {
     iconColor?: IconColors;
 }
 /**
- * The ButtonCell is used to render buttons in a table cell
+ * The ButtonCell is used to display interactive data in table columns.
  *
  * @param {ButtonCellProps} props - The props for the ButtonCell component
  * @returns {ReactElement} ButtonCell component
  */
-export declare const ButtonCell: ({ dataTestId, children, iconName, iconColor, variant, ...rest }: ButtonCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonCell: ({ children, className, dataTestId, iconColor, iconName, variant, ...rest }: ButtonCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/ButtonCell/ButtonCell.stories.d.ts

@@ -5,3 +5,5 @@ declare const meta: Meta<typeof ButtonCell>;
 export default meta;
 export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
 export declare const Default: Story;
+export declare const CriticalAssetsExample: Story;
+export declare const IncorrectUsageExample: Story;

package/src/components/NumberCell/NumberCell.stories.d.ts

@@ -6,3 +6,4 @@ declare const meta: Meta<typeof NumberCell>;
 export default meta;
 export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
 export declare const Default: Story;
+export declare const Example: Story;