@etsoo/materialui 1.3.58 → 1.3.59

package/lib/PercentCircularProgress.js

@@ -1,20 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CircularProgress, Typography } from "@mui/material";
-import React from "react";
 export function PercentCircularProgress(props) {
     // Destruct
     const { textProps, valueUnit = "%", ...rest } = props;
     // Component
-    return (React.createElement(Box, { sx: { position: "relative", display: "inline-flex" } },
-        React.createElement(CircularProgress, { variant: "determinate", ...rest }),
-        React.createElement(Box, { sx: {
-                top: 0,
-                left: 0,
-                bottom: 0,
-                right: 0,
-                position: "absolute",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-            } },
-            React.createElement(Typography, { variant: "caption", component: "div", color: "text.secondary", ...textProps }, `${Math.round(props.value)}${valueUnit}`))));
+    return (_jsxs(Box, { sx: { position: "relative", display: "inline-flex" }, children: [_jsx(CircularProgress, { variant: "determinate", ...rest }), _jsx(Box, { sx: {
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    right: 0,
+                    position: "absolute",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                }, children: _jsx(Typography, { variant: "caption", component: "div", color: "text.secondary", ...textProps, children: `${Math.round(props.value)}${valueUnit}` }) })] }));
 }

package/lib/PercentLinearProgress.d.ts

@@ -1,8 +1,7 @@
 import { LinearProgressProps, TypographyProps } from "@mui/material";
-import React from "react";
 export type PercentLinearProgressProps = LinearProgressProps & {
     value: number;
     valueUnit?: string;
     textProps?: TypographyProps;
 };
-export declare function PercentLinearProgress(props: PercentLinearProgressProps): React.JSX.Element;
+export declare function PercentLinearProgress(props: PercentLinearProgressProps): import("react/jsx-runtime").JSX.Element;

package/lib/PercentLinearProgress.js

