@etsoo/materialui 1.4.44 → 1.4.45

package/lib/ResponsibleContainer.d.ts

@@ -30,10 +30,6 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
      * Container box SX (dataGrid determines the case)
      */
     containerBoxSx?: (paddings: number | Record<string, string | number>, hasFields: boolean, dataGrid?: boolean) => SxProps<Theme>;
-    /**
-     * Min width to show Datagrid
-     */
-    dataGridMinWidth?: number;
     /**
      * Search fields
      */
@@ -90,6 +86,10 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
      * SearchBar height
      */
     searchBarHeight?: number;
+    /**
+     * SearchBar bottom padding
+     */
+    searchBarBottom?: number;
 };
 /**
  * Responsible container

package/lib/ResponsibleContainer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Stack } from "@mui/material";
+import { Box, Stack, useMediaQuery } from "@mui/material";
 import React from "react";
 import { ReactUtils, useCombinedRefs, useDimensions } from "@etsoo/react";
-import { DataGridEx, DataGridExCalColumns } from "./DataGridEx";
+import { DataGridEx } from "./DataGridEx";
 import { MUGlobal } from "./MUGlobal";
 import { PullToRefreshUI } from "./PullToRefreshUI";
 import { ScrollerListEx } from "./ScrollerListEx";
@@ -24,7 +24,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 15, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, ...rest } = props;
+    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 15, columns, containerBoxSx = defaultContainerBoxSx, elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, searchBarBottom = 8, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -35,6 +35,8 @@ export function ResponsibleContainer(props) {
             return;
         state.ref = ref;
     });
+    // Screen size detection
+    const showDataGrid = useMediaQuery("(min-width:600px)");
     // Update mounted state
     React.useEffect(() => {
         return () => {
@@ -114,14 +116,10 @@ export function ResponsibleContainer(props) {
     // Rect
     const rect = dimensions[0][2];
     // Create list
-    const [list, showDataGrid] = (() => {
+    const list = (() => {
         // No layout
         if (rect == null)
             return [null, undefined];
-        // Width
-        const width = rect.width;
-        // Show DataGrid or List dependng on width
-        const showDataGrid = width >= dataGridMinWidth;
         // Height
         let heightLocal;
         if (height != null) {
@@ -134,7 +132,7 @@ export function ResponsibleContainer(props) {
             const style = window.getComputedStyle(dimensions[0][1]);
             const boxMargin = parseFloat(style.marginBottom);
             if (!isNaN(boxMargin))
-                heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
+                heightLocal -= boxMargin;
             if (adjustHeight != null)
                 heightLocal -=
                     typeof adjustHeight === "number"
@@ -146,13 +144,10 @@ export function ResponsibleContainer(props) {
         if (showDataGrid) {
             // Delete
             delete rest.itemRenderer;
-            return [
-                _jsx(Box, { className: "DataGridBox", children: _jsx(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
-                            if (element != null && elementReady)
-                                elementReady(element, true);
-                        }, onScroll: onGridScroll, columns: columns, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, ...rest }) }),
-                true
-            ];
+            return (_jsx(Box, { className: "DataGridBox", children: _jsx(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
+                        if (element != null && elementReady)
+                            elementReady(element, true);
+                    }, onScroll: onGridScroll, columns: columns, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, ...rest }) }));
         }
         // Delete
         delete rest.checkable;
@@ -163,13 +158,10 @@ export function ResponsibleContainer(props) {
         delete rest.hideFooter;
         delete rest.hoverColor;
         delete rest.selectable;
-        return [
-            _jsx(Box, { className: "ListBox", sx: { height: heightLocal }, children: _jsx(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
-                        if (element != null && elementReady)
-                            elementReady(element, false);
-                    }, onScroll: onListScroll, ...rest }) }),
-            false
-        ];
+        return (_jsx(Box, { className: "ListBox", sx: { height: heightLocal }, children: _jsx(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
+                    if (element != null && elementReady)
+                        elementReady(element, false);
+                }, onScroll: onListScroll, ...rest }) }));
     })();
     const searchBar = React.useMemo(() => {
         if (!hasFields ||
@@ -189,7 +181,9 @@ export function ResponsibleContainer(props) {
     // Layout
     return (_jsxs(Box, { sx: containerBoxSx == null
             ? undefined
-            : containerBoxSx(paddings, hasFields, showDataGrid), children: [_jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], className: "SearchBox", sx: { height: hasFields ? searchBarHeight : 0 }, children: searchBar }), list] }), pullToRefresh && pullContainer && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
+            : containerBoxSx(paddings, hasFields, showDataGrid), children: [_jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], className: "SearchBox", sx: {
+                            height: hasFields ? searchBarHeight : 0
+                        }, marginBottom: hasFields ? `${searchBarBottom}px!important` : undefined, children: searchBar }), list] }), pullToRefresh && pullContainer && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
                     const container = document.querySelector(pullContainer);
                     return !container?.scrollTop;
                 } }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.44",
+  "version": "1.4.45",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",
@@ -30,17 +30,17 @@
   },
   "homepage": "https://github.com/ETSOO/ReactMU#readme",
   "dependencies": {
-    "@dnd-kit/core": "^6.2.0",
-    "@dnd-kit/sortable": "^9.0.0",
+    "@dnd-kit/core": "^6.3.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@etsoo/appscript": "^1.5.78",
     "@etsoo/notificationbase": "^1.1.54",
-    "@etsoo/react": "^1.8.8",
+    "@etsoo/react": "^1.8.9",
     "@etsoo/shared": "^1.2.55",
-    "@mui/icons-material": "^6.1.9",
-    "@mui/material": "^6.1.9",
+    "@mui/icons-material": "^6.1.10",
+    "@mui/material": "^6.1.10",
     "@mui/x-data-grid": "^7.23.0",
     "chart.js": "^4.4.7",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -59,13 +59,13 @@
     "@babel/core": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@babel/runtime-corejs3": "^7.26.0",
     "@testing-library/react": "^16.0.1",
     "@types/pica": "^9.0.4",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^18.3.12",
+    "@types/react": "^18.3.13",
     "@types/react-avatar-editor": "^13.0.3",
     "@types/react-dom": "^18.3.1",
     "@types/react-input-mask": "^3.0.6",

package/src/ResponsibleContainer.tsx

@@ -1,5 +1,5 @@
 import { DataTypes } from "@etsoo/shared";
-import { Box, Stack, SxProps, Theme } from "@mui/material";
+import { Box, Stack, SxProps, Theme, useMediaQuery } from "@mui/material";
 import React from "react";
 import {
   GridOnScrollProps,
@@ -18,11 +18,7 @@ import {
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
-import {
-  DataGridEx,
-  DataGridExCalColumns,
-  DataGridExProps
-} from "./DataGridEx";
+import { DataGridEx, DataGridExProps } from "./DataGridEx";
 import { MUGlobal } from "./MUGlobal";
 import { PullToRefreshUI } from "./PullToRefreshUI";
 import {
@@ -80,11 +76,6 @@ export type ResponsibleContainerProps<
     dataGrid?: boolean
   ) => SxProps<Theme>;
 
-  /**
-   * Min width to show Datagrid
-   */
-  dataGridMinWidth?: number;
-
   /**
    * Search fields
    */
