@trackunit/react-components 3.8.4-alpha-7afddbbe4cc.0 → 3.8.5-alpha-4acfba00274.0

package/index.cjs.js

@@ -2361,6 +2361,7 @@ const cvaTagText = cssClassVarianceUtilities.cva({
     },
 });
 const cvaTagIconContainer = cssClassVarianceUtilities.cva({ base: ["shrink-0", "inline-flex", "self-center"] });
+const cvaTagDismissButton = cssClassVarianceUtilities.cva({ base: ["inline-flex", "rounded-full", "focus-visible:outline-native"] });
 const cvaTagIcon = cssClassVarianceUtilities.cva({
     base: ["cursor-pointer", "transition-opacity", "hover:opacity-70", "text-neutral-500"],
 });
@@ -2414,9 +2415,11 @@ const TAG_TEXT_MIN_WIDTH_PX = sharedUtils.parseTailwindArbitraryValue(TAG_TEXT_M
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClickClose, color = "info", disabled = false, ref, icon, onMouseEnter, style, removeTagLabel, }) => {
+const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClickClose, color = "info", disabled = false, ref, icon, onMouseEnter, style, removeTagLabel, removeButtonInTabOrder = true, }) => {
     const textRef = react.useRef(null);
     const [shouldTruncate, setShouldTruncate] = react.useState(false);
+    const textId = react.useId();
+    const removeButtonId = react.useId();
     react.useLayoutEffect(() => {
         // Using simple DOM measurements to avoid the complexity of the useMeasure hook.
         // Resize observers have some overhead and we don't need the full power of the useMeasure hook here.
@@ -2428,28 +2431,22 @@ const Tag = ({ className, "data-testid": dataTestId, children, size = "medium",
             setShouldTruncate(width >= TAG_TEXT_MIN_WIDTH_PX);
         }
     }, [children]);
-    const isSupportedDismissColor = react.useMemo(() => {
-        if (color === "neutral" || color === "primary" || color === "white" || color === "info") {
-            return true;
-        }
-        return false;
-    }, [color]);
     const layout = react.useMemo(() => {
-        if (onClickClose !== undefined && isSupportedDismissColor && !disabled) {
+        if (onClickClose !== undefined && !disabled) {
             return "containsDismiss";
         }
         if (icon !== null && icon !== undefined) {
             return "containsIcon";
         }
         return "default";
-    }, [onClickClose, isSupportedDismissColor, disabled, icon]);
+    }, [onClickClose, disabled, icon]);
     return (jsxRuntime.jsxs("div", { className: cvaTag({
             className,
             size,
             color,
             layout,
             border: color === "white" ? "default" : "none",
-        }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, style: style, children: [icon !== null && icon !== undefined && size === "medium" ? (jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsxRuntime.jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClickClose) && isSupportedDismissColor && size === "medium" && !disabled ? (jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsxRuntime.jsx(Tooltip, { disabled: disabled, label: removeTagLabel, placement: "bottom", children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), "data-testid": `${dataTestId}Icon`, name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) }) })) : null] }));
+        }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, style: style, children: [icon !== null && icon !== undefined && size === "medium" ? (jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsxRuntime.jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), id: textId, ref: textRef, children: children }), Boolean(onClickClose) && size === "medium" && !disabled ? (jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsxRuntime.jsx(Tooltip, { disabled: disabled, label: removeTagLabel, placement: "bottom", children: jsxRuntime.jsx("button", { "aria-label": removeTagLabel, "aria-labelledby": `${removeButtonId} ${textId}`, className: cvaTagDismissButton(), id: removeButtonId, tabIndex: removeButtonInTabOrder ? undefined : -1, type: "button", children: jsxRuntime.jsx(Icon, { ariaHidden: true, className: cvaTagIcon(), "data-testid": `${dataTestId}Icon`, name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) }) }) })) : null] }));
 };
 
 // Mirrors the slug logic in @trackunit/storybook-docs-components SectionName so anchors line up
@@ -14588,6 +14585,8 @@ const useCursorUrlSync = ({ paramName = DEFAULT_PARAM_NAME, debounceMs = DEFAULT
                     ...prev,
                     [paramNameRef.current]: cursor,
                 }),
+                // Without this the router drops the fragment, and with it the table layout.
+                hash: true,
                 replace: true,
             });
         }, debounceMs);

