@etsoo/react 1.5.76 → 1.5.79

package/src/components/GridLoader.ts

@@ -48,12 +48,12 @@ export function GridDataGet<F extends DataTypes.BasicTemplate>(
 /**
  * Grid Json data
  */
-export interface GridJsonData extends Omit<GridLoadDataProps, 'data'> {}
+export type GridJsonData = Omit<GridLoadDataProps, 'data'>;
 
 /**
  * Grid data load props
  */
-export interface GridLoadDataProps {
+export type GridLoadDataProps = {
     /**
      * Current page
      */
@@ -78,12 +78,12 @@ export interface GridLoadDataProps {
      * Data related
      */
     data?: GridData;
-}
+};
 
 /**
  * Grid data loader
  */
-export interface GridLoader<T> {
+export type GridLoader<T extends object> = {
     /**
      * Auto load data, otherwise call reset
      * @default true
@@ -109,12 +109,12 @@ export interface GridLoader<T> {
      * Threshold at which to pre-fetch data; default is half of loadBatchSize
      */
     threshold?: number | undefined;
-}
+};
 
 /**
  * Grid loader states
  */
-export interface GridLoaderStates<T> extends GridLoadDataProps {
+export type GridLoaderStates<T> = GridLoadDataProps & {
     /**
      * Auto load data, otherwise call reset
      * @default true
@@ -150,4 +150,4 @@ export interface GridLoaderStates<T> extends GridLoadDataProps {
      * Selected items of id
      */
     selectedItems: T[];
-}
+};

package/src/components/ScrollerGrid.tsx

@@ -1,3 +1,4 @@
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
 import React from 'react';
 import {
     Align,
@@ -9,8 +10,10 @@ import {
 import { GridMethodRef } from '../mu/GridMethodRef';
 import { GridLoadDataProps, GridLoader, GridLoaderStates } from './GridLoader';
 
-export interface ScrollerGridItemRendererProps<T>
-    extends Omit<GridChildComponentProps<T>, 'data'> {
+export type ScrollerGridItemRendererProps<T> = Omit<
+    GridChildComponentProps<T>,
+    'data'
+> & {
     /**
      * Selected items
      */
@@ -20,64 +23,65 @@ export interface ScrollerGridItemRendererProps<T>
      * Data
      */
     data?: T;
-}
+};
 
 /**
  * Scroller vertical grid props
  */
-export interface ScrollerGridProps<T>
-    extends GridLoader<T>,
-        Omit<
-            VariableSizeGridProps<T>,
-            'children' | 'rowCount' | 'rowHeight' | 'ref'
-        > {
-    /**
-     * Default order by asc
-     * @default true
-     */
-    defaultOrderByAsc?: boolean;
-
-    /**
-     * Footer renderer
-     */
-    footerRenderer?: (
-        rows: T[],
-        states: GridLoaderStates<T>
-    ) => React.ReactNode;
-
-    /**
-     * Header renderer
-     */
-    headerRenderer?: (states: GridLoaderStates<T>) => React.ReactNode;
-
-    /**
-     * Id field
-     * @default id
-     */
-    idField?: string & keyof T;
-
-    /**
-     * Item renderer
-     */
-    itemRenderer: (
-        props: ScrollerGridItemRendererProps<T>
-    ) => React.ReactElement;
-
-    /**
-     * Methods
-     */
-    mRef?: React.Ref<ScrollerGridForwardRef>;
-
-    /**
-     * On items select change
-     */
-    onSelectChange?: (selectedItems: T[]) => void;
-
-    /**
-     * Returns the height of the specified row.
-     */
-    rowHeight?: ((index: number) => number) | number;
-}
+export type ScrollerGridProps<
+    T extends object,
+    D extends DataTypes.Keys<T>
+> = GridLoader<T> &
+    Omit<
+        VariableSizeGridProps<T>,
+        'children' | 'rowCount' | 'rowHeight' | 'ref'
+    > & {
+        /**
+         * Default order by asc
+         * @default true
+         */
+        defaultOrderByAsc?: boolean;
+
+        /**
+         * Footer renderer
+         */
+        footerRenderer?: (
+            rows: T[],
+            states: GridLoaderStates<T>
+        ) => React.ReactNode;
+
+        /**
+         * Header renderer
+         */
+        headerRenderer?: (states: GridLoaderStates<T>) => React.ReactNode;
+
+        /**
+         * Id field
+         */
+        idField?: D;
+
+        /**
+         * Item renderer
+         */
+        itemRenderer: (
+            props: ScrollerGridItemRendererProps<T>
+        ) => React.ReactElement;
+
+        /**
+         * Methods
+         */
+        mRef?: React.Ref<ScrollerGridForwardRef>;
+
+        /**
+         * On items select change
+         */
+        onSelectChange?: (selectedItems: T[]) => void;
+
+        /**
+         * Returns the height of the specified row.
+         */
+        rowHeight?: ((index: number) => number) | number;
+    };
 
 /**
  * Scroller grid forward ref
@@ -143,8 +147,11 @@ export interface ScrollerGridForwardRef extends GridMethodRef {
  * @param props Props
  * @returns Component
  */
-export const ScrollerGrid = <T extends Record<string, unknown>>(
-    props: ScrollerGridProps<T>
+export const ScrollerGrid = <
+    T extends object,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
+>(
+    props: ScrollerGridProps<T, D>
 ) => {
     // Destruct
     const {
@@ -154,7 +161,7 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
         footerRenderer,
         headerRenderer,
         itemRenderer,
-        idField = 'id',
+        idField = 'id' as D,
         loadBatchSize,
         loadData,
         mRef,

package/src/components/ScrollerList.tsx

@@ -20,7 +20,7 @@ import {
 /**
  * Scroller vertical list props
  */
-export interface ScrollerListProps<T>
+export interface ScrollerListProps<T extends object>
     extends GridLoader<T>,
         Omit<
             ListProps<T>,
@@ -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 object>(props: ScrollerListProps<T>) => {
     // Destruct
     const {
         autoLoad = true,

package/src/mu/AutocompleteExtendedProps.ts

@@ -5,17 +5,17 @@ import { ChangeEventHandler } from 'react';
 /**
  * Autocomplete extended props
  */
-export interface AutocompleteExtendedProps<
-    T extends {},
+export type AutocompleteExtendedProps<
+    T extends object,
     D extends DataTypes.Keys<T>
-> extends Omit<
-        AutocompleteProps<T, undefined, false, false>,
-        'renderInput' | 'options'
-    > {
+> = Omit<
+    AutocompleteProps<T, undefined, false, false>,
+    'renderInput' | 'options'
+> & {
     /**
-     * Id field, default is id
+     * Id field
      */
-    idField: D;
+    idField?: D;
 
     /**
      * Id value
@@ -80,4 +80,4 @@ export interface AutocompleteExtendedProps<
      * Is search field?
      */
     search?: boolean;
-}
+};

package/src/mu/ComboBox.tsx

@@ -1,4 +1,10 @@
-import { DataTypes, Keyboard } from '@etsoo/shared';
+import {
+    DataTypes,
+    IdDefaultType,
+    Keyboard,
+    LabelDefaultType,
+    ListType
+} from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
 import { Utils as SharedUtils } from '@etsoo/shared';
@@ -10,10 +16,11 @@ import { ReactUtils } from '../app/ReactUtils';
 /**
  * ComboBox props
  */
-export interface ComboBoxProps<
-    T extends {},
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
-> extends AutocompleteExtendedProps<T, D> {
+export type ComboBoxProps<
+    T extends object,
+    D extends DataTypes.Keys<T>,
+    L extends DataTypes.Keys<T, string>
+> = AutocompleteExtendedProps<T, D> & {
     /**
      * Auto add blank item
      */
@@ -27,7 +34,7 @@ export interface ComboBoxProps<
     /**
      * Label field
      */
-    labelField: D;
+    labelField?: L;
 
     /**
      * Load data callback
@@ -43,7 +50,7 @@ export interface ComboBoxProps<
      * Array of options.
      */
     options?: ReadonlyArray<T>;
-}
+};
 
 /**
  * ComboBox
@@ -51,14 +58,15 @@ export interface ComboBoxProps<
  * @returns Component
  */
 export function ComboBox<
-    T extends {} = DataTypes.IdLabelItem,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
->(props: ComboBoxProps<T, D>) {
+    T extends object = ListType,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>,
+    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+>(props: ComboBoxProps<T, D, L>) {
     // Destruct
     const {
         search = false,
         autoAddBlankItem = search,
-        idField,
+        idField = 'id' as D,
         idValue,
         inputError,
         inputHelperText,
@@ -68,7 +76,7 @@ export function ComboBox<
         inputVariant,
         defaultValue,
         label,
-        labelField,
+        labelField = 'label' as L,
         loadData,
         onLoadData,
         name,
@@ -194,7 +202,7 @@ export function ComboBox<
                 onChange={inputOnChange}
             />
             {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
-            <Autocomplete
+            <Autocomplete<T, undefined, false, false>
                 value={stateValue}
                 getOptionLabel={getOptionLabel}
                 isOptionEqualToValue={(option: T, value: T) =>

package/src/mu/DataGridEx.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { Utils } from '@etsoo/shared';
+import { DataTypes, IdDefaultType, Utils } from '@etsoo/shared';
 import {
     Box,
     BoxProps,
@@ -30,24 +30,24 @@ import { MouseEventWithDataHandler } from './MUGlobal';
 /**
  * Footer item renderer props
  */
-export interface DataGridExFooterItemRendererProps<
-    T extends Record<string, any>
-> {
+export type DataGridExFooterItemRendererProps<T extends object> = {
     column: GridColumn<T>;
     index: number;
     states: GridLoaderStates<T>;
     cellProps: any;
     checkable: boolean;
-}
+};
 
 /**
  * Extended DataGrid with VariableSizeGrid props
  */
-export interface DataGridExProps<T extends Record<string, any>>
-    extends Omit<
-        ScrollerGridProps<T>,
-        'itemRenderer' | 'columnCount' | 'columnWidth' | 'width'
-    > {
+export type DataGridExProps<
+    T extends object,
+    D extends DataTypes.Keys<T>
+> = Omit<
+    ScrollerGridProps<T, D>,
+    'itemRenderer' | 'columnCount' | 'columnWidth' | 'width'
+> & {
     /**
      * Alternating colors for odd/even rows
      */
@@ -124,7 +124,7 @@ export interface DataGridExProps<T extends Record<string, any>>
      * Width
      */
     width?: number;
-}
+};
 
 // Borders
 const boldBorder = '2px solid rgba(224, 224, 224, 1)';
@@ -210,9 +210,10 @@ export function DataGridExCalColumns<T>(columns: GridColumn<T>[]) {
  * @param props Props
  * @returns Component
  */
-export function DataGridEx<T extends Record<string, any>>(
-    props: DataGridExProps<T>
-) {
+export function DataGridEx<
+    T extends object,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
+>(props: DataGridExProps<T, D>) {
     // Theme
     const theme = useTheme();
 
@@ -360,7 +361,7 @@ export function DataGridEx<T extends Record<string, any>>(
         footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer,
         hideFooter = false,
         hoverColor = '#f6f9fb',
-        idField = 'id',
+        idField = 'id' as D,
         mRef = React.createRef(),
         onClick,
         onDoubleClick,
@@ -372,7 +373,7 @@ export function DataGridEx<T extends Record<string, any>>(
 
     if (checkable) {
         const cbColumn: GridColumn<T> = {
-            field: 'selected',
+            field: 'selected' as any, // Avoid validation from data model
             header: '',
             sortable: false,
             width: 50,
@@ -442,7 +443,7 @@ export function DataGridEx<T extends Record<string, any>>(
     };
 
     // Reset
-    const reset = (add: {}) => {
+    const reset = (add: object) => {
         refs.current.ref?.reset(add);
     };
 
@@ -632,7 +633,7 @@ export function DataGridEx<T extends Record<string, any>>(
             : undefined;
 
         return (
-            <ScrollerGrid<T>
+            <ScrollerGrid<T, D>
                 className={Utils.mergeClasses(
                     'DataGridEx-Body',
                     'DataGridEx-CustomBar',

package/src/mu/DataGridRenderers.tsx

@@ -117,7 +117,7 @@ export namespace DataGridRenderers {
      * @param location Renderer location (column index)
      * @returns Component
      */
-    export function defaultFooterItemRenderer<T>(
+    export function defaultFooterItemRenderer<T extends object>(
         _rows: T[],
         { index, states, checkable }: DataGridExFooterItemRendererProps<T>,
         location: number = 0

package/src/mu/DnDList.tsx

@@ -79,7 +79,7 @@ export const DnDItemStyle = (
 /**
  * DnD list forward ref
  */
-export interface DnDListRef<D extends {}> {
+export interface DnDListRef<D extends object> {
     /**
      * Add item
      * @param item New item
@@ -109,7 +109,7 @@ export interface DnDListRef<D extends {}> {
 /**
  * DnD sortable list properties
  */
-export interface DnDListPros<D extends {}, K extends DataTypes.Keys<D>> {
+export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
     /**
      * Get list item style callback
      */

package/src/mu/ItemList.tsx

@@ -3,17 +3,26 @@ import {
     Dialog,
     DialogTitle,
     List,
-    ListItem,
     ListItemText,
     DialogContent,
-    Button
+    Button,
+    ListItemButton
 } from '@mui/material';
-import { DataTypes } from '@etsoo/shared';
+import {
+    DataTypes,
+    IdDefaultType,
+    LabelDefaultType,
+    ListType
+} from '@etsoo/shared';
 
 /**
  * Item list properties
  */
-export interface ItemListProps<T extends Record<string, unknown>> {
+export interface ItemListProps<
+    T extends object,
+    D extends DataTypes.Keys<T>,
+    L extends DataTypes.Keys<T, string>
+> {
     /**
      * Style class name
      */
@@ -22,12 +31,12 @@ export interface ItemListProps<T extends Record<string, unknown>> {
     /**
      * Id field name
      */
-    idField?: string & keyof T;
+    idField?: D;
 
     /**
      * Label field name or callback
      */
-    labelField?: (string & keyof T) | ((item: T) => string);
+    labelField?: L | ((item: T) => string);
 
     /**
      * Button icon
@@ -47,7 +56,7 @@ export interface ItemListProps<T extends Record<string, unknown>> {
     /**
      * Current selected language
      */
-    selectedValue?: string;
+    selectedValue?: T[D];
 
     /**
      * Button size
@@ -75,15 +84,17 @@ export interface ItemListProps<T extends Record<string, unknown>> {
  * @param props Properties
  */
 export function ItemList<
-    T extends Record<string, unknown> = Record<string, unknown>
->(props: ItemListProps<T>) {
+    T extends object = ListType,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>,
+    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+>(props: ItemListProps<T, D, L>) {
     //  properties destructure
     const {
         className,
         color = 'primary',
         items,
-        idField = 'id',
-        labelField = 'label',
+        idField = 'id' as D,
+        labelField = 'label' as L,
         icon,
         onClose,
         selectedValue,
@@ -92,13 +103,6 @@ export function ItemList<
         variant = 'outlined'
     } = props;
 
-    // Get id
-    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: T): string => {
         if (typeof labelField === 'function') {
@@ -113,7 +117,7 @@ export function ItemList<
 
     // Default state
     const defaultItem =
-        items.find((item) => getId(item) === selectedValue) ?? items[0];
+        items.find((item) => item[idField] === selectedValue) ?? items[0];
 
     // Current item
     const [currentItem, setCurrentItem] = React.useState(defaultItem);
@@ -179,18 +183,17 @@ export function ItemList<
                 <DialogContent>
                     <List>
                         {items.map((item) => {
-                            const id = getId(item);
+                            const id = item[idField];
                             return (
-                                <ListItem
-                                    button
-                                    key={id}
-                                    disabled={id === getId(currentItem)}
+                                <ListItemButton
+                                    key={id as unknown as React.Key}
+                                    disabled={id === currentItem[idField]}
                                     onClick={() => closeItemHandler(item)}
                                 >
                                     <ListItemText>
                                         {getLabel(item)}
                                     </ListItemText>
-                                </ListItem>
+                                </ListItemButton>
                             );
                         })}
                     </List>

package/src/mu/ListMoreDisplay.tsx

@@ -22,7 +22,7 @@ import { LoadingButton } from './LoadingButton';
  * ListMoreDisplay props
  */
 export interface ListMoreDisplayProps<
-    T,
+    T extends object,
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
 > extends Omit<CardProps, 'children'>,
         GridLoader<T> {
@@ -63,7 +63,7 @@ type states<T> = {
  * @returns Component
  */
 export function ListMoreDisplay<
-    T extends {},
+    T extends object,
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
 >(props: ListMoreDisplayProps<T, F>) {
     // Destruct

package/src/mu/MUGlobal.ts

@@ -92,7 +92,7 @@ export class MUGlobal {
      * @param input Input object
      * @returns Updated object
      */
-    static half(input: {}) {
+    static half(input: object) {
         const newObj = { ...input };
         Object.entries(newObj).forEach(([key, value]) => {
             if (typeof value === 'number') {
@@ -107,7 +107,7 @@ export class MUGlobal {
      * @param input Input object
      * @returns Updated object
      */
-    static reverse(input: {}) {
+    static reverse(input: object) {
         const newObj = { ...input };
         Object.entries(newObj).forEach(([key, value]) => {
             if (typeof value === 'number') {
@@ -124,7 +124,7 @@ export class MUGlobal {
      * @param field Specific field
      * @returns Updated object
      */
-    static increase(input: {}, adjust: number | {}, field?: string) {
+    static increase(input: object, adjust: number | object, field?: string) {
         const newObj = { ...input };
         Object.entries(newObj).forEach(([key, value]) => {
             if (typeof value === 'number') {
@@ -152,7 +152,7 @@ export class MUGlobal {
      */
     static adjustWithTheme(
         size: number,
-        adjust: {},
+        adjust: object,
         updateFunc: (value: number) => string
     ) {
         const newObj = { ...adjust };
@@ -185,7 +185,7 @@ export class MUGlobal {
      * @param theme Theme
      * @returns Result
      */
-    static getSpace(spaces: {}, theme: Theme) {
+    static getSpace(spaces: object, theme: Theme) {
         const start = this.breakpoints.length - 1;
         for (let i = start; i >= 0; i--) {
             const key = this.breakpoints[i];