@etsoo/react 1.4.75 → 1.4.79

package/lib/app/Utils.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * React utils
  */
@@ -8,6 +9,12 @@ export declare namespace Utils {
      * @returns Formatted value
      */
     function formatInputValue(value: unknown): string | number | any[] | undefined;
+    /**
+     * Is safe click
+     * @param event Mouse event
+     * @returns Result
+     */
+    function isSafeClick(event: React.MouseEvent<HTMLElement>): boolean;
     /**
      * Trigger input change event
      * @param input Form input

package/lib/app/Utils.js

@@ -20,6 +20,32 @@ export var Utils;
         return String(value);
     }
     Utils.formatInputValue = formatInputValue;
+    /**
+     * Is safe click
+     * @param event Mouse event
+     * @returns Result
+     */
+    function isSafeClick(event) {
+        // No target
+        // HTMLElement <= Element, SVGElement <= Element
+        if (!(event.target instanceof Element))
+            return true;
+        // Outside of the currentTarget
+        let target = event.target;
+        if (!event.currentTarget.contains(target))
+            return false;
+        while (target != null && target != event.currentTarget) {
+            const nodeName = target.nodeName.toUpperCase();
+            if (nodeName === 'INPUT' ||
+                nodeName === 'BUTTON' ||
+                nodeName === 'A' ||
+                target.hasAttribute('onClick'))
+                return false;
+            target = target.parentElement;
+        }
+        return true;
+    }
+    Utils.isSafeClick = isSafeClick;
     /**
      * Trigger input change event
      * @param input Form input

package/lib/components/GridColumn.d.ts

@@ -123,7 +123,7 @@ export interface GridColumn<T> {
     /**
      * The column identifier. It's used to map with row data
      */
-    field?: string;
+    field?: string & keyof T;
     /**
      * The title of the column rendered in the column header cell
      */

package/lib/components/ScrollerGrid.d.ts

@@ -33,7 +33,7 @@ export interface ScrollerGridProps<T> extends GridLoader<T>, Omit<VariableSizeGr
      * Id field
      * @default id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
     /**
      * Item renderer
      */

package/lib/mu/AutocompleteExtendedProps.d.ts

@@ -8,7 +8,7 @@ export interface AutocompleteExtendedProps<T extends Record<string, unknown>> ex
     /**
      * Id field, default is id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
     /**
      * Id value
      */

package/lib/mu/ComboBox.d.ts

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

package/lib/mu/ComboBox.js

@@ -2,6 +2,7 @@ import { Keyboard } from '@etsoo/shared';
 import { Autocomplete } from '@mui/material';
 import React from 'react';
 import { Utils } from '../app/Utils';
+import { Utils as SharedUtils } from '@etsoo/shared';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
 /**
@@ -81,6 +82,9 @@ export function ComboBox(props) {
                     return;
                 if (onLoadData)
                     onLoadData(result);
+                if (search) {
+                    SharedUtils.addBlankItem(result, idField, labelField);
+                }
                 setOptions(result);
             });
         }

package/lib/mu/DataGridEx.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { GridColumn } from '../components/GridColumn';
 import { GridLoaderStates } from '../components/GridLoader';
 import { ScrollerGridProps } from '../components/ScrollerGrid';
+import { MouseEventWithDataHandler } from './MUGlobal';
 /**
  * Footer item renderer props
  */
@@ -55,6 +56,14 @@ export interface DataGridExProps<T extends Record<string, any>> extends Omit<Scr
      * Hover color
      */
     hoverColor?: string;
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
     /**
      * Selectable to support hover over and out effect and row clickable
      * @default true

package/lib/mu/DataGridEx.js

@@ -126,7 +126,7 @@ export function DataGridEx(props) {
         })));
     }
     // Destruct
-    const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = '#f6f9fb', idField = 'id', mRef = React.createRef(), selectable = true, selectedColor = '#edf4fb', width, ...rest } = props;
+    const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = '#f6f9fb', idField = 'id', mRef = React.createRef(), onClick, onDoubleClick, selectable = true, selectedColor = '#edf4fb', width, ...rest } = props;
     if (checkable) {
         const cbColumn = {
             field: 'selected',
@@ -261,7 +261,7 @@ export function DataGridEx(props) {
             cellProps,
             renderProps
         });
-        return (React.createElement("div", { className: rowClass, style: style, "data-row": rowIndex, "data-column": columnIndex, onMouseDown: selectable && !checkable ? handleMouseDown : undefined, onMouseOver: selectable ? handleMouseOver : undefined, onMouseOut: selectable ? handleMouseOut : undefined },
+        return (React.createElement("div", { className: rowClass, style: style, "data-row": rowIndex, "data-column": columnIndex, onMouseDown: selectable && !checkable ? handleMouseDown : undefined, onMouseOver: selectable ? handleMouseOver : undefined, onMouseOut: selectable ? handleMouseOut : undefined, onClick: (event) => onClick && data != null && onClick(event, data), onDoubleClick: (event) => onDoubleClick && data != null && onDoubleClick(event, data) },
             React.createElement(Box, { ...cellProps, onMouseEnter: handleMouseEnter }, child)));
     };
     // Column width calculator

package/lib/mu/DnDList.d.ts

@@ -31,7 +31,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Label field
      */
-    labelField: keyof D;
+    labelField: string & keyof D;
     /**
      * Load data
      */

package/lib/mu/ItemList.d.ts

@@ -10,11 +10,11 @@ export interface ItemListProps<T extends Record<string, unknown>> {
     /**
      * Id field name
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
     /**
      * Label field name or callback
      */
-    labelField?: keyof T | ((item: T) => string);
+    labelField?: (string & keyof T) | ((item: T) => string);
     /**
      * Button icon
      */

package/lib/mu/MUGlobal.d.ts

@@ -1,4 +1,12 @@
+/// <reference types="react" />
 import { Theme } from '@mui/material';
+/**
+ * Mouse event handler with data
+ */
+export declare type MouseEventWithDataHandler<T> = (event: React.MouseEvent<HTMLDivElement>, data: T) => void;
+/**
+ * MUGlobal for global configurations
+ */
 export declare class MUGlobal {
     /**
      * Search field shrink

package/lib/mu/MUGlobal.js

@@ -1,4 +1,7 @@
 import { NumberUtils } from '@etsoo/shared';
+/**
+ * MUGlobal for global configurations
+ */
 export class MUGlobal {
     /**
      * Update object number properties with half of it

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?: keyof T;
+    idField?: string & keyof T;
     /**
      * Label
      */
@@ -25,7 +25,7 @@ export interface OptionGroupProps<T extends Record<string, any> = IdLabelDto, D
     /**
      * Label field, default is label
      */
-    labelField?: keyof T;
+    labelField?: string & keyof T;
     /**
      * Multiple choose item
      */

package/lib/mu/ResponsibleContainer.d.ts

@@ -72,6 +72,10 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
      * Pull to refresh data
      */
     pullToRefresh?: boolean;
+    /**
+     * Quick action for double click or click under mobile
+     */
+    quickAction?: (data: T) => void;
     /**
      * Size ready to read miliseconds span
      */

package/lib/mu/ResponsibleContainer.js

@@ -1,6 +1,7 @@
 import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { Labels } from '../app/Labels';
+import { Utils } from '../app/Utils';
 import { GridDataGet } from '../components/GridLoader';
 import useCombinedRefs from '../uses/useCombinedRefs';
 import { useDimensions } from '../uses/useDimensions';
@@ -24,7 +25,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, sizeReadyMiliseconds = 0, ...rest } = props;
+    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -106,7 +107,7 @@ export function ResponsibleContainer(props) {
             delete rest.itemRenderer;
             return [
                 React.createElement(Box, { className: "DataGridBox" },
-                    React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, outerRef: (element) => {
+                    React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
                             if (element != null && elementReady)
                                 elementReady(element, true);
                         }, columns: columns, ...rest })),
@@ -124,7 +125,9 @@ export function ResponsibleContainer(props) {
         delete rest.selectable;
         return [
             React.createElement(Box, { className: "ListBox", sx: { height: heightLocal } },
-                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, oRef: (element) => {
+                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction &&
+                        Utils.isSafeClick(event) &&
+                        quickAction(data), oRef: (element) => {
                         if (element != null && elementReady)
                             elementReady(element, false);
                     }, ...rest })),

package/lib/mu/ScrollerListEx.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { ScrollerListProps } from '../components/ScrollerList';
+import { MouseEventWithDataHandler } from './MUGlobal';
 /**
  * Extended ScrollerList inner item renderer props
  */
@@ -40,7 +41,7 @@ export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'item
     /**
      * Id field
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
     /**
      * Inner item renderer
      */
@@ -53,6 +54,14 @@ export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'item
      * Item size, a function indicates its a variable size list
      */
     itemSize: ScrollerListExItemSize;
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
     /**
      * On items select change
      */

package/lib/mu/ScrollerListEx.js

@@ -66,7 +66,7 @@ const defaultMargin = (margin, isNarrow) => {
     };
 };
 // Default itemRenderer
-function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, selected, style, itemHeight, space, margins }) {
+function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, selected, style, itemHeight, onClick, onDoubleClick, space, margins }) {
     // Child
     const child = innerItemRenderer({
         index,
@@ -81,7 +81,7 @@ function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, sele
     if (selected)
         rowClass += ` ${selectedClassName}`;
     // Layout
-    return (React.createElement("div", { className: rowClass, style: style, onMouseDown: (event) => onMouseDown(event.currentTarget, data) }, child));
+    return (React.createElement("div", { className: rowClass, style: style, onMouseDown: (event) => onMouseDown(event.currentTarget, data), onClick: (event) => onClick && onClick(event, data), onDoubleClick: (event) => onDoubleClick && onDoubleClick(event, data) }, child));
 }
 /**
  * Extended ScrollerList
@@ -118,12 +118,14 @@ export function ScrollerListEx(props) {
             itemHeight,
             innerItemRenderer,
             onMouseDown,
+            onClick,
+            onDoubleClick,
             space,
             margins,
             selected: isSelected(itemProps.data),
             ...itemProps
         });
-    }, onSelectChange, selectedColor = '#edf4fb', ...rest } = props;
+    }, onClick, onDoubleClick, onSelectChange, selectedColor = '#edf4fb', ...rest } = props;
     // Theme
     const theme = useTheme();
     // Cache calculation

package/lib/mu/SelectBool.js

@@ -1,3 +1,4 @@
+import { Utils } from '@etsoo/shared';
 import React from 'react';
 import { globalApp } from '..';
 import { SelectEx } from './SelectEx';
@@ -15,7 +16,7 @@ export function SelectBool(props) {
         { id: 'true', label: globalApp.get('yes') }
     ];
     if (search)
-        options.unshift({ id: '', label: '---' });
+        Utils.addBlankItem(options);
     // Layout
     return React.createElement(SelectEx, { options: options, search: search, ...rest });
 }

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?: keyof T;
+    idField?: string & 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) | keyof T;
+    labelField?: ((option: T) => string) | (string & keyof T);
     /**
      * Load data callback
      */

package/lib/mu/SelectEx.js

@@ -3,6 +3,7 @@ import { Checkbox, FormControl, InputLabel, ListItemText, MenuItem, OutlinedInpu
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
+import { Utils } from '@etsoo/shared';
 /**
  * Extended select component
  * @param props Props
@@ -68,6 +69,16 @@ export function SelectEx(props) {
             }
         }
     };
+    // Get option id
+    const getId = (option) => {
+        return Reflect.get(option, idField);
+    };
+    // Get option label
+    const getLabel = (option) => {
+        return typeof labelField === 'function'
+            ? labelField(option)
+            : Reflect.get(option, labelField);
+    };
     // Refs
     const divRef = React.useRef();
     // When layout ready
@@ -86,6 +97,9 @@ export function SelectEx(props) {
                     return;
                 if (onLoadData)
                     onLoadData(result);
+                if (search) {
+                    Utils.addBlankItem(result, idField, labelField);
+                }
                 setOptions(result);
             });
         }
@@ -107,18 +121,19 @@ export function SelectEx(props) {
             }, renderValue: (selected) => {
                 // The text shows up
                 return localOptions
-                    .filter((option) => Array.isArray(selected)
-                    ? selected.indexOf(option.id) !== -1
-                    : selected === option.id)
-                    .map((option) => option.label)
+                    .filter((option) => {
+                    const id = getId(option);
+                    return Array.isArray(selected)
+                        ? selected.indexOf(id) !== -1
+                        : selected === id;
+                })
+                    .map((option) => getLabel(option))
                     .join(', ');
             }, sx: { minWidth: '150px' }, ...rest }, localOptions.map((option) => {
             // Option id
-            const id = option[idField];
+            const id = getId(option);
             // Option label
-            const label = typeof labelField === 'function'
-                ? labelField(option)
-                : option[labelField];
+            const label = getLabel(option);
             // Option
             return (React.createElement(MenuItem, { key: id, value: id, onClick: (event) => {
                     if (onItemClick) {

package/lib/mu/TableEx.d.ts

@@ -35,7 +35,7 @@ export interface TableExProps<T extends Record<string, any>> extends TableProps,
     /**
      * Id field
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
     /**
      * Max height
      */

package/lib/mu/Tiplist.js

@@ -10,7 +10,6 @@ import { SearchField } from './SearchField';
  * @returns Component
  */
 export function Tiplist(props) {
-    var _a;
     // Destruct
     const { search = false, idField = 'id', idValue, inputAutoComplete = 'off', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: '180px' }, ...rest } = props;
     // Value input ref
@@ -30,6 +29,8 @@ export function Tiplist(props) {
         options: [],
         value: null
     });
+    // Input value
+    const inputValue = React.useMemo(() => states.value && Reflect.get(states.value, idField), [states.value]);
     React.useEffect(() => {
         if (localValue != null)
             stateUpdate({ value: localValue });
@@ -134,7 +135,7 @@ export function Tiplist(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: (_a = (states.value && Reflect.get(states.value, idField))) !== null && _a !== void 0 ? _a : '', readOnly: true, onChange: inputOnChange }),
+        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: inputValue !== null && inputValue !== void 0 ? inputValue : '', readOnly: true, onChange: inputOnChange }),
         React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                 // Set value
                 setInputValue(value);

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

@@ -32,4 +32,8 @@ export interface ResponsePageProps<T, F extends DataTypes.BasicTemplate> extends
      * Pull to refresh data
      */
     pullToRefresh?: boolean;
+    /**
+     * Quick action for double click or click under mobile
+     */
+    quickAction?: (data: T) => void;
 }

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

