@etsoo/materialui 1.3.57 → 1.3.59

package/lib/ShowDataComparison.js

@@ -1,7 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NotificationMessageType } from "@etsoo/notificationbase";
 import { Utils } from "@etsoo/shared";
 import { Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
-import React from "react";
 import { globalApp } from "./app/ReactApp";
 /**
  * Check obj is instance of AuditLineChangesDto
@@ -53,15 +53,6 @@ export const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true
     }));
     if (equalCheck)
         rows = rows.filter((item) => !Utils.equals(item.oldValue, item.newValue));
-    const inputs = (React.createElement(Table, null,
-        React.createElement(TableHead, null,
-            React.createElement(TableRow, null,
-                React.createElement(TableCell, { width: "18%" }, field),
-                React.createElement(TableCell, { width: "41%", align: "right" }, oldValue),
-                React.createElement(TableCell, { width: "41%", align: "right" }, newValue))),
-        React.createElement(TableBody, null, rows.map((row) => (React.createElement(TableRow, { key: row.field },
-            React.createElement(TableCell, null, getLabel(row.field)),
-            React.createElement(TableCell, { align: "right" }, formatValue(row.oldValue, app)),
-            React.createElement(TableCell, { align: "right" }, formatValue(row.newValue, app))))))));
+    const inputs = (_jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { width: "18%", children: field }), _jsx(TableCell, { width: "41%", align: "right", children: oldValue }), _jsx(TableCell, { width: "41%", align: "right", children: newValue })] }) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: getLabel(row.field) }), _jsx(TableCell, { align: "right", children: formatValue(row.oldValue, app) }), _jsx(TableCell, { align: "right", children: formatValue(row.newValue, app) })] }, row.field))) })] }));
     app.notifier.alert([undefined, modelTitle], undefined, NotificationMessageType.Info, { fullScreen: app.smDown, inputs });
 };

package/lib/Switch.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormControlLabelProps } from '@mui/material';
 /**
  * Switch props
@@ -26,4 +25,4 @@ export interface SwitchProps extends Omit<FormControlLabelProps, 'control'> {
  * @param props Props
  * @returns Component
  */
-export declare function Switch(props: SwitchProps): React.JSX.Element;
+export declare function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/lib/Switch.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { FormControlLabel } from '@mui/material';
 import MuiCheckbox from '@mui/material/Checkbox';
@@ -23,11 +24,11 @@ export function Switch(props) {
         setControlChecked(checked);
     };
     // Control
-    const control = checkbox ? (React.createElement(MuiCheckbox, { readOnly: readOnly, checked: controlChecked, onChange: handleChange, size: size, value: value })) : (React.createElement(MuiSwitch, { readOnly: readOnly, checked: controlChecked, onChange: handleChange, size: size, value: value }));
+    const control = checkbox ? (_jsx(MuiCheckbox, { readOnly: readOnly, checked: controlChecked, onChange: handleChange, size: size, value: value })) : (_jsx(MuiSwitch, { readOnly: readOnly, checked: controlChecked, onChange: handleChange, size: size, value: value }));
     // Default state
     React.useEffect(() => {
         setControlChecked(controlChecked);
     }, [controlChecked]);
     // Layout
-    return React.createElement(FormControlLabel, { control: control, ...rest });
+    return _jsx(FormControlLabel, { control: control, ...rest });
 }

package/lib/SwitchAnt.d.ts

@@ -1,5 +1,4 @@
 import { SwitchProps } from "@mui/material/Switch";
-import React from "react";
 /**
  * Ant style switch props
  */
@@ -22,4 +21,4 @@ export interface SwitchAntProps extends SwitchProps {
  * @param props Props
  * @returns Component
  */
-export declare function SwitchAnt(props: SwitchAntProps): React.JSX.Element;
+export declare function SwitchAnt(props: SwitchAntProps): import("react/jsx-runtime").JSX.Element;

package/lib/SwitchAnt.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, Typography } from "@mui/material";
 import Switch from "@mui/material/Switch";
 import React from "react";
@@ -27,18 +28,15 @@ export function SwitchAnt(props) {
         setControlChecked(checked);
     };
     // Layout
