@trackunit/react-components 2.13.28-alpha-15da733192f.0 → 3.0.1

package/index.cjs.js

@@ -25,7 +25,7 @@ var fflate = require('fflate');
 var dequal = require('dequal');
 
 var defaultTranslations = {
-	"breadcrumb.backButton": "back",
+	"breadcrumb.backButton": "Back",
 	"breadcrumb.expandButton": "expand",
 	"copyButton.copied": "Copied!",
 	"copyButton.copy": "Copy",
@@ -81,7 +81,7 @@ const cvaIcon = cssClassVarianceUtilities.cva({
     variants: {
         color: {
             primary: "text-primary-600",
-            ai: "text-ai",
+            trackunit_branding: "text-trackunit_branding",
             neutral: "text-neutral-400",
             info: "text-info-600",
             success: "text-success-600",
@@ -143,7 +143,7 @@ const cvaIcon = cssClassVarianceUtilities.cva({
 const iconPalette = {
     ...uiDesignTokens.intentPalette,
     ...uiDesignTokens.generalPalette,
-    ...uiDesignTokens.aiPalette,
+    ...uiDesignTokens.trackunitBrandingPalette,
     ...uiDesignTokens.criticalityPalette,
     ...uiDesignTokens.activityPalette,
     ...uiDesignTokens.utilizationPalette,
@@ -1835,15 +1835,6 @@ const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cva({
 const cvaIconButton = cssClassVarianceUtilities.cva({
     base: [],
     variants: {
-        ai: {
-            true: [
-                "bg-ai",
-                "hover:bg-[color-mix(in_srgb,var(--color-ai),black_10%)]",
-                "active:bg-[color-mix(in_srgb,var(--color-ai),black_20%)]",
-                "focus:bg-[color-mix(in_srgb,var(--color-ai),black_20%)]",
-            ],
-            false: [],
-        },
         size: {
             /**
              * Sized to match a single text line (20px) so the button fits inside
@@ -2617,7 +2608,7 @@ const toButtonSize = (size) => (size === "extraSmall" ? "small" : size);
  */
 const IconButton = ({ icon, variant = "primary", size = "medium", square = true, loading = false, disabled = false, className, title, ariaLabel, "data-testid": dataTestId, ref, ...rest }) => {
     const accessibleLabel = ariaLabel ?? title;
-    return (jsxRuntime.jsx(Tooltip, { "data-testid": "iconButton-tooltip", delayed: true, disabled: !title || disabled || loading, interactable: false, label: title, children: jsxRuntime.jsx(Button, { ...rest, ariaLabel: accessibleLabel, className: cvaIconButton({ size: size, ai: variant === "ai", className }), "data-testid": dataTestId ? dataTestId : undefined, disabled: disabled || loading, loading: loading, prefix: !loading ? react.cloneElement(icon, { ariaHidden: true }) : undefined, ref: ref, size: toButtonSize(size), square: square, title: undefined, variant: variant === "ai" ? "primary" : variant }) }));
+    return (jsxRuntime.jsx(Tooltip, { "data-testid": "iconButton-tooltip", delayed: true, disabled: !title || disabled || loading, interactable: false, label: title, children: jsxRuntime.jsx(Button, { ...rest, ariaLabel: accessibleLabel, className: cvaIconButton({ size: size, className }), "data-testid": dataTestId ? dataTestId : undefined, disabled: disabled || loading, loading: loading, prefix: !loading ? react.cloneElement(icon, { ariaHidden: true }) : undefined, ref: ref, size: toButtonSize(size), square: square, title: undefined, variant: variant }) }));
 };
 IconButton.displayName = "IconButton";
 
@@ -3957,160 +3948,10 @@ const useCopyToClipboard = () => {
     return react.useMemo(() => [isCopied, copyToClipboard], [isCopied, copyToClipboard]);
 };
 
-/**
- * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
- * The boolean will be true if the element is being hovered, and false if it is not.
- * Can be directionally debounced.
- *
- * @param {UseHoverProps} param0 The options
- * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
- */
-const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
-    const [isHovering, setIsHovering] = react.useState(false);
-    const [debouncedIsHovering, setDebouncedIsHovering] = react.useState(false);
-    const onMouseEnter = react.useCallback(() => {
-        setIsHovering(true);
-    }, []);
-    const onMouseLeave = react.useCallback(() => {
-        setIsHovering(false);
-    }, []);
-    // Determine if the current transition should be debounced based on direction
-    const isTransitionDebounced = debounced && (direction === "both" || (direction === "in" && isHovering) || (direction === "out" && !isHovering));
-    // Sync debouncedIsHovering immediately for non-debounced transitions
-    react.useLayoutEffect(() => {
-        if (!debounced || isTransitionDebounced) {
-            return undefined;
-        }
-        // eslint-disable-next-line react-hooks/set-state-in-effect -- Synchronizing derived state for directional debouncing
-        setDebouncedIsHovering(isHovering);
-    }, [debounced, isTransitionDebounced, isHovering]);
-    // Apply delay for debounced transitions
-    react.useEffect(() => {
-        if (!isTransitionDebounced) {
-            return undefined;
-        }
-        const timer = setTimeout(() => {
-            setDebouncedIsHovering(isHovering);
-        }, delay);
-        return () => clearTimeout(timer);
-    }, [isTransitionDebounced, delay, isHovering]);
-    const value = debounced ? (isTransitionDebounced ? debouncedIsHovering : isHovering) : isHovering;
-    return react.useMemo(() => ({
-        onMouseEnter,
-        onMouseLeave,
-        hovering: value,
-    }), [onMouseEnter, onMouseLeave, value]);
-};
-
-const cvaCopyableText = cssClassVarianceUtilities.cva({
-    base: [
-        "rounded",
-        "cursor-pointer",
-        "transition-all",
-        "ease-in-out",
-        "inline-flex",
-        "items-center",
-        "gap-1",
-        "bg-transparent",
-        "border-none",
-        "outline-none",
-        "hover:bg-neutral-200",
-        "py-0.5",
-        "px-1",
-    ],
-    variants: {
-        animating: {
-            false: "",
-            true: "animate-copy",
-        },
-        size: {
-            sm: "text-sm",
-            xs: "text-xs",
-        },
-    },
-    defaultVariants: {
-        animating: false,
-        size: "sm",
-    },
-});
-
-/** Resolves the inner content for CopyableText based on withIcon. */
-const Content = ({ text, withIcon, }) => {
-    if (withIcon) {
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate", children: text }), jsxRuntime.jsx(Icon, { ariaHidden: true, className: "shrink-0 text-neutral-400", name: "Square2Stack", size: "small", type: "solid" })] }));
-    }
-    return text;
-};
-/**
- * CopyableText displays a text value that the user can click to copy to the clipboard.
- * It shows a brief animation and tooltip feedback on copy. What you see is what gets copied.
- *
- * ### When to use
- * Use CopyableText for identifiers, serial numbers, URLs, or any value the user may want to copy (e.g., asset IDs, error codes).
- *
- * ### When not to use
- * - Do not use CopyableText for long paragraphs or content that doesn't need to be copied.
- * - If the value is rendered as plain (non-clickable) text and only a dedicated icon should copy it
- *   (e.g. inside a row or cell that should stay clickable), use `CopyButton` instead:
- * ```tsx
- * <div className="flex items-center gap-0.5">
- *   <Text type="span">{value}</Text>
- *   <CopyButton value={value} />
- * </div>
- * ```
- * - Only use `useCopyToClipboard` directly for genuinely custom copy behavior that neither `CopyableText` nor `CopyButton` supports.
- *
- * @example Copyable serial number
- * ```tsx
- * import { CopyableText } from "@trackunit/react-components";
- *
- * const AssetSerial = () => (
- *   <CopyableText text="SN-2024-00142" data-testid="serial-number" />
- * );
- * ```
- * @example Copyable text with small size
- * ```tsx
- * import { CopyableText } from "@trackunit/react-components";
- *
- * const CopyableId = () => (
- *   <CopyableText text="ABC-123" size="xs" />
- * );
- * ```
- * @param {CopyableTextProps} props - The props for the CopyableText component
- * @returns {ReactElement} CopyableText component
- */
-const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy", copiedLabel = "Copied!", "data-testid": dataTestId, className, style, ref, }) => {
-    const [animating, setAnimating] = react.useState(false);
-    const [showCopied, setShowCopied] = react.useState(false);
-    const [, copyToClipboard] = useCopyToClipboard();
-    const { onMouseEnter, onMouseLeave, hovering } = useHover({ debounced: false });
-    if (!text) {
-        return null;
-    }
-    const handleOnClick = (e) => {
-        e.stopPropagation();
-        void copyToClipboard(text)
-            .then(() => {
-            setShowCopied(true);
-        })
-            .catch(() => undefined);
-        setAnimating(true);
-    };
-    const handleMouseLeave = () => {
-        onMouseLeave();
-        setShowCopied(false);
-    };
-    return (jsxRuntime.jsx(Tooltip, { delayed: !showCopied, label: showCopied ? copiedLabel : copyLabel, placement: "top", children: jsxRuntime.jsx("button", { "aria-label": copyLabel, className: cvaCopyableText({ animating, size, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, onFocus: e => {
-                if (hovering) {
-                    e.currentTarget.blur();
-                }
-            }, onMouseEnter: onMouseEnter, onMouseLeave: handleMouseLeave, ref: ref, style: style, type: "button", children: jsxRuntime.jsx(Content, { text: text, withIcon: withIcon }) }) }));
-};
-
 /**
  * CopyButton is a standalone icon button that copies a value to the clipboard when clicked,
- * showing brief tooltip feedback. Unlike CopyableText, the copied value is not itself the
- * clickable/displayed element, so it can be placed next to plain (non-clickable) text.
+ * showing brief tooltip feedback. The copied value is not itself the clickable/displayed
+ * element, so the button can be placed next to plain (non-clickable) text.
  *
  * ### When to use
  * - Icon-only (default): the copyable value is displayed as plain text (e.g. in a table cell or
@@ -4123,8 +3964,8 @@ const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy",
  * one copy control; pick icon-only or labelled mode instead.
  *
  * ### Empty values
- * Like `CopyableText`, CopyButton renders nothing when `value` is empty, so consumers never
- * present a copy control that has no meaningful result.
+ * CopyButton renders nothing when `value` is empty, so consumers never present a copy control
+ * that has no meaningful result.
  *
  * @example Icon button next to plain text
  * ```tsx
@@ -8947,6 +8788,7 @@ const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, style, r
  * @returns {ReactElement} PageHeader component
  */
 const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon = "QuestionMarkCircle", tagTooltipLabel, style, ref, ...discriminatedProps }) => {
+    const [t] = useTranslation();
     const tagRenderer = react.useMemo(() => {
         if (tagLabel === undefined || tagLabel === "" || showLoading) {
             return null;
@@ -8957,7 +8799,7 @@ const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false,
     return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: tabsList === undefined,
-        }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsxRuntime.jsx(reactRouter.Link, { to: backTo, children: jsxRuntime.jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsxRuntime.jsx(PageHeaderTitle, { "data-testid": dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxRuntime.jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsxRuntime.jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
+        }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsxRuntime.jsx(reactRouter.Link, { to: backTo, children: jsxRuntime.jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", "data-testid": dataTestId ? `${dataTestId}-back-button` : undefined, prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, title: t("breadcrumb.backButton"), variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsxRuntime.jsx(PageHeaderTitle, { "data-testid": dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxRuntime.jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsxRuntime.jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
                                     name: descriptionIcon,
                                     "data-testid": "page-header-description-icon",
                                 }, label: description, placement: "bottom" })) : undefined, tagRenderer] })) : null, jsxRuntime.jsxs("div", { className: "ml-auto flex gap-2", children: [discriminatedProps.accessoryType === "kpi-metrics" ? (jsxRuntime.jsx(PageHeaderKpiMetrics, { kpiMetrics: discriminatedProps.kpiMetrics })) : null, discriminatedProps.accessoryType === "actions" ? (Array.isArray(discriminatedProps.secondaryActions) ? (jsxRuntime.jsx(PageHeaderSecondaryActions, { actions: discriminatedProps.secondaryActions, groupActions: discriminatedProps.groupSecondaryActions ?? false, hasPrimaryAction: !!discriminatedProps.primaryAction })) : discriminatedProps.secondaryActions !== null && discriminatedProps.secondaryActions !== undefined ? (discriminatedProps.secondaryActions) : null) : null, discriminatedProps.accessoryType === "actions" &&
@@ -10027,6 +9869,51 @@ const sheetAnimationReducer = (state, action) => {
     }
 };
 
+/**
+ * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
+ * The boolean will be true if the element is being hovered, and false if it is not.
+ * Can be directionally debounced.
+ *
+ * @param {UseHoverProps} param0 The options
+ * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ */
+const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
+    const [isHovering, setIsHovering] = react.useState(false);
+    const [debouncedIsHovering, setDebouncedIsHovering] = react.useState(false);
+    const onMouseEnter = react.useCallback(() => {
+        setIsHovering(true);
+    }, []);
+    const onMouseLeave = react.useCallback(() => {
+        setIsHovering(false);
+    }, []);
+    // Determine if the current transition should be debounced based on direction
+    const isTransitionDebounced = debounced && (direction === "both" || (direction === "in" && isHovering) || (direction === "out" && !isHovering));
+    // Sync debouncedIsHovering immediately for non-debounced transitions
+    react.useLayoutEffect(() => {
+        if (!debounced || isTransitionDebounced) {
+            return undefined;
+        }
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- Synchronizing derived state for directional debouncing
+        setDebouncedIsHovering(isHovering);
+    }, [debounced, isTransitionDebounced, isHovering]);
+    // Apply delay for debounced transitions
+    react.useEffect(() => {
+        if (!isTransitionDebounced) {
+            return undefined;
+        }
+        const timer = setTimeout(() => {
+            setDebouncedIsHovering(isHovering);
+        }, delay);
+        return () => clearTimeout(timer);
+    }, [isTransitionDebounced, delay, isHovering]);
+    const value = debounced ? (isTransitionDebounced ? debouncedIsHovering : isHovering) : isHovering;
+    return react.useMemo(() => ({
+        onMouseEnter,
+        onMouseLeave,
+        hovering: value,
+    }), [onMouseEnter, onMouseLeave, value]);
+};
+
 /**
  * Manages the dismiss-intent visual on the sheet handle.
  *
@@ -13105,8 +12992,8 @@ const writeHashKey = (hash, key, value) => {
 
 /**
  * Default maximum length of the resulting URL fragment after adding one
- * persisted entry. Writes are skipped (localStorage continues to hold the
- * full state) when adding the entry would push the fragment past this cap.
+ * persisted entry. Oversized new entries are skipped; oversized replacements
+ * remove the stale entry so localStorage remains authoritative.
  *
  * The fragment is never sent to the server, so it is not subject to the
  * AWS WAF managed-rule `SizeRestrictions_QUERYSTRING` cap that applies to
@@ -13121,8 +13008,8 @@ const MAX_HASH_LENGTH = 64 * 1024;
  *
  * Behaviour mirrors `useSearchParamSync`, with two differences:
  *  - Reads from and writes to `location.hash` instead of `location.search`.
- *  - Writes are guarded against {@link MAX_HASH_LENGTH} rather than the
- *    AWS-WAF-driven search-param cap.
+ *  - Oversized replacements remove stale values using
+ *    {@link MAX_HASH_LENGTH}, rather than the AWS-WAF-driven search-param cap.
  *
  * The fragment is treated as a sequence of `&`-separated tokens via the
  * pure utilities in `./hashFragment`. Foreign tokens (bare anchors, other
@@ -13204,15 +13091,18 @@ const useHashParamSync = ({ key, enabled = true, onExternalChange, replace: repl
         }
         pendingWriteRef.current = null;
         const { encodedValue, options } = pending;
-        const nextHash = writeHashKey(location.hash, key, encodedValue);
+        let nextHash = writeHashKey(location.hash, key, encodedValue);
+        let removedOversizedValue = false;
         if (nextHash.length > MAX_HASH_LENGTH) {
-            // Drop the write so the fragment never grows past the cap. The
-            // localStorage write performed by `usePersistedState` still holds
-            // the full state, so the layout survives a reload on the same
-            // browser; only the shareable URL is degraded.
-            return;
+            if (currentHashValue === undefined) {
+                return;
+            }
+            nextHash = writeHashKey(location.hash, key, undefined);
+            removedOversizedValue = true;
         }
-        const shouldReplace = options?.replace ?? replaceOption ?? !Boolean(currentHashValue);
+        const shouldReplace = removedOversizedValue
+            ? true
+            : (options?.replace ?? replaceOption ?? !Boolean(currentHashValue));
         // Tanstack Router's `navigate({ hash })` expects the fragment body
         // *without* the leading `#` — the router adds the delimiter itself
         // when serialising the URL. Forwarding the `#`-prefixed value from
@@ -15151,7 +15041,6 @@ exports.CardHeader = CardHeader;
 exports.Collapse = Collapse;
 exports.CompletionStatusIndicator = CompletionStatusIndicator;
 exports.CopyButton = CopyButton;
-exports.CopyableText = CopyableText;
 exports.DEFAULT_SKELETON_PREFERENCE_CARD_PROPS = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS;
 exports.DetailsList = DetailsList;
 exports.EmptyState = EmptyState;