@etsoo/react 1.5.80 → 1.5.81

package/lib/mu/Tiplist.js

@@ -1,158 +0,0 @@
-import { DataTypes } from '@etsoo/shared';
-import { Autocomplete } from '@mui/material';
-import React from 'react';
-import { ReactUtils } from '../app/ReactUtils';
-import { useDelayedExecutor } from '../uses/useDelayedExecutor';
-import { InputField } from './InputField';
-import { SearchField } from './SearchField';
-/**
- * Tiplist
- * @param props Props
- * @returns Component
- */
-export function Tiplist(props) {
-    // Destruct
-    const { search = false, idField = 'id', idValue, inputAutoComplete = 'off', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: '180px' }, ...rest } = props;
-    // Value input ref
-    const inputRef = React.createRef();
-    // Local value
-    let localValue = value !== null && value !== void 0 ? value : defaultValue;
-    // One time calculation for input's default value (uncontrolled)
-    const localIdValue = idValue !== null && idValue !== void 0 ? idValue : DataTypes.getValue(localValue, idField);
-    // Changable states
-    const [states, stateUpdate] = React.useReducer((currentState, newState) => {
-        return { ...currentState, ...newState };
-    }, {
-        // Loading unknown
-        open: false,
-        options: [],
-        value: null
-    });
-    // Input value
-    const inputValue = React.useMemo(() => states.value && states.value[idField], [states.value]);
-    React.useEffect(() => {
-        if (localValue != null)
-            stateUpdate({ value: localValue });
-    }, [localValue]);
-    // State
-    const [state] = React.useState({});
-    const isMounted = React.useRef(true);
-    // Add readOnly
-    const addReadOnly = (params) => {
-        if (readOnly != null) {
-            Object.assign(params, { readOnly });
-        }
-        // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
-        // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
-        Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
-        return params;
-    };
-    // Change handler
-    const changeHandle = (event) => {
-        // Stop processing with auto trigger event
-        if (event.nativeEvent.cancelable && !event.nativeEvent.composed) {
-            stateUpdate({ options: [] });
-            return;
-        }
-        // Stop bubble
-        event.stopPropagation();
-        // Call with delay
-        delayed.call(undefined, event.currentTarget.value);
-    };
-    // Directly load data
-    const loadDataDirect = (keyword, id) => {
-        // Reset options
-        // setOptions([]);
-        if (id == null) {
-            // Reset real value
-            const input = inputRef.current;
-            if (input && input.value !== '') {
-                // Different value, trigger change event
-                ReactUtils.triggerChange(input, '', false);
-            }
-            if (states.options.length > 0) {
-                // Reset options
-                stateUpdate({ options: [] });
-            }
-        }
-        // Loading indicator
-        if (!states.loading)
-            stateUpdate({ loading: true });
-        // Load list
-        loadData(keyword, id).then((options) => {
-            if (!isMounted.current)
-                return;
-            // Indicates loading completed
-            stateUpdate({
-                loading: false,
-                ...(options != null && { options })
-            });
-        });
-    };
-    const delayed = useDelayedExecutor(loadDataDirect, 480);
-    const setInputValue = (value) => {
-        var _a;
-        stateUpdate({ value });
-        // Input value
-        const input = inputRef.current;
-        if (input) {
-            // Update value
-            const newValue = (_a = DataTypes.getStringValue(value, idField)) !== null && _a !== void 0 ? _a : '';
-            if (newValue !== input.value) {
-                // Different value, trigger change event
-                ReactUtils.triggerChange(input, newValue, false);
-            }
-        }
-    };
-    if (localIdValue != null && localIdValue !== '') {
-        if (state.idLoaded) {
-            // Set default
-            if (!state.idSet && states.options.length == 1) {
-                stateUpdate({ value: states.options[0] });
-                state.idSet = true;
-            }
-        }
-        else {
-            // Load id data
-            loadDataDirect(undefined, localIdValue);
-            state.idLoaded = true;
-        }
-    }
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-            delayed.clear();
-        };
-    }, []);
-    // Layout
-    return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: `${inputValue !== null && inputValue !== void 0 ? inputValue : ''}`, readOnly: true, onChange: inputOnChange }),
-        React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
-                // Set value
-                setInputValue(value);
-                // Custom
-                if (onChange != null)
-                    onChange(event, value, reason, details);
-                // For clear case
-                if (reason === 'clear') {
-                    stateUpdate({ options: [] });
-                    loadDataDirect();
-                }
-            }, open: states.open, openOnFocus: openOnFocus, onOpen: () => {
-                // Should load
-                const loading = states.loading
-                    ? true
-                    : states.options.length === 0;
-                stateUpdate({ open: true, loading });
-                // If not loading
-                if (loading)
-                    loadDataDirect(undefined, states.value == null
-                        ? undefined
-                        : states.value[idField]);
-            }, onClose: () => {
-                stateUpdate({
-                    open: false,
-                    ...(!states.value && { options: [] })
-                });
-            }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...params, readOnly: readOnly, label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], ...rest })));
-}

