@etsoo/materialui 1.4.68 → 1.4.70

package/lib/cjs/TableEx.js

@@ -0,0 +1,294 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableExMinWidth = void 0;
+exports.TableEx = TableEx;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const react_2 = __importDefault(require("react"));
+const DataGridRenderers_1 = require("./DataGridRenderers");
+/**
+ * Extended table min width for width-unset column
+ */
+exports.TableExMinWidth = 180;
+/**
+ * Extended Table
+ * @param props Props
+ * @returns Component
+ */
+function TableEx(props) {
+    // Theme
+    const theme = (0, material_1.useTheme)();
+    // Destruct
+    const { alternatingColors = [theme.palette.action.hover, undefined], autoLoad = true, columns, defaultOrderBy, headerColors = [undefined, undefined], idField = "id", loadBatchSize, loadData, maxHeight, mRef, onSelectChange, rowHeight = 53, otherHeight = 110, threshold, ...rest } = props;
+    const selectable = onSelectChange != null;
+    // Rows per page
+    let rowsPerPageLocal;
+    if (maxHeight != null) {
+        if (loadBatchSize != null)
+            rowsPerPageLocal = (0, react_1.GridSizeGet)(loadBatchSize, maxHeight);
+        else
+            rowsPerPageLocal = Math.floor((maxHeight - otherHeight) / rowHeight);
+    }
+    else if (typeof loadBatchSize === "number") {
+        rowsPerPageLocal = loadBatchSize;
+    }
+    else {
+        rowsPerPageLocal = 10;
+    }
+    // Rows
+    const [rows, updateRows] = react_2.default.useState([]);
+    const setRows = (rows) => {
+        state.loadedItems = rows.length;
+        updateRows(rows);
+    };
+    // States
+    const stateRefs = react_2.default.useRef({
+        queryPaging: {
+            currentPage: 0,
+            orderBy: defaultOrderBy,
+            batchSize: rowsPerPageLocal
+        },
+        autoLoad,
+        loadedItems: 0,
+        hasNextPage: true,
+        isNextPageLoading: false,
+        selectedItems: [],
+        idCache: {}
+    });
+    const state = stateRefs.current;
+    // Reset the state and load again
+    const reset = (add) => {
+        const { queryPaging, ...rest } = add ?? {};
+        const resetState = {
+            autoLoad: true,
+            loadedItems: 0,
+            hasNextPage: true,
+            isNextPageLoading: false,
+            lastLoadedItems: undefined,
+            lastItem: undefined,
+            ...rest
+        };
+        Object.assign(state, resetState);
+        Object.assign(state.queryPaging, {
+            currentPage: 0,
+            ...queryPaging
+        });
+    };
+    react_2.default.useImperativeHandle(mRef, () => ({
+        delete(index) {
+            const item = rows.at(index);
+            if (item) {
+                const newRows = [...rows];
+                newRows.splice(index, 1);
+                setRows(newRows);
+            }
+            return item;
+        },
+        insert(item, start) {
+            const newRows = [...rows];
+            newRows.splice(start, 0, item);
+            setRows(newRows);
+        },
+        /**
+         * Refresh data
+         */
+        refresh() {
+            loadDataLocal();
+        },
+        /**
+         * Reset
+         */
+        reset,
+        scrollToRef(scrollOffset) {
+            // Not implemented
+        },
+        scrollToItemRef(index) {
+            // Not implemented
+        }
+    }), []);
+    // Load data
+    const loadDataLocal = () => {
+        // Prevent multiple loadings
+        if (!state.hasNextPage || state.isNextPageLoading)
+            return;
+        // Update state
+        state.isNextPageLoading = true;
+        // Parameters
+        const { queryPaging, data, isMounted } = state;
+        const loadProps = {
+            queryPaging,
+            data
+        };
+        loadData(loadProps).then((result) => {
+            state.isMounted = true;
+            if (result == null || isMounted === false) {
+                return;
+            }
+            const newItems = result.length;
+            state.lastLoadedItems = newItems;
+            state.hasNextPage = newItems >= queryPaging.batchSize;
+            state.isNextPageLoading = false;
+            // Update rows
+            setRows(result);
+        });
+    };
+    const handleChangePage = (_event, newPage) => {
+        state.hasNextPage = true;
+        state.queryPaging.currentPage = newPage;
+        loadDataLocal();
+    };
+    const handleChangeRowsPerPage = (event) => {
+        const batchSize = parseInt(event.target.value);
+        reset({ queryPaging: { batchSize } });
+    };
+    const handleSelect = (item, checked) => {
+        const selectedItems = state.selectedItems;
+        const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === item[idField]);
+        if (checked) {
+            if (index === -1)
+                selectedItems.push(item);
+        }
+        else {
+            if (index !== -1)
+                selectedItems.splice(index, 1);
+        }
+        if (onSelectChange != null) {
+            onSelectChange(selectedItems);
+        }
+    };
+    const handleSelectAll = (checked) => {
+        const selectedItems = state.selectedItems;
+        rows.forEach((row) => {
+            const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === row[idField]);
+            if (checked) {
+                if (index === -1)
+                    selectedItems.push(row);
+            }
+            else if (index !== -1) {
+                selectedItems.splice(index, 1);
+            }
+        });
+        if (onSelectChange != null) {
+            onSelectChange(selectedItems);
+        }
+    };
+    // New sort
+    const handleSort = (field, asc) => {
+        reset({ queryPaging: { orderBy: [{ field, desc: !(asc ?? true) }] } });
+    };
+    // Set items for rerenderer
+    const setItems = (callback) => {
+        const result = callback(rows);
+        if (result == null)
+            return;
+        setRows(result);
+    };
+    // Destruct states
+    const { queryPaging, autoLoad: stateAutoLoad, hasNextPage, lastLoadedItems, selectedItems } = state;
+    const currentPage = queryPaging.currentPage ?? 0;
+    const batchSize = queryPaging.batchSize;
+    // Current page selected items
+    const pageSelectedItems = selectable
+        ? rows.reduce((previousValue, currentItem) => {
+            if (selectedItems.some((item) => item[idField] === currentItem[idField]))
+                return previousValue + 1;
+            return previousValue;
+        }, 0)
+        : 0;
+    // Total rows
+    const totalRows = hasNextPage
+        ? -1
+        : currentPage * batchSize + (lastLoadedItems ?? 0);
+    // Auto load data when current page is 0
+    if (currentPage === 0 && stateAutoLoad && lastLoadedItems == null)
+        loadDataLocal();
+    react_2.default.useEffect(() => {
+        return () => {
+            state.isMounted = false;
+        };
+    }, []);
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { children: [(0, jsx_runtime_1.jsx)(material_1.TableContainer, { sx: { maxHeight }, children: (0, jsx_runtime_1.jsxs)(material_1.Table, { ...rest, children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { sx: {
+                                    "& th": {
+                                        backgroundColor: headerColors[0],
+                                        color: headerColors[1]
+                                    }
+                                }, children: [selectable && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "checkbox", children: (0, jsx_runtime_1.jsx)(material_1.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?.some((o) => o.field.toLowerCase() === field.toLowerCase());
+                                            sortLabel = ((0, jsx_runtime_1.jsx)(material_1.TableSortLabel, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
+                                                    if (active)
+                                                        column.sortAsc = !sortAsc;
+                                                    handleSort(field, column.sortAsc);
+                                                }, children: headerText }));
+                                        }
+                                        else {
+                                            sortLabel = headerText;
+                                        }
+                                        return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { align: (0, react_1.GridAlignGet)(align, type), width: width, sx: {
+                                                minWidth: minWidth == null
+                                                    ? width == null
+                                                        ? exports.TableExMinWidth
+                                                        : undefined
+                                                    : minWidth
+                                            }, children: sortLabel }, field ?? index.toString()));
+                                    })] }) }), (0, jsx_runtime_1.jsx)(material_1.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 = shared_1.DataTypes.getValue(row, idField) ?? rowIndex;
+                                // Selected or not
+                                const isItemSelected = selectable
+                                    ? selectedItems.some((item) => item[idField] === rowId)
+                                    : false;
+                                return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { selected: isItemSelected, children: [selectable && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "checkbox", children: row && ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", checked: isItemSelected, onChange: (_event, checked) => handleSelect(row, checked) })) })), columns.map(({ align, cellRenderer = DataGridRenderers_1.DataGridRenderers.defaultCellRenderer, field, type, valueFormatter }, columnIndex) => {
+                                            const formatProps = {
+                                                data: row,
+                                                field,
+                                                rowIndex,
+                                                columnIndex
+                                            };
+                                            const cellProps = {
+                                                align: (0, react_1.GridAlignGet)(align, type),
+                                                valign: "middle"
+                                            };
+                                            const child = row ? (cellRenderer({
+                                                data: row,
+                                                field,
+                                                formattedValue: valueFormatter
+                                                    ? valueFormatter(formatProps)
+                                                    : undefined,
+                                                selected: isItemSelected,
+                                                type,
+                                                rowIndex,
+                                                columnIndex,
+                                                cellProps,
+                                                setItems
+                                            })) : ((0, jsx_runtime_1.jsx)(react_2.default.Fragment, { children: "\u00A0" }));
+                                            return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { ...cellProps, children: child }, `${rowId}${columnIndex}`));
+                                        })] }, rowId));
+                            }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.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/cjs/TagList.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagList = TagList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
+const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
+const react_1 = __importDefault(require("react"));
+const InputField_1 = require("./InputField");
+const ReactApp_1 = require("./app/ReactApp");
+function TagList(props) {
+    // Labels
+    const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = ReactApp_1.globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+    const moreLabel = more + "...";
+    // Destruct
+    const { renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] })), renderTags = (value, getTagProps) => value.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.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_1.default.useState(false);
+    const [options, setOptions] = react_1.default.useState([]);
+    const [loading, setLoading] = react_1.default.useState(false);
+    const currentValue = react_1.default.useRef([]);
+    currentValue.current = value ?? [];
+    const loadDataLocal = async (keyword) => {
+        setLoading(true);
+        const result = (await loadData(keyword, maxItems)) ?? [];
+        const len = result.length;
+        currentValue.current.forEach((item) => {
+            if (!result.includes(item))
+                result.push(item);
+        });
+        if (len >= maxItems) {
+            result.push(moreLabel);
+        }
+        else if (len === 0) {
+            // When no result, hide the popup
+            setOpen(false);
+        }
+        setOptions(result);
+        setLoading(false);
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.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) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+                // Stop bubble
+                event.preventDefault();
+                event.stopPropagation();
+                await loadDataLocal(event.target.value);
+            }, ...inputProps, ...params })), getOptionDisabled: (item) => {
+            return item === moreLabel;
+        }, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: value, onChange: (event, value, reason, details) => {
+            currentValue.current = value;
+            if (onChange)
+                onChange(event, value, reason, details);
+        }, ...rest }));
+}

