@etsoo/materialui 1.4.72 → 1.4.73

package/lib/cjs/PullToRefreshUI.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PullToRefreshUI = PullToRefreshUI;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
+const shared_1 = require("@etsoo/shared");
+let pr;
 /**
  * PullToRefresh UI
  * Use hammerjs or touchemulator to simulate browser as mobile device
@@ -15,14 +17,23 @@ const react_1 = __importDefault(require("react"));
 function PullToRefreshUI(props) {
     // Ready
     react_1.default.useEffect(() => {
-        let pr;
-        import("pulltorefreshjs").then((PullToRefresh) => {
-            pr = PullToRefresh.default;
-            pr.init(props);
-        });
+        if (pr) {
+            // Loaded, delay a little bit
+            pr.destroyAll();
+            shared_1.ExtendUtils.waitFor(() => {
+                pr?.init(props);
+            }, 100);
+        }
+        else {
+            import("pulltorefreshjs").then((PullToRefresh) => {
+                pr = PullToRefresh.default;
+                pr.init(props);
+            });
+        }
         return () => {
-            if (pr)
+            if (pr) {
                 pr.destroyAll();
+            }
         };
     }, [props]);
     return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, {});

package/lib/cjs/ResponsibleContainer.d.ts

@@ -89,6 +89,10 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProp
      * SearchBar bottom padding
      */
     searchBarBottom?: number;
+    /**
+     * SearchBar top
+     */
+    searchBarTop?: number | true;
 };
 /**
  * Responsible container

package/lib/cjs/ResponsibleContainer.js

@@ -30,7 +30,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 15, columns, containerBoxSx = defaultContainerBoxSx, elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal_1.MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, searchBarBottom = 8, ...rest } = props;
+    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 15, columns, containerBoxSx = defaultContainerBoxSx, elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal_1.MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, searchBarBottom = 8, searchBarTop, ...rest } = props;
     // Labels
     const labels = Labels_1.Labels.CommonPage;
     // Refs
@@ -125,7 +125,7 @@ function ResponsibleContainer(props) {
     const list = (() => {
         // No layout
         if (rect == null)
-            return [null, undefined];
+            return undefined;
         // Height
         let heightLocal;
         if (height != null) {
@@ -176,7 +176,7 @@ function ResponsibleContainer(props) {
             rect.width < 20)
             return;
         const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
-        return ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
+        return ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, top: searchBarTop }));
     }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
     // Pull container
     const pullContainer = showDataGrid == null
@@ -189,7 +189,7 @@ function ResponsibleContainer(props) {
             ? undefined
             : containerBoxSx(paddings, hasFields, showDataGrid), children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], className: "SearchBox", sx: {
                             height: hasFields ? searchBarHeight : 0
-                        }, marginBottom: hasFields ? `${searchBarBottom}px!important` : undefined, children: searchBar }), list] }), pullToRefresh && pullContainer && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
+                        }, marginBottom: hasFields ? `${searchBarBottom}px!important` : undefined, children: searchBar }), list] }), pullToRefresh && pullContainer && list != null && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
                     const container = document.querySelector(pullContainer);
                     return !container?.scrollTop;
                 } }))] }));

package/lib/cjs/SearchBar.d.ts

@@ -23,6 +23,10 @@ export interface SearchBarProps {
      * On submit callback
      */
     onSubmit: (data: FormData, reset: boolean) => void | PromiseLike<void>;
+    /**
+     * Top position, true means Toolbar's height
+     */
+    top?: number | true;
 }
 /**
  * Search bar

package/lib/cjs/SearchBar.js

@@ -75,7 +75,7 @@ function checkFormEvent(event) {
  */
 function SearchBar(props) {
     // Destruct
-    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160 } = props;
+    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160, top } = props;
     // Labels
     const labels = Labels_1.Labels.CommonPage;
     // Menu index
@@ -257,14 +257,17 @@ function SearchBar(props) {
                             display: "block",
                             visibility: "visible"
                         }
