@canonical/react-components 1.5.0 → 1.7.0

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

@@ -0,0 +1,245 @@
+import classNames from "classnames";
+import React, { useCallback, useEffect, useId, useRef, useState } from "react";
+import usePortal from "react-useportal";
+import { useWindowFitment, useListener } from "../../hooks";
+export var position = {
+  btmCenter: "btm-center",
+  btmLeft: "btm-left",
+  btmRight: "btm-right",
+  left: "left",
+  right: "right",
+  topCenter: "top-center",
+  topLeft: "top-left",
+  topRight: "top-right"
+};
+var getPositionStyle = (pos, wrapperNode) => {
+  if (!wrapperNode) {
+    return null;
+  }
+  var dimensions = wrapperNode.getBoundingClientRect();
+  var {
+    x,
+    y,
+    height,
+    width
+  } = dimensions;
+  var left = x + window.scrollX || 0;
+  var top = y + window.scrollY || 0;
+  switch (pos) {
+    case "btm-center":
+      left += width / 2;
+      top += height;
+      break;
+    case "btm-left":
+      top += height;
+      break;
+    case "btm-right":
+      left += width;
+      top += height;
+      break;
+    case "left":
+      top += height / 2;
+      break;
+    case "right":
+      left += width;
+      top += height / 2;
+      break;
+    case "top-center":
+      left += width / 2;
+      break;
+    case "top-left":
+      break;
+    case "top-right":
+      left += width;
+      break;
+    default:
+      break;
+  }
+  return {
+    position: "absolute",
+    left,
+    top
+  };
+};
+export var adjustForWindow = (position, fitsWindow) => {
+  var newPosition = position;
+  if (!fitsWindow.fromLeft.fitsLeft && newPosition === "left") {
+    newPosition = "top-right";
+  }
+  if (!fitsWindow.fromRight.fitsRight && newPosition === "right") {
+    newPosition = "top-left";
+  }
+  if (!fitsWindow.fromRight.fitsLeft && newPosition.endsWith("-right")) {
+    newPosition = newPosition.replace("right", "left");
+  }
+  if (!fitsWindow.fromLeft.fitsRight && newPosition.endsWith("-left")) {
+    newPosition = newPosition.replace("left", "right");
+  }
+  if (!fitsWindow.fromTop.fitsAbove && newPosition.startsWith("top")) {
+    newPosition = newPosition.replace("top", "btm");
+  }
+  if (!fitsWindow.fromBottom.fitsBelow && newPosition.startsWith("btm")) {
+    newPosition = newPosition.replace("btm", "top");
+  }
+  if (!fitsWindow.fromLeft.fitsRight && !fitsWindow.fromRight.fitsLeft && (newPosition.endsWith("-left") || newPosition.endsWith("-right"))) {
+    newPosition = newPosition.replace("left", "center").replace("right", "center");
+  }
+  if (newPosition.endsWith("center") && (fitsWindow.fromCenter.fitsCentered.fitsRight || fitsWindow.fromCenter.fitsCentered.fitsLeft)) {
+    if (!fitsWindow.fromCenter.fitsCentered.fitsRight) {
+      newPosition = newPosition.replace("center", "right");
+    }
+    if (!fitsWindow.fromCenter.fitsCentered.fitsLeft) {
+      newPosition = newPosition.replace("center", "left");
+    }
+  }
+  return newPosition;
+};
+
+/**
+ * This is the [React](https://reactjs.org/) component for Vanilla [Tooltips](https://vanillaframework.io/docs/patterns/tooltips).
+ *
+ * Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element on the screen.
+ *
+ * They can be used to provide information about concepts/terms/actions that are not self-explanatory or well known.
+ *
+ * An alternative use of tooltips is to provide information on a disabled actionable element, e.g. for disabled buttons, providing information about why they are disabled.
+ */
+var Tooltip = _ref => {
+  var {
+    autoAdjust = true,
+    children,
+    className,
+    followMouse = false,
+    message,
+    position = "top-left",
+    positionElementClassName,
+    tooltipClassName,
+    zIndex,
+    delay = 350
+  } = _ref;
+  var wrapperRef = useRef(null);
+  var messageRef = useRef(null);
+  var [adjustedPosition, setAdjustedPosition] = useState(position);
+  var [positionStyle, setPositionStyle] = useState({
+    position: "absolute",
+    // Initially position the tooltip of the screen in case it gets shown
+    // before setting the position.
+    left: -9999999,
+    top: -9999999
+  });
+  var {
+    openPortal,
+    closePortal,
+    isOpen,
+    Portal
+  } = usePortal({
+    programmaticallyOpen: true
+  });
+  var tooltipId = useId();
+  var [timer, setTimer] = useState(null);
+  var cancelableClosePortal = useCallback(() => {
+    clearTimeout(timer);
+    closePortal();
+  }, [timer, closePortal]);
+  useEffect(() => {
+    if (isOpen && !followMouse && wrapperRef.current) {
+      // Position the tooltip when it becomes visible.
+      setPositionStyle(getPositionStyle(adjustedPosition, wrapperRef.current));
+    }
+  }, [adjustedPosition, isOpen, followMouse]);
+  var mouseHandler = useCallback(evt => {
+    // Set the position of the tooltip next to the mouse.
+    setPositionStyle({
+      // Don't allow the tooltip to block the mouse events.
+      pointerEvents: "none",
+      position: "absolute",
+      left: evt.pageX,
+      top: evt.pageY
+    });
+  }, []);
+  var onUpdateWindowFitment = useCallback(fitsWindow => {
+    setAdjustedPosition(adjustForWindow(position, fitsWindow));
+  }, [setAdjustedPosition, position]);
+
+  // Handle mouse events.
+  useListener(wrapperRef.current, mouseHandler, "mousemove", true, followMouse && isOpen);
+
+  // Handle adjusting the position of the tooltip so that it remains on screen.
+  useWindowFitment(messageRef.current, wrapperRef.current, onUpdateWindowFitment, 20, isOpen, autoAdjust && followMouse);
+  var handleKeyPress = useCallback(event => {
+    if (event.key === "Escape") {
+      cancelableClosePortal();
+    }
+  }, [cancelableClosePortal]);
+  useEffect(() => {
+    window.addEventListener("keypress", handleKeyPress);
+    return () => {
+      window.removeEventListener("keypress", handleKeyPress);
+    };
+  }, [handleKeyPress]);
+  var handleBlur = e => {
+    var _wrapperRef$current, _messageRef$current, _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) {
+      cancelableClosePortal();
+    }
+  };
+  var 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(e);
+  };
+  var delayedOpenPortal = useCallback(() => {
+    if (isOpen) {
+      return;
+    }
+    if (timer) {
+      clearTimeout(timer);
+    }
+    var timeout = setTimeout(() => openPortal(), delay);
+    setTimer(timeout);
+  }, [delay, openPortal, timer, isOpen]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, message ? /*#__PURE__*/React.createElement("span", {
+    className: className,
+    onBlur: handleBlur,
+    onClick: handleClick,
+    onFocus: openPortal,
+    onMouseOut: handleBlur,
+    onMouseOver: delayedOpenPortal
+  }, /*#__PURE__*/React.createElement("span", {
+    className: positionElementClassName,
+    ref: wrapperRef,
+    style: {
+      display: "inline-block"
+    }
+  }, React.Children.map(children, child => child && /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+    "aria-describedby": isOpen ? tooltipId : undefined
+  }) : child)), isOpen ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("span", {
+    className: classNames("p-tooltip--".concat(adjustedPosition), "is-detached", tooltipClassName),
+    "data-testid": "tooltip-portal",
+    style: positionStyle
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "tooltip",
+    className: "p-tooltip__message",
+    onClick: event => {
+      // Prevent clicks inside the message from bubbling to parent
+      // click handlers.
+      event.stopPropagation();
+    },
+    ref: messageRef,
+    id: tooltipId,
+    style: {
+      zIndex: zIndex
+    }
+  }, message))) : null) : /*#__PURE__*/React.createElement("span", {
+    className: className
+  }, children));
+};
+export default Tooltip;

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Tooltip from "./Tooltip";
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Default: Story;
+export declare const FollowMouse: Story;
+/**
+ * The tooltip elements are displayed inside a [Portal](https://reactjs.org/docs/portals.html) so that the tooltip is not constrained by its current position in the DOM.
+ * Sometimes however, you need to target the tooltip elements. This can be achieved by passing class names to the tooltip elements. You can also pass classes to the elements that trigger and position the tooltip.
+ */
+export declare const TargetingElements: Story;

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

