@etsoo/react 1.5.77 → 1.5.78

package/src/mu/ComboBox.tsx

@@ -10,10 +10,10 @@ import { ReactUtils } from '../app/ReactUtils';
 /**
  * ComboBox props
  */
-export interface ComboBoxProps<
-    T extends {},
+export type ComboBoxProps<
+    T extends object,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
-> extends AutocompleteExtendedProps<T, D> {
+> = AutocompleteExtendedProps<T, D> & {
     /**
      * Auto add blank item
      */
@@ -24,11 +24,6 @@ export interface ComboBoxProps<
      */
     dataReadonly?: boolean;
 
-    /**
-     * Label field
-     */
-    labelField: T extends DataTypes.IdLabelItem ? D | undefined : D;
-
     /**
      * Load data callback
      */
@@ -43,7 +38,13 @@ export interface ComboBoxProps<
      * Array of options.
      */
     options?: ReadonlyArray<T>;
-}
+} & (T extends { label: string }
+        ? {
+              labelField?: D;
+          }
+        : {
+              labelField: D;
+          });
 
 /**
  * ComboBox
@@ -51,7 +52,7 @@ export interface ComboBoxProps<
  * @returns Component
  */
 export function ComboBox<
-    T extends {} = DataTypes.IdLabelItem,
+    T extends object = DataTypes.IdLabelItem,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 >(props: ComboBoxProps<T, D>) {
     // Destruct
@@ -194,7 +195,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

@@ -30,24 +30,24 @@ import { MouseEventWithDataHandler } from './MUGlobal';
 /**
  * Footer item renderer props
  */
-export interface DataGridExFooterItemRendererProps<T extends {}> {
+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 {},
+export type DataGridExProps<
+    T extends object,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
-> extends Omit<
-        ScrollerGridProps<T, D>,
-        'itemRenderer' | 'columnCount' | 'columnWidth' | 'width'
-    > {
+> = Omit<
+    ScrollerGridProps<T, D>,
+    'itemRenderer' | 'columnCount' | 'columnWidth' | 'width'
+> & {
     /**
      * Alternating colors for odd/even rows
      */
@@ -124,7 +124,7 @@ export interface DataGridExProps<
      * Width
      */
     width?: number;
-}
+};
 
 // Borders
 const boldBorder = '2px solid rgba(224, 224, 224, 1)';
@@ -211,7 +211,7 @@ export function DataGridExCalColumns<T>(columns: GridColumn<T>[]) {
  * @returns Component
  */
 export function DataGridEx<
-    T extends {},
+    T extends object,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 >(props: DataGridExProps<T, D>) {
     // Theme
@@ -443,7 +443,7 @@ export function DataGridEx<
     };
 
     // Reset
-    const reset = (add: {}) => {
+    const reset = (add: object) => {
         refs.current.ref?.reset(add);
     };
 
@@ -633,7 +633,7 @@ export function DataGridEx<
             : 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/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];

package/src/mu/OptionGroup.tsx

@@ -14,10 +14,10 @@ import React from 'react';
 /**
  * OptionGroup props
  */
-export interface OptionGroupProps<
-    T extends {} = DataTypes.IdLabelItem,
+export type OptionGroupProps<
+    T extends object = DataTypes.IdLabelItem,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
-> extends Omit<FormControlProps<'fieldset'>, 'defaultValue'> {
+> = Omit<FormControlProps<'fieldset'>, 'defaultValue'> & {
     /**
      * Default value
      */
@@ -28,21 +28,11 @@ export interface OptionGroupProps<
      */
     getOptionLabel?: (option: T) => string;
 
-    /**
-     * Id field, default is id
-     */
-    idField: T extends DataTypes.IdLabelItem ? D | undefined : D;
-
     /**
      * Label
      */
     label?: string;
 
-    /**
-     * Label field, default is label
-     */
-    labelField: T extends DataTypes.IdLabelItem ? D | undefined : D;
-
     /**
      * Multiple choose item
      */
@@ -72,7 +62,20 @@ export interface 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
@@ -80,7 +83,7 @@ export interface OptionGroupProps<
  * @returns Component
  */
 export function OptionGroup<
-    T extends {} = DataTypes.IdLabelItem,
+    T extends object = DataTypes.IdLabelItem,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 >(props: OptionGroupProps<T, D>) {
     // Destruct

package/src/mu/ResponsibleContainer.tsx

@@ -30,19 +30,14 @@ import { SearchBar } from './SearchBar';
 /**
  * ResponsibleContainer props
  */
-export interface ResponsibleContainerProps<
-    T extends {},
+export type ResponsibleContainerProps<
+    T extends object,
     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'
-    > {
+> = Omit<
+    DataGridExProps<T, D>,
+    'height' | 'itemKey' | 'loadData' | 'mRef' | 'onScroll' | 'onItemsRendered'
+> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height
@@ -58,7 +53,7 @@ export interface ResponsibleContainerProps<
      * Container box SX (dataGrid determines the case)
      */
     containerBoxSx?: (
-        paddings: {},
+        paddings: Record<string, string | number>,
         hasFields: boolean,
         dataGrid?: boolean
     ) => SxProps<Theme>;
@@ -120,7 +115,7 @@ export interface ResponsibleContainerProps<
     /**
      * Paddings
      */
-    paddings?: {};
+    paddings?: Record<string, string | number>;
 
     /**
      * Pull to refresh data
@@ -136,7 +131,7 @@ export interface ResponsibleContainerProps<
      * Size ready to read miliseconds span
      */
     sizeReadyMiliseconds?: number;
-}
+};
 
 interface LocalRefs {
     rect?: DOMRect;
@@ -145,7 +140,7 @@ interface LocalRefs {
 }
 
 function defaultContainerBoxSx(
-    paddings: {},
+    paddings: object,
     hasField: boolean,
     _dataGrid?: boolean
 ): SxProps<Theme> {
@@ -163,7 +158,7 @@ function defaultContainerBoxSx(
  * @returns Layout
  */
 export function ResponsibleContainer<
-    T extends {},
+    T extends object,
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 >(props: ResponsibleContainerProps<T, F, D>) {
@@ -288,7 +283,7 @@ export function ResponsibleContainer<
 
             return [
                 <Box className="DataGridBox">
-                    <DataGridEx<T>
+                    <DataGridEx<T, D>
                         autoLoad={!hasFields}
                         height={heightLocal}
                         width={rect.width}

package/src/mu/ScrollerListEx.tsx

@@ -47,7 +47,7 @@ const createGridStyle = (
 };
 
 // Default margin
-const defaultMargin = (margin: {}, isNarrow?: boolean) => {
+const defaultMargin = (margin: object, isNarrow?: boolean) => {
     const half = MUGlobal.half(margin);
 
     if (isNarrow == null) {
@@ -100,7 +100,7 @@ export interface ScrollerListExInnerItemRendererProps<T>
     /**
      * Default margins
      */
-    margins: {};
+    margins: object;
 }
 
 /**
@@ -110,27 +110,22 @@ export interface ScrollerListExInnerItemRendererProps<T>
  * 3. Dynamic calculation
  */
 export type ScrollerListExItemSize =
-    | ((index: number) => [number, number] | [number, number, {}])
+    | ((index: number) => [number, number] | [number, number, object])
     | [number, number]
-    | [number, {}, boolean?];
+    | [number, object, boolean?];
 
 /**
  * Extended ScrollerList Props
  */
-export interface ScrollerListExProps<
-    T extends {},
+export type ScrollerListExProps<
+    T extends object,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
-> extends Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> {
+> = Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> & {
     /**
      * Alternating colors for odd/even rows
      */
     alternatingColors?: [string?, string?];
 
-    /**
-     * Id field
-     */
-    idField?: D;
-
     /**
      * Inner item renderer
      */
@@ -143,6 +138,12 @@ export interface ScrollerListExProps<
      */
     itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
 
+    /**
+     * Id field
+     * Failed: D extends { id: DataTypes.IdType } ? { idField?: D } : { idField: D }
+     */
+    idField?: D;
+
     /**
      * Item size, a function indicates its a variable size list
      */
@@ -167,7 +168,7 @@ export interface ScrollerListExProps<
      * Selected color
      */
     selectedColor?: string;
-}
+};
 
 interface defaultItemRendererProps<T> extends ListChildComponentProps<T> {
     /**
@@ -205,7 +206,7 @@ interface defaultItemRendererProps<T> extends ListChildComponentProps<T> {
     /**
      * Default margins
      */
-    margins: {};
+    margins: object;
 
     /**
      * Item selected
@@ -263,7 +264,7 @@ function defaultItemRenderer<T>({
  * @returns Component
  */
 export function ScrollerListEx<
-    T extends {},
+    T extends object,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 >(props: ScrollerListExProps<T, D>) {
     // Selected item ref
@@ -331,7 +332,7 @@ export function ScrollerListEx<
 
     // Cache calculation
     const itemSizeResult = React.useMemo(():
-        | [number, number, {}]
+        | [number, number, object]
         | undefined => {
         if (typeof itemSize === 'function') return undefined;
         const [size, spaces, isNarrow] = itemSize;
@@ -350,7 +351,7 @@ export function ScrollerListEx<
     }, [itemSize]);
 
     // Calculate size
-    const calculateItemSize = (index: number): [number, number, {}] => {
+    const calculateItemSize = (index: number): [number, number, object] => {
         // Callback function
         if (typeof itemSize === 'function') {
             const result = itemSize(index);

package/src/mu/SearchOptionGroup.tsx

@@ -9,7 +9,7 @@ import { OptionGroup, OptionGroupProps } from './OptionGroup';
  * @returns Component
  */
 export function SearchOptionGroup<
-    T extends {} = DataTypes.IdLabelItem,
+    T extends object = DataTypes.IdLabelItem,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 >(props: OptionGroupProps<T, D>) {
     // Destruct

package/src/mu/SelectEx.tsx

@@ -18,32 +18,20 @@ import { ReactUtils } from '../app/ReactUtils';
 /**
  * Extended select component props
  */
-export interface SelectExProps<
-    T extends {},
+export type SelectExProps<
+    T extends object,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
-> extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
+> = Omit<SelectProps, 'labelId' | 'input' | 'native'> & {
     /**
      * Auto add blank item
      */
     autoAddBlankItem?: boolean;
 
-    /**
-     * Id field
-     */
-    idField: T extends DataTypes.IdLabelItem ? D | undefined : D;
-
     /**
      * Item icon renderer
      */
     itemIconRenderer?: (id: unknown) => React.ReactNode;
 
-    /**
-     * Label field
-     */
-    labelField:
-        | ((option: T) => string)
-        | (T extends DataTypes.IdLabelItem ? D | undefined : D);
-
     /**
      * Load data callback
      */
@@ -68,7 +56,20 @@ export interface 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
@@ -76,7 +77,7 @@ export interface SelectExProps<
  * @returns Component
  */
 export function SelectEx<
-    T extends {} = DataTypes.IdLabelItem,
+    T extends object = DataTypes.IdLabelItem,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 >(props: SelectExProps<T, D>) {
     // Destruct

package/src/mu/TableEx.tsx

@@ -47,56 +47,57 @@ export interface TableExMethodRef extends GridMethodRef {
 /**
  * Extended table props
  */
-export interface TableExProps<
-    T extends {},
+export type TableExProps<
+    T extends object,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
-> extends TableProps,
-        GridLoader<T> {
-    /**
-     * Alternating colors for odd/even rows
-     */
-    alternatingColors?: [string?, string?];
-
-    /**
-     * Columns
-     */
-    columns: GridColumn<T>[];
-
-    /**
-     * Header cells background color and font color
-     */
-    headerColors?: [string?, string?];
-
-    /**
-     * Id field
-     */
-    idField?: D;
-
-    /**
-     * Max height
-     */
-    maxHeight?: number;
-
-    /**
-     * Methods
-     */
-    mRef?: React.Ref<TableExMethodRef>;
-
-    /**
-     * On items select change
-     */
-    onSelectChange?: (selectedItems: T[]) => void;
-
-    /**
-     * Row height
-     */
-    rowHeight?: number;
-
-    /**
-     * Header and bottom height
-     */
-    otherHeight?: number;
-}
+> = TableProps &
+    GridLoader<T> & {
+        /**
+         * Alternating colors for odd/even rows
+         */
+        alternatingColors?: [string?, string?];
+
+        /**
+         * Columns
+         */
+        columns: GridColumn<T>[];
+
+        /**
+         * Header cells background color and font color
+         */
+        headerColors?: [string?, string?];
+
+        /**
+         * Max height
+         */
+        maxHeight?: number;
+
+        /**
+         * Methods
+         */
+        mRef?: React.Ref<TableExMethodRef>;
+
+        /**
+         * On items select change
+         */
+        onSelectChange?: (selectedItems: T[]) => void;
+
+        /**
+         * Row height
+         */
+        rowHeight?: number;
+
+        /**
+         * Header and bottom height
+         */
+        otherHeight?: number;
+    } & (T extends { id: DataTypes.IdType }
+        ? {
+              idField?: D;
+          }
+        : {
+              idField: D;
+          });
 
 /**
  * Extended Table
@@ -104,7 +105,7 @@ export interface TableExProps<
  * @returns Component
  */
 export function TableEx<
-    T extends {},
+    T extends object,
     D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 >(props: TableExProps<T, D>) {
     // Theme