@canonical/react-components 0.40.0 → 0.41.0

package/dist/components/ActionButton/ActionButton.js

@@ -45,13 +45,14 @@ exports.LOADER_MIN_DURATION = LOADER_MIN_DURATION;
 var SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
 
 exports.SUCCESS_DURATION = SUCCESS_DURATION;
-var Label;
-exports.Label = Label;
 
-(function (Label) {
+var Label = /*#__PURE__*/function (Label) {
   Label["WAITING"] = "Waiting for action to complete";
   Label["SUCCESS"] = "Action completed";
-})(Label || (exports.Label = Label = {}));
+  return Label;
+}({});
+
+exports.Label = Label;
 
 var ActionButton = function ActionButton(_ref) {
   var appearance = _ref.appearance,

package/dist/components/Chip/Chip.js

@@ -23,13 +23,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-var Label;
-exports.Label = Label;
-
-(function (Label) {
+var Label = /*#__PURE__*/function (Label) {
   Label["Dismiss"] = "Dismiss";
-})(Label || (exports.Label = Label = {}));
+  return Label;
+}({});
 
+exports.Label = Label;
 var ChipType = {
   CAUTION: "caution",
   INFORMATION: "information",

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -49,17 +49,17 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-var Label;
+var Label = /*#__PURE__*/function (Label) {
+  Label["Toggle"] = "Toggle menu";
+  return Label;
+}({});
 /**
  * The props for the ContextualMenu component.
  * @template L - The type of the link props.
  */
 
-exports.Label = Label;
 
-(function (Label) {
-  Label["Toggle"] = "Toggle menu";
-})(Label || (exports.Label = Label = {}));
+exports.Label = Label;
 
 /**
  * Get the node to use for positioning the menu.

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -48,17 +48,17 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var Label;
+var Label = /*#__PURE__*/function (Label) {
+  Label["Dropdown"] = "submenu";
+  return Label;
+}({});
 /**
  * The type of the menu links.
  * @template L - The type of the link props.
  */
 
-exports.Label = Label;
 
-(function (Label) {
-  Label["Dropdown"] = "submenu";
-})(Label || (exports.Label = Label = {}));
+exports.Label = Label;
 
 /**
  * Calculate the styles for the menu.

package/dist/components/MainTable/MainTable.js

@@ -94,7 +94,7 @@ var generateHeaders = function generateHeaders(currentSortKey, currentSortDirect
     return /*#__PURE__*/_react.default.createElement(_TableHeader.default, _extends({
       key: index,
       sort: sortDirection,
-      onClick: sortable ? updateSort.bind(_this, setSortKey, setSortDirection, sortKey, sortDirection) : undefined
+      onClick: sortable && sortKey ? updateSort.bind(_this, setSortKey, setSortDirection, sortKey, sortDirection) : undefined
     }, props), content);
   }); // When there is expanding content then provide an extra hidden header to
   // account for the extra cell in the body rows.

package/dist/components/ModularTable/ModularTable.d.ts

@@ -37,5 +37,5 @@ export type Props<D extends Record<string, unknown>> = PropsWithSpread<{
     getCellProps?: (cell: Cell<D>) => Partial<TableCellProps & HTMLProps<HTMLTableCellElement>>;
     getRowId?: UseTableOptions<D>["getRowId"];
 }, HTMLProps<HTMLTableElement>>;
-declare function ModularTable({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, ...props }: Props<Record<string, unknown>>): JSX.Element;
+declare function ModularTable<D extends Record<string, unknown>>({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, ...props }: Props<D>): JSX.Element;
 export default ModularTable;

package/dist/components/ModularTable/ModularTable.js