package/lib/cjs/TagListPro.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagListPro = TagListPro;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
+const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
+const react_1 = __importDefault(require("react"));
+const InputField_1 = require("./InputField");
+const ReactApp_1 = require("./app/ReactApp");
+const shared_1 = require("@etsoo/shared");
+function TagListPro(props) {
+    // Labels
+    const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = ReactApp_1.globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+    const moreLabel = more + "...";
+    const getLabel = (item) => shared_1.DataTypes.getListItemLabel(item);
+    // Destruct
+    const { renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsx)("li", { ...props, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) })), renderTags = (value, getTagProps) => value.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.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_1.default.useState(false);
+    const [options, setOptions] = react_1.default.useState([]);
+    const [loading, setLoading] = react_1.default.useState(false);
+    const currentValue = react_1.default.useRef([]);
+    currentValue.current = value ?? [];
+    const loadDataLocal = async (keyword) => {
+        setLoading(true);
+        const result = (await loadData(keyword, maxItems)) ?? [];
+        const len = result.length;
+        currentValue.current.forEach((item) => {
+            if (!result.some((r) => r.id === item.id))
+                result.push(item);
+        });
+        if (len >= maxItems) {
+            result.push({ id: -1, name: moreLabel });
+        }
+        else if (len === 0) {
+            // When no result, hide the popup
+            setOpen(false);
+        }
+        setOptions(result);
+        setLoading(false);
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.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) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+                // Stop bubble
+                event.preventDefault();
+                event.stopPropagation();
+                await loadDataLocal(event.target.value);
+            }, ...inputProps, ...params })), getOptionDisabled: (item) => {
+            return (typeof item.id === "number" &&
+                item.id < 0 &&
+                getLabel(item) === moreLabel);
+        }, getOptionLabel: (item) => getLabel(item), isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: value, onChange: (event, value, reason, details) => {
+            currentValue.current = value;
+            if (onChange)
+                onChange(event, value, reason, details);
+        }, ...rest }));
+}

