@etsoo/materialui 1.3.58 → 1.3.60

package/lib/DataGridEx.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { css } from "@emotion/css";
 import { GridAlignGet, ScrollerGrid, useCombinedRefs } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
@@ -72,57 +73,55 @@ export function DataGridEx(props) {
     const theme = useTheme();
     const defaultHeaderRenderer = (states) => {
         const { orderBy } = states.queryPaging;
-        return (React.createElement(Box, { className: "DataGridEx-Header", display: "flex", alignItems: "center", borderBottom: boldBorder, fontWeight: 500, minWidth: widthCalculator.total, height: headerHeight }, columns.map((column, index) => {
-            // Destruct
-            const { align, field, header, headerCellRenderer, sortable, sortAsc = true, type } = column;
-            // Header text
-            const headerText = header ?? field;
-            // Cell props
-            const cellProps = {};
-            // Sortable
-            let sortLabel;
-            if (headerCellRenderer) {
-                sortLabel = headerCellRenderer({
-                    cellProps,
-                    column,
-                    columnIndex: checkable ? index - 1 : index, // Ignore the checkbox case,
-                    states
-                });
-            }
-            else if (sortable && field != null) {
-                const active = orderBy === field;
-                sortLabel = (React.createElement(TableSortLabel, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
-                        if (active)
-                            column.sortAsc = !sortAsc;
-                        handleSort(field, column.sortAsc);
-                    } }, headerText));
-            }
-            else {
-                sortLabel = headerText;
-            }
-            return (React.createElement(Box, { key: field ?? index.toString(), textAlign: GridAlignGet(align, type), width: columnWidth(index) },
-                React.createElement(Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps }, sortLabel)));
-        })));
+        return (_jsx(Box, { className: "DataGridEx-Header", display: "flex", alignItems: "center", borderBottom: boldBorder, fontWeight: 500, minWidth: widthCalculator.total, height: headerHeight, children: columns.map((column, index) => {
+                // Destruct
+                const { align, field, header, headerCellRenderer, sortable, sortAsc = true, type } = column;
+                // Header text
+                const headerText = header ?? field;
+                // Cell props
+                const cellProps = {};
+                // Sortable
+                let sortLabel;
+                if (headerCellRenderer) {
+                    sortLabel = headerCellRenderer({
+                        cellProps,
+                        column,
+                        columnIndex: checkable ? index - 1 : index, // Ignore the checkbox case,
+                        states
+                    });
+                }
+                else if (sortable && field != null) {
+                    const active = orderBy === field;
+                    sortLabel = (_jsx(TableSortLabel, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
+                            if (active)
+                                column.sortAsc = !sortAsc;
+                            handleSort(field, column.sortAsc);
+                        }, children: headerText }));
+                }
+                else {
+                    sortLabel = headerText;
+                }
+                return (_jsx(Box, { textAlign: GridAlignGet(align, type), width: columnWidth(index), children: _jsx(Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps, children: sortLabel }) }, field ?? index.toString()));
+            }) }));
     };
     function defaultFooterRenderer(rows, states) {
-        return (React.createElement(Box, { className: "DataGridEx-Footer", display: "flex", alignItems: "center", borderTop: thinBorder, marginTop: "1px", minWidth: widthCalculator.total, height: bottomHeight - 1 }, columns.map((column, index) => {
-            // Destruct
-            const { align, field, type } = column;
-            // Cell props
-            const cellProps = {};
-            // Cell
-            const cell = footerItemRenderer
-                ? footerItemRenderer(rows, {
-                    column,
-                    index: checkable ? index - 1 : index, // Ignore the checkbox case
-                    states,
-                    cellProps,
-                    checkable
-                })
-                : undefined;
-            return (React.createElement(Box, { key: "bottom-" + (field ?? index.toString()), textAlign: GridAlignGet(align, type), width: columnWidth(index) },
-                React.createElement(Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps }, cell)));
-        })));
+        return (_jsx(Box, { className: "DataGridEx-Footer", display: "flex", alignItems: "center", borderTop: thinBorder, marginTop: "1px", minWidth: widthCalculator.total, height: bottomHeight - 1, children: columns.map((column, index) => {
+                // Destruct
+                const { align, field, type } = column;
+                // Cell props
+                const cellProps = {};
+                // Cell
+                const cell = footerItemRenderer
+                    ? footerItemRenderer(rows, {
+                        column,
+                        index: checkable ? index - 1 : index, // Ignore the checkbox case
+                        states,
+                        cellProps,
+                        checkable
+                    })
+                    : undefined;
+                return (_jsx(Box, { textAlign: GridAlignGet(align, type), width: columnWidth(index), children: _jsx(Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps, children: cell }) }, "bottom-" + (field ?? index.toString())));
+            }) }));
     }
     // Destruct
     const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = "#f6f9fb", idField = "id", mRef = React.createRef(), onClick, onDoubleClick, selectable = true, selectedColor = "#edf4fb", width, ...rest } = props;
