@symply.io/basic-components 1.6.7-alpha.3 → 1.6.7

package/DataTable/TableFooter.js

@@ -67,6 +67,8 @@ function TableFooter(props) {
                             zIndex: 9,
                             width: width,
                             userSelect: "none",
+                            backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
+                            color: "".concat(footerTextColor || "inherit", " !important"),
                         } }, { children: cloneElement(Cell) }), accessor));
                 }), fixedRightFooters.map(function (footer, index) {
                     var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;

package/DataTable/TableHeader.js

@@ -71,6 +71,8 @@ function TableHeader(props) {
                             zIndex: 9,
                             userSelect: "none",
                             cursor: sortable ? "pointer" : "default",
+                            backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
+                            color: "".concat(headerTextColor || "inherit", " !important"),
                         }, onClick: function () {
                             onSort({ accessor: accessor });
                         } }, { children: cloneElement(Cell) }), accessor));

package/FormSelector/MultipleSelector.d.ts

@@ -1,3 +1,3 @@
 import { MultipleSelectorProps } from "./types";
-declare function MultipleSelector(props: MultipleSelectorProps): import("react/jsx-runtime").JSX.Element;
+declare function MultipleSelector<T extends string | number>(props: MultipleSelectorProps<T>): import("react/jsx-runtime").JSX.Element;
 export default MultipleSelector;

package/FormSelector/MultipleSelector.js

@@ -20,27 +20,29 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Select from "@mui/material/Select";
 import Tooltip from "@mui/material/Tooltip";
+import Checkbox from "@mui/material/Checkbox";
 import MenuItem from "@mui/material/MenuItem";
 import InputLabel from "@mui/material/InputLabel";
 import FormControl from "@mui/material/FormControl";
+import ListItemText from "@mui/material/ListItemText";
 import FormHelperText from "@mui/material/FormHelperText";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function MultipleSelector(props) {
-    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"]);
+    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"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.onCloseTooltip;
+    var _h = useInteractions(), tooltipOpen = _h.tooltipOpen, onOpenTooltip = _h.onOpenTooltip, onCloseTooltip = _h.onCloseTooltip;
     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) {
                             var _a;
                             event.preventDefault();
                             onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
                         }, inputProps: {
                             onFocus: onOpenTooltip,
-                            onBlur: onCloseTooltip
+                            onBlur: onCloseTooltip,
                         }, label: label, renderValue: multiple
                             ? function (selectedValues) {
                                 return options
@@ -53,8 +55,8 @@ function MultipleSelector(props) {
                                     .join("; ");
                             }
                             : undefined }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
-                            var _a = option, label = _a.label, value = _a.value;
-                            return (_jsx(MenuItem, __assign({ value: value }, { children: label }), value));
+                            var label = option.label, v = option.value;
+                            return (_jsxs(MenuItem, __assign({ value: v }, { children: [showCheckmarks ? (_jsx(Checkbox, { checked: !!value.includes(v) })) : (_jsx(_Fragment, {})), _jsx(ListItemText, { primary: label })] }), v));
                         })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
 }
 export default MultipleSelector;

package/FormSelector/SimpleSelector.d.ts

@@ -1,3 +1,3 @@
 import { SimpleSelectorProps } from "./types";
-declare function SimpleSelector(props: SimpleSelectorProps): import("react/jsx-runtime").JSX.Element;
+declare function SimpleSelector<T extends string | number>(props: SimpleSelectorProps<T>): import("react/jsx-runtime").JSX.Element;
 export default SimpleSelector;

package/FormSelector/SimpleSelector.js

@@ -40,10 +40,10 @@ function SimpleSelector(props) {
                             onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
                         }, inputProps: {
                             onFocus: onOpenTooltip,
-                            onBlur: onCloseTooltip
+                            onBlur: onCloseTooltip,
                         }, label: label }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
-                            var label = option.label, value = option.value, disabled = option.disabled;
-                            return (_jsx(MenuItem, __assign({ value: value, disabled: disabled }, { children: label }), value));
+                            var label = option.label, v = option.value, disabled = option.disabled;
+                            return (_jsx(MenuItem, __assign({ value: v, disabled: disabled }, { children: label }), v));
                         })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
 }
 export default SimpleSelector;

package/FormSelector/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, CSSProperties } from "react";
 import { SelectProps } from "@mui/material/Select";
 import { FormControlProps } from "@mui/material/FormControl";
