@trackunit/react-table-base-components 0.0.171 → 0.0.172

package/index.cjs.js

@@ -113,6 +113,24 @@ const LinkCell = (_a) => {
     return (jsxRuntime.jsx(reactComponents.ExternalLink, Object.assign({ href: `${linkPrefix}${link}` }, rest, { onClick: handleClick, children: link })));
 };
 
+const cvaMultiValueTextCellWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "items-center", "gap-1", "overflow-hidden"]);
+const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
+
+/**
+ * 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.
+ * The text content is not editable and will be truncated if the cell is too narrow.
+ *
+ * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
+ * @returns {JSX.Element} MultiValueTextCell component
+ */
+const MultiValueTextCell = ({ content, count, icon, iconTooltip, dataTestId, className, }) => {
+    const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
+    const updateTooltipVisibility = (element) => {
+        setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
+    };
+    return count && count > 0 ? (jsxRuntime.jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !iconTooltip, label: iconTooltip !== null && iconTooltip !== void 0 ? iconTooltip : "", placement: "bottom", className: "inline", children: icon }), jsxRuntime.jsx("span", { ref: elementRef => updateTooltipVisibility(elementRef), className: cvaMultiValueTextCellTooltip(), children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isTooltipVisible, label: content !== null && content !== void 0 ? content : "", placement: "bottom", className: "inline", children: content !== null && content !== void 0 ? content : "" }) }), jsxRuntime.jsx("span", { className: "text-slate-500", children: count > 1 ? `+${count - 1}` : "" })] })) : null;
+};
+
 const cvaNumberCell = cssClassVarianceUtilities.cvaMerge([
     "flex",
     "gap-1",
@@ -162,74 +180,6 @@ const cvaResizeHandel = cssClassVarianceUtilities.cvaMerge(["absolute", "cursor-
     },
 });
 
-const cvaSiteCellWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "items-center", "gap-2", "overflow-hidden"]);
-const cvaSiteCellTooltip = cssClassVarianceUtilities.cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
-
-const cvaSiteIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "rounded-full", "p-[2px]"], {
-    variants: {
-        type: {
-            AREA: "bg-site-AREA",
-            CONSTRUCTION_SITE: "bg-site-CONSTRUCTION_SITE",
-            DEPOT: "bg-site-DEPOT",
-            WORK_PLACE: "bg-site-WORK_PLACE",
-            CLASSIC_POI: "bg-site-CLASSIC_POI",
-            CLASSIC_ZONE: "bg-site-CLASSIC_ZONE",
-            UNKNOWN: "bg-site-UNKNOWN",
-        },
-        shape: {
-            round: "rounded-full",
-            square: "rounded-md",
-        },
-    },
-    defaultVariants: {
-        type: "UNKNOWN",
-        shape: "square",
-    },
-});
-
-/**
- * The `<SiteIcon>` component is used for displaying the site icon with a tooltip for the type.
- *
- * @param {SiteIconProps} props - The props for the SiteCell component
- * @returns {JSX.Element} SiteCell component
- */
-const SiteIcon = ({ size = "medium", type, shape, className, dataTestId }) => {
-    return (jsxRuntime.jsx("div", { className: cvaSiteIconContainer({ type, shape, className }), "data-testid": dataTestId, children: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(type), size: size, color: "white" }) }));
-};
-const getIconName = (type) => {
-    switch (type) {
-        case "CONSTRUCTION_SITE":
-            return "ConstructionCone";
-        case "WORK_PLACE":
-            return "Home";
-        case "DEPOT":
-            return "BuildingOffice";
-        case "AREA":
-            return "Map";
-        case "CLASSIC_ZONE":
-        case "CLASSIC_POI":
-            return "Zone";
-        default:
-            return "QuestionMarkCircle";
-    }
-};
-
-/**
- * The `<SiteCell>` component is used for displaying the sites in a table cell.
- * The site name is not editable and will be truncated if the cell is too narrow.
- *
- * @param {SiteCellProps} props - The props for the SiteCell component
- * @returns {JSX.Element} SiteCell component
- */
-const SiteCell = ({ count, sites, dataTestId, className }) => {
-    var _a, _b;
-    const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
-    const updateTooltipVisibility = (element) => {
-        setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
-    };
-    return count && count > 0 ? (jsxRuntime.jsxs("div", { className: cvaSiteCellWrapper({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(SiteIcon, { size: "small", type: sites.type }), jsxRuntime.jsx("span", { ref: elementRef => updateTooltipVisibility(elementRef), className: cvaSiteCellTooltip(), children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isTooltipVisible, label: (_a = sites.name) !== null && _a !== void 0 ? _a : "", placement: "bottom", className: "inline", children: (_b = sites.name) !== null && _b !== void 0 ? _b : "" }) }), jsxRuntime.jsx("span", { className: "text-slate-500", children: count > 1 ? `+${count - 1}` : "" })] })) : null;
-};
-
 /**
  * The SortIndicator is used in the table header to indicate the current sort order of the column.
  * This is a visual only component and does not handle the sorting logic.
@@ -454,10 +404,9 @@ exports.DateTimeCell = DateTimeCell;
 exports.ImageCell = ImageCell;
 exports.IndicatorCell = IndicatorCell;
 exports.LinkCell = LinkCell;
+exports.MultiValueTextCell = MultiValueTextCell;
 exports.NumberCell = NumberCell;
 exports.ResizeHandle = ResizeHandle;
-exports.SiteCell = SiteCell;
-exports.SiteIcon = SiteIcon;
 exports.SortIndicator = SortIndicator;
 exports.TableRoot = TableRoot;
 exports.TagsCell = TagsCell;

package/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 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, Icon, Tooltip, Tag } from '@trackunit/react-components';
+import { Indicator, ExternalLink, Tooltip, Tag } from '@trackunit/react-components';
 import { useState } from 'react';
 
 const cvaCheckboxCell = cvaMerge([""]);
@@ -109,6 +109,24 @@ const LinkCell = (_a) => {
     return (jsx(ExternalLink, Object.assign({ href: `${linkPrefix}${link}` }, rest, { onClick: handleClick, children: link })));
 };
 
+const cvaMultiValueTextCellWrapper = cvaMerge(["flex", "flex-row", "items-center", "gap-1", "overflow-hidden"]);
+const cvaMultiValueTextCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
+
+/**
+ * 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.
+ * The text content is not editable and will be truncated if the cell is too narrow.
+ *
+ * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
+ * @returns {JSX.Element} MultiValueTextCell component
+ */
+const MultiValueTextCell = ({ content, count, icon, iconTooltip, dataTestId, className, }) => {
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const updateTooltipVisibility = (element) => {
+        setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
+    };
+    return count && count > 0 ? (jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, children: [jsx(Tooltip, { disabled: !iconTooltip, label: iconTooltip !== null && iconTooltip !== void 0 ? iconTooltip : "", placement: "bottom", className: "inline", children: icon }), jsx("span", { ref: elementRef => updateTooltipVisibility(elementRef), className: cvaMultiValueTextCellTooltip(), children: jsx(Tooltip, { disabled: !isTooltipVisible, label: content !== null && content !== void 0 ? content : "", placement: "bottom", className: "inline", children: content !== null && content !== void 0 ? content : "" }) }), jsx("span", { className: "text-slate-500", children: count > 1 ? `+${count - 1}` : "" })] })) : null;
+};
+
 const cvaNumberCell = cvaMerge([
     "flex",
     "gap-1",
@@ -158,74 +176,6 @@ const cvaResizeHandel = cvaMerge(["absolute", "cursor-col-resize", "right-0", "t
     },
 });
 
-const cvaSiteCellWrapper = cvaMerge(["flex", "flex-row", "items-center", "gap-2", "overflow-hidden"]);
-const cvaSiteCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
-
-const cvaSiteIconContainer = cvaMerge(["flex", "rounded-full", "p-[2px]"], {
-    variants: {
-        type: {
-            AREA: "bg-site-AREA",
-            CONSTRUCTION_SITE: "bg-site-CONSTRUCTION_SITE",
-            DEPOT: "bg-site-DEPOT",
-            WORK_PLACE: "bg-site-WORK_PLACE",
-            CLASSIC_POI: "bg-site-CLASSIC_POI",
-            CLASSIC_ZONE: "bg-site-CLASSIC_ZONE",
-            UNKNOWN: "bg-site-UNKNOWN",
-        },
-        shape: {
-            round: "rounded-full",
-            square: "rounded-md",
-        },
-    },
-    defaultVariants: {
-        type: "UNKNOWN",
-        shape: "square",
-    },
-});
-
-/**
- * The `<SiteIcon>` component is used for displaying the site icon with a tooltip for the type.
- *
- * @param {SiteIconProps} props - The props for the SiteCell component
- * @returns {JSX.Element} SiteCell component
- */
-const SiteIcon = ({ size = "medium", type, shape, className, dataTestId }) => {
-    return (jsx("div", { className: cvaSiteIconContainer({ type, shape, className }), "data-testid": dataTestId, children: jsx(Icon, { name: getIconName(type), size: size, color: "white" }) }));
-};
-const getIconName = (type) => {
-    switch (type) {
-        case "CONSTRUCTION_SITE":
-            return "ConstructionCone";
-        case "WORK_PLACE":
-            return "Home";
-        case "DEPOT":
-            return "BuildingOffice";
-        case "AREA":
-            return "Map";
-        case "CLASSIC_ZONE":
-        case "CLASSIC_POI":
-            return "Zone";
-        default:
-            return "QuestionMarkCircle";
-    }
-};
-
-/**
- * The `<SiteCell>` component is used for displaying the sites in a table cell.
- * The site name is not editable and will be truncated if the cell is too narrow.
- *
- * @param {SiteCellProps} props - The props for the SiteCell component
- * @returns {JSX.Element} SiteCell component
- */
-const SiteCell = ({ count, sites, dataTestId, className }) => {
-    var _a, _b;
-    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-    const updateTooltipVisibility = (element) => {
-        setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
-    };
-    return count && count > 0 ? (jsxs("div", { className: cvaSiteCellWrapper({ className }), "data-testid": dataTestId, children: [jsx(SiteIcon, { size: "small", type: sites.type }), jsx("span", { ref: elementRef => updateTooltipVisibility(elementRef), className: cvaSiteCellTooltip(), children: jsx(Tooltip, { disabled: !isTooltipVisible, label: (_a = sites.name) !== null && _a !== void 0 ? _a : "", placement: "bottom", className: "inline", children: (_b = sites.name) !== null && _b !== void 0 ? _b : "" }) }), jsx("span", { className: "text-slate-500", children: count > 1 ? `+${count - 1}` : "" })] })) : null;
-};
-
 /**
  * The SortIndicator is used in the table header to indicate the current sort order of the column.
  * This is a visual only component and does not handle the sorting logic.
@@ -445,4 +395,4 @@ const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
     },
 });
 
-export { CheckboxCell, DateTimeCell, ImageCell, IndicatorCell, LinkCell, NumberCell, ResizeHandle, SiteCell, SiteIcon, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };
+export { CheckboxCell, DateTimeCell, ImageCell, IndicatorCell, LinkCell, MultiValueTextCell, NumberCell, 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.171",
+  "version": "0.0.172",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/MultiValueTextCell/MultiValueTextCell.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+export interface MultiValueTextCellProps extends CommonProps {
+    icon?: JSX.Element;
+    iconTooltip?: string;
+    content?: string;
+    count?: number | null;
+}
+/**
+ * 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.
+ * The text content is not editable and will be truncated if the cell is too narrow.
+ *
+ * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
+ * @returns {JSX.Element} MultiValueTextCell component
+ */
+export declare const MultiValueTextCell: ({ content, count, icon, iconTooltip, dataTestId, className, }: MultiValueTextCellProps) => JSX.Element | null;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MultiValueTextCell } from "./MultiValueTextCell";
+import "./MultiValueTextCell.variants";
+type Story = StoryObj<typeof MultiValueTextCell>;
+declare const meta: Meta<typeof MultiValueTextCell>;
+export default meta;
+export declare const packageName: () => JSX.Element;
+export declare const Default: Story;
+export declare const Example: Story;

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

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