@@ -0,0 +1,62 @@
+import React from "react";
+import Button from "../Button";
+import Tooltip, { position } from "./Tooltip";
+var Template = args => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      padding: "3rem"
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, args, /*#__PURE__*/React.createElement(Button, {
+    className: "u-no-margin--bottom"
+  }, "Hover over me!")));
+};
+var meta = {
+  component: Tooltip,
+  render: Template,
+  tags: ["autodocs"],
+  argTypes: {
+    position: {
+      control: {
+        type: "radio"
+      },
+      options: Object.values(position)
+    }
+  }
+};
+export default meta;
+export var Default = {
+  render: Template.bind({}),
+  name: "Default",
+  args: {
+    message: /*#__PURE__*/React.createElement(React.Fragment, null, "Tooltip", " ", /*#__PURE__*/React.createElement("a", {
+      href: "#todo",
+      target: "_blank"
+    }, "Link1"))
+  }
+};
+export var FollowMouse = {
+  render: Template.bind({}),
+  name: "Follow mouse",
+  args: {
+    followMouse: true,
+    message: "Tooltip message to display.",
+    position: "top-center"
+  }
+};
+
+/**
+ * The tooltip elements are displayed inside a [Portal](https://reactjs.org/docs/portals.html) so that the tooltip is not constrained by its current position in the DOM.
+ * Sometimes however, you need to target the tooltip elements. This can be achieved by passing class names to the tooltip elements. You can also pass classes to the elements that trigger and position the tooltip.
+ */
+export var TargetingElements = {
+  render: Template.bind({}),
+  name: "Targeting elements",
+  args: {
+    className: "custom-wrapping-class",
+    positionElementClassName: "custom-position-class",
+    tooltipClassName: "custom-tooltip-class",
+    message: "Tooltip message to display."
+  }
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default, position } from "./Tooltip";
+export type { Props as TooltipProps } from "./Tooltip";

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

