@etsoo/materialui 1.4.67 → 1.4.69

package/lib/cjs/messages/OperationMessageContainer.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OperationMessageContainer = OperationMessageContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const MessageUtils_1 = require("./MessageUtils");
+/**
+ * Operation message container
+ * 操作消息容器
+ * @param props Props
+ * @returns Component
+ */
+function OperationMessageContainer(props) {
+    const { handler, timeout = 200 } = props;
+    const refs = react_1.default.useRef({ seed: 0, mounted: false });
+    const resetSeed = () => {
+        if (refs.current.seed > 0) {
+            clearTimeout(refs.current.seed);
+            refs.current.seed = 0;
+        }
+    };
+    react_1.default.useEffect(() => {
+        const my = typeof handler === "function"
+            ? handler
+            : (_user, isSelf, message) => {
+                const [types, callback, id] = handler;
+                if (id == null || id === message.id) {
+                    // Check types & isSelf
+                    if (isSelf ||
+                        !types.includes(message.operationType) ||
+                        !refs.current.mounted)
+                        return;
+                    resetSeed();
+                    refs.current.seed = window.setTimeout(callback, timeout);
+                }
+            };
+        MessageUtils_1.MessageUtils.onOperationMessage(my);
+        refs.current.mounted = true;
+        return () => {
+            resetSeed();
+            refs.current.mounted = false;
+            MessageUtils_1.MessageUtils.offOperationMessage(my);
+        };
+    }, []);
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, {});
+}

package/lib/cjs/messages/OperationMessageDto.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/messages/OperationMessageHandler.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/messages/RefreshHandler.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/messages/SignalRUser.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/pages/CommonPage.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommonPage = CommonPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const FabBox_1 = require("../FabBox");
+const ScrollTopFab_1 = require("../ScrollTopFab");
+const MUGlobal_1 = require("../MUGlobal");
+const MoreFab_1 = require("../MoreFab");
+const material_1 = require("@mui/material");
+const Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
+const BackButton_1 = require("../BackButton");
+const Labels_1 = require("../app/Labels");
+const ReactApp_1 = require("../app/ReactApp");
+/**
+ * Common page
+ * @param props Props
+ */
+function CommonPage(props) {
+    // Destruct
+    const { children, disableGutters = true, fabTop, fabButtons, fabColumnDirection, fabPanel, fabPaddingAdjust = 1.5, fabSize = "small", maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal_1.MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = {}, ...rest } = props;
+    // Fab padding
+    const fabPadding = MUGlobal_1.MUGlobal.increase(MUGlobal_1.MUGlobal.pagePaddings, fabPaddingAdjust);
+    if (typeof sx === "object" && sx != null && !Reflect.has(sx, "padding")) {
+        // Set default padding
+        Reflect.set(sx, "padding", paddings);
+    }
+    // Labels
+    const labels = Labels_1.Labels.CommonPage;
+    // Update
+    const update = onUpdateAll
+        ? onUpdateAll
+        : onUpdate
+            ? (authorized) => {
+                if (authorized == null || authorized)
+                    onUpdate();
+            }
+            : onRefresh
+                ? (authorized) => {
+                    if (authorized)
+                        onRefresh();
+                }
+                : undefined;
+    const theme = (0, material_1.useTheme)();
+    const distance = react_1.default.useMemo(() => MUGlobal_1.MUGlobal.updateWithTheme(fabPadding, theme.spacing), [fabPadding, theme.spacing]);
+    // Return the UI
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [update && ((0, jsx_runtime_1.jsx)(ReactApp_1.ReactAppStateDetector, { targetFields: targetFields, update: update })), (0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [(0, jsx_runtime_1.jsxs)(FabBox_1.FabBox, { sx: {
+                            zIndex: 1,
+                            ...(typeof fabTop === "function"
+                                ? fabTop(theme, fabPadding)
+                                : fabTop
+                                    ? {
+                                        top: MUGlobal_1.MUGlobal.updateWithTheme(MUGlobal_1.MUGlobal.increase(fabPadding, 7), theme.spacing),
+                                        right: distance
+                                    }
+                                    : {
+                                        bottom: distance,
+                                        right: distance
+                                    })
+                        }, columnDirection: fabColumnDirection, fabPanel: fabPanel, children: [scrollContainer && ((0, jsx_runtime_1.jsx)(ScrollTopFab_1.ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })), fabButtons, onRefresh != null && ((0, jsx_runtime_1.jsx)(material_1.Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } }, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) })), (0, jsx_runtime_1.jsx)(MoreFab_1.MoreFab, { size: fabSize, title: labels.more, actions: moreActions }), supportBack && (0, jsx_runtime_1.jsx)(BackButton_1.BackButton, { title: labels.back, size: fabSize })] }), children] })] }));
+}

