@canonical/react-components 0.47.0 → 0.47.2

package/dist/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,12 @@
+import { MutableRefObject, useRef } from "react";
+/**
+ * Handle clicks outside an element.
+ */
+export declare const useOnClickOutside: <E extends HTMLElement>(elementRef: MutableRefObject<E>, onClickOutside: () => void, { isEnabled }?: {
+    isEnabled: boolean;
+}) => void;
+/**
+ * Handle clicks outside an element.
+ * @returns A ref to pass to the element to handle clicks outside of.
+ */
+export declare const useClickOutside: <E extends HTMLElement>(onClickOutside: () => void) => MutableRefObject<E>;

package/dist/hooks/useOnClickOutside.js

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

package/dist/hooks/useOnEscapePressed.d.ts

@@ -1,4 +1,6 @@
 /**
  * Handle the escape key pressed.
  */
-export declare const useOnEscapePressed: (onEscape: () => void) => void;
+export declare const useOnEscapePressed: (onEscape: () => void, { isEnabled }?: {
+    isEnabled: boolean;
+}) => void;

package/dist/hooks/useOnEscapePressed.js

@@ -8,17 +8,24 @@ var _react = require("react");
 /**
  * Handle the escape key pressed.
  */
-var useOnEscapePressed = function useOnEscapePressed(onEscape) {
-  var keyDown = (0, _react.useCallback)(function (evt) {
+const useOnEscapePressed = function (onEscape) {
+  let {
+    isEnabled
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    isEnabled: true
+  };
+  const keyDown = (0, _react.useCallback)(evt => {
     if (evt.code === "Escape") {
       onEscape();
     }
   }, [onEscape]);
-  (0, _react.useEffect)(function () {
-    document.addEventListener("keydown", keyDown);
-    return function () {
+  (0, _react.useEffect)(() => {
+    if (isEnabled) {
+      document.addEventListener("keydown", keyDown);
+    }
+    return () => {
       document.removeEventListener("keydown", keyDown);
     };
-  }, [keyDown]);
+  }, [keyDown, isEnabled]);
 };
 exports.useOnEscapePressed = useOnEscapePressed;

package/dist/hooks/usePagination.js

@@ -5,12 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) 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.
@@ -22,25 +16,21 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function usePagination(data, options) {
   var _data$length;
-  var defaultOptions = {
+  const 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 () {
+  const {
+    itemsPerPage,
+    initialPage,
+    autoResetPage
+  } = Object.assign(defaultOptions, options);
+  const totalItems = (_data$length = data === null || data === void 0 ? void 0 : data.length) !== null && _data$length !== void 0 ? _data$length : 0;
+  const initialPageIndex = initialPage > 0 ? initialPage - 1 : 0;
+  const [pageIndex, setPageIndex] = (0, _react.useState)(initialPageIndex);
+  const startIndex = typeof itemsPerPage === "number" ? pageIndex * itemsPerPage : 0;
+  const paginate = pageNumber => setPageIndex(pageNumber - 1);
+  (0, _react.useEffect)(() => {
     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
@@ -49,14 +39,12 @@ function usePagination(data, options) {
       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]);
+  const pageData = (0, _react.useMemo)(() => typeof itemsPerPage === "number" ? data === null || data === void 0 ? void 0 : data.slice(startIndex, startIndex + itemsPerPage) : data, [startIndex, data, itemsPerPage]);
   return {
-    pageData: pageData,
+    pageData,
     currentPage: pageIndex + 1,
-    paginate: paginate,
-    itemsPerPage: itemsPerPage,
-    totalItems: totalItems
+    paginate,
+    itemsPerPage,
+    totalItems
   };
 }

package/dist/hooks/usePrevious.js

@@ -11,10 +11,10 @@ var _react = require("react");
  * @param setInitial - Whether it should initialise with the current value.
  * @return The previous value.
  */
-var usePrevious = function usePrevious(value) {
-  var setInitial = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var ref = (0, _react.useRef)(setInitial ? value : undefined);
-  (0, _react.useEffect)(function () {
+const usePrevious = function (value) {
+  let setInitial = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const ref = (0, _react.useRef)(setInitial ? value : undefined);
+  (0, _react.useEffect)(() => {
     ref.current = value;
   }, [value]);
   return ref.current;

package/dist/hooks/useThrottle.js

@@ -5,14 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useThrottle = exports.THROTTLE_DELAY = void 0;
 var _react = require("react");
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-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; }
-var THROTTLE_DELAY = 1000 / 60;
-exports.THROTTLE_DELAY = THROTTLE_DELAY;
+const THROTTLE_DELAY = exports.THROTTLE_DELAY = 1000 / 60;
 // eslint-disable-line @typescript-eslint/no-explicit-any
 
 /**
@@ -21,23 +14,23 @@ exports.THROTTLE_DELAY = THROTTLE_DELAY;
  * @param delay The throttle delay in ms.
  * @return The callback function wrapped in the throttle.
  */
-var useThrottle = function useThrottle(callback) {
-  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : THROTTLE_DELAY;
-  var timeout = (0, _react.useRef)();
-  var lastCall = (0, _react.useRef)();
-  var lastArgs = (0, _react.useRef)(null);
-  var throttle = (0, _react.useCallback)(function () {
+const useThrottle = function (callback) {
+  let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : THROTTLE_DELAY;
+  const timeout = (0, _react.useRef)();
+  const lastCall = (0, _react.useRef)();
+  const lastArgs = (0, _react.useRef)(null);
+  const throttle = (0, _react.useCallback)(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
     lastArgs.current = args;
-    var callCallback = function callCallback() {
-      callback.apply(void 0, _toConsumableArray(lastArgs.current));
+    const callCallback = () => {
+      callback(...lastArgs.current);
       lastCall.current = Date.now();
       timeout.current = null;
     };
-    var createTimeout = function createTimeout() {
-      timeout.current = window.setTimeout(function () {
+    const createTimeout = () => {
+      timeout.current = window.setTimeout(() => {
         callCallback();
         timeout.current = null;
       }, delay);
@@ -52,13 +45,11 @@ var useThrottle = function useThrottle(callback) {
       createTimeout();
     }
   }, [callback, delay]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      // Clear the timeout when unmounting.
-      if (timeout.current) {
-        clearTimeout(timeout.current);
-      }
-    };
+  (0, _react.useEffect)(() => () => {
+    // Clear the timeout when unmounting.
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
   }, []);
   return throttle;
 };

package/dist/hooks/useWindowFitment.js

@@ -17,13 +17,13 @@ var _useListener = require("./useListener");
  *                  to the mouse. In this case refernceNode will be used to
  *                  listen for mouseover events.
  */
-var useWindowFitment = function useWindowFitment(targetNode, referenceNode, callback) {
-  var spacer = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  var shouldCheck = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-  var fromMouse = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var htmlRef = (0, _react.useRef)(document.querySelector("html"));
-  var update = (0, _react.useCallback)(function (evt) {
-    var referenceCoordinates;
+const useWindowFitment = function (targetNode, referenceNode, callback) {
+  let spacer = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  let shouldCheck = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  let fromMouse = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  const htmlRef = (0, _react.useRef)(document.querySelector("html"));
+  const update = (0, _react.useCallback)(evt => {
+    let referenceCoordinates;
     if (fromMouse) {
       if (evt) {
         referenceCoordinates = {
@@ -38,26 +38,28 @@ var useWindowFitment = function useWindowFitment(targetNode, referenceNode, call
       referenceCoordinates = referenceNode.getBoundingClientRect();
     }
     if (shouldCheck && targetNode && referenceCoordinates) {
-      var _targetNode$getBoundi = targetNode.getBoundingClientRect(),
-        targetHeight = _targetNode$getBoundi.height,
-        targetWidth = _targetNode$getBoundi.width;
-      var _referenceCoordinates = referenceCoordinates,
-        referenceHeight = _referenceCoordinates.height,
-        referenceLeft = _referenceCoordinates.left,
-        referenceTop = _referenceCoordinates.top,
-        referenceWidth = _referenceCoordinates.width;
-      var referenceBottom = referenceTop + referenceHeight;
-      var referenceRight = referenceLeft + referenceWidth;
-      var referenceCenterX = referenceLeft + referenceWidth / 2;
-      var referenceCenterY = referenceTop + referenceHeight / 2;
-      var windowLeft = htmlRef.current.scrollLeft;
-      var windowRight = window.innerWidth - htmlRef.current.scrollLeft;
-      var windowTop = 0;
-      var windowBottom = window.innerHeight;
-      var heightIncludingSpace = targetHeight + spacer;
-      var widthIncludingSpace = targetWidth + spacer;
-      var widthFromCenter = targetWidth / 2;
-      var heightFromCenter = targetHeight / 2;
+      const {
+        height: targetHeight,
+        width: targetWidth
+      } = targetNode.getBoundingClientRect();
+      const {
+        height: referenceHeight,
+        left: referenceLeft,
+        top: referenceTop,
+        width: referenceWidth
+      } = referenceCoordinates;
+      const referenceBottom = referenceTop + referenceHeight;
+      const referenceRight = referenceLeft + referenceWidth;
+      const referenceCenterX = referenceLeft + referenceWidth / 2;
+      const referenceCenterY = referenceTop + referenceHeight / 2;
+      const windowLeft = htmlRef.current.scrollLeft;
+      const windowRight = window.innerWidth - htmlRef.current.scrollLeft;
+      const windowTop = 0;
+      const windowBottom = window.innerHeight;
+      const heightIncludingSpace = targetHeight + spacer;
+      const widthIncludingSpace = targetWidth + spacer;
+      const widthFromCenter = targetWidth / 2;
+      const heightFromCenter = targetHeight / 2;
       callback({
         fromTop: {
           fitsAbove: referenceTop - heightIncludingSpace > windowTop,
@@ -105,7 +107,7 @@ var useWindowFitment = function useWindowFitment(targetNode, referenceNode, call
   (0, _useListener.useListener)(window, update, "resize", true, shouldCheck && !fromMouse);
   (0, _useListener.useListener)(window, update, "scroll", true, shouldCheck && !fromMouse);
   (0, _useListener.useListener)(referenceNode, update, "mousemove", true, fromMouse && shouldCheck);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!fromMouse) {
       update();
     }

package/dist/index.d.ts

@@ -47,6 +47,7 @@ export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
 export { default as Tooltip } from "./components/Tooltip";
+export { default as TablePagination } from "./components/TablePagination";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";
 export type { ArticlePaginationProps } from "./components/ArticlePagination";
@@ -93,7 +94,8 @@ 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 { useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
+export type { TablePaginationProps } from "./components/TablePagination";
+export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
 export type { WindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";
 export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";