@synerise/ds-tooltip 0.16.1 → 0.16.2

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/Tooltip.js +21 -48
  3. package/dist/Tooltip.styles.d.ts +6 -6
  4. package/dist/Tooltip.styles.js +13 -15
  5. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@0.16.1...@synerise/ds-tooltip@0.16.2) (2025-03-04)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **tooltip:** refactored css and tooltip types ([76d9e9a](https://github.com/synerise/synerise-design/commit/76d9e9af7813e7390416252ab446b7872b081c64))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.16.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@0.16.0...@synerise/ds-tooltip@0.16.1) (2025-02-27)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-tooltip
package/dist/Tooltip.js CHANGED
@@ -16,12 +16,12 @@ var shouldRenderDescription = function shouldRenderDescription(description, type
16
16
  if (type === 'default' || !description) return null;
17
17
  return description;
18
18
  };
19
- var shouldRenderTitle = function shouldRenderTitle(type, title) {
20
- return type !== 'largeSimple' ? title : null;
21
- };
22
- var shouldRenderStatus = function shouldRenderStatus(status, type) {
23
- if (type === 'status' || status) return status;
24
- return null;
19
+ var shouldRenderIcon = function shouldRenderIcon(tooltipType, tooltipIcon) {
20
+ if (tooltipType !== 'icon') return tooltipIcon;
21
+ return /*#__PURE__*/React.createElement(Icon, {
22
+ component: /*#__PURE__*/React.createElement(NotificationsM, null),
23
+ color: theme.palette['orange-500']
24
+ });
25
25
  };
26
26
  var Tooltip = function Tooltip(_ref) {
27
27
  var _ref$type = _ref.type,
@@ -48,19 +48,12 @@ var Tooltip = function Tooltip(_ref) {
48
48
  isVisible = _useState[0],
49
49
  setIsVisible = _useState[1];
50
50
  var timeoutClickRef = useRef(null);
51
- var shouldRenderIcon = function shouldRenderIcon(tooltipType, tooltipIcon) {
52
- if (tooltipType !== 'icon') return null;
53
- if (tooltipIcon && icon) return icon;
54
- return /*#__PURE__*/React.createElement(Icon, {
55
- component: /*#__PURE__*/React.createElement(NotificationsM, null),
56
- color: theme.palette['orange-500']
57
- });
58
- };
59
51
  var renderButton = useMemo(function () {
52
+ var _ref2 = button || {},
53
+ buttonIcon = _ref2.buttonIcon,
54
+ label = _ref2.label,
55
+ onClick = _ref2.onClick;
60
56
  var buttonMode = function buttonMode() {
61
- // @ts-ignore
62
- var buttonIcon = button.buttonIcon,
63
- label = button.label;
64
57
  if (buttonIcon && label) return 'icon-label';
65
58
  if (buttonIcon) return 'single-icon';
66
59
  return 'label';
@@ -68,38 +61,29 @@ var Tooltip = function Tooltip(_ref) {
68
61
  return button ? /*#__PURE__*/React.createElement(S.TooltipButton, null, /*#__PURE__*/React.createElement(Button, {
69
62
  type: "ghost-white",
70
63
  mode: buttonMode(),
71
- onClick: button == null ? void 0 : button.onClick
72
- }, button == null ? void 0 : button.buttonIcon, button == null ? void 0 : button.label)) : /*#__PURE__*/React.createElement(React.Fragment, null);
64
+ onClick: onClick
65
+ }, buttonIcon, label)) : /*#__PURE__*/React.createElement(React.Fragment, null);
73
66
  }, [button]);
74
67
  var captureClick = function captureClick(event) {
75
68
  event.stopPropagation();
76
69
  };
70
+ var finalDescription = shouldRenderDescription(description, type);
77
71
  var tooltipComponent = /*#__PURE__*/React.createElement(S.TooltipComponent, {
78
72
  onClick: captureClick,
79
73
  tooltipType: type
80
- }, /*#__PURE__*/React.createElement(S.TooltipContent, null, /*#__PURE__*/React.createElement(S.TooltipStatus, {
81
- tooltipType: type
82
- }, type && shouldRenderStatus(status, type)), /*#__PURE__*/React.createElement(S.TooltipTitle, {
74
+ }, /*#__PURE__*/React.createElement(S.TooltipContent, null, status && /*#__PURE__*/React.createElement(S.TooltipStatus, null, status), title && /*#__PURE__*/React.createElement(S.TooltipTitle, {
83
75
  tooltipType: type
84
- }, type && shouldRenderIcon(type, icon), /*#__PURE__*/React.createElement(S.TooltipTitleWrapper, null, type && shouldRenderTitle(type, title))), /*#__PURE__*/React.createElement(S.TooltipDescription, {
76
+ }, shouldRenderIcon(type, icon), /*#__PURE__*/React.createElement(S.TooltipTitleWrapper, null, title)), image && /*#__PURE__*/React.createElement(S.TooltipImage, {
77
+ extraMargin: !!finalDescription
78
+ }, image), finalDescription && /*#__PURE__*/React.createElement(S.TooltipDescription, {
85
79
  tooltipType: type
86
- }, image && /*#__PURE__*/React.createElement(S.TooltipImage, null, image), type === 'largeScrollable' ? /*#__PURE__*/React.createElement(Scrollbar, {
80
+ }, type === 'largeScrollable' ? /*#__PURE__*/React.createElement(Scrollbar, {
87
81
  absolute: true,
88
82
  maxHeight: 90,
89
83
  style: {
90
84
  paddingRight: 16
91
85
  }
92
- }, /*#__PURE__*/React.createElement(React.Fragment, null, shouldRenderDescription(description, type))) : shouldRenderDescription(description, type))), renderButton);
93
- var buttonComponent = /*#__PURE__*/React.createElement(S.TooltipComponent, {
94
- onClick: captureClick,
95
- tooltipType: type
96
- }, /*#__PURE__*/React.createElement(S.TooltipContent, null, /*#__PURE__*/React.createElement(S.TooltipStatus, {
97
- tooltipType: type
98
- }, status), /*#__PURE__*/React.createElement(S.TooltipTitle, {
99
- tooltipType: type
100
- }, /*#__PURE__*/React.createElement(S.TooltipTitleWrapper, null, title)), /*#__PURE__*/React.createElement(S.TooltipDescription, {
101
- tooltipType: type
102
- }, description)), renderButton);
86
+ }, /*#__PURE__*/React.createElement(React.Fragment, null, finalDescription)) : finalDescription)), renderButton);
103
87
  var tutorialComponent = /*#__PURE__*/React.createElement(S.TooltipComponent, {
104
88
  onClick: captureClick,
105
89
  tooltipType: type
@@ -116,17 +100,7 @@ var Tooltip = function Tooltip(_ref) {
116
100
  tooltipType: "tutorial"
117
101
  }, tutorial.description));
118
102
  })));
