@canonical/react-components 1.10.0 → 2.1.0

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

@@ -1,4 +1,5 @@
 import type { HTMLProps, ReactNode } from "react";
+import React from "react";
 import type { PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
     /**
@@ -6,5 +7,5 @@ export type Props = PropsWithSpread<{
      */
     children: ReactNode;
 }, HTMLProps<HTMLTableRowElement>>;
-declare const TableRow: ({ children, ...trProps }: Props) => JSX.Element;
+declare const TableRow: ({ children, ...trProps }: Props) => React.JSX.Element;
 export default TableRow;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { HTMLProps, ElementType, ReactNode, ComponentType } from "react";
 import type { ClassName } from "../../types";
 export type TabLink<P = null> = {
@@ -41,5 +42,5 @@ export type Props<P = null> = {
 Tabs organise and allow navigation between groups of content that are related and at the same level
 of hierarchy.
  */
-declare const Tabs: <P>({ className, links, listClassName, }: Props<P>) => JSX.Element;
+declare const Tabs: <P>({ className, links, listClassName, }: Props<P>) => React.JSX.Element;
 export default Tabs;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { TextareaHTMLAttributes, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 /**
@@ -66,5 +67,5 @@ export type Props = PropsWithSpread<{
  *
  * The Textarea component defines a multi-line text input control.
  */
-declare const Textarea: ({ caution, className, error, grow, help, id, label, labelClassName, onKeyUp, onControlEnter, required, stacked, style, success, takeFocus, wrapperClassName, ...props }: Props) => JSX.Element;
+declare const Textarea: ({ caution, className, error, grow, help, id, label, labelClassName, onKeyUp, onControlEnter, required, stacked, style, success, takeFocus, wrapperClassName, ...props }: Props) => React.JSX.Element;
 export default Textarea;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ReactNode } from "react";
 import type { WindowFitment } from "../../hooks";
 import type { ClassName, ValueOf } from "../../types";
@@ -71,5 +72,5 @@ export declare const adjustForWindow: (position: Position, fitsWindow: WindowFit
  *
  * 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.
  */
-declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, delay, }: Props) => JSX.Element;
+declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, delay, }: Props) => React.JSX.Element;
 export default Tooltip;

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

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React, { useCallback, useEffect, useId, useRef, useState } from "react";
-import usePortal from "react-useportal";
 import { useWindowFitment, useListener } from "../../hooks";
