@etsoo/materialui 1.0.1

package/lib/OptionGroup.js

@@ -0,0 +1,81 @@
+import { DataTypes, Utils } from '@etsoo/shared';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Radio, RadioGroup } from '@mui/material';
+import React from 'react';
+/**
+ * OptionGroup
+ * @param props Props
+ * @returns Component
+ */
+export function OptionGroup(props) {
+    // Destruct
+    const { getOptionLabel, defaultValue, idField = 'id', label, labelField = 'label', multiple = false, name, onValueChange, options, readOnly, row, size, ...rest } = props;
+    // Get option value
+    // D type should be the source id type
+    const getOptionValue = (option) => {
+        const value = DataTypes.getValue(option, idField);
+        if (value == null)
+            return null;
+        return value;
+    };
+    // Checkbox values
+    const [values, setValues] = React.useState(defaultValue == null
+        ? []
+        : Array.isArray(defaultValue)
+            ? defaultValue
+            : [defaultValue]);
+    // Item checked
+    const itemChecked = (option) => {
+        // Value
+        const value = getOptionValue(option);
+        if (value == null)
+            return false;
+        return values.includes(value);
+    };
+    // First item value
+    const firstOptionValue = getOptionValue(options[0]);
+    // Items
+    const list = options.map((option) => {
+        // Control
+        const control = multiple ? (React.createElement(Checkbox, { name: name, readOnly: readOnly, size: size, checked: itemChecked(option), onChange: (event) => {
+                if (firstOptionValue == null)
+                    return;
+                const typeValue = Utils.parseString(event.target.value, firstOptionValue);
+                const changedValues = [...values];
+                if (event.target.checked) {
+                    if (changedValues.includes(typeValue))
+                        return;
+                    changedValues.push(typeValue);
+                }
+                else {
+                    const index = changedValues.findIndex((v) => v === typeValue);
+                    if (index === -1)
+                        return;
+                    changedValues.splice(index, 1);
+                }
+                if (onValueChange)
+                    onValueChange(changedValues);
+                setValues(changedValues);
+            } })) : (React.createElement(Radio, { size: size, readOnly: readOnly }));
+        // Label
+        const label = getOptionLabel == null
+            ? `${option[labelField]}`
+            : getOptionLabel(option);
+        // Value, convert to string
+        // Will fail when type is number
+        const value = getOptionValue(option);
+        return (React.createElement(FormControlLabel, { key: value, control: control, value: value, label: label }));
+    });
+    // Group
+    const group = multiple ? (React.createElement(FormGroup, { row: row }, list)) : (React.createElement(RadioGroup, { row: row, name: name, value: values[0], onChange: (_event, value) => {
+            if (firstOptionValue == null)
+                return;
+            const typeValue = Utils.parseString(value, firstOptionValue);
+            if (onValueChange)
+                onValueChange(typeValue);
+            setValues([typeValue]);
+        } }, list));
+    // Layout
+    return (React.createElement(FormControl, { component: "fieldset", ...rest },
+        label && React.createElement(FormLabel, { component: "legend" }, label),
+        group));
+}

package/lib/PList.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/**
+ * Paragraph items list props
+ */
+export interface PListProps {
+    /**
+     * List items
+     */
+    items?: string[];
+}
+/**
+ * Paragraph items list
+ * @param items Items
+ */
+export declare function PList(props: PListProps): JSX.Element;

package/lib/PList.js

@@ -0,0 +1,12 @@
+import React from 'react';
+/**
+ * Paragraph items list
+ * @param items Items
+ */
+export function PList(props) {
+    const { items } = props;
+    return (React.createElement(React.Fragment, null, items != null &&
+        items.map((item, index) => {
+            return React.createElement("p", { key: index }, item);
+        })));
+}

package/lib/ProgressCount.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+/**
+ * Process count props
+ */
+export interface ProgressCountProps {
+    /**
+     * Is countdown or opposite
+     * @default 'true'
+     */
+    countdown?: boolean;
+    /**
+     * Is linear or circular
+     * @default 'true'
+     */
+    linear?: boolean;
+    /**
+     * Min width
+     * @default 36
+     */
+    minWidth?: number;
+    /**
+     * On complete callback, return false will stop it
+     */
+    onComplete?: () => boolean;
+    /**
+     * On progress callback
+     */
+    onProgress?: (value: number) => void;
+    /**
+     * Seconds for count
+     */
+    seconds: number;
+    /**
+     * Value unit, like 's' or '%'
+     * @default ''
+     */
+    valueUnit?: string;
+}
+/**
+ * Progress count
+ * @param props Props
+ * @returns Component
+ */
+export declare function ProgressCount(props: ProgressCountProps): JSX.Element;

