@symply.io/basic-components 1.0.0-alpha.8 → 1.0.0-bata.7

package/AlertDialog/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AlertDialogProps } from "./types";
 declare const AlertDialog: (props: AlertDialogProps) => JSX.Element;
 export default AlertDialog;

package/AlertDialog/index.js

@@ -32,7 +32,7 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import Slide from "@mui/material/Slide";
 import useCustomTheme from "../useCustomTheme";
 var Transition = forwardRef(function Transition(props, ref) {
-    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
+    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }));
 });
 var AlertDialog = function (props) {
     var _a = props.title, title = _a === void 0 ? "Info" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "md" : _b, children = props.children, open = props.open, onClose = props.onClose, DialogButtons = props.DialogButtons, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["title", "maxWidth", "children", "open", "onClose", "DialogButtons", "primaryColor", "secondaryColor"]);
@@ -42,7 +42,7 @@ var AlertDialog = function (props) {
                 if (reason !== "backdropClick") {
                     onClose();
                 }
-            }, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" }, rest, { children: [_jsx(DialogTitle, __assign({ id: "alert-dialog-title" }, { children: title }), void 0), _jsx(DialogContent, { children: children }, void 0), _jsx(DialogActions, { children: DialogButtons ? (cloneElement(DialogButtons)) : (_jsx(Button, __assign({ onClick: onClose, color: "primary" }, { children: "OK" }), void 0)) }, void 0)] }), void 0) }), void 0));
+            }, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" }, rest, { children: [_jsx(DialogTitle, __assign({ id: "alert-dialog-title" }, { children: title })), _jsx(DialogContent, { children: children }), _jsx(DialogActions, { children: DialogButtons ? (cloneElement(DialogButtons)) : (_jsx(Button, __assign({ onClick: onClose, color: "primary" }, { children: "OK" }))) })] })) })));
 };
 export default AlertDialog;
 export * from "./types";

package/Autocomplete/index.d.ts

@@ -0,0 +1,4 @@
+import { AutocompleteProps } from "./types";
+declare function CustomAutocomplete<T, multiple extends boolean | undefined>(props: AutocompleteProps<T, multiple>): JSX.Element;
+export default CustomAutocomplete;
+export * from "./types";

package/Autocomplete/index.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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 ThemeProvider from "@mui/material/styles/ThemeProvider";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../useCustomTheme";
+function CustomAutocomplete(props) {
+    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["size", "value", "options", "multiple", "primaryColor", "secondaryColor", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _a = useInteractions(), inputValue = _a.inputValue, onInputChange = _a.onInputChange;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, options: options, multiple: multiple, onChange: function (_, value) {
+                onChange(value);
+            }, inputValue: inputValue, onInputChange: onInputChange, renderInput: function (params) { return _jsx(TextField, __assign({}, params, rest, { size: size })); } }) })));
+}
+export default CustomAutocomplete;
+export * from "./types";

package/Autocomplete/types.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+export declare type AutocompleteOptionType<T> = T & {
+    label: string;
+};
+export declare type AutocompleteValueType<T, multiple> = multiple extends false | undefined ? AutocompleteOptionType<T> | null : Array<AutocompleteOptionType<T>> | null;
+export interface AutocompleteProps<T, multiple> extends Omit<TextFieldProps, "onChange"> {
+    multiple?: multiple;
+    options: Array<AutocompleteOptionType<T>>;
+    value: AutocompleteValueType<T, multiple>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+    onChange: (value: AutocompleteValueType<T, multiple>) => void;
+}

package/Autocomplete/types.js

@@ -0,0 +1 @@
+export {};

package/Autocomplete/useInteractions.d.ts

@@ -0,0 +1,5 @@
+declare function useInteractions(): {
+    inputValue: string;
+    onInputChange: (_: object, value: string) => void;
+};
+export default useInteractions;

package/Autocomplete/useInteractions.js