package/lib/mu/TooltipClick.d.ts

@@ -1,15 +0,0 @@
-import { TooltipProps } from '@mui/material';
-import React from 'react';
-/**
- * Tooltip with click visibility props
- */
-export interface TooltipClickProps extends Omit<TooltipProps, 'children' | 'open' | 'disableFocusListener' | 'disableTouchListener'> {
-    children: (openTooltip: (newTitle?: string) => void) => React.ReactElement<any, any>;
-    disableHoverListener?: boolean;
-}
-/**
- * Tooltip with click visibility
- * @param props Props
- * @returns Component
- */
-export declare function TooltipClick(props: TooltipClickProps): JSX.Element;

package/lib/mu/TooltipClick.js

@@ -1,40 +0,0 @@
-import { ClickAwayListener, Tooltip } from '@mui/material';
-import React from 'react';
-import { useDelayedExecutor } from '../uses/useDelayedExecutor';
-/**
- * Tooltip with click visibility
- * @param props Props
- * @returns Component
- */
-export function TooltipClick(props) {
-    // Destruct
-    // leaveDelay set to 5 seconds to hide the tooltip automatically
-    const { children, disableHoverListener = true, leaveDelay = 5000, onClose, title, ...rest } = props;
-    // State
-    const [localTitle, setTitle] = React.useState(title);
-    const [open, setOpen] = React.useState(false);
-    const delayed = leaveDelay > 0
-        ? useDelayedExecutor(() => setOpen(false), leaveDelay)
-        : undefined;
-    // Callback for open the tooltip
-    const openTooltip = (newTitle) => {
-        setOpen(true);
-        if (newTitle)
-            setTitle(newTitle);
-        delayed === null || delayed === void 0 ? void 0 : delayed.call();
-    };
-    React.useEffect(() => {
-        return () => {
-            delayed === null || delayed === void 0 ? void 0 : delayed.clear();
-        };
-    }, []);
-    // Layout
-    return (React.createElement(ClickAwayListener, { onClickAway: () => setOpen(false) },
-        React.createElement(Tooltip, { PopperProps: {
-                disablePortal: true
-            }, onClose: (event) => {
-                setOpen(false);
-                if (onClose)
-                    onClose(event);
-            }, title: localTitle, open: open, disableFocusListener: true, disableTouchListener: true, disableHoverListener: disableHoverListener, onMouseOver: disableHoverListener ? undefined : () => setOpen(true), ...rest }, children(openTooltip))));
-}

package/lib/mu/UserAvatar.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-/**
- * User avatar props
- */
-export interface UserAvatarProps {
-    /**
-     * Photo src
-     */
-    src?: string;
-    /**
-     * Format title
-     */
-    formatTitle?: (title?: string) => string;
-    /**
-     * Title of the user
-     */
-    title?: string;
-}
-/**
- * User avatar
- * @param props Props
- * @returns Component
- */
-export declare function UserAvatar(props: UserAvatarProps): JSX.Element;

package/lib/mu/UserAvatar.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Avatar } from '@mui/material';
-import { BusinessUtils } from '@etsoo/appscript';
-import { globalApp } from '../app/ReactApp';
-/**
- * User avatar
- * @param props Props
- * @returns Component
- */
-export function UserAvatar(props) {
-    // Destruct
-    const { src, title, formatTitle = (title) => {
-        return BusinessUtils.formatAvatarTitle(title, 3, typeof globalApp === 'undefined'
-            ? 'ME'
-            : globalApp.get('me'));
-    } } = props;
-    // Format
-    const fTitle = formatTitle(title);
-    const count = fTitle.length;
-    return (React.createElement(Avatar, { title: title, src: src, sx: {
-            width: 48,
-            height: 32,
-            fontSize: count <= 2 ? '15px' : '12px'
-        } }, fTitle));
-}

package/lib/mu/UserAvatarEditor.d.ts

@@ -1,53 +0,0 @@
-/// <reference types="react" />
-/**
- * User avatar editor to Blob helper
- */
-export interface UserAvatarEditorToBlob {
-    (canvas: HTMLCanvasElement, mimeType?: string, quality?: number): Promise<Blob>;
-}
-/**
- * User avatar editor on done handler
- */
-export interface UserAvatarEditorOnDoneHandler {
-    (canvas: HTMLCanvasElement, toBlob: UserAvatarEditorToBlob): void;
-}
-/**
- * User avatar editor props
- */
-export interface UserAvatarEditorProps {
-    /**
-     * Cropping border size
-     */
-    border?: number;
-    /**
-     * Image source
-     */
-    image?: string | File;
-    /**
-     * Max width to save
-     */
-    maxWidth?: number;
-    /**
-     * On done handler
-     */
-    onDone: UserAvatarEditorOnDoneHandler;
-    /**
-     * Return scaled result?
-     */
-    scaledResult?: boolean;
-    /**
-     * Width of the editor
-     */
-    width?: number;
-    /**
-     * Height of the editor
-     */
-    height?: number;
-}
-/**
- * User avatar editor
- * https://github.com/mosch/react-avatar-editor
- * @param props Props
- * @returns Component
- */
-export declare function UserAvatarEditor(props: UserAvatarEditorProps): JSX.Element;

package/lib/mu/UserAvatarEditor.js

@@ -1,129 +0,0 @@
-import { Button, ButtonGroup, Slider, Stack } from '@mui/material';
-import React from 'react';
-import AvatarEditor from 'react-avatar-editor';
-import RotateLeftIcon from '@mui/icons-material/RotateLeft';
-import RotateRightIcon from '@mui/icons-material/RotateRight';
-import ClearAllIcon from '@mui/icons-material/ClearAll';
-import ComputerIcon from '@mui/icons-material/Computer';
-import DoneIcon from '@mui/icons-material/Done';
-import pica from 'pica';
-import { Labels } from '../app/Labels';
-const defaultState = {
-    scale: 1,
-    rotate: 0
-};
-/**
- * User avatar editor
- * https://github.com/mosch/react-avatar-editor
- * @param props Props
- * @returns Component
- */
-export function UserAvatarEditor(props) {
-    // Destruct
-    const { border = 30, image, maxWidth, onDone, scaledResult = false, width = 200, height = 200 } = props;
-    // Container width
-    const containerWidth = width + 2 * border + 44 + 4;
-    // Calculated max width
-    const maxWidthCalculated = maxWidth == null || maxWidth < 200 ? 3 * width : maxWidth;
-    // Labels
-    const labels = Labels.UserAvatarEditor;
-    // Ref
-    const ref = React.createRef();
-    // Button ref
-    const buttonRef = React.createRef();
-    // Preview image state
-    const [previewImage, setPreviewImage] = React.useState(image);
-    // Is ready state
-    const [ready, setReady] = React.useState(false);
-    // Editor states
-    const [editorState, setEditorState] = React.useState(defaultState);
-    // Handle zoom
-    const handleZoom = (_event, value, _activeThumb) => {
-        const scale = typeof value === 'number' ? value : value[0];
-        const newState = { ...editorState, scale };
-        setEditorState(newState);
-    };
-    // Handle image load
-    const handleLoad = () => {
-        setReady(true);
-    };
-    // Handle file change
-    const handleFileChange = (event) => {
-        var _a;
-        const files = event.target.files;
-        if (files == null || files.length == 0)
-            return;
-        // Reset all settings
-        handleReset();
-        // Set new preview image
-        setPreviewImage(files[0]);
-        // Set ready state
-        setReady(false);
-        // Make the submit button visible
-        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView(false);
-    };
-    // Handle reset
-    const handleReset = () => {
-        setEditorState({ ...defaultState });
-    };
-    // Handle rotate
-    const handleRotate = (r) => {
-        let rotate = editorState.rotate + r;
-        if (rotate >= 360 || rotate <= -360)
-            rotate = 0;
-        const newState = { ...editorState, rotate };
-        setEditorState(newState);
-    };
-    // Handle done
-    const handleDone = () => {
-        var _a, _b;
-        // Data
-        var data = scaledResult
-            ? (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getImageScaledToCanvas()
-            : (_b = ref.current) === null || _b === void 0 ? void 0 : _b.getImage();
-        if (data == null)
-            return;
-        // pica
-        const picaInstance = pica();
-        // toBlob helper
-        // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
-        const toBlob = (canvas, mimeType = 'image/jpeg', quality = 1) => {
-            return picaInstance.toBlob(canvas, mimeType, quality);
-        };
-        if (data.width > maxWidthCalculated) {
-            // Target height
-            const heightCalculated = (height * maxWidthCalculated) / width;
-            // Target
-            const to = document.createElement('canvas');
-            to.width = maxWidthCalculated;
-            to.height = heightCalculated;
-            // Large photo, resize it
-            // https://github.com/nodeca/pica
-            picaInstance
-                .resize(data, to, {
-                unsharpAmount: 160,
-                unsharpRadius: 0.6,
-                unsharpThreshold: 1
-            })
-                .then((result) => onDone(result, toBlob));
-        }
-        else {
-            onDone(data, toBlob);
-        }
-    };
-    return (React.createElement(Stack, { direction: "column", spacing: 0.5, width: containerWidth },
-        React.createElement(Button, { variant: "outlined", size: "medium", component: "label", startIcon: React.createElement(ComputerIcon, null), fullWidth: true },
-            labels.upload,
-            React.createElement("input", { id: "fileInput", type: "file", accept: "image/png, image/jpeg", multiple: false, hidden: true, onChange: handleFileChange })),
-        React.createElement(Stack, { direction: "row", spacing: 0.5 },
-            React.createElement(AvatarEditor, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage !== null && previewImage !== void 0 ? previewImage : '', scale: editorState.scale, rotate: editorState.rotate }),
-            React.createElement(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready },
-                React.createElement(Button, { onClick: () => handleRotate(90), title: labels.rotateRight },
-                    React.createElement(RotateRightIcon, null)),
-                React.createElement(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft },
-                    React.createElement(RotateLeftIcon, null)),
-                React.createElement(Button, { onClick: handleReset, title: labels.reset },
-                    React.createElement(ClearAllIcon, null)))),
-        React.createElement(Slider, { title: labels.zoom, disabled: !ready, min: 1, max: 5, step: 0.01, value: editorState.scale, onChange: handleZoom }),
-        React.createElement(Button, { ref: buttonRef, variant: "contained", startIcon: React.createElement(DoneIcon, null), disabled: !ready, onClick: handleDone }, labels.done)));
-}

package/lib/mu/pages/CommonPage.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { CommonPageProps } from './CommonPageProps';
-/**
- * Default scroll container
- */
-export declare const CommonPageScrollContainer: typeof globalThis;
-/**
- * Common page
- * @param props Props
- */
-export declare function CommonPage(props: CommonPageProps): JSX.Element;

package/lib/mu/pages/CommonPage.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import { FabBox } from '../FabBox';
-import { ScrollTopFab } from '../ScrollTopFab';
-import { Labels } from '../../app/Labels';
-import { MUGlobal } from '../MUGlobal';
-import { MoreFab } from '../MoreFab';
-import { ReactAppStateDetector } from '../../app/ReactApp';
-import { Container, Fab } from '@mui/material';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import { BackButton } from '../BackButton';
-/**
- * Default scroll container
- */
-export const CommonPageScrollContainer = global;
-/**
- * Common page
- * @param props Props
- */
-export function CommonPage(props) {
-    // Destruct
-    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = 'small', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = {}, ...rest } = props;
-    // Fab padding
-    const fabPadding = MUGlobal.increase(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.CommonPage;
-    // Update
-    const update = onUpdateAll
-        ? onUpdateAll
-        : onUpdate
-            ? (authorized) => {
-                if (authorized == null || authorized)
-                    onUpdate();
-            }
-            : onRefresh
-                ? (authorized) => {
-                    if (authorized)
-                        onRefresh();
-                }
-                : undefined;
-    // Return the UI
-    return (React.createElement(React.Fragment, null,
-        update && (React.createElement(ReactAppStateDetector, { targetFields: targetFields, update: update })),
-        React.createElement(Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest },
-            React.createElement(FabBox, { sx: {
-                    zIndex: 1,
-                    bottom: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
-                    right: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing)
-                }, columnDirection: fabColumnDirection },
-                scrollContainer && (React.createElement(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })),
-                fabButtons,
-                onRefresh != null && (React.createElement(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: 'none', md: 'inherit' } } },
-                    React.createElement(RefreshIcon, null))),
-                React.createElement(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }),
-                supportBack && (React.createElement(BackButton, { title: labels.back, size: fabSize }))),
-            children)));
-}

package/lib/mu/pages/CommonPageProps.d.ts

@@ -1,60 +0,0 @@
-/// <reference types="react" />
-import { UserKey } from '@etsoo/appscript';
-import { ContainerProps } from '@mui/material';
-import { ListItemReact } from '../../components/ListItemReact';
-import { IStateUpdate } from '../../states/IState';
-import { CustomFabSize } from '../CustomFabProps';
-/**
- * Common page props
- * Default container id is 'pageContainer'
- */
-export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
-    /**
-     * Fab buttons
-     */
-    fabButtons?: React.ReactNode;
-    /**
-     * Fab size
-     */
-    fabSize?: CustomFabSize;
-    /**
-     * Fab flex column direction, undefined to hide it
-     */
-    fabColumnDirection?: boolean;
-    /**
-     * Fab padding adjust
-     */
-    fabPaddingAdjust?: number;
-    /**
-     * More actions
-     */
-    moreActions?: ListItemReact[];
-    /**
-     * On refresh callback, only when authorized = true
-     */
-    onRefresh?: () => void | PromiseLike<void>;
-    /**
-     * On page update, when authorized = null or true case, may uses onRefresh
-     */
-    onUpdate?: () => void | PromiseLike<void>;
-    /**
-     * On page update, all cases with authorized
-     */
-    onUpdateAll?: IStateUpdate;
-    /**
-     * Paddings
-     */
-    paddings?: Record<string, string | number>;
-    /**
-     * Scroll container
-     */
-    scrollContainer?: HTMLElement | object;
-    /**
-     * Support back click
-     */
-    supportBack?: boolean;
-    /**
-     * State last changed fields
-     */
-    targetFields?: UserKey[];
-}

package/lib/mu/pages/CommonPageProps.js

@@ -1 +0,0 @@
-export {};

package/lib/mu/pages/DataGridPage.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { DataGridPageProps } from './DataGridPageProps';
-/**
- * DataGrid page
- * @param props Props
- * @returns Component
- */
-export declare function DataGridPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: DataGridPageProps<T, F, D>): JSX.Element;

package/lib/mu/pages/DataGridPage.js

@@ -1,81 +0,0 @@
-import { Box, Stack } from '@mui/material';
-import React from 'react';
-import { GridDataGet } from '../../components/GridLoader';
-import useCombinedRefs from '../../uses/useCombinedRefs';
-import { useDimensions } from '../../uses/useDimensions';
-import { DataGridEx } from '../DataGridEx';
-import { MUGlobal } from '../MUGlobal';
-import { SearchBar } from '../SearchBar';
-import { CommonPage } from './CommonPage';
-/**
- * DataGrid page
- * @param props Props
- * @returns Component
- */
-export function DataGridPage(props) {
-    var _a;
-    // Destruct
-    const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
-    (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
-    // States
-    const [states, setStates] = React.useReducer((currentState, newState) => {
-        return { ...currentState, ...newState };
-    }, {
-        height
-    });
-    const refs = useCombinedRefs(mRef, (ref) => {
-        if (ref == null)
-            return;
-        states.ref = ref;
-        //setStates({ ref });
-    });
-    // On submit callback
-    const onSubmit = (data, _reset) => {
-        setStates({ data });
-    };
-    const localLoadData = (props) => {
-        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 (React.createElement(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, outerRef: (element) => {
-                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 (React.createElement(CommonPage, { ...pageProps, scrollContainer: states.element },
-        React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], sx: {
-                    paddingBottom: pageProps.paddings
-                } },
-                React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),
-            list)));
-}