@symply.io/basic-components 1.0.0-beta.9 → 1.0.0

package/Autocomplete/index.d.ts

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

package/Autocomplete/index.js

@@ -30,9 +30,9 @@ 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 })); } }) })));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, options: options, multiple: multiple, onChange: function (_, val) {
+                onChange(val);
+            }, isOptionEqualToValue: function (opt, val) { return opt.label === val.label; }, value: 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

@@ -1,10 +1,12 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-export declare type AutocompleteOptionType<T> = T & {
+export declare type AutocompleteOptionType<T = {
+    [name: string]: unknown;
+}> = 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"> {
+export declare type AutocompleteValueType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteOptionType<T> | null : Array<AutocompleteOptionType<T>>;
+export interface AutocompleteProps<T, multiple extends boolean | undefined> extends Omit<TextFieldProps, "onChange"> {
     multiple?: multiple;
     options: Array<AutocompleteOptionType<T>>;
     value: AutocompleteValueType<T, multiple>;

package/AutocompleteWithFilter/index.d.ts

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

package/AutocompleteWithFilter/index.js

@@ -39,9 +39,9 @@ function AutocompleteWithFilter(props) {
         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 (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: 1, options: options, multiple: multiple, filterOptions: filter, onChange: function (_, val) {
+                onChange(val);
+            }, value: value, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
                 return option.label || "";
             }, renderOption: function (props, option, _a) {
                 var selected = _a.selected;

package/AutocompleteWithFilter/types.d.ts

@@ -3,13 +3,13 @@ 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>;
+export declare type AutocompleteWithFilterlValueType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> | null : Array<AutocompleteWithFilterOptionType<T>>;
+export interface AutocompleteWithFilterProps<T, multiple extends boolean | undefined> extends Omit<TextFieldProps, "onChange"> {
+    value: AutocompleteWithFilterlValueType<T, multiple>;
     options: Array<AutocompleteWithFilterOptionType<T>>;
     disableCloseOnSelect?: boolean;
     multiple?: multiple;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
-    onChange: (value: AutocompleteWithFilterValueType<T, multiple>) => void;
+    onChange: (value: AutocompleteWithFilterlValueType<T, multiple>) => void;
 }

package/BasicModal/Content.js

@@ -23,7 +23,7 @@ import Grid from "@mui/material/Grid";
 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: {
+    return (_jsxs(_Fragment, { children: [_jsxs(DialogTitle, __assign({ sx: {
                     "& > span": {
                         fontWeight: "700!important"
                     }

package/BasicTable/TableBody.js

@@ -15,7 +15,7 @@ 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, cellMinWidth = props.cellMinWidth;
+    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",
@@ -27,9 +27,9 @@ var BasicTableBody = forwardRef(function (props, ref) {
                 width: forFrozen ? 0 : "initial"
             }
         } }, { 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, cellMinWidth: cellMinWidth }, "BasicTable_".concat(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",
+                    height: theme.spacing(7.5),
                     borderBottomWidth: "thin",
                     borderBottomColor: "#e5e5e5",
                     borderBottomStyle: "solid",
@@ -43,7 +43,6 @@ var BasicTableBody = forwardRef(function (props, ref) {
                         fontWeight: 600
                     }
                 } }, { children: _jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: "center", sx: {
-                        minWidth: cellMinWidth,
                         paddingLeft: theme.spacing(0.625),
                         paddingRight: theme.spacing(0.625)
                     } }, { children: noDataText })) }))) })) })));

package/BasicTable/TableBodyRow.js

@@ -14,10 +14,10 @@ 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, cellMinWidth = props.cellMinWidth;
+    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",
+            height: theme.spacing(7.5),
             borderBottomWidth: "thin",
             borderBottomColor: "#e5e5e5",
             borderBottomStyle: "solid",