119
- var component;
120
- switch (type) {
121
- case 'tutorial':
122
- component = tutorialComponent;
123
- break;
124
- case 'button':
125
- component = buttonComponent;
126
- break;
127
- default:
128
- component = tooltipComponent;
129
- }
103
+ var tooltipContent = type === 'tutorial' ? tutorialComponent : tooltipComponent;
130
104
  var overlayClassName = useMemo(function () {
131
105
  return "ds-tooltip-offset-" + offset + " ds-tooltip-type-" + type;
132
106
  }, [offset, type]);
@@ -168,8 +142,7 @@ var Tooltip = function Tooltip(_ref) {
168
142
  }
169
143
  return titleExists ? /*#__PURE__*/React.createElement(AntdTooltip, _extends({
170
144
  overlayClassName: overlayClassName,
171
- autoAdjustOverflow: false,
172
- title: component,
145
+ title: tooltipContent,
173
146
  align: {
174
147
  offset: [0, 0]
175
148
  },
package/dist/Tooltip.styles.d.ts CHANGED
@@ -1,18 +1,18 @@
1
1
  import TooltipExtendedProps, { tooltipTypes } from './Tooltip.types';
2
- export declare const TooltipDescription: import("styled-components").StyledComponent<"div", any, TooltipExtendedProps & {
2
+ export declare const TooltipDescription: import("styled-components").StyledComponent<"div", any, {
3
3
  tooltipType: tooltipTypes;
4
4
  }, never>;
5
- export declare const TooltipTitle: import("styled-components").StyledComponent<"div", any, Omit<TooltipExtendedProps, "type"> & {
5
+ export declare const TooltipTitle: import("styled-components").StyledComponent<"div", any, {
6
6
  tooltipType: tooltipTypes;
7
7
  }, never>;
8
8
  export declare const TooltipTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
9
  export declare const TooltipButton: import("styled-components").StyledComponent<"div", any, {}, never>;
10
10
  export declare const TooltipContent: import("styled-components").StyledComponent<"div", any, {}, never>;
11
- export declare const TooltipStatus: import("styled-components").StyledComponent<"div", any, Omit<TooltipExtendedProps, "type"> & {
12
- tooltipType: tooltipTypes;
11
+ export declare const TooltipStatus: import("styled-components").StyledComponent<"div", any, {}, never>;
12
+ export declare const TooltipImage: import("styled-components").StyledComponent<"div", any, {
13
+ extraMargin: boolean;
13
14
  }, never>;
14
- export declare const TooltipImage: import("styled-components").StyledComponent<"div", any, {}, never>;
15
- export declare const TooltipComponent: import("styled-components").StyledComponent<"div", any, Omit<TooltipExtendedProps, "type"> & {
15
+ export declare const TooltipComponent: import("styled-components").StyledComponent<"div", any, {
16
16
  tooltipType: tooltipTypes;
17
17
  }, never>;
18
18
  export declare const TutorialItem: import("styled-components").StyledComponent<"div", any, TooltipExtendedProps, never>;
package/dist/Tooltip.styles.js CHANGED
@@ -3,23 +3,22 @@ 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%;display:flex;flex-direction:column;gap:8px;", ";"], 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;", ";"], function (props) {
7
7
  return props.tooltipType === 'largeScrollable' && css(["margin-top:6px;margin-right:-16px;"]);
8
8
  });
9
- var titlesWithPadding = ['icon', 'tutorial', 'button', 'header-label'];
10
9
  export var TooltipTitle = styled.div.withConfig({
11
10
  displayName: "Tooltipstyles__TooltipTitle",
12
11
  componentId: "mghjny-1"
13
12
  })(["margin-bottom:", ";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;}"], function (_ref) {
14
13
  var tooltipType = _ref.tooltipType;
15
- return titlesWithPadding.includes(String(tooltipType)) ? '8px' : '0px';
14
+ return tooltipType === 'tutorial' ? '8px' : '0px';
16
15
  }, function (props) {
17
16
  return props.tooltipType === 'default' ? 400 : 500;
18
17
  }, IconContainer);
19
18
  export var TooltipTitleWrapper = styled.div.withConfig({
20
19
  displayName: "Tooltipstyles__TooltipTitleWrapper",
21
20
  componentId: "mghjny-2"
22
- })(["min-width:0;width:fit-content;overflow-wrap:break-word;"]);
21
+ })(["min-width:0;width:max-content;overflow-wrap:break-word;"]);
23
22
  export var TooltipButton = styled.div.withConfig({
24
23
  displayName: "Tooltipstyles__TooltipButton",
25
24
  componentId: "mghjny-3"
@@ -27,7 +26,7 @@ export var TooltipButton = styled.div.withConfig({
27
26
  export var TooltipContent = styled.div.withConfig({
28
27
  displayName: "Tooltipstyles__TooltipContent",
29
28
  componentId: "mghjny-4"
30
- })(["width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;"]);
29
+ })(["width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;"]);
31
30
  export var TooltipStatus = styled.div.withConfig({
32
31
  displayName: "Tooltipstyles__TooltipStatus",
33
32
  componentId: "mghjny-5"
@@ -35,29 +34,28 @@ export var TooltipStatus = styled.div.withConfig({
35
34
  export var TooltipImage = styled.div.withConfig({
36
35
  displayName: "Tooltipstyles__TooltipImage",
37
36
  componentId: "mghjny-6"
38
- })(["display:flex;align-items:center;flex-direction:column;img,video{max-width:100%;}"]);
37
+ })(["display:flex;align-items:center;flex-direction:column;", " img,video{max-width:100%;}"], function (props) {
38
+ return props.extraMargin && 'margin-bottom: 4px;';
39
+ });
39
40
  export var TooltipComponent = styled.div.withConfig({
40
41
  displayName: "Tooltipstyles__TooltipComponent",
41
42
  componentId: "mghjny-7"
42
43
  })(["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) {
43
44
  return props.theme.palette['grey-200'];
44
45
  }, TooltipContent, function (props) {
45
- var defaultPadding = css(["padding:16px;"]);
46
+ var defaultPadding = css(["padding:12px;"]);
46
47
  switch (props.tooltipType) {
47
48
  case 'icon':
48
- return css(["padding:8px 16px 16px;"]);
49
49
  case 'largeSimple':
50
- return defaultPadding;
51
50
  case 'largeScrollable':
52
- return defaultPadding;
53
- case 'tutorial':
54
- return css(["padding:0;"]);
55
51
  case 'avatar':
56
- return css(["padding:8px 16px 16px;text-align:center;align-items:center;"]);
57
52
  case 'button':
58
- return defaultPadding;
59
53
  case 'header-label':
60
- return css(["padding:13px 16px 16px;"]);
54
+ return defaultPadding;
55
+ // unused type (?) TBC
56
+ case 'tutorial':
57
+ return css(["padding:0;"]);
58
+ // unused type (?) TBC
61
59
  case 'status':
62
60
  return css(["padding:6px 25px 10px 21px;text-align:center;align-items:center;"]);
63
61
  case 'default':
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-tooltip",
3
- "version": "0.16.1",
3
+ "version": "0.16.2",
4
4
  "description": "Tooltip UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -34,9 +34,9 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-button": "^0.23.2",
38
- "@synerise/ds-icon": "^0.71.2",
39
- "@synerise/ds-scrollbar": "^0.12.5",
37
+ "@synerise/ds-button": "^0.23.3",
38
+ "@synerise/ds-icon": "^0.72.0",
39
+ "@synerise/ds-scrollbar": "^0.12.6",
40
40
  "@synerise/ds-utils": "^0.32.2"
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": "23054ac8e90293b1a722acdec723b4bfd5abd6c9"
48
+ "gitHead": "c5a647bd7a24a2c9294e781b2b69223e8543859f"
49
49
  }