@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib/constants.js

@@ -5,22 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GRID = exports.FLEX = exports.POSITION = exports.LAYOUT = exports.BORDER = exports.TYPOGRAPHY = exports.COMMON = exports.get = void 0;
 
-var _propTypes = _interopRequireDefault(require("@styled-system/prop-types"));
-
 var _themeGet = require("@styled-system/theme-get");
 
-var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var styledSystem = _interopRequireWildcard(require("styled-system"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+// eslint-disable-next-line import/no-namespace
 const {
   get: getKey,
   compose,
@@ -33,10 +30,7 @@ const get = key => (0, _themeGet.themeGet)(key, getKey(_theme.default, key)); //
 exports.get = get;
 const COMMON = compose(styledSystem.space, styledSystem.color, styledSystem.display);
 exports.COMMON = COMMON;
-COMMON.propTypes = { ..._propTypes.default.space,
-  ..._propTypes.default.color
-}; // Typography props
-
+// Typography props
 const whiteSpace = system({
   whiteSpace: {
     property: 'whiteSpace' // cssProperty: 'whiteSpace',
@@ -45,28 +39,18 @@ const whiteSpace = system({
 });
 const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace);
 exports.TYPOGRAPHY = TYPOGRAPHY;
-TYPOGRAPHY.propTypes = { ..._propTypes.default.typography,
-  whiteSpace: _propTypes2.default.oneOf(['normal', 'nowrap', 'pre-wrap', 'pre', 'pre-line'])
-}; // Border props
-
+// Border props
 const BORDER = compose(styledSystem.border, styledSystem.shadow);
 exports.BORDER = BORDER;
-BORDER.propTypes = { ..._propTypes.default.border,
-  ..._propTypes.default.shadow
-}; // Layout props
-
+// Layout props
 const LAYOUT = styledSystem.layout;
 exports.LAYOUT = LAYOUT;
-LAYOUT.propTypes = _propTypes.default.layout; // Position props
-
+// Position props
 const POSITION = styledSystem.position;
 exports.POSITION = POSITION;
-POSITION.propTypes = _propTypes.default.position; // Flex props
-
+// Flex props
 const FLEX = styledSystem.flexbox;
 exports.FLEX = FLEX;
-FLEX.propTypes = _propTypes.default.flexbox; // Grid props
-
+// Grid props
 const GRID = styledSystem.grid;
-exports.GRID = GRID;
-GRID.propTypes = _propTypes.default.grid;
+exports.GRID = GRID;

package/lib/drafts.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ActionList = require("./ActionList2");
+
+Object.keys(_ActionList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ActionList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ActionList[key];
+    }
+  });
+});
+
+var _NewButton = require("./NewButton");
+
+Object.keys(_NewButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NewButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NewButton[key];
+    }
+  });
+});

package/lib/hooks/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useOnOutsideClick", {
+  enumerable: true,
+  get: function () {
+    return _useOnOutsideClick.useOnOutsideClick;
+  }
+});
+Object.defineProperty(exports, "useProvidedRefOrCreate", {
+  enumerable: true,
+  get: function () {
+    return _useProvidedRefOrCreate.useProvidedRefOrCreate;
+  }
+});
+Object.defineProperty(exports, "useOnEscapePress", {
+  enumerable: true,
+  get: function () {
+    return _useOnEscapePress.useOnEscapePress;
+  }
+});
+Object.defineProperty(exports, "useOpenAndCloseFocus", {
+  enumerable: true,
+  get: function () {
+    return _useOpenAndCloseFocus.useOpenAndCloseFocus;
+  }
+});
+Object.defineProperty(exports, "useAnchoredPosition", {
+  enumerable: true,
+  get: function () {
+    return _useAnchoredPosition.useAnchoredPosition;
+  }
+});
+Object.defineProperty(exports, "useOverlay", {
+  enumerable: true,
+  get: function () {
+    return _useOverlay.useOverlay;
+  }
+});
+Object.defineProperty(exports, "useRenderForcingRef", {
+  enumerable: true,
+  get: function () {
+    return _useRenderForcingRef.useRenderForcingRef;
+  }
+});
+
+var _useOnOutsideClick = require("./useOnOutsideClick");
+
+var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
+
+var _useOnEscapePress = require("./useOnEscapePress");
+
+var _useOpenAndCloseFocus = require("./useOpenAndCloseFocus");
+
+var _useAnchoredPosition = require("./useAnchoredPosition");
+
+var _useOverlay = require("./useOverlay");
+
+var _useRenderForcingRef = require("./useRenderForcingRef");

