@canonical/react-components 3.11.0 → 3.12.0

package/dist/components/ConfirmationButton/ConfirmationButton.d.ts

@@ -5,8 +5,9 @@ import { ConfirmationModalProps } from "../ConfirmationModal";
 export type Props = PropsWithSpread<{
     /**
      * Additional props to pass to the confirmation modal.
+     * The `renderInPortal` and `portalRenderer` props are controlled internally by this component.
      */
-    confirmationModalProps: SubComponentProps<ConfirmationModalProps>;
+    confirmationModalProps: SubComponentProps<Omit<ConfirmationModalProps, "renderInPortal" | "portalRenderer">>;
     /**
      * An optional text to be shown when hovering over the button.<br/>
      * Defaults to the label of the confirm button in the modal.

package/dist/components/ConfirmationButton/ConfirmationButton.js

@@ -8,7 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 var _ConfirmationModal = _interopRequireDefault(require("../ConfirmationModal"));
 var _external = require("../../external");
-const _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint", "preModalOpenHook"];
+const _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint", "preModalOpenHook"],
+  _excluded2 = ["renderInPortal", "portalRenderer"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -37,8 +38,15 @@ const ConfirmationButton = _ref => {
   const {
     openPortal,
     closePortal,
-    isOpen
+    isOpen,
+    Portal
   } = (0, _external.usePortal)();
+  const _ref2 = confirmationModalProps,
+    {
+      renderInPortal: _ignoredRenderInPortal,
+      portalRenderer: _ignoredPortalRenderer
+    } = _ref2,
+    safeConfirmationModalProps = _objectWithoutProperties(_ref2, _excluded2);
   const handleCancelModal = () => {
     closePortal();
     if (confirmationModalProps.close) {
@@ -63,11 +71,11 @@ const ConfirmationButton = _ref => {
     }
     shiftClickEnabled ? handleShiftClick(e) : openPortal(e);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen && /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, _extends({}, confirmationModalProps, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen && /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, _extends({}, safeConfirmationModalProps, {
     close: handleCancelModal,
     confirmButtonLabel: confirmationModalProps.confirmButtonLabel,
     onConfirm: handleConfirmModal,
-    renderInPortal: true
+    portalRenderer: Portal
   }), confirmationModalProps.children, showShiftClickHint && /*#__PURE__*/_react.default.createElement("p", {
     className: "p-text--small u-text--muted u-hide--small"
   }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/_react.default.createElement("code", null, "SHIFT"), " and clicking the action.")), /*#__PURE__*/_react.default.createElement(_ActionButton.default, _extends({}, actionButtonProps, {

package/dist/components/ConfirmationModal/ConfirmationModal.d.ts

@@ -49,9 +49,16 @@ export type Props = PropsWithSpread<{
      * Whether to render the modal inside a Portal component.
      */
     renderInPortal?: boolean;
+    /**
+     * Optional custom portal renderer. If provided, it takes precedence
+     * over `renderInPortal`.
+     */
+    portalRenderer?: React.ComponentType<{
+        children: ReactNode;
+    }>;
 }, Omit<ModalProps, "buttonRow">>;
 /**
  * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
  */
-export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, renderInPortal, ...props }: Props) => React.JSX.Element;
+export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, renderInPortal, portalRenderer: PortalRenderer, ...props }: Props) => React.JSX.Element;
 export default ConfirmationModal;

package/dist/components/ConfirmationModal/ConfirmationModal.js