@@ -0,0 +1 @@
+export { default, position } from "./Tooltip";

package/dist/esm/enums.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The Vanilla theme types.
+ */
+export declare enum Theme {
+    /**
+     * The dark Vanilla theme.
+     */
+    DARK = "dark",
+    /**
+     * The light Vanilla theme.
+     */
+    LIGHT = "light"
+}

package/dist/esm/enums.js

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

package/dist/esm/hooks/index.d.ts

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

package/dist/esm/hooks/index.js

@@ -0,0 +1,8 @@
+export { useOnClickOutside, useClickOutside } from "./useOnClickOutside";
+export { useId } from "./useId";
+export { useListener } from "./useListener";
+export { useOnEscapePressed } from "./useOnEscapePressed";
+export { usePrevious } from "./usePrevious";
+export { useThrottle } from "./useThrottle";
+export { usePagination } from "./usePagination";
+export { useWindowFitment } from "./useWindowFitment";

package/dist/esm/hooks/useId.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
+ */
+export declare const useId: () => string;

package/dist/esm/hooks/useId.js

@@ -0,0 +1,13 @@
+import { useId as useIdReact } from "react";
+import { IS_DEV } from "../utils";
+
+/**
+ * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
+ */
+export var useId = () => {
+  var id = useIdReact();
+  if (IS_DEV) {
+    console.warn('The useId hook has been deprecated. Use `import { useId } from "react";` instead.');
+  }
+  return id;
+};

package/dist/esm/hooks/useListener.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A hook that handles attaching/removing listeners and smartly reattaching if
+ * any of the attributes change.
+ * @param targetNode The node to attach the listener to.
+ * @param callback The function to call from the listener.
+ * @param eventType The event name.
+ * @param shouldThrottle Whether the callback calls should be throttled.
+ * @param shouldListen When the listener should be active.
+ * @param options Native event listener options.
+ */
+export declare const useListener: (targetNode: Window | HTMLElement, callback: (...args: any[]) => any, eventType: string, shouldThrottle?: boolean, shouldListen?: boolean, options?: boolean | AddEventListenerOptions) => void;

