@etsoo/react 1.3.96 → 1.4.0

package/lib/components/ScrollerGrid.d.ts

@@ -33,7 +33,7 @@ export interface ScrollerGridProps<T> extends GridLoader<T>, Omit<VariableSizeGr
      * Id field
      * @default id
      */
-    idField?: string;
+    idField?: keyof T;
     /**
      * Item renderer
      */
@@ -109,4 +109,4 @@ export interface ScrollerGridForwardRef extends GridMethodRef {
  * @param props Props
  * @returns Component
  */
-export declare const ScrollerGrid: <T extends Record<string, any>>(props: ScrollerGridProps<T>) => JSX.Element;
+export declare const ScrollerGrid: <T extends Record<string, unknown>>(props: ScrollerGridProps<T>) => JSX.Element;

package/lib/mu/AutocompleteExtendedProps.d.ts

@@ -4,11 +4,11 @@ import { ChangeEventHandler } from 'react';
 /**
  * Autocomplete extended props
  */
-export interface AutocompleteExtendedProps<T extends Record<string, any>> extends Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput' | 'options'> {
+export interface AutocompleteExtendedProps<T extends Record<string, unknown>> extends Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput' | 'options'> {
     /**
      * Id field, default is id
      */
-    idField?: string;
+    idField?: keyof T;
     /**
      * Id value
      */

package/lib/mu/ComboBox.d.ts

@@ -8,7 +8,7 @@ export interface ComboBoxProps<T extends {}> extends AutocompleteExtendedProps<T
     /**
      * Label field
      */
-    labelField?: string;
+    labelField?: keyof T;
     /**
      * Load data callback
      */

package/lib/mu/ComboBox.js

@@ -52,9 +52,7 @@ export function ComboBox(props) {
         const input = inputRef.current;
         if (input) {
             // Update value
-            const newValue = value != null && idField in value
-                ? `${Reflect.get(value, idField)}`
-                : '';
+            const newValue = value != null ? `${Reflect.get(value, idField)}` : '';
             if (newValue !== input.value) {
                 // Different value, trigger change event
                 Utils.triggerChange(input, newValue, false);

package/lib/mu/DataGridEx.js

@@ -244,7 +244,6 @@ export function DataGridEx(props) {
         }
         // Selected
         const selected = data != null &&
-            idField in data &&
             (selectedRowIndex.current === rowIndex ||
                 selectedItems.some((selectedItem) => selectedItem != null &&
                     selectedItem[idField] === data[idField]));

package/lib/mu/DnDList.d.ts

@@ -6,7 +6,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Item renderer
      */
-    children: (item: D, index: number, onDelete: (index: number) => void) => React.ReactNode;
+    children: (item: D, index: number, deleteItem: (index: number) => void, editItem: (newItem: D, indexOrLabel: number | string) => void) => React.ReactNode;
     /**
      * List container component
      * https://javascript.plainenglish.io/building-a-polymorphic-component-in-react-and-typescript-d9f236950af4
@@ -19,7 +19,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Get list item style callback
      */
-    getItemStyle?: (isDragging: boolean) => CSSProperties;
+    getItemStyle?: (isDragging: boolean, index: number) => CSSProperties;
     /**
      * Get list style callback
      */
@@ -35,7 +35,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Top and bottom sides renderer
      */
-    sideRenderer?: (top: boolean, onAdd: (item: D) => boolean) => React.ReactNode;
+    sideRenderer?: (top: boolean, addItem: (item: D) => boolean, addItems: (items: D[]) => number) => React.ReactNode;
     /**
      * Name for hidden form input
      */
@@ -43,6 +43,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
 }
 /**
  * Drag and drop list
+ * https://github.com/atlassian/react-beautiful-dnd
  * @param props Props
  * @returns Component
  */

package/lib/mu/DnDList.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 /**
  * Drag and drop list
+ * https://github.com/atlassian/react-beautiful-dnd
  * @param props Props
  * @returns Component
  */
@@ -13,7 +14,6 @@ export function DnDList(props) {
     const [items, setItems] = React.useState([]);
     // Drag end handler
     const onDragEnd = (result) => {
-        console.log(result);
         // Dropped outside the list
         if (!result.destination) {
             return;
@@ -27,8 +27,8 @@ export function DnDList(props) {
         // Update the state
         setItems(newItems);
     };
-    // Add handler
-    const onAdd = (newItem) => {
+    // Add item
+    const addItem = (newItem) => {
         // Existence check
         if (items.some((item) => item[labelField] == newItem[labelField])) {
             return false;
@@ -39,8 +39,39 @@ export function DnDList(props) {
         setItems(newItems);
         return true;
     };
-    // Delete handler
-    const onDelete = (index) => {
+    // Edit item
+    const editItem = (newItem, indexOrLabel) => {
+        const index = typeof indexOrLabel === 'number'
+            ? indexOrLabel
+            : items.findIndex((item) => DataTypes.convert(item[labelField], 'string') ==
+                indexOrLabel);
+        if (index === -1)
+            return;
+        // Clone
+        const newItems = [...items];
+        // Remove the item
+        newItems.splice(index, 1, newItem);
+        // Update the state
+        setItems(newItems);
+    };
+    // Add items
+    const addItems = (inputItems) => {
+        // Clone
+        const newItems = [...items];
+        // Insert items
+        inputItems.forEach((newItem) => {
+            // Existence check
+            if (newItems.some((item) => item[labelField] == newItem[labelField])) {
+                return;
+            }
+            newItems.push(newItem);
+        });
+        // Update the state
+        setItems(newItems);
+        return newItems.length - items.length;
+    };
+    // Delete item
+    const deleteItem = (index) => {
         // Clone
         const newItems = [...items];
         // Remove the item
@@ -53,7 +84,7 @@ export function DnDList(props) {
     }, [name]);
     // Layout
     return (React.createElement(React.Fragment, null,
-        sideRenderer && sideRenderer(true, onAdd),
+        sideRenderer && sideRenderer(true, addItem, addItems),
         React.createElement(Component, { ...componentProps },
             React.createElement(DragDropContext, { onDragEnd: onDragEnd },
                 React.createElement(Droppable, { droppableId: name }, (provided, snapshot) => (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, style: getListStyle(snapshot.isDraggingOver) },
@@ -63,12 +94,12 @@ export function DnDList(props) {
                         if (id == null)
                             return;
                         return (React.createElement(Draggable, { key: id, draggableId: id, index: index }, (provided, snapshot) => (React.createElement("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
-                                ...getItemStyle(snapshot.isDragging),
+                                ...getItemStyle(snapshot.isDragging, index),
                                 ...provided
                                     .draggableProps
                                     .style
-                            } }, children(item, index, onDelete)))));
+                            } }, children(item, index, deleteItem, editItem)))));
                     }),
                     provided.placeholder))))),
-        sideRenderer && sideRenderer(false, onAdd)));
+        sideRenderer && sideRenderer(false, addItem, addItems)));
 }

