@symply.io/basic-components 1.1.2 → 1.1.3-beta.2

package/DataTable/TableBodyRow.js

@@ -14,9 +14,9 @@ import { cloneElement, useState, useMemo } from "react";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import useTheme from "@mui/material/styles/useTheme";
+import { useTheme } from "@mui/material/styles";
 function TableBodyRow(props) {
-    var row = props.row, rows = props.rows, columns = props.columns, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick;
+    var row = props.row, rows = props.rows, columns = props.columns, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick, onCustomizeRowSxProps = props.onCustomizeRowSxProps;
     var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
@@ -31,12 +31,16 @@ function TableBodyRow(props) {
             return [[], columns, []];
         }
     }, [isUpMd, columns]), fixedLeftCols = _b[0], dynamicCols = _b[1], fixedRightCols = _b[2];
-    return (_jsxs(TableRow, __assign({ sx: {
-            "&:hover": {
+    var customRowSx = useMemo(function () {
+        if (onCustomizeRowSxProps) {
+            return onCustomizeRowSxProps({ row: row, columns: columns });
+        }
+        return {};
+    }, [row, columns, onCustomizeRowSxProps]);
+    return (_jsxs(TableRow, __assign({ sx: __assign(__assign({}, customRowSx), { "&:hover": {
                 cursor: onRowClick ? "pointer" : "default",
                 backgroundColor: onRowClick ? "#F2F1F3" : "#FEFEFE"
-            }
-        }, onMouseEnter: function (event) {
+            } }), onMouseEnter: function (event) {
             setRowEl(event.currentTarget);
         }, onMouseLeave: function () {
             setRowEl(undefined);

package/DataTable/index.js

@@ -19,7 +19,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;
+    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, onCustomizeRowSxProps = props.onCustomizeRowSxProps;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var tableRef = useRef(null);
     var _f = useState(false), leftShadowVisible = _f[0], setLeftShadowVisible = _f[1];
@@ -53,7 +53,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, 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, onCustomizeRowSxProps: onCustomizeRowSxProps, 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 { default as useDataTable } from "./useTable";

package/DataTable/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement, CSSProperties } from "react";
+import { SxProps } from "@mui/material/styles";
 export declare type OrderType = "ASC" | "DESC" | "NONE";
 export declare type KvProps = Record<string, unknown>;
 export declare type SortingProps = {
@@ -57,6 +58,10 @@ export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps exten
     rightShadowVisible?: boolean;
     noDataText?: string;
     onRowClick?: (row: RowProps) => unknown;
+    onCustomizeRowSxProps?: ({ row, columns }: {
+        row: RowProps;
+        columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
+    }) => SxProps;
 };
 export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
     row: RowProps;

package/NumberInput/index.js

@@ -31,7 +31,7 @@ function NumberInput(props) {
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var EXCEED_ERROR = "Your value exceeds the exceptable input range";
     if (maxValue < minValue)
-        throw new Error("Max should be bigger than min!");
+        throw new Error("Max should be bigger than the `miniValue`!");
     var _e = useInteractions({ maxValue: maxValue, minValue: minValue, value: value, onChange: onChange }), exceedError = _e.exceedError, tooltipOpen = _e.tooltipOpen, handleBlur = _e.handleBlur, handleChange = _e.handleChange, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : value, onFocus: onOpenTooltip, onBlur: function () {
                     onCloseTooltip();

package/NumberInput/useInteractions.js

@@ -35,6 +35,9 @@ function useInteractions(props) {
         else if (excludedValue.includes(strVal)) {
             onChange("");
         }
+        else {
+            onChange(Number(strVal).toString());
+        }
     }, [value, onChange]);
     var onOpenTooltip = useCallback(function () {
         setTooltipOpen(true);

package/package.json

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