@synerise/ds-tooltip 0.15.2 → 0.16.0
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 +19 -0
- package/README.md +5 -3
- package/dist/Tooltip.d.ts +1 -1
- package/dist/Tooltip.js +3 -2
- package/dist/Tooltip.styles.d.ts +1 -0
- package/dist/Tooltip.styles.js +7 -3
- package/dist/Tooltip.types.d.ts +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
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
|
+
# [0.16.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@0.15.3...@synerise/ds-tooltip@0.16.0) (2025-02-18)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **tooltip:** image prop added ([7670e4a](https://github.com/synerise/synerise-design/commit/7670e4af87d8531e4411d2f1e3c430c24af08fa8))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.15.3](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@0.15.2...@synerise/ds-tooltip@0.15.3) (2025-02-17)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @synerise/ds-tooltip
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [0.15.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@0.15.1...@synerise/ds-tooltip@0.15.2) (2025-02-14)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @synerise/ds-tooltip
|
package/README.md
CHANGED
|
@@ -12,13 +12,14 @@ Tooltip UI Component
|
|
|
12
12
|
## API
|
|
13
13
|
|
|
14
14
|
| Property | Description | Type | Default |
|
|
15
|
-
|
|
15
|
+
|-----------------------|--------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------|
|
|
16
16
|
| align | this value will be merged into placement's config, please refer to the settings rc-tooltip | Object | - |
|
|
17
17
|
| arrowPointAtCenter | Whether the arrow is pointed at the center of target, supported after `antd@1.11+` | boolean | `false` |
|
|
18
18
|
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` |
|
|
19
19
|
| button | Settings of button displayed in tooltip | ButtonSettings | - |
|
|
20
20
|
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` |
|
|
21
|
-
| description | tooltip description text |
|
|
21
|
+
| description | tooltip description text | ReactNode | - |
|
|
22
|
+
| image | iamge to be rendered above the description | ReactNode | - |
|
|
22
23
|
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | ()=>React.HTMLElement | () => document.body |
|
|
23
24
|
| icon | icon that can be displayed next to title | React.ReactNode | NotificationsM, orange-500 |
|
|
24
25
|
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | `0.1` |
|
|
@@ -33,11 +34,12 @@ Tooltip UI Component
|
|
|
33
34
|
| tutorialAutoplay | Whether to autoplay tutorial | boolean | `false` |
|
|
34
35
|
| tutorialAutoplaySpeed | speed of autoplay [ms] | number | 5000 |
|
|
35
36
|
| tutorials | steps of tutorial | Tutorials[] | - |
|
|
36
|
-
| type | type of tooltip | `default` / `icon` / `largeSimple` / `largeScrollable` / `tutorial` / `avatar` / `button` / `header-label` / `status`
|
|
37
|
+
| type | type of tooltip | `default` / `icon` / `largeSimple` / `largeScrollable` / `tutorial` / `avatar` / `button` / `header-label` / `status` | `default` |
|
|
37
38
|
| visible | Whether the floating tooltip card is visible or not | boolean | `false` |
|
|
38
39
|
| timeToHideAfterClick | time after which tooltip disappears [ms] (value 0 inactivate this functionality) | number | 0 |
|
|
39
40
|
| render | render prop that allows to render custom component as tooltip | () => React.ReactNode | - |
|
|
40
41
|
|
|
42
|
+
|
|
41
43
|
### ButtonSettings
|
|
42
44
|
|
|
43
45
|
| Property | Description | Type | Default |
|
package/dist/Tooltip.d.ts
CHANGED
|
@@ -2,5 +2,5 @@ import '@synerise/ds-core/dist/js/style';
|
|
|
2
2
|
import './style/index.less';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { TooltipProps } from './Tooltip.types';
|
|
5
|
-
declare const Tooltip: ({ type, icon, title, status, description, tutorials, tutorialAutoplay, tutorialAutoplaySpeed, timeToHideAfterClick, offset, children, button, render, ...props }: TooltipProps) => React.JSX.Element;
|
|
5
|
+
declare const Tooltip: ({ type, icon, title, status, description, tutorials, tutorialAutoplay, tutorialAutoplaySpeed, timeToHideAfterClick, offset, children, button, render, image, ...props }: TooltipProps) => React.JSX.Element;
|
|
6
6
|
export default Tooltip;
|
package/dist/Tooltip.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["type", "icon", "title", "status", "description", "tutorials", "tutorialAutoplay", "tutorialAutoplaySpeed", "timeToHideAfterClick", "offset", "children", "button", "render"];
|
|
1
|
+
var _excluded = ["type", "icon", "title", "status", "description", "tutorials", "tutorialAutoplay", "tutorialAutoplaySpeed", "timeToHideAfterClick", "offset", "children", "button", "render", "image"];
|
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
3
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
4
4
|
import '@synerise/ds-core/dist/js/style';
|
|
@@ -42,6 +42,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
42
42
|
children = _ref.children,
|
|
43
43
|
button = _ref.button,
|
|
44
44
|
render = _ref.render,
|
|
45
|
+
image = _ref.image,
|
|
45
46
|
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
46
47
|
var _useState = useState(false),
|
|
47
48
|
isVisible = _useState[0],
|
|
@@ -82,7 +83,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
82
83
|
tooltipType: type
|
|
83
84
|
}, type && shouldRenderIcon(type, icon), /*#__PURE__*/React.createElement(S.TooltipTitleWrapper, null, type && shouldRenderTitle(type, title))), /*#__PURE__*/React.createElement(S.TooltipDescription, {
|
|
84
85
|
tooltipType: type
|
|
85
|
-
}, type === 'largeScrollable' ? /*#__PURE__*/React.createElement(Scrollbar, {
|
|
86
|
+
}, image && /*#__PURE__*/React.createElement(S.TooltipImage, null, image), type === 'largeScrollable' ? /*#__PURE__*/React.createElement(Scrollbar, {
|
|
86
87
|
absolute: true,
|
|
87
88
|
maxHeight: 90,
|
|
88
89
|
style: {
|
package/dist/Tooltip.styles.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export declare const TooltipContent: import("styled-components").StyledComponent
|
|
|
11
11
|
export declare const TooltipStatus: import("styled-components").StyledComponent<"div", any, Omit<TooltipExtendedProps, "type"> & {
|
|
12
12
|
tooltipType: tooltipTypes;
|
|
13
13
|
}, never>;
|
|
14
|
+
export declare const TooltipImage: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
14
15
|
export declare const TooltipComponent: import("styled-components").StyledComponent<"div", any, Omit<TooltipExtendedProps, "type"> & {
|
|
15
16
|
tooltipType: tooltipTypes;
|
|
16
17
|
}, never>;
|
package/dist/Tooltip.styles.js
CHANGED
|
@@ -3,7 +3,7 @@ import { IconContainer } from '@synerise/ds-icon';
|
|
|
3
3
|
export var TooltipDescription = styled.div.withConfig({
|
|
4
4
|
displayName: "Tooltipstyles__TooltipDescription",
|
|
5
5
|
componentId: "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%;", ";"], function (props) {
|
|
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;gap:8px;", ";"], function (props) {
|
|
7
7
|
return props.tooltipType === 'largeScrollable' && css(["margin-top:6px;margin-right:-16px;"]);
|
|
8
8
|
});
|
|
9
9
|
var titlesWithPadding = ['icon', 'tutorial', 'button', 'header-label'];
|
|
@@ -32,9 +32,13 @@ export var TooltipStatus = styled.div.withConfig({
|
|
|
32
32
|
displayName: "Tooltipstyles__TooltipStatus",
|
|
33
33
|
componentId: "mghjny-5"
|
|
34
34
|
})(["padding-bottom:2px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;"]);
|
|
35
|
+
export var TooltipImage = styled.div.withConfig({
|
|
36
|
+
displayName: "Tooltipstyles__TooltipImage",
|
|
37
|
+
componentId: "mghjny-6"
|
|
38
|
+
})(["display:flex;align-items:center;flex-direction:column;img,video{max-width:100%;}"]);
|
|
35
39
|
export var TooltipComponent = styled.div.withConfig({
|
|
36
40
|
displayName: "Tooltipstyles__TooltipComponent",
|
|
37
|
-
componentId: "mghjny-
|
|
41
|
+
componentId: "mghjny-7"
|
|
38
42
|
})(["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;", "}.ant-carousel{position:relative;width:100%;.slick-track{width:100%;}.slick-dots-bottom{position:relative;bottom:0;height:32px;padding:0 18px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;margin:0;background-color:rgba(56,67,80,0.9);li{width:8px;height:8px;border-radius:50%;background-color:rgba(56,67,80,0.9);margin:0 8px 0 0;display:flex;align-items:center;justify-content:center;button{box-sizing:content-box;background-color:", ";border:2px solid rgba(56,67,80,0.9);height:4px;width:4px;border-radius:50%;opacity:1;}}li.slick-active{button{border:2px solid ", ";background-color:", ";}}}}"], function (props) {
|
|
39
43
|
return props.theme.palette['grey-200'];
|
|
40
44
|
}, TooltipContent, function (props) {
|
|
@@ -70,7 +74,7 @@ export var TooltipComponent = styled.div.withConfig({
|
|
|
70
74
|
});
|
|
71
75
|
export var TutorialItem = styled.div.withConfig({
|
|
72
76
|
displayName: "Tooltipstyles__TutorialItem",
|
|
73
|
-
componentId: "mghjny-
|
|
77
|
+
componentId: "mghjny-8"
|
|
74
78
|
})(["padding:16px;color:", ";"], function (props) {
|
|
75
79
|
return props.theme.palette.white;
|
|
76
80
|
});
|
package/dist/Tooltip.types.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-tooltip",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"description": "Tooltip UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@synerise/ds-button": "^0.23.1",
|
|
38
38
|
"@synerise/ds-icon": "^0.71.1",
|
|
39
|
-
"@synerise/ds-scrollbar": "^0.12.
|
|
39
|
+
"@synerise/ds-scrollbar": "^0.12.4",
|
|
40
40
|
"@synerise/ds-utils": "^0.32.1"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"react": ">=16.9.0 <= 18.3.1",
|
|
46
46
|
"styled-components": "^5.3.3"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "b04de7b0a6e3d2883275c38c38211d3876328706"
|
|
49
49
|
}
|