package/lib/hooks/useAnchoredPosition.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnchoredPosition = useAnchoredPosition;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _anchoredPosition = require("../behaviors/anchoredPosition");
+
+var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
+
+var _useResizeObserver = require("./useResizeObserver");
+
+var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Calculates the top and left values for an absolutely-positioned floating element
+ * to be anchored to some anchor element. Returns refs for the floating element
+ * and the anchor element, along with the position.
+ * @param settings Settings for calculating the anchored position.
+ * @param dependencies Dependencies to determine when to re-calculate the position.
+ * @returns An object of {top: number, left: number} to absolutely-position the
+ * floating element.
+ */
+function useAnchoredPosition(settings, dependencies = []) {
+  const floatingElementRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(settings === null || settings === void 0 ? void 0 : settings.floatingElementRef);
+  const anchorElementRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(settings === null || settings === void 0 ? void 0 : settings.anchorElementRef);
+
+  const [position, setPosition] = _react.default.useState(undefined);
+
+  const updatePosition = _react.default.useCallback(() => {
+    if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
+      setPosition((0, _anchoredPosition.getAnchoredPosition)(floatingElementRef.current, anchorElementRef.current, settings));
+    } else {
+      setPosition(undefined);
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [floatingElementRef, anchorElementRef, ...dependencies]);
+
+  (0, _useIsomorphicLayoutEffect.default)(updatePosition, [updatePosition]);
+  (0, _useResizeObserver.useResizeObserver)(updatePosition);
+  return {
+    floatingElementRef,
+    anchorElementRef,
+    position
+  };
+}

package/lib/hooks/useCombinedRefs.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCombinedRefs = useCombinedRefs;
+
+var _react = require("react");
+
+var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Creates a ref by combining multiple constituent refs. The ref returned by this hook
+ * should be passed as the ref for the element that needs to be shared. This is
+ * particularly useful when you are using `React.forwardRef` in your component but you
+ * also want to be able to access the local element. This is a small anti-pattern,
+ * though, as it breaks encapsulation.
+ * @param refs
+ */
+function useCombinedRefs(...refs) {
+  const combinedRef = (0, _react.useRef)(null);
+  (0, _useIsomorphicLayoutEffect.default)(() => {
+    function setRefs(current = null) {
+      for (const ref of refs) {
+        if (!ref) {
+          return;
+        }
+
+        if (typeof ref === 'function') {
+          ref(current);
+        } else {
+          ref.current = current;
+        }
+      }
+    }
+
+    setRefs(combinedRef.current);
+    return () => {
+      // ensure the refs get updated on unmount
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      setRefs(combinedRef.current);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...refs, combinedRef.current]);
+  return combinedRef;
+}

package/lib/hooks/useDetails.js

@@ -12,12 +12,18 @@ function useDetails({
   closeOnOutsideClick,
   defaultOpen,
   onClickOutside
-} = {}) {
+}) {
   const [open, setOpen] = (0, _react.useState)(defaultOpen);
   const backupRef = (0, _react.useRef)(null);
   const customRef = ref !== null && ref !== void 0 ? ref : backupRef;
   const onClickOutsideInternal = (0, _react.useCallback)(event => {
-    if (event.target.closest('details') !== customRef.current) {
+    const {
+      current
+    } = customRef;
+    const eventTarget = event.target;
+    const closest = eventTarget.closest('details');
+
+    if (closest !== current) {
       onClickOutside && onClickOutside(event);
 
       if (!event.defaultPrevented) {
@@ -37,7 +43,8 @@ function useDetails({
 
   const handleToggle = e => {
     if (!e.defaultPrevented) {
-      setOpen(e.target.open);
+      const eventTarget = e.target;
+      setOpen(eventTarget.open);
     }
   };
 

package/lib/hooks/useDialog.js

@@ -7,22 +7,25 @@ exports.default = void 0;
 
 var _react = require("react");
 
+const noop = () => null;
+
 function visible(el) {
   return !el.hidden && (!el.type || el.type !== 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0);
 }
 
 function focusable(el) {
-  return el.tabIndex >= 0 && !el.disabled && visible(el);
+  const inputEl = el;
+  return inputEl.tabIndex >= 0 && !inputEl.disabled && visible(inputEl);
 }
 
 function useDialog({
   modalRef,
   overlayRef,
   isOpen,
-  onDismiss,
+  onDismiss = noop,
   initialFocusRef,
   closeButtonRef
-} = {}) {
+}) {
   const onClickOutside = (0, _react.useCallback)(e => {
     if (modalRef.current && overlayRef.current && !modalRef.current.contains(e.target) && overlayRef.current.contains(e.target)) {
       onDismiss();
@@ -46,20 +49,32 @@ function useDialog({
     }
   }, [isOpen, initialFocusRef, closeButtonRef]);
   const getFocusableItem = (0, _react.useCallback)((e, movement) => {
-    if (modalRef && modalRef.current) {
+    if (modalRef.current) {
       const items = Array.from(modalRef.current.querySelectorAll('*')).filter(focusable);
       if (items.length === 0) return;
       e.preventDefault();
       const focusedElement = document.activeElement;
+
+      if (!focusedElement) {
+        return;
+      }
+
       const index = items.indexOf(focusedElement);
       const offsetIndex = index + movement;
       const fallbackIndex = movement === 1 ? 0 : items.length - 1;
-      return items[offsetIndex] || items[fallbackIndex];
+      const focusableItem = items[offsetIndex] || items[fallbackIndex];
+      return focusableItem;
     }
   }, [modalRef]);
   const handleTab = (0, _react.useCallback)(e => {
     const movement = e.shiftKey ? -1 : 1;
-    getFocusableItem(e, movement).focus();
+    const focusableItem = getFocusableItem(e, movement);
+
+    if (!focusableItem) {
+      return;
+    }
+
+    focusableItem.focus();
   }, [getFocusableItem]);
   const onKeyDown = (0, _react.useCallback)(event => {
     switch (event.key) {

package/lib/hooks/useFocusTrap.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusTrap = useFocusTrap;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _focusTrap = require("../behaviors/focusTrap");
+
+var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Hook used to trap focus inside a container. Returns a ref that can be added to the container
+ * that should trap focus.
+ * @param settings {FocusTrapHookSettings}
+ */
+function useFocusTrap(settings, dependencies = []) {
+  const containerRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(settings === null || settings === void 0 ? void 0 : settings.containerRef);
+  const initialFocusRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(settings === null || settings === void 0 ? void 0 : settings.initialFocusRef);
+  const disabled = settings === null || settings === void 0 ? void 0 : settings.disabled;
+
+  const abortController = _react.default.useRef();
+
+  const previousFocusedElement = _react.default.useRef(null); // If we are enabling a focus trap and haven't already stored the previously focused element
+  // go ahead an do that so we can restore later when the trap is disabled.
+
+
+  if (!previousFocusedElement.current && !(settings !== null && settings !== void 0 && settings.disabled)) {
+    previousFocusedElement.current = document.activeElement;
+  } // This function removes the event listeners that enable the focus trap and restores focus
+  // to the previously-focused element (if necessary).
+
+
+  function disableTrap() {
+    var _abortController$curr;
+
+    (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
+
+    if (settings !== null && settings !== void 0 && settings.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
+      previousFocusedElement.current.focus();
+      previousFocusedElement.current = null;
+    }
+  }
+
+  _react.default.useEffect(() => {
+    if (containerRef.current instanceof HTMLElement) {
+      if (!disabled) {
+        var _initialFocusRef$curr;
+
+        abortController.current = (0, _focusTrap.focusTrap)(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : undefined);
+        return () => {
+          disableTrap();
+        };
+      } else {
+        disableTrap();
+      }
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [containerRef, initialFocusRef, disabled, ...dependencies]);
+
+  return {
+    containerRef,
+    initialFocusRef
+  };
+}

package/lib/hooks/useFocusZone.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusZone = useFocusZone;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _focusZone = require("../behaviors/focusZone");
+
+var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function useFocusZone(settings = {}, dependencies = []) {
+  const containerRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(settings.containerRef);
+  const useActiveDescendant = !!settings.activeDescendantFocus;
+  const passedActiveDescendantRef = typeof settings.activeDescendantFocus === 'boolean' || !settings.activeDescendantFocus ? undefined : settings.activeDescendantFocus;
+  const activeDescendantControlRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(passedActiveDescendantRef);
+  const disabled = settings.disabled;
+
+  const abortController = _react.default.useRef();
+
+  (0, _react.useEffect)(() => {
+    if (containerRef.current instanceof HTMLElement && (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
+      if (!disabled) {
+        var _activeDescendantCont;
+
+        const vanillaSettings = { ...settings,
+          activeDescendantControl: (_activeDescendantCont = activeDescendantControlRef.current) !== null && _activeDescendantCont !== void 0 ? _activeDescendantCont : undefined
+        };
+        abortController.current = (0, _focusZone.focusZone)(containerRef.current, vanillaSettings);
+        return () => {
+          var _abortController$curr;
+
+          (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
+        };
+      } else {
+        var _abortController$curr2;
+
+        (_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 ? void 0 : _abortController$curr2.abort();
+      }
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [disabled, ...dependencies]);
+  return {
+    containerRef,
+    activeDescendantControlRef
+  };
+}

package/lib/hooks/useOnEscapePress.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnEscapePress = void 0;
+
+var _react = require("react");
+
+const handlers = [];
+/**
+ * Calls all handlers in reverse order
+ * @param event The KeyboardEvent generated by the Escape keydown.
+ */
+
+function handleEscape(event) {
+  if (event.key === 'Escape' && !event.defaultPrevented) {
+    for (let i = handlers.length - 1; i >= 0; --i) {
+      handlers[i](event); // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+
+      if (event.defaultPrevented) {
+        break;
+      }
+    }
+  }
+}
+/**
+ * Sets up a `keydown` listener on `window.document`. If
+ * 1) The pressed key is "Escape", and
+ * 2) The event has not had `.preventDefault()` called
+ * The given callback will be executed.
+ *
+ * Note: If multiple `useOnEscapePress` hooks are active simultaneously, the
+ * callbacks will occur in reverse order. In other words, if a parent component
+ * and a child component both call `useOnEscapePress`, when the user presses
+ * Escape, the child component's callback will execute, followed by the parent's
+ * callback. Each callback has the chance to call `.preventDefault()` on the
+ * event to prevent further callbacks.
+ *
+ * @param callback {(e: KeyboardEvent) => void} The callback that gets executed
+ * when the Escape key is pressed. The KeyboardEvent generated by the Escape
+ * keypress is passed as the only argument.
+ *
+ * @param callbackDependencies {React.DependencyList} The dependencies of the given
+ * `onEscape` callback for memoization. Omit this param if the callback is already
+ * memoized. See `React.useCallback` for more info on memoization.
+ */
+
+
+const useOnEscapePress = (onEscape, callbackDependencies = [onEscape]) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const escapeCallback = (0, _react.useCallback)(onEscape, callbackDependencies);
+  (0, _react.useEffect)(() => {
+    if (handlers.length === 0) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    handlers.push(escapeCallback);
+    return () => {
+      handlers.splice(handlers.findIndex(h => h === escapeCallback), 1);
+
+      if (handlers.length === 0) {
+        document.removeEventListener('keydown', handleEscape);
+      }
+    };
+  }, [escapeCallback]);
+};
+
+exports.useOnEscapePress = useOnEscapePress;

package/lib/hooks/useOnOutsideClick.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnOutsideClick = void 0;
+
+var _react = require("react");
+
+// Because events are handled at the document level, we provide a mechanism for early return.
+const stopPropagation = true;
+/**
+ * Calls all handlers in reverse order
+ * @param event The MouseEvent generated by the click event.
+ */
+
+function handleClick(event) {
+  if (!event.defaultPrevented) {
+    for (const handler of Object.values(registry).reverse()) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (handler(event) === stopPropagation || event.defaultPrevented) {
+        break;
+      }
+    }
+  }
+}
+
+const registry = {};
+
+function register(id, handler) {
+  registry[id] = handler;
+}
+
+function deregister(id) {
+  delete registry[id];
+} // For auto-incrementing unique identifiers for registered handlers.
+
+
+let handlerId = 0;
+
+const useOnOutsideClick = ({
+  containerRef,
+  ignoreClickRefs,
+  onClickOutside
+}) => {
+  const id = (0, _react.useMemo)(() => handlerId++, []);
+  const handler = (0, _react.useCallback)(event => {
+    var _containerRef$current;
+
+    // don't call click handler if the mouse event was triggered by an auxiliary button (right click/wheel button/etc)
+    if (event instanceof MouseEvent && event.button > 0) {
+      return stopPropagation;
+    } // don't call handler if the click happened inside of the container
+
+
+    if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
+      return stopPropagation;
+    } // don't call handler if click happened on an ignored ref
+
+
+    if (ignoreClickRefs && ignoreClickRefs.some(({
+      current
+    }) => current === null || current === void 0 ? void 0 : current.contains(event.target))) {
+      return stopPropagation;
+    }
+
+    onClickOutside(event);
+  }, [containerRef, ignoreClickRefs, onClickOutside]);
+  (0, _react.useEffect)(() => {
+    if (Object.keys(registry).length === 0) {
+      // use capture to ensure we get all events
+      document.addEventListener('mousedown', handleClick, {
+        capture: true
+      });
+    }
+
+    register(id, handler);
+    return () => {
+      deregister(id);
+
+      if (Object.keys(registry).length === 0) {
+        document.removeEventListener('mousedown', handleClick, {
+          capture: true
+        });
+      }
+    };
+  }, [id, handler]);
+};
+
+exports.useOnOutsideClick = useOnOutsideClick;