@symply.io/basic-components 1.6.2 → 1.6.4-alpha.1

package/Autocomplete/index.d.ts

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

package/Autocomplete/index.js

@@ -46,6 +46,7 @@ function CustomAutocomplete(props) {
                 return opt.label === val.label;
             }, value: value, inputValue: inputValue, onInputChange: function (event, val) {
                 onInputChange(val);
-            }, 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) }) }))); } }) })));
+            }, 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) }) }))); } }) })));
 }
 export default CustomAutocomplete;

package/Autocomplete/types.d.ts

@@ -1,8 +1,7 @@
 import type { CSSProperties } from "react";
 import type { TextFieldProps } from "@mui/material/TextField";
-export declare type AutocompleteOptionType<T = {
-    [name: string]: unknown;
-}> = T & {
+import type { AutocompleteValue } from "@mui/base/AutocompleteUnstyled";
+export declare type AutocompleteOptionType<T = Record<string, any>> = T & {
     label: string;
     value?: string | number;
 };
@@ -13,8 +12,8 @@ export interface AutocompleteProps<T, multiple extends boolean | undefined> exte
     disabled?: boolean;
     loading?: boolean;
     options: Array<AutocompleteOptionType<T>>;
-    value: AutocompleteValueType<T, multiple>;
+    value: AutocompleteValue<AutocompleteOptionType<T>, multiple, undefined, undefined>;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
-    onChange: (value: AutocompleteValueType<T, multiple>) => void;
+    onChange: (value: AutocompleteValue<AutocompleteOptionType<T>, multiple, undefined, undefined>) => void;
 }

package/AutocompleteWithFilter/index.d.ts

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

package/AutocompleteWithFilter/index.js

@@ -36,7 +36,7 @@ function AutocompleteWithFilter(props) {
         ignoreCase: true,
         ignoreAccents: true,
         trim: true,
-        stringify: function (option) { return option.label; }
+        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, loading: loading, limitTags: limitTags !== null && limitTags !== void 0 ? limitTags : -1, options: options, disabled: disabled, multiple: multiple, filterOptions: filter, onChange: function (event, val) {
@@ -54,6 +54,7 @@ function AutocompleteWithFilter(props) {
                 var _b, _c;
                 var selected = _a.selected;
                 return (_jsxs("li", __assign({}, __assign(__assign({}, props), { key: (_c = (_b = option.value) !== null && _b !== void 0 ? _b : option.label) !== null && _c !== void 0 ? _c : option }), { children: [_jsx(Checkbox, { icon: icon, color: "primary", checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), option.label || ""] })));
-            }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { variant: "outlined", required: required, inputProps: __assign(__assign({}, params.inputProps), { required: required && (Array.isArray(value) ? value.length === 0 : !value) }) }))); } }) })));
+            }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { variant: "outlined", required: required, inputProps: __assign(__assign({}, params.inputProps), { required: required &&
+                        (Array.isArray(value) ? value.length === 0 : !value) }) }))); } }) })));
 }
 export default AutocompleteWithFilter;

package/AutocompleteWithFilter/types.d.ts

@@ -1,12 +1,13 @@
 import type { CSSProperties } from "react";
 import type { TextFieldProps } from "@mui/material/TextField";
+import type { AutocompleteValue } from "@mui/base/AutocompleteUnstyled";
 export declare type AutocompleteWithFilterOptionType<T> = T & {
     label: string;
     value?: string | number;
 };
 export declare type AutocompleteWithFilterValueType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> | null : Array<AutocompleteWithFilterOptionType<T>>;
 export interface AutocompleteWithFilterProps<T, multiple extends boolean | undefined> extends Omit<TextFieldProps, "onChange" | "value" | "disabled"> {
-    value: AutocompleteWithFilterValueType<T, multiple>;
+    value: AutocompleteValue<AutocompleteWithFilterOptionType<T>, multiple, undefined, undefined>;
     options: Array<AutocompleteWithFilterOptionType<T>>;
     disableCloseOnSelect?: boolean;
     limitTags?: number;
@@ -15,5 +16,5 @@ export interface AutocompleteWithFilterProps<T, multiple extends boolean | undef
     loading?: boolean;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
-    onChange: (value: AutocompleteWithFilterValueType<T, multiple>) => void;
+    onChange: (value: AutocompleteValue<AutocompleteWithFilterOptionType<T>, multiple, undefined, undefined>) => void;
 }

package/DataTable/TableBodyRow.js

@@ -16,7 +16,7 @@ import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 function TableBodyRow(props) {
-    var row = props.row, rows = props.rows, columns = props.columns, rowIndex = props.rowIndex, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    var row = props.row, rows = props.rows, columns = props.columns, rowIndex = props.rowIndex, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
     var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
@@ -56,7 +56,12 @@ function TableBodyRow(props) {
             ? function () {
                 onRowClick(row);
             }
-            : undefined }, { children: [fixedLeftCols.map(function (col, index) {
+            : undefined, onContextMenu: function (event) {
+            event.preventDefault();
+            if (onContextMenu) {
+                onContextMenu(event, row);
+            }
+        } }, { children: [fixedLeftCols.map(function (col, index) {
                 var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
                 var left = fixedLeftCols
                     .slice(0, index)

package/DataTable/index.js

@@ -20,7 +20,7 @@ import TableBody from "./TableBody";
 import TableHeader from "./TableHeader";
 import TableFooter from "./TableFooter";
 function DataTable(props) {
-    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, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    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;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var tableRef = useRef(null);
     var _f = useState(false), leftShadowVisible = _f[0], setLeftShadowVisible = _f[1];
@@ -55,7 +55,7 @@ function DataTable(props) {
                 borderRadius: "4px",
                 borderCollapse: "unset !important",
                 transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
-            } }, { 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, {}))] })) })) })));
+            } }, { 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, {}))] })) })) })));
 }
 export default DataTable;
 export * from "./types";

