@trackunit/react-components 1.17.24 → 1.17.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.cjs.js
CHANGED
|
@@ -144,9 +144,9 @@ const isSafari = () => {
|
|
|
144
144
|
* @param {IconProps} props - The props for the Icon component
|
|
145
145
|
* @returns {ReactElement} Icon component
|
|
146
146
|
*/
|
|
147
|
-
const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, color = undefined, onClick, type = size === "large" ? "outline" : "solid", style, ref, ariaLabel, fontSize = false, ariaLabelledBy, ariaDescribedBy, ariaHidden, }) => {
|
|
147
|
+
const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, color = undefined, onClick, type = size === "large" ? "outline" : "solid", style, ref, ariaLabel, fontSize = false, ariaLabelledBy, ariaDescribedBy, ariaHidden, ...rest }) => {
|
|
148
148
|
const useTagRef = react.useRef(null);
|
|
149
|
-
const
|
|
149
|
+
const iconContainerId = react.useMemo(() => sharedUtils.uuidv4(), []);
|
|
150
150
|
const correctIconType = react.useMemo(() => {
|
|
151
151
|
switch (size) {
|
|
152
152
|
case "small":
|
|
@@ -179,7 +179,7 @@ const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, col
|
|
|
179
179
|
useTagRef.current.setAttribute("href", href[correctIconType]);
|
|
180
180
|
}
|
|
181
181
|
}, [correctIconType, href]);
|
|
182
|
-
return (jsxRuntime.jsx("span", { "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : stringTs.titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id:
|
|
182
|
+
return (jsxRuntime.jsx("span", { ...rest, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : stringTs.titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: iconContainerId, onClick: onClick, ref: ref, children: jsxRuntime.jsx("svg", { "aria-labelledby": iconContainerId, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
|
|
183
183
|
};
|
|
184
184
|
|
|
185
185
|
/**
|
|
@@ -805,13 +805,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
|
|
|
805
805
|
false: "",
|
|
806
806
|
},
|
|
807
807
|
disabled: {
|
|
808
|
-
true: [
|
|
809
|
-
"cursor-not-allowed",
|
|
810
|
-
"pointer-events-none",
|
|
811
|
-
"bg-neutral-200",
|
|
812
|
-
"hover:bg-neutral-200",
|
|
813
|
-
"text-neutral-400",
|
|
814
|
-
],
|
|
808
|
+
true: ["cursor-not-allowed", "bg-neutral-200", "hover:bg-neutral-200", "text-neutral-400"],
|
|
815
809
|
false: [],
|
|
816
810
|
},
|
|
817
811
|
loading: {
|
|
@@ -4524,8 +4518,8 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
|
|
|
4524
4518
|
return (jsxRuntime.jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
|
|
4525
4519
|
};
|
|
4526
4520
|
|
|
4527
|
-
|
|
4528
|
-
const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["
|
|
4521
|
+
cssClassVarianceUtilities.cvaMerge(["flex", "leading-5"]);
|
|
4522
|
+
const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
|
|
4529
4523
|
variants: {
|
|
4530
4524
|
color: {
|
|
4531
4525
|
light: "hover:text-white",
|
|
@@ -4563,7 +4557,6 @@ const cvaTooltipPopoverTail = cssClassVarianceUtilities.cvaMerge("", {
|
|
|
4563
4557
|
mode: "dark",
|
|
4564
4558
|
},
|
|
4565
4559
|
});
|
|
4566
|
-
cssClassVarianceUtilities.cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
|
|
4567
4560
|
const cvaTooltipPopoverContent = cssClassVarianceUtilities.cvaMerge(["max-w-sm", "rounded", "p-2"], {
|
|
4568
4561
|
variants: {
|
|
4569
4562
|
color: {
|
|
@@ -4626,7 +4619,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
|
|
|
4626
4619
|
* @param {TooltipProps} props - The props for the Tooltip component
|
|
4627
4620
|
* @returns {ReactElement} Tooltip component
|
|
4628
4621
|
*/
|
|
4629
|
-
const Tooltip = ({ children, "data-testid": dataTestId, disabled = false,
|
|
4622
|
+
const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, }) => {
|
|
4630
4623
|
const [isOpen, setIsOpen] = react.useState(false);
|
|
4631
4624
|
const arrowRef = react.useRef(null);
|
|
4632
4625
|
const { refs, floatingStyles, context } = react$1.useFloating({
|
|
@@ -4647,27 +4640,12 @@ const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, classN
|
|
|
4647
4640
|
// Please don't try to move this into the component body directly
|
|
4648
4641
|
// I tried and it caused infinite re-renders some places (for whatever reason)
|
|
4649
4642
|
const wrappedChildren = react.useMemo(() => {
|
|
4650
|
-
|
|
4651
|
-
|
|
4652
|
-
|
|
4653
|
-
return (jsxRuntime.jsx("div", { className: cvaTooltipContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
|
|
4654
|
-
}, [asChild, children, className, dataTestId]);
|
|
4655
|
-
const openTooltip = react.useCallback(() => {
|
|
4656
|
-
if (disabled) {
|
|
4657
|
-
return;
|
|
4658
|
-
}
|
|
4659
|
-
setIsOpen(true);
|
|
4660
|
-
}, [disabled]);
|
|
4661
|
-
const closeTooltip = react.useCallback(() => {
|
|
4662
|
-
if (disabled) {
|
|
4663
|
-
return;
|
|
4664
|
-
}
|
|
4665
|
-
setIsOpen(false);
|
|
4666
|
-
}, [disabled]);
|
|
4667
|
-
return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseDown: closeTooltip, onMouseEnter: openTooltip, onMouseLeave: closeTooltip, ref: refs.setReference, style: style, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, { "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...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, { "data-testid": `${dataTestId}-text`, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
|
|
4643
|
+
return jsxRuntime.jsx(reactSlot.Slot, { children: children });
|
|
4644
|
+
}, [children]);
|
|
4645
|
+
return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, onOpenStateChange: setIsOpen, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { "data-testid": dataTestId ? `${dataTestId}-trigger` : null, ref: refs.setReference, style: style, children: children === undefined ? (jsxRuntime.jsx(Icon, { className: cvaTooltipIcon({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...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 ? `${dataTestId}-content` : undefined, children: [jsxRuntime.jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-text` : undefined, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
|
|
4668
4646
|
};
|
|
4669
4647
|
|
|
4670
|
-
const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
|
|
4648
|
+
const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["inline-flex", "items-center"]);
|
|
4671
4649
|
const cvaIndicatorIcon = cssClassVarianceUtilities.cvaMerge(["mr-2"]);
|
|
4672
4650
|
const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["capitalize"], {
|
|
4673
4651
|
variants: {
|
|
@@ -4823,7 +4801,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
|
|
|
4823
4801
|
* @returns {ReactElement} Indicator component
|
|
4824
4802
|
*/
|
|
4825
4803
|
const Indicator = ({ "data-testid": dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size = "medium", weight = "normal", className, ref, ...rest }) => {
|
|
4826
|
-
return (jsxRuntime.jsx(Tooltip, {
|
|
4804
|
+
return (jsxRuntime.jsx(Tooltip, { disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator({ className }), "data-testid": dataTestId, ref: ref, ...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" })) : null, icon] }), label && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
|
|
4827
4805
|
};
|
|
4828
4806
|
|
|
4829
4807
|
/**
|
|
@@ -4887,7 +4865,7 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge(["transition-colo
|
|
|
4887
4865
|
},
|
|
4888
4866
|
});
|
|
4889
4867
|
|
|
4890
|
-
const cvaKPI = cssClassVarianceUtilities.cvaMerge(["
|
|
4868
|
+
const cvaKPI = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"], {
|
|
4891
4869
|
variants: {
|
|
4892
4870
|
variant: {
|
|
4893
4871
|
small: ["px-3", "py-2"],
|
|
@@ -4957,7 +4935,7 @@ const cvaKPITrendPercentage = cssClassVarianceUtilities.cvaMerge([""], {
|
|
|
4957
4935
|
*/
|
|
4958
4936
|
const KPI = ({ title, value, unit, className, "data-testid": dataTestId, tooltipLabel, variant = "default", style, ref, ...rest }) => {
|
|
4959
4937
|
const isSmallVariant = variant === "small";
|
|
4960
|
-
return (jsxRuntime.jsx(Tooltip, {
|
|
4938
|
+
return (jsxRuntime.jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("min-w-8", cvaKPI({ variant, className })), "data-testid": dataTestId, ref: ref, style: style, ...rest, children: [jsxRuntime.jsx(Text, { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), children: jsxRuntime.jsxs(Text, { className: "truncate whitespace-nowrap text-lg font-medium", "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: [value, " ", unit] }) })] }) }));
|
|
4961
4939
|
};
|
|
4962
4940
|
|
|
4963
4941
|
/**
|
|
@@ -6401,7 +6379,7 @@ const MoreMenu = ({ className, "data-testid": dataTestId, popoverProps, iconProp
|
|
|
6401
6379
|
};
|
|
6402
6380
|
|
|
6403
6381
|
const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
|
|
6404
|
-
const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["font-medium", "text-sm", "overflow-hidden", "text-ellipsis"], {
|
|
6382
|
+
const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["font-medium", "text-sm", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"], {
|
|
6405
6383
|
variants: {
|
|
6406
6384
|
color: {
|
|
6407
6385
|
neutral: "text-neutral-400",
|
|
@@ -6476,7 +6454,7 @@ const cvaNoticeIcon = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items
|
|
|
6476
6454
|
* @returns {ReactElement} Notice component
|
|
6477
6455
|
*/
|
|
6478
6456
|
const Notice = ({ "data-testid": dataTestId, iconName = undefined, iconSize = "medium", iconColor = undefined, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ref, ...rest }) => {
|
|
6479
|
-
return (jsxRuntime.jsx(Tooltip, {
|
|
6457
|
+
return (jsxRuntime.jsx(Tooltip, { disabled: withTooltip === false, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaNotice({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: [sharedUtils.nonNullable(iconName) ? (jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color: iconColor || color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: jsxRuntime.jsx(Icon, { name: iconName, size: iconSize }) })) : null, label && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
|
|
6480
6458
|
};
|
|
6481
6459
|
|
|
6482
6460
|
const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
|
|
@@ -6746,7 +6724,7 @@ function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
|
|
|
6746
6724
|
externalOnClick?.();
|
|
6747
6725
|
}, prefix: prefixIconName ? jsxRuntime.jsx(Icon, { name: prefixIconName, size: "small" }) : undefined, size: "small", variant: variant, children: actionText }));
|
|
6748
6726
|
// Wrap `content` with Tooltip
|
|
6749
|
-
const wrappedWithTooltip = tooltipLabel ? (jsxRuntime.jsx(Tooltip, {
|
|
6727
|
+
const wrappedWithTooltip = tooltipLabel ? (jsxRuntime.jsx(Tooltip, { label: tooltipLabel, children: jsxRuntime.jsx("span", { className: "block", children: content }) })) : (content);
|
|
6750
6728
|
// Finally, wrap with Link if `to` is provided
|
|
6751
6729
|
return to !== undefined && to !== "" ? (jsxRuntime.jsx(reactRouter.Link, { target: target, to: to, children: wrappedWithTooltip })) : (wrappedWithTooltip);
|
|
6752
6730
|
}
|
|
@@ -6865,7 +6843,7 @@ const cvaPageHeaderHeading = cssClassVarianceUtilities.cvaMerge(["text-neutral-9
|
|
|
6865
6843
|
*/
|
|
6866
6844
|
const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, ref: forwardedRef, }) => {
|
|
6867
6845
|
const { ref, isTextTruncated } = useIsTextTruncated();
|
|
6868
|
-
return (jsxRuntime.jsx("div", { className: "flex flex-row items-center", ref: forwardedRef, children: jsxRuntime.jsx(Tooltip, {
|
|
6846
|
+
return (jsxRuntime.jsx("div", { className: "flex flex-row items-center", ref: forwardedRef, children: jsxRuntime.jsx(Tooltip, { disabled: !isTextTruncated, label: title, placement: "top", children: jsxRuntime.jsx("div", { className: "min-w-16 grid", children: jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading({ className }), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, ref: ref, children: title }) }) }) }));
|
|
6869
6847
|
};
|
|
6870
6848
|
|
|
6871
6849
|
/**
|
|
@@ -6927,18 +6905,18 @@ const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false,
|
|
|
6927
6905
|
return null;
|
|
6928
6906
|
}
|
|
6929
6907
|
// If the user passes a string, we render the string as a tag with props provided.
|
|
6930
|
-
return (jsxRuntime.jsx("div", { className: "ml-auto flex flex-row gap-2", children: jsxRuntime.jsx(Tooltip, {
|
|
6908
|
+
return (jsxRuntime.jsx("div", { className: "ml-auto flex flex-row gap-2", children: jsxRuntime.jsx(Tooltip, { "data-testid": "page-header-tag-tooltip", disabled: tagTooltipLabel === undefined || tagTooltipLabel === "", label: tagTooltipLabel, placement: "top", children: jsxRuntime.jsx(Tag, { color: tagColor, "data-testid": "page-header-tag", children: tagLabel }) }) }));
|
|
6931
6909
|
}, [showLoading, tagColor, tagLabel, tagTooltipLabel]);
|
|
6932
6910
|
return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
|
|
6933
6911
|
className,
|
|
6934
6912
|
withBorder: tabsList === undefined,
|
|
6935
|
-
}), "data-testid": dataTestId, ref: ref, 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, {
|
|
6913
|
+
}), "data-testid": dataTestId, ref: ref, 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: {
|
|
6936
6914
|
name: descriptionIcon,
|
|
6937
6915
|
"data-testid": "page-header-description-icon",
|
|
6938
6916
|
}, 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" &&
|
|
6939
6917
|
discriminatedProps.primaryAction !== undefined &&
|
|
6940
6918
|
(discriminatedProps.primaryAction.hidden === false ||
|
|
6941
|
-
discriminatedProps.primaryAction.hidden === undefined) ? (jsxRuntime.jsx(Tooltip, {
|
|
6919
|
+
discriminatedProps.primaryAction.hidden === undefined) ? (jsxRuntime.jsx(Tooltip, { disabled: discriminatedProps.primaryAction.tooltipLabel === undefined ||
|
|
6942
6920
|
discriminatedProps.primaryAction.tooltipLabel === "", label: discriminatedProps.primaryAction.tooltipLabel, children: jsxRuntime.jsx(Button, { "data-testid": discriminatedProps.primaryAction["data-testid"], disabled: discriminatedProps.primaryAction.disabled, loading: discriminatedProps.primaryAction.loading, onClick: () => discriminatedProps.primaryAction?.actionCallback?.(), prefix: discriminatedProps.primaryAction.prefixIconName !== undefined ? (jsxRuntime.jsx(Icon, { name: discriminatedProps.primaryAction.prefixIconName, size: "small" })) : undefined, size: "small", variant: discriminatedProps.primaryAction.variant, children: discriminatedProps.primaryAction.actionText }) })) : null] })] }), tabsList] }));
|
|
6943
6921
|
};
|
|
6944
6922
|
|
|
@@ -8105,11 +8083,11 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
|
|
|
8105
8083
|
}, ref: el => (buttonRefs.current[index] = el), selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
|
|
8106
8084
|
};
|
|
8107
8085
|
const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName = undefined, size, className, selected, text, tooltip, "data-testid": dataTestId, ref, }) => {
|
|
8108
|
-
return isIconOnly ? (jsxRuntime.jsx(Tooltip, {
|
|
8086
|
+
return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(ToggleButton, { className: cvaToggleItem({
|
|
8109
8087
|
className,
|
|
8110
8088
|
selected,
|
|
8111
8089
|
disabled,
|
|
8112
|
-
}), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsxRuntime.jsx(Tooltip, {
|
|
8090
|
+
}), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !tooltip?.content && text?.truncate === false, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(ToggleButton, { className: cvaToggleItem({
|
|
8113
8091
|
className,
|
|
8114
8092
|
selected,
|
|
8115
8093
|
disabled,
|
package/index.esm.js
CHANGED
|
@@ -142,9 +142,9 @@ const isSafari = () => {
|
|
|
142
142
|
* @param {IconProps} props - The props for the Icon component
|
|
143
143
|
* @returns {ReactElement} Icon component
|
|
144
144
|
*/
|
|
145
|
-
const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, color = undefined, onClick, type = size === "large" ? "outline" : "solid", style, ref, ariaLabel, fontSize = false, ariaLabelledBy, ariaDescribedBy, ariaHidden, }) => {
|
|
145
|
+
const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, color = undefined, onClick, type = size === "large" ? "outline" : "solid", style, ref, ariaLabel, fontSize = false, ariaLabelledBy, ariaDescribedBy, ariaHidden, ...rest }) => {
|
|
146
146
|
const useTagRef = useRef(null);
|
|
147
|
-
const
|
|
147
|
+
const iconContainerId = useMemo(() => uuidv4(), []);
|
|
148
148
|
const correctIconType = useMemo(() => {
|
|
149
149
|
switch (size) {
|
|
150
150
|
case "small":
|
|
@@ -177,7 +177,7 @@ const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, col
|
|
|
177
177
|
useTagRef.current.setAttribute("href", href[correctIconType]);
|
|
178
178
|
}
|
|
179
179
|
}, [correctIconType, href]);
|
|
180
|
-
return (jsx("span", { "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id:
|
|
180
|
+
return (jsx("span", { ...rest, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: iconContainerId, onClick: onClick, ref: ref, children: jsx("svg", { "aria-labelledby": iconContainerId, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
|
|
181
181
|
};
|
|
182
182
|
|
|
183
183
|
/**
|
|
@@ -803,13 +803,7 @@ const cvaButton = cvaMerge([
|
|
|
803
803
|
false: "",
|
|
804
804
|
},
|
|
805
805
|
disabled: {
|
|
806
|
-
true: [
|
|
807
|
-
"cursor-not-allowed",
|
|
808
|
-
"pointer-events-none",
|
|
809
|
-
"bg-neutral-200",
|
|
810
|
-
"hover:bg-neutral-200",
|
|
811
|
-
"text-neutral-400",
|
|
812
|
-
],
|
|
806
|
+
true: ["cursor-not-allowed", "bg-neutral-200", "hover:bg-neutral-200", "text-neutral-400"],
|
|
813
807
|
false: [],
|
|
814
808
|
},
|
|
815
809
|
loading: {
|
|
@@ -4522,8 +4516,8 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
|
|
|
4522
4516
|
return (jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
|
|
4523
4517
|
};
|
|
4524
4518
|
|
|
4525
|
-
|
|
4526
|
-
const cvaTooltipIcon = cvaMerge(["
|
|
4519
|
+
cvaMerge(["flex", "leading-5"]);
|
|
4520
|
+
const cvaTooltipIcon = cvaMerge(["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
|
|
4527
4521
|
variants: {
|
|
4528
4522
|
color: {
|
|
4529
4523
|
light: "hover:text-white",
|
|
@@ -4561,7 +4555,6 @@ const cvaTooltipPopoverTail = cvaMerge("", {
|
|
|
4561
4555
|
mode: "dark",
|
|
4562
4556
|
},
|
|
4563
4557
|
});
|
|
4564
|
-
cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
|
|
4565
4558
|
const cvaTooltipPopoverContent = cvaMerge(["max-w-sm", "rounded", "p-2"], {
|
|
4566
4559
|
variants: {
|
|
4567
4560
|
color: {
|
|
@@ -4624,7 +4617,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
|
|
|
4624
4617
|
* @param {TooltipProps} props - The props for the Tooltip component
|
|
4625
4618
|
* @returns {ReactElement} Tooltip component
|
|
4626
4619
|
*/
|
|
4627
|
-
const Tooltip = ({ children, "data-testid": dataTestId, disabled = false,
|
|
4620
|
+
const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, }) => {
|
|
4628
4621
|
const [isOpen, setIsOpen] = useState(false);
|
|
4629
4622
|
const arrowRef = useRef(null);
|
|
4630
4623
|
const { refs, floatingStyles, context } = useFloating({
|
|
@@ -4645,27 +4638,12 @@ const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, classN
|
|
|
4645
4638
|
// Please don't try to move this into the component body directly
|
|
4646
4639
|
// I tried and it caused infinite re-renders some places (for whatever reason)
|
|
4647
4640
|
const wrappedChildren = useMemo(() => {
|
|
4648
|
-
|
|
4649
|
-
|
|
4650
|
-
|
|
4651
|
-
return (jsx("div", { className: cvaTooltipContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
|
|
4652
|
-
}, [asChild, children, className, dataTestId]);
|
|
4653
|
-
const openTooltip = useCallback(() => {
|
|
4654
|
-
if (disabled) {
|
|
4655
|
-
return;
|
|
4656
|
-
}
|
|
4657
|
-
setIsOpen(true);
|
|
4658
|
-
}, [disabled]);
|
|
4659
|
-
const closeTooltip = useCallback(() => {
|
|
4660
|
-
if (disabled) {
|
|
4661
|
-
return;
|
|
4662
|
-
}
|
|
4663
|
-
setIsOpen(false);
|
|
4664
|
-
}, [disabled]);
|
|
4665
|
-
return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseDown: closeTooltip, onMouseEnter: openTooltip, onMouseLeave: closeTooltip, ref: refs.setReference, style: style, children: children === undefined ? (jsx("div", { children: jsx(Icon, { "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...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, { "data-testid": `${dataTestId}-text`, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
|
|
4641
|
+
return jsx(Slot, { children: children });
|
|
4642
|
+
}, [children]);
|
|
4643
|
+
return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, onOpenStateChange: setIsOpen, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { "data-testid": dataTestId ? `${dataTestId}-trigger` : null, ref: refs.setReference, style: style, children: children === undefined ? (jsx(Icon, { className: cvaTooltipIcon({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...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 ? `${dataTestId}-content` : undefined, children: [jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-text` : undefined, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
|
|
4666
4644
|
};
|
|
4667
4645
|
|
|
4668
|
-
const cvaIndicator = cvaMerge(["flex", "items-center"]);
|
|
4646
|
+
const cvaIndicator = cvaMerge(["inline-flex", "items-center"]);
|
|
4669
4647
|
const cvaIndicatorIcon = cvaMerge(["mr-2"]);
|
|
4670
4648
|
const cvaIndicatorLabel = cvaMerge(["capitalize"], {
|
|
4671
4649
|
variants: {
|
|
@@ -4821,7 +4799,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
|
|
|
4821
4799
|
* @returns {ReactElement} Indicator component
|
|
4822
4800
|
*/
|
|
4823
4801
|
const Indicator = ({ "data-testid": dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size = "medium", weight = "normal", className, ref, ...rest }) => {
|
|
4824
|
-
return (jsx(Tooltip, {
|
|
4802
|
+
return (jsx(Tooltip, { disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator({ className }), "data-testid": dataTestId, ref: ref, ...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" })) : null, icon] }), label && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
|
|
4825
4803
|
};
|
|
4826
4804
|
|
|
4827
4805
|
/**
|
|
@@ -4885,7 +4863,7 @@ const cvaInteractableItem = cvaMerge(["transition-colors", "duration-100", "ease
|
|
|
4885
4863
|
},
|
|
4886
4864
|
});
|
|
4887
4865
|
|
|
4888
|
-
const cvaKPI = cvaMerge(["
|
|
4866
|
+
const cvaKPI = cvaMerge(["flex", "flex-col"], {
|
|
4889
4867
|
variants: {
|
|
4890
4868
|
variant: {
|
|
4891
4869
|
small: ["px-3", "py-2"],
|
|
@@ -4955,7 +4933,7 @@ const cvaKPITrendPercentage = cvaMerge([""], {
|
|
|
4955
4933
|
*/
|
|
4956
4934
|
const KPI = ({ title, value, unit, className, "data-testid": dataTestId, tooltipLabel, variant = "default", style, ref, ...rest }) => {
|
|
4957
4935
|
const isSmallVariant = variant === "small";
|
|
4958
|
-
return (jsx(Tooltip, {
|
|
4936
|
+
return (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxs("div", { className: twMerge("min-w-8", cvaKPI({ variant, className })), "data-testid": dataTestId, ref: ref, style: style, ...rest, children: [jsx(Text, { className: twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx("div", { className: twMerge("truncate", "whitespace-nowrap"), children: jsxs(Text, { className: "truncate whitespace-nowrap text-lg font-medium", "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: [value, " ", unit] }) })] }) }));
|
|
4959
4937
|
};
|
|
4960
4938
|
|
|
4961
4939
|
/**
|
|
@@ -6399,7 +6377,7 @@ const MoreMenu = ({ className, "data-testid": dataTestId, popoverProps, iconProp
|
|
|
6399
6377
|
};
|
|
6400
6378
|
|
|
6401
6379
|
const cvaNotice = cvaMerge(["flex", "items-center", "gap-1"]);
|
|
6402
|
-
const cvaNoticeLabel = cvaMerge(["font-medium", "text-sm", "overflow-hidden", "text-ellipsis"], {
|
|
6380
|
+
const cvaNoticeLabel = cvaMerge(["font-medium", "text-sm", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"], {
|
|
6403
6381
|
variants: {
|
|
6404
6382
|
color: {
|
|
6405
6383
|
neutral: "text-neutral-400",
|
|
@@ -6474,7 +6452,7 @@ const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center"
|
|
|
6474
6452
|
* @returns {ReactElement} Notice component
|
|
6475
6453
|
*/
|
|
6476
6454
|
const Notice = ({ "data-testid": dataTestId, iconName = undefined, iconSize = "medium", iconColor = undefined, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ref, ...rest }) => {
|
|
6477
|
-
return (jsx(Tooltip, {
|
|
6455
|
+
return (jsx(Tooltip, { disabled: withTooltip === false, label: tooltipLabel, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaNotice({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: [nonNullable(iconName) ? (jsx("div", { className: cvaNoticeIcon({ color: iconColor || color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: jsx(Icon, { name: iconName, size: iconSize }) })) : null, label && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
|
|
6478
6456
|
};
|
|
6479
6457
|
|
|
6480
6458
|
const cvaPage = cvaMerge(["grid", "h-full"], {
|
|
@@ -6744,7 +6722,7 @@ function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
|
|
|
6744
6722
|
externalOnClick?.();
|
|
6745
6723
|
}, prefix: prefixIconName ? jsx(Icon, { name: prefixIconName, size: "small" }) : undefined, size: "small", variant: variant, children: actionText }));
|
|
6746
6724
|
// Wrap `content` with Tooltip
|
|
6747
|
-
const wrappedWithTooltip = tooltipLabel ? (jsx(Tooltip, {
|
|
6725
|
+
const wrappedWithTooltip = tooltipLabel ? (jsx(Tooltip, { label: tooltipLabel, children: jsx("span", { className: "block", children: content }) })) : (content);
|
|
6748
6726
|
// Finally, wrap with Link if `to` is provided
|
|
6749
6727
|
return to !== undefined && to !== "" ? (jsx(Link, { target: target, to: to, children: wrappedWithTooltip })) : (wrappedWithTooltip);
|
|
6750
6728
|
}
|
|
@@ -6863,7 +6841,7 @@ const cvaPageHeaderHeading = cvaMerge(["text-neutral-900", "text-xl", "font-semi
|
|
|
6863
6841
|
*/
|
|
6864
6842
|
const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, ref: forwardedRef, }) => {
|
|
6865
6843
|
const { ref, isTextTruncated } = useIsTextTruncated();
|
|
6866
|
-
return (jsx("div", { className: "flex flex-row items-center", ref: forwardedRef, children: jsx(Tooltip, {
|
|
6844
|
+
return (jsx("div", { className: "flex flex-row items-center", ref: forwardedRef, children: jsx(Tooltip, { disabled: !isTextTruncated, label: title, placement: "top", children: jsx("div", { className: "min-w-16 grid", children: jsx("h1", { className: cvaPageHeaderHeading({ className }), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, ref: ref, children: title }) }) }) }));
|
|
6867
6845
|
};
|
|
6868
6846
|
|
|
6869
6847
|
/**
|
|
@@ -6925,18 +6903,18 @@ const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false,
|
|
|
6925
6903
|
return null;
|
|
6926
6904
|
}
|
|
6927
6905
|
// If the user passes a string, we render the string as a tag with props provided.
|
|
6928
|
-
return (jsx("div", { className: "ml-auto flex flex-row gap-2", children: jsx(Tooltip, {
|
|
6906
|
+
return (jsx("div", { className: "ml-auto flex flex-row gap-2", children: jsx(Tooltip, { "data-testid": "page-header-tag-tooltip", disabled: tagTooltipLabel === undefined || tagTooltipLabel === "", label: tagTooltipLabel, placement: "top", children: jsx(Tag, { color: tagColor, "data-testid": "page-header-tag", children: tagLabel }) }) }));
|
|
6929
6907
|
}, [showLoading, tagColor, tagLabel, tagTooltipLabel]);
|
|
6930
6908
|
return (jsxs("div", { className: cvaPageHeaderContainer({
|
|
6931
6909
|
className,
|
|
6932
6910
|
withBorder: tabsList === undefined,
|
|
6933
|
-
}), "data-testid": dataTestId, ref: ref, children: [jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsx(Link, { to: backTo, children: jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsx(PageHeaderTitle, { "data-testid": dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsx(Tooltip, {
|
|
6911
|
+
}), "data-testid": dataTestId, ref: ref, children: [jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsx(Link, { to: backTo, children: jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsx(PageHeaderTitle, { "data-testid": dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
|
|
6934
6912
|
name: descriptionIcon,
|
|
6935
6913
|
"data-testid": "page-header-description-icon",
|
|
6936
6914
|
}, label: description, placement: "bottom" })) : undefined, tagRenderer] })) : null, jsxs("div", { className: "ml-auto flex gap-2", children: [discriminatedProps.accessoryType === "kpi-metrics" ? (jsx(PageHeaderKpiMetrics, { kpiMetrics: discriminatedProps.kpiMetrics })) : null, discriminatedProps.accessoryType === "actions" ? (Array.isArray(discriminatedProps.secondaryActions) ? (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" &&
|
|
6937
6915
|
discriminatedProps.primaryAction !== undefined &&
|
|
6938
6916
|
(discriminatedProps.primaryAction.hidden === false ||
|
|
6939
|
-
discriminatedProps.primaryAction.hidden === undefined) ? (jsx(Tooltip, {
|
|
6917
|
+
discriminatedProps.primaryAction.hidden === undefined) ? (jsx(Tooltip, { disabled: discriminatedProps.primaryAction.tooltipLabel === undefined ||
|
|
6940
6918
|
discriminatedProps.primaryAction.tooltipLabel === "", label: discriminatedProps.primaryAction.tooltipLabel, children: jsx(Button, { "data-testid": discriminatedProps.primaryAction["data-testid"], disabled: discriminatedProps.primaryAction.disabled, loading: discriminatedProps.primaryAction.loading, onClick: () => discriminatedProps.primaryAction?.actionCallback?.(), prefix: discriminatedProps.primaryAction.prefixIconName !== undefined ? (jsx(Icon, { name: discriminatedProps.primaryAction.prefixIconName, size: "small" })) : undefined, size: "small", variant: discriminatedProps.primaryAction.variant, children: discriminatedProps.primaryAction.actionText }) })) : null] })] }), tabsList] }));
|
|
6941
6919
|
};
|
|
6942
6920
|
|
|
@@ -8103,11 +8081,11 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
|
|
|
8103
8081
|
}, ref: el => (buttonRefs.current[index] = el), selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
|
|
8104
8082
|
};
|
|
8105
8083
|
const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName = undefined, size, className, selected, text, tooltip, "data-testid": dataTestId, ref, }) => {
|
|
8106
|
-
return isIconOnly ? (jsx(Tooltip, {
|
|
8084
|
+
return isIconOnly ? (jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
|
|
8107
8085
|
className,
|
|
8108
8086
|
selected,
|
|
8109
8087
|
disabled,
|
|
8110
|
-
}), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsx(Tooltip, {
|
|
8088
|
+
}), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsx(Tooltip, { disabled: !tooltip?.content && text?.truncate === false, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
|
|
8111
8089
|
className,
|
|
8112
8090
|
selected,
|
|
8113
8091
|
disabled,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-components",
|
|
3
|
-
"version": "1.17.
|
|
3
|
+
"version": "1.17.26",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
"@floating-ui/react": "^0.26.25",
|
|
15
15
|
"string-ts": "^2.0.0",
|
|
16
16
|
"tailwind-merge": "^2.0.0",
|
|
17
|
-
"@trackunit/ui-design-tokens": "1.11.
|
|
18
|
-
"@trackunit/css-class-variance-utilities": "1.11.
|
|
19
|
-
"@trackunit/shared-utils": "1.13.
|
|
20
|
-
"@trackunit/ui-icons": "1.11.
|
|
17
|
+
"@trackunit/ui-design-tokens": "1.11.44",
|
|
18
|
+
"@trackunit/css-class-variance-utilities": "1.11.44",
|
|
19
|
+
"@trackunit/shared-utils": "1.13.44",
|
|
20
|
+
"@trackunit/ui-icons": "1.11.43",
|
|
21
21
|
"@tanstack/react-router": "1.114.29",
|
|
22
22
|
"es-toolkit": "^1.39.10",
|
|
23
23
|
"@tanstack/react-virtual": "3.13.12",
|
|
@@ -318,5 +318,5 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & Refab
|
|
|
318
318
|
* @param {IconProps} props - The props for the Icon component
|
|
319
319
|
* @returns {ReactElement} Icon component
|
|
320
320
|
*/
|
|
321
|
-
export declare const Icon: ({ name, size, className, "data-testid": dataTestId, color, onClick, type, style, ref, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, ariaHidden, }: IconProps) => ReactElement;
|
|
321
|
+
export declare const Icon: ({ name, size, className, "data-testid": dataTestId, color, onClick, type, style, ref, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, ariaHidden, ...rest }: IconProps) => ReactElement;
|
|
322
322
|
export {};
|
|
@@ -4,7 +4,7 @@ import { CommonProps } from "../../common/CommonProps";
|
|
|
4
4
|
import { Styleable } from "../../common/Styleable";
|
|
5
5
|
import { IconProps } from "../Icon/Icon";
|
|
6
6
|
export type TooltipPlacement = Placement | "auto";
|
|
7
|
-
export interface TooltipProps extends CommonProps, Styleable {
|
|
7
|
+
export interface TooltipProps extends Omit<CommonProps, "className">, Styleable {
|
|
8
8
|
/**
|
|
9
9
|
* The text to be displayed in the tooltip.
|
|
10
10
|
*/
|
|
@@ -33,15 +33,6 @@ export interface TooltipProps extends CommonProps, Styleable {
|
|
|
33
33
|
* Ihe id of the html element
|
|
34
34
|
*/
|
|
35
35
|
id?: string;
|
|
36
|
-
/**
|
|
37
|
-
* Specifies whether the current component or element should be rendered as a child element.
|
|
38
|
-
* When set to `true`, the behavior or structure of the component may adapt to fit within
|
|
39
|
-
* a parent context, altering its default rendering logic. Typically used in scenarios
|
|
40
|
-
* where nesting or parent-child relationships are relevant.
|
|
41
|
-
*
|
|
42
|
-
* @deprecated - Do not use this prop. It will be removed in a future release.
|
|
43
|
-
*/
|
|
44
|
-
asChild?: boolean;
|
|
45
36
|
}
|
|
46
37
|
/**
|
|
47
38
|
* 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.
|
|
@@ -84,4 +75,4 @@ export interface TooltipProps extends CommonProps, Styleable {
|
|
|
84
75
|
* @param {TooltipProps} props - The props for the Tooltip component
|
|
85
76
|
* @returns {ReactElement} Tooltip component
|
|
86
77
|
*/
|
|
87
|
-
export declare const Tooltip: ({ children, "data-testid": dataTestId, disabled,
|
|
78
|
+
export declare const Tooltip: ({ children, "data-testid": dataTestId, disabled, label, placement, mode, iconProps, id, style, }: TooltipProps) => ReactElement;
|
|
@@ -8,7 +8,6 @@ export declare const cvaTooltipPopoverTail: (props?: ({
|
|
|
8
8
|
placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null | undefined;
|
|
9
9
|
mode?: "light" | "dark" | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
11
|
-
export declare const cvaTooltipPopoverContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
|
|
12
11
|
export declare const cvaTooltipPopoverContent: (props?: ({
|
|
13
12
|
color?: "light" | "dark" | null | undefined;
|
|
14
13
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|