@etsoo/materialui 1.4.33 → 1.4.35

package/lib/ResponsibleContainer.d.ts

@@ -14,7 +14,7 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
      * @param height Current calcuated height
      * @param rect Current rect data
      */
-    adjustHeight?: (height: number, rect: DOMRect) => number;
+    adjustHeight?: number | ((height: number, rect: DOMRect) => number);
     /**
      *
      * @param height Current height
@@ -29,7 +29,7 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
     /**
      * Container box SX (dataGrid determines the case)
      */
-    containerBoxSx?: (paddings: Record<string, string | number>, hasFields: boolean, dataGrid?: boolean) => SxProps<Theme>;
+    containerBoxSx?: (paddings: number | Record<string, string | number>, hasFields: boolean, dataGrid?: boolean) => SxProps<Theme>;
     /**
      * Min width to show Datagrid
      */
@@ -73,7 +73,7 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
     /**
      * Paddings
      */
-    paddings?: Record<string, string | number>;
+    paddings?: number | Record<string, string | number>;
     /**
      * Pull to refresh data
      */

package/lib/ResponsibleContainer.js

@@ -10,7 +10,7 @@ import { SearchBar } from "./SearchBar";
 import { Labels } from "./app/Labels";
 import { GridUtils } from "./GridUtils";
 function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
-    const half = MUGlobal.half(paddings);
+    const half = typeof paddings == "number" ? paddings / 2 : MUGlobal.half(paddings);
     return {
         "& .SearchBox": {
             marginBottom: hasField ? half : 0
@@ -136,7 +136,10 @@ export function ResponsibleContainer(props) {
             if (!isNaN(boxMargin))
                 heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
             if (adjustHeight != null)
-                heightLocal -= adjustHeight(heightLocal, rect);
+                heightLocal -=
+                    typeof adjustHeight === "number"
+                        ? adjustHeight
+                        : adjustHeight(heightLocal, rect);
         }
         if (adjustFabHeight)
             heightLocal = adjustFabHeight(heightLocal, showDataGrid);
@@ -169,11 +172,14 @@ export function ResponsibleContainer(props) {
         ];
     })();
     const searchBar = React.useMemo(() => {
-        if (!hasFields || showDataGrid == null)
+        if (!hasFields ||
+            showDataGrid == null ||
+            rect?.width == null ||
+            rect.width < 20)
             return;
         const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
         return (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
-    }, [showDataGrid, hasFields, searchBarHeight]);
+    }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
     // Pull container
     const pullContainer = showDataGrid == null
         ? undefined

package/lib/pages/CommonPage.d.ts

@@ -51,7 +51,7 @@ export interface CommonPageProps extends Omit<ContainerProps, "id"> {
     /**
      * Paddings
      */
-    paddings?: Record<string, string | number>;
+    paddings?: number | Record<string, string | number>;
     /**
      * Scroll container
      */

package/lib/pages/DataGridPage.js

@@ -77,7 +77,10 @@ export function DataGridPage(props) {
             if (!isNaN(paddingBottom))
                 gridHeight -= paddingBottom;
             if (adjustHeight != null)
-                gridHeight -= adjustHeight(gridHeight, rect);
+                gridHeight -=
+                    typeof adjustHeight === "number"
+                        ? adjustHeight
+                        : adjustHeight(gridHeight, rect);
             if (gridHeight !== states.height)
                 setStates({ height: gridHeight });
         }

package/lib/pages/DataGridPageProps.d.ts

@@ -10,7 +10,7 @@ export type DataGridPageProps<T extends object, F extends DataTypes.BasicTemplat
      * @param height Current calcuated height
      * @param rect Current rect data
      */
-    adjustHeight?: (height: number, rect: DOMRect) => number;
+    adjustHeight?: number | ((height: number, rect: DOMRect) => number);
     /**
      * Grid height
      */

package/lib/pages/FixedListPage.d.ts

@@ -11,5 +11,5 @@ export declare function FixedListPage<T extends object, F extends DataTypes.Basi
      * @param height Current calcuated height
      * @param rect Current rect data
      */
-    adjustHeight?: (height: number, rect: DOMRect) => number;
+    adjustHeight?: number | ((height: number, rect: DOMRect) => number);
 }): import("react/jsx-runtime").JSX.Element;

package/lib/pages/FixedListPage.js

