@etsoo/materialui 1.3.57 → 1.3.59

package/lib/TiplistPro.d.ts

@@ -1,6 +1,6 @@
 import { ListType2 } from "@etsoo/shared";
 import { AutocompleteProps } from "@mui/material";
-import React, { ChangeEventHandler } from "react";
+import { ChangeEventHandler } from "react";
 import { InputFieldProps } from "./InputField";
 /**
  * TiplistPro props
@@ -53,4 +53,4 @@ export type TiplistProProps<T extends ListType2 = ListType2> = Omit<Autocomplete
  * @param props Props
  * @returns Component
  */
-export declare function TiplistPro<T extends ListType2 = ListType2>(props: TiplistProProps<T>): React.JSX.Element;
+export declare function TiplistPro<T extends ListType2 = ListType2>(props: TiplistProProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/TiplistPro.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ReactUtils, useDelayedExecutor } from "@etsoo/react";
 import { DataTypes } from "@etsoo/shared";
 import { Autocomplete } from "@mui/material";
@@ -149,53 +150,51 @@ export function TiplistPro(props) {
         };
     }, []);
     // Layout
-    return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }),
-        React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
-                if (typeof value === "object") {
-                    // Set value
-                    setInputValue(value);
-                }
-                // Custom
-                if (onChange != null)
-                    onChange(event, value, reason, details);
-                if (onValueChange) {
-                    if (typeof value === "object")
-                        onValueChange(value == null ? null : value);
-                }
-                // For clear case
-                if (reason === "clear") {
-                    stateUpdate({ options: [], open: event.type === "click" });
-                    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 && typeof states.value === "object"
-                        ? states.value.id
-                        : undefined);
-            }, onClose: () => {
-                stateUpdate({
-                    open: false,
-                    ...(!states.value && { options: [] })
-                });
-            }, loading: states.loading, renderInput: (params) => (React.createElement(InputField, { ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
-                    if (states.value == null && onChange)
-                        onChange(event, event.target.value, "blur", undefined);
-                }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
-                if (item.id === -1)
-                    return true;
-                return getOptionDisabled ? getOptionDisabled(item) : false;
-            }, getOptionLabel: (item) => {
-                if (typeof item === "string")
-                    return item;
-                if (item["id"] === -1)
-                    return (more ?? "More") + "...";
-                if (getOptionLabel == null)
-                    return DataTypes.getListItemLabel(item);
-                return getOptionLabel(item);
-            }, ...rest })));
+    return (_jsxs("div", { children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
+                    if (typeof value === "object") {
+                        // Set value
+                        setInputValue(value);
+                    }
+                    // Custom
+                    if (onChange != null)
+                        onChange(event, value, reason, details);
+                    if (onValueChange) {
+                        if (typeof value === "object")
+                            onValueChange(value == null ? null : value);
+                    }
+                    // For clear case
+                    if (reason === "clear") {
+                        stateUpdate({ options: [], open: event.type === "click" });
+                        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 && typeof states.value === "object"
+                            ? states.value.id
+                            : undefined);
+                }, onClose: () => {
+                    stateUpdate({
+                        open: false,
+                        ...(!states.value && { options: [] })
+                    });
+                }, loading: states.loading, renderInput: (params) => (_jsx(InputField, { ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
+                        if (states.value == null && onChange)
+                            onChange(event, event.target.value, "blur", undefined);
+                    }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
+                    if (item.id === -1)
+                        return true;
+                    return getOptionDisabled ? getOptionDisabled(item) : false;
+                }, getOptionLabel: (item) => {
+                    if (typeof item === "string")
+                        return item;
+                    if (item["id"] === -1)
+                        return (more ?? "More") + "...";
+                    if (getOptionLabel == null)
+                        return DataTypes.getListItemLabel(item);
+                    return getOptionLabel(item);
+                }, ...rest })] }));
 }

package/lib/TooltipClick.d.ts

@@ -12,4 +12,4 @@ export interface TooltipClickProps extends Omit<TooltipProps, 'children' | 'open
  * @param props Props
  * @returns Component
  */
-export declare function TooltipClick(props: TooltipClickProps): React.JSX.Element;
+export declare function TooltipClick(props: TooltipClickProps): import("react/jsx-runtime").JSX.Element;

package/lib/TooltipClick.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useDelayedExecutor } from '@etsoo/react';
 import { ClickAwayListener, Tooltip } from '@mui/material';
 import React from 'react';