package/lib/ProgressCount.js

@@ -0,0 +1,79 @@
+import { Box, CircularProgress, LinearProgress, Typography } from '@mui/material';
+import React from 'react';
+/**
+ * Progress count
+ * @param props Props
+ * @returns Component
+ */
+export function ProgressCount(props) {
+    // Destruct
+    const { countdown = true, linear = true, minWidth = 36, onComplete, onProgress, seconds, valueUnit = '' } = props;
+    // Progress value
+    const [value, setValue] = React.useState(countdown ? seconds : 0);
+    // Variant
+    const [variant, setVariant] = React.useState('determinate');
+    // Progress value
+    const progressValue = (100.0 * value) / seconds;
+    React.useEffect(() => {
+        const timer = setInterval(() => {
+            setValue((prev) => {
+                const newValue = countdown
+                    ? prev === 0
+                        ? seconds
+                        : prev - 1
+                    : prev === seconds
+                        ? 0
+                        : prev + 1;
+                if (countdown) {
+                    if (newValue === 0) {
+                        if (onComplete) {
+                            const result = onComplete();
+                            // Finish
+                            if (result === false) {
+                                clearInterval(timer);
+                                setVariant('indeterminate');
+                            }
+                        }
+                    }
+                }
+                else {
+                    if (newValue === seconds) {
+                        if (onComplete) {
+                            const result = onComplete();
+                            // Finish
+                            if (result === false) {
+                                clearInterval(timer);
+                                setVariant('indeterminate');
+                            }
+                        }
+                    }
+                }
+                if (onProgress)
+                    onProgress(newValue);
+                return newValue;
+            });
+        }, 1000);
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+    if (linear)
+        return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', width: '100%' } },
+            React.createElement(Box, { sx: { width: '100%', mr: 1 } },
+                React.createElement(LinearProgress, { variant: variant, value: progressValue })),
+            React.createElement(Box, { sx: { minWidth } },
+                React.createElement(Typography, { variant: "body2", color: "text.secondary" }, `${value}${valueUnit}`))));
+    return (React.createElement(Box, { sx: { position: 'relative', display: 'inline-flex' } },
+        React.createElement(CircularProgress, { variant: variant, value: progressValue }),
+        React.createElement(Box, { sx: {
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            } },
+            React.createElement(Typography, { variant: "caption", component: "div", color: "text.secondary" }, `${value}${valueUnit}`))));
+}

package/lib/PullToRefreshUI.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Options } from 'pulltorefreshjs';
+/**
+ * PullToRefresh UI
+ * Use hammerjs or touchemulator to simulate browser as mobile device
+ * @param props Props
+ * @returns Component
+ */
+export declare function PullToRefreshUI(props: Options): JSX.Element;

package/lib/PullToRefreshUI.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PullToRefresh from 'pulltorefreshjs';
+/**
+ * PullToRefresh UI
+ * Use hammerjs or touchemulator to simulate browser as mobile device
+ * @param props Props
+ * @returns Component
+ */
+export function PullToRefreshUI(props) {
+    // Ready
+    React.useEffect(() => {
+        PullToRefresh.init(props);
+        return () => {
+            PullToRefresh.destroyAll();
+        };
+    }, [props]);
+    return React.createElement(React.Fragment, null);
+}

package/lib/RLink.d.ts

@@ -0,0 +1,14 @@
+import { LinkProps } from '@mui/material';
+import React from 'react';
+/**
+ * Router Link properties
+ */
+export declare type RLinkProps = LinkProps & {
+    delay?: number;
+};
+/**
+ * Router Link
+ * @param props Props
+ * @returns Component
+ */
+export declare const RLink: React.ForwardRefExoticComponent<Pick<RLinkProps, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "p" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "position" | "type" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "underline" | "media" | "target" | "href" | "download" | "hrefLang" | "ping" | "rel" | "referrerPolicy" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "TypographyClasses" | "delay"> & React.RefAttributes<HTMLAnchorElement>>;

package/lib/RLink.js