@@ -79,7 +79,10 @@ export function FixedListPage(props) {
             let height = document.documentElement.clientHeight -
                 Math.round(rect.top + rect.height + 1);
             if (adjustHeight != null)
-                height -= adjustHeight(height, rect);
+                height -=
+                    typeof adjustHeight === "number"
+                        ? adjustHeight
+                        : adjustHeight(height, rect);
             return (_jsx(Box, { id: "list-container", sx: {
                     height: height + "px"
                 }, children: _jsx(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {

package/lib/pages/ResponsivePage.js

@@ -20,7 +20,9 @@ export function ResponsivePage(props) {
     // Layout
     return (_jsxs(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), _jsx(ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, hasField, _dataGrid) => {
                     // Half
-                    const half = MUGlobal.half(paddings);
+                    const half = typeof paddings == "number"
+                        ? paddings / 2
+                        : MUGlobal.half(paddings);
                     // .SearchBox keep the same to avoid flick when switching between DataGrid and List
                     return {
                         paddingTop: paddings,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.33",
+  "version": "1.4.35",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",
@@ -35,14 +35,14 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@etsoo/appscript": "^1.5.72",
+    "@etsoo/appscript": "^1.5.76",
     "@etsoo/notificationbase": "^1.1.54",
     "@etsoo/react": "^1.8.3",
     "@etsoo/shared": "^1.2.55",
     "@mui/icons-material": "^6.1.9",
     "@mui/material": "^6.1.9",
-    "@mui/x-data-grid": "^7.22.3",
-    "chart.js": "^4.4.6",
+    "@mui/x-data-grid": "^7.23.0",
+    "chart.js": "^4.4.7",
     "chartjs-plugin-datalabels": "^2.2.0",
     "eventemitter3": "^5.0.1",
     "pica": "^9.0.1",

package/src/ResponsibleContainer.tsx

@@ -56,7 +56,7 @@ export type ResponsibleContainerProps<
    * @param height Current calcuated height
    * @param rect Current rect data
    */
-  adjustHeight?: (height: number, rect: DOMRect) => number;
+  adjustHeight?: number | ((height: number, rect: DOMRect) => number);
 
   /**
    *
@@ -75,7 +75,7 @@ export type ResponsibleContainerProps<
    * Container box SX (dataGrid determines the case)
    */
   containerBoxSx?: (
-    paddings: Record<string, string | number>,
+    paddings: number | Record<string, string | number>,
     hasFields: boolean,
     dataGrid?: boolean
   ) => SxProps<Theme>;
@@ -139,7 +139,7 @@ export type ResponsibleContainerProps<
   /**
    * Paddings
    */
-  paddings?: Record<string, string | number>;
+  paddings?: number | Record<string, string | number>;
 
   /**
    * Pull to refresh data
@@ -170,11 +170,12 @@ interface LocalRefs<T> {
 }
 
 function defaultContainerBoxSx(
-  paddings: object,
+  paddings: object | number,
   hasField: boolean,
   _dataGrid?: boolean
 ): SxProps<Theme> {
-  const half = MUGlobal.half(paddings);
+  const half =
+    typeof paddings == "number" ? paddings / 2 : MUGlobal.half(paddings);
   return {
     "& .SearchBox": {
       marginBottom: hasField ? half : 0
@@ -357,7 +358,11 @@ export function ResponsibleContainer<
       const boxMargin = parseFloat(style.marginBottom);
       if (!isNaN(boxMargin)) heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
 
-      if (adjustHeight != null) heightLocal -= adjustHeight(heightLocal, rect);
+      if (adjustHeight != null)
+        heightLocal -=
+          typeof adjustHeight === "number"
+            ? adjustHeight
+            : adjustHeight(heightLocal, rect);
     }
 
     if (adjustFabHeight)
@@ -424,7 +429,13 @@ export function ResponsibleContainer<
   })();
 
   const searchBar = React.useMemo(() => {
-    if (!hasFields || showDataGrid == null) return;
+    if (
+      !hasFields ||
+      showDataGrid == null ||
+      rect?.width == null ||
+      rect.width < 20
+    )
+      return;
 
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
 
@@ -435,7 +446,7 @@ export function ResponsibleContainer<
         className={`searchBar${showDataGrid ? "Grid" : "List"}`}
       />
     );
-  }, [showDataGrid, hasFields, searchBarHeight]);
+  }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
 
   // Pull container
   const pullContainer =

package/src/pages/CommonPage.tsx

@@ -70,7 +70,7 @@ export interface CommonPageProps extends Omit<ContainerProps, "id"> {
   /**
    * Paddings
    */
-  paddings?: Record<string, string | number>;
+  paddings?: number | Record<string, string | number>;
 
   /**
    * Scroll container

package/src/pages/DataGridPage.tsx

@@ -135,7 +135,11 @@ export function DataGridPage<
       const paddingBottom = parseFloat(style.paddingBottom);
       if (!isNaN(paddingBottom)) gridHeight -= paddingBottom;
 
-      if (adjustHeight != null) gridHeight -= adjustHeight(gridHeight, rect);
+      if (adjustHeight != null)
+        gridHeight -=
+          typeof adjustHeight === "number"
+            ? adjustHeight
+            : adjustHeight(gridHeight, rect);
 
       if (gridHeight !== states.height) setStates({ height: gridHeight });
     }

package/src/pages/DataGridPageProps.ts

@@ -15,7 +15,7 @@ export type DataGridPageProps<
      * @param height Current calcuated height
      * @param rect Current rect data
      */
-    adjustHeight?: (height: number, rect: DOMRect) => number;
+    adjustHeight?: number | ((height: number, rect: DOMRect) => number);
 
     /**
      * Grid height

package/src/pages/FixedListPage.tsx

@@ -32,7 +32,7 @@ export function FixedListPage<
      * @param height Current calcuated height
      * @param rect Current rect data
      */
-    adjustHeight?: (height: number, rect: DOMRect) => number;
+    adjustHeight?: number | ((height: number, rect: DOMRect) => number);
   }
 ) {
   // Destruct
@@ -139,7 +139,11 @@ export function FixedListPage<
         document.documentElement.clientHeight -
         Math.round(rect.top + rect.height + 1);
 
-      if (adjustHeight != null) height -= adjustHeight(height, rect);
+      if (adjustHeight != null)
+        height -=
+          typeof adjustHeight === "number"
+            ? adjustHeight
+            : adjustHeight(height, rect);
 
       return (
         <Box

package/src/pages/ResponsivePage.tsx

@@ -105,7 +105,10 @@ export function ResponsivePage<
         paddings={paddings}
         containerBoxSx={(paddings, hasField, _dataGrid) => {
           // Half
-          const half = MUGlobal.half(paddings);
+          const half =
+            typeof paddings == "number"
+              ? paddings / 2
+              : MUGlobal.half(paddings);
 
           // .SearchBox keep the same to avoid flick when switching between DataGrid and List
           return {