@etsoo/materialui 1.0.55 → 1.0.57

package/__tests__/SelectEx.tsx

@@ -51,3 +51,50 @@ it('Render SelectEx', async () => {
 
     expect(itemChangeCallback).toBeCalledTimes(2);
 });
+
+it('Render multiple SelectEx', async () => {
+    // Arrange
+    type T = { id: number; name: string };
+    const options: T[] = [
+        { id: 1, name: 'Name 1' },
+        { id: 2, name: 'Name 2' },
+        { id: 3, name: 'Name 3' }
+    ];
+
+    const itemChangeCallback = jest.fn((option, userAction) => {
+        if (userAction) expect(option.id).toBe(3);
+        else expect(option.id).toBe(1);
+    });
+
+    // Render component
+    const { baseElement } = render(
+        <SelectEx<T>
+            options={options}
+            name="test"
+            onItemChange={itemChangeCallback}
+            value={[1, 2]}
+            multiple
+            search
+            labelField="name"
+        />
+    );
+
+    expect(itemChangeCallback).toBeCalled();
+
+    // Act, click to show the list
+    const button = screen.getByRole('button');
+    fireEvent.mouseDown(button); // Not click
+
+    // Get list item
+    const itemName3 = await findByText(baseElement, 'Name 3');
+    expect(itemName3.nodeName).toBe('SPAN');
+
+    // Checkbox
+    const checkbox = itemName3.closest('li')?.querySelector('input');
+
+    act(() => {
+        checkbox?.click();
+    });
+
+    expect(itemChangeCallback).toBeCalledTimes(2);
+});

package/lib/AutocompleteExtendedProps.d.ts

@@ -4,7 +4,7 @@ import { ChangeEventHandler } from 'react';
 /**
  * Autocomplete extended props
  */
-export declare type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys<T>> = Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput' | 'options'> & {
+export declare type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys<T>> = Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput' | 'options' | 'multiple'> & {
     /**
      * Id field
      */

package/lib/ListChooser.d.ts

@@ -0,0 +1,56 @@
+import { DataTypes, DelayedExecutorType, IdDefaultType } from '@etsoo/shared';
+import { ListItemButtonProps, ListProps } from '@mui/material';
+import React from 'react';
+declare type QueryData = {
+    title?: string;
+};
+/**
+ * List chooser button props
+ */
+export interface ListChooserButtonProps<T extends object, D extends DataTypes.Keys<T>> {
+    (id: T[D]): ListItemButtonProps;
+}
+/**
+ * List chooser props
+ */
+export declare type ListChooserProps<T extends object, D extends DataTypes.Keys<T>, Q extends object> = ListProps & {
+    /**
+     * Condition renderer
+     */
+    conditionRenderer?: (rq: Partial<Q>, delayed: DelayedExecutorType) => React.ReactNode;
+    /**
+     * List item renderer
+     */
+    itemRenderer?: (data: T, props: ListChooserButtonProps<T, D>) => React.ReactNode;
+    /**
+     * Label field
+     */
+    labelField?: DataTypes.Keys<T, string> | ((data: T) => string);
+    /**
+     * Id field
+     */
+    idField?: D;
+    /**
+     * Load data callback
+     */
+    loadData: (rq: Partial<Q>) => PromiseLike<T[] | null | undefined>;
+    /**
+     * Multiple selected
+     */
+    multiple?: boolean;
+    /**
+     * Item onchange callback
+     */
+    onItemChange: (items: T[], ids: T[D][]) => void;
+    /**
+     * Title
+     */
+    title: string;
+};
+/**
+ * List chooser
+ * @param props Props
+ * @returns Component
+ */
+export declare function ListChooser<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, Q extends object = QueryData>(props: ListChooserProps<T, D, Q>): JSX.Element;
+export {};

package/lib/ListChooser.js

