@primer/components 0.0.0-20219922627 → 0.0.0-2022530201059

package/lib/behaviors/focusZone.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.focusZone = focusZone;
-exports.hasActiveDescendantAttribute = exports.activeDescendantActivatedIndirectly = exports.activeDescendantActivatedDirectly = exports.isActiveDescendantAttribute = exports.FocusKeys = void 0;
+exports.FocusKeys = void 0;
 
 var _iterateFocusableElements = require("../utils/iterateFocusableElements");
 
@@ -15,7 +15,6 @@ var _userAgent = require("../utils/userAgent");
 var _uniqueId = require("../utils/uniqueId");
 
 (0, _eventListenerSignal.polyfill)();
-// eslint-disable-next-line no-shadow
 let FocusKeys;
 exports.FocusKeys = FocusKeys;
 
@@ -176,27 +175,21 @@ function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
   return false;
 }
 
-const isActiveDescendantAttribute = 'data-is-active-descendant';
-/**
- * A value of activated-directly for data-is-active-descendant indicates the descendant was activated
- * by a manual user interaction with intent to move active descendant.  This usually translates to the
- * user pressing one of the bound keys (up/down arrow, etc) to move through the focus zone.  This is
- * intended to be roughly equivalent to the :focus-visible pseudo-class
- **/
-
-exports.isActiveDescendantAttribute = isActiveDescendantAttribute;
-const activeDescendantActivatedDirectly = 'activated-directly';
-/**
- * A value of activated-indirectly for data-is-active-descendant indicates the descendant was activated
- * implicitly, and not by a direct key press.  This includes focus zone being created from scratch, focusable
- * elements being added/removed, and mouseover events. This is intended to be roughly equivalent
- * to :focus:not(:focus-visible)
- **/
-
-exports.activeDescendantActivatedDirectly = activeDescendantActivatedDirectly;
-const activeDescendantActivatedIndirectly = 'activated-indirectly';
-exports.activeDescendantActivatedIndirectly = activeDescendantActivatedIndirectly;
-const hasActiveDescendantAttribute = 'data-has-active-descendant';
+const subscriptions = [];
+
+function notifyActiveElement(element) {
+  for (const subscription of subscriptions) {
+    subscription(element);
+  }
+}
+
+function subscribeToActiveElementChanges(callback) {
+  subscriptions.push(callback);
+  return () => {
+    const index = subscriptions.indexOf(callback);
+    subscriptions.splice(index, 1);
+  };
+}
 /**
  * Sets up the arrow key focus behavior for all focusable elements in the given `container`.
  * @param container
@@ -204,7 +197,6 @@ const hasActiveDescendantAttribute = 'data-has-active-descendant';
  * @returns
  */
 