-                    }, children: [fields.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: item }, index))), (0, jsx_runtime_1.jsx)(material_1.IconButton, { title: labels.more, size: "medium", sx: { height: "40px" }, onClick: handleMore, children: (0, jsx_runtime_1.jsx)(MoreHoriz_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "medium", ref: resetButtonRef, onClick: handleReset, children: labels.reset })] }) }), hasMoreItems && ((0, jsx_runtime_1.jsx)(material_1.Drawer, { anchor: "right", sx: { minWidth: "180px" }, ModalProps: {
+                    }, children: [fields.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: item }, index))), (0, jsx_runtime_1.jsx)(material_1.IconButton, { title: labels.more, size: "medium", sx: { height: "40px" }, onClick: handleMore, children: (0, jsx_runtime_1.jsx)(MoreHoriz_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "medium", ref: resetButtonRef, onClick: handleReset, children: labels.reset })] }) }), hasMoreItems && ((0, jsx_runtime_1.jsxs)(material_1.Drawer, { anchor: "right", sx: {
+                    minWidth: "180px",
+                    paddingTop: typeof top === "number" ? `${top}px` : undefined
+                }, ModalProps: {
                     keepMounted: true
-                }, open: open, onClose: () => updateOpen(false), children: (0, jsx_runtime_1.jsx)("form", { onChange: moreFormChange, ref: (form) => {
-                        if (form)
-                            state.moreForm = form;
-                    }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
-                            "& > :not(style)": {
-                                minWidth: "100px"
-                            }
-                        }, children: moreItems }) }) }))] }));
+                }, open: open, onClose: () => updateOpen(false), children: [top === true && (0, jsx_runtime_1.jsx)(material_1.Toolbar, {}), (0, jsx_runtime_1.jsx)("form", { onChange: moreFormChange, ref: (form) => {
+                            if (form)
+                                state.moreForm = form;
+                        }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
+                                "& > :not(style)": {
+                                    minWidth: "100px"
+                                }
+                            }, children: moreItems }) })] }))] }));
 }

package/lib/cjs/pages/DataGridPage.js

@@ -20,7 +20,7 @@ const GridUtils_1 = require("../GridUtils");
  */
 function DataGridPage(props) {
     // Destruct
-    const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
+    const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, cacheKey, cacheMinutes = 15, searchBarTop, ...rest } = props;
     pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
     // States
     const [states, setStates] = react_2.default.useReducer((currentState, newState) => {
@@ -110,5 +110,5 @@ function DataGridPage(props) {
     // Layout
     return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: states.element, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: (0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit }) }), list] }) }));
+                    }, children: (0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop }) }), list] }) }));
 }

package/lib/cjs/pages/FixedListPage.js

@@ -20,7 +20,7 @@ const GridUtils_1 = require("../GridUtils");
  */
 function FixedListPage(props) {
     // Destruct
-    const { adjustHeight, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
+    const { adjustHeight, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 15, searchBarTop, ...rest } = props;
     pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
     // States
     const [states] = react_2.default.useState({});
@@ -100,5 +100,5 @@ function FixedListPage(props) {
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     const { paddings, ...pageRest } = pageProps;
     // Layout
-    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], sx: { padding: paddings }, children: (0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit }) }), list] }) }));
+    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], sx: { padding: paddings }, children: (0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop }) }), list] }) }));
 }

package/lib/cjs/pages/ListPage.js

@@ -20,7 +20,7 @@ const GridUtils_1 = require("../GridUtils");
  */
 function ListPage(props) {
     // Destruct
-    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
+    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 15, searchBarTop, ...rest } = props;
     pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
     // States
     const [states] = react_2.default.useState({});
@@ -79,5 +79,5 @@ function ListPage(props) {
     // Layout
     return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: globalThis, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: (0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit }) }), (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
+                    }, children: (0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop }) }), (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
 }

package/lib/cjs/pages/SearchPageProps.d.ts

@@ -33,4 +33,8 @@ export type SearchPageProps<T extends object, F> = GridLoader<T, GridJsonData &
      * SearchBar height
      */
     searchBarHeight?: number;
+    /**
+     * SearchBar top
+     */
+    searchBarTop?: number | true;
 };

package/lib/mjs/PullToRefreshUI.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
+import { ExtendUtils } from "@etsoo/shared";
+let pr;
 /**
  * PullToRefresh UI
  * Use hammerjs or touchemulator to simulate browser as mobile device
@@ -9,14 +11,23 @@ import React from "react";
 export function PullToRefreshUI(props) {
     // Ready
     React.useEffect(() => {
-        let pr;
-        import("pulltorefreshjs").then((PullToRefresh) => {
-            pr = PullToRefresh.default;
-            pr.init(props);
-        });
+        if (pr) {
+            // Loaded, delay a little bit
+            pr.destroyAll();
+            ExtendUtils.waitFor(() => {
+                pr?.init(props);
+            }, 100);
+        }
+        else {
+            import("pulltorefreshjs").then((PullToRefresh) => {
+                pr = PullToRefresh.default;
+                pr.init(props);
+            });
+        }
         return () => {
-            if (pr)
+            if (pr) {
                 pr.destroyAll();
+            }
         };
     }, [props]);
     return _jsx(React.Fragment, {});

package/lib/mjs/ResponsibleContainer.d.ts

@@ -89,6 +89,10 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProp
      * SearchBar bottom padding
      */
     searchBarBottom?: number;
+    /**
+     * SearchBar top
+     */
+    searchBarTop?: number | true;
 };
 /**
  * Responsible container

package/lib/mjs/ResponsibleContainer.js

@@ -24,7 +24,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 15, columns, containerBoxSx = defaultContainerBoxSx, elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, searchBarBottom = 8, ...rest } = props;
+    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 15, columns, containerBoxSx = defaultContainerBoxSx, elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, searchBarBottom = 8, searchBarTop, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -119,7 +119,7 @@ export function ResponsibleContainer(props) {
     const list = (() => {
         // No layout
         if (rect == null)
-            return [null, undefined];
+            return undefined;
         // Height
         let heightLocal;
         if (height != null) {
@@ -170,7 +170,7 @@ export function ResponsibleContainer(props) {
             rect.width < 20)
             return;
         const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
-        return (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
+        return (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, top: searchBarTop }));
     }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
     // Pull container
     const pullContainer = showDataGrid == null
@@ -183,7 +183,7 @@ export function ResponsibleContainer(props) {
             ? undefined
             : containerBoxSx(paddings, hasFields, showDataGrid), children: [_jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], className: "SearchBox", sx: {
                             height: hasFields ? searchBarHeight : 0
-                        }, marginBottom: hasFields ? `${searchBarBottom}px!important` : undefined, children: searchBar }), list] }), pullToRefresh && pullContainer && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
+                        }, marginBottom: hasFields ? `${searchBarBottom}px!important` : undefined, children: searchBar }), list] }), pullToRefresh && pullContainer && list != null && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
                     const container = document.querySelector(pullContainer);
                     return !container?.scrollTop;
                 } }))] }));

package/lib/mjs/SearchBar.d.ts

@@ -23,6 +23,10 @@ export interface SearchBarProps {
      * On submit callback
      */
     onSubmit: (data: FormData, reset: boolean) => void | PromiseLike<void>;
+    /**
+     * Top position, true means Toolbar's height
+     */
+    top?: number | true;
 }
 /**
  * Search bar

package/lib/mjs/SearchBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Drawer, IconButton, Stack } from "@mui/material";
+import { Button, Drawer, IconButton, Stack, Toolbar } from "@mui/material";
 import React from "react";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import { DomUtils, NumberUtils } from "@etsoo/shared";
@@ -69,7 +69,7 @@ function checkFormEvent(event) {
  */
 export function SearchBar(props) {
     // Destruct
-    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160 } = props;
+    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160, top } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Menu index
@@ -251,14 +251,17 @@ export function SearchBar(props) {
                             display: "block",
                             visibility: "visible"
                         }
-                    }, children: [fields.map((item, index) => (_jsx(React.Fragment, { children: item }, index))), _jsx(IconButton, { title: labels.more, size: "medium", sx: { height: "40px" }, onClick: handleMore, children: _jsx(MoreHorizIcon, {}) }), _jsx(Button, { variant: "contained", size: "medium", ref: resetButtonRef, onClick: handleReset, children: labels.reset })] }) }), hasMoreItems && (_jsx(Drawer, { anchor: "right", sx: { minWidth: "180px" }, ModalProps: {
+                    }, children: [fields.map((item, index) => (_jsx(React.Fragment, { children: item }, index))), _jsx(IconButton, { title: labels.more, size: "medium", sx: { height: "40px" }, onClick: handleMore, children: _jsx(MoreHorizIcon, {}) }), _jsx(Button, { variant: "contained", size: "medium", ref: resetButtonRef, onClick: handleReset, children: labels.reset })] }) }), hasMoreItems && (_jsxs(Drawer, { anchor: "right", sx: {
+                    minWidth: "180px",
+                    paddingTop: typeof top === "number" ? `${top}px` : undefined
+                }, ModalProps: {
                     keepMounted: true
-                }, open: open, onClose: () => updateOpen(false), children: _jsx("form", { onChange: moreFormChange, ref: (form) => {
-                        if (form)
-                            state.moreForm = form;
-                    }, children: _jsx(Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
-                            "& > :not(style)": {
-                                minWidth: "100px"
-                            }
-                        }, children: moreItems }) }) }))] }));
+                }, open: open, onClose: () => updateOpen(false), children: [top === true && _jsx(Toolbar, {}), _jsx("form", { onChange: moreFormChange, ref: (form) => {
+                            if (form)
+                                state.moreForm = form;
+                        }, children: _jsx(Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
+                                "& > :not(style)": {
+                                    minWidth: "100px"
+                                }
+                            }, children: moreItems }) })] }))] }));
 }

package/lib/mjs/pages/DataGridPage.js

@@ -14,7 +14,7 @@ import { GridUtils } from "../GridUtils";
  */
 export function DataGridPage(props) {
     // Destruct
-    const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
+    const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, cacheKey, cacheMinutes = 15, searchBarTop, ...rest } = props;
     pageProps.paddings ??= MUGlobal.pagePaddings;
     // States
     const [states, setStates] = React.useReducer((currentState, newState) => {
@@ -104,5 +104,5 @@ export function DataGridPage(props) {
     // Layout
     return (_jsx(CommonPage, { ...pageProps, scrollContainer: states.element, children: _jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: _jsx(SearchBar, { fields: f, onSubmit: onSubmit }) }), list] }) }));
+                    }, children: _jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop }) }), list] }) }));
 }

package/lib/mjs/pages/FixedListPage.js

@@ -14,7 +14,7 @@ import { GridUtils } from "../GridUtils";
  */
 export function FixedListPage(props) {
     // Destruct
-    const { adjustHeight, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
+    const { adjustHeight, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 15, searchBarTop, ...rest } = props;
     pageProps.paddings ??= MUGlobal.pagePaddings;
     // States
     const [states] = React.useState({});
@@ -94,5 +94,5 @@ export function FixedListPage(props) {
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     const { paddings, ...pageRest } = pageProps;
     // Layout
-    return (_jsx(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, children: _jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], sx: { padding: paddings }, children: _jsx(SearchBar, { fields: f, onSubmit: onSubmit }) }), list] }) }));
+    return (_jsx(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, children: _jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], sx: { padding: paddings }, children: _jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop }) }), list] }) }));
 }

package/lib/mjs/pages/ListPage.js

@@ -14,7 +14,7 @@ import { GridUtils } from "../GridUtils";
  */
 export function ListPage(props) {
     // Destruct
-    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
+    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 15, searchBarTop, ...rest } = props;
     pageProps.paddings ??= MUGlobal.pagePaddings;
     // States
     const [states] = React.useState({});
@@ -73,5 +73,5 @@ export function ListPage(props) {
     // Layout
     return (_jsx(CommonPage, { ...pageProps, scrollContainer: globalThis, children: _jsxs(Stack, { children: [_jsx(Box, { sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: _jsx(SearchBar, { fields: f, onSubmit: onSubmit }) }), _jsx(ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
+                    }, children: _jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop }) }), _jsx(ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
 }

package/lib/mjs/pages/SearchPageProps.d.ts

@@ -33,4 +33,8 @@ export type SearchPageProps<T extends object, F> = GridLoader<T, GridJsonData &
      * SearchBar height
      */
     searchBarHeight?: number;
+    /**
+     * SearchBar top
+     */
+    searchBarTop?: number | true;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.72",
+  "version": "1.4.73",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/PullToRefreshUI.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import type { Options } from "pulltorefreshjs";
 import type PullToRefresh from "pulltorefreshjs";
+import { ExtendUtils } from "@etsoo/shared";
 
 type p = typeof PullToRefresh;
+let pr: p | null;
 
 /**
  * PullToRefresh UI
@@ -13,14 +15,23 @@ type p = typeof PullToRefresh;
 export function PullToRefreshUI(props: Options) {
   // Ready
   React.useEffect(() => {
-    let pr: p | null;
-    import("pulltorefreshjs").then((PullToRefresh) => {
-      pr = PullToRefresh.default;
-      pr.init(props);
-    });
+    if (pr) {
+      // Loaded, delay a little bit
+      pr.destroyAll();
+      ExtendUtils.waitFor(() => {
+        pr?.init(props);
+      }, 100);
+    } else {
+      import("pulltorefreshjs").then((PullToRefresh) => {
+        pr = PullToRefresh.default;
+        pr.init(props);
+      });
+    }
 
     return () => {
-      if (pr) pr.destroyAll();
+      if (pr) {
+        pr.destroyAll();
+      }
     };
   }, [props]);
 

package/src/ResponsibleContainer.tsx

@@ -154,6 +154,11 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<
    * SearchBar bottom padding
    */
   searchBarBottom?: number;
+
+  /**
+   * SearchBar top
+   */
+  searchBarTop?: number | true;
 };
 
 interface LocalRefs<T> {
@@ -205,6 +210,7 @@ export function ResponsibleContainer<T extends object, F>(
     sizeReadyMiliseconds = 0,
     searchBarHeight = 45.6,
     searchBarBottom = 8,
+    searchBarTop,
     ...rest
   } = props;
 
@@ -336,7 +342,7 @@ export function ResponsibleContainer<T extends object, F>(
   // Create list
   const list = (() => {
     // No layout
-    if (rect == null) return [null, undefined];
+    if (rect == null) return undefined;
 
     // Height
     let heightLocal: number;
@@ -435,6 +441,7 @@ export function ResponsibleContainer<T extends object, F>(
         fields={f}
         onSubmit={onSubmit}
         className={`searchBar${showDataGrid ? "Grid" : "List"}`}
+        top={searchBarTop}
       />
     );
   }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
@@ -471,7 +478,7 @@ export function ResponsibleContainer<T extends object, F>(
         </Box>
         {list}
       </Stack>
-      {pullToRefresh && pullContainer && (
+      {pullToRefresh && pullContainer && list != null && (
         <PullToRefreshUI
           mainElement={pullContainer}
           triggerElement={pullContainer}

package/src/SearchBar.tsx

@@ -1,4 +1,4 @@
-import { Button, Drawer, IconButton, Stack } from "@mui/material";
+import { Button, Drawer, IconButton, Stack, Toolbar } from "@mui/material";
 import React from "react";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import { DomUtils, NumberUtils } from "@etsoo/shared";
@@ -33,6 +33,11 @@ export interface SearchBarProps {
    * On submit callback
    */
   onSubmit: (data: FormData, reset: boolean) => void | PromiseLike<void>;
+
+  /**
+   * Top position, true means Toolbar's height
+   */
+  top?: number | true;
 }
 
 // Cached width attribute name
@@ -107,7 +112,14 @@ function checkFormEvent(event: React.FormEvent<HTMLFormElement>) {
  */
 export function SearchBar(props: SearchBarProps) {
   // Destruct
-  const { className, fields, onSubmit, itemGap = 6, itemWidth = 160 } = props;
+  const {
+    className,
+    fields,
+    onSubmit,
+    itemGap = 6,
+    itemWidth = 160,
+    top
+  } = props;
 
   // Labels
   const labels = Labels.CommonPage;
@@ -377,13 +389,17 @@ export function SearchBar(props: SearchBarProps) {
       {hasMoreItems && (
         <Drawer
           anchor="right"
-          sx={{ minWidth: "180px" }}
+          sx={{
+            minWidth: "180px",
+            paddingTop: typeof top === "number" ? `${top}px` : undefined
+          }}
           ModalProps={{
             keepMounted: true
           }}
           open={open}
           onClose={() => updateOpen(false)}
         >
+          {top === true && <Toolbar />}
           <form
             onChange={moreFormChange}
             ref={(form) => {

package/src/pages/DataGridPage.tsx

@@ -43,6 +43,7 @@ export function DataGridPage<T extends object, F>(
     pageProps = {},
     cacheKey,
     cacheMinutes = 15,
+    searchBarTop,
     ...rest
   } = props;
 
@@ -185,7 +186,7 @@ export function DataGridPage<T extends object, F>(
             paddingBottom: pageProps.paddings
           }}
         >
-          <SearchBar fields={f} onSubmit={onSubmit} />
+          <SearchBar fields={f} onSubmit={onSubmit} top={searchBarTop} />
         </Box>
         {list}
       </Stack>

package/src/pages/FixedListPage.tsx

@@ -42,6 +42,7 @@ export function FixedListPage<T extends object, F>(
     pageProps = {},
     cacheKey,
     cacheMinutes = 15,
+    searchBarTop,
     ...rest
   } = props;
 
@@ -178,7 +179,7 @@ export function FixedListPage<T extends object, F>(
     <CommonPage {...pageRest} paddings={{}} scrollContainer={scrollContainer}>
       <Stack>
         <Box ref={dimensions[0][0]} sx={{ padding: paddings }}>
-          <SearchBar fields={f} onSubmit={onSubmit} />
+          <SearchBar fields={f} onSubmit={onSubmit} top={searchBarTop} />
         </Box>
         {list}
       </Stack>

package/src/pages/ListPage.tsx

@@ -36,6 +36,7 @@ export function ListPage<T extends object, F>(props: ListPageProps<T, F>) {
     pageProps = {},
     cacheKey,
     cacheMinutes = 15,
+    searchBarTop,
     ...rest
   } = props;
 
@@ -126,7 +127,7 @@ export function ListPage<T extends object, F>(props: ListPageProps<T, F>) {
             paddingBottom: pageProps.paddings
           }}
         >
-          <SearchBar fields={f} onSubmit={onSubmit} />
+          <SearchBar fields={f} onSubmit={onSubmit} top={searchBarTop} />
         </Box>
         <ScrollerListEx<T>
           autoLoad={false}

package/src/pages/SearchPageProps.ts

@@ -45,4 +45,9 @@ export type SearchPageProps<T extends object, F> = GridLoader<
    * SearchBar height
    */
   searchBarHeight?: number;
+
+  /**
+   * SearchBar top
+   */
+  searchBarTop?: number | true;
 };