mui-design-system 0.0.21 → 0.0.23

package/dist/components/custom-auto-complete/CustomAutoComplete.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 import { TextFieldProps } from '@mui/material/TextField';
 import { TextFieldVariants } from '@mui/material';
-import { TInputLabelMode } from '../input-list/type';
+import { TInputLabelMode } from '../form/type';
 export interface CustomAutocompleteProps extends Omit<AutocompleteProps<any, boolean, boolean, undefined>, 'renderInput'> {
     label?: string | ReactNode;
     width?: number | string;

package/dist/components/custom-auto-complete/components/AutoCompleteInput.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 import { AutocompleteRenderInputParams, TextFieldVariants } from '@mui/material';
 import { TextFieldProps } from '@mui/material/TextField';
-import { TInputLabelMode } from '../../input-list/type';
+import { TInputLabelMode } from '../../form/type';
 interface Props {
     params: AutocompleteRenderInputParams;
     variant?: TextFieldVariants;

package/dist/components/custom-date-picker/CustomComponent.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { TextFieldVariants } from '@mui/material';
 import { BaseTextFieldProps } from '@mui/material/TextField/TextField';
-import { TInputLabelMode } from '../input-list/type';
+import { TInputLabelMode } from '../form/type';
 interface Props extends BaseTextFieldProps {
     openCalendar: any;
     value?: any;

package/dist/components/custom-date-picker/CustomDatePicker.d.ts

@@ -2,7 +2,7 @@ import { FC } from "react";
 import "../../styles/datePicker.css";
 import { CalendarProps } from "react-multi-date-picker";
 import { BaseTextFieldProps } from "@mui/material/TextField/TextField";
-import { TInputLabelMode } from "../input-list/type";
+import { TInputLabelMode } from "../form/type";
 export interface ICustomDatePickerProps extends CalendarProps {
     error: any;
     textFieldProps?: BaseTextFieldProps;

package/dist/components/custom-date-picker/CustomDatePicker.js

@@ -41,15 +41,20 @@ const CustomDatePicker = ({ onChange, value, disabled, error, readOnly, textFiel
 export default CustomDatePicker;
 const setColors = (colors) => {
     const { primary: primaryThemeColor, background: bgThemeColor, text: textThemeColor, } = colors;
-    const params = [
-        { className: "--rmdp-primary-theme", value: primaryThemeColor?.main },
-        { className: "--rmdp-secondary-theme", value: primaryThemeColor?.[2] },
-        { className: "--rmdp-shadow-theme", value: primaryThemeColor?.[1] },
-        { className: "--rmdp-today-theme", value: primaryThemeColor?.[5] },
-        { className: "--rmdp-hover-theme", value: primaryThemeColor?.[4] },
-        { className: "--rmdp-deselect-theme", value: primaryThemeColor?.[9] },
-        { className: "--rmdp-background-theme", value: bgThemeColor?.paper },
-        { className: "--rmdp-text-theme", value: textThemeColor?.primary },
-    ];
-    params?.forEach((param) => document.documentElement.style.setProperty(param?.className, param?.value));
+    // const params = [
+    //   { className: "--rmdp-primary-theme", value: primaryThemeColor?.main },
+    //   { className: "--rmdp-secondary-theme", value: primaryThemeColor?.[2] },
+    //   { className: "--rmdp-shadow-theme", value: primaryThemeColor?.[1] },
+    //   { className: "--rmdp-today-theme", value: primaryThemeColor?.[5] },
+    //   { className: "--rmdp-hover-theme", value: primaryThemeColor?.[4] },
+    //   { className: "--rmdp-deselect-theme", value: primaryThemeColor?.[9] },
+    //   { className: "--rmdp-background-theme", value: bgThemeColor?.paper },
+    //   { className: "--rmdp-text-theme", value: textThemeColor?.primary },
+    // ];
+    // params?.forEach((param: any) =>
+    //   document.documentElement.style.setProperty(
+    //     param?.className!,
+    //     param?.value!,
+    //   ),
+    // );
 };

package/dist/components/custom-pagination/custom-pagination-1/CustomPagination1.d.ts

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { BoxProps } from "@mui/material/Box";
-import { ITablePagination } from "../../custom-table/CustomTable";
+import { ITablePagination } from '../../custom-table/types';
 export interface CustomPagination1Props {
     pagination: ITablePagination;
     boxProps?: BoxProps;

package/dist/components/custom-pagination/custom-pagination-2/CustomPagination2.d.ts

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { BoxProps, SelectProps } from "@mui/material";
-import { ITablePagination } from "../../custom-table/CustomTable";
+import { ITablePagination } from '../../custom-table/types';
 export interface ITableFooterProps {
     pagination: ITablePagination;
     boxProps?: BoxProps;

package/dist/components/custom-table/CustomTable.d.ts

@@ -1,55 +1,4 @@
-import { FC, ReactNode } from 'react';
-import { StackProps } from '@mui/material/Stack';
-import { TypographyProps } from '@mui/material/Typography';
-import { Cell, Row, Table as TableType } from '@tanstack/react-table';
-import { ITableFooterProps } from '../custom-pagination/custom-pagination-2/CustomPagination2';
-import { SystemStyleObject } from '@mui/system';
-import { RadioProps } from '@mui/material/Radio';
-import { ICheckboxProps } from './components/CustomTableRow';
-export interface ITablePagination {
-    pageIndex: number;
-    pageSize: number;
-    pageCounts: number;
-    onChangePage: (pageIndex: number) => void;
-    onChangePageSize?: (pageSize: number) => void;
-}
-export interface ITableRowStyle {
-    row: Row<any>;
-    hover?: boolean;
-}
-export interface ITableCellsStyle {
-    row: Row<any>;
-    cell?: Cell<any, any>;
-    hover?: boolean;
-}
-export type TRowStyle = (props: ITableRowStyle) => SystemStyleObject;
-export type TCellsStyle = (props: ITableCellsStyle) => SystemStyleObject;
-export type TCheckboxProps = ((props: {
-    row?: Row<any>;
-    table: TableType<any>;
-}) => ICheckboxProps) | ICheckboxProps;
-export interface ICustomTable {
-    id?: string;
-    pagination?: ITablePagination;
-    table: TableType<any>;
-    variant?: 'fill' | 'standard';
-    wrapperStackProps?: StackProps;
-    footerProps?: Omit<ITableFooterProps, 'pagination'>;
-    onClickRow?: (row: Row<any>) => void;
-    renderSubComponent?: any;
-    isLoading?: boolean;
-    isError?: boolean;
-    withRadio?: boolean;
-    withSelect?: boolean;
-    withIndex?: boolean;
-    rowStyle?: TRowStyle;
-    cellsStyle?: TCellsStyle;
-    headerStyle?: SystemStyleObject;
-    headerTypoProps?: TypographyProps;
-    checkboxProps?: TCheckboxProps;
-    radioProps?: RadioProps;
-    emptyListComponent?: string | ReactNode;
-    rowBorderRadius?: number;
-}
+import { FC } from 'react';
+import { ICustomTable } from './types';
 declare const CustomTable: FC<ICustomTable>;
 export default CustomTable;

package/dist/components/custom-table/CustomTable.js

@@ -10,10 +10,13 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import TableContainer from '@mui/material/TableContainer';
 import Table from '@mui/material/Table';
+//------------------------------------------------------------------------------------
+//@Components
 import CustomTableHead from '../custom-table/components/CustomTableHead';
-import CustomPagination2 from '../custom-pagination/custom-pagination-2/CustomPagination2';
 import CustomTableBody from '../custom-table/components/CustomTableBody';
-const CustomTable = ({ id, isLoading, variant, table, wrapperStackProps, footerProps, renderSubComponent, pagination, onClickRow, isError, withRadio, withSelect, withIndex, rowStyle, cellsStyle, headerStyle, headerTypoProps, checkboxProps, emptyListComponent, radioProps, rowBorderRadius, }) => {
+import CustomPagination1 from '../custom-pagination/custom-pagination-1/CustomPagination1';
+//------------------------------------------------------------------------------------
+const CustomTable = ({ id, isLoading, variant = "linear", table, wrapperStackProps, footerProps, renderSubComponent, pagination, onClickRow, withRadio, withSelect, withIndex, rowStyle, cellsStyle, headerStyle, headerTypoProps, checkboxProps, emptyListComponent, radioProps, rowBorderRadius = 0, borderRadius = 2, }) => {
     const pageCounts = pagination?.pageCounts;
     if (pagination && pageCounts && pagination?.pageIndex > pageCounts) {
         pagination?.onChangePage(pageCounts);
@@ -27,16 +30,7 @@ const CustomTable = ({ id, isLoading, variant, table, wrapperStackProps, footerP
                     flexGrow: '1',
                     overflowX: 'unset',
                     overflowY: 'auto',
-                }, children: _jsxs(Table, { sx: { position: 'relative' }, children: [_jsx(CustomTableHead, { table: table, variant: variant, withRadio: withRadio, withSelect: withSelect, withIndex: withIndex, headerStyle: headerStyle, checkboxProps: checkboxProps, headerTypoProps: headerTypoProps }), isLoading ? (_jsx(TableBody, { sx: { height: '150px', width: '100%' }, children: _jsx(_Fragment, { children: Array.from({ length: 10 }).map((item, index) => (_jsx(TableRow, { children: table?.getHeaderGroups()[0]?.headers?.map((col, index) => (_jsx(TableCell, { children: _jsx(Box, { children: index === 0 ? (_jsx(Skeleton, { sx: { borderRadius: 1 }, animation: 'wave', width: '17px', height: '16px', variant: 'rectangular' })) : (_jsx(Skeleton, { sx: { borderRadius: 1 }, animation: 'wave', width: '100%', variant: 'rectangular' })) }) }, index))) }, index))) }) })) : isError ? (_jsx(TableBody, { sx: { height: '150px', width: '100%' }, children: _jsx(TableRow, { sx: {
-                                    position: 'absolute',
-                                    width: '100%',
-                                    top: '47px',
-                                    mt: '16px',
-                                    textAlign: 'center',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'center',
-                                }, children: _jsx(TableCell, { children: _jsx(Typography, { variant: 'h4', fontWeight: 400, children: "\u062E\u0637\u0627\u06CC \u062F\u0631\u06CC\u0627\u0641\u062A \u0627\u0637\u0644\u0627\u0639\u0627\u062A" }) }) }) })) : table?.getRowModel()?.rows.length == 0 ? (_jsx(TableBody, { sx: { height: '150px', width: '100%' }, children: _jsx(TableRow, { sx: {
+                }, children: _jsxs(Table, { sx: { position: 'relative' }, children: [_jsx(CustomTableHead, { table: table, variant: variant, withRadio: withRadio, withSelect: withSelect, withIndex: withIndex, headerStyle: headerStyle, checkboxProps: checkboxProps, headerTypoProps: headerTypoProps, borderRadius: borderRadius, rowBorderRadius: rowBorderRadius }), isLoading ? (_jsx(TableBody, { sx: { height: '150px', width: '100%' }, children: _jsx(_Fragment, { children: Array.from({ length: 10 }).map((item, index) => (_jsx(TableRow, { children: table?.getHeaderGroups()[0]?.headers?.map((col, index) => (_jsx(TableCell, { children: _jsx(Box, { children: index === 0 ? (_jsx(Skeleton, { sx: { borderRadius: 1 }, animation: 'wave', width: '17px', height: '16px', variant: 'rectangular' })) : (_jsx(Skeleton, { sx: { borderRadius: 1 }, animation: 'wave', width: '100%', variant: 'rectangular' })) }) }, index))) }, index))) }) })) : table?.getRowModel()?.rows.length == 0 ? (_jsx(TableBody, { sx: { height: '150px', width: '100%' }, children: _jsx(TableRow, { sx: {
                                     position: 'absolute',
                                     width: '100%',
                                     top: '47px',
@@ -45,6 +39,6 @@ const CustomTable = ({ id, isLoading, variant, table, wrapperStackProps, footerP
                                     display: 'flex',
                                     flexDirection: 'column',
                                     alignItems: 'center',
-                                }, children: _jsx(TableCell, { children: emptyListComponent ?? (_jsx(Typography, { variant: 'h4', fontWeight: 400, children: "\u0628\u062F\u0648\u0646 \u062F\u06CC\u062A\u0627" })) }) }) })) : (_jsx(CustomTableBody, { table: table, withIndex: withIndex, withSelect: withSelect, withRadio: withRadio, onClickRow: onClickRow, renderSubComponent: renderSubComponent, pagination: pagination, rowStyle: rowStyle, cellsStyle: cellsStyle, checkboxProps: checkboxProps, radioProps: radioProps, rowBorderRadius: rowBorderRadius }))] }) }), pagination && (_jsx(CustomPagination2, { pagination: pagination, ...footerProps }))] }));
+                                }, children: _jsx(TableCell, { children: emptyListComponent ?? (_jsx(Typography, { variant: 'h4', fontWeight: 400, children: "\u0628\u062F\u0648\u0646 \u062F\u06CC\u062A\u0627" })) }) }) })) : (_jsx(CustomTableBody, { table: table, withIndex: withIndex, withSelect: withSelect, withRadio: withRadio, onClickRow: onClickRow, renderSubComponent: renderSubComponent, pagination: pagination, rowStyle: rowStyle, cellsStyle: cellsStyle, checkboxProps: checkboxProps, radioProps: radioProps, rowBorderRadius: rowBorderRadius, borderRadius: borderRadius, variant: variant }))] }) }), pagination && (_jsx(CustomPagination1, { pagination: pagination, ...footerProps }))] }));
 };
 export default CustomTable;