@@ -29,12 +30,11 @@ export function TooltipClick(props) {
         };
     }, []);
     // Layout
-    return (React.createElement(ClickAwayListener, { onClickAway: () => setOpen(false) },
-        React.createElement(Tooltip, { PopperProps: {
+    return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(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))));
+            }, title: localTitle, open: open, disableFocusListener: true, disableTouchListener: true, disableHoverListener: disableHoverListener, onMouseOver: disableHoverListener ? undefined : () => setOpen(true), ...rest, children: children(openTooltip) }) }));
 }

package/lib/TwoFieldInput.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { InputFieldProps } from './InputField';
 type ValueType = string | number | Date | null | undefined;
 /**
@@ -19,5 +18,5 @@ export type TwoFieldInputProps = Omit<InputFieldProps, 'InputProps' | 'value'> &
  * @param props Props
  * @returns Component
  */
-export declare function TwoFieldInput(props: TwoFieldInputProps): React.JSX.Element;
+export declare function TwoFieldInput(props: TwoFieldInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/TwoFieldInput.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input, InputAdornment } from '@mui/material';
 import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
 import { useDimensions } from '@etsoo/react';
@@ -52,13 +53,11 @@ export function TwoFieldInput(props) {
         valueRef.current = localValues;
     }, [localValues]);
     // Layout
-    return (React.createElement(InputField, { name: `${name}-start`, type: type, value: formatValue(localValues[0], type), ref: dimensions[0][0], inputProps: inputProps, InputProps: {
-            endAdornment: (React.createElement(InputAdornment, { position: "end", sx: {
+    return (_jsx(InputField, { name: `${name}-start`, type: type, value: formatValue(localValues[0], type), ref: dimensions[0][0], inputProps: inputProps, InputProps: {
+            endAdornment: (_jsxs(InputAdornment, { position: "end", sx: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 1
-                } },
-                React.createElement(ArrowRightAltIcon, null),
-                React.createElement(Input, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, inputProps: inputProps })))
+                }, children: [_jsx(ArrowRightAltIcon, {}), _jsx(Input, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, inputProps: inputProps })] }))
         }, onInput: onInput, onChange: handleChange, ...rest }));
 }

package/lib/UserAvatar.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 /**
  * User avatar props
  */
@@ -21,4 +20,4 @@ export interface UserAvatarProps {
  * @param props Props
  * @returns Component
  */
-export declare function UserAvatar(props: UserAvatarProps): React.JSX.Element;
+export declare function UserAvatar(props: UserAvatarProps): import("react/jsx-runtime").JSX.Element;

package/lib/UserAvatar.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar } from "@mui/material";
 import { BusinessUtils } from "@etsoo/appscript";
 import { globalApp } from "./app/ReactApp";
@@ -15,9 +15,9 @@ export function UserAvatar(props) {
     // Format
     const fTitle = formatTitle(title);
     const count = fTitle.length;
-    return (React.createElement(Avatar, { title: title, src: src, sx: {
+    return (_jsx(Avatar, { title: title, src: src, sx: {
             width: 48,
             height: 32,
             fontSize: count <= 2 ? "15px" : "12px"
-        } }, fTitle));
+        }, children: fTitle }));
 }

package/lib/UserAvatarEditor.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 /**
  * User avatar editor to Blob helper
  */
@@ -54,4 +53,4 @@ export interface UserAvatarEditorProps {
  * @param props Props
  * @returns Component
  */
-export declare function UserAvatarEditor(props: UserAvatarEditorProps): React.JSX.Element;
+export declare function UserAvatarEditor(props: UserAvatarEditorProps): import("react/jsx-runtime").JSX.Element;

package/lib/UserAvatarEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, ButtonGroup, IconButton, Skeleton, Slider, Stack } from "@mui/material";
 import React from "react";
 import RotateLeftIcon from "@mui/icons-material/RotateLeft";
@@ -135,23 +136,5 @@ export function UserAvatarEditor(props) {
     };
     // Load the component
     const AE = React.lazy(() => import("react-avatar-editor"));
-    return (React.createElement(Stack, { direction: "column", spacing: 0.5, width: containerWidth },
-        React.createElement(FileUploadButton, { variant: "outlined", size: "medium", startIcon: React.createElement(ComputerIcon, null), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" } }, labels.upload),
-        React.createElement(Stack, { direction: "row", spacing: 0.5 },
-            React.createElement(React.Suspense, { fallback: React.createElement(Skeleton, { variant: "rounded", width: width, height: height }) },
-                React.createElement(AE, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: 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(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center" },
-            React.createElement(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false) },
-                React.createElement(RemoveIcon, null)),
-            React.createElement(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }),
-            React.createElement(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true) },
-                React.createElement(AddIcon, null))),
-        React.createElement(Button, { ref: buttonRef, variant: "contained", startIcon: React.createElement(DoneIcon, null), disabled: !ready, onClick: handleDone }, labels.done)));
+    return (_jsxs(Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ComputerIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" }, children: labels.upload }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: height }), children: _jsx(AE, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage ?? "", scale: editorState.scale, rotate: editorState.rotate }) }), _jsxs(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [_jsx(Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: _jsx(RotateRightIcon, {}) }), _jsx(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: _jsx(RotateLeftIcon, {}) }), _jsx(Button, { onClick: handleReset, title: labels.reset, children: _jsx(ClearAllIcon, {}) })] })] }), _jsxs(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [_jsx(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: _jsx(RemoveIcon, {}) }), _jsx(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), _jsx(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: _jsx(AddIcon, {}) })] }), _jsx(Button, { ref: buttonRef, variant: "contained", startIcon: _jsx(DoneIcon, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
 }

package/lib/messages/OperationMessageContainer.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { OperationMessageHandlerAll } from "./OperationMessageHandler";
 /**
  * Operation message container properties
@@ -22,4 +21,4 @@ export type OperationMessageContainerProps = {
  * @param props Props
  * @returns Component
  */
-export declare function OperationMessageContainer(props: OperationMessageContainerProps): React.JSX.Element;
+export declare function OperationMessageContainer(props: OperationMessageContainerProps): import("react/jsx-runtime").JSX.Element;

package/lib/messages/OperationMessageContainer.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { MessageUtils } from "./MessageUtils";
 /**
@@ -38,5 +39,5 @@ export function OperationMessageContainer(props) {
             MessageUtils.offOperationMessage(my);
         };
     }, []);
-    return React.createElement(React.Fragment, null);
+    return _jsx(React.Fragment, {});
 }

package/lib/pages/CommonPage.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 import { CommonPageProps } from "./CommonPageProps";
 /**
  * Common page
  * @param props Props
  */
-export declare function CommonPage(props: CommonPageProps): React.JSX.Element;
+export declare function CommonPage(props: CommonPageProps): import("react/jsx-runtime").JSX.Element;

package/lib/pages/CommonPage.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { FabBox } from "../FabBox";
 import { ScrollTopFab } from "../ScrollTopFab";
@@ -40,28 +41,18 @@ export function CommonPage(props) {
     const theme = useTheme();
     const distance = React.useMemo(() => MUGlobal.updateWithTheme(fabPadding, theme.spacing), [fabPadding, theme.spacing]);
     // 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,
-                    ...(typeof fabTop === "function"
-                        ? fabTop(theme, fabPadding)
-                        : fabTop
-                            ? {
-                                top: MUGlobal.updateWithTheme(MUGlobal.increase(fabPadding, 7), theme.spacing),
-                                right: distance
-                            }
-                            : {
-                                bottom: distance,
-                                right: distance
-                            })
-                }, columnDirection: fabColumnDirection, fabPanel: fabPanel },
-                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)));
+    return (_jsxs(React.Fragment, { children: [update && (_jsx(ReactAppStateDetector, { targetFields: targetFields, update: update })), _jsxs(Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [_jsxs(FabBox, { sx: {
+                            zIndex: 1,
+                            ...(typeof fabTop === "function"
+                                ? fabTop(theme, fabPadding)
+                                : fabTop
+                                    ? {
+                                        top: MUGlobal.updateWithTheme(MUGlobal.increase(fabPadding, 7), theme.spacing),
+                                        right: distance
+                                    }
+                                    : {
+                                        bottom: distance,
+                                        right: distance
+                                    })
+                        }, columnDirection: fabColumnDirection, fabPanel: fabPanel, children: [scrollContainer && (_jsx(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })), fabButtons, onRefresh != null && (_jsx(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } }, children: _jsx(RefreshIcon, {}) })), _jsx(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }), supportBack && _jsx(BackButton, { title: labels.back, size: fabSize })] }), children] })] }));
 }

package/lib/pages/DataGridPage.d.ts

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

package/lib/pages/DataGridPage.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCombinedRefs, useDimensions } from "@etsoo/react";
 import { Box, Stack } from "@mui/material";
 import React from "react";
@@ -85,7 +86,7 @@ export function DataGridPage(props) {
         const gridHeight = states.height;
         if (gridHeight == null)
             return;
-        return (React.createElement(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onGridScroll, outerRef: (element) => {
+        return (_jsx(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onGridScroll, outerRef: (element) => {
                 if (element != null)
                     setStates({ element });
             }, ...rest }));
@@ -98,11 +99,7 @@ export function DataGridPage(props) {
     }, [ref, data]);
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     // 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: f, onSubmit: onSubmit })),
-            list)));
+    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] }) }));
 }

package/lib/pages/EditPage.d.ts

@@ -43,4 +43,4 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
  * Add / Edit page
  * @param props Props
  */
-export declare function EditPage(props: EditPageProps): React.JSX.Element;
+export declare function EditPage(props: EditPageProps): import("react/jsx-runtime").JSX.Element;

package/lib/pages/EditPage.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Grid } from "@mui/material";
-import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { CommonPage } from "./CommonPage";
 import SaveIcon from "@mui/icons-material/Save";
@@ -16,18 +16,9 @@ export function EditPage(props) {
     const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
-    return (React.createElement(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest },
-        operationMessageHandler && (React.createElement(OperationMessageContainer, { handler: operationMessageHandler })),
-        topPart,
-        React.createElement("form", { onSubmit: onSubmit },
-            React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1 }, children),
-            React.createElement(Grid, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
-                    top: "auto",
-                    bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
-                    paddingTop: paddings
-                } },
-                isEditing && onDelete && (React.createElement(Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: React.createElement(DeleteIcon, { color: "warning" }) }, labels.delete)),
-                React.createElement(Button, { variant: "contained", type: "submit", startIcon: React.createElement(SaveIcon, null), sx: { flexGrow: 1 }, disabled: submitDisabled }, labels.save),
-                supportBack && React.createElement(BackButton, { title: labels.back }))),
-        bottomPart));
+    return (_jsxs(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), topPart, _jsxs("form", { onSubmit: onSubmit, children: [_jsx(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1, children: children }), _jsxs(Grid, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
+                            top: "auto",
+                            bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
+                            paddingTop: paddings
+                        }, children: [isEditing && onDelete && (_jsx(Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: _jsx(DeleteIcon, { color: "warning" }), children: labels.delete })), _jsx(Button, { variant: "contained", type: "submit", startIcon: _jsx(SaveIcon, {}), sx: { flexGrow: 1 }, disabled: submitDisabled, children: labels.save }), supportBack && _jsx(BackButton, { title: labels.back })] })] }), bottomPart] }));
 }

package/lib/pages/FixedListPage.d.ts

@@ -1,5 +1,4 @@
 import { DataTypes } from "@etsoo/shared";
-import React from "react";
 import { ListPageProps } from "./ListPageProps";
 /**
  * Fixed height list page
@@ -13,4 +12,4 @@ export declare function FixedListPage<T extends object, F extends DataTypes.Basi
      * @param rect Current rect data
      */
     adjustHeight?: (height: number, rect: DOMRect) => number;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/pages/FixedListPage.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCombinedRefs, useDimensions } from "@etsoo/react";
 import { Box, Stack } from "@mui/material";
 import React from "react";
@@ -79,21 +80,16 @@ export function FixedListPage(props) {
                 Math.round(rect.top + rect.height + 1);
             if (adjustHeight != null)
                 height -= adjustHeight(height, rect);
-            return (React.createElement(Box, { id: "list-container", sx: {
+            return (_jsx(Box, { id: "list-container", sx: {
                     height: height + "px"
-                } },
-                React.createElement(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {
+                }, children: _jsx(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {
                         if (element != null)
                             updateScrollContainer(element);
-                    }, ...rest })));
+                    }, ...rest }) }));
         }
     }, [rect]);
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     const { paddings, ...pageRest } = pageProps;
     // Layout
-    return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer },
-        React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], sx: { padding: paddings } },
-                React.createElement(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 }) }), list] }) }));
 }

package/lib/pages/LeftDrawer.d.ts

@@ -32,4 +32,4 @@ export type LeftDrawerProps = React.PropsWithRef<{
      */
     onMinimize?: () => void;
 }>;
-export declare function LeftDrawer(props: React.PropsWithChildren<LeftDrawerProps>): React.JSX.Element;
+export declare function LeftDrawer(props: React.PropsWithChildren<LeftDrawerProps>): import("react/jsx-runtime").JSX.Element;

package/lib/pages/LeftDrawer.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Divider, Drawer, IconButton, List, Typography } from "@mui/material";
 import React from "react";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
@@ -17,7 +18,7 @@ export function LeftDrawer(props) {
     React.useEffect(() => {
         setOpen(open);
     }, [open]);
-    return (React.createElement(Drawer, { hidden: !openLocal, sx: {
+    return (_jsxs(Drawer, { hidden: !openLocal, sx: {
             width,
             flexShrink: 0,
             "& .MuiDrawer-paper": {
@@ -26,13 +27,5 @@ export function LeftDrawer(props) {
             }
         }, anchor: "left", variant: mdUp ? "persistent" : "temporary", open: open, transitionDuration: 0, onClose: mdUp ? undefined : handleDrawerClose, ModalProps: {
             keepMounted: true // Better open performance on mobile.
-        } },
-        React.createElement(DrawerHeader, null,
-            React.createElement("a", { href: "https://www.etsoo.com", title: globalApp?.get("etsoo") ?? "ETSOO", target: "_blank", rel: "noreferrer" },
-                React.createElement(Avatar, { src: logoUrl, variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } })),
-            React.createElement(Typography, { noWrap: true, component: "div", title: appName, sx: { flexGrow: 2 } }, appName),
-            React.createElement(IconButton, { size: "small", onClick: handleDrawerClose },
-                React.createElement(ChevronLeftIcon, null))),
-        React.createElement(Divider, null),
-        React.createElement(List, { onClick: mdUp ? undefined : handleDrawerClose }, children)));
+        }, children: [_jsxs(DrawerHeader, { children: [_jsx("a", { href: "https://www.etsoo.com", title: globalApp?.get("etsoo") ?? "ETSOO", target: "_blank", rel: "noreferrer", children: _jsx(Avatar, { src: logoUrl, variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } }) }), _jsx(Typography, { noWrap: true, component: "div", title: appName, sx: { flexGrow: 2 }, children: appName }), _jsx(IconButton, { size: "small", onClick: handleDrawerClose, children: _jsx(ChevronLeftIcon, {}) })] }), _jsx(Divider, {}), _jsx(List, { onClick: mdUp ? undefined : handleDrawerClose, children: children })] }));
 }

package/lib/pages/ListPage.d.ts

@@ -1,9 +1,8 @@
 import { DataTypes } from "@etsoo/shared";
-import React from "react";
 import { ListPageProps } from "./ListPageProps";
 /**
  * List page
  * @param props Props
  * @returns Component
  */
-export declare function ListPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListPageProps<T, F>): React.JSX.Element;
+export declare function ListPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListPageProps<T, F>): import("react/jsx-runtime").JSX.Element;

package/lib/pages/ListPage.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCombinedRefs } from "@etsoo/react";
 import { Box, Stack } from "@mui/material";
 import React from "react";
@@ -70,11 +71,7 @@ export function ListPage(props) {
     };
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     // Layout
-    return (React.createElement(CommonPage, { ...pageProps, scrollContainer: globalThis },
-        React.createElement(Stack, null,
-            React.createElement(Box, { sx: {
-                    paddingBottom: pageProps.paddings
-                } },
-                React.createElement(SearchBar, { fields: f, onSubmit: onSubmit })),
-            React.createElement(ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest }))));
+    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 })] }) }));
 }

package/lib/pages/ResponsivePage.d.ts

@@ -1,9 +1,8 @@
 import { DataTypes } from "@etsoo/shared";
-import React from "react";
 import { ResponsePageProps } from "./ResponsivePageProps";
 /**
  * Fixed height list page
  * @param props Props
  * @returns Component
  */
-export declare function ResponsivePage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ResponsePageProps<T, F>): React.JSX.Element;
+export declare function ResponsivePage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ResponsePageProps<T, F>): import("react/jsx-runtime").JSX.Element;