package/index.esm.js

@@ -3,7 +3,7 @@ import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-l
 import { twMerge } from 'tailwind-merge';
 import { objectKeys, uuidv4, parseTailwindArbitraryValue, objectEntries, nonNullable, objectValues, validateState, writeToStorage, readFromStorage, storageSerializer, filterByMultiple } from '@trackunit/shared-utils';
 export { storageSerializer } from '@trackunit/shared-utils';
-import { useRef, useMemo, useEffect, useSyncExternalStore, useState, useLayoutEffect, createContext, useContext, isValidElement, cloneElement, createElement, useCallback, Fragment as Fragment$1, memo, forwardRef, useId, useReducer, Children } from 'react';
+import { useRef, useMemo, useEffect, useSyncExternalStore, useState, useLayoutEffect, createContext, useContext, isValidElement, cloneElement, createElement, useId, useCallback, Fragment as Fragment$1, memo, forwardRef, useReducer, Children } from 'react';
 import { rentalStatusPalette, sitesPalette, utilizationPalette, activityPalette, criticalityPalette, trackunitBrandingPalette, generalPalette, intentPalette, themeScreenSizeAsNumber, themeContainerSize, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
@@ -2360,6 +2360,7 @@ const cvaTagText = cva({
     },
 });
 const cvaTagIconContainer = cva({ base: ["shrink-0", "inline-flex", "self-center"] });
+const cvaTagDismissButton = cva({ base: ["inline-flex", "rounded-full", "focus-visible:outline-native"] });
 const cvaTagIcon = cva({
     base: ["cursor-pointer", "transition-opacity", "hover:opacity-70", "text-neutral-500"],
 });
@@ -2413,9 +2414,11 @@ const TAG_TEXT_MIN_WIDTH_PX = parseTailwindArbitraryValue(TAG_TEXT_MIN_WIDTH_CLA
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClickClose, color = "info", disabled = false, ref, icon, onMouseEnter, style, removeTagLabel, }) => {
+const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClickClose, color = "info", disabled = false, ref, icon, onMouseEnter, style, removeTagLabel, removeButtonInTabOrder = true, }) => {
     const textRef = useRef(null);
     const [shouldTruncate, setShouldTruncate] = useState(false);
+    const textId = useId();
+    const removeButtonId = useId();
     useLayoutEffect(() => {
         // Using simple DOM measurements to avoid the complexity of the useMeasure hook.
         // Resize observers have some overhead and we don't need the full power of the useMeasure hook here.
@@ -2427,28 +2430,22 @@ const Tag = ({ className, "data-testid": dataTestId, children, size = "medium",
             setShouldTruncate(width >= TAG_TEXT_MIN_WIDTH_PX);
         }
     }, [children]);
-    const isSupportedDismissColor = useMemo(() => {
-        if (color === "neutral" || color === "primary" || color === "white" || color === "info") {
-            return true;
-        }
-        return false;
-    }, [color]);
     const layout = useMemo(() => {
-        if (onClickClose !== undefined && isSupportedDismissColor && !disabled) {
+        if (onClickClose !== undefined && !disabled) {
             return "containsDismiss";
         }
         if (icon !== null && icon !== undefined) {
             return "containsIcon";
         }
         return "default";
-    }, [onClickClose, isSupportedDismissColor, disabled, icon]);
+    }, [onClickClose, disabled, icon]);
     return (jsxs("div", { className: cvaTag({
             className,
             size,
             color,
             layout,
             border: color === "white" ? "default" : "none",
-        }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, style: style, children: [icon !== null && icon !== undefined && size === "medium" ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClickClose) && isSupportedDismissColor && size === "medium" && !disabled ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsx(Tooltip, { disabled: disabled, label: removeTagLabel, placement: "bottom", children: jsx(Icon, { className: cvaTagIcon(), "data-testid": `${dataTestId}Icon`, name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) }) })) : null] }));
+        }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, style: style, children: [icon !== null && icon !== undefined && size === "medium" ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), id: textId, ref: textRef, children: children }), Boolean(onClickClose) && size === "medium" && !disabled ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsx(Tooltip, { disabled: disabled, label: removeTagLabel, placement: "bottom", children: jsx("button", { "aria-label": removeTagLabel, "aria-labelledby": `${removeButtonId} ${textId}`, className: cvaTagDismissButton(), id: removeButtonId, tabIndex: removeButtonInTabOrder ? undefined : -1, type: "button", children: jsx(Icon, { ariaHidden: true, className: cvaTagIcon(), "data-testid": `${dataTestId}Icon`, name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) }) }) })) : null] }));
 };
 
 // Mirrors the slug logic in @trackunit/storybook-docs-components SectionName so anchors line up