@@ -0,0 +1,79 @@
+import { useDelayedExecutor } from '@etsoo/react';
+import { List, ListItem, ListItemButton, ListItemText, TextField } from '@mui/material';
+import React from 'react';
+import { VBox } from './FlexBox';
+/**
+ * List chooser
+ * @param props Props
+ * @returns Component
+ */
+export function ListChooser(props) {
+    var _a;
+    // Selected ids state
+    const [selectedIds, setSelectedIds] = React.useState([]);
+    const selectProps = (id) => ({
+        selected: selectedIds.includes(id),
+        onClick: () => {
+            if (multiple) {
+                const index = selectedIds.indexOf(id);
+                if (index === -1)
+                    selectedIds.push(id);
+                else
+                    selectedIds.splice(index, 1);
+                setSelectedIds([...selectedIds]);
+            }
+            else {
+                setSelectedIds([id]);
+            }
+        }
+    });
+    // Destruct
+    const { conditionRenderer = (rq, delayed) => (React.createElement(TextField, { autoFocus: true, margin: "dense", name: "title", label: title, fullWidth: true, variant: "standard", inputProps: { maxLength: 128 }, onChange: (event) => {
+            Reflect.set(rq, 'title', event.target.value);
+            delayed.call();
+        } })), itemRenderer = (item, selectProps) => {
+        const id = item[idField];
+        const label = typeof labelField === 'function'
+            ? labelField(item)
+            : Reflect.get(item, labelField);
+        return (React.createElement(ListItem, { disableGutters: true, key: `${id}` },
+            React.createElement(ListItemButton, { ...selectProps(id) },
+                React.createElement(ListItemText, { primary: label }))));
+    }, idField = 'id', labelField = 'label', loadData, multiple = false, onItemChange, title, ...rest } = props;
+    // Default minimum height
+    (_a = rest.sx) !== null && _a !== void 0 ? _a : (rest.sx = { minHeight: '220px' });
+    // State
+    const [items, setItems] = React.useState([]);
+    // Query request data
+    const mounted = React.useRef(false);
+    const rq = React.useRef({});
+    // Delayed execution
+    const delayed = useDelayedExecutor(async () => {
+        const result = await loadData(rq.current);
+        if (result == null || !mounted.current)
+            return;
+        if (!multiple &&
+            selectedIds.length > 0 &&
+            !result.some((item) => selectedIds.includes(item[idField]))) {
+            setSelectedIds([]);
+        }
+        setItems(result);
+    }, 480);
+    React.useEffect(() => {
+        if (!mounted.current)
+            return;
+        onItemChange(items.filter((item) => selectedIds.includes(item[idField])), selectedIds);
+    }, [selectedIds]);
+    React.useEffect(() => {
+        mounted.current = true;
+        delayed.call(0);
+        return () => {
+            mounted.current = false;
+            delayed.clear();
+        };
+    }, [delayed]);
+    // Layout
+    return (React.createElement(VBox, null,
+        conditionRenderer(rq.current, delayed),
+        React.createElement(List, { disablePadding: true, dense: true, ...rest }, items.map((item) => itemRenderer(item, selectProps)))));
+}

package/lib/OptionGroup.d.ts

@@ -63,6 +63,10 @@ export declare type OptionGroupProps<T extends object, D extends DataTypes.Keys<
      * Display group of elements in a compact row
      */
     row?: boolean;
