@symply.io/basic-components 1.6.3 → 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/package.json

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