@etsoo/react 1.5.78 → 1.5.79

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';
@@ -12,7 +18,8 @@ import { ReactUtils } from '../app/ReactUtils';
  */
 export type ComboBoxProps<
     T extends object,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T>,
+    L extends DataTypes.Keys<T, string>
 > = AutocompleteExtendedProps<T, D> & {
     /**
      * Auto add blank item
@@ -24,6 +31,11 @@ export type ComboBoxProps<
      */
     dataReadonly?: boolean;
 
+    /**
+     * Label field
+     */
+    labelField?: L;
+
     /**
      * Load data callback
      */
@@ -38,13 +50,7 @@ export type ComboBoxProps<
      * Array of options.
      */
     options?: ReadonlyArray<T>;
-} & (T extends { label: string }
-        ? {
-              labelField?: D;
-          }
-        : {
-              labelField: D;
-          });
+};
 
 /**
  * ComboBox
@@ -52,9 +58,10 @@ export type ComboBoxProps<
  * @returns Component
  */
 export function ComboBox<
-    T extends object = 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,
@@ -69,7 +76,7 @@ export function ComboBox<
         inputVariant,
         defaultValue,
         label,
-        labelField = 'label' as D,
+        labelField = 'label' as L,
         loadData,
         onLoadData,
         name,