@@ -9,15 +9,25 @@ var _Button = _interopRequireDefault(require("../Button"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 var _external = require("../../external");
-const _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps", "renderInPortal"];
+const _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps", "renderInPortal", "portalRenderer"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const InternalPortalRenderer = _ref => {
+  let {
+    children
+  } = _ref;
+  const {
+    Portal
+  } = (0, _external.usePortal)();
+  return /*#__PURE__*/_react.default.createElement(Portal, null, children);
+};
+
 /**
  * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
  */
-const ConfirmationModal = _ref => {
+const ConfirmationModal = _ref2 => {
   var _cancelButtonProps$ty;
   let {
       cancelButtonLabel = "Cancel",
@@ -30,12 +40,10 @@ const ConfirmationModal = _ref => {
       confirmButtonLoading,
       confirmButtonDisabled,
       confirmButtonProps,
-      renderInPortal = false
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const {
-    Portal
-  } = (0, _external.usePortal)();
+      renderInPortal = false,
+      portalRenderer: PortalRenderer
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
   const handleClick = action => event => {
     if (!props.shouldPropagateClickEvent) {
       event.stopPropagation();
@@ -57,7 +65,13 @@ const ConfirmationModal = _ref => {
       disabled: confirmButtonDisabled
     }), confirmButtonLabel))
   }, props), children);
-  return renderInPortal ? /*#__PURE__*/_react.default.createElement(Portal, null, ModalElement) : ModalElement;
+  if (PortalRenderer) {
+    return /*#__PURE__*/_react.default.createElement(PortalRenderer, null, ModalElement);
+  } else if (renderInPortal) {
+    return /*#__PURE__*/_react.default.createElement(InternalPortalRenderer, null, ModalElement);
+  } else {
+    return ModalElement;
+  }
 };
 exports.ConfirmationModal = ConfirmationModal;
 var _default = exports.default = ConfirmationModal;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -62,7 +62,7 @@ export type Props = {
      */
     delay?: number;
 };
-export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
+export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment, messageHeight?: number) => Position;
 /**
  * This is the [React](https://reactjs.org/) component for Vanilla [Tooltips](https://vanillaframework.io/docs/patterns/tooltips).
  *

package/dist/components/Tooltip/Tooltip.js

@@ -70,14 +70,27 @@ const getPositionStyle = (pos, wrapperNode) => {
     top
   };
 };
-const adjustForWindow = (position, fitsWindow) => {
+const adjustForWindow = function (position, fitsWindow) {
+  let messageHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   let newPosition = position;
   if (!fitsWindow.fromLeft.fitsLeft && newPosition === "left") {
     newPosition = "top-right";
   }
+  if (fitsWindow.fromTop.spaceAbove < messageHeight / 2 && newPosition === "left") {
+    newPosition = "btm-left";
+  }
+  if (fitsWindow.fromBottom.spaceBelow < messageHeight / 2 && newPosition === "left") {
+    newPosition = "top-left";
+  }
   if (!fitsWindow.fromRight.fitsRight && newPosition === "right") {
     newPosition = "top-left";
   }
+  if (fitsWindow.fromTop.spaceAbove < messageHeight / 2 && newPosition === "right") {
+    newPosition = "btm-right";
+  }
+  if (fitsWindow.fromBottom.spaceBelow < messageHeight / 2 && newPosition === "right") {
+    newPosition = "top-right";
+  }
   if (!fitsWindow.fromRight.fitsLeft && newPosition.endsWith("-right")) {
     newPosition = newPosition.replace("right", "left");
   }
@@ -168,7 +181,9 @@ const Tooltip = _ref => {
     });
   }, []);
   const onUpdateWindowFitment = (0, _react.useCallback)(fitsWindow => {
-    setAdjustedPosition(adjustForWindow(position, fitsWindow));
+    var _messageRef$current$g, _messageRef$current;
+    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;
+    setAdjustedPosition(adjustForWindow(position, fitsWindow, messageHeight));
   }, [setAdjustedPosition, position]);
 
   // Handle mouse events.
@@ -188,19 +203,19 @@ const Tooltip = _ref => {
     };
   }, [handleKeyPress]);
   const handleBlur = e => {
-    var _wrapperRef$current, _messageRef$current, _wrapperRef$current2;
+    var _wrapperRef$current, _messageRef$current2, _wrapperRef$current2;
     // do not close if the focus is within the tooltip wrapper
     if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(document.activeElement)) {
       return;
     }
-    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) {
+    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) {
       cancelableClosePortal();
     }
   };
   const handleClick = e => {
-    var _messageRef$current2;
+    var _messageRef$current3;
     // ignore clicks within the tooltip message
-    if ((_messageRef$current2 = messageRef.current) !== null && _messageRef$current2 !== void 0 && _messageRef$current2.contains(e.target)) {
+    if ((_messageRef$current3 = messageRef.current) !== null && _messageRef$current3 !== void 0 && _messageRef$current3.contains(e.target)) {
       return;
     }
     e.target.focus();

package/dist/esm/components/ConfirmationButton/ConfirmationButton.d.ts

@@ -5,8 +5,9 @@ import { ConfirmationModalProps } from "../ConfirmationModal";
 export type Props = PropsWithSpread<{
     /**
      * Additional props to pass to the confirmation modal.
+     * The `renderInPortal` and `portalRenderer` props are controlled internally by this component.
      */
