@canonical/react-components 3.11.1 → 3.12.1

package/dist/components/MainTable/MainTable.js

@@ -51,7 +51,7 @@ const generateHeaders = (currentSortKey, currentSortDirection, expanding, header
     return /*#__PURE__*/_react.default.createElement(_TableHeader.default, _extends({
       key: index,
       sort: sortDirection,
-      onClick: sortable && sortKey ? updateSort.bind(void 0, setSortKey, setSortDirection, sortKey, sortDirection) : undefined
+      onSort: sortable && sortKey ? updateSort.bind(void 0, setSortKey, setSortDirection, sortKey, sortDirection) : undefined
     }, props), content);
   });
   // When there is expanding content then provide an extra hidden header to

package/dist/components/TableHeader/TableHeader.d.ts

@@ -9,6 +9,8 @@ export type Props = PropsWithSpread<{
      * The direction of sorting, if applicable.
      */
     sort?: SortDirection;
+    /** Function to call when the sort button is clicked. */
+    onSort?: () => void;
 }, HTMLProps<HTMLTableHeaderCellElement>>;
-declare const TableHeader: ({ children, sort, ...props }: Props) => React.JSX.Element;
+declare const TableHeader: ({ children, sort, onSort, ...props }: Props) => React.JSX.Element;
 export default TableHeader;

package/dist/components/TableHeader/TableHeader.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-const _excluded = ["children", "sort"];
+const _excluded = ["children", "sort", "onSort"];
 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; }
@@ -13,12 +13,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const TableHeader = _ref => {
   let {
       children,
-      sort
+      sort,
+      onSort
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const headerContents = () => sort && onSort ? /*#__PURE__*/_react.default.createElement("button", {
+    className: "p-table__sort-button",
+    onClick: onSort
+  }, children) : children;
   return /*#__PURE__*/_react.default.createElement("th", _extends({
     role: "columnheader",
     "aria-sort": sort
-  }, props), children);
+  }, props), headerContents());
 };
 var _default = exports.default = TableHeader;

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/MainTable/MainTable.js

@@ -42,7 +42,7 @@ var generateHeaders = (currentSortKey, currentSortDirection, expanding, headers,
     return /*#__PURE__*/React.createElement(TableHeader, _extends({
       key: index,
       sort: sortDirection,
-      onClick: sortable && sortKey ? updateSort.bind(this, setSortKey, setSortDirection, sortKey, sortDirection) : undefined
+      onSort: sortable && sortKey ? updateSort.bind(this, setSortKey, setSortDirection, sortKey, sortDirection) : undefined
     }, props), content);
   });
   // When there is expanding content then provide an extra hidden header to

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

@@ -9,6 +9,8 @@ export type Props = PropsWithSpread<{
      * The direction of sorting, if applicable.
      */
     sort?: SortDirection;
+    /** Function to call when the sort button is clicked. */
+    onSort?: () => void;
 }, HTMLProps<HTMLTableHeaderCellElement>>;
-declare const TableHeader: ({ children, sort, ...props }: Props) => React.JSX.Element;
+declare const TableHeader: ({ children, sort, onSort, ...props }: Props) => React.JSX.Element;
 export default TableHeader;

package/dist/esm/components/TableHeader/TableHeader.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "sort"];
+var _excluded = ["children", "sort", "onSort"];
 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; }
@@ -6,12 +6,17 @@ import React from "react";
 var TableHeader = _ref => {
   var {
       children,
-      sort
+      sort,
+      onSort
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  var headerContents = () => sort && onSort ? /*#__PURE__*/React.createElement("button", {
+    className: "p-table__sort-button",
+    onClick: onSort
+  }, children) : children;
   return /*#__PURE__*/React.createElement("th", _extends({
     role: "columnheader",
     "aria-sort": sort
-  }, props), children);
+  }, props), headerContents());
 };
 export default TableHeader;

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.1",
+  "version": "3.12.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {