@primer/components 0.0.0-2021111171525 → 0.0.0-20211111716

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.d.ts

@@ -0,0 +1,8 @@
+/** 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
+ */
+export * from './ActionList2';
+export * from './NewButton';

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.d.ts

@@ -0,0 +1,11 @@
+export { useOnOutsideClick } from './useOnOutsideClick';
+export type { UseOnOutsideClickSettings, TouchOrMouseEvent } from './useOnOutsideClick';
+export { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
+export { useOnEscapePress } from './useOnEscapePress';
+export { useOpenAndCloseFocus } from './useOpenAndCloseFocus';
+export type { UseOpenAndCloseFocusSettings } from './useOpenAndCloseFocus';
+export type { AnchoredPositionHookSettings } from './useAnchoredPosition';
+export { useAnchoredPosition } from './useAnchoredPosition';
+export { useOverlay } from './useOverlay';
+export type { UseOverlaySettings } from './useOverlay';
+export { useRenderForcingRef } from './useRenderForcingRef';

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.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PositionSettings, AnchorPosition } from '../behaviors/anchoredPosition';
+export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
+    floatingElementRef?: React.RefObject<Element>;
+    anchorElementRef?: React.RefObject<Element>;
+}
+/**
+ * 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.
+ */
+export declare function useAnchoredPosition(settings?: AnchoredPositionHookSettings, dependencies?: React.DependencyList): {
+    floatingElementRef: React.RefObject<Element>;
+    anchorElementRef: React.RefObject<Element>;
+    position: AnchorPosition | undefined;
+};

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.d.ts

@@ -0,0 +1,10 @@
+import { ForwardedRef } from 'react';
+/**
+ * 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
+ */
+export declare function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]): import("react").MutableRefObject<T | null>;

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.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+declare type UseDetailsParameters = {
+    ref?: React.RefObject<HTMLElement>;
+    closeOnOutsideClick?: boolean;
+    defaultOpen?: boolean;
+    onClickOutside?: (event: MouseEvent) => void;
+};
+declare function useDetails({ ref, closeOnOutsideClick, defaultOpen, onClickOutside }: UseDetailsParameters): {
+    open: boolean | undefined;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
+    getDetailsProps: () => {
+        onToggle: (e: React.SyntheticEvent<HTMLElement, Event>) => void;
+        open: boolean | undefined;
+        ref: import("react").RefObject<HTMLElement>;
+    };
+};
+export default useDetails;

package/lib/hooks/useDialog.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+declare type UseDialogParameters = {
+    modalRef: React.RefObject<HTMLElement>;
+    overlayRef: React.RefObject<HTMLElement>;
+    isOpen?: boolean;
+    onDismiss?: () => void;
+    initialFocusRef?: React.RefObject<HTMLElement>;
+    closeButtonRef?: React.RefObject<HTMLElement>;
+    returnFocusRef?: React.RefObject<HTMLElement>;
+};
+declare function useDialog({ modalRef, overlayRef, isOpen, onDismiss, initialFocusRef, closeButtonRef }: UseDialogParameters): {
+    getDialogProps: () => {
+        onKeyDown: (event: any) => void;
+    };
+};
+export default useDialog;

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.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+export interface FocusTrapHookSettings {
+    /**
+     * Ref that will be used for the trapping container. If not provided, one will
+     * be created by this hook and returned.
+     */
+    containerRef?: React.RefObject<HTMLElement>;
+    /**
+     * Ref for the element that should receive focus when the focus trap is first enabled. If
+     * not provided, one will be created by this hook and returned. Its use is optional.
+     */
+    initialFocusRef?: React.RefObject<HTMLElement>;
+    /**
+     * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at
+     * any time.
+     */
+    disabled?: boolean;
+    /**
+     * If true, when this focus trap is cleaned up, restore focus to the element that had
+     * focus immediately before the focus trap was enabled. (Default: false)
+     */
+    restoreFocusOnCleanUp?: boolean;
+}
+/**
+ * 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}
+ */
+export declare function useFocusTrap(settings?: FocusTrapHookSettings, dependencies?: React.DependencyList): {
+    containerRef: React.RefObject<HTMLElement>;
+    initialFocusRef: React.RefObject<HTMLElement>;
+};

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.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FocusZoneSettings } from '../behaviors/focusZone';
+export interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDescendantControl'> {
+    /**
+     * Optional ref for the container that holds all elements participating in arrow key focus.
+     * If one is not passed, we will create one for you and return it from the hook.
+     */
+    containerRef?: React.RefObject<HTMLElement>;
+    /**
+     * If using the "active descendant" focus pattern, pass `true` or a ref to the controlling
+     * element. If a ref object is not passed, we will create one for you.
+     */
+    activeDescendantFocus?: boolean | React.RefObject<HTMLElement>;
+    /**
+     * Set to true to disable the focus zone and clean up listeners. Can be re-enabled at
+     * any time.
+     */
+    disabled?: boolean;
+}
+export declare function useFocusZone(settings?: FocusZoneHookSettings, dependencies?: React.DependencyList): {
+    containerRef: React.RefObject<HTMLElement>;
+    activeDescendantControlRef: React.RefObject<HTMLElement>;
+};

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.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+/**
+ * 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.
+ */
+export declare const useOnEscapePress: (onEscape: (e: KeyboardEvent) => void, callbackDependencies?: import("react").DependencyList) => void;