@canonical/react-components 3.11.1 → 3.12.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 (5) hide show
  1. package/dist/components/Tooltip/Tooltip.d.ts +1 -1
  2. package/dist/components/Tooltip/Tooltip.js +21 -6
  3. package/dist/esm/components/Tooltip/Tooltip.d.ts +1 -1
  4. package/dist/esm/components/Tooltip/Tooltip.js +21 -6
  5. package/package.json +1 -1
package/dist/components/Tooltip/Tooltip.d.ts CHANGED
@@ -62,7 +62,7 @@ export type Props = {
62
62
  */
63
63
  delay?: number;
64
64
  };
65
- export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
65
+ export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment, messageHeight?: number) => Position;
66
66
  /**
67
67
  * This is the [React](https://reactjs.org/) component for Vanilla [Tooltips](https://vanillaframework.io/docs/patterns/tooltips).
68
68
  *
package/dist/components/Tooltip/Tooltip.js CHANGED
@@ -70,14 +70,27 @@ const getPositionStyle = (pos, wrapperNode) => {
70
70
  top
71
71
  };
72
72
  };
73
- const adjustForWindow = (position, fitsWindow) => {
73
+ const adjustForWindow = function (position, fitsWindow) {
74
+ let messageHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
74
75
  let newPosition = position;
75
76
  if (!fitsWindow.fromLeft.fitsLeft && newPosition === "left") {
76
77
  newPosition = "top-right";
77
78
  }
79
+ if (fitsWindow.fromTop.spaceAbove < messageHeight / 2 && newPosition === "left") {
80
+ newPosition = "btm-left";
81
+ }
82
+ if (fitsWindow.fromBottom.spaceBelow < messageHeight / 2 && newPosition === "left") {
83
+ newPosition = "top-left";
84
+ }
78
85
  if (!fitsWindow.fromRight.fitsRight && newPosition === "right") {
79
86
  newPosition = "top-left";
80
87
  }
88
+ if (fitsWindow.fromTop.spaceAbove < messageHeight / 2 && newPosition === "right") {
89
+ newPosition = "btm-right";
90
+ }
91
+ if (fitsWindow.fromBottom.spaceBelow < messageHeight / 2 && newPosition === "right") {
92
+ newPosition = "top-right";
93
+ }
81
94
  if (!fitsWindow.fromRight.fitsLeft && newPosition.endsWith("-right")) {
82
95
  newPosition = newPosition.replace("right", "left");
83
96
  }
@@ -168,7 +181,9 @@ const Tooltip = _ref => {
168
181
  });
169
182
  }, []);
170
183
  const onUpdateWindowFitment = (0, _react.useCallback)(fitsWindow => {
171
- setAdjustedPosition(adjustForWindow(position, fitsWindow));
184
+ var _messageRef$current$g, _messageRef$current;
185
+ const messageHeight = (_messageRef$current$g = (_messageRef$current = messageRef.current) === null || _messageRef$current === void 0 ? void 0 : _messageRef$current.getBoundingClientRect().height) !== null && _messageRef$current$g !== void 0 ? _messageRef$current$g : 0;
186
+ setAdjustedPosition(adjustForWindow(position, fitsWindow, messageHeight));
172
187
  }, [setAdjustedPosition, position]);
173
188
 
174
189
  // Handle mouse events.
@@ -188,19 +203,19 @@ const Tooltip = _ref => {
188
203
  };
189
204
  }, [handleKeyPress]);
190
205
  const handleBlur = e => {
191
- var _wrapperRef$current, _messageRef$current, _wrapperRef$current2;
206
+ var _wrapperRef$current, _messageRef$current2, _wrapperRef$current2;
192
207
  // do not close if the focus is within the tooltip wrapper
193
208
  if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(document.activeElement)) {
194
209
  return;
195
210
  }
196
- if (e.relatedTarget ? !((_messageRef$current = messageRef.current) !== null && _messageRef$current !== void 0 && _messageRef$current.contains(e.relatedTarget)) && !((_wrapperRef$current2 = wrapperRef.current) !== null && _wrapperRef$current2 !== void 0 && _wrapperRef$current2.contains(e.relatedTarget)) : e.target !== messageRef.current) {
211
+ if (e.relatedTarget ? !((_messageRef$current2 = messageRef.current) !== null && _messageRef$current2 !== void 0 && _messageRef$current2.contains(e.relatedTarget)) && !((_wrapperRef$current2 = wrapperRef.current) !== null && _wrapperRef$current2 !== void 0 && _wrapperRef$current2.contains(e.relatedTarget)) : e.target !== messageRef.current) {
197
212
  cancelableClosePortal();
198
213
  }
199
214
  };
200
215
  const handleClick = e => {
201
- var _messageRef$current2;
216
+ var _messageRef$current3;
202
217
  // ignore clicks within the tooltip message
203
- if ((_messageRef$current2 = messageRef.current) !== null && _messageRef$current2 !== void 0 && _messageRef$current2.contains(e.target)) {
218
+ if ((_messageRef$current3 = messageRef.current) !== null && _messageRef$current3 !== void 0 && _messageRef$current3.contains(e.target)) {
204
219
  return;
205
220
  }
206
221
  e.target.focus();
package/dist/esm/components/Tooltip/Tooltip.d.ts CHANGED
@@ -62,7 +62,7 @@ export type Props = {
62
62
  */