@@ -161,6 +152,11 @@ export type ResponsibleContainerProps<
    * SearchBar height
    */
   searchBarHeight?: number;
+
+  /**
+   * SearchBar bottom padding
+   */
+  searchBarBottom?: number;
 };
 
 interface LocalRefs<T> {
@@ -201,7 +197,6 @@ export function ResponsibleContainer<
     cacheMinutes = 15,
     columns,
     containerBoxSx = defaultContainerBoxSx,
-    dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total),
     elementReady,
     fields,
     fieldTemplate,
@@ -213,6 +208,7 @@ export function ResponsibleContainer<
     quickAction,
     sizeReadyMiliseconds = 0,
     searchBarHeight = 45.6,
+    searchBarBottom = 8,
     ...rest
   } = props;
 
@@ -228,6 +224,9 @@ export function ResponsibleContainer<
     state.ref = ref;
   });
 
+  // Screen size detection
+  const showDataGrid = useMediaQuery("(min-width:600px)");
+
   // Update mounted state
   React.useEffect(() => {
     return () => {
@@ -339,16 +338,10 @@ export function ResponsibleContainer<
   const rect = dimensions[0][2];
 
   // Create list
-  const [list, showDataGrid] = (() => {
+  const list = (() => {
     // No layout
     if (rect == null) return [null, undefined];
 
-    // Width
-    const width = rect.width;
-
-    // Show DataGrid or List dependng on width
-    const showDataGrid = width >= dataGridMinWidth;
-
     // Height
     let heightLocal: number;
     if (height != null) {
@@ -360,7 +353,7 @@ export function ResponsibleContainer<
 
       const style = window.getComputedStyle(dimensions[0][1]!);
       const boxMargin = parseFloat(style.marginBottom);
-      if (!isNaN(boxMargin)) heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
+      if (!isNaN(boxMargin)) heightLocal -= boxMargin;
 
       if (adjustHeight != null)
         heightLocal -=
@@ -376,7 +369,7 @@ export function ResponsibleContainer<
       // Delete
       delete rest.itemRenderer;
 
-      return [
+      return (
         <Box className="DataGridBox">
           <DataGridEx<T>
             autoLoad={!hasFields}
@@ -394,9 +387,8 @@ export function ResponsibleContainer<
             onInitLoad={onInitLoad}
             {...rest}
           />
-        </Box>,
-        true
-      ];
+        </Box>
+      );
     }
 
     // Delete
@@ -409,7 +401,7 @@ export function ResponsibleContainer<
     delete rest.hoverColor;
     delete rest.selectable;
 
-    return [
+    return (
       <Box className="ListBox" sx={{ height: heightLocal }}>
         <ScrollerListEx<T>
           autoLoad={!hasFields}
@@ -427,9 +419,8 @@ export function ResponsibleContainer<
           onScroll={onListScroll}
           {...rest}
         />
-      </Box>,
-      false
-    ];
+      </Box>
+    );
   })();
 
   const searchBar = React.useMemo(() => {
@@ -473,7 +464,12 @@ export function ResponsibleContainer<
         <Box
           ref={dimensions[0][0]}
           className="SearchBox"
-          sx={{ height: hasFields ? searchBarHeight : 0 }}
+          sx={{
+            height: hasFields ? searchBarHeight : 0
+          }}
+          marginBottom={
+            hasFields ? `${searchBarBottom}px!important` : undefined
+          }
         >
           {searchBar}
         </Box>