@@ -9,7 +9,7 @@ export interface ViewPageField<T extends {}> extends GridProps {
     /**
      * Data field
      */
-    data: keyof T | ((item: T) => React.ReactNode);
+    data: (string & keyof T) | ((item: T) => React.ReactNode);
     /**
      * Data type
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.75",
+    "version": "1.4.79",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.28",
+        "@etsoo/appscript": "^1.2.29",
         "@etsoo/notificationbase": "^1.1.0",
-        "@etsoo/shared": "^1.1.6",
+        "@etsoo/shared": "^1.1.9",
         "@mui/icons-material": "^5.3.1",
         "@mui/material": "^5.3.1",
         "@reach/router": "^1.3.4",
@@ -85,7 +85,7 @@
         "@types/react-test-renderer": "^17.0.1",
         "@typescript-eslint/eslint-plugin": "^5.10.1",
         "@typescript-eslint/parser": "^5.10.1",
-        "eslint": "^8.7.0",
+        "eslint": "^8.8.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-react": "^7.28.0",

package/src/app/Utils.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * React utils
  */
@@ -19,6 +21,36 @@ export namespace Utils {
         return String(value);
     }
 
+    /**
+     * Is safe click
+     * @param event Mouse event
+     * @returns Result
+     */
+    export function isSafeClick(event: React.MouseEvent<HTMLElement>) {
+        // No target
+        // HTMLElement <= Element, SVGElement <= Element
+        if (!(event.target instanceof Element)) return true;
+
+        // Outside of the currentTarget
+        let target: Element | null = event.target;
+        if (!event.currentTarget.contains(target)) return false;
+
+        while (target != null && target != event.currentTarget) {
+            const nodeName = target.nodeName.toUpperCase();
+            if (
+                nodeName === 'INPUT' ||
+                nodeName === 'BUTTON' ||
+                nodeName === 'A' ||
+                target.hasAttribute('onClick')
+            )
+                return false;
+
+            target = target.parentElement;
+        }
+
+        return true;
+    }
+
     /**
      * Trigger input change event
      * @param input Form input

package/src/components/GridColumn.ts

@@ -160,7 +160,7 @@ export interface GridColumn<T> {
     /**
      * The column identifier. It's used to map with row data
      */
-    field?: string;
+    field?: string & keyof T;
 
     /**
      * The title of the column rendered in the column header cell

package/src/components/ScrollerGrid.tsx

@@ -54,7 +54,7 @@ export interface ScrollerGridProps<T>
      * Id field
      * @default id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Item renderer

package/src/mu/AutocompleteExtendedProps.ts

@@ -13,7 +13,7 @@ export interface AutocompleteExtendedProps<T extends Record<string, unknown>>
     /**
      * Id field, default is id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Id value

package/src/mu/ComboBox.tsx

@@ -3,6 +3,7 @@ import { Keyboard } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
 import { Utils } from '../app/Utils';
+import { Utils as SharedUtils } from '@etsoo/shared';
 import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
@@ -20,7 +21,7 @@ export interface ComboBoxProps<T extends {}>
     /**
      * Label field
      */
-    labelField?: keyof T;
+    labelField?: string & keyof T;
 
     /**
      * Load data callback
@@ -155,6 +156,9 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
             loadData().then((result) => {
                 if (result == null || !isMounted.current) return;
                 if (onLoadData) onLoadData(result);
+                if (search) {
+                    SharedUtils.addBlankItem(result, idField, labelField);
+                }
                 setOptions(result);
             });
         }

package/src/mu/DataGridEx.tsx

@@ -25,6 +25,7 @@ import {
 } from '../components/ScrollerGrid';
 import useCombinedRefs from '../uses/useCombinedRefs';
 import { DataGridRenderers } from './DataGridRenderers';
+import { MouseEventWithDataHandler } from './MUGlobal';
 
 /**
  * Footer item renderer props
@@ -98,6 +99,16 @@ export interface DataGridExProps<T extends Record<string, any>>
      */
     hoverColor?: string;
 
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
+
     /**
      * Selectable to support hover over and out effect and row clickable
      * @default true
@@ -351,6 +362,8 @@ export function DataGridEx<T extends Record<string, any>>(
         hoverColor = '#f6f9fb',
         idField = 'id',
         mRef = React.createRef(),
+        onClick,
+        onDoubleClick,
         selectable = true,
         selectedColor = '#edf4fb',
         width,
@@ -567,6 +580,12 @@ export function DataGridEx<T extends Record<string, any>>(
                 }
                 onMouseOver={selectable ? handleMouseOver : undefined}
                 onMouseOut={selectable ? handleMouseOut : undefined}
+                onClick={(event) =>
+                    onClick && data != null && onClick(event, data)
+                }
+                onDoubleClick={(event) =>
+                    onDoubleClick && data != null && onDoubleClick(event, data)
+                }
             >
                 <Box {...cellProps} onMouseEnter={handleMouseEnter}>
                     {child}

package/src/mu/DnDList.tsx

@@ -50,7 +50,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Label field
      */
-    labelField: keyof D;
+    labelField: string & keyof D;
 
     /**
      * Load data

package/src/mu/ItemList.tsx

@@ -22,12 +22,12 @@ export interface ItemListProps<T extends Record<string, unknown>> {
     /**
      * Id field name
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Label field name or callback
      */
-    labelField?: keyof T | ((item: T) => string);
+    labelField?: (string & keyof T) | ((item: T) => string);
 
     /**
      * Button icon

package/src/mu/MUGlobal.ts

@@ -1,6 +1,17 @@
 import { NumberUtils } from '@etsoo/shared';
 import { Breakpoint, Theme } from '@mui/material';
 
+/**
+ * Mouse event handler with data
+ */
+export type MouseEventWithDataHandler<T> = (
+    event: React.MouseEvent<HTMLDivElement>,
+    data: T
+) => void;
+
+/**
+ * MUGlobal for global configurations
+ */
 export class MUGlobal {
     /**
      * Search field shrink

package/src/mu/OptionGroup.tsx

@@ -32,7 +32,7 @@ export interface OptionGroupProps<
     /**
      * Id field, default is id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Label
@@ -42,7 +42,7 @@ export interface OptionGroupProps<
     /**
      * Label field, default is label
      */
-    labelField?: keyof T;
+    labelField?: string & keyof T;
 
     /**
      * Multiple choose item

package/src/mu/ResponsibleContainer.tsx

@@ -3,6 +3,7 @@ import { Box, Stack, SxProps, Theme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { Labels } from '../app/Labels';
+import { Utils } from '../app/Utils';
 import { GridColumn } from '../components/GridColumn';
 import {
     GridDataGet,
@@ -125,6 +126,11 @@ export interface ResponsibleContainerProps<
      */
     pullToRefresh?: boolean;
 
+    /**
+     * Quick action for double click or click under mobile
+     */
+    quickAction?: (data: T) => void;
+
     /**
      * Size ready to read miliseconds span
      */
@@ -173,6 +179,7 @@ export function ResponsibleContainer<
         mRef,
         paddings = MUGlobal.pagePaddings,
         pullToRefresh = true,
+        quickAction,
         sizeReadyMiliseconds = 0,
         ...rest
     } = props;
@@ -285,6 +292,9 @@ export function ResponsibleContainer<
                         width={rect.width}
                         loadData={localLoadData}
                         mRef={mRefs}
+                        onDoubleClick={(_, data) =>
+                            quickAction && quickAction(data)
+                        }
                         outerRef={(element?: HTMLDivElement) => {
                             if (element != null && elementReady)
                                 elementReady(element, true);
@@ -314,6 +324,11 @@ export function ResponsibleContainer<
                     height={heightLocal}
                     loadData={localLoadData}
                     mRef={mRefs}
+                    onClick={(event, data) =>
+                        quickAction &&
+                        Utils.isSafeClick(event) &&
+                        quickAction(data)
+                    }
                     oRef={(element) => {
                         if (element != null && elementReady)
                             elementReady(element, false);

package/src/mu/ScrollerListEx.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { ScrollerList, ScrollerListProps } from '../components/ScrollerList';
-import { MUGlobal } from './MUGlobal';
+import { MouseEventWithDataHandler, MUGlobal } from './MUGlobal';
 
 // Scroll bar size
 const scrollbarSize = 16;
@@ -127,7 +127,7 @@ export interface ScrollerListExProps<T>
     /**
      * Id field
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Inner item renderer
@@ -146,6 +146,16 @@ export interface ScrollerListExProps<T>
      */
     itemSize: ScrollerListExItemSize;
 
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
+
     /**
      * On items select change
      */
@@ -175,6 +185,16 @@ interface defaultItemRendererProps<T> extends ListChildComponentProps<T> {
      */
     itemHeight: number;
 
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
+
     /**
      * Item space
      */
@@ -200,6 +220,8 @@ function defaultItemRenderer<T>({
     selected,
     style,
     itemHeight,
+    onClick,
+    onDoubleClick,
     space,
     margins
 }: defaultItemRendererProps<T>) {
@@ -223,6 +245,10 @@ function defaultItemRenderer<T>({
             className={rowClass}
             style={style}
             onMouseDown={(event) => onMouseDown(event.currentTarget, data)}
+            onClick={(event) => onClick && onClick(event, data)}
+            onDoubleClick={(event) =>
+                onDoubleClick && onDoubleClick(event, data)
+            }
         >
             {child}
         </div>
@@ -282,12 +308,16 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
                 itemHeight,
                 innerItemRenderer,
                 onMouseDown,
+                onClick,
+                onDoubleClick,
                 space,
                 margins,
                 selected: isSelected(itemProps.data),
                 ...itemProps
             });
         },
+        onClick,
+        onDoubleClick,
         onSelectChange,
         selectedColor = '#edf4fb',
         ...rest

package/src/mu/SelectBool.tsx

@@ -1,4 +1,5 @@
 import { IdLabelDto } from '@etsoo/appscript';
+import { Utils } from '@etsoo/shared';
 import React from 'react';
 import { globalApp } from '..';
 import { SelectEx, SelectExProps } from './SelectEx';
@@ -24,7 +25,7 @@ export function SelectBool(props: SelectBoolProps) {
         { id: 'true', label: globalApp.get('yes')! }
     ];
 
-    if (search) options.unshift({ id: '', label: '---' });
+    if (search) Utils.addBlankItem(options);
 
     // Layout
     return <SelectEx options={options} search={search} {...rest} />;

package/src/mu/SelectEx.tsx

@@ -14,6 +14,7 @@ import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { IdLabelDto } from '@etsoo/appscript';
 import { ListItemRightIcon } from './ListItemRightIcon';
+import { Utils } from '@etsoo/shared';
 
 /**
  * Extended select component props
@@ -23,7 +24,7 @@ export interface SelectExProps<T extends {}>
     /**
      * Id field, default is id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Item icon renderer
@@ -33,7 +34,7 @@ export interface SelectExProps<T extends {}>
     /**
      * Label field, default is label
      */
-    labelField?: ((option: T) => string) | keyof T;
+    labelField?: ((option: T) => string) | (string & keyof T);
 
     /**
      * Load data callback
@@ -143,6 +144,18 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
         }
     };
 
+    // Get option id
+    const getId = (option: T) => {
+        return Reflect.get(option, idField);
+    };
+
+    // Get option label
+    const getLabel = (option: T) => {
+        return typeof labelField === 'function'
+            ? labelField(option)
+            : Reflect.get(option, labelField);
+    };
+
     // Refs
     const divRef = React.useRef<HTMLDivElement>();
 
@@ -159,6 +172,9 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
             loadData().then((result) => {
                 if (result == null || !isMounted.current) return;
                 if (onLoadData) onLoadData(result);
+                if (search) {
+                    Utils.addBlankItem(result, idField, labelField);
+                }
                 setOptions(result);
             });
         }
@@ -198,26 +214,24 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
                 renderValue={(selected) => {
                     // The text shows up
                     return localOptions
-                        .filter((option: any) =>
-                            Array.isArray(selected)
-                                ? selected.indexOf(option.id) !== -1
-                                : selected === option.id
-                        )
-                        .map((option: any) => option.label)
+                        .filter((option) => {
+                            const id = getId(option);
+                            return Array.isArray(selected)
+                                ? selected.indexOf(id) !== -1
+                                : selected === id;
+                        })
+                        .map((option) => getLabel(option))
                         .join(', ');
                 }}
                 sx={{ minWidth: '150px' }}
                 {...rest}
             >
-                {localOptions.map((option: any) => {
+                {localOptions.map((option) => {
                     // Option id
-                    const id = option[idField];
+                    const id = getId(option);
 
                     // Option label
-                    const label =
-                        typeof labelField === 'function'
-                            ? labelField(option)
-                            : option[labelField];
+                    const label = getLabel(option);
 
                     // Option
                     return (

package/src/mu/TableEx.tsx

@@ -68,7 +68,7 @@ export interface TableExProps<T extends Record<string, any>>
     /**
      * Id field
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Max height
@@ -107,7 +107,7 @@ export function TableEx<T extends Record<string, unknown>>(
     // Theme
     const theme = useTheme();
 
-    type keyType = keyof T;
+    type keyType = string & keyof T;
 
     // Destruct
     const {

package/src/mu/Tiplist.tsx

@@ -83,6 +83,12 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
         }
     );
 
+    // Input value
+    const inputValue = React.useMemo(
+        () => states.value && Reflect.get(states.value, idField),
+        [states.value]
+    );
+
     React.useEffect(() => {
         if (localValue != null) stateUpdate({ value: localValue });
     }, [localValue]);
@@ -219,9 +225,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
                 type="text"
                 style={{ display: 'none' }}
                 name={name}
-                value={
-                    (states.value && Reflect.get(states.value, idField)) ?? ''
-                }
+                value={inputValue ?? ''}
                 readOnly
                 onChange={inputOnChange}
             />

package/src/mu/pages/ResponsivePageProps.ts

@@ -46,4 +46,9 @@ export interface ResponsePageProps<T, F extends DataTypes.BasicTemplate>
      * Pull to refresh data
      */
     pullToRefresh?: boolean;
+
+    /**
+     * Quick action for double click or click under mobile
+     */
+    quickAction?: (data: T) => void;
 }

package/src/mu/pages/ViewPage.tsx

@@ -24,7 +24,7 @@ export interface ViewPageField<T extends {}> extends GridProps {
     /**
      * Data field
      */
-    data: keyof T | ((item: T) => React.ReactNode);
+    data: (string & keyof T) | ((item: T) => React.ReactNode);
 
     /**
      * Data type