@conveyorhq/arrow-ds 1.98.0 → 1.99.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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/public/components/Tooltip/Tooltip.d.ts +2 -0
  3. package/public/components/Tooltip/Tooltip.js +17 -15
  4. package/src/components/Tooltip/Tooltip.tsx +37 -19
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@conveyorhq/arrow-ds",
3
3
  "author": "Conveyor",
4
4
  "license": "MIT",
5
- "version": "1.98.0",
5
+ "version": "1.99.0",
6
6
  "description": "Arrow Design System",
7
7
  "repository": "https://github.com/conveyor/arrow-ds",
8
8
  "publishConfig": {
package/public/components/Tooltip/Tooltip.d.ts CHANGED
@@ -3,5 +3,7 @@ export interface TooltipProps extends PopoverTooltipSharedProps {
3
3
  delay?: number;
4
4
  theme?: "light" | "dark";
5
5
  hideArrow?: boolean;
6
+ open?: boolean;
7
+ setOpen?(open: boolean): void;
6
8
  }
7
9
  export declare const Tooltip: (props: TooltipProps) => JSX.Element;
package/public/components/Tooltip/Tooltip.js CHANGED
@@ -32,17 +32,19 @@ const types_1 = require("../../types");
32
32
  const context_1 = require("./context");
33
33
  const cn = "Tooltip";
34
34
  const Tooltip = (props) => {
35
- const { isVisible: isVisibleProp = false, children, referenceElement, placement = "bottom", className, delay = 200, theme = "dark", hideArrow, style, ...rest } = props;
36
- const { isOpen, onOpen, onClose } = hooks_1.useDisclosure(isVisibleProp);
35
+ const { isVisible: isVisibleInitial = false, open: isOpenControlled, setOpen: setOpenControlled, children, referenceElement, placement = "bottom", className, delay = 200, theme = "dark", hideArrow, style, ...rest } = props;
36
+ const [isOpenUncontrolled, setOpenUncontrolled] = react_1.useState(isVisibleInitial);
37
+ const open = isOpenControlled !== null && isOpenControlled !== void 0 ? isOpenControlled : isOpenUncontrolled;
38
+ const setOpen = setOpenControlled !== null && setOpenControlled !== void 0 ? setOpenControlled : setOpenUncontrolled;
37
39
  const isHoveringReferenceRef = react_1.useRef(false);
38
40
  const isHoveringPopoverRef = react_1.useRef(false);
39
41
  const referenceTimoutRef = react_1.useRef(null);
40
42
  const popoverTimoutRef = react_1.useRef(null);
41
43
  react_1.useEffect(() => {
42
- if (isVisibleProp) {
43
- onOpen();
44
+ if (isVisibleInitial) {
45
+ setOpen(true);
44
46
  }
45
- }, [isVisibleProp, onOpen]);
47
+ }, [isVisibleInitial, setOpen]);
46
48
  react_1.useEffect(() => {
47
49
  return () => {
48
50
  if (referenceTimoutRef.current) {
@@ -55,15 +57,15 @@ const Tooltip = (props) => {
55
57
  });
56
58
  const close = () => {
57
59
  if (!isHoveringPopoverRef.current) {
58
- onClose();
60
+ setOpen(false);
59
61
  }
60
62
  };
61
63
  const handleMouseEnter = () => {
62
64
  isHoveringReferenceRef.current = true;
63
- if (!isOpen) {
65
+ if (!open) {
64
66
  const referenceTimeout = setTimeout(() => {
65
67
  if (isHoveringReferenceRef.current) {
66
- onOpen();
68
+ setOpen(true);
67
69
  }
68
70
  }, delay);
69
71
  referenceTimoutRef.current = referenceTimeout;
@@ -71,7 +73,7 @@ const Tooltip = (props) => {
71
73
  };
72
74
  const handleMouseLeave = () => {
73
75
  isHoveringReferenceRef.current = false;
74
- if (isOpen) {
76
+ if (open) {
75
77
  const popoverTimeout = setTimeout(close, delay);
76
78
  popoverTimoutRef.current = popoverTimeout;
77
79
  }
@@ -83,17 +85,17 @@ const Tooltip = (props) => {
83
85
  };
84
86
  const handlePopoverMouseLeave = () => {
85
87
  isHoveringPopoverRef.current = false;
86
- if (isOpen) {
88
+ if (open) {
87
89
  const popoverTimeout = setTimeout(close, delay);
88
90
  popoverTimoutRef.current = popoverTimeout;
89
91
  }
90
92
  };
91
93
  hooks_1.useKeyPress(types_1.KEY_CODE.ESC, () => {
92
- if (isOpen && !isVisibleProp) {
94
+ if (open && !isVisibleInitial) {
93
95
  close();
94
96
  }
95
97
  });
96
- const referenceElementWithMouseHandlers = !isVisibleProp
98
+ const referenceElementWithMouseHandlers = !isVisibleInitial
97
99
  ? react_1.cloneElement(referenceElement, {
98
100
  onMouseEnter: () => {
99
101
  handleMouseEnter();
@@ -123,9 +125,9 @@ const Tooltip = (props) => {
123
125
  })
124
126
  : referenceElement;
125
127
  const context = react_1.useMemo(() => ({
126
- isOpen,
127
- }), [isOpen]);
128
+ isOpen: open,
129
+ }), [open]);
128
130
  return children ? (react_1.default.createElement(context_1.TooltipContext.Provider, { value: context },
129
- react_1.default.createElement(Popover_1.Popover, Object.assign({ showArrow: !hideArrow, isVisible: isOpen, referenceElement: referenceElementWithMouseHandlers, placement: placement, className: classnames_1.default([bem_1.bem(cn), bem_1.bem(cn, { m: theme }), className]), onMouseEnter: !isVisibleProp ? handlePopoverMouseEnter : undefined, onMouseLeave: !isVisibleProp ? handlePopoverMouseLeave : undefined, style: style }, rest), children))) : (referenceElement);
131
+ react_1.default.createElement(Popover_1.Popover, Object.assign({ showArrow: !hideArrow, isVisible: open, referenceElement: referenceElementWithMouseHandlers, placement: placement, className: classnames_1.default([bem_1.bem(cn), bem_1.bem(cn, { m: theme }), className]), onMouseEnter: !isVisibleInitial ? handlePopoverMouseEnter : undefined, onMouseLeave: !isVisibleInitial ? handlePopoverMouseLeave : undefined, style: style }, rest), children))) : (referenceElement);
130
132
  };
131
133
  exports.Tooltip = Tooltip;
package/src/components/Tooltip/Tooltip.tsx CHANGED
@@ -1,8 +1,14 @@
1
- import React, { useRef, cloneElement, useEffect, useMemo } from "react";
1
+ import React, {
2
+ useRef,
3
+ cloneElement,
4
+ useEffect,
5
+ useMemo,
6
+ useState,
7
+ } from "react";
2
8
  import classnames from "classnames";
3
9
 
4
10
  import { bem } from "../../utilities/bem";
5
- import { useDisclosure, useKeyPress } from "../../hooks";
11
+ import { useKeyPress } from "../../hooks";
6
12
 
7
13
  import { Popover, PopoverTooltipSharedProps } from "../Popover";
8
14
  import { KEY_CODE } from "../../types";
@@ -21,13 +27,23 @@ export interface TooltipProps extends PopoverTooltipSharedProps {
21
27
  * Controls the visibility of the reference pointer arrow
22
28
  */
23
29
  hideArrow?: boolean;
30
+ /**
31
+ * Controlled state
32
+ */
33
+ open?: boolean;
34
+ /**
35
+ * Controlled state
36
+ */
37
+ setOpen?(open: boolean): void;
24
38
  }
25
39
 
26
40
  const cn = "Tooltip";
27
41
 
28
42
  export const Tooltip = (props: TooltipProps) => {
29
43
  const {
30
- isVisible: isVisibleProp = false,
44
+ isVisible: isVisibleInitial = false,
45
+ open: isOpenControlled,
46
+ setOpen: setOpenControlled,
31
47
  children,
32
48
  referenceElement,
33
49
  placement = "bottom",
@@ -39,17 +55,19 @@ export const Tooltip = (props: TooltipProps) => {
39
55
  ...rest
40
56
  } = props;
41
57
 
42
- const { isOpen, onOpen, onClose } = useDisclosure(isVisibleProp);
58
+ const [isOpenUncontrolled, setOpenUncontrolled] = useState(isVisibleInitial);
59
+ const open = isOpenControlled ?? isOpenUncontrolled;
60
+ const setOpen = setOpenControlled ?? setOpenUncontrolled;
43
61
  const isHoveringReferenceRef = useRef(false);
44
62
  const isHoveringPopoverRef = useRef(false);
45
63
  const referenceTimoutRef = useRef<null | NodeJS.Timeout>(null);
46
64
  const popoverTimoutRef = useRef<null | NodeJS.Timeout>(null);
47
65
 
48
66
  useEffect(() => {
49
- if (isVisibleProp) {
50
- onOpen();
67
+ if (isVisibleInitial) {
68
+ setOpen(true);
51
69
  }
52
- }, [isVisibleProp, onOpen]);
70
+ }, [isVisibleInitial, setOpen]);
53
71
 
54
72
  useEffect(() => {
55
73
  return () => {
@@ -64,17 +82,17 @@ export const Tooltip = (props: TooltipProps) => {
64
82
 
65
83
  const close = () => {
66
84
  if (!isHoveringPopoverRef.current) {
67
- onClose();
85
+ setOpen(false);
68
86
  }
69
87
  };
70
88
 
71
89
  const handleMouseEnter = () => {
72
90
  isHoveringReferenceRef.current = true;
73
91
 
74
- if (!isOpen) {
92
+ if (!open) {
75
93
  const referenceTimeout = setTimeout(() => {
76
94
  if (isHoveringReferenceRef.current) {
77
- onOpen();
95
+ setOpen(true);
78
96
  }
79
97
  }, delay);
80
98
  referenceTimoutRef.current = referenceTimeout;
@@ -84,7 +102,7 @@ export const Tooltip = (props: TooltipProps) => {
84
102
  const handleMouseLeave = () => {
85
103
  isHoveringReferenceRef.current = false;
86
104
 
87
- if (isOpen) {
105
+ if (open) {
88
106
  const popoverTimeout = setTimeout(close, delay);
89
107
  popoverTimoutRef.current = popoverTimeout;
90
108
  }
@@ -99,19 +117,19 @@ export const Tooltip = (props: TooltipProps) => {
99
117
  const handlePopoverMouseLeave = () => {
100
118
  isHoveringPopoverRef.current = false;
101
119
 
102
- if (isOpen) {
120
+ if (open) {
103
121
  const popoverTimeout = setTimeout(close, delay);
104
122
  popoverTimoutRef.current = popoverTimeout;
105
123
  }
106
124
  };
107
125
 
108
126
  useKeyPress(KEY_CODE.ESC, () => {
109
- if (isOpen && !isVisibleProp) {
127
+ if (open && !isVisibleInitial) {
110
128
  close();
111
129
  }
112
130
  });
113
131
 
114
- const referenceElementWithMouseHandlers = !isVisibleProp
132
+ const referenceElementWithMouseHandlers = !isVisibleInitial
115
133
  ? cloneElement(referenceElement, {
116
134
  onMouseEnter: () => {
117
135
  handleMouseEnter();
@@ -143,21 +161,21 @@ export const Tooltip = (props: TooltipProps) => {
143
161
 
144
162
  const context = useMemo(
145
163
  () => ({
146
- isOpen,
164
+ isOpen: open,
147
165
  }),
148
- [isOpen],
166
+ [open],
149
167
  );
150
168
 
151
169
  return children ? (
152
170
  <TooltipContext.Provider value={context}>
153
171
  <Popover
154
172
  showArrow={!hideArrow}
155
- isVisible={isOpen}
173
+ isVisible={open}
156
174
  referenceElement={referenceElementWithMouseHandlers}
157
175
  placement={placement}
158
176
  className={classnames([bem(cn), bem(cn, { m: theme }), className])}
159
- onMouseEnter={!isVisibleProp ? handlePopoverMouseEnter : undefined}
160
- onMouseLeave={!isVisibleProp ? handlePopoverMouseLeave : undefined}
177
+ onMouseEnter={!isVisibleInitial ? handlePopoverMouseEnter : undefined}
178
+ onMouseLeave={!isVisibleInitial ? handlePopoverMouseLeave : undefined}
161
179
  style={style}
162
180
  {...rest}
163
181
  >