package/src/mu/DataGridEx.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { DataTypes, Utils } from '@etsoo/shared';
+import { DataTypes, IdDefaultType, Utils } from '@etsoo/shared';
 import {
     Box,
     BoxProps,
@@ -43,7 +43,7 @@ export type DataGridExFooterItemRendererProps<T extends object> = {
  */
 export type DataGridExProps<
     T extends object,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T>
 > = Omit<
     ScrollerGridProps<T, D>,
     'itemRenderer' | 'columnCount' | 'columnWidth' | 'width'
@@ -212,7 +212,7 @@ export function DataGridExCalColumns<T>(columns: GridColumn<T>[]) {
  */
 export function DataGridEx<
     T extends object,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: DataGridExProps<T, D>) {
     // Theme
     const theme = useTheme();

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/OptionGroup.tsx

@@ -1,4 +1,10 @@
-import { DataTypes, Utils } from '@etsoo/shared';
+import {
+    DataTypes,
+    IdDefaultType,
+    LabelDefaultType,
+    ListType,
+    Utils
+} from '@etsoo/shared';
 import {
     Checkbox,
     FormControl,
@@ -15,8 +21,9 @@ import React from 'react';
  * OptionGroup props
  */
 export type OptionGroupProps<
-    T extends object = DataTypes.IdLabelItem,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    T extends object,
+    D extends DataTypes.Keys<T>,
+    L extends DataTypes.Keys<T, string>
 > = Omit<FormControlProps<'fieldset'>, 'defaultValue'> & {
     /**
      * Default value
@@ -28,11 +35,21 @@ export type OptionGroupProps<
      */
     getOptionLabel?: (option: T) => string;
 
+    /**
+     * Id field
+     */
+    idField?: D;
+
     /**
      * Label
      */
     label?: string;
 
+    /**
+     * Label field
+     */
+    labelField?: L;
+
     /**
      * Multiple choose item
      */
@@ -62,20 +79,7 @@ export type OptionGroupProps<
      * Display group of elements in a compact row
      */
     row?: boolean;
-} & (T extends { id: DataTypes.IdType }
-        ? {
-              idField?: D;
-          }
-        : {
-              idField: D;
-          }) &
-    (T extends { label: string }
-        ? {
-              labelField?: D;
-          }
-        : {
-              labelField: D;
-          });
+};
 
 /**
  * OptionGroup
@@ -83,16 +87,17 @@ export type OptionGroupProps<
  * @returns Component
  */
 export function OptionGroup<
-    T extends object = DataTypes.IdLabelItem,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
->(props: OptionGroupProps<T, D>) {
+    T extends object = ListType,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>,
+    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+>(props: OptionGroupProps<T, D, L>) {
     // Destruct
     const {
         getOptionLabel,
         defaultValue,
         idField = 'id' as D,
         label,
-        labelField = 'label' as D,
+        labelField = 'label' as L,
         multiple = false,
         name,
         onValueChange,

package/src/mu/ResponsibleContainer.tsx

@@ -1,4 +1,4 @@
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
 import { Box, Stack, SxProps, Theme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
@@ -33,7 +33,7 @@ import { SearchBar } from './SearchBar';
 export type ResponsibleContainerProps<
     T extends object,
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 > = Omit<
     DataGridExProps<T, D>,
     'height' | 'itemKey' | 'loadData' | 'mRef' | 'onScroll' | 'onItemsRendered'
@@ -160,7 +160,7 @@ function defaultContainerBoxSx(
 export function ResponsibleContainer<
     T extends object,
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: ResponsibleContainerProps<T, F, D>) {
     // Destruct
     const {

package/src/mu/ScrollerListEx.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { DataTypes, Utils } from '@etsoo/shared';
+import { DataTypes, IdDefaultType, Utils } from '@etsoo/shared';
 import { useTheme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
@@ -119,7 +119,7 @@ export type ScrollerListExItemSize =
  */
 export type ScrollerListExProps<
     T extends object,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T>
 > = Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> & {
     /**
      * Alternating colors for odd/even rows
@@ -265,7 +265,7 @@ function defaultItemRenderer<T>({
  */
 export function ScrollerListEx<
     T extends object,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: ScrollerListExProps<T, D>) {
     // Selected item ref
     const selectedItem = React.useRef<[HTMLDivElement, T]>();

package/src/mu/SearchOptionGroup.tsx

@@ -1,4 +1,9 @@
-import { DataTypes } from '@etsoo/shared';
+import {
+    DataTypes,
+    IdDefaultType,
+    LabelDefaultType,
+    ListType
+} from '@etsoo/shared';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { OptionGroup, OptionGroupProps } from './OptionGroup';
@@ -9,9 +14,10 @@ import { OptionGroup, OptionGroupProps } from './OptionGroup';
  * @returns Component
  */
 export function SearchOptionGroup<
-    T extends object = DataTypes.IdLabelItem,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
->(props: OptionGroupProps<T, D>) {
+    T extends object = ListType,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>,
+    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+>(props: OptionGroupProps<T, D, L>) {
     // Destruct
     const {
         row = true,
@@ -21,5 +27,5 @@ export function SearchOptionGroup<
     } = props;
 
     // Layout
-    return <OptionGroup<T, D> row={row} size={size} sx={sx} {...rest} />;
+    return <OptionGroup<T, D, L> row={row} size={size} sx={sx} {...rest} />;
 }

package/src/mu/SelectBool.tsx

@@ -1,4 +1,4 @@
-import { DataTypes, Utils } from '@etsoo/shared';
+import { ListType1, Utils } from '@etsoo/shared';
 import React from 'react';
 import { globalApp } from '..';
 import { SelectEx, SelectExProps } from './SelectEx';
@@ -6,11 +6,10 @@ import { SelectEx, SelectExProps } from './SelectEx';
 /**
  * SelectBool props
  */
-export interface SelectBoolProps
-    extends Omit<
-        SelectExProps<DataTypes.IdLabelItem<string>>,
-        'options' | 'loadData'
-    > {}
+export type SelectBoolProps = Omit<
+    SelectExProps<ListType1>,
+    'options' | 'loadData'
+>;
 
 /**
  * SelectBool (yes/no)
@@ -22,7 +21,7 @@ export function SelectBool(props: SelectBoolProps) {
     const { search = true, autoAddBlankItem = search, ...rest } = props;
 
     // Options
-    const options: DataTypes.IdLabelItem<string>[] = [
+    const options: ListType1[] = [
         { id: 'false', label: globalApp.get('no')! },
         { id: 'true', label: globalApp.get('yes')! }
     ];
@@ -30,11 +29,5 @@ export function SelectBool(props: SelectBoolProps) {
     if (autoAddBlankItem) Utils.addBlankItem(options);
 
     // Layout
-    return (
-        <SelectEx<DataTypes.IdLabelItem<string>>
-            options={options}
-            search={search}
-            {...rest}
-        />
-    );
+    return <SelectEx<ListType1> options={options} search={search} {...rest} />;
 }

package/src/mu/SelectEx.tsx

@@ -12,7 +12,13 @@ import {
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
-import { DataTypes, Utils } from '@etsoo/shared';
+import {
+    DataTypes,
+    IdDefaultType,
+    LabelDefaultType,
+    ListType,
+    Utils
+} from '@etsoo/shared';
 import { ReactUtils } from '../app/ReactUtils';
 
 /**
@@ -20,18 +26,29 @@ import { ReactUtils } from '../app/ReactUtils';
  */
 export type SelectExProps<
     T extends object,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T> = IdDefaultType<T>,
+    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
 > = Omit<SelectProps, 'labelId' | 'input' | 'native'> & {
     /**
      * Auto add blank item
      */
     autoAddBlankItem?: boolean;
 
+    /**
+     * Id field
+     */
+    idField?: D;
+
     /**
      * Item icon renderer
      */
     itemIconRenderer?: (id: unknown) => React.ReactNode;
 
+    /**
+     * Label field
+     */
+    labelField?: L | ((option: T) => string);
+
     /**
      * Load data callback
      */
@@ -56,20 +73,7 @@ export type SelectExProps<
      * Is search case?
      */
     search?: boolean;
-} & (T extends { id: DataTypes.IdType }
-        ? {
-              idField?: D;
-          }
-        : {
-              idField: D;
-          }) &
-    (T extends { label: string }
-        ? {
-              labelField?: ((option: T) => string) | D;
-          }
-        : {
-              labelField: ((option: T) => string) | D;
-          });
+};
 
 /**
  * Extended select component
@@ -77,16 +81,17 @@ export type SelectExProps<
  * @returns Component
  */
 export function SelectEx<
-    T extends object = DataTypes.IdLabelItem,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
->(props: SelectExProps<T, D>) {
+    T extends object = ListType,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>,
+    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+>(props: SelectExProps<T, D, L>) {
     // Destruct
     const {
         defaultValue,
         idField = 'id' as D,
         itemIconRenderer,
         label,
-        labelField = 'label' as D,
+        labelField = 'label' as L,
         loadData,
         onItemClick,
         onLoadData,

package/src/mu/TableEx.tsx

@@ -1,4 +1,4 @@
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
 import {
     Checkbox,
     Paper,
@@ -49,7 +49,7 @@ export interface TableExMethodRef extends GridMethodRef {
  */
 export type TableExProps<
     T extends object,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T>
 > = TableProps &
     GridLoader<T> & {
         /**
@@ -67,6 +67,11 @@ export type TableExProps<
          */
         headerColors?: [string?, string?];
 
+        /**
+         * Id field
+         */
+        idField?: D;
+
         /**
          * Max height
          */
@@ -91,13 +96,7 @@ export type TableExProps<
          * Header and bottom height
          */
         otherHeight?: number;
-    } & (T extends { id: DataTypes.IdType }
-        ? {
-              idField?: D;
-          }
-        : {
-              idField: D;
-          });
+    };
 
 /**
  * Extended Table
@@ -106,7 +105,7 @@ export type TableExProps<
  */
 export function TableEx<
     T extends object,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: TableExProps<T, D>) {
     // Theme
     const theme = useTheme();

package/src/mu/Tiplist.tsx

@@ -1,4 +1,4 @@
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes, IdDefaultType, ListType } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
 import { ReactUtils } from '../app/ReactUtils';
@@ -37,8 +37,8 @@ interface States<T extends object> {
  * @returns Component
  */
 export function Tiplist<
-    T extends object = DataTypes.IdLabelItem,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    T extends object = ListType,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: TiplistProps<T, D>) {
     // Destruct
     const {

package/src/mu/pages/DataGridPage.tsx

@@ -1,4 +1,4 @@
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
 import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { GridDataGet, GridLoadDataProps } from '../../components/GridLoader';
@@ -26,7 +26,7 @@ interface LocalStates {
 export function DataGridPage<
     T extends object,
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: DataGridPageProps<T, F, D>) {
     // Destruct
     const {

package/src/mu/pages/DataGridPageProps.ts

@@ -1,4 +1,4 @@
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
 import { DataGridExProps } from '../DataGridEx';
 import { SearchPageProps } from './SearchPageProps';
 
@@ -8,7 +8,7 @@ import { SearchPageProps } from './SearchPageProps';
 export type DataGridPageProps<
     T extends object,
     F extends DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 > = SearchPageProps<T, F> &
     Omit<DataGridExProps<T, D>, 'loadData' | 'height'> & {
         /**

package/src/mu/pages/FixedListPage.tsx

@@ -1,4 +1,4 @@
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
 import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { GridDataGet, GridLoadDataProps } from '../../components/GridLoader';
@@ -18,9 +18,10 @@ import { ListPageProps } from './ListPageProps';
  */
 export function FixedListPage<
     T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
+    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(
-    props: ListPageProps<T, F> & {
+    props: ListPageProps<T, F, D> & {
         /**
          * Height will be deducted
          * @param height Current calcuated height
@@ -99,7 +100,7 @@ export function FixedListPage<
                         height: height + 'px'
                     }}
                 >
-                    <ScrollerListEx<T>
+                    <ScrollerListEx<T, D>
                         autoLoad={false}
                         height={height}
                         loadData={localLoadData}

package/src/mu/pages/ListPage.tsx

@@ -1,4 +1,4 @@
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
 import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { GridDataGet, GridLoadDataProps } from '../../components/GridLoader';
@@ -17,8 +17,9 @@ import { ListPageProps } from './ListPageProps';
  */
 export function ListPage<
     T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
->(props: ListPageProps<T, F>) {
+    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
+>(props: ListPageProps<T, F, D>) {
     // Destruct
     const {
         fields,
@@ -74,7 +75,7 @@ export function ListPage<
                 >
                     <SearchBar fields={fields} onSubmit={onSubmit} />
                 </Box>
-                <ScrollerListEx<T>
+                <ScrollerListEx<T, D>
                     autoLoad={false}
                     loadData={localLoadData}
                     mRef={refs}