@@ -25,15 +25,49 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-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; }
+var generateCell = function generateCell(cell, getCellProps) {
+  var _cell$column$getCellI, _cell$column;
+
+  var hasColumnIcon = cell.column.getCellIcon;
+  var iconName = hasColumnIcon && ((_cell$column$getCellI = (_cell$column = cell.column).getCellIcon) === null || _cell$column$getCellI === void 0 ? void 0 : _cell$column$getCellI.call(_cell$column, cell));
+  return /*#__PURE__*/_react.default.createElement(_TableCell.default, cell.getCellProps([{
+    className: cell.column.className
+  }, {
+    className: hasColumnIcon ? "p-table__cell--icon-placeholder" : ""
+  }, _objectSpread({}, getCellProps === null || getCellProps === void 0 ? void 0 : getCellProps(cell))]), iconName && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: iconName
+  }), cell.render("Cell"));
+};
+
+var generateRows = function generateRows(rows, prepareRow, getRowProps, getCellProps) {
+  var tableRows = [];
+  rows.forEach(function (row) {
+    var _row$subRows;
 
-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; }
+    // This function is responsible for lazily preparing a row for rendering.
+    // Any row that you intend to render in your table needs to be passed to this function before every render.
+    // see: https://react-table.tanstack.com/docs/api/useTable#instance-properties
+    prepareRow(row);
+    tableRows.push( /*#__PURE__*/_react.default.createElement(_TableRow.default, row.getRowProps(getRowProps === null || getRowProps === void 0 ? void 0 : getRowProps(row)), row.cells.map(function (cell) {
+      return generateCell(cell, getCellProps);
+    })));
+
+    if ((_row$subRows = row.subRows) !== null && _row$subRows !== void 0 && _row$subRows.length) {
+      tableRows = tableRows.concat(generateRows(row.subRows, prepareRow, getRowProps, getCellProps));
+    }
+  });
+  return tableRows;
+};
 
 function ModularTable(_ref) {
   var data = _ref.data,
@@ -68,27 +102,11 @@ function ModularTable(_ref) {
       }, {
         className: column.getCellIcon ? "p-table__cell--icon-placeholder" : ""
       }, _objectSpread({}, getHeaderProps === null || getHeaderProps === void 0 ? void 0 : getHeaderProps(column)), // Only call this if we want it to be sortable too.
-      sortable ? column.getSortByToggleProps() : {}])), column.render("Header"));
-    }));
-  })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), rows.map(function (row) {
-    // This function is responsible for lazily preparing a row for rendering.
-    // Any row that you intend to render in your table needs to be passed to this function before every render.
-    // see: https://react-table.tanstack.com/docs/api/useTable#instance-properties
-    prepareRow(row);
-    return /*#__PURE__*/_react.default.createElement(_TableRow.default, row.getRowProps(getRowProps === null || getRowProps === void 0 ? void 0 : getRowProps(row)), row.cells.map(function (cell) {
-      var _cell$column$getCellI, _cell$column;
-
-      var hasColumnIcon = cell.column.getCellIcon;
-      var iconName = hasColumnIcon && ((_cell$column$getCellI = (_cell$column = cell.column).getCellIcon) === null || _cell$column$getCellI === void 0 ? void 0 : _cell$column$getCellI.call(_cell$column, cell));
-      return /*#__PURE__*/_react.default.createElement(_TableCell.default, cell.getCellProps([{
-        className: cell.column.className
-      }, {
-        className: hasColumnIcon ? "p-table__cell--icon-placeholder" : ""
-      }, _objectSpread({}, getCellProps === null || getCellProps === void 0 ? void 0 : getCellProps(cell))]), iconName && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        name: iconName
-      }), cell.render("Cell"));
+      sortable ? column.getSortByToggleProps({
+        title: undefined
+      }) : {}])), column.render("Header"));
     }));