-    confirmationModalProps: SubComponentProps<ConfirmationModalProps>;
+    confirmationModalProps: SubComponentProps<Omit<ConfirmationModalProps, "renderInPortal" | "portalRenderer">>;
     /**
      * An optional text to be shown when hovering over the button.<br/>
      * Defaults to the label of the confirm button in the modal.

package/dist/esm/components/ConfirmationButton/ConfirmationButton.js

@@ -1,4 +1,5 @@
-var _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint", "preModalOpenHook"];
+var _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint", "preModalOpenHook"],
+  _excluded2 = ["renderInPortal", "portalRenderer"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -30,8 +31,15 @@ export var ConfirmationButton = _ref => {
   var {
     openPortal,
     closePortal,
-    isOpen
+    isOpen,
+    Portal
   } = usePortal();
+  var _ref2 = confirmationModalProps,
+    {
+      renderInPortal: _ignoredRenderInPortal,
+      portalRenderer: _ignoredPortalRenderer
+    } = _ref2,
+    safeConfirmationModalProps = _objectWithoutProperties(_ref2, _excluded2);
   var handleCancelModal = () => {
     closePortal();
     if (confirmationModalProps.close) {
@@ -56,11 +64,11 @@ export var ConfirmationButton = _ref => {
     }
     shiftClickEnabled ? handleShiftClick(e) : openPortal(e);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement(ConfirmationModal, _extends({}, confirmationModalProps, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement(ConfirmationModal, _extends({}, safeConfirmationModalProps, {
     close: handleCancelModal,
     confirmButtonLabel: confirmationModalProps.confirmButtonLabel,
     onConfirm: handleConfirmModal,
-    renderInPortal: true
+    portalRenderer: Portal
   }), confirmationModalProps.children, showShiftClickHint && /*#__PURE__*/React.createElement("p", {
     className: "p-text--small u-text--muted u-hide--small"
   }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/React.createElement("code", null, "SHIFT"), " and clicking the action.")), /*#__PURE__*/React.createElement(ActionButton, _extends({}, actionButtonProps, {

package/dist/esm/components/ConfirmationModal/ConfirmationModal.d.ts

@@ -49,9 +49,16 @@ export type Props = PropsWithSpread<{
      * Whether to render the modal inside a Portal component.
      */
     renderInPortal?: boolean;
+    /**
+     * Optional custom portal renderer. If provided, it takes precedence
+     * over `renderInPortal`.
+     */
+    portalRenderer?: React.ComponentType<{
+        children: ReactNode;
+    }>;
 }, Omit<ModalProps, "buttonRow">>;
 /**
  * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
  */
-export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, renderInPortal, ...props }: Props) => React.JSX.Element;
+export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, renderInPortal, portalRenderer: PortalRenderer, ...props }: Props) => React.JSX.Element;
 export default ConfirmationModal;

package/dist/esm/components/ConfirmationModal/ConfirmationModal.js

@@ -1,4 +1,4 @@
-var _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps", "renderInPortal"];
+var _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps", "renderInPortal", "portalRenderer"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -7,10 +7,20 @@ import Button from "../Button";
 import Modal from "../Modal";
 import ActionButton from "../ActionButton";
 import { usePortal } from "../../external";
+var InternalPortalRenderer = _ref => {
+  var {
+    children
+  } = _ref;
+  var {
+    Portal
+  } = usePortal();
+  return /*#__PURE__*/React.createElement(Portal, null, children);
+};
+
 /**
  * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
  */
