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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.5.0-beta.1",
+  "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/Modal.stories.js

@@ -24,22 +24,23 @@ export const modalV1 = () => (
         Modal Link
       </Text>
     )}
-    hideModal={noop}
-    continueAction={noop}
-    modalOpen={boolean("modalOpen", true, groupId)}
-    modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
-    modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
+    blurUnderlay={boolean("blurUnderlay", true, groupId)}
     cancelButtonText={text("cancelButtonText", "Cancel", groupId)}
+    continueAction={noop}
     continueButtonText={text("continueButtonText", "Continue", groupId)}
-    modalHeaderBg={text("modalHeaderBg", "white", groupId)}
-    modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
-    useDangerButton={boolean("useDangerButton", false, groupId)}
     defaultWrapper={boolean("defaultWrapper", true, groupId)}
+    hideModal={noop}
+    maxHeight={text("maxHeight", null, groupId)}
+    modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
+    modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
+    modalHeaderBg={text("modalHeaderBg", "white", groupId)}
+    modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
+    modalOpen={boolean("modalOpen", true, groupId)}
     noBorder={boolean("noBorder", true, groupId)}
+    noButtons={boolean("noButtons", false, groupId)}
     onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
     onlyContinueButton={boolean("onlyContinueButton", false, groupId)}
-    maxHeight={text("maxHeight", undefined, groupId)}
-    blurUnderlay={boolean("blurUnderlay", true, groupId)}
+    useDangerButton={boolean("useDangerButton", false, groupId)}
   />
 );
 
@@ -66,7 +67,7 @@ export const modalV2 = () => (
     continueURL={text("continueURL", "", groupId)}
     defaultWrapper={boolean("defaultWrapper", true, groupId)}
     hideModal={noop}
-    maxHeight={text("maxHeight", undefined, groupId)}
+    maxHeight={text("maxHeight", null, groupId)}
     modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
     modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
     modalHeaderBg={text("modalHeaderBg", "white", groupId)}
@@ -121,7 +122,7 @@ export const modalWithoutButtons = () => {
       modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
       defaultWrapper={boolean("defaultWrapper", true, groupId)}
       noButtons={boolean("noButtons", true, groupId)}
-      maxHeight={text("maxHeight", undefined, groupId)}
+      maxHeight={text("maxHeight", null, groupId)}
       blurUnderlay={boolean("blurUnderlay", false, groupId)}
     />
   );

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useContext, useRef } from "react";
+import React, { Fragment, useContext, useEffect, useRef } from "react";
 import { ThemeContext } from "styled-components";
 import AriaModal from "react-aria-modal";
 import { WHITE, ATHENS_GREY, SILVER_GREY } from "../../../constants/colors";
@@ -50,14 +50,27 @@ const Modal = ({
   blurUnderlay = true
 }) => {
   const { isMobile } = useContext(ThemeContext);
-  const 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
+  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
-          // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
           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?.current
           }}
           onExit={onExit}

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

@@ -64,7 +64,20 @@ const Modal = ({
   useDangerButton = false
 }) => {
   const { isMobile } = useContext(ThemeContext);
-  const 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
+  const modalContainerRef = useRef("[id='react-aria-modal-dialog']");
 
   const hasCloseButton = onlyCloseButton && !noButtons;
   const hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
@@ -72,11 +85,11 @@ const Modal = ({
     (onlyContinueButton && !noButtons) || (!onlyCloseButton && !noButtons);
 
   return (
-    <div ref={modalContainerRef} data-qa={dataQa}>
+    <div ref={modalContainerRef} tabIndex="-1" data-qa={dataQa}>
       {modalOpen && (
         <AriaModal
-          // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
           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?.current
           }}
           onExit={onExit}
@@ -143,6 +156,7 @@ const Modal = ({
                         cancelButtonText={cancelButtonText}
                         hideModal={hideModal}
                         isMobile={isMobile}
+                        key="cancel"
                       />
                     ),
                     hasContinueButton && (
@@ -154,6 +168,7 @@ const Modal = ({
                         isContinueActionDisabled={isContinueActionDisabled}
                         isLoading={isLoading}
                         isMobile={isMobile}
+                        key="continue"
                         useDangerButton={useDangerButton}
                       />
                     ),
@@ -163,6 +178,7 @@ const Modal = ({
                         closeButtonText={closeButtonText}
                         hideModal={hideModal}
                         isMobile={isMobile}
+                        key="close"
                       />
                     )
                   ].filter(button => button)}