@fixefy/fixefy-ui-components 0.3.13 → 0.3.15

package/dist/FxTabs/FxTabs.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-export interface Tab {
-    value: string | number | boolean;
+export interface FxTab {
+    value: string | number;
     label: string;
-    show: boolean;
-    maxWidth?: number | string;
-    minWidth?: number | string;
+    tabContent: any;
 }
-export declare const FxTabs: ({ activeTab, tabsData, handleClickPOV, }: {
+export declare const FxTabs: ({ activeTab, tabsData, onChange, divider, adjecentComponent, }: {
     activeTab: string;
-    tabsData: Tab[];
-    handleClickPOV: any;
+    tabsData: FxTab[];
+    onChange: any;
+    divider?: boolean;
+    adjecentComponent?: any;
 }) => React.JSX.Element;

package/dist/FxTabs/FxTabs.js

@@ -10,58 +10,66 @@ Object.defineProperty(exports, "FxTabs", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _lab = require("@mui/lab");
 const _material = require("@mui/material");
+const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const FxTabs = ({ activeTab, tabsData, handleClickPOV })=>{
-    //   const [activeTab, setActiveTab] = useState(tabsData[0].value)
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButtonGroup, {
-        sx: {
-            height: '40px',
-            backgroundColor: '#fff'
-        },
-        color: "primary",
+const FxTabs = ({ activeTab, tabsData, onChange, divider = false, adjecentComponent })=>{
+    const theme = (0, _material.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_lab.TabContext, {
         value: activeTab,
-        exclusive: true,
-        onChange: (e, val)=>{
-            e.preventDefault();
-            setTimeout(()=>{
-                //   setActiveTab(val)
-                handleClickPOV(val);
-            }, 500);
-        },
-        children: tabsData.map((tab, i)=>{
-            const { value, show, label, maxWidth, minWidth } = tab;
-            return show && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
-                disabled: activeTab === value,
-                //@ts-ignore
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_lab.TabList, {
                 sx: {
-                    '&.Mui-disabled': {
-                        border: '1px solid #568793 !important'
-                    },
-                    '&.MuiToggleButtonGroup-grouped': {
-                        borderRadius: 'inherit',
-                        maxWidth: maxWidth || '161px',
-                        minWidth: minWidth || '161px'
-                    },
-                    '&.Mui-selected': {
-                        backgroundColor: '#F1FBFE',
-                        border: '1px solid #568793'
+                    '.MuiTabs-flexContainer': {
+                        gap: '28px',
+                        padding: '0 32px'
                     }
                 },
-                value: value,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                    lineHeight: '24px',
-                    fontSize: '12px',
-                    fontWeight: 500,
-                    color: 'primary',
-                    variant: "button",
-                    children: label
+                children: [
+                    tabsData.map((tab, i)=>{
+                        const { value, label } = tab;
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                            onClick: ()=>{
+                                onChange(value);
+                            },
+                            sx: {
+                                minWidth: 'auto',
+                                p: '0 4px',
+                                textTransform: 'capitalize',
+                                '&.Mui-selected': {
+                                    //@ts-ignore
+                                    color: theme.palette.primary[500],
+                                    fontWeight: 700
+                                }
+                            },
+                            label: (0, _fixefyuiutils.titleCase)(label),
+                            value: value
+                        }, i);
+                    }),
+                    adjecentComponent
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    borderTop: divider ? '1px solid #C5C8C9' : 'none',
+                    margin: '0 32px'
+                },
+                children: tabsData.map((tab, i)=>{
+                    const { value, tabContent } = tab;
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_lab.TabPanel, {
+                        value: value,
+                        sx: {
+                            padding: '24px 0'
+                        },
+                        children: tabContent
+                    }, i);
                 })
-            }, i);
-        })
+            })
+        ]
     });
 };

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { FxStatisticsBar, StatisticsPropsType } from './FxStatisticsBar';
 export { FxStyledButton } from './FxStyledButton';
 export { FxStatusBar, StatusBarPropsType, Options } from './FxStatusBar';
 export { FxToggleButtons } from './FxToggleButtons';
+export { FxTabs } from './FxTabs';
 export { FxTag, TagPropsType } from './FxTag';
 export { FxTextField, TextFieldPropsType } from './FxTextField';
 export { FxTodo, TodoItemType, TodoPropsType } from './FxTodo';

package/dist/index.js

@@ -114,6 +114,9 @@ _export(exports, {
     FxStyledButton: function() {
         return _FxStyledButton.FxStyledButton;
     },
+    FxTabs: function() {
+        return _FxTabs.FxTabs;
+    },
     FxTag: function() {
         return _FxTag.FxTag;
     },
@@ -241,6 +244,7 @@ const _FxStatisticsBar = require("./FxStatisticsBar");
 const _FxStyledButton = require("./FxStyledButton");
 const _FxStatusBar = require("./FxStatusBar");
 const _FxToggleButtons = require("./FxToggleButtons");
+const _FxTabs = require("./FxTabs");
 const _FxTag = require("./FxTag");
 const _FxTextField = require("./FxTextField");
 const _FxTodo = require("./FxTodo");

package/package.json

@@ -7,6 +7,7 @@
     "@apollo/client": "3.10.4",
     "@fixefy/fixefy-ui-utils": "0.2.45",
     "@mui/icons-material": "5.16.7",
+    "@mui/lab": "6.0.0-beta.7",
     "@mui/material": "5.16.7",
     "@mui/styled-engine": "5.15.14",
     "@mui/styles": "5.16.7",
@@ -65,5 +66,5 @@
       "require": "./dist/index.js"
     }
   },
-  "version": "0.3.13"
+  "version": "0.3.15"
 }