@etsoo/materialui 1.1.57 → 1.1.59

package/lib/ResponsibleContainer.d.ts

@@ -12,6 +12,7 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
     /**
      * Height will be deducted
      * @param height Current calcuated height
+     * @param rect Current rect data
      */
     adjustHeight?: (height: number, rect: DOMRect) => number;
     /**

package/lib/ResponsibleContainer.js

@@ -22,7 +22,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight, ...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, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -130,7 +130,7 @@ export function ResponsibleContainer(props) {
     const searchBar = React.useMemo(() => {
         if (!hasFields || showDataGrid == null)
             return;
-        return (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, innerHeight: searchBarHeight }));
+        return (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
     }, [showDataGrid, hasFields, searchBarHeight]);
     // Pull container
     const pullContainer = showDataGrid == null
@@ -143,7 +143,7 @@ export function ResponsibleContainer(props) {
             ? undefined
             : containerBoxSx(paddings, hasFields, showDataGrid) },
         React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox", sx: { height: hasFields ? 40 : 0 } }, searchBar),
+            React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox", sx: { height: hasFields ? searchBarHeight : 0 } }, 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/SearchBar.d.ts

@@ -11,11 +11,6 @@ export interface SearchBarProps {
      * Fields
      */
     fields: React.ReactElement[];
-    /**
-     * Inner height
-     * @default 40
-     */
-    innerHeight?: number;
     /**
      * On submit callback
      */

package/lib/SearchBar.js

