@etsoo/react 1.4.38 → 1.4.42

package/lib/app/Labels.d.ts

@@ -8,6 +8,7 @@ export declare namespace Labels {
      */
     const CommonPage: {
         add: string;
+        delete: string;
         more: string;
         pullToRefresh: string;
         refresh: string;

package/lib/app/Labels.js

@@ -9,6 +9,7 @@ export var Labels;
      */
     Labels.CommonPage = {
         add: 'Add',
+        delete: 'Delete',
         more: 'More',
         pullToRefresh: 'Pull down to refresh',
         refresh: 'Refresh',

package/lib/mu/DataGridRenderers.js

@@ -67,7 +67,7 @@ export var DataGridRenderers;
             if (value)
                 return React.createElement(CheckIcon, { fontSize: "small" });
             else
-                return React.createElement(ClearIcon, { fontSize: "small", color: "error" });
+                return React.createElement(ClearIcon, { fontSize: "small", color: "warning" });
         }
         // To string
         return new String(value);

package/lib/mu/MUGlobal.d.ts

@@ -1,3 +1,4 @@
+import { Theme } from '@mui/material';
 export declare class MUGlobal {
     /**
      * Search field shrink
@@ -62,6 +63,20 @@ export declare class MUGlobal {
      * @returns Updated object
      */
     static adjustWithTheme(size: number, adjust: {}, updateFunc: (value: number) => string): {};
+    /**
+     * Break points defined
+     */
+    static breakpoints: readonly ["xs", "sm", "md", "lg", "xl"];
+    /**
+     * Get multple medias theme space
+     * Responsive values and Breakpoints as an object
+     * xs = theme.breakpoints.up('xs')
+     * https://mui.com/system/basics/
+     * @param spaces Spaces
+     * @param theme Theme
+     * @returns Result
+     */
+    static getSpace(spaces: {}, theme: Theme): number;
     /**
      * Update object number properties with theme
      * @param input Input object

package/lib/mu/MUGlobal.js

@@ -70,6 +70,30 @@ export class MUGlobal {
         });
         return newObj;
     }
+    /**
+     * Get multple medias theme space
+     * Responsive values and Breakpoints as an object
+     * xs = theme.breakpoints.up('xs')
+     * https://mui.com/system/basics/
+     * @param spaces Spaces
+     * @param theme Theme
+     * @returns Result
+     */
+    static getSpace(spaces, theme) {
+        const start = this.breakpoints.length - 1;
+        for (let i = start; i >= 0; i--) {
+            const key = this.breakpoints[i];
+            const value = Reflect.get(spaces, key);
+            if (typeof value === 'number') {
+                const mediaRaw = theme.breakpoints.up(key);
+                const mediaQuery = mediaRaw.substring(mediaRaw.indexOf('('));
+                if (window.matchMedia(mediaQuery).matches) {
+                    return parseInt(theme.spacing(value), 10);
+                }
+            }
+        }
+        return 0;
+    }
     /**
      * Update object number properties with theme
      * @param input Input object
@@ -118,3 +142,7 @@ MUGlobal.textFieldVariant = 'filled';
  * Page default paddings
  */
 MUGlobal.pagePaddings = { xs: 2, sm: 3 };
+/**
+ * Break points defined
+ */
+MUGlobal.breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];

package/lib/mu/MobileListItemRenderer.d.ts

@@ -1,4 +1,3 @@
-import { SxProps, Theme } from '@mui/material';
 import React from 'react';
 import { ListItemReact } from '../components/ListItemReact';
 import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
@@ -9,7 +8,7 @@ import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
  * @param renderer Renderer for card content
  * @returns Component
  */
-export declare function MobileListItemRenderer<T>({ data, itemHeight }: ScrollerListExInnerItemRendererProps<T>, margin: {} | [{}, boolean] | (() => SxProps<Theme>), renderer: (data: T) => [
+export declare function MobileListItemRenderer<T>({ data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>, renderer: (data: T) => [
     string,
     string | undefined,
     React.ReactNode | (ListItemReact | boolean)[],

package/lib/mu/MobileListItemRenderer.js

@@ -1,7 +1,6 @@
 import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
 import React from 'react';
 import { MoreFab } from './MoreFab';
-import { MUGlobal } from './MUGlobal';
 function getActions(input) {
     // Actions
     const actions = [];
@@ -19,48 +18,15 @@ function getActions(input) {
  * @param renderer Renderer for card content
  * @returns Component
  */
-export function MobileListItemRenderer({ data, itemHeight }, margin, renderer) {
+export function MobileListItemRenderer({ data, itemHeight, margins }, renderer) {
     // Loading
     if (data == null)
         return React.createElement(LinearProgress, null);
     // Elements
     const [title, subheader, actions, children] = renderer(data);
-    // Calculate margin
-    const calculateMargin = () => {
-        if (typeof margin === 'function')
-            return margin();
-        if (Array.isArray(margin)) {
-            const marginValue = margin[0];
-            const isNarrow = margin[1];
-            const half = MUGlobal.half(marginValue);
-            if (isNarrow) {
-                return {
-                    marginLeft: 0,
-                    marginRight: 0,
-                    marginTop: half,
-                    marginBottom: half
-                };
-            }
-            else {
-                return {
-                    marginLeft: half,
-                    marginRight: half,
-                    marginTop: half,
-                    marginBottom: half
-                };
-            }
-        }
-        const half = MUGlobal.half(margin);
-        return {
-            marginLeft: margin,
-            marginRight: margin,
-            marginTop: half,
-            marginBottom: half
-        };
-    };
     return (React.createElement(Card, { sx: {
-            height: (theme) => MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
-            ...calculateMargin()
+            height: itemHeight,
+            ...margins
         } },
         React.createElement(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (React.createElement(MoreFab, { iconButton: true, size: "small", anchorOrigin: {
                     vertical: 'bottom',

package/lib/mu/ResponsibleContainer.d.ts

@@ -6,7 +6,7 @@ import { GridColumn } from '../components/GridColumn';
 import { GridJsonData } from '../components/GridLoader';
 import { DataGridExProps } from './DataGridEx';
 import { GridMethodRef } from './GridMethodRef';
-import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
+import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from './ScrollerListEx';
 /**
  * ResponsibleContainer props
  */
@@ -51,7 +51,7 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
     /**
      * Item size, a function indicates its a variable size list
      */
-    itemSize: ((index: number) => number) | number;
+    itemSize: ScrollerListExItemSize;
     /**
      * Load data callback
      */

package/lib/mu/ScrollerListEx.d.ts

@@ -13,11 +13,26 @@ export interface ScrollerListExInnerItemRendererProps<T> extends ListChildCompon
      * Item height
      */
     itemHeight: number;
+    /**
+     * Item space
+     */
+    space: number;
+    /**
+     * Default margins
+     */
+    margins: {};
 }
+/**
+ * Extended ScrollerList ItemSize type
+ * 1. Callback function
+ * 2. Static sets
+ * 3. Dynamic calculation
+ */
+export declare type ScrollerListExItemSize = ((index: number) => [number, number] | [number, number, {}]) | [number, number] | [number, {}, boolean?];
 /**
  * Extended ScrollerList Props
  */
-export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'itemRenderer'> {
+export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> {
     /**
      * Alternating colors for odd/even rows
      */
@@ -34,6 +49,10 @@ export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'item
      * Item renderer
      */
     itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+    /**
+     * Item size, a function indicates its a variable size list
+     */
+    itemSize: ScrollerListExItemSize;
     /**
      * On items select change
      */

package/lib/mu/ScrollerListEx.js

@@ -1,7 +1,9 @@
 import { css } from '@emotion/css';
 import { DataTypes, Utils } from '@etsoo/shared';
+import { useTheme } from '@mui/material';
 import React from 'react';
 import { ScrollerList } from '../components/ScrollerList';
+import { MUGlobal } from './MUGlobal';
 // Scroll bar size
 const scrollbarSize = 16;
 // Selected class name
@@ -36,15 +38,44 @@ const createGridStyle = (alternatingColors, selectedColor) => {
         }
     });
 };
+// Default margin
+const defaultMargin = (margin, isNarrow) => {
+    const half = MUGlobal.half(margin);
+    if (isNarrow == null) {
+        const half = MUGlobal.half(margin);
+        return {
+            marginLeft: margin,
+            marginRight: margin,
+            marginTop: half,
+            marginBottom: half
+        };
+    }
+    if (isNarrow) {
+        return {
+            marginLeft: 0,
+            marginRight: 0,
+            marginTop: half,
+            marginBottom: half
+        };
+    }
+    return {
+        marginLeft: half,
+        marginRight: half,
+        marginTop: half,
+        marginBottom: half
+    };
+};
 // Default itemRenderer
-function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, selected, style, itemHeight }) {
+function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, selected, style, itemHeight, space, margins }) {
     // Child
     const child = innerItemRenderer({
         index,
         data,
         style,
         selected,
-        itemHeight
+        itemHeight,
+        space,
+        margins
     });
     let rowClass = `ScrollerListEx-Row${index % 2}`;
     if (selected)
@@ -82,17 +113,53 @@ export function ScrollerListEx(props) {
     };
     // Destruct
     const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => { var _a; return (_a = DataTypes.getIdValue(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemRenderer = (itemProps) => {
-        const itemHeight = typeof itemSize === 'function'
-            ? itemSize(itemProps.index)
-            : itemSize;
+        const [itemHeight, space, margins] = calculateItemSize(itemProps.index);
         return defaultItemRenderer({
             itemHeight,
             innerItemRenderer,
             onMouseDown,
+            space,
+            margins,
             selected: isSelected(itemProps.data),
             ...itemProps
         });
     }, onSelectChange, selectedColor = '#edf4fb', ...rest } = props;
+    // Theme
+    const theme = useTheme();
+    // Cache calculation
+    const itemSizeResult = React.useMemo(() => {
+        if (typeof itemSize === 'function')
+            return undefined;
+        const [size, spaces, isNarrow] = itemSize;
+        if (typeof spaces === 'number')
+            return [
+                size,
+                spaces,
+                defaultMargin(MUGlobal.pagePaddings, undefined)
+            ];
+        return [
+            size,
+            MUGlobal.getSpace(spaces, theme),
+            defaultMargin(spaces, isNarrow)
+        ];
+    }, [itemSize]);
+    // Calculate size
+    const calculateItemSize = (index) => {
+        // Callback function
+        if (typeof itemSize === 'function') {
+            const result = itemSize(index);
+            if (result.length == 2)
+                return [...result, defaultMargin(MUGlobal.pagePaddings)];
+            return result;
+        }
+        // Calculation
+        return itemSizeResult;
+    };
+    // Local item size
+    const itemSizeLocal = (index) => {
+        const [size, space] = calculateItemSize(index);
+        return size + space;
+    };
     // Layout
-    return (React.createElement(ScrollerList, { className: Utils.mergeClasses('ScrollerListEx-Body', className, createGridStyle(alternatingColors, selectedColor)), itemKey: itemKey, itemRenderer: itemRenderer, itemSize: itemSize, ...rest }));
+    return (React.createElement(ScrollerList, { className: Utils.mergeClasses('ScrollerListEx-Body', className, createGridStyle(alternatingColors, selectedColor)), itemKey: itemKey, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
 }

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

@@ -4,10 +4,18 @@ import { CommonPageProps } from './CommonPageProps';
  * Add / Edit page props
  */
 export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
+    /**
+     * Is editing
+     */
+    isEditing?: boolean;
     /**
      * On form submit
      */
     onSubmit?: FormEventHandler<HTMLFormElement>;
+    /**
+     * On delete callback
+     */
+    onDelete?: () => Promise<void> | void;
 }
 /**
  * Add / Edit page

package/lib/mu/pages/EditPage.js

@@ -4,22 +4,24 @@ import { Labels } from '../../app/Labels';
 import { MUGlobal } from '../MUGlobal';
 import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 import SaveIcon from '@mui/icons-material/Save';
+import DeleteIcon from '@mui/icons-material/Delete';
 /**
  * Add / Edit page
  * @param props Props
  */
 export function EditPage(props) {
     // Destruct
-    const { children, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, ...rest } = props;
+    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     return (React.createElement(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest },
         React.createElement("form", { onSubmit: onSubmit },
             React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1 }, children),
-            React.createElement(Grid, { container: true, position: "sticky", sx: {
+            React.createElement(Grid, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
                     top: 'auto',
                     bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
                     paddingTop: paddings
                 } },
-                React.createElement(Button, { variant: "contained", type: "submit", fullWidth: true, startIcon: React.createElement(SaveIcon, null) }, labels.save)))));
+                isEditing && onDelete && (React.createElement(Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: React.createElement(DeleteIcon, { color: "warning" }) }, labels.delete)),
+                React.createElement(Button, { variant: "contained", type: "submit", startIcon: React.createElement(SaveIcon, null), sx: { flexGrow: 1 } }, labels.save)))));
 }

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

@@ -2,7 +2,7 @@
 import { DataTypes } from '@etsoo/shared';
 import { ListChildComponentProps } from 'react-window';
 import { GridMethodRef } from '../GridMethodRef';
-import { ScrollerListExInnerItemRendererProps } from '../ScrollerListEx';
+import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from '../ScrollerListEx';
 import { DataGridPageProps } from './DataGridPageProps';
 /**
  * Response page props
@@ -23,7 +23,7 @@ export interface ResponsePageProps<T, F extends DataTypes.BasicTemplate> extends
     /**
      * Item size, a function indicates its a variable size list
      */
-    itemSize: ((index: number) => number) | number;
+    itemSize: ScrollerListExItemSize;
     /**
      * Methods
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.38",
+    "version": "1.4.42",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.22",
+        "@etsoo/appscript": "^1.2.23",
         "@etsoo/notificationbase": "^1.1.0",
         "@etsoo/shared": "^1.1.3",
         "@mui/icons-material": "^5.2.5",

package/src/app/Labels.ts

@@ -9,6 +9,7 @@ export namespace Labels {
      */
     export const CommonPage = {
         add: 'Add',
+        delete: 'Delete',
         more: 'More',
         pullToRefresh: 'Pull down to refresh',
         refresh: 'Refresh',

package/src/mu/DataGridRenderers.tsx

@@ -103,7 +103,7 @@ export namespace DataGridRenderers {
             }
 
             if (value) return <CheckIcon fontSize="small" />;
-            else return <ClearIcon fontSize="small" color="error" />;
+            else return <ClearIcon fontSize="small" color="warning" />;
         }
 
         // To string

package/src/mu/MUGlobal.ts

@@ -1,4 +1,5 @@
 import { NumberUtils } from '@etsoo/shared';
+import { Breakpoint, Theme } from '@mui/material';
 
 export class MUGlobal {
     /**
@@ -125,6 +126,37 @@ export class MUGlobal {
         return newObj;
     }
 
+    /**
+     * Break points defined
+     */
+    static breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+
+    /**
+     * Get multple medias theme space
+     * Responsive values and Breakpoints as an object
+     * xs = theme.breakpoints.up('xs')
+     * https://mui.com/system/basics/
+     * @param spaces Spaces
+     * @param theme Theme
+     * @returns Result
+     */
+    static getSpace(spaces: {}, theme: Theme) {
+        const start = this.breakpoints.length - 1;
+        for (let i = start; i >= 0; i--) {
+            const key = this.breakpoints[i];
+            const value = Reflect.get(spaces, key);
+            if (typeof value === 'number') {
+                const mediaRaw = theme.breakpoints.up(key as Breakpoint);
+                const mediaQuery = mediaRaw.substring(mediaRaw.indexOf('('));
+                if (window.matchMedia(mediaQuery).matches) {
+                    return parseInt(theme.spacing(value), 10);
+                }
+            }
+        }
+
+        return 0;
+    }
+
     /**
      * Update object number properties with theme
      * @param input Input object

package/src/mu/MobileListItemRenderer.tsx

@@ -1,15 +1,7 @@
-import {
-    Card,
-    CardContent,
-    CardHeader,
-    LinearProgress,
-    SxProps,
-    Theme
-} from '@mui/material';
+import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
 import React from 'react';
 import { ListItemReact } from '../components/ListItemReact';
 import { MoreFab } from './MoreFab';
-import { MUGlobal } from './MUGlobal';
 import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
 
 function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
@@ -30,8 +22,7 @@ function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
  * @returns Component
  */
 export function MobileListItemRenderer<T>(
-    { data, itemHeight }: ScrollerListExInnerItemRendererProps<T>,
-    margin: {} | [{}, boolean] | (() => SxProps<Theme>),
+    { data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>,
     renderer: (
         data: T
     ) => [
@@ -47,45 +38,11 @@ export function MobileListItemRenderer<T>(
     // Elements
     const [title, subheader, actions, children] = renderer(data);
 
-    // Calculate margin
-    const calculateMargin = () => {
-        if (typeof margin === 'function') return margin();
-        if (Array.isArray(margin)) {
-            const marginValue = margin[0];
-            const isNarrow = margin[1];
-            const half = MUGlobal.half(marginValue);
-            if (isNarrow) {
-                return {
-                    marginLeft: 0,
-                    marginRight: 0,
-                    marginTop: half,
-                    marginBottom: half
-                };
-            } else {
-                return {
-                    marginLeft: half,
-                    marginRight: half,
-                    marginTop: half,
-                    marginBottom: half
-                };
-            }
-        }
-
-        const half = MUGlobal.half(margin);
-        return {
-            marginLeft: margin,
-            marginRight: margin,
-            marginTop: half,
-            marginBottom: half
-        };
-    };
-
     return (
         <Card
             sx={{
-                height: (theme) =>
-                    MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
-                ...calculateMargin()
+                height: itemHeight,
+                ...margins
             }}
         >
             <CardHeader

package/src/mu/ResponsibleContainer.tsx

@@ -21,7 +21,8 @@ import { MUGlobal } from './MUGlobal';
 import { PullToRefreshUI } from './PullToRefreshUI';
 import {
     ScrollerListEx,
-    ScrollerListExInnerItemRendererProps
+    ScrollerListExInnerItemRendererProps,
+    ScrollerListExItemSize
 } from './ScrollerListEx';
 import { SearchBar } from './SearchBar';
 
@@ -91,7 +92,7 @@ export interface ResponsibleContainerProps<
     /**
      * Item size, a function indicates its a variable size list
      */
-    itemSize: ((index: number) => number) | number;
+    itemSize: ScrollerListExItemSize;
 
     /**
      * Load data callback

package/src/mu/ScrollerListEx.tsx

@@ -1,8 +1,10 @@
 import { css } from '@emotion/css';
 import { DataTypes, Utils } from '@etsoo/shared';
+import { useTheme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { ScrollerList, ScrollerListProps } from '../components/ScrollerList';
+import { MUGlobal } from './MUGlobal';
 
 // Scroll bar size
 const scrollbarSize = 16;
@@ -44,6 +46,37 @@ const createGridStyle = (
     });
 };
 
+// Default margin
+const defaultMargin = (margin: {}, isNarrow?: boolean) => {
+    const half = MUGlobal.half(margin);
+
+    if (isNarrow == null) {
+        const half = MUGlobal.half(margin);
+        return {
+            marginLeft: margin,
+            marginRight: margin,
+            marginTop: half,
+            marginBottom: half
+        };
+    }
+
+    if (isNarrow) {
+        return {
+            marginLeft: 0,
+            marginRight: 0,
+            marginTop: half,
+            marginBottom: half
+        };
+    }
+
+    return {
+        marginLeft: half,
+        marginRight: half,
+        marginTop: half,
+        marginBottom: half
+    };
+};
+
 /**
  * Extended ScrollerList inner item renderer props
  */
@@ -58,13 +91,34 @@ export interface ScrollerListExInnerItemRendererProps<T>
      * Item height
      */
     itemHeight: number;
+
+    /**
+     * Item space
+     */
+    space: number;
+
+    /**
+     * Default margins
+     */
+    margins: {};
 }
 
+/**
+ * Extended ScrollerList ItemSize type
+ * 1. Callback function
+ * 2. Static sets
+ * 3. Dynamic calculation
+ */
+export type ScrollerListExItemSize =
+    | ((index: number) => [number, number] | [number, number, {}])
+    | [number, number]
+    | [number, {}, boolean?];
+
 /**
  * Extended ScrollerList Props
  */
 export interface ScrollerListExProps<T>
-    extends Omit<ScrollerListProps<T>, 'itemRenderer'> {
+    extends Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> {
     /**
      * Alternating colors for odd/even rows
      */
@@ -87,6 +141,11 @@ export interface ScrollerListExProps<T>
      */
     itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
 
+    /**
+     * Item size, a function indicates its a variable size list
+     */
+    itemSize: ScrollerListExItemSize;
+
     /**
      * On items select change
      */
@@ -116,6 +175,16 @@ interface defaultItemRendererProps<T> extends ListChildComponentProps<T> {
      */
     itemHeight: number;
 
+    /**
+     * Item space
+     */
+    space: number;
+
+    /**
+     * Default margins
+     */
+    margins: {};
+
     /**
      * Item selected
      */
@@ -130,7 +199,9 @@ function defaultItemRenderer<T>({
     onMouseDown,
     selected,
     style,
-    itemHeight
+    itemHeight,
+    space,
+    margins
 }: defaultItemRendererProps<T>) {
     // Child
     const child = innerItemRenderer({
@@ -138,7 +209,9 @@ function defaultItemRenderer<T>({
         data,
         style,
         selected,
-        itemHeight
+        itemHeight,
+        space,
+        margins
     });
 
     let rowClass = `ScrollerListEx-Row${index % 2}`;
@@ -202,14 +275,15 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
         itemKey = (index: number, data: T) =>
             DataTypes.getIdValue(data, idField) ?? index,
         itemRenderer = (itemProps) => {
-            const itemHeight =
-                typeof itemSize === 'function'
-                    ? itemSize(itemProps.index)
-                    : itemSize;
+            const [itemHeight, space, margins] = calculateItemSize(
+                itemProps.index
+            );
             return defaultItemRenderer({
                 itemHeight,
                 innerItemRenderer,
                 onMouseDown,
+                space,
+                margins,
                 selected: isSelected(itemProps.data),
                 ...itemProps
             });
@@ -219,6 +293,49 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
         ...rest
     } = props;
 
+    // Theme
+    const theme = useTheme();
+
+    // Cache calculation
+    const itemSizeResult = React.useMemo(():
+        | [number, number, {}]
+        | undefined => {
+        if (typeof itemSize === 'function') return undefined;
+        const [size, spaces, isNarrow] = itemSize;
+        if (typeof spaces === 'number')
+            return [
+                size,
+                spaces,
+                defaultMargin(MUGlobal.pagePaddings, undefined)
+            ];
+
+        return [
+            size,
+            MUGlobal.getSpace(spaces, theme),
+            defaultMargin(spaces, isNarrow)
+        ];
+    }, [itemSize]);
+
+    // Calculate size
+    const calculateItemSize = (index: number): [number, number, {}] => {
+        // Callback function
+        if (typeof itemSize === 'function') {
+            const result = itemSize(index);
+            if (result.length == 2)
+                return [...result, defaultMargin(MUGlobal.pagePaddings)];
+            return result;
+        }
+
+        // Calculation
+        return itemSizeResult!;
+    };
+
+    // Local item size
+    const itemSizeLocal = (index: number) => {
+        const [size, space] = calculateItemSize(index);
+        return size + space;
+    };
+
     // Layout
     return (
         <ScrollerList<T>
@@ -229,7 +346,7 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
             )}
             itemKey={itemKey}
             itemRenderer={itemRenderer}
-            itemSize={itemSize}
+            itemSize={itemSizeLocal}
             {...rest}
         />
     );

package/src/mu/pages/EditPage.tsx

@@ -5,15 +5,26 @@ import { MUGlobal } from '../MUGlobal';
 import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 import { CommonPageProps } from './CommonPageProps';
 import SaveIcon from '@mui/icons-material/Save';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 /**
  * Add / Edit page props
  */
 export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
+    /**
+     * Is editing
+     */
+    isEditing?: boolean;
+
     /**
      * On form submit
      */
     onSubmit?: FormEventHandler<HTMLFormElement>;
+
+    /**
+     * On delete callback
+     */
+    onDelete?: () => Promise<void> | void;
 }
 
 /**
@@ -24,6 +35,8 @@ export function EditPage(props: EditPageProps) {
     // Destruct
     const {
         children,
+        isEditing,
+        onDelete,
         onSubmit,
         paddings = MUGlobal.pagePaddings,
         scrollContainer = CommonPageScrollContainer,
@@ -51,6 +64,8 @@ export function EditPage(props: EditPageProps) {
                 <Grid
                     container
                     position="sticky"
+                    display="flex"
+                    gap={paddings}
                     sx={{
                         top: 'auto',
                         bottom: (theme) =>
@@ -58,11 +73,21 @@ export function EditPage(props: EditPageProps) {
                         paddingTop: paddings
                     }}
                 >
+                    {isEditing && onDelete && (
+                        <Button
+                            color="primary"
+                            variant="outlined"
+                            onClick={() => onDelete()}
+                            startIcon={<DeleteIcon color="warning" />}
+                        >
+                            {labels.delete}
+                        </Button>
+                    )}
                     <Button
                         variant="contained"
                         type="submit"
-                        fullWidth
                         startIcon={<SaveIcon />}
+                        sx={{ flexGrow: 1 }}
                     >
                         {labels.save}
                     </Button>

package/src/mu/pages/ResponsivePageProps.ts

@@ -1,7 +1,10 @@
 import { DataTypes } from '@etsoo/shared';
 import { ListChildComponentProps } from 'react-window';
 import { GridMethodRef } from '../GridMethodRef';
-import { ScrollerListExInnerItemRendererProps } from '../ScrollerListEx';
+import {
+    ScrollerListExInnerItemRendererProps,
+    ScrollerListExItemSize
+} from '../ScrollerListEx';
 import { DataGridPageProps } from './DataGridPageProps';
 
 /**
@@ -32,7 +35,7 @@ export interface ResponsePageProps<T, F extends DataTypes.BasicTemplate>
     /**
      * Item size, a function indicates its a variable size list
      */
-    itemSize: ((index: number) => number) | number;
+    itemSize: ScrollerListExItemSize;
 
     /**
      * Methods