@etsoo/materialui 1.0.1

package/lib/TableEx.js

@@ -0,0 +1,270 @@
+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';
+import React from 'react';
+import { DataGridRenderers } from './DataGridRenderers';
+/**
+ * Extended table min width for width-unset column
+ */
+export const TableExMinWidth = 180;
+/**
+ * Extended Table
+ * @param props Props
+ * @returns Component
+ */
+export function TableEx(props) {
+    var _a;
+    // Theme
+    const theme = 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 = 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.useState([]);
+    const setRows = (rows) => {
+        state.loadedItems = rows.length;
+        updateRows(rows);
+    };
+    // States
+    const stateRefs = React.useRef({
+        autoLoad,
+        currentPage: 0,
+        loadedItems: 0,
+        hasNextPage: true,
+        isNextPageLoading: false,
+        orderBy: defaultOrderBy,
+        orderByAsc: defaultOrderBy
+            ? (_a = columns.find((column) => column.field === defaultOrderBy)) === null || _a === void 0 ? void 0 : _a.sortAsc
+            : undefined,
+        batchSize: rowsPerPageLocal,
+        selectedItems: []
+    });
+    const state = stateRefs.current;
+    // Reset the state and load again
+    const reset = (add) => {
+        const resetState = {
+            autoLoad: true,
+            currentPage: 0,
+            loadedItems: 0,
+            hasNextPage: true,
+            isNextPageLoading: false,
+            lastLoadedItems: undefined,
+            ...add
+        };
+        Object.assign(state, resetState);
+    };
+    React.useImperativeHandle(mRef, () => ({
+        /**
+         * Refresh data
+         */
+        refresh() {
+            loadDataLocal();
+        },
+        /**
+         * Reset
+         */
+        reset
+    }), []);
+    // Load data
+    const loadDataLocal = () => {
+        // Prevent multiple loadings
+        if (!state.hasNextPage || state.isNextPageLoading)
+            return;
+        // Update state
+        state.isNextPageLoading = true;
+        // Parameters
+        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } = state;
+        const loadProps = {
+            currentPage,
+            batchSize,
+            orderBy,
+            orderByAsc,
+            data
+        };
+        loadData(loadProps).then((result) => {
+            state.isMounted = true;
+            if (result == null || isMounted === false) {
+                return;
+            }
+            const newItems = result.length;
+            state.lastLoadedItems = newItems;
+            state.hasNextPage = newItems >= batchSize;
+            state.isNextPageLoading = false;
+            // Update rows
+            setRows(result);
+        });
+    };
+    const handleChangePage = (_event, newPage) => {
+        state.hasNextPage = true;
+        state.currentPage = newPage;
+        loadDataLocal();
+    };
+    const handleChangeRowsPerPage = (event) => {
+        const batchSize = parseInt(event.target.value);
+        reset({ 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({ orderBy: field, orderByAsc: asc });
+    };
+    // Destruct states
+    const { autoLoad: stateAutoLoad, currentPage, hasNextPage, lastLoadedItems, orderBy, batchSize, selectedItems } = state;
+    // 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 !== null && lastLoadedItems !== void 0 ? lastLoadedItems : 0);
+    // Auto load data when current page is 0
+    if (currentPage === 0 && stateAutoLoad && lastLoadedItems == null)
+        loadDataLocal();
+    React.useEffect(() => {
+        return () => {
+            state.isMounted = false;
+        };
+    }, []);
+    // 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 !== null && header !== void 0 ? header : field;
+                            // Sortable
+                            let sortLabel;
+                            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(TableCell, { align: GridAlignGet(align, type), key: field !== null && field !== void 0 ? 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(batchSize)].map((_item, rowIndex) => {
+                    var _a;
+                    // Row
+                    const row = rowIndex < rows.length
+                        ? rows[rowIndex]
+                        : undefined;
+                    // Row id field value
+                    const rowId = (_a = DataTypes.getValue(row, idField)) !== null && _a !== void 0 ? _a : 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
+                            })) : (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
+            ] })));
+}

package/lib/TextFieldEx.d.ts