63
63
  delay?: number;
64
64
  };
65
- export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
65
+ export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment, messageHeight?: number) => Position;
66
66
  /**
67
67
  * This is the [React](https://reactjs.org/) component for Vanilla [Tooltips](https://vanillaframework.io/docs/patterns/tooltips).
68
68
  *
package/dist/esm/components/Tooltip/Tooltip.js CHANGED
@@ -61,14 +61,27 @@ var getPositionStyle = (pos, wrapperNode) => {
61
61
  top
62
62
  };
63
63
  };
64
- export var adjustForWindow = (position, fitsWindow) => {
64
+ export var adjustForWindow = function adjustForWindow(position, fitsWindow) {
65
+ var messageHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
65
66
  var newPosition = position;
66
67
  if (!fitsWindow.fromLeft.fitsLeft && newPosition === "left") {
67
68
  newPosition = "top-right";
68
69
  }
70
+ if (fitsWindow.fromTop.spaceAbove < messageHeight / 2 && newPosition === "left") {
71
+ newPosition = "btm-left";
72
+ }
73
+ if (fitsWindow.fromBottom.spaceBelow < messageHeight / 2 && newPosition === "left") {
74
+ newPosition = "top-left";
75
+ }
69
76
  if (!fitsWindow.fromRight.fitsRight && newPosition === "right") {
70
77
  newPosition = "top-left";
71
78
  }
79
+ if (fitsWindow.fromTop.spaceAbove < messageHeight / 2 && newPosition === "right") {
80
+ newPosition = "btm-right";
81
+ }
82
+ if (fitsWindow.fromBottom.spaceBelow < messageHeight / 2 && newPosition === "right") {
83
+ newPosition = "top-right";
84
+ }
72
85
  if (!fitsWindow.fromRight.fitsLeft && newPosition.endsWith("-right")) {
73
86
  newPosition = newPosition.replace("right", "left");
74
87
  }
@@ -158,7 +171,9 @@ var Tooltip = _ref => {
158
171
  });
159
172
  }, []);
160
173
  var onUpdateWindowFitment = useCallback(fitsWindow => {
161
- setAdjustedPosition(adjustForWindow(position, fitsWindow));
174
+ var _messageRef$current$g, _messageRef$current;
175
+ var messageHeight = (_messageRef$current$g = (_messageRef$current = messageRef.current) === null || _messageRef$current === void 0 ? void 0 : _messageRef$current.getBoundingClientRect().height) !== null && _messageRef$current$g !== void 0 ? _messageRef$current$g : 0;
176
+ setAdjustedPosition(adjustForWindow(position, fitsWindow, messageHeight));
162
177
  }, [setAdjustedPosition, position]);
163
178
 
164
179
  // Handle mouse events.
@@ -178,19 +193,19 @@ var Tooltip = _ref => {
178
193
  };
179
194
  }, [handleKeyPress]);
180
195
  var handleBlur = e => {
181
- var _wrapperRef$current, _messageRef$current, _wrapperRef$current2;
196
+ var _wrapperRef$current, _messageRef$current2, _wrapperRef$current2;
182
197
  // do not close if the focus is within the tooltip wrapper
183
198
  if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(document.activeElement)) {
184
199
  return;
185
200
  }
186
- if (e.relatedTarget ? !((_messageRef$current = messageRef.current) !== null && _messageRef$current !== void 0 && _messageRef$current.contains(e.relatedTarget)) && !((_wrapperRef$current2 = wrapperRef.current) !== null && _wrapperRef$current2 !== void 0 && _wrapperRef$current2.contains(e.relatedTarget)) : e.target !== messageRef.current) {
201
+ if (e.relatedTarget ? !((_messageRef$current2 = messageRef.current) !== null && _messageRef$current2 !== void 0 && _messageRef$current2.contains(e.relatedTarget)) && !((_wrapperRef$current2 = wrapperRef.current) !== null && _wrapperRef$current2 !== void 0 && _wrapperRef$current2.contains(e.relatedTarget)) : e.target !== messageRef.current) {
187
202
  cancelableClosePortal();
188
203
  }
189
204
  };
190
205
  var handleClick = e => {
191
- var _messageRef$current2;
206
+ var _messageRef$current3;
192
207
  // ignore clicks within the tooltip message
193
- if ((_messageRef$current2 = messageRef.current) !== null && _messageRef$current2 !== void 0 && _messageRef$current2.contains(e.target)) {
208
+ if ((_messageRef$current3 = messageRef.current) !== null && _messageRef$current3 !== void 0 && _messageRef$current3.contains(e.target)) {
194
209
  return;
195
210
  }
196
211
  e.target.focus();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canonical/react-components",
3
- "version": "3.11.1",
3
+ "version": "3.12.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "author": {