-exports.hasActiveDescendantAttribute = hasActiveDescendantAttribute;
 
 function focusZone(container, settings) {
   var _settings$bindKeys, _settings$focusOutBeh, _settings$focusInStra, _settings$abortSignal;
@@ -216,66 +208,34 @@ function focusZone(container, settings) {
   const focusInStrategy = (_settings$focusInStra = settings === null || settings === void 0 ? void 0 : settings.focusInStrategy) !== null && _settings$focusInStra !== void 0 ? _settings$focusInStra : 'previous';
   const activeDescendantControl = settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl;
   const activeDescendantCallback = settings === null || settings === void 0 ? void 0 : settings.onActiveDescendantChanged;
-  let currentFocusedElement;
 
-  function getFirstFocusableElement() {
-    return focusableElements[0];
-  }
-
-  function isActiveDescendantInputFocused() {
-    return document.activeElement === activeDescendantControl;
-  }
-
-  function updateFocusedElement(to, directlyActivated = false) {
-    const from = currentFocusedElement;
-    currentFocusedElement = to;
-
-    if (activeDescendantControl) {
-      if (to && isActiveDescendantInputFocused()) {
-        setActiveDescendant(from, to, directlyActivated);
-      } else {
-        clearActiveDescendant();
-      }
-
-      return;
-    }
-
-    if (from && from !== to && savedTabIndex.has(from)) {
-      from.setAttribute('tabindex', '-1');
+  function updateTabIndex(from, to) {
+    if (!activeDescendantControl) {
+      from === null || from === void 0 ? void 0 : from.setAttribute('tabindex', '-1');
+      to === null || to === void 0 ? void 0 : to.setAttribute('tabindex', '0');
     }
-
-    to === null || to === void 0 ? void 0 : to.setAttribute('tabindex', '0');
   }
 
-  function setActiveDescendant(from, to, directlyActivated = false) {
+  function setActiveDescendant(from, to) {
     if (!to.id) {
       to.setAttribute('id', (0, _uniqueId.uniqueId)());
     }
 
-    if (from && from !== to) {
-      from.removeAttribute(isActiveDescendantAttribute);
-    }
-
-    if (!activeDescendantControl || !directlyActivated && activeDescendantControl.getAttribute('aria-activedescendant') === to.id) {
-      // prevent active descendant callback from being called repeatedly if the same element is activated (e.g. via mousemove)
-      return;
-    }
-
-    activeDescendantControl.setAttribute('aria-activedescendant', to.id);
-    container.setAttribute(hasActiveDescendantAttribute, to.id);
-    to.setAttribute(isActiveDescendantAttribute, directlyActivated ? activeDescendantActivatedDirectly : activeDescendantActivatedIndirectly);
-    activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(to, from, directlyActivated);
+    currentFocusedElement = to;
+    activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.setAttribute('aria-activedescendant', to.id);
+    notifyActiveElement(to);
+    activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(to, from);
   }
 
-  function clearActiveDescendant(previouslyActiveElement = currentFocusedElement) {
+  function suspendActiveDescendant() {
+    activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
+    activeDescendantSuspended = true;
+    activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, currentFocusedElement);
+    currentFocusedElement = undefined;
+
     if (focusInStrategy === 'first') {
-      currentFocusedElement = undefined;
+      currentFocusedIndex = 0;
     }
-
-    activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
-    container.removeAttribute(hasActiveDescendantAttribute);
-    previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(isActiveDescendantAttribute);
-    activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, previouslyActiveElement, false);
   }
 
   function beginFocusManagement(...elements) {
@@ -302,10 +262,6 @@ function focusZone(container, settings) {
 
       element.setAttribute('tabindex', '-1');
     }
-
-    if (!currentFocusedElement) {
-      updateFocusedElement(getFirstFocusableElement());
-    }
   }
 
   function endFocusManagement(...elements) {
@@ -313,7 +269,13 @@ function focusZone(container, settings) {
       const focusableElementIndex = focusableElements.indexOf(element);
 
       if (focusableElementIndex >= 0) {
-        focusableElements.splice(focusableElementIndex, 1);
+        focusableElements.splice(focusableElementIndex, 1); // If removing the last-focused element, set tabindex=0 to the first element in the list.
+
+        if (element === currentFocusedElement && focusableElements.length > 0) {
+          updateTabIndex(undefined, focusableElements[0]);
+          currentFocusedElement = focusableElements[0];
+          currentFocusedIndex = 0;
+        }
       }
 
       const savedIndex = savedTabIndex.get(element);
@@ -326,38 +288,44 @@ function focusZone(container, settings) {
         }
 
         savedTabIndex.delete(element);
-      } // If removing the last-focused element, move focus to the first element in the list.
-
-
-      if (element === currentFocusedElement) {
-        const nextElementToFocus = getFirstFocusableElement();
-        updateFocusedElement(nextElementToFocus);
       }
     }
   } // Take all tabbable elements within container under management
 
 
-  beginFocusManagement(...(0, _iterateFocusableElements.iterateFocusableElements)(container)); // Open the first tabbable element for tabbing
+  beginFocusManagement(...(0, _iterateFocusableElements.iterateFocusableElements)(container)); // If multiple focus zones have overlapping DOM, we need to know about
+  // any changes that result from others so that the "previous" active element
+  // stays consistent.
 
-  updateFocusedElement(getFirstFocusableElement()); // If the DOM structure of the container changes, make sure we keep our state up-to-date
-  // with respect to the focusable elements cache and its order
+  const unsubscribeFromActiveElementChanges = subscribeToActiveElementChanges(activeElement => {
+    if (focusInStrategy === 'previous') {
+      const tabbableElementIndex = focusableElements.indexOf(activeElement);
 
-  const observer = new MutationObserver(mutations => {
-    // Perform all removals first, in case element order has simply changed
-    for (const mutation of mutations) {
-      for (const removedNode of mutation.removedNodes) {
-        if (removedNode instanceof HTMLElement) {
-          endFocusManagement(...(0, _iterateFocusableElements.iterateFocusableElements)(removedNode));
-        }
+      if (tabbableElementIndex >= 0) {
+        const nextFocusedElement = focusableElements[tabbableElementIndex];
+        const previousFocusedElement = focusableElements[currentFocusedIndex];
+        updateTabIndex(previousFocusedElement, nextFocusedElement);
+        currentFocusedIndex = tabbableElementIndex;
       }
     }
+  }); // Open the first tabbable element for tabbing
+
+  updateTabIndex(undefined, focusableElements[0]); // If the DOM structure of the container changes, make sure we keep our state up-to-date
+  // with respect to the focusable elements cache and its order
 
+  const observer = new MutationObserver(mutations => {
     for (const mutation of mutations) {
       for (const addedNode of mutation.addedNodes) {
-        if (addedNode instanceof HTMLElement) {
+        if (addedNode instanceof HTMLElement && (0, _iterateFocusableElements.isFocusable)(addedNode)) {
           beginFocusManagement(...(0, _iterateFocusableElements.iterateFocusableElements)(addedNode));
         }
       }
+
+      for (const removedNode of mutation.removedNodes) {
+        if (removedNode instanceof HTMLElement && savedTabIndex.has(removedNode)) {
+          endFocusManagement(...(0, _iterateFocusableElements.iterateFocusableElements)(removedNode));
+        }
+      }
     }
   });
   observer.observe(container, {
@@ -369,7 +337,13 @@ function focusZone(container, settings) {
   signal.addEventListener('abort', () => {
     // Clean up any modifications
     endFocusManagement(...focusableElements);
-  });
+    unsubscribeFromActiveElementChanges();
+  }); // When using activedescendant focusing, the first focus-in is caused by our listeners
+  // meaning we have to approach zero. This is safe since we clamp the value before using it.
+
+  let currentFocusedIndex = 0;
+  let activeDescendantSuspended = activeDescendantControl ? true : false;
+  let currentFocusedElement = activeDescendantControl ? undefined : focusableElements[0];
   let elementIndexFocusedByClick = undefined;
   container.addEventListener('mousedown', event => {
     // Since focusin is only called when focus changes, we need to make sure the clicked
@@ -379,75 +353,35 @@ function focusZone(container, settings) {
     }
   }, {
     signal
-  });
-
-  if (activeDescendantControl) {
-    container.addEventListener('focusin', event => {
-      if (event.target instanceof HTMLElement && focusableElements.includes(event.target)) {
-        // Move focus to the activeDescendantControl if one of the descendants is focused
-        activeDescendantControl.focus();
-        updateFocusedElement(event.target);
-      }
-    });
-    container.addEventListener('mousemove', ({
-      target
-    }) => {
-      if (!(target instanceof Node)) {
-        return;
-      }
-
-      const focusableElement = focusableElements.find(element => element.contains(target));
+  }); // This is called whenever focus enters the container
 
-      if (focusableElement) {
-        updateFocusedElement(focusableElement);
-      }
-    }, {
-      signal,
-      capture: true
-    }); // Listeners specifically on the controlling element
-
-    activeDescendantControl.addEventListener('focusin', () => {
-      // Focus moved into the active descendant input.  Activate current or first descendant.
-      if (!currentFocusedElement) {
-        updateFocusedElement(getFirstFocusableElement());
-      } else {
-        setActiveDescendant(undefined, currentFocusedElement);
-      }
-    });
-    activeDescendantControl.addEventListener('focusout', () => {
-      clearActiveDescendant();
-    });
-  } else {
-    // This is called whenever focus enters an element in the container
+  if (!activeDescendantControl) {
     container.addEventListener('focusin', event => {
       if (event.target instanceof HTMLElement) {
         // If a click initiated the focus movement, we always want to set our internal state
         // to reflect the clicked element as the currently focused one.
-        if (elementIndexFocusedByClick !== undefined) {
+        if (elementIndexFocusedByClick != undefined) {
           if (elementIndexFocusedByClick >= 0) {
             if (focusableElements[elementIndexFocusedByClick] !== currentFocusedElement) {
-              updateFocusedElement(focusableElements[elementIndexFocusedByClick]);
+              updateTabIndex(currentFocusedElement, focusableElements[elementIndexFocusedByClick]);
             }
+
+            currentFocusedIndex = elementIndexFocusedByClick;
           }
 
           elementIndexFocusedByClick = undefined;
         } else {
           // Set tab indexes and internal state based on the focus handling strategy
           if (focusInStrategy === 'previous') {
-            updateFocusedElement(event.target);
-          } else if (focusInStrategy === 'closest' || focusInStrategy === 'first') {
-            if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
+            updateTabIndex(currentFocusedElement, event.target);
+          } else if (focusInStrategy === 'first') {
+            if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget) && event.target !== focusableElements[0]) {
               // Regardless of the previously focused element, if we're coming from outside the
-              // container, put focus onto the first encountered element (from above, it's The
-              // first element of the container; from below, it's the last). If the
-              // focusInStrategy is set to "first", lastKeyboardFocusDirection will always
-              // be undefined.
-              const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.length - 1 : 0;
-              const targetElement = focusableElements[targetElementIndex];
-              targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus();
-              return;
+              // container, put focus onto the first element.
+              currentFocusedIndex = 0;
+              focusableElements[0].focus();
             } else {
-              updateFocusedElement(event.target);
+              updateTabIndex(currentFocusedElement, event.target);
             }
           } else if (typeof focusInStrategy === 'function') {
             if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
@@ -455,54 +389,31 @@ function focusZone(container, settings) {
               const requestedFocusElementIndex = elementToFocus ? focusableElements.indexOf(elementToFocus) : -1;
 
               if (requestedFocusElementIndex >= 0 && elementToFocus instanceof HTMLElement) {
-                // Since we are calling focus() this handler will run again synchronously. Therefore,
+                currentFocusedIndex = requestedFocusElementIndex; // Since we are calling focus() this handler will run again synchronously. Therefore,
                 // we don't want to let this invocation finish since it will clobber the value of
                 // currentFocusedElement.
+
                 elementToFocus.focus();
                 return;
               } else {
-                // eslint-disable-next-line no-console
+                // Should we warn here?
                 console.warn('Element requested is not a known focusable element.');
               }
             } else {
-              updateFocusedElement(event.target);
+              updateTabIndex(currentFocusedElement, event.target);
             }
           }
         }
-      }
-
-      lastKeyboardFocusDirection = undefined;
-    }, {
-      signal
-    });
-  }
 
-  const keyboardEventRecipient = activeDescendantControl !== null && activeDescendantControl !== void 0 ? activeDescendantControl : container; // If the strategy is "closest", we need to capture the direction that the user
-  // is trying to move focus before our focusin handler is executed.
-
-  let lastKeyboardFocusDirection = undefined;
-
-  if (focusInStrategy === 'closest') {
-    document.addEventListener('keydown', event => {
-      if (event.key === 'Tab') {
-        lastKeyboardFocusDirection = getDirection(event);
+        notifyActiveElement(event.target);
+        currentFocusedElement = event.target;
       }
     }, {
-      signal,
-      capture: true
+      signal
     });
   }
 
-  function getCurrentFocusedIndex() {
-    if (!currentFocusedElement) {
-      return 0;
-    }
-
-    const focusedIndex = focusableElements.indexOf(currentFocusedElement);
-    const fallbackIndex = currentFocusedElement === container ? -1 : 0;
-    return focusedIndex !== -1 ? focusedIndex : fallbackIndex;
-  } // "keydown" is the event that triggers DOM focus change, so that is what we use here
-
+  const keyboardEventRecipient = activeDescendantControl !== null && activeDescendantControl !== void 0 ? activeDescendantControl : container; // "keydown" is the event that triggers DOM focus change, so that is what we use here
 
   keyboardEventRecipient.addEventListener('keydown', event => {
     if (event.key in KEY_TO_DIRECTION) {
@@ -511,57 +422,65 @@ function focusZone(container, settings) {
       if (!event.defaultPrevented && (keyBit & bindKeys) > 0 && !shouldIgnoreFocusHandling(event, document.activeElement)) {
         // Moving forward or backward?
         const direction = getDirection(event);
-        let nextElementToFocus = undefined; // If there is a custom function that retrieves the next focusable element, try calling that first.
+        let nextElementToFocus = undefined;
 
-        if (settings !== null && settings !== void 0 && settings.getNextFocusable) {
-          var _document$activeEleme;
+        if (activeDescendantSuspended) {
+          activeDescendantSuspended = false;
+          nextElementToFocus = focusableElements[currentFocusedIndex];
+        } else {
+          // If there is a custom function that retrieves the next focusable element, try calling that first.
+          if (settings !== null && settings !== void 0 && settings.getNextFocusable) {
+            var _document$activeEleme;
 
-          nextElementToFocus = settings.getNextFocusable(direction, (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 ? _document$activeEleme : undefined, event);
-        }
+            nextElementToFocus = settings.getNextFocusable(direction, (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 ? _document$activeEleme : undefined, event);
+          }
 
-        if (!nextElementToFocus) {
-          const lastFocusedIndex = getCurrentFocusedIndex();
-          let nextFocusedIndex = lastFocusedIndex;
+          if (!nextElementToFocus) {
+            const lastFocusedIndex = currentFocusedIndex;
+
+            if (direction === 'previous') {
+              currentFocusedIndex -= 1;
+            } else if (direction === 'start') {
+              currentFocusedIndex = 0;
+            } else if (direction === 'next') {
+              currentFocusedIndex += 1;
+            } else if (direction === 'end') {
+              currentFocusedIndex = focusableElements.length - 1;
+            }
 
-          if (direction === 'previous') {
-            nextFocusedIndex -= 1;
-          } else if (direction === 'start') {
-            nextFocusedIndex = 0;
-          } else if (direction === 'next') {
-            nextFocusedIndex += 1;
-          } else {
-            // end
-            nextFocusedIndex = focusableElements.length - 1;
-          }
+            if (currentFocusedIndex < 0) {
+              // Tab should never cause focus to wrap. Use focusTrap for that behavior.
+              if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
+                currentFocusedIndex = focusableElements.length - 1;
+              } else {
+                if (activeDescendantControl) {
+                  suspendActiveDescendant();
+                }
 
-          if (nextFocusedIndex < 0) {
-            // Tab should never cause focus to wrap. Use focusTrap for that behavior.
-            if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
-              nextFocusedIndex = focusableElements.length - 1;
-            } else {
-              nextFocusedIndex = 0;
+                currentFocusedIndex = 0;
+              }
             }
-          }
 
-          if (nextFocusedIndex >= focusableElements.length) {
-            if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
-              nextFocusedIndex = 0;
-            } else {
-              nextFocusedIndex = focusableElements.length - 1;
+            if (currentFocusedIndex >= focusableElements.length) {
+              if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
+                currentFocusedIndex = 0;
+              } else {
+                currentFocusedIndex = focusableElements.length - 1;
+              }
             }
-          }
 
-          if (lastFocusedIndex !== nextFocusedIndex) {
-            nextElementToFocus = focusableElements[nextFocusedIndex];
+            if (lastFocusedIndex !== currentFocusedIndex) {
+              nextElementToFocus = focusableElements[currentFocusedIndex];
+            }
           }
         }
 
-        if (activeDescendantControl) {
-          updateFocusedElement(nextElementToFocus || currentFocusedElement, true);
-        } else if (nextElementToFocus) {
-          lastKeyboardFocusDirection = direction; // updateFocusedElement will be called implicitly when focus moves, as long as the event isn't prevented somehow
-
-          nextElementToFocus.focus();
+        if (nextElementToFocus) {
+          if (activeDescendantControl) {
+            setActiveDescendant(currentFocusedElement, nextElementToFocus);
+          } else {
+            nextElementToFocus.focus();
+          }
         } // Tab should always allow escaping from this container, so only
         // preventDefault if tab key press already resulted in a focus movement
 
@@ -571,8 +490,19 @@ function focusZone(container, settings) {
         }
       }
     }
+
+    if (event.key === 'Escape' && !activeDescendantSuspended && activeDescendantControl) {
+      suspendActiveDescendant();
+    }
   }, {
     signal
   });
+
+  if (activeDescendantControl) {
+    activeDescendantControl.addEventListener('focusout', () => {
+      suspendActiveDescendant();
+    });
+  }
+
   return controller;
 }

package/lib/constants.js

@@ -13,11 +13,10 @@ 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 _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-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 _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; }
 
-// eslint-disable-next-line import/no-namespace
 const {
   get: getKey,
   compose,

package/lib/hooks/index.js

@@ -39,12 +39,6 @@ Object.defineProperty(exports, "useOverlay", {
     return _useOverlay.useOverlay;
   }
 });
-Object.defineProperty(exports, "useRenderForcingRef", {
-  enumerable: true,
-  get: function () {
-    return _useRenderForcingRef.useRenderForcingRef;
-  }
-});
 
 var _useOnOutsideClick = require("./useOnOutsideClick");
 
@@ -56,6 +50,4 @@ var _useOpenAndCloseFocus = require("./useOpenAndCloseFocus");
 
 var _useAnchoredPosition = require("./useAnchoredPosition");
 
-var _useOverlay = require("./useOverlay");
-
-var _useRenderForcingRef = require("./useRenderForcingRef");
+var _useOverlay = require("./useOverlay");

package/lib/hooks/useAnchoredPosition.js

@@ -11,8 +11,6 @@ var _anchoredPosition = require("../behaviors/anchoredPosition");
 
 var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
 
-var _useResizeObserver = require("./useResizeObserver");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -24,24 +22,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @returns An object of {top: number, left: number} to absolutely-position the
  * floating element.
  */
-function useAnchoredPosition(settings, dependencies = []) {
+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(() => {
+  _react.default.useEffect(() => {
     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]);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  _react.default.useLayoutEffect(updatePosition, [updatePosition]);
+  }, dependencies !== null && dependencies !== void 0 ? dependencies : []);
 
-  (0, _useResizeObserver.useResizeObserver)(updatePosition);
   return {
     floatingElementRef,
     anchorElementRef,

package/lib/hooks/useDialog.js

@@ -49,7 +49,7 @@ function useDialog({
     }
   }, [isOpen, initialFocusRef, closeButtonRef]);
   const getFocusableItem = (0, _react.useCallback)((e, movement) => {
-    if (modalRef.current) {
+    if (modalRef && modalRef.current) {
       const items = Array.from(modalRef.current.querySelectorAll('*')).filter(focusable);
       if (items.length === 0) return;
       e.preventDefault();