@etsoo/materialui 1.1.56 → 1.1.58

package/lib/ResponsibleContainer.d.ts

@@ -12,12 +12,9 @@ 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) => number;
-    /**
-     * Top height
-     */
-    topHeight?: number;
+    adjustHeight?: (height: number, rect: DOMRect) => number;
     /**
      * Columns
      */

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, topHeight, 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, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -89,15 +89,13 @@ export function ResponsibleContainer(props) {
         else {
             // Auto calculation
             heightLocal =
-                document.documentElement.clientHeight -
-                    (topHeight !== null && topHeight !== void 0 ? topHeight : Math.round(rect.bottom + 1));
+                document.documentElement.clientHeight - Math.round(rect.bottom + 1);
             const style = window.getComputedStyle(dimensions[0][1]);
             const boxMargin = parseFloat(style.marginBottom);
             if (!isNaN(boxMargin))
                 heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
-            if (adjustHeight != null) {
-                heightLocal -= adjustHeight(heightLocal);
-            }
+            if (adjustHeight != null)
+                heightLocal -= adjustHeight(heightLocal, rect);
         }
         if (showDataGrid) {
             // Delete

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/lib/pages/SearchPageProps.d.ts

@@ -27,10 +27,6 @@ export type SearchPageProps<T extends object, F extends DataTypes.BasicTemplate>
      * @default 100
      */
     sizeReadyMiliseconds?: number;
-    /**
-     * Top height
-     */
-    topHeight?: number;
     /**
      * SearchBar height
      */

package/package.json

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

package/src/ResponsibleContainer.tsx

@@ -41,13 +41,9 @@ export type ResponsibleContainerProps<
   /**
    * Height will be deducted
    * @param height Current calcuated height
+   * @param rect Current rect data
    */
-  adjustHeight?: (height: number) => number;
-
-  /**
-   * Top height
-   */
-  topHeight?: number;
+  adjustHeight?: (height: number, rect: DOMRect) => number;
 
   /**
    * Columns
@@ -182,7 +178,6 @@ export function ResponsibleContainer<
     fields,
     fieldTemplate,
     height,
-    topHeight,
     loadData,
     mRef,
     paddings = MUGlobal.pagePaddings,
@@ -277,16 +272,13 @@ export function ResponsibleContainer<
     } else {
       // Auto calculation
       heightLocal =
-        document.documentElement.clientHeight -
-        (topHeight ?? Math.round(rect.bottom + 1));
+        document.documentElement.clientHeight - Math.round(rect.bottom + 1);
 
       const style = window.getComputedStyle(dimensions[0][1]!);
       const boxMargin = parseFloat(style.marginBottom);
       if (!isNaN(boxMargin)) heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
 
-      if (adjustHeight != null) {
-        heightLocal -= adjustHeight(heightLocal);
-      }
+      if (adjustHeight != null) heightLocal -= adjustHeight(heightLocal, rect);
     }
 
     if (showDataGrid) {

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>
+  );
 }

package/src/pages/SearchPageProps.ts

@@ -37,11 +37,6 @@ export type SearchPageProps<
    */
   sizeReadyMiliseconds?: number;
 
-  /**
-   * Top height
-   */
-  topHeight?: number;
-
   /**
    * SearchBar height
    */