@@ -52,7 +52,7 @@ const setChildState = (child, enabled) => {
  */
 export function SearchBar(props) {
     // Destruct
-    const { className, fields, innerHeight = 45.6, onSubmit } = props;
+    const { className, fields, onSubmit } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Spacing
@@ -223,7 +223,7 @@ export function SearchBar(props) {
                 if (form)
                     state.form = form;
             } },
-            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, height: innerHeight < 1 ? undefined : innerHeight, sx: {
+            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, sx: {
                     "& > :not(style)": {
                         flexBasis: "auto",
                         flexGrow: 0,

package/lib/pages/DataGridPage.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { DataGridPageProps } from './DataGridPageProps';
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { DataGridPageProps } from "./DataGridPageProps";
 /**
  * DataGrid page
  * @param props Props

package/lib/pages/DataGridPage.js

@@ -1,10 +1,10 @@
-import { GridDataGet, useCombinedRefs, useDimensions } from '@etsoo/react';
-import { Box, Stack } from '@mui/material';
-import React from 'react';
-import { DataGridEx } from '../DataGridEx';
-import { MUGlobal } from '../MUGlobal';
-import { SearchBar } from '../SearchBar';
-import { CommonPage } from './CommonPage';
+import { GridDataGet, useCombinedRefs, useDimensions } from "@etsoo/react";
+import { Box, Stack } from "@mui/material";
+import React from "react";
+import { DataGridEx } from "../DataGridEx";
+import { MUGlobal } from "../MUGlobal";
+import { SearchBar } from "../SearchBar";
+import { CommonPage } from "./CommonPage";
 /**
  * DataGrid page
  * @param props Props
@@ -46,9 +46,8 @@ export function DataGridPage(props) {
             const paddingBottom = parseFloat(style.paddingBottom);
             if (!isNaN(paddingBottom))
                 gridHeight -= paddingBottom;
-            if (adjustHeight != null) {
-                gridHeight -= adjustHeight(gridHeight);
-            }
+            if (adjustHeight != null)
+                gridHeight -= adjustHeight(gridHeight, rect);
             if (gridHeight !== states.height)
                 setStates({ height: gridHeight });
         }

package/lib/pages/DataGridPageProps.d.ts

@@ -1,15 +1,16 @@
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { DataGridExProps } from '../DataGridEx';
-import { SearchPageProps } from './SearchPageProps';
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { DataGridExProps } from "../DataGridEx";
+import { SearchPageProps } from "./SearchPageProps";
 /**
  * DataGrid page props
  */
-export type DataGridPageProps<T extends object, F extends DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>> = SearchPageProps<T, F> & Omit<DataGridExProps<T, D>, 'loadData' | 'height'> & {
+export type DataGridPageProps<T extends object, F extends DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>> = SearchPageProps<T, F> & Omit<DataGridExProps<T, D>, "loadData" | "height"> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height
+     * @param rect Current rect data
      */
-    adjustHeight?: (height: number) => number;
+    adjustHeight?: (height: number, rect: DOMRect) => number;
     /**
      * Grid height
      */

package/lib/pages/FixedListPage.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { ListPageProps } from './ListPageProps';
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { ListPageProps } from "./ListPageProps";
 /**
  * Fixed height list page
  * @param props Props
@@ -10,6 +10,7 @@ export declare function FixedListPage<T extends object, F extends DataTypes.Basi
     /**
      * Height will be deducted
      * @param height Current calcuated height
+     * @param rect Current rect data
      */
-    adjustHeight?: (height: number) => number;
+    adjustHeight?: (height: number, rect: DOMRect) => number;
 }): JSX.Element;

package/lib/pages/FixedListPage.js

@@ -1,10 +1,10 @@
-import { GridDataGet, useCombinedRefs, useDimensions } from '@etsoo/react';
-import { Box, Stack } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from '../MUGlobal';
-import { ScrollerListEx } from '../ScrollerListEx';
-import { SearchBar } from '../SearchBar';
-import { CommonPage } from './CommonPage';
+import { GridDataGet, useCombinedRefs, useDimensions } from "@etsoo/react";
+import { Box, Stack } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "../MUGlobal";
+import { ScrollerListEx } from "../ScrollerListEx";
+import { SearchBar } from "../SearchBar";
+import { CommonPage } from "./CommonPage";
 /**
  * Fixed height list page
  * @param props Props
@@ -48,11 +48,10 @@ export function FixedListPage(props) {
         if (rect != null && rect.height > 50) {
             let height = document.documentElement.clientHeight -
                 Math.round(rect.top + rect.height + 1);
-            if (adjustHeight != null) {
-                height -= adjustHeight(height);
-            }
+            if (adjustHeight != null)
+                height -= adjustHeight(height, rect);
             return (React.createElement(Box, { id: "list-container", sx: {
-                    height: height + 'px'
+                    height: height + "px"
                 } },
                 React.createElement(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, oRef: (element) => {
                         if (element != null)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.57",
+  "version": "1.1.59",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/ResponsibleContainer.tsx

@@ -41,6 +41,7 @@ export type ResponsibleContainerProps<
   /**
    * Height will be deducted
    * @param height Current calcuated height
+   * @param rect Current rect data
    */
   adjustHeight?: (height: number, rect: DOMRect) => number;
 
@@ -183,7 +184,7 @@ export function ResponsibleContainer<
     pullToRefresh = true,
     quickAction,
     sizeReadyMiliseconds = 0,
-    searchBarHeight,
+    searchBarHeight = 45.6,
     ...rest
   } = props;
 
@@ -341,7 +342,6 @@ export function ResponsibleContainer<
         fields={fields}
         onSubmit={onSubmit}
         className={`searchBar${showDataGrid ? "Grid" : "List"}`}
-        innerHeight={searchBarHeight}
       />
     );
   }, [showDataGrid, hasFields, searchBarHeight]);
@@ -367,7 +367,7 @@ export function ResponsibleContainer<
         <Box
           ref={dimensions[0][0]}
           className="SearchBox"
-          sx={{ height: hasFields ? 40 : 0 }}
+          sx={{ height: hasFields ? searchBarHeight : 0 }}
         >
           {searchBar}
         </Box>

package/src/SearchBar.tsx

