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

package/DataTable/TableBody.js

@@ -27,6 +27,6 @@ import TableCell from "@mui/material/TableCell";
 import TableBodyRow from "./TableBodyRow";
 function TBody(props) {
     var rows = props.rows, columns = props.columns, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a, rest = __rest(props, ["rows", "columns", "noDataText"]);
-    return (_jsx(TableBody, { children: rows.length > 0 ? (rows.map(function (row, index) { return (_jsx(TableBodyRow, __assign({ row: row, rows: rows, columns: columns }, rest), "DataTable_".concat(index))); })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
+    return (_jsx(TableBody, { children: rows.length > 0 ? (rows.map(function (row, index) { return (_jsx(TableBodyRow, __assign({ rowIndex: index, row: row, rows: rows, columns: columns }, rest), "DataTable_".concat(index))); })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
 }
 export default TBody;

package/DataTable/TableBodyRow.js

@@ -16,7 +16,7 @@ import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 function TableBodyRow(props) {
-    var row = props.row, rows = props.rows, columns = props.columns, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    var row = props.row, rows = props.rows, columns = props.columns, rowIndex = props.rowIndex, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
     var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
@@ -80,14 +80,14 @@ function TableBodyRow(props) {
                                 boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
                             }
                             : undefined
-                    } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
+                    } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row, rowIndex: rowIndex }) }), accessor));
             }), dynamicCols.map(function (col) {
                 var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
                 return (_jsx(TableCell, __assign({ align: align, sx: {
                         width: width,
                         zIndex: 9,
                         backgroundColor: onRowClick && rowEl ? hover : normal
-                    } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
+                    } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row, rowIndex: rowIndex }) }), accessor));
             }), fixedRightCols.map(function (col, index) {
                 var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
                 var right = fixedRightCols
@@ -112,7 +112,7 @@ function TableBodyRow(props) {
                                 boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
                             }
                             : undefined
-                    } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
+                    } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row, rowIndex: rowIndex }) }), accessor));
             })] })));
 }
 export default TableBodyRow;

package/DataTable/types.d.ts

@@ -69,6 +69,7 @@ export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps exten
 };
 export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
     row: RowProps;
+    rowIndex: number;
 };
 export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
     footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;

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.3",
+  "version": "1.4.4-beta.2",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",