-  }), showEmpty && /*#__PURE__*/_react.default.createElement(_TableRow.default, null, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+  })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), generateRows(rows, prepareRow, getRowProps, getCellProps), showEmpty && /*#__PURE__*/_react.default.createElement(_TableRow.default, null, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
     colSpan: columns.length
   }, emptyMsg)), footer && /*#__PURE__*/_react.default.createElement(_TableRow.default, null, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
     colSpan: columns.length

package/dist/components/Notification/Notification.d.ts

@@ -1,3 +1,4 @@
+import { ElementType } from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread, ValueOf } from "../../types";
 export declare enum Label {
@@ -65,10 +66,14 @@ export type Props = PropsWithSpread<{
      * The title of the notification.
      */
     title?: ReactNode;
+    /**
+     * Optional element or component to use for the title.
+     */
+    titleElement?: ElementType;
     /**
      * **Deprecated**. Use `severity` instead.
      */
     type?: never;
 }, HTMLProps<HTMLDivElement>>;
-declare const Notification: ({ actions, borderless, children, className, close, inline, onDismiss, severity, status, timeout, timestamp, title, type, ...props }: Props) => JSX.Element;
+declare const Notification: ({ actions, borderless, children, className, close, inline, onDismiss, severity, status, timeout, timestamp, title, titleElement: TitleComponent, type, ...props }: Props) => JSX.Element;
 export default Notification;

package/dist/components/Notification/Notification.js

@@ -15,7 +15,7 @@ var _Button = _interopRequireWildcard(require("../Button"));
 
 var _utils = require("../../utils");
 
-var _excluded = ["actions", "borderless", "children", "className", "close", "inline", "onDismiss", "severity", "status", "timeout", "timestamp", "title", "type"];
+var _excluded = ["actions", "borderless", "children", "className", "close", "inline", "onDismiss", "severity", "status", "timeout", "timestamp", "title", "titleElement", "type"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -31,13 +31,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-var Label;
-exports.Label = Label;
-
-(function (Label) {
+var Label = /*#__PURE__*/function (Label) {
   Label["Close"] = "Close notification";
-})(Label || (exports.Label = Label = {}));
+  return Label;
+}({});
 
+exports.Label = Label;
 var NotificationSeverity = {
   CAUTION: "caution",
   INFORMATION: "information",
@@ -64,6 +63,8 @@ var Notification = function Notification(_ref) {
       timeout = _ref.timeout,
       timestamp = _ref.timestamp,
       title = _ref.title,
+      _ref$titleElement = _ref.titleElement,
+      TitleComponent = _ref$titleElement === void 0 ? "h5" : _ref$titleElement,
       type = _ref.type,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -90,7 +91,7 @@ var Notification = function Notification(_ref) {
     className: (0, _classnames.default)(className, (_classNames = {}, _defineProperty(_classNames, "p-notification--".concat(severity), !!severity), _defineProperty(_classNames, "p-notification", !severity), _defineProperty(_classNames, "is-borderless", borderless), _defineProperty(_classNames, "is-inline", inline), _classNames))
   }, props), /*#__PURE__*/_react.default.createElement("div", {
     className: "p-notification__content"
-  }, title && /*#__PURE__*/_react.default.createElement("h5", {
+  }, title && /*#__PURE__*/_react.default.createElement(TitleComponent, {
     className: "p-notification__title",
     "data-testid": "notification-title"
   }, title), inline && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002"), /*#__PURE__*/_react.default.createElement("p", {

package/dist/components/Pagination/PaginationButton/PaginationButton.js

@@ -11,13 +11,13 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Label;
-exports.Label = Label;
-
-(function (Label) {
+var Label = /*#__PURE__*/function (Label) {
   Label["Next"] = "Next page";
   Label["Previous"] = "Previous page";
-})(Label || (exports.Label = Label = {}));
+  return Label;
+}({});
+
+exports.Label = Label;
 
 var PaginationButton = function PaginationButton(_ref) {
   var direction = _ref.direction,

package/dist/components/PasswordToggle/PasswordToggle.js

@@ -45,17 +45,17 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-var Label;
+var Label = /*#__PURE__*/function (Label) {
+  Label["Hide"] = "Hide";
+  Label["Show"] = "Show";
+  return Label;
+}({});
 /**
  * The props for the Password Toggle component.
  */
 
-exports.Label = Label;
 
-(function (Label) {
-  Label["Hide"] = "Hide";
-  Label["Show"] = "Show";
-})(Label || (exports.Label = Label = {}));
+exports.Label = Label;
 
 var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var caution = _ref.caution,

package/dist/components/SearchAndFilter/SearchAndFilter.js

@@ -53,14 +53,14 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-var Label;
-exports.Label = Label;
-
-(function (Label) {
+var Label = /*#__PURE__*/function (Label) {
   Label["AddFilter"] = "Add filter";
   Label["Clear"] = "Clear input";
   Label["SearchAndFilter"] = "Search and filter";
-})(Label || (exports.Label = Label = {}));
+  return Label;
+}({});
+
+exports.Label = Label;
 
 var SearchAndFilter = function SearchAndFilter(_ref) {
   var _ref$existingSearchDa = _ref.existingSearchData,
@@ -99,9 +99,15 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
       searchContainerActive = _useState12[0],
       setSearchContainerActive = _useState12[1];
 
+  var _useState13 = (0, _react.useState)(),
+      _useState14 = _slicedToArray(_useState13, 2),
+      maxHeight = _useState14[0],
+      setMaxHeight = _useState14[1];
+
   var searchAndFilterRef = (0, _react.useRef)(null);
   var searchContainerRef = (0, _react.useRef)(null);
-  var searchBoxRef = (0, _react.useRef)(null); // Return searchData to parent component
+  var searchBoxRef = (0, _react.useRef)(null);
+  var panel = (0, _react.useRef)(); // Return searchData to parent component
 
   (0, _react.useEffect)(function () {
     var mounted = true;
@@ -242,7 +248,10 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
 
       resizeObserverSupported && ((_wrapperWidthObserver = wrapperWidthObserver) === null || _wrapperWidthObserver === void 0 ? void 0 : _wrapperWidthObserver.disconnect());
     };
-  }, [searchData]); // Add search prompt value to search on Enter key
+  }, [searchData]);
+  (0, _hooks.useWindowFitment)(panel.current, searchAndFilterRef.current, function (fitsWindow) {
+    return setMaxHeight(fitsWindow.fromBottom.spaceBelow - 16);
+  }, 0, !filterPanelHidden); // Add search prompt value to search on Enter key
 
   var searchPromptKeyDown = function searchPromptKeyDown(e) {
     if (e.key === "Enter") {
@@ -333,7 +342,13 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
     tabIndex: 0
   }, "+", overflowSearchTermCounter)), (filterPanelData.length > 0 || searchTerm.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: "p-search-and-filter__panel",
-    "aria-hidden": filterPanelHidden
+    "aria-hidden": filterPanelHidden,
+    ref: panel,
+    style: {
+      maxHeight: maxHeight,
+      minHeight: "5rem",
+      overflowX: "auto"
+    }
   }, /*#__PURE__*/_react.default.createElement("div", null, searchTerm.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "p-search-and-filter__search-prompt",
     onClick: function onClick() {

package/dist/components/SearchBox/SearchBox.js

@@ -27,13 +27,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-var Label;
-exports.Label = Label;
-
-(function (Label) {
+var Label = /*#__PURE__*/function (Label) {
   Label["Clear"] = "Clear search field";
   Label["Search"] = "Search";
-})(Label || (exports.Label = Label = {}));
+  return Label;
+}({});
+
+exports.Label = Label;
 
 var SearchBox = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedRef) {
   var _ref$autocomplete = _ref.autocomplete,

package/dist/components/Tooltip/Tooltip.js

@@ -279,26 +279,24 @@ var Tooltip = function Tooltip(_ref) {
     return child && /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, {
       "aria-describedby": tooltipId
     }) : child;
-  })), /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)("p-tooltip--".concat(adjustedPosition), "is-detached", {
-      "u-off-screen": !isOpen
-    }, tooltipClassName),
+  })), isOpen ? /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("p-tooltip--".concat(adjustedPosition), "is-detached", tooltipClassName),
     "data-testid": "tooltip-portal",
