@etsoo/react 1.4.23 → 1.4.27

package/lib/components/ScrollerList.js

@@ -15,7 +15,7 @@ const calculateBatchSize = (height, itemSize) => {
  */
 export const ScrollerList = (props) => {
     // Destruct
-    const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, height = window.innerHeight, width = '100%', mRef, oRef, style = {}, itemRenderer, itemSize, loadBatchSize = calculateBatchSize(height, itemSize), loadData, threshold = GridSizeGet(loadBatchSize, height) / 2, onItemsRendered, ...rest } = props;
+    const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, height = document.documentElement.clientHeight, width = '100%', mRef, oRef, style = {}, itemRenderer, itemSize, loadBatchSize = calculateBatchSize(height, itemSize), loadData, threshold = GridSizeGet(loadBatchSize, height) / 2, onItemsRendered, ...rest } = props;
     // Style
     Object.assign(style, {
         width: '100%',
@@ -120,6 +120,8 @@ export const ScrollerList = (props) => {
                     ...add
                 };
                 Object.assign(state, resetState);
+                // Reset
+                setRows([]);
             },
             scrollTo(scrollOffset) {
                 refMethods.scrollTo(scrollOffset);

package/lib/mu/DataGridEx.js

@@ -86,7 +86,7 @@ export function DataGridEx(props) {
                 sortLabel = headerCellRenderer({
                     cellProps,
                     column,
-                    columnIndex: index,
+                    columnIndex: checkable ? index - 1 : index,
                     states
                 });
             }
@@ -115,7 +115,7 @@ export function DataGridEx(props) {
             const cell = footerItemRenderer
                 ? footerItemRenderer(rows, {
                     column,
-                    index,
+                    index: checkable ? index - 1 : index,
                     states,
                     cellProps,
                     checkable

package/lib/mu/DataGridRenderers.js

@@ -80,16 +80,18 @@ export var DataGridRenderers;
      * @param location Renderer location (column index)
      * @returns Component
      */
-    function defaultFooterItemRenderer(_rows, { index, states, checkable }, location = 1) {
+    function defaultFooterItemRenderer(_rows, { index, states, checkable }, location = 0) {
         const { selectedItems, loadedItems, hasNextPage } = states;
-        if (checkable && index === location + 1) {
-            return [
-                selectedItems.length,
-                loadedItems.toLocaleString() + (hasNextPage ? '+' : '')
-            ].join(' / ');
-        }
-        if (!checkable && index === location) {
-            return loadedItems.toLocaleString() + (hasNextPage ? '+' : '');
+        if (index === location) {
+            if (checkable) {
+                return [
+                    selectedItems.length,
+                    loadedItems.toLocaleString() + (hasNextPage ? '+' : '')
+                ].join(' / ');
+            }
+            else {
+                return loadedItems.toLocaleString() + (hasNextPage ? '+' : '');
+            }
         }
         return undefined;
     }

package/lib/mu/ResponsibleContainer.d.ts

@@ -20,6 +20,10 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
      * Columns
      */
     columns: GridColumn<T>[];
+    /**
+     * Container box SX (dataGrid determines the case)
+     */
+    containerBoxSx?: (dataGrid: boolean) => SxProps<Theme>;
     /**
      * Min width to show Datagrid
      */
@@ -51,7 +55,7 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
     /**
      * Listbox SX (dataGrid determines the case)
      */
-    listBoxSx?: (dataGrid: boolean) => SxProps<Theme>;
+    listBoxSx?: (dataGrid: boolean, height: number) => SxProps<Theme>;
     /**
      * Load data callback
      */
@@ -60,6 +64,10 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
      * Methods
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
+    /**
+     * Element ready callback
+     */
+    elementReady?: (element: HTMLElement, isDataGrid: boolean) => void;
     /**
      * Paddings
      */

package/lib/mu/ResponsibleContainer.js

@@ -9,6 +9,15 @@ import { MUGlobal } from './MUGlobal';
 import { PullToRefreshUI } from './PullToRefreshUI';
 import { ScrollerListEx } from './ScrollerListEx';
 import { SearchBar } from './SearchBar';
+function getDefaultSearchBoxSx(paddings) {
+    const half = MUGlobal.half(paddings);
+    return {
+        paddingLeft: (theme) => theme.spacing(0.5),
+        paddingRight: (theme) => theme.spacing(0.5),
+        paddingTop: half,
+        marginBottom: half
+    };
+}
 /**
  * Responsible container
  * @param props Props
@@ -16,7 +25,7 @@ import { SearchBar } from './SearchBar';
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, listBoxSx, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, searchBoxSx = { marginBottom: MUGlobal.half(paddings) }, sizeReadyMiliseconds = 0, ...rest } = props;
+    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;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -55,6 +64,7 @@ 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 &&
@@ -70,7 +80,7 @@ export function ResponsibleContainer(props) {
     const [list, showDataGrid] = (() => {
         // No layout
         if (rect == null)
-            return [null, false];
+            return [null, undefined];
         // Width
         const width = rect.width;
         // Show DataGrid or List dependng on width
@@ -82,7 +92,9 @@ export function ResponsibleContainer(props) {
         }
         else {
             // Auto calculation
-            heightLocal = window.innerHeight - Math.round(rect.bottom + 1);
+            heightLocal =
+                document.documentElement.clientHeight -
+                    Math.round(rect.bottom + 1);
             const style = window.getComputedStyle(dimensions[0][1]);
             const boxMargin = parseFloat(style.marginBottom);
             if (!isNaN(boxMargin))
@@ -95,8 +107,13 @@ export function ResponsibleContainer(props) {
             // Delete
             delete rest.itemRenderer;
             return [
-                React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(true) },
-                    React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, columns: columns, ...rest })),
+                React.createElement(Box, { sx: listBoxSx == null
+                        ? undefined
+                        : listBoxSx(true, heightLocal) },
+                    React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, outerRef: (element) => {
+                            if (element != null && elementReady)
+                                elementReady(element, true);
+                        }, columns: columns, ...rest })),
                 true
             ];
         }
@@ -110,21 +127,33 @@ export function ResponsibleContainer(props) {
         delete rest.hoverColor;
         delete rest.selectable;
         return [
-            React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(false) },
-                React.createElement(ScrollerListEx, { autoLoad: !hasFields, width: rect.width, height: heightLocal, loadData: localLoadData, mRef: mRefs, ...rest })),
+            React.createElement(Box, { sx: listBoxSx == null
+                    ? undefined
+                    : listBoxSx(false, heightLocal) },
+                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, oRef: (element) => {
+                        if (element != null && elementReady)
+                            elementReady(element, false);
+                    }, ...rest })),
             false
         ];
     })();
+    const searchBar = React.useMemo(() => {
+        if (!hasFields || showDataGrid == null)
+            return;
+        return (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit, className: `searchBar${showDataGrid ? 'Grid' : 'List'}` }));
+    }, [showDataGrid, hasFields]);
     // Pull container
-    const pullContainer = list
-        ? showDataGrid
+    const pullContainer = showDataGrid == null
+        ? undefined
+        : showDataGrid
             ? '.DataGridEx-Body'
-            : '.ScrollerListEx-Body'
-        : undefined;
+            : '.ScrollerListEx-Body';
     // Layout
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(Box, { sx: containerBoxSx == null || showDataGrid == null
+            ? undefined
+            : containerBoxSx(showDataGrid) },
         React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], sx: searchBoxSx }, hasFields && (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit }))),
+            React.createElement(Box, { ref: dimensions[0][0], sx: searchBoxSx }, 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

@@ -63,12 +63,12 @@ export function SearchBar(props) {
     const [index, updateIndex] = React.useState();
     // Drawer open / close
     const [open, updateOpen] = React.useState(false);
-    // Forms
-    const [forms] = React.useState({});
+    // State
+    const state = React.useRef({}).current;
     // Watch container
     const { dimensions } = useDimensions(1, (target, rect) => {
         // Same logic from resetButtonRef
-        if (rect.width === forms.lastMaxWidth)
+        if (rect.width === state.lastMaxWidth)
             return false;
         // Len
         const len = target.children.length;
@@ -96,10 +96,10 @@ export function SearchBar(props) {
             return;
         // Container width
         let maxWidth = containerRect.width;
-        if (maxWidth === forms.lastMaxWidth) {
+        if (maxWidth === state.lastMaxWidth) {
             return;
         }
-        forms.lastMaxWidth = maxWidth;
+        state.lastMaxWidth = maxWidth;
         // More button
         const buttonMore = resetButton.previousElementSibling;
         // Cached button width
@@ -174,8 +174,8 @@ export function SearchBar(props) {
     const handleForm = (event) => {
         if (event.nativeEvent.cancelable && !event.nativeEvent.composed)
             return;
-        if (forms.form == null)
-            forms.form = event.currentTarget;
+        if (state.form == null)
+            state.form = event.currentTarget;
         handleSubmit();
     };
     // Handle more button click
@@ -186,54 +186,56 @@ export function SearchBar(props) {
     const moreFormChange = (event) => {
         if (event.nativeEvent.cancelable && !event.nativeEvent.composed)
             return;
-        if (forms.moreForm == null)
-            forms.moreForm = event.currentTarget;
+        if (state.moreForm == null)
+            state.moreForm = event.currentTarget;
         handleSubmit();
     };
     // Reset
     const handleReset = () => {
         // Clear form values
-        if (forms.form != null)
-            resetForm(forms.form);
-        if (forms.moreForm != null)
-            resetForm(forms.moreForm);
+        if (state.form != null)
+            resetForm(state.form);
+        if (state.moreForm != null)
+            resetForm(state.moreForm);
         // Resubmit
         handleSubmitInstant(true);
     };
     // Submit
     const handleSubmit = (delay = 480) => {
-        if (forms.submitSeed != null) {
-            clearTimeout(forms.submitSeed);
+        if (state.submitSeed != null) {
+            clearTimeout(state.submitSeed);
         }
         // Delay the change
-        forms.submitSeed = window.setTimeout(handleSubmitInstant, delay);
+        state.submitSeed = window.setTimeout(handleSubmitInstant, delay);
     };
     // Submit at once
     const handleSubmitInstant = (reset = false) => {
         // Reset timeout
-        forms.submitSeed = undefined;
+        state.submitSeed = undefined;
         // Prepare data
-        const data = new FormData(forms.form);
-        if (forms.moreForm != null) {
-            DomUtils.mergeFormData(data, new FormData(forms.moreForm));
+        const data = new FormData(state.form);
+        if (state.moreForm != null) {
+            DomUtils.mergeFormData(data, new FormData(state.moreForm));
         }
         onSubmit(data, reset);
     };
     // First loading
     React.useEffect(() => {
-        // Delayed way
-        handleSubmit(100);
         return () => {
             // Clear the seeds
-            if (forms.submitSeed != null)
-                clearTimeout(forms.submitSeed);
+            if (state.submitSeed != null)
+                clearTimeout(state.submitSeed);
         };
     }, []);
+    React.useEffect(() => {
+        // Delayed way
+        handleSubmit(100);
+    }, [className]);
     // Layout
     return (React.createElement(React.Fragment, null,
         React.createElement("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                 if (form)
-                    forms.form = form;
+                    state.form = form;
             } },
             React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, height: innerHeight, sx: {
                     '& > :not(style)': {
@@ -260,7 +262,7 @@ export function SearchBar(props) {
             }, open: open, onClose: () => updateOpen(false) },
             React.createElement("form", { onChange: moreFormChange, ref: (form) => {
                     if (form)
-                        forms.moreForm = form;
+                        state.moreForm = form;
                 } },
                 React.createElement(Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2 }, moreItems))))));
 }

package/lib/mu/pages/CommonPage.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 import { CommonPageProps } from './CommonPageProps';
-/**
- * Default pull container
- */
-export declare const CommonPagePullContainer = "#page-container";
 /**
  * Default scroll container
  */

package/lib/mu/pages/CommonPage.js

@@ -1,17 +1,12 @@
 import React from 'react';
 import { FabBox } from '../FabBox';
 import { ScrollTopFab } from '../ScrollTopFab';
-import { PullToRefreshUI } from '../PullToRefreshUI';
 import { Labels } from '../../app/Labels';
 import { MUGlobal } from '../MUGlobal';
 import { MoreFab } from '../MoreFab';
 import { ReactAppStateDetector } from '../../app/ReactApp';
 import { Container, Fab } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
-/**
- * Default pull container
- */
-export const CommonPagePullContainer = '#page-container';
 /**
  * Default scroll container
  */
@@ -22,7 +17,7 @@ export const CommonPageScrollContainer = global;
  */
 export function CommonPage(props) {
     // Destruct
-    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = 'small', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, targetFields, pullContainer, sx = {}, ...rest } = props;
+    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = 'small', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, targetFields, sx = {}, ...rest } = props;
     // Merge style
     Object.assign(sx, {
         padding: paddings
@@ -59,9 +54,5 @@ export function CommonPage(props) {
                 onRefresh != null && (React.createElement(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: 'none', md: 'inherit' } } },
                     React.createElement(RefreshIcon, null))),
                 React.createElement(MoreFab, { size: fabSize, title: labels.more, actions: moreActions })),
-            children),
-        onRefresh != null && pullContainer != null && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: onRefresh, shouldPullToRefresh: () => {
-                const container = document.querySelector(pullContainer);
-                return !(container === null || container === void 0 ? void 0 : container.scrollTop);
-            } }))));
+            children)));
 }