@@ -1,12 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, LinearProgress, Typography } from "@mui/material";
-import React from "react";
 export function PercentLinearProgress(props) {
     // Destruct
     const { textProps, valueUnit = "%", ...rest } = props;
     // Component
-    return (React.createElement(Box, { sx: { display: "flex", alignItems: "center", flexGrow: 2 } },
-        React.createElement(Box, { sx: { width: "100%", mr: 1 } },
-            React.createElement(LinearProgress, { variant: "determinate", ...rest })),
-        React.createElement(Box, { sx: { minWidth: 35 } },
-            React.createElement(Typography, { variant: "caption", color: "text.secondary", ...textProps }, `${Math.round(props.value)}${valueUnit}`))));
+    return (_jsxs(Box, { sx: { display: "flex", alignItems: "center", flexGrow: 2 }, children: [_jsx(Box, { sx: { width: "100%", mr: 1 }, children: _jsx(LinearProgress, { variant: "determinate", ...rest }) }), _jsx(Box, { sx: { minWidth: 35 }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", ...textProps, children: `${Math.round(props.value)}${valueUnit}` }) })] }));
 }

package/lib/ProgressCount.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 /**
  * Process count props
  */
@@ -41,4 +40,4 @@ export interface ProgressCountProps {
  * @param props Props
  * @returns Component
  */
-export declare function ProgressCount(props: ProgressCountProps): React.JSX.Element;
+export declare function ProgressCount(props: ProgressCountProps): import("react/jsx-runtime").JSX.Element;

package/lib/ProgressCount.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CircularProgress, LinearProgress, Typography } from '@mui/material';
 import React from 'react';
 /**
@@ -58,22 +59,15 @@ export function ProgressCount(props) {
         };
     }, []);
     if (linear)
-        return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', width: '100%' } },
-            React.createElement(Box, { sx: { width: '100%', mr: 1 } },
-                React.createElement(LinearProgress, { variant: variant, value: progressValue })),
-            React.createElement(Box, { sx: { minWidth } },
-                React.createElement(Typography, { variant: "body2", color: "text.secondary" }, `${value}${valueUnit}`))));
-    return (React.createElement(Box, { sx: { position: 'relative', display: 'inline-flex' } },
-        React.createElement(CircularProgress, { variant: variant, value: progressValue }),
-        React.createElement(Box, { sx: {
-                top: 0,
-                left: 0,
-                bottom: 0,
-                right: 0,
-                position: 'absolute',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center'
-            } },
-            React.createElement(Typography, { variant: "caption", component: "div", color: "text.secondary" }, `${value}${valueUnit}`))));
+        return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx(Box, { sx: { width: '100%', mr: 1 }, children: _jsx(LinearProgress, { variant: variant, value: progressValue }) }), _jsx(Box, { sx: { minWidth }, children: _jsx(Typography, { variant: "body2", color: "text.secondary", children: `${value}${valueUnit}` }) })] }));
+    return (_jsxs(Box, { sx: { position: 'relative', display: 'inline-flex' }, children: [_jsx(CircularProgress, { variant: variant, value: progressValue }), _jsx(Box, { sx: {
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    right: 0,
+                    position: 'absolute',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }, children: _jsx(Typography, { variant: "caption", component: "div", color: "text.secondary", children: `${value}${valueUnit}` }) })] }));
 }

package/lib/PullToRefreshUI.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import type { Options } from "pulltorefreshjs";
 /**
  * PullToRefresh UI
@@ -6,4 +5,4 @@ import type { Options } from "pulltorefreshjs";
  * @param props Props
  * @returns Component
  */
-export declare function PullToRefreshUI(props: Options): React.JSX.Element;
+export declare function PullToRefreshUI(props: Options): import("react/jsx-runtime").JSX.Element;

package/lib/PullToRefreshUI.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 /**
  * PullToRefresh UI
@@ -18,5 +19,5 @@ export function PullToRefreshUI(props) {
                 pr.destroyAll();
         };
     }, [props]);
-    return React.createElement(React.Fragment, null);
+    return _jsx(React.Fragment, {});
 }

package/lib/QuickList.d.ts

@@ -53,4 +53,4 @@ export type QuickListProps<T extends ListType2 = ListType2> = StackProps & {
  * @param props Props
  * @returns Component
  */
-export declare function QuickList<T extends ListType2 = ListType2>(props: QuickListProps<T>): React.JSX.Element;
+export declare function QuickList<T extends ListType2 = ListType2>(props: QuickListProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/QuickList.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DataTypes } from "@etsoo/shared";
 import { LinearProgress, List, ListItem, ListItemButton, Typography } from "@mui/material";
 import React from "react";
@@ -27,18 +28,15 @@ export function QuickList(props) {
         loadDataLocal();
     }, []);
     // Layout
-    return (React.createElement(VBox, { gap: gap, height: height, ...rest },
-        React.createElement(InputField, { label: label, changeDelay: 480, onChangeDelay: (event) => {
-                // Stop bubble
-                event.preventDefault();
-                event.stopPropagation();
-                loadDataLocal(event.target.value);
-            }, fullWidth: true, ...inputProps }),
-        loading ? (React.createElement(LinearProgress, null)) : items.length === 0 ? (React.createElement(Typography, { textAlign: "center" }, noMatchesLabel)) : (React.createElement(List, null, items.map((item) => (React.createElement(ListItem, { key: item.id, disablePadding: true, ...itemProps },
-            React.createElement(ListItemButton, { onClick: (event) => {
-                    if (onClick)
-                        onClick(event);
-                    if (!event.defaultPrevented && onItemClick)
-                        onItemClick(item);
-                }, ...buttonRest }, itemRenderer(item)))))))));
+    return (_jsxs(VBox, { gap: gap, height: height, ...rest, children: [_jsx(InputField, { label: label, changeDelay: 480, onChangeDelay: (event) => {
+                    // Stop bubble
+                    event.preventDefault();
+                    event.stopPropagation();
+                    loadDataLocal(event.target.value);
+                }, fullWidth: true, ...inputProps }), loading ? (_jsx(LinearProgress, {})) : items.length === 0 ? (_jsx(Typography, { textAlign: "center", children: noMatchesLabel })) : (_jsx(List, { children: items.map((item) => (_jsx(ListItem, { disablePadding: true, ...itemProps, children: _jsx(ListItemButton, { onClick: (event) => {
+                            if (onClick)
+                                onClick(event);
+                            if (!event.defaultPrevented && onItemClick)
+                                onItemClick(item);
+                        }, ...buttonRest, children: itemRenderer(item) }) }, item.id))) }))] }));
 }

package/lib/ResponsibleContainer.d.ts

@@ -96,4 +96,4 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
  * @param props Props
  * @returns Layout
  */
-export declare function ResponsibleContainer<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ResponsibleContainerProps<T, F>): React.JSX.Element;
+export declare function ResponsibleContainer<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ResponsibleContainerProps<T, F>): import("react/jsx-runtime").JSX.Element;

package/lib/ResponsibleContainer.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Stack } from "@mui/material";
 import React from "react";
 import { ReactUtils, useCombinedRefs, useDimensions } from "@etsoo/react";
@@ -143,11 +144,10 @@ export function ResponsibleContainer(props) {
             // Delete
             delete rest.itemRenderer;
             return [
-                React.createElement(Box, { className: "DataGridBox" },
-                    React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
+                _jsx(Box, { className: "DataGridBox", children: _jsx(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
                             if (element != null && elementReady)
                                 elementReady(element, true);
-                        }, onScroll: onGridScroll, columns: columns, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, ...rest })),
+                        }, onScroll: onGridScroll, columns: columns, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, ...rest }) }),
                 true
             ];
         }
