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

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,33 +9,41 @@ 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) {
+            if (onChange) {
+                onChange({ tabIndex: val, url: tab.url });
+            }
+            else {
+                navigate(tab.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) {
+    }, [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 active = currentTabIndex === index;
                 return (_jsx(Tab, { disableFocusRipple: true, disableRipple: true, label: text, disabled: disabled, sx: {
@@ -46,5 +54,5 @@ var TabGroup = forwardRef(function (props, ref) {
                         boxShadow: active ? "0px 4px 6px #acc1c2" : undefined
                     } }, index));
             }) })) })));
-});
+}
 export default TabGroup;

package/TabGroup/types.d.ts

@@ -1,14 +1,19 @@
 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<{
         text: string;
         disabled?: boolean;
+        url: string;
     }>;
-    variant?: TabsProps["variant"];
     currentTabIndex?: number;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
-    onTabChange: (index: number) => void;
+    onChange?: (args: {
+        tabIndex: number;
+        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.1",
+  "version": "1.4.4-beta.2",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",