@sphereon/ui-components.ssi-react 0.4.1-unstable.94 → 0.4.1-unstable.95

package/dist/components/views/SSITabView/SSITabViewHeader/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import { FC } from 'react';
 import { TabNavigationState } from '@sphereon/ui-components.core';
 type Props = {
     navigationState: TabNavigationState;
-    onIndexChange: (index: number) => void;
+    onRouteChange: (key: string) => void;
 };
-declare const SSITabViewHeader: React.FC<Props>;
+declare const SSITabViewHeader: FC<Props>;
 export default SSITabViewHeader;

package/dist/components/views/SSITabView/SSITabViewHeader/index.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITabViewHeaderTitleCaptionStyled as TitleCaption, } from '../../../../styles';
 const SSITabViewHeader = (props) => {
-    const { navigationState, onIndexChange } = props;
-    return (_jsx(Container, { children: navigationState.routes.map((value, index) => {
-            const tabIndex = index + 1;
-            const isActiveTab = tabIndex === navigationState.index;
-            return (_jsx(TitleContainer, { onClick: () => onIndexChange(tabIndex), style: {
-                    ...(isActiveTab && { borderBottom: `2px solid #7276F7`, alignSelf: 'stretch' }),
-                }, children: _jsx(TitleCaption, { style: { fontWeight: !isActiveTab ? '400' : '600' }, children: value.title }) }, tabIndex));
+    const { navigationState, onRouteChange } = props;
+    return (_jsx(Container, { children: navigationState.routes.map((value) => {
+            const isActiveRoute = value.key === navigationState.activeRoute;
+            return (_jsx(TitleContainer, { onClick: () => onRouteChange(value.key), style: {
+                    ...(isActiveRoute && { borderBottom: `2px solid #7276F7`, alignSelf: 'stretch' }),
+                }, children: _jsx(TitleCaption, { style: { fontWeight: !isActiveRoute ? '400' : '600' }, children: value.title }) }, value.key));
         }) }));
 };
 export default SSITabViewHeader;

package/dist/components/views/SSITabView/index.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+import { FC } from 'react';
 import { TabViewRoute } from '@sphereon/ui-components.core';
 type Props = {
     routes: Array<TabViewRoute>;
+    onRouteChange?: (key: string) => Promise<void>;
 };
-declare const SSITabView: React.FC<Props>;
+declare const SSITabView: FC<Props>;
 export default SSITabView;

package/dist/components/views/SSITabView/index.js

@@ -1,27 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import SSITabViewHeader from './SSITabViewHeader';
 import { SSITabViewContainerStyled as Container } from '../../../styles';
 const Tab = (props) => {
-    return _jsx(React.Fragment, { children: props.children });
+    return _jsx(Fragment, { children: props.children });
 };
 const SSITabView = (props) => {
     const { routes = [] } = props;
-    const [activeTabIndex, setActiveTabIndex] = React.useState(1);
-    const [content, setContent] = React.useState();
-    React.useEffect(() => {
-        routes.forEach((route, index) => {
-            if (index + 1 === activeTabIndex) {
+    const [activeRoute, setActiveRoute] = useState(routes.length > 0 ? routes[0].key : "");
+    const [content, setContent] = useState();
+    useEffect(() => {
+        routes.forEach((route) => {
+            if (route.key === activeRoute) {
                 setContent(route.content);
             }
         });
-    }, [routes, activeTabIndex]);
-    const onTabChange = async (tabIndex) => {
-        setActiveTabIndex(tabIndex);
+    }, [routes, activeRoute]);
+    const onTabChange = async (key) => {
+        setActiveRoute(key);
     };
     return (_jsxs(Container, { children: [_jsx(SSITabViewHeader, { navigationState: {
-                    routes: routes,
-                    index: activeTabIndex,
-                }, onIndexChange: onTabChange }), _jsx(Tab, { children: content })] }));
+                    routes,
+                    activeRoute,
+                }, onRouteChange: onTabChange }), _jsx(Tab, { children: content })] }));
 };
 export default SSITabView;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.4.1-unstable.94+8367a6f",
+  "version": "0.4.1-unstable.95+a3cc3d0",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -50,7 +50,7 @@
     "@mui/x-date-pickers": "^8.18.0",
     "@sphereon/ssi-sdk.data-store": "0.34.1-feature.SSISDK.45.94",
     "@sphereon/ssi-types": "0.34.1-feature.SSISDK.45.94",
-    "@sphereon/ui-components.core": "0.4.1-unstable.94+8367a6f",
+    "@sphereon/ui-components.core": "0.4.1-unstable.95+a3cc3d0",
     "@tanstack/react-table": "^8.9.3",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
@@ -72,5 +72,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "8367a6f85c906e96dd0544147f3375602a111940"
+  "gitHead": "a3cc3d0e2bc5981461074a5fee29c32c86ee6e73"
 }