@symply.io/basic-components 1.6.6-beta.1 → 1.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/DataTable/TableFooter.js +18 -11
  2. package/DataTable/TableHeader.js +16 -9
  3. package/DataTable/index.js +3 -3
  4. package/DataTable/types.d.ts +6 -2
  5. package/FormSelector/MultipleSelector.d.ts +1 -1
  6. package/FormSelector/MultipleSelector.js +6 -8
  7. package/FormSelector/SimpleSelector.d.ts +1 -1
  8. package/FormSelector/SimpleSelector.js +3 -3
  9. package/FormSelector/types.d.ts +8 -9
  10. package/README.md +18 -15
  11. package/package.json +1 -1
package/DataTable/TableFooter.js CHANGED
@@ -17,10 +17,10 @@ import TableCell from "@mui/material/TableCell";
17
17
  import useMediaQuery from "@mui/material/useMediaQuery";
18
18
  import useTheme from "@mui/material/styles/useTheme";
19
19
  function TableFooter(props) {
20
- var footers = props.footers, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
20
+ var _a = props.footers, footers = _a === void 0 ? [] : _a, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
21
21
  var theme = useTheme();
22
22
  var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
23
- var _a = useMemo(function () {
23
+ var _b = useMemo(function () {
24
24
  if (isUpMd && !noData) {
25
25
  var left = footers.filter(function (f) { return f.fixable === "left"; });
26
26
  var right = footers.filter(function (f) { return f.fixable === "right"; });
@@ -30,15 +30,19 @@ function TableFooter(props) {
30
30
  else {
31
31
  return [[], footers, []];
32
32
  }
33
- }, [isUpMd, noData, footers]), fixedLeftFooters = _a[0], dynamicFooters = _a[1], fixedRightFooters = _a[2];
34
- return (_jsx(Footer, __assign({ sx: { position: "sticky", bottom: "-1px", zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftFooters.map(function (footer, index) {
33
+ }, [isUpMd, noData, footers]), fixedLeftFooters = _b[0], dynamicFooters = _b[1], fixedRightFooters = _b[2];
34
+ return (_jsx(Footer, __assign({ sx: { position: "sticky", bottom: "-1px", zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: {
35
+ backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
36
+ color: "".concat(footerTextColor || "inherit", " !important"),
37
+ } }, { children: [fixedLeftFooters.map(function (footer, index) {
35
38
  var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
36
39
  var left = fixedLeftFooters
37
40
  .slice(0, index)
38
41
  .reduce(function (w, t) { return w + (t.width || 0); }, 0);
39
42
  return (_jsx(TableCell, __assign({ align: align, sx: {
40
43
  position: "sticky",
41
- backgroundColor: "#eaf0f6",
44
+ backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
45
+ color: "".concat(footerTextColor || "inherit", " !important"),
42
46
  zIndex: 10,
43
47
  left: left,
44
48
  width: width,
@@ -53,16 +57,18 @@ function TableFooter(props) {
53
57
  transform: "translateX(100%)",
54
58
  transition: "box-shadow .3s",
55
59
  content: "''",
56
- boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
60
+ boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
57
61
  }
58
- : undefined
62
+ : undefined,
59
63
  } }, { children: cloneElement(Cell) }), accessor));
60
64
  }), dynamicFooters.map(function (footer) {
61
65
  var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
62
66
  return (_jsx(TableCell, __assign({ align: align, sx: {
63
67
  zIndex: 9,
64
68
  width: width,
65
- userSelect: "none"
69
+ userSelect: "none",
70
+ backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
71
+ color: "".concat(footerTextColor || "inherit", " !important"),
66
72
  } }, { children: cloneElement(Cell) }), accessor));
67
73
  }), fixedRightFooters.map(function (footer, index) {
68
74
  var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
@@ -74,7 +80,8 @@ function TableFooter(props) {
74
80
  zIndex: 10,
75
81
  width: width,
76
82
  right: right,
77
- backgroundColor: "#eaf0f6",
83
+ backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
84
+ color: "".concat(footerTextColor || "inherit", " !important"),
78
85
  userSelect: "none",
79
86
  "&::after": index === 0 && rightShadowVisible
80
87
  ? {
@@ -86,9 +93,9 @@ function TableFooter(props) {
86
93
  transform: "translateX(-100%)",
87
94
  transition: "box-shadow .3s",
88
95
  content: "''",
89
- boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
96
+ boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
90
97
  }
91
- : undefined
98
+ : undefined,
92
99
  } }, { children: cloneElement(Cell) }), accessor));
93
100
  })] })) })));
94
101
  }
package/DataTable/TableHeader.js CHANGED
@@ -17,7 +17,7 @@ import TableCell from "@mui/material/TableCell";
17
17
  import useMediaQuery from "@mui/material/useMediaQuery";
18
18
  import useTheme from "@mui/material/styles/useTheme";
19
19
  function TableHeader(props) {
20
- var headers = props.headers, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
20
+ var headers = props.headers, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
21
21
  var theme = useTheme();
22
22
  var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
23
23
  var _a = useMemo(function () {
@@ -31,14 +31,18 @@ function TableHeader(props) {
31
31
  return [[], headers, []];
32
32
  }
33
33
  }, [isUpMd, noData, headers]), fixedLeftHeaders = _a[0], dynamicHeaders = _a[1], fixedRightHeaders = _a[2];
34
- return (_jsx(TableHead, __assign({ sx: { position: "sticky", top: 0, zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftHeaders.map(function (header, index) {
34
+ return (_jsx(TableHead, __assign({ sx: { position: "sticky", top: 0, zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: {
35
+ backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
36
+ color: "".concat(headerTextColor || "inherit", " !important"),
37
+ } }, { children: [fixedLeftHeaders.map(function (header, index) {
35
38
  var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
36
39
  var left = fixedLeftHeaders
37
40
  .slice(0, index)
38
41
  .reduce(function (w, t) { return w + (t.width || 0); }, 0);
39
42
  return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
40
43
  position: "sticky",
41
- backgroundColor: "#eaf0f6",
44
+ backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
45
+ color: "".concat(headerTextColor || "inherit", " !important"),
42
46
  zIndex: 10,
43
47
  width: width,
44
48
  left: left,
@@ -54,9 +58,9 @@ function TableHeader(props) {
54
58
  transform: "translateX(100%)",
55
59
  transition: "box-shadow .3s",
56
60
  content: "''",
57
- boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
61
+ boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
58
62
  }
59
- : undefined
63
+ : undefined,
60
64
  }, onClick: function () {
61
65
  onSort({ accessor: accessor });
62
66
  } }, { children: cloneElement(Cell) }), accessor));
@@ -66,7 +70,9 @@ function TableHeader(props) {
66
70
  width: width,
67
71
  zIndex: 9,
68
72
  userSelect: "none",
69
- cursor: sortable ? "pointer" : "default"
73
+ cursor: sortable ? "pointer" : "default",
74
+ backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
75
+ color: "".concat(headerTextColor || "inherit", " !important"),
70
76
  }, onClick: function () {
71
77
  onSort({ accessor: accessor });
72
78
  } }, { children: cloneElement(Cell) }), accessor));
@@ -77,7 +83,8 @@ function TableHeader(props) {
77
83
  .reduce(function (w, t) { return w + (t.width || 0); }, 0);
78
84
  return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
79
85
  position: "sticky",
80
- backgroundColor: "#eaf0f6",
86
+ backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
87
+ color: "".concat(headerTextColor || "inherit", " !important"),
81
88
  zIndex: 10,
82
89
  width: width,
83
90
  right: right,
@@ -93,9 +100,9 @@ function TableHeader(props) {
93
100
  transform: "translateX(-100%)",
94
101
  transition: "box-shadow .3s",
95
102
  content: "''",
96
- boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
103
+ boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
97
104
  }
98
- : undefined
105
+ : undefined,
99
106
  }, onClick: function () {
100
107
  onSort({ accessor: accessor });
101
108
  } }, { children: cloneElement(Cell) }), accessor));
package/DataTable/index.js CHANGED
@@ -20,7 +20,7 @@ import TableBody from "./TableBody";
20
20
  import TableHeader from "./TableHeader";
21
21
  import TableFooter from "./TableFooter";
22
22
  function DataTable(props) {
23
- var _a = props.columns, columns = _a === void 0 ? [] : _a, _b = props.rows, rows = _b === void 0 ? [] : _b, _c = props.headers, headers = _c === void 0 ? [] : _c, _d = props.footers, footers = _d === void 0 ? [] : _d, _e = props.noDataText, noDataText = _e === void 0 ? "No Data!" : _e, dense = props.dense, stickyHeader = props.stickyHeader, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
23
+ var _a = props.columns, columns = _a === void 0 ? [] : _a, _b = props.rows, rows = _b === void 0 ? [] : _b, _c = props.headers, headers = _c === void 0 ? [] : _c, _d = props.footers, footers = _d === void 0 ? [] : _d, _e = props.noDataText, noDataText = _e === void 0 ? "No Data!" : _e, dense = props.dense, stickyHeader = props.stickyHeader, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
24
24
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
25
25
  var tableRef = useRef(null);
26
26
  var _f = useState(false), leftShadowVisible = _f[0], setLeftShadowVisible = _f[1];
@@ -54,8 +54,8 @@ function DataTable(props) {
54
54
  borderStyle: "solid",
55
55
  borderRadius: "4px",
56
56
  borderCollapse: "unset !important",
57
- transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
58
- } }, { 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, onContextMenu: onContextMenu, onCustomizeRowBgColor: onCustomizeRowBgColor, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
57
+ transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
58
+ } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, headerBgColor: headerBgColor, headerTextColor: headerTextColor, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onContextMenu: onContextMenu, onCustomizeRowBgColor: onCustomizeRowBgColor, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), (footers === null || footers === void 0 ? void 0 : footers.length) > 0 ? (_jsx(TableFooter, { footers: footers, footerBgColor: footerBgColor, footerTextColor: footerTextColor, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
59
59
  }
60
60
  export default DataTable;
61
61
  export * from "./types";
package/DataTable/types.d.ts CHANGED
@@ -52,6 +52,8 @@ export declare type UserTableReturns<RowProps extends KvProps, ExtendedProps ext
52
52
  };
53
53
  export declare type TableHeaderProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
54
54
  headers: Array<TableHeaderCellProps<RowProps, ExtendedProps>>;
55
+ headerBgColor?: CSSProperties["color"];
56
+ headerTextColor?: CSSProperties["color"];
55
57
  noData?: boolean;
56
58
  leftShadowVisible?: boolean;
57
59
  rightShadowVisible?: boolean;
@@ -64,7 +66,7 @@ export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps exten
64
66
  noDataText?: string;
65
67
  onRowClick?: (row: RowProps) => unknown;
66
68
  onContextMenu?: (event: MouseEvent<HTMLTableRowElement>, row: RowProps) => unknown;
67
- onCustomizeRowBgColor?: ({ row, columns }: {
69
+ onCustomizeRowBgColor?: ({ row, columns, }: {
68
70
  row: RowProps;
69
71
  columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
70
72
  }) => CustomRowBgColor;
@@ -74,7 +76,9 @@ export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps ex
74
76
  rowIndex: number;
75
77
  };
76
78
  export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
77
- footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
79
+ footers?: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
80
+ footerBgColor?: CSSProperties["color"];
81
+ footerTextColor?: CSSProperties["color"];
78
82
  noData?: boolean;
79
83
  leftShadowVisible?: boolean;
80
84
  rightShadowVisible?: boolean;
package/FormSelector/MultipleSelector.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { MultipleSelectorProps } from "./types";
2
- declare function MultipleSelector<T extends string | number>(props: MultipleSelectorProps<T>): import("react/jsx-runtime").JSX.Element;
2
+ declare function MultipleSelector(props: MultipleSelectorProps): import("react/jsx-runtime").JSX.Element;
3
3
  export default MultipleSelector;
package/FormSelector/MultipleSelector.js CHANGED
@@ -20,29 +20,27 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
23
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import Select from "@mui/material/Select";
25
25
  import Tooltip from "@mui/material/Tooltip";
26
- import Checkbox from "@mui/material/Checkbox";
27
26
  import MenuItem from "@mui/material/MenuItem";
28
27
  import InputLabel from "@mui/material/InputLabel";
29
28
  import FormControl from "@mui/material/FormControl";
30
- import ListItemText from "@mui/material/ListItemText";
31
29
  import FormHelperText from "@mui/material/FormHelperText";
32
30
  import ThemeProvider from "@mui/material/styles/ThemeProvider";
33
31
  import useInteractions from "./useInteractions";
34
32
  import useCustomTheme from "../useCustomTheme";
35
33
  function MultipleSelector(props) {
36
- var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, name = props.name, tooltip = props.tooltip, _b = props.required, required = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.multiple, multiple = _d === void 0 ? false : _d, _e = props.showHelperText, showHelperText = _e === void 0 ? false : _e, helperText = props.helperText, _f = props.options, options = _f === void 0 ? [] : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _g = props.showCheckmarks, showCheckmarks = _g === void 0 ? false : _g, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "name", "tooltip", "required", "disabled", "multiple", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "showCheckmarks", "onChange"]);
34
+ var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, name = props.name, tooltip = props.tooltip, _b = props.required, required = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.multiple, multiple = _d === void 0 ? false : _d, _e = props.showHelperText, showHelperText = _e === void 0 ? false : _e, helperText = props.helperText, _f = props.options, options = _f === void 0 ? [] : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "name", "tooltip", "required", "disabled", "multiple", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
37
35
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
38
- var _h = useInteractions(), tooltipOpen = _h.tooltipOpen, onOpenTooltip = _h.onOpenTooltip, onCloseTooltip = _h.onCloseTooltip;
36
+ var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.onCloseTooltip;
39
37
  return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }))), _jsx(Select, __assign({ disabled: disabled, required: required, value: value, multiple: true, name: name, onChange: function (event) {
40
38
  var _a;
41
39
  event.preventDefault();
42
40
  onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
43
41
  }, inputProps: {
44
42
  onFocus: onOpenTooltip,
45
- onBlur: onCloseTooltip,
43
+ onBlur: onCloseTooltip
46
44
  }, label: label, renderValue: multiple
47
45
  ? function (selectedValues) {
48
46
  return options
@@ -55,8 +53,8 @@ function MultipleSelector(props) {
55
53
  .join("; ");
56
54
  }
57
55
  : undefined }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
58
- var label = option.label, v = option.value;
59
- return (_jsxs(MenuItem, __assign({ value: v }, { children: [showCheckmarks ? (_jsx(Checkbox, { checked: !!value.includes(v) })) : (_jsx(_Fragment, {})), _jsx(ListItemText, { primary: label })] }), v));
56
+ var _a = option, label = _a.label, value = _a.value;
57
+ return (_jsx(MenuItem, __assign({ value: value }, { children: label }), value));
60
58
  })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
61
59
  }
62
60
  export default MultipleSelector;
package/FormSelector/SimpleSelector.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { SimpleSelectorProps } from "./types";
2
- declare function SimpleSelector<T extends string | number>(props: SimpleSelectorProps<T>): import("react/jsx-runtime").JSX.Element;
2
+ declare function SimpleSelector(props: SimpleSelectorProps): import("react/jsx-runtime").JSX.Element;
3
3
  export default SimpleSelector;
package/FormSelector/SimpleSelector.js CHANGED
@@ -40,10 +40,10 @@ function SimpleSelector(props) {
40
40
  onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
41
41
  }, inputProps: {
42
42
  onFocus: onOpenTooltip,
43
- onBlur: onCloseTooltip,
43
+ onBlur: onCloseTooltip
44
44
  }, label: label }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
45
- var label = option.label, v = option.value, disabled = option.disabled;
46
- return (_jsx(MenuItem, __assign({ value: v, disabled: disabled }, { children: label }), v));
45
+ var label = option.label, value = option.value, disabled = option.disabled;
46
+ return (_jsx(MenuItem, __assign({ value: value, disabled: disabled }, { children: label }), value));
47
47
  })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
