@symply.io/basic-components 1.4.4-beta.1 → 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.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import type { TabGroupProps } from "./types";
-declare const TabGroup: import("react").ForwardRefExoticComponent<TabGroupProps & import("react").RefAttributes<unknown>>;
+declare function TabGroup(props: TabGroupProps): JSX.Element;
 export default TabGroup;
 export type { TabGroupProps };

package/TabGroup/index.js

@@ -9,34 +9,43 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
+import { useCallback } from "react";
+import { navigate } from "@reach/router";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
-var TabGroup = forwardRef(function (props, ref) {
-    var tabs = props.tabs, _a = props.textColor, textColor = _a === void 0 ? "primary" : _a, _b = props.variant, variant = _b === void 0 ? "scrollable" : _b, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onTabChange = props.onTabChange, outerTabIndex = props.currentTabIndex;
+function TabGroup(props) {
+    var tabs = props.tabs, _a = props.textColor, textColor = _a === void 0 ? "primary" : _a, _b = props.variant, variant = _b === void 0 ? "scrollable" : _b, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, currentTabIndex = props.currentTabIndex, onChange = props.onChange, rest = __rest(props, ["tabs", "textColor", "variant", "primaryColor", "secondaryColor", "currentTabIndex", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var mobileViewport = useMediaQuery(theme.breakpoints.down("md"));
-    var _c = useState(outerTabIndex || 0), currentTabIndex = _c[0], setCurrentTabIndex = _c[1];
-    var onClick = function (index) {
-        setCurrentTabIndex(index);
-    };
-    useImperativeHandle(ref, function () { return ({
-        tabIndex: currentTabIndex
-    }); });
-    useEffect(function () {
-        if (outerTabIndex !== undefined && outerTabIndex !== currentTabIndex) {
-            setCurrentTabIndex(outerTabIndex);
+    var onTabClick = useCallback(function (_, val) {
+        var tab = tabs[val];
+        if (tab) {
+            var url = tab.url;
+            if (onChange) {
+                onChange({ tabIndex: val, url: url });
+            }
+            else if (url) {
+                navigate(url);
+            }
         }
-    }, [outerTabIndex, currentTabIndex]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tabs, __assign({ value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: function (_, val) {
-                onClick(val);
-                onTabChange(val);
-            } }, { children: tabs.map(function (tab, index) {
-                var text = tab.text, _a = tab.disabled, disabled = _a === void 0 ? false : _a;
+    }, [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 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",
@@ -44,7 +53,7 @@ var TabGroup = forwardRef(function (props, ref) {
                         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

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

package/package.json

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