@trackunit/react-components 0.1.236 → 0.1.238

package/index.cjs.js

@@ -1454,36 +1454,96 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsxRuntime.jsx("a", { onClick: onClick, "data-testid": dataTestId, className: cvaExternalLink({ className }), title: title, href: href, rel: rel, target: target, children: children }));
 };
 
-const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge("inline-flex");
+const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge("inline-flex hover:cursor-pointer");
+const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge("flex h-max w-fit text-slate-300 transition hover:cursor-pointer hover:text-slate-400", {
+    variants: {
+        color: {
+            light: "hover:text-white",
+            dark: "hover:text-slate-400",
+        },
+        defaultVariants: {
+            color: "dark",
+        },
+    },
+});
 const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
-cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
-const cvaTooltipContent = cssClassVarianceUtilities.cvaMerge("max-w-sm rounded p-2", {
+const cvaTooltipPopoverTail = cssClassVarianceUtilities.cvaMerge("", {
+    variants: {
+        placement: {
+            top: "top-full left-2/4 ml-[-5px]",
+            "top-start": "top-full left-[5%]",
+            "top-end": "top-full right-[5%]",
+            bottom: "bottom-full right-2/4 mr-[-6px] ",
+            "bottom-start": "bottom-full left-[5%]",
+            "bottom-end": "bottom-full right-[5%]",
+            left: "top-2/4 left-full mt-[-6px]",
+            "left-start": "top-1/4 top-[8%]",
+            "left-end": "bottom-1/4 bottom-[8%]",
+            right: "top-2/4 right-full mt-[-6px] ",
+            "right-start": "top-1/4 top-[8%]",
+            "right-end": "bottom-1/4 bottom-[8%]",
+        },
+        mode: {
+            light: "fill-white",
+            dark: "fill-slate-600",
+        },
+    },
+    defaultVariants: {
+        placement: "bottom",
+        mode: "dark",
+    },
+});
+cssClassVarianceUtilities.cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
+const cvaTooltipPopoverContent = cssClassVarianceUtilities.cvaMerge("max-w-sm rounded p-2", {
     variants: {
         color: {
-            light: "bg-white shadow-md",
-            dark: "bg-neutral-800 text-white",
+            light: "bg-white shadow-lg",
+            dark: "bg-slate-600 text-white",
         },
     },
     defaultVariants: {
-        color: "light",
+        color: "dark",
     },
 });
 
 /**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @description Adding Tooltip Arrow
+ * @returns {JSX.Element} Tooltip floating Arrow
+ */
+const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
+    const { context: floatingContext } = usePopoverContext();
+    return (jsxRuntime.jsx(react.FloatingArrow, { ref: arrowRef, context: floatingContext, className: cvaTooltipPopoverTail({ mode, placement: floatingContext.placement }) }));
+};
+/**
+ * Tooltips display additional information upon hover. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.
+ *
+ * Tooltips should be used sparingly and contain succinct, supplementary information, and they should contain read-only text. **❗️Do not include interactive elements in tooltips ** (no links, buttons, etc). Interactive elements in tooltips are inaccessible since tooltips do not receive focus.
+ *
+ * **Do use** tooltips to expose names of icon buttons that lack visual labels, when more information is useful in helping a user understand the context, when an element needs additional explanation, or use when defining a term or inline item.
+ *
+ * **Do not use** tooltips to include information that is necessary for the user to complete their task. Use helper text that is always visible and accessible for vital information.
  
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-const Tooltip = (_a) => {
-    var { children, dataTestId, disabled, className } = _a, rest = __rest(_a, ["children", "dataTestId", "disabled", "className"]);
+const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", contentTextType = "p", iconProps, }) => {
+    const [isOpen, setIsOpen] = React__namespace.useState(false);
+    const arrowRef = React__namespace.useRef(null);
+    const { refs, floatingStyles, context } = react.useFloating({
+        placement: placement === "auto" ? "bottom" : placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        middleware: [react.offset(8), react.arrow({ element: arrowRef })],
+        whileElementsMounted: react.autoUpdate,
+    });
+    const { isMounted } = react.useTransitionStatus(context);
     const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
     if (disabled) {
         return wrappedChildren;
     }
-    return (jsxRuntime.jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
+    return (jsxRuntime.jsxs(Popover, { className: cvaTooltipPopover(), placement: placement === "auto" ? "bottom" : placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode }), ref: refs.setReference, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), "data-testid": dataTestId && `${dataTestId}-trigger`, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "small", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) })) : (wrappedChildren) }), isMounted && (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsxRuntime.jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) }))] }));
 };
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxRuntime.jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsxRuntime.jsx(PopoverTrigger, { children: children }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipContent({ color: mode }), children: jsxRuntime.jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
 
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cssClassVarianceUtilities.cvaMerge(["mr-2"]);
@@ -1585,7 +1645,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  */
 const Indicator = (_a) => {
     var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping", "className"]);
-    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, children: jsxRuntime.jsxs("div", Object.assign({ className: cvaIndicator(), "data-testid": dataTestId, "aria-label": label }, rest, { children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping && (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] }), label !== undefined && withLabel && (jsxRuntime.jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })) }));
+    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", Object.assign({ className: cvaIndicator(), "data-testid": dataTestId, "aria-label": label }, rest, { children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping && (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] }), label !== undefined && withLabel && (jsxRuntime.jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })) }));
 };
 
 const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([
@@ -1818,30 +1878,6 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
-const cvaTip = cssClassVarianceUtilities.cvaMerge("flex text-slate-300 transition hover:text-slate-500");
-const cvaTipContent = cssClassVarianceUtilities.cvaMerge("flex max-w-sm items-center gap-2 rounded p-2 text-sm", {
-    variants: {
-        color: {
-            light: "bg-white shadow-md",
-            dark: "bg-neutral-800 text-white",
-        },
-    },
-    defaultVariants: {
-        color: "light",
-    },
-});
-
-/**
- * The Tip component is used to show helpful tips or contextual information to the users.
- * The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
- 
- * @param {TipProps} props - The props for the Tip component
- * @returns {JSX.Element} Tip component
- */
-const Tip = ({ children, iconProps, dataTestId, className, placement = "bottom", mode = "dark", link, }) => {
-    return (jsxRuntime.jsx("span", { "data-testid": dataTestId, className: cvaTip({ className }), children: jsxRuntime.jsxs(Popover, { placement: placement, activation: { click: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx("div", { "data-testid": dataTestId && `${dataTestId}-trigger`, children: jsxRuntime.jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { className: cvaTipContent({ color: mode }), children: [jsxRuntime.jsx("div", { children: typeof children === "string" ? jsxRuntime.jsx("p", { children: children }) : children }), link ? (jsxRuntime.jsx("a", { href: link, children: jsxRuntime.jsx(Icon, { name: "ArrowRightCircle" }) })) : null] }) })] }) }));
-};
-
 const cvaPageHeaderContainer = cssClassVarianceUtilities.cvaMerge(["bg-white"], {
     variants: {
         withBorder: {
@@ -1881,11 +1917,11 @@ const cvaPageHeaderChildContainer = cssClassVarianceUtilities.cvaMerge(["flex",
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, }) => {
+const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText = "Help Center Article", }) => {
     return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
             className: `${className} tu-page-header`,
             withBorder: !Boolean(tabsList),
-        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, renderAs: reactRouterDom.Link, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }) })), jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxRuntime.jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && (jsxRuntime.jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }), tabsList] }));
+        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, renderAs: reactRouterDom.Link, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }) })), jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxRuntime.jsxs("div", { className: "flex h-fit items-center gap-1", children: [jsxRuntime.jsx(Tooltip, { label: description, dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: { name: "QuestionMarkCircle" }, placement: "bottom" }), link && (jsxRuntime.jsxs(reactRouterDom.Link, { to: link, "data-testid": "tooltip-link", target: "_blank", className: "text-primary-600 hover:text-primary-700 flex h-4 items-center gap-1 text-xs underline", children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] }))] }))] }), tag && !showLoading && (jsxRuntime.jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }), tabsList] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
@@ -3023,7 +3059,6 @@ exports.Tag = Tag;
 exports.Text = Text;
 exports.Timeline = Timeline;
 exports.TimelineElement = TimelineElement;
