@etsoo/react 1.5.75 → 1.5.78

package/src/components/ScrollerGrid.tsx

@@ -1,3 +1,4 @@
+import { DataTypes } 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> = 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> = DataTypes.Keys<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,20 +5,17 @@ import { ChangeEventHandler } from 'react';
 /**
  * Autocomplete extended props
  */
-export interface AutocompleteExtendedProps<T extends Record<string, unknown>>
-    extends Omit<
-        AutocompleteProps<T, undefined, false, false>,
-        'renderInput' | 'options'
-    > {
-    /**
-     * Id field, default is id
-     */
-    idField?: string & keyof T;
-
+export type AutocompleteExtendedProps<
+    T extends object,
+    D extends DataTypes.Keys<T>
+> = Omit<
+    AutocompleteProps<T, undefined, false, false>,
+    'renderInput' | 'options'
+> & {
     /**
      * Id value
      */
-    idValue?: DataTypes.IdType;
+    idValue?: T[D];
 
     /**
      * Autocomplete for the input
@@ -78,4 +75,10 @@ export interface AutocompleteExtendedProps<T extends Record<string, unknown>>
      * Is search field?
      */
     search?: boolean;
-}
+} & (T extends { id: DataTypes.IdType }
+        ? {
+              idField?: D;
+          }
+        : {
+              idField: D;
+          });

package/src/mu/ComboBox.tsx

@@ -1,5 +1,4 @@
-import { IdLabelDto } from '@etsoo/appscript';
-import { Keyboard } from '@etsoo/shared';
+import { DataTypes, Keyboard } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
 import { Utils as SharedUtils } from '@etsoo/shared';
@@ -11,8 +10,10 @@ import { ReactUtils } from '../app/ReactUtils';
 /**
  * ComboBox props
  */
-export interface ComboBoxProps<T extends {}>
-    extends AutocompleteExtendedProps<T> {
+export type ComboBoxProps<
+    T extends object,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+> = AutocompleteExtendedProps<T, D> & {
     /**
      * Auto add blank item
      */
@@ -23,11 +24,6 @@ export interface ComboBoxProps<T extends {}>
      */
     dataReadonly?: boolean;
 
-    /**
-     * Label field
-     */
-    labelField?: string & keyof T;
-
     /**
      * Load data callback
      */
@@ -42,19 +38,28 @@ export interface ComboBoxProps<T extends {}>
      * Array of options.
      */
     options?: ReadonlyArray<T>;
-}
+} & (T extends { label: string }
+        ? {
+              labelField?: D;
+          }
+        : {
+              labelField: D;
+          });
 
 /**
  * ComboBox
  * @param props Props
  * @returns Component
  */
