@trackunit/react-table-base-components 1.3.67 → 1.3.71

package/index.cjs.js

@@ -33,8 +33,8 @@ const CheckboxCell = ({ checked, className, dataTestId }) => {
 };
 
 const cvaDateTimeCell = cssClassVarianceUtilities.cvaMerge([""]);
-const cvaDateTime$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-neutral-700", "text-sm", "text-ellipsis"]);
-const cvaDateTimeSince$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-neutral-500", "text-sm", "text-ellipsis"]);
+const cvaDateTime$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-sm", "text-ellipsis"]);
+const cvaDateTimeSince$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"]);
 
 /**
  * DateTimeCell is used for render a date and or time in a table cell.
@@ -121,28 +121,30 @@ const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, dataTestId,
  * @param {IndicatorCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const IndicatorCell = ({ ...rest }) => {
-    return jsxRuntime.jsx(reactComponents.Indicator, { ...rest });
+const IndicatorCell = ({ withBackground = false, weight = "normal", ...rest }) => {
+    return jsxRuntime.jsx(reactComponents.Indicator, { weight: weight, withBackground: withBackground, ...rest });
 };
 
+const cvaLinkCell = cssClassVarianceUtilities.cvaMerge(["text-sm"]);
+
 /**
  * The LinkCell is used for render a list of tags in a table cell
  *
  * @param {LinkCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const LinkCell = ({ link, type, ...rest }) => {
+const LinkCell = ({ link, type, className, ...rest }) => {
     const linkPrefix = type === "LINK" ? "" : type === "PHONE" ? "tel:" : "mailto:";
     const handleClick = (event) => {
         event.stopPropagation();
     };
-    return (jsxRuntime.jsx(reactComponents.ExternalLink, { href: `${linkPrefix}${link}`, ...rest, onClick: handleClick, children: link }));
+    return (jsxRuntime.jsx(reactComponents.ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ...rest, onClick: handleClick, children: link }));
 };
 
 const cvaMultiRowTableCellSection = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);
 const cvaMultiRowTableCell = cssClassVarianceUtilities.cvaMerge(["flex", "justify-start", "pl-2"]);
-const cvaMainRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "text-ellipsis", "font-semibold"]);
-const cvaSecondaryRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "text-ellipsis", "text-neutral-400"]);
+const cvaMainRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "text-ellipsis", "text-sm"]);
+const cvaSecondaryRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"]);
 
 /**
  * The MultiRowTableCell component helps to display two rows inside a table cell.
@@ -155,7 +157,12 @@ const MultiRowTableCell = ({ main, secondary, dataTestId, className }) => {
 };
 
 const cvaMultiValueTextCellWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "items-center", "gap-1", "overflow-hidden"]);
-const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
+const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge([
+    "whitespace-no-wrap",
+    "overflow-hidden",
+    "text-ellipsis",
+    "text-sm",
+]);
 
 /**
  * The `<MultiValueTextCell>` component is used for displaying the text values with multiple values in a table cell. First element is displayed as a text, the rest of the values are displayed as a number. Icon can be passed as an optional prop.
@@ -202,8 +209,8 @@ const NumberCell = ({ value = "", unit, className, dataTestId }) => {
 };
 
 const cvaPlainDateCell = cssClassVarianceUtilities.cvaMerge([""]);
-const cvaDateTime = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-neutral-700", "text-sm", "text-ellipsis"]);
-const cvaDateTimeSince = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-neutral-500", "text-sm", "text-ellipsis"]);
+const cvaDateTime = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-sm", "text-ellipsis"]);
+const cvaDateTimeSince = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"]);
 
 /**
  * PlainDateCell is used for render a date and or time in a table cell.
@@ -363,7 +370,7 @@ const Td = ({ dataTestId, className, children, ...rest }) => {
 };
 const cvaTd = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "align-middle", "py-table-spacing", "px-2", "whitespace-nowrap"]);
 
-const cvaTextCell = cssClassVarianceUtilities.cvaMerge(["truncate"]);
+const cvaTextCell = cssClassVarianceUtilities.cvaMerge(["truncate", "text-sm"]);
 const cvaTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["grid"]);
 
 /**

package/index.esm.js

@@ -31,8 +31,8 @@ const CheckboxCell = ({ checked, className, dataTestId }) => {
 };
 
 const cvaDateTimeCell = cvaMerge([""]);
-const cvaDateTime$1 = cvaMerge(["slashed-zero", "text-neutral-700", "text-sm", "text-ellipsis"]);
-const cvaDateTimeSince$1 = cvaMerge(["slashed-zero", "text-neutral-500", "text-sm", "text-ellipsis"]);
+const cvaDateTime$1 = cvaMerge(["slashed-zero", "text-sm", "text-ellipsis"]);
+const cvaDateTimeSince$1 = cvaMerge(["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"]);
 
 /**
  * DateTimeCell is used for render a date and or time in a table cell.
@@ -119,28 +119,30 @@ const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, dataTestId,
  * @param {IndicatorCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const IndicatorCell = ({ ...rest }) => {
-    return jsx(Indicator, { ...rest });
+const IndicatorCell = ({ withBackground = false, weight = "normal", ...rest }) => {
+    return jsx(Indicator, { weight: weight, withBackground: withBackground, ...rest });
 };
 
+const cvaLinkCell = cvaMerge(["text-sm"]);
+
 /**
  * The LinkCell is used for render a list of tags in a table cell
  *
  * @param {LinkCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const LinkCell = ({ link, type, ...rest }) => {
+const LinkCell = ({ link, type, className, ...rest }) => {
     const linkPrefix = type === "LINK" ? "" : type === "PHONE" ? "tel:" : "mailto:";
     const handleClick = (event) => {
         event.stopPropagation();
     };
-    return (jsx(ExternalLink, { href: `${linkPrefix}${link}`, ...rest, onClick: handleClick, children: link }));
+    return (jsx(ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ...rest, onClick: handleClick, children: link }));
 };
 
 const cvaMultiRowTableCellSection = cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);
 const cvaMultiRowTableCell = cvaMerge(["flex", "justify-start", "pl-2"]);
-const cvaMainRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "font-semibold"]);
-const cvaSecondaryRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-neutral-400"]);
+const cvaMainRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-sm"]);
+const cvaSecondaryRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"]);
 
 /**
  * The MultiRowTableCell component helps to display two rows inside a table cell.
@@ -153,7 +155,12 @@ const MultiRowTableCell = ({ main, secondary, dataTestId, className }) => {
 };
 
 const cvaMultiValueTextCellWrapper = cvaMerge(["flex", "flex-row", "items-center", "gap-1", "overflow-hidden"]);
-const cvaMultiValueTextCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
+const cvaMultiValueTextCellTooltip = cvaMerge([
+    "whitespace-no-wrap",
+    "overflow-hidden",
+    "text-ellipsis",
+    "text-sm",
+]);
 
 /**
  * The `<MultiValueTextCell>` component is used for displaying the text values with multiple values in a table cell. First element is displayed as a text, the rest of the values are displayed as a number. Icon can be passed as an optional prop.
@@ -200,8 +207,8 @@ const NumberCell = ({ value = "", unit, className, dataTestId }) => {
 };
 
 const cvaPlainDateCell = cvaMerge([""]);
-const cvaDateTime = cvaMerge(["slashed-zero", "text-neutral-700", "text-sm", "text-ellipsis"]);
-const cvaDateTimeSince = cvaMerge(["slashed-zero", "text-neutral-500", "text-sm", "text-ellipsis"]);
+const cvaDateTime = cvaMerge(["slashed-zero", "text-sm", "text-ellipsis"]);
+const cvaDateTimeSince = cvaMerge(["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"]);
 
 /**
  * PlainDateCell is used for render a date and or time in a table cell.
@@ -361,7 +368,7 @@ const Td = ({ dataTestId, className, children, ...rest }) => {
 };
 const cvaTd = cvaMerge(["overflow-hidden", "align-middle", "py-table-spacing", "px-2", "whitespace-nowrap"]);
 
-const cvaTextCell = cvaMerge(["truncate"]);
+const cvaTextCell = cvaMerge(["truncate", "text-sm"]);
 const cvaTextCellTooltip = cvaMerge(["grid"]);
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "1.3.67",
+  "version": "1.3.71",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,12 +9,12 @@
   "dependencies": {
     "react": "19.0.0",
     "@js-temporal/polyfill": "^0.4.4",
-    "@trackunit/react-components": "1.4.58",
-    "@trackunit/ui-icons": "1.3.48",
-    "@trackunit/react-form-components": "1.3.67",
-    "@trackunit/css-class-variance-utilities": "1.3.48",
-    "@trackunit/date-and-time-utils": "1.3.48",
-    "@trackunit/shared-utils": "1.5.48"
+    "@trackunit/react-components": "1.4.61",
+    "@trackunit/ui-icons": "1.3.49",
+    "@trackunit/react-form-components": "1.3.71",
+    "@trackunit/css-class-variance-utilities": "1.3.49",
+    "@trackunit/date-and-time-utils": "1.3.49",
+    "@trackunit/shared-utils": "1.5.49"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/IndicatorCell/IndicatorCell.d.ts

@@ -14,7 +14,7 @@ export interface IndicatorCellProps extends IndicatorProps, React.HTMLAttributes
      */
     label?: string;
     /**
-     * A boolean parameter to display or hide icon background, default value is true
+     * A boolean parameter to display or hide icon background, default value is false
      */
     withBackground?: boolean;
     /**
@@ -25,6 +25,10 @@ export interface IndicatorCellProps extends IndicatorProps, React.HTMLAttributes
      * A boolean parameter to make the indicator ping thus drawing more attention, default value is false
      */
     ping?: boolean;
+    /**
+     * The weight of the label's text, default value is normal
+     */
+    weight?: "normal" | "medium";
 }
 /**
  * The IndicatorCell is used for render an indicator in a table cell
@@ -32,4 +36,4 @@ export interface IndicatorCellProps extends IndicatorProps, React.HTMLAttributes
  * @param {IndicatorCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-export declare const IndicatorCell: ({ ...rest }: IndicatorCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IndicatorCell: ({ withBackground, weight, ...rest }: IndicatorCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/LinkCell/LinkCell.d.ts

@@ -24,4 +24,4 @@ export interface LinkCellProps extends CommonProps, HTMLAttributes<HTMLTableSect
  * @param {LinkCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-export declare const LinkCell: ({ link, type, ...rest }: LinkCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LinkCell: ({ link, type, className, ...rest }: LinkCellProps) => import("react/jsx-runtime").JSX.Element;

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

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