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

package/dist/index.cjs.js

@@ -46304,14 +46304,25 @@ var Modal$1 = function Modal(_ref) {
     blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
-  var modalContainerRef = React.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 requires a dummy node 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));
   return /*#__PURE__*/React__default.createElement("div", {
     ref: modalContainerRef,
     "data-qa": dataQa
-  }, modalOpen && /*#__PURE__*/React__default.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__default.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,
@@ -46436,6 +46447,112 @@ var Modal$1 = function Modal(_ref) {
   }))))))))), children);
 };
 
+var ButtonLayoutWrapper = function ButtonLayoutWrapper(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? [] : _ref$children,
+    _ref$isMobile = _ref.isMobile,
+    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
+  var safeChildren = Array.isArray(children) ? children : [children];
+  var flexGrow = isMobile ? "flex-grow: 1;" : "";
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: SPACING_NORMAL
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "1rem",
+    direction: "row",
+    justify: "flex-end"
+  }, safeChildren.map(function (child, index) {
+    return /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0",
+      extraStyles: flexGrow,
+      key: index
+    }, child);
+  })));
+};
+
+var CancelButton = function CancelButton(_ref) {
+  var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
+    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
+    _ref$cancelAction = _ref.cancelAction,
+    cancelAction = _ref$cancelAction === void 0 ? noop : _ref$cancelAction,
+    _ref$cancelButtonText = _ref.cancelButtonText,
+    cancelButtonText = _ref$cancelButtonText === void 0 ? "" : _ref$cancelButtonText,
+    _ref$hideModal = _ref.hideModal,
+    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
+    _ref$isMobile = _ref.isMobile,
+    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
+  var fullWidth = isMobile ? "width: 100%;" : "";
+  return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    action: cancelAction ? cancelAction : hideModal,
+    borderRadius: CORNER_STANDARD,
+    className: "modal-cancel-button",
+    dataQa: cancelButtonText,
+    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(fullWidth),
+    name: cancelButtonText,
+    role: "button",
+    text: cancelButtonText,
+    variant: "secondary"
+  });
+};
+
+var CloseButton = function CloseButton(_ref) {
+  var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
+    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
+    _ref$closeButtonText = _ref.closeButtonText,
+    closeButtonText = _ref$closeButtonText === void 0 ? "" : _ref$closeButtonText,
+    _ref$hideModal = _ref.hideModal,
+    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
+    _ref$isMobile = _ref.isMobile,
+    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
+  var fullWidth = isMobile ? "width: 100%;" : "";
+  return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    action: hideModal,
+    borderRadius: CORNER_STANDARD,
+    className: "modal-close-button",
+    dataQa: closeButtonText,
+    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(fullWidth),
+    name: closeButtonText,
+    role: "button",
+    text: closeButtonText,
+    variant: "primary"
+  });
+};
+
+var ContinueButton = function ContinueButton(_ref) {
+  var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
+    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
+    _ref$continueAction = _ref.continueAction,
+    continueAction = _ref$continueAction === void 0 ? noop : _ref$continueAction,
+    _ref$continueButtonTe = _ref.continueButtonText,
+    continueButtonText = _ref$continueButtonTe === void 0 ? "" : _ref$continueButtonTe,
+    _ref$continueURL = _ref.continueURL,
+    continueURL = _ref$continueURL === void 0 ? "" : _ref$continueURL,
+    _ref$isContinueAction = _ref.isContinueActionDisabled,
+    isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isMobile = _ref.isMobile,
+    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
+    _ref$useDangerButton = _ref.useDangerButton,
+    useDangerButton = _ref$useDangerButton === void 0 ? false : _ref$useDangerButton;
+  var ContinueButtonAtom = continueURL ? ButtonWithLink : ButtonWithAction;
+  var fullWidth = isMobile ? "width: 100%;" : "";
+  return /*#__PURE__*/React__default.createElement(ContinueButtonAtom, {
+    action: continueAction,
+    borderRadius: CORNER_STANDARD,
+    className: "modal-continue-button",
+    dataQa: continueButtonText,
+    disabled: isContinueActionDisabled,
+    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(fullWidth),
+    isLoading: isLoading,
+    linkExtraStyles: "display: inline-block; ".concat(fullWidth),
+    name: continueButtonText,
+    role: "button",
+    text: continueButtonText,
+    url: continueURL,
+    variant: useDangerButton ? "danger" : "primary"
+  });
+};
+
 /*
 Default Modal molecule
 Uses react-aria-modal behind the scenes for a11y purposes
@@ -46452,35 +46569,48 @@ var getApplicationNode$1 = function getApplicationNode() {
 var Modal$2 = function Modal(_ref) {
   var _ref$blurUnderlay = _ref.blurUnderlay,
     blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay,
-    buttonExtraStyles = _ref.buttonExtraStyles,
-    cancelAction = _ref.cancelAction,
+    _ref$buttonExtraStyle = _ref.buttonExtraStyles,
+    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
+    _ref$cancelAction = _ref.cancelAction,
+    cancelAction = _ref$cancelAction === void 0 ? noop : _ref$cancelAction,
     _ref$cancelButtonText = _ref.cancelButtonText,
     cancelButtonText = _ref$cancelButtonText === void 0 ? "Cancel" : _ref$cancelButtonText,
-    children = _ref.children,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? [] : _ref$children,
     _ref$closeButtonText = _ref.closeButtonText,
     closeButtonText = _ref$closeButtonText === void 0 ? "Close" : _ref$closeButtonText,
-    continueAction = _ref.continueAction,
+    _ref$continueAction = _ref.continueAction,
+    continueAction = _ref$continueAction === void 0 ? noop : _ref$continueAction,
     _ref$continueButtonTe = _ref.continueButtonText,
     continueButtonText = _ref$continueButtonTe === void 0 ? "Continue" : _ref$continueButtonTe,
-    customWidth = _ref.customWidth,
+    _ref$continueURL = _ref.continueURL,
+    continueURL = _ref$continueURL === void 0 ? "" : _ref$continueURL,
+    _ref$customWidth = _ref.customWidth,
+    customWidth = _ref$customWidth === void 0 ? "" : _ref$customWidth,
     _ref$dataQa = _ref.dataQa,
     dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
     _ref$defaultWrapper = _ref.defaultWrapper,
     defaultWrapper = _ref$defaultWrapper === void 0 ? true : _ref$defaultWrapper,
-    hideModal = _ref.hideModal,
+    _ref$hideModal = _ref.hideModal,
+    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
     _ref$initialFocusSele = _ref.initialFocusSelector,
     initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
     _ref$isContinueAction = _ref.isContinueActionDisabled,
     isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
-    isLoading = _ref.isLoading,
-    maxHeight = _ref.maxHeight,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? "" : _ref$maxHeight,
     _ref$modalBodyBg = _ref.modalBodyBg,
     modalBodyBg = _ref$modalBodyBg === void 0 ? ATHENS_GREY : _ref$modalBodyBg,
-    modalBodyText = _ref.modalBodyText,
+    _ref$modalBodyText = _ref.modalBodyText,
+    modalBodyText = _ref$modalBodyText === void 0 ? "" : _ref$modalBodyText,
     _ref$modalHeaderBg = _ref.modalHeaderBg,
     modalHeaderBg = _ref$modalHeaderBg === void 0 ? WHITE : _ref$modalHeaderBg,
-    modalHeaderText = _ref.modalHeaderText,
-    modalOpen = _ref.modalOpen,
+    _ref$modalHeaderText = _ref.modalHeaderText,
+    modalHeaderText = _ref$modalHeaderText === void 0 ? "" : _ref$modalHeaderText,
+    _ref$modalOpen = _ref.modalOpen,
+    modalOpen = _ref$modalOpen === void 0 ? false : _ref$modalOpen,
     _ref$noButtons = _ref.noButtons,
     noButtons = _ref$noButtons === void 0 ? false : _ref$noButtons,
     _ref$onExit = _ref.onExit,
@@ -46495,114 +46625,29 @@ var Modal$2 = function Modal(_ref) {
     useDangerButton = _ref$useDangerButton === void 0 ? false : _ref$useDangerButton;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
-  var modalContainerRef = React.useRef(null);
-  var AllButtons = function AllButtons() {
-    return isMobile ? /*#__PURE__*/React__default.createElement(Stack, {
-      childGap: "1rem",
-      direction: "row"
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      width: "100%",
-      padding: "0"
-    }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-      variant: "secondary",
-      action: cancelAction ? cancelAction : hideModal,
-      text: cancelButtonText,
-      dataQa: cancelButtonText,
-      extraStyles: buttonExtraStyles,
-      borderRadius: CORNER_STANDARD,
-      className: "modal-cancel-button",
-      role: "button",
-      name: cancelButtonText
-    })), /*#__PURE__*/React__default.createElement(Box, {
-      width: "100%",
-      padding: "0"
-    }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-      variant: useDangerButton ? "danger" : "primary",
-      action: continueAction,
-      text: continueButtonText,
-      dataQa: continueButtonText,
-      isLoading: isLoading,
-      disabled: isContinueActionDisabled,
-      extraStyles: buttonExtraStyles,
-      borderRadius: CORNER_STANDARD,
-      className: "modal-continue-button",
-      role: "button",
-      name: continueButtonText
-    }))) : /*#__PURE__*/React__default.createElement(Stack, {
-      childGap: "1rem",
-      direction: "row",
-      justify: "flex-end"
-    }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-      variant: "secondary",
-      action: cancelAction ? cancelAction : hideModal,
-      text: cancelButtonText,
-      dataQa: cancelButtonText,
-      extraStyles: buttonExtraStyles,
-      borderRadius: CORNER_STANDARD,
-      className: "modal-cancel-button",
-      role: "button",
-      name: cancelButtonText
-    }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-      variant: useDangerButton ? "danger" : "primary",
-      action: continueAction,
-      text: continueButtonText,
-      dataQa: continueButtonText,
-      isLoading: isLoading,
-      disabled: isContinueActionDisabled,
-      extraStyles: buttonExtraStyles,
-      borderRadius: CORNER_STANDARD,
-      className: "modal-continue-button",
-      role: "button",
-      name: continueButtonText
-    }));
-  };
-  var CloseButton = function CloseButton() {
-    return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-      action: hideModal,
-      variant: "primary",
-      text: closeButtonText,
-      dataQa: closeButtonText,
-      extraStyles: buttonExtraStyles,
-      borderRadius: CORNER_STANDARD,
-      className: "modal-close-button",
-      role: "button",
-      name: closeButtonText
-    });
-  };
-  var ContinueButton = function ContinueButton() {
-    return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-      variant: useDangerButton ? "danger" : "primary",
-      action: continueAction,
-      text: continueButtonText,
-      dataQa: continueButtonText,
-      isLoading: isLoading,
-      disabled: isContinueActionDisabled,
-      extraStyles: buttonExtraStyles,
-      borderRadius: CORNER_STANDARD,
-      className: "modal-continue-button",
-      role: "button",
-      name: continueButtonText
-    });
-  };
-  var MaybeButtons = /*#__PURE__*/React.forwardRef(function () {
-    return /*#__PURE__*/React__default.createElement(React.Fragment, null);
-  });
-  if (!noButtons) {
-    if (onlyContinueButton) {
-      MaybeButtons = ContinueButton;
-    } else if (onlyCloseButton) {
-      MaybeButtons = CloseButton;
-    } else {
-      MaybeButtons = AllButtons;
-    }
-  }
+
+  // `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 requires a dummy node 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));
+  var hasCloseButton = onlyCloseButton && !noButtons;
+  var hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
+  var hasContinueButton = onlyContinueButton && !noButtons || !onlyCloseButton && !noButtons;
   return /*#__PURE__*/React__default.createElement("div", {
     ref: modalContainerRef,
+    tabIndex: "-1",
     "data-qa": dataQa
-  }, modalOpen && /*#__PURE__*/React__default.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__default.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,
@@ -46619,7 +46664,7 @@ var Modal$2 = function Modal(_ref) {
     },
     dialogStyle: {
       borderRadius: CORNER_STANDARD,
-      width: customWidth || "615px",
+      width: isMobile ? "" : customWidth || "615px",
       overflow: "auto"
     },
     underlayClickExits: underlayClickExits,
@@ -46644,8 +46689,6 @@ var Modal$2 = function Modal(_ref) {
   }, modalHeaderText))), /*#__PURE__*/React__default.createElement(Box, {
     background: modalBodyBg,
     padding: "0"
-  }, /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: SPACING_NORMAL
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: SPACING_NORMAL,
     borderWidthOverride: !noButtons && "0 0 ".concat(BORDER_THIN, " 0"),
@@ -46655,22 +46698,40 @@ var Modal$2 = function Modal(_ref) {
     variant: "p"
   }, modalBodyText) : /*#__PURE__*/React__default.createElement(Box, {
     padding: maxHeight ? "0 0 ".concat(SPACING_XS, " 0") : "0"
-  }, modalBodyText)), noButtons ? /*#__PURE__*/React__default.createElement(MaybeButtons, null) : /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 ".concat(SPACING_NORMAL, " ").concat(SPACING_NORMAL)
-  }, /*#__PURE__*/React__default.createElement(Stack, {
-    direction: "row",
-    justify: "flex-end",
-    align: "center",
-    childGap: "0rem"
-  }, /*#__PURE__*/React__default.createElement(MaybeButtons, null))))))), children);
+  }, modalBodyText)), noButtons ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null) : /*#__PURE__*/React__default.createElement(ButtonLayoutWrapper, {
+    isMobile: isMobile
+  }, [hasCancelButton && /*#__PURE__*/React__default.createElement(CancelButton, {
+    buttonExtraStyles: buttonExtraStyles,
+    cancelAction: cancelAction,
+    cancelButtonText: cancelButtonText,
+    hideModal: hideModal,
+    isMobile: isMobile
+  }), hasContinueButton && /*#__PURE__*/React__default.createElement(ContinueButton, {
+    buttonExtraStyles: buttonExtraStyles,
+    continueAction: continueAction,
+    continueButtonText: continueButtonText,
+    continueURL: continueURL,
+    isContinueActionDisabled: isContinueActionDisabled,
+    isLoading: isLoading,
+    isMobile: isMobile,
+    useDangerButton: useDangerButton
+  }), hasCloseButton && /*#__PURE__*/React__default.createElement(CloseButton, {
+    buttonExtraStyles: buttonExtraStyles,
+    closeButtonText: closeButtonText,
+    hideModal: hideModal,
+    isMobile: isMobile
+  })].filter(function (button) {
+    return button;
+  }))))), children);
 };
+var ModalControlV2 = withWindowSize(Modal$2);
 
 var _excluded$A = ["version"];
 var Modal$3 = function Modal(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
     rest = _objectWithoutProperties(_ref, _excluded$A);
-  var ModalControl = version === "v1" ? Modal$1 : Modal$2;
+  var ModalControl = version === "v1" ? Modal$1 : ModalControlV2;
   return /*#__PURE__*/React__default.createElement(ModalControl, rest);
 };