-export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
+export function ComboBox<
+    T extends object = DataTypes.IdLabelItem,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+>(props: ComboBoxProps<T, D>) {
     // Destruct
     const {
         search = false,
         autoAddBlankItem = search,
-        idField = 'id',
+        idField = 'id' as D,
         idValue,
         inputError,
         inputHelperText,
@@ -64,7 +69,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         inputVariant,
         defaultValue,
         label,
-        labelField = 'label',
+        labelField = 'label' as D,
         loadData,
         onLoadData,
         name,
@@ -75,7 +80,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         onChange,
         openOnFocus = true,
         value,
-        getOptionLabel = (option: T) => String(Reflect.get(option, labelField)),
+        getOptionLabel = (option: T) => `${option[labelField]}`,
         sx = { minWidth: '150px' },
         ...rest
     } = props;
@@ -97,7 +102,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
     // Local default value
     let localValue =
         idValue != null
-            ? localOptions.find((o) => Reflect.get(o, idField) === idValue)
+            ? localOptions.find((o) => o[idField] === idValue)
             : defaultValue ?? value;
 
     if (localValue === undefined) localValue = null;
@@ -108,7 +113,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
 
     // Current id value
     // One time calculation for input's default value (uncontrolled)
-    const localIdValue = stateValue && Reflect.get(stateValue, idField);
+    const localIdValue = stateValue && stateValue[idField];
 
     React.useEffect(() => {
         if (localValue != null) setStateValue(localValue);
@@ -147,8 +152,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         const input = inputRef.current;
         if (input) {
             // Update value
-            const newValue =
-                value != null ? `${Reflect.get(value, idField)}` : '';
+            const newValue = value != null ? `${value[idField]}` : '';
 
             if (newValue !== input.value) {
                 // Different value, trigger change event
@@ -186,16 +190,16 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
                 type="text"
                 style={{ display: 'none' }}
                 name={name}
-                value={localIdValue ?? ''}
+                value={`${localIdValue ?? ''}`}
                 readOnly
                 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) =>
-                    Reflect.get(option, idField) === Reflect.get(value, idField)
+                    option[idField] === value[idField]
                 }
                 onChange={(event, value, reason, details) => {
                     // Set value

package/src/mu/DataGridEx.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { Utils } from '@etsoo/shared';
+import { DataTypes, 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> = 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> = DataTypes.Keys<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/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

@@ -1,4 +1,3 @@
-import { IdLabelDto } from '@etsoo/appscript';
 import { DataTypes, Utils } from '@etsoo/shared';
 import {
     Checkbox,
@@ -15,35 +14,25 @@ import React from 'react';
 /**
  * OptionGroup props
  */
-export interface OptionGroupProps<
-    T extends Record<string, any> = IdLabelDto,
-    D extends DataTypes.IdType = string
-> extends Omit<FormControlProps<'fieldset'>, 'defaultValue'> {
+export type OptionGroupProps<
+    T extends object = DataTypes.IdLabelItem,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+> = Omit<FormControlProps<'fieldset'>, 'defaultValue'> & {
     /**
      * Default value
      */
-    defaultValue?: D | D[];
+    defaultValue?: T[D] | T[D][];
 
     /**
      * Get option label function
      */
     getOptionLabel?: (option: T) => string;
 
-    /**
-     * Id field, default is id
-     */
-    idField?: string & keyof T;
-
     /**
      * Label
      */
     label?: string;
 
-    /**
-     * Label field, default is label
-     */
-    labelField?: string & keyof T;
-
     /**
      * Multiple choose item
      */
@@ -57,7 +46,7 @@ export interface OptionGroupProps<
     /**
      * On value change handler
      */
-    onValueChange?: (value: D | D[] | undefined) => void;
+    onValueChange?: (value: T[D] | T[D][] | undefined) => void;
 
     /**
      * Array of options.
@@ -73,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
@@ -81,16 +83,16 @@ export interface OptionGroupProps<
  * @returns Component
  */
 export function OptionGroup<
-    T extends Record<string, unknown> = IdLabelDto,
-    D extends DataTypes.IdType = string
+    T extends object = DataTypes.IdLabelItem,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 >(props: OptionGroupProps<T, D>) {
     // Destruct
     const {
         getOptionLabel,
         defaultValue,
-        idField = 'id',
+        idField = 'id' as D,
         label,
-        labelField = 'label',
+        labelField = 'label' as D,
         multiple = false,
         name,
         onValueChange,
@@ -103,10 +105,10 @@ export function OptionGroup<
 
     // Get option value
     // D type should be the source id type
-    const getOptionValue = (option: T): D | null => {
+    const getOptionValue = (option: T): T[D] | null => {
         const value = DataTypes.getValue(option, idField);
         if (value == null) return null;
-        return value as D;
+        return value as T[D];
     };
 
     // Checkbox values
@@ -142,7 +144,7 @@ export function OptionGroup<
                 onChange={(event) => {
                     if (firstOptionValue == null) return;
 
-                    const typeValue = Utils.parseString<D>(
+                    const typeValue = Utils.parseString(
                         event.target.value,
                         firstOptionValue
                     );
@@ -175,7 +177,7 @@ export function OptionGroup<
 
         // Value, convert to string
         // Will fail when type is number
-        const value = getOptionValue(option);
+        const value = getOptionValue(option) as unknown as React.Key;
 
         return (
             <FormControlLabel
@@ -197,7 +199,7 @@ export function OptionGroup<
             value={values[0]}
             onChange={(_event, value) => {
                 if (firstOptionValue == null) return;
-                const typeValue = Utils.parseString<D>(value, firstOptionValue);
+                const typeValue = Utils.parseString(value, firstOptionValue);
                 if (onValueChange) onValueChange(typeValue);
                 setValues([typeValue]);
             }}