-    return (React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
-        React.createElement(Typography, { onClick: () => controlChecked && ref.current?.click(), sx: {
-                cursor: "pointer",
-                color: controlChecked
-                    ? undefined
-                    : (theme) => activeColor ?? theme.palette.warning.main
-            } }, startLabel),
-        React.createElement(Switch, { checked: controlChecked, inputRef: ref, value: value, onChange: onChangeLocal, ...rest }),
-        React.createElement(Typography, { onClick: () => !controlChecked && ref.current?.click(), sx: {
-                cursor: "pointer",
-                color: controlChecked
-                    ? (theme) => activeColor ?? theme.palette.warning.main
-                    : undefined
-            } }, endLabel)));
+    return (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { onClick: () => controlChecked && ref.current?.click(), sx: {
+                    cursor: "pointer",
+                    color: controlChecked
+                        ? undefined
+                        : (theme) => activeColor ?? theme.palette.warning.main
+                }, children: startLabel }), _jsx(Switch, { checked: controlChecked, inputRef: ref, value: value, onChange: onChangeLocal, ...rest }), _jsx(Typography, { onClick: () => !controlChecked && ref.current?.click(), sx: {
+                    cursor: "pointer",
+                    color: controlChecked
+                        ? (theme) => activeColor ?? theme.palette.warning.main
+                        : undefined
+                }, children: endLabel })] }));
 }

package/lib/SwitchField.d.ts

@@ -42,4 +42,4 @@ export type SwitchFieldProps = Omit<FormControlProps, "defaultValue"> & {
  * @param props Props
  * @returns Component
  */
-export declare function SwitchField(props: SwitchFieldProps): React.JSX.Element;
+export declare function SwitchField(props: SwitchFieldProps): import("react/jsx-runtime").JSX.Element;

package/lib/SwitchField.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, FormControl, FormHelperText, InputLabel } from "@mui/material";
 import NotchedOutline from "@mui/material/OutlinedInput";
 import React from "react";
@@ -13,21 +14,17 @@ export function SwitchField(props) {
     // Outlined
     const outlined = variant === "outlined";
     // Group
-    const group = (React.createElement(SwitchAnt, { activeColor: activeColor, name: name, startLabel: startLabel, endLabel: endLabel, value: value, checked: checked }));
+    const group = (_jsx(SwitchAnt, { activeColor: activeColor, name: name, startLabel: startLabel, endLabel: endLabel, value: value, checked: checked }));
     // Layout
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FormControl, { fullWidth: fullWidth, ...rest },
-            label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
-            outlined ? (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
-                    cursor: "default",
-                    display: "flex",
-                    gap: 1,
-                    paddingX: 2,
-                    paddingY: "7px",
-                    width: fullWidth ? "100%" : "auto",
-                    "& input": {
-                        display: "none"
-                    }
-                } })) : (React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group))),
-        helperText && React.createElement(FormHelperText, null, helperText)));
+    return (_jsxs(React.Fragment, { children: [_jsxs(FormControl, { fullWidth: fullWidth, ...rest, children: [label && (_jsx(InputLabel, { required: required, variant: variant, shrink: true, children: label })), outlined ? (_jsx(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
+                            cursor: "default",
+                            display: "flex",
+                            gap: 1,
+                            paddingX: 2,
+                            paddingY: "7px",
+                            width: fullWidth ? "100%" : "auto",
+                            "& input": {
+                                display: "none"
+                            }
+                        } })) : (_jsx(Box, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && _jsx(FormHelperText, { children: helperText })] }));
 }

package/lib/TabBox.d.ts

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

package/lib/TabBox.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Utils } from '@etsoo/shared';
 import { Box, Tab, Tabs } from '@mui/material';
 import React from 'react';
@@ -19,13 +20,9 @@ export function TabBox(props) {
         setValue(index);
     }, [index]);
     // Layout