package/dist/esm/hooks/useListener.js

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from "react";
+import { useThrottle } from "./useThrottle";
+import { usePrevious } from "./usePrevious";
+
+/**
+ * A hook that handles attaching/removing listeners and smartly reattaching if
+ * any of the attributes change.
+ * @param targetNode The node to attach the listener to.
+ * @param callback The function to call from the listener.
+ * @param eventType The event name.
+ * @param shouldThrottle Whether the callback calls should be throttled.
+ * @param shouldListen When the listener should be active.
+ * @param options Native event listener options.
+ */
+export var useListener = function useListener(targetNode, callback, eventType) {
+  var shouldThrottle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var shouldListen = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  var options = arguments.length > 5 ? arguments[5] : undefined;
+  var isListening = useRef(false);
+  var throttle = useThrottle(callback);
+  var eventListener = useRef(shouldThrottle ? throttle : callback);
+  var previousEventType = usePrevious(eventType);
+  var previousShouldThrottle = usePrevious(shouldThrottle);
+  var previousTargetNode = usePrevious(targetNode);
+  var previousCallback = usePrevious(callback);
+  var previousOptions = usePrevious(options);
+  useEffect(() => {
+    // If any of the props related to the attached listener changed then the
+    // listener needs to be re-attached.
+    var listenerAttributesChanged = callback !== previousCallback || eventType !== previousEventType || shouldThrottle !== previousShouldThrottle || targetNode !== previousTargetNode || options !== previousOptions;
+    if (isListening.current && (!shouldListen || listenerAttributesChanged)) {
+      previousTargetNode.removeEventListener(previousEventType, eventListener.current, previousOptions);
+      isListening.current = false;
+    }
+    if (shouldThrottle !== previousShouldThrottle || callback !== previousCallback) {
+      // Set the listener to the callback, or used the throttled callback.
+      eventListener.current = shouldThrottle ? throttle : callback;
+    }
+    if (targetNode && shouldListen && !isListening.current) {
+      targetNode.addEventListener(eventType, eventListener.current, options);
+      isListening.current = true;
+    }
+  }, [callback, eventType, options, previousCallback, previousEventType, previousOptions, previousShouldThrottle, previousTargetNode, shouldListen, shouldThrottle, targetNode, throttle]);
+  useEffect(() => () => {
+    // Unattach the listener if the component gets unmounted while
+    // listening.
+    if (targetNode && isListening.current) {
+      targetNode.removeEventListener(eventType, eventListener.current, options);
+    }
+  }, [eventType, targetNode, options]);
+};

package/dist/esm/hooks/useListener.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/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: ReturnType<typeof useRef<E | null>>, 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/esm/hooks/useOnClickOutside.js

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useRef } from "react";
+
+/**
+ * Handle clicks outside an element.
+ */
+export var useOnClickOutside = function useOnClickOutside(elementRef, onClickOutside) {
+  var {
+    isEnabled
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    isEnabled: true
+  };
+  var handleClickOutside = useCallback(evt => {
+    var _evt$target, _elementRef$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 || (_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]);
+  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.
+ */
+export var useClickOutside = onClickOutside => {
+  var ref = useRef(null);
+  useOnClickOutside(ref, onClickOutside);
+  return ref;
+};

package/dist/esm/hooks/useOnClickOutside.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/hooks/useOnEscapePressed.d.ts

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

package/dist/esm/hooks/useOnEscapePressed.js

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

package/dist/esm/hooks/useOnEscapePressed.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/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/esm/hooks/usePagination.js

@@ -0,0 +1,45 @@
+import { useMemo, useEffect, useState } from "react";
+
+/**
+ * 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 function usePagination(data, options) {
+  var _data$length;
+  var defaultOptions = {
+    initialPage: 1,
+    autoResetPage: false
+  };
+  var {
+    itemsPerPage,
+    initialPage,
+    autoResetPage
+  } = Object.assign(defaultOptions, options);
+  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 [pageIndex, setPageIndex] = useState(initialPageIndex);
+  var startIndex = typeof itemsPerPage === "number" ? pageIndex * itemsPerPage : 0;
+  var paginate = pageNumber => setPageIndex(pageNumber - 1);
+  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
+      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 = useMemo(() => typeof itemsPerPage === "number" ? data === null || data === void 0 ? void 0 : data.slice(startIndex, startIndex + itemsPerPage) : data, [startIndex, data, itemsPerPage]);
+  return {
+    pageData,
+    currentPage: pageIndex + 1,
+    paginate,
+    itemsPerPage,
+    totalItems
+  };
+}

package/dist/esm/hooks/usePagination.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/hooks/usePrevious.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A hook to handle storing the previous value of anything.
+ * @param value - The value to watch.
+ * @param setInitial - Whether it should initialise with the current value.
+ * @return The previous value.
+ */
+export declare const usePrevious: <T>(value: T, setInitial?: boolean) => T;

package/dist/esm/hooks/usePrevious.js

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * A hook to handle storing the previous value of anything.
+ * @param value - The value to watch.
+ * @param setInitial - Whether it should initialise with the current value.
+ * @return The previous value.
+ */
+export var usePrevious = function usePrevious(value) {
+  var setInitial = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var ref = useRef(setInitial ? value : undefined);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};

package/dist/esm/hooks/usePrevious.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/hooks/useThrottle.d.ts

@@ -0,0 +1,9 @@
+export declare const THROTTLE_DELAY: number;
+export type Callback = (...args: any[]) => any;
+/**
+ * A hook to handle throttling calls to a function.
+ * @param callback The function to throttle.
+ * @param delay The throttle delay in ms.
+ * @return The callback function wrapped in the throttle.
+ */
+export declare const useThrottle: (callback: Callback, delay?: number) => Callback;