@etsoo/materialui 1.1.29 → 1.1.31

package/lib/CountdownButton.d.ts

@@ -20,4 +20,4 @@ export type CountdownButtonProps = Omit<ButtonProps, 'endIcon' | 'disabled'> & {
  * @param props Props
  * @returns Button
  */
-export declare const CountdownButton: React.ForwardRefExoticComponent<Pick<CountdownButtonProps, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "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" | "onResize" | "onResizeCapture" | "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" | "type" | "size" | "name" | "href" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "fullWidth" | "startIcon" | "onAction"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CountdownButton: React.ForwardRefExoticComponent<Omit<CountdownButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/lib/HiSelector.d.ts

@@ -1,6 +1,6 @@
-import { DataTypes, IdDefaultType, LabelDefaultType } from '@etsoo/shared';
-import { SelectChangeEvent } from '@mui/material';
-import React from 'react';
+import { DataTypes, IdDefaultType, LabelDefaultType } from "@etsoo/shared";
+import { SelectChangeEvent } from "@mui/material";
+import React from "react";
 /**
  * Hierarchy selector props
  */
@@ -49,6 +49,10 @@ export type HiSelectorProps<T extends object, D extends DataTypes.Keys<T> = IdDe
      * Required
      */
     required?: boolean;
+    /**
+     * Search mode
+     */
+    search?: boolean;
     /**
      * Values
      */

package/lib/HiSelector.js

@@ -1,6 +1,6 @@
-import { FormLabel, Grid } from '@mui/material';
-import React from 'react';
-import { SelectEx } from './SelectEx';
+import { FormLabel, Grid } from "@mui/material";
+import React from "react";
+import { SelectEx } from "./SelectEx";
 /**
  * Hierarchy selector
  * @param props Prop
@@ -8,7 +8,7 @@ import { SelectEx } from './SelectEx';
  */
 export function HiSelector(props) {
     // Destruct
-    const { idField = 'id', error, helperText, name, label = name, labelField = 'name', loadData, onChange, onSelectChange, onItemChange, required, values = [] } = props;
+    const { idField = "id", error, helperText, name, label = name, labelField = "name", loadData, onChange, onSelectChange, onItemChange, required, search = true, values = [] } = props;
     const [localValues, setValues] = React.useState(values);
     const updateValue = (value) => {
         if (onChange)
@@ -16,7 +16,7 @@ export function HiSelector(props) {
     };
     const doChange = (event, index) => {
         const value = event.target.value;
-        const itemValue = value === '' ? undefined : value;
+        const itemValue = value === "" ? undefined : value;
         updateValue(itemValue);
         const newValues = [...localValues.slice(0, index)];
         if (itemValue != null)
@@ -28,8 +28,7 @@ export function HiSelector(props) {
     const doItemChange = (option, userAction) => {
         if (onItemChange == null)
             return;
-        if (!userAction &&
-            (option == null || option[idField] !== values.at(-1)))
+        if (!userAction && (option == null || option[idField] !== values.at(-1)))
             return;
         onItemChange(option, userAction);
     };
@@ -43,13 +42,13 @@ export function HiSelector(props) {
     return (React.createElement(React.Fragment, null,
         React.createElement(Grid, { item: true, xs: 12 },
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label),
-            React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ''}` })),
+            React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ""}` })),
         React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
-            React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: true, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, inputRequired: required, error: error, helperText: helperText })),
+            React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, inputRequired: required, error: error, helperText: helperText })),
         localValues[0] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
-            React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, labelField: labelField, name: "tab2", search: true, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange }))),
+            React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange }))),
         localValues[1] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
-            React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, labelField: labelField, name: "tab3", search: true, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange }))),
+            React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange }))),
         localValues[2] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
-            React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, labelField: labelField, name: "tab4", search: true, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange })))));
+            React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange })))));
 }

package/lib/HiSelectorTL.d.ts

