@canonical/react-components 2.0.0 → 2.2.0

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

@@ -37,14 +37,22 @@ export var Default = {
     columns: React.useMemo(() => [{
       Header: "ID",
       accessor: "buildId",
-      Cell: _ref2 => {
+      Cell: function (_Cell) {
+        function Cell(_x) {
+          return _Cell.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell.toString();
+        };
+        return Cell;
+      }(_ref2 => {
         var {
           value
         } = _ref2;
         return /*#__PURE__*/React.createElement("a", {
           href: "#test"
         }, "#", value);
-      }
+      })
     }, {
       Header: "Architecture",
       accessor: "arch"
@@ -55,7 +63,15 @@ export var Default = {
     }, {
       Header: "Result",
       accessor: "result",
-      Cell: _ref3 => {
+      Cell: function (_Cell2) {
+        function Cell(_x2) {
+          return _Cell2.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell2.toString();
+        };
+        return Cell;
+      }(_ref3 => {
         var {
           value
         } = _ref3;
@@ -67,7 +83,7 @@ export var Default = {
           default:
             return "Unknown";
         }
-      },
+      }),
       getCellIcon: _ref4 => {
         var {
           value
@@ -155,14 +171,22 @@ export var Sortable = {
       Header: "ID",
       accessor: "buildId",
       sortType: "basic",
-      Cell: _ref6 => {
+      Cell: function (_Cell3) {
+        function Cell(_x3) {
+          return _Cell3.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell3.toString();
+        };
+        return Cell;
+      }(_ref6 => {
         var {
           value
         } = _ref6;
         return /*#__PURE__*/React.createElement("a", {
           href: "#test"
         }, "#", value);
-      }
+      })
     }, {
       Header: "Architecture",
       accessor: "arch",
@@ -176,7 +200,15 @@ export var Sortable = {
       Header: "Result",
       accessor: "result",
       sortType: "basic",
-      Cell: _ref7 => {
+      Cell: function (_Cell4) {
+        function Cell(_x4) {
+          return _Cell4.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell4.toString();
+        };
+        return Cell;
+      }(_ref7 => {
         var {
           value
         } = _ref7;
@@ -188,7 +220,7 @@ export var Sortable = {
           default:
             return "Unknown";
         }
-      },
+      }),
       getCellIcon: _ref8 => {
         var {
           value
@@ -247,16 +279,32 @@ export var Subrows = {
       Header: "Flavour",
       accessor: "flavour",
       sortType: "basic",
-      Cell: props => props.row.depth === 0 ? /*#__PURE__*/React.createElement("strong", null, props.value) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+      Cell: function (_Cell5) {
+        function Cell(_x5) {
+          return _Cell5.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell5.toString();
+        };
+        return Cell;
+      }(props => "depth" in props.row && props.row.depth === 0 ? /*#__PURE__*/React.createElement("strong", null, props.value) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
         type: "checkbox"
-      }), " ", props.value)
+      }), " ", props.value))
     }, {
       Header: "Scoops",
       accessor: "scoops",
       sortType: "basic",
-      Cell: props => props.row.depth === 0 ? /*#__PURE__*/React.createElement("span", {
+      Cell: function (_Cell6) {
+        function Cell(_x6) {
+          return _Cell6.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell6.toString();
+        };
+        return Cell;
+      }(props => "depth" in props.row && props.row.depth === 0 ? /*#__PURE__*/React.createElement("span", {
         className: "u-text--muted"
-      }, props.value) : props.value
+      }, props.value) : props.value)
     }], [])
     // eslint-disable-next-line react-hooks/rules-of-hooks
     ,

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

@@ -1,6 +1,6 @@
 import { ReactNode, HTMLProps } from "react";
 import React from "react";
-import type { GenerateLink, NavItem, LogoProps } from "./types";
+import { GenerateLink, NavItem, LogoProps } from "./types";
 import { PropsWithSpread, SubComponentProps } from "../../types";
 import { SearchBoxProps } from "../SearchBox";
 import { Theme } from "../../enums";

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

@@ -27,7 +27,7 @@ export type Props = PropsWithSpread<{
     /**
      * A list of up to two actions that the notification can perform.
      */
-    actions?: NotificationAction[];
+    actions?: (NotificationAction | ReactNode)[];
     /**
      * Whether the notification should not have a border.
      */

package/dist/esm/components/Notification/Notification.js

@@ -5,7 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import classNames from "classnames";
 import React, { useEffect, useRef } from "react";
 import Button, { ButtonAppearance } from "../Button";
-import { IS_DEV } from "../../utils";
+import { IS_DEV, isReactNode } from "../../utils";
 export var Label = /*#__PURE__*/function (Label) {
   Label["Close"] = "Close notification";
   return Label;
@@ -97,6 +97,7 @@ var Notification = _ref => {
   }, title), inline && /*#__PURE__*/React.createElement(React.Fragment, null, "\u2002"), /*#__PURE__*/React.createElement("p", {
     className: "p-notification__message"
   }, children), onDismiss && /*#__PURE__*/React.createElement("button", {
+    type: "button",
     className: "p-notification__close",
     "data-testid": "notification-close-button",
     onClick: onDismiss
@@ -108,7 +109,8 @@ var Notification = _ref => {
     "data-testid": "notification-timestamp"
   }, timestamp), hasActions ? /*#__PURE__*/React.createElement("div", {
     className: "p-notification__actions"
-  }, actions.map((action, i) => /*#__PURE__*/React.createElement(Button, {
+  }, actions.map((action, i) => isReactNode(action) ? action : /*#__PURE__*/React.createElement(Button, {
+    type: "button",
     appearance: ButtonAppearance.LINK,
     className: "p-notification__action",
     "data-testid": "notification-action",

package/dist/esm/components/NotificationProvider/NotificationProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useEffect, useRef, useState } from "react";
-import isEqual from "lodash/isEqual";
+import fastDeepEqual from "fast-deep-equal";
 import { info as _info, failure as _failure, success as _success, queue } from "./messageBuilder";
 import Notification, { DefaultTitles } from "../Notification/Notification";
 var NotifyContext = /*#__PURE__*/createContext({
@@ -20,7 +20,7 @@ export var NotificationProvider = _ref => {
   var [notification, setNotification] = useState(null);
   var clear = () => notification !== null && setNotification(null);
   var setDeduplicated = value => {
-    if (!isEqual(value, notification)) {
+    if (!fastDeepEqual(value, notification)) {
       setNotification(value);
     }
     return value;

package/dist/esm/components/SearchAndFilter/SearchAndFilter.js

@@ -52,9 +52,6 @@ var SearchAndFilter = _ref => {
       mounted = false;
     };
   }, [searchData, returnSearchData]);
-  var searchOnChange = searchTerm => {
-    setSearchTerm(searchTerm);
-  };
 
   // Hide manual input form field when search container is inactive
   useEffect(() => {
@@ -236,7 +233,7 @@ var SearchAndFilter = _ref => {
     className: "p-search-and-filter__input",
     id: "search-and-filter-input",
     name: "search",
-    onChange: e => searchOnChange(e.target.value),
+    onChange: e => setSearchTerm(e.target.value),
     placeholder: placeholder,
     type: "search",
     value: searchTerm

package/dist/esm/components/SearchAndFilter/utils.d.ts

@@ -1,13 +1,14 @@
+import { SearchAndFilterChip } from "./types";
 /**
  * Return number of overflowing chips given a row threshold
  * @param {array} chips - An array of chips
  * @param {Integer} overflowRowLimit - Number of rows to show before counting
  * overflow
  */
-export declare const overflowingChipsCount: (chips: any, overflowRowLimit: any) => number;
+export declare const overflowingChipsCount: (chips: NodeListOf<HTMLElement>, overflowRowLimit: number) => number;
 /**
  * Check if supplied chip object already exists in searchData prop
  * @param {Object} chip - A chip object {lead: 'foo', value: 'bar'}
  * @param {Array} existingArr - An array of chip objects
  */
-export declare const isChipInArray: (chip: any, existingArr: any) => any;
+export declare const isChipInArray: (chip: SearchAndFilterChip, existingArr: SearchAndFilterChip[]) => boolean;

package/dist/esm/components/SideNavigation/SideNavigation.js

@@ -58,7 +58,7 @@ var generateItems = (groups, listClassName, linkComponent, dark) => {
 };
 var getHasIcons = groups => groups === null || groups === void 0 ? void 0 : groups.some(group => {
   var _ref;
-  return (_ref = group && "items" in group ? group.items : group) === null || _ref === void 0 ? void 0 : _ref.some(item => isReactNode(item) ? false : item && "icon" in item && !!item.icon);
+  return group && ((_ref = "items" in group ? group.items : group) === null || _ref === void 0 ? void 0 : _ref.some(item => isReactNode(item) ? false : item && "icon" in item && !!item.icon));
 });
 
 /**

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",
@@ -194,7 +194,7 @@ var Tooltip = _ref => {
       return;
     }
     e.target.focus();
-    openPortal(e);
+    openPortal();
   };
   var delayedOpenPortal = useCallback(() => {
     if (isOpen) {

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/useWindowFitment.js

@@ -23,8 +23,8 @@ export var useWindowFitment = function useWindowFitment(targetNode, referenceNod
         referenceCoordinates = {
           // The mouse is a single point so use 0 for the height and width.
           height: 0,
-          left: evt.x || 0,
-          top: evt.y || 0,
+          left: ("x" in evt && typeof evt.x === "number" ? evt.x : null) || 0,
+          top: ("y" in evt && typeof evt.y === "number" ? evt.y : null) || 0,
           width: 0
         };
       }

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