@@ -0,0 +1,9 @@
+import { useState, useCallback } from "react";
+function useInteractions() {
+    var _a = useState(""), inputValue = _a[0], setInputValue = _a[1];
+    var onInputChange = useCallback(function (_, value) {
+        setInputValue(value);
+    }, []);
+    return { inputValue: inputValue, onInputChange: onInputChange };
+}
+export default useInteractions;

package/AutocompleteWithFilter/index.d.ts

@@ -0,0 +1,4 @@
+import { AutocompleteWithFilterProps } from "./types";
+declare function AutocompleteWithFilter<T, multiple extends boolean | undefined>(props: AutocompleteWithFilterProps<T, multiple>): JSX.Element;
+export default AutocompleteWithFilter;
+export * from "./types";

package/AutocompleteWithFilter/index.js

@@ -0,0 +1,52 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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, jsxs as _jsxs } from "react/jsx-runtime";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import Checkbox from "@mui/material/Checkbox";
+import TextField from "@mui/material/TextField";
+import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import useCustomTheme from "../useCustomTheme";
+var icon = _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+var checkedIcon = _jsx(CheckBoxIcon, { fontSize: "small" });
+function AutocompleteWithFilter(props) {
+    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, disableCloseOnSelect = props.disableCloseOnSelect, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["size", "value", "options", "multiple", "disableCloseOnSelect", "primaryColor", "secondaryColor", "onChange"]);
+    var filter = createFilterOptions({
+        ignoreCase: true,
+        ignoreAccents: true,
+        trim: true,
+        stringify: function (option) { return option.label; }
+    });
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: 1, options: options, multiple: multiple, filterOptions: filter, onChange: function (_, value) {
+                onChange(value);
+            }, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
+                return option.label || "";
+            }, renderOption: function (props, option, _a) {
+                var selected = _a.selected;
+                return (_jsxs("li", __assign({}, props, { children: [_jsx(Checkbox, { icon: icon, color: "primary", checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), option.label || ""] })));
+            }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { variant: "outlined" }))); } }) })));
+}
+export default AutocompleteWithFilter;
+export * from "./types";

package/AutocompleteWithFilter/types.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+export declare type AutocompleteWithFilterOptionType<T> = T & {
+    label: string;
+};
+export declare type AutocompleteWithFilterValueType<T, multiple> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> | null : Array<AutocompleteWithFilterOptionType<T>> | null;
+export interface AutocompleteWithFilterProps<T, multiple> extends Omit<TextFieldProps, "onChange"> {
+    value: AutocompleteWithFilterValueType<T, multiple>;
+    options: Array<AutocompleteWithFilterOptionType<T>>;
+    disableCloseOnSelect?: boolean;
+    multiple?: multiple;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+    onChange: (value: AutocompleteWithFilterValueType<T, multiple>) => void;
+}

package/AutocompleteWithFilter/types.js

@@ -0,0 +1 @@
+export {};

package/BasicModal/Content.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicModalContentProps } from "./types";
 declare function Content(props: BasicModalContentProps): JSX.Element;
 export default Content;

package/BasicModal/Content.js

