glints-aries 4.0.284 → 4.0.285

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 +4 -1
  2. package/es/@next/Tooltip/Tooltip.js +38 -7
  3. package/es/@next/Tooltip/TooltipStyle.js +1 -1
  4. package/lib/@next/Tooltip/Tooltip.d.ts +4 -1
  5. package/lib/@next/Tooltip/Tooltip.js +38 -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,9 @@ export declare type TooltipProps = {
6
6
  children: React.ReactNode;
7
7
  content: React.ReactNode;
8
8
  zIndex?: number;
9
+ clickable?: boolean;
10
+ timeout?: number;
11
+ onClick?: () => void;
9
12
  };
10
- export declare const Tooltip: ({ children, content, preferredPosition, zIndex, }: TooltipProps) => JSX.Element;
13
+ export declare const Tooltip: ({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, }: TooltipProps) => JSX.Element;
11
14
  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,42 @@ export var Tooltip = function Tooltip(_ref) {
112
117
  as: "div",
113
118
  variant: "subtitle2"
114
119
  }, content) : content;
120
+ var handleMouseEnter = function handleMouseEnter() {
121
+ return setIsActive(true);
122
+ };
123
+ var handleMouseLeave = function handleMouseLeave() {
124
+ setIsActive(false);
125
+ handleClick();
126
+ };
127
+ var timeoutRef = useRef(null);
128
+ var _useState4 = useState(false),
129
+ animate = _useState4[0],
130
+ setAnimate = _useState4[1];
131
+ var handleClick = function handleClick() {
132
+ onClick();
133
+ // if you click during the tooltip's lifespan, it should reset the timeout
134
+ if (timeoutRef.current) {
135
+ clearTimeout(timeoutRef.current);
136
+ timeoutRef.current = null;
137
+ setAnimate(false);
138
+ }
139
+ setIsActive(true);
140
+ timeoutRef.current = setTimeout(function () {
141
+ setAnimate(true);
142
+ timeoutRef.current = setTimeout(function () {
143
+ setIsActive(false);
144
+ setAnimate(false);
145
+ }, 370); // animation is 400ms, make this slightly lower to prevent visual glitch
146
+ }, timeout);
147
+ };
115
148
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTooltipContainer, {
116
149
  ref: elRef,
117
- onMouseEnter: function onMouseEnter() {
118
- return setIsActive(true);
119
- },
120
- onMouseLeave: function onMouseLeave() {
121
- return setIsActive(false);
122
- }
150
+ onMouseEnter: !clickable && handleMouseEnter,
151
+ onMouseLeave: !clickable && handleMouseLeave,
152
+ onClick: clickable && handleClick
123
153
  }, children), isActive && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledTooltip, {
124
154
  "data-position": position,
155
+ className: animate ? 'closed-animation' : '',
125
156
  ref: tooltipRef,
126
157
  zIndex: zIndex,
127
158
  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,9 @@ export declare type TooltipProps = {
6
6
  children: React.ReactNode;
7
7
  content: React.ReactNode;
8
8
  zIndex?: number;
9
+ clickable?: boolean;
10
+ timeout?: number;
11
+ onClick?: () => void;
9
12
  };
10
- export declare const Tooltip: ({ children, content, preferredPosition, zIndex, }: TooltipProps) => JSX.Element;
13
+ export declare const Tooltip: ({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, }: TooltipProps) => JSX.Element;
11
14
  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,42 @@ var Tooltip = function Tooltip(_ref) {
118
123
  as: "div",
119
124
  variant: "subtitle2"
120
125
  }, content) : content;
126
+ var handleMouseEnter = function handleMouseEnter() {
127
+ return setIsActive(true);
128
+ };
129
+ var handleMouseLeave = function handleMouseLeave() {
130
+ setIsActive(false);
131
+ handleClick();
132
+ };
133
+ var timeoutRef = (0, _react.useRef)(null);
134
+ var _useState4 = (0, _react.useState)(false),
135
+ animate = _useState4[0],
136
+ setAnimate = _useState4[1];
137
+ var handleClick = function handleClick() {
138
+ onClick();
139
+ // if you click during the tooltip's lifespan, it should reset the timeout
140
+ if (timeoutRef.current) {
141
+ clearTimeout(timeoutRef.current);
142
+ timeoutRef.current = null;
143
+ setAnimate(false);
144
+ }
145
+ setIsActive(true);
146
+ timeoutRef.current = setTimeout(function () {
147
+ setAnimate(true);
148
+ timeoutRef.current = setTimeout(function () {
149
+ setIsActive(false);
150
+ setAnimate(false);
151
+ }, 370); // animation is 400ms, make this slightly lower to prevent visual glitch
152
+ }, timeout);
153
+ };
121
154
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TooltipStyle.StyledTooltipContainer, {
122
155
  ref: elRef,
123
- onMouseEnter: function onMouseEnter() {
124
- return setIsActive(true);
125
- },
126
- onMouseLeave: function onMouseLeave() {
127
- return setIsActive(false);
128
- }
156
+ onMouseEnter: !clickable && handleMouseEnter,
157
+ onMouseLeave: !clickable && handleMouseLeave,
158
+ onClick: clickable && handleClick
129
159
  }, children), isActive && /*#__PURE__*/_react["default"].createElement(_Portal.Portal, null, /*#__PURE__*/_react["default"].createElement(_TooltipStyle.StyledTooltip, {
130
160
  "data-position": position,
161
+ className: animate ? 'closed-animation' : '',
131
162
  ref: tooltipRef,
132
163
  zIndex: zIndex,
133
164
  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.285",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",