@@ -0,0 +1,101 @@
+import React from 'react';
+import { TextFieldProps } from '@mui/material';
+/**
+ * Extended text field props
+ */
+export declare type TextFieldExProps = TextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number;
+    /**
+     * On enter click
+     */
+    onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
+    /**
+     * Is the field read only?
+     */
+    readOnly?: boolean;
+    /**
+     * Show clear button
+     */
+    showClear?: boolean;
+    /**
+     * Show password button
+     */
+    showPassword?: boolean;
+};
+/**
+ * Extended text field methods
+ */
+export interface TextFieldExMethods {
+    /**
+     * Set error
+     * @param error Error
+     */
+    setError(error: React.ReactNode): void;
+}
+export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("@mui/material").StandardTextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number | undefined;
+    /**
+     * On enter click
+     */
+    onEnter?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    /**
+     * Is the field read only?
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Show clear button
+     */
+    showClear?: boolean | undefined;
+    /**
+     * Show password button
+     */
+    showPassword?: boolean | undefined;
+}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "label" | "slot" | "select" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "type" | "margin" | "size" | "name" | "autoFocus" | "value" | "autoComplete" | "readOnly" | "required" | "rows" | "fullWidth" | "error" | "inputProps" | "onEnter" | "inputRef" | "focused" | "hiddenLabel" | "multiline" | "maxRows" | "minRows" | "changeDelay" | "InputLabelProps" | "InputProps" | "FormHelperTextProps" | "helperText" | "SelectProps" | "showClear" | "showPassword"> | Pick<import("@mui/material").FilledTextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number | undefined;
+    /**
+     * On enter click
+     */
+    onEnter?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    /**
+     * Is the field read only?
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Show clear button
+     */
+    showClear?: boolean | undefined;
+    /**
+     * Show password button
+     */
+    showPassword?: boolean | undefined;
+}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "label" | "slot" | "select" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "type" | "margin" | "size" | "name" | "autoFocus" | "value" | "autoComplete" | "readOnly" | "required" | "rows" | "fullWidth" | "error" | "inputProps" | "onEnter" | "inputRef" | "focused" | "hiddenLabel" | "multiline" | "maxRows" | "minRows" | "changeDelay" | "InputLabelProps" | "InputProps" | "FormHelperTextProps" | "helperText" | "SelectProps" | "showClear" | "showPassword"> | Pick<import("@mui/material").OutlinedTextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number | undefined;
+    /**
+     * On enter click
+     */
+    onEnter?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    /**
+     * Is the field read only?
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Show clear button
+     */
+    showClear?: boolean | undefined;
+    /**
+     * Show password button
+     */
+    showPassword?: boolean | undefined;
+}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "label" | "slot" | "select" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "type" | "margin" | "size" | "name" | "autoFocus" | "value" | "autoComplete" | "readOnly" | "required" | "rows" | "fullWidth" | "error" | "inputProps" | "onEnter" | "inputRef" | "focused" | "hiddenLabel" | "multiline" | "maxRows" | "minRows" | "changeDelay" | "InputLabelProps" | "InputProps" | "FormHelperTextProps" | "helperText" | "SelectProps" | "showClear" | "showPassword">) & React.RefAttributes<TextFieldExMethods>>;

package/lib/TextFieldEx.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import { IconButton, InputAdornment, TextField } from '@mui/material';
+import { MUGlobal } from './MUGlobal';
+import { Clear, Visibility } from '@mui/icons-material';
+import { Keyboard } from '@etsoo/shared';
+import { useCombinedRefs, useDelayedExecutor } from '@etsoo/react';
+export const TextFieldEx = React.forwardRef((props, ref) => {
+    // Destructure
+    const { changeDelay, error, fullWidth = true, helperText, InputProps = {}, onChange, onKeyPress, onEnter, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
+    // State
+    const [errorText, updateErrorText] = React.useState();
+    const [empty, updateEmpty] = React.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 clearClick = () => {
+        if (input != null) {
+            input.value = '';
+            input.focus();
+        }
+        if (errorText != null) {
+            // Reset
+            updateErrorText(undefined);
+        }
+        updateEmpty(true);
+    };
+    const preventDefault = (e) => {
+        // Prevent long press
+        if (e.isPropagationStopped())
+            e.stopPropagation();
+        if (e.isDefaultPrevented())
+            e.preventDefault();
+    };
+    const touchStart = (e) => {
+        // Show the password
+        if (input) {
+            input.blur();
+            input.type = 'text';
+        }
+        preventDefault(e);
+    };
+    const touchEnd = (e) => {
+        // Show the password
+        if (input)
+            input.type = 'password';
+        preventDefault(e);
+    };
+    // 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)))));
+    }
+    // Extend key precess
+    const onKeyPressEx = onEnter == null
+        ? onKeyPress
+        : (e) => {
+            if (e.key === Keyboard.Keys.Enter) {
+                // Enter press callback
+                onEnter(e);
+            }
+            if (!e.isDefaultPrevented && onKeyPress != null) {
+                // Common press callback
+                onKeyPress(e);
+            }
+        };
+    React.useImperativeHandle(ref, () => ({
+        /**
+         * Set error
+         * @param error Error
+         */
+        setError(error) {
+            updateErrorText(error);
+        }
+    }), []);
+    const isMounted = React.useRef(true);
+    const delayed = onChange != null && changeDelay != null && changeDelay >= 1
+        ? 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 === null || delayed === void 0 ? void 0 : delayed.call(undefined, event);
+    };
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+            delayed === null || delayed === void 0 ? void 0 : delayed.clear();
+        };
+    }, []);
+    // Textfield
+    return (React.createElement(TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: useCombinedRefs(inputRef, localRef), InputProps: InputProps, onChange: onChangeEx, onKeyPress: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
+});

package/lib/Tiplist.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { DataTypes, IdDefaultType, ListType } from '@etsoo/shared';
+import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
+/**
+ * Tiplist props
+ */
+export declare type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<AutocompleteExtendedProps<T, D>, 'open'> & {
+    /**
+     * Load data callback
+     */
+    loadData: (keyword?: string, id?: T[D]) => PromiseLike<T[] | null | undefined>;
+};
+/**
+ * Tiplist
+ * @param props Props
+ * @returns Component
+ */
+export declare function Tiplist<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TiplistProps<T, D>): JSX.Element;