@@ -136,7 +135,7 @@ export function DataGridEx(props) {
                 cellProps.sx = {
                     padding: "4px!important"
                 };
-                return (React.createElement(Checkbox, { color: "primary", checked: selected, onChange: (_event, checked) => {
+                return (_jsx(Checkbox, { color: "primary", checked: selected, onChange: (_event, checked) => {
                         refs.current.ref?.selectItem(data, checked);
                     } }));
             },
@@ -146,7 +145,7 @@ export function DataGridEx(props) {
                 cellProps.sx = {
                     padding: `${hpad}px 4px ${hpad - 1}px 4px!important`
                 };
-                return (React.createElement(Checkbox, { color: "primary", indeterminate: states.selectedItems.length > 0 &&
+                return (_jsx(Checkbox, { color: "primary", indeterminate: states.selectedItems.length > 0 &&
                         states.selectedItems.length < states.loadedItems, checked: states.selectedItems.length > 0, onChange: (_event, checked) => refs.current.ref?.selectAll(checked) }));
             }
         };
@@ -263,8 +262,7 @@ export function DataGridEx(props) {
             renderProps: typeof renderProps === "function" ? renderProps(data) : renderProps,
             setItems
         });
-        return (React.createElement("div", { className: rowClass, style: style, "data-row": rowIndex, "data-column": columnIndex, onMouseDown: selectable && !checkable ? handleMouseDown : undefined, onMouseOver: selectable ? handleMouseOver : undefined, onMouseOut: selectable ? handleMouseOut : undefined, onClick: (event) => onClick && data != null && onClick(event, data), onDoubleClick: (event) => onDoubleClick && data != null && onDoubleClick(event, data) },
-            React.createElement(Box, { ...cellProps, onMouseEnter: handleMouseEnter }, child)));
+        return (_jsx("div", { className: rowClass, style: style, "data-row": rowIndex, "data-column": columnIndex, onMouseDown: selectable && !checkable ? handleMouseDown : undefined, onMouseOver: selectable ? handleMouseOver : undefined, onMouseOut: selectable ? handleMouseOut : undefined, onClick: (event) => onClick && data != null && onClick(event, data), onDoubleClick: (event) => onDoubleClick && data != null && onDoubleClick(event, data), children: _jsx(Box, { ...cellProps, onMouseEnter: handleMouseEnter, children: child }) }));
     };
     // Column width calculator
     const widthCalculator = React.useMemo(() => DataGridExCalColumns(columns), [columns]);
@@ -288,12 +286,12 @@ export function DataGridEx(props) {
         const defaultOrderByAsc = defaultOrderBy
             ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
             : undefined;
-        return (React.createElement(ScrollerGrid, { className: Utils.mergeClasses("DataGridEx-Body", "DataGridEx-CustomBar", className, createGridStyle(alternatingColors, selectedColor, hoverColor)), columnCount: columns.length, columnWidth: columnWidth, defaultOrderBy: defaultOrderBy, defaultOrderByAsc: defaultOrderByAsc, height: height -
+        return (_jsx(ScrollerGrid, { className: Utils.mergeClasses("DataGridEx-Body", "DataGridEx-CustomBar", className, createGridStyle(alternatingColors, selectedColor, hoverColor)), columnCount: columns.length, columnWidth: columnWidth, defaultOrderBy: defaultOrderBy, defaultOrderByAsc: defaultOrderByAsc, height: height -
                 headerHeight -
                 (hideFooter ? 0 : bottomHeight + 1) -
                 scrollbarSize, headerRenderer: headerRenderer, idField: idField, itemRenderer: itemRenderer, footerRenderer: hideFooter ? undefined : footerRenderer, width: Math.max(width ?? 0, widthCalculator.total), mRef: mRefLocal, ...rest }));
     }, [width]);
-    return (React.createElement(Paper, { sx: {
+    return (_jsx(Paper, { sx: {
             fontSize: "0.875rem",
             height,
             "& .DataGridEx-Cell": {
@@ -321,10 +319,9 @@ export function DataGridEx(props) {
                     }
                 }
             }
-        } },
-        React.createElement("div", { className: "DataGridEx-CustomBar", style: {
+        }, children: _jsx("div", { className: "DataGridEx-CustomBar", style: {
                 width,
                 overflowX: "auto",
                 overflowY: "hidden"
-            } }, table)));
+            }, children: table }) }));
 }

package/lib/DataGridRenderers.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { CircularProgress } from '@mui/material';
 import { DateUtils, NumberUtils } from '@etsoo/shared';
 import CheckIcon from '@mui/icons-material/Check';
@@ -20,7 +20,7 @@ export var DataGridRenderers;
         if (data == null) {
             // First column, show loading indicator
             if (columnIndex === 0)
-                return React.createElement(CircularProgress, { size: 15 });
+                return _jsx(CircularProgress, { size: 15 });
             // Others return undefined
             return undefined;
         }
@@ -38,7 +38,7 @@ export var DataGridRenderers;
             const option = type === GridDataType.DateTime ? 'ds' : 'd';
             const nearDays = renderProps?.nearDays;
             if (nearDays != null) {
-                return (React.createElement(DateText, { value: dateValue, locale: renderProps?.culture, timeZone: renderProps?.timeZone, options: option, nearDays: nearDays }));
+                return (_jsx(DateText, { value: dateValue, locale: renderProps?.culture, timeZone: renderProps?.timeZone, options: option, nearDays: nearDays }));
             }
             return DateUtils.format(dateValue, renderProps?.culture, option, renderProps?.timeZone);
         }
@@ -65,9 +65,9 @@ export var DataGridRenderers;
                 };
             }
             if (value)
-                return React.createElement(CheckIcon, { fontSize: "small" });
+                return _jsx(CheckIcon, { fontSize: "small" });
             else
-                return React.createElement(ClearIcon, { fontSize: "small", color: "warning" });
+                return _jsx(ClearIcon, { fontSize: "small", color: "warning" });
         }
         // To string
         return new String(value);