-    return (React.createElement(React.Fragment, null,
-        inputName && (React.createElement("input", { type: "hidden", name: inputName, value: value })),
-        React.createElement(Box, { ...root },
-            React.createElement(Tabs, { value: value, onChange: (event, newValue) => {
-                    setValue(newValue);
-                    if (onChange)
-                        onChange(event, newValue);
-                }, ...rest }, tabs.map(({ children, panel, ...tabRest }, index) => (React.createElement(Tab, { key: index, value: index, LinkComponent: tabRest.to ? Link : undefined, ...tabRest }))))),
-        tabs.map(({ children, panel }, index) => (React.createElement(Box, { key: index, hidden: value !== index, ...panel }, Utils.getResult(children, value === index))))));
+    return (_jsxs(React.Fragment, { children: [inputName && (_jsx("input", { type: "hidden", name: inputName, value: value })), _jsx(Box, { ...root, children: _jsx(Tabs, { value: value, onChange: (event, newValue) => {
+                        setValue(newValue);
+                        if (onChange)
+                            onChange(event, newValue);
+                    }, ...rest, children: tabs.map(({ children, panel, ...tabRest }, index) => (_jsx(Tab, { value: index, LinkComponent: tabRest.to ? Link : undefined, ...tabRest }, index))) }) }), tabs.map(({ children, panel }, index) => (_jsx(Box, { hidden: value !== index, ...panel, children: Utils.getResult(children, value === index) }, index)))] }));
 }

package/lib/TableEx.d.ts

@@ -62,4 +62,4 @@ export type TableExProps<T extends object, D extends DataTypes.Keys<T>> = TableP
  * @param props Props
  * @returns Component
  */
-export declare function TableEx<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TableExProps<T, D>): React.JSX.Element;
+export declare function TableEx<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TableExProps<T, D>): import("react/jsx-runtime").JSX.Element;

package/lib/TableEx.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { GridAlignGet, GridSizeGet } from "@etsoo/react";
 import { DataTypes } from "@etsoo/shared";
 import { Checkbox, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, useTheme } from "@mui/material";
@@ -208,93 +209,82 @@ export function TableEx(props) {
         };
     }, []);
     // Layout