package/lib/mu/pages/CommonPageProps.d.ts

@@ -45,10 +45,6 @@ export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
      * Paddings
      */
     paddings?: {};
-    /**
-     * Pull container
-     */
-    pullContainer?: string;
     /**
      * Scroll container
      */

package/lib/mu/pages/DataGridPage.js

@@ -13,7 +13,7 @@ import { CommonPage } from './CommonPage';
  * @returns Component
  */
 export function DataGridPage(props) {
-    var _a, _b;
+    var _a;
     // Destruct
     const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
@@ -42,7 +42,8 @@ export function DataGridPage(props) {
     const rect = dimensions[0][2];
     React.useEffect(() => {
         if (rect != null && rect.height > 50 && height == null) {
-            let gridHeight = window.innerHeight - Math.round(rect.top + rect.height + 1);
+            let gridHeight = document.documentElement.clientHeight -
+                Math.round(rect.top + rect.height + 1);
             const style = window.getComputedStyle(dimensions[0][1]);
             const paddingBottom = parseFloat(style.paddingBottom);
             if (!isNaN(paddingBottom))
@@ -69,12 +70,8 @@ export function DataGridPage(props) {
             return;
         ref.reset({ data });
     }, [ref, data]);
-    // Pull container id
-    const pullContainer = ((_b = states.element) === null || _b === void 0 ? void 0 : _b.parentElement)
-        ? '.DataGridEx-Body'
-        : undefined;
     // Layout
-    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: states.element, pullContainer: pullContainer },
+    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: states.element },
         React.createElement(Stack, null,
             React.createElement(Box, { ref: dimensions[0][0], sx: {
                     paddingBottom: pageProps.paddings

package/lib/mu/pages/FixedListPage.js

@@ -48,7 +48,8 @@ export function FixedListPage(props) {
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50) {
-            let height = window.innerHeight - Math.round(rect.top + rect.height + 1);
+            let height = document.documentElement.clientHeight -
+                Math.round(rect.top + rect.height + 1);
             if (adjustHeight != null) {
                 height -= adjustHeight(height);
             }
@@ -61,13 +62,9 @@ export function FixedListPage(props) {
                     }, ...rest })));
         }
     }, [rect]);