package/lib/mu/ItemList.d.ts

@@ -1,14 +1,8 @@
 import React from 'react';
-/**
- * Item list label callback
- */
-export interface ItemListLabel {
-    (item: any): string;
-}
 /**
  * Item list properties
  */
-export interface ItemListProps {
+export interface ItemListProps<T extends Record<string, unknown>> {
     /**
      * Style class name
      */
@@ -16,11 +10,11 @@ export interface ItemListProps {
     /**
      * Id field name
      */
-    idField?: string;
+    idField?: keyof T;
     /**
      * Label field name or callback
      */
-    labelField?: string | ItemListLabel;
+    labelField?: keyof T | ((item: T) => string);
     /**
      * Button icon
      */
@@ -32,7 +26,7 @@ export interface ItemListProps {
     /**
      * Close event
      */
-    onClose?(item: any, changed: boolean): void;
+    onClose?(item: T, changed: boolean): void;
     /**
      * Current selected language
      */
@@ -48,7 +42,7 @@ export interface ItemListProps {
     /**
      * Items
      */
-    items: any[];
+    items: T[];
     /**
      * Button variant
      */
@@ -58,4 +52,4 @@ export interface ItemListProps {
  * Item list component
  * @param props Properties
  */
-export declare function ItemList(props: ItemListProps): JSX.Element;
+export declare function ItemList<T extends Record<string, unknown> = Record<string, unknown>>(props: ItemListProps<T>): JSX.Element;

package/lib/mu/ItemList.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Dialog, DialogTitle, List, ListItem, ListItemText, DialogContent, Button } from '@mui/material';
+import { DataTypes } from '@etsoo/shared';
 /**
  * Item list component
  * @param props Properties
@@ -10,15 +11,20 @@ export function ItemList(props) {
     const { className, color = 'primary', items, idField = 'id', labelField = 'label', icon, onClose, selectedValue, size = 'medium', title, variant = 'outlined' } = props;
     // Get id
     const getId = (item) => {
-        return item[idField];
+        var _a;
+        const id = item[idField];
+        if (typeof id === 'number')
+            return id;
+        return (_a = DataTypes.convert(id, 'string')) !== null && _a !== void 0 ? _a : '';
     };
     // Get label
     const getLabel = (item) => {
+        var _a;
         if (typeof labelField === 'function') {
             return labelField(item);
         }
         else {
-            return item[labelField];
+            return (_a = DataTypes.convert(item[labelField], 'string')) !== null && _a !== void 0 ? _a : '';
         }
     };
     // Dialog open or not state

package/lib/mu/OptionGroup.d.ts

@@ -17,7 +17,7 @@ export interface OptionGroupProps<T extends Record<string, any> = IdLabelDto, D
     /**
      * Id field, default is id
      */
-    idField?: string;
+    idField?: keyof T;
     /**
      * Label
      */
@@ -25,7 +25,7 @@ export interface OptionGroupProps<T extends Record<string, any> = IdLabelDto, D
     /**
      * Label field, default is label
      */
-    labelField?: string;
+    labelField?: keyof T;
     /**
      * Multiple choose item
      */
@@ -56,4 +56,4 @@ export interface OptionGroupProps<T extends Record<string, any> = IdLabelDto, D
  * @param props Props
  * @returns Component
  */
-export declare function OptionGroup<T extends Record<string, any> = IdLabelDto, D extends DataTypes.IdType = string>(props: OptionGroupProps<T, D>): JSX.Element;
+export declare function OptionGroup<T extends Record<string, unknown> = IdLabelDto, D extends DataTypes.IdType = string>(props: OptionGroupProps<T, D>): JSX.Element;

package/lib/mu/OptionGroup.js

@@ -1,4 +1,4 @@
-import { Utils } from '@etsoo/shared';
+import { DataTypes, Utils } from '@etsoo/shared';
 import { Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Radio, RadioGroup } from '@mui/material';
 import React from 'react';
 /**
@@ -10,8 +10,12 @@ export function OptionGroup(props) {
     // Destruct
     const { getOptionLabel, defaultValue, idField = 'id', label, labelField = 'label', multiple = false, name, onValueChange, options, readOnly, row, size, ...rest } = props;
     // Get option value
+    // D type should be the source id type
     const getOptionValue = (option) => {
-        return option[idField];
+        const value = DataTypes.getIdValue(option, idField);
+        if (value == null)
+            return null;
+        return value;
     };
     // Checkbox values
     const [values, setValues] = React.useState(defaultValue == null
@@ -27,11 +31,15 @@ export function OptionGroup(props) {
             return false;
         return values.includes(value);
     };
+    // First item value
+    const firstOptionValue = getOptionValue(options[0]);
     // Items
     const list = options.map((option) => {
         // Control
         const control = multiple ? (React.createElement(Checkbox, { name: name, readOnly: readOnly, size: size, checked: itemChecked(option), onChange: (event) => {
-                const typeValue = Utils.parseString(event.target.value, options[0][idField]);
+                if (firstOptionValue == null)
+                    return;
+                const typeValue = Utils.parseString(event.target.value, firstOptionValue);
                 const changedValues = [...values];
                 if (event.target.checked) {
                     if (changedValues.includes(typeValue))
@@ -59,7 +67,9 @@ export function OptionGroup(props) {
     });
     // Group
     const group = multiple ? (React.createElement(FormGroup, { row: row }, list)) : (React.createElement(RadioGroup, { row: row, name: name, value: defaultValue, onChange: (_event, value) => {
-            const typeValue = Utils.parseString(value, options[0][idField]);
+            if (firstOptionValue == null)
+                return;
+            const typeValue = Utils.parseString(value, firstOptionValue);
             if (onValueChange)
                 onValueChange(typeValue);
         } }, list));

package/lib/mu/ScrollerListEx.d.ts

@@ -25,7 +25,7 @@ export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'item
     /**
      * Id field
      */
-    idField?: string;
+    idField?: keyof T;
     /**
      * Inner item renderer
      */
@@ -48,4 +48,4 @@ export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'item
  * @param props Props
  * @returns Component
  */
-export declare function ScrollerListEx<T extends Record<string, any>>(props: ScrollerListExProps<T>): JSX.Element;
+export declare function ScrollerListEx<T extends Record<string, unknown>>(props: ScrollerListExProps<T>): JSX.Element;

package/lib/mu/ScrollerListEx.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { Utils } from '@etsoo/shared';
+import { DataTypes, Utils } from '@etsoo/shared';
 import React from 'react';
 import { ScrollerList } from '../components/ScrollerList';
 // Scroll bar size
@@ -82,7 +82,7 @@ export function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => data != null && idField in data ? data[idField] : index, itemRenderer = (itemProps) => {
+    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => { var _a; return (_a = DataTypes.getIdValue(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemRenderer = (itemProps) => {
         const itemHeight = typeof itemSize === 'function'
             ? itemSize(itemProps.index)
             : itemSize;

package/lib/mu/SelectEx.d.ts

@@ -8,7 +8,7 @@ export interface SelectExProps<T extends {}> extends Omit<SelectProps, 'labelId'
     /**
      * Id field, default is id
      */
-    idField?: string;
+    idField?: keyof T;
     /**
      * Item icon renderer
      */
@@ -16,7 +16,7 @@ export interface SelectExProps<T extends {}> extends Omit<SelectProps, 'labelId'
     /**
      * Label field, default is label
      */
-    labelField?: ((option: T) => string) | string;
+    labelField?: ((option: T) => string) | keyof T;
     /**
      * Load data callback
      */

package/lib/mu/TableEx.d.ts

@@ -35,7 +35,7 @@ export interface TableExProps<T extends Record<string, any>> extends TableProps,
     /**
      * Id field
      */
-    idField?: string;
+    idField?: keyof T;
     /**
      * Max height
      */
@@ -62,4 +62,4 @@ export interface TableExProps<T extends Record<string, any>> extends TableProps,
  * @param props Props
  * @returns Component
  */
-export declare function TableEx<T extends Record<string, any>>(props: TableExProps<T>): JSX.Element;
+export declare function TableEx<T extends Record<string, unknown>>(props: TableExProps<T>): JSX.Element;

package/lib/mu/TableEx.js

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import { Checkbox, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, useTheme } from '@mui/material';
 import React from 'react';
 import { GridAlignGet } from '../components/GridColumn';
@@ -220,12 +221,13 @@ export function TableEx(props) {
                             backgroundColor: alternatingColors[1]
                         }
                     } }, [...Array(batchSize)].map((_item, rowIndex) => {
+                    var _a;
                     // Row
                     const row = rowIndex < rows.length
                         ? rows[rowIndex]
                         : undefined;
                     // Row id field value
-                    const rowId = row == null ? rowIndex : row[idField];
+                    const rowId = (_a = DataTypes.getIdValue(row, idField)) !== null && _a !== void 0 ? _a : rowIndex;
                     // Selected or not
                     const isItemSelected = selectable
                         ? selectedItems.some((item) => item[idField] === rowId)
@@ -255,7 +257,8 @@ export function TableEx(props) {
                                 columnIndex,
                                 cellProps
                             })) : (React.createElement(React.Fragment, null, "\u00A0"));
-                            return (React.createElement(TableCell, { key: rowId + columnIndex, ...cellProps }, child));
+                            return (React.createElement(TableCell, { key: rowId.toString() +
+                                    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.js

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import { Autocomplete } from '@mui/material';
 import React from 'react';
 import { Utils } from '../app/Utils';
@@ -94,14 +95,13 @@ export function Tiplist(props) {
         });
     };
     const setInputValue = (value) => {
+        var _a;
         stateUpdate({ value });
         // Input value
         const input = inputRef.current;
         if (input) {
             // Update value
-            const newValue = value != null && idField in value
-                ? `${Reflect.get(value, idField)}`
-                : '';
+            const newValue = (_a = DataTypes.getStringValue(value, idField)) !== null && _a !== void 0 ? _a : '';
             if (newValue !== input.value) {
                 // Different value, trigger change event
                 Utils.triggerChange(input, newValue, false);

package/lib/mu/pages/EditPage.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Labels } from '../../app/Labels';
 import { MUGlobal } from '../MUGlobal';
 import { CommonPage, CommonPageScrollContainer } from './CommonPage';
-import EditIcon from '@mui/icons-material/Edit';
+import SaveIcon from '@mui/icons-material/Save';
 /**
  * Edit page
  * @param props Props
@@ -21,5 +21,5 @@ export function EditPage(props) {
                     bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
                     paddingTop: paddings
                 } },
-                React.createElement(Button, { variant: "contained", type: "submit", fullWidth: true, startIcon: React.createElement(EditIcon, null) }, labels.save)))));
+                React.createElement(Button, { variant: "contained", type: "submit", fullWidth: true, startIcon: React.createElement(SaveIcon, null) }, labels.save)))));
 }

package/lib/mu/pages/FixedListPage.d.ts

@@ -6,7 +6,7 @@ import { ListPageProps } from './ListPageProps';
  * @param props Props
  * @returns Component
  */
-export declare function FixedListPage<T, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListPageProps<T, F> & {
+export declare function FixedListPage<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListPageProps<T, F> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height

package/lib/mu/pages/ListPage.d.ts

@@ -6,4 +6,4 @@ import { ListPageProps } from './ListPageProps';
  * @param props Props
  * @returns Component
  */
-export declare function ListPage<T, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListPageProps<T, F>): JSX.Element;
+export declare function ListPage<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ListPageProps<T, F>): JSX.Element;

package/lib/mu/pages/ResponsivePage.d.ts

@@ -6,4 +6,4 @@ import { ResponsePageProps } from './ResponsivePageProps';
  * @param props Props
  * @returns Component
  */
-export declare function ResponsivePage<T, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ResponsePageProps<T, F>): JSX.Element;
+export declare function ResponsivePage<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ResponsePageProps<T, F>): JSX.Element;

package/lib/mu/pages/TablePage.d.ts

@@ -6,4 +6,4 @@ import { TablePageProps } from './TablePageProps';
  * @param props Props
  * @returns Component
  */
-export declare function TablePage<T, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: TablePageProps<T, F>): JSX.Element;
+export declare function TablePage<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: TablePageProps<T, F>): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.3.96",
+    "version": "1.4.0",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -52,7 +52,7 @@
         "@emotion/styled": "^11.6.0",
         "@etsoo/appscript": "^1.2.11",
         "@etsoo/notificationbase": "^1.0.95",
-        "@etsoo/shared": "^1.0.95",
+        "@etsoo/shared": "^1.0.97",
         "@mui/icons-material": "^5.2.5",
         "@mui/material": "^5.2.6",
         "@reach/router": "^1.3.4",

package/src/components/ScrollerGrid.tsx

@@ -51,7 +51,7 @@ export interface ScrollerGridProps<T>
      * Id field
      * @default id
      */
-    idField?: string;
+    idField?: keyof T;
 
     /**
      * Item renderer
@@ -140,7 +140,7 @@ export interface ScrollerGridForwardRef extends GridMethodRef {
  * @param props Props
  * @returns Component
  */
-export const ScrollerGrid = <T extends Record<string, any>>(
+export const ScrollerGrid = <T extends Record<string, unknown>>(
     props: ScrollerGridProps<T>
 ) => {
     // Destruct

package/src/mu/AutocompleteExtendedProps.ts

@@ -5,7 +5,7 @@ import { ChangeEventHandler } from 'react';
 /**
  * Autocomplete extended props
  */
-export interface AutocompleteExtendedProps<T extends Record<string, any>>
+export interface AutocompleteExtendedProps<T extends Record<string, unknown>>
     extends Omit<
         AutocompleteProps<T, undefined, false, false>,
         'renderInput' | 'options'
@@ -13,7 +13,7 @@ export interface AutocompleteExtendedProps<T extends Record<string, any>>
     /**
      * Id field, default is id
      */
-    idField?: string;
+    idField?: keyof T;
 
     /**
      * Id value

package/src/mu/ComboBox.tsx

@@ -14,7 +14,7 @@ export interface ComboBoxProps<T extends {}>
     /**
      * Label field
      */
-    labelField?: string;
+    labelField?: keyof T;
 
     /**
      * Load data callback
@@ -118,9 +118,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         if (input) {
             // Update value
             const newValue =
-                value != null && idField in value
-                    ? `${Reflect.get(value, idField)}`
-                    : '';
+                value != null ? `${Reflect.get(value, idField)}` : '';
 
             if (newValue !== input.value) {
                 // Different value, trigger change event

package/src/mu/DataGridEx.tsx

@@ -539,7 +539,6 @@ export function DataGridEx<T extends Record<string, any>>(
         // Selected
         const selected =
             data != null &&
-            idField in data &&
             (selectedRowIndex.current === rowIndex ||
                 selectedItems.some(
                     (selectedItem) =>

package/src/mu/DnDList.tsx

@@ -17,7 +17,8 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     children: (
         item: D,
         index: number,
-        onDelete: (index: number) => void
+        deleteItem: (index: number) => void,
+        editItem: (newItem: D, indexOrLabel: number | string) => void
     ) => React.ReactNode;
 
     /**
@@ -34,7 +35,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Get list item style callback
      */
-    getItemStyle?: (isDragging: boolean) => CSSProperties;
+    getItemStyle?: (isDragging: boolean, index: number) => CSSProperties;
 
     /**
      * Get list style callback
@@ -56,7 +57,8 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
      */
     sideRenderer?: (
         top: boolean,
-        onAdd: (item: D) => boolean
+        addItem: (item: D) => boolean,
+        addItems: (items: D[]) => number
     ) => React.ReactNode;
 
     /**
@@ -67,6 +69,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
 
 /**
  * Drag and drop list
+ * https://github.com/atlassian/react-beautiful-dnd
  * @param props Props
  * @returns Component
  */
@@ -92,7 +95,6 @@ export function DnDList<
 
     // Drag end handler
     const onDragEnd = (result: DropResult) => {
-        console.log(result);
         // Dropped outside the list
         if (!result.destination) {
             return;
@@ -111,8 +113,8 @@ export function DnDList<
         setItems(newItems);
     };
 
-    // Add handler
-    const onAdd = (newItem: D) => {
+    // Add item
+    const addItem = (newItem: D) => {
         // Existence check
         if (items.some((item) => item[labelField] == newItem[labelField])) {
             return false;
@@ -127,8 +129,53 @@ export function DnDList<
         return true;
     };
 
-    // Delete handler
-    const onDelete = (index: number) => {
+    // Edit item
+    const editItem = (newItem: D, indexOrLabel: number | string) => {
+        const index =
+            typeof indexOrLabel === 'number'
+                ? indexOrLabel
+                : items.findIndex(
+                      (item) =>
+                          DataTypes.convert(item[labelField], 'string') ==
+                          indexOrLabel
+                  );
+        if (index === -1) return;
+
+        // Clone
+        const newItems = [...items];
+
+        // Remove the item
+        newItems.splice(index, 1, newItem);
+
+        // Update the state
+        setItems(newItems);
+    };
+
+    // Add items
+    const addItems = (inputItems: D[]) => {
+        // Clone
+        const newItems = [...items];
+
+        // Insert items
+        inputItems.forEach((newItem) => {
+            // Existence check
+            if (
+                newItems.some((item) => item[labelField] == newItem[labelField])
+            ) {
+                return;
+            }
+
+            newItems.push(newItem);
+        });
+
+        // Update the state
+        setItems(newItems);
+
+        return newItems.length - items.length;
+    };
+
+    // Delete item
+    const deleteItem = (index: number) => {
         // Clone
         const newItems = [...items];
 
@@ -146,7 +193,7 @@ export function DnDList<
     // Layout
     return (
         <React.Fragment>
-            {sideRenderer && sideRenderer(true, onAdd)}
+            {sideRenderer && sideRenderer(true, addItem, addItems)}
             <Component {...componentProps}>
                 <DragDropContext onDragEnd={onDragEnd}>
                     <Droppable droppableId={name}>
@@ -177,7 +224,8 @@ export function DnDList<
                                                     {...provided.dragHandleProps}
                                                     style={{
                                                         ...getItemStyle(
-                                                            snapshot.isDragging
+                                                            snapshot.isDragging,
+                                                            index
                                                         ),
                                                         ...provided
                                                             .draggableProps
@@ -187,7 +235,8 @@ export function DnDList<
                                                     {children(
                                                         item,
                                                         index,
-                                                        onDelete
+                                                        deleteItem,
+                                                        editItem
                                                     )}
                                                 </div>
                                             )}
@@ -200,7 +249,7 @@ export function DnDList<
                     </Droppable>
                 </DragDropContext>
             </Component>
-            {sideRenderer && sideRenderer(false, onAdd)}
+            {sideRenderer && sideRenderer(false, addItem, addItems)}
         </React.Fragment>
     );
 }

package/src/mu/ItemList.tsx

@@ -8,18 +8,12 @@ import {
     DialogContent,
     Button
 } from '@mui/material';
-
-/**
- * Item list label callback
- */
-export interface ItemListLabel {
-    (item: any): string;
-}
+import { DataTypes } from '@etsoo/shared';
 
 /**
  * Item list properties
  */
-export interface ItemListProps {
+export interface ItemListProps<T extends Record<string, unknown>> {
     /**
      * Style class name
      */
@@ -28,12 +22,12 @@ export interface ItemListProps {
     /**
      * Id field name
      */
-    idField?: string;
+    idField?: keyof T;
 
     /**
      * Label field name or callback
      */
-    labelField?: string | ItemListLabel;
+    labelField?: keyof T | ((item: T) => string);
 
     /**
      * Button icon
@@ -48,7 +42,7 @@ export interface ItemListProps {
     /**
      * Close event
      */
-    onClose?(item: any, changed: boolean): void;
+    onClose?(item: T, changed: boolean): void;
 
     /**
      * Current selected language
@@ -68,7 +62,7 @@ export interface ItemListProps {
     /**
      * Items
      */
-    items: any[];
+    items: T[];
 
     /**
      * Button variant
@@ -80,7 +74,9 @@ export interface ItemListProps {
  * Item list component
  * @param props Properties
  */
-export function ItemList(props: ItemListProps) {
+export function ItemList<
+    T extends Record<string, unknown> = Record<string, unknown>
+>(props: ItemListProps<T>) {
     //  properties destructure
     const {
         className,
@@ -97,16 +93,18 @@ export function ItemList(props: ItemListProps) {
     } = props;
 
     // Get id
-    const getId = (item: any) => {
-        return item[idField];
+    const getId = (item: T): string | number => {
+        const id = item[idField];
+        if (typeof id === 'number') return id;
+        return DataTypes.convert(id, 'string') ?? '';
     };
 
     // Get label
-    const getLabel = (item: any) => {
+    const getLabel = (item: T): string => {
         if (typeof labelField === 'function') {
             return labelField(item);
         } else {
-            return item[labelField];
+            return DataTypes.convert(item[labelField], 'string') ?? '';
         }
     };
 

package/src/mu/OptionGroup.tsx

@@ -32,7 +32,7 @@ export interface OptionGroupProps<
     /**
      * Id field, default is id
      */
-    idField?: string;
+    idField?: keyof T;
 
     /**
      * Label
@@ -42,7 +42,7 @@ export interface OptionGroupProps<
     /**
      * Label field, default is label
      */
-    labelField?: string;
+    labelField?: keyof T;
 
     /**
      * Multiple choose item
@@ -81,7 +81,7 @@ export interface OptionGroupProps<
  * @returns Component
  */
 export function OptionGroup<
-    T extends Record<string, any> = IdLabelDto,
+    T extends Record<string, unknown> = IdLabelDto,
     D extends DataTypes.IdType = string
 >(props: OptionGroupProps<T, D>) {
     // Destruct
@@ -102,8 +102,11 @@ export function OptionGroup<
     } = props;
 
     // Get option value
-    const getOptionValue = (option: T): D | undefined => {
-        return option[idField];
+    // D type should be the source id type
+    const getOptionValue = (option: T): D | null => {
+        const value = DataTypes.getIdValue(option, idField);
+        if (value == null) return null;
+        return value as D;
     };
 
     // Checkbox values
@@ -124,6 +127,9 @@ export function OptionGroup<
         return values.includes(value);
     };
 
+    // First item value
+    const firstOptionValue = getOptionValue(options[0]);
+
     // Items
     const list = options.map((option) => {
         // Control
@@ -134,9 +140,11 @@ export function OptionGroup<
                 size={size}
                 checked={itemChecked(option)}
                 onChange={(event) => {
+                    if (firstOptionValue == null) return;
+
                     const typeValue = Utils.parseString<D>(
                         event.target.value,
-                        options[0][idField]
+                        firstOptionValue
                     );
 
                     const changedValues = [...values];
@@ -188,10 +196,8 @@ export function OptionGroup<
             name={name}
             value={defaultValue}
             onChange={(_event, value) => {
-                const typeValue = Utils.parseString<D>(
-                    value,
-                    options[0][idField]
-                );
+                if (firstOptionValue == null) return;
+                const typeValue = Utils.parseString<D>(value, firstOptionValue);
                 if (onValueChange) onValueChange(typeValue);
             }}
         >

package/src/mu/ScrollerListEx.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { Utils } from '@etsoo/shared';
+import { DataTypes, Utils } from '@etsoo/shared';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { ScrollerList, ScrollerListProps } from '../components/ScrollerList';
@@ -73,7 +73,7 @@ export interface ScrollerListExProps<T>
     /**
      * Id field
      */
-    idField?: string;
+    idField?: keyof T;
 
     /**
      * Inner item renderer
@@ -161,7 +161,7 @@ function defaultItemRenderer<T>({
  * @param props Props
  * @returns Component
  */
-export function ScrollerListEx<T extends Record<string, any>>(
+export function ScrollerListEx<T extends Record<string, unknown>>(
     props: ScrollerListExProps<T>
 ) {
     // Selected item ref
@@ -201,7 +201,7 @@ export function ScrollerListEx<T extends Record<string, any>>(
         innerItemRenderer,
         itemSize,
         itemKey = (index: number, data: T) =>
-            data != null && idField in data ? data[idField] : index,
+            DataTypes.getIdValue(data, idField) ?? index,
         itemRenderer = (itemProps) => {
             const itemHeight =
                 typeof itemSize === 'function'

package/src/mu/SelectEx.tsx

@@ -23,7 +23,7 @@ export interface SelectExProps<T extends {}>
     /**
      * Id field, default is id
      */
-    idField?: string;
+    idField?: keyof T;
 
     /**
      * Item icon renderer
@@ -33,7 +33,7 @@ export interface SelectExProps<T extends {}>
     /**
      * Label field, default is label
      */
-    labelField?: ((option: T) => string) | string;
+    labelField?: ((option: T) => string) | keyof T;
 
     /**
      * Load data callback

package/src/mu/TableEx.tsx

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import {
     Checkbox,
     Paper,
@@ -67,7 +68,7 @@ export interface TableExProps<T extends Record<string, any>>
     /**
      * Id field
      */
-    idField?: string;
+    idField?: keyof T;
 
     /**
      * Max height
@@ -100,10 +101,14 @@ export interface TableExProps<T extends Record<string, any>>
  * @param props Props
  * @returns Component
  */
-export function TableEx<T extends Record<string, any>>(props: TableExProps<T>) {
+export function TableEx<T extends Record<string, unknown>>(
+    props: TableExProps<T>
+) {
     // Theme
     const theme = useTheme();
 
+    type keyType = keyof T;
+
     // Destruct
     const {
         alternatingColors = [theme.palette.action.hover, undefined],
@@ -111,7 +116,7 @@ export function TableEx<T extends Record<string, any>>(props: TableExProps<T>) {
         columns,
         defaultOrderBy,
         headerColors = [undefined, undefined],
-        idField = 'id',
+        idField = 'id' as keyType,
         loadBatchSize,
         loadData,
         maxHeight,
@@ -441,7 +446,8 @@ export function TableEx<T extends Record<string, any>>(props: TableExProps<T>) {
                                     : undefined;
 
                             // Row id field value
-                            const rowId = row == null ? rowIndex : row[idField];
+                            const rowId =
+                                DataTypes.getIdValue(row, idField) ?? rowIndex;
 
                             // Selected or not
                             const isItemSelected = selectable
@@ -522,7 +528,10 @@ export function TableEx<T extends Record<string, any>>(props: TableExProps<T>) {
 
                                             return (
                                                 <TableCell
-                                                    key={rowId + columnIndex}
+                                                    key={
+                                                        rowId.toString() +
+                                                        columnIndex
+                                                    }
                                                     {...cellProps}
                                                 >
                                                     {child}

package/src/mu/Tiplist.tsx

@@ -176,10 +176,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
         const input = inputRef.current;
         if (input) {
             // Update value
-            const newValue =
-                value != null && idField in value
-                    ? `${Reflect.get(value, idField)}`
-                    : '';
+            const newValue = DataTypes.getStringValue(value, idField) ?? '';
             if (newValue !== input.value) {
                 // Different value, trigger change event
                 Utils.triggerChange(input, newValue, false);

package/src/mu/pages/EditPage.tsx

@@ -6,7 +6,7 @@ import { Labels } from '../../app/Labels';
 import { MUGlobal } from '../MUGlobal';
 import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 import { CommonPageProps } from './CommonPageProps';
-import EditIcon from '@mui/icons-material/Edit';
+import SaveIcon from '@mui/icons-material/Save';
 
 /**
  * Edit page router props, include 'id' (/:id) query parameter
@@ -70,7 +70,7 @@ export function EditPage(props: EditPageProps) {
                         variant="contained"
                         type="submit"
                         fullWidth
-                        startIcon={<EditIcon />}
+                        startIcon={<SaveIcon />}
                     >
                         {labels.save}
                     </Button>

package/src/mu/pages/FixedListPage.tsx

@@ -17,7 +17,7 @@ import { ListPageProps } from './ListPageProps';
  * @returns Component
  */
 export function FixedListPage<
-    T,
+    T extends {},
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
 >(
     props: ListPageProps<T, F> & {

package/src/mu/pages/ListPage.tsx

@@ -20,7 +20,7 @@ import { ListPageProps } from './ListPageProps';
  * @returns Component
  */
 export function ListPage<
-    T,
+    T extends {},
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
 >(props: ListPageProps<T, F>) {
     // Destruct

package/src/mu/pages/ResponsivePage.tsx

@@ -25,7 +25,7 @@ interface LocalStates {
  * @returns Component
  */
 export function ResponsivePage<
-    T,
+    T extends {},
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
 >(props: ResponsePageProps<T, F>) {
     // Destruct

package/src/mu/pages/TablePage.tsx

@@ -20,7 +20,7 @@ import { TablePageProps } from './TablePageProps';
  * @returns Component
  */
 export function TablePage<
-    T,
+    T extends {},
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
 >(props: TablePageProps<T, F>) {
     // Destruct