@trackunit/react-components 1.4.61 → 1.4.64

package/index.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var sharedUtils = require('@trackunit/shared-utils');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var uiIcons = require('@trackunit/ui-icons');
@@ -8,7 +9,6 @@ var IconSpriteMicro = require('@trackunit/ui-icons/icons-sprite-micro.svg');
 var IconSpriteMini = require('@trackunit/ui-icons/icons-sprite-mini.svg');
 var IconSpriteOutline = require('@trackunit/ui-icons/icons-sprite-outline.svg');
 var IconSpriteSolid = require('@trackunit/ui-icons/icons-sprite-solid.svg');
-var react = require('react');
 var stringTs = require('string-ts');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactSlot = require('@radix-ui/react-slot');
@@ -184,13 +184,12 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
     "py-1",
     "px-2",
     "text-center",
-    "whitespace-nowrap",
     "h-min",
     "min-w-[1.5rem]",
     "font-medium",
     "truncate",
     "max-w-full",
-    "w-min",
+    "w-fit",
     "text-xs",
 ], {
     variants: {
@@ -199,7 +198,8 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
             medium: "",
         },
         layout: {
-            withIcon: "gap-2 pr-1",
+            containsDismiss: "gap-1 pr-1",
+            containsIcon: "gap-1",
             default: "",
         },
         color: {
@@ -207,7 +207,7 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
             secondary: "bg-secondary-100 text-secondary-700",
             neutral: "bg-neutral-100 text-neutral-700",
             black: "bg-neutral-100 text-neutral-700",
-            white: "bg-white-100 text-white-700",
+            white: "bg-white-100 text-neutral-600",
             info: "bg-info-100 text-info-700",
             success: "bg-success-100 text-success-700",
             warning: "bg-warning-100 text-warning-700",
@@ -222,6 +222,10 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
             moving: "bg-neutral-100 text-neutral-700",
             active: "bg-neutral-100 text-neutral-700",
         },
+        border: {
+            none: "border-none",
+            default: "border border-slate-300",
+        },
     },
     defaultVariants: {
         size: "medium",
@@ -229,8 +233,9 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
         color: "primary",
     },
 });
+const cvaTagText = cssClassVarianceUtilities.cvaMerge(["truncate"]);
 const cvaTagIconContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex", "self-center"]);
-const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70"]);
+const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70", "text-neutral-500"]);
 
 /**
  *  The tag component is used to categorize elements in the ui.
@@ -244,10 +249,25 @@ const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transi
  * @param {TagProps} props - The props for the tag component
  * @returns {ReactElement} tag component
  */
