@thecb/components 11.4.0-beta.0 → 11.4.1-beta.0

package/package.json

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

package/src/components/molecules/tabs/Tabs.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from "react";
+import React, { useState, Fragment, useEffect } from "react";
 import { Stack, Box, Cluster } from "../../atoms/layouts";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./Tabs.theme";
@@ -6,11 +6,20 @@ import Tab from "../../atoms/tab";
 
 const HORIZONTAL = "horizontal";
 
-const Tabs = ({
-  tabsConfig,
-  tabsDisplayMode // can be either HORIZONTAL or VERTICAL
-}) => {
-  const [activeTab, toggleActiveTab] = useState(tabsConfig.tabs[0].label);
+const Tabs = ({ tabsConfig, tabsDisplayMode = HORIZONTAL, ...props }) => {
+  const [activeTab, toggleActiveTab] = useState(
+    tabsConfig.tabs[0]?.label || null
+  );
+
+  useEffect(() => {
+    const currentTabExists = tabsConfig.tabs.some(
+      tab => tab.label === activeTab
+    );
+
+    if (!activeTab || !currentTabExists) {
+      toggleActiveTab(tabsConfig.tabs[0]?.label || null);
+    }
+  }, [tabsConfig, activeTab]);
 
   const createTabs = (tabConfig, activeTab) => {
     return tabConfig.tabs.map(tab => {
@@ -25,7 +34,7 @@ const Tabs = ({
     });
   };
 
-  const showHorozontal = (tabsConfig, activeTab) => {
+  const showHorizontal = (tabsConfig, activeTab) => {
     return (
       <Cluster justify={"space-around"}>
         {createTabs(tabsConfig, activeTab)}
@@ -38,10 +47,10 @@ const Tabs = ({
   };
 
   return (
-    <Box className="tabs">
+    <Box className="tabs" {...props}>
       <Box className="tab-list">
         {tabsDisplayMode == HORIZONTAL
-          ? showHorozontal(tabsConfig, activeTab)
+          ? showHorizontal(tabsConfig, activeTab)
           : showVertical(tabsConfig, activeTab)}
       </Box>
       <Box className="tab-content">

package/src/components/molecules/tabs/index.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface TabConfig {
+  label: string;
+  content: React.ReactNode;
+}
+
+export interface TabsConfigObject {
+  tabs: TabConfig[];
+}
+
+export interface TabsProps {
+  tabsConfig: TabsConfigObject;
+  tabsDisplayMode?: "horizontal" | "vertical";
+}
+
+export declare const Tabs: React.FC<Expand<TabsProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export default Tabs;