@@ -19,12 +19,6 @@ export interface SearchBarProps {
    */
   fields: React.ReactElement[];
 
-  /**
-   * Inner height
-   * @default 40
-   */
-  innerHeight?: number;
-
   /**
    * On submit callback
    */
@@ -83,7 +77,7 @@ const setChildState = (child: Element, enabled: boolean) => {
  */
 export function SearchBar(props: SearchBarProps) {
   // Destruct
-  const { className, fields, innerHeight = 45.6, onSubmit } = props;
+  const { className, fields, onSubmit } = props;
 
   // Labels
   const labels = Labels.CommonPage;
@@ -311,7 +305,6 @@ export function SearchBar(props: SearchBarProps) {
           alignItems="center"
           direction="row"
           spacing={1}
-          height={innerHeight < 1 ? undefined : innerHeight}
           sx={{
             "& > :not(style)": {
               flexBasis: "auto",

package/src/pages/DataGridPage.tsx

@@ -1,24 +1,24 @@
 import {
-    GridDataGet,
-    GridLoadDataProps,
-    ScrollerGridForwardRef,
-    useCombinedRefs,
-    useDimensions
-} from '@etsoo/react';
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { Box, Stack } from '@mui/material';
-import React from 'react';
-import { DataGridEx } from '../DataGridEx';
-import { MUGlobal } from '../MUGlobal';
-import { SearchBar } from '../SearchBar';
-import { CommonPage } from './CommonPage';
-import { DataGridPageProps } from './DataGridPageProps';
+  GridDataGet,
+  GridLoadDataProps,
+  ScrollerGridForwardRef,
+  useCombinedRefs,
+  useDimensions
+} from "@etsoo/react";
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { Box, Stack } from "@mui/material";
+import React from "react";
+import { DataGridEx } from "../DataGridEx";
+import { MUGlobal } from "../MUGlobal";
+import { SearchBar } from "../SearchBar";
+import { CommonPage } from "./CommonPage";
+import { DataGridPageProps } from "./DataGridPageProps";
 
 interface LocalStates<T> {
-    data?: FormData;
-    element?: HTMLElement;
-    height?: number;
-    ref?: ScrollerGridForwardRef<T>;
+  data?: FormData;
+  element?: HTMLElement;
+  height?: number;
+  ref?: ScrollerGridForwardRef<T>;
 }
 
 /**
@@ -27,114 +27,112 @@ interface LocalStates<T> {
  * @returns Component
  */
 export function DataGridPage<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
+  T extends object,
+  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: DataGridPageProps<T, F, D>) {
-    // Destruct
-    const {
-        adjustHeight,
-        fields,
-        fieldTemplate,
-        height,
-        loadData,
-        mRef,
-        sizeReadyMiliseconds = 100,
-        pageProps = {},
-        ...rest
-    } = props;
-
-    pageProps.paddings ??= MUGlobal.pagePaddings;
-
-    // States
-    const [states, setStates] = React.useReducer(
-        (currentState: LocalStates<T>, newState: Partial<LocalStates<T>>) => {
-            return { ...currentState, ...newState };
-        },
-        {
-            height
-        }
-    );
-
-    const refs = useCombinedRefs<ScrollerGridForwardRef<T>>(
-        mRef,
-        (ref: ScrollerGridForwardRef<T> | null | undefined) => {
-            if (ref == null) return;
-            states.ref = ref;
-            //setStates({ ref });
-        }
-    );
+  // Destruct
+  const {
+    adjustHeight,
+    fields,
+    fieldTemplate,
+    height,
+    loadData,
+    mRef,
+    sizeReadyMiliseconds = 100,
+    pageProps = {},
+    ...rest
+  } = props;
+
+  pageProps.paddings ??= MUGlobal.pagePaddings;
+
+  // States
+  const [states, setStates] = React.useReducer(
+    (currentState: LocalStates<T>, newState: Partial<LocalStates<T>>) => {
+      return { ...currentState, ...newState };
+    },
+    {
+      height
+    }
+  );
+
+  const refs = useCombinedRefs<ScrollerGridForwardRef<T>>(
+    mRef,
+    (ref: ScrollerGridForwardRef<T> | null | undefined) => {
+      if (ref == null) return;
+      states.ref = ref;
+      //setStates({ ref });
+    }
+  );
+
+  // On submit callback
+  const onSubmit = (data: FormData, _reset: boolean) => {
+    setStates({ data });
+  };
+
+  const localLoadData = (props: GridLoadDataProps) => {
+    const data = GridDataGet(props, fieldTemplate);
+    return loadData(data);
+  };
+
+  // Watch container
+  const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
+  const rect = dimensions[0][2];
+
+  React.useEffect(() => {
+    if (rect != null && rect.height > 50 && height == null) {
+      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)) gridHeight -= paddingBottom;
+
+      if (adjustHeight != null) gridHeight -= adjustHeight(gridHeight, rect);
+
+      if (gridHeight !== states.height) setStates({ height: gridHeight });
+    }
+  }, [rect]);
+
+  const list = React.useMemo(() => {
+    const gridHeight = states.height;
+    if (gridHeight == null) return;
 
-    // On submit callback
-    const onSubmit = (data: FormData, _reset: boolean) => {
-        setStates({ data });
-    };
-
-    const localLoadData = (props: GridLoadDataProps) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
-    const rect = dimensions[0][2];
-
-    React.useEffect(() => {
-        if (rect != null && rect.height > 50 && height == null) {
-            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)) gridHeight -= paddingBottom;
-
-            if (adjustHeight != null) {
-                gridHeight -= adjustHeight(gridHeight);
-            }
-
-            if (gridHeight !== states.height) setStates({ height: gridHeight });
-        }
-    }, [rect]);
-
-    const list = React.useMemo(() => {
-        const gridHeight = states.height;
-        if (gridHeight == null) return;
-
-        return (
-            <DataGridEx<T, D>
-                autoLoad={false}
-                height={gridHeight}
-                loadData={localLoadData}
-                mRef={refs}
-                outerRef={(element?: HTMLDivElement) => {
-                    if (element != null) setStates({ element });
-                }}
-                {...rest}
-            />
-        );
-    }, [states.height]);
-
-    const { ref, data } = states;
-    React.useEffect(() => {
-        if (ref == null || data == null) return;
-        ref.reset({ data });
-    }, [ref, data]);
-
-    // Layout
     return (
-        <CommonPage {...pageProps} scrollContainer={states.element}>
-            <Stack>
-                <Box
-                    ref={dimensions[0][0]}
-                    sx={{
-                        paddingBottom: pageProps.paddings
-                    }}
-                >
-                    <SearchBar fields={fields} onSubmit={onSubmit} />
-                </Box>
-                {list}
-            </Stack>
-        </CommonPage>
+      <DataGridEx<T, D>
+        autoLoad={false}
+        height={gridHeight}
+        loadData={localLoadData}
+        mRef={refs}
+        outerRef={(element?: HTMLDivElement) => {
+          if (element != null) setStates({ element });
+        }}
+        {...rest}
+      />
     );
+  }, [states.height]);
+
+  const { ref, data } = states;
+  React.useEffect(() => {
+    if (ref == null || data == null) return;
+    ref.reset({ data });
+  }, [ref, data]);
+
+  // Layout
+  return (
+    <CommonPage {...pageProps} scrollContainer={states.element}>
+      <Stack>
+        <Box
+          ref={dimensions[0][0]}
+          sx={{
+            paddingBottom: pageProps.paddings
+          }}
+        >
+          <SearchBar fields={fields} onSubmit={onSubmit} />
+        </Box>
+        {list}
+      </Stack>
+    </CommonPage>
+  );
 }

package/src/pages/DataGridPageProps.ts

@@ -1,24 +1,25 @@
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { DataGridExProps } from '../DataGridEx';
-import { SearchPageProps } from './SearchPageProps';
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { DataGridExProps } from "../DataGridEx";
+import { SearchPageProps } from "./SearchPageProps";
 
 /**
  * DataGrid page props
  */
 export type DataGridPageProps<
-    T extends object,
-    F extends DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
+  T extends object,
+  F extends DataTypes.BasicTemplate,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>
 > = SearchPageProps<T, F> &
-    Omit<DataGridExProps<T, D>, 'loadData' | 'height'> & {
-        /**
-         * Height will be deducted
-         * @param height Current calcuated height
-         */
-        adjustHeight?: (height: number) => number;
+  Omit<DataGridExProps<T, D>, "loadData" | "height"> & {
+    /**
+     * Height will be deducted
+     * @param height Current calcuated height
+     * @param rect Current rect data
+     */
+    adjustHeight?: (height: number, rect: DOMRect) => number;
 
-        /**
-         * Grid height
-         */
-        height?: number;
-    };
+    /**
+     * Grid height
+     */
+    height?: number;
+  };

package/src/pages/FixedListPage.tsx

@@ -1,18 +1,18 @@
 import {
-    GridDataGet,
-    GridLoadDataProps,
-    ScrollerListForwardRef,
-    useCombinedRefs,
-    useDimensions
-} from '@etsoo/react';
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { Box, Stack } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from '../MUGlobal';
-import { ScrollerListEx } from '../ScrollerListEx';
-import { SearchBar } from '../SearchBar';
-import { CommonPage } from './CommonPage';
-import { ListPageProps } from './ListPageProps';
+  GridDataGet,
+  GridLoadDataProps,
+  ScrollerListForwardRef,
+  useCombinedRefs,
+  useDimensions
+} from "@etsoo/react";
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { Box, Stack } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "../MUGlobal";
+import { ScrollerListEx } from "../ScrollerListEx";
+import { SearchBar } from "../SearchBar";
+import { CommonPage } from "./CommonPage";
+import { ListPageProps } from "./ListPageProps";
 
 /**
  * Fixed height list page
@@ -20,122 +20,117 @@ import { ListPageProps } from './ListPageProps';
  * @returns Component
  */
 export function FixedListPage<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
