@canonical/react-components 2.0.0 → 2.1.0

package/dist/components/ConfirmationButton/ConfirmationButton.js

@@ -7,7 +7,7 @@ exports.default = exports.ConfirmationButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 var _ConfirmationModal = _interopRequireDefault(require("../ConfirmationModal"));
-var _reactUseportal = _interopRequireDefault(require("react-useportal"));
+var _external = require("../../external");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 const generateTitle = title => {
@@ -35,7 +35,7 @@ const ConfirmationButton = _ref => {
     closePortal,
     isOpen,
     Portal
-  } = (0, _reactUseportal.default)();
+  } = (0, _external.usePortal)();
   const handleCancelModal = () => {
     closePortal();
     if (confirmationModalProps.close) {

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Label = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactUseportal = _interopRequireDefault(require("react-useportal"));
 var _hooks = require("../../hooks");
 var _Button = _interopRequireDefault(require("../Button"));
 var _ContextualMenuDropdown = _interopRequireDefault(require("./ContextualMenuDropdown"));
+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 }; }
@@ -100,7 +100,7 @@ const ContextualMenu = _ref => {
     closePortal,
     isOpen,
     Portal
-  } = (0, _reactUseportal.default)({
+  } = (0, _external.usePortal)({
     closeOnEsc,
     closeOnOutsideClick,
     isOpen: visible,

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts

@@ -18,7 +18,7 @@ export type Position = "left" | "center" | "right";
 export type Props<L = null> = {
     adjustedPosition?: Position;
     autoAdjust?: boolean;
-    handleClose?: (evt?: MouseEvent) => void;
+    handleClose?: (evt?: React.MouseEvent<HTMLButtonElement>) => void;
     constrainPanelWidth?: boolean;
     dropdownClassName?: string;
     dropdownContent?: ReactNode | ((close: () => void) => React.JSX.Element);

package/dist/components/Tooltip/Tooltip.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.position = exports.default = exports.adjustForWindow = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactUseportal = _interopRequireDefault(require("react-useportal"));
 var _hooks = require("../../hooks");
+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 }; }
@@ -142,7 +142,7 @@ const Tooltip = _ref => {
     closePortal,
     isOpen,
     Portal
-  } = (0, _reactUseportal.default)({
+  } = (0, _external.usePortal)({
     programmaticallyOpen: true
   });
   const tooltipId = (0, _react.useId)();

package/dist/esm/components/ConfirmationButton/ConfirmationButton.js

@@ -5,7 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from "react";
 import ActionButton from "../ActionButton";
 import ConfirmationModal from "../ConfirmationModal";
-import usePortal from "react-useportal";
+import { usePortal } from "../../external";
 var generateTitle = title => {
   if (typeof title === "string") {
     return title;

package/dist/esm/components/ContextualMenu/ContextualMenu.js

@@ -4,10 +4,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import classNames from "classnames";
 import React, { useCallback, useEffect, useId, useRef, useState } from "react";
-import usePortal from "react-useportal";
 import { useListener, usePrevious } from "../../hooks";
 import Button from "../Button";
 import ContextualMenuDropdown from "./ContextualMenuDropdown";
+import { usePortal } from "../../external";
 export var Label = /*#__PURE__*/function (Label) {
   Label["Toggle"] = "Toggle menu";
   return Label;

package/dist/esm/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts

@@ -18,7 +18,7 @@ export type Position = "left" | "center" | "right";
 export type Props<L = null> = {
     adjustedPosition?: Position;
     autoAdjust?: boolean;
-    handleClose?: (evt?: MouseEvent) => void;
+    handleClose?: (evt?: React.MouseEvent<HTMLButtonElement>) => void;
     constrainPanelWidth?: boolean;
     dropdownClassName?: string;
     dropdownContent?: ReactNode | ((close: () => void) => React.JSX.Element);

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/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/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 }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -108,8 +108,7 @@
     "jest-environment-jsdom": "29.7.0",
     "lodash.isequal": "4.5.0",
     "prop-types": "15.8.1",
-    "react-table": "7.8.0",
-    "react-useportal": "1.0.19"
+    "react-table": "7.8.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",