-    style: positionStyle // style={
-    //   isOpen
-    //     ? (positionStyle as React.CSSProperties)
-    //     : { left: -9999 }
-    // }
-
+    style: positionStyle
   }, /*#__PURE__*/_react.default.createElement("span", {
     role: "tooltip",
     className: "p-tooltip__message",
+    onClick: function onClick(event) {
+      // Prevent clicks inside the message from bubbling to parent
+      // click handlers.
+      event.stopPropagation();
+    },
     ref: messageRef,
     id: tooltipId,
     style: {
       zIndex: zIndex
     }
-  }, message)))) : /*#__PURE__*/_react.default.createElement("span", {
+  }, message))) : null) : /*#__PURE__*/_react.default.createElement("span", {
     className: className
   }, children));
 };

package/dist/enums.js

@@ -8,10 +8,10 @@ exports.Theme = void 0;
 /**
  * The Vanilla theme types.
  */
-var Theme;
-exports.Theme = Theme;
-
-(function (Theme) {
+var Theme = /*#__PURE__*/function (Theme) {
   Theme["DARK"] = "dark";
   Theme["LIGHT"] = "light";
-})(Theme || (exports.Theme = Theme = {}));
+  return Theme;
+}({});
+
+exports.Theme = Theme;

package/dist/hooks/useWindowFitment.d.ts