@@ -0,0 +1,58 @@
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { AutocompleteChangeReason } from "@mui/material";
+import React from "react";
+/**
+ * Hierarchy tiplist selector props
+ */
+export type HiSelectorTLProps<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>> = {
+    /**
+     * Id field
+     */
+    idField?: D;
+    /**
+     * Error
+     */
+    error?: boolean;
+    /**
+     * The helper text content.
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Name, also hidden input field name
+     */
+    name: string;
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * Load data callback
+     */
+    loadData: (keyword: string | undefined, id: T[D] | undefined, maxItems: number, parent?: T[D]) => PromiseLike<T[] | null | undefined>;
+    /**
+     * On value change event
+     */
+    onChange?: (value: unknown) => void;
+    /**
+     * Item change callback
+     */
+    onItemChange?: (event: React.SyntheticEvent, option: T | null, reason: AutocompleteChangeReason) => void;
+    /**
+     * Required
+     */
+    required?: boolean;
+    /**
+     * Search mode
+     */
+    search?: boolean;
+    /**
+     * Values
+     */
+    values?: T[D][];
+};
+/**
+ * Hierarchy tiplist selector
+ * @param props Prop
+ * @returns Component
+ */
+export declare function HiSelectorTL<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: HiSelectorTLProps<T, D>): JSX.Element;

package/lib/HiSelectorTL.js

