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

package/dist/index.esm.js

@@ -46302,15 +46302,17 @@ var Modal$1 = function Modal(_ref) {
   // 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.
+  // 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
-  var modalContainerRef = useRef( /*#__PURE__*/React.createElement("div", null));
+  //   - 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, {
     focusTrapOptions: {
@@ -46623,13 +46625,14 @@ var Modal$2 = function Modal(_ref) {
   // 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.
+  // 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
-  var modalContainerRef = useRef( /*#__PURE__*/React.createElement("div", null));
+  //   - 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;
@@ -46697,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,
@@ -46706,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);