@@ -31,9 +31,10 @@ function BasicTableBodyRow(props) {
                 fontWeight: 600
             }
         } }, { children: columns.map(function (col) {
-            var accessor = col.accessor, Cell = col.Cell, _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: cellMinWidth,
+            var accessor = col.accessor, Cell = col.Cell, _a = col.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, width = col.width, _b = col.align, align = _b === void 0 ? "center" : _b;
+            return (_jsx(Grid, __assign({ item: true, textAlign: align, sx: {
+                    minWidth: minWidth,
+                    width: width,
                     paddingLeft: theme.spacing(0.625),
                     paddingRight: theme.spacing(0.625)
                 } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));

package/BasicTable/TableFooter.js

@@ -14,12 +14,12 @@ import { cloneElement } from "react";
 import Grid from "@mui/material/Grid";
 import useCustomTheme from "../useCustomTheme";
 function BasicTableFooter(props) {
-    var footers = props.footers, cellMinWidth = props.cellMinWidth;
+    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"
+            height: theme.spacing(6.25)
         } }, { children: _jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
                 lineHeight: "24px",
                 minWidth: "100%",
@@ -29,9 +29,10 @@ function BasicTableFooter(props) {
                     fontWeight: 600
                 }
             } }, { children: footers.map(function (footer) {
-                var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a;
-                return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
-                        minWidth: cellMinWidth,
+                var accessor = footer.accessor, Cell = footer.Cell, _a = footer.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, width = footer.width, _b = footer.align, align = _b === void 0 ? "center" : _b;
+                return (_jsx(Grid, __assign({ item: true, textAlign: align, sx: {
+                        minWidth: minWidth,
+                        width: width,
                         paddingLeft: theme.spacing(0.625),
                         paddingRight: theme.spacing(0.625),
                         whiteSpace: "nowrap",

package/BasicTable/TableHeader.js

@@ -14,12 +14,12 @@ import { cloneElement } from "react";
 import Grid from "@mui/material/Grid";
 import useCustomTheme from "../useCustomTheme";
 function BasicTableHeader(props) {
-    var headers = props.headers, cellMinWidth = props.cellMinWidth;
+    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"
+            height: theme.spacing(6.25)
         } }, { children: _jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
                 lineHeight: "24px",
                 minWidth: "100%",
@@ -29,9 +29,10 @@ function BasicTableHeader(props) {
                     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, _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: cellMinWidth,
+                var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, _b = header.minWidth, minWidth = _b === void 0 ? "120px!important" : _b, width = header.width, title = header.title, onSort = header.onSort, _c = header.canSort, canSort = _c === void 0 ? false : _c;
+                return (_jsx(Grid, __assign({ item: true, title: title, textAlign: align, sx: {
+                        minWidth: minWidth,
+                        width: width,
                         paddingLeft: theme.spacing(0.625),
                         paddingRight: theme.spacing(0.625),
                         whiteSpace: "nowrap",

package/BasicTable/index.js

@@ -22,25 +22,21 @@ 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, _h = props.cellMinWidth, cellMinWidth = _h === void 0 ? "initial" : _h;
+    var _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, 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 _j = useScroll({
+    var _g = useScroll({
         canFreeze: canFreeze
-    }), frozenWidth = _j.frozenWidth, setFrozenWidth = _j.setFrozenWidth, fixedRef = _j.fixedRef, dynamicRef = _j.dynamicRef;
+    }), frozenWidth = _g.frozenWidth, setFrozenWidth = _g.setFrozenWidth, fixedRef = _g.fixedRef, dynamicRef = _g.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) {
+            var frozenCols = columns.filter(function (col) { return col.canBeFrozen; });
+            var initialFrozenWidth_1 = frozenCols.reduce(function (width, col) { return width + (col.minWidth || 120); }, 1);
             setFrozenWidth(function (fw) {
-                if (fw !== initFrozenWidth) {
-                    return initFrozenWidth;
+                if (fw !== initialFrozenWidth_1) {
+                    return initialFrozenWidth_1;
                 }
                 return fw;
             });
@@ -67,21 +63,17 @@ function BasicTable(props) {
                             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, { cellMinWidth: cellMinWidth, headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, cellMinWidth: cellMinWidth, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { cellMinWidth: cellMinWidth, footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
+                        } }, { 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,
+                            marginLeft: canFreeze ? frozenWidth || 0 : 0,
                             overflow: "auto"
-                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { cellMinWidth: cellMinWidth, headers: headers.filter(function (header) {
+                        } }, { 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;
-                                    }), cellMinWidth: cellMinWidth }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
+                                    }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
                                         return isUpMd ? !footer.canBeFrozen : true;
-                                    }), cellMinWidth: cellMinWidth })] })) }))] })) })) })));
+                                    }) })] })) }))] })) })) })));
 }
 export default BasicTable;
 export * from "./types";