+  T extends object,
+  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(
-    props: ListPageProps<T, F, D> & {
-        /**
-         * Height will be deducted
-         * @param height Current calcuated height
-         */
-        adjustHeight?: (height: number) => number;
-    }
+  props: ListPageProps<T, F, D> & {
+    /**
+     * Height will be deducted
+     * @param height Current calcuated height
+     * @param rect Current rect data
+     */
+    adjustHeight?: (height: number, rect: DOMRect) => number;
+  }
 ) {
-    // Destruct
-    const {
-        adjustHeight,
-        fields,
-        fieldTemplate,
-        loadData,
-        mRef,
-        sizeReadyMiliseconds = 0,
-        pageProps = {},
-        ...rest
-    } = props;
-
-    pageProps.paddings ??= MUGlobal.pagePaddings;
-
-    // States
-    const [states] = React.useState<{
-        data?: FormData;
-        ref?: ScrollerListForwardRef<T>;
-    }>({});
-
-    // Scroll container
-    const [scrollContainer, updateScrollContainer] = React.useState<
-        HTMLElement | undefined
-    >();
-
-    const refs = useCombinedRefs(
-        mRef,
-        (ref: ScrollerListForwardRef<T> | null | undefined) => {
-            if (ref == null) return;
-
-            const first = states.ref == null;
-
-            states.ref = ref;
-
-            if (first) reset();
-        }
-    );
-
-    const reset = () => {
-        if (states.data == null || states.ref == null) return;
-        states.ref.reset({ data: states.data });
-    };
-
-    // On submit callback
-    const onSubmit = (data: FormData, _reset: boolean) => {
-        states.data = data;
-        reset();
-    };
-
-    const localLoadData = (props: GridLoadDataProps) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
-    const rect = dimensions[0][2];
-    const list = React.useMemo(() => {
-        if (rect != null && rect.height > 50) {
-            let height =
-                document.documentElement.clientHeight -
-                Math.round(rect.top + rect.height + 1);
-
-            if (adjustHeight != null) {
-                height -= adjustHeight(height);
-            }
-
-            return (
-                <Box
-                    id="list-container"
-                    sx={{
-                        height: height + 'px'
-                    }}
-                >
-                    <ScrollerListEx<T, D>
-                        autoLoad={false}
-                        height={height}
-                        loadData={localLoadData}
-                        mRef={refs}
-                        oRef={(element) => {
-                            if (element != null) updateScrollContainer(element);
-                        }}
-                        {...rest}
-                    />
-                </Box>
-            );
-        }
-    }, [rect]);
-
-    const { paddings, ...pageRest } = pageProps;
-
-    // Layout
-    return (
-        <CommonPage
-            {...pageRest}
-            paddings={{}}
-            scrollContainer={scrollContainer}
+  // Destruct
+  const {
+    adjustHeight,
+    fields,
+    fieldTemplate,
+    loadData,
+    mRef,
+    sizeReadyMiliseconds = 0,
+    pageProps = {},
+    ...rest
+  } = props;
+
+  pageProps.paddings ??= MUGlobal.pagePaddings;
+
+  // States
+  const [states] = React.useState<{
+    data?: FormData;
+    ref?: ScrollerListForwardRef<T>;
+  }>({});
+
+  // Scroll container
+  const [scrollContainer, updateScrollContainer] = React.useState<
+    HTMLElement | undefined
+  >();
+
+  const refs = useCombinedRefs(
+    mRef,
+    (ref: ScrollerListForwardRef<T> | null | undefined) => {
+      if (ref == null) return;
+
+      const first = states.ref == null;
+
+      states.ref = ref;
+
+      if (first) reset();
+    }
+  );
+
+  const reset = () => {
+    if (states.data == null || states.ref == null) return;
+    states.ref.reset({ data: states.data });
+  };
+
+  // On submit callback
+  const onSubmit = (data: FormData, _reset: boolean) => {
+    states.data = data;
+    reset();
+  };
+
+  const localLoadData = (props: GridLoadDataProps) => {
+    const data = GridDataGet(props, fieldTemplate);
+    return loadData(data);
+  };
+
+  // Watch container
+  const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
+  const rect = dimensions[0][2];
+  const list = React.useMemo(() => {
+    if (rect != null && rect.height > 50) {
+      let height =
+        document.documentElement.clientHeight -
+        Math.round(rect.top + rect.height + 1);
+
+      if (adjustHeight != null) height -= adjustHeight(height, rect);
+
+      return (
+        <Box
+          id="list-container"
+          sx={{
+            height: height + "px"
+          }}
         >
-            <Stack>
-                <Box ref={dimensions[0][0]} sx={{ padding: paddings }}>
-                    <SearchBar fields={fields} onSubmit={onSubmit} />
-                </Box>
-                {list}
-            </Stack>
-        </CommonPage>
-    );
+          <ScrollerListEx<T, D>
+            autoLoad={false}
+            height={height}
+            loadData={localLoadData}
+            mRef={refs}
+            oRef={(element) => {
+              if (element != null) updateScrollContainer(element);
+            }}
+            {...rest}
+          />
+        </Box>
+      );
+    }
+  }, [rect]);
+
+  const { paddings, ...pageRest } = pageProps;
+
+  // Layout
+  return (
+    <CommonPage {...pageRest} paddings={{}} scrollContainer={scrollContainer}>
+      <Stack>
+        <Box ref={dimensions[0][0]} sx={{ padding: paddings }}>
+          <SearchBar fields={fields} onSubmit={onSubmit} />
+        </Box>
+        {list}
+      </Stack>
+    </CommonPage>
+  );
 }