@@ -0,0 +1,49 @@
+import { FormLabel, Grid } from "@mui/material";
+import React from "react";
+import { Tiplist } from "./Tiplist";
+/**
+ * Hierarchy tiplist selector
+ * @param props Prop
+ * @returns Component
+ */
+export function HiSelectorTL(props) {
+    // Destruct
+    const { idField = "id", error, helperText, name, label = name, loadData, onChange, onItemChange, required, search = false, values = [] } = props;
+    const [localValues, setValues] = React.useState(values);
+    const updateValue = (value) => {
+        if (onChange)
+            onChange(value);
+    };
+    const doChange = (index, event, value, reason) => {
+        if (onItemChange) {
+            onItemChange(event, value, reason);
+            if (event.isDefaultPrevented())
+                return;
+        }
+        const itemValue = value ? value[idField] : undefined;
+        updateValue(itemValue);
+        const newValues = [...localValues.slice(0, index)];
+        if (itemValue != null)
+            newValues.push(itemValue);
+        setValues(newValues);
+    };
+    React.useEffect(() => {
+        if (values.length > 0) {
+            setValues(values);
+            updateValue(values.at(-1));
+        }
+    }, [values.toString()]);
+    const currentValue = localValues.at(-1);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { item: true, xs: 12 },
+            React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label),
+            React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ""}` })),
+        React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+            React.createElement(Tiplist, { idField: idField, label: "1", name: "tab1", search: search, fullWidth: true, idValue: values[0], loadData: (keyword, id, items) => loadData(keyword, id, items), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (event, value, reason) => doChange(0, event, value, reason) })),
+        localValues[0] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+            React.createElement(Tiplist, { key: `${localValues[0]}`, label: "2", idField: idField, name: "tab2", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[0]), idValue: values[1], onChange: (event, value, reason) => doChange(1, event, value, reason) }))),
+        localValues[1] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+            React.createElement(Tiplist, { key: `${localValues[1]}`, label: "3", idField: idField, name: "tab3", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[1]), idValue: values[2], onChange: (event, value, reason) => doChange(2, event, value, reason) }))),
+        localValues[2] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+            React.createElement(Tiplist, { key: `${localValues[2]}`, label: "4", idField: idField, name: "tab4", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[2]), idValue: values[3], onChange: (event, value, reason) => doChange(3, event, value, reason) })))));
+}

package/lib/InputField.d.ts

@@ -18,7 +18,7 @@ export type InputFieldProps = TextFieldProps & {
  * @param props Props
  * @returns Component
  */
-export declare const InputField: React.ForwardRefExoticComponent<(Pick<import("@mui/material").StandardTextFieldProps & {
+export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@mui/material").StandardTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
@@ -27,7 +27,7 @@ export declare const InputField: React.ForwardRefExoticComponent<(Pick<import("@
      * Is the field read only?
      */
     readOnly?: 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" | "nonce" | "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" | "onResize" | "onResizeCapture" | "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" | "inputRef" | "focused" | "hiddenLabel" | "multiline" | "maxRows" | "minRows" | "changeDelay" | "InputLabelProps" | "InputProps" | "FormHelperTextProps" | "helperText" | "SelectProps"> | Pick<import("@mui/material").FilledTextFieldProps & {
+}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
@@ -36,7 +36,7 @@ export declare const InputField: React.ForwardRefExoticComponent<(Pick<import("@
      * Is the field read only?
      */
     readOnly?: 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" | "nonce" | "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" | "onResize" | "onResizeCapture" | "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" | "inputRef" | "focused" | "hiddenLabel" | "multiline" | "maxRows" | "minRows" | "changeDelay" | "InputLabelProps" | "InputProps" | "FormHelperTextProps" | "helperText" | "SelectProps"> | Pick<import("@mui/material").OutlinedTextFieldProps & {
+}, "ref"> | Omit<import("@mui/material").OutlinedTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
@@ -45,4 +45,4 @@ export declare const InputField: React.ForwardRefExoticComponent<(Pick<import("@
      * Is the field read only?
      */
     readOnly?: 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" | "nonce" | "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" | "onResize" | "onResizeCapture" | "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" | "inputRef" | "focused" | "hiddenLabel" | "multiline" | "maxRows" | "minRows" | "changeDelay" | "InputLabelProps" | "InputProps" | "FormHelperTextProps" | "helperText" | "SelectProps">) & React.RefAttributes<HTMLDivElement>>;
+}, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/lib/TextFieldEx.d.ts

@@ -41,7 +41,7 @@ export interface TextFieldExMethods {
      */
     setError(error: React.ReactNode): void;
 }
-export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("@mui/material").StandardTextFieldProps & {
+export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("@mui/material").StandardTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
@@ -68,7 +68,7 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
      * 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" | "nonce" | "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" | "onResize" | "onResizeCapture" | "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" | "onVisibility" | "showClear" | "showPassword"> | Pick<import("@mui/material").FilledTextFieldProps & {
+}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
@@ -95,7 +95,7 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
      * 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" | "nonce" | "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" | "onResize" | "onResizeCapture" | "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" | "onVisibility" | "showClear" | "showPassword"> | Pick<import("@mui/material").OutlinedTextFieldProps & {
+}, "ref"> | Omit<import("@mui/material").OutlinedTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
@@ -122,4 +122,4 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
      * 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" | "nonce" | "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" | "onResize" | "onResizeCapture" | "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" | "onVisibility" | "showClear" | "showPassword">) & React.RefAttributes<TextFieldExMethods>>;
+}, "ref">) & React.RefAttributes<TextFieldExMethods>>;

package/lib/Tiplist.js

@@ -161,6 +161,8 @@ export function Tiplist(props) {
                 return getOptionDisabled ? getOptionDisabled(item) : false;
             }, getOptionLabel: (item) => {
                 var _a;
+                if (typeof item !== "object")
+                    return `${item}`;
                 if (item[idField] === "n/a")
                     return ((_a = labels.more) !== null && _a !== void 0 ? _a : "More") + "...";
                 return getOptionLabel

package/lib/index.d.ts

@@ -46,6 +46,7 @@ export * from "./FabBox";
 export * from "./FlexBox";
 export * from "./GridDataFormat";
 export * from "./HiSelector";
+export * from "./HiSelectorTL";
 export * from "./IconButtonLink";
 export * from "./InputField";
 export * from "./ItemList";

package/lib/index.js

@@ -46,6 +46,7 @@ export * from "./FabBox";
 export * from "./FlexBox";
 export * from "./GridDataFormat";
 export * from "./HiSelector";
+export * from "./HiSelectorTL";
 export * from "./IconButtonLink";
 export * from "./InputField";
 export * from "./ItemList";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.29",
+  "version": "1.1.31",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,15 +50,15 @@
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@etsoo/appscript": "^1.3.62",
+    "@etsoo/appscript": "^1.3.63",
     "@etsoo/notificationbase": "^1.1.23",
-    "@etsoo/react": "^1.6.46",
+    "@etsoo/react": "^1.6.47",
     "@etsoo/shared": "^1.1.88",
     "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.7",
+    "@mui/material": "^5.11.8",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
-    "@types/react": "^18.0.27",
+    "@types/react": "^18.0.28",
     "@types/react-avatar-editor": "^13.0.0",
     "@types/react-dom": "^18.0.10",
     "@types/react-input-mask": "^3.0.2",
@@ -86,8 +86,8 @@
     "@types/jest": "^29.4.0",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
-    "jest": "^29.4.1",
-    "jest-environment-jsdom": "^29.4.1",
+    "jest": "^29.4.2",
+    "jest-environment-jsdom": "^29.4.2",
     "typescript": "^4.9.5"
   }
 }

package/src/HiSelector.tsx

@@ -1,75 +1,80 @@
-import { DataTypes, IdDefaultType, LabelDefaultType } from '@etsoo/shared';
-import { FormLabel, Grid, SelectChangeEvent } from '@mui/material';
-import React from 'react';
-import { SelectEx } from './SelectEx';
+import { DataTypes, IdDefaultType, LabelDefaultType } from "@etsoo/shared";
+import { FormLabel, Grid, SelectChangeEvent } from "@mui/material";
+import React from "react";
+import { SelectEx } from "./SelectEx";
 
 /**
  * Hierarchy selector props
  */
 export type HiSelectorProps<
-    T extends object,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>,
-    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+  T extends object,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>,
+  L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
 > = {
-    /**
-     * Id field
-     */
-    idField?: D;
-
-    /**
-     * Error
-     */
-    error?: boolean;
-
-    /**
-     * The helper text content.
-     */
-    helperText?: React.ReactNode;
-
-    /**
-     * Name, also hidden input field name
-     */
-    name: string;
-
-    /**
-     * Label
-     */
-    label?: string;
-
-    /**
-     * Label field
-     */
-    labelField?: L;
-
-    /**
-     * Load data callback
-     */
-    loadData: (parent?: T[D]) => PromiseLike<T[] | null | undefined>;
-
-    /**
-     * On value change event
-     */
-    onChange?: (value: unknown) => void;
-
-    /**
-     * On select change event
-     */
-    onSelectChange?: (e: SelectChangeEvent<unknown>) => void;
-
-    /**
-     * Item change callback
-     */
-    onItemChange?: (option: T | undefined, userAction: boolean) => void;
-
-    /**
-     * Required
-     */
-    required?: boolean;
-
-    /**
-     * Values
-     */
-    values?: T[D][];
+  /**
+   * Id field
+   */
+  idField?: D;
+
+  /**
+   * Error
+   */
+  error?: boolean;
+
+  /**
+   * The helper text content.
+   */
+  helperText?: React.ReactNode;
+
+  /**
+   * Name, also hidden input field name
+   */
+  name: string;
+
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * Label field
+   */
+  labelField?: L;
+
+  /**
+   * Load data callback
+   */
+  loadData: (parent?: T[D]) => PromiseLike<T[] | null | undefined>;
+
+  /**
+   * On value change event
+   */
+  onChange?: (value: unknown) => void;
+
+  /**
+   * On select change event
+   */
+  onSelectChange?: (e: SelectChangeEvent<unknown>) => void;
+
+  /**
+   * Item change callback
+   */
+  onItemChange?: (option: T | undefined, userAction: boolean) => void;
+
+  /**
+   * Required
+   */
+  required?: boolean;
+
+  /**
+   * Search mode
+   */
+  search?: boolean;
+
+  /**
+   * Values
+   */
+  values?: T[D][];
 };
 
 /**
@@ -78,144 +83,138 @@ export type HiSelectorProps<
  * @returns Component
  */
 export function HiSelector<
-    T extends object,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>,
-    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+  T extends object,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>,
+  L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
 >(props: HiSelectorProps<T, D, L>) {
-    // Destruct
-    const {
-        idField = 'id' as D,
-        error,
-        helperText,
-        name,
-        label = name,
-        labelField = 'name' as L,
-        loadData,
-        onChange,
-        onSelectChange,
-        onItemChange,
-        required,
-        values = []
-    } = props;
-
-    // Value type
-    type ValueType = T[D];
-    const [localValues, setValues] = React.useState<ValueType[]>(values);
-
-    const updateValue = (value?: T[D]) => {
-        if (onChange) onChange(value);
-    };
-
-    const doChange = (event: SelectChangeEvent<unknown>, index: number) => {
-        const value = event.target.value;
-        const itemValue = value === '' ? undefined : (value as T[D]);
-        updateValue(itemValue);
-
-        const newValues = [...localValues.slice(0, index)];
-        if (itemValue != null) newValues.push(itemValue);
-        setValues(newValues);
-
-        if (onSelectChange) onSelectChange(event);
-    };
-
-    const doItemChange = (option: T | undefined, userAction: boolean) => {
-        if (onItemChange == null) return;
-        if (
-            !userAction &&
-            (option == null || option[idField] !== values.at(-1))
-        )
-            return;
-        onItemChange(option, userAction);
-    };
-
-    React.useEffect(() => {
-        if (values.length > 0) {
-            setValues(values);
-            updateValue(values.at(-1));
-        }
-    }, [values]);
-
-    const currentValue = localValues.at(-1);
-
-    return (
-        <React.Fragment>
-            <Grid item xs={12}>
-                <FormLabel
-                    required={required}
-                    sx={{ fontSize: (theme) => theme.typography.caption }}
-                >
-                    {label}
-                </FormLabel>
-                <input
-                    type="hidden"
-                    name={name}
-                    value={`${currentValue ?? ''}`}
-                />
-            </Grid>
-            <Grid item xs={6} md={4} lg={3}>
-                <SelectEx<T, D, L>
-                    idField={idField}
-                    labelField={labelField}
-                    name="tab1"
-                    search
-                    fullWidth
-                    loadData={() => loadData()}
-                    value={values[0]}
-                    onChange={(event) => doChange(event, 0)}
-                    onItemChange={doItemChange}
-                    inputRequired={required}
-                    error={error}
-                    helperText={helperText}
-                />
-            </Grid>
-            {localValues[0] != null && (
-                <Grid item xs={6} md={4} lg={3}>
-                    <SelectEx<T, D, L>
-                        key={`${localValues[0]}`}
-                        idField={idField}
-                        labelField={labelField}
-                        name="tab2"
-                        search
-                        fullWidth
-                        loadData={() => loadData(localValues[0])}
-                        value={values[1]}
-                        onChange={(event) => doChange(event, 1)}
-                        onItemChange={doItemChange}
-                    />
-                </Grid>
-            )}
-            {localValues[1] != null && (
-                <Grid item xs={6} md={4} lg={3}>
-                    <SelectEx<T, D, L>
-                        key={`${localValues[1]}`}
-                        idField={idField}
-                        labelField={labelField}
-                        name="tab3"
-                        search
-                        fullWidth
-                        loadData={() => loadData(localValues[1])}
-                        value={values[2]}
-                        onChange={(event) => doChange(event, 2)}
-                        onItemChange={doItemChange}
-                    />
-                </Grid>
-            )}
-            {localValues[2] != null && (
-                <Grid item xs={6} md={4} lg={3}>
-                    <SelectEx<T, D, L>
-                        key={`${localValues[2]}`}
-                        idField={idField}
-                        labelField={labelField}
-                        name="tab4"
-                        search
-                        fullWidth
-                        loadData={() => loadData(localValues[2])}
-                        value={values[3]}
-                        onChange={(event) => doChange(event, 3)}
-                        onItemChange={doItemChange}
-                    />
-                </Grid>
-            )}
-        </React.Fragment>
-    );
+  // Destruct
+  const {
+    idField = "id" as D,
+    error,
+    helperText,
+    name,
+    label = name,
+    labelField = "name" as L,
+    loadData,
+    onChange,
+    onSelectChange,
+    onItemChange,
+    required,
+    search = true,
+    values = []
+  } = props;
+
+  // Value type
+  type ValueType = T[D];
+  const [localValues, setValues] = React.useState<ValueType[]>(values);
+
+  const updateValue = (value?: T[D]) => {
+    if (onChange) onChange(value);
+  };
+
+  const doChange = (event: SelectChangeEvent<unknown>, index: number) => {
+    const value = event.target.value;
+    const itemValue = value === "" ? undefined : (value as T[D]);
+    updateValue(itemValue);
+
+    const newValues = [...localValues.slice(0, index)];
+    if (itemValue != null) newValues.push(itemValue);
+    setValues(newValues);
+
+    if (onSelectChange) onSelectChange(event);
+  };
+
+  const doItemChange = (option: T | undefined, userAction: boolean) => {
+    if (onItemChange == null) return;
+    if (!userAction && (option == null || option[idField] !== values.at(-1)))
+      return;
+    onItemChange(option, userAction);
+  };
+
+  React.useEffect(() => {
+    if (values.length > 0) {
+      setValues(values);
+      updateValue(values.at(-1));
+    }
+  }, [values]);
+
+  const currentValue = localValues.at(-1);
+
+  return (
+    <React.Fragment>
+      <Grid item xs={12}>
+        <FormLabel
+          required={required}
+          sx={{ fontSize: (theme) => theme.typography.caption }}
+        >
+          {label}
+        </FormLabel>
+        <input type="hidden" name={name} value={`${currentValue ?? ""}`} />
+      </Grid>
+      <Grid item xs={6} md={4} lg={3}>
+        <SelectEx<T, D, L>
+          idField={idField}
+          labelField={labelField}
+          name="tab1"
+          search={search}
+          fullWidth
+          loadData={() => loadData()}
+          value={values[0]}
+          onChange={(event) => doChange(event, 0)}
+          onItemChange={doItemChange}
+          inputRequired={required}
+          error={error}
+          helperText={helperText}
+        />
+      </Grid>
+      {localValues[0] != null && (
+        <Grid item xs={6} md={4} lg={3}>
+          <SelectEx<T, D, L>
+            key={`${localValues[0]}`}
+            idField={idField}
+            labelField={labelField}
+            name="tab2"
+            search={search}
+            fullWidth
+            loadData={() => loadData(localValues[0])}
+            value={values[1]}
+            onChange={(event) => doChange(event, 1)}
+            onItemChange={doItemChange}
+          />
+        </Grid>
+      )}
+      {localValues[1] != null && (
+        <Grid item xs={6} md={4} lg={3}>
+          <SelectEx<T, D, L>
+            key={`${localValues[1]}`}
+            idField={idField}
+            labelField={labelField}
+            name="tab3"
+            search={search}
+            fullWidth
+            loadData={() => loadData(localValues[1])}
+            value={values[2]}
+            onChange={(event) => doChange(event, 2)}
+            onItemChange={doItemChange}
+          />
+        </Grid>
+      )}
+      {localValues[2] != null && (
+        <Grid item xs={6} md={4} lg={3}>
+          <SelectEx<T, D, L>
+            key={`${localValues[2]}`}
+            idField={idField}
+            labelField={labelField}
+            name="tab4"
+            search={search}
+            fullWidth
+            loadData={() => loadData(localValues[2])}
+            value={values[3]}
+            onChange={(event) => doChange(event, 3)}
+            onItemChange={doItemChange}
+          />
+        </Grid>
+      )}
+    </React.Fragment>
+  );
 }

package/src/HiSelectorTL.tsx

@@ -0,0 +1,228 @@
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import {
+  AutocompleteChangeReason,
+  AutocompleteValue,
+  FormLabel,
+  Grid
+} from "@mui/material";
+import React from "react";
+import { Tiplist } from "./Tiplist";
+
+/**
+ * Hierarchy tiplist selector props
+ */
+export type HiSelectorTLProps<
+  T extends object,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>
+> = {
+  /**
+   * Id field
+   */
+  idField?: D;
+
+  /**
+   * Error
+   */
+  error?: boolean;
+
+  /**
+   * The helper text content.
+   */
+  helperText?: React.ReactNode;
+
+  /**
+   * Name, also hidden input field name
+   */
+  name: string;
+
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * Load data callback
+   */
+  loadData: (
+    keyword: string | undefined,
+    id: T[D] | undefined,
+    maxItems: number,
+    parent?: T[D]
+  ) => PromiseLike<T[] | null | undefined>;
+
+  /**
+   * On value change event
+   */
+  onChange?: (value: unknown) => void;
+
+  /**
+   * Item change callback
+   */
+  onItemChange?: (
+    event: React.SyntheticEvent,
+    option: T | null,
+    reason: AutocompleteChangeReason
+  ) => void;
+
+  /**
+   * Required
+   */
+  required?: boolean;
+
+  /**
+   * Search mode
+   */
+  search?: boolean;
+
+  /**
+   * Values
+   */
+  values?: T[D][];
+};
+
+/**
+ * Hierarchy tiplist selector
+ * @param props Prop
+ * @returns Component
+ */
+export function HiSelectorTL<
+  T extends object,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>
+>(props: HiSelectorTLProps<T, D>) {
+  // Destruct
+  const {
+    idField = "id" as D,
+    error,
+    helperText,
+    name,
+    label = name,
+    loadData,
+    onChange,
+    onItemChange,
+    required,
+    search = false,
+    values = []
+  } = props;
+
+  // Value type
+  type ValueType = T[D];
+  const [localValues, setValues] = React.useState<ValueType[]>(values);
+
+  const updateValue = (value?: T[D]) => {
+    if (onChange) onChange(value);
+  };
+
+  const doChange = (
+    index: number,
+    event: React.SyntheticEvent,
+    value: AutocompleteValue<T, false, false, false>,
+    reason: AutocompleteChangeReason
+  ) => {
+    if (onItemChange) {
+      onItemChange(event, value, reason);
+      if (event.isDefaultPrevented()) return;
+    }
+
+    const itemValue = value ? value[idField] : undefined;
+    updateValue(itemValue);
+
+    const newValues = [...localValues.slice(0, index)];
+    if (itemValue != null) newValues.push(itemValue);
+    setValues(newValues);
+  };
+
+  React.useEffect(() => {
+    if (values.length > 0) {
+      setValues(values);
+      updateValue(values.at(-1));
+    }
+  }, [values.toString()]);
+
+  const currentValue = localValues.at(-1);
+
+  return (
+    <React.Fragment>
+      <Grid item xs={12}>
+        <FormLabel
+          required={required}
+          sx={{ fontSize: (theme) => theme.typography.caption }}
+        >
+          {label}
+        </FormLabel>
+        <input type="hidden" name={name} value={`${currentValue ?? ""}`} />
+      </Grid>
+      <Grid item xs={6} md={4} lg={3}>
+        <Tiplist<T, D>
+          idField={idField}
+          label="1"
+          name="tab1"
+          search={search}
+          fullWidth
+          idValue={values[0]}
+          loadData={(keyword, id, items) => loadData(keyword, id, items)}
+          inputRequired={required}
+          inputError={error}
+          inputHelperText={helperText}
+          onChange={(event, value, reason) => doChange(0, event, value, reason)}
+        />
+      </Grid>
+      {localValues[0] != null && (
+        <Grid item xs={6} md={4} lg={3}>
+          <Tiplist<T, D>
+            key={`${localValues[0]}`}
+            label="2"
+            idField={idField}
+            name="tab2"
+            search={search}
+            fullWidth
+            loadData={(keyword, id, items) =>
+              loadData(keyword, id, items, localValues[0])
+            }
+            idValue={values[1]}
+            onChange={(event, value, reason) =>
+              doChange(1, event, value, reason)
+            }
+          />
+        </Grid>
+      )}
+      {localValues[1] != null && (
+        <Grid item xs={6} md={4} lg={3}>
+          <Tiplist<T, D>
+            key={`${localValues[1]}`}
+            label="3"
+            idField={idField}
+            name="tab3"
+            search={search}
+            fullWidth
+            loadData={(keyword, id, items) =>
+              loadData(keyword, id, items, localValues[1])
+            }
+            idValue={values[2]}
+            onChange={(event, value, reason) =>
+              doChange(2, event, value, reason)
+            }
+          />
+        </Grid>
+      )}
+      {localValues[2] != null && (
+        <Grid item xs={6} md={4} lg={3}>
+          <Tiplist<T, D>
+            key={`${localValues[2]}`}
+            label="4"
+            idField={idField}
+            name="tab4"
+            search={search}
+            fullWidth
+            loadData={(keyword, id, items) =>
+              loadData(keyword, id, items, localValues[2])
+            }
+            idValue={values[3]}
+            onChange={(event, value, reason) =>
+              doChange(3, event, value, reason)
+            }
+          />
+        </Grid>
+      )}
+    </React.Fragment>
+  );
+}

package/src/Tiplist.tsx

@@ -317,6 +317,7 @@ export function Tiplist<
           return getOptionDisabled ? getOptionDisabled(item) : false;
         }}
         getOptionLabel={(item) => {
+          if (typeof item !== "object") return `${item}`;
           if (item[idField] === "n/a") return (labels.more ?? "More") + "...";
           return getOptionLabel
             ? getOptionLabel(item)

package/src/index.ts

@@ -49,6 +49,7 @@ export * from "./FabBox";
 export * from "./FlexBox";
 export * from "./GridDataFormat";
 export * from "./HiSelector";
+export * from "./HiSelectorTL";
 export * from "./IconButtonLink";
 export * from "./InputField";
 export * from "./ItemList";