@symply.io/basic-components 1.4.4-beta.2 → 1.4.4-beta.3

package/README.md

@@ -812,6 +812,8 @@ import SocialInput from '@symply.io/basic-components/SocialInput';
 
 Tabs group. 
 
+It is extended from `@mui/material/Tabs`, so it includes all properties of `@mui/material/Tabs`.
+
 <h5>Import</h5>
 
 ```typescript
@@ -822,13 +824,12 @@ import TabGroup from '@symply.io/basic-components/TabGroup';
 
 <h5>Props</h5>
 
-| Name            | Type                                          | Default      | Required | Description                                                  |
-| --------------- | --------------------------------------------- | ------------ | -------- | ------------------------------------------------------------ |
-| currentTabIndex | number                                        | 0            | false    | the tab index from the higher component                      |
-| onTabChange     | func                                          |              | true     | Callback fired when the `Tab` is changed.<br />**Signature:**<br/>`function(index: number) => void`<br/>*index:* The selected index of the `Tab` element. |
-| tabs            | Array\<{ text: string; disabled?: boolean }\> |              | true     | All tab items.                                               |
-| textColor       | 'primary' \| 'secondary'                      | 'primary'    | false    | The color of the tab text.                                   |
-| variant         | 'standard' \| 'scrollable' \| 'fullWidth'     | 'scrollable' | false    | Determines additional display behavior of the tabs           |
+| Name            | Type                                                         | Default                                                      | Required | Description                                                  |
+| --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
+| currentTabIndex | number                                                       | 0                                                            | true     | the tab index from the higher component                      |
+| onChange        | func                                                         | If `onChange` is undefined and the `url` of tab is defined, we will navigate to that url when the tab changed | false    | Callback fired when the `Tab` is changed.<br />**Signature:**<br/>`function(args: {tabIndex: number; url?: string}) => void`<br/>*tabIndex:* The selected index of the `Tab` element.<br/>*url*: The url for navigating. |
+| tabs            | Array\<{ key: string; text: string; url?: string; disabled?: boolean }\> |                                                              | true     | All tab items.                                               |
+| variant         | 'standard' \| 'scrollable' \| 'fullWidth'                    | 'scrollable'                                                 | false    | Determines additional display behavior of the tabs           |
 
 
 

package/TabGroup/index.js

@@ -35,16 +35,17 @@ function TabGroup(props) {
     var onTabClick = useCallback(function (_, val) {
         var tab = tabs[val];
         if (tab) {
+            var url = tab.url;
             if (onChange) {
-                onChange({ tabIndex: val, url: tab.url });
+                onChange({ tabIndex: val, url: url });
             }
-            else {
-                navigate(tab.url);
+            else if (url) {
+                navigate(url);
             }
         }
     }, [tabs]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tabs, __assign({ value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: onTabClick }, rest, { children: tabs.map(function (tab, index) {
-                var text = tab.text, _a = tab.disabled, disabled = _a === void 0 ? false : _a;
+                var key = tab.key, text = tab.text, _a = tab.disabled, disabled = _a === void 0 ? false : _a;
                 var active = currentTabIndex === index;
                 return (_jsx(Tab, { disableFocusRipple: true, disableRipple: true, label: text, disabled: disabled, sx: {
                         cursor: disabled ? "not-allowed" : "pointer",
@@ -52,7 +53,7 @@ function TabGroup(props) {
                         background: active ? "#fff" : undefined,
                         borderRadius: active ? theme.spacing(0.5) : undefined,
                         boxShadow: active ? "0px 4px 6px #acc1c2" : undefined
-                    } }, index));
+                    } }, key || index));
             }) })) })));
 }
 export default TabGroup;

package/TabGroup/types.d.ts

@@ -2,18 +2,16 @@ import { CSSProperties } from "react";
 import { TabsProps } from "@mui/material/Tabs";
 export interface TabGroupProps extends Omit<TabsProps, "onChange"> {
     tabs: Array<{
+        key: string;
         text: string;
         disabled?: boolean;
-        url: string;
+        url?: string;
     }>;
-    currentTabIndex?: number;
+    currentTabIndex: number;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
     onChange?: (args: {
         tabIndex: number;
-        url: string;
+        url?: string;
     }) => unknown;
 }
-export interface TabGroupStates {
-    onChange: TabsProps["onChange"];
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.4.4-beta.2",
+  "version": "1.4.4-beta.3",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",