glints-aries 4.0.284 → 4.0.286

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 (7) hide show
  1. package/es/@next/Tooltip/Tooltip.d.ts +7 -1
  2. package/es/@next/Tooltip/Tooltip.js +45 -7
  3. package/es/@next/Tooltip/TooltipStyle.js +1 -1
  4. package/lib/@next/Tooltip/Tooltip.d.ts +7 -1
  5. package/lib/@next/Tooltip/Tooltip.js +45 -7
  6. package/lib/@next/Tooltip/TooltipStyle.js +1 -1
  7. package/package.json +1 -1
package/es/@next/Tooltip/Tooltip.d.ts CHANGED
@@ -6,6 +6,12 @@ export declare type TooltipProps = {
6
6
  children: React.ReactNode;
7
7
  content: React.ReactNode;
8
8
  zIndex?: number;
9
+ /** if true, tooltip will be shown on click instead of hover */
10
+ clickable?: boolean;
11
+ /** how long tooltip will still be shown after clicked or when not hovered anymore */
12
+ timeout?: number;
13
+ /** if clickable it true, onClick will be called when tooltip is clicked */
14
+ onClick?: () => void;
9
15
  };
10
- export declare const Tooltip: ({ children, content, preferredPosition, zIndex, }: TooltipProps) => JSX.Element;
16
+ export declare const Tooltip: ({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, }: TooltipProps) => JSX.Element;
11
17
  export {};
package/es/@next/Tooltip/Tooltip.js CHANGED
@@ -53,7 +53,12 @@ export var Tooltip = function Tooltip(_ref) {
53
53
  content = _ref.content,
54
54
  _ref$preferredPositio = _ref.preferredPosition,
55
55
  preferredPosition = _ref$preferredPositio === void 0 ? defaultPosition : _ref$preferredPositio,
56
- zIndex = _ref.zIndex;
56
+ zIndex = _ref.zIndex,
57
+ _ref$clickable = _ref.clickable,
58
+ clickable = _ref$clickable === void 0 ? false : _ref$clickable,
59
+ _ref$timeout = _ref.timeout,
60
+ timeout = _ref$timeout === void 0 ? 0 : _ref$timeout,
61
+ onClick = _ref.onClick;
57
62
  var tooltipRef = useRef(null);
58
63
  var elRef = useRef(null);
59
64
  var tooltipPositionsHandlerRef = useRef(null);
@@ -112,16 +117,49 @@ export var Tooltip = function Tooltip(_ref) {
112
117
  as: "div",
113
118
  variant: "subtitle2"
114
119
  }, content) : content;
