@canonical/react-components 0.34.2 → 0.37.0

package/dist/components/Table/Table.js

@@ -13,7 +13,7 @@ var _excluded = ["children", "className", "expanding", "responsive"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || 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 _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; }
 

package/dist/components/TableCell/TableCell.js

@@ -13,7 +13,7 @@ var _excluded = ["children", "className", "hasOverflow", "expanding", "hidden",
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || 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 _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; }
 

package/dist/components/TableHeader/TableHeader.js

@@ -11,7 +11,7 @@ var _excluded = ["children", "sort"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || 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 _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; }
 

package/dist/components/TableRow/TableRow.js

@@ -11,7 +11,7 @@ var _excluded = ["children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || 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 _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; }
 

package/dist/components/Tabs/Tabs.js

@@ -13,7 +13,7 @@ var _excluded = ["active", "className", "component", "label", "listItemClassName
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || 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 _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; }
 

package/dist/components/Textarea/Textarea.js

@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || 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 _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 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; }
 

package/dist/components/Tooltip/Tooltip.js

@@ -223,18 +223,47 @@ var Tooltip = function Tooltip(_ref) {
   (0, _hooks.useListener)(wrapperRef.current, mouseHandler, "mousemove", true, followMouse && isOpen); // Handle adjusting the position of the tooltip so that it remains on screen.
 
   (0, _hooks.useWindowFitment)(messageRef.current, wrapperRef.current, onUpdateWindowFitment, 20, isOpen, autoAdjust && followMouse);
+  var handleKeyPress = (0, _react.useCallback)(function (event) {
+    if (event.key === "Escape") {
+      closePortal();
+    }
+  }, [closePortal]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener("keypress", handleKeyPress);
+    return function () {
+      window.removeEventListener("keypress", handleKeyPress);
+    };
+  }, [handleKeyPress]);
 
   var handleBlur = function handleBlur(e) {
-    var _messageRef$current;
+    var _wrapperRef$current, _messageRef$current;
+
+    // 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)) : e.target !== messageRef.current) {
       closePortal();
     }
   };
 
