@symply.io/basic-components 1.1.4 → 1.2.0

package/Autocomplete/index.js

@@ -27,10 +27,10 @@ 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, required = props.required, rest = __rest(props, ["size", "value", "options", "multiple", "primaryColor", "secondaryColor", "onChange", "required"]);
+    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, required = props.required, limitTags = props.limitTags, rest = __rest(props, ["size", "value", "options", "multiple", "primaryColor", "secondaryColor", "onChange", "required", "limitTags"]);
     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 (_, val) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: limitTags !== null && limitTags !== void 0 ? limitTags : -1, 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, { required: required, size: size, inputProps: __assign(__assign({}, params.inputProps), { required: required && (Array.isArray(value) ? value.length === 0 : !value) }) }))); } }) })));
 }

package/Autocomplete/types.d.ts

@@ -8,6 +8,7 @@ export declare type AutocompleteOptionType<T = {
 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" | "value"> {
     multiple?: multiple;
+    limitTags?: number;
     options: Array<AutocompleteOptionType<T>>;
     value: AutocompleteValueType<T, multiple>;
     primaryColor?: CSSProperties["color"];

package/AutocompleteWithFilter/index.js

@@ -31,7 +31,7 @@ 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, required = props.required, rest = __rest(props, ["size", "value", "options", "multiple", "disableCloseOnSelect", "primaryColor", "secondaryColor", "onChange", "required"]);
+    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, required = props.required, limitTags = props.limitTags, rest = __rest(props, ["size", "value", "options", "multiple", "disableCloseOnSelect", "primaryColor", "secondaryColor", "onChange", "required", "limitTags"]);
     var filter = createFilterOptions({
         ignoreCase: true,
         ignoreAccents: true,
@@ -39,7 +39,7 @@ 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 (_, val) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: limitTags !== null && limitTags !== void 0 ? limitTags : -1, options: options, multiple: multiple, filterOptions: filter, onChange: function (_, val) {
                 onChange(val);
             }, value: value, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
                 return option.label || "";

package/AutocompleteWithFilter/types.d.ts

@@ -8,6 +8,7 @@ export interface AutocompleteWithFilterProps<T, multiple extends boolean | undef
     value: AutocompleteWithFilterlValueType<T, multiple>;
     options: Array<AutocompleteWithFilterOptionType<T>>;
     disableCloseOnSelect?: boolean;
+    limitTags?: number;
     multiple?: multiple;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/DataTable/index.d.ts

@@ -1,4 +1,5 @@
 import { DataTableProps, KvProps } from "./types";
 declare function DataTable<RowProps extends KvProps, ExtendedProps extends KvProps>(props: DataTableProps<RowProps, ExtendedProps>): JSX.Element;
 export default DataTable;
+export * from "./types";
 export { default as useDataTable } from "./useTable";

package/DataTable/index.js

@@ -57,4 +57,5 @@ function DataTable(props) {
             } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onCustomizeRowBgColor: onCustomizeRowBgColor, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
 }
 export default DataTable;
+export * from "./types";
 export { default as useDataTable } from "./useTable";

package/README.md

@@ -15,7 +15,6 @@
   - [Autocomplete](#autocomplete)
   - [AutocompleteWithFilter](#autocompletewithfilter)
   - [BasicModal](#basicmodal)
-  - [BasicTable [⚠️Deprecated]](#basictable)
   - [BreadCrumbs](#breadcrumbs)
   - [CheckBox](#checkbox)
   - [CheckBoxGroup](#checkboxgroup)
@@ -127,12 +126,13 @@ import Autocomplete from '@symply.io/basic-components/Autocomplete';
 
 <h5>Props</h5>
 
-| Name     | Type                   | Default | Required | Description                                                  |
-| -------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
-| multiple | bool                   | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
-| onChange | func                   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<IOption|string>|IOption|string|null) => void`<br/>*value:* The value of the `Input` element. |
-| options  | Array<IOption\|string> |         | true     | Array of suggestion options.                                 |
-| value    | string                 |         | true     | The value of the `Input` element.                            |
+| Name      | Type                   | Default | Required | Description                                                  |
+| --------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
+| limitTags | number                 | -1      | false    | The maximum number of tags that will be visible when not focused. Set `-1` to disable the limit. |
+| multiple  | bool                   | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
+| onChange  | func                   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<IOption|string>|IOption|string|null) => void`<br/>*value:* The value of the `Input` element. |
+| options   | Array<IOption\|string> |         | true     | Array of suggestion options.                                 |
+| value     | string                 |         | true     | The value of the `Input` element.                            |
 
 
 
@@ -162,6 +162,7 @@ import AutocompleteWithFilter from '@symply.io/basic-components/AutocompleteWith
 | Name                 | Type                   | Default | Required | Description                                                  |
 | -------------------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
 | disableCloseOnSelect | bool                   | false   | false    | If `true`, the popup won't close when a value is selected.   |
+| limitTags            | number                 | -1      | false    | The maximum number of tags that will be visible when not focused. Set `-1` to disable the limit. |
 | multiple             | bool                   | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
 | onChange             | func                   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<IOption|string>|IOption|string|null) => void`<br/>*value:* The value of the `Input` element. |
 | options              | Array<IOption\|string> |         | true     | Array of suggestion options.                                 |
@@ -203,66 +204,6 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
 
 
 
-<h3>BasicTable</h3>
-
-Reusable table component
-
-⚠️ This component will be deprecated in the next release. Please use [`DataTable`](#datatable) instead.
-
-<h5>Import</h5>
-
-```tsx
-import { BasicTable, useTable } from '@symply.io/basic-components';
-// or 
-import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable'; 
-```
-
-<h5>Column Props (IColumn)</h5>
-
-| 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>
-
-| Name          | Type                       | Default | Required | Description                                 |
-| ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
-| columns       | Array\<IColumn\>           |         | true     | table columns                               |
-| data          | Array<{ [name]: unknown }> |         | true     | table data/rows                             |
-| disableSortBy | bool                       |         | false    | If true, the whole table can't be sortable. |
-| initialState  | { sortBy?: SortByProps }   |         | false    | Set the initial states                      |
-| onSort        | func                       |         | false    | The function for sorting rows.              |
-
-<h5>Hook Returns</h5>
-
-| Name    | Type                 | Description               |
-| ------- | -------------------- | ------------------------- |
-| headers | Array\<IHeader\>     | The cells for the header. |
-| columns | Array\<IBodyColumn\> | The cells for the body.   |
-| footers | Array\<IFooter>      | The cells for the footer. |
-| rows    | Array<IRow\>         | The rows for the table.   |
-
-<h5>Component Props</h5>
-
-| Name       | Type                 | Default    | Required | Description                               |
-| ---------- | -------------------- | ---------- | -------- | ----------------------------------------- |
-| headers    | Array\<IHeader\>     |            | true     | The cells for the header. (from the hook) |
-| columns    | Array\<IBodyColumn\> |            | true     | The cells for the body. (from the hook)   |
-| footers    | Array\<IFooter>      | []         | false    | The cells for the footer. (from the hook) |
-| noDataText | string               | 'No Data!' | false    | The text when no data rendered.           |
-| rows       | Array<IRow\>         |            | true     | The rows for the table. (from the hook)   |
-
-
-
 <h3>BreadCrumbs</h3>
 
 A list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".

package/index.d.ts

@@ -2,7 +2,6 @@ export * from "./AlertDialog";
 export * from "./Autocomplete";
 export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
-export * from "./BasicTable";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./Copyright";
@@ -31,7 +30,6 @@ export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
 export { default as BasicModal } from "./BasicModal";
-export { default as BasicTable } from "./BasicTable";
 export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as Copyright } from "./Copyright";
 export { default as DataTable } from "./DataTable";

package/index.js

@@ -2,7 +2,6 @@ export * from "./AlertDialog";
 export * from "./Autocomplete";
 export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
-export * from "./BasicTable";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./Copyright";
@@ -31,7 +30,6 @@ export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
 export { default as BasicModal } from "./BasicModal";
-export { default as BasicTable } from "./BasicTable";
 export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as Copyright } from "./Copyright";
 export { default as DataTable } from "./DataTable";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",

package/BasicTable/TableBody.d.ts

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

package/BasicTable/TableBody.js

@@ -1,50 +0,0 @@
-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 useTheme from "@mui/material/styles/useTheme";
-import TableBodyRow from "./TableBodyRow";
-function BasicTableBody(props, ref) {
-    var rows = props.rows, columns = props.columns, rowHeight = props.rowHeight, forFrozen = props.forFrozen, noDataText = props.noDataText, onRowClick = props.onRowClick;
-    var theme = useTheme();
-    return (_jsx(Grid, __assign({ item: true, sx: {
-            maxHeight: "41vh",
-            overflowY: "auto",
-            display: "block",
-            minWidth: "100%",
-            scrollbarWidth: forFrozen ? "none" : "initial",
-            "&::-webkit-scrollbar": {
-                width: forFrozen ? 0 : "initial"
-            }
-        } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows.length > 0 ? (rows.map(function (row, index) {
-                return (_jsx(TableBodyRow, { row: row, rows: rows, rowHeight: rowHeight, forFrozen: forFrozen, columns: columns, onRowClick: onRowClick }, "BasicTable_".concat(index)));
-            })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
-                    height: rowHeight || theme.spacing(7.5),
-                    borderBottomWidth: "thin",
-                    borderBottomColor: "#e5e5e5",
-                    borderBottomStyle: "solid",
-                    padding: theme.spacing(0.5, 0),
-                    minHeight: theme.spacing(5),
-                    "& :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: {
-                        paddingLeft: theme.spacing(0.625),
-                        paddingRight: theme.spacing(0.625)
-                    } }, { children: noDataText })) }))) })) })));
-}
-export default forwardRef(BasicTableBody);

package/BasicTable/TableBodyRow.d.ts

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

package/BasicTable/TableBodyRow.js

@@ -1,54 +0,0 @@
-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 colorAlpha from "color-alpha";
-import Grid from "@mui/material/Grid";
-import useTheme from "@mui/material/styles/useTheme";
-function BasicTableBodyRow(props) {
-    var row = props.row, rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, rowHeight = props.rowHeight, onRowClick = props.onRowClick;
-    var theme = useTheme();
-    return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
-            height: rowHeight || theme.spacing(7.5),
-            borderBottomWidth: "thin",
-            borderBottomColor: "#e5e5e5",
-            borderBottomStyle: "solid",
-            padding: theme.spacing(0.5, 0),
-            minHeight: theme.spacing(5),
-            "&:hover": {
-                cursor: !forFrozen && onRowClick ? "pointer" : "default",
-                backgroundColor: !forFrozen && onRowClick
-                    ? colorAlpha(theme.palette.primary.main, 0.1)
-                    : "initial"
-            },
-            "& :nth-of-last-type(1)": {
-                borderBottom: "none"
-            },
-            "& input": {
-                fontSize: "0.9rem",
-                fontWeight: 600
-            }
-        }, onClick: onRowClick
-            ? function () {
-                onRowClick(row);
-            }
-            : undefined }, { children: columns.map(function (col) {
-            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));
-        }) })));
-}
-export default BasicTableBodyRow;

package/BasicTable/TableFooter.d.ts

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

package/BasicTable/TableFooter.js

@@ -1,45 +0,0 @@
-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 useTheme from "@mui/material/styles/useTheme";
-function BasicTableFooter(props) {
-    var footers = props.footers;
-    var theme = useTheme();
-    return footers && footers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
-            backgroundColor: "#eaf0f6",
-            padding: theme.spacing(1.5, 0),
-            height: theme.spacing(6.25)
-        } }, { 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.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",
-                        textOverflow: "ellipsis",
-                        overflow: "hidden",
-                        userSelect: "none"
-                    } }, { children: cloneElement(Cell) }), accessor));
-            }) })) }))) : (_jsx(_Fragment, {}));
-}
-export default BasicTableFooter;

package/BasicTable/TableHeader.d.ts

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

package/BasicTable/TableHeader.js

@@ -1,48 +0,0 @@
-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 useTheme from "@mui/material/styles/useTheme";
-function BasicTableHeader(props) {
-    var headers = props.headers;
-    var theme = useTheme();
-    return headers && headers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
-            backgroundColor: "#eaf0f6",
-            padding: theme.spacing(1.5, 0),
-            height: theme.spacing(6.25)
-        } }, { 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, _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",
-                        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

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

package/BasicTable/index.js

@@ -1,88 +0,0 @@
-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 = 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, rowHeight = props.rowHeight, onRowClick = props.onRowClick;
-    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 _g = useScroll({
-        canFreeze: canFreeze
-    }), frozenWidth = _g.frozenWidth, setFrozenWidth = _g.setFrozenWidth, fixedRef = _g.fixedRef, dynamicRef = _g.dynamicRef;
-    useEffect(function () {
-        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 !== initialFrozenWidth_1) {
-                    return initialFrozenWidth_1;
-                }
-                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, rowHeight: rowHeight, onRowClick: onRowClick
-                                        ? function (row) {
-                                            onRowClick(row);
-                                        }
-                                        : undefined, 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 ? 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, rowHeight: rowHeight, noDataText: noDataText, columns: columns.filter(function (col) {
-                                        return isUpMd ? !col.canBeFrozen : true;
-                                    }), onRowClick: onRowClick
-                                        ? function (row) {
-                                            onRowClick(row);
-                                        }
-                                        : undefined }), _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

@@ -1,83 +0,0 @@
-import { ReactElement, CSSProperties } from "react";
-export declare type KvProps = Record<string, unknown>;
-interface SortByProps {
-    id: string;
-    desc: boolean;
-}
-interface InitialStateProps {
-    sortBy?: SortByProps;
-}
-export interface SortingProps {
-    field: string;
-    isSorted?: boolean;
-    descending?: boolean;
-}
-export interface UseScrollProps {
-    canFreeze?: boolean;
-}
-export declare type ColumnBaseProps = {
-    Header: ReactElement;
-    headerTip?: string;
-    Body: ReactElement;
-    Footer?: ReactElement;
-    align?: "left" | "center" | "right";
-    accessor: string;
-    canSort?: boolean;
-    canBeFrozen?: boolean;
-    minWidth?: number;
-    width?: number;
-};
-export declare type UseTableBaseProps<RowProps extends KvProps> = {
-    data: Array<RowProps>;
-    columns: Array<ColumnBaseProps>;
-    initialState?: InitialStateProps;
-    disableSortBy?: boolean;
-    onSort?: (props: SortingProps) => unknown;
-};
-export declare type UseTableProps<RowProps extends KvProps, ExtraProps extends KvProps> = UseTableBaseProps<RowProps> & ExtraProps;
-export declare type HeaderProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnBaseProps & Omit<UseTableProps<RowProps, ExtraProps>, keyof UseTableBaseProps<RowProps>> & {
-    Cell: ReactElement;
-    title: string;
-    canSort?: boolean;
-    onSort: (props: SortingProps) => unknown;
-};
-export declare type FooterProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnBaseProps & Omit<UseTableProps<RowProps, ExtraProps>, keyof UseTableBaseProps<RowProps>> & {
-    Cell: ReactElement;
-};
-export declare type ColumnProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnBaseProps & Omit<UseTableProps<RowProps, ExtraProps>, keyof UseTableBaseProps<RowProps>>;
-export declare type ColumnWithCellProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnProps<RowProps, ExtraProps> & {
-    Cell: ReactElement;
-};
-export declare type UserTableReturns<RowProps extends KvProps, ExtraProps extends KvProps> = {
-    headers: Array<HeaderProps<RowProps, ExtraProps>>;
-    footers: Array<FooterProps<RowProps, ExtraProps>>;
-    columns: Array<ColumnWithCellProps<RowProps, ExtraProps>>;
-    rows: Array<RowProps>;
-};
-export interface BasicTableHeaderProps<RowProps extends KvProps, ExtraProps extends KvProps> {
-    headers: Array<HeaderProps<RowProps, ExtraProps>>;
-}
-export interface BasicTableFooterProps<RowProps extends KvProps, ExtraProps extends KvProps> {
-    footers: Array<FooterProps<RowProps, ExtraProps>>;
-}
-export interface BasicTableBodyProps<RowProps extends KvProps, ExtraProps extends KvProps> {
-    columns: Array<ColumnWithCellProps<RowProps, ExtraProps>>;
-    rows: Array<RowProps>;
-    noDataText?: string;
-    forFrozen?: boolean;
-    rowHeight?: CSSProperties["height"];
-    onRowClick?: (row: RowProps) => unknown;
-}
-export interface BasicTableBodyRowProps<RowProps extends KvProps, ExtraProps extends KvProps> {
-    columns: Array<ColumnWithCellProps<RowProps, ExtraProps>>;
-    rows: Array<RowProps>;
-    row: RowProps;
-    forFrozen?: boolean;
-    rowHeight?: CSSProperties["height"];
-    onRowClick?: (row: RowProps) => unknown;
-}
-export declare type BasicTableProps<RowProps extends KvProps, ExtraProps extends KvProps> = BasicTableHeaderProps<RowProps, ExtraProps> & Omit<BasicTableBodyProps<RowProps, ExtraProps>, "forFrozen"> & Partial<BasicTableFooterProps<RowProps, ExtraProps>> & {
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
-};
-export {};

package/BasicTable/types.js

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

package/BasicTable/useScroll.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { UseScrollProps } from "./types";
-declare function useScroll(props: UseScrollProps): {
-    frozenWidth: number;
-    setFrozenWidth: import("react").Dispatch<import("react").SetStateAction<number>>;
-    fixedRef: import("react").RefObject<HTMLDivElement>;
-    dynamicRef: import("react").RefObject<HTMLDivElement>;
-};
-export default useScroll;

package/BasicTable/useScroll.js

@@ -1,76 +0,0 @@
-import { useState, useCallback, useEffect, useRef } from "react";
-import useTheme from "@mui/material/styles/useTheme";
-import useMediaQuery from "@mui/material/useMediaQuery";
-function useScroll(props) {
-    var canFreeze = props.canFreeze;
-    var theme = useTheme();
-    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    var _a = useState(0), frozenWidth = _a[0], setFrozenWidth = _a[1];
-    var fixedRef = useRef(null);
-    var dynamicRef = useRef(null);
-    var resetFrozenWidth = useCallback(function () {
-        setFrozenWidth(function (fw) {
-            var _a, _b;
-            if (fw !== ((_a = fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth)) {
-                return ((_b = fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || fw;
-            }
-            return fw;
-        });
-    }, [fixedRef]);
-    var onFixedScroll = useCallback(function (event) {
-        if (isUpMd && (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current)) {
-            var targetDiv = event.target;
-            dynamicRef.current.scrollTop = targetDiv.scrollTop;
-            resetFrozenWidth();
-        }
-    }, [dynamicRef, isUpMd, resetFrozenWidth]);
-    var onDynamicScroll = useCallback(function (event) {
-        if (isUpMd && (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current)) {
-            var targetDiv = event.target;
-            fixedRef.current.scrollTop = targetDiv.scrollTop;
-            resetFrozenWidth();
-        }
-    }, [fixedRef, isUpMd, resetFrozenWidth]);
-    var removeEventFixed = useCallback(function () {
-        if (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) {
-            fixedRef.current.removeEventListener("scroll", onFixedScroll);
-        }
-    }, [fixedRef, onFixedScroll]);
-    var removeEventDynamic = useCallback(function () {
-        if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
-            dynamicRef.current.removeEventListener("scroll", onDynamicScroll);
-        }
-    }, [dynamicRef, onDynamicScroll]);
-    var bindEventFixed = useCallback(function () {
-        removeEventDynamic();
-        if (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) {
-            fixedRef.current.addEventListener("scroll", onFixedScroll);
-        }
-    }, [fixedRef, onFixedScroll, removeEventDynamic]);
-    var bindEventDynamic = useCallback(function () {
-        removeEventFixed();
-        if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
-            dynamicRef.current.addEventListener("scroll", onDynamicScroll);
-        }
-    }, [dynamicRef, onDynamicScroll, removeEventFixed]);
-    useEffect(function () {
-        if (canFreeze) {
-            if (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) {
-                fixedRef.current.addEventListener("mouseover", bindEventFixed);
-            }
-            if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
-                dynamicRef.current.addEventListener("mouseover", bindEventDynamic);
-            }
-        }
-    }, [
-        bindEventDynamic,
-        bindEventFixed,
-        canFreeze,
-        dynamicRef,
-        fixedRef,
-        onDynamicScroll,
-        onFixedScroll
-    ]);
-    return { frozenWidth: frozenWidth, setFrozenWidth: setFrozenWidth, fixedRef: fixedRef, dynamicRef: dynamicRef };
-}
-export default useScroll;

package/BasicTable/useTable.d.ts

@@ -1,3 +0,0 @@
-import { UseTableProps, KvProps, UserTableReturns } from "./types";
-declare function useTable<T extends KvProps, F extends KvProps>(props: UseTableProps<T, F>): UserTableReturns<T, F>;
-export default useTable;

package/BasicTable/useTable.js

@@ -1,94 +0,0 @@
-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 { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, useState, useMemo, useCallback } from "react";
-function useTable(props) {
-    var data = props.data, columns = props.columns, initialState = props.initialState, disableSortBy = props.disableSortBy, onSort = props.onSort, rest = __rest(props, ["data", "columns", "initialState", "disableSortBy", "onSort"]);
-    if (!data) {
-        throw new Error('"data" is required but got null or undefined');
-    }
-    if (!columns) {
-        throw new Error('"columns" is required but got null or undefined');
-    }
-    var sortBy = (initialState || {}).sortBy;
-    var _a = sortBy || {}, id = _a.id, desc = _a.desc;
-    var _b = useState({
-        field: id || "",
-        isSorted: !!id,
-        descending: desc || false
-    }), sortingProps = _b[0], setSortingProps = _b[1];
-    var handleSort = useCallback(function (_a) {
-        var field = _a.field;
-        if (!disableSortBy) {
-            var newSortingProps = __assign({}, sortingProps);
-            if (field !== sortingProps.field || !sortingProps.isSorted) {
-                newSortingProps = { field: field, isSorted: true, descending: false };
-            }
-            else if (!sortingProps.descending) {
-                newSortingProps = __assign(__assign({}, sortingProps), { descending: true });
-            }
-            else {
-                newSortingProps = __assign(__assign({}, sortingProps), { isSorted: false });
-            }
-            if (onSort) {
-                onSort(__assign({}, newSortingProps));
-            }
-            setSortingProps(__assign({}, newSortingProps));
-        }
-    }, [disableSortBy, onSort, sortingProps]);
-    var renderSortingSymbol = useCallback(function (accessor) {
-        var field = sortingProps.field, isSorted = sortingProps.isSorted, descending = sortingProps.descending;
-        if (accessor !== field || !isSorted) {
-            return "";
-        }
-        if (!descending) {
-            return "↑";
-        }
-        return "↓";
-    }, [sortingProps]);
-    var rows = useMemo(function () { return data.map(function (d) { return (__assign({}, d)); }); }, [data]);
-    var cols = useMemo(function () {
-        return columns.map(function (col) {
-            var Body = col.Body;
-            return __assign(__assign({ Cell: cloneElement(Body || _jsx(_Fragment, {}), { column: col }) }, col), rest);
-        });
-    }, [columns, rest]);
-    var headers = useMemo(function () {
-        return columns.map(function (col) {
-            var Header = col.Header, accessor = col.accessor, canSort = col.canSort, headerTip = col.headerTip;
-            var canSortBy = canSort && !disableSortBy;
-            return __assign(__assign({ Cell: (_jsxs(_Fragment, { children: [cloneElement(Header || _jsx(_Fragment, {}), { column: col }), canSortBy && renderSortingSymbol(accessor)] })), title: "".concat(headerTip || "").concat(canSortBy ? " (Click to sort)" : ""), canSort: canSortBy, onSort: canSortBy ? handleSort : function () { } }, col), rest);
-        });
-    }, [columns, disableSortBy, handleSort, renderSortingSymbol, rest]);
-    var footers = useMemo(function () {
-        return columns.map(function (col) {
-            var Footer = col.Footer;
-            return __assign(__assign({ Cell: cloneElement(Footer || _jsx(_Fragment, {}), {
-                    column: col,
-                    rows: rows
-                }) }, col), rest);
-        });
-    }, [columns, rest, rows]);
-    return { headers: headers, footers: footers, columns: cols, rows: rows };
-}
-export default useTable;