@synerise/ds-tooltip 1.4.8 → 1.4.10
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/CHANGELOG.md +8 -0
- package/README.md +22 -43
- package/dist/Tooltip.const.d.ts +1 -1
- package/dist/Tooltip.const.js +9 -4
- package/dist/Tooltip.d.ts +2 -2
- package/dist/Tooltip.js +59 -91
- package/dist/Tooltip.styles.d.ts +12 -12
- package/dist/Tooltip.styles.js +32 -37
- package/dist/Tooltip.types.d.ts +2 -2
- package/dist/Tooltip.types.js +1 -1
- package/dist/Tooltip.utils.d.ts +2 -2
- package/dist/Tooltip.utils.js +8 -8
- package/dist/TooltipContent.d.ts +2 -2
- package/dist/TooltipContent.js +35 -37
- package/dist/index.js +4 -2
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/package.json +8 -8
- package/dist/__specs__/Tooltip.spec.d.ts +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.4.10](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@1.4.9...@synerise/ds-tooltip@1.4.10) (2026-03-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-tooltip
|
|
9
|
+
|
|
10
|
+
## [1.4.9](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@1.4.8...@synerise/ds-tooltip@1.4.9) (2026-03-20)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-tooltip
|
|
13
|
+
|
|
6
14
|
## [1.4.8](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@1.4.7...@synerise/ds-tooltip@1.4.8) (2026-03-09)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-tooltip
|
package/README.md
CHANGED
|
@@ -11,46 +11,25 @@ Tooltip UI Component
|
|
|
11
11
|
|
|
12
12
|
## API
|
|
13
13
|
|
|
14
|
-
| Property
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
| title
|
|
33
|
-
| trigger
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
| tutorials | steps of tutorial | Tutorials[] | - |
|
|
37
|
-
| type | type of tooltip | `default` / `icon` / `largeSimple` / `largeScrollable` / `tutorial` / `avatar` / `button` / `header-label` / `status` | `default` |
|
|
38
|
-
| visible | Whether the floating tooltip card is visible or not | boolean | `false` |
|
|
39
|
-
| timeToHideAfterClick | time after which tooltip disappears [ms] (value 0 inactivate this functionality) | number | 0 |
|
|
40
|
-
| render | render prop that allows to render custom component as tooltip | () => React.ReactNode | - |
|
|
41
|
-
| disabled | Determines if tooltip is disabled | boolean | `false` |
|
|
42
|
-
|
|
43
|
-
### ButtonSettings
|
|
44
|
-
|
|
45
|
-
| Property | Description | Type | Default |
|
|
46
|
-
| ---------- | ------------------------------------------- | ------------------------ | ------- |
|
|
47
|
-
| buttonIcon | Icon of button | React.ReactNode | - |
|
|
48
|
-
| label | Label of button | React.ReactNode / string | - |
|
|
49
|
-
| onClick | Callback executed after clicking the button | () => void | - |
|
|
50
|
-
|
|
51
|
-
### Tutorial
|
|
52
|
-
|
|
53
|
-
| Property | Description | Type | Default |
|
|
54
|
-
| ----------- | ---------------------------- | ------------------------ | ------- |
|
|
55
|
-
| title | title of tutorial step | string / React.ReactNode | - |
|
|
56
|
-
| description | description of tutorial step | string / React.ReactNode | - |
|
|
14
|
+
| Property | Description | Type | Default |
|
|
15
|
+
| -------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
|
|
16
|
+
| button | Button to display in tooltip footer | ReactNode | - |
|
|
17
|
+
| description | Tooltip description text. Only rendered when `type` is `largeSimple` or `largeScrollable`. | ReactNode | - |
|
|
18
|
+
| disabled | Determines if tooltip is disabled — renders children directly without a wrapper | boolean | - |
|
|
19
|
+
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | `() => HTMLElement` | `() => document.body` |
|
|
20
|
+
| icon | Icon displayed inline before the title text | ReactNode | - |
|
|
21
|
+
| image | Image/node rendered between title and description | ReactNode | - |
|
|
22
|
+
| offset | Space between trigger and tooltip: `default` = 8 px, `small` = 4 px | `'default'` \| `'small'` | `'default'` |
|
|
23
|
+
| onOpenChange | Callback executed when visibility of the tooltip changes | `(newOpen: boolean) => void` | - |
|
|
24
|
+
| open | Controlled open state | boolean | - |
|
|
25
|
+
| overlayStyle | Inline style applied to the tooltip content wrapper | CSSProperties | - |
|
|
26
|
+
| placement | The position of the tooltip relative to the target | `'top'` \| `'topLeft'` \| `'topCenter'` \| `'topRight'` \| `'bottom'` \| `'bottomLeft'` \| `'bottomCenter'` \| `'bottomRight'` \| `'left'` \| `'leftTop'` \| `'leftBottom'` \| `'right'` \| `'rightTop'` \| `'rightBottom'` | `'top'` |
|
|
27
|
+
| popoverProps | Additional props forwarded to the underlying `<Popover>` (escape hatch) | `Omit<PopoverOptions, 'zIndex' \| 'getPopupContainer'>` | - |
|
|
28
|
+
| render | Custom render prop — when provided, all structured content props are ignored | `() => ReactNode` | - |
|
|
29
|
+
| shortCuts | Keyboard hint(s) rendered as styled key badges beside the title | `ReactNode \| ReactNode[]` | - |
|
|
30
|
+
| status | Content rendered above the title row (e.g. a status badge) | ReactNode | - |
|
|
31
|
+
| timeToHideAfterClick | Time in ms after which tooltip auto-hides when `trigger` includes `'click'`. `0` disables auto-hide. | number | `0` |
|
|
32
|
+
| title | Tooltip title text or node | ReactNode | - |
|
|
33
|
+
| trigger | Tooltip trigger mode | `'hover'` \| `'click'` \| `Array<'hover' \| 'click'>` | `'hover'` |
|
|
34
|
+
| type | Visual variant of the tooltip | `'default'` \| `'largeSimple'` \| `'largeScrollable'` | `'default'` |
|
|
35
|
+
| zIndex | CSS z-index for the floating layer | number | theme `zindex-tooltip` |
|
package/dist/Tooltip.const.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FlipConfig, ShiftConfig } from '@synerise/ds-popover';
|
|
2
2
|
export declare const POPOVER_TRANSITION_DURATION = 150;
|
|
3
3
|
export declare const POPOVER_FLIP_CONFIG: FlipConfig;
|
|
4
4
|
export declare const POPOVER_SHIFT_CONFIG: ShiftConfig;
|
package/dist/Tooltip.const.js
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
const POPOVER_TRANSITION_DURATION = 150;
|
|
2
|
+
const POPOVER_FLIP_CONFIG = {};
|
|
3
|
+
const POPOVER_SHIFT_CONFIG = {
|
|
4
4
|
crossAxis: true
|
|
5
|
-
};
|
|
5
|
+
};
|
|
6
|
+
export {
|
|
7
|
+
POPOVER_FLIP_CONFIG,
|
|
8
|
+
POPOVER_SHIFT_CONFIG,
|
|
9
|
+
POPOVER_TRANSITION_DURATION
|
|
10
|
+
};
|
package/dist/Tooltip.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { TooltipProps } from './Tooltip.types';
|
|
3
3
|
declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLElement>>;
|
|
4
4
|
export default Tooltip;
|
package/dist/Tooltip.js
CHANGED
|
@@ -1,121 +1,89 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import { useTheme } from
|
|
4
|
-
import {
|
|
5
|
-
import { getPopupContainer
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
import { TooltipContent } from
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
var timeoutClickRef = useRef(null);
|
|
41
|
-
var theme = useTheme();
|
|
42
|
-
var floatingPlacement = getPlacement(placement);
|
|
43
|
-
var tooltipContentExists = Boolean(description || title || icon || typeof render === 'function');
|
|
44
|
-
useEffect(function () {
|
|
45
|
-
return function () {
|
|
1
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useState, useRef, useEffect, useMemo } from "react";
|
|
3
|
+
import { useTheme } from "@synerise/ds-core";
|
|
4
|
+
import { getPlacement, Popover, PopoverTrigger, PopoverContent } from "@synerise/ds-popover";
|
|
5
|
+
import { getPopupContainer } from "@synerise/ds-utils";
|
|
6
|
+
import { POPOVER_SHIFT_CONFIG, POPOVER_FLIP_CONFIG, POPOVER_TRANSITION_DURATION } from "./Tooltip.const.js";
|
|
7
|
+
import { TooltipWrapper } from "./Tooltip.styles.js";
|
|
8
|
+
import { getTransitionConfig, getOffsetConfig } from "./Tooltip.utils.js";
|
|
9
|
+
import { TooltipContent } from "./TooltipContent.js";
|
|
10
|
+
const Tooltip = forwardRef(({
|
|
11
|
+
type = "default",
|
|
12
|
+
icon,
|
|
13
|
+
title,
|
|
14
|
+
shortCuts,
|
|
15
|
+
status,
|
|
16
|
+
description,
|
|
17
|
+
timeToHideAfterClick = 0,
|
|
18
|
+
offset = "default",
|
|
19
|
+
children,
|
|
20
|
+
button,
|
|
21
|
+
render,
|
|
22
|
+
image,
|
|
23
|
+
disabled,
|
|
24
|
+
placement = "top",
|
|
25
|
+
trigger = "hover",
|
|
26
|
+
open,
|
|
27
|
+
zIndex,
|
|
28
|
+
onOpenChange,
|
|
29
|
+
popoverProps,
|
|
30
|
+
getPopupContainer: getPopupContainer$1,
|
|
31
|
+
overlayStyle
|
|
32
|
+
}, ref) => {
|
|
33
|
+
const [isOpen, setIsOpen] = useState(open || false);
|
|
34
|
+
const timeoutClickRef = useRef(null);
|
|
35
|
+
const theme = useTheme();
|
|
36
|
+
const floatingPlacement = getPlacement(placement);
|
|
37
|
+
const tooltipContentExists = Boolean(description || title || icon || typeof render === "function");
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
return () => {
|
|
46
40
|
timeoutClickRef.current && clearTimeout(timeoutClickRef.current);
|
|
47
41
|
};
|
|
48
42
|
}, []);
|
|
49
|
-
useEffect(
|
|
43
|
+
useEffect(() => {
|
|
50
44
|
setIsOpen(!!open);
|
|
51
45
|
}, [open]);
|
|
52
|
-
useEffect(
|
|
46
|
+
useEffect(() => {
|
|
53
47
|
if (!tooltipContentExists) {
|
|
54
48
|
setIsOpen(false);
|
|
55
49
|
}
|
|
56
50
|
}, [tooltipContentExists]);
|
|
57
|
-
|
|
51
|
+
const handleOnClickHideDelay = (visible) => {
|
|
58
52
|
if (!visible) {
|
|
59
53
|
timeoutClickRef.current && clearTimeout(timeoutClickRef.current);
|
|
60
54
|
setIsOpen(false);
|
|
61
|
-
onOpenChange
|
|
55
|
+
onOpenChange?.(false);
|
|
62
56
|
} else {
|
|
63
57
|
setIsOpen(true);
|
|
64
|
-
timeoutClickRef.current = setTimeout(
|
|
65
|
-
onOpenChange
|
|
58
|
+
timeoutClickRef.current = setTimeout(() => {
|
|
59
|
+
onOpenChange?.(false);
|
|
66
60
|
setIsOpen(false);
|
|
67
61
|
}, timeToHideAfterClick);
|
|
68
62
|
}
|
|
69
63
|
};
|
|
70
|
-
|
|
71
|
-
if (trigger ===
|
|
64
|
+
const handleOpenChange = (newOpen) => {
|
|
65
|
+
if (trigger === "click" && timeToHideAfterClick) {
|
|
72
66
|
handleOnClickHideDelay(newOpen);
|
|
73
67
|
} else {
|
|
74
68
|
setIsOpen(newOpen);
|
|
75
|
-
onOpenChange
|
|
69
|
+
onOpenChange?.(newOpen);
|
|
76
70
|
}
|
|
77
71
|
};
|
|
78
|
-
|
|
79
|
-
return render ?
|
|
80
|
-
style: overlayStyle
|
|
81
|
-
}, render()) : /*#__PURE__*/React.createElement(TooltipContent, {
|
|
82
|
-
title: title,
|
|
83
|
-
description: description,
|
|
84
|
-
icon: icon,
|
|
85
|
-
button: button,
|
|
86
|
-
shortCuts: shortCuts,
|
|
87
|
-
type: type,
|
|
88
|
-
image: image,
|
|
89
|
-
status: status,
|
|
90
|
-
overlayStyle: overlayStyle
|
|
91
|
-
});
|
|
72
|
+
const tooltipContent = useMemo(() => {
|
|
73
|
+
return render ? /* @__PURE__ */ jsx(TooltipWrapper, { style: overlayStyle, children: render() }) : /* @__PURE__ */ jsx(TooltipContent, { title, description, icon, button, shortCuts, type, image, status, overlayStyle });
|
|
92
74
|
}, [button, description, icon, image, render, shortCuts, status, overlayStyle, title, type]);
|
|
93
|
-
|
|
94
|
-
|
|
75
|
+
const isTriggeredByClick = Array.isArray(trigger) ? trigger.includes("click") : trigger === "click";
|
|
76
|
+
const handleTriggerClick = () => {
|
|
95
77
|
isTriggeredByClick && handleOpenChange(!isOpen);
|
|
96
78
|
};
|
|
97
79
|
if (!tooltipContentExists || disabled) {
|
|
98
80
|
return children;
|
|
99
81
|
}
|
|
100
|
-
return
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
onOpenChange: handleOpenChange,
|
|
105
|
-
open: isOpen,
|
|
106
|
-
autoUpdate: true,
|
|
107
|
-
offsetConfig: getOffsetConfig(offset),
|
|
108
|
-
transitionDuration: POPOVER_TRANSITION_DURATION,
|
|
109
|
-
flipConfig: POPOVER_FLIP_CONFIG,
|
|
110
|
-
shiftConfig: POPOVER_SHIFT_CONFIG,
|
|
111
|
-
getTransitionConfig: getTransitionConfig,
|
|
112
|
-
getPopupContainer: getPopupContainer || defaultGetPopupContainer,
|
|
113
|
-
testId: "tooltip",
|
|
114
|
-
zIndex: zIndex || parseInt(theme.variables['zindex-tooltip'])
|
|
115
|
-
}, popoverProps), /*#__PURE__*/React.createElement(PopoverTrigger, {
|
|
116
|
-
ref: ref,
|
|
117
|
-
asChild: true,
|
|
118
|
-
onClick: handleTriggerClick
|
|
119
|
-
}, children), /*#__PURE__*/React.createElement(PopoverContent, null, tooltipContent)));
|
|
82
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Popover, { placement: floatingPlacement, trigger, modal: false, onOpenChange: handleOpenChange, open: isOpen, autoUpdate: true, offsetConfig: getOffsetConfig(offset), transitionDuration: POPOVER_TRANSITION_DURATION, flipConfig: POPOVER_FLIP_CONFIG, shiftConfig: POPOVER_SHIFT_CONFIG, getTransitionConfig, getPopupContainer: getPopupContainer$1 || getPopupContainer, testId: "tooltip", zIndex: zIndex || parseInt(theme.variables["zindex-tooltip"]), ...popoverProps, children: [
|
|
83
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { ref, asChild: true, onClick: handleTriggerClick, children }),
|
|
84
|
+
/* @__PURE__ */ jsx(PopoverContent, { children: tooltipContent })
|
|
85
|
+
] }) });
|
|
120
86
|
});
|
|
121
|
-
export
|
|
87
|
+
export {
|
|
88
|
+
Tooltip as default
|
|
89
|
+
};
|
package/dist/Tooltip.styles.d.ts
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import
|
|
2
|
-
export declare const TooltipDescription: import(
|
|
1
|
+
import { TooltipTypes } from './Tooltip.types';
|
|
2
|
+
export declare const TooltipDescription: import('styled-components').StyledComponent<"div", any, {
|
|
3
3
|
tooltipType: TooltipTypes;
|
|
4
4
|
}, never>;
|
|
5
|
-
export declare const TooltipTitle: import(
|
|
5
|
+
export declare const TooltipTitle: import('styled-components').StyledComponent<"div", any, {
|
|
6
6
|
tooltipType: TooltipTypes;
|
|
7
7
|
}, never>;
|
|
8
|
-
export declare const TooltipTitleWrapper: import(
|
|
9
|
-
export declare const TooltipHint: import(
|
|
10
|
-
export declare const TooltipKey: import(
|
|
11
|
-
export declare const TooltipButton: import(
|
|
12
|
-
export declare const TooltipContent: import(
|
|
13
|
-
export declare const TooltipStatus: import(
|
|
14
|
-
export declare const TooltipImage: import(
|
|
8
|
+
export declare const TooltipTitleWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
9
|
+
export declare const TooltipHint: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
10
|
+
export declare const TooltipKey: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
11
|
+
export declare const TooltipButton: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
12
|
+
export declare const TooltipContent: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
13
|
+
export declare const TooltipStatus: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
14
|
+
export declare const TooltipImage: import('styled-components').StyledComponent<"div", any, {
|
|
15
15
|
extraMargin: boolean;
|
|
16
16
|
}, never>;
|
|
17
|
-
export declare const TooltipWrapper: import(
|
|
18
|
-
export declare const TooltipComponent: import(
|
|
17
|
+
export declare const TooltipWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
18
|
+
export declare const TooltipComponent: import('styled-components').StyledComponent<"div", any, {
|
|
19
19
|
tooltipType: TooltipTypes;
|
|
20
20
|
}, never>;
|
package/dist/Tooltip.styles.js
CHANGED
|
@@ -1,64 +1,59 @@
|
|
|
1
|
-
import styled, { css } from
|
|
2
|
-
import { IconContainer } from
|
|
3
|
-
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
|
+
import { IconContainer } from "@synerise/ds-icon";
|
|
3
|
+
const TooltipDescription = /* @__PURE__ */ styled.div.withConfig({
|
|
4
4
|
displayName: "Tooltipstyles__TooltipDescription",
|
|
5
5
|
componentId: "sc-mghjny-0"
|
|
6
|
-
})(["font-size:13px;line-height:1.38;font-weight:normal;text-align:inherit;overflow-wrap:break-word;min-width:0;max-width:100%;display:flex;flex-direction:column;", ";"],
|
|
7
|
-
|
|
8
|
-
});
|
|
9
|
-
export var TooltipTitle = styled.div.withConfig({
|
|
6
|
+
})(["font-size:13px;line-height:1.38;font-weight:normal;text-align:inherit;overflow-wrap:break-word;min-width:0;max-width:100%;display:flex;flex-direction:column;", ";"], (props) => props.tooltipType === "largeScrollable" && css(["margin-top:6px;margin-right:-16px;"]));
|
|
7
|
+
const TooltipTitle = /* @__PURE__ */ styled.div.withConfig({
|
|
10
8
|
displayName: "Tooltipstyles__TooltipTitle",
|
|
11
9
|
componentId: "sc-mghjny-1"
|
|
12
|
-
})(["font-size:13px;line-height:1.38;font-weight:", ";display:flex;width:100%;align-items:center;justify-content:flex-start;text-align:inherit;", "{align-self:flex-start;}"],
|
|
13
|
-
|
|
14
|
-
}, IconContainer);
|
|
15
|
-
export var TooltipTitleWrapper = styled.div.withConfig({
|
|
10
|
+
})(["font-size:13px;line-height:1.38;font-weight:", ";display:flex;width:100%;align-items:center;justify-content:flex-start;text-align:inherit;", "{align-self:flex-start;}"], (props) => props.tooltipType === "default" ? 400 : 500, IconContainer);
|
|
11
|
+
const TooltipTitleWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
16
12
|
displayName: "Tooltipstyles__TooltipTitleWrapper",
|
|
17
13
|
componentId: "sc-mghjny-2"
|
|
18
14
|
})(["min-width:0;width:max-content;overflow-wrap:break-word;"]);
|
|
19
|
-
|
|
15
|
+
const TooltipHint = /* @__PURE__ */ styled.div.withConfig({
|
|
20
16
|
displayName: "Tooltipstyles__TooltipHint",
|
|
21
17
|
componentId: "sc-mghjny-3"
|
|
22
18
|
})(["margin-left:8px;margin-right:-4px;display:flex;gap:4px;"]);
|
|
23
|
-
|
|
19
|
+
const TooltipKey = /* @__PURE__ */ styled.div.withConfig({
|
|
24
20
|
displayName: "Tooltipstyles__TooltipKey",
|
|
25
21
|
componentId: "sc-mghjny-4"
|
|
26
|
-
})(["display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;background:", ";border-bottom:1px solid ", ";box-shadow:0px 1px 8px rgba(35,41,54,0.5);border-radius:3px;"],
|
|
27
|
-
|
|
28
|
-
}, function (props) {
|
|
29
|
-
return props.theme.palette['grey-500'];
|
|
30
|
-
});
|
|
31
|
-
export var TooltipButton = styled.div.withConfig({
|
|
22
|
+
})(["display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;background:", ";border-bottom:1px solid ", ";box-shadow:0px 1px 8px rgba(35,41,54,0.5);border-radius:3px;"], (props) => props.theme.palette["grey-700"], (props) => props.theme.palette["grey-500"]);
|
|
23
|
+
const TooltipButton = /* @__PURE__ */ styled.div.withConfig({
|
|
32
24
|
displayName: "Tooltipstyles__TooltipButton",
|
|
33
25
|
componentId: "sc-mghjny-5"
|
|
34
26
|
})(["width:100%;padding:8px;background-color:rgba(56,67,80,0.9);display:flex;flex-direction:row;align-items:center;justify-content:flex-end;"]);
|
|
35
|
-
|
|
27
|
+
const TooltipContent = /* @__PURE__ */ styled.div.withConfig({
|
|
36
28
|
displayName: "Tooltipstyles__TooltipContent",
|
|
37
29
|
componentId: "sc-mghjny-6"
|
|
38
30
|
})(["width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;"]);
|
|
39
|
-
|
|
31
|
+
const TooltipStatus = /* @__PURE__ */ styled.div.withConfig({
|
|
40
32
|
displayName: "Tooltipstyles__TooltipStatus",
|
|
41
33
|
componentId: "sc-mghjny-7"
|
|
42
34
|
})(["padding-bottom:2px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;"]);
|
|
43
|
-
|
|
35
|
+
const TooltipImage = /* @__PURE__ */ styled.div.withConfig({
|
|
44
36
|
displayName: "Tooltipstyles__TooltipImage",
|
|
45
37
|
componentId: "sc-mghjny-8"
|
|
46
|
-
})(["display:flex;align-items:center;flex-direction:column;", " img,video{max-width:100%;}"],
|
|
47
|
-
|
|
48
|
-
});
|
|
49
|
-
export var TooltipWrapper = styled.div.withConfig({
|
|
38
|
+
})(["display:flex;align-items:center;flex-direction:column;", " img,video{max-width:100%;}"], (props) => props.extraMargin && "margin-bottom: 4px;");
|
|
39
|
+
const TooltipWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
50
40
|
displayName: "Tooltipstyles__TooltipWrapper",
|
|
51
41
|
componentId: "sc-mghjny-9"
|
|
52
|
-
})(["box-shadow:", ";"],
|
|
53
|
-
|
|
54
|
-
});
|
|
55
|
-
export var TooltipComponent = styled(TooltipWrapper).withConfig({
|
|
42
|
+
})(["box-shadow:", ";"], (props) => props.theme.variables["box-shadow-2"]);
|
|
43
|
+
const TooltipComponent = /* @__PURE__ */ styled(TooltipWrapper).withConfig({
|
|
56
44
|
displayName: "Tooltipstyles__TooltipComponent",
|
|
57
45
|
componentId: "sc-mghjny-10"
|
|
58
|
-
})(["font-size:11px;font-weight:500;min-height:24px;text-align:center;max-width:", ";width:max-content;background-color:rgba(56,67,80,0.9);min-height:24px;width:100%;border-radius:3px;color:", ";overflow:hidden;text-align:left;", "{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:", ";}"],
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
46
|
+
})(["font-size:11px;font-weight:500;min-height:24px;text-align:center;max-width:", ";width:max-content;background-color:rgba(56,67,80,0.9);min-height:24px;width:100%;border-radius:3px;color:", ";overflow:hidden;text-align:left;", "{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:", ";}"], (props) => props.tooltipType === "largeScrollable" ? "400px" : "250px", (props) => props.theme.palette["grey-200"], TooltipContent, (props) => props.tooltipType === "default" ? "3px 8px" : "12px");
|
|
47
|
+
export {
|
|
48
|
+
TooltipButton,
|
|
49
|
+
TooltipComponent,
|
|
50
|
+
TooltipContent,
|
|
51
|
+
TooltipDescription,
|
|
52
|
+
TooltipHint,
|
|
53
|
+
TooltipImage,
|
|
54
|
+
TooltipKey,
|
|
55
|
+
TooltipStatus,
|
|
56
|
+
TooltipTitle,
|
|
57
|
+
TooltipTitleWrapper,
|
|
58
|
+
TooltipWrapper
|
|
59
|
+
};
|
package/dist/Tooltip.types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
import { LegacyTooltipPlacement, PopoverOptions, PopoverTriggerType } from '@synerise/ds-popover';
|
|
3
3
|
export type TooltipContentProps = Pick<TooltipProps, 'title' | 'description' | 'image' | 'icon' | 'shortCuts' | 'button' | 'status' | 'overlayStyle'> & Required<Pick<TooltipProps, 'type'>>;
|
|
4
4
|
export type TooltipTypes = 'default' | 'largeSimple' | 'largeScrollable';
|
|
5
5
|
export type TooltipProps = {
|
package/dist/Tooltip.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
package/dist/Tooltip.utils.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { TooltipProps } from 'Tooltip.types';
|
|
2
|
+
import { OffsetConfig } from '@synerise/ds-popover';
|
|
3
3
|
export declare const getTransitionConfig: () => {
|
|
4
4
|
open: {
|
|
5
5
|
opacity: number;
|
package/dist/Tooltip.utils.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export var getTransitionConfig = function getTransitionConfig() {
|
|
1
|
+
const getTransitionConfig = () => {
|
|
4
2
|
return {
|
|
5
3
|
open: {
|
|
6
4
|
opacity: 1
|
|
@@ -10,8 +8,10 @@ export var getTransitionConfig = function getTransitionConfig() {
|
|
|
10
8
|
}
|
|
11
9
|
};
|
|
12
10
|
};
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
11
|
+
const getOffsetConfig = (offset) => ({
|
|
12
|
+
mainAxis: offset === "small" ? 4 : 8
|
|
13
|
+
});
|
|
14
|
+
export {
|
|
15
|
+
getOffsetConfig,
|
|
16
|
+
getTransitionConfig
|
|
17
|
+
};
|
package/dist/TooltipContent.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { TooltipContentProps } from './Tooltip.types';
|
|
3
3
|
export declare const TooltipContent: ({ type, title, button, description, shortCuts, icon, status, image, overlayStyle, }: TooltipContentProps) => React.JSX.Element;
|
package/dist/TooltipContent.js
CHANGED
|
@@ -1,39 +1,37 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Scrollbar from
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import Scrollbar from "@synerise/ds-scrollbar";
|
|
3
|
+
import { TooltipComponent, TooltipContent as TooltipContent$1, TooltipStatus, TooltipTitle, TooltipTitleWrapper, TooltipHint, TooltipKey, TooltipImage, TooltipDescription, TooltipButton } from "./Tooltip.styles.js";
|
|
4
|
+
const TooltipContent = ({
|
|
5
|
+
type,
|
|
6
|
+
title,
|
|
7
|
+
button,
|
|
8
|
+
description,
|
|
9
|
+
shortCuts,
|
|
10
|
+
icon,
|
|
11
|
+
status,
|
|
12
|
+
image,
|
|
13
|
+
overlayStyle
|
|
14
|
+
}) => {
|
|
15
|
+
const captureClick = (event) => {
|
|
15
16
|
event.stopPropagation();
|
|
16
17
|
};
|
|
17
|
-
|
|
18
|
-
return
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
}, /*#__PURE__*/React.createElement(React.Fragment, null, shouldRenderDescription)) : shouldRenderDescription)), button && /*#__PURE__*/React.createElement(S.TooltipButton, null, button));
|
|
39
|
-
};
|
|
18
|
+
const shouldRenderDescription = type !== "default" && description;
|
|
19
|
+
return /* @__PURE__ */ jsxs(TooltipComponent, { onClick: captureClick, tooltipType: type, style: overlayStyle, children: [
|
|
20
|
+
/* @__PURE__ */ jsxs(TooltipContent$1, { children: [
|
|
21
|
+
status && /* @__PURE__ */ jsx(TooltipStatus, { children: status }),
|
|
22
|
+
title && /* @__PURE__ */ jsxs(TooltipTitle, { tooltipType: type, children: [
|
|
23
|
+
icon,
|
|
24
|
+
/* @__PURE__ */ jsx(TooltipTitleWrapper, { children: title }),
|
|
25
|
+
shortCuts && /* @__PURE__ */ jsx(TooltipHint, { children: Array.isArray(shortCuts) ? shortCuts.map((hint, index) => /* @__PURE__ */ jsx(TooltipKey, { children: hint }, `key-${index}`)) : /* @__PURE__ */ jsx(TooltipKey, { children: shortCuts }) })
|
|
26
|
+
] }),
|
|
27
|
+
image && /* @__PURE__ */ jsx(TooltipImage, { extraMargin: !!shouldRenderDescription, children: image }),
|
|
28
|
+
shouldRenderDescription && /* @__PURE__ */ jsx(TooltipDescription, { tooltipType: type, children: type === "largeScrollable" ? /* @__PURE__ */ jsx(Scrollbar, { absolute: true, maxHeight: 90, style: {
|
|
29
|
+
paddingRight: 16
|
|
30
|
+
}, children: /* @__PURE__ */ jsx(Fragment, { children: shouldRenderDescription }) }) : shouldRenderDescription })
|
|
31
|
+
] }),
|
|
32
|
+
button && /* @__PURE__ */ jsx(TooltipButton, { children: button })
|
|
33
|
+
] });
|
|
34
|
+
};
|
|
35
|
+
export {
|
|
36
|
+
TooltipContent
|
|
37
|
+
};
|
package/dist/index.js
CHANGED
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-tooltip",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.10",
|
|
4
4
|
"description": "Tooltip UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
|
|
25
25
|
"prepublish": "pnpm run build",
|
|
@@ -36,10 +36,10 @@
|
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@floating-ui/react": "^0.27.16",
|
|
39
|
-
"@synerise/ds-icon": "^1.
|
|
40
|
-
"@synerise/ds-popover": "^1.5.
|
|
41
|
-
"@synerise/ds-scrollbar": "^1.2.
|
|
42
|
-
"@synerise/ds-utils": "^1.
|
|
39
|
+
"@synerise/ds-icon": "^1.15.1",
|
|
40
|
+
"@synerise/ds-popover": "^1.5.3",
|
|
41
|
+
"@synerise/ds-scrollbar": "^1.2.17",
|
|
42
|
+
"@synerise/ds-utils": "^1.7.1"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@synerise/ds-core": "*",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@testing-library/user-event": "^14.6.1"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
|
|
53
53
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|