@trackunit/react-components 0.5.33 → 0.5.35

package/index.cjs.js

@@ -287,6 +287,24 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
     return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(Tag, { color: "secondary", children: packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.name }), jsxRuntime.jsxs(Tag, { color: "secondary", children: ["v", packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.version] })] }));
 };
 
+/**
+ * Hook to detect if text content is wrapping to multiple lines
+ *
+ * @param {HTMLElement | null} element - The element to check for text wrapping
+ * @returns {boolean} True if the text spans multiple lines
+ */
+const useIsTextWrapping = (element) => {
+    const [isWrapping, setIsWrapping] = React.useState(false);
+    React.useEffect(() => {
+        if (!element) {
+            setIsWrapping(false);
+            return;
+        }
+        setIsWrapping(element.clientHeight > element.scrollHeight / 2);
+    }, [element]);
+    return isWrapping;
+};
+
 const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
     variants: {
         align: {
@@ -350,8 +368,9 @@ const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relati
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-const Text = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId, ...rest }) => {
+const Text = React__namespace.forwardRef(({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId, ...rest }, ref) => {
     return React__namespace.createElement(type, {
+        ref,
         className: cvaText({
             inverted,
             uppercase,
@@ -367,7 +386,8 @@ const Text = ({ children, type = "p", size = "medium", align = "left", weight =
         "data-testid": dataTestId,
         ...rest,
     }, children);
-};
+});
+Text.displayName = "Text";
 
 const cvaSpinner = cssClassVarianceUtilities.cvaMerge(["bg-transparent", "rounded-full", "border-2", "border-solid", "inline-block", "animate-spin", "cursor-wait"], {
     variants: {
@@ -726,9 +746,16 @@ const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "gap-3"
 });
 const cvaAlertActionsContainer = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end", "gap-2"]);
 const cvaContent = cssClassVarianceUtilities.cvaMerge(["flex-grow"]);
-const cvaAlertContentContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "h-full", "gap-2"]);
+const cvaAlertContentContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "h-full", "gap-2"], {
+    variants: {
+        inline: {
+            true: ["items-center"],
+            false: ["items-start"],
+        },
+    },
+});
 const cvaAlertCloseButtonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "self-start", "w-min", "shrink-0"]);
-const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start", "shrink-0", "grid", "w-min", "hidden", "@2xs:block"]);
+const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start", "shrink-0", "grid", "w-min", "hidden", "@2xs:flex"]);
 
 /**
  * The Alert component should be used to inform the user of important information.
@@ -738,20 +765,8 @@ const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start",
  */
 const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
     const ref = React__namespace.useRef(null);
-    const getIconFromColor = () => {
-        switch (color) {
-            case "danger":
-                return jsxRuntime.jsx(Icon, { color: color, name: "ExclamationTriangle" });
-            case "warning":
-                return jsxRuntime.jsx(Icon, { color: color, name: "ExclamationCircle" });
-            case "success":
-                return jsxRuntime.jsx(Icon, { color: color, name: "CheckCircle" });
-            case "info":
-                return jsxRuntime.jsx(Icon, { color: color, name: "InformationCircle" });
-            default:
-                return jsxRuntime.jsx(Icon, { name: "InformationCircle" });
-        }
-    };
+    const titleRef = React__namespace.useRef(null);
+    const isWrapping = useIsTextWrapping(titleRef.current);
     React__namespace.useEffect(() => {
         var _a, _b;
         if (autoScroll) {
@@ -759,7 +774,22 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
     }, [ref, autoScroll]);
-    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer(), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? (jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, weight: "bold", children: title })) : null, children ? (jsxRuntime.jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsxRuntime.jsx(IconButton, { circular: true, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsxRuntime.jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsxRuntime.jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer({ inline: !isWrapping && !children }), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer(), children: jsxRuntime.jsx(Icon, { color: color, name: getIconName(color) }) }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? (jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children ? (jsxRuntime.jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsxRuntime.jsx(IconButton, { circular: true, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsxRuntime.jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsxRuntime.jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null] }));
+};
+const getIconName = (color) => {
+    switch (color) {
+        case "danger":
+            return "ExclamationTriangle";
+        case "warning":
+            return "ExclamationCircle";
+        case "success":
+            return "CheckCircle";
+        case "info":
+            return "InformationCircle";
+        default: {
+            throw new Error(`${color} is not known`);
+        }
+    }
 };
 
 const cvaBadge = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -267,6 +267,24 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
     return (jsxs("div", { className: "flex gap-2", children: [jsx(Tag, { color: "secondary", children: packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.name }), jsxs(Tag, { color: "secondary", children: ["v", packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.version] })] }));
 };
 