-export var ConfirmationModal = _ref => {
+export var ConfirmationModal = _ref2 => {
   var _cancelButtonProps$ty;
   var {
       cancelButtonLabel = "Cancel",
@@ -23,12 +33,10 @@ export var ConfirmationModal = _ref => {
       confirmButtonLoading,
       confirmButtonDisabled,
       confirmButtonProps,
-      renderInPortal = false
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var {
-    Portal
-  } = usePortal();
+      renderInPortal = false,
+      portalRenderer: PortalRenderer
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
   var handleClick = action => event => {
     if (!props.shouldPropagateClickEvent) {
       event.stopPropagation();
@@ -50,6 +58,12 @@ export var ConfirmationModal = _ref => {
       disabled: confirmButtonDisabled
     }), confirmButtonLabel))
   }, props), children);
-  return renderInPortal ? /*#__PURE__*/React.createElement(Portal, null, ModalElement) : ModalElement;
+  if (PortalRenderer) {
+    return /*#__PURE__*/React.createElement(PortalRenderer, null, ModalElement);
+  } else if (renderInPortal) {
+    return /*#__PURE__*/React.createElement(InternalPortalRenderer, null, ModalElement);
+  } else {
+    return ModalElement;
+  }
 };
 export default ConfirmationModal;

package/dist/esm/components/Tooltip/Tooltip.d.ts

@@ -62,7 +62,7 @@ export type Props = {
      */
     delay?: number;
 };
-export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
+export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment, messageHeight?: number) => Position;
 /**
  * This is the [React](https://reactjs.org/) component for Vanilla [Tooltips](https://vanillaframework.io/docs/patterns/tooltips).
  *

package/dist/esm/components/Tooltip/Tooltip.js

@@ -61,14 +61,27 @@ var getPositionStyle = (pos, wrapperNode) => {
     top
   };
 };
-export var adjustForWindow = (position, fitsWindow) => {
+export var adjustForWindow = function adjustForWindow(position, fitsWindow) {
+  var messageHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var newPosition = position;
   if (!fitsWindow.fromLeft.fitsLeft && newPosition === "left") {
     newPosition = "top-right";
   }
+  if (fitsWindow.fromTop.spaceAbove < messageHeight / 2 && newPosition === "left") {
+    newPosition = "btm-left";
+  }
+  if (fitsWindow.fromBottom.spaceBelow < messageHeight / 2 && newPosition === "left") {
+    newPosition = "top-left";
+  }
   if (!fitsWindow.fromRight.fitsRight && newPosition === "right") {
     newPosition = "top-left";
   }
+  if (fitsWindow.fromTop.spaceAbove < messageHeight / 2 && newPosition === "right") {
+    newPosition = "btm-right";
+  }
+  if (fitsWindow.fromBottom.spaceBelow < messageHeight / 2 && newPosition === "right") {
+    newPosition = "top-right";
+  }
   if (!fitsWindow.fromRight.fitsLeft && newPosition.endsWith("-right")) {
     newPosition = newPosition.replace("right", "left");
   }
@@ -158,7 +171,9 @@ var Tooltip = _ref => {
     });
   }, []);
   var onUpdateWindowFitment = useCallback(fitsWindow => {
-    setAdjustedPosition(adjustForWindow(position, fitsWindow));
+    var _messageRef$current$g, _messageRef$current;
+    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;
+    setAdjustedPosition(adjustForWindow(position, fitsWindow, messageHeight));
   }, [setAdjustedPosition, position]);
 
   // Handle mouse events.
@@ -178,19 +193,19 @@ var Tooltip = _ref => {
     };
   }, [handleKeyPress]);
   var handleBlur = e => {
-    var _wrapperRef$current, _messageRef$current, _wrapperRef$current2;
+    var _wrapperRef$current, _messageRef$current2, _wrapperRef$current2;
     // do not close if the focus is within the tooltip wrapper
     if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(document.activeElement)) {
       return;
     }
-    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) {
+    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) {
       cancelableClosePortal();
     }
   };
   var handleClick = e => {
-    var _messageRef$current2;
+    var _messageRef$current3;
     // ignore clicks within the tooltip message
-    if ((_messageRef$current2 = messageRef.current) !== null && _messageRef$current2 !== void 0 && _messageRef$current2.contains(e.target)) {
+    if ((_messageRef$current3 = messageRef.current) !== null && _messageRef$current3 !== void 0 && _messageRef$current3.contains(e.target)) {
       return;
     }
     e.target.focus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {