@thecb/components 7.0.2-beta.1 → 7.0.2-beta.2

package/dist/index.d.ts

@@ -231,6 +231,7 @@ declare const NavHeader: React.FC<Expand<NavHeaderProps> &
 interface NavTabsProps {
   tabsConfig: Array<{ path: string; label: string }>;
   tabGap?: string;
+  tabMinWidth?: string;
 }
 
 declare const NavTabs: React.FC<Expand<NavTabsProps> &

package/dist/index.esm.js

@@ -35273,7 +35273,8 @@ var fallbackValues$y = {
 var NavTab = function NavTab(_ref) {
   var path = _ref.path,
       label = _ref.label,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      minWidth = _ref.minWidth;
 
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
@@ -35293,7 +35294,7 @@ var NavTab = function NavTab(_ref) {
   }, /*#__PURE__*/React.createElement(InternalLink, {
     color: isActive ? themeValues.activeColor : themeValues.linkColor,
     to: path,
-    extraStyles: "\n          border-bottom: 3px solid transparent;\n          font-family: ".concat(themeValues.fontFamily, ";\n          text-decoration: none;\n          ").concat(isActive && !isMobile ? border : "none", ";\n          &:hover {\n            text-decoration: none;\n            color: ").concat(themeValues.activeColor, ";\n            ").concat(isMobile ? "" : "".concat(border), "\n          };\n          padding: 1.25rem 0.1rem;\n        ")
+    extraStyles: "\n          border-bottom: 3px solid transparent;\n          font-family: ".concat(themeValues.fontFamily, ";\n          text-decoration: none;\n          ").concat(isActive && !isMobile ? border : "none", ";\n          &:hover {\n            text-decoration: none;\n            color: ").concat(themeValues.activeColor, ";\n            ").concat(isMobile ? "" : "".concat(border), "\n          };\n          padding: 1.25rem 0;\n        ")
   }, label));
 };
 
@@ -35301,13 +35302,16 @@ var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$y);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
-      tabGap = _ref.tabGap;
+      tabGap = _ref.tabGap,
+      _ref$tabMinWidth = _ref.tabMinWidth,
+      tabMinWidth = _ref$tabMinWidth === void 0 ? "100px" : _ref$tabMinWidth;
 
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
   var tabs = tabsConfig.map(function (tabConfig) {
     return /*#__PURE__*/React.createElement(NavTab$1, _extends({
+      minWidth: tabMinWidth,
       key: tabConfig.path
     }, tabConfig));
   });
@@ -43458,7 +43462,14 @@ var Modal$1 = function Modal(_ref) {
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
-  return /*#__PURE__*/React.createElement(Fragment$1, null, modalOpen && /*#__PURE__*/React.createElement(reactAriaModal, {
+  var modalContainerRef = useRef(null);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: modalContainerRef
+  }, modalOpen && /*#__PURE__*/React.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
+  , {
+    focusTrapOptions: {
+      fallbackFocus: modalContainerRef === null || modalContainerRef === void 0 ? void 0 : modalContainerRef.current
+    },
     onExit: onExit,
     getApplicationNode: getApplicationNode,
     titleText: modalHeaderText,