+/**
+ * Hook to detect if text content is wrapping to multiple lines
+ *
+ * @param {HTMLElement | null} element - The element to check for text wrapping
+ * @returns {boolean} True if the text spans multiple lines
+ */
+const useIsTextWrapping = (element) => {
+    const [isWrapping, setIsWrapping] = useState(false);
+    useEffect(() => {
+        if (!element) {
+            setIsWrapping(false);
+            return;
+        }
+        setIsWrapping(element.clientHeight > element.scrollHeight / 2);
+    }, [element]);
+    return isWrapping;
+};
+
 const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
     variants: {
         align: {
@@ -330,8 +348,9 @@ const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-norm
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-const Text = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId, ...rest }) => {
+const Text = React.forwardRef(({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId, ...rest }, ref) => {
     return React.createElement(type, {
+        ref,
         className: cvaText({
             inverted,
             uppercase,
@@ -347,7 +366,8 @@ const Text = ({ children, type = "p", size = "medium", align = "left", weight =
         "data-testid": dataTestId,
         ...rest,
     }, children);
-};
+});
+Text.displayName = "Text";
 
 const cvaSpinner = cvaMerge(["bg-transparent", "rounded-full", "border-2", "border-solid", "inline-block", "animate-spin", "cursor-wait"], {
     variants: {
@@ -706,9 +726,16 @@ const cvaAlert = cvaMerge(["flex", "flex-col", "gap-3", "relative", "p-3", "roun
 });
 const cvaAlertActionsContainer = cvaMerge(["flex", "justify-end", "gap-2"]);
 const cvaContent = cvaMerge(["flex-grow"]);
-const cvaAlertContentContainer = cvaMerge(["flex", "flex-row", "h-full", "gap-2"]);
+const cvaAlertContentContainer = cvaMerge(["flex", "flex-row", "h-full", "gap-2"], {
+    variants: {
+        inline: {
+            true: ["items-center"],
+            false: ["items-start"],
+        },
+    },
+});
 const cvaAlertCloseButtonContainer = cvaMerge(["flex", "self-start", "w-min", "shrink-0"]);
-const cvaAlertIconContainer = cvaMerge(["self-start", "shrink-0", "grid", "w-min", "hidden", "@2xs:block"]);
+const cvaAlertIconContainer = cvaMerge(["self-start", "shrink-0", "grid", "w-min", "hidden", "@2xs:flex"]);
 
 /**
  * The Alert component should be used to inform the user of important information.
@@ -718,20 +745,8 @@ const cvaAlertIconContainer = cvaMerge(["self-start", "shrink-0", "grid", "w-min
  */
 const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
     const ref = React.useRef(null);
-    const getIconFromColor = () => {
-        switch (color) {
-            case "danger":
-                return jsx(Icon, { color: color, name: "ExclamationTriangle" });
-            case "warning":
-                return jsx(Icon, { color: color, name: "ExclamationCircle" });
-            case "success":
-                return jsx(Icon, { color: color, name: "CheckCircle" });
-            case "info":
-                return jsx(Icon, { color: color, name: "InformationCircle" });
-            default:
-                return jsx(Icon, { name: "InformationCircle" });
-        }
-    };
+    const titleRef = React.useRef(null);
+    const isWrapping = useIsTextWrapping(titleRef.current);
     React.useEffect(() => {
         var _a, _b;
         if (autoScroll) {
@@ -739,7 +754,22 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
     }, [ref, autoScroll]);
-    return (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer(), children: [jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { dataTestId: `${dataTestId}-title`, weight: "bold", children: title })) : null, children ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsx(IconButton, { circular: true, icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null] }));
+    return (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer({ inline: !isWrapping && !children }), children: [jsx("div", { className: cvaAlertIconContainer(), children: jsx(Icon, { color: color, name: getIconName(color) }) }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsx(IconButton, { circular: true, icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null] }));
+};
+const getIconName = (color) => {
+    switch (color) {
+        case "danger":
+            return "ExclamationTriangle";
+        case "warning":
+            return "ExclamationCircle";
+        case "success":
+            return "CheckCircle";
+        case "info":
+            return "InformationCircle";
+        default: {
+            throw new Error(`${color} is not known`);
+        }
+    }
 };
 
 const cvaBadge = cvaMerge([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.5.33",
+  "version": "0.5.35",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -3,6 +3,8 @@ export declare const cvaAlert: (props?: ({
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaAlertActionsContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaContent: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaAlertContentContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaAlertContentContainer: (props?: ({
+    inline?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaAlertCloseButtonContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaAlertIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Text/Text.d.ts

@@ -63,4 +63,4 @@ export interface TextProps extends CommonProps {
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, disabled, className, dataTestId, ...rest }: TextProps) => JSX.Element;
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;

package/src/hooks/useIsTextWrapping.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook to detect if text content is wrapping to multiple lines
+ *
+ * @param {HTMLElement | null} element - The element to check for text wrapping
+ * @returns {boolean} True if the text spans multiple lines
+ */
+export declare const useIsTextWrapping: (element: HTMLElement | null) => boolean;