@etsoo/react 1.4.30 → 1.4.34

package/lib/components/ScrollerGrid.js

@@ -36,7 +36,7 @@ export const ScrollerGrid = (props) => {
         // Update state
         state.isNextPageLoading = true;
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } = state;
+        const { currentPage, batchSize, orderBy, orderByAsc, data } = state;
         const loadProps = {
             currentPage,
             batchSize,
@@ -45,10 +45,10 @@ export const ScrollerGrid = (props) => {
             data
         };
         loadData(loadProps).then((result) => {
-            state.isMounted = true;
-            if (result == null || isMounted === false) {
+            if (result == null || state.isMounted === false) {
                 return;
             }
+            state.isMounted = true;
             const newItems = result.length;
             state.lastLoadedItems = newItems;
             state.isNextPageLoading = false;
@@ -109,7 +109,8 @@ export const ScrollerGrid = (props) => {
         };
         Object.assign(state, resetState);
         // Reset items
-        setRows([]);
+        if (state.isMounted !== false)
+            setRows([]);
     };
     React.useImperativeHandle(mRef, () => ({
         scrollTo(params) {
@@ -184,13 +185,12 @@ export const ScrollerGrid = (props) => {
             shouldForceUpdate: true
         });
     }, [width]);
-    // Destruct state
-    const { autoLoad: stateAutoLoad, hasNextPage, currentPage } = state;
+    // Rows
     const rowLength = rows.length;
     // Row count
-    const rowCount = hasNextPage ? rowLength + 1 : rowLength;
+    const rowCount = state.hasNextPage ? rowLength + 1 : rowLength;
     // Auto load data when current page is 0
-    if (currentPage === 0 && stateAutoLoad)
+    if (state.currentPage === 0 && state.autoLoad)
         loadDataLocal();
     // Layout
     return (React.createElement(React.Fragment, null,

package/lib/components/ScrollerList.js

@@ -53,7 +53,7 @@ export const ScrollerList = (props) => {
         // Update state
         state.isNextPageLoading = true;
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } = state;
+        const { currentPage, batchSize, orderBy, orderByAsc, data } = state;
         const loadProps = {
             currentPage,
             batchSize,
@@ -62,10 +62,10 @@ export const ScrollerList = (props) => {
             data
         };
         loadData(loadProps).then((result) => {
-            state.isMounted = true;
-            if (result == null || isMounted === false) {
+            if (result == null || state.isMounted === false) {
                 return;
             }
+            state.isMounted = true;
             const newItems = result.length;
             state.lastLoadedItems = newItems;
             state.hasNextPage = newItems >= loadBatchSize;
@@ -121,7 +121,8 @@ export const ScrollerList = (props) => {
                 };
                 Object.assign(state, resetState);
                 // Reset
-                setRows([]);
+                if (state.isMounted !== false)
+                    setRows([]);
             },
             scrollTo(scrollOffset) {
                 refMethods.scrollTo(scrollOffset);
@@ -160,8 +161,7 @@ export const ScrollerList = (props) => {
             state.isMounted = false;
         };
     }, []);
-    // Destruct state
-    const { autoLoad: stateAutoLoad, hasNextPage, currentPage } = state;
+    // Row count
     const rowCount = rows.length;
     // Local items renderer callback
     const onItemsRenderedLocal = (props) => {
@@ -175,9 +175,9 @@ export const ScrollerList = (props) => {
             onItemsRendered(props);
     };
     // Item count
-    const itemCount = hasNextPage ? rowCount + 1 : rowCount;
+    const itemCount = state.hasNextPage ? rowCount + 1 : rowCount;
     // Auto load data when current page is 0
-    if (currentPage === 0 && stateAutoLoad)
+    if (state.currentPage === 0 && state.autoLoad)
         loadDataLocal();
     // Layout
     return typeof itemSize === 'function' ? (React.createElement(VariableSizeList, { height: height, width: width, itemCount: itemCount, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest }, itemRendererLocal)) : (React.createElement(FixedSizeList, { height: height, width: width, itemCount: itemCount, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest }, itemRendererLocal));

package/lib/mu/DataGridRenderers.js

@@ -67,7 +67,7 @@ export var DataGridRenderers;
             if (value)
                 return React.createElement(CheckIcon, { fontSize: "small" });
             else
-                return React.createElement(ClearIcon, { fontSize: "small" });
+                return React.createElement(ClearIcon, { fontSize: "small", color: "error" });
         }
         // To string
         return new String(value);

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
      */
@@ -52,10 +52,6 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
      * Item size, a function indicates its a variable size list
      */
     itemSize: ((index: number) => number) | number;
-    /**
-     * Listbox SX (dataGrid determines the case)
-     */
-    listBoxSx?: (dataGrid: boolean, height: number) => SxProps<Theme>;
     /**
      * Load data callback
      */
@@ -76,10 +72,6 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
      * Pull to refresh data
      */
     pullToRefresh?: boolean;
-    /**
-     * Searchbox SX
-     */
-    searchBoxSx?: SxProps<Theme>;
     /**
      * Size ready to read miliseconds span
      */

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(0.5),
-        paddingRight: (theme) => theme.spacing(0.5),
-        paddingTop: half,
-        marginBottom: half
+        '& .SearchBox': {
+            marginBottom: half
+        }
     };
 }
 /**
@@ -25,7 +24,7 @@ function getDefaultSearchBoxSx(paddings) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, containerBoxSx, dataGridMinWidth = DataGridExCalColumns(columns).total, elementReady, fields, fieldTemplate, height, listBoxSx, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, searchBoxSx = getDefaultSearchBoxSx(paddings), 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
@@ -64,7 +63,6 @@ export function ResponsibleContainer(props) {
         // Last rect
         const lastRect = state.rect;
         // 32 = scroll bar width
-        console.log(lastRect, rect);
         if (lastRect != null &&
             state.mounted !== true &&
             Math.abs(rect.width - lastRect.width) <= 32 &&
@@ -107,9 +105,7 @@ export function ResponsibleContainer(props) {
             // Delete
             delete rest.itemRenderer;
             return [
-                React.createElement(Box, { sx: listBoxSx == null
-                        ? undefined
-                        : listBoxSx(true, heightLocal) },
+                React.createElement(Box, { className: "DataGridBox" },
                     React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, outerRef: (element) => {
                             if (element != null && elementReady)
                                 elementReady(element, true);
@@ -127,9 +123,7 @@ export function ResponsibleContainer(props) {
         delete rest.hoverColor;
         delete rest.selectable;
         return [
-            React.createElement(Box, { sx: listBoxSx == null
-                    ? undefined
-                    : listBoxSx(false, heightLocal) },
+            React.createElement(Box, { className: "ListBox", sx: { height: heightLocal } },
                 React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, oRef: (element) => {
                         if (element != null && elementReady)
                             elementReady(element, false);
@@ -149,11 +143,11 @@ export function ResponsibleContainer(props) {
             ? '.DataGridEx-Body'
             : '.ScrollerListEx-Body';
     // Layout
-    return (React.createElement(Box, { sx: containerBoxSx == null || showDataGrid == null
+    return (React.createElement(Box, { sx: containerBoxSx == null
             ? undefined
-            : containerBoxSx(showDataGrid) },
+            : containerBoxSx(paddings, showDataGrid) },
         React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], sx: searchBoxSx }, searchBar),
+            React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox" }, searchBar),
             list),
         pullToRefresh && pullContainer && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => { var _a; return (_a = state.ref) === null || _a === void 0 ? void 0 : _a.reset(); }, shouldPullToRefresh: () => {
                 const container = document.querySelector(pullContainer);

package/lib/mu/SearchBar.js

@@ -52,7 +52,6 @@ const setChildState = (child, enabled) => {
  * @returns Component
  */
 export function SearchBar(props) {
-    var _a;
     // Destruct
     const { className, fields, innerHeight = 40, onSubmit } = props;
     // Labels
@@ -65,14 +64,12 @@ export function SearchBar(props) {
     // Drawer open / close
     const [open, updateOpen] = React.useState(false);
     // State
-    const state = React.useRef({ hasMore: true }).current;
-    const lastMaxWidth = (_a = state.lastMaxWidth) !== null && _a !== void 0 ? _a : 9999;
+    const state = React.useRef({ hasMore: true, lastMaxWidth: 9999 }).current;
     // Watch container
     const { dimensions } = useDimensions(1, (target, rect) => {
         // Same logic from resetButtonRef
-        console.log('useDimensions', state.hasMore, rect.width, lastMaxWidth);
-        if (rect.width === lastMaxWidth ||
-            (!state.hasMore && rect.width > lastMaxWidth))
+        if (rect.width === state.lastMaxWidth ||
+            (!state.hasMore && rect.width > state.lastMaxWidth))
             return false;
         // Len
         const len = target.children.length;
@@ -80,7 +77,7 @@ export function SearchBar(props) {
             var classList = target.children[i].classList;
             classList.remove('showChild');
         }
-    });
+    }, 0);
     // Show or hide element
     const setElementVisible = (element, visible) => {
         element.classList.remove(visible ? 'hiddenChild' : 'showChild');
@@ -99,10 +96,9 @@ export function SearchBar(props) {
             containerRect.width < 10)
             return;
         // Container width
-        console.log('resetButtonRef', state.hasMore, containerRect.width, lastMaxWidth);
         let maxWidth = containerRect.width;
-        if (maxWidth === lastMaxWidth ||
-            (!state.hasMore && maxWidth > lastMaxWidth)) {
+        if (maxWidth === state.lastMaxWidth ||
+            (!state.hasMore && maxWidth > state.lastMaxWidth)) {
             return;
         }
         state.lastMaxWidth = maxWidth;

package/lib/mu/pages/ResponsivePage.js

@@ -18,29 +18,28 @@ export function ResponsivePage(props) {
     const [direction, setDirection] = React.useState(fabColumnDirection);
     // Layout
     return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction },
-        React.createElement(ResponsibleContainer, { paddings: paddings, containerBoxSx: (dataGrid) => {
-                if (dataGrid) {
-                    return {
-                        padding: paddings
-                    };
-                }
-                else {
-                    return {
-                        paddingTop: paddings,
-                        paddingBottom: paddings
-                    };
-                }
+        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': {
+                        marginLeft: paddings,
+                        marginTop: paddings,
+                        marginRight: paddings,
+                        marginBottom: half
+                    },
+                    '& .ListBox': {
+                        marginBottom: paddings
+                    },
+                    '& .DataGridBox': {
+                        marginLeft: paddings,
+                        marginRight: paddings,
+                        marginBottom: paddings
+                    }
+                };
             }, elementReady: (element, isDataGrid) => {
                 setDirection(!isDataGrid);
                 setScrollContainer(element);
-            }, listBoxSx: (dataGrid, height) => {
-                if (dataGrid) {
-                    return {};
-                }
-                else {
-                    return {
-                        height: height
-                    };
-                }
             }, ...rest })));
 }

package/package.json

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

package/src/components/ScrollerGrid.tsx

@@ -198,8 +198,7 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
         state.isNextPageLoading = true;
 
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } =
-            state;
+        const { currentPage, batchSize, orderBy, orderByAsc, data } = state;
 
         const loadProps: GridLoadDataProps = {
             currentPage,
@@ -210,11 +209,10 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
         };
 
         loadData(loadProps).then((result) => {
-            state.isMounted = true;
-
-            if (result == null || isMounted === false) {
+            if (result == null || state.isMounted === false) {
                 return;
             }
+            state.isMounted = true;
 
             const newItems = result.length;
             state.lastLoadedItems = newItems;
@@ -291,7 +289,7 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
         Object.assign(state, resetState);
 
         // Reset items
-        setRows([]);
+        if (state.isMounted !== false) setRows([]);
     };
 
     React.useImperativeHandle(
@@ -378,15 +376,14 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
         });
     }, [width]);
 
-    // Destruct state
-    const { autoLoad: stateAutoLoad, hasNextPage, currentPage } = state;
+    // Rows
     const rowLength = rows.length;
 
     // Row count
-    const rowCount = hasNextPage ? rowLength + 1 : rowLength;
+    const rowCount = state.hasNextPage ? rowLength + 1 : rowLength;
 
     // Auto load data when current page is 0
-    if (currentPage === 0 && stateAutoLoad) loadDataLocal();
+    if (state.currentPage === 0 && state.autoLoad) loadDataLocal();
 
     // Layout
     return (

package/src/components/ScrollerList.tsx

@@ -163,8 +163,7 @@ export const ScrollerList = <T extends Record<string, any>>(
         state.isNextPageLoading = true;
 
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } =
-            state;
+        const { currentPage, batchSize, orderBy, orderByAsc, data } = state;
 
         const loadProps: GridLoadDataProps = {
             currentPage,
@@ -175,11 +174,10 @@ export const ScrollerList = <T extends Record<string, any>>(
         };
 
         loadData(loadProps).then((result) => {
-            state.isMounted = true;
-
-            if (result == null || isMounted === false) {
+            if (result == null || state.isMounted === false) {
                 return;
             }
+            state.isMounted = true;
 
             const newItems = result.length;
             state.lastLoadedItems = newItems;
@@ -250,7 +248,7 @@ export const ScrollerList = <T extends Record<string, any>>(
                     Object.assign(state, resetState);
 
                     // Reset
-                    setRows([]);
+                    if (state.isMounted !== false) setRows([]);
                 },
 
                 scrollTo(scrollOffset: number): void {
@@ -301,8 +299,7 @@ export const ScrollerList = <T extends Record<string, any>>(
         };
     }, []);
 
-    // Destruct state
-    const { autoLoad: stateAutoLoad, hasNextPage, currentPage } = state;
+    // Row count
     const rowCount = rows.length;
 
     // Local items renderer callback
@@ -319,10 +316,10 @@ export const ScrollerList = <T extends Record<string, any>>(
     };
 
     // Item count
-    const itemCount = hasNextPage ? rowCount + 1 : rowCount;
+    const itemCount = state.hasNextPage ? rowCount + 1 : rowCount;
 
     // Auto load data when current page is 0
-    if (currentPage === 0 && stateAutoLoad) loadDataLocal();
+    if (state.currentPage === 0 && state.autoLoad) loadDataLocal();
 
     // Layout
     return typeof itemSize === 'function' ? (

package/src/mu/DataGridRenderers.tsx

@@ -103,7 +103,7 @@ export namespace DataGridRenderers {
             }
 
             if (value) return <CheckIcon fontSize="small" />;
-            else return <ClearIcon fontSize="small" />;
+            else return <ClearIcon fontSize="small" color="error" />;
         }
 
         // To string

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
@@ -93,11 +93,6 @@ export interface ResponsibleContainerProps<
      */
     itemSize: ((index: number) => number) | number;
 
-    /**
-     * Listbox SX (dataGrid determines the case)
-     */
-    listBoxSx?: (dataGrid: boolean, height: number) => SxProps<Theme>;
-
     /**
      * Load data callback
      */
@@ -125,11 +120,6 @@ export interface ResponsibleContainerProps<
      */
     pullToRefresh?: boolean;
 
-    /**
-     * Searchbox SX
-     */
-    searchBoxSx?: SxProps<Theme>;
-
     /**
      * Size ready to read miliseconds span
      */
@@ -142,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(0.5),
-        paddingRight: (theme) => theme.spacing(0.5),
-        paddingTop: half,
-        marginBottom: half
+        '& .SearchBox': {
+            marginBottom: half
+        }
     };
 }
 
@@ -165,18 +157,16 @@ export function ResponsibleContainer<
     const {
         adjustHeight,
         columns,
-        containerBoxSx,
-        dataGridMinWidth = DataGridExCalColumns(columns).total,
+        containerBoxSx = defaultContainerBoxSx,
+        dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total),
         elementReady,
         fields,
         fieldTemplate,
         height,
-        listBoxSx,
         loadData,
         mRef,
         paddings = MUGlobal.pagePaddings,
         pullToRefresh = true,
-        searchBoxSx = getDefaultSearchBoxSx(paddings),
         sizeReadyMiliseconds = 0,
         ...rest
     } = props;
@@ -229,7 +219,6 @@ export function ResponsibleContainer<
             const lastRect = state.rect;
 
             // 32 = scroll bar width
-            console.log(lastRect, rect);
             if (
                 lastRect != null &&
                 state.mounted !== true &&
@@ -283,13 +272,7 @@ export function ResponsibleContainer<
             delete rest.itemRenderer;
 
             return [
-                <Box
-                    sx={
-                        listBoxSx == null
-                            ? undefined
-                            : listBoxSx(true, heightLocal)
-                    }
-                >
+                <Box className="DataGridBox">
                     <DataGridEx<T>
                         autoLoad={!hasFields}
                         height={heightLocal}
@@ -319,13 +302,7 @@ export function ResponsibleContainer<
         delete rest.selectable;
 
         return [
-            <Box
-                sx={
-                    listBoxSx == null
-                        ? undefined
-                        : listBoxSx(false, heightLocal)
-                }
-            >
+            <Box className="ListBox" sx={{ height: heightLocal }}>
                 <ScrollerListEx<T>
                     autoLoad={!hasFields}
                     height={heightLocal}
@@ -365,13 +342,13 @@ export function ResponsibleContainer<
     return (
         <Box
             sx={
-                containerBoxSx == null || showDataGrid == null
+                containerBoxSx == null
                     ? undefined
-                    : containerBoxSx(showDataGrid)
+                    : containerBoxSx(paddings, showDataGrid)
             }
         >
             <Stack>
-                <Box ref={dimensions[0][0]} sx={searchBoxSx}>
+                <Box ref={dimensions[0][0]} className="SearchBox">
                     {searchBar}
                 </Box>
                 {list}

package/src/mu/SearchBar.tsx

@@ -104,28 +104,30 @@ export function SearchBar(props: SearchBarProps) {
         form?: HTMLFormElement;
         moreForm?: HTMLFormElement;
         submitSeed?: number;
-        lastMaxWidth?: number;
+        lastMaxWidth: number;
         hasMore: boolean;
-    }>({ hasMore: true }).current;
-    const lastMaxWidth = state.lastMaxWidth ?? 9999;
+    }>({ hasMore: true, lastMaxWidth: 9999 }).current;
 
     // Watch container
-    const { dimensions } = useDimensions(1, (target, rect) => {
-        // Same logic from resetButtonRef
-        console.log('useDimensions', state.hasMore, rect.width, lastMaxWidth);
-        if (
-            rect.width === lastMaxWidth ||
-            (!state.hasMore && rect.width > lastMaxWidth)
-        )
-            return false;
-
-        // Len
-        const len = target.children.length;
-        for (let i = 0; i < len; i++) {
-            var classList = target.children[i].classList;
-            classList.remove('showChild');
-        }
-    });
+    const { dimensions } = useDimensions(
+        1,
+        (target, rect) => {
+            // Same logic from resetButtonRef
+            if (
+                rect.width === state.lastMaxWidth ||
+                (!state.hasMore && rect.width > state.lastMaxWidth)
+            )
+                return false;
+
+            // Len
+            const len = target.children.length;
+            for (let i = 0; i < len; i++) {
+                var classList = target.children[i].classList;
+                classList.remove('showChild');
+            }
+        },
+        0
+    );
 
     // Show or hide element
     const setElementVisible = (element: Element, visible: boolean) => {
@@ -149,16 +151,10 @@ export function SearchBar(props: SearchBarProps) {
             return;
 
         // Container width
-        console.log(
-            'resetButtonRef',
-            state.hasMore,
-            containerRect.width,
-            lastMaxWidth
-        );
         let maxWidth = containerRect.width;
         if (
-            maxWidth === lastMaxWidth ||
-            (!state.hasMore && maxWidth > lastMaxWidth)
+            maxWidth === state.lastMaxWidth ||
+            (!state.hasMore && maxWidth > state.lastMaxWidth)
         ) {
             return;
         }

package/src/mu/pages/ResponsivePage.tsx

@@ -34,31 +34,32 @@ export function ResponsivePage<
         >
             <ResponsibleContainer<T, F>
                 paddings={paddings}
-                containerBoxSx={(dataGrid) => {
-                    if (dataGrid) {
-                        return {
-                            padding: paddings
-                        };
-                    } else {
-                        return {
-                            paddingTop: paddings,
-                            paddingBottom: 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': {
+                            marginLeft: paddings,
+                            marginTop: paddings,
+                            marginRight: paddings,
+                            marginBottom: half
+                        },
+                        '& .ListBox': {
+                            marginBottom: paddings
+                        },
+                        '& .DataGridBox': {
+                            marginLeft: paddings,
+                            marginRight: paddings,
+                            marginBottom: paddings
+                        }
+                    };
                 }}
                 elementReady={(element, isDataGrid) => {
                     setDirection(!isDataGrid);
                     setScrollContainer(element);
                 }}
-                listBoxSx={(dataGrid, height) => {
-                    if (dataGrid) {
-                        return {};
-                    } else {
-                        return {
-                            height: height
-                        };
-                    }
-                }}
                 {...rest}
             />
         </CommonPage>