-    return (React.createElement(Paper, null,
-        React.createElement(TableContainer, { sx: { maxHeight } },
-            React.createElement(Table, { ...rest },
-                React.createElement(TableHead, null,
-                    React.createElement(TableRow, { sx: {
-                            "& th": {
-                                backgroundColor: headerColors[0],
-                                color: headerColors[1]
-                            }
-                        } },
-                        selectable && (React.createElement(TableCell, { padding: "checkbox" },
-                            React.createElement(Checkbox, { color: "primary", indeterminate: pageSelectedItems > 0 && pageSelectedItems < rows.length, checked: pageSelectedItems > 0, onChange: (_event, checked) => handleSelectAll(checked) }))),
-                        columns.map((column, index) => {
-                            // Destruct
-                            const { align, field, header, minWidth, sortable, sortAsc = true, type, width } = column;
-                            // Header text
-                            const headerText = header ?? field;
-                            // Sortable
-                            let sortLabel;
-                            if (sortable && field != null) {
-                                const active = queryPaging.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(TableCell, { align: GridAlignGet(align, type), key: field ?? index.toString(), width: width, sx: {
-                                    minWidth: minWidth == null
-                                        ? width == null
-                                            ? TableExMinWidth
-                                            : undefined
-                                        : minWidth
-                                } }, sortLabel));
-                        }))),
-                React.createElement(TableBody, { sx: {
-                        "& tr:nth-of-type(odd):not(.Mui-selected)": {
-                            backgroundColor: alternatingColors[0]
-                        },
-                        "& tr:nth-of-type(even):not(.Mui-selected)": {
-                            backgroundColor: alternatingColors[1]
-                        }
-                    } }, [...Array(queryPaging.batchSize)].map((_item, rowIndex) => {
-                    // Row
-                    const row = rowIndex < rows.length ? rows[rowIndex] : undefined;
-                    // Row id field value
-                    const rowId = DataTypes.getValue(row, idField) ?? rowIndex;
-                    // Selected or not
-                    const isItemSelected = selectable
-                        ? selectedItems.some((item) => item[idField] === rowId)
-                        : false;
-                    return (React.createElement(TableRow, { key: rowId, selected: isItemSelected },
-                        selectable && (React.createElement(TableCell, { padding: "checkbox" }, row && (React.createElement(Checkbox, { color: "primary", checked: isItemSelected, onChange: (_event, checked) => handleSelect(row, checked) })))),
-                        columns.map(({ align, cellRenderer = DataGridRenderers.defaultCellRenderer, field, type, valueFormatter }, columnIndex) => {
-                            const formatProps = {
-                                data: row,
-                                field,
-                                rowIndex,
-                                columnIndex
-                            };
-                            const cellProps = {
-                                align: GridAlignGet(align, type),
-                                valign: "middle"
-                            };
-                            const child = row ? (cellRenderer({
-                                data: row,
-                                field,
-                                formattedValue: valueFormatter
-                                    ? valueFormatter(formatProps)
-                                    : undefined,
-                                selected: isItemSelected,
-                                type,
-                                rowIndex,
-                                columnIndex,
-                                cellProps,
-                                setItems
-                            })) : (React.createElement(React.Fragment, null, "\u00A0"));
-                            return (React.createElement(TableCell, { key: `${rowId}${columnIndex}`, ...cellProps }, child));
-                        })));
-                })))),
-        React.createElement(TablePagination, { component: "div", showFirstButton: true, count: totalRows, rowsPerPage: batchSize, page: currentPage, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, rowsPerPageOptions: [
-                batchSize,
-                2 * batchSize,
-                5 * batchSize,
-                10 * batchSize
-            ] })));
+    return (_jsxs(Paper, { children: [_jsx(TableContainer, { sx: { maxHeight }, children: _jsxs(Table, { ...rest, children: [_jsx(TableHead, { children: _jsxs(TableRow, { sx: {
+                                    "& th": {
+                                        backgroundColor: headerColors[0],
+                                        color: headerColors[1]
+                                    }
+                                }, children: [selectable && (_jsx(TableCell, { padding: "checkbox", children: _jsx(Checkbox, { color: "primary", indeterminate: pageSelectedItems > 0 && pageSelectedItems < rows.length, checked: pageSelectedItems > 0, onChange: (_event, checked) => handleSelectAll(checked) }) })), columns.map((column, index) => {
+                                        // Destruct
+                                        const { align, field, header, minWidth, sortable, sortAsc = true, type, width } = column;
+                                        // Header text
+                                        const headerText = header ?? field;
+                                        // Sortable
+                                        let sortLabel;
+                                        if (sortable && field != null) {
+                                            const active = queryPaging.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(TableCell, { align: GridAlignGet(align, type), width: width, sx: {
+                                                minWidth: minWidth == null
+                                                    ? width == null
+                                                        ? TableExMinWidth
+                                                        : undefined
+                                                    : minWidth
+                                            }, children: sortLabel }, field ?? index.toString()));
+                                    })] }) }), _jsx(TableBody, { sx: {
+                                "& tr:nth-of-type(odd):not(.Mui-selected)": {
+                                    backgroundColor: alternatingColors[0]
+                                },
+                                "& tr:nth-of-type(even):not(.Mui-selected)": {
+                                    backgroundColor: alternatingColors[1]
+                                }
+                            }, children: [...Array(queryPaging.batchSize)].map((_item, rowIndex) => {
+                                // Row
+                                const row = rowIndex < rows.length ? rows[rowIndex] : undefined;
+                                // Row id field value
+                                const rowId = DataTypes.getValue(row, idField) ?? rowIndex;
+                                // Selected or not
+                                const isItemSelected = selectable
+                                    ? selectedItems.some((item) => item[idField] === rowId)
+                                    : false;
+                                return (_jsxs(TableRow, { selected: isItemSelected, children: [selectable && (_jsx(TableCell, { padding: "checkbox", children: row && (_jsx(Checkbox, { color: "primary", checked: isItemSelected, onChange: (_event, checked) => handleSelect(row, checked) })) })), columns.map(({ align, cellRenderer = DataGridRenderers.defaultCellRenderer, field, type, valueFormatter }, columnIndex) => {
+                                            const formatProps = {
+                                                data: row,
+                                                field,
+                                                rowIndex,
+                                                columnIndex
+                                            };
+                                            const cellProps = {
+                                                align: GridAlignGet(align, type),
+                                                valign: "middle"
+                                            };
+                                            const child = row ? (cellRenderer({
+                                                data: row,
+                                                field,
+                                                formattedValue: valueFormatter
+                                                    ? valueFormatter(formatProps)
+                                                    : undefined,
+                                                selected: isItemSelected,
+                                                type,
+                                                rowIndex,
+                                                columnIndex,
+                                                cellProps,
+                                                setItems
+                                            })) : (_jsx(React.Fragment, { children: "\u00A0" }));
+                                            return (_jsx(TableCell, { ...cellProps, children: child }, `${rowId}${columnIndex}`));
+                                        })] }, rowId));
+                            }) })] }) }), _jsx(TablePagination, { component: "div", showFirstButton: true, count: totalRows, rowsPerPage: batchSize, page: currentPage, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, rowsPerPageOptions: [
+                    batchSize,
+                    2 * batchSize,
+                    5 * batchSize,
+                    10 * batchSize
+                ] })] }));
 }