-const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false, ref, }) => {
-    return (jsxRuntime.jsxs("span", { className: cvaTag({ className, size, color, layout: onClose ? "withIcon" : "default" }), "data-testid": dataTestId, ref: ref, children: [children, Boolean(onClose) && !disabled ? (
+const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false, ref, icon, }) => {
+    const isSupportedDismissColor = react.useMemo(() => {
+        if (color === "neutral" || color === "primary" || color === "white") {
+            return true;
+        }
+        return false;
+    }, [color]);
+    const layout = react.useMemo(() => {
+        if (onClose && isSupportedDismissColor) {
+            return "containsDismiss";
+        }
+        if (icon) {
+            return "containsIcon";
+        }
+        return "default";
+    }, [onClose, icon, isSupportedDismissColor]);
+    return (jsxRuntime.jsxs("div", { className: cvaTag({ className, size, color, layout, border: color === "white" ? "default" : "none" }), "data-testid": dataTestId, ref: ref, children: [icon && size === "medium" ? jsxRuntime.jsx("div", { className: cvaTagIconContainer(), children: icon }) : null, jsxRuntime.jsx("span", { className: cvaTagText(), children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
             // a fix for multiselect deselecting tags working together with fade out animation
-            jsxRuntime.jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), dataTestId: dataTestId + "Icon", name: "XCircle", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
+            jsxRuntime.jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), dataTestId: dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
 Tag.displayName = "Tag";
 

package/index.esm.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, memo, forwardRef, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
 import { objectKeys, uuidv4, objectEntries, objectValues } from '@trackunit/shared-utils';
 import { intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, rentalStatusPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
@@ -6,7 +7,6 @@ import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
 import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
 import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
 import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
-import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, memo, forwardRef, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
 import { snakeCase, titleCase } from 'string-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Slottable, Slot } from '@radix-ui/react-slot';
@@ -182,13 +182,12 @@ const cvaTag = cvaMerge([
     "py-1",
     "px-2",
     "text-center",
-    "whitespace-nowrap",
     "h-min",
     "min-w-[1.5rem]",
     "font-medium",
     "truncate",
     "max-w-full",
-    "w-min",
+    "w-fit",
     "text-xs",
 ], {
     variants: {
@@ -197,7 +196,8 @@ const cvaTag = cvaMerge([
             medium: "",
         },
         layout: {
-            withIcon: "gap-2 pr-1",
+            containsDismiss: "gap-1 pr-1",
+            containsIcon: "gap-1",
             default: "",
         },
         color: {
@@ -205,7 +205,7 @@ const cvaTag = cvaMerge([
             secondary: "bg-secondary-100 text-secondary-700",
             neutral: "bg-neutral-100 text-neutral-700",
             black: "bg-neutral-100 text-neutral-700",
-            white: "bg-white-100 text-white-700",
+            white: "bg-white-100 text-neutral-600",
             info: "bg-info-100 text-info-700",
             success: "bg-success-100 text-success-700",
             warning: "bg-warning-100 text-warning-700",
@@ -220,6 +220,10 @@ const cvaTag = cvaMerge([
             moving: "bg-neutral-100 text-neutral-700",
             active: "bg-neutral-100 text-neutral-700",
         },
+        border: {
+            none: "border-none",
+            default: "border border-slate-300",
+        },
     },
     defaultVariants: {
         size: "medium",
@@ -227,8 +231,9 @@ const cvaTag = cvaMerge([
         color: "primary",
     },
 });
+const cvaTagText = cvaMerge(["truncate"]);
 const cvaTagIconContainer = cvaMerge(["inline-flex", "self-center"]);
-const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70"]);
+const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70", "text-neutral-500"]);
 
 /**
  *  The tag component is used to categorize elements in the ui.
@@ -242,10 +247,25 @@ const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opac
  * @param {TagProps} props - The props for the tag component
  * @returns {ReactElement} tag component
  */
-const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false, ref, }) => {
-    return (jsxs("span", { className: cvaTag({ className, size, color, layout: onClose ? "withIcon" : "default" }), "data-testid": dataTestId, ref: ref, children: [children, Boolean(onClose) && !disabled ? (
+const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false, ref, icon, }) => {
+    const isSupportedDismissColor = useMemo(() => {
+        if (color === "neutral" || color === "primary" || color === "white") {
+            return true;
+        }
+        return false;
+    }, [color]);
+    const layout = useMemo(() => {
+        if (onClose && isSupportedDismissColor) {
+            return "containsDismiss";
+        }
+        if (icon) {
+            return "containsIcon";
+        }
+        return "default";
+    }, [onClose, icon, isSupportedDismissColor]);
+    return (jsxs("div", { className: cvaTag({ className, size, color, layout, border: color === "white" ? "default" : "none" }), "data-testid": dataTestId, ref: ref, children: [icon && size === "medium" ? jsx("div", { className: cvaTagIconContainer(), children: icon }) : null, jsx("span", { className: cvaTagText(), children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
             // a fix for multiselect deselecting tags working together with fade out animation
-            jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { className: cvaTagIcon(), dataTestId: dataTestId + "Icon", name: "XCircle", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
+            jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { className: cvaTagIcon(), dataTestId: dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
 Tag.displayName = "Tag";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.61",
+  "version": "1.4.64",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,11 +18,11 @@
     "@tanstack/react-router": "1.47.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.3.49",
-    "@trackunit/css-class-variance-utilities": "1.3.49",
-    "@trackunit/shared-utils": "1.5.49",
-    "@trackunit/ui-icons": "1.3.49",
-    "@trackunit/react-table-pagination": "1.3.50"
+    "@trackunit/ui-design-tokens": "1.3.51",
+    "@trackunit/css-class-variance-utilities": "1.3.51",
+    "@trackunit/shared-utils": "1.5.51",
+    "@trackunit/ui-icons": "1.3.51",
+    "@trackunit/react-table-pagination": "1.3.52"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/Tag/Tag.d.ts

@@ -12,6 +12,7 @@ export interface TagProps extends CommonProps {
     /**
      * A handler for a click event triggered on X icon.
      * If not passed then x icon won't be visible.
+     * Available only for neutral, primary and white tags.
      *
      */
     onClose?: MouseEventHandler<HTMLDivElement>;
@@ -31,7 +32,11 @@ export interface TagProps extends CommonProps {
     /**
      * A ref for the component
      */
-    ref?: Ref<HTMLElement>;
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * The icon to display. Only supported for medium size.
+     */
+    icon?: ReactNode;
 }
 /**
  *  The tag component is used to categorize elements in the ui.
@@ -46,6 +51,6 @@ export interface TagProps extends CommonProps {
  * @returns {ReactElement} tag component
  */
 export declare const Tag: {
-    ({ className, dataTestId, children, size, onClose, color, disabled, ref, }: TagProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, dataTestId, children, size, onClose, color, disabled, ref, icon, }: TagProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -1,7 +1,9 @@
 export declare const cvaTag: (props?: ({
     size?: "small" | "medium" | null | undefined;
-    layout?: "default" | "withIcon" | null | undefined;
+    layout?: "default" | "containsDismiss" | "containsIcon" | null | undefined;
     color?: "primary" | "secondary" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | null | undefined;
+    border?: "default" | "none" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTagText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaTagIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaTagIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;