@primer/components 31.2.0-rc.c53cfd9e → 31.2.0

package/lib/behaviors/scrollIntoViewingArea.js

@@ -1,39 +1,22 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.scrollIntoViewingArea = void 0;
-
 const scrollIntoViewingArea = (child, viewingArea, direction = 'vertical', startMargin = 8, endMargin = 0, behavior = 'smooth') => {
-  const startSide = direction === 'vertical' ? 'top' : 'left';
-  const endSide = direction === 'vertical' ? 'bottom' : 'right';
-  const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
-  const {
-    [startSide]: childStart,
-    [endSide]: childEnd
-  } = child.getBoundingClientRect();
-  const {
-    [startSide]: viewingAreaStart,
-    [endSide]: viewingAreaEnd
-  } = viewingArea.getBoundingClientRect();
-  const isChildStartAboveViewingArea = childStart < viewingAreaStart + endMargin;
-  const isChildBottomBelowViewingArea = childEnd > viewingAreaEnd - startMargin;
-
-  if (isChildStartAboveViewingArea) {
-    const scrollHeightToChildStart = childStart - viewingAreaStart + viewingArea[scrollSide];
-    viewingArea.scrollTo({
-      behavior,
-      [startSide]: scrollHeightToChildStart - endMargin
-    });
-  } else if (isChildBottomBelowViewingArea) {
-    const scrollHeightToChildBottom = childEnd - viewingAreaEnd + viewingArea[scrollSide];
-    viewingArea.scrollTo({
-      behavior,
-      [startSide]: scrollHeightToChildBottom + startMargin
-    });
-  } // either completely in view or outside viewing area on both ends, don't scroll
-
+    const startSide = direction === 'vertical' ? 'top' : 'left';
+    const endSide = direction === 'vertical' ? 'bottom' : 'right';
+    const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+    const { [startSide]: childStart, [endSide]: childEnd } = child.getBoundingClientRect();
+    const { [startSide]: viewingAreaStart, [endSide]: viewingAreaEnd } = viewingArea.getBoundingClientRect();
+    const isChildStartAboveViewingArea = childStart < viewingAreaStart + endMargin;
+    const isChildBottomBelowViewingArea = childEnd > viewingAreaEnd - startMargin;
+    if (isChildStartAboveViewingArea) {
+        const scrollHeightToChildStart = childStart - viewingAreaStart + viewingArea[scrollSide];
+        viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildStart - endMargin });
+    }
+    else if (isChildBottomBelowViewingArea) {
+        const scrollHeightToChildBottom = childEnd - viewingAreaEnd + viewingArea[scrollSide];
+        viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildBottom + startMargin });
+    }
+    // either completely in view or outside viewing area on both ends, don't scroll
 };
-
-exports.scrollIntoViewingArea = scrollIntoViewingArea;
+exports.scrollIntoViewingArea = scrollIntoViewingArea;

package/lib/constants.js

