@etsoo/materialui 1.1.80 → 1.1.82

package/lib/ComboBoxPro.d.ts

@@ -1,14 +1,8 @@
 /// <reference types="react" />
 import { AutocompleteProps } from "@mui/material";
 import { InputFieldProps } from "./InputField";
-type DataType = {
-    id: number | string;
-} & ({
-    label: string;
-} | {
-    name: string;
-});
-export type ComboBoxProProps<D extends DataType = DataType> = Omit<AutocompleteProps<D, false, false, true>, "open" | "multiple" | "options" | "renderInput"> & {
+import { ListType2 } from "@etsoo/shared";
+export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<AutocompleteProps<D, false, false, true>, "open" | "multiple" | "options" | "renderInput"> & {
     /**
      * Label
      */
@@ -30,5 +24,4 @@ export type ComboBoxProProps<D extends DataType = DataType> = Omit<AutocompleteP
      */
     inputProps?: Omit<InputFieldProps, "onChange">;
 };
-export declare function ComboBoxPro<D extends DataType = DataType>(props: ComboBoxProProps<D>): JSX.Element;
-export {};
+export declare function ComboBoxPro<D extends ListType2 = ListType2>(props: ComboBoxProProps<D>): JSX.Element;

package/lib/IntInputField.d.ts

@@ -4,8 +4,52 @@ import { InputFieldProps } from "./InputField";
 /**
  * Integer input field props
  */
-export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps"> & InputBaseProps["inputProps"];
+export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps" | "value"> & InputBaseProps["inputProps"] & {
+    /**
+     * Display minus and plus buttons
+     */
+    buttons?: boolean;
+    /**
+     * End symbol
+     */
+    endSymbol?: string;
+    /**
+     * Start (Currency) symbol
+     */
+    symbol?: string;
+    /**
+     * Value
+     */
+    value?: number;
+    /**
+     * On value change callback
+     * @param value Value
+     */
+    onValueChange?: (value: number | undefined, init: boolean) => void;
+};
 /**
  * Integer input field
  */
