@trackunit/react-components 0.1.357 → 0.1.358
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 +2 -2
- package/index.esm.js +2 -2
- package/package.json +1 -1
- package/src/components/Tooltip/Tooltip.d.ts +1 -6
package/index.cjs.js
CHANGED
|
@@ -3476,7 +3476,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
|
|
|
3476
3476
|
* @param {TooltipProps} props - The props for the Tooltip component
|
|
3477
3477
|
* @returns {JSX.Element} Tooltip component
|
|
3478
3478
|
*/
|
|
3479
|
-
const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark",
|
|
3479
|
+
const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", iconProps, }) => {
|
|
3480
3480
|
const [isOpen, setIsOpen] = React__namespace.useState(false);
|
|
3481
3481
|
const arrowRef = React__namespace.useRef(null);
|
|
3482
3482
|
const { refs, floatingStyles, context } = react.useFloating({
|
|
@@ -3491,7 +3491,7 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
|
|
|
3491
3491
|
if (disabled) {
|
|
3492
3492
|
return wrappedChildren;
|
|
3493
3493
|
}
|
|
3494
|
-
return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, Object.assign({ dataTestId: 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, { inverted: mode === "dark", type:
|
|
3494
|
+
return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, Object.assign({ dataTestId: 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, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
|
|
3495
3495
|
};
|
|
3496
3496
|
|
|
3497
3497
|
const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
|
package/index.esm.js
CHANGED
|
@@ -3445,7 +3445,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
|
|
|
3445
3445
|
* @param {TooltipProps} props - The props for the Tooltip component
|
|
3446
3446
|
* @returns {JSX.Element} Tooltip component
|
|
3447
3447
|
*/
|
|
3448
|
-
const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark",
|
|
3448
|
+
const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", iconProps, }) => {
|
|
3449
3449
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
3450
3450
|
const arrowRef = React.useRef(null);
|
|
3451
3451
|
const { refs, floatingStyles, context } = useFloating({
|
|
@@ -3460,7 +3460,7 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
|
|
|
3460
3460
|
if (disabled) {
|
|
3461
3461
|
return wrappedChildren;
|
|
3462
3462
|
}
|
|
3463
|
-
return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsx("div", { children: jsx(Icon, Object.assign({ dataTestId: 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, { inverted: mode === "dark", type:
|
|
3463
|
+
return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsx("div", { children: jsx(Icon, Object.assign({ dataTestId: 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, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
|
|
3464
3464
|
};
|
|
3465
3465
|
|
|
3466
3466
|
const cvaIndicator = cvaMerge(["flex", "items-center"]);
|
package/package.json
CHANGED
|
@@ -2,7 +2,6 @@ import { Placement } from "@floating-ui/react";
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { CommonProps } from "../../common";
|
|
4
4
|
import { IconProps } from "../Icon/Icon";
|
|
5
|
-
import { TextType } from "../Text";
|
|
6
5
|
export type ToolTipVariant = "icon" | "none";
|
|
7
6
|
export type TooltipPlacement = Placement | "auto";
|
|
8
7
|
export interface TooltipProps extends CommonProps {
|
|
@@ -26,10 +25,6 @@ export interface TooltipProps extends CommonProps {
|
|
|
26
25
|
* To select either "light" or "dark" mode.
|
|
27
26
|
*/
|
|
28
27
|
mode?: "light" | "dark";
|
|
29
|
-
/**
|
|
30
|
-
* Type of content.
|
|
31
|
-
*/
|
|
32
|
-
contentTextType?: TextType;
|
|
33
28
|
/**
|
|
34
29
|
* The props for setting the icon on this tip.
|
|
35
30
|
*/
|
|
@@ -47,4 +42,4 @@ export interface TooltipProps extends CommonProps {
|
|
|
47
42
|
* @param {TooltipProps} props - The props for the Tooltip component
|
|
48
43
|
* @returns {JSX.Element} Tooltip component
|
|
49
44
|
*/
|
|
50
|
-
export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode,
|
|
45
|
+
export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode, iconProps, }: TooltipProps) => JSX.Element;
|