@etsoo/react 1.4.76 → 1.4.80

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/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/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/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
  */
@@ -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.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/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

@@ -35,11 +35,11 @@ export interface ViewPageProps<T extends {}> extends Exclude<CommonPageProps, 'c
     /**
      * Actions
      */
-    actions?: React.ReactNode | ((data: T) => React.ReactNode);
+    actions?: React.ReactNode | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
     /**
      * Children
      */
-    children?: React.ReactNode | ((data: T) => React.ReactNode);
+    children?: React.ReactNode | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
     /**
      * Fields to display
      */

package/lib/mu/pages/ViewPage.js

@@ -63,13 +63,13 @@ export function ViewPage(props) {
     // Data
     const [data, setData] = React.useState();
     // Load data
-    const onRefresh = async () => {
+    const refresh = async () => {
         const result = await loadData();
         if (result == null)
             return;
         setData(result);
     };
-    return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? onRefresh : undefined, onUpdate: supportRefresh ? undefined : onRefresh, ...rest, scrollContainer: global }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
+    return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: global }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
         React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, className: "ET-ViewPage", sx: {
                 '.MuiTypography-subtitle2': {
                     fontWeight: 'bold'
@@ -77,7 +77,8 @@ export function ViewPage(props) {
             } }, fields.map((field, index) => {
             // Get data
             const [itemData, itemLabel, gridProps] = getItemField(field, data);
-            if (itemData == null)
+            // Some callback function may return '' instead of undefined
+            if (itemData == null || itemData === '')
                 return undefined;
             // Layout
             return (React.createElement(Grid, { item: true, ...gridProps, key: index },
@@ -86,6 +87,6 @@ export function ViewPage(props) {
                     ":"),
                 React.createElement(Typography, { variant: "subtitle2" }, itemData)));
         })),
-        actions != null && (React.createElement(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: paddings, paddingBottom: paddings, gap: paddings }, Utils.getResult(actions, data))),
-        Utils.getResult(children, data)))));
+        actions != null && (React.createElement(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: paddings, paddingBottom: paddings, gap: paddings }, Utils.getResult(actions, data, refresh))),
+        Utils.getResult(children, data, refresh)))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.76",
+    "version": "1.4.80",
     "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/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';
@@ -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/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/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;
@@ -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
@@ -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/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

@@ -60,12 +60,16 @@ export interface ViewPageProps<T extends {}>
     /**
      * Actions
      */
-    actions?: React.ReactNode | ((data: T) => React.ReactNode);
+    actions?:
+        | React.ReactNode
+        | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
 
     /**
      * Children
      */
-    children?: React.ReactNode | ((data: T) => React.ReactNode);
+    children?:
+        | React.ReactNode
+        | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
 
     /**
      * Fields to display
@@ -164,7 +168,7 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
     const [data, setData] = React.useState<T>();
 
     // Load data
-    const onRefresh = async () => {
+    const refresh = async () => {
         const result = await loadData();
         if (result == null) return;
         setData(result);
@@ -173,8 +177,8 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
     return (
         <CommonPage
             paddings={paddings}
-            onRefresh={supportRefresh ? onRefresh : undefined}
-            onUpdate={supportRefresh ? undefined : onRefresh}
+            onRefresh={supportRefresh ? refresh : undefined}
+            onUpdate={supportRefresh ? undefined : refresh}
             {...rest}
             scrollContainer={global}
         >
@@ -198,7 +202,9 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
                             const [itemData, itemLabel, gridProps] =
                                 getItemField(field, data);
 
-                            if (itemData == null) return undefined;
+                            // Some callback function may return '' instead of undefined
+                            if (itemData == null || itemData === '')
+                                return undefined;
 
                             // Layout
                             return (
@@ -227,10 +233,10 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
                             paddingBottom={paddings}
                             gap={paddings}
                         >
-                            {Utils.getResult(actions, data)}
+                            {Utils.getResult(actions, data, refresh)}
                         </Stack>
                     )}
-                    {Utils.getResult(children, data)}
+                    {Utils.getResult(children, data, refresh)}
                 </React.Fragment>
             )}
         </CommonPage>