-export declare const IntInputField: React.ForwardRefExoticComponent<Omit<Omit<InputFieldProps, "type" | "inputProps"> & import("@mui/material").InputBaseComponentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const IntInputField: React.ForwardRefExoticComponent<Omit<Omit<InputFieldProps, "type" | "value" | "inputProps"> & import("@mui/material").InputBaseComponentProps & {
+    /**
+     * Display minus and plus buttons
+     */
+    buttons?: boolean | undefined;
+    /**
+     * End symbol
+     */
+    endSymbol?: string | undefined;
+    /**
+     * Start (Currency) symbol
+     */
+    symbol?: string | undefined;
+    /**
+     * Value
+     */
+    value?: number | undefined;
+    /**
+     * On value change callback
+     * @param value Value
+     */
+    onValueChange?: ((value: number | undefined, init: boolean) => void) | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/IntInputField.js

@@ -1,3 +1,6 @@
+import { Box, IconButton, InputAdornment } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
 import React from "react";
 import { InputField } from "./InputField";
 /**
@@ -5,7 +8,82 @@ import { InputField } from "./InputField";
  */
 export const IntInputField = React.forwardRef((props, ref) => {
     // Destruct
-    const { min = 0, step = 1, max = 9999999, ...rest } = props;
+    const { min = 0, step = 1, max = 9999999, style = { textAlign: "right" }, buttons, endSymbol, symbol, value, defaultValue, onChange, onValueChange, ...rest } = props;
+    // State
+    const [localValue, setLocalValue] = React.useState();
+    const setValue = (value, init = false) => {
+        setLocalValue(value);
+        if (onValueChange)
+            onValueChange(value, init);
+    };
+    React.useEffect(() => {
+        setValue(value, true);
+    }, [value]);
+    React.useEffect(() => {
+        if (defaultValue == null || typeof defaultValue === "object")
+            return;
+        const value = typeof defaultValue === "number"
+            ? defaultValue
+            : parseFloat(defaultValue);
+        if (!isNaN(value))
+            setValue(value, true);
+    }, [defaultValue]);
     // Layout
-    return (React.createElement(InputField, { ref: ref, type: "number", inputProps: { min, step, max, inputMode: "numeric" }, ...rest }));
+    const layout = (React.createElement(InputField, { ref: ref, type: "number", value: localValue == null ? "" : localValue, inputProps: {
+            min,
+            step,
+            max,
+            style,
+            inputMode: "numeric"
+        }, InputProps: {
+            startAdornment: symbol ? (React.createElement(React.Fragment, null,
+                React.createElement(InputAdornment, { position: "start" }, symbol))) : undefined,
+            endAdornment: endSymbol ? (React.createElement(InputAdornment, { position: "end" }, endSymbol)) : undefined
+        }, sx: {
+            "& input[type=number]::-webkit-inner-spin-button": {
+                WebkitAppearance: "none",
+                margin: 0
+            },
+            "& input[type=number]::-webkit-outer-spin-button": {
+                WebkitAppearance: "none",
+                margin: 0
+            }
+        }, onChange: (event) => {
+            const value = parseFloat(event.target.value);
+            if (isNaN(value))
+                setValue(undefined);
+            else if (value > max)
+                setValue(max);
+            else if (value < min)
+                setValue(min);
+            else
+                setValue(value);
+            if (onChange)
+                onChange(event);
+        }, ...rest }));
+    if (buttons)
+        return (React.createElement(Box, { sx: { display: "flex", alignItems: "flex-end", gap: 0.5 } },
+            React.createElement(IconButton, { size: "small", onClick: () => {
+                    if (localValue == null)
+                        return;
+                    if (localValue <= min)
+                        setValue(undefined);
+                    else
+                        setValue(localValue - step);
+                } },
+                React.createElement(RemoveIcon, null)),
+            layout,
+            React.createElement(IconButton, { size: "small", onClick: () => {
+                    if (localValue == null) {
+                        setValue(min);
+                        return;
+                    }
+                    if (localValue >= max)
+                        return;
+                    else
+                        setValue(localValue + step);
+                } },
+                React.createElement(AddIcon, { color: localValue == null ? undefined : "primary" }))));
+    else
+        return layout;
 });

package/lib/MoneyInputField.d.ts

@@ -1,11 +1,10 @@
-import { InputBaseProps } from "@mui/material";
 import React from "react";
-import { InputFieldProps } from "./InputField";
+import { IntInputFieldProps } from "./IntInputField";
 /**
  * Money input field props
  */
-export type MoneyInputFieldProps = Omit<InputFieldProps, "type" | "inputProps"> & InputBaseProps["inputProps"];
+export type MoneyInputFieldProps = IntInputFieldProps & {};
 /**
  * Money input field
  */
-export declare const MoneyInputField: React.ForwardRefExoticComponent<Omit<Omit<InputFieldProps, "type" | "inputProps"> & import("@mui/material").InputBaseComponentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MoneyInputField: React.ForwardRefExoticComponent<Omit<MoneyInputFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/MoneyInputField.js

@@ -1,11 +1,11 @@
 import React from "react";
-import { InputField } from "./InputField";
+import { IntInputField } from "./IntInputField";
 /**
  * Money input field
  */
 export const MoneyInputField = React.forwardRef((props, ref) => {
     // Destruct
-    const { min = 0, step = 0.01, max = 9999999, ...rest } = props;
+    const { step = 0.01, ...rest } = props;
     // Layout
-    return (React.createElement(InputField, { ref: ref, type: "number", inputProps: { min, step, max, inputMode: "numeric" }, ...rest }));
+    return React.createElement(IntInputField, { ref: ref, step: step, ...rest });
 });

package/lib/QuickList.d.ts

@@ -0,0 +1,56 @@
+import { ListType2 } from "@etsoo/shared";
+import { ListItemButtonProps, ListItemProps, StackProps } from "@mui/material";
+import React from "react";
+import { InputFieldProps } from "./InputField";
+/**
+ * Quick list props
+ */
+export type QuickListProps<T extends ListType2 = ListType2> = StackProps & {
+    /**
+     * Button props
+     */
+    buttonProps?: ListItemButtonProps;
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * No matches label
+     */
+    noMatchesLabel?: string;
+    /**
+     * Input field props
+     */
+    inputProps?: Omit<InputFieldProps, "onChangeDelay">;
+    /**
+     * Get item label
+     * @param item Current item
+     * @returns Item label
+     */
+    itemLabel?: (item: T) => string;
+    /**
+     * Item renderer
+     * @param item Current item
+     * @returns UI
+     */
+    itemRenderer?: (item: T) => React.ReactNode;
+    /**
+     * List item props
+     */
+    itemProps?: ListItemProps;
+    /**
+     * Load data callback
+     */
+    loadData: (keyword: string | undefined) => PromiseLike<T[] | undefined>;
+    /**
+     * On item click
+     * @param item Clicked item
+     */
+    onItemClick?: (item: T) => void;
+};
+/**
+ * Quick list
+ * @param props Props
+ * @returns Component
+ */
+export declare function QuickList<T extends ListType2 = ListType2>(props: QuickListProps<T>): JSX.Element;

package/lib/QuickList.js

@@ -0,0 +1,43 @@
+import { LinearProgress, List, ListItem, ListItemButton, Typography } from "@mui/material";
+import React from "react";
+import { InputField } from "./InputField";
+import { globalApp } from "./app/ReactApp";
+import { VBox } from "./FlexBox";
+/**
+ * Quick list
+ * @param props Props
+ * @returns Component
+ */
+export function QuickList(props) {
+    // Destruct
+    const { buttonProps = {}, label, inputProps, itemLabel = (item) => ("label" in item ? item.label : item.name), itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
+    const { onClick, ...buttonRest } = buttonProps;
+    // States
+    const [loading, setLoading] = React.useState(false);
+    const [items, setItems] = React.useState([]);
+    const loadDataLocal = (keyword) => {
+        setLoading(true);
+        loadData(keyword).then((result) => {
+            setLoading(false);
+            setItems(result !== null && result !== void 0 ? result : []);
+        });
+    };
+    React.useEffect(() => {
+        loadDataLocal();
+    }, []);
+    // Layout
+    return (React.createElement(VBox, { gap: gap, height: height, ...rest },
+        React.createElement(InputField, { label: label, changeDelay: 480, onChangeDelay: (event) => {
+                // Stop bubble
+                event.preventDefault();
+                event.stopPropagation();
+                loadDataLocal(event.target.value);
+            }, fullWidth: true, ...inputProps }),
+        loading ? (React.createElement(LinearProgress, null)) : items.length === 0 ? (React.createElement(Typography, { textAlign: "center" }, noMatchesLabel)) : (React.createElement(List, null, items.map((item) => (React.createElement(ListItem, { key: item.id, disablePadding: true, ...itemProps },
+            React.createElement(ListItemButton, { onClick: (event) => {
+                    if (onClick)
+                        onClick(event);
+                    if (!event.defaultPrevented && onItemClick)
+                        onItemClick(item);
+                }, ...buttonRest }, itemRenderer(item)))))))));
+}

package/lib/TagListPro.d.ts

@@ -1,14 +1,8 @@
 /// <reference types="react" />
 import { AutocompleteProps } from "@mui/material";
 import { InputFieldProps } from "./InputField";
-type DataType = {
-    id: number | string;
-} & ({
-    label: string;
-} | {
-    name: string;
-});
-export type TagListProProps<D extends DataType = DataType> = Omit<AutocompleteProps<D, true, false, false>, "open" | "multiple" | "options" | "renderInput"> & {
+import { ListType2 } from "@etsoo/shared";
+export type TagListProProps<D extends ListType2 = ListType2> = Omit<AutocompleteProps<D, true, false, false>, "open" | "multiple" | "options" | "renderInput"> & {
     /**
      * Label
      */
@@ -26,5 +20,4 @@ export type TagListProProps<D extends DataType = DataType> = Omit<AutocompletePr
      */
     maxItems?: number;
 };
-export declare function TagListPro<D extends DataType = DataType>(props: TagListProProps<D>): JSX.Element;
-export {};
+export declare function TagListPro<D extends ListType2 = ListType2>(props: TagListProProps<D>): JSX.Element;

package/lib/index.d.ts

@@ -71,6 +71,7 @@ export * from "./OptionGroup";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";
+export * from "./QuickList";
 export * from "./ResponsibleContainer";
 export * from "./ScrollerListEx";
 export * from "./ScrollTopFab";

package/lib/index.js

@@ -71,6 +71,7 @@ export * from "./OptionGroup";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";
+export * from "./QuickList";
 export * from "./ResponsibleContainer";
 export * from "./ScrollerListEx";
 export * from "./ScrollTopFab";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.80",
+  "version": "1.1.82",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,13 +50,13 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.85",
+    "@etsoo/appscript": "^1.3.86",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.56",
-    "@etsoo/shared": "^1.1.94",
+    "@etsoo/react": "^1.6.57",
+    "@etsoo/shared": "^1.1.95",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.15",
-    "@mui/x-data-grid": "^6.0.3",
+    "@mui/x-data-grid": "^6.0.4",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.31",
@@ -89,6 +89,6 @@
     "@typescript-eslint/parser": "^5.57.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.3"
   }
 }

package/src/ComboBoxPro.tsx

@@ -2,12 +2,9 @@ import { Autocomplete, AutocompleteProps } from "@mui/material";
 import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { InputField, InputFieldProps } from "./InputField";
+import { ListType2 } from "@etsoo/shared";
 
-type DataType = {
-  id: number | string;
-} & ({ label: string } | { name: string });
-
-export type ComboBoxProProps<D extends DataType = DataType> = Omit<
+export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, false, false, true>,
   "open" | "multiple" | "options" | "renderInput"
 > & {
@@ -37,7 +34,7 @@ export type ComboBoxProProps<D extends DataType = DataType> = Omit<
   inputProps?: Omit<InputFieldProps, "onChange">;
 };
 
-export function ComboBoxPro<D extends DataType = DataType>(
+export function ComboBoxPro<D extends ListType2 = ListType2>(
   props: ComboBoxProProps<D>
 ) {
   // Labels

package/src/IntInputField.tsx

@@ -1,12 +1,43 @@
-import { InputBaseProps } from "@mui/material";
+import { Box, IconButton, InputAdornment, InputBaseProps } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 
 /**
  * Integer input field props
  */
-export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps"> &
-  InputBaseProps["inputProps"];
+export type IntInputFieldProps = Omit<
+  InputFieldProps,
+  "type" | "inputProps" | "value"
+> &
+  InputBaseProps["inputProps"] & {
+    /**
+     * Display minus and plus buttons
+     */
+    buttons?: boolean;
+
+    /**
+     * End symbol
+     */
+    endSymbol?: string;
+
+    /**
+     * Start (Currency) symbol
+     */
+    symbol?: string;
+
+    /**
+     * Value
+     */
+    value?: number;
+
+    /**
+     * On value change callback
+     * @param value Value
+     */
+    onValueChange?: (value: number | undefined, init: boolean) => void;
+  };
 
 /**
  * Integer input field
@@ -16,15 +47,115 @@ export const IntInputField = React.forwardRef<
   IntInputFieldProps
 >((props, ref) => {
   // Destruct
-  const { min = 0, step = 1, max = 9999999, ...rest } = props;
+  const {
+    min = 0,
+    step = 1,
+    max = 9999999,
+    style = { textAlign: "right" },
+    buttons,
+    endSymbol,
+    symbol,
+    value,
+    defaultValue,
+    onChange,
+    onValueChange,
+    ...rest
+  } = props;
+
+  // State
+  const [localValue, setLocalValue] = React.useState<number>();
+
+  const setValue = (value: number | undefined, init: boolean = false) => {
+    setLocalValue(value);
+    if (onValueChange) onValueChange(value, init);
+  };
+
+  React.useEffect(() => {
+    setValue(value, true);
+  }, [value]);
+
+  React.useEffect(() => {
+    if (defaultValue == null || typeof defaultValue === "object") return;
+    const value =
+      typeof defaultValue === "number"
+        ? defaultValue
+        : parseFloat(defaultValue);
+    if (!isNaN(value)) setValue(value, true);
+  }, [defaultValue]);
 
   // Layout
-  return (
+  const layout = (
     <InputField
       ref={ref}
       type="number"
-      inputProps={{ min, step, max, inputMode: "numeric" }}
+      value={localValue == null ? "" : localValue}
+      inputProps={{
+        min,
+        step,
+        max,
+        style,
+        inputMode: "numeric"
+      }}
+      InputProps={{
+        startAdornment: symbol ? (
+          <React.Fragment>
+            <InputAdornment position="start">{symbol}</InputAdornment>
+          </React.Fragment>
+        ) : undefined,
+        endAdornment: endSymbol ? (
+          <InputAdornment position="end">{endSymbol}</InputAdornment>
+        ) : undefined
+      }}
+      sx={{
+        "& input[type=number]::-webkit-inner-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        },
+        "& input[type=number]::-webkit-outer-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        }
+      }}
+      onChange={(event) => {
+        const value = parseFloat(event.target.value);
+        if (isNaN(value)) setValue(undefined);
+        else if (value > max) setValue(max);
+        else if (value < min) setValue(min);
+        else setValue(value);
+        if (onChange) onChange(event);
+      }}
       {...rest}
     />
   );
+
+  if (buttons)
+    return (
+      <Box sx={{ display: "flex", alignItems: "flex-end", gap: 0.5 }}>
+        <IconButton
+          size="small"
+          onClick={() => {
+            if (localValue == null) return;
+            if (localValue <= min) setValue(undefined);
+            else setValue(localValue - step);
+          }}
+        >
+          <RemoveIcon />
+        </IconButton>
+        {layout}
+        <IconButton
+          size="small"
+          onClick={() => {
+            if (localValue == null) {
+              setValue(min);
+              return;
+            }
+            if (localValue >= max) return;
+            else setValue(localValue + step);
+          }}
+        >
+          <AddIcon color={localValue == null ? undefined : "primary"} />
+        </IconButton>
+      </Box>
+    );
+  else return layout;
 });

package/src/MoneyInputField.tsx

@@ -1,15 +1,10 @@
-import { InputBaseProps } from "@mui/material";
 import React from "react";
-import { InputField, InputFieldProps } from "./InputField";
+import { IntInputField, IntInputFieldProps } from "./IntInputField";
 
 /**
  * Money input field props
  */
-export type MoneyInputFieldProps = Omit<
-  InputFieldProps,
-  "type" | "inputProps"
-> &
-  InputBaseProps["inputProps"];
+export type MoneyInputFieldProps = IntInputFieldProps & {};
 
 /**
  * Money input field
@@ -19,15 +14,8 @@ export const MoneyInputField = React.forwardRef<
   MoneyInputFieldProps
 >((props, ref) => {
   // Destruct
-  const { min = 0, step = 0.01, max = 9999999, ...rest } = props;
+  const { step = 0.01, ...rest } = props;
 
   // Layout
-  return (
-    <InputField
-      ref={ref}
-      type="number"
-      inputProps={{ min, step, max, inputMode: "numeric" }}
-      {...rest}
-    />
-  );
+  return <IntInputField ref={ref} step={step} {...rest} />;
 });

package/src/QuickList.tsx

@@ -0,0 +1,153 @@
+import { ListType2 } from "@etsoo/shared";
+import {
+  LinearProgress,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemButtonProps,
+  ListItemProps,
+  StackProps,
+  Typography
+} from "@mui/material";
+import React from "react";
+import { InputField, InputFieldProps } from "./InputField";
+import { globalApp } from "./app/ReactApp";
+import { VBox } from "./FlexBox";
+
+/**
+ * Quick list props
+ */
+export type QuickListProps<T extends ListType2 = ListType2> = StackProps & {
+  /**
+   * Button props
+   */
+  buttonProps?: ListItemButtonProps;
+
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * No matches label
+   */
+  noMatchesLabel?: string;
+
+  /**
+   * Input field props
+   */
+  inputProps?: Omit<InputFieldProps, "onChangeDelay">;
+
+  /**
+   * Get item label
+   * @param item Current item
+   * @returns Item label
+   */
+  itemLabel?: (item: T) => string;
+
+  /**
+   * Item renderer
+   * @param item Current item
+   * @returns UI
+   */
+  itemRenderer?: (item: T) => React.ReactNode;
+
+  /**
+   * List item props
+   */
+  itemProps?: ListItemProps;
+
+  /**
+   * Load data callback
+   */
+  loadData: (keyword: string | undefined) => PromiseLike<T[] | undefined>;
+
+  /**
+   * On item click
+   * @param item Clicked item
+   */
+  onItemClick?: (item: T) => void;
+};
+
+/**
+ * Quick list
+ * @param props Props
+ * @returns Component
+ */
+export function QuickList<T extends ListType2 = ListType2>(
+  props: QuickListProps<T>
+) {
+  // Destruct
+  const {
+    buttonProps = {},
+    label,
+    inputProps,
+    itemLabel = (item: T) => ("label" in item ? item.label : item.name),
+    itemRenderer = (item: T) => itemLabel(item),
+    itemProps,
+    loadData,
+    noMatchesLabel = globalApp?.get("noMatches"),
+    gap = 1,
+    height = "480px",
+    onItemClick,
+    ...rest
+  } = props;
+
+  const { onClick, ...buttonRest } = buttonProps;
+
+  // States
+  const [loading, setLoading] = React.useState(false);
+  const [items, setItems] = React.useState<T[]>([]);
+
+  const loadDataLocal = (keyword?: string) => {
+    setLoading(true);
+
+    loadData(keyword).then((result) => {
+      setLoading(false);
+      setItems(result ?? []);
+    });
+  };
+
+  React.useEffect(() => {
+    loadDataLocal();
+  }, []);
+
+  // Layout
+  return (
+    <VBox gap={gap} height={height} {...rest}>
+      <InputField
+        label={label}
+        changeDelay={480}
+        onChangeDelay={(event) => {
+          // Stop bubble
+          event.preventDefault();
+          event.stopPropagation();
+          loadDataLocal(event.target.value);
+        }}
+        fullWidth
+        {...inputProps}
+      />
+      {loading ? (
+        <LinearProgress />
+      ) : items.length === 0 ? (
+        <Typography textAlign="center">{noMatchesLabel}</Typography>
+      ) : (
+        <List>
+          {items.map((item) => (
+            <ListItem key={item.id} disablePadding {...itemProps}>
+              <ListItemButton
+                onClick={(event) => {
+                  if (onClick) onClick(event);
+                  if (!event.defaultPrevented && onItemClick) onItemClick(item);
+                }}
+                {...buttonRest}
+              >
+                {itemRenderer(item)}
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      )}
+    </VBox>
+  );
+}

package/src/TagListPro.tsx

@@ -4,12 +4,9 @@ import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { globalApp } from "./app/ReactApp";
+import { ListType2 } from "@etsoo/shared";
 
-type DataType = {
-  id: number | string;
-} & ({ label: string } | { name: string });
-
-export type TagListProProps<D extends DataType = DataType> = Omit<
+export type TagListProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, true, false, false>,
   "open" | "multiple" | "options" | "renderInput"
 > & {
@@ -37,7 +34,7 @@ export type TagListProProps<D extends DataType = DataType> = Omit<
   maxItems?: number;
 };
 
-export function TagListPro<D extends DataType = DataType>(
+export function TagListPro<D extends ListType2 = ListType2>(
   props: TagListProProps<D>
 ) {
   // Labels

package/src/index.ts

@@ -74,6 +74,7 @@ export * from "./OptionGroup";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";
+export * from "./QuickList";
 export * from "./ResponsibleContainer";
 export * from "./ScrollerListEx";
 export * from "./ScrollTopFab";