@@ -1,56 +1,52 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.GRID = exports.FLEX = exports.POSITION = exports.LAYOUT = exports.BORDER = exports.TYPOGRAPHY = exports.COMMON = exports.get = void 0;
-
-var _themeGet = require("@styled-system/theme-get");
-
-var styledSystem = _interopRequireWildcard(require("styled-system"));
-
-var _theme = _interopRequireDefault(require("./theme"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
-
+const theme_get_1 = require("@styled-system/theme-get");
 // eslint-disable-next-line import/no-namespace
-const {
-  get: getKey,
-  compose,
-  system
-} = styledSystem;
-
-const get = key => (0, _themeGet.themeGet)(key, getKey(_theme.default, key)); // Common props
-
-
+const styledSystem = __importStar(require("styled-system"));
+const theme_1 = __importDefault(require("./theme"));
+const { get: getKey, compose, system } = styledSystem;
+const get = (key) => theme_get_1.themeGet(key, getKey(theme_1.default, key));
 exports.get = get;
-const COMMON = compose(styledSystem.space, styledSystem.color, styledSystem.display);
-exports.COMMON = COMMON;
+// Common props
+exports.COMMON = compose(styledSystem.space, styledSystem.color, styledSystem.display);
 // Typography props
 const whiteSpace = system({
-  whiteSpace: {
-    property: 'whiteSpace' // cssProperty: 'whiteSpace',
-
-  }
+    whiteSpace: {
+        property: 'whiteSpace'
+        // cssProperty: 'whiteSpace',
+    }
 });
-const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace);
-exports.TYPOGRAPHY = TYPOGRAPHY;
+exports.TYPOGRAPHY = compose(styledSystem.typography, whiteSpace);
 // Border props
-const BORDER = compose(styledSystem.border, styledSystem.shadow);
-exports.BORDER = BORDER;
+exports.BORDER = compose(styledSystem.border, styledSystem.shadow);
 // Layout props
-const LAYOUT = styledSystem.layout;
-exports.LAYOUT = LAYOUT;
+exports.LAYOUT = styledSystem.layout;
 // Position props
-const POSITION = styledSystem.position;
-exports.POSITION = POSITION;
+exports.POSITION = styledSystem.position;
 // Flex props
-const FLEX = styledSystem.flexbox;
-exports.FLEX = FLEX;
+exports.FLEX = styledSystem.flexbox;
 // Grid props
-const GRID = styledSystem.grid;
-exports.GRID = GRID;
+exports.GRID = styledSystem.grid;

package/lib/{unreleased.d.ts → drafts.d.ts}

@@ -2,6 +2,7 @@
  *  api yet (not in main bundle). We don't recommend using it in production.
  *
  *  But, they are published on npm and you can import them for experimentation/feedback.
- *  example: import {ActionList} from '@primer/components/unreleased
+ *  example: import {ActionList} from '@primer/components/drafts
  */
 export * from './ActionList2';
+export * from './NewButton';

package/lib/drafts.js

@@ -0,0 +1,21 @@
+"use strict";
+/** This is the place where we keep components that are not part of the public
+ *  api yet (not in main bundle). We don't recommend using it in production.
+ *
+ *  But, they are published on npm and you can import them for experimentation/feedback.
+ *  example: import {ActionList} from '@primer/components/drafts
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Components
+__exportStar(require("./ActionList2"), exports);
+__exportStar(require("./NewButton"), exports);

package/lib/hooks/index.js

@@ -1,61 +1,17 @@
 "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");
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenderForcingRef = exports.useOverlay = exports.useAnchoredPosition = exports.useOpenAndCloseFocus = exports.useOnEscapePress = exports.useProvidedRefOrCreate = exports.useOnOutsideClick = void 0;
+var useOnOutsideClick_1 = require("./useOnOutsideClick");
+Object.defineProperty(exports, "useOnOutsideClick", { enumerable: true, get: function () { return useOnOutsideClick_1.useOnOutsideClick; } });
+var useProvidedRefOrCreate_1 = require("./useProvidedRefOrCreate");
+Object.defineProperty(exports, "useProvidedRefOrCreate", { enumerable: true, get: function () { return useProvidedRefOrCreate_1.useProvidedRefOrCreate; } });
+var useOnEscapePress_1 = require("./useOnEscapePress");
+Object.defineProperty(exports, "useOnEscapePress", { enumerable: true, get: function () { return useOnEscapePress_1.useOnEscapePress; } });
+var useOpenAndCloseFocus_1 = require("./useOpenAndCloseFocus");
+Object.defineProperty(exports, "useOpenAndCloseFocus", { enumerable: true, get: function () { return useOpenAndCloseFocus_1.useOpenAndCloseFocus; } });
+var useAnchoredPosition_1 = require("./useAnchoredPosition");
+Object.defineProperty(exports, "useAnchoredPosition", { enumerable: true, get: function () { return useAnchoredPosition_1.useAnchoredPosition; } });
+var useOverlay_1 = require("./useOverlay");
+Object.defineProperty(exports, "useOverlay", { enumerable: true, get: function () { return useOverlay_1.useOverlay; } });
+var useRenderForcingRef_1 = require("./useRenderForcingRef");
+Object.defineProperty(exports, "useRenderForcingRef", { enumerable: true, get: function () { return useRenderForcingRef_1.useRenderForcingRef; } });

package/lib/hooks/useAnchoredPosition.js

@@ -1,22 +1,14 @@
 "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 }; }
-
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnchoredPosition = void 0;
+const react_1 = __importDefault(require("react"));
+const anchoredPosition_1 = require("../behaviors/anchoredPosition");
+const useProvidedRefOrCreate_1 = require("./useProvidedRefOrCreate");
+const useResizeObserver_1 = require("./useResizeObserver");
+const useIsomorphicLayoutEffect_1 = __importDefault(require("../utils/useIsomorphicLayoutEffect"));
 /**
  * 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
@@ -27,25 +19,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * 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
-  };
-}
+    const floatingElementRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(settings?.floatingElementRef);
+    const anchorElementRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(settings?.anchorElementRef);
+    const [position, setPosition] = react_1.default.useState(undefined);
+    const updatePosition = react_1.default.useCallback(() => {
+        if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
+            setPosition(anchoredPosition_1.getAnchoredPosition(floatingElementRef.current, anchorElementRef.current, settings));
+        }
+        else {
+            setPosition(undefined);
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [floatingElementRef, anchorElementRef, ...dependencies]);
+    useIsomorphicLayoutEffect_1.default(updatePosition, [updatePosition]);
+    useResizeObserver_1.useResizeObserver(updatePosition);
+    return {
+        floatingElementRef,
+        anchorElementRef,
+        position
+    };
+}
+exports.useAnchoredPosition = useAnchoredPosition;

package/lib/hooks/useCombinedRefs.js

@@ -1,16 +1,11 @@
 "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 }; }
-
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCombinedRefs = void 0;
+const react_1 = require("react");
+const useIsomorphicLayoutEffect_1 = __importDefault(require("../utils/useIsomorphicLayoutEffect"));
 /**
  * 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
@@ -20,28 +15,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @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;
+    const combinedRef = react_1.useRef(null);
+    useIsomorphicLayoutEffect_1.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;
-}
+        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;
+}
+exports.useCombinedRefs = useCombinedRefs;

package/lib/hooks/useDetails.jsx

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useDetails({ ref, closeOnOutsideClick, defaultOpen, onClickOutside }) {
+    const [open, setOpen] = react_1.useState(defaultOpen);
+    const backupRef = react_1.useRef(null);
+    const customRef = ref ?? backupRef;
+    const onClickOutsideInternal = react_1.useCallback((event) => {
+        const { current } = customRef;
+        const eventTarget = event.target;
+        const closest = eventTarget.closest('details');
+        if (closest !== current) {
+            onClickOutside && onClickOutside(event);
+            if (!event.defaultPrevented) {
+                setOpen(false);
+            }
+        }
+    }, [customRef, setOpen, onClickOutside]);
+    // handles the overlay behavior - closing the menu when clicking outside of it
+    react_1.useEffect(() => {
+        if (open && closeOnOutsideClick) {
+            document.addEventListener('click', onClickOutsideInternal);
+            return () => {
+                document.removeEventListener('click', onClickOutsideInternal);
+            };
+        }
+    }, [open, closeOnOutsideClick, onClickOutsideInternal]);
+    const handleToggle = (e) => {
+        if (!e.defaultPrevented) {
+            const eventTarget = e.target;
+            setOpen(eventTarget.open);
+        }
+    };
+    const getDetailsProps = () => {
+        return { onToggle: handleToggle, open, ref: customRef };
+    };
+    return { open, setOpen, getDetailsProps };
+}
+exports.default = useDetails;

package/lib/hooks/useDialog.js

@@ -1,104 +1,80 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
 const noop = () => null;
-
 function visible(el) {
-  return !el.hidden && (!el.type || el.type !== 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0);
+    return !el.hidden && (!el.type || el.type !== 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0);
 }
-
 function focusable(el) {
-  const inputEl = el;
-  return inputEl.tabIndex >= 0 && !inputEl.disabled && visible(inputEl);
+    const inputEl = el;
+    return inputEl.tabIndex >= 0 && !inputEl.disabled && visible(inputEl);
 }
-
-function useDialog({
-  modalRef,
-  overlayRef,
-  isOpen,
-  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();
-    }
-  }, [onDismiss, modalRef, overlayRef]);
-  (0, _react.useEffect)(() => {
-    if (isOpen) {
-      document.addEventListener('click', onClickOutside);
-      return () => {
-        document.removeEventListener('click', onClickOutside);
-      };
-    }
-  }, [isOpen, onClickOutside]);
-  (0, _react.useEffect)(() => {
-    if (isOpen) {
-      if (initialFocusRef && initialFocusRef.current) {
-        initialFocusRef.current.focus();
-      } else if (closeButtonRef && closeButtonRef.current) {
-        closeButtonRef.current.focus();
-      }
-    }
-  }, [isOpen, initialFocusRef, closeButtonRef]);
-  const getFocusableItem = (0, _react.useCallback)((e, movement) => {
-    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;
-      const focusableItem = items[offsetIndex] || items[fallbackIndex];
-      return focusableItem;
-    }
-  }, [modalRef]);
-  const handleTab = (0, _react.useCallback)(e => {
-    const movement = e.shiftKey ? -1 : 1;
-    const focusableItem = getFocusableItem(e, movement);
-
-    if (!focusableItem) {
-      return;
-    }
-
-    focusableItem.focus();
-  }, [getFocusableItem]);
-  const onKeyDown = (0, _react.useCallback)(event => {
-    switch (event.key) {
-      case 'Tab':
-        handleTab(event);
-        break;
-
-      case 'Escape':
-        onDismiss();
-        event.stopPropagation();
-        break;
-    }
-  }, [handleTab, onDismiss]);
-
-  const getDialogProps = () => {
-    return {
-      onKeyDown
+function useDialog({ modalRef, overlayRef, isOpen, onDismiss = noop, initialFocusRef, closeButtonRef }) {
+    const onClickOutside = react_1.useCallback(e => {
+        if (modalRef.current &&
+            overlayRef.current &&
+            !modalRef.current.contains(e.target) &&
+            overlayRef.current.contains(e.target)) {
+            onDismiss();
+        }
+    }, [onDismiss, modalRef, overlayRef]);
+    react_1.useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('click', onClickOutside);
+            return () => {
+                document.removeEventListener('click', onClickOutside);
+            };
+        }
+    }, [isOpen, onClickOutside]);
+    react_1.useEffect(() => {
+        if (isOpen) {
+            if (initialFocusRef && initialFocusRef.current) {
+                initialFocusRef.current.focus();
+            }
+            else if (closeButtonRef && closeButtonRef.current) {
+                closeButtonRef.current.focus();
+            }
+        }
+    }, [isOpen, initialFocusRef, closeButtonRef]);
+    const getFocusableItem = react_1.useCallback((e, movement) => {
+        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;
+            const focusableItem = items[offsetIndex] || items[fallbackIndex];
+            return focusableItem;
+        }
+    }, [modalRef]);
+    const handleTab = react_1.useCallback(e => {
+        const movement = e.shiftKey ? -1 : 1;
+        const focusableItem = getFocusableItem(e, movement);
+        if (!focusableItem) {
+            return;
+        }
+        focusableItem.focus();
+    }, [getFocusableItem]);
+    const onKeyDown = react_1.useCallback(event => {
+        switch (event.key) {
+            case 'Tab':
+                handleTab(event);
+                break;
+            case 'Escape':
+                onDismiss();
+                event.stopPropagation();
+                break;
+        }
+    }, [handleTab, onDismiss]);
+    const getDialogProps = () => {
+        return { onKeyDown };
     };
-  };
-
-  return {
-    getDialogProps
-  };
+    return { getDialogProps };
 }
-
-var _default = useDialog;
-exports.default = _default;
+exports.default = useDialog;