package/DataTable/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, CSSProperties } from "react";
+import { ReactElement, CSSProperties, MouseEvent } from "react";
 declare type HexColor = `#${string}`;
 export declare type CustomRowBgColor = {
     normal?: HexColor;
@@ -63,6 +63,7 @@ export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps exten
     rightShadowVisible?: boolean;
     noDataText?: string;
     onRowClick?: (row: RowProps) => unknown;
+    onContextMenu?: (event: MouseEvent<HTMLTableRowElement>, row: RowProps) => unknown;
     onCustomizeRowBgColor?: ({ row, columns }: {
         row: RowProps;
         columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;

package/FormRadioGroup/index.js

@@ -31,13 +31,13 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 function FormRadioGroup(props) {
-    var formLabel = props.formLabel, value = props.value, options = props.options, disabled = props.disabled, tooltip = props.tooltip, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, radioLabelPlacement = props.radioLabelPlacement, onChange = props.onChange, rest = __rest(props, ["formLabel", "value", "options", "disabled", "tooltip", "primaryColor", "secondaryColor", "radioLabelPlacement", "onChange"]);
+    var formLabel = props.formLabel, value = props.value, name = props.name, options = props.options, disabled = props.disabled, tooltip = props.tooltip, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, radioLabelPlacement = props.radioLabelPlacement, onChange = props.onChange, rest = __rest(props, ["formLabel", "value", "name", "options", "disabled", "tooltip", "primaryColor", "secondaryColor", "radioLabelPlacement", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(FormControl, __assign({ disabled: disabled }, rest, { children: [tooltip ? (_jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip, disableTouchListener: true }, { children: _jsx(FormLabel, { children: formLabel }) }))) : (_jsx(FormLabel, { children: formLabel })), _jsx(RadioGroup, __assign({ value: value, onChange: function (event) {
                         onChange(event.target.value);
                     } }, { children: options.map(function (opt) {
                         var _a;
-                        return (_jsx(FormControlLabel, { value: opt.value, control: _jsx(Radio, {}), label: _jsx(Typography, { children: opt.label }), labelPlacement: radioLabelPlacement || "end", disabled: ((_a = opt.disabled) !== null && _a !== void 0 ? _a : false) || disabled }, String(opt.value)));
+                        return (_jsx(FormControlLabel, { value: opt.value, name: name, control: _jsx(Radio, {}), label: _jsx(Typography, { children: opt.label }), labelPlacement: radioLabelPlacement || "end", disabled: ((_a = opt.disabled) !== null && _a !== void 0 ? _a : false) || disabled }, String(opt.value)));
                     }) }))] })) })));
 }
 export default FormRadioGroup;

package/FormRadioGroup/types.d.ts

@@ -10,6 +10,7 @@ export interface FormRadioGroupProps extends Omit<FormControlProps, "onChange">
     formLabel: string;
     options: Array<RadioOption>;
     value: string | boolean | number;
+    name?: string;
     tooltip?: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/FormSelector/MultipleSelector.js

@@ -31,10 +31,10 @@ 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, 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", "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, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "name", "tooltip", "required", "disabled", "multiple", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.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, onChange: function (event) {
+    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);

package/FormSelector/SimpleSelector.js

@@ -31,10 +31,10 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function SimpleSelector(props) {
-    var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, tooltip = props.tooltip, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.required, required = _c === void 0 ? false : _c, _d = props.showHelperText, showHelperText = _d === void 0 ? false : _d, helperText = props.helperText, _e = props.options, options = _e === void 0 ? [] : _e, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "tooltip", "disabled", "required", "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.disabled, disabled = _b === void 0 ? false : _b, _c = props.required, required = _c === void 0 ? false : _c, _d = props.showHelperText, showHelperText = _d === void 0 ? false : _d, helperText = props.helperText, _e = props.options, options = _e === void 0 ? [] : _e, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "name", "tooltip", "disabled", "required", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.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-simple-selector" }, { children: label }))), _jsx(Select, __assign({ value: value, required: required, disabled: disabled, onChange: function (event) {
+    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-simple-selector" }, { children: label }))), _jsx(Select, __assign({ value: value, name: name, required: required, disabled: disabled, 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);

package/FormSelector/types.d.ts

@@ -3,6 +3,7 @@ import { SelectProps } from "@mui/material/Select";
 import { FormControlProps } from "@mui/material/FormControl";
 interface SelectorBaseProps extends Omit<FormControlProps, "onChange"> {
     label?: string;
+    name?: string;
     tooltip?: ReactNode;
     showHelperText?: boolean;
     helperText?: string;

package/package.json

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