@etsoo/materialui 1.1.30 → 1.1.31

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/Tiplist.js

@@ -161,20 +161,16 @@ 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") + "...";
-                try {
-                    return getOptionLabel
-                        ? getOptionLabel(item)
-                        : "label" in item
-                            ? `${item.label}`
-                            : "name" in item
-                                ? `${item.name}`
-                                : `${item}`;
-                }
-                catch (e) {
-                    console.log(typeof item, item, e);
-                    return "";
-                }
+                return getOptionLabel
+                    ? getOptionLabel(item)
+                    : "label" in item
+                        ? `${item.label}`
+                        : "name" in item
+                            ? `${item.name}`
+                            : `${item}`;
             }, ...rest })));
 }

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.30",
+  "version": "1.1.31",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

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,19 +317,15 @@ 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") + "...";
-          try {
-            return getOptionLabel
-              ? getOptionLabel(item)
-              : "label" in item
-              ? `${item.label}`
-              : "name" in item
-              ? `${item.name}`
-              : `${item}`;
-          } catch (e) {
-            console.log(typeof item, item, e);
-            return "";
-          }
+          return getOptionLabel
+            ? getOptionLabel(item)
+            : "label" in item
+            ? `${item.label}`
+            : "name" in item
+            ? `${item.name}`
+            : `${item}`;
         }}
         {...rest}
       />

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";