package/BasicTable/types.d.ts

@@ -15,7 +15,9 @@ export interface IColumn {
     accessor: string;
     canSort?: boolean;
     canBeFrozen?: boolean;
-    [name: string]: unknown;
+    minWidth?: number;
+    width?: number;
+    [name: string]: any;
 }
 interface IHeader extends IColumn {
     Cell: ReactElement;
@@ -30,7 +32,7 @@ interface IBodyColumn extends IColumn {
     Cell: ReactElement;
 }
 export interface IRow {
-    [name: string]: unknown;
+    [name: string]: any;
 }
 export interface SortingProps {
     field: string;
@@ -43,26 +45,24 @@ export interface UseTableProps {
     initialState?: InitialStateProps;
     disableSortBy?: boolean;
     onSort?: (props: SortingProps) => unknown;
+    [name: string]: any;
 }
 export interface UseScrollProps {
     canFreeze?: boolean;
 }
-interface BasicTableBaseProps {
-    cellMinWidth?: CSSProperties["minWidth"];
-}
-export interface BasicTableHeaderProps extends BasicTableBaseProps {
+export interface BasicTableHeaderProps {
     headers: Array<IHeader>;
 }
-export interface BasicTableFooterProps extends BasicTableBaseProps {
+export interface BasicTableFooterProps {
     footers: Array<IFooter>;
 }
-export interface BasicTableBodyProps extends BasicTableBaseProps {
+export interface BasicTableBodyProps {
     columns: Array<IBodyColumn>;
     rows: Array<IRow>;
     noDataText?: string;
     forFrozen?: boolean;
 }
-export interface BasicTableBodyRowProps extends BasicTableBaseProps {
+export interface BasicTableBodyRowProps {
     columns: Array<IBodyColumn>;
     rows: Array<IRow>;
     row: IRow;

package/BasicTable/useScroll.js

@@ -5,7 +5,7 @@ function useScroll(props) {
     var canFreeze = props.canFreeze;
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    var _a = useState(370), frozenWidth = _a[0], setFrozenWidth = _a[1];
+    var _a = useState(0), frozenWidth = _a[0], setFrozenWidth = _a[1];
     var fixedRef = useRef(null);
     var dynamicRef = useRef(null);
     var resetFrozenWidth = useCallback(function () {

package/BasicTable/useTable.d.ts

@@ -10,6 +10,8 @@ declare function useTable(props: UseTableProps): {
         accessor: string;
         canSort: boolean | undefined;
         canBeFrozen?: boolean | undefined;
+        minWidth?: number | undefined;
+        width?: number | undefined;
         Cell: JSX.Element;
         title: string;
         onSort: ({ field }: Pick<SortingProps, "field">) => void;
@@ -23,6 +25,8 @@ declare function useTable(props: UseTableProps): {
         accessor: string;
         canSort?: boolean | undefined;
         canBeFrozen?: boolean | undefined;
+        minWidth?: number | undefined;
+        width?: number | undefined;
         Cell: import("react").FunctionComponentElement<any>;
     }[];
     columns: {
@@ -34,6 +38,8 @@ declare function useTable(props: UseTableProps): {
         accessor: string;
         canSort?: boolean | undefined;
         canBeFrozen?: boolean | undefined;
+        minWidth?: number | undefined;
+        width?: number | undefined;
         Cell: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     }[];
     rows: import("./types").IRow[];

package/CheckBox/types.d.ts

@@ -1,8 +1,8 @@
-import { CSSProperties, ReactNode } from "react";
+import { CSSProperties, ReactElement } from "react";
 import { CheckboxProps } from "@mui/material/Checkbox";
 import { FormGroupProps } from "@mui/material/FormGroup";
 export interface CheckBoxProps extends Omit<CheckboxProps, "onChange"> {
-    label: string | ReactNode;
+    label: string | ReactElement;
     onChange: (val: boolean) => void;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/FormRadioGroup/index.js

@@ -26,7 +26,7 @@ function FormRadioGroup(props) {
                         onChange(event.target.value);
                     }, sx: {
                         my: 1,
-                        "& label span:first-child span:first-child": {
+                        "& label span:first-of-type span:first-of-type": {
                             margin: "-5px 0 -5px 0"
                         }
                     } }, { children: options.map(function (opt) {

package/LoadingModal/Modal.d.ts

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

package/LoadingModal/Modal.js

@@ -0,0 +1,29 @@
+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 Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import Typography from "@mui/material/Typography";
+import CircularProgress from "@mui/material/CircularProgress";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+function LoadingModal(props) {
+    var open = props.open, _a = props.text, text = _a === void 0 ? "Loading..." : _a, _b = props.direction, direction = _b === void 0 ? "column" : _b, _c = props.showProgess, showProgess = _c === void 0 ? false : _c, _d = props.percent, percent = _d === void 0 ? 0 : _d, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Dialog, __assign({ maxWidth: "xs", open: open, sx: { backgroundColor: "#7A7A7A97" }, PaperProps: { sx: { backgroundColor: "#F2F2F2CF" } }, onClose: function (_, reason) {
+                if (reason === "backdropClick")
+                    return;
+            }, disableEscapeKeyDown: true }, { children: _jsx(DialogContent, { children: _jsxs(Grid, __assign({ container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid" }, { children: [_jsxs(Box, __assign({ position: "relative", display: "inline-flex", sx: { mt: 1.25 } }, { children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }), showProgess && percent >= 0 && (_jsx(Box, __assign({ top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsxs(Typography, __assign({ variant: "caption" }, { children: [Math.round(percent), "%"] })) })))] })), _jsx(Typography, __assign({ variant: "subtitle1", component: "span", sx: { mt: 1 } }, { children: text }))] })) }) })) })));
+}
+export default LoadingModal;

package/LoadingModal/index.d.ts

@@ -1,4 +1,4 @@
-import { LoadingModalProps } from "./types";
-declare function LoadingModal(props: LoadingModalProps): JSX.Element;
+import LoadingModal from "./Modal";
 export default LoadingModal;
+export * from "./useLoadingModal";
 export * from "./types";

package/LoadingModal/index.js

@@ -1,30 +1,4 @@
-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 Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import Typography from "@mui/material/Typography";
-import CircularProgress from "@mui/material/CircularProgress";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
-import useCustomTheme from "../useCustomTheme";
-function LoadingModal(props) {
-    var open = props.open, _a = props.text, text = _a === void 0 ? "Loading..." : _a, _b = props.direction, direction = _b === void 0 ? "column" : _b, _c = props.showProgess, showProgess = _c === void 0 ? false : _c, _d = props.percent, percent = _d === void 0 ? 0 : _d, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Dialog, __assign({ maxWidth: "xs", open: open, sx: { backgroundColor: "#7A7A7A97" }, PaperProps: { sx: { backgroundColor: "#F2F2F2CF" } }, onClose: function (_, reason) {
-                if (reason === "backdropClick")
-                    return;
-            }, disableEscapeKeyDown: true }, { children: _jsx(DialogContent, { children: _jsxs(Grid, __assign({ container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid" }, { children: [_jsxs(Box, __assign({ position: "relative", display: "inline-flex", sx: { mt: 1.25 } }, { children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }), showProgess && percent >= 0 && (_jsx(Box, __assign({ top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsxs(Typography, __assign({ variant: "caption" }, { children: [Math.round(percent), "%"] })) })))] })), _jsx(Typography, __assign({ variant: "subtitle1", component: "span", sx: { mt: 1 } }, { children: text }))] })) }) })) })));
-}
+import LoadingModal from "./Modal";
 export default LoadingModal;
+export * from "./useLoadingModal";
 export * from "./types";

package/LoadingModal/types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import { CSSProperties, ReactElement } from "react";
 import { GridProps } from "@mui/material/Grid";
 export interface LoadingModalProps {
     open: boolean;
@@ -9,3 +9,16 @@ export interface LoadingModalProps {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 }
+export interface LoadingModalInstanceProps {
+    id: string;
+    text: string;
+}
+export interface LoadingModalContextProps {
+    onOpenLoadingModal: (text?: string) => LoadingModalInstanceProps | null;
+    onCloseLoadingModal: (instance: LoadingModalInstanceProps) => void;
+}
+export interface LoadingModalProviderProps {
+    children: ReactElement;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/LoadingModal/useLoadingModal.d.ts

@@ -0,0 +1,3 @@
+import { LoadingModalContextProps, LoadingModalProviderProps } from "./types";
+export declare function LoadingModalProvider(props: LoadingModalProviderProps): JSX.Element;
+export declare function useLoadingModal(): LoadingModalContextProps;

package/LoadingModal/useLoadingModal.js

@@ -0,0 +1,57 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useMemo, useState, useContext, useCallback, createContext } from "react";
+import generateUUID from "../utils/uuid";
+import LoadingModal from "./Modal";
+var LoadingModalContext = createContext({
+    onOpenLoadingModal: function () { return null; },
+    onCloseLoadingModal: function () { }
+});
+export function LoadingModalProvider(props) {
+    var children = props.children, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var _a = useState([]), instances = _a[0], setInstances = _a[1];
+    var modalArgs = useMemo(function () {
+        return instances.length > 0
+            ? {
+                open: true,
+                text: instances[instances.length - 1].text
+            }
+            : { open: false, text: "Loading..." };
+    }, [instances]);
+    var onOpenLoadingModal = useCallback(function (loadingText) {
+        var instance = {
+            id: generateUUID(),
+            text: loadingText || "Loading..."
+        };
+        setInstances(function (insts) { return __spreadArray(__spreadArray([], insts, true), [instance], false); });
+        return instance;
+    }, []);
+    var onCloseLoadingModal = useCallback(function (instance) {
+        if (instance === null || instance === void 0 ? void 0 : instance.id) {
+            setInstances(function (insts) { return __spreadArray([], insts.filter(function (inst) { return inst.id !== instance.id; }), true); });
+        }
+    }, []);
+    return (_jsx(LoadingModalContext.Provider, __assign({ value: { onOpenLoadingModal: onOpenLoadingModal, onCloseLoadingModal: onCloseLoadingModal } }, { children: _jsxs(_Fragment, { children: [cloneElement(children), _jsx(LoadingModal, __assign({}, modalArgs, { primaryColor: primaryColor, secondaryColor: secondaryColor }))] }) })));
+}
+export function useLoadingModal() {
+    return useContext(LoadingModalContext);
+}

package/README.md

@@ -211,20 +211,23 @@ Reusable table component
 ```tsx
 import { BasicTable, useTable } from '@symply.io/basic-components';
 // or 
-import BasicTable, { useTable } from '@symply.io/basic-components//BasicTable'; 
+import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable'; 
 ```
 
 <h5>Column Props (IColumn)</h5>
 
-| Name        | Type                        | Default | Required | Description                                     |
-| ----------- | --------------------------- | ------- | -------- | ----------------------------------------------- |
-| Body        | ReactElement                |         | true     | The component to render the column body cell.   |
-| Header      | ReactElement                |         | true     | The component to render the column header cell. |
-| Footer      | ReactElement                |         | false    | The component to render the column footer cell. |
-| accessor    | string                      |         | true     | The key of the column, it should be unique.     |
-| align       | "left" \|"center" \|"right" |         | false    | The alignment of the column.                    |
-| canBeFrozen | bool                        |         | false    | If true, the column can be frozen               |
-| canSort     | bool                        |         | false    | If true, the column can be sortable.            |
+| Name        | Type                        | Default | Required | Description                                           |
+| ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
+| accessor    | string                      |         | true     | The key of the column, it should be unique.           |
+| align       | "left" \|"center" \|"right" |         | false    | The alignment of the column.                          |
+| Body        | ReactElement                |         | true     | The component to render the column body cell.         |
+| canBeFrozen | bool                        |         | false    | If true, the column can be frozen                     |
+| canSort     | bool                        |         | false    | If true, the column can be sortable.                  |
+| Header      | ReactElement                |         | true     | The component to render the column header cell.       |
+| headerTip   | string                      |         | false    | The tip title text when the mouse is over the header. |
+| Footer      | ReactElement                |         | false    | The component to render the column footer cell.       |
+| minWidth    | number                      | 120     | false    | The minimum width of cells.                           |
+| width       | number                      |         | false    | The fixed width of cells.                             |
 
 <h5>Hook Props</h5>
 
@@ -295,10 +298,10 @@ import CheckBox from '@symply.io/basic-components/CheckBox/CheckBox';
 
 <h5>Props</h5>
 
-| Name     | Type                | Default | Required | Description                                                  |
-| -------- | ------------------- | ------- | -------- | ------------------------------------------------------------ |
-| label    | string \| ReactNode |         | true     | The label of the checkbox.                                   |
-| onChange | func                |         | true     | Callback fired when the `checkbox` value is changed.<br />**Signature:**<br/>`function(value: boolean) => void`<br/>*value:* The value of the `checkbox` element. |
+| Name     | Type                   | Default | Required | Description                                                  |
+| -------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
+| label    | string \| ReactElement |         | true     | The label of the checkbox.                                   |
+| onChange | func                   |         | true     | Callback fired when the `checkbox` value is changed.<br />**Signature:**<br/>`function(value: boolean) => void`<br/>*value:* The value of the `checkbox` element. |
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -53,9 +53,9 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.4.2",
-    "@mui/material": "^5.4.2",
-    "@mui/system": "^5.4.2",
+    "@mui/icons-material": "~5.4.2",
+    "@mui/material": "~5.4.2",
+    "@mui/system": "~5.4.2",
     "@reach/router": "^1.3.4",
     "color-alpha": "^1.1.3",
     "react-player": "^2.9.0",

package/utils/uuid.d.ts

@@ -0,0 +1,2 @@
+declare function generateUUID(length?: number): string;
+export default generateUUID;

package/utils/uuid.js

@@ -0,0 +1,56 @@
+function generateUUID(length) {
+    if (length === void 0) { length = 32; }
+    if (length < 16)
+        throw new Error("Length should be equal or greater than 16");
+    function UUID() {
+        this.chars = [
+            "a",
+            "1",
+            "2",
+            "b",
+            "3",
+            "4",
+            "c",
+            "5",
+            "6",
+            "d",
+            "7",
+            "8",
+            "e",
+            "9",
+            "0",
+            "f"
+        ];
+        this.rand = "";
+    }
+    UUID.prototype = {
+        getRandomUInt: function () {
+            var s = "";
+            this.chars.sort(function () {
+                return Date.now() % (Math.random() * length * 23) >
+                    Math.random() * 7 * length
+                    ? -1
+                    : 1;
+            });
+            for (var i = 0; i < this.chars.length; i += 1) {
+                s = s.concat(this.chars[i]);
+            }
+            return s;
+        },
+        getRandomChars: function () {
+            this.rand = Date.now().toString(16).concat(this.getRandomUInt());
+            return this.rand;
+        },
+        generate: function () {
+            var id = Date.now().toString();
+            var idLen = id.length;
+            this.getRandomChars();
+            for (var i = 0; i < length - idLen; i += 1) {
+                id = id.concat(this.rand.charAt(Math.floor(Math.random() * this.rand.length)));
+            }
+            return id.toString();
+        }
+    };
+    return new UUID().generate();
+}
+export default generateUUID;