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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.5.0-beta.2",
+  "version": "10.5.0-beta.3",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/modal/ModalControlV1.js

@@ -56,16 +56,17 @@ const Modal = ({
   // 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
-  const modalContainerRef = useRef(<div />);
+  //   - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
+  const modalContainerRef = useRef("[id='react-aria-modal-dialog']");
 
   return (
-    <div ref={modalContainerRef} data-qa={dataQa}>
+    <div ref={modalContainerRef} tabIndex="-1" data-qa={dataQa}>
       {modalOpen && (
         <AriaModal
           focusTrapOptions={{

package/src/components/molecules/modal/ModalControlV2.js

@@ -70,13 +70,14 @@ const Modal = ({
   // 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
-  const modalContainerRef = useRef(<div />);
+  //   - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
+  const modalContainerRef = useRef("[id='react-aria-modal-dialog']");
 
   const hasCloseButton = onlyCloseButton && !noButtons;
   const hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
@@ -155,6 +156,7 @@ const Modal = ({
                         cancelButtonText={cancelButtonText}
                         hideModal={hideModal}
                         isMobile={isMobile}
+                        key="cancel"
                       />
                     ),
                     hasContinueButton && (
@@ -166,6 +168,7 @@ const Modal = ({
                         isContinueActionDisabled={isContinueActionDisabled}
                         isLoading={isLoading}
                         isMobile={isMobile}
+                        key="continue"
                         useDangerButton={useDangerButton}
                       />
                     ),
@@ -175,6 +178,7 @@ const Modal = ({
                         closeButtonText={closeButtonText}
                         hideModal={hideModal}
                         isMobile={isMobile}
+                        key="close"
                       />
                     )
                   ].filter(button => button)}