package/src/index.d.ts

@@ -3,10 +3,9 @@ export * from "./components/DateTimeCell/DateTimeCell";
 export * from "./components/ImageCell/ImageCell";
 export * from "./components/IndicatorCell/IndicatorCell";
 export * from "./components/LinkCell/LinkCell";
+export * from "./components/MultiValueTextCell/MultiValueTextCell";
 export * from "./components/NumberCell/NumberCell";
 export * from "./components/ResizeHandle";
-export * from "./components/SiteCell/SiteCell";
-export * from "./components/SiteCell/SiteIcon/SiteIcon";
 export * from "./components/SortIndicator";
 export * from "./components/TableRoot";
 export * from "./components/TagsCell/TagsCell";

package/src/components/SiteCell/SiteCell.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import { CommonProps } from "@trackunit/react-components";
-export type CellSiteType = "AREA" | "CLASSIC_POI" | "CLASSIC_ZONE" | "CONSTRUCTION_SITE" | "DEPOT" | "WORK_PLACE";
-type CellSite = {
-    name?: string | null;
-    type?: CellSiteType;
-};
-export interface SiteCellProps extends CommonProps {
-    sites: CellSite;
-    count?: number | null;
-}
-/**
- * The `<SiteCell>` component is used for displaying the sites in a table cell.
- * The site name is not editable and will be truncated if the cell is too narrow.
- *
- * @param {SiteCellProps} props - The props for the SiteCell component
- * @returns {JSX.Element} SiteCell component
- */
-export declare const SiteCell: ({ count, sites, dataTestId, className }: SiteCellProps) => JSX.Element | null;
-export {};

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

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { SiteCell } from "./SiteCell";
-import "./SiteCell.variants";
-type Story = StoryObj<typeof SiteCell>;
-declare const meta: Meta<typeof SiteCell>;
-export default meta;
-export declare const packageName: () => JSX.Element;
-export declare const Default: Story;
-export declare const Example: Story;

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

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

package/src/components/SiteCell/SiteIcon/SiteIcon.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { CommonProps, Size } from "@trackunit/react-components";
-import { CellSiteType } from "../SiteCell";
-type SiteType = CellSiteType;
-type Shape = "round" | "square";
-export interface SiteIconProps extends CommonProps {
-    type?: SiteType;
-    size?: Size;
-    shape?: Shape;
-}
-/**
- * The `<SiteIcon>` component is used for displaying the site icon with a tooltip for the type.
- *
- * @param {SiteIconProps} props - The props for the SiteCell component
- * @returns {JSX.Element} SiteCell component
- */
-export declare const SiteIcon: ({ size, type, shape, className, dataTestId }: SiteIconProps) => JSX.Element;
-export {};

package/src/components/SiteCell/SiteIcon/SiteIcon.variants.d.ts

@@ -1,4 +0,0 @@
-export declare const cvaSiteIconContainer: (props?: ({
-    type?: "AREA" | "CONSTRUCTION_SITE" | "DEPOT" | "WORK_PLACE" | "CLASSIC_POI" | "CLASSIC_ZONE" | "UNKNOWN" | null | undefined;
-    shape?: "round" | "square" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;