-exports.Tip = Tip;
 exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
 exports.WidgetBody = WidgetBody;

package/index.esm.js

@@ -10,7 +10,7 @@ import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useMeasure, useCopyToClipboard, usePrevious } from 'react-use';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
-import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import usePortal from 'react-useportal';
 import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
@@ -1424,36 +1424,96 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsx("a", { onClick: onClick, "data-testid": dataTestId, className: cvaExternalLink({ className }), title: title, href: href, rel: rel, target: target, children: children }));
 };
 
-const cvaTooltipFlexContainer = cvaMerge("inline-flex");
+const cvaTooltipFlexContainer = cvaMerge("inline-flex hover:cursor-pointer");
+const cvaTooltipIcon = cvaMerge("flex h-max w-fit text-slate-300 transition hover:cursor-pointer hover:text-slate-400", {
+    variants: {
+        color: {
+            light: "hover:text-white",
+            dark: "hover:text-slate-400",
+        },
+        defaultVariants: {
+            color: "dark",
+        },
+    },
+});
 const cvaTooltipPopover = cvaMerge("pointer-events-none origin-center");
-cvaMerge("pointer-events-none origin-center");
-const cvaTooltipContent = cvaMerge("max-w-sm rounded p-2", {
+const cvaTooltipPopoverTail = cvaMerge("", {
+    variants: {
+        placement: {
+            top: "top-full left-2/4 ml-[-5px]",
+            "top-start": "top-full left-[5%]",
+            "top-end": "top-full right-[5%]",
+            bottom: "bottom-full right-2/4 mr-[-6px] ",
+            "bottom-start": "bottom-full left-[5%]",
+            "bottom-end": "bottom-full right-[5%]",
+            left: "top-2/4 left-full mt-[-6px]",
+            "left-start": "top-1/4 top-[8%]",
+            "left-end": "bottom-1/4 bottom-[8%]",
+            right: "top-2/4 right-full mt-[-6px] ",
+            "right-start": "top-1/4 top-[8%]",
+            "right-end": "bottom-1/4 bottom-[8%]",
+        },
+        mode: {
+            light: "fill-white",
+            dark: "fill-slate-600",
+        },
+    },
+    defaultVariants: {
+        placement: "bottom",
+        mode: "dark",
+    },
+});
+cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
+const cvaTooltipPopoverContent = cvaMerge("max-w-sm rounded p-2", {
     variants: {
         color: {
-            light: "bg-white shadow-md",
-            dark: "bg-neutral-800 text-white",
+            light: "bg-white shadow-lg",
+            dark: "bg-slate-600 text-white",
         },
     },
     defaultVariants: {
-        color: "light",
+        color: "dark",
     },
 });
 
 /**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @description Adding Tooltip Arrow
+ * @returns {JSX.Element} Tooltip floating Arrow
+ */
+const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
+    const { context: floatingContext } = usePopoverContext();
+    return (jsx(FloatingArrow, { ref: arrowRef, context: floatingContext, className: cvaTooltipPopoverTail({ mode, placement: floatingContext.placement }) }));
+};
+/**
+ * Tooltips display additional information upon hover. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.
+ *
+ * Tooltips should be used sparingly and contain succinct, supplementary information, and they should contain read-only text. **❗️Do not include interactive elements in tooltips ** (no links, buttons, etc). Interactive elements in tooltips are inaccessible since tooltips do not receive focus.
+ *
+ * **Do use** tooltips to expose names of icon buttons that lack visual labels, when more information is useful in helping a user understand the context, when an element needs additional explanation, or use when defining a term or inline item.
+ *
+ * **Do not use** tooltips to include information that is necessary for the user to complete their task. Use helper text that is always visible and accessible for vital information.
  
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-const Tooltip = (_a) => {
-    var { children, dataTestId, disabled, className } = _a, rest = __rest(_a, ["children", "dataTestId", "disabled", "className"]);
+const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", contentTextType = "p", iconProps, }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const arrowRef = React.useRef(null);
+    const { refs, floatingStyles, context } = useFloating({
+        placement: placement === "auto" ? "bottom" : placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        middleware: [offset(8), arrow({ element: arrowRef })],
+        whileElementsMounted: autoUpdate,
+    });
+    const { isMounted } = useTransitionStatus(context);
     const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
     if (disabled) {
         return wrappedChildren;
     }
-    return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
+    return (jsxs(Popover, { className: cvaTooltipPopover(), placement: placement === "auto" ? "bottom" : placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode }), ref: refs.setReference, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), "data-testid": dataTestId && `${dataTestId}-trigger`, children: children === undefined ? (jsx("div", { children: jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "small", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) })) : (wrappedChildren) }), isMounted && (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) }))] }));
 };
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipContent({ color: mode }), children: jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
 
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cvaMerge(["mr-2"]);
@@ -1555,7 +1615,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  */
 const Indicator = (_a) => {
     var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping", "className"]);
-    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, children: jsxs("div", Object.assign({ className: cvaIndicator(), "data-testid": dataTestId, "aria-label": label }, rest, { children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping && (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] }), label !== undefined && withLabel && (jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })) }));
+    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", Object.assign({ className: cvaIndicator(), "data-testid": dataTestId, "aria-label": label }, rest, { children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping && (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] }), label !== undefined && withLabel && (jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })) }));
 };
 
 const cvaMenuItem = cvaMerge([
@@ -1788,30 +1848,6 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
-const cvaTip = cvaMerge("flex text-slate-300 transition hover:text-slate-500");
-const cvaTipContent = cvaMerge("flex max-w-sm items-center gap-2 rounded p-2 text-sm", {
-    variants: {
-        color: {
-            light: "bg-white shadow-md",
-            dark: "bg-neutral-800 text-white",
-        },
-    },
-    defaultVariants: {
-        color: "light",
-    },
-});
-
-/**
- * The Tip component is used to show helpful tips or contextual information to the users.
- * The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
- 
- * @param {TipProps} props - The props for the Tip component
- * @returns {JSX.Element} Tip component
- */
-const Tip = ({ children, iconProps, dataTestId, className, placement = "bottom", mode = "dark", link, }) => {
-    return (jsx("span", { "data-testid": dataTestId, className: cvaTip({ className }), children: jsxs(Popover, { placement: placement, activation: { click: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": dataTestId && `${dataTestId}-trigger`, children: jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) }) }), jsx(PopoverContent, { children: jsxs("div", { className: cvaTipContent({ color: mode }), children: [jsx("div", { children: typeof children === "string" ? jsx("p", { children: children }) : children }), link ? (jsx("a", { href: link, children: jsx(Icon, { name: "ArrowRightCircle" }) })) : null] }) })] }) }));
-};
-
 const cvaPageHeaderContainer = cvaMerge(["bg-white"], {
     variants: {
         withBorder: {
@@ -1851,11 +1887,11 @@ const cvaPageHeaderChildContainer = cvaMerge(["flex", "flex-wrap", "gap-x-6", "i
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, }) => {
+const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText = "Help Center Article", }) => {
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className: `${className} tu-page-header`,
             withBorder: !Boolean(tabsList),
-        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, renderAs: Link, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && (jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }), tabsList] }));
+        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, renderAs: Link, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxs("div", { className: "flex h-fit items-center gap-1", children: [jsx(Tooltip, { label: description, dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: { name: "QuestionMarkCircle" }, placement: "bottom" }), link && (jsxs(Link, { to: link, "data-testid": "tooltip-link", target: "_blank", className: "text-primary-600 hover:text-primary-700 flex h-4 items-center gap-1 text-xs underline", children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] }))] }))] }), tag && !showLoading && (jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -2946,4 +2982,4 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };

package/package.json

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

package/src/components/PageHeader/PageHeader.d.ts

@@ -15,6 +15,10 @@ export interface PageHeaderProps extends CommonProps {
      * The link to which user is redirected to if user clicks on the tip.
      */
     link?: string;
+    /**
+     * Display text of the specified link
+     */
+    linkText?: string;
     /**
      * Additional actions to be rendered along with the header.
      */
@@ -51,4 +55,4 @@ export interface PageHeaderProps extends CommonProps {
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, }: PageHeaderProps) => JSX.Element;
+export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText, }: PageHeaderProps) => JSX.Element;

