@trackunit/react-components 1.4.145 → 1.4.147
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 +4 -4
- package/index.esm.js +4 -4
- package/package.json +2 -2
package/index.cjs.js
CHANGED
|
@@ -2590,7 +2590,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
|
|
|
2590
2590
|
* @param {TooltipProps} props - The props for the Tooltip component
|
|
2591
2591
|
* @returns {ReactElement} Tooltip component
|
|
2592
2592
|
*/
|
|
2593
|
-
const Tooltip = ({ children, dataTestId
|
|
2593
|
+
const Tooltip = ({ children, dataTestId, disabled, className, label, placement = "auto", mode = "dark", iconProps, id, }) => {
|
|
2594
2594
|
const [isOpen, setIsOpen] = react.useState(false);
|
|
2595
2595
|
const arrowRef = react.useRef(null);
|
|
2596
2596
|
const { refs, floatingStyles, context } = react$1.useFloating({
|
|
@@ -2755,7 +2755,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
|
|
|
2755
2755
|
* @returns {ReactElement} Indicator component
|
|
2756
2756
|
*/
|
|
2757
2757
|
const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size, weight, className, ...rest }) => {
|
|
2758
|
-
return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...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 !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` :
|
|
2758
|
+
return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...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 !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
|
|
2759
2759
|
};
|
|
2760
2760
|
|
|
2761
2761
|
const cvaKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col", "gap-1"], {
|
|
@@ -2816,7 +2816,7 @@ const LoadingContent$1 = () => (jsxRuntime.jsx("div", { className: "flex h-11 fl
|
|
|
2816
2816
|
*/
|
|
2817
2817
|
const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...rest }) => {
|
|
2818
2818
|
const isSmallVariant = variant === "small";
|
|
2819
|
-
return (jsxRuntime.jsx(Tooltip, { disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPIValueContainer({
|
|
2819
|
+
return (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPIValueContainer({
|
|
2820
2820
|
isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
|
|
2821
2821
|
className,
|
|
2822
2822
|
}), children: [jsxRuntime.jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsxRuntime.jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }));
|
|
@@ -3163,7 +3163,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
|
|
|
3163
3163
|
variant: "secondary",
|
|
3164
3164
|
}, customButton, customPortalId, children, }) => {
|
|
3165
3165
|
const actionMenuRef = react.useRef(null);
|
|
3166
|
-
return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId :
|
|
3166
|
+
return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : undefined, ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton ?? (jsxRuntime.jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
|
|
3167
3167
|
};
|
|
3168
3168
|
|
|
3169
3169
|
const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
|
package/index.esm.js
CHANGED
|
@@ -2588,7 +2588,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
|
|
|
2588
2588
|
* @param {TooltipProps} props - The props for the Tooltip component
|
|
2589
2589
|
* @returns {ReactElement} Tooltip component
|
|
2590
2590
|
*/
|
|
2591
|
-
const Tooltip = ({ children, dataTestId
|
|
2591
|
+
const Tooltip = ({ children, dataTestId, disabled, className, label, placement = "auto", mode = "dark", iconProps, id, }) => {
|
|
2592
2592
|
const [isOpen, setIsOpen] = useState(false);
|
|
2593
2593
|
const arrowRef = useRef(null);
|
|
2594
2594
|
const { refs, floatingStyles, context } = useFloating({
|
|
@@ -2753,7 +2753,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
|
|
|
2753
2753
|
* @returns {ReactElement} Indicator component
|
|
2754
2754
|
*/
|
|
2755
2755
|
const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size, weight, className, ...rest }) => {
|
|
2756
|
-
return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...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 !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` :
|
|
2756
|
+
return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...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 !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
|
|
2757
2757
|
};
|
|
2758
2758
|
|
|
2759
2759
|
const cvaKPI = cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col", "gap-1"], {
|
|
@@ -2814,7 +2814,7 @@ const LoadingContent$1 = () => (jsx("div", { className: "flex h-11 flex-row item
|
|
|
2814
2814
|
*/
|
|
2815
2815
|
const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...rest }) => {
|
|
2816
2816
|
const isSmallVariant = variant === "small";
|
|
2817
|
-
return (jsx(Tooltip, { disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment, { children: [jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPIValueContainer({
|
|
2817
|
+
return (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment, { children: [jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPIValueContainer({
|
|
2818
2818
|
isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
|
|
2819
2819
|
className,
|
|
2820
2820
|
}), children: [jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }));
|
|
@@ -3161,7 +3161,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
|
|
|
3161
3161
|
variant: "secondary",
|
|
3162
3162
|
}, customButton, customPortalId, children, }) => {
|
|
3163
3163
|
const actionMenuRef = useRef(null);
|
|
3164
|
-
return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId :
|
|
3164
|
+
return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : undefined, ref: actionMenuRef, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton ?? (jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
|
|
3165
3165
|
};
|
|
3166
3166
|
|
|
3167
3167
|
const cvaNotice = cvaMerge(["flex", "items-center"]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-components",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.147",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"@trackunit/css-class-variance-utilities": "1.3.121",
|
|
23
23
|
"@trackunit/shared-utils": "1.5.121",
|
|
24
24
|
"@trackunit/ui-icons": "1.3.122",
|
|
25
|
-
"@trackunit/react-table-pagination": "1.3.
|
|
25
|
+
"@trackunit/react-table-pagination": "1.3.122",
|
|
26
26
|
"@trackunit/react-test-setup": "1.0.11"
|
|
27
27
|
},
|
|
28
28
|
"module": "./index.esm.js",
|