package/lib/DataSteps.d.ts

@@ -1,6 +1,5 @@
 import { TextFieldProps } from "@mui/material";
 import { InputDialogProps } from "@etsoo/react";
-import React from "react";
 /**
  * Data step
  */
@@ -36,4 +35,4 @@ export type DataStepsProps<T extends object> = Omit<TextFieldProps, "InputProps"
  * @param props Props
  * @returns Component
  */
-export declare function DataSteps<T extends object>(props: DataStepsProps<T>): React.JSX.Element;
+export declare function DataSteps<T extends object>(props: DataStepsProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/DataSteps.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, IconButton, InputAdornment, TextField } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
@@ -40,25 +41,23 @@ export function DataSteps(props) {
         const [{ callback, ...rest }, more] = steps(index, jsonRef.current);
         app.showInputDialog({
             ...rest,
-            buttons: (n, callback) => (React.createElement(HBox, { paddingLeft: 2, paddingRight: 2, paddingBottom: 2, gap: 2, justifyContent: "space-between" },
-                index === 0 ? (React.createElement(Button, { variant: "outlined", startIcon: React.createElement(CloseIcon, null), onClick: () => n.dismiss() }, labels.close)) : (React.createElement(Button, { variant: "outlined", startIcon: React.createElement(NavigateBeforeIcon, null), onClick: () => {
-                        n.dismiss();
-                        showStep(indexRef.current - 1);
-                    } }, labels.previousStep)),
-                more ? (React.createElement(Button, { variant: "contained", startIcon: React.createElement(NavigateNextIcon, null), onClick: async (event) => {
-                        const result = await callback(event);
-                        if (!result)
-                            return;
-                        showStep(indexRef.current + 1);
-                    } }, labels.nextStep)) : (React.createElement(Button, { variant: "contained", startIcon: React.createElement(CheckIcon, null), onClick: async (event) => {
-                        const result = await callback(event);
-                        if (!result)
-                            return;
-                        const value = jsonRef.current;
-                        setLocalValue(valueFormatter(value));
-                        if (onValueChange)
-                            onValueChange(value);
-                    } }, labels.submit)))),
+            buttons: (n, callback) => (_jsxs(HBox, { paddingLeft: 2, paddingRight: 2, paddingBottom: 2, gap: 2, justifyContent: "space-between", children: [index === 0 ? (_jsx(Button, { variant: "outlined", startIcon: _jsx(CloseIcon, {}), onClick: () => n.dismiss(), children: labels.close })) : (_jsx(Button, { variant: "outlined", startIcon: _jsx(NavigateBeforeIcon, {}), onClick: () => {
+                            n.dismiss();
+                            showStep(indexRef.current - 1);
+                        }, children: labels.previousStep })), more ? (_jsx(Button, { variant: "contained", startIcon: _jsx(NavigateNextIcon, {}), onClick: async (event) => {
+                            const result = await callback(event);
+                            if (!result)
+                                return;
+                            showStep(indexRef.current + 1);
+                        }, children: labels.nextStep })) : (_jsx(Button, { variant: "contained", startIcon: _jsx(CheckIcon, {}), onClick: async (event) => {
+                            const result = await callback(event);
+                            if (!result)
+                                return;
+                            const value = jsonRef.current;
+                            setLocalValue(valueFormatter(value));
+                            if (onValueChange)
+                                onValueChange(value);
+                        }, children: labels.submit }))] })),
             callback: (form) => {
                 if (form == null)
                     return;
@@ -76,15 +75,13 @@ export function DataSteps(props) {
     React.useEffect(() => {
         setLocalValue(valueFormatter(jsonRef.current));
     }, [valueFormatter]);
-    return (React.createElement(TextField, { autoComplete: "off", InputLabelProps: InputLabelProps, inputProps: { style: { cursor: "pointer" } }, InputProps: {
+    return (_jsx(TextField, { autoComplete: "off", InputLabelProps: InputLabelProps, inputProps: { style: { cursor: "pointer" } }, InputProps: {
             onKeyDown: (event) => {
                 if (event.key === "Tab")
                     return;
                 cancelInput(event);
             },
             onPaste: cancelInput,
-            endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                React.createElement(IconButton, { edge: "end", size: "small" },
-                    React.createElement(StartIcon, null))))
+            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { edge: "end", size: "small", children: _jsx(StartIcon, {}) }) }))
         }, onClick: () => showStep(0), value: localValue, ...rest }));
 }

package/lib/DataTable.d.ts

@@ -30,4 +30,4 @@ export type DataTableProps<R extends GridValidRowModel = any> = Omit<DataGridPro
  * @param props Props
  * @returns Component
  */
-export declare function DataTable<R extends GridValidRowModel = any>(props: DataTableProps<R>): React.JSX.Element;
+export declare function DataTable<R extends GridValidRowModel = any>(props: DataTableProps<R>): import("react/jsx-runtime").JSX.Element;

package/lib/DataTable.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DataGrid } from "@mui/x-data-grid";
 import React from "react";
 import { globalApp } from "./app/ReactApp";
@@ -38,7 +39,7 @@ export function DataTable(props) {
         }
         setSelectedCellParams(params);
     }, []);
-    return (React.createElement(DataGrid, { disableColumnMenu: true, hideFooter: true, localeText: localeText, cellModesModel: cellModesModel, onCellModesModelChange: (model) => setCellModesModel(model), onProcessRowUpdateError: onProcessRowUpdateError, slots: {
+    return (_jsx(DataGrid, { disableColumnMenu: true, hideFooter: true, localeText: localeText, cellModesModel: cellModesModel, onCellModesModelChange: (model) => setCellModesModel(model), onProcessRowUpdateError: onProcessRowUpdateError, slots: {
             toolbar: toolbarCreator
                 ? ({ selectedCellParams, setCellModesModel, cellModesModel }) => toolbarCreator(selectedCellParams, setCellModesModel, cellModesModel)
                 : undefined

package/lib/DialogButton.d.ts

@@ -51,4 +51,4 @@ export interface DialogButtonProps extends ButtonProps {
  * @param props Props
  * @returns Component
  */
-export declare function DialogButton(props: DialogButtonProps): React.JSX.Element;
+export declare function DialogButton(props: DialogButtonProps): import("react/jsx-runtime").JSX.Element;

package/lib/DialogButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton } from '@mui/material';
 import React from 'react';
 import { Labels } from './app/Labels';
@@ -28,17 +29,9 @@ export function DialogButton(props) {
             onClick(event);
     };
     // Layout
-    return (React.createElement(React.Fragment, null,
-        icon == null ? (React.createElement(Button, { ...rest, title: title, onClick: onClickLocal }, children)) : (React.createElement(IconButton, { ...rest, onClick: onClickLocal, title: title ?? children?.toString() }, icon)),
-        React.createElement(Dialog, { disableScrollLock: disableScrollLock, fullScreen: fullScreen, fullWidth: fullWidth, maxWidth: maxWidth, open: open, onClose: () => setOpen(false), onClick: (event) => {
-                // The dialog will be embeded and the click event will bubble up
-                // Stop propatation but will also cancel onClose and onBackdropClick event
-                event.stopPropagation();
-            } },
-            React.createElement(DialogTitle, null, dialogTitle ?? title ?? children),
-            React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, { component: contentPre ? 'pre' : 'span' }, content),
-                inputs),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { onClick: () => setOpen(false) }, buttonLabel)))));
+    return (_jsxs(React.Fragment, { children: [icon == null ? (_jsx(Button, { ...rest, title: title, onClick: onClickLocal, children: children })) : (_jsx(IconButton, { ...rest, onClick: onClickLocal, title: title ?? children?.toString(), children: icon })), _jsxs(Dialog, { disableScrollLock: disableScrollLock, fullScreen: fullScreen, fullWidth: fullWidth, maxWidth: maxWidth, open: open, onClose: () => setOpen(false), onClick: (event) => {
+                    // The dialog will be embeded and the click event will bubble up
+                    // Stop propatation but will also cancel onClose and onBackdropClick event
+                    event.stopPropagation();
+                }, children: [_jsx(DialogTitle, { children: dialogTitle ?? title ?? children }), _jsxs(DialogContent, { children: [_jsx(DialogContentText, { component: contentPre ? 'pre' : 'span', children: content }), inputs] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => setOpen(false), children: buttonLabel }) })] })] }));
 }

package/lib/DnDList.d.ts

@@ -101,4 +101,4 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
  */
 export declare function DnDList<D extends {
     id: UniqueIdentifier;
-}, K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<D, UniqueIdentifier>>(props: DnDListPros<D, K>): React.JSX.Element;
+}, K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<D, UniqueIdentifier>>(props: DnDListPros<D, K>): import("react/jsx-runtime").JSX.Element;

package/lib/DnDList.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton, useTheme } from "@mui/material";
 import React from "react";
 function SortableItem(props) {
@@ -143,7 +144,7 @@ export function DnDList(props) {
         });
     }, []);
     if (dnd == null) {
-        return React.createElement(Skeleton, { variant: "rectangular", width: "100%", height: height });
+        return _jsx(Skeleton, { variant: "rectangular", width: "100%", height: height });
     }
     const [DndContextType, SortableContextType, useSortableType, rectSortingStrategyType, rectSwappingStrategyType, horizontalListSortingStrategyType, verticalListSortingStrategyType, CSSType] = dnd;
     const strategy = typeof sortingStrategy === "function"
@@ -199,16 +200,15 @@ export function DnDList(props) {
             .querySelectorAll("select")
             .forEach((input) => input.addEventListener("change", () => doFormChange()));
     };
-    const children = (React.createElement(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd },
-        React.createElement(SortableContextType, { items: items, strategy: strategy }, items.map((item, index) => {
-            const id = item[keyField];
-            return (React.createElement(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, key: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }));
-        }))));
+    const children = (_jsx(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContextType, { items: items, strategy: strategy, children: items.map((item, index) => {
+                const id = item[keyField];
+                return (_jsx(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
+            }) }) }));
     if (onFormChange) {
-        return (React.createElement("div", { style: { width: "100%" }, ref: (div) => {
+        return (_jsx("div", { style: { width: "100%" }, ref: (div) => {
                 if (div)
                     setupDiv(div);
-            } }, children));
+            }, children: children }));
     }
     return children;
 }

package/lib/DraggablePaperComponent.d.ts

@@ -1,8 +1,7 @@
 import { PaperProps } from "@mui/material";
-import React from "react";
 /**
  * Draggable paper component
  * @param props Props
  * @returns Component
  */
-export declare function DraggablePaperComponent(props: PaperProps): React.JSX.Element;
+export declare function DraggablePaperComponent(props: PaperProps): import("react/jsx-runtime").JSX.Element;