package/src/components/Tooltip/Tooltip.d.ts

@@ -1,7 +1,10 @@
+import { Placement } from "@floating-ui/react";
 import * as React from "react";
 import { CommonProps } from "../../common";
-import { PopoverPlacement } from "../Popover";
+import { IconProps } from "../Icon/Icon";
 import { TextType } from "../Text";
+export type ToolTipVariant = "icon" | "none";
+export type TooltipPlacement = Placement | "auto";
 export interface TooltipProps extends CommonProps {
     /**
      * The text to be displayed in the tooltip.
@@ -10,7 +13,7 @@ export interface TooltipProps extends CommonProps {
     /**
      * Where the tooltip should preferentially be placed.
      */
-    placement?: PopoverPlacement;
+    placement?: TooltipPlacement;
     /**
      * Child nodes
      */
@@ -27,11 +30,21 @@ export interface TooltipProps extends CommonProps {
      * Type of content.
      */
     contentTextType?: TextType;
+    /**
+     * The props for setting the icon on this tip.
+     */
+    iconProps?: Omit<IconProps, "type">;
 }
 /**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
+ * Tooltips display additional information upon hover. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.
+ *
+ * Tooltips should be used sparingly and contain succinct, supplementary information, and they should contain read-only text. **❗️Do not include interactive elements in tooltips ** (no links, buttons, etc). Interactive elements in tooltips are inaccessible since tooltips do not receive focus.
+ *
+ * **Do use** tooltips to expose names of icon buttons that lack visual labels, when more information is useful in helping a user understand the context, when an element needs additional explanation, or use when defining a term or inline item.
+ *
+ * **Do not use** tooltips to include information that is necessary for the user to complete their task. Use helper text that is always visible and accessible for vital information.
  
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-export declare const Tooltip: ({ children, dataTestId, disabled, className, ...rest }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode, contentTextType, iconProps, }: TooltipProps) => JSX.Element;

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

@@ -1,6 +1,14 @@
 export declare const cvaTooltipFlexContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipIcon: (props?: ({
+    color?: "light" | "dark" | null | undefined;
+    defaultVariants?: "color" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaTooltipPopover: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTooltipContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTooltipContent: (props?: ({
+export declare const cvaTooltipPopoverTail: (props?: ({
+    placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null | undefined;
+    mode?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTooltipPopoverContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipPopoverContent: (props?: ({
     color?: "light" | "dark" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/index.d.ts

@@ -30,7 +30,6 @@ export * from "./Tabs/Tabs";
 export * from "./Tag";
 export * from "./Text";
 export * from "./Timeline/Timeline";
-export * from "./Tip";
 export * from "./Tooltip";
 export * from "./ValueBar";
 export * from "./Widget";

package/src/components/Tip/Tip.d.ts

@@ -1,27 +0,0 @@
-import { MakePropertyOptional, MappedOmit } from "@trackunit/shared-utils";
-import * as React from "react";
-import { CommonProps } from "../../common";
-import { IconProps } from "../Icon/Icon";
-import { TooltipProps } from "../Tooltip";
-export interface TipProps extends CommonProps, Pick<TooltipProps, "placement" | "mode"> {
-    /**
-     * Child nodes to render inside the tip.
-     */
-    children: React.ReactNode | string;
-    /**
-     * The props for setting the icon on this tip.
-     */
-    iconProps?: MakePropertyOptional<MappedOmit<IconProps, "size" | "type">, "name">;
-    /**
-     * Shows an icon with link as the href attribute inside the tip.
-     */
-    link?: string;
-}
-/**
- * The Tip component is used to show helpful tips or contextual information to the users.
- * The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
- 
- * @param {TipProps} props - The props for the Tip component
- * @returns {JSX.Element} Tip component
- */
-export declare const Tip: ({ children, iconProps, dataTestId, className, placement, mode, link, }: TipProps) => JSX.Element;

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

@@ -1,4 +0,0 @@
-export declare const cvaTip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTipContent: (props?: ({
-    color?: "light" | "dark" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Tip/index.d.ts

@@ -1 +0,0 @@
-export * from "./Tip";