+  var handleClick = function handleClick(e) {
+    var _messageRef$current2;
+
+    // ignore clicks within the tooltip message
+    if ((_messageRef$current2 = messageRef.current) !== null && _messageRef$current2 !== void 0 && _messageRef$current2.contains(e.target)) {
+      return;
+    }
+
+    e.target.focus();
+    openPortal();
+  };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message ? /*#__PURE__*/_react.default.createElement("span", {
     className: className,
     onBlur: handleBlur,
+    onClick: handleClick,
     onFocus: openPortal,
     onMouseOut: handleBlur,
     onMouseOver: openPortal

package/dist/hooks/index.d.ts

@@ -1,6 +1,9 @@
-export { useWindowFitment } from "./useWindowFitment";
+export { useClickOutside } from "./useClickOutside";
+export { useId } from "./useId";
 export { useListener } from "./useListener";
+export { useOnEscapePressed } from "./useOnEscapePressed";
 export { usePrevious } from "./usePrevious";
 export { useThrottle } from "./useThrottle";
-export { useId } from "./useId";
+export { usePagination } from "./usePagination";
+export { useWindowFitment } from "./useWindowFitment";
 export type { WindowFitment } from "./useWindowFitment";

package/dist/hooks/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useClickOutside", {
+  enumerable: true,
+  get: function get() {
+    return _useClickOutside.useClickOutside;
+  }
+});
 Object.defineProperty(exports, "useId", {
   enumerable: true,
   get: function get() {
@@ -15,6 +21,18 @@ Object.defineProperty(exports, "useListener", {
     return _useListener.useListener;
   }
 });
+Object.defineProperty(exports, "useOnEscapePressed", {
+  enumerable: true,
+  get: function get() {
+    return _useOnEscapePressed.useOnEscapePressed;
+  }
+});
+Object.defineProperty(exports, "usePagination", {
+  enumerable: true,
+  get: function get() {
+    return _usePagination.usePagination;
+  }
+});
 Object.defineProperty(exports, "usePrevious", {
   enumerable: true,
   get: function get() {
@@ -34,12 +52,18 @@ Object.defineProperty(exports, "useWindowFitment", {
   }
 });
 
-var _useWindowFitment = require("./useWindowFitment");
+var _useClickOutside = require("./useClickOutside");
+
+var _useId = require("./useId");
 
 var _useListener = require("./useListener");
 
+var _useOnEscapePressed = require("./useOnEscapePressed");
+
 var _usePrevious = require("./usePrevious");
 
 var _useThrottle = require("./useThrottle");
 
-var _useId = require("./useId");
+var _usePagination = require("./usePagination");
+
+var _useWindowFitment = require("./useWindowFitment");

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from "react";
+/**
+ * Handle clicks outside an element.
+ * @returns An id and ref to pass to the element to handle clicks
+ * outside of.
+ */
+export declare const useClickOutside: <E extends HTMLElement>(onClickOutside: () => void) => [MutableRefObject<E>, string];

package/dist/hooks/useClickOutside.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClickOutside = void 0;
+
+var _react = require("react");
+
+var _useId = require("./useId");
+
+/**
+ * Handle clicks outside an element.
+ * @returns An id and ref to pass to the element to handle clicks
+ * outside of.
+ */
+var useClickOutside = function useClickOutside(onClickOutside) {
+  var wrapperRef = (0, _react.useRef)(null);
+  var id = (0, _useId.useId)();
+  var handleClickOutside = (0, _react.useCallback)(function (evt) {
+    var _evt$target, _wrapperRef$current;
+
+    var target = evt.target; // The target might be something like an SVG node which doesn't provide
+    // the class name as a string.
+
+    var isValidTarget = typeof (evt === null || evt === void 0 ? void 0 : (_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : _evt$target.className) === "string";
+
+    if (!isValidTarget || wrapperRef.current && !((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(target)) && target.id !== id) {
+      onClickOutside();
+    }
+  }, [id, onClickOutside]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("click", handleClickOutside, false);
+    return function () {
+      return document.removeEventListener("click", handleClickOutside, false);
+    };
+  }, [handleClickOutside]);
+  return [wrapperRef, id];
+};
+
+exports.useClickOutside = useClickOutside;

package/dist/hooks/useOnEscapePressed.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Handle the escape key pressed.
+ */
+export declare const useOnEscapePressed: (onEscape: () => void) => void;

package/dist/hooks/useOnEscapePressed.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnEscapePressed = void 0;
+
+var _react = require("react");
+
+/**
+ * Handle the escape key pressed.
+ */
+var useOnEscapePressed = function useOnEscapePressed(onEscape) {
+  var keyDown = (0, _react.useCallback)(function (evt) {
+    if (evt.code === "Escape") {
+      onEscape();
+    }
+  }, [onEscape]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("keydown", keyDown);
+    return function () {
+      document.removeEventListener("keydown", keyDown);
+    };
+  }, [keyDown]);
+};
+
+exports.useOnEscapePressed = useOnEscapePressed;

package/dist/hooks/usePagination.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A hook that handles pagination.
+ * @param data - The data array to paginate.
+ * @param {Object} options
+ * @param {number} [options.itemsPerPage] - Number of items per page. Returns all items if no value has been provided.
+ * @param {number} [options.initialPage=1] - Initial page number. Defaults to 1.
+ * @param {boolean} [options.autoResetPage=false] - Whether to reset the page number to 1 when the data changes.
+ */
+export declare function usePagination<D, I = number | null>(data: Array<D>, options?: {
+    itemsPerPage: I;
+    initialPage?: number;
+    autoResetPage?: boolean;
+}): {
+    pageData: Array<D>;
+    currentPage: number;
+    paginate: (pageNumber: number) => void;
+    itemsPerPage: I;
+    totalItems: number;
+};

package/dist/hooks/usePagination.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePagination = usePagination;
+
+var _react = require("react");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * A hook that handles pagination.
+ * @param data - The data array to paginate.
+ * @param {Object} options
+ * @param {number} [options.itemsPerPage] - Number of items per page. Returns all items if no value has been provided.
+ * @param {number} [options.initialPage=1] - Initial page number. Defaults to 1.
+ * @param {boolean} [options.autoResetPage=false] - Whether to reset the page number to 1 when the data changes.
+ */
+function usePagination(data, options) {
+  var _data$length;
+
+  var defaultOptions = {
+    initialPage: 1,
+    autoResetPage: false
+  };
+
+  var _Object$assign = Object.assign(defaultOptions, options),
+      itemsPerPage = _Object$assign.itemsPerPage,
+      initialPage = _Object$assign.initialPage,
+      autoResetPage = _Object$assign.autoResetPage;
+
+  var totalItems = (_data$length = data === null || data === void 0 ? void 0 : data.length) !== null && _data$length !== void 0 ? _data$length : 0;
+  var initialPageIndex = initialPage > 0 ? initialPage - 1 : 0;
+
+  var _useState = (0, _react.useState)(initialPageIndex),
+      _useState2 = _slicedToArray(_useState, 2),
+      pageIndex = _useState2[0],
+      setPageIndex = _useState2[1];
+
+  var startIndex = typeof itemsPerPage === "number" ? pageIndex * itemsPerPage : 0;
+
+  var paginate = function paginate(pageNumber) {
+    return setPageIndex(pageNumber - 1);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (typeof itemsPerPage === "number" && startIndex >= totalItems) {
+      !autoResetPage && Math.floor(totalItems / itemsPerPage) > 0 ? // go to the last available page if the current page is out of bounds
+      setPageIndex(Math.floor(totalItems / itemsPerPage) - 1) : // go to the initial page if autoResetPage is true
+      setPageIndex(0);
+    }
+  }, [pageIndex, startIndex, setPageIndex, totalItems, itemsPerPage, autoResetPage]);
+  var pageData = (0, _react.useMemo)(function () {
+    return typeof itemsPerPage === "number" ? data === null || data === void 0 ? void 0 : data.slice(startIndex, startIndex + itemsPerPage) : data;
+  }, [startIndex, data, itemsPerPage]);
+  return {
+    pageData: pageData,
+    currentPage: pageIndex + 1,
+    paginate: paginate,
+    itemsPerPage: itemsPerPage,
+    totalItems: totalItems
+  };
+}

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export { default as List } from "./components/List";
 export { default as Loader } from "./components/Loader";
 export { default as MainTable } from "./components/MainTable";
 export { default as ModularTable } from "./components/ModularTable";
+export { default as Navigation } from "./components/Navigation";
 export { default as Modal } from "./components/Modal";
 export { default as Notification, NotificationSeverity, } from "./components/Notification";
 export { default as Pagination } from "./components/Pagination";
@@ -31,6 +32,7 @@ export { default as Select } from "./components/Select";
 export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";
 export { default as Spinner } from "./components/Spinner";
+export { default as StatusLabel, StatusLabelAppearance, } from "./components/StatusLabel";
 export { default as Strip } from "./components/Strip";
 export { default as SummaryButton } from "./components/SummaryButton";
 export { default as Table } from "./components/Table";
@@ -63,6 +65,7 @@ export type { ListProps } from "./components/List";
 export type { MainTableProps } from "./components/MainTable";
 export type { ModularTableProps } from "./components/ModularTable";
 export type { ModalProps } from "./components/Modal";
+export type { GenerateLink, LogoProps, NavigationProps, NavItem, NavLink, } from "./components/Navigation";
 export type { NotificationProps } from "./components/Notification";
 export type { PaginationProps } from "./components/Pagination";
 export type { RadioInputProps } from "./components/RadioInput";
@@ -72,6 +75,7 @@ export type { SearchBoxProps } from "./components/SearchBox";
 export type { SelectProps } from "./components/Select";
 export type { SliderProps } from "./components/Slider";
 export type { SpinnerProps } from "./components/Spinner";
+export type { StatusLabelProps } from "./components/StatusLabel";
 export type { StripProps } from "./components/Strip";
 export type { SummaryButtonProps } from "./components/SummaryButton";
 export type { TableProps } from "./components/Table";
@@ -81,6 +85,6 @@ export type { TableRowProps } from "./components/TableRow";
 export type { TabsProps } from "./components/Tabs";
 export type { TextareaProps } from "./components/Textarea";
 export type { TooltipProps } from "./components/Tooltip";
-export { useWindowFitment, useListener, usePrevious, useThrottle, useId, } from "./hooks";
+export { useClickOutside, useId, useListener, useOnEscapePressed, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
 export type { WindowFitment } from "./hooks";
-export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";
+export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, Theme, TSFixMe, ValueOf, } from "./types";

package/dist/index.js

@@ -155,6 +155,12 @@ Object.defineProperty(exports, "ModularTable", {
     return _ModularTable.default;
   }
 });
+Object.defineProperty(exports, "Navigation", {
+  enumerable: true,
+  get: function get() {
+    return _Navigation.default;
+  }
+});
 Object.defineProperty(exports, "Notification", {
   enumerable: true,
   get: function get() {
@@ -221,6 +227,18 @@ Object.defineProperty(exports, "Spinner", {
     return _Spinner.default;
   }
 });
+Object.defineProperty(exports, "StatusLabel", {
+  enumerable: true,
+  get: function get() {
+    return _StatusLabel.default;
+  }
+});
+Object.defineProperty(exports, "StatusLabelAppearance", {
+  enumerable: true,
+  get: function get() {
+    return _StatusLabel.StatusLabelAppearance;
+  }
+});
 Object.defineProperty(exports, "Strip", {
   enumerable: true,
   get: function get() {
@@ -281,6 +299,12 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "useClickOutside", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useClickOutside;
+  }
+});
 Object.defineProperty(exports, "useId", {
   enumerable: true,
   get: function get() {
@@ -293,6 +317,12 @@ Object.defineProperty(exports, "useListener", {
     return _hooks.useListener;
   }
 });
+Object.defineProperty(exports, "useOnEscapePressed", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useOnEscapePressed;
+  }
+});
 Object.defineProperty(exports, "usePrevious", {
   enumerable: true,
   get: function get() {
@@ -354,6 +384,8 @@ var _MainTable = _interopRequireDefault(require("./components/MainTable"));
 
 var _ModularTable = _interopRequireDefault(require("./components/ModularTable"));
 
+var _Navigation = _interopRequireDefault(require("./components/Navigation"));
+
 var _Modal = _interopRequireDefault(require("./components/Modal"));
 
 var _Notification = _interopRequireWildcard(require("./components/Notification"));
@@ -378,6 +410,8 @@ var _Switch = _interopRequireDefault(require("./components/Switch"));
 
 var _Spinner = _interopRequireDefault(require("./components/Spinner"));
 
+var _StatusLabel = _interopRequireWildcard(require("./components/StatusLabel"));
+
 var _Strip = _interopRequireDefault(require("./components/Strip"));
 
 var _SummaryButton = _interopRequireDefault(require("./components/SummaryButton"));

package/dist/types/index.d.ts

@@ -35,3 +35,16 @@ export declare type TSFixMe = any;
  * defined in EnumLike.
  */
 export declare type ValueOf<T> = T[keyof T];
+/**
+ * The Vanilla theme types.
+ */
+export declare enum Theme {
+    /**
+     * The dark Vanilla theme.
+     */
+    DARK = "dark",
+    /**
+     * The light Vanilla theme.
+     */
+    LIGHT = "light"
+}

package/dist/types/index.js

@@ -2,4 +2,52 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.Theme = void 0;
+
+/**
+ * This type should be used for all className props in order to ensure
+ * consistency across components.
+ */
+
+/**
+ * The allowable heading levels.
+ */
+
+/**
+ * This type can be used when defining props that also spread the props of
+ * something else. It ensures that the defined component props are never
+ * overwritten by the spread props.
+ */
+
+/**
+ * The allowable sort directions e.g. for a sortable table.
+ */
+
+/**
+ * This type can be used when passing props to a sub component. It makes all
+ * component props optional.
+ */
+
+/**
+ * This type is simply an alias for the 'any' type and should be used sparingly,
+ * if at all.
+ */
+// eslint-disable-line @typescript-eslint/no-explicit-any
+
+/**
+ * This type allows for converting an object const into an enum-like construct,
+ * e.g. value: ValueOf<typeof EnumLike> will only allow value to be a value
+ * defined in EnumLike.
+ */
+
+/**
+ * The Vanilla theme types.
+ */
+var Theme;
+exports.Theme = Theme;
+
+(function (Theme) {
+  Theme["DARK"] = "dark";
+  Theme["LIGHT"] = "light";
+})(Theme || (exports.Theme = Theme = {}));