@@ -0,0 +1,37 @@
+import { useDelayedExecutor } from '@etsoo/react';
+import { Link } from '@mui/material';
+import React from 'react';
+import { globalApp } from './app/ReactApp';
+/**
+ * Router Link
+ * @param props Props
+ * @returns Component
+ */
+export const RLink = React.forwardRef((props, ref) => {
+    // Destruct
+    const { delay = 0, href, target, onClick, ...rest } = props;
+    const delayed = useDelayedExecutor((href) => {
+        // Router push
+        globalApp.history.push(href);
+    }, delay);
+    // Click handler
+    const onClickLocl = (event) => {
+        if (onClick)
+            onClick(event);
+        if (!event.isDefaultPrevented() &&
+            href &&
+            (!target || target === '_self') && // Let browser handle "target=_blank" etc
+            globalApp) {
+            // Prevent href action
+            event.preventDefault();
+            // Delayed excution
+            delayed.call(undefined, href);
+        }
+    };
+    // Clear when exit
+    React.useEffect(() => {
+        return () => delayed.clear();
+    }, [delayed]);
+    // Component
+    return (React.createElement(Link, { ...rest, onClick: onClickLocl, href: href, target: target, ref: ref }));
+});

package/lib/ResponsibleContainer.d.ts

@@ -0,0 +1,87 @@
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import { SxProps, Theme } from '@mui/material';
+import React from 'react';
+import { ListChildComponentProps } from 'react-window';
+import { GridColumn, GridJsonData, GridMethodRef } from '@etsoo/react';
+import { DataGridExProps } from './DataGridEx';
+import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from './ScrollerListEx';
+/**
+ * ResponsibleContainer props
+ */
+export declare type ResponsibleContainerProps<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>> = Omit<DataGridExProps<T, D>, 'height' | 'itemKey' | 'loadData' | 'mRef' | 'onScroll' | 'onItemsRendered'> & {
+    /**
+     * Height will be deducted
+     * @param height Current calcuated height
+     */
+    adjustHeight?: (height: number) => number;
+    /**
+     * Columns
+     */
+    columns: GridColumn<T>[];
+    /**
+     * Container box SX (dataGrid determines the case)
+     */
+    containerBoxSx?: (paddings: Record<string, string | number>, hasFields: boolean, dataGrid?: boolean) => SxProps<Theme>;
+    /**
+     * Min width to show Datagrid
+     */
+    dataGridMinWidth?: number;
+    /**
+     * Search fields
+     */
+    fields?: React.ReactElement[];
+    /**
+     * Search field template
+     */
+    fieldTemplate?: F;
+    /**
+     * Grid height
+     */
+    height?: number;
+    /**
+     * Inner item renderer
+     */
+    innerItemRenderer: (props: ScrollerListExInnerItemRendererProps<T>) => React.ReactNode;
+    /**
+     * Item renderer
+     */
+    itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+    /**
+     * Item size, a function indicates its a variable size list
+     */
+    itemSize: ScrollerListExItemSize;
+    /**
+     * Load data callback
+     */
+    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>) => PromiseLike<T[] | null | undefined>;
+    /**
+     * Methods
+     */
+    mRef?: React.MutableRefObject<GridMethodRef<T> | undefined>;
+    /**
+     * Element ready callback
+     */
+    elementReady?: (element: HTMLElement, isDataGrid: boolean) => void;
+    /**
+     * Paddings
+     */
+    paddings?: Record<string, string | number>;
+    /**
+     * 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
+     */
+    sizeReadyMiliseconds?: number;
+};
+/**
+ * Responsible container
+ * @param props Props
+ * @returns Layout
+ */
+export declare function ResponsibleContainer<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: ResponsibleContainerProps<T, F, D>): JSX.Element;

package/lib/ResponsibleContainer.js