48
48
  }
49
49
  export default SimpleSelector;
package/FormSelector/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ReactNode, CSSProperties } from "react";
2
2
  import { SelectProps } from "@mui/material/Select";
3
3
  import { FormControlProps } from "@mui/material/FormControl";
4
- interface SelectorBaseProps<T extends string | number> extends Omit<FormControlProps, "onChange"> {
4
+ interface SelectorBaseProps extends Omit<FormControlProps, "onChange"> {
5
5
  label?: string;
6
6
  name?: string;
7
7
  tooltip?: ReactNode;
@@ -12,17 +12,16 @@ interface SelectorBaseProps<T extends string | number> extends Omit<FormControlP
12
12
  secondaryColor?: CSSProperties["color"];
13
13
  options: Array<{
14
14
  label: string;
15
- value: T;
15
+ value: string | number;
16
16
  disabled?: boolean;
17
17
  }>;
18
18
  }
19
- export interface SimpleSelectorProps<T extends string | number> extends SelectorBaseProps<T> {
20
- value: T;
21
- onChange: (value?: string | T) => void;
19
+ export interface SimpleSelectorProps extends SelectorBaseProps {
20
+ value: number | string;
21
+ onChange: (value?: string | number) => void;
22
22
  }
23
- export interface MultipleSelectorProps<T extends string | number> extends SelectorBaseProps<T> {
24
- value: Array<T>;
25
- showCheckmarks?: boolean;
26
- onChange: (value?: string | Array<T>) => void;
23
+ export interface MultipleSelectorProps extends SelectorBaseProps {
24
+ value: Array<number> | Array<string>;
25
+ onChange: (value?: string | Array<number> | Array<string>) => void;
27
26
  }
28
27
  export {};
package/README.md CHANGED
@@ -374,7 +374,11 @@ import DataTable, { useDataTable } from '@symply.io/basic-components/DataTable';
374
374
  | columns | Array\<TableBodyCellProps\> | | true | The cells for the body. (from the hook) |
375
375
  | dense | bool | | false | If `true` the table size/density would be tight. |
376
376
  | footers | Array\<TableFooterCellProps> | [] | false | The cells for the footer. (from the hook) |
377
+ | footerBgColor | CSSProperties["color"] | | false | Customized footer background color. |
378
+ | footerTextColor | CSSProperties["color"] | | false | Customized footer text color. |
377
379
  | headers | Array\<TableHeaderCellProps\> | | true | The cells for the header. (from the hook) |
380
+ | headerBgColor | CSSProperties["color"] | | false | Customized header background color. |
381
+ | headerTextColor | CSSProperties["color"] | | false | Customized header text color. |
378
382
  | noDataText | string | 'No Data!' | false | The text when no data rendered. |
379
383
  | onContextMenu | func | | false | The function for row right-clicking.<br />**Signature:**<br/>`function(event: MouseEvent, row: RowProps) => unknown` |
380
384
  | onCustomizeRowBgColor | func | | false | The function for customizing the row background color.<br />**Signature:**<br/>`function(props: {row: RowProps, columns: Array\<ColumnProps\>}) => {normal?: HexColor;<br/> hover?: HexColor;<br/>}` |
@@ -573,11 +577,11 @@ import { MultipleSelector } from '@symply.io/basic-components/FormRadioGroup';
573
577
 
574
578
  <h5>Selector Option Props</h5>
575
579
 
576
- | Name | Type | Default | Required | Description |
577
- | -------- | -------------------------- | ------- | -------- | ---------------------------------------- |
578
- | disabled | bool | false | false | If `true`, the opiton would be disabled. |
579
- | label | string | | true | The label of the option. |
580
- | value | T extends number \| string | | | The value of the option. |
580
+ | Name | Type | Default | Required | Description |
581
+ | -------- | ------------------------ | ------- | -------- | ---------------------------------------- |
582
+ | disabled | bool | false | false | If `true`, the opiton would be disabled. |
583
+ | label | string | | true | The label of the option. |
584
+ | value | string \| number \| bool | | true | The value of the option. |
581
585
 
582
586
  <h5>Base Props</h5>
583
587
 
@@ -589,23 +593,22 @@ It is extended from `@mui/material/FormControl`, so it includes all properties o
589
593
  | label | string | | false | The label of `Select` element. |
590
594
  | multiple | bool | false | false | If `true`, you can select more than 1 option. |
591
595
  | options | Array\<IRadioOption\> | | true | The radio options. See the **Selector Option Props** above. |
592
- | showHelperText | bool | false | false | If `true`, show the helper text. |
596
+ | showHelperText | bool | false | False | If `true`, show the helper text. |
593
597
  | tooltip | string | | false | A tooltip for the `Select` element. |
594
598
 
595
599
  <h5>Simple Selector Props</h5> Extended from the Base Props
596
600
 
597
- | Name | Type | Default | Required | Description |
598
- | -------- | -------------------------- | ------- | -------- | ------------------------------------------------------------ |
599
- | onChange | func | | true | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(value: string | number) => void`<br/>*value:* The value of the `Select` element. |
600
- | value | T extends number \| string | | true | The value of the `Select` element. |
601
+ | Name | Type | Default | Required | Description |
602
+ | -------- | ---------------- | ------- | -------- | ------------------------------------------------------------ |
603
+ | onChange | func | | true | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(value: string | number) => void`<br/>*value:* The value of the `Select` element. |
604
+ | value | number \| string | | True | The value of the `Select` element. |
601
605
 
602
606
  <h5>Multiple Selector Props</h5> Extended from the Base Props
603
607
 
604
- | Name | Type | Default | Required | Description |
605
- | -------------- | ----------------------------------- | ------- | -------- | ------------------------------------------------------------ |
606
- | onChange | func | | true | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(value: Array<number> | Array<string>) => void`<br/>*value:* The value of the `Select` element. |
607
- | showCheckmarks | bool | false | false | If `true` the option will be shown with a checkbox. |
608
- | value | Array\<T extends number \| string\> | | | The value of the `Select` element. |
608
+ | Name | Type | Default | Required | Description |
609
+ | -------- | ---------------------------------- | ------- | -------- | ------------------------------------------------------------ |
610
+ | onChange | func | | true | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(value: Array<number> | Array<string>) => void`<br/>*value:* The value of the `Select` element. |
611
+ | value | Array\<number\> \| Array\<string\> | | | The value of the `Select` element. |
609
612
 
610
613
 
611
614
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.6.6-beta.1",
3
+ "version": "1.6.6",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",