+import { usePortal } from "../../external";
 export var position = {
   btmCenter: "btm-center",
   btmLeft: "btm-left",

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

@@ -0,0 +1,2 @@
+export { usePortal } from "./usePortal";
+export type { UsePortalOptions } from "./usePortal";

package/dist/esm/external/index.js

@@ -0,0 +1 @@
+export { usePortal } from "./usePortal";

package/dist/esm/external/usePortal.d.ts

@@ -0,0 +1,39 @@
+/**
+ * This is a reference implementation of the usePortal hook from react-useportal: https://github.com/iamthesiz/react-useportal/blob/master/usePortal.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/react-useportal/blob/master/license.md
+ */
+import { ReactNode, SyntheticEvent, RefObject } from "react";
+type CustomEvent<T = HTMLElement> = {
+    event?: SyntheticEvent<T, Event>;
+    portal: RefObject<HTMLElement>;
+    targetEl: RefObject<HTMLElement>;
+} & SyntheticEvent<T, Event>;
+type CustomEventHandler<T = HTMLElement> = (customEvent: CustomEvent<T>) => void;
+export type UsePortalOptions = {
+    closeOnOutsideClick?: boolean;
+    closeOnEsc?: boolean;
+    bindTo?: RefObject<HTMLElement>;
+    isOpen?: boolean;
+    onOpen?: CustomEventHandler;
+    onClose?: CustomEventHandler;
+    onPortalClick?: CustomEventHandler;
+    programmaticallyOpen?: boolean;
+};
+export declare const errorMessage1 = "You must either add a `ref` to the element you are interacting with or pass an `event` to openPortal(e) or togglePortal(e) when the `programmaticallyOpen` option is not set to `true`.";
+export declare const usePortal: ({ closeOnOutsideClick, closeOnEsc, bindTo, isOpen: defaultIsOpen, onOpen, onClose, onPortalClick, programmaticallyOpen, }?: UsePortalOptions) => (boolean | RefObject<HTMLElement> | ((e?: SyntheticEvent<HTMLElement, Event>) => void) | (({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element))[] & {
+    isOpen: boolean;
+    openPortal: (e?: SyntheticEvent<HTMLElement, Event>) => void;
+    ref: RefObject<HTMLElement>;
+    closePortal: (e?: SyntheticEvent<HTMLElement, Event>) => void;
+    togglePortal: (e?: SyntheticEvent<HTMLElement, Event>) => void;
+    Portal: ({ children }: {
+        children: ReactNode;
+    }) => import("react").JSX.Element;
+    portalRef: RefObject<HTMLElement>;
+    bind: {
+        ref: RefObject<HTMLElement>;
+    };
+};
+export {};

package/dist/esm/external/usePortal.js

@@ -0,0 +1,125 @@
+/**
+ * This is a reference implementation of the usePortal hook from react-useportal: https://github.com/iamthesiz/react-useportal/blob/master/usePortal.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/react-useportal/blob/master/license.md
+ */
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { useSSR } from "./useSSR";
+export var errorMessage1 = "You must either add a `ref` to the element you are interacting with or pass an `event` to openPortal(e) or togglePortal(e) when the `programmaticallyOpen` option is not set to `true`.";
+export var usePortal = function usePortal() {
+  var {
+    closeOnOutsideClick = true,
+    closeOnEsc = true,
+    bindTo,
+    // attach the portal to this node in the DOM
+    isOpen: defaultIsOpen = false,
+    onOpen,
+    onClose,
+    onPortalClick,
+    programmaticallyOpen = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var {
+    isServer,
+    isBrowser
+  } = useSSR();
+  var [isOpen, makeOpen] = useState(defaultIsOpen);
+  // we use this ref because `isOpen` is stale for handleOutsideMouseClick
+  var open = useRef(isOpen);
+  var setOpen = useCallback(v => {
+    // workaround to not have stale `isOpen` in the handleOutsideMouseClick
+    open.current = v;
+    makeOpen(v);
+  }, []);
+  var targetEl = useRef(null); // this is the element you are clicking/hovering/whatever, to trigger opening the portal
+  var portal = useRef(isBrowser ? document.createElement("div") : null);
+  useEffect(() => {
+    if (isBrowser && !portal.current) portal.current = document.createElement("div");
+  }, [isBrowser, portal]);
+  var elToMountTo = useMemo(() => {
+    if (isServer) return null;
+    return bindTo && bindTo.current || document.body;
+  }, [isServer, bindTo]);
+  var createCustomEvent = e => {
+    if (!e) return {
+      portal,
+      targetEl,
+      event: e
+    };
+    var event = e || {};
+    if (event.persist) event.persist();
+    event.portal = portal;
+    event.targetEl = targetEl;
+    event.event = e;
+    var {
+      currentTarget
+    } = e;
+    if (!targetEl.current && currentTarget && currentTarget !== document) targetEl.current = event.currentTarget;
+    return event;
+  };
+  var openPortal = useCallback(e => {
+    if (isServer) return;
+    var customEvent = createCustomEvent(e);
+    // for some reason, when we don't have the event argument, there
+    // is a weird race condition. Would like to see if we can remove
+    // setTimeout, but for now this works
+    if (targetEl.current == null && !programmaticallyOpen) {
+      setTimeout(() => setOpen(true), 0);
+      throw Error(errorMessage1);
+    }
+    if (onOpen) onOpen(customEvent);
+    setOpen(true);
+  }, [isServer, portal, setOpen, targetEl, onOpen, programmaticallyOpen]);
+  var closePortal = useCallback(e => {
+    if (isServer) return;
+    var customEvent = createCustomEvent(e);
+    if (onClose && open.current) onClose(customEvent);
+    if (open.current) setOpen(false);
+  }, [isServer, onClose, setOpen]);
+  var togglePortal = useCallback(e => open.current ? closePortal(e) : openPortal(e), [closePortal, openPortal]);
+  var handleKeydown = useCallback(e => e.key === "Escape" && closeOnEsc ? closePortal(e) : undefined, [closeOnEsc, closePortal]);
+  var handleOutsideMouseClick = useCallback(e => {
+    var containsTarget = target => target.current.contains(e.target);
+    // There might not be a targetEl if the portal was opened programmatically.
+    if (containsTarget(portal) || e.button !== 0 || !open.current || targetEl.current && containsTarget(targetEl)) return;
+    if (closeOnOutsideClick) closePortal(e);
+  }, [isServer, closePortal, closeOnOutsideClick, portal]);
+  var handleMouseDown = useCallback(e => {
+    if (isServer || !(portal.current instanceof HTMLElement)) return;
+    var customEvent = createCustomEvent(e);
+    if (portal.current.contains(customEvent.target) && onPortalClick) onPortalClick(customEvent);
+    handleOutsideMouseClick(e);
+  }, [handleOutsideMouseClick, isServer]);
+  useEffect(() => {
+    if (isServer) return null;
+    if (!(elToMountTo instanceof HTMLElement) || !(portal.current instanceof HTMLElement)) return null;
+    var node = portal.current;
+    elToMountTo.appendChild(portal.current);
+    document.addEventListener("keydown", handleKeydown);
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeydown);
+      document.removeEventListener("mousedown", handleMouseDown);
+      elToMountTo.removeChild(node);
+    };
+  }, [isServer, handleOutsideMouseClick, handleKeydown, elToMountTo, portal]);
+  var Portal = useCallback(_ref => {
+    var {
+      children
+    } = _ref;
+    if (portal.current != null) return /*#__PURE__*/createPortal(children, portal.current);
+    return null;
+  }, [portal]);
+  return Object.assign([openPortal, closePortal, open.current, Portal, togglePortal, targetEl, portal], {
+    isOpen: open.current,
+    openPortal,
+    ref: targetEl,
+    closePortal,
+    togglePortal,
+    Portal,
+    portalRef: portal,
+    bind: {
+      // used if you want to spread all html attributes onto the target element
+      ref: targetEl
+    }
+  });
+};

package/dist/esm/external/usePortal.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This is a reference implementation of the usePortal hook from react-useportal: https://github.com/iamthesiz/react-useportal/blob/master/usePortal.test.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/react-useportal/blob/master/license.md
+ */
+export {};

package/dist/esm/external/useSSR.d.ts

@@ -0,0 +1,19 @@
+/**
+ * This is a reference implementation of the useSSR hook from use-ssr: https://github.com/iamthesiz/use-ssr/blob/master/useSSR.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/use-ssr/blob/master/license.md
+ */
+interface UseSSRReturn {
+    isBrowser: boolean;
+    isServer: boolean;
+    device: Device;
+    canUseWorkers: boolean;
+    canUseEventListeners: boolean;
+    canUseViewport: boolean;
+}
+export declare enum Device {
+    Browser = "browser",
+    Server = "server"
+}
+export declare const weAreServer: () => void;
+export declare const useSSR: () => UseSSRReturn;
+export {};

package/dist/esm/external/useSSR.js

@@ -0,0 +1,43 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * This is a reference implementation of the useSSR hook from use-ssr: https://github.com/iamthesiz/use-ssr/blob/master/useSSR.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/use-ssr/blob/master/license.md
+ */
+
+export var Device = /*#__PURE__*/function (Device) {
+  Device["Browser"] = "browser";
+  Device["Server"] = "server";
+  return Device;
+}({});
+var {
+  Browser,
+  Server
+} = Device;
+var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+var device = canUseDOM ? Browser : Server;
+var SSRObject = {
+  isBrowser: device === Browser,
+  isServer: device === Server,
+  device,
+  canUseWorkers: typeof Worker !== "undefined",
+  canUseEventListeners: device === Browser && !!window.addEventListener,
+  canUseViewport: device === Browser && !!window.screen
+};
+var assign = function assign() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  return args.reduce((acc, obj) => _objectSpread(_objectSpread({}, acc), obj), {});
+};
+var values = obj => Object.keys(obj).map(key => obj[key]);
+var toArrayObject = () => assign((values(SSRObject), SSRObject));
+var useSSRObject = toArrayObject();
+export var weAreServer = () => {
+  SSRObject.isServer = true;
+  useSSRObject = toArrayObject();
+};
+export var useSSR = () => useSSRObject;

package/dist/esm/hooks/useThrottle.js

@@ -10,8 +10,8 @@ export var THROTTLE_DELAY = 1000 / 60;
  */
 export var useThrottle = function useThrottle(callback) {
   var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : THROTTLE_DELAY;
-  var timeout = useRef();
-  var lastCall = useRef();
+  var timeout = useRef(null);
+  var lastCall = useRef(null);
   var lastArgs = useRef(null);
   var throttle = useCallback(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {

package/dist/esm/index.d.ts

@@ -138,3 +138,5 @@ export type { WindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";
 export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";
 export { Theme } from "./enums";
+export type { UsePortalOptions } from "./external";
+export { usePortal } from "./external";

package/dist/esm/index.js

@@ -70,4 +70,5 @@ export { default as TablePaginationControls } from "./components/TablePagination
 export { default as CustomSelect } from "./components/CustomSelect";
 export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, useThrottle, useWindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";
-export { Theme } from "./enums";
+export { Theme } from "./enums";
+export { usePortal } from "./external";

package/dist/external/index.d.ts

@@ -0,0 +1,2 @@
+export { usePortal } from "./usePortal";
+export type { UsePortalOptions } from "./usePortal";

package/dist/external/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "usePortal", {
+  enumerable: true,
+  get: function () {
+    return _usePortal.usePortal;
+  }
+});
+var _usePortal = require("./usePortal");

package/dist/external/usePortal.d.ts

@@ -0,0 +1,39 @@
+/**
+ * This is a reference implementation of the usePortal hook from react-useportal: https://github.com/iamthesiz/react-useportal/blob/master/usePortal.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/react-useportal/blob/master/license.md
+ */
+import { ReactNode, SyntheticEvent, RefObject } from "react";
+type CustomEvent<T = HTMLElement> = {
+    event?: SyntheticEvent<T, Event>;
+    portal: RefObject<HTMLElement>;
+    targetEl: RefObject<HTMLElement>;
+} & SyntheticEvent<T, Event>;
+type CustomEventHandler<T = HTMLElement> = (customEvent: CustomEvent<T>) => void;
+export type UsePortalOptions = {
+    closeOnOutsideClick?: boolean;
+    closeOnEsc?: boolean;
+    bindTo?: RefObject<HTMLElement>;
+    isOpen?: boolean;
+    onOpen?: CustomEventHandler;
+    onClose?: CustomEventHandler;
+    onPortalClick?: CustomEventHandler;
+    programmaticallyOpen?: boolean;
+};
+export declare const errorMessage1 = "You must either add a `ref` to the element you are interacting with or pass an `event` to openPortal(e) or togglePortal(e) when the `programmaticallyOpen` option is not set to `true`.";
+export declare const usePortal: ({ closeOnOutsideClick, closeOnEsc, bindTo, isOpen: defaultIsOpen, onOpen, onClose, onPortalClick, programmaticallyOpen, }?: UsePortalOptions) => (boolean | RefObject<HTMLElement> | ((e?: SyntheticEvent<HTMLElement, Event>) => void) | (({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element))[] & {
+    isOpen: boolean;
+    openPortal: (e?: SyntheticEvent<HTMLElement, Event>) => void;
+    ref: RefObject<HTMLElement>;
+    closePortal: (e?: SyntheticEvent<HTMLElement, Event>) => void;
+    togglePortal: (e?: SyntheticEvent<HTMLElement, Event>) => void;
+    Portal: ({ children }: {
+        children: ReactNode;
+    }) => import("react").JSX.Element;
+    portalRef: RefObject<HTMLElement>;
+    bind: {
+        ref: RefObject<HTMLElement>;
+    };
+};
+export {};

package/dist/external/usePortal.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePortal = exports.errorMessage1 = void 0;
+var _react = require("react");
+var _reactDom = require("react-dom");
+var _useSSR = require("./useSSR");
+/**
+ * This is a reference implementation of the usePortal hook from react-useportal: https://github.com/iamthesiz/react-useportal/blob/master/usePortal.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/react-useportal/blob/master/license.md
+ */
+
+const errorMessage1 = exports.errorMessage1 = "You must either add a `ref` to the element you are interacting with or pass an `event` to openPortal(e) or togglePortal(e) when the `programmaticallyOpen` option is not set to `true`.";
+const usePortal = function () {
+  let {
+    closeOnOutsideClick = true,
+    closeOnEsc = true,
+    bindTo,
+    // attach the portal to this node in the DOM
+    isOpen: defaultIsOpen = false,
+    onOpen,
+    onClose,
+    onPortalClick,
+    programmaticallyOpen = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    isServer,
+    isBrowser
+  } = (0, _useSSR.useSSR)();
+  const [isOpen, makeOpen] = (0, _react.useState)(defaultIsOpen);
+  // we use this ref because `isOpen` is stale for handleOutsideMouseClick
+  const open = (0, _react.useRef)(isOpen);
+  const setOpen = (0, _react.useCallback)(v => {
+    // workaround to not have stale `isOpen` in the handleOutsideMouseClick
+    open.current = v;
+    makeOpen(v);
+  }, []);
+  const targetEl = (0, _react.useRef)(null); // this is the element you are clicking/hovering/whatever, to trigger opening the portal
+  const portal = (0, _react.useRef)(isBrowser ? document.createElement("div") : null);
+  (0, _react.useEffect)(() => {
+    if (isBrowser && !portal.current) portal.current = document.createElement("div");
+  }, [isBrowser, portal]);
+  const elToMountTo = (0, _react.useMemo)(() => {
+    if (isServer) return null;
+    return bindTo && bindTo.current || document.body;
+  }, [isServer, bindTo]);
+  const createCustomEvent = e => {
+    if (!e) return {
+      portal,
+      targetEl,
+      event: e
+    };
+    const event = e || {};
+    if (event.persist) event.persist();
+    event.portal = portal;
+    event.targetEl = targetEl;
+    event.event = e;
+    const {
+      currentTarget
+    } = e;
+    if (!targetEl.current && currentTarget && currentTarget !== document) targetEl.current = event.currentTarget;
+    return event;
+  };
+  const openPortal = (0, _react.useCallback)(e => {
+    if (isServer) return;
+    const customEvent = createCustomEvent(e);
+    // for some reason, when we don't have the event argument, there
+    // is a weird race condition. Would like to see if we can remove
+    // setTimeout, but for now this works
+    if (targetEl.current == null && !programmaticallyOpen) {
+      setTimeout(() => setOpen(true), 0);
+      throw Error(errorMessage1);
+    }
+    if (onOpen) onOpen(customEvent);
+    setOpen(true);
+  }, [isServer, portal, setOpen, targetEl, onOpen, programmaticallyOpen]);
+  const closePortal = (0, _react.useCallback)(e => {
+    if (isServer) return;
+    const customEvent = createCustomEvent(e);
+    if (onClose && open.current) onClose(customEvent);
+    if (open.current) setOpen(false);
+  }, [isServer, onClose, setOpen]);
+  const togglePortal = (0, _react.useCallback)(e => open.current ? closePortal(e) : openPortal(e), [closePortal, openPortal]);
+  const handleKeydown = (0, _react.useCallback)(e => e.key === "Escape" && closeOnEsc ? closePortal(e) : undefined, [closeOnEsc, closePortal]);
+  const handleOutsideMouseClick = (0, _react.useCallback)(e => {
+    const containsTarget = target => target.current.contains(e.target);
+    // There might not be a targetEl if the portal was opened programmatically.
+    if (containsTarget(portal) || e.button !== 0 || !open.current || targetEl.current && containsTarget(targetEl)) return;
+    if (closeOnOutsideClick) closePortal(e);
+  }, [isServer, closePortal, closeOnOutsideClick, portal]);
+  const handleMouseDown = (0, _react.useCallback)(e => {
+    if (isServer || !(portal.current instanceof HTMLElement)) return;
+    const customEvent = createCustomEvent(e);
+    if (portal.current.contains(customEvent.target) && onPortalClick) onPortalClick(customEvent);
+    handleOutsideMouseClick(e);
+  }, [handleOutsideMouseClick, isServer]);
+  (0, _react.useEffect)(() => {
+    if (isServer) return null;
+    if (!(elToMountTo instanceof HTMLElement) || !(portal.current instanceof HTMLElement)) return null;
+    const node = portal.current;
+    elToMountTo.appendChild(portal.current);
+    document.addEventListener("keydown", handleKeydown);
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeydown);
+      document.removeEventListener("mousedown", handleMouseDown);
+      elToMountTo.removeChild(node);
+    };
+  }, [isServer, handleOutsideMouseClick, handleKeydown, elToMountTo, portal]);
+  const Portal = (0, _react.useCallback)(_ref => {
+    let {
+      children
+    } = _ref;
+    if (portal.current != null) return /*#__PURE__*/(0, _reactDom.createPortal)(children, portal.current);
+    return null;
+  }, [portal]);
+  return Object.assign([openPortal, closePortal, open.current, Portal, togglePortal, targetEl, portal], {
+    isOpen: open.current,
+    openPortal,
+    ref: targetEl,
+    closePortal,
+    togglePortal,
+    Portal,
+    portalRef: portal,
+    bind: {
+      // used if you want to spread all html attributes onto the target element
+      ref: targetEl
+    }
+  });
+};
+exports.usePortal = usePortal;

package/dist/external/usePortal.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This is a reference implementation of the usePortal hook from react-useportal: https://github.com/iamthesiz/react-useportal/blob/master/usePortal.test.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/react-useportal/blob/master/license.md
+ */
+export {};

package/dist/external/useSSR.d.ts

@@ -0,0 +1,19 @@
+/**
+ * This is a reference implementation of the useSSR hook from use-ssr: https://github.com/iamthesiz/use-ssr/blob/master/useSSR.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/use-ssr/blob/master/license.md
+ */
+interface UseSSRReturn {
+    isBrowser: boolean;
+    isServer: boolean;
+    device: Device;
+    canUseWorkers: boolean;
+    canUseEventListeners: boolean;
+    canUseViewport: boolean;
+}
+export declare enum Device {
+    Browser = "browser",
+    Server = "server"
+}
+export declare const weAreServer: () => void;
+export declare const useSSR: () => UseSSRReturn;
+export {};

package/dist/external/useSSR.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.weAreServer = exports.useSSR = exports.Device = void 0;
+/**
+ * This is a reference implementation of the useSSR hook from use-ssr: https://github.com/iamthesiz/use-ssr/blob/master/useSSR.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/use-ssr/blob/master/license.md
+ */
+let Device = exports.Device = /*#__PURE__*/function (Device) {
+  Device["Browser"] = "browser";
+  Device["Server"] = "server";
+  return Device;
+}({});
+const {
+  Browser,
+  Server
+} = Device;
+const canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+const device = canUseDOM ? Browser : Server;
+const SSRObject = {
+  isBrowser: device === Browser,
+  isServer: device === Server,
+  device,
+  canUseWorkers: typeof Worker !== "undefined",
+  canUseEventListeners: device === Browser && !!window.addEventListener,
+  canUseViewport: device === Browser && !!window.screen
+};
+const assign = function () {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  return args.reduce((acc, obj) => ({
+    ...acc,
+    ...obj
+  }), {});
+};
+const values = obj => Object.keys(obj).map(key => obj[key]);
+const toArrayObject = () => assign((values(SSRObject), SSRObject));
+let useSSRObject = toArrayObject();
+const weAreServer = () => {
+  SSRObject.isServer = true;
+  useSSRObject = toArrayObject();
+};
+exports.weAreServer = weAreServer;
+const useSSR = () => useSSRObject;
+exports.useSSR = useSSR;

package/dist/hooks/useThrottle.js

@@ -16,8 +16,8 @@ const THROTTLE_DELAY = exports.THROTTLE_DELAY = 1000 / 60;
  */
 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 timeout = (0, _react.useRef)(null);
+  const lastCall = (0, _react.useRef)(null);
   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++) {

package/dist/index.d.ts

@@ -138,3 +138,5 @@ export type { WindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";
 export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";
 export { Theme } from "./enums";
+export type { UsePortalOptions } from "./external";
+export { usePortal } from "./external";

package/dist/index.js

@@ -96,7 +96,8 @@ var _exportNames = {
   useWindowFitment: true,
   isNavigationAnchor: true,
   isNavigationButton: true,
-  Theme: true
+  Theme: true,
+  usePortal: true
 };
 Object.defineProperty(exports, "Accordion", {
   enumerable: true,
@@ -638,6 +639,12 @@ Object.defineProperty(exports, "usePagination", {
     return _hooks.usePagination;
   }
 });
+Object.defineProperty(exports, "usePortal", {
+  enumerable: true,
+  get: function () {
+    return _external.usePortal;
+  }
+});
 Object.defineProperty(exports, "usePrevious", {
   enumerable: true,
   get: function () {
@@ -740,6 +747,7 @@ var _CustomSelect = _interopRequireDefault(require("./components/CustomSelect"))
 var _hooks = require("./hooks");
 var _utils = require("./utils");
 var _enums = require("./enums");
+var _external = require("./external");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }