@primer/components 32.0.1-rc.c4c2c50a → 32.1.0

package/lib/behaviors/scrollIntoViewingArea.js

@@ -1,22 +1,39 @@
 "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,52 +1,56 @@
 "use strict";
-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;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-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;
-const theme_get_1 = require("@styled-system/theme-get");
+
+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; }
+
 // eslint-disable-next-line import/no-namespace
-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));
+const {
+  get: getKey,
+  compose,
+  system
+} = styledSystem;
+
+const get = key => (0, _themeGet.themeGet)(key, getKey(_theme.default, key)); // Common props
+
+
 exports.get = get;
-// Common props
-exports.COMMON = compose(styledSystem.space, styledSystem.color, styledSystem.display);
+const COMMON = compose(styledSystem.space, styledSystem.color, styledSystem.display);
+exports.COMMON = COMMON;
 // Typography props
 const whiteSpace = system({
-    whiteSpace: {
-        property: 'whiteSpace'
-        // cssProperty: 'whiteSpace',
-    }
+  whiteSpace: {
+    property: 'whiteSpace' // cssProperty: 'whiteSpace',
+
+  }
 });
-exports.TYPOGRAPHY = compose(styledSystem.typography, whiteSpace);
+const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace);
+exports.TYPOGRAPHY = TYPOGRAPHY;
 // Border props
-exports.BORDER = compose(styledSystem.border, styledSystem.shadow);
+const BORDER = compose(styledSystem.border, styledSystem.shadow);
+exports.BORDER = BORDER;
 // Layout props
-exports.LAYOUT = styledSystem.layout;
+const LAYOUT = styledSystem.layout;
+exports.LAYOUT = LAYOUT;
 // Position props
-exports.POSITION = styledSystem.position;
+const POSITION = styledSystem.position;
+exports.POSITION = POSITION;
 // Flex props
-exports.FLEX = styledSystem.flexbox;
+const FLEX = styledSystem.flexbox;
+exports.FLEX = FLEX;
 // Grid props
-exports.GRID = styledSystem.grid;
+const GRID = styledSystem.grid;
+exports.GRID = GRID;

package/lib/drafts.js

@@ -1,21 +1,31 @@
 "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);
+
+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

@@ -1,17 +1,61 @@
 "use strict";
-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; } });
+
+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

@@ -1,14 +1,22 @@
 "use strict";
-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"));
+
+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
@@ -19,25 +27,25 @@ const useIsomorphicLayoutEffect_1 = __importDefault(require("../utils/useIsomorp
  * floating element.
  */
 function useAnchoredPosition(settings, dependencies = []) {
-    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;
+  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

@@ -1,11 +1,16 @@
 "use strict";
-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"));
+
+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
@@ -15,29 +20,28 @@ const useIsomorphicLayoutEffect_1 = __importDefault(require("../utils/useIsomorp
  * @param refs
  */
 function useCombinedRefs(...refs) {
-    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;
-                }
-            }
+  const combinedRef = (0, _react.useRef)(null);
+  (0, _useIsomorphicLayoutEffect.default)(() => {
+    function setRefs(current = null) {
+      for (const ref of refs) {
+        if (!ref) {
+          return;
         }
-        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;
+
+        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/useDialog.js

@@ -1,80 +1,104 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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);
+  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 = 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 };
+
+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
     };
-    return { getDialogProps };
+  };
+
+  return {
+    getDialogProps
+  };
 }
-exports.default = useDialog;
+
+var _default = useDialog;
+exports.default = _default;