@@ -24,14 +24,14 @@ function Content(props) {
     var children = props.children, title = props.title, desc = props.desc, _a = props.color, color = _a === void 0 ? "primary" : _a, loading = props.loading, disabled = props.disabled, buttons = props.buttons, _b = props.submitText, submitText = _b === void 0 ? "Save" : _b, _c = props.cancelText, cancelText = _c === void 0 ? "Cancel" : _c, _d = props.showTopRightCloseButton, showTopRightCloseButton = _d === void 0 ? false : _d, _e = props.hideBottomButtons, hideBottomButtons = _e === void 0 ? false : _e, _f = props.noForm, noForm = _f === void 0 ? false : _f, onClose = props.onClose, onSubmit = props.onSubmit;
     var theme = useTheme();
     return (_jsxs(_Fragment, { children: [_jsxs(DialogTitle, __assign({ id: "form-dialog-title", sx: {
-                    "& > h6": {
-                        fontWeight: "700",
-                    },
-                } }, { children: [title, showTopRightCloseButton ? (_jsx(IconButton, __assign({ "aria-label": "close", onClick: onClose, sx: {
+                    "& > span": {
+                        fontWeight: "700!important"
+                    }
+                } }, { children: [_jsx("span", { children: title }), showTopRightCloseButton ? (_jsx(IconButton, __assign({ "aria-label": "close", onClick: onClose, sx: {
                             position: "absolute",
                             right: 8,
                             top: 8,
-                            color: theme.palette.grey[500],
-                        } }, { children: _jsx(CloseIcon, {}, void 0) }), void 0)) : null] }), void 0), _jsxs(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: [desc && _jsx(DialogContentText, { children: desc }, void 0), Boolean(children) && cloneElement(children)] }), void 0), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText }), void 0) }), void 0), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : undefined, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText }), void 0) }), void 0)] }, void 0)) }), void 0) }), void 0))] }, void 0));
+                            color: theme.palette.grey[500]
+                        } }, { children: _jsx(CloseIcon, {}) }))) : null] })), _jsxs(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: [desc && _jsx(DialogContentText, { children: desc }), Boolean(children) && cloneElement(children)] })), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText })) })), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : undefined, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText })) }))] })) })) })))] }));
 }
 export default Content;

package/BasicModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicModalProps } from "./types";
 declare function BasicModal(props: BasicModalProps): JSX.Element;
 export default BasicModal;

package/BasicModal/index.js

@@ -30,7 +30,7 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import Content from "./Content";
 import useCustomTheme from "../useCustomTheme";
 var Transition = forwardRef(function Transition(props, ref) {
-    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
+    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }));
 });
 function BasicModal(props) {
     var onClose = props.onClose, onSubmit = props.onSubmit, _a = props.maxWidth, maxWidth = _a === void 0 ? "sm" : _a, _b = props.open, open = _b === void 0 ? false : _b, _c = props.noForm, noForm = _c === void 0 ? false : _c, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onClose", "onSubmit", "maxWidth", "open", "noForm", "primaryColor", "secondaryColor"]);
@@ -40,16 +40,13 @@ function BasicModal(props) {
                 if (reason !== "backdropClick") {
                     onClose();
                 }
-            }, maxWidth: maxWidth, fullWidth: true, TransitionComponent: Transition, "aria-labelledby": "form-dialog-title", fullScreen: fullScreen, disableEscapeKeyDown: true }, { children: _jsx(Grid, __assign({ container: true, direction: "column", sx: {
-                    height: "100%",
-                    overflowY: "hidden"
-                }, component: noForm ? "div" : "form", onSubmit: noForm
+            }, maxWidth: maxWidth, fullWidth: true, TransitionComponent: Transition, "aria-labelledby": "form-dialog-title", fullScreen: fullScreen, disableEscapeKeyDown: true }, { children: _jsx(Grid, __assign({ component: noForm ? "div" : "form", onSubmit: noForm
                     ? undefined
                     : function (e) {
                         e.preventDefault();
                         e.stopPropagation();
                         onSubmit();
-                    } }, { children: _jsx(Content, __assign({}, rest, { noForm: noForm, onClose: onClose, onSubmit: onSubmit }), void 0) }), void 0) }), void 0) }), void 0));
+                    } }, { children: _jsx(Content, __assign({}, rest, { noForm: noForm, onClose: onClose, onSubmit: onSubmit })) })) })) })));
 }
 export default BasicModal;
 export * from "./types";

package/BasicTable/TableBody.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BasicTableBodyProps } from "./types";
+declare const BasicTableBody: import("react").ForwardRefExoticComponent<BasicTableBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BasicTableBody;

package/BasicTable/TableBody.js