@@ -2,24 +2,36 @@ export type WindowFitment = {
     fromTop: {
         fitsAbove: boolean;
         fitsBelow: boolean;
+        spaceAbove: number;
+        spaceBelow: number;
     };
     fromBottom: {
         fitsAbove: boolean;
         fitsBelow: boolean;
+        spaceAbove: number;
+        spaceBelow: number;
     };
     fromLeft: {
         fitsLeft: boolean;
         fitsRight: boolean;
+        spaceLeft: number;
+        spaceRight: number;
     };
     fromRight: {
         fitsLeft: boolean;
         fitsRight: boolean;
+        spaceLeft: number;
+        spaceRight: number;
     };
     fromCenter: {
         fitsLeft: boolean;
         fitsRight: boolean;
         fitsAbove: boolean;
         fitsBelow: boolean;
+        spaceLeft: number;
+        spaceRight: number;
+        spaceAbove: number;
+        spaceBelow: number;
         fitsCentered: {
             fitsAbove: boolean;
             fitsBelow: boolean;

package/dist/hooks/useWindowFitment.js

@@ -67,25 +67,37 @@ var useWindowFitment = function useWindowFitment(targetNode, referenceNode, call
       callback({
         fromTop: {
           fitsAbove: referenceTop - heightIncludingSpace > windowTop,
-          fitsBelow: referenceTop + heightIncludingSpace < windowBottom
+          fitsBelow: referenceTop + heightIncludingSpace < windowBottom,
+          spaceAbove: Math.abs(windowTop - referenceTop),
+          spaceBelow: windowBottom - referenceTop
         },
         fromBottom: {
           fitsAbove: referenceBottom - heightIncludingSpace > windowTop,
-          fitsBelow: referenceBottom + heightIncludingSpace < windowBottom
+          fitsBelow: referenceBottom + heightIncludingSpace < windowBottom,
+          spaceAbove: Math.abs(windowTop - referenceBottom),
+          spaceBelow: windowBottom - referenceBottom
         },
         fromLeft: {
           fitsLeft: referenceLeft - widthIncludingSpace > windowLeft,
-          fitsRight: referenceLeft + widthIncludingSpace < windowRight
+          fitsRight: referenceLeft + widthIncludingSpace < windowRight,
+          spaceLeft: Math.abs(windowLeft - referenceLeft),
+          spaceRight: windowRight - referenceLeft
         },
         fromRight: {
           fitsLeft: referenceRight - widthIncludingSpace > windowLeft,
-          fitsRight: referenceRight + widthIncludingSpace < windowRight
+          fitsRight: referenceRight + widthIncludingSpace < windowRight,
+          spaceLeft: Math.abs(windowLeft - referenceRight),
+          spaceRight: windowRight - referenceRight
         },
         fromCenter: {
           fitsLeft: referenceCenterX - widthIncludingSpace > windowLeft,
           fitsRight: referenceCenterX + widthIncludingSpace < windowRight,
           fitsAbove: referenceCenterY - heightIncludingSpace > windowTop,
           fitsBelow: referenceCenterY + heightIncludingSpace < windowBottom,
+          spaceAbove: Math.abs(windowTop - referenceCenterY),
+          spaceBelow: windowBottom - referenceCenterY,
+          spaceLeft: Math.abs(windowLeft - referenceCenterX),
+          spaceRight: windowRight - referenceCenterX,
           fitsCentered: {
             fitsLeft: referenceCenterX - widthFromCenter > windowLeft,
             fitsRight: referenceCenterX + widthFromCenter < windowRight,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -22,11 +22,11 @@
   },
   "homepage": "https://canonical.github.io/react-components",
   "devDependencies": {
-    "@babel/cli": "7.20.7",
-    "@babel/eslint-parser": "7.19.1",
-    "@babel/preset-typescript": "7.18.6",
-    "@percy/cli": "1.18.0",
-    "@percy/storybook": "4.3.4",
+    "@babel/cli": "7.21.5",
+    "@babel/eslint-parser": "7.21.3",
+    "@babel/preset-typescript": "7.21.5",
+    "@percy/cli": "1.24.0",
+    "@percy/storybook": "4.3.6",
     "@storybook/addon-a11y": "6.5.16",
     "@storybook/addon-controls": "6.5.16",
     "@storybook/addon-docs": "6.5.16",
@@ -36,74 +36,74 @@
     "@storybook/react": "6.5.16",
     "@storybook/theming": "6.5.16",
     "@testing-library/cypress": "9.0.0",
-    "@testing-library/dom": "8.20.0",
+    "@testing-library/dom": "9.2.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.4.3",
-    "@typescript-eslint/eslint-plugin": "5.51.0",
-    "@typescript-eslint/parser": "5.51.0",
+    "@typescript-eslint/eslint-plugin": "5.59.1",
+    "@typescript-eslint/parser": "5.59.1",
     "babel-jest": "27.5.1",
     "babel-loader": "9.1.2",
     "babel-plugin-module-resolver": "5.0.0",
-    "babel-plugin-typescript-to-proptypes": "2.0.0",
+    "babel-plugin-typescript-to-proptypes": "2.1.0",
     "concurrently": "7.6.0",
     "css-loader": "6.7.3",
-    "cypress": "12.7.0",
-    "deepmerge": "4.3.0",
-    "eslint": "8.33.0",
-    "eslint-config-prettier": "8.6.0",
+    "cypress": "12.11.0",
+    "deepmerge": "4.3.1",
+    "eslint": "8.39.0",
+    "eslint-config-prettier": "8.8.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-cypress": "2.13.3",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-testing-library": "5.10.0",
+    "eslint-plugin-testing-library": "5.10.3",
     "jest": "27.5.1",
     "npm-package-json-lint": "5.4.2",
-    "prettier": "2.8.4",
+    "prettier": "2.8.8",
     "react": "17.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "17.0.2",
-    "sass": "1.58.0",
+    "sass": "1.62.1",
     "sass-loader": "10.4.1",
-    "style-loader": "3.3.1",
+    "style-loader": "3.3.2",
     "stylelint": "14.16.1",
-    "stylelint-config-prettier": "9.0.4",
+    "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "2.0.0",
     "ts-jest": "27.1.5",
-    "tsc-alias": "1.8.2",
+    "tsc-alias": "1.8.6",
     "typescript": "4.9.5",
-    "vanilla-framework": "3.12.1",
+    "vanilla-framework": "3.14.0",
     "wait-on": "5.3.0",
-    "webpack": "5.75.0"
+    "webpack": "5.81.0"
   },
   "dependencies": {
     "@types/jest": "27.5.2",
-    "@types/node": "18.14.2",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "17.0.18",
+    "@types/node": "18.16.3",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "17.0.20",
     "@types/react-table": "7.7.14",
     "classnames": "2.3.2",
-    "nanoid": "3.3.4",
+    "nanoid": "3.3.6",
     "prop-types": "15.8.1",
     "react-table": "7.8.0",
-    "react-useportal": "1.0.17"
+    "react-useportal": "1.0.18"
   },
   "resolutions": {
-    "@types/react": "18.0.28",
-    "@types/react-dom": "17.0.18",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "17.0.20",
     "postcss": "^8.3.11"
   },
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
-    "vanilla-framework": "3.12.1"
+    "vanilla-framework": "3.14.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",

package/dist/testing/mock-scss.js

@@ -1,4 +0,0 @@
-"use strict";
-
-// A fake module to use in place of required scss files.
-module.exports = {};