@thecb/components 10.5.0-beta.1 → 10.5.0-beta.2

package/dist/index.cjs.js

@@ -46304,14 +46304,25 @@ var Modal$1 = function Modal(_ref) {
     blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
-  var modalContainerRef = React.useRef(null);
+
+  // `AriaModal` uses `focus-trap` as a transient dependency. It automatically looks
+  // for a tabbable node when the modal mounts. When it doesn't find one, it looks to
+  // the `fallbackFocus` option. However, React does not guarantee the ref supplied to
+  // this option will be populated on initial render when `focus-trap` is checking
+  // these option. When there are no buttons in the modal, this causes an error.
+  // Because `focus-trap` cannot be disabled, the ref requires a dummy node to satisfy
+  // `focus-trap` until React populates it with the real ref value.
+  //
+  // See:
+  //   - https://react.dev/reference/react/useRef#caveats
+  //   - https://github.com/davidtheclark/react-aria-modal/pull/103
+  var modalContainerRef = React.useRef( /*#__PURE__*/React__default.createElement("div", null));
   return /*#__PURE__*/React__default.createElement("div", {
     ref: modalContainerRef,
     "data-qa": dataQa
-  }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal
-  // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
-  , {
+  }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
     focusTrapOptions: {
+      // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
       fallbackFocus: modalContainerRef === null || modalContainerRef === void 0 ? void 0 : modalContainerRef.current
     },
     onExit: onExit,
@@ -46614,17 +46625,29 @@ var Modal$2 = function Modal(_ref) {
     useDangerButton = _ref$useDangerButton === void 0 ? false : _ref$useDangerButton;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
-  var modalContainerRef = React.useRef(null);
+
+  // `AriaModal` uses `focus-trap` as a transient dependency. It automatically looks
+  // for a tabbable node when the modal mounts. When it doesn't find one, it looks to
+  // the `fallbackFocus` option. However, React does not guarantee the ref supplied to
+  // this option will be populated on initial render when `focus-trap` is checking
+  // these option. When there are no buttons in the modal, this causes an error.
+  // Because `focus-trap` cannot be disabled, the ref requires a dummy node to satisfy
+  // `focus-trap` until React populates it with the real ref value.
+  //
+  // See:
+  //   - https://react.dev/reference/react/useRef#caveats
+  //   - https://github.com/davidtheclark/react-aria-modal/pull/103
+  var modalContainerRef = React.useRef( /*#__PURE__*/React__default.createElement("div", null));
   var hasCloseButton = onlyCloseButton && !noButtons;
   var hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
   var hasContinueButton = onlyContinueButton && !noButtons || !onlyCloseButton && !noButtons;
   return /*#__PURE__*/React__default.createElement("div", {
     ref: modalContainerRef,
+    tabIndex: "-1",
     "data-qa": dataQa
-  }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal
-  // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
-  , {
+  }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
     focusTrapOptions: {
+      // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
       fallbackFocus: modalContainerRef === null || modalContainerRef === void 0 ? void 0 : modalContainerRef.current
     },
     onExit: onExit,