@etsoo/react 1.5.74 → 1.5.77

package/lib/components/ScrollerGrid.d.ts

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import React from 'react';
 import { Align, GridChildComponentProps, VariableSizeGridProps } from 'react-window';
 import { GridMethodRef } from '../mu/GridMethodRef';
@@ -15,7 +16,7 @@ export interface ScrollerGridItemRendererProps<T> extends Omit<GridChildComponen
 /**
  * Scroller vertical grid props
  */
-export interface ScrollerGridProps<T> extends GridLoader<T>, Omit<VariableSizeGridProps<T>, 'children' | 'rowCount' | 'rowHeight' | 'ref'> {
+export interface ScrollerGridProps<T extends {}, D extends DataTypes.Keys<T> = DataTypes.Keys<T>> extends GridLoader<T>, Omit<VariableSizeGridProps<T>, 'children' | 'rowCount' | 'rowHeight' | 'ref'> {
     /**
      * Default order by asc
      * @default true
@@ -33,7 +34,7 @@ export interface ScrollerGridProps<T> extends GridLoader<T>, Omit<VariableSizeGr
      * Id field
      * @default id
      */
-    idField?: string & keyof T;
+    idField?: D;
     /**
      * Item renderer
      */
@@ -109,4 +110,4 @@ export interface ScrollerGridForwardRef extends GridMethodRef {
  * @param props Props
  * @returns Component
  */
-export declare const ScrollerGrid: <T extends Record<string, unknown>>(props: ScrollerGridProps<T>) => JSX.Element;
+export declare const ScrollerGrid: <T extends Record<string, unknown>>(props: ScrollerGridProps<T, DataTypes.Keys<T, string | number>>) => JSX.Element;

package/lib/components/ScrollerList.d.ts

@@ -59,5 +59,5 @@ export interface ScrollerListForwardRef extends GridMethodRef, ScrollerListRef {
  * @param props Props
  * @returns Component
  */
-export declare const ScrollerList: <T extends Record<string, any>>(props: ScrollerListProps<T>) => JSX.Element;
+export declare const ScrollerList: <T extends {}>(props: ScrollerListProps<T>) => JSX.Element;
 export {};

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: T extends DataTypes.IdLabelItem ? D | undefined : 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: T extends DataTypes.IdLabelItem ? D | undefined : 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 = '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) => `${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/DataGridEx.d.ts

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import React from 'react';
 import { GridColumn } from '../components/GridColumn';
 import { GridLoaderStates } from '../components/GridLoader';
@@ -6,7 +7,7 @@ import { MouseEventWithDataHandler } from './MUGlobal';
 /**
  * Footer item renderer props
  */
-export interface DataGridExFooterItemRendererProps<T extends Record<string, any>> {
+export interface DataGridExFooterItemRendererProps<T extends {}> {
     column: GridColumn<T>;
     index: number;
     states: GridLoaderStates<T>;
@@ -16,7 +17,7 @@ export interface DataGridExFooterItemRendererProps<T extends Record<string, any>
 /**
  * Extended DataGrid with VariableSizeGrid props
  */
-export interface DataGridExProps<T extends Record<string, any>> extends Omit<ScrollerGridProps<T>, 'itemRenderer' | 'columnCount' | 'columnWidth' | 'width'> {
+export interface DataGridExProps<T extends {}, D extends DataTypes.Keys<T> = DataTypes.Keys<T>> extends Omit<ScrollerGridProps<T, D>, 'itemRenderer' | 'columnCount' | 'columnWidth' | 'width'> {
     /**
      * Alternating colors for odd/even rows
      */
@@ -92,4 +93,4 @@ export declare function DataGridExCalColumns<T>(columns: GridColumn<T>[]): {
  * @param props Props
  * @returns Component
  */
-export declare function DataGridEx<T extends Record<string, any>>(props: DataGridExProps<T>): JSX.Element;
+export declare function DataGridEx<T extends {}, D extends DataTypes.Keys<T> = DataTypes.Keys<T>>(props: DataGridExProps<T, D>): JSX.Element;

package/lib/mu/OptionGroup.d.ts

@@ -1,15 +1,14 @@
 /// <reference types="react" />
-import { IdLabelDto } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
 import { FormControlProps } from '@mui/material';
 /**
  * OptionGroup props
  */
-export interface OptionGroupProps<T extends Record<string, any> = IdLabelDto, D extends DataTypes.IdType = string> extends Omit<FormControlProps<'fieldset'>, 'defaultValue'> {
+export interface OptionGroupProps<T extends {} = DataTypes.IdLabelItem, D extends DataTypes.Keys<T> = DataTypes.Keys<T>> extends Omit<FormControlProps<'fieldset'>, 'defaultValue'> {
     /**
      * Default value
      */
-    defaultValue?: D | D[];
+    defaultValue?: T[D] | T[D][];
     /**
      * Get option label function
      */
@@ -17,7 +16,7 @@ export interface OptionGroupProps<T extends Record<string, any> = IdLabelDto, D
     /**
      * Id field, default is id
      */
-    idField?: string & keyof T;
+    idField: T extends DataTypes.IdLabelItem ? D | undefined : D;
     /**
      * Label
      */
@@ -25,7 +24,7 @@ export interface OptionGroupProps<T extends Record<string, any> = IdLabelDto, D
     /**
      * Label field, default is label
      */
-    labelField?: string & keyof T;
+    labelField: T extends DataTypes.IdLabelItem ? D | undefined : D;
     /**
      * Multiple choose item
      */
@@ -37,7 +36,7 @@ export interface OptionGroupProps<T extends Record<string, any> = IdLabelDto, D
     /**
      * On value change handler
      */
-    onValueChange?: (value: D | D[] | undefined) => void;
+    onValueChange?: (value: T[D] | T[D][] | undefined) => void;
     /**
      * Array of options.
      */
@@ -56,4 +55,4 @@ export interface OptionGroupProps<T extends Record<string, any> = IdLabelDto, D
  * @param props Props
  * @returns Component
  */
-export declare function OptionGroup<T extends Record<string, unknown> = IdLabelDto, D extends DataTypes.IdType = string>(props: OptionGroupProps<T, D>): JSX.Element;
+export declare function OptionGroup<T extends {} = DataTypes.IdLabelItem, D extends DataTypes.Keys<T> = DataTypes.Keys<T>>(props: OptionGroupProps<T, D>): JSX.Element;

package/lib/mu/ResponsibleContainer.d.ts

@@ -10,7 +10,7 @@ import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from './
 /**
  * ResponsibleContainer props
  */
-export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate> extends Omit<DataGridExProps<T>, 'height' | 'itemKey' | 'loadData' | 'mRef' | 'onScroll' | 'onItemsRendered'> {
+export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = DataTypes.Keys<T>> extends Omit<DataGridExProps<T, D>, 'height' | 'itemKey' | 'loadData' | 'mRef' | 'onScroll' | 'onItemsRendered'> {
     /**
      * Height will be deducted
      * @param height Current calcuated height
@@ -86,4 +86,4 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
  * @param props Props
  * @returns Layout
  */
-export declare function ResponsibleContainer<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ResponsibleContainerProps<T, F>): JSX.Element;
+export declare function ResponsibleContainer<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = DataTypes.Keys<T>>(props: ResponsibleContainerProps<T, F, D>): JSX.Element;

package/lib/mu/ScrollerListEx.d.ts

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { ScrollerListProps } from '../components/ScrollerList';
@@ -33,7 +34,7 @@ export declare type ScrollerListExItemSize = ((index: number) => [number, number
 /**
  * Extended ScrollerList Props
  */
-export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> {
+export interface ScrollerListExProps<T extends {}, D extends DataTypes.Keys<T> = DataTypes.Keys<T>> extends Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> {
     /**
      * Alternating colors for odd/even rows
      */
@@ -41,7 +42,7 @@ export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'item
     /**
      * Id field
      */
-    idField?: string & keyof T;
+    idField?: D;
     /**
      * Inner item renderer
      */
@@ -76,4 +77,4 @@ export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'item
  * @param props Props
  * @returns Component
  */
-export declare function ScrollerListEx<T extends Record<string, unknown>>(props: ScrollerListExProps<T>): JSX.Element;
+export declare function ScrollerListEx<T extends {}, D extends DataTypes.Keys<T> = DataTypes.Keys<T>>(props: ScrollerListExProps<T, D>): JSX.Element;

package/lib/mu/ScrollerListEx.js

@@ -112,7 +112,7 @@ export function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => { var _a; return (_a = DataTypes.getValue(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemRenderer = (itemProps) => {
+    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => { var _a; return (_a = DataTypes.getIdValue1(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemRenderer = (itemProps) => {
         const [itemHeight, space, margins] = calculateItemSize(itemProps.index);
         return defaultItemRenderer({
             itemHeight,

package/lib/mu/SearchOptionGroup.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { IdLabelDto } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
 import { OptionGroupProps } from './OptionGroup';
 /**
@@ -7,4 +6,4 @@ import { OptionGroupProps } from './OptionGroup';
  * @param props Props
  * @returns Component
  */
-export declare function SearchOptionGroup<T extends Record<string, any> = IdLabelDto, D extends DataTypes.IdType = string>(props: OptionGroupProps<T, D>): JSX.Element;
+export declare function SearchOptionGroup<T extends {} = DataTypes.IdLabelItem, D extends DataTypes.Keys<T> = DataTypes.Keys<T>>(props: OptionGroupProps<T, D>): JSX.Element;

package/lib/mu/SelectBool.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { IdLabelDto } from '@etsoo/appscript';
+import { DataTypes } from '@etsoo/shared';
 import { SelectExProps } from './SelectEx';
 /**
  * SelectBool props
  */
-export interface SelectBoolProps extends Omit<SelectExProps<IdLabelDto<string>>, 'options' | 'loadData'> {
+export interface SelectBoolProps extends Omit<SelectExProps<DataTypes.IdLabelItem<string>>, 'options' | 'loadData'> {
 }
 /**
  * SelectBool (yes/no)

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: T extends DataTypes.IdLabelItem ? D | undefined : 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) | (T extends DataTypes.IdLabelItem ? D | undefined : 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

@@ -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/TableEx.d.ts

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import { TableProps } from '@mui/material';
 import React from 'react';
 import { GridColumn } from '../components/GridColumn';
@@ -19,7 +20,7 @@ export interface TableExMethodRef extends GridMethodRef {
 /**
  * Extended table props
  */
-export interface TableExProps<T extends Record<string, any>> extends TableProps, GridLoader<T> {
+export interface TableExProps<T extends {}, D extends DataTypes.Keys<T> = DataTypes.Keys<T>> extends TableProps, GridLoader<T> {
     /**
      * Alternating colors for odd/even rows
      */
@@ -35,7 +36,7 @@ export interface TableExProps<T extends Record<string, any>> extends TableProps,
     /**
      * Id field
      */
-    idField?: string & keyof T;
+    idField?: D;
     /**
      * Max height
      */
@@ -62,4 +63,4 @@ export interface TableExProps<T extends Record<string, any>> extends TableProps,
  * @param props Props
  * @returns Component
  */
-export declare function TableEx<T extends Record<string, unknown>>(props: TableExProps<T>): JSX.Element;
+export declare function TableEx<T extends {}, D extends DataTypes.Keys<T> = DataTypes.Keys<T>>(props: TableExProps<T, D>): JSX.Element;

package/lib/mu/TableEx.js

@@ -259,8 +259,7 @@ export function TableEx(props) {
                                 columnIndex,
                                 cellProps
                             })) : (React.createElement(React.Fragment, null, "\u00A0"));
-                            return (React.createElement(TableCell, { key: rowId.toString() +
-                                    columnIndex, ...cellProps }, child));
+                            return (React.createElement(TableCell, { key: `${rowId}${columnIndex}`, ...cellProps }, child));
                         })));
                 })))),
         React.createElement(TablePagination, { component: "div", showFirstButton: true, count: totalRows, rowsPerPage: batchSize, page: currentPage, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, rowsPerPageOptions: [

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 {} = DataTypes.IdLabelItem, D extends DataTypes.Keys<T> = DataTypes.Keys<T>>(props: TiplistProps<T, D>): JSX.Element;

package/lib/mu/Tiplist.js

@@ -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 : DataTypes.getValue(localValue, idField !== null && idField !== void 0 ? idField : 'id');
     // 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.74",
+    "version": "1.5.77",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -51,11 +51,11 @@
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.0",
         "@emotion/styled": "^11.10.0",
-        "@etsoo/appscript": "^1.2.77",
+        "@etsoo/appscript": "^1.2.81",
         "@etsoo/notificationbase": "^1.1.6",
-        "@etsoo/shared": "^1.1.45",
-        "@mui/icons-material": "^5.8.4",
-        "@mui/material": "^5.10.1",
+        "@etsoo/shared": "^1.1.47",
+        "@mui/icons-material": "^5.10.2",
+        "@mui/material": "^5.10.2",
         "@types/pica": "^9.0.1",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/react": "^18.0.17",
@@ -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/components/ScrollerGrid.tsx

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import React from 'react';
 import {
     Align,
@@ -25,8 +26,10 @@ export interface ScrollerGridItemRendererProps<T>
 /**
  * Scroller vertical grid props
  */
-export interface ScrollerGridProps<T>
-    extends GridLoader<T>,
+export interface ScrollerGridProps<
+    T extends {},
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+> extends GridLoader<T>,
         Omit<
             VariableSizeGridProps<T>,
             'children' | 'rowCount' | 'rowHeight' | 'ref'
@@ -54,7 +57,7 @@ export interface ScrollerGridProps<T>
      * Id field
      * @default id
      */
-    idField?: string & keyof T;
+    idField?: D;
 
     /**
      * Item renderer

package/src/components/ScrollerList.tsx

@@ -98,9 +98,7 @@ const calculateBatchSize = (
  * @param props Props
  * @returns Component
  */
-export const ScrollerList = <T extends Record<string, any>>(
-    props: ScrollerListProps<T>
-) => {
+export const ScrollerList = <T extends {}>(props: ScrollerListProps<T>) => {
     // Destruct
     const {
         autoLoad = true,

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: T extends DataTypes.IdLabelItem ? D | undefined : D;
 
     /**
      * Id value
      */
-    idValue?: DataTypes.IdType;
+    idValue?: T[D];
 
     /**
      * Autocomplete for the input