@fixefy/fixefy-ui-components 0.3.12 → 0.3.14

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/FxToggleButtons/FxToggleButtons.d.ts

@@ -6,8 +6,8 @@ export interface Tab {
     maxWidth?: number | string;
     minWidth?: number | string;
 }
-export declare const FxToggleButtons: ({ activeTab, tabsData, handleClickPOV, }: {
+export declare const FxToggleButtons: ({ activeTab, tabsData, onChange, }: {
     activeTab: string;
     tabsData: Tab[];
-    handleClickPOV: any;
+    onChange: any;
 }) => React.JSX.Element;

package/dist/FxToggleButtons/FxToggleButtons.js

@@ -16,8 +16,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const FxToggleButtons = ({ activeTab, tabsData, handleClickPOV })=>{
-    //   const [activeTab, setActiveTab] = useState(tabsData[0].value)
+const FxToggleButtons = ({ activeTab, tabsData, onChange })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButtonGroup, {
         sx: {
             height: '40px',
@@ -29,8 +28,7 @@ const FxToggleButtons = ({ activeTab, tabsData, handleClickPOV })=>{
         onChange: (e, val)=>{
             e.preventDefault();
             setTimeout(()=>{
-                //   setActiveTab(val)
-                handleClickPOV(val);
+                onChange(val);
             }, 500);
         },
         children: tabsData.map((tab, i)=>{

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.12"
+  "version": "0.3.14"
 }