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

package/dist/index.cjs.js

@@ -46310,15 +46310,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 = React.useRef( /*#__PURE__*/React__default.createElement("div", null));
+  //   - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
+  var modalContainerRef = React.useRef("[id='react-aria-modal-dialog']");
   return /*#__PURE__*/React__default.createElement("div", {
     ref: modalContainerRef,
+    tabIndex: "-1",
     "data-qa": dataQa
   }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
     focusTrapOptions: {
@@ -46631,13 +46633,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 = React.useRef( /*#__PURE__*/React__default.createElement("div", null));
+  //   - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
+  var modalContainerRef = React.useRef("[id='react-aria-modal-dialog']");
   var hasCloseButton = onlyCloseButton && !noButtons;
   var hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
   var hasContinueButton = onlyContinueButton && !noButtons || !onlyCloseButton && !noButtons;
@@ -46664,8 +46667,9 @@ var Modal$2 = function Modal(_ref) {
     },
     dialogStyle: {
       borderRadius: CORNER_STANDARD,
-      width: isMobile ? "" : customWidth || "615px",
-      overflow: "auto"
+      margin: SPACING_XS,
+      overflow: "auto",
+      width: isMobile ? "" : customWidth || "615px"
     },
     underlayClickExits: underlayClickExits,
     "aria-modal": true,
@@ -46705,7 +46709,8 @@ var Modal$2 = function Modal(_ref) {
     cancelAction: cancelAction,
     cancelButtonText: cancelButtonText,
     hideModal: hideModal,
-    isMobile: isMobile
+    isMobile: isMobile,
+    key: "cancel"
   }), hasContinueButton && /*#__PURE__*/React__default.createElement(ContinueButton, {
     buttonExtraStyles: buttonExtraStyles,
     continueAction: continueAction,
@@ -46714,12 +46719,14 @@ var Modal$2 = function Modal(_ref) {
     isContinueActionDisabled: isContinueActionDisabled,
     isLoading: isLoading,
     isMobile: isMobile,
+    key: "continue",
     useDangerButton: useDangerButton
   }), hasCloseButton && /*#__PURE__*/React__default.createElement(CloseButton, {
     buttonExtraStyles: buttonExtraStyles,
     closeButtonText: closeButtonText,
     hideModal: hideModal,
-    isMobile: isMobile
+    isMobile: isMobile,
+    key: "close"
   })].filter(function (button) {
     return button;
   }))))), children);