package/lib/cjs/pages/DataGridPage.js

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridPage = DataGridPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const material_1 = require("@mui/material");
+const react_2 = __importDefault(require("react"));
+const DataGridEx_1 = require("../DataGridEx");
+const MUGlobal_1 = require("../MUGlobal");
+const SearchBar_1 = require("../SearchBar");
+const CommonPage_1 = require("./CommonPage");
+const GridUtils_1 = require("../GridUtils");
+/**
+ * DataGrid page
+ * @param props Props
+ * @returns Component
+ */
+function DataGridPage(props) {
+    // Destruct
+    const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
+    pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
+    // States
+    const [states, setStates] = react_2.default.useReducer((currentState, newState) => {
+        return { ...currentState, ...newState };
+    }, {
+        height
+    });
+    const refs = (0, react_1.useCombinedRefs)(mRef, (ref) => {
+        if (ref == null)
+            return;
+        states.ref = ref;
+        //setStates({ ref });
+    });
+    const initLoadedRef = react_2.default.useRef();
+    // On submit callback
+    const onSubmit = (data, _reset) => {
+        setStates({ data });
+    };
+    const localLoadData = (props, lastItem) => {
+        return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
+    };
+    // Search data
+    const searchData = GridUtils_1.GridUtils.getSearchData(cacheKey);
+    const onInitLoad = (ref) => {
+        // Avoid repeatedly load from cache
+        if (initLoadedRef.current || !cacheKey)
+            return undefined;
+        // Cache data
+        const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
+        if (cacheData) {
+            const { rows, state } = cacheData;
+            GridUtils_1.GridUtils.mergeSearchData(state, searchData);
+            // Scroll position
+            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            if (scrollData) {
+                const { scrollLeft, scrollTop } = JSON.parse(scrollData);
+                globalThis.setTimeout(() => ref.scrollTo({ scrollLeft, scrollTop }), 0);
+            }
+            // Update flag value
+            initLoadedRef.current = true;
+            // Return cached rows and state
+            return [rows, state];
+        }
+        return undefined;
+    };
+    const onGridScroll = (props) => {
+        if (!cacheKey || !initLoadedRef.current)
+            return;
+        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+    };
+    // Watch container
+    const { dimensions } = (0, react_1.useDimensions)(1, undefined, sizeReadyMiliseconds);
+    const rect = dimensions[0][2];
+    react_2.default.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 -=
+                    typeof adjustHeight === "number"
+                        ? adjustHeight
+                        : adjustHeight(gridHeight, rect);
+            if (gridHeight !== states.height)
+                setStates({ height: gridHeight });
+        }
+    }, [rect]);
+    const list = react_2.default.useMemo(() => {
+        const gridHeight = states.height;
+        if (gridHeight == null)
+            return;
+        return ((0, jsx_runtime_1.jsx)(DataGridEx_1.DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onGridScroll, outerRef: (element) => {
+                if (element != null)
+                    setStates({ element });
+            }, ...rest }));
+    }, [states.height]);
+    const { ref, data } = states;
+    react_2.default.useEffect(() => {
+        if (ref == null || data == null)
+            return;
+        ref.reset({ data });
+    }, [ref, data]);
+    const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
+    // 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] }) }));
+}

package/lib/cjs/pages/DataGridPageProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/pages/DrawerHeader.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerHeader = void 0;
+const material_1 = require("@mui/material");
+/**
+ * Common drawer header
+ */
+exports.DrawerHeader = (0, material_1.styled)("div")(({ theme }) => ({
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar,
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    padding: theme.spacing(0, 1, 0, 2),
+    justifyContent: "flex-start"
+}));