+    /**
+     * Item size
+     */
+    itemSize?: 'small' | 'medium';
 };
 /**
  * OptionGroup

package/lib/OptionGroup.js

@@ -8,7 +8,7 @@ import React from 'react';
  */
 export function OptionGroup(props) {
     // Destruct
-    const { getOptionLabel, defaultValue, idField = 'id', label, labelField = 'label', multiple = false, mRef, name, onValueChange, options, readOnly, row, size, ...rest } = props;
+    const { getOptionLabel, defaultValue, idField = 'id', label, labelField = 'label', multiple = false, mRef, name, onValueChange, options, readOnly, row, itemSize, ...rest } = props;
     // Get option value
     // D type should be the source id type
     const getOptionValue = (option) => {
@@ -45,7 +45,7 @@ export function OptionGroup(props) {
         // Value
         const ov = getOptionValue(option);
         // Control
-        const control = multiple ? (React.createElement(Checkbox, { name: name, readOnly: readOnly, size: size, checked: itemChecked(option), disabled: disabledIds === null || disabledIds === void 0 ? void 0 : disabledIds.includes(ov), onChange: (event) => {
+        const control = multiple ? (React.createElement(Checkbox, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds === null || disabledIds === void 0 ? void 0 : disabledIds.includes(ov), onChange: (event) => {
                 if (firstOptionValue == null)
                     return;
                 const typeValue = Utils.parseString(event.target.value, firstOptionValue);
@@ -64,7 +64,7 @@ export function OptionGroup(props) {
                 if (onValueChange)
                     onValueChange(changedValues);
                 setValues(changedValues);
-            } })) : (React.createElement(Radio, { disabled: disabledIds === null || disabledIds === void 0 ? void 0 : disabledIds.includes(ov), size: size, readOnly: readOnly }));
+            } })) : (React.createElement(Radio, { disabled: disabledIds === null || disabledIds === void 0 ? void 0 : disabledIds.includes(ov), size: itemSize, readOnly: readOnly }));
         // Label
         const label = getOptionLabel == null
             ? `${option[labelField]}`

package/lib/SelectEx.js

@@ -11,26 +11,30 @@ import { ReactUtils } from '@etsoo/react';
  * @returns Component
  */
 export function SelectEx(props) {
-    var _a;
     // Destruct
     const { defaultValue, idField = 'id', error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = 'label', loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
     // Options state
     const [localOptions, setOptions] = React.useState([]);
-    const isMounted = React.useRef(true);
+    const isMounted = React.useRef(false);
     const doItemChange = (options, value, userAction) => {
         if (onItemChange == null)
             return;
-        if (value == null || value === '') {
-            onItemChange(undefined, userAction);
-            return;
+        let option;
+        if (multiple && Array.isArray(value)) {
+            option = options.find((option) => value.includes(option[idField]));
+        }
+        else if (value == null || value === '') {
+            option = undefined;
+        }
+        else {
+            option = options.find((option) => option[idField] === value);
         }
-        const option = options.find((option) => option[idField] === value);
         onItemChange(option, userAction);
     };
     const setOptionsAdd = (options) => {
         setOptions(options);
-        if (localValue != null && localValue !== '')
-            doItemChange(options, localValue, false);
+        if (valueSource != null)
+            doItemChange(options, valueSource, false);
     };
     // When options change
     // [options] will cause infinite loop
@@ -41,28 +45,25 @@ export function SelectEx(props) {
         setOptionsAdd(options);
     }, [options, propertyWay]);
     // Local value
-    const valueSource = (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value) !== null && _a !== void 0 ? _a : '';
-    let localValue;
-    if (multiple) {
-        if (Array.isArray(valueSource))
-            localValue = valueSource;
-        else
-            localValue = [valueSource];
-    }
-    else {
-        localValue = valueSource;
-    }
+    const v = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+    const valueSource = multiple
+        ? v
+            ? Array.isArray(v)
+                ? v
+                : [v]
+            : []
+        : v !== null && v !== void 0 ? v : '';
     // Value state
-    const [valueState, setValueStateBase] = React.useState();
+    const [valueState, setValueStateBase] = React.useState(valueSource);
     const valueRef = React.useRef();
     const setValueState = (newValue) => {
         valueRef.current = newValue;
         setValueStateBase(newValue);
     };
     React.useEffect(() => {
-        if (localValue != null)
-            setValueState(localValue);
-    }, [localValue]);
+        if (valueSource != null)
+            setValueState(valueSource);
+    }, [valueSource]);
     // Label id
     const labelId = `selectex-label-${name}`;
     // Item checked or not
@@ -71,27 +72,23 @@ export function SelectEx(props) {
             return valueState.indexOf(id) !== -1;
         return valueState === id;
     };
-    // Change handler
-    const handleChange = (event) => {
-        const value = event.target.value;
-        if (multiple && !Array.isArray(value))
-            return setItemValue([value]);
-        else
-            return setItemValue(value);
-    };
     // Set item
     const setItemValue = (id) => {
         var _a;
         if (id != valueRef.current) {
+            // Difference
+            const diff = multiple
+                ? Utils.arrayDifferences(id, valueRef.current)
+                : id;
             setValueState(id);
             const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
             if (input) {
                 // Different value, trigger change event
                 ReactUtils.triggerChange(input, id, false);
             }
-            return true;
+            return diff;
         }
-        return false;
+        return undefined;
     };
     // Get option id
     const getId = (option) => {
@@ -123,7 +120,7 @@ export function SelectEx(props) {
     // When value change
     React.useEffect(() => {
         refreshData();
-    }, [localValue]);
+    }, [valueSource]);
     // When layout ready
     React.useEffect(() => {
         var _a;
@@ -134,6 +131,7 @@ export function SelectEx(props) {
                 setValueState(multiple ? [] : '');
         };
         input === null || input === void 0 ? void 0 : input.addEventListener('change', inputChange);
+        isMounted.current = true;
         return () => {
             isMounted.current = false;
             input === null || input === void 0 ? void 0 : input.removeEventListener('change', inputChange);
@@ -145,17 +143,21 @@ export function SelectEx(props) {
             React.createElement(InputLabel, { id: labelId, shrink: search
                     ? MUGlobal.searchFieldShrink
                     : MUGlobal.inputFieldShrink }, label),
-            React.createElement(Select, { ref: divRef, value: localOptions.some((option) => itemChecked(getId(option)))
-                    ? valueState !== null && valueState !== void 0 ? valueState : ''
-                    : '', input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+            React.createElement(Select, { ref: divRef, value: multiple
+                    ? valueState
+                    : localOptions.some((o) => o[idField] === valueState)
+                        ? valueState
+                        : '', input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                     if (onChange) {
                         onChange(event, child);
                         // event.preventDefault() will block executing
                         if (event.defaultPrevented)
                             return;
                     }
-                    if (handleChange(event)) {
-                        doItemChange(localOptions, event.target.value, true);
+                    // Set item value
+                    const diff = setItemValue(event.target.value);
+                    if (diff != null) {
+                        doItemChange(localOptions, diff, true);
                     }
                 }, renderValue: (selected) => {
                     // The text shows up

package/lib/index.d.ts

@@ -44,6 +44,7 @@ export * from './HiSelector';
 export * from './IconButtonLink';
 export * from './InputField';
 export * from './ItemList';
+export * from './ListChooser';
 export * from './ListItemRightIcon';
 export * from './ListMoreDisplay';
 export * from './LoadingButton';

package/lib/index.js

@@ -44,6 +44,7 @@ export * from './HiSelector';
 export * from './IconButtonLink';
 export * from './InputField';
 export * from './ItemList';
+export * from './ListChooser';
 export * from './ListItemRightIcon';
 export * from './ListMoreDisplay';
 export * from './LoadingButton';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.55",
+    "version": "1.0.57",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -48,20 +48,20 @@
     "dependencies": {
         "@dnd-kit/core": "^6.0.5",
         "@dnd-kit/sortable": "^7.0.1",
-        "@emotion/css": "^11.10.0",
-        "@emotion/react": "^11.10.4",
-        "@emotion/styled": "^11.10.4",
-        "@etsoo/appscript": "^1.3.23",
+        "@emotion/css": "^11.10.5",
+        "@emotion/react": "^11.10.5",
+        "@emotion/styled": "^11.10.5",
+        "@etsoo/appscript": "^1.3.28",
         "@etsoo/notificationbase": "^1.1.13",
-        "@etsoo/react": "^1.6.22",
-        "@etsoo/shared": "^1.1.67",
+        "@etsoo/react": "^1.6.23",
+        "@etsoo/shared": "^1.1.71",
         "@mui/icons-material": "^5.10.9",
-        "@mui/material": "^5.10.11",
+        "@mui/material": "^5.10.12",
         "@types/pica": "^9.0.1",
         "@types/pulltorefreshjs": "^0.1.5",
-        "@types/react": "^18.0.23",
+        "@types/react": "^18.0.24",
         "@types/react-avatar-editor": "^13.0.0",
-        "@types/react-dom": "^18.0.7",
+        "@types/react-dom": "^18.0.8",
         "@types/react-input-mask": "^3.0.1",
         "@types/react-window": "^1.8.5",
         "pica": "^9.0.1",
@@ -71,20 +71,20 @@
         "react-dom": "^18.2.0",
         "react-draggable": "^4.4.5",
         "react-imask": "^6.4.3",
-        "react-router-dom": "^6.4.2",
-        "react-window": "^1.8.7"
+        "react-router-dom": "^6.4.3",
+        "react-window": "^1.8.8"
     },
     "devDependencies": {
         "@babel/cli": "^7.19.3",
         "@babel/core": "^7.19.6",
         "@babel/plugin-transform-runtime": "^7.19.6",
         "@babel/preset-env": "^7.19.4",
-        "@babel/runtime-corejs3": "^7.19.6",
+        "@babel/runtime-corejs3": "^7.20.1",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
-        "@types/jest": "^29.2.0",
-        "@typescript-eslint/eslint-plugin": "^5.41.0",
-        "@typescript-eslint/parser": "^5.41.0",
+        "@types/jest": "^29.2.1",
+        "@typescript-eslint/eslint-plugin": "^5.42.0",
+        "@typescript-eslint/parser": "^5.42.0",
         "eslint": "^8.26.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",

package/src/AutocompleteExtendedProps.ts

@@ -10,7 +10,7 @@ export type AutocompleteExtendedProps<
     D extends DataTypes.Keys<T>
 > = Omit<
     AutocompleteProps<T, undefined, false, false>,
-    'renderInput' | 'options'
+    'renderInput' | 'options' | 'multiple'
 > & {
     /**
      * Id field

package/src/ListChooser.tsx

@@ -0,0 +1,204 @@
+import { useDelayedExecutor } from '@etsoo/react';
+import { DataTypes, DelayedExecutorType, IdDefaultType } from '@etsoo/shared';
+import {
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemButtonProps,
+    ListItemText,
+    ListProps,
+    TextField
+} from '@mui/material';
+import React from 'react';
+import { VBox } from './FlexBox';
+
+type QueryData = {
+    title?: string;
+};
+
+/**
+ * List chooser button props
+ */
+export interface ListChooserButtonProps<
+    T extends object,
+    D extends DataTypes.Keys<T>
+> {
+    (id: T[D]): ListItemButtonProps;
+}
+
+/**
+ * List chooser props
+ */
+export type ListChooserProps<
+    T extends object,
+    D extends DataTypes.Keys<T>,
+    Q extends object
+> = ListProps & {
+    /**
+     * Condition renderer
+     */
+    conditionRenderer?: (
+        rq: Partial<Q>,
+        delayed: DelayedExecutorType
+    ) => React.ReactNode;
+
+    /**
+     * List item renderer
+     */
+    itemRenderer?: (
+        data: T,
+        props: ListChooserButtonProps<T, D>
+    ) => React.ReactNode;
+
+    /**
+     * Label field
+     */
+    labelField?: DataTypes.Keys<T, string> | ((data: T) => string);
+
+    /**
+     * Id field
+     */
+    idField?: D;
+
+    /**
+     * Load data callback
+     */
+    loadData: (rq: Partial<Q>) => PromiseLike<T[] | null | undefined>;
+
+    /**
+     * Multiple selected
+     */
+    multiple?: boolean;
+
+    /**
+     * Item onchange callback
+     */
+    onItemChange: (items: T[], ids: T[D][]) => void;
+
+    /**
+     * Title
+     */
+    title: string;
+};
+
+/**
+ * List chooser
+ * @param props Props
+ * @returns Component
+ */
+export function ListChooser<
+    T extends object,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>,
+    Q extends object = QueryData
+>(props: ListChooserProps<T, D, Q>) {
+    // Selected ids state
+    const [selectedIds, setSelectedIds] = React.useState<T[D][]>([]);
+
+    const selectProps: ListChooserButtonProps<T, D> = (id: T[D]) => ({
+        selected: selectedIds.includes(id),
+        onClick: () => {
+            if (multiple) {
+                const index = selectedIds.indexOf(id);
+                if (index === -1) selectedIds.push(id);
+                else selectedIds.splice(index, 1);
+                setSelectedIds([...selectedIds]);
+            } else {
+                setSelectedIds([id]);
+            }
+        }
+    });
+
+    // Destruct
+    const {
+        conditionRenderer = (rq: Partial<Q>, delayed: DelayedExecutorType) => (
+            <TextField
+                autoFocus
+                margin="dense"
+                name="title"
+                label={title}
+                fullWidth
+                variant="standard"
+                inputProps={{ maxLength: 128 }}
+                onChange={(event) => {
+                    Reflect.set(rq, 'title', event.target.value);
+                    delayed.call();
+                }}
+            />
+        ),
+        itemRenderer = (item, selectProps) => {
+            const id = item[idField];
+            const label =
+                typeof labelField === 'function'
+                    ? labelField(item)
+                    : Reflect.get(item, labelField);
+
+            return (
+                <ListItem disableGutters key={`${id}`}>
+                    <ListItemButton {...selectProps(id)}>
+                        <ListItemText primary={label} />
+                    </ListItemButton>
+                </ListItem>
+            );
+        },
+        idField = 'id' as D,
+        labelField = 'label',
+        loadData,
+        multiple = false,
+        onItemChange,
+        title,
+        ...rest
+    } = props;
+
+    // Default minimum height
+    rest.sx ??= { minHeight: '220px' };
+
+    // State
+    const [items, setItems] = React.useState<T[]>([]);
+
+    // Query request data
+    const mounted = React.useRef<boolean>(false);
+    const rq = React.useRef<Partial<Q>>({});
+
+    // Delayed execution
+    const delayed = useDelayedExecutor(async () => {
+        const result = await loadData(rq.current);
+        if (result == null || !mounted.current) return;
+
+        if (
+            !multiple &&
+            selectedIds.length > 0 &&
+            !result.some((item) => selectedIds.includes(item[idField]))
+        ) {
+            setSelectedIds([]);
+        }
+
+        setItems(result);
+    }, 480);
+
+    React.useEffect(() => {
+        if (!mounted.current) return;
+        onItemChange(
+            items.filter((item) => selectedIds.includes(item[idField])),
+            selectedIds
+        );
+    }, [selectedIds]);
+
+    React.useEffect(() => {
+        mounted.current = true;
+        delayed.call(0);
+        return () => {
+            mounted.current = false;
+            delayed.clear();
+        };
+    }, [delayed]);
+
+    // Layout
+    return (
+        <VBox>
+            {conditionRenderer(rq.current, delayed)}
+            <List disablePadding dense {...rest}>
+                {items.map((item) => itemRenderer(item, selectProps))}
+            </List>
+        </VBox>
+    );
+}

package/src/OptionGroup.tsx

@@ -95,6 +95,11 @@ export type OptionGroupProps<
      * Display group of elements in a compact row
      */
     row?: boolean;
+
+    /**
+     * Item size
+     */
+    itemSize?: 'small' | 'medium';
 };
 
 /**
@@ -121,7 +126,7 @@ export function OptionGroup<
         options,
         readOnly,
         row,
-        size,
+        itemSize,
         ...rest
     } = props;
 
@@ -173,7 +178,7 @@ export function OptionGroup<
             <Checkbox
                 name={name}
                 readOnly={readOnly}
-                size={size}
+                size={itemSize}
                 checked={itemChecked(option)}
                 disabled={disabledIds?.includes(ov)}
                 onChange={(event) => {
@@ -203,7 +208,7 @@ export function OptionGroup<
         ) : (
             <Radio
                 disabled={disabledIds?.includes(ov)}
-                size={size}
+                size={itemSize}
                 readOnly={readOnly}
             />
         );

package/src/SelectEx.tsx

@@ -143,7 +143,7 @@ export function SelectEx<
 
     // Options state
     const [localOptions, setOptions] = React.useState<readonly T[]>([]);
-    const isMounted = React.useRef(true);
+    const isMounted = React.useRef(false);
 
     const doItemChange = (
         options: readonly T[],
@@ -151,18 +151,21 @@ export function SelectEx<
         userAction: boolean
     ) => {
         if (onItemChange == null) return;
-        if (value == null || value === '') {
-            onItemChange(undefined, userAction);
-            return;
+
+        let option: T | undefined;
+        if (multiple && Array.isArray(value)) {
+            option = options.find((option) => value.includes(option[idField]));
+        } else if (value == null || value === '') {
+            option = undefined;
+        } else {
+            option = options.find((option) => option[idField] === value);
         }
-        const option = options.find((option) => option[idField] === value);
         onItemChange(option, userAction);
     };
 
     const setOptionsAdd = (options: readonly T[]) => {
         setOptions(options);
-        if (localValue != null && localValue !== '')
-            doItemChange(options, localValue, false);
+        if (valueSource != null) doItemChange(options, valueSource, false);
     };
 
     // When options change
@@ -174,17 +177,18 @@ export function SelectEx<
     }, [options, propertyWay]);
 
     // Local value
-    const valueSource = defaultValue ?? value ?? '';
-    let localValue: unknown | unknown[];
-    if (multiple) {
-        if (Array.isArray(valueSource)) localValue = valueSource;
-        else localValue = [valueSource];
-    } else {
-        localValue = valueSource;
-    }
+    const v = defaultValue ?? value;
+    const valueSource = multiple
+        ? v
+            ? Array.isArray(v)
+                ? v
+                : [v]
+            : []
+        : v ?? '';
 
     // Value state
-    const [valueState, setValueStateBase] = React.useState<unknown>();
+    const [valueState, setValueStateBase] =
+        React.useState<unknown>(valueSource);
     const valueRef = React.useRef<unknown>();
     const setValueState = (newValue: unknown) => {
         valueRef.current = newValue;
@@ -192,8 +196,8 @@ export function SelectEx<
     };
 
     React.useEffect(() => {
-        if (localValue != null) setValueState(localValue);
-    }, [localValue]);
+        if (valueSource != null) setValueState(valueSource);
+    }, [valueSource]);
 
     // Label id
     const labelId = `selectex-label-${name}`;
@@ -204,16 +208,17 @@ export function SelectEx<
         return valueState === id;
     };
 
-    // Change handler
-    const handleChange = (event: SelectChangeEvent<unknown>) => {
-        const value = event.target.value;
-        if (multiple && !Array.isArray(value)) return setItemValue([value]);
-        else return setItemValue(value);
-    };
-
     // Set item
     const setItemValue = (id: unknown) => {
         if (id != valueRef.current) {
+            // Difference
+            const diff = multiple
+                ? Utils.arrayDifferences(
+                      id as T[D][],
+                      valueRef.current as T[D][]
+                  )
+                : id;
+
             setValueState(id);
 
             const input = divRef.current?.querySelector('input');
@@ -221,9 +226,9 @@ export function SelectEx<
                 // Different value, trigger change event
                 ReactUtils.triggerChange(input, id as string, false);
             }
-            return true;
+            return diff;
         }
-        return false;
+        return undefined;
     };
 
     // Get option id
@@ -257,7 +262,7 @@ export function SelectEx<
     // When value change
     React.useEffect(() => {
         refreshData();
-    }, [localValue]);
+    }, [valueSource]);
 
     // When layout ready
     React.useEffect(() => {
@@ -268,6 +273,8 @@ export function SelectEx<
         };
         input?.addEventListener('change', inputChange);
 
+        isMounted.current = true;
+
         return () => {
             isMounted.current = false;
             input?.removeEventListener('change', inputChange);
@@ -297,10 +304,12 @@ export function SelectEx<
                 <Select
                     ref={divRef}
                     value={
-                        localOptions.some((option) =>
-                            itemChecked(getId(option))
-                        )
-                            ? valueState ?? ''
+                        multiple
+                            ? valueState
+                            : localOptions.some(
+                                  (o) => o[idField] === valueState
+                              )
+                            ? valueState
                             : ''
                     }
                     input={
@@ -321,12 +330,10 @@ export function SelectEx<
                             if (event.defaultPrevented) return;
                         }
 
-                        if (handleChange(event)) {
-                            doItemChange(
-                                localOptions,
-                                event.target.value,
-                                true
-                            );
+                        // Set item value
+                        const diff = setItemValue(event.target.value);
+                        if (diff != null) {
+                            doItemChange(localOptions, diff, true);
                         }
                     }}
                     renderValue={(selected) => {

package/src/index.ts

@@ -47,6 +47,7 @@ export * from './HiSelector';
 export * from './IconButtonLink';
 export * from './InputField';
 export * from './ItemList';
+export * from './ListChooser';
 export * from './ListItemRightIcon';
 export * from './ListMoreDisplay';
 export * from './LoadingButton';