-    // Pull container id
-    const pullContainer = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.parentElement)
-        ? '#' + (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.parentElement.id)
-        : undefined;
     const { paddings, ...pageRest } = pageProps;
     // Layout
-    return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, pullContainer: pullContainer },
+    return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer },
         React.createElement(Stack, null,
             React.createElement(Box, { ref: dimensions[0][0], sx: { padding: paddings } },
                 React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),

package/lib/mu/pages/ListPage.js

@@ -5,7 +5,7 @@ import useCombinedRefs from '../../uses/useCombinedRefs';
 import { MUGlobal } from '../MUGlobal';
 import { ScrollerListEx } from '../ScrollerListEx';
 import { SearchBar } from '../SearchBar';
-import { CommonPage, CommonPagePullContainer, CommonPageScrollContainer } from './CommonPage';
+import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 /**
  * List page
  * @param props Props
@@ -41,7 +41,7 @@ export function ListPage(props) {
         return loadData(data);
     };
     // Layout
-    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer, pullContainer: CommonPagePullContainer },
+    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer },
         React.createElement(Stack, null,
             React.createElement(Box, { sx: {
                     paddingBottom: pageProps.paddings

package/lib/mu/pages/ResponsivePage.js

@@ -1,12 +1,6 @@
-import { Box, Stack } from '@mui/material';
 import React from 'react';
-import { GridDataGet } from '../../components/GridLoader';
-import useCombinedRefs from '../../uses/useCombinedRefs';
-import { useDimensions } from '../../uses/useDimensions';
-import { DataGridEx, DataGridExCalColumns } from '../DataGridEx';
 import { MUGlobal } from '../MUGlobal';
-import { ScrollerListEx } from '../ScrollerListEx';
-import { SearchBar } from '../SearchBar';
+import { ResponsibleContainer } from '../ResponsibleContainer';
 import { CommonPage } from './CommonPage';
 /**
  * Fixed height list page
@@ -14,119 +8,39 @@ import { CommonPage } from './CommonPage';
  * @returns Component
  */
 export function ResponsivePage(props) {
-    var _a, _b;
+    var _a;
     // Destruct
-    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, loadData, innerItemRenderer, itemSize, mRef, sizeReadyMiliseconds = 0, pageProps = {}, ...rest } = props;
+    const { pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
-    // States
-    const [states, setStates] = React.useReducer((currentState, newState) => {
-        return { ...currentState, ...newState };
-    }, {
-        height
-    });
-    const localLoadData = (props) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-    const refs = useCombinedRefs(mRef, (ref) => {
-        if (ref == null)
-            return;
-        states.ref = ref;
-        // setStates({ ref });
-    });
-    // On submit callback
-    const onSubmit = (data, _reset) => {
-        setStates({ data });
-    };
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
-    const rect = dimensions[0][2];
-    const showDataGrid = ((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0) >= dataGridMinWidth;
-    React.useEffect(() => {
-        if (rect != null && rect.height > 50 && height == null) {
-            let gridHeight = window.innerHeight - Math.round(rect.top + rect.height + 1);
-            const style = window.getComputedStyle(dimensions[0][1]);
-            const boxPadding = parseFloat(style.paddingLeft);
-            if (!isNaN(boxPadding))
-                gridHeight -= 2 * boxPadding;
-            if (adjustHeight != null) {
-                gridHeight -= adjustHeight(gridHeight);
-            }
-            if (gridHeight !== states.height)
-                setStates({ height: gridHeight });
-        }
-    }, [rect]);
-    const { paddings, ...pageRest } = pageProps;
-    const list = React.useMemo(() => {
-        const gridHeight = states.height;
-        if (gridHeight == null)
-            return;
-        // Show in a row when under DataGrid
-        pageProps.fabColumnDirection = !showDataGrid;
-        if (showDataGrid) {
-            // Delete
-            delete rest.itemRenderer;
-            return (React.createElement(Box, { sx: {
-                    padding: paddings
-                } },
-                React.createElement(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, columns: columns, outerRef: (element) => {
-                        if (element != null)
-                            setStates({ element });
-                    }, ...rest })));
-        }
-        // Delete
-        delete rest.checkable;
-        delete rest.borderRowsCount;
-        delete rest.bottomHeight;
-        delete rest.footerItemRenderer;
-        delete rest.headerHeight;
-        delete rest.hideFooter;
-        delete rest.hoverColor;
-        delete rest.selectable;
-        // Half
-        const halfPadding = MUGlobal.half(paddings);
-        const style = window.getComputedStyle(dimensions[0][1]);
-        const boxPadding = parseFloat(style.paddingLeft);
-        return (React.createElement(Box, { sx: {
-                height: gridHeight + (isNaN(boxPadding) ? 0 : boxPadding),
-                paddingTop: halfPadding,
-                paddingBottom: halfPadding
-            } },
-            React.createElement(ScrollerListEx, { autoLoad: false, height: gridHeight, innerItemRenderer: innerItemRenderer, itemSize: itemSize, loadData: localLoadData, mRef: refs, oRef: (element) => {
-                    if (element != null)
-                        setStates({ element });
-                }, ...rest })));
-    }, [states.height, showDataGrid, localLoadData]);
-    const sizeRef = React.useRef();
-    const { ref, data } = states;
-    React.useEffect(() => {
-        if (ref == null || data == null || rect == null)
-            return;
-        // Resize without reset
-        if (sizeRef.current == null) {
-            sizeRef.current = [rect.width, rect.height];
-        }
-        else if (sizeRef.current[0] !== rect.width ||
-            sizeRef.current[1] !== rect.height) {
-            sizeRef.current = [rect.width, rect.height];
-            return;
-        }
-        ref.reset({ data });
-    });
-    // Pull container id
-    const pullContainer = states.element
-        ? showDataGrid
-            ? '.DataGridEx-Body'
-            : '.ScrollerListEx-Body'
-        : undefined;
+    const { paddings, fabColumnDirection, ...pageRest } = pageProps;
+    // State
+    const [scrollContainer, setScrollContainer] = React.useState();
+    const [direction, setDirection] = React.useState(fabColumnDirection);
     // Layout
-    return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: states.element, pullContainer: pullContainer },
-        React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], sx: {
-                    paddingLeft: paddings,
-                    paddingTop: MUGlobal.increase(paddings, 0.5, 'xs'),
-                    paddingRight: paddings
-                } },
-                React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),
-            list)));
+    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
+                    };
+                }
+            }, elementReady: (element, isDataGrid) => {
+                setDirection(!isDataGrid);
+                setScrollContainer(element);
+            }, listBoxSx: (dataGrid, height) => {
+                if (dataGrid) {
+                    return {};
+                }
+                else {
+                    return {
+                        height: height
+                    };
+                }
+            }, ...rest })));
 }

package/lib/mu/pages/ResponsivePageProps.d.ts

@@ -28,4 +28,8 @@ export interface ResponsePageProps<T, F extends DataTypes.BasicTemplate> extends
      * Methods
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
+    /**
+     * Pull to refresh data
+     */
+    pullToRefresh?: boolean;
 }