@@ -0,0 +1,51 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Grid from "@mui/material/Grid";
+import useCustomTheme from "../useCustomTheme";
+import TableBodyRow from "./TableBodyRow";
+var BasicTableBody = forwardRef(function (props, ref) {
+    var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText;
+    var theme = useCustomTheme();
+    return (_jsx(Grid, __assign({ item: true, sx: {
+            maxHeight: "41vh",
+            overflowY: "auto",
+            display: "block",
+            minWidth: "100%",
+            scrollbarWidth: forFrozen ? "none" : "inherit",
+            "&::-webkit-scrollbar": {
+                width: forFrozen ? 0 : "inherit"
+            }
+        } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows && rows.length > 0 ? (rows.map(function (row, index) {
+                return (_jsx(TableBodyRow, { row: row, rows: rows, columns: columns }, "BasicTable_".concat(index)));
+            })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
+                    height: "60px",
+                    borderBottomWidth: "thin",
+                    borderBottomColor: "#e5e5e5",
+                    borderBottomStyle: "solid",
+                    padding: theme.spacing(0.5, 0),
+                    minHeight: theme.spacing(6),
+                    "& :nth-of-last-type(1)": {
+                        borderBottom: "none"
+                    },
+                    "& input": {
+                        fontSize: "0.9rem",
+                        fontWeight: 600
+                    }
+                } }, { children: _jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: "center", sx: {
+                        minWidth: "135px",
+                        paddingLeft: theme.spacing(0.625),
+                        paddingRight: theme.spacing(0.625)
+                    } }, { children: noDataText })) }))) })) })));
+});
+export default BasicTableBody;

package/BasicTable/TableBodyRow.d.ts

@@ -0,0 +1,3 @@
+import { BasicTableBodyRowProps } from "./types";
+declare function BasicTableBodyRow(props: BasicTableBodyRowProps): JSX.Element;
+export default BasicTableBodyRow;

package/BasicTable/TableBodyRow.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import Grid from "@mui/material/Grid";
+import useCustomTheme from "../useCustomTheme";
+function BasicTableBodyRow(props) {
+    var row = props.row, rows = props.rows, columns = props.columns;
+    var theme = useCustomTheme();
+    return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
+            height: "60px",
+            borderBottomWidth: "thin",
+            borderBottomColor: "#e5e5e5",
+            borderBottomStyle: "solid",
+            padding: theme.spacing(0.5, 0),
+            minHeight: theme.spacing(6),
+            "& :nth-of-last-type(1)": {
+                borderBottom: "none"
+            },
+            "& input": {
+                fontSize: "0.9rem",
+                fontWeight: 600
+            }
+        } }, { children: columns.map(function (col) {
+            var accessor = col.accessor, Cell = col.Cell, canBeFrozen = col.canBeFrozen, _a = col.align, align = _a === void 0 ? "center" : _a;
+            return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
+                    minWidth: canBeFrozen ? "112px!important" : "135px",
+                    paddingLeft: theme.spacing(0.625),
+                    paddingRight: theme.spacing(0.625)
+                } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
+        }) })));
+}
+export default BasicTableBodyRow;

package/BasicTable/TableFooter.d.ts

@@ -0,0 +1,3 @@
+import { BasicTableFooterProps } from "./types";
+declare function BasicTableFooter(props: BasicTableFooterProps): JSX.Element;
+export default BasicTableFooter;

package/BasicTable/TableFooter.js

@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import Grid from "@mui/material/Grid";
+import useCustomTheme from "../useCustomTheme";
+function BasicTableFooter(props) {
+    var footers = props.footers;
+    var theme = useCustomTheme();
+    return footers && footers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
+            backgroundColor: "#eaf0f6",
+            padding: theme.spacing(1.5, 0),
+            height: "50px"
+        } }, { children: _jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
+                lineHeight: "24px",
+                minWidth: "100%",
+                "& span": {
+                    color: "#172b4d",
+                    fontSize: "1rem",
+                    fontWeight: 600
+                }
+            } }, { children: footers.map(function (footer) {
+                var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, canBeFrozen = footer.canBeFrozen;
+                return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
+                        minWidth: canBeFrozen ? "112px!important" : "135px",
+                        paddingLeft: theme.spacing(0.625),
+                        paddingRight: theme.spacing(0.625),
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis",
+                        overflow: "hidden",
+                        userSelect: "none"
+                    } }, { children: cloneElement(Cell) }), accessor));
+            }) })) }))) : (_jsx(_Fragment, {}));
+}
+export default BasicTableFooter;