@@ -14587,6 +14584,8 @@ const useCursorUrlSync = ({ paramName = DEFAULT_PARAM_NAME, debounceMs = DEFAULT
                     ...prev,
                     [paramNameRef.current]: cursor,
                 }),
+                // Without this the router drops the fragment, and with it the table layout.
+                hash: true,
                 replace: true,
             });
         }, debounceMs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "3.8.4-alpha-7afddbbe4cc.0",
+  "version": "3.8.5-alpha-4acfba00274.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,16 +14,16 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.18.7-alpha-7afddbbe4cc.0",
-    "@trackunit/css-class-variance-utilities": "2.3.7-alpha-7afddbbe4cc.0",
-    "@trackunit/shared-utils": "1.19.7-alpha-7afddbbe4cc.0",
-    "@trackunit/ui-icons": "1.17.7-alpha-7afddbbe4cc.0",
+    "@trackunit/ui-design-tokens": "1.18.7-alpha-4acfba00274.0",
+    "@trackunit/css-class-variance-utilities": "2.3.7-alpha-4acfba00274.0",
+    "@trackunit/shared-utils": "1.19.7-alpha-4acfba00274.0",
+    "@trackunit/ui-icons": "1.17.7-alpha-4acfba00274.0",
     "es-toolkit": "^1.52.0",
     "@tanstack/react-virtual": "^3.14.13",
     "dequal": "^2.0.3",
     "fflate": "^0.8.3",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.8.7-alpha-7afddbbe4cc.0"
+    "@trackunit/i18n-library-translation": "2.8.7-alpha-4acfba00274.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

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

@@ -38,29 +38,36 @@ interface TagBaseProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
 }
 interface NonDismissibleTagProps extends TagBaseProps {
     /**
-     * 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.
+     * Called when the remove button is clicked.
+     * If not passed then the remove button won't be visible.
+     * Available only for medium tags.
      *
      */
     onClickClose?: undefined;
     /**
-     * Label for the remove button.
+     * Tooltip of the remove button, such as "Remove".
      */
     removeTagLabel?: string;
+    removeButtonInTabOrder?: undefined;
 }
 interface DismissibleTagProps extends TagBaseProps {
     /**
-     * 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.
+     * Called when the remove button is clicked.
+     * If not passed then the remove button won't be visible.
+     * Available only for medium tags.
      *
      */
     onClickClose: MouseEventHandler<HTMLDivElement>;
     /**
-     * Label for the remove button.
+     * Tooltip of the remove button, such as "Remove".
+     * Screen readers hear it followed by the tag's text, such as "Remove Chocolate".
      */
     removeTagLabel: string;
+    /**
+     * Set to false when the surrounding widget already offers keyboard removal, such as a multi-select,
+     * so the remove button adds no Tab stop. Defaults to true.
+     */
+    removeButtonInTabOrder?: boolean;
 }
 export type TagProps = DismissibleTagProps | NonDismissibleTagProps;
 /**
@@ -111,5 +118,5 @@ export type TagProps = DismissibleTagProps | NonDismissibleTagProps;
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-export declare const Tag: ({ className, "data-testid": dataTestId, children, size, onClickClose, color, disabled, ref, icon, onMouseEnter, style, removeTagLabel, }: TagProps) => ReactElement;
+export declare const Tag: ({ className, "data-testid": dataTestId, children, size, onClickClose, color, disabled, ref, icon, onMouseEnter, style, removeTagLabel, removeButtonInTabOrder, }: TagProps) => ReactElement;
 export {};

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

@@ -154,6 +154,12 @@ export declare const cvaTagIconContainer: import("cva").CVAComponent<Omit<{
     variants: unknown;
     defaultVariants: Omit<{}, never>;
 }, unknown>;
+export declare const cvaTagDismissButton: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
 export declare const cvaTagIcon: import("cva").CVAComponent<Omit<{
     base: string[];
 }, "defaultVariants"> & {