@etsoo/react 1.4.33 → 1.4.34

package/lib/mu/ResponsibleContainer.d.ts

@@ -23,7 +23,7 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
     /**
      * Container box SX (dataGrid determines the case)
      */
-    containerBoxSx?: (dataGrid?: boolean) => SxProps<Theme>;
+    containerBoxSx?: (paddings: {}, dataGrid?: boolean) => SxProps<Theme>;
     /**
      * Min width to show Datagrid
      */

package/lib/mu/ResponsibleContainer.js

@@ -9,13 +9,12 @@ import { MUGlobal } from './MUGlobal';
 import { PullToRefreshUI } from './PullToRefreshUI';
 import { ScrollerListEx } from './ScrollerListEx';
 import { SearchBar } from './SearchBar';
-function getDefaultSearchBoxSx(paddings) {
+function defaultContainerBoxSx(paddings, _dataGrid) {
     const half = MUGlobal.half(paddings);
     return {
-        paddingLeft: (theme) => theme.spacing(1),
-        paddingRight: (theme) => theme.spacing(1),
-        paddingTop: half,
-        marginBottom: half
+        '& .SearchBox': {
+            marginBottom: half
+        }
     };
 }
 /**
@@ -25,7 +24,7 @@ function getDefaultSearchBoxSx(paddings) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, containerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, sizeReadyMiliseconds = 0, ...rest } = props;
+    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, sizeReadyMiliseconds = 0, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -146,7 +145,7 @@ export function ResponsibleContainer(props) {
     // Layout
     return (React.createElement(Box, { sx: containerBoxSx == null
             ? undefined
-            : containerBoxSx(showDataGrid) },
+            : containerBoxSx(paddings, showDataGrid) },
         React.createElement(Stack, null,
             React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox" }, searchBar),
             list),

package/lib/mu/pages/ResponsivePage.js

@@ -13,13 +13,14 @@ export function ResponsivePage(props) {
     const { pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     const { paddings, fabColumnDirection, ...pageRest } = pageProps;
-    const half = MUGlobal.half(paddings);
     // State
     const [scrollContainer, setScrollContainer] = React.useState();
     const [direction, setDirection] = React.useState(fabColumnDirection);
     // Layout
     return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction },
-        React.createElement(ResponsibleContainer, { paddings: paddings, containerBoxSx: (dataGrid) => {
+        React.createElement(ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, _dataGrid) => {
+                // Half
+                const half = MUGlobal.half(paddings);
                 // .SearchBox keep the same to avoid flick when switching between DataGrid and List
                 return {
                     '& .SearchBox': {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.33",
+    "version": "1.4.34",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/mu/ResponsibleContainer.tsx

@@ -54,7 +54,7 @@ export interface ResponsibleContainerProps<
     /**
      * Container box SX (dataGrid determines the case)
      */
-    containerBoxSx?: (dataGrid?: boolean) => SxProps<Theme>;
+    containerBoxSx?: (paddings: {}, dataGrid?: boolean) => SxProps<Theme>;
 
     /**
      * Min width to show Datagrid
@@ -132,13 +132,15 @@ interface LocalRefs {
     mounted?: boolean;
 }
 
-function getDefaultSearchBoxSx(paddings: {}): SxProps<Theme> {
+function defaultContainerBoxSx(
+    paddings: {},
+    _dataGrid?: boolean
+): SxProps<Theme> {
     const half = MUGlobal.half(paddings);
     return {
-        paddingLeft: (theme) => theme.spacing(1),
-        paddingRight: (theme) => theme.spacing(1),
-        paddingTop: half,
-        marginBottom: half
+        '& .SearchBox': {
+            marginBottom: half
+        }
     };
 }
 
@@ -155,7 +157,7 @@ export function ResponsibleContainer<
     const {
         adjustHeight,
         columns,
-        containerBoxSx,
+        containerBoxSx = defaultContainerBoxSx,
         dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total),
         elementReady,
         fields,
@@ -342,7 +344,7 @@ export function ResponsibleContainer<
             sx={
                 containerBoxSx == null
                     ? undefined
-                    : containerBoxSx(showDataGrid)
+                    : containerBoxSx(paddings, showDataGrid)
             }
         >
             <Stack>

package/src/mu/pages/ResponsivePage.tsx

@@ -20,8 +20,6 @@ export function ResponsivePage<
     pageProps.paddings ??= MUGlobal.pagePaddings;
     const { paddings, fabColumnDirection, ...pageRest } = pageProps;
 
-    const half = MUGlobal.half(paddings);
-
     // State
     const [scrollContainer, setScrollContainer] = React.useState<HTMLElement>();
     const [direction, setDirection] = React.useState(fabColumnDirection);
@@ -36,7 +34,10 @@ export function ResponsivePage<
         >
             <ResponsibleContainer<T, F>
                 paddings={paddings}
-                containerBoxSx={(dataGrid) => {
+                containerBoxSx={(paddings, _dataGrid) => {
+                    // Half
+                    const half = MUGlobal.half(paddings);
+
                     // .SearchBox keep the same to avoid flick when switching between DataGrid and List
                     return {
                         '& .SearchBox': {