@etsoo/react 1.5.73 → 1.5.76

package/__tests__/mu/MUGlobalTests.tsx

@@ -6,6 +6,17 @@ const updateFunc = (value: number) => `${value * 8}px`;
 // Arrange
 const paddings = { sx: 2, sm: 3, key: 'a' };
 
+test('getMenuItem tests', () => {
+    // Assert
+    expect(
+        MUGlobal.getMenuItem('/user/add', '/user/all').selected
+    ).toBeTruthy();
+    expect(MUGlobal.getMenuItem('/user/add', '/user/*').selected).toBeTruthy();
+    expect(
+        MUGlobal.getMenuItem('/user/add', '/user/edit').selected
+    ).toBeFalsy();
+});
+
 test('half tests', () => {
     // Act
     const result = MUGlobal.half(paddings);

package/lib/mu/AutocompleteExtendedProps.d.ts

@@ -4,15 +4,15 @@ import { ChangeEventHandler } from 'react';
 /**
  * Autocomplete extended props
  */
-export interface AutocompleteExtendedProps<T extends Record<string, unknown>> extends Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput' | 'options'> {
+export interface AutocompleteExtendedProps<T extends {}, D extends DataTypes.Keys<T>> extends Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput' | 'options'> {
     /**
      * Id field, default is id
      */
-    idField?: string & keyof T;
+    idField: D;
     /**
      * Id value
      */
-    idValue?: DataTypes.IdType;
+    idValue?: T[D];
     /**
      * Autocomplete for the input
      */

package/lib/mu/ComboBox.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { IdLabelDto } from '@etsoo/appscript';
+import { DataTypes } from '@etsoo/shared';
 import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
 /**
  * ComboBox props
  */
-export interface ComboBoxProps<T extends {}> extends AutocompleteExtendedProps<T> {
+export interface ComboBoxProps<T extends {}, D extends DataTypes.Keys<T> = DataTypes.Keys<T>> extends AutocompleteExtendedProps<T, D> {
     /**
      * Auto add blank item
      */
@@ -16,7 +16,7 @@ export interface ComboBoxProps<T extends {}> extends AutocompleteExtendedProps<T
     /**
      * Label field
      */
-    labelField?: string & keyof T;
+    labelField: D;
     /**
      * Load data callback
      */
@@ -35,4 +35,4 @@ export interface ComboBoxProps<T extends {}> extends AutocompleteExtendedProps<T
  * @param props Props
  * @returns Component
  */
-export declare function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>): JSX.Element;
+export declare function ComboBox<T extends {} = DataTypes.IdLabelItem, D extends DataTypes.Keys<T> = DataTypes.Keys<T>>(props: ComboBoxProps<T, D>): JSX.Element;

package/lib/mu/ComboBox.js

@@ -12,7 +12,7 @@ import { ReactUtils } from '../app/ReactUtils';
  */
 export function ComboBox(props) {
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = 'id', idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, inputAutoComplete = 'off', options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, getOptionLabel = (option) => String(Reflect.get(option, labelField)), sx = { minWidth: '150px' }, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField, idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField, loadData, onLoadData, name, inputAutoComplete = 'off', options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: '150px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -27,7 +27,7 @@ export function ComboBox(props) {
     }, [JSON.stringify(options), propertyWay]);
     // Local default value
     let localValue = idValue != null
-        ? localOptions.find((o) => Reflect.get(o, idField) === idValue)
+        ? localOptions.find((o) => o[idField] === idValue)
         : defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
     if (localValue === undefined)
         localValue = null;
@@ -36,7 +36,7 @@ export function ComboBox(props) {
     const [stateValue, setStateValue] = React.useState(null);
     // Current id value
     // One time calculation for input's default value (uncontrolled)
-    const localIdValue = stateValue && Reflect.get(stateValue, idField);
+    const localIdValue = stateValue && stateValue[idField];
     React.useEffect(() => {
         if (localValue != null)
             setStateValue(localValue);
@@ -68,7 +68,7 @@ export function ComboBox(props) {
         const input = inputRef.current;
         if (input) {
             // Update value
-            const newValue = value != null ? `${Reflect.get(value, idField)}` : '';
+            const newValue = value != null ? `${value[idField]}` : '';
             if (newValue !== input.value) {
                 // Different value, trigger change event
                 ReactUtils.triggerChange(input, newValue, false);
@@ -97,8 +97,8 @@ export function ComboBox(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: localIdValue !== null && localIdValue !== void 0 ? localIdValue : '', readOnly: true, onChange: inputOnChange }),
-        React.createElement(Autocomplete, { value: stateValue, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => Reflect.get(option, idField) === Reflect.get(value, idField), onChange: (event, value, reason, details) => {
+        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: `${localIdValue !== null && localIdValue !== void 0 ? localIdValue : ''}`, readOnly: true, onChange: inputOnChange }),
+        React.createElement(Autocomplete, { value: stateValue, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                 // Set value
                 setInputValue(value);
                 // Custom

package/lib/mu/MUGlobal.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Theme } from '@mui/material';
+import { ListItemButtonProps, Theme } from '@mui/material';
 /**
  * Mouse event handler with data
  */
@@ -43,6 +43,13 @@ export declare class MUGlobal {
         xs: number;
         sm: number;
     };
+    /**
+     * Get menu item props
+     * @param path Current path
+     * @param href Item's href
+     * @returns Props
+     */
+    static getMenuItem(path: string, href: string): ListItemButtonProps<"div", {}>;
     /**
      * Update object number properties with half of it
      * @param input Input object

package/lib/mu/MUGlobal.js

@@ -1,8 +1,41 @@
 import { NumberUtils } from '@etsoo/shared';
+import { RLink } from './RLink';
 /**
  * MUGlobal for global configurations
  */
 export class MUGlobal {
+    /**
+     * Get menu item props
+     * @param path Current path
+     * @param href Item's href
+     * @returns Props
+     */
+    static getMenuItem(path, href) {
+        let selected = false;
+        if (path === href) {
+            // Exact match, most common case
+            selected = true;
+        }
+        else if (href.endsWith('*')) {
+            href = href.slice(0, -1);
+            selected = path.startsWith(href);
+        }
+        else if (href.endsWith('/all')) {
+            selected = path.startsWith(href.slice(0, -3));
+        }
+        return {
+            component: RLink,
+            selected,
+            href,
+            sx: {
+                ...(selected && {
+                    '.MuiListItemIcon-root': {
+                        color: (theme) => theme.palette.primary.main
+                    }
+                })
+            }
+        };
+    }
     /**
      * Update object number properties with half of it
      * @param input Input object

package/lib/mu/SelectBool.js

@@ -18,5 +18,5 @@ export function SelectBool(props) {
     if (autoAddBlankItem)
         Utils.addBlankItem(options);
     // Layout
-    return React.createElement(SelectEx, { options: options, search: search, ...rest });
+    return (React.createElement(SelectEx, { options: options, search: search, ...rest }));
 }

package/lib/mu/SelectEx.d.ts

@@ -1,26 +1,26 @@
 import { SelectProps } from '@mui/material';
 import React from 'react';
-import { IdLabelDto } from '@etsoo/appscript';
+import { DataTypes } from '@etsoo/shared';
 /**
  * Extended select component props
  */
-export interface SelectExProps<T extends {}> extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
+export interface SelectExProps<T extends {}, D extends DataTypes.Keys<T> = DataTypes.Keys<T>> extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
     /**
      * Auto add blank item
      */
     autoAddBlankItem?: boolean;
     /**
-     * Id field, default is id
+     * Id field
      */
-    idField?: string & keyof T;
+    idField: D;
     /**
      * Item icon renderer
      */
     itemIconRenderer?: (id: unknown) => React.ReactNode;
     /**
-     * Label field, default is label
+     * Label field
      */
-    labelField?: ((option: T) => string) | (string & keyof T);
+    labelField: ((option: T) => string) | D;
     /**
      * Load data callback
      */
@@ -47,4 +47,4 @@ export interface SelectExProps<T extends {}> extends Omit<SelectProps, 'labelId'
  * @param props Props
  * @returns Component
  */
-export declare function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>): JSX.Element;
+export declare function SelectEx<T extends {} = DataTypes.IdLabelItem, D extends DataTypes.Keys<T> = DataTypes.Keys<T>>(props: SelectExProps<T, D>): JSX.Element;

package/lib/mu/SelectEx.js

@@ -12,7 +12,7 @@ import { ReactUtils } from '../app/ReactUtils';
 export function SelectEx(props) {
     var _a;
     // Destruct
-    const { defaultValue, idField = 'id', itemIconRenderer, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
+    const { defaultValue, idField, itemIconRenderer, label, labelField, loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
     // Options state
     const [localOptions, setOptions] = React.useState(options);
     const isMounted = React.useRef(true);
@@ -71,13 +71,13 @@ export function SelectEx(props) {
     };
     // Get option id
     const getId = (option) => {
-        return Reflect.get(option, idField);
+        return option[idField];
     };
     // Get option label
     const getLabel = (option) => {
         return typeof labelField === 'function'
             ? labelField(option)
-            : Reflect.get(option, labelField);
+            : new String(option[labelField]);
     };
     // Refs
     const divRef = React.useRef();

package/lib/mu/Tiplist.d.ts

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

package/lib/mu/Tiplist.js

@@ -12,7 +12,7 @@ import { SearchField } from './SearchField';
  */
 export function Tiplist(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, inputAutoComplete = 'off', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: '180px' }, ...rest } = props;
+    const { search = false, idField, idValue, inputAutoComplete = 'off', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: '180px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Local value
@@ -20,7 +20,7 @@ export function Tiplist(props) {
     if (localValue === undefined)
         localValue = null;
     // One time calculation for input's default value (uncontrolled)
-    const localIdValue = idValue !== null && idValue !== void 0 ? idValue : (localValue && Reflect.get(localValue, idField));
+    const localIdValue = idValue !== null && idValue !== void 0 ? idValue : (localValue && localValue[idField]);
     // Changable states
     const [states, stateUpdate] = React.useReducer((currentState, newState) => {
         return { ...currentState, ...newState };
@@ -31,7 +31,7 @@ export function Tiplist(props) {
         value: null
     });
     // Input value
-    const inputValue = React.useMemo(() => states.value && Reflect.get(states.value, idField), [states.value]);
+    const inputValue = React.useMemo(() => states.value && states.value[idField], [states.value]);
     React.useEffect(() => {
         if (localValue != null)
             stateUpdate({ value: localValue });
@@ -128,7 +128,7 @@ export function Tiplist(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: inputValue !== null && inputValue !== void 0 ? inputValue : '', readOnly: true, onChange: inputOnChange }),
+        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: `${inputValue !== null && inputValue !== void 0 ? inputValue : ''}`, readOnly: true, onChange: inputOnChange }),
         React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                 // Set value
                 setInputValue(value);
@@ -150,7 +150,7 @@ export function Tiplist(props) {
                 if (loading)
                     loadDataDirect(undefined, states.value == null
                         ? undefined
-                        : Reflect.get(states.value, idField));
+                        : states.value[idField]);
             }, onClose: () => {
                 stateUpdate({
                     open: false,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.73",
+    "version": "1.5.76",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -51,9 +51,9 @@
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.0",
         "@emotion/styled": "^11.10.0",
-        "@etsoo/appscript": "^1.2.77",
+        "@etsoo/appscript": "^1.2.79",
         "@etsoo/notificationbase": "^1.1.6",
-        "@etsoo/shared": "^1.1.45",
+        "@etsoo/shared": "^1.1.46",
         "@mui/icons-material": "^5.8.4",
         "@mui/material": "^5.10.1",
         "@types/pica": "^9.0.1",
@@ -75,14 +75,14 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.18.10",
-        "@babel/core": "^7.18.10",
+        "@babel/core": "^7.18.13",
         "@babel/plugin-transform-runtime": "^7.18.10",
         "@babel/preset-env": "^7.18.10",
         "@babel/runtime-corejs3": "^7.18.9",
         "@types/jest": "^28.1.7",
         "@types/react-test-renderer": "^18.0.0",
-        "@typescript-eslint/eslint-plugin": "^5.33.1",
-        "@typescript-eslint/parser": "^5.33.1",
+        "@typescript-eslint/eslint-plugin": "^5.34.0",
+        "@typescript-eslint/parser": "^5.34.0",
         "eslint": "^8.22.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",

package/src/mu/AutocompleteExtendedProps.ts

@@ -5,20 +5,22 @@ import { ChangeEventHandler } from 'react';
 /**
  * Autocomplete extended props
  */
-export interface AutocompleteExtendedProps<T extends Record<string, unknown>>
-    extends Omit<
+export interface AutocompleteExtendedProps<
+    T extends {},
+    D extends DataTypes.Keys<T>
+> extends Omit<
         AutocompleteProps<T, undefined, false, false>,
         'renderInput' | 'options'
     > {
     /**
      * Id field, default is id
      */
-    idField?: string & keyof T;
+    idField: D;
 
     /**
      * Id value
      */
-    idValue?: DataTypes.IdType;
+    idValue?: T[D];
 
     /**
      * Autocomplete for the input

package/src/mu/ComboBox.tsx

@@ -1,5 +1,4 @@
-import { IdLabelDto } from '@etsoo/appscript';
-import { Keyboard } from '@etsoo/shared';
+import { DataTypes, Keyboard } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
 import { Utils as SharedUtils } from '@etsoo/shared';
@@ -11,8 +10,10 @@ import { ReactUtils } from '../app/ReactUtils';
 /**
  * ComboBox props
  */
-export interface ComboBoxProps<T extends {}>
-    extends AutocompleteExtendedProps<T> {
+export interface ComboBoxProps<
+    T extends {},
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+> extends AutocompleteExtendedProps<T, D> {
     /**
      * Auto add blank item
      */
@@ -26,7 +27,7 @@ export interface ComboBoxProps<T extends {}>
     /**
      * Label field
      */
-    labelField?: string & keyof T;
+    labelField: D;
 
     /**
      * Load data callback
@@ -49,12 +50,15 @@ export interface ComboBoxProps<T extends {}>
  * @param props Props
  * @returns Component
  */
-export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
+export function ComboBox<
+    T extends {} = DataTypes.IdLabelItem,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+>(props: ComboBoxProps<T, D>) {
     // Destruct
     const {
         search = false,
         autoAddBlankItem = search,
-        idField = 'id',
+        idField,
         idValue,
         inputError,
         inputHelperText,
@@ -64,7 +68,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         inputVariant,
         defaultValue,
         label,
-        labelField = 'label',
+        labelField,
         loadData,
         onLoadData,
         name,
@@ -75,7 +79,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         onChange,
         openOnFocus = true,
         value,
-        getOptionLabel = (option: T) => String(Reflect.get(option, labelField)),
+        getOptionLabel = (option: T) => `${option[labelField]}`,
         sx = { minWidth: '150px' },
         ...rest
     } = props;
@@ -97,7 +101,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
     // Local default value
     let localValue =
         idValue != null
-            ? localOptions.find((o) => Reflect.get(o, idField) === idValue)
+            ? localOptions.find((o) => o[idField] === idValue)
             : defaultValue ?? value;
 
     if (localValue === undefined) localValue = null;
@@ -108,7 +112,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
 
     // Current id value
     // One time calculation for input's default value (uncontrolled)
-    const localIdValue = stateValue && Reflect.get(stateValue, idField);
+    const localIdValue = stateValue && stateValue[idField];
 
     React.useEffect(() => {
         if (localValue != null) setStateValue(localValue);
@@ -147,8 +151,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         const input = inputRef.current;
         if (input) {
             // Update value
-            const newValue =
-                value != null ? `${Reflect.get(value, idField)}` : '';
+            const newValue = value != null ? `${value[idField]}` : '';
 
             if (newValue !== input.value) {
                 // Different value, trigger change event
@@ -186,7 +189,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
                 type="text"
                 style={{ display: 'none' }}
                 name={name}
-                value={localIdValue ?? ''}
+                value={`${localIdValue ?? ''}`}
                 readOnly
                 onChange={inputOnChange}
             />
@@ -195,7 +198,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
                 value={stateValue}
                 getOptionLabel={getOptionLabel}
                 isOptionEqualToValue={(option: T, value: T) =>
-                    Reflect.get(option, idField) === Reflect.get(value, idField)
+                    option[idField] === value[idField]
                 }
                 onChange={(event, value, reason, details) => {
                     // Set value

package/src/mu/MUGlobal.ts

@@ -1,5 +1,6 @@
 import { NumberUtils } from '@etsoo/shared';
-import { Breakpoint, Theme } from '@mui/material';
+import { Breakpoint, ListItemButtonProps, Theme } from '@mui/material';
+import { RLink } from './RLink';
 
 /**
  * Mouse event handler with data
@@ -53,6 +54,39 @@ export class MUGlobal {
      */
     static pagePaddings = { xs: 2, sm: 3 };
 
+    /**
+     * Get menu item props
+     * @param path Current path
+     * @param href Item's href
+     * @returns Props
+     */
+    static getMenuItem(path: string, href: string) {
+        let selected = false;
+
+        if (path === href) {
+            // Exact match, most common case
+            selected = true;
+        } else if (href.endsWith('*')) {
+            href = href.slice(0, -1);
+            selected = path.startsWith(href);
+        } else if (href.endsWith('/all')) {
+            selected = path.startsWith(href.slice(0, -3));
+        }
+
+        return {
+            component: RLink,
+            selected,
+            href,
+            sx: {
+                ...(selected && {
+                    '.MuiListItemIcon-root': {
+                        color: (theme) => theme.palette.primary.main
+                    }
+                })
+            }
+        } as ListItemButtonProps;
+    }
+
     /**
      * Update object number properties with half of it
      * @param input Input object

package/src/mu/SelectBool.tsx

@@ -28,5 +28,11 @@ export function SelectBool(props: SelectBoolProps) {
     if (autoAddBlankItem) Utils.addBlankItem(options);
 
     // Layout
-    return <SelectEx options={options} search={search} {...rest} />;
+    return (
+        <SelectEx<IdLabelDto<string>>
+            options={options}
+            search={search}
+            {...rest}
+        />
+    );
 }

package/src/mu/SelectEx.tsx

@@ -11,25 +11,26 @@ import {
 } from '@mui/material';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
-import { IdLabelDto } from '@etsoo/appscript';
 import { ListItemRightIcon } from './ListItemRightIcon';
-import { Utils } from '@etsoo/shared';
+import { DataTypes, Utils } from '@etsoo/shared';
 import { ReactUtils } from '../app/ReactUtils';
 
 /**
  * Extended select component props
  */
-export interface SelectExProps<T extends {}>
-    extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
+export interface SelectExProps<
+    T extends {},
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+> extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
     /**
      * Auto add blank item
      */
     autoAddBlankItem?: boolean;
 
     /**
-     * Id field, default is id
+     * Id field
      */
-    idField?: string & keyof T;
+    idField: D;
 
     /**
      * Item icon renderer
@@ -37,9 +38,9 @@ export interface SelectExProps<T extends {}>
     itemIconRenderer?: (id: unknown) => React.ReactNode;
 
     /**
-     * Label field, default is label
+     * Label field
      */
-    labelField?: ((option: T) => string) | (string & keyof T);
+    labelField: ((option: T) => string) | D;
 
     /**
      * Load data callback
@@ -72,14 +73,17 @@ export interface SelectExProps<T extends {}>
  * @param props Props
  * @returns Component
  */
-export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
+export function SelectEx<
+    T extends {} = DataTypes.IdLabelItem,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+>(props: SelectExProps<T, D>) {
     // Destruct
     const {
         defaultValue,
-        idField = 'id',
+        idField,
         itemIconRenderer,
         label,
-        labelField = 'label',
+        labelField,
         loadData,
         onItemClick,
         onLoadData,
@@ -153,14 +157,14 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
 
     // Get option id
     const getId = (option: T) => {
-        return Reflect.get(option, idField);
+        return option[idField] as unknown as React.Key;
     };
 
     // Get option label
     const getLabel = (option: T) => {
         return typeof labelField === 'function'
             ? labelField(option)
-            : Reflect.get(option, labelField);
+            : new String(option[labelField]);
     };
 
     // Refs

package/src/mu/Tiplist.tsx

@@ -1,4 +1,3 @@
-import { IdLabelDto } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
@@ -11,14 +10,14 @@ import { SearchField } from './SearchField';
 /**
  * Tiplist props
  */
-export interface TiplistProps<T extends {}>
-    extends Omit<AutocompleteExtendedProps<T>, 'open'> {
+export interface TiplistProps<T extends {}, D extends DataTypes.Keys<T>>
+    extends Omit<AutocompleteExtendedProps<T, D>, 'open'> {
     /**
      * Load data callback
      */
     loadData: (
         keyword?: string,
-        id?: DataTypes.IdType
+        id?: T[D]
     ) => PromiseLike<T[] | null | undefined>;
 }
 
@@ -35,11 +34,13 @@ interface States<T extends {}> {
  * @param props Props
  * @returns Component
  */
-export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
+export function Tiplist<T extends {}, D extends DataTypes.Keys<T>>(
+    props: TiplistProps<T, D>
+) {
     // Destruct
     const {
         search = false,
-        idField = 'id',
+        idField,
         idValue,
         inputAutoComplete = 'off',
         inputError,
@@ -68,8 +69,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
     if (localValue === undefined) localValue = null;
 
     // One time calculation for input's default value (uncontrolled)
-    const localIdValue =
-        idValue ?? (localValue && Reflect.get(localValue, idField));
+    const localIdValue = idValue ?? (localValue && localValue[idField]);
 
     // Changable states
     const [states, stateUpdate] = React.useReducer(
@@ -86,7 +86,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
 
     // Input value
     const inputValue = React.useMemo(
-        () => states.value && Reflect.get(states.value, idField),
+        () => states.value && states.value[idField],
         [states.value]
     );
 
@@ -130,7 +130,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
     };
 
     // Directly load data
-    const loadDataDirect = (keyword?: string, id?: DataTypes.IdType) => {
+    const loadDataDirect = (keyword?: string, id?: T[D]) => {
         // Reset options
         // setOptions([]);
 
@@ -181,7 +181,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
         }
     };
 
-    if (localIdValue != null && localIdValue !== '') {
+    if (localIdValue != null && (localIdValue as any) !== '') {
         if (state.idLoaded) {
             // Set default
             if (!state.idSet && states.options.length == 1) {
@@ -211,7 +211,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
                 type="text"
                 style={{ display: 'none' }}
                 name={name}
-                value={inputValue ?? ''}
+                value={`${inputValue ?? ''}`}
                 readOnly
                 onChange={inputOnChange}
             />
@@ -250,7 +250,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
                             undefined,
                             states.value == null
                                 ? undefined
-                                : Reflect.get(states.value, idField)
+                                : states.value[idField]
                         );
                 }}
                 onClose={() => {
@@ -291,7 +291,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
                         />
                     )
                 }
-                isOptionEqualToValue={(option: any, value: any) =>
+                isOptionEqualToValue={(option: T, value: T) =>
                     option[idField] === value[idField]
                 }
                 {...rest}