package/lib/cjs/TextFieldEx.js

@@ -0,0 +1,145 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldEx = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const MUGlobal_1 = require("./MUGlobal");
+const icons_material_1 = require("@mui/icons-material");
+const shared_1 = require("@etsoo/shared");
+const react_2 = require("@etsoo/react");
+const ReactApp_1 = require("./app/ReactApp");
+exports.TextFieldEx = react_1.default.forwardRef((props, ref) => {
+    // Labels
+    const { showIt, clearInput } = ReactApp_1.globalApp?.getLabels("showIt", "clearInput") ?? {};
+    // Destructure
+    const { changeDelay, clearLabel = clearInput, error, fullWidth = true, helperText, InputLabelProps = {}, InputProps = {}, onChange, onClear, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal_1.MUGlobal.textFieldVariant, ...rest } = props;
+    // Shrink
+    InputLabelProps.shrink ??= MUGlobal_1.MUGlobal.searchFieldShrink;
+    // State
+    const [errorText, updateErrorText] = react_1.default.useState();
+    const [empty, updateEmpty] = react_1.default.useState(true);
+    // Read only
+    if (readOnly != null)
+        InputProps.readOnly = readOnly;
+    // Calculate
+    let errorEx = error;
+    let helperTextEx = helperText;
+    if (errorText != null) {
+        errorEx = true;
+        helperTextEx = errorText;
+    }
+    let typeEx = showPassword ? "password" : type;
+    let input;
+    const localRef = (ref) => {
+        input = ref;
+        if (input.value !== "") {
+            updateEmpty(false);
+        }
+    };
+    const doClear = () => {
+        if (input == null)
+            return;
+        react_2.ReactUtils.triggerChange(input, "", false);
+        input.focus();
+    };
+    const clearClick = () => {
+        if (onClear) {
+            onClear(doClear);
+        }
+        else {
+            doClear();
+        }
+    };
+    const preventDefault = (e) => {
+        // Prevent long press
+        if (e.isPropagationStopped())
+            e.stopPropagation();
+        if (e.isDefaultPrevented())
+            e.preventDefault();
+    };
+    const touchStart = async (e) => {
+        // Show the password
+        if (input) {
+            if (onVisibility) {
+                const result = await onVisibility(input);
+                if (result === false)
+                    return;
+            }
+            input.blur();
+            input.type = "text";
+        }
+        preventDefault(e);
+    };
+    const touchEnd = (e) => {
+        // Show the password
+        if (input) {
+            if (onVisibility)
+                return;
+            input.type = "password";
+        }
+        preventDefault(e);
+    };
+    // Show password and/or clear button
+    if (!empty && (showPassword || showClear)) {
+        InputProps.endAdornment = ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, { position: "end", children: [showPassword && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onMouseDown: touchStart, onMouseUp: touchEnd, onTouchStart: touchStart, onTouchCancel: touchEnd, onTouchEnd: touchEnd, title: showIt, children: (0, jsx_runtime_1.jsx)(icons_material_1.Visibility, {}) })), showClear && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: clearClick, tabIndex: -1, title: clearLabel, children: (0, jsx_runtime_1.jsx)(icons_material_1.Clear, {}) }))] }));
+    }
+    // Extend key precess
+    const onKeyPressEx = onEnter == null
+        ? onKeyDown
+        : (e) => {
+            if (e.key === shared_1.Keyboard.Keys.Enter) {
+                // Enter press callback
+                onEnter(e);
+            }
+            if (!e.isDefaultPrevented && onKeyDown != null) {
+                // Common press callback
+                onKeyDown(e);
+            }
+        };
+    react_1.default.useImperativeHandle(ref, () => ({
+        /**
+         * Set error
+         * @param error Error
+         */
+        setError(error) {
+            updateErrorText(error);
+        }
+    }), []);
+    const isMounted = react_1.default.useRef(true);
+    const delayed = onChange != null && changeDelay != null && changeDelay >= 1
+        ? (0, react_2.useDelayedExecutor)(onChange, changeDelay)
+        : undefined;
+    const onChangeEx = (event) => {
+        if (errorText != null) {
+            // Reset
+            updateErrorText(undefined);
+        }
+        if (showClear || showPassword) {
+            if (event.target.value === "") {
+                updateEmpty(true);
+            }
+            else if (empty) {
+                updateEmpty(false);
+            }
+        }
+        if (onChange == null)
+            return;
+        if (changeDelay == null || changeDelay < 1) {
+            onChange(event);
+            return;
+        }
+        delayed?.call(undefined, event);
+    };
+    react_1.default.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+            delayed?.clear();
+        };
+    }, []);
+    // Textfield
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: (0, react_2.useCombinedRefs)(inputRef, localRef), InputProps: InputProps, InputLabelProps: InputLabelProps, onChange: onChangeEx, onKeyDown: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
+});