package/lib/cjs/pages/EditPage.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditPage = EditPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const MUGlobal_1 = require("../MUGlobal");
+const CommonPage_1 = require("./CommonPage");
+const Save_1 = __importDefault(require("@mui/icons-material/Save"));
+const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+const BackButton_1 = require("../BackButton");
+const Labels_1 = require("../app/Labels");
+const OperationMessageContainer_1 = require("../messages/OperationMessageContainer");
+/**
+ * Add / Edit page
+ * @param props Props
+ */
+function EditPage(props) {
+    // Destruct
+    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal_1.MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, ...rest } = props;
+    // Labels
+    const labels = Labels_1.Labels.CommonPage;
+    return ((0, jsx_runtime_1.jsxs)(CommonPage_1.CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: operationMessageHandler })), topPart, (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1, children: children }), (0, jsx_runtime_1.jsxs)(material_1.Grid2, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
+                            top: "auto",
+                            bottom: (theme) => MUGlobal_1.MUGlobal.updateWithTheme(paddings, theme.spacing),
+                            paddingTop: paddings
+                        }, children: [isEditing && onDelete && ((0, jsx_runtime_1.jsx)(material_1.Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: (0, jsx_runtime_1.jsx)(Delete_1.default, { color: "warning" }), children: labels.delete })), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", type: "submit", startIcon: (0, jsx_runtime_1.jsx)(Save_1.default, {}), sx: { flexGrow: 1 }, disabled: submitDisabled, children: labels.save }), supportBack && (0, jsx_runtime_1.jsx)(BackButton_1.BackButton, { title: labels.back })] })] }), bottomPart] }));
+}

package/lib/cjs/pages/FixedListPage.js

@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FixedListPage = FixedListPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const material_1 = require("@mui/material");
+const react_2 = __importDefault(require("react"));
+const MUGlobal_1 = require("../MUGlobal");
+const ScrollerListEx_1 = require("../ScrollerListEx");
+const SearchBar_1 = require("../SearchBar");
+const CommonPage_1 = require("./CommonPage");
+const GridUtils_1 = require("../GridUtils");
+/**
+ * Fixed height list page
+ * @param props Props
+ * @returns Component
+ */
+function FixedListPage(props) {
+    // Destruct
+    const { adjustHeight, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
+    pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
+    // States
+    const [states] = react_2.default.useState({});
+    const initLoadedRef = react_2.default.useRef();
+    // Scroll container
+    const [scrollContainer, updateScrollContainer] = react_2.default.useState();
+    const refs = (0, react_1.useCombinedRefs)(mRef, (ref) => {
+        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, _reset) => {
+        states.data = data;
+        reset();
+    };
+    const localLoadData = (props, lastItem) => {
+        return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
+    };
+    // Search data
+    const searchData = GridUtils_1.GridUtils.getSearchData(cacheKey);
+    const onInitLoad = (ref) => {
+        // Avoid repeatedly load from cache
+        if (initLoadedRef.current || !cacheKey)
+            return undefined;
+        // Cache data
+        const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
+        if (cacheData) {
+            const { rows, state } = cacheData;
+            GridUtils_1.GridUtils.mergeSearchData(state, searchData);
+            // Scroll position
+            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            if (scrollData) {
+                const { scrollOffset } = JSON.parse(scrollData);
+                globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
+            }
+            // Update flag value
+            initLoadedRef.current = true;
+            // Return cached rows and state
+            return [rows, state];
+        }
+        return undefined;
+    };
+    const onListScroll = (props) => {
+        if (!cacheKey || !initLoadedRef.current)
+            return;
+        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+    };
+    // Watch container
+    const { dimensions } = (0, react_1.useDimensions)(1, undefined, sizeReadyMiliseconds);
+    const rect = dimensions[0][2];
+    const list = react_2.default.useMemo(() => {
+        if (rect != null && rect.height > 50) {
+            let height = document.documentElement.clientHeight -
+                Math.round(rect.top + rect.height + 1);
+            if (adjustHeight != null)
+                height -=
+                    typeof adjustHeight === "number"
+                        ? adjustHeight
+                        : adjustHeight(height, rect);
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { id: "list-container", sx: {
+                    height: height + "px"
+                }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {
+                        if (element != null)
+                            updateScrollContainer(element);
+                    }, ...rest }) }));
+        }
+    }, [rect]);
+    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] }) }));
+}

package/lib/cjs/pages/LeftDrawer.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LeftDrawer = LeftDrawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const ChevronLeft_1 = __importDefault(require("@mui/icons-material/ChevronLeft"));
+const DrawerHeader_1 = require("./DrawerHeader");
+const ReactApp_1 = require("../app/ReactApp");
+function LeftDrawer(props) {
+    // Destruct
+    const { mdUp, width, appName = ReactApp_1.globalApp?.get("appName"), logoUrl = "/logo192.png", onMinimize, open = mdUp, children } = props;
+    // Menu open/close state
+    const [openLocal, setOpen] = react_1.default.useState();
+    const handleDrawerClose = () => {
+        if (onMinimize)
+            onMinimize();
+        setOpen(false);
+    };
+    // Ready
+    react_1.default.useEffect(() => {
+        setOpen(open);
+    }, [open]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Drawer, { hidden: !openLocal, sx: {
+            width,
+            flexShrink: 0,
+            "& .MuiDrawer-paper": {
+                width,
+                boxSizing: "border-box"
+            }
+        }, anchor: "left", variant: mdUp ? "persistent" : "temporary", open: open, transitionDuration: 0, onClose: mdUp ? undefined : handleDrawerClose, ModalProps: {
+            keepMounted: true // Better open performance on mobile.
+        }, children: [(0, jsx_runtime_1.jsxs)(DrawerHeader_1.DrawerHeader, { children: [(0, jsx_runtime_1.jsx)("a", { href: "https://www.etsoo.com", title: ReactApp_1.globalApp?.get("etsoo") ?? "ETSOO", target: "_blank", rel: "noreferrer", children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: logoUrl, variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { noWrap: true, component: "div", title: appName, sx: { flexGrow: 2 }, children: appName }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: handleDrawerClose, children: (0, jsx_runtime_1.jsx)(ChevronLeft_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.List, { onClick: mdUp ? undefined : handleDrawerClose, children: children })] }));
+}

package/lib/cjs/pages/ListPage.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListPage = ListPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const material_1 = require("@mui/material");
+const react_2 = __importDefault(require("react"));
+const MUGlobal_1 = require("../MUGlobal");
+const ScrollerListEx_1 = require("../ScrollerListEx");
+const SearchBar_1 = require("../SearchBar");
+const CommonPage_1 = require("./CommonPage");
+const GridUtils_1 = require("../GridUtils");
+/**
+ * List page
+ * @param props Props
+ * @returns Component
+ */
+function ListPage(props) {
+    // Destruct
+    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
+    pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
+    // States
+    const [states] = react_2.default.useState({});
+    const refs = (0, react_1.useCombinedRefs)(mRef, (ref) => {
+        if (ref == null)
+            return;
+        const first = states.ref == null;
+        states.ref = ref;
+        if (first)
+            reset();
+    });
+    const initLoadedRef = react_2.default.useRef();
+    const reset = () => {
+        if (states.data == null || states.ref == null)
+            return;
+        states.ref.reset({ data: states.data });
+    };
+    // On submit callback
+    const onSubmit = (data, _reset) => {
+        states.data = data;
+        reset();
+    };
+    const localLoadData = (props, lastItem) => {
+        return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
+    };
+    // Search data
+    const searchData = GridUtils_1.GridUtils.getSearchData(cacheKey);
+    const onInitLoad = (ref) => {
+        // Avoid repeatedly load from cache
+        if (initLoadedRef.current || !cacheKey)
+            return undefined;
+        // Cache data
+        const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
+        if (cacheData) {
+            const { rows, state } = cacheData;
+            GridUtils_1.GridUtils.mergeSearchData(state, searchData);
+            // Scroll position
+            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            if (scrollData) {
+                const { scrollOffset } = JSON.parse(scrollData);
+                globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
+            }
+            // Update flag value
+            initLoadedRef.current = true;
+            // Return cached rows and state
+            return [rows, state];
+        }
+        return undefined;
+    };
+    const onListScroll = (props) => {
+        if (!cacheKey || !initLoadedRef.current)
+            return;
+        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+    };
+    const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
+    // 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 })] }) }));
+}

package/lib/cjs/pages/ResponsivePage.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsivePage = ResponsivePage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const MUGlobal_1 = require("../MUGlobal");
+const ResponsibleContainer_1 = require("../ResponsibleContainer");
+const CommonPage_1 = require("./CommonPage");
+const OperationMessageContainer_1 = require("../messages/OperationMessageContainer");
+/**
+ * Fixed height list page
+ * @param props Props
+ * @returns Component
+ */
+function ResponsivePage(props) {
+    // Destruct
+    const { pageProps = {}, operationMessageHandler, ...rest } = props;
+    pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
+    const { paddings, fabColumnDirection, ...pageRest } = pageProps;
+    // State
+    const [scrollContainer, setScrollContainer] = react_1.default.useState();
+    const [direction, setDirection] = react_1.default.useState(fabColumnDirection);
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(CommonPage_1.CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction, children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: operationMessageHandler })), (0, jsx_runtime_1.jsx)(ResponsibleContainer_1.ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, hasField, _dataGrid) => {
+                    // Half
+                    const half = typeof paddings == "number"
+                        ? paddings / 2
+                        : MUGlobal_1.MUGlobal.half(paddings);
+                    // .SearchBox keep the same to avoid flick when switching between DataGrid and List
+                    return {
+                        paddingTop: paddings,
+                        "& .SearchBox": {
+                            marginLeft: paddings,
+                            marginRight: paddings,
+                            marginBottom: hasField ? half : 0
+                        },
+                        "& .ListBox": {
+                            marginBottom: paddings
+                        },
+                        "& .DataGridBox": {
+                            marginLeft: paddings,
+                            marginRight: paddings,
+                            marginBottom: paddings
+                        }
+                    };
+                }, elementReady: (element, isDataGrid) => {
+                    setDirection(!isDataGrid);
+                    setScrollContainer(element);
+                }, ...rest })] }));
+}

package/lib/cjs/pages/SearchPageProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/pages/TablePage.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TablePage = TablePage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const material_1 = require("@mui/material");
+const react_2 = __importDefault(require("react"));
+const MUGlobal_1 = require("../MUGlobal");
+const SearchBar_1 = require("../SearchBar");
+const TableEx_1 = require("../TableEx");
+const CommonPage_1 = require("./CommonPage");
+const GridUtils_1 = require("../GridUtils");
+/**
+ * Table page
+ * @param props Props
+ * @returns Component
+ */
+function TablePage(props) {
+    // Destruct
+    const { columns, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
+    pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
+    // States
+    const [states] = react_2.default.useState({});
+    const refs = (0, react_1.useCombinedRefs)(mRef, (ref) => {
+        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, _reset) => {
+        states.data = data;
+        reset();
+    };
+    const localLoadData = (props, lastItem) => {
+        return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
+    };
+    // Search data
+    const searchData = GridUtils_1.GridUtils.getSearchData(cacheKey);
+    // Total width
+    const totalWidth = react_2.default.useMemo(() => columns.reduce((previousValue, { width, minWidth }) => {
+        return previousValue + (width ?? minWidth ?? TableEx_1.TableExMinWidth);
+    }, 0), [columns]);
+    // Watch container
+    const { dimensions } = (0, react_1.useDimensions)(1, undefined, sizeReadyMiliseconds);
+    const rect = dimensions[0][2];
+    const list = react_2.default.useMemo(() => {
+        if (rect != null && rect.height > 50 && rect.width >= totalWidth) {
+            let maxHeight = document.documentElement.clientHeight - (rect.top + rect.height + 1);
+            const style = window.getComputedStyle(dimensions[0][1]);
+            const paddingBottom = parseFloat(style.paddingBottom);
+            if (!isNaN(paddingBottom))
+                maxHeight -= paddingBottom;
+            return ((0, jsx_runtime_1.jsx)(TableEx_1.TableEx, { autoLoad: false, columns: columns, loadData: localLoadData, maxHeight: maxHeight, mRef: refs, ...rest }));
+        }
+    }, [rect]);
+    const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
+    // 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, { ref: dimensions[0][0], sx: {
+                        paddingBottom: pageProps.paddings
+                    }, children: (0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit }) }), list] }) }));
+}