@@ -0,0 +1,156 @@
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import { GridDataGet, ReactUtils, useCombinedRefs, useDimensions } from '@etsoo/react';
+import { DataGridEx, DataGridExCalColumns } from './DataGridEx';
+import { MUGlobal } from './MUGlobal';
+import { PullToRefreshUI } from './PullToRefreshUI';
+import { ScrollerListEx } from './ScrollerListEx';
+import { SearchBar } from './SearchBar';
+import { Labels } from './app/Labels';
+function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
+    const half = MUGlobal.half(paddings);
+    return {
+        '& .SearchBox': {
+            marginBottom: hasField ? half : 0
+        }
+    };
+}
+/**
+ * Responsible container
+ * @param props Props
+ * @returns Layout
+ */
+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, quickAction, sizeReadyMiliseconds = 0, ...rest } = props;
+    // Labels
+    const labels = Labels.CommonPage;
+    // Refs
+    const refs = React.useRef({});
+    const state = refs.current;
+    const mRefs = useCombinedRefs(mRef, (ref) => {
+        if (ref == null)
+            return;
+        state.ref = ref;
+    });
+    // Update mounted state
+    React.useEffect(() => {
+        return () => {
+            state.mounted = false;
+        };
+    }, []);
+    // Has fields
+    const hasFields = fields != null && fields.length > 0;
+    // Load data
+    const localLoadData = (props) => {
+        state.mounted = true;
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
+    };
+    // On submit callback
+    const onSubmit = (data, _reset) => {
+        if (data == null || state.ref == null)
+            return;
+        state.ref.reset({ data });
+    };
+    // Watch container
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds, (_preRect, rect) => {
+        // Check
+        if (rect == null)
+            return true;
+        // Last rect
+        const lastRect = state.rect;
+        // 32 = scroll bar width
+        if (lastRect != null &&
+            state.mounted !== true &&
+            Math.abs(rect.width - lastRect.width) <= 32 &&
+            Math.abs(rect.height - lastRect.height) <= 32)
+            return true;
+        // Hold the new rect
+        state.rect = rect;
+        return false;
+    });
+    // Rect
+    const rect = dimensions[0][2];
+    // Create list
+    const [list, showDataGrid] = (() => {
+        // No layout
+        if (rect == null)
+            return [null, undefined];
+        // Width
+        const width = rect.width;
+        // Show DataGrid or List dependng on width
+        const showDataGrid = width >= dataGridMinWidth;
+        // Height
+        let heightLocal;
+        if (height != null) {
+            heightLocal = height;
+        }
+        else {
+            // Auto calculation
+            heightLocal =
+                document.documentElement.clientHeight -
+                    Math.round(rect.bottom + 1);
+            const style = window.getComputedStyle(dimensions[0][1]);
+            const boxMargin = parseFloat(style.marginBottom);
+            if (!isNaN(boxMargin))
+                heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
+            if (adjustHeight != null) {
+                heightLocal -= adjustHeight(heightLocal);
+            }
+        }
+        if (showDataGrid) {
+            // Delete
+            delete rest.itemRenderer;
+            return [
+                React.createElement(Box, { className: "DataGridBox" },
+                    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 })),
+                true
+            ];
+        }
+        // Delete
+        delete rest.checkable;
+        delete rest.borderRowsCount;
+        delete rest.bottomHeight;
+        delete rest.footerItemRenderer;
+        delete rest.headerHeight;
+        delete rest.hideFooter;
+        delete rest.hoverColor;
+        delete rest.selectable;
+        return [
+            React.createElement(Box, { className: "ListBox", sx: { height: heightLocal } },
+                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction &&
+                        ReactUtils.isSafeClick(event) &&
+                        quickAction(data), oRef: (element) => {
+                        if (element != null && elementReady)
+                            elementReady(element, false);
+                    }, ...rest })),
+            false
+        ];
+    })();
+    const searchBar = React.useMemo(() => {
+        if (!hasFields || showDataGrid == null)
+            return;
+        return (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit, className: `searchBar${showDataGrid ? 'Grid' : 'List'}` }));
+    }, [showDataGrid, hasFields]);
+    // Pull container
+    const pullContainer = showDataGrid == null
+        ? undefined
+        : showDataGrid
+            ? '.DataGridEx-Body'
+            : '.ScrollerListEx-Body';
+    // Layout
+    return (React.createElement(Box, { sx: containerBoxSx == null
+            ? undefined
+            : containerBoxSx(paddings, hasFields, showDataGrid) },
+        React.createElement(Stack, null,
+            React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox", sx: { height: hasFields ? 40 : 0 } }, searchBar),
+            list),
+        pullToRefresh && pullContainer && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => { var _a; return (_a = state.ref) === null || _a === void 0 ? void 0 : _a.reset(); }, shouldPullToRefresh: () => {
+                const container = document.querySelector(pullContainer);
+                return !(container === null || container === void 0 ? void 0 : container.scrollTop);
+            } }))));
+}

package/lib/ScrollTopFab.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CustomFabProps } from './CustomFabProps';
+/**
+ * Scroll to top fab
+ * @returns Component
+ */
+export declare function ScrollTopFab(props: CustomFabProps): JSX.Element;

package/lib/ScrollTopFab.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Fab, useScrollTrigger, Zoom } from '@mui/material';
+import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
+/**
+ * Scroll to top fab
+ * @returns Component
+ */
+export function ScrollTopFab(props) {
+    // Destruct
+    const { color, size, target, title } = props;
+    // Scroll trigger
+    const trigger = useScrollTrigger({
+        target,
+        disableHysteresis: true,
+        threshold: 120
+    });
+    // Icon click handler
+    // behavior: 'smooth'
+    const handleClick = () => {
+        target.scrollTo({ top: 0 });
+    };
+    return (React.createElement(Zoom, { in: trigger },
+        React.createElement(Fab, { color: color, size: size, title: title, onClick: handleClick },
+            React.createElement(VerticalAlignTopIcon, null))));
+}