-interface SelectorBaseProps extends Omit<FormControlProps, "onChange"> {
+interface SelectorBaseProps<T extends string | number> extends Omit<FormControlProps, "onChange"> {
     label?: string;
     name?: string;
     tooltip?: ReactNode;
@@ -12,16 +12,17 @@ interface SelectorBaseProps extends Omit<FormControlProps, "onChange"> {
     secondaryColor?: CSSProperties["color"];
     options: Array<{
         label: string;
-        value: string | number;
+        value: T;
         disabled?: boolean;
     }>;
 }
-export interface SimpleSelectorProps extends SelectorBaseProps {
-    value: number | string;
-    onChange: (value?: string | number) => void;
+export interface SimpleSelectorProps<T extends string | number> extends SelectorBaseProps<T> {
+    value: T | "";
+    onChange: (value?: string | T) => void;
 }
-export interface MultipleSelectorProps extends SelectorBaseProps {
-    value: Array<number> | Array<string>;
-    onChange: (value?: string | Array<number> | Array<string>) => void;
+export interface MultipleSelectorProps<T extends string | number> extends SelectorBaseProps<T> {
+    value: Array<T>;
+    showCheckmarks?: boolean;
+    onChange: (value?: string | Array<T>) => void;
 }
 export {};

package/README.md

@@ -374,7 +374,11 @@ import DataTable, { useDataTable } from '@symply.io/basic-components/DataTable';
 | columns               | Array\<TableBodyCellProps\>   |            | true     | The cells for the body. (from the hook)                      |
 | dense                 | bool                          |            | false    | If `true` the table size/density would be tight.             |
 | footers               | Array\<TableFooterCellProps>  | []         | false    | The cells for the footer. (from the hook)                    |
+| footerBgColor         | CSSProperties["color"]        |            | false    | Customized footer background color.                          |
+| footerTextColor       | CSSProperties["color"]        |            | false    | Customized footer text color.                                |
 | headers               | Array\<TableHeaderCellProps\> |            | true     | The cells for the header. (from the hook)                    |
+| headerBgColor         | CSSProperties["color"]        |            | false    | Customized header background color.                          |
+| headerTextColor       | CSSProperties["color"]        |            | false    | Customized header text color.                                |
 | noDataText            | string                        | 'No Data!' | false    | The text when no data rendered.                              |
 | onContextMenu         | func                          |            | false    | The function for row right-clicking.<br />**Signature:**<br/>`function(event: MouseEvent, row: RowProps) => unknown` |
 | 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';
 
 <h5>Selector Option Props</h5>
 
-| Name     | Type                     | Default | Required | Description                              |
-| -------- | ------------------------ | ------- | -------- | ---------------------------------------- |
-| disabled | bool                     | false   | false    | If `true`, the opiton would be disabled. |
-| label    | string                   |         | true     | The label of the option.                 |
-| value    | string \| number \| bool |         | true     | The value of the option.                 |
+| Name     | Type                       | Default | Required | Description                              |
+| -------- | -------------------------- | ------- | -------- | ---------------------------------------- |
+| disabled | bool                       | false   | false    | If `true`, the opiton would be disabled. |
+| label    | string                     |         | true     | The label of the option.                 |
+| value    | T extends number \| string |         |          | The value of the option.                 |
 
 <h5>Base Props</h5>
 
@@ -589,22 +593,23 @@ It is extended from `@mui/material/FormControl`, so it includes all properties o
 | label          | string                |         | false    | The label of `Select` element.                              |
 | multiple       | bool                  | false   | false    | If `true`, you can select more than 1 option.               |
 | options        | Array\<IRadioOption\> |         | true     | The radio options. See the **Selector Option Props** above. |
-| showHelperText | bool                  | false   | False    | If `true`, show the helper text.                            |
+| showHelperText | bool                  | false   | false    | If `true`, show the helper text.                            |
 | tooltip        | string                |         | false    | A tooltip for the `Select` element.                         |
 
 <h5>Simple Selector Props</h5> Extended from the Base Props
 
-| Name     | Type             | Default | Required | Description                                                  |
-| -------- | ---------------- | ------- | -------- | ------------------------------------------------------------ |
-| 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. |
-| value    | number \| string |         | True     | The value of the `Select` element.                           |
+| Name     | Type                       | Default | Required | Description                                                  |
+| -------- | -------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| 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. |
+| value    | T extends number \| string |         | true     | The value of the `Select` element.                           |
 
 <h5>Multiple Selector Props</h5> Extended from the Base Props
 
-| Name     | Type                               | Default | Required | Description                                                  |
-| -------- | ---------------------------------- | ------- | -------- | ------------------------------------------------------------ |
-| 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. |
-| value    | Array\<number\> \| Array\<string\> |         |          | The value of the `Select` element.                           |
+| Name           | Type                                | Default | Required | Description                                                  |
+| -------------- | ----------------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| 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. |
+| showCheckmarks | bool                                | false   | false    | If `true` the option will be shown with a checkbox.          |
+| value          | Array\<T extends number \| string\> |         |          | The value of the `Select` element.                           |
 
 
 

package/package.json

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