@etsoo/react 1.4.24 → 1.4.25

package/lib/components/ScrollerList.js

@@ -120,6 +120,8 @@ export const ScrollerList = (props) => {
                     ...add
                 };
                 Object.assign(state, resetState);
+                // Reset
+                setRows([]);
             },
             scrollTo(scrollOffset) {
                 refMethods.scrollTo(scrollOffset);

package/lib/mu/ResponsibleContainer.d.ts

@@ -51,7 +51,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
      */

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: half,
+        paddingRight: half,
+        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, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, listBoxSx, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, searchBoxSx = getDefaultSearchBoxSx(paddings), sizeReadyMiliseconds = 0, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -70,7 +79,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
@@ -95,7 +104,9 @@ export function ResponsibleContainer(props) {
             // Delete
             delete rest.itemRenderer;
             return [
-                React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(true) },
+                React.createElement(Box, { sx: listBoxSx == null
+                        ? undefined
+                        : listBoxSx(true, heightLocal) },
                     React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, columns: columns, ...rest })),
                 true
             ];
@@ -110,21 +121,28 @@ export function ResponsibleContainer(props) {
         delete rest.hoverColor;
         delete rest.selectable;
         return [
-            React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(false) },
+            React.createElement(Box, { sx: listBoxSx == null
+                    ? undefined
+                    : listBoxSx(false, heightLocal) },
                 React.createElement(ScrollerListEx, { autoLoad: !hasFields, width: rect.width, height: heightLocal, loadData: localLoadData, mRef: mRefs, ...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,
         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);
@@ -69,12 +69,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

@@ -61,13 +61,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,26 @@ 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 halfPadding = MUGlobal.half(paddings);
     // 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: {} },
+        React.createElement(ResponsibleContainer, { paddings: paddings, listBoxSx: (dataGrid, height) => {
+                if (dataGrid) {
+                    return {
+                        padding: paddings
+                    };
+                }
+                else {
+                    return {
+                        height,
+                        paddingTop: halfPadding,
+                        paddingBottom: halfPadding
+                    };
+                }
+            }, ...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;
 }

package/lib/mu/pages/TablePage.js

@@ -6,7 +6,7 @@ import { useDimensions } from '../../uses/useDimensions';
 import { MUGlobal } from '../MUGlobal';
 import { SearchBar } from '../SearchBar';
 import { TableEx, TableExMinWidth } from '../TableEx';
-import { CommonPage, CommonPagePullContainer, CommonPageScrollContainer } from './CommonPage';
+import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 /**
  * Table page
  * @param props Props
@@ -60,7 +60,7 @@ export function TablePage(props) {
         }
     }, [rect]);
     // Layout
-    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer, pullContainer: CommonPagePullContainer },
+    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer },
         React.createElement(Stack, null,
             React.createElement(Box, { ref: dimensions[0][0], sx: {
                     paddingBottom: pageProps.paddings

package/package.json

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

package/src/components/ScrollerList.tsx

@@ -248,6 +248,9 @@ export const ScrollerList = <T extends Record<string, any>>(
                         ...add
                     };
                     Object.assign(state, resetState);
+
+                    // Reset
+                    setRows([]);
                 },
 
                 scrollTo(scrollOffset: number): void {

package/src/mu/ResponsibleContainer.tsx

@@ -91,7 +91,7 @@ export interface ResponsibleContainerProps<
     /**
      * Listbox SX (dataGrid determines the case)
      */
-    listBoxSx?: (dataGrid: boolean) => SxProps<Theme>;
+    listBoxSx?: (dataGrid: boolean, height: number) => SxProps<Theme>;
 
     /**
      * Load data callback
@@ -132,6 +132,16 @@ interface LocalRefs {
     mounted?: boolean;
 }
 
+function getDefaultSearchBoxSx(paddings: {}): SxProps<Theme> {
+    const half = MUGlobal.half(paddings);
+    return {
+        paddingLeft: half,
+        paddingRight: half,
+        paddingTop: half,
+        marginBottom: half
+    };
+}
+
 /**
  * Responsible container
  * @param props Props
@@ -154,7 +164,7 @@ export function ResponsibleContainer<
         mRef,
         paddings = MUGlobal.pagePaddings,
         pullToRefresh = true,
-        searchBoxSx = { marginBottom: MUGlobal.half(paddings) },
+        searchBoxSx = getDefaultSearchBoxSx(paddings),
         sizeReadyMiliseconds = 0,
         ...rest
     } = props;
@@ -228,7 +238,7 @@ export function ResponsibleContainer<
     // Create list
     const [list, showDataGrid] = (() => {
         // No layout
-        if (rect == null) return [null, false];
+        if (rect == null) return [null, undefined];
 
         // Width
         const width = rect.width;
@@ -258,7 +268,13 @@ export function ResponsibleContainer<
             delete rest.itemRenderer;
 
             return [
-                <Box sx={listBoxSx == null ? undefined : listBoxSx(true)}>
+                <Box
+                    sx={
+                        listBoxSx == null
+                            ? undefined
+                            : listBoxSx(true, heightLocal)
+                    }
+                >
                     <DataGridEx<T>
                         autoLoad={!hasFields}
                         height={heightLocal}
@@ -284,7 +300,13 @@ export function ResponsibleContainer<
         delete rest.selectable;
 
         return [
-            <Box sx={listBoxSx == null ? undefined : listBoxSx(false)}>
+            <Box
+                sx={
+                    listBoxSx == null
+                        ? undefined
+                        : listBoxSx(false, heightLocal)
+                }
+            >
                 <ScrollerListEx<T>
                     autoLoad={!hasFields}
                     width={rect.width}
@@ -298,21 +320,31 @@ export function ResponsibleContainer<
         ];
     })();
 
+    const searchBar = React.useMemo(() => {
+        if (!hasFields || showDataGrid == null) return;
+        return (
+            <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.Fragment>
             <Stack>
                 <Box ref={dimensions[0][0]} sx={searchBoxSx}>
-                    {hasFields && (
-                        <SearchBar fields={fields} onSubmit={onSubmit} />
-                    )}
+                    {searchBar}
                 </Box>
                 {list}
             </Stack>

package/src/mu/SearchBar.tsx

@@ -99,18 +99,18 @@ export function SearchBar(props: SearchBarProps) {
     // Drawer open / close
     const [open, updateOpen] = React.useState(false);
 
-    // Forms
-    const [forms] = React.useState<{
+    // State
+    const state = React.useRef<{
         form?: HTMLFormElement;
         moreForm?: HTMLFormElement;
         submitSeed?: number;
         lastMaxWidth?: number;
-    }>({});
+    }>({}).current;
 
     // Watch container
     const { dimensions } = useDimensions(1, (target, rect) => {
         // Same logic from resetButtonRef
-        if (rect.width === forms.lastMaxWidth) return false;
+        if (rect.width === state.lastMaxWidth) return false;
 
         // Len
         const len = target.children.length;
@@ -143,10 +143,10 @@ export function SearchBar(props: SearchBarProps) {
 
         // 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!;
@@ -241,7 +241,7 @@ export function SearchBar(props: SearchBarProps) {
     const handleForm = (event: React.FormEvent<HTMLFormElement>) => {
         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();
     };
@@ -255,7 +255,7 @@ export function SearchBar(props: SearchBarProps) {
     const moreFormChange = (event: React.FormEvent<HTMLFormElement>) => {
         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();
     };
@@ -263,8 +263,8 @@ export function SearchBar(props: SearchBarProps) {
     // 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);
@@ -272,23 +272,23 @@ export function SearchBar(props: SearchBarProps) {
 
     // 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: boolean = 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);
@@ -296,15 +296,17 @@ export function SearchBar(props: SearchBarProps) {
 
     // 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.Fragment>
@@ -313,7 +315,7 @@ export function SearchBar(props: SearchBarProps) {
                 className={className}
                 onChange={handleForm}
                 ref={(form) => {
-                    if (form) forms.form = form;
+                    if (form) state.form = form;
                 }}
             >
                 <Stack
@@ -374,7 +376,7 @@ export function SearchBar(props: SearchBarProps) {
                     <form
                         onChange={moreFormChange}
                         ref={(form) => {
-                            if (form) forms.moreForm = form;
+                            if (form) state.moreForm = form;
                         }}
                     >
                         <Stack

package/src/mu/pages/CommonPage.tsx

@@ -1,7 +1,6 @@
 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 { CommonPageProps } from './CommonPageProps';
@@ -10,11 +9,6 @@ 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
  */
@@ -41,7 +35,6 @@ export function CommonPage(props: CommonPageProps) {
         paddings = MUGlobal.pagePaddings,
         scrollContainer,
         targetFields,
-        pullContainer,
         sx = {},
         ...rest
     } = props;
@@ -125,20 +118,6 @@ export function CommonPage(props: CommonPageProps) {
                 </FabBox>
                 {children}
             </Container>
-            {onRefresh != null && pullContainer != null && (
-                <PullToRefreshUI
-                    mainElement={pullContainer}
-                    triggerElement={pullContainer}
-                    instructionsPullToRefresh={labels.pullToRefresh}
-                    instructionsReleaseToRefresh={labels.releaseToRefresh}
-                    instructionsRefreshing={labels.refreshing}
-                    onRefresh={onRefresh}
-                    shouldPullToRefresh={() => {
-                        const container = document.querySelector(pullContainer);
-                        return !container?.scrollTop;
-                    }}
-                />
-            )}
         </React.Fragment>
     );
 }

package/src/mu/pages/CommonPageProps.ts

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

package/src/mu/pages/DataGridPage.tsx

@@ -113,18 +113,9 @@ export function DataGridPage<
         ref.reset({ data });
     }, [ref, data]);
 
-    // Pull container id
-    const pullContainer = states.element?.parentElement
-        ? '.DataGridEx-Body'
-        : undefined;
-
     // Layout
     return (
-        <CommonPage
-            {...pageProps}
-            scrollContainer={states.element}
-            pullContainer={pullContainer}
-        >
+        <CommonPage {...pageProps} scrollContainer={states.element}>
             <Stack>
                 <Box
                     ref={dimensions[0][0]}

package/src/mu/pages/FixedListPage.tsx

@@ -113,11 +113,6 @@ export function FixedListPage<
         }
     }, [rect]);
 
