@symply.io/basic-components 1.6.6-beta.2 → 1.6.7-alpha.2

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 +12 -9
  2. package/DataTable/TableHeader.js +10 -7
  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 +14 -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,8 +30,11 @@ 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)
@@ -53,16 +56,16 @@ function TableFooter(props) {
53
56
  transform: "translateX(100%)",
54
57
  transition: "box-shadow .3s",
55
58
  content: "''",
56
- boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
59
+ boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
57
60
  }
58
- : undefined
61
+ : undefined,
59
62
  } }, { children: cloneElement(Cell) }), accessor));
60
63
  }), dynamicFooters.map(function (footer) {
61
64
  var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
62
65
  return (_jsx(TableCell, __assign({ align: align, sx: {
63
66
  zIndex: 9,
64
67
  width: width,
65
- userSelect: "none"
68
+ userSelect: "none",
66
69
  } }, { children: cloneElement(Cell) }), accessor));
67
70
  }), fixedRightFooters.map(function (footer, index) {
68
71
  var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
@@ -86,9 +89,9 @@ function TableFooter(props) {
86
89
  transform: "translateX(-100%)",
87
90
  transition: "box-shadow .3s",
88
91
  content: "''",
89
- boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
92
+ boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
90
93
  }
91
- : undefined
94
+ : undefined,
92
95
  } }, { children: cloneElement(Cell) }), accessor));
93
96
  })] })) })));
94
97
  }
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,7 +31,10 @@ 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)
@@ -54,9 +57,9 @@ function TableHeader(props) {
54
57
  transform: "translateX(100%)",
55
58
  transition: "box-shadow .3s",
56
59
  content: "''",
57
- 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)",
58
61
  }
59
- : undefined
62
+ : undefined,
60
63
  }, onClick: function () {
61
64
  onSort({ accessor: accessor });
62
65
  } }, { children: cloneElement(Cell) }), accessor));
@@ -66,7 +69,7 @@ function TableHeader(props) {
66
69
  width: width,
67
70
  zIndex: 9,
68
71
  userSelect: "none",
69
- cursor: sortable ? "pointer" : "default"
72
+ cursor: sortable ? "pointer" : "default",
70
73
  }, onClick: function () {
71
74
  onSort({ accessor: accessor });
72
75
  } }, { children: cloneElement(Cell) }), accessor));
@@ -93,9 +96,9 @@ function TableHeader(props) {
93
96
  transform: "translateX(-100%)",
94
97
  transition: "box-shadow .3s",
95
98
  content: "''",
96
- boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
99
+ boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
97
100
  }
98
- : undefined
101
+ : undefined,
99
102
  }, onClick: function () {
100
103
  onSort({ accessor: accessor });
101
104
  } }, { 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
@@ -573,11 +573,11 @@ import { MultipleSelector } from '@symply.io/basic-components/FormRadioGroup';
573
573
 
574
574
  <h5>Selector Option Props</h5>
575
575
 
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. |
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 | string \| number \| bool | | true | The value of the option. |
581
581
 
582
582
  <h5>Base Props</h5>
583
583
 
@@ -589,23 +589,22 @@ It is extended from `@mui/material/FormControl`, so it includes all properties o
589
589
  | label | string | | false | The label of `Select` element. |
590
590
  | multiple | bool | false | false | If `true`, you can select more than 1 option. |
591
591
  | options | Array\<IRadioOption\> | | true | The radio options. See the **Selector Option Props** above. |
592
- | showHelperText | bool | false | false | If `true`, show the helper text. |
592
+ | showHelperText | bool | false | False | If `true`, show the helper text. |
593
593
  | tooltip | string | | false | A tooltip for the `Select` element. |
594
594
 
595
595
  <h5>Simple Selector Props</h5> Extended from the Base Props
596
596
 
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. |
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 | number \| string | | True | The value of the `Select` element. |
601
601
 
602
602
  <h5>Multiple Selector Props</h5> Extended from the Base Props
603
603
 
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. |
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
+ | value | Array\<number\> \| Array\<string\> | | | The value of the `Select` element. |
609
608
 
610
609
 
611
610
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.6.6-beta.2",
3
+ "version": "1.6.7-alpha.2",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",