package/BasicTable/TableHeader.d.ts

@@ -0,0 +1,3 @@
+import { BasicTableHeaderProps } from "./types";
+declare function BasicTableHeader(props: BasicTableHeaderProps): JSX.Element;
+export default BasicTableHeader;

package/BasicTable/TableHeader.js

@@ -0,0 +1,47 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import Grid from "@mui/material/Grid";
+import useCustomTheme from "../useCustomTheme";
+function BasicTableHeader(props) {
+    var headers = props.headers;
+    var theme = useCustomTheme();
+    return headers && headers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
+            backgroundColor: "#eaf0f6",
+            padding: theme.spacing(1.5, 0),
+            height: "50px"
+        } }, { children: _jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
+                lineHeight: "24px",
+                minWidth: "100%",
+                "& span": {
+                    color: "#172b4d",
+                    fontSize: "1rem",
+                    fontWeight: 600
+                }
+            } }, { children: headers.map(function (header) {
+                var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, title = header.title, onSort = header.onSort, canBeFrozen = header.canBeFrozen, _b = header.canSort, canSort = _b === void 0 ? false : _b;
+                return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, title: title, textAlign: align, sx: {
+                        minWidth: canBeFrozen ? "112px!important" : "135px",
+                        paddingLeft: theme.spacing(0.625),
+                        paddingRight: theme.spacing(0.625),
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis",
+                        overflow: "hidden",
+                        userSelect: "none",
+                        cursor: canSort ? "pointer" : "default"
+                    }, onClick: function () {
+                        onSort({ field: accessor });
+                    } }, { children: cloneElement(Cell) }), accessor));
+            }) })) }))) : (_jsx(_Fragment, {}));
+}
+export default BasicTableHeader;

package/BasicTable/index.d.ts

@@ -0,0 +1,5 @@
+import { BasicTableProps } from "./types";
+declare function BasicTable(props: BasicTableProps): JSX.Element;
+export default BasicTable;
+export * from "./types";
+export { default as useTable } from "./useTable";

package/BasicTable/index.js

@@ -0,0 +1,88 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useEffect } from "react";
+import Grid from "@mui/material/Grid";
+import TableContainer from "@mui/material/TableContainer";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+import useScroll from "./useScroll";
+import TableBody from "./TableBody";
+import TableHeader from "./TableHeader";
+import TableFooter from "./TableFooter";
+function BasicTable(props) {
+    var _a;
+    var _b;
+    var _c = props.columns, columns = _c === void 0 ? [] : _c, _d = props.rows, rows = _d === void 0 ? [] : _d, _e = props.headers, headers = _e === void 0 ? [] : _e, _f = props.footers, footers = _f === void 0 ? [] : _f, _g = props.noDataText, noDataText = _g === void 0 ? "No Data!" : _g, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var fronzenColsCount = useMemo(function () { var _a; return (_a = columns.filter(function (col) { return col.canBeFrozen; })) === null || _a === void 0 ? void 0 : _a.length; }, [columns]);
+    var canFreeze = useMemo(function () { return isUpMd && (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && fronzenColsCount > 0; }, [fronzenColsCount, isUpMd, rows.length]);
+    var _h = useScroll({
+        canFreeze: canFreeze
+    }), frozenWidth = _h.frozenWidth, setFrozenWidth = _h.setFrozenWidth, fixedRef = _h.fixedRef, dynamicRef = _h.dynamicRef;
+    useEffect(function () {
+        var _a, _b;
+        var initFrozenWidth = ((_a = document.getElementById("frozenContainer")) === null || _a === void 0 ? void 0 : _a.clientWidth) ||
+            ((_b = fixedRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) ||
+            fronzenColsCount * 123 ||
+            370;
+        if (columns) {
+            setFrozenWidth(function (fw) {
+                if (fw !== initFrozenWidth) {
+                    return initFrozenWidth;
+                }
+                return fw;
+            });
+        }
+    }, [columns, fixedRef, fronzenColsCount, setFrozenWidth]);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TableContainer, __assign({ sx: (_a = {
+                    borderWidth: "thin",
+                    borderColor: "#e5e5e5",
+                    borderStyle: "solid",
+                    borderRadius: "4px",
+                    borderCollapse: "unset !important",
+                    margin: theme.spacing(2, 0, 3, 0),
+                    width: "100%"
+                },
+                _a[theme.breakpoints.up("sm")] = {
+                    minWidth: "600px"
+                },
+                _a.position = "relative",
+                _a.transition = "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+                _a) }, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center", wrap: "nowrap" }, { children: [canFreeze && (_jsx(Grid, __assign({ id: "frozenContainer", item: true, sx: {
+                            top: 0,
+                            left: 0,
+                            position: "absolute",
+                            zIndex: 999,
+                            backgroundColor: "Menu",
+                            boxShadow: "6px 0 6px -4px rgba(0,0,0,0.15)"
+                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
+                            width: "100%",
+                            marginLeft: canFreeze
+                                ? ((_b = document.getElementById("frozenContainer")) === null || _b === void 0 ? void 0 : _b.clientWidth) ||
+                                    frozenWidth ||
+                                    0
+                                : 0,
+                            overflow: "auto"
+                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) {
+                                        return isUpMd ? !header.canBeFrozen : true;
+                                    }) }), _jsx(TableBody, { rows: rows, ref: dynamicRef, noDataText: noDataText, columns: columns.filter(function (col) {
+                                        return isUpMd ? !col.canBeFrozen : true;
+                                    }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
+                                        return isUpMd ? !footer.canBeFrozen : true;
+                                    }) })] })) }))] })) })) })));
+}
+export default BasicTable;
+export * from "./types";
+export { default as useTable } from "./useTable";