-    // Pull container id
-    const pullContainer = scrollContainer?.parentElement
-        ? '#' + scrollContainer?.parentElement.id
-        : undefined;
-
     const { paddings, ...pageRest } = pageProps;
 
     // Layout
@@ -126,7 +121,6 @@ export function FixedListPage<
             {...pageRest}
             paddings={{}}
             scrollContainer={scrollContainer}
-            pullContainer={pullContainer}
         >
             <Stack>
                 <Box ref={dimensions[0][0]} sx={{ padding: paddings }}>

package/src/mu/pages/ListPage.tsx

@@ -7,11 +7,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';
 import { ListPageProps } from './ListPageProps';
 
 /**
@@ -69,11 +65,7 @@ export function ListPage<
 
     // Layout
     return (
-        <CommonPage
-            {...pageProps}
-            scrollContainer={CommonPageScrollContainer}
-            pullContainer={CommonPagePullContainer}
-        >
+        <CommonPage {...pageProps} scrollContainer={CommonPageScrollContainer}>
             <Stack>
                 <Box
                     sx={{

package/src/mu/pages/ResponsivePage.tsx

@@ -1,24 +1,10 @@
 import { DataTypes } from '@etsoo/shared';
-import { Box, Stack } from '@mui/material';
 import React from 'react';
-import { GridDataGet, GridLoadDataProps } from '../../components/GridLoader';
-import useCombinedRefs from '../../uses/useCombinedRefs';
-import { useDimensions } from '../../uses/useDimensions';
-import { DataGridEx, DataGridExCalColumns } from '../DataGridEx';
-import { GridMethodRef } from '../GridMethodRef';
 import { MUGlobal } from '../MUGlobal';
-import { ScrollerListEx } from '../ScrollerListEx';
-import { SearchBar } from '../SearchBar';
+import { ResponsibleContainer } from '../ResponsibleContainer';
 import { CommonPage } from './CommonPage';
 import { ResponsePageProps } from './ResponsivePageProps';
 
-interface LocalStates {
-    data?: FormData;
-    element?: HTMLElement;
-    height?: number;
-    ref?: GridMethodRef;
-}
-
 /**
  * Fixed height list page
  * @param props Props
@@ -29,193 +15,33 @@ export function ResponsivePage<
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
 >(props: ResponsePageProps<T, F>) {
     // Destruct
-    const {
-        adjustHeight,
-        columns,
-        dataGridMinWidth = DataGridExCalColumns(columns).total,
-        fields,
-        fieldTemplate,
-        height,
-        loadData,
-        innerItemRenderer,
-        itemSize,
-        mRef,
-        sizeReadyMiliseconds = 0,
-        pageProps = {},
-        ...rest
-    } = props;
+    const { pageProps = {}, ...rest } = props;
 
     pageProps.paddings ??= MUGlobal.pagePaddings;
-
-    // States
-    const [states, setStates] = React.useReducer(
-        (currentState: LocalStates, newState: Partial<LocalStates>) => {
-            return { ...currentState, ...newState };
-        },
-        {
-            height
-        }
-    );
-
-    const localLoadData = (props: GridLoadDataProps) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-
-    const refs = useCombinedRefs(mRef, (ref: GridMethodRef) => {
-        if (ref == null) return;
-        states.ref = ref;
-        // setStates({ ref });
-    });
-
-    // On submit callback
-    const onSubmit = (data: FormData, _reset: boolean) => {
-        setStates({ data });
-    };
-
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
-    const rect = dimensions[0][2];
-    const showDataGrid = (rect?.width ?? 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 (
-                <Box
-                    sx={{
-                        padding: paddings
-                    }}
-                >
-                    <DataGridEx<T>
-                        autoLoad={false}
-                        height={gridHeight}
-                        loadData={localLoadData}
-                        mRef={refs}
-                        columns={columns}
-                        outerRef={(element?: HTMLDivElement) => {
-                            if (element != null) setStates({ element });
-                        }}
-                        {...rest}
-                    />
-                </Box>
-            );
-        }
-
-        // 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 (
-            <Box
-                sx={{
-                    height: gridHeight + (isNaN(boxPadding) ? 0 : boxPadding),
-                    paddingTop: halfPadding,
-                    paddingBottom: halfPadding
-                }}
-            >
-                <ScrollerListEx<T>
-                    autoLoad={false}
-                    height={gridHeight}
-                    innerItemRenderer={innerItemRenderer}
-                    itemSize={itemSize}
-                    loadData={localLoadData}
-                    mRef={refs}
-                    oRef={(element) => {
-                        if (element != null) setStates({ element });
-                    }}
-                    {...rest}
-                />
-            </Box>
-        );
-    }, [states.height, showDataGrid, localLoadData]);
-
-    const sizeRef = React.useRef<[number, number]>();
-
-    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 halfPadding = MUGlobal.half(paddings);
 
     // Layout
     return (
-        <CommonPage
-            {...pageRest}
-            paddings={{}}
-            scrollContainer={states.element}
-            pullContainer={pullContainer}
-        >
-            <Stack>
-                <Box
-                    ref={dimensions[0][0]}
-                    sx={{
-                        paddingLeft: paddings,
-                        paddingTop: MUGlobal.increase(paddings, 0.5, 'xs'),
-                        paddingRight: paddings
-                    }}
-                >
-                    <SearchBar fields={fields} onSubmit={onSubmit} />
-                </Box>
-                {list}
-            </Stack>
+        <CommonPage {...pageRest} paddings={{}}>
+            <ResponsibleContainer<T, F>
+                paddings={paddings}
+                listBoxSx={(dataGrid, height) => {
+                    if (dataGrid) {
+                        return {
+                            padding: paddings
+                        };
+                    } else {
+                        return {
+                            height,
+                            paddingTop: halfPadding,
+                            paddingBottom: halfPadding
+                        };
+                    }
+                }}
+                {...rest}
+            />
         </CommonPage>
     );
 }

package/src/mu/pages/ResponsivePageProps.ts

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

package/src/mu/pages/TablePage.tsx

@@ -7,11 +7,7 @@ import { useDimensions } from '../../uses/useDimensions';
 import { MUGlobal } from '../MUGlobal';
 import { SearchBar } from '../SearchBar';
 import { TableEx, TableExMethodRef, TableExMinWidth } from '../TableEx';
-import {
-    CommonPage,
-    CommonPagePullContainer,
-    CommonPageScrollContainer
-} from './CommonPage';
+import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 import { TablePageProps } from './TablePageProps';
 
 /**
@@ -104,11 +100,7 @@ export function TablePage<
 
     // Layout
     return (
-        <CommonPage
-            {...pageProps}
-            scrollContainer={CommonPageScrollContainer}
-            pullContainer={CommonPagePullContainer}
-        >
+        <CommonPage {...pageProps} scrollContainer={CommonPageScrollContainer}>
             <Stack>
                 <Box
                     ref={dimensions[0][0]}