package/lib/DraggablePaperComponent.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Paper } from "@mui/material";
 import React from "react";
 import Draggable from "react-draggable";
@@ -8,6 +9,5 @@ import Draggable from "react-draggable";
  */
 export function DraggablePaperComponent(props) {
     const nodeRef = React.useRef(null);
-    return (React.createElement(Draggable, { handle: ".draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]', nodeRef: nodeRef },
-        React.createElement(Paper, { ref: nodeRef, ...props })));
+    return (_jsx(Draggable, { handle: ".draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]', nodeRef: nodeRef, children: _jsx(Paper, { ref: nodeRef, ...props }) }));
 }

package/lib/EmailInput.d.ts

@@ -1,5 +1,4 @@
 import { TextFieldProps } from '@mui/material';
-import React from 'react';
 /**
  * Email input props
  */
@@ -8,4 +7,4 @@ export type EmailInputProps = Omit<TextFieldProps, 'type'> & {};
  * Email input
  * @param props Props
  */
-export declare function EmailInput(props: EmailInputProps): React.JSX.Element;
+export declare function EmailInput(props: EmailInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/EmailInput.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { TextField } from '@mui/material';
-import React from 'react';
 /**
  * Email input
  * @param props Props
@@ -10,5 +10,5 @@ export function EmailInput(props) {
     // Default max length
     inputProps.maxLength ?? (inputProps.maxLength = 128);
     // Layout
-    return (React.createElement(TextField, { type: "email", fullWidth: true, inputProps: inputProps, ...rest }));
+    return (_jsx(TextField, { type: "email", fullWidth: true, inputProps: inputProps, ...rest }));
 }

package/lib/FabBox.d.ts

@@ -1,5 +1,4 @@
 import { BoxProps, PaperProps } from "@mui/material";
-import React from "react";
 type SharedProps = keyof BoxProps & keyof PaperProps;
 /**
  * Fabs container box props
@@ -23,5 +22,5 @@ export type FabBoxProps = Pick<BoxProps, SharedProps> & Pick<PaperProps, SharedP
  * @param props Props
  * @returns Component
  */
-export declare function FabBox(props: FabBoxProps): React.JSX.Element;
+export declare function FabBox(props: FabBoxProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/FabBox.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Paper, useTheme } from "@mui/material";
 import React from "react";
 const initOpactiy = 0.15;
@@ -14,8 +15,8 @@ export function FabBox(props) {
     const spaceGap = theme.spacing(itemGap);
     const [opacity, setOpacity] = React.useState(initOpactiy);
     if (columnDirection == null)
-        return React.createElement(React.Fragment, null);
-    return fabPanel ? (React.createElement(Paper, { sx: {
+        return _jsx(React.Fragment, {});
+    return fabPanel ? (_jsx(Paper, { sx: {
             position: "fixed",
             display: "flex",
             alignItems: "center",
@@ -24,7 +25,7 @@ export function FabBox(props) {
             gap: spaceGap,
             opacity: opacity,
             ...sx
-        }, onMouseEnter: () => setOpacity(1), onMouseLeave: () => setOpacity(initOpactiy), ...rest })) : (React.createElement(Box, { sx: {
+        }, onMouseEnter: () => setOpacity(1), onMouseLeave: () => setOpacity(initOpactiy), ...rest })) : (_jsx(Box, { sx: {
             position: "fixed",
             display: "flex",
             alignItems: "center",

package/lib/FieldSetEx.d.ts

@@ -18,4 +18,4 @@ export type FieldSetExProps = Omit<FormControlProps, "defaultValue" | "variant">
  * @param props Props
  * @returns Component
  */
-export declare function FieldSetEx(props: FieldSetExProps): React.JSX.Element;
+export declare function FieldSetEx(props: FieldSetExProps): import("react/jsx-runtime").JSX.Element;

package/lib/FieldSetEx.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormControl, FormHelperText, InputLabel } from "@mui/material";
 import NotchedOutline from "@mui/material/OutlinedInput";
 import React from "react";
@@ -10,20 +11,16 @@ export function FieldSetEx(props) {
     // Destruct
     const { label, helperText, required, fullWidth, children, ...rest } = props;
     // Layout
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FormControl, { fullWidth: fullWidth, ...rest },
-            label && (React.createElement(InputLabel, { required: required, variant: "outlined", shrink: true }, label)),
-            React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: children, sx: {
-                    cursor: "default",
-                    display: "flex",
-                    flexWrap: "wrap",
-                    gap: 1,
-                    paddingX: 2,
-                    paddingY: "7px",
-                    width: fullWidth ? "100%" : "auto",
-                    "& input": {
-                        display: "none"
-                    }
-                } })),
-        helperText && (React.createElement(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 } }, helperText))));
+    return (_jsxs(React.Fragment, { children: [_jsxs(FormControl, { fullWidth: fullWidth, ...rest, children: [label && (_jsx(InputLabel, { required: required, variant: "outlined", shrink: true, children: label })), _jsx(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: children, sx: {
+                            cursor: "default",
+                            display: "flex",
+                            flexWrap: "wrap",
+                            gap: 1,
+                            paddingX: 2,
+                            paddingY: "7px",
+                            width: fullWidth ? "100%" : "auto",
+                            "& input": {
+                                display: "none"
+                            }
+                        } })] }), helperText && (_jsx(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
 }

package/lib/FileUploadButton.d.ts

@@ -33,4 +33,4 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
  * @param props Props
  * @returns Component
  */
-export declare function FileUploadButton(props: FileUploadButtonProps): React.JSX.Element;
+export declare function FileUploadButton(props: FileUploadButtonProps): import("react/jsx-runtime").JSX.Element;

package/lib/FileUploadButton.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "@mui/material";
-import React from "react";
 /**
  * File upload button
  * @param props Props
@@ -10,36 +10,34 @@ export function FileUploadButton(props) {
     const { maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children, ...rest } = props;
     const { onChange } = inputProps ?? {};
     // Layout
-    return (React.createElement(Button, { component: "label", ...rest },
-        children,
-        React.createElement("input", { type: "file", hidden: true, onChange: (event) => {
-                if (onChange)
-                    onChange(event);
-                if (event.isDefaultPrevented())
-                    return;
-                if (onUploadFiles) {
-                    const files = event.target.files;
-                    if (files == null)
+    return (_jsxs(Button, { component: "label", ...rest, children: [children, _jsx("input", { type: "file", hidden: true, onChange: (event) => {
+                    if (onChange)
+                        onChange(event);
+                    if (event.isDefaultPrevented())
                         return;
-                    const fl = files.length;
-                    if (fl === 0)
-                        return;
-                    if (maxFiles && maxFiles > 0 && fl > maxFiles) {
-                        if (onFileInvalid)
-                            onFileInvalid([maxFiles, fl]);
-                        return;
-                    }
-                    if (maxFileSize && maxFileSize > 0) {
-                        for (let f = 0; f < fl; f++) {
-                            const file = files[f];
-                            if (file.size > maxFileSize) {
-                                if (onFileInvalid)
-                                    onFileInvalid([maxFileSize, file.size], file);
-                                return;
+                    if (onUploadFiles) {
+                        const files = event.target.files;
+                        if (files == null)
+                            return;
+                        const fl = files.length;
+                        if (fl === 0)
+                            return;
+                        if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+                            if (onFileInvalid)
+                                onFileInvalid([maxFiles, fl]);
+                            return;
+                        }
+                        if (maxFileSize && maxFileSize > 0) {
+                            for (let f = 0; f < fl; f++) {
+                                const file = files[f];
+                                if (file.size > maxFileSize) {
+                                    if (onFileInvalid)
+                                        onFileInvalid([maxFileSize, file.size], file);
+                                    return;
+                                }
                             }
                         }
+                        onUploadFiles(files);
                     }
-                    onUploadFiles(files);
-                }
-            }, ...inputProps })));
+                }, ...inputProps })] }));
 }

package/lib/FlexBox.d.ts

@@ -1,14 +1,13 @@
 import { StackProps } from '@mui/material';
-import React from 'react';
 /**
  * Horizonal box
  * @param props Props
  * @returns Component
  */
-export declare function HBox(props: Omit<StackProps, 'ref'>): React.JSX.Element;
+export declare function HBox(props: Omit<StackProps, 'ref'>): import("react/jsx-runtime").JSX.Element;
 /**
  * Vertial box
  * @param props Props
  * @returns Component
  */
-export declare function VBox(props: Omit<StackProps, 'ref'>): React.JSX.Element;
+export declare function VBox(props: Omit<StackProps, 'ref'>): import("react/jsx-runtime").JSX.Element;