package/dist/components/custom-table/components/CustomTableBody.d.ts

@@ -1,8 +1,7 @@
 import { FC } from 'react';
-import { Row } from '@tanstack/react-table';
-import { Table as TableType } from '@tanstack/table-core/build/lib/types';
-import { ITablePagination, TCellsStyle, TCheckboxProps, TRowStyle } from '../CustomTable';
+import { Row, Table as TableType } from '@tanstack/react-table';
 import { RadioProps } from '@mui/material/Radio';
+import { ITablePagination, TCellsStyle, TCheckboxProps, TRowStyle, TTableVariants } from '../types';
 interface CustomTableBodyProps {
     table: TableType<any>;
     onClickRow?: (row: Row<any>) => void;
@@ -15,7 +14,9 @@ interface CustomTableBodyProps {
     cellsStyle?: TCellsStyle;
     checkboxProps?: TCheckboxProps;
     radioProps?: RadioProps;
-    rowBorderRadius?: number;
+    rowBorderRadius: number;
+    borderRadius: number;
+    variant: TTableVariants;
 }
 declare const CustomTableBody: FC<CustomTableBodyProps>;
 export default CustomTableBody;

package/dist/components/custom-table/components/CustomTableBody.js

@@ -1,11 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 //-----------------------------------------------------------------------------------------
 //@Mui
-import { TableBody } from '@mui/material';
+import { TableBody, useTheme } from '@mui/material';
+// Components
 import CustomTableRow from '../../custom-table/components/CustomTableRow';
-const CustomTableBody = ({ table, onClickRow, renderSubComponent, withSelect, withRadio, withIndex, pagination, rowStyle, cellsStyle, checkboxProps, radioProps, rowBorderRadius, }) => {
-    return (_jsx(TableBody, { children: table?.getRowModel()?.rows?.map((row, i) => {
-            return (_jsx(CustomTableRow, { row: row, onClickRow: onClickRow, renderSubComponent: renderSubComponent, withSelect: withSelect, withRadio: withRadio, withIndex: withIndex, pagination: pagination, rowStyle: rowStyle, cellsStyle: cellsStyle, checkboxProps: checkboxProps, radioProps: radioProps, rowBorderRadius: rowBorderRadius, table: table }, row.id));
+const CustomTableBody = ({ table, onClickRow, renderSubComponent, withSelect, withRadio, withIndex, pagination, rowStyle, cellsStyle, checkboxProps, radioProps, rowBorderRadius, borderRadius, variant, }) => {
+    const theme = useTheme();
+    return (_jsx(TableBody, { sx: {
+            '& tr': {
+                '& > td > div': {
+                    borderBottom: variant === 'zebra' ? 'unset' : '1px solid',
+                    borderColor: "border.primary"
+                },
+            },
+            '& tr:last-child': {
+                '& > td > div': { border: 'unset' },
+                '& > td:first-child > div': {
+                    borderEndStartRadius: borderRadius * theme.shape.borderRadius,
+                },
+                '& > td:last-child > div': {
+                    borderEndEndRadius: borderRadius * theme.shape.borderRadius,
+                },
+            },
+        }, children: table?.getRowModel()?.rows?.map((row, i) => {
+            return (_jsx(CustomTableRow, { row: row, onClickRow: onClickRow, renderSubComponent: renderSubComponent, withSelect: withSelect, withRadio: withRadio, withIndex: withIndex, pagination: pagination, rowStyle: rowStyle, cellsStyle: cellsStyle, checkboxProps: checkboxProps, radioProps: radioProps, rowBorderRadius: rowBorderRadius, table: table, variant: variant }, row.id));
         }) }));
 };
 export default CustomTableBody;

package/dist/components/custom-table/components/CustomTableCell.d.ts

@@ -1,5 +1,5 @@
-import React, { FC } from "react";
-import { Cell } from "@tanstack/react-table";
+import React, { FC } from 'react';
+import { Cell } from '@tanstack/react-table';
 interface CustomTableCellProps {
     cell: Cell<any, any>;
     children: React.ReactNode;

package/dist/components/custom-table/components/CustomTableCell.js

@@ -1,23 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Box from "@mui/material/Box";
-import { TableCell } from "@mui/material";
-const CustomTableCell = ({ cell, children, }) => {
+// Mui
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { TableCell } from '@mui/material';
+const CustomTableCell = ({ cell, children }) => {
     return (_jsx(TableCell, { id: `c-${cell.id}`, sx: {
             px: 0,
             py: 0,
-            width: cell?.getContext()?.column?.id === "select" ? 50 : 150,
-            border: "none",
-            height: "inherit",
+            width: cell?.getContext()?.column?.id === 'select' ? 50 : 150,
+            border: 'none',
+            height: 'inherit',
         }, children: _jsx(Box, { sx: {
-                backgroundColor: "white",
-                justifyContent: cell?.getContext()?.column?.id === "select" ? "left" : "center",
-                height: "100%",
+                backgroundColor: 'white',
+                justifyContent: cell?.getContext()?.column?.id === 'select' ? 'left' : 'center',
+                height: '100%',
                 fontSize: 14,
                 fontWeight: 500,
-                display: "flex",
-                alignItems: "center",
-                px: cell?.getContext()?.column?.id === "select" ? 0 : 4,
-                borderBottom: "1px solid #C5D0FF",
-            }, children: children }) }, cell?.id));
+                display: 'flex',
+                alignItems: 'center',
+                px: cell?.getContext()?.column?.id === 'select' ? 0 : 4,
+                borderBottom: '1px solid #C5D0FF',
+            }, children: typeof children === 'string' || typeof children === 'number' ? (_jsx(Typography, { color: 'content.primary', fontSize: { xs: 10, md: 14 }, fontWeight: 300, children: children })) : (children) }) }, cell?.id));
 };
 export default CustomTableCell;

package/dist/components/custom-table/components/CustomTableHead.d.ts

@@ -1,10 +1,10 @@
 import { FC } from 'react';
-import { Table as TableType } from '@tanstack/table-core/build/lib/types';
+import { Table as TableType } from '@tanstack/react-table';
 import { TypographyProps } from '@mui/material/Typography';
 import { SystemStyleObject } from '@mui/system';
-import { TCheckboxProps } from '../CustomTable';
+import { TCheckboxProps, TTableVariants } from '../types';
 interface CustomTableHeadProps {
-    variant?: 'fill' | 'standard' | undefined;
+    variant?: TTableVariants;
     table: TableType<any>;
     withRadio?: boolean;
     withSelect?: boolean;
@@ -12,6 +12,8 @@ interface CustomTableHeadProps {
     headerStyle?: SystemStyleObject;
     checkboxProps?: TCheckboxProps;
     headerTypoProps?: TypographyProps;
+    borderRadius: number;
+    rowBorderRadius: number;
 }
 declare const CustomTableHead: FC<CustomTableHeadProps>;
 export default CustomTableHead;

package/dist/components/custom-table/components/CustomTableHead.js

@@ -8,8 +8,10 @@ import Typography from '@mui/material/Typography';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
-import { Checkbox } from '@mui/material';
-const CustomTableHead = ({ table, variant, withSelect, withRadio, withIndex, headerStyle, checkboxProps, headerTypoProps, }) => {
+import Checkbox from '@mui/material/Checkbox';
+import { useTheme } from '@mui/material';
+const CustomTableHead = ({ table, variant, withSelect, withRadio, withIndex, headerStyle, checkboxProps, headerTypoProps, borderRadius, rowBorderRadius, }) => {
+    const theme = useTheme();
     const { onChange: onChangeCheckbox, ...restCheckboxProps } = typeof checkboxProps === 'function'
         ? checkboxProps({ table })
         : checkboxProps || {};
@@ -18,16 +20,16 @@ const CustomTableHead = ({ table, variant, withSelect, withRadio, withIndex, hea
             zIndex: 10,
             top: 0,
             mb: 2,
-            bgcolor: '#EAEDFF',
+            bgcolor: 'surface.secondary',
             borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
             '& th:first-of-type': {
-                borderRadius: '10px 0 0 0',
+                borderRadius: `${borderRadius * theme?.shape.borderRadius}px 0 0 ${rowBorderRadius * theme?.shape.borderRadius}px`,
             },
             '& th:last-child': {
-                borderRadius: '0 10px 0 0',
+                borderRadius: `0 ${borderRadius * theme?.shape.borderRadius}px  ${rowBorderRadius * theme?.shape.borderRadius}px 0`,
             },
             '& th': {
-                border: variant === 'fill' ? 0 : '',
+                border: variant === 'linear' ? 0 : '',
                 fontSize: 10,
                 fontWeight: 700,
                 lineHeight: '13px',
@@ -41,8 +43,8 @@ const CustomTableHead = ({ table, variant, withSelect, withRadio, withIndex, hea
             },
             ...headerStyle,
         }, children: table?.getHeaderGroups()?.map((headerGroup) => (_jsxs(TableRow, { sx: {
-                height: 71,
-                borderBottom: variant === 'standard' ? '1px solid #EBEBEB' : '',
+                height: { xs: 44, md: 56 },
+                // borderBottom: variant === 'standard' ? '1px solid #EBEBEB' : '',
             }, children: [withIndex && (_jsx(TableCell, { sx: { border: 'none' }, children: _jsx(Box, { display: 'flex', minWidth: 'max-content', px: 5, children: _jsx(Typography, { ...headerTypoProps, children: "\u0631\u062F\u06CC\u0641" }) }) }, 'head-cell')), withRadio && (_jsx(TableCell, { sx: { border: 'none' }, children: _jsx(Box, { display: 'flex', minWidth: 'max-content', pl: 8, children: _jsx(Typography, { ...headerTypoProps, children: "\u0627\u0646\u062A\u062E\u0627\u0628" }) }) }, 'head-cell')), withSelect && (_jsx(TableCell, { sx: { border: 'none' }, children: _jsx(Box, { display: 'flex', minWidth: 'max-content', px: 0, children: table.options.enableMultiRowSelection === true ? (_jsx(Checkbox, { checked: table.getIsAllRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onChange: (e, checked) => {
                                 if (onChangeCheckbox) {
                                     onChangeCheckbox?.(e, table.getIsAllRowsSelected());
@@ -51,13 +53,12 @@ const CustomTableHead = ({ table, variant, withSelect, withRadio, withIndex, hea
                                     table.getToggleAllRowsSelectedHandler()(e);
                                 }
                             }, ...restCheckboxProps })) : ('') }) }, 'head-cell')), headerGroup?.headers?.map((header) => {
-                    return header.id === 'select' ? (_jsx(TableCell, { colSpan: header.colSpan, sx: { border: 'none' }, children: header.isPlaceholder ? null : (_jsx(Box, { display: 'flex', minWidth: 'max-content', px: 0, className: header?.column?.getCanSort()
+                    const headerContext = flexRender(header?.column?.columnDef?.header, header?.getContext());
+                    return (_jsx(TableCell, { colSpan: header?.colSpan, sx: { border: 'none' }, children: header?.isPlaceholder ? null : (_jsx(Box, { display: 'flex', minWidth: 'max-content', textAlign: 'center', justifyContent: 'center', px: 2, className: header?.column?.getCanSort()
                                 ? 'cursor-pointer select-none'
                                 : '',
-                            onClick: header?.column?.getToggleSortingHandler(), children: flexRender(header?.column?.columnDef?.header, header?.getContext()) })) }, header.id)) : (_jsx(TableCell, { colSpan: header?.colSpan, sx: { border: 'none' }, children: header?.isPlaceholder ? null : (_jsx(Box, { display: 'flex', minWidth: 'max-content', textAlign: 'center', justifyContent: 'center', px: 2, className: header?.column?.getCanSort()
-                                ? 'cursor-pointer select-none'
-                                : '',
-                            onClick: header?.column?.getToggleSortingHandler(), children: _jsx(Typography, { ...headerTypoProps, children: flexRender(header?.column?.columnDef?.header, header?.getContext()) }) })) }, header?.id));
+                            onClick: header?.column?.getToggleSortingHandler(), children: typeof headerContext === 'string' ||
+                                typeof headerContext === 'number' ? (_jsx(Typography, { color: 'content.primary', fontSize: { xs: 10, md: 14 }, fontWeight: 300, ...headerTypoProps, children: headerContext })) : (headerContext) })) }, header?.id));
                 })] }, headerGroup.id))) }));
 };
 export default CustomTableHead;

package/dist/components/custom-table/components/CustomTableRow.d.ts

@@ -1,12 +1,7 @@
-import React, { FC } from 'react';
-import { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';
-import { Row } from '@tanstack/react-table';
-import { ITablePagination, TCellsStyle, TCheckboxProps, TRowStyle } from '../CustomTable';
+import { FC } from 'react';
+import { Row, Table as TableType } from '@tanstack/react-table';
 import { RadioProps } from '@mui/material/Radio';
-import { Table as TableType } from '@tanstack/table-core/build/lib/types';
-export interface ICheckboxProps extends Omit<MuiCheckboxProps, 'onChange'> {
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, row?: Row<any>) => void;
-}
+import { ITablePagination, TCellsStyle, TCheckboxProps, TRowStyle, TTableVariants } from '../types';
 interface CustomTableRowProps {
     row: Row<any>;
     onClickRow?: (row: Row<any>) => void;
@@ -20,7 +15,8 @@ interface CustomTableRowProps {
     checkboxProps?: TCheckboxProps;
     radioProps?: RadioProps;
     table: TableType<any>;
-    rowBorderRadius?: number;
+    rowBorderRadius: number;
+    variant: TTableVariants;
 }
 declare const CustomTableRow: FC<CustomTableRowProps>;
 export default CustomTableRow;

package/dist/components/custom-table/components/CustomTableRow.js

@@ -1,32 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
 //@Mui
 import Box from '@mui/material/Box';
-import Collapse from '@mui/material/Collapse';
-import { Checkbox, TableCell, TableRow } from '@mui/material';
-import { flexRender } from '@tanstack/react-table';
-import CustomTableCell from '../components/CustomTableCell';
+import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
+import Collapse from '@mui/material/Collapse';
+import TableCell from '@mui/material/TableCell';
+import Checkbox from '@mui/material/Checkbox';
 import Radio from '@mui/material/Radio';
-const CustomTableRow = ({ row, onClickRow, renderSubComponent, withSelect, withIndex, withRadio, pagination, rowStyle, cellsStyle, checkboxProps, radioProps, table, rowBorderRadius, }) => {
+import { useTheme } from '@mui/material';
+// Components
+import CustomTableCell from '../components/CustomTableCell';
+const CustomTableRow = ({ row, onClickRow, renderSubComponent, withSelect, withIndex, withRadio, pagination, rowStyle, cellsStyle, checkboxProps, radioProps, table, rowBorderRadius, variant }) => {
+    const theme = useTheme();
     const { onChange: onChangeCheckbox, ...restCheckboxProps } = typeof checkboxProps === 'function'
         ? checkboxProps({ row, table })
         : checkboxProps || {};
     return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { id: `tr-${row.index}`, onClick: () => (onClickRow ? onClickRow(row) : ''), sx: {
-                    height: 71,
+                    height: { xs: 44, md: 56 },
                     cursor: onClickRow ? 'pointer' : '',
                     '& td:first-of-type > div': {
-                        border: 'unset !important',
-                        borderEndStartRadius: rowBorderRadius ?? 10,
-                        borderStartStartRadius: row.index === 0 ? 0 : rowBorderRadius ?? 10,
+                        borderEndStartRadius: rowBorderRadius * theme?.shape.borderRadius,
+                        borderStartStartRadius: rowBorderRadius * theme?.shape.borderRadius,
                     },
                     '& td:last-child > div': {
-                        border: 'unset !important',
-                        borderEndEndRadius: rowBorderRadius ?? 10,
-                        borderStartEndRadius: row.index === 0 ? 0 : rowBorderRadius ?? 10,
+                        borderEndEndRadius: rowBorderRadius * theme?.shape.borderRadius,
+                        borderStartEndRadius: rowBorderRadius * theme?.shape.borderRadius,
                     },
                     ...(rowStyle ? rowStyle({ row }) : {}),
                     '& td > div': {
-                        border: 'unset !important',
+                        bgcolor: variant === "linear" ? "surface.primary" : row.index % 2 === 0 ? "surface.primary" : "surface.secondary",
                         ...(cellsStyle ? cellsStyle({ row }) : {}),
                         transition: '0.15s ease all',
                     },
@@ -53,7 +56,7 @@ const CustomTableRow = ({ row, onClickRow, renderSubComponent, withSelect, withI
                                 px: 5,
                                 border: 'unset !important',
                                 // borderBottom: "1px solid #C5D0FF",
-                            }, children: _jsx(Typography, { variant: 'caption2', children: pagination
+                            }, children: _jsx(Typography, { children: pagination
                                     ? (pagination.pageIndex - 1) * pagination.pageSize +
                                         row.index +
                                         1

package/dist/components/custom-table/components/useTable.d.ts

@@ -1,24 +1,12 @@
 /// <reference types="react" />
-import { ColumnDef, Row, TableOptions } from '@tanstack/react-table';
-import { ITablePagination } from '../../custom-table/CustomTable';
-interface IProps extends Partial<Omit<TableOptions<any>, 'getRowId'>> {
-    columns: ColumnDef<any, any>[];
-    data: any;
-    pageSize?: number;
-    multiSelect?: boolean;
-    onSelectRow?: (data: any) => void;
-    getRowId?: string;
-    renderSubComponent?: (props: {
-        row: Row<any>;
-    }) => React.ReactElement;
-    getRowCanExpand?: (row: Row<any>) => boolean;
-}
-declare const useTable: ({ state, getRowId, data, columns, pageSize, ...props }: IProps) => {
+import { Row } from '@tanstack/react-table';
+import { ITablePagination, IUseTableProps } from '../types';
+declare const useTable: ({ state, getRowId, data, columns, pageSize, ...props }: IUseTableProps) => {
     table: import("@tanstack/react-table").Table<any>;
     pagination: ITablePagination;
     selectedRows: Row<any>[];
     renderSubComponent: ((props: {
         row: Row<any>;
-    }) => React.ReactElement) | undefined;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) | undefined;
 };
 export default useTable;

package/dist/components/custom-table/components/useTable.js

@@ -14,8 +14,8 @@ const useTable = ({ state, getRowId, data, columns, pageSize, ...props }) => {
             const selectedRowIds = Object?.keys(old);
             if (selectedRowIds) {
                 // @ts-ignore
-                setSelectedRows((prv) => {
-                    const newSelectedRows = selectedRowIds.map((id) => {
+                setSelectedRows(prv => {
+                    const newSelectedRows = selectedRowIds.map(id => {
                         return table?.getRowModel()?.rowsById?.[id]
                             ? getRowInCurrentPage(id)
                             : getRowInOtherPage(id);
@@ -32,7 +32,7 @@ const useTable = ({ state, getRowId, data, columns, pageSize, ...props }) => {
     //selection
     const [rowSelection, setRowSelection] = useState({});
     const { renderSubComponent, getRowCanExpand, onSelectRow, multiSelect, ...tProps } = props;
-    const memoColumns = useMemo(() => columns, [JSON.stringify(columns)]);
+    const memoColumns = useMemo(() => columns, []);
     const memoData = useMemo(() => data, [data]);
     //generate table with react-table
     const table = useReactTable({
@@ -49,7 +49,7 @@ const useTable = ({ state, getRowId, data, columns, pageSize, ...props }) => {
         //   getRowId && at(row, getRowId)?.[0]
         //     ? at(row, getRowId)?.[0]
         //     : row.id,
-        onRowSelectionChange: (row) => handleSelectRow(row),
+        onRowSelectionChange: row => handleSelectRow(row),
         getCoreRowModel: getCoreRowModel(),
         columns: memoColumns,
         ...tProps,
@@ -65,7 +65,7 @@ const useTable = ({ state, getRowId, data, columns, pageSize, ...props }) => {
         pageIndex: table?.getState()?.pagination?.pageIndex + 1,
         pageSize: table?.getState()?.pagination?.pageSize,
         pageCounts: table?.getPageCount(),
-        onChangePage: (page) => table.setPageIndex(page - 1),
+        onChangePage: page => table.setPageIndex(page - 1),
     };
     return {
         table,

package/dist/components/custom-table/types.d.ts

@@ -0,0 +1,77 @@
+import React, { ReactNode } from 'react';
+import { Cell, Row, ColumnDef, TableOptions, Table as TableType } from '@tanstack/react-table';
+import { SystemStyleObject } from '@mui/system';
+import { StackProps } from '@mui/material/Stack';
+import { TypographyProps } from '@mui/material/Typography';
+import { RadioProps } from '@mui/material/Radio';
+import { ITableFooterProps } from '../custom-pagination/custom-pagination-2/CustomPagination2';
+import { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';
+export type TColumns = ColumnDef<any, any>[];
+export interface IUseTableProps extends Partial<Omit<TableOptions<any>, 'getRowId'>> {
+    columns: ColumnDef<any, any>[];
+    data: any;
+    pageSize?: number;
+    multiSelect?: boolean;
+    onSelectRow?: (data: any) => void;
+    getRowId?: string;
+    renderSubComponent?: (props: {
+        row: Row<any>;
+    }) => React.ReactElement;
+    getRowCanExpand?: (row: Row<any>) => boolean;
+}
+export interface ITablePagination {
+    pageIndex: number;
+    pageSize: number;
+    pageCounts: number;
+    onChangePage: (pageIndex: number) => void;
+    onChangePageSize?: (pageSize: number) => void;
+}
+export interface ITableRowStyle {
+    row: Row<any>;
+    hover?: boolean;
+}
+export interface ITableCellsStyle {
+    row: Row<any>;
+    cell?: Cell<any, any>;
+    hover?: boolean;
+}
+export type TRowStyle = (props: ITableRowStyle) => SystemStyleObject;
+export type TCellsStyle = (props: ITableCellsStyle) => SystemStyleObject;
+export interface ICheckboxProps extends Omit<MuiCheckboxProps, 'onChange'> {
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, row?: Row<any>) => void;
+}
+export type TCheckboxProps = ((props: {
+    row?: Row<any>;
+    table: TableType<any>;
+}) => ICheckboxProps) | ICheckboxProps;
+export type TTableVariants = 'zebra' | 'linear';
+export interface ICustomTable {
+    id?: string;
+    pagination?: ITablePagination;
+    table: TableType<any>;
+    variant?: TTableVariants;
+    wrapperStackProps?: StackProps;
+    footerProps?: Omit<ITableFooterProps, 'pagination'>;
+    onClickRow?: (row: Row<any>) => void;
+    renderSubComponent?: any;
+    isLoading?: boolean;
+    isError?: boolean;
+    withRadio?: boolean;
+    withSelect?: boolean;
+    withIndex?: boolean;
+    rowStyle?: TRowStyle;
+    cellsStyle?: TCellsStyle;
+    headerStyle?: SystemStyleObject;
+    headerTypoProps?: TypographyProps;
+    checkboxProps?: TCheckboxProps;
+    radioProps?: RadioProps;
+    emptyListComponent?: string | ReactNode;
+    rowBorderRadius?: number;
+    borderRadius?: number;
+}
+export interface ITableAction {
+    label: string | React.ReactNode;
+    icon?: React.ReactElement;
+    onClick?: () => void;
+    disabled?: boolean;
+}