@ssa-ui-kit/core 2.23.2 → 2.25.0

package/dist/components/Tab/Tab.d.ts

@@ -1,3 +1,3 @@
 import { SmallTabProps } from '../TabBar/types';
-declare const Tab: ({ onClick, isActive, text, ariaControls, tabId, }: SmallTabProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Tab: ({ onClick, isActive, text, ariaControls, tabId, className, }: SmallTabProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Tab;

package/dist/components/TabBar/TabBarContext.d.ts

@@ -1,7 +1,8 @@
 import { TabProps, TabBarContextProps } from './types';
 export declare const TabBarContext: import("react").Context<TabBarContextProps>;
 export declare const useTabBarContext: () => TabBarContextProps;
-export declare const TabBarContextProvider: ({ initialTab, children, }: {
+export declare const TabBarContextProvider: ({ initialTab, selectedTabId, children, }: {
     initialTab?: TabProps;
+    selectedTabId?: TabProps["tabId"];
     children: React.ReactNode;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/TabBar/types.d.ts

@@ -23,5 +23,8 @@ export interface TabBarProps {
 }
 export interface TabBarContextProps {
     activeTab?: TabProps;
+    activeTabId?: TabProps['tabId'];
+    selectedTabId?: TabProps['tabId'];
     setActiveTab: (tab?: TabProps) => void;
+    setActiveTabId: (tabId?: number | string) => void;
 }

package/dist/index.js

@@ -7849,7 +7849,8 @@ const Tab = ({
   isActive,
   text,
   ariaControls,
-  tabId
+  tabId,
+  className
 }) => {
   return (0,jsx_runtime_namespaceObject.jsx)(TabBase, {
     role: "tab",
@@ -7859,6 +7860,7 @@ const Tab = ({
     tabIndex: 0,
     isActive: isActive,
     title: text,
+    className: className,
     onClick: () => {
       // istanbul ignore else
       if (typeof onClick === 'function') {
@@ -7880,30 +7882,30 @@ const defaultTab = {
 };
 const TabBarContext = /*#__PURE__*/(0,external_react_namespaceObject.createContext)({
   activeTab: defaultTab,
+  activeTabId: undefined,
+  selectedTabId: undefined,
   setActiveTab() {
     /* default no-op */
+  },
+  setActiveTabId() {
+    /* default no-op */
   }
 });
 const useTabBarContext = () => (0,external_react_namespaceObject.useContext)(TabBarContext);
-const useTabBar = initialTab => {
-  const [tab, setTab] = (0,external_react_namespaceObject.useState)(initialTab);
-  return {
-    activeTab: tab,
-    setActiveTab: tab => setTab(tab)
-  };
-};
 const TabBarContextProvider = ({
   initialTab = defaultTab,
+  selectedTabId = defaultTab.tabId,
   children
 }) => {
-  const {
-    activeTab,
-    setActiveTab
-  } = useTabBar(initialTab);
+  const [activeTab, setActiveTab] = (0,external_react_namespaceObject.useState)(initialTab);
+  const [activeTabId, setActiveTabId] = (0,external_react_namespaceObject.useState)(initialTab.tabId);
   return (0,jsx_runtime_namespaceObject.jsx)(TabBarContext.Provider, {
     value: {
       activeTab,
-      setActiveTab
+      activeTabId,
+      selectedTabId,
+      setActiveTab,
+      setActiveTabId
     },
     children: children
   });
@@ -7930,27 +7932,42 @@ const TabBar = ({
 }) => {
   const {
     activeTab,
-    setActiveTab
+    selectedTabId,
+    setActiveTab,
+    setActiveTabId
   } = useTabBarContext();
-  const activeTabId = activeTab?.tabId;
+  const setSelectedTabId = tabId => {
+    if (tabId && activeTab?.tabId !== tabId) {
+      external_react_namespaceObject.Children.forEach(children, child => {
+        if (/*#__PURE__*/(0,external_react_namespaceObject.isValidElement)(child) && child.props.tabId === tabId) {
+          const {
+            renderContent,
+            ...rest
+          } = child.props;
+          setActiveTab({
+            tabId: rest.tabId,
+            renderContent: renderContent.bind(null, rest)
+          });
+        }
+      });
+    }
+    setActiveTabId(tabId);
+  };
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (!Number.isNaN(selectedTabId) && activeTab?.tabId !== selectedTabId) {
+      setSelectedTabId(selectedTabId);
+    }
+  }, [selectedTabId]);
   return (0,jsx_runtime_namespaceObject.jsx)(TabBarBase, {
     role: "tablist",
     className: className,
     children: external_react_namespaceObject.Children.map(children, child => {
       // istanbul ignore else
       if (/*#__PURE__*/(0,external_react_namespaceObject.isValidElement)(child)) {
-        const {
-          renderContent,
-          ...rest
-        } = child.props;
-        const tabId = rest.tabId;
         return /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(child, {
-          key: tabId,
-          isActive: activeTabId === tabId,
-          onClick: () => activeTabId !== tabId && setActiveTab({
-            tabId,
-            renderContent: renderContent.bind(null, rest)
-          })
+          key: child.props.tabId,
+          isActive: activeTab?.tabId === child.props.tabId,
+          onClick: () => setSelectedTabId(child.props.tabId)
         });
       }
     })