@@ -161,11 +161,10 @@ export function ResponsibleContainer(props) {
         delete rest.hoverColor;
         delete rest.selectable;
         return [
-            React.createElement(Box, { className: "ListBox", sx: { height: heightLocal } },
-                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
+            _jsx(Box, { className: "ListBox", sx: { height: heightLocal }, children: _jsx(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
                         if (element != null && elementReady)
                             elementReady(element, false);
-                    }, onScroll: onListScroll, ...rest })),
+                    }, onScroll: onListScroll, ...rest }) }),
             false
         ];
     })();
@@ -173,7 +172,7 @@ export function ResponsibleContainer(props) {
         if (!hasFields || showDataGrid == null)
             return;
         const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
-        return (React.createElement(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
+        return (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
     }, [showDataGrid, hasFields, searchBarHeight]);
     // Pull container
     const pullContainer = showDataGrid == null
@@ -182,14 +181,10 @@ export function ResponsibleContainer(props) {
             ? ".DataGridEx-Body"
             : ".ScrollerListEx-Body";
     // Layout
-    return (React.createElement(Box, { sx: containerBoxSx == null
+    return (_jsxs(Box, { sx: containerBoxSx == null
             ? undefined
-            : containerBoxSx(paddings, hasFields, showDataGrid) },
-        React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox", sx: { height: hasFields ? searchBarHeight : 0 } }, searchBar),
-            list),
-        pullToRefresh && pullContainer && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
-                const container = document.querySelector(pullContainer);
-                return !container?.scrollTop;
-            } }))));
+            : containerBoxSx(paddings, hasFields, showDataGrid), children: [_jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], className: "SearchBox", sx: { height: hasFields ? searchBarHeight : 0 }, children: searchBar }), list] }), pullToRefresh && pullContainer && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
+                    const container = document.querySelector(pullContainer);
+                    return !container?.scrollTop;
+                } }))] }));
 }

package/lib/ScrollTopFab.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 import { CustomFabProps } from "./CustomFabProps";
 /**
  * Scroll to top fab
  * @returns Component
  */
-export declare function ScrollTopFab(props: CustomFabProps): React.JSX.Element;
+export declare function ScrollTopFab(props: CustomFabProps): import("react/jsx-runtime").JSX.Element;

package/lib/ScrollTopFab.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { Fab, useScrollTrigger, Zoom } from "@mui/material";
 import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
@@ -19,7 +20,5 @@ export function ScrollTopFab(props) {
     const handleClick = () => {
         target.scrollTo({ top: 0 });
     };
-    return trigger ? (React.createElement(Zoom, { in: trigger },
-        React.createElement(Fab, { color: color, size: size, title: title, onClick: handleClick },
-            React.createElement(VerticalAlignTopIcon, null)))) : (React.createElement(React.Fragment, null));
+    return trigger ? (_jsx(Zoom, { in: trigger, children: _jsx(Fab, { color: color, size: size, title: title, onClick: handleClick, children: _jsx(VerticalAlignTopIcon, {}) }) })) : (_jsx(React.Fragment, {}));
 }

package/lib/ScrollerListEx.d.ts

@@ -72,4 +72,4 @@ export type ScrollerListExProps<T extends object> = Omit<ScrollerListProps<T>, "
  * @param props Props
  * @returns Component
  */
-export declare function ScrollerListEx<T extends object>(props: ScrollerListExProps<T>): React.JSX.Element;
+export declare function ScrollerListEx<T extends object>(props: ScrollerListExProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/ScrollerListEx.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { css } from "@emotion/css";
 import { ScrollerList } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
@@ -81,7 +82,7 @@ function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, sele
     if (selected)
         rowClass += ` ${selectedClassName}`;
     // Layout
-    return (React.createElement("div", { className: rowClass, style: style, onMouseDown: (event) => onMouseDown(event.currentTarget, data), onClick: (event) => onClick && onClick(event, data), onDoubleClick: (event) => onDoubleClick && onDoubleClick(event, data) }, child));
+    return (_jsx("div", { className: rowClass, style: style, onMouseDown: (event) => onMouseDown(event.currentTarget, data), onClick: (event) => onClick && onClick(event, data), onDoubleClick: (event) => onDoubleClick && onDoubleClick(event, data), children: child }));
 }
 /**
  * Extended ScrollerList
@@ -157,5 +158,5 @@ export function ScrollerListEx(props) {
         return size + space;
     };
     // Layout
-    return (React.createElement(ScrollerList, { className: Utils.mergeClasses("ScrollerListEx-Body", className, createGridStyle(alternatingColors, selectedColor)), idField: idField, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
+    return (_jsx(ScrollerList, { className: Utils.mergeClasses("ScrollerListEx-Body", className, createGridStyle(alternatingColors, selectedColor)), idField: idField, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
 }

package/lib/SearchBar.d.ts

@@ -25,4 +25,4 @@ export interface SearchBarProps {
  * @param props Props
  * @returns Component
  */
-export declare function SearchBar(props: SearchBarProps): React.JSX.Element;
+export declare function SearchBar(props: SearchBarProps): import("react/jsx-runtime").JSX.Element;

package/lib/SearchBar.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Drawer, IconButton, Stack, useTheme } from "@mui/material";
 import React from "react";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
@@ -168,7 +169,7 @@ export function SearchBar(props) {
     const moreItems = [];
     if (index != null) {
         for (let i = index; i < fields.length; i++) {
-            moreItems.push(React.createElement(React.Fragment, { key: i }, fields[i]));
+            moreItems.push(_jsx(React.Fragment, { children: fields[i] }, i));
         }
     }
     const hasMoreItems = moreItems.length > 0;
@@ -220,41 +221,32 @@ export function SearchBar(props) {
         };
     }, [className]);
     // Layout
-    return (React.createElement(React.Fragment, null,
-        React.createElement("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
-                if (form)
-                    state.form = form;
-            } },
-            React.createElement(Stack, { ref: dimensions[0][0], className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, width: "100%", overflow: "hidden", paddingTop: "6px", sx: {
-                    "& > :not(style)": {
-                        flexBasis: "auto",
-                        flexGrow: 0,
-                        flexShrink: 0,
-                        maxWidth: `${itemWidth}px`,
-                        visibility: "hidden"
-                    },
-                    "& > .hiddenChild": {
-                        display: "none"
-                    },
-                    "& > .showChild": {
-                        display: "block",
-                        visibility: "visible"
-                    }
-                } },
-                fields.map((item, index) => (React.createElement(React.Fragment, { key: index }, item))),
-                React.createElement(IconButton, { title: labels.more, size: "medium", sx: { height: "40px" }, onClick: handleMore },
-                    React.createElement(MoreHorizIcon, null)),
-                React.createElement(Button, { variant: "contained", size: "medium", ref: resetButtonRef, onClick: handleReset }, labels.reset))),
-        hasMoreItems && (React.createElement(Drawer, { anchor: "right", sx: { minWidth: "180px" }, ModalProps: {
-                keepMounted: true
-            }, open: open, onClose: () => updateOpen(false) },
-            React.createElement("form", { onChange: moreFormChange, ref: (form) => {
+    return (_jsxs(React.Fragment, { children: [_jsx("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                     if (form)
-                        state.moreForm = form;
-                } },
-                React.createElement(Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
+                        state.form = form;
+                }, children: _jsxs(Stack, { ref: dimensions[0][0], className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, width: "100%", overflow: "hidden", paddingTop: "6px", sx: {
                         "& > :not(style)": {
-                            minWidth: "100px"
+                            flexBasis: "auto",
+                            flexGrow: 0,
+                            flexShrink: 0,
+                            maxWidth: `${itemWidth}px`,
+                            visibility: "hidden"
+                        },
+                        "& > .hiddenChild": {
+                            display: "none"
+                        },
+                        "& > .showChild": {
+                            display: "block",
+                            visibility: "visible"
                         }
-                    } }, moreItems))))));
+                    }, children: [fields.map((item, index) => (_jsx(React.Fragment, { children: item }, index))), _jsx(IconButton, { title: labels.more, size: "medium", sx: { height: "40px" }, onClick: handleMore, children: _jsx(MoreHorizIcon, {}) }), _jsx(Button, { variant: "contained", size: "medium", ref: resetButtonRef, onClick: handleReset, children: labels.reset })] }) }), hasMoreItems && (_jsx(Drawer, { anchor: "right", sx: { minWidth: "180px" }, ModalProps: {
+                    keepMounted: true
+                }, open: open, onClose: () => updateOpen(false), children: _jsx("form", { onChange: moreFormChange, ref: (form) => {
+                        if (form)
+                            state.moreForm = form;
+                    }, children: _jsx(Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
+                            "& > :not(style)": {
+                                minWidth: "100px"
+                            }
+                        }, children: moreItems }) }) }))] }));
 }

package/lib/SearchField.d.ts

@@ -1,5 +1,4 @@
 import { TextFieldProps } from '@mui/material';
-import React from 'react';
 /**
  * Search field props
  */
@@ -18,4 +17,4 @@ export type SearchFieldProps = TextFieldProps & {
  * @param props Props
  * @returns Component
  */
-export declare function SearchField(props: SearchFieldProps): React.JSX.Element;
+export declare function SearchField(props: SearchFieldProps): import("react/jsx-runtime").JSX.Element;

package/lib/SearchField.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useDelayedExecutor } from '@etsoo/react';
 import { TextField } from '@mui/material';
 import React from 'react';
@@ -35,5 +36,5 @@ export function SearchField(props) {
         };
     }, []);
     // Layout
-    return (React.createElement(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
+    return (_jsx(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
 }

package/lib/SearchOptionGroup.d.ts

@@ -1,9 +1,8 @@
 import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from '@etsoo/shared';
-import React from 'react';
 import { OptionGroupProps } from './OptionGroup';
 /**
  * Search OptionGroup
  * @param props Props
  * @returns Component
  */
-export declare function SearchOptionGroup<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupProps<T, D, L>): React.JSX.Element;
+export declare function SearchOptionGroup<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupProps<T, D, L>): import("react/jsx-runtime").JSX.Element;

package/lib/SearchOptionGroup.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { MUGlobal } from './MUGlobal';
 import { OptionGroup } from './OptionGroup';
 /**
@@ -10,5 +10,5 @@ export function SearchOptionGroup(props) {
     // Destruct
     const { row = true, size = MUGlobal.searchFieldSize, sx = { '& .MuiFormLabel-root': { fontSize: '0.75em' } }, ...rest } = props;
     // Layout
-    return React.createElement(OptionGroup, { row: row, size: size, sx: sx, ...rest });
+    return _jsx(OptionGroup, { row: row, size: size, sx: sx, ...rest });
 }

package/lib/SelectBool.d.ts

@@ -1,5 +1,4 @@
 import { ListType1 } from "@etsoo/shared";
-import React from "react";
 import { SelectExProps } from "./SelectEx";
 /**
  * SelectBool props
@@ -10,4 +9,4 @@ export type SelectBoolProps = Omit<SelectExProps<ListType1>, "options" | "loadDa
  * @param props Props
  * @returns Component
  */
-export declare function SelectBool(props: SelectBoolProps): React.JSX.Element;
+export declare function SelectBool(props: SelectBoolProps): import("react/jsx-runtime").JSX.Element;

package/lib/SelectBool.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Utils } from "@etsoo/shared";
-import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { SelectEx } from "./SelectEx";
 /**
@@ -15,5 +15,5 @@ export function SelectBool(props) {
     if (autoAddBlankItem)
         Utils.addBlankItem(options);
     // Layout
-    return React.createElement(SelectEx, { options: options, search: search, ...rest });
+    return _jsx(SelectEx, { options: options, search: search, ...rest });
 }

package/lib/SelectEx.d.ts

@@ -71,4 +71,4 @@ export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefa
  * @param props Props
  * @returns Component
  */
-export declare function SelectEx<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: SelectExProps<T, D, L>): React.JSX.Element;
+export declare function SelectEx<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: SelectExProps<T, D, L>): import("react/jsx-runtime").JSX.Element;

package/lib/SelectEx.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox, FormControl, FormHelperText, IconButton, InputLabel, ListItemText, MenuItem, OutlinedInput, Select, Stack } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "./MUGlobal";
@@ -124,59 +125,50 @@ export function SelectEx(props) {
         };
     }, [multiple]);
     // Layout
-    return (React.createElement(Stack, { direction: "row" },
-        React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth, error: error },
-            React.createElement(InputLabel, { id: labelId, variant: variant, shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink, required: required }, label),
-            React.createElement(Select, { ref: divRef, value: multiple
-                    ? valueState
-                    : localOptions.some((o) => o[idField] === valueState)
-                        ? valueState
-                        : "", input: React.createElement(OutlinedInput, { notched: true, label: label, required: required, inputProps: { "data-reset": inputReset } }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
-                    if (onChange) {
-                        onChange(event, child);
-                        // event.preventDefault() will block executing
-                        if (event.defaultPrevented)
-                            return;
-                    }
-                    // Set item value
-                    const value = event.target.value;
-                    if (multiple && !Array.isArray(value))
-                        return;
-                    const diff = setItemValue(value);
-                    if (diff != null) {
-                        doItemChange(localOptions, diff, true);
-                    }
-                }, renderValue: (selected) => {
-                    // The text shows up
-                    return localOptions
-                        .filter((option) => {
-                        const id = getId(option);
-                        return Array.isArray(selected)
-                            ? selected.indexOf(id) !== -1
-                            : selected === id;
-                    })
-                        .map((option) => getLabel(option))
-                        .join(", ");
-                }, sx: { minWidth: "150px" }, fullWidth: fullWidth, required: required, variant: variant, ...rest }, localOptions.map((option) => {
-                // Option id
-                const id = getId(option);
-                // Option label
-                const label = getLabel(option);
-                // Option
-                return (React.createElement(MenuItem, { key: id, value: id, onClick: (event) => {
-                        if (onItemClick) {
-                            onItemClick(event, option);
-                        }
-                    }, style: itemStyle == null ? undefined : itemStyle(option) },
-                    multiple && (React.createElement(Checkbox, { checked: Array.isArray(valueState)
-                            ? valueState.includes(id)
-                            : valueState === id })),
-                    React.createElement(ListItemText, { primary: label }),
-                    itemIconRenderer && (React.createElement(ListItemRightIcon, null, itemIconRenderer(option[idField])))));
-            })),
-            helperText != null && React.createElement(FormHelperText, null, helperText)),
-        refresh != null &&
-            loadData != null &&
-            (typeof refresh === "string" ? (React.createElement(IconButton, { size: "small", title: refresh, onClick: refreshData },
-                React.createElement(RefreshIcon, null))) : (refresh))));
+    return (_jsxs(Stack, { direction: "row", children: [_jsxs(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth, error: error, children: [_jsx(InputLabel, { id: labelId, variant: variant, shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink, required: required, children: label }), _jsx(Select, { ref: divRef, value: multiple
+                            ? valueState
+                            : localOptions.some((o) => o[idField] === valueState)
+                                ? valueState
+                                : "", input: _jsx(OutlinedInput, { notched: true, label: label, required: required, inputProps: { "data-reset": inputReset } }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                            if (onChange) {
+                                onChange(event, child);
+                                // event.preventDefault() will block executing
+                                if (event.defaultPrevented)
+                                    return;
+                            }
+                            // Set item value
+                            const value = event.target.value;
+                            if (multiple && !Array.isArray(value))
+                                return;
+                            const diff = setItemValue(value);
+                            if (diff != null) {
+                                doItemChange(localOptions, diff, true);
+                            }
+                        }, renderValue: (selected) => {
+                            // The text shows up
+                            return localOptions
+                                .filter((option) => {
+                                const id = getId(option);
+                                return Array.isArray(selected)
+                                    ? selected.indexOf(id) !== -1
+                                    : selected === id;
+                            })
+                                .map((option) => getLabel(option))
+                                .join(", ");
+                        }, sx: { minWidth: "150px" }, fullWidth: fullWidth, required: required, variant: variant, ...rest, children: localOptions.map((option) => {
+                            // Option id
+                            const id = getId(option);
+                            // Option label
+                            const label = getLabel(option);
+                            // Option
+                            return (_jsxs(MenuItem, { value: id, onClick: (event) => {
+                                    if (onItemClick) {
+                                        onItemClick(event, option);
+                                    }
+                                }, style: itemStyle == null ? undefined : itemStyle(option), children: [multiple && (_jsx(Checkbox, { checked: Array.isArray(valueState)
+                                            ? valueState.includes(id)
+                                            : valueState === id })), _jsx(ListItemText, { primary: label }), itemIconRenderer && (_jsx(ListItemRightIcon, { children: itemIconRenderer(option[idField]) }))] }, id));
+                        }) }), helperText != null && _jsx(FormHelperText, { children: helperText })] }), refresh != null &&
+                loadData != null &&
+                (typeof refresh === "string" ? (_jsx(IconButton, { size: "small", title: refresh, onClick: refreshData, children: _jsx(RefreshIcon, {}) })) : (refresh))] }));
 }