package/BasicTable/types.d.ts

@@ -0,0 +1,70 @@
+import { ReactElement, CSSProperties } from "react";
+interface SortByProps {
+    id: string;
+    desc: boolean;
+}
+interface InitialStateProps {
+    sortBy?: SortByProps;
+}
+export interface IColumn {
+    Header: ReactElement;
+    Body: ReactElement;
+    Footer?: ReactElement;
+    align?: "left" | "center" | "right";
+    accessor: string;
+    canSort?: boolean;
+    canBeFrozen?: boolean;
+    [name: string]: unknown;
+}
+interface IHeader extends IColumn {
+    Cell: ReactElement;
+    title: string;
+    canSort?: boolean;
+    onSort: (props: SortingProps) => unknown;
+}
+interface IFooter extends IColumn {
+    Cell: ReactElement;
+}
+interface IBodyColumn extends IColumn {
+    Cell: ReactElement;
+}
+export interface IRow {
+    [name: string]: unknown;
+}
+export interface SortingProps {
+    field: string;
+    isSorted?: boolean;
+    descending?: boolean;
+}
+export interface UseTableProps {
+    data: Array<IRow>;
+    columns: Array<IColumn>;
+    initialState?: InitialStateProps;
+    disableSortBy?: boolean;
+    onSort?: (props: SortingProps) => unknown;
+}
+export interface UseScrollProps {
+    canFreeze?: boolean;
+}
+export interface BasicTableHeaderProps {
+    headers: Array<IHeader>;
+}
+export interface BasicTableFooterProps {
+    footers: Array<IFooter>;
+}
+export interface BasicTableBodyProps {
+    columns: Array<IBodyColumn>;
+    rows: Array<IRow>;
+    noDataText?: string;
+    forFrozen?: boolean;
+}
+export interface BasicTableBodyRowProps {
+    columns: Array<IBodyColumn>;
+    rows: Array<IRow>;
+    row: IRow;
+}
+export declare type BasicTableProps = BasicTableHeaderProps & Omit<BasicTableBodyProps, "forFrozen"> & Partial<BasicTableFooterProps> & {
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+};
+export {};

package/BasicTable/types.js

@@ -0,0 +1 @@
+export {};