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

package/dist/index.esm.js

@@ -46296,14 +46296,27 @@ var Modal$1 = function Modal(_ref) {
     blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
-  var modalContainerRef = 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 itself requires a default value
+  // 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
+  //   - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
+  var modalContainerRef = useRef("[id='react-aria-modal-dialog']");
   return /*#__PURE__*/React.createElement("div", {
     ref: modalContainerRef,
+    tabIndex: "-1",
     "data-qa": dataQa
-  }, modalOpen && /*#__PURE__*/React.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.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,
@@ -46606,17 +46619,30 @@ var Modal$2 = function Modal(_ref) {
     useDangerButton = _ref$useDangerButton === void 0 ? false : _ref$useDangerButton;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
-  var modalContainerRef = 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 itself requires a default value
+  // 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
+  //   - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
+  var modalContainerRef = useRef("[id='react-aria-modal-dialog']");
   var hasCloseButton = onlyCloseButton && !noButtons;
   var hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
   var hasContinueButton = onlyContinueButton && !noButtons || !onlyCloseButton && !noButtons;
   return /*#__PURE__*/React.createElement("div", {
     ref: modalContainerRef,
+    tabIndex: "-1",
     "data-qa": dataQa
-  }, modalOpen && /*#__PURE__*/React.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.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,
@@ -46674,7 +46700,8 @@ var Modal$2 = function Modal(_ref) {
     cancelAction: cancelAction,
     cancelButtonText: cancelButtonText,
     hideModal: hideModal,
-    isMobile: isMobile
+    isMobile: isMobile,
+    key: "cancel"
   }), hasContinueButton && /*#__PURE__*/React.createElement(ContinueButton, {
     buttonExtraStyles: buttonExtraStyles,
     continueAction: continueAction,
@@ -46683,12 +46710,14 @@ var Modal$2 = function Modal(_ref) {
     isContinueActionDisabled: isContinueActionDisabled,
     isLoading: isLoading,
     isMobile: isMobile,
+    key: "continue",
     useDangerButton: useDangerButton
   }), hasCloseButton && /*#__PURE__*/React.createElement(CloseButton, {
     buttonExtraStyles: buttonExtraStyles,
     closeButtonText: closeButtonText,
     hideModal: hideModal,
-    isMobile: isMobile
+    isMobile: isMobile,
+    key: "close"
   })].filter(function (button) {
     return button;
   }))))), children);