120
+ var handleMouseEnter = function handleMouseEnter() {
121
+ if (!clickable) setIsActive(true);
122
+ };
123
+ var handleMouseLeave = function handleMouseLeave() {
124
+ if (!clickable) {
125
+ setIsActive(false);
126
+ handleAnimation();
127
+ }
128
+ };
129
+ var handleClick = function handleClick() {
130
+ if (clickable) {
131
+ onClick();
132
+ handleAnimation();
133
+ }
134
+ };
135
+ var timeoutRef = useRef(null);
136
+ var _useState4 = useState(false),
137
+ animate = _useState4[0],
138
+ setAnimate = _useState4[1];
139
+ var handleAnimation = function handleAnimation() {
140
+ // if you click during the tooltip's lifespan, it should reset the timeout
141
+ if (timeoutRef.current) {
142
+ clearTimeout(timeoutRef.current);
143
+ timeoutRef.current = null;
144
+ setAnimate(false);
145
+ }
146
+ setIsActive(true);
147
+ timeoutRef.current = setTimeout(function () {
148
+ setAnimate(true);
149
+ timeoutRef.current = setTimeout(function () {
150
+ setIsActive(false);
151
+ setAnimate(false);
152
+ }, 370); // animation is 400ms, make this slightly lower to prevent visual glitch
153
+ }, timeout);
154
+ };
115
155
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTooltipContainer, {
116
156
  ref: elRef,
117
- onMouseEnter: function onMouseEnter() {
118
- return setIsActive(true);
119
- },
120
- onMouseLeave: function onMouseLeave() {
121
- return setIsActive(false);
122
- }
157
+ onMouseEnter: handleMouseEnter,
158
+ onMouseLeave: handleMouseLeave,
159
+ onClick: handleClick
123
160
  }, children), isActive && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledTooltip, {
124
161
  "data-position": position,
162
+ className: animate ? 'closed-animation' : '',
125
163
  ref: tooltipRef,
126
164
  zIndex: zIndex,
127
165
  style: {
package/es/@next/Tooltip/TooltipStyle.js CHANGED
@@ -15,7 +15,7 @@ export var StyledTooltipContainer = styled.div.withConfig({
15
15
  export var StyledTooltip = styled.div.withConfig({
16
16
  displayName: "TooltipStyle__StyledTooltip",
17
17
  componentId: "sc-37e5z7-1"
18
- })(["position:fixed;text-align:left;height:fit-content;width:fit-content;max-width:320px;border-radius:", ";gap:10px;left:50%;transform:translateX(-50%);padding:", " ", ";color:", ";background:", ";overflow-wrap:break-word;line-height:1;z-index:", ";&[data-position='top-left'],&[data-position='bottom-left']{transform:translateX( calc(100% * -1 + ", " + ", ") );}&[data-position='top-right'],&[data-position='bottom-right']{transform:translateX(calc((", " + ", ") * -1));}&[data-position='right-middle']{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'],&[data-position='right-bottom']{transform:translateY(calc((", " + ", ") * -1));}&[data-position='left-top'],&[data-position='right-top']{transform:translateY( calc(100% * -1 + (", " + ", ")) );}&[data-position='bottom-center'],&[data-position='bottom-left'],&[data-position='bottom-right']{top:calc((100% + ", "));}&[data-position='left-middle']{transform:translateX(0) translateY(-50%);}&[data-position='top-center'] .arrow,&[data-position='top-left'] .arrow,&[data-position='top-right'] .arrow{top:100%;border-top-color:", ";}&[data-position='top-left'] .arrow,&[data-position='bottom-left'] .arrow{left:calc(100% - ", " - ", ");}&[data-position='top-right'] .arrow,&[data-position='bottom-right'] .arrow{left:calc(", " + ", ");}&[data-position='right-middle'] .arrow,&[data-position='right-top'] .arrow,&[data-position='right-bottom'] .arrow{top:50%;left:calc(", " * -1);border-right-color:", ";}&[data-position='right-middle'] .arrow{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'] .arrow,&[data-position='right-bottom'] .arrow{top:", ";}&[data-position='bottom-center'] .arrow,&[data-position='bottom-left'] .arrow,&[data-position='bottom-right'] .arrow{bottom:100%;border-bottom-color:", ";}&[data-position='left-middle'] .arrow,&[data-position='left-top'] .arrow,&[data-position='left-bottom'] .arrow{left:auto;right:calc(", " * -2);border-left-color:", ";}&[data-position='left-middle'] .arrow{top:50%;transform:translateX(0) translateY(-50%);}&[data-position='left-top'] .arrow,&[data-position='right-top'] .arrow{top:unset;bottom:", ";}@media (max-width:", "){min-width:69px;}"], borderRadius2, space8, space12, Neutral.B100, background, function (props) {
18
+ })(["position:fixed;text-align:left;height:fit-content;width:fit-content;max-width:320px;border-radius:", ";gap:10px;left:50%;transform:translateX(-50%);padding:", " ", ";color:", ";background:", ";overflow-wrap:break-word;line-height:1;z-index:", ";&[data-position='top-left'],&[data-position='bottom-left']{transform:translateX( calc(100% * -1 + ", " + ", ") );}&[data-position='top-right'],&[data-position='bottom-right']{transform:translateX(calc((", " + ", ") * -1));}&[data-position='right-middle']{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'],&[data-position='right-bottom']{transform:translateY(calc((", " + ", ") * -1));}&[data-position='left-top'],&[data-position='right-top']{transform:translateY( calc(100% * -1 + (", " + ", ")) );}&[data-position='bottom-center'],&[data-position='bottom-left'],&[data-position='bottom-right']{top:calc((100% + ", "));}&[data-position='left-middle']{transform:translateX(0) translateY(-50%);}&[data-position='top-center'] .arrow,&[data-position='top-left'] .arrow,&[data-position='top-right'] .arrow{top:100%;border-top-color:", ";}&[data-position='top-left'] .arrow,&[data-position='bottom-left'] .arrow{left:calc(100% - ", " - ", ");}&[data-position='top-right'] .arrow,&[data-position='bottom-right'] .arrow{left:calc(", " + ", ");}&[data-position='right-middle'] .arrow,&[data-position='right-top'] .arrow,&[data-position='right-bottom'] .arrow{top:50%;left:calc(", " * -1);border-right-color:", ";}&[data-position='right-middle'] .arrow{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'] .arrow,&[data-position='right-bottom'] .arrow{top:", ";}&[data-position='bottom-center'] .arrow,&[data-position='bottom-left'] .arrow,&[data-position='bottom-right'] .arrow{bottom:100%;border-bottom-color:", ";}&[data-position='left-middle'] .arrow,&[data-position='left-top'] .arrow,&[data-position='left-bottom'] .arrow{left:auto;right:calc(", " * -2);border-left-color:", ";}&[data-position='left-middle'] .arrow{top:50%;transform:translateX(0) translateY(-50%);}&[data-position='left-top'] .arrow,&[data-position='right-top'] .arrow{top:unset;bottom:", ";}animation:fade-in-tooltip 400ms ease-in forwards;&.closed-animation{animation:fade-out-tooltip 400ms ease-out forwards;}animation-fill-mode:forwards;@keyframes fade-in-tooltip{0%{opacity:0;}100%{opacity:1;}}@keyframes fade-out-tooltip{0%{opacity:1;}100%{opacity:0;}}@media (max-width:", "){min-width:69px;}"], borderRadius2, space8, space12, Neutral.B100, background, function (props) {
19
19
  return props.zIndex ? props.zIndex : 100;
20
20
  }, arrowSize, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, arrowSize, verticalMargin, background, arrowSize, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, arrowSize, background, nonCentralArrowMargin, background, arrowSize, background, nonCentralArrowMargin, Breakpoints.large);
21
21
  export var StyledTooltipArrow = styled.div.withConfig({
package/lib/@next/Tooltip/Tooltip.d.ts CHANGED
@@ -6,6 +6,12 @@ export declare type TooltipProps = {
6
6
  children: React.ReactNode;
7
7
  content: React.ReactNode;
8
8
  zIndex?: number;
9
+ /** if true, tooltip will be shown on click instead of hover */
10
+ clickable?: boolean;
11
+ /** how long tooltip will still be shown after clicked or when not hovered anymore */
12
+ timeout?: number;
13
+ /** if clickable it true, onClick will be called when tooltip is clicked */
14
+ onClick?: () => void;
9
15
  };
10
- export declare const Tooltip: ({ children, content, preferredPosition, zIndex, }: TooltipProps) => JSX.Element;
16
+ export declare const Tooltip: ({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, }: TooltipProps) => JSX.Element;
11
17
  export {};
package/lib/@next/Tooltip/Tooltip.js CHANGED
@@ -59,7 +59,12 @@ var Tooltip = function Tooltip(_ref) {
59
59
  content = _ref.content,
60
60
  _ref$preferredPositio = _ref.preferredPosition,
61
61
  preferredPosition = _ref$preferredPositio === void 0 ? defaultPosition : _ref$preferredPositio,
62
- zIndex = _ref.zIndex;
62
+ zIndex = _ref.zIndex,
63
+ _ref$clickable = _ref.clickable,
64
+ clickable = _ref$clickable === void 0 ? false : _ref$clickable,
65
+ _ref$timeout = _ref.timeout,
66
+ timeout = _ref$timeout === void 0 ? 0 : _ref$timeout,
67
+ onClick = _ref.onClick;
63
68
  var tooltipRef = (0, _react.useRef)(null);
64
69
  var elRef = (0, _react.useRef)(null);
65
70
  var tooltipPositionsHandlerRef = (0, _react.useRef)(null);
@@ -118,16 +123,49 @@ var Tooltip = function Tooltip(_ref) {
118
123
  as: "div",
119
124
  variant: "subtitle2"
120
125
  }, content) : content;
126
+ var handleMouseEnter = function handleMouseEnter() {
127
+ if (!clickable) setIsActive(true);
128
+ };
129
+ var handleMouseLeave = function handleMouseLeave() {
130
+ if (!clickable) {
131
+ setIsActive(false);
132
+ handleAnimation();
133
+ }
134
+ };
135
+ var handleClick = function handleClick() {
136
+ if (clickable) {
137
+ onClick();
138
+ handleAnimation();
139
+ }
140
+ };
141
+ var timeoutRef = (0, _react.useRef)(null);
142
+ var _useState4 = (0, _react.useState)(false),
143
+ animate = _useState4[0],
144
+ setAnimate = _useState4[1];
145
+ var handleAnimation = function handleAnimation() {
146
+ // if you click during the tooltip's lifespan, it should reset the timeout
147
+ if (timeoutRef.current) {
148
+ clearTimeout(timeoutRef.current);
149
+ timeoutRef.current = null;
150
+ setAnimate(false);
151
+ }
152
+ setIsActive(true);
153
+ timeoutRef.current = setTimeout(function () {
154
+ setAnimate(true);
155
+ timeoutRef.current = setTimeout(function () {
156
+ setIsActive(false);
157
+ setAnimate(false);
158
+ }, 370); // animation is 400ms, make this slightly lower to prevent visual glitch
159
+ }, timeout);
160
+ };
121
161
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TooltipStyle.StyledTooltipContainer, {
122
162
  ref: elRef,
123
- onMouseEnter: function onMouseEnter() {
124
- return setIsActive(true);
125
- },
126
- onMouseLeave: function onMouseLeave() {
127
- return setIsActive(false);
128
- }
163
+ onMouseEnter: handleMouseEnter,
164
+ onMouseLeave: handleMouseLeave,
165
+ onClick: handleClick
129
166
  }, children), isActive && /*#__PURE__*/_react["default"].createElement(_Portal.Portal, null, /*#__PURE__*/_react["default"].createElement(_TooltipStyle.StyledTooltip, {
130
167
  "data-position": position,
168
+ className: animate ? 'closed-animation' : '',
131
169
  ref: tooltipRef,
132
170
  zIndex: zIndex,
133
171
  style: {
package/lib/@next/Tooltip/TooltipStyle.js CHANGED
@@ -23,7 +23,7 @@ exports.StyledTooltipContainer = StyledTooltipContainer;
23
23
  var StyledTooltip = _styledComponents["default"].div.withConfig({
24
24
  displayName: "TooltipStyle__StyledTooltip",
25
25
  componentId: "sc-37e5z7-1"
26
- })(["position:fixed;text-align:left;height:fit-content;width:fit-content;max-width:320px;border-radius:", ";gap:10px;left:50%;transform:translateX(-50%);padding:", " ", ";color:", ";background:", ";overflow-wrap:break-word;line-height:1;z-index:", ";&[data-position='top-left'],&[data-position='bottom-left']{transform:translateX( calc(100% * -1 + ", " + ", ") );}&[data-position='top-right'],&[data-position='bottom-right']{transform:translateX(calc((", " + ", ") * -1));}&[data-position='right-middle']{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'],&[data-position='right-bottom']{transform:translateY(calc((", " + ", ") * -1));}&[data-position='left-top'],&[data-position='right-top']{transform:translateY( calc(100% * -1 + (", " + ", ")) );}&[data-position='bottom-center'],&[data-position='bottom-left'],&[data-position='bottom-right']{top:calc((100% + ", "));}&[data-position='left-middle']{transform:translateX(0) translateY(-50%);}&[data-position='top-center'] .arrow,&[data-position='top-left'] .arrow,&[data-position='top-right'] .arrow{top:100%;border-top-color:", ";}&[data-position='top-left'] .arrow,&[data-position='bottom-left'] .arrow{left:calc(100% - ", " - ", ");}&[data-position='top-right'] .arrow,&[data-position='bottom-right'] .arrow{left:calc(", " + ", ");}&[data-position='right-middle'] .arrow,&[data-position='right-top'] .arrow,&[data-position='right-bottom'] .arrow{top:50%;left:calc(", " * -1);border-right-color:", ";}&[data-position='right-middle'] .arrow{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'] .arrow,&[data-position='right-bottom'] .arrow{top:", ";}&[data-position='bottom-center'] .arrow,&[data-position='bottom-left'] .arrow,&[data-position='bottom-right'] .arrow{bottom:100%;border-bottom-color:", ";}&[data-position='left-middle'] .arrow,&[data-position='left-top'] .arrow,&[data-position='left-bottom'] .arrow{left:auto;right:calc(", " * -2);border-left-color:", ";}&[data-position='left-middle'] .arrow{top:50%;transform:translateX(0) translateY(-50%);}&[data-position='left-top'] .arrow,&[data-position='right-top'] .arrow{top:unset;bottom:", ";}@media (max-width:", "){min-width:69px;}"], _borderRadius.borderRadius2, _spacing.space8, _spacing.space12, _colors.Neutral.B100, background, function (props) {
26
+ })(["position:fixed;text-align:left;height:fit-content;width:fit-content;max-width:320px;border-radius:", ";gap:10px;left:50%;transform:translateX(-50%);padding:", " ", ";color:", ";background:", ";overflow-wrap:break-word;line-height:1;z-index:", ";&[data-position='top-left'],&[data-position='bottom-left']{transform:translateX( calc(100% * -1 + ", " + ", ") );}&[data-position='top-right'],&[data-position='bottom-right']{transform:translateX(calc((", " + ", ") * -1));}&[data-position='right-middle']{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'],&[data-position='right-bottom']{transform:translateY(calc((", " + ", ") * -1));}&[data-position='left-top'],&[data-position='right-top']{transform:translateY( calc(100% * -1 + (", " + ", ")) );}&[data-position='bottom-center'],&[data-position='bottom-left'],&[data-position='bottom-right']{top:calc((100% + ", "));}&[data-position='left-middle']{transform:translateX(0) translateY(-50%);}&[data-position='top-center'] .arrow,&[data-position='top-left'] .arrow,&[data-position='top-right'] .arrow{top:100%;border-top-color:", ";}&[data-position='top-left'] .arrow,&[data-position='bottom-left'] .arrow{left:calc(100% - ", " - ", ");}&[data-position='top-right'] .arrow,&[data-position='bottom-right'] .arrow{left:calc(", " + ", ");}&[data-position='right-middle'] .arrow,&[data-position='right-top'] .arrow,&[data-position='right-bottom'] .arrow{top:50%;left:calc(", " * -1);border-right-color:", ";}&[data-position='right-middle'] .arrow{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'] .arrow,&[data-position='right-bottom'] .arrow{top:", ";}&[data-position='bottom-center'] .arrow,&[data-position='bottom-left'] .arrow,&[data-position='bottom-right'] .arrow{bottom:100%;border-bottom-color:", ";}&[data-position='left-middle'] .arrow,&[data-position='left-top'] .arrow,&[data-position='left-bottom'] .arrow{left:auto;right:calc(", " * -2);border-left-color:", ";}&[data-position='left-middle'] .arrow{top:50%;transform:translateX(0) translateY(-50%);}&[data-position='left-top'] .arrow,&[data-position='right-top'] .arrow{top:unset;bottom:", ";}animation:fade-in-tooltip 400ms ease-in forwards;&.closed-animation{animation:fade-out-tooltip 400ms ease-out forwards;}animation-fill-mode:forwards;@keyframes fade-in-tooltip{0%{opacity:0;}100%{opacity:1;}}@keyframes fade-out-tooltip{0%{opacity:1;}100%{opacity:0;}}@media (max-width:", "){min-width:69px;}"], _borderRadius.borderRadius2, _spacing.space8, _spacing.space12, _colors.Neutral.B100, background, function (props) {
27
27
  return props.zIndex ? props.zIndex : 100;
28
28
  }, arrowSize, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, arrowSize, verticalMargin, background, arrowSize, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, arrowSize, background, nonCentralArrowMargin, background, arrowSize, background, nonCentralArrowMargin, Breakpoints.large);
29
29
  exports.StyledTooltip = StyledTooltip;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.284",
3
+ "version": "4.0.286",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",