package/lib/TagList.d.ts

@@ -1,5 +1,4 @@
 import { AutocompleteProps } from "@mui/material";
-import React from "react";
 import { InputFieldProps } from "./InputField";
 export type TagListProps = Omit<AutocompleteProps<string, true, false, true>, "open" | "multiple" | "freeSolo" | "options" | "renderInput"> & {
     /**
@@ -19,4 +18,4 @@ export type TagListProps = Omit<AutocompleteProps<string, true, false, true>, "o
      */
     maxItems?: number;
 };
-export declare function TagList(props: TagListProps): React.JSX.Element;
+export declare function TagList(props: TagListProps): import("react/jsx-runtime").JSX.Element;

package/lib/TagList.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Autocomplete, Checkbox, Chip } from "@mui/material";
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
@@ -9,9 +10,7 @@ export function TagList(props) {
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
-    const { renderOption = (props, option, { selected }) => (React.createElement("li", { ...props },
-        React.createElement(Checkbox, { icon: React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: React.createElement(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }),
-        option)), renderTags = (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
+    const { renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] })), renderTags = (value, getTagProps) => value.map((option, index) => (_jsx(Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
     const [open, setOpen] = React.useState(false);
     const [options, setOptions] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
@@ -35,14 +34,14 @@ export function TagList(props) {
         setOptions(result);
         setLoading(false);
     };
-    return (React.createElement(Autocomplete, { multiple: true, freeSolo: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
+    return (_jsx(Autocomplete, { multiple: true, freeSolo: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
             setOpen(true);
             if (options.length === 0) {
                 loadDataLocal();
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, clearOnBlur: true, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, clearOnBlur: true, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (_jsx(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();

package/lib/TagListPro.d.ts

@@ -1,5 +1,4 @@
 import { AutocompleteProps } from "@mui/material";
-import React from "react";
 import { InputFieldProps } from "./InputField";
 import { ListType2 } from "@etsoo/shared";
 export type TagListProProps<D extends ListType2 = ListType2> = Omit<AutocompleteProps<D, true, false, false>, "open" | "multiple" | "options" | "renderInput"> & {
@@ -20,4 +19,4 @@ export type TagListProProps<D extends ListType2 = ListType2> = Omit<Autocomplete
      */
     maxItems?: number;
 };
-export declare function TagListPro<D extends ListType2 = ListType2>(props: TagListProProps<D>): React.JSX.Element;
+export declare function TagListPro<D extends ListType2 = ListType2>(props: TagListProProps<D>): import("react/jsx-runtime").JSX.Element;

package/lib/TagListPro.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Autocomplete, Checkbox, Chip } from "@mui/material";
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
@@ -11,10 +12,7 @@ export function TagListPro(props) {
     const moreLabel = more + "...";
     const getLabel = (item) => DataTypes.getListItemLabel(item);
     // Destruct
-    const { renderOption = (props, option, { selected }) => (React.createElement("li", { ...props },
-        React.createElement(React.Fragment, null,
-            React.createElement(Checkbox, { icon: React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: React.createElement(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }),
-            getLabel(option)))), renderTags = (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, { variant: "outlined", label: getLabel(option), ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
+    const { renderOption = (props, option, { selected }) => (_jsx("li", { ...props, children: _jsxs(_Fragment, { children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) })), renderTags = (value, getTagProps) => value.map((option, index) => (_jsx(Chip, { variant: "outlined", label: getLabel(option), ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
     const [open, setOpen] = React.useState(false);
     const [options, setOptions] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
@@ -38,14 +36,14 @@ export function TagListPro(props) {
         setOptions(result);
         setLoading(false);
     };
-    return (React.createElement(Autocomplete, { multiple: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
+    return (_jsx(Autocomplete, { multiple: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
             setOpen(true);
             if (options.length === 0) {
                 loadDataLocal();
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (_jsx(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();

package/lib/TextFieldEx.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { IconButton, InputAdornment, TextField } from "@mui/material";
 import { MUGlobal } from "./MUGlobal";
@@ -72,11 +73,7 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
     };
     // Show password and/or clear button
     if (!empty && (showPassword || showClear)) {
-        InputProps.endAdornment = (React.createElement(InputAdornment, { position: "end" },
-            showPassword && (React.createElement(IconButton, { tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onMouseDown: touchStart, onMouseUp: touchEnd, onTouchStart: touchStart, onTouchCancel: touchEnd, onTouchEnd: touchEnd },
-                React.createElement(Visibility, null))),
-            showClear && (React.createElement(IconButton, { onClick: clearClick, tabIndex: -1 },
-                React.createElement(Clear, null)))));
+        InputProps.endAdornment = (_jsxs(InputAdornment, { position: "end", children: [showPassword && (_jsx(IconButton, { tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onMouseDown: touchStart, onMouseUp: touchEnd, onTouchStart: touchStart, onTouchCancel: touchEnd, onTouchEnd: touchEnd, children: _jsx(Visibility, {}) })), showClear && (_jsx(IconButton, { onClick: clearClick, tabIndex: -1, children: _jsx(Clear, {}) }))] }));
     }
     // Extend key precess
     const onKeyPressEx = onEnter == null
@@ -132,5 +129,5 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
         };
     }, []);
     // Textfield
-    return (React.createElement(TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: useCombinedRefs(inputRef, localRef), InputProps: InputProps, InputLabelProps: InputLabelProps, onChange: onChangeEx, onKeyDown: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
+    return (_jsx(TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: useCombinedRefs(inputRef, localRef), InputProps: InputProps, InputLabelProps: InputLabelProps, onChange: onChangeEx, onKeyDown: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
 });

package/lib/Tiplist.d.ts

@@ -1,5 +1,4 @@
 import { DataTypes, IdDefaultType, ListType2 } from "@etsoo/shared";
-import React from "react";
 import { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
 /**
  * Tiplist props
@@ -23,4 +22,4 @@ export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<A
  * @param props Props
  * @returns Component
  */
-export declare function Tiplist<T extends object = ListType2, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TiplistProps<T, D>): React.JSX.Element;
+export declare function Tiplist<T extends object = ListType2, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TiplistProps<T, D>): import("react/jsx-runtime").JSX.Element;

package/lib/Tiplist.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";
@@ -163,44 +164,42 @@ export function Tiplist(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, onChange: (event, value, reason, details) => {
-                // Set value
-                setInputValue(value);
-                // Custom
-                if (onChange != null)
-                    onChange(event, value, reason, details);
-                if (onValueChange)
-                    onValueChange(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 == null ? undefined : states.value[idField]);
-            }, onClose: () => {
-                stateUpdate({
-                    open: false,
-                    ...(!states.value && { options: [] })
-                });
-            }, loading: states.loading, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
-                if (item[idField] === "n/a")
-                    return true;
-                return getOptionDisabled ? getOptionDisabled(item) : false;
-            }, getOptionLabel: (item) => {
-                if (typeof item !== "object")
-                    return `${item}`;
-                if (item[idField] === "n/a")
-                    return (more ?? "More") + "...";
-                return getOptionLabel
-                    ? getOptionLabel(item)
-                    : DataTypes.getObjectItemLabel(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, onChange: (event, value, reason, details) => {
+                    // Set value
+                    setInputValue(value);
+                    // Custom
+                    if (onChange != null)
+                        onChange(event, value, reason, details);
+                    if (onValueChange)
+                        onValueChange(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 == null ? undefined : states.value[idField]);
+                }, onClose: () => {
+                    stateUpdate({
+                        open: false,
+                        ...(!states.value && { options: [] })
+                    });
+                }, loading: states.loading, renderInput: (params) => search ? (_jsx(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (_jsx(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
+                    if (item[idField] === "n/a")
+                        return true;
+                    return getOptionDisabled ? getOptionDisabled(item) : false;
+                }, getOptionLabel: (item) => {
+                    if (typeof item !== "object")
+                        return `${item}`;
+                    if (item[idField] === "n/a")
+                        return (more ?? "More") + "...";
+                    return getOptionLabel
+                        ? getOptionLabel(item)
+                        : DataTypes.getObjectItemLabel(item);
+                }, ...rest })] }));
 }