@etsoo/materialui 1.1.67 → 1.1.68

package/lib/DataGridEx.d.ts

@@ -1,7 +1,7 @@
-import { GridColumn, GridLoaderStates, ScrollerGridProps } from '@etsoo/react';
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import React from 'react';
-import { MouseEventWithDataHandler } from './MUGlobal';
+import { GridColumn, GridLoaderStates, ScrollerGridProps } from "@etsoo/react";
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import React from "react";
+import { MouseEventWithDataHandler } from "./MUGlobal";
 /**
  * Footer item renderer props
  */
@@ -15,7 +15,7 @@ export type DataGridExFooterItemRendererProps<T extends object> = {
 /**
  * Extended DataGrid with VariableSizeGrid props
  */
-export type DataGridExProps<T extends object, D extends DataTypes.Keys<T>> = Omit<ScrollerGridProps<T, D>, 'itemRenderer' | 'columnCount' | 'columnWidth' | 'width'> & {
+export type DataGridExProps<T extends object, D extends DataTypes.Keys<T>> = Omit<ScrollerGridProps<T, D>, "itemRenderer" | "columnCount" | "columnWidth" | "width"> & {
     /**
      * Alternating colors for odd/even rows
      */

package/lib/DataGridEx.js

@@ -1,37 +1,37 @@
-import { css } from '@emotion/css';
-import { GridAlignGet, ScrollerGrid, useCombinedRefs } from '@etsoo/react';
-import { Utils } from '@etsoo/shared';
-import { Box, Checkbox, Paper, TableSortLabel, useTheme } from '@mui/material';
-import React from 'react';
-import { DataGridRenderers } from './DataGridRenderers';
+import { css } from "@emotion/css";
+import { GridAlignGet, ScrollerGrid, useCombinedRefs } from "@etsoo/react";
+import { Utils } from "@etsoo/shared";
+import { Box, Checkbox, Paper, TableSortLabel, useTheme } from "@mui/material";
+import React from "react";
+import { DataGridRenderers } from "./DataGridRenderers";
 // Borders
-const boldBorder = '2px solid rgba(224, 224, 224, 1)';
-const thinBorder = '1px solid rgba(224, 224, 224, 1)';
+const boldBorder = "2px solid rgba(224, 224, 224, 1)";
+const thinBorder = "1px solid rgba(224, 224, 224, 1)";
 // Scroll bar size
 const scrollbarSize = 16;
 // Minimum width
 const minWidth = 120;
 const createGridStyle = (alternatingColors, selectedColor, hoverColor) => {
     return css({
-        '.DataGridEx-Selected': {
+        ".DataGridEx-Selected": {
             backgroundColor: selectedColor
         },
-        '.DataGridEx-Hover:not(.DataGridEx-Selected)': {
+        ".DataGridEx-Hover:not(.DataGridEx-Selected)": {
             backgroundColor: hoverColor
         },
-        '& .DataGridEx-Cell0:not(.DataGridEx-Hover):not(.DataGridEx-Selected)': {
+        "& .DataGridEx-Cell0:not(.DataGridEx-Hover):not(.DataGridEx-Selected)": {
             backgroundColor: alternatingColors[0]
         },
-        '& .DataGridEx-Cell1:not(.DataGridEx-Hover):not(.DataGridEx-Selected)': {
+        "& .DataGridEx-Cell1:not(.DataGridEx-Hover):not(.DataGridEx-Selected)": {
             backgroundColor: alternatingColors[1]
         },
-        '& .DataGridEx-Cell-Border': {
+        "& .DataGridEx-Cell-Border": {
             borderBottom: thinBorder
         }
     });
 };
 const rowItems = (div, callback) => {
-    const row = div.dataset['row'];
+    const row = div.dataset["row"];
     if (div.parentElement == null || row == null)
         return;
     doRowItems(div.parentElement, parseFloat(row), callback);
@@ -90,7 +90,7 @@ export function DataGridEx(props) {
             }
             else if (sortable && field != null) {
                 const active = orderBy === field;
-                sortLabel = (React.createElement(TableSortLabel, { active: active, direction: sortAsc ? 'asc' : 'desc', onClick: (_event) => {
+                sortLabel = (React.createElement(TableSortLabel, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
                         if (active)
                             column.sortAsc = !sortAsc;
                         handleSort(field, column.sortAsc);
@@ -119,21 +119,21 @@ export function DataGridEx(props) {
                     checkable
                 })
                 : undefined;
-            return (React.createElement(Box, { key: 'bottom-' + (field !== null && field !== void 0 ? field : index.toString()), textAlign: GridAlignGet(align, type), width: columnWidth(index) },
+            return (React.createElement(Box, { key: "bottom-" + (field !== null && field !== void 0 ? field : index.toString()), textAlign: GridAlignGet(align, type), width: columnWidth(index) },
                 React.createElement(Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps }, cell)));
         })));
     }
     // Destruct
-    const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = '#f6f9fb', idField = 'id', mRef = React.createRef(), onClick, onDoubleClick, selectable = true, selectedColor = '#edf4fb', width, ...rest } = props;
+    const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = "#f6f9fb", idField = "id", mRef = React.createRef(), onClick, onDoubleClick, selectable = true, selectedColor = "#edf4fb", width, ...rest } = props;
     if (checkable) {
         const cbColumn = {
-            field: 'selected',
-            header: '',
+            field: "selected",
+            header: "",
             sortable: false,
             width: 50,
             cellRenderer: ({ cellProps, data, selected }) => {
                 cellProps.sx = {
-                    padding: '4px!important'
+                    padding: "4px!important"
                 };
                 return (React.createElement(Checkbox, { color: "primary", checked: selected, onChange: (_event, checked) => {
                         var _a;
@@ -151,7 +151,7 @@ export function DataGridEx(props) {
             }
         };
         // Update to the latest version
-        if (columns[0].field === 'selected') {
+        if (columns[0].field === "selected") {
             columns[0] = cbColumn;
         }
         else {
@@ -181,14 +181,14 @@ export function DataGridEx(props) {
             div.title = innerText;
         }
         else {
-            div.title = '';
+            div.title = "";
         }
     };
     // selectedRowIndex state
     const selectedRowIndex = React.useRef(-1);
     const handleMouseDown = (event) => {
         const div = event.currentTarget;
-        const row = div.dataset['row'];
+        const row = div.dataset["row"];
         if (div.parentElement == null || row == null)
             return;
         const rowIndex = parseFloat(row);
@@ -197,22 +197,22 @@ export function DataGridEx(props) {
             return;
         if (selectedRowIndex.current != -1) {
             doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
-                preDiv.classList.remove('DataGridEx-Selected');
+                preDiv.classList.remove("DataGridEx-Selected");
             });
         }
         rowItems(div, (currentDiv) => {
-            currentDiv.classList.add('DataGridEx-Selected');
+            currentDiv.classList.add("DataGridEx-Selected");
         });
         selectedRowIndex.current = rowIndex;
     };
     const handleMouseOver = (event) => {
         rowItems(event.currentTarget, (div) => {
-            div.classList.add('DataGridEx-Hover');
+            div.classList.add("DataGridEx-Hover");
         });
     };
     const handleMouseOut = (event) => {
         rowItems(event.currentTarget, (div) => {
-            div.classList.remove('DataGridEx-Hover');
+            div.classList.remove("DataGridEx-Hover");
         });
     };
     /**
@@ -220,7 +220,7 @@ export function DataGridEx(props) {
      */
     const itemRenderer = ({ columnIndex, rowIndex, style, data, selectedItems }) => {
         // Column
-        const { align, cellRenderer = DataGridRenderers.defaultCellRenderer, field, type, valueFormatter, renderProps } = columns[columnIndex];
+        const { align, cellRenderer = DataGridRenderers.defaultCellRenderer, cellBoxStyle, field, type, valueFormatter, renderProps } = columns[columnIndex];
         // Props
         const formatProps = {
             data,
@@ -237,21 +237,25 @@ export function DataGridEx(props) {
         // Selected
         const selected = data != null &&
             (selectedRowIndex.current === rowIndex ||
-                selectedItems.some((selectedItem) => selectedItem != null &&
-                    selectedItem[idField] === data[idField]));
+                selectedItems.some((selectedItem) => selectedItem != null && selectedItem[idField] === data[idField]));
         if (selected) {
             rowClass += ` DataGridEx-Selected`;
         }
+        // Box style
+        const boxStyle = data == null || cellBoxStyle == null
+            ? undefined
+            : typeof cellBoxStyle === "function"
+                ? cellBoxStyle(data)
+                : cellBoxStyle;
         const cellProps = {
-            className: 'DataGridEx-Cell',
-            textAlign: GridAlignGet(align, type)
+            className: "DataGridEx-Cell",
+            textAlign: GridAlignGet(align, type),
+            sx: { ...boxStyle }
         };
         const child = cellRenderer({
             data,
             field,
-            formattedValue: valueFormatter
-                ? valueFormatter(formatProps)
-                : undefined,
+            formattedValue: valueFormatter ? valueFormatter(formatProps) : undefined,
             selected,
             type,
             rowIndex,
@@ -274,9 +278,7 @@ export function DataGridEx(props) {
         if (column.width != null)
             return column.width;
         // More space
-        const leftWidth = width -
-            widthCalculator.total -
-            (width < 800 ? 0 : scrollbarSize);
+        const leftWidth = width - widthCalculator.total - (width < 800 ? 0 : scrollbarSize);
         // Shared width
         const sharedWidth = leftWidth > 0 ? leftWidth / widthCalculator.unset : 0;
         return (column.minWidth || minWidth) + sharedWidth;
@@ -287,43 +289,43 @@ export function DataGridEx(props) {
         const defaultOrderByAsc = defaultOrderBy
             ? (_a = columns.find((column) => column.field === defaultOrderBy)) === null || _a === void 0 ? void 0 : _a.sortAsc
             : undefined;
-        return (React.createElement(ScrollerGrid, { className: Utils.mergeClasses('DataGridEx-Body', 'DataGridEx-CustomBar', className, createGridStyle(alternatingColors, selectedColor, hoverColor)), columnCount: columns.length, columnWidth: columnWidth, defaultOrderBy: defaultOrderBy, defaultOrderByAsc: defaultOrderByAsc, height: height -
+        return (React.createElement(ScrollerGrid, { className: Utils.mergeClasses("DataGridEx-Body", "DataGridEx-CustomBar", className, createGridStyle(alternatingColors, selectedColor, hoverColor)), columnCount: columns.length, columnWidth: columnWidth, defaultOrderBy: defaultOrderBy, defaultOrderByAsc: defaultOrderByAsc, height: height -
                 headerHeight -
                 (hideFooter ? 0 : bottomHeight + 1) -
                 scrollbarSize, headerRenderer: headerRenderer, idField: idField, itemRenderer: itemRenderer, footerRenderer: hideFooter ? undefined : footerRenderer, width: Math.max(width !== null && width !== void 0 ? width : 0, widthCalculator.total), mRef: mRefLocal, ...rest }));
     }, [width]);
     return (React.createElement(Paper, { sx: {
-            fontSize: '0.875rem',
+            fontSize: "0.875rem",
             height,
-            '& .DataGridEx-Cell': {
+            "& .DataGridEx-Cell": {
                 padding: 2,
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
             },
-            '& .DataGridEx-CustomBar': {
-                '@media (min-width: 800px)': {
-                    '::-webkit-scrollbar': {
+            "& .DataGridEx-CustomBar": {
+                "@media (min-width: 800px)": {
+                    "::-webkit-scrollbar": {
                         width: scrollbarSize,
                         height: scrollbarSize,
-                        backgroundColor: '#f6f6f6'
+                        backgroundColor: "#f6f6f6"
                     },
-                    '::-webkit-scrollbar-thumb': {
-                        backgroundColor: 'rgba(0,0,0,0.4)',
-                        borderRadius: '2px'
+                    "::-webkit-scrollbar-thumb": {
+                        backgroundColor: "rgba(0,0,0,0.4)",
+                        borderRadius: "2px"
                     },
-                    '::-webkit-scrollbar-track-piece:start': {
-                        background: 'transparent'
+                    "::-webkit-scrollbar-track-piece:start": {
+                        background: "transparent"
                     },
-                    '::-webkit-scrollbar-track-piece:end': {
-                        background: 'transparent'
+                    "::-webkit-scrollbar-track-piece:end": {
+                        background: "transparent"
                     }
                 }
             }
         } },
         React.createElement("div", { className: "DataGridEx-CustomBar", style: {
                 width,
-                overflowX: 'auto',
-                overflowY: 'hidden'
+                overflowX: "auto",
+                overflowY: "hidden"
             } }, table)));
 }

package/lib/MUGlobal.d.ts

@@ -49,7 +49,7 @@ export declare class MUGlobal {
      * @param href Item's href
      * @returns Props
      */
-    static getMenuItem(path: string, href: string): ListItemButtonProps<"div", {}>;
+    static getMenuItem(path: string, href: string): ListItemButtonProps;
     /**
      * Update object number properties with half of it
      * @param input Input object

package/lib/MUGlobal.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 /**
  * MUGlobal for global configurations
  */
-export class MUGlobal {
+class MUGlobal {
     /**
      * Get menu item props
      * @param path Current path
@@ -182,3 +182,4 @@ MUGlobal.pagePaddings = { xs: 2, sm: 3 };
  * Break points defined
  */
 MUGlobal.breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
+export { MUGlobal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.67",
+  "version": "1.1.68",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,14 +52,14 @@
     "@emotion/styled": "^11.10.6",
     "@etsoo/appscript": "^1.3.82",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.53",
+    "@etsoo/react": "^1.6.54",
     "@etsoo/shared": "^1.1.92",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.14",
     "@mui/x-data-grid": "^6.0.3",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
-    "@types/react": "^18.0.28",
+    "@types/react": "^18.0.29",
     "@types/react-avatar-editor": "^13.0.0",
     "@types/react-dom": "^18.0.11",
     "@types/react-input-mask": "^3.0.2",
@@ -89,6 +89,6 @@
     "@typescript-eslint/parser": "^5.56.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.2"
   }
 }