@etsoo/materialui 1.1.97 → 1.1.98

package/lib/FabBox.js

@@ -21,7 +21,6 @@ export function FabBox(props) {
             position: "fixed",
             display: "flex",
             alignItems: "center",
-            background: "rgba(255, 255, 255, .4)",
             flexDirection: columnDirection ? "column" : "row",
             "& > :not(style) + :not(style)": margin,
             ...sx

package/lib/ResponsibleContainer.d.ts

@@ -13,9 +13,15 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
      * Height will be deducted
      * @param height Current calcuated height
      * @param rect Current rect data
+     */
+    adjustHeight?: (height: number, rect: DOMRect) => number;
+    /**
+     *
+     * @param height Current height
      * @param isGrid Is displaying DataGrid
+     * @returns Adjusted height
      */
-    adjustHeight?: (height: number, rect: DOMRect, isGrid: boolean) => number;
+    adjustFabHeight?: (height: number, isGrid: boolean) => number;
     /**
      * Columns
      */

package/lib/ResponsibleContainer.js

@@ -22,7 +22,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, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, ...rest } = props;
+    const { adjustHeight, adjustFabHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -95,8 +95,10 @@ export function ResponsibleContainer(props) {
             if (!isNaN(boxMargin))
                 heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
             if (adjustHeight != null)
-                heightLocal -= adjustHeight(heightLocal, rect, showDataGrid);
+                heightLocal -= adjustHeight(heightLocal, rect);
         }
+        if (adjustFabHeight)
+            heightLocal = adjustFabHeight(heightLocal, showDataGrid);
         if (showDataGrid) {
             // Delete
             delete rest.itemRenderer;

package/lib/pages/CommonPage.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommonPageProps } from './CommonPageProps';
+import { CommonPageProps } from "./CommonPageProps";
 /**
  * Default scroll container
  */

package/lib/pages/CommonPage.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import { FabBox } from '../FabBox';
-import { ScrollTopFab } from '../ScrollTopFab';
-import { MUGlobal } from '../MUGlobal';
-import { MoreFab } from '../MoreFab';
-import { Container, Fab } from '@mui/material';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import { BackButton } from '../BackButton';
-import { Labels } from '../app/Labels';
-import { ReactAppStateDetector } from '../app/ReactApp';
+import React from "react";
+import { FabBox } from "../FabBox";
+import { ScrollTopFab } from "../ScrollTopFab";
+import { MUGlobal } from "../MUGlobal";
+import { MoreFab } from "../MoreFab";
+import { Container, Fab, Paper } from "@mui/material";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import { BackButton } from "../BackButton";
+import { Labels } from "../app/Labels";
+import { ReactAppStateDetector } from "../app/ReactApp";
 /**
  * Default scroll container
  */
@@ -18,12 +18,12 @@ export const CommonPageScrollContainer = global;
  */
 export function CommonPage(props) {
     // Destruct
-    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = 'small', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = {}, ...rest } = props;
+    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPanel = fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = "small", maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = {}, ...rest } = props;
     // Fab padding
     const fabPadding = MUGlobal.increase(MUGlobal.pagePaddings, fabPaddingAdjust);
-    if (typeof sx === 'object' && sx != null && !Reflect.has(sx, 'padding')) {
+    if (typeof sx === "object" && sx != null && !Reflect.has(sx, "padding")) {
         // Set default padding
-        Reflect.set(sx, 'padding', paddings);
+        Reflect.set(sx, "padding", paddings);
     }
     // Labels
     const labels = Labels.CommonPage;
@@ -41,20 +41,21 @@ export function CommonPage(props) {
                         onRefresh();
                 }
                 : undefined;
+    const fab = (React.createElement(FabBox, { sx: {
+            zIndex: 1,
+            bottom: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
+            right: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing)
+        }, columnDirection: fabColumnDirection },
+        scrollContainer && (React.createElement(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })),
+        fabButtons,
+        onRefresh != null && (React.createElement(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } } },
+            React.createElement(RefreshIcon, null))),
+        React.createElement(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }),
+        supportBack && React.createElement(BackButton, { title: labels.back, size: fabSize })));
     // Return the UI
     return (React.createElement(React.Fragment, null,
         update && (React.createElement(ReactAppStateDetector, { targetFields: targetFields, update: update })),
         React.createElement(Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest },
-            React.createElement(FabBox, { sx: {
-                    zIndex: 1,
-                    bottom: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
-                    right: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing)
-                }, columnDirection: fabColumnDirection },
-                scrollContainer && (React.createElement(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })),
-                fabButtons,
-                onRefresh != null && (React.createElement(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: 'none', md: 'inherit' } } },
-                    React.createElement(RefreshIcon, null))),
-                React.createElement(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }),
-                supportBack && (React.createElement(BackButton, { title: labels.back, size: fabSize }))),
+            fabPanel ? React.createElement(Paper, { sx: { padding: 2 } }, fab) : fab,
             children)));
 }

package/lib/pages/CommonPageProps.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-import { UserKey } from '@etsoo/appscript';
-import { IStateUpdate, ListItemReact } from '@etsoo/react';
-import { ContainerProps } from '@mui/material';
-import { CustomFabSize } from '../CustomFabProps';
+import { UserKey } from "@etsoo/appscript";
+import { IStateUpdate, ListItemReact } from "@etsoo/react";
+import { ContainerProps } from "@mui/material";
+import { CustomFabSize } from "../CustomFabProps";
 /**
  * Common page props
  * Default container id is 'pageContainer'
  */
-export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
+export interface CommonPageProps extends Omit<ContainerProps, "id"> {
     /**
      * Fab buttons
      */
@@ -24,6 +24,10 @@ export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
      * Fab padding adjust
      */
     fabPaddingAdjust?: number;
+    /**
+     * Add panel to the Fab
+     */
+    fabPanel?: boolean;
     /**
      * More actions
      */

package/lib/pages/ResponsivePageProps.d.ts

@@ -1,13 +1,20 @@
 /// <reference types="react" />
-import { GridMethodRef } from '@etsoo/react';
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { ListChildComponentProps } from 'react-window';
-import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from '../ScrollerListEx';
-import { DataGridPageProps } from './DataGridPageProps';
+import { GridMethodRef } from "@etsoo/react";
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { ListChildComponentProps } from "react-window";
+import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "../ScrollerListEx";
+import { DataGridPageProps } from "./DataGridPageProps";
 /**
  * Response page props
  */
-export type ResponsePageProps<T extends object, F extends DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>> = Omit<DataGridPageProps<T, F, D>, 'mRef' | 'itemKey' | 'onScroll' | 'onItemsRendered'> & {
+export type ResponsePageProps<T extends object, F extends DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>> = Omit<DataGridPageProps<T, F, D>, "mRef" | "itemKey" | "onScroll" | "onItemsRendered"> & {
+    /**
+     *
+     * @param height Current height
+     * @param isGrid Is displaying DataGrid
+     * @returns Adjusted height
+     */
+    adjustFabHeight?: (height: number, isGrid: boolean) => number;
     /**
      * Min width to show Datagrid
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.97",
+  "version": "1.1.98",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/FabBox.tsx

@@ -42,7 +42,6 @@ export function FabBox(props: FabBoxProps) {
         position: "fixed",
         display: "flex",
         alignItems: "center",
-        background: "rgba(255, 255, 255, .4)",
         flexDirection: columnDirection ? "column" : "row",
         "& > :not(style) + :not(style)": margin,
         ...sx

package/src/ResponsibleContainer.tsx

@@ -42,9 +42,16 @@ export type ResponsibleContainerProps<
    * Height will be deducted
    * @param height Current calcuated height
    * @param rect Current rect data
+   */
+  adjustHeight?: (height: number, rect: DOMRect) => number;
+
+  /**
+   *
+   * @param height Current height
    * @param isGrid Is displaying DataGrid
+   * @returns Adjusted height
    */
-  adjustHeight?: (height: number, rect: DOMRect, isGrid: boolean) => number;
+  adjustFabHeight?: (height: number, isGrid: boolean) => number;
 
   /**
    * Columns
@@ -172,6 +179,7 @@ export function ResponsibleContainer<
   // Destruct
   const {
     adjustHeight,
+    adjustFabHeight,
     columns,
     containerBoxSx = defaultContainerBoxSx,
     dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total),
@@ -279,10 +287,12 @@ export function ResponsibleContainer<
       const boxMargin = parseFloat(style.marginBottom);
       if (!isNaN(boxMargin)) heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
 
-      if (adjustHeight != null)
-        heightLocal -= adjustHeight(heightLocal, rect, showDataGrid);
+      if (adjustHeight != null) heightLocal -= adjustHeight(heightLocal, rect);
     }
 
+    if (adjustFabHeight)
+      heightLocal = adjustFabHeight(heightLocal, showDataGrid);
+
     if (showDataGrid) {
       // Delete
       delete rest.itemRenderer;

package/src/pages/CommonPage.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import { FabBox } from '../FabBox';
-import { ScrollTopFab } from '../ScrollTopFab';
-import { MUGlobal } from '../MUGlobal';
-import { CommonPageProps } from './CommonPageProps';
-import { MoreFab } from '../MoreFab';
-import { Container, Fab } from '@mui/material';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import { BackButton } from '../BackButton';
-import { Labels } from '../app/Labels';
-import { ReactAppStateDetector } from '../app/ReactApp';
+import React from "react";
+import { FabBox } from "../FabBox";
+import { ScrollTopFab } from "../ScrollTopFab";
+import { MUGlobal } from "../MUGlobal";
+import { CommonPageProps } from "./CommonPageProps";
+import { MoreFab } from "../MoreFab";
+import { Container, Fab, Paper } from "@mui/material";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import { BackButton } from "../BackButton";
+import { Labels } from "../app/Labels";
+import { ReactAppStateDetector } from "../app/ReactApp";
 
 /**
  * Default scroll container
@@ -20,109 +20,100 @@ export const CommonPageScrollContainer = global;
  * @param props Props
  */
 export function CommonPage(props: CommonPageProps) {
-    // Destruct
-    const {
-        children,
-        disableGutters = true,
-        fabButtons,
-        fabColumnDirection,
-        fabPaddingAdjust = 1.5,
-        fabSize = 'small',
-        maxWidth = false,
-        moreActions,
-        onRefresh,
-        onUpdate,
-        onUpdateAll,
-        paddings = MUGlobal.pagePaddings,
-        scrollContainer,
-        supportBack = false,
-        targetFields,
-        sx = {},
-        ...rest
-    } = props;
+  // Destruct
+  const {
+    children,
+    disableGutters = true,
+    fabButtons,
+    fabColumnDirection,
+    fabPanel = fabColumnDirection,
+    fabPaddingAdjust = 1.5,
+    fabSize = "small",
+    maxWidth = false,
+    moreActions,
+    onRefresh,
+    onUpdate,
+    onUpdateAll,
+    paddings = MUGlobal.pagePaddings,
+    scrollContainer,
+    supportBack = false,
+    targetFields,
+    sx = {},
+    ...rest
+  } = props;
 
-    // Fab padding
-    const fabPadding = MUGlobal.increase(
-        MUGlobal.pagePaddings,
-        fabPaddingAdjust
-    );
+  // Fab padding
+  const fabPadding = MUGlobal.increase(MUGlobal.pagePaddings, fabPaddingAdjust);
 
-    if (typeof sx === 'object' && sx != null && !Reflect.has(sx, 'padding')) {
-        // Set default padding
-        Reflect.set(sx, 'padding', paddings);
-    }
+  if (typeof sx === "object" && sx != null && !Reflect.has(sx, "padding")) {
+    // Set default padding
+    Reflect.set(sx, "padding", paddings);
+  }
 
-    // Labels
-    const labels = Labels.CommonPage;
+  // Labels
+  const labels = Labels.CommonPage;
 
-    // Update
-    const update = onUpdateAll
-        ? onUpdateAll
-        : onUpdate
-        ? (authorized?: boolean) => {
-              if (authorized == null || authorized) onUpdate();
-          }
-        : onRefresh
-        ? (authorized?: boolean) => {
-              if (authorized) onRefresh();
-          }
-        : undefined;
+  // Update
+  const update = onUpdateAll
+    ? onUpdateAll
+    : onUpdate
+    ? (authorized?: boolean) => {
+        if (authorized == null || authorized) onUpdate();
+      }
+    : onRefresh
+    ? (authorized?: boolean) => {
+        if (authorized) onRefresh();
+      }
+    : undefined;
 
-    // Return the UI
-    return (
-        <React.Fragment>
-            {update && (
-                <ReactAppStateDetector
-                    targetFields={targetFields}
-                    update={update}
-                />
-            )}
-            <Container
-                disableGutters={disableGutters}
-                maxWidth={maxWidth}
-                sx={sx}
-                id="page-container"
-                {...rest}
-            >
-                <FabBox
-                    sx={{
-                        zIndex: 1,
-                        bottom: (theme) =>
-                            MUGlobal.updateWithTheme(fabPadding, theme.spacing),
-                        right: (theme) =>
-                            MUGlobal.updateWithTheme(fabPadding, theme.spacing)
-                    }}
-                    columnDirection={fabColumnDirection}
-                >
-                    {scrollContainer && (
-                        <ScrollTopFab
-                            size={fabSize}
-                            target={scrollContainer}
-                            title={labels.scrollTop}
-                        />
-                    )}
-                    {fabButtons}
-                    {onRefresh != null && (
-                        <Fab
-                            title={labels.refresh}
-                            size={fabSize}
-                            onClick={onRefresh}
-                            sx={{ display: { xs: 'none', md: 'inherit' } }}
-                        >
-                            <RefreshIcon />
-                        </Fab>
-                    )}
-                    <MoreFab
-                        size={fabSize}
-                        title={labels.more}
-                        actions={moreActions}
-                    />
-                    {supportBack && (
-                        <BackButton title={labels.back} size={fabSize} />
-                    )}
-                </FabBox>
-                {children}
-            </Container>
-        </React.Fragment>
-    );
+  const fab = (
+    <FabBox
+      sx={{
+        zIndex: 1,
+        bottom: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
+        right: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing)
+      }}
+      columnDirection={fabColumnDirection}
+    >
+      {scrollContainer && (
+        <ScrollTopFab
+          size={fabSize}
+          target={scrollContainer}
+          title={labels.scrollTop}
+        />
+      )}
+      {fabButtons}
+      {onRefresh != null && (
+        <Fab
+          title={labels.refresh}
+          size={fabSize}
+          onClick={onRefresh}
+          sx={{ display: { xs: "none", md: "inherit" } }}
+        >
+          <RefreshIcon />
+        </Fab>
+      )}
+      <MoreFab size={fabSize} title={labels.more} actions={moreActions} />
+      {supportBack && <BackButton title={labels.back} size={fabSize} />}
+    </FabBox>
+  );
+
+  // Return the UI
+  return (
+    <React.Fragment>
+      {update && (
+        <ReactAppStateDetector targetFields={targetFields} update={update} />
+      )}
+      <Container
+        disableGutters={disableGutters}
+        maxWidth={maxWidth}
+        sx={sx}
+        id="page-container"
+        {...rest}
+      >
+        {fabPanel ? <Paper sx={{ padding: 2 }}>{fab}</Paper> : fab}
+        {children}
+      </Container>
+    </React.Fragment>
+  );
 }

package/src/pages/CommonPageProps.ts

@@ -1,70 +1,75 @@
-import { UserKey } from '@etsoo/appscript';
-import { IStateUpdate, ListItemReact } from '@etsoo/react';
-import { ContainerProps } from '@mui/material';
-import { CustomFabSize } from '../CustomFabProps';
+import { UserKey } from "@etsoo/appscript";
+import { IStateUpdate, ListItemReact } from "@etsoo/react";
+import { ContainerProps } from "@mui/material";
+import { CustomFabSize } from "../CustomFabProps";
 
 /**
  * Common page props
  * Default container id is 'pageContainer'
  */
-export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
-    /**
-     * Fab buttons
-     */
-    fabButtons?: React.ReactNode;
+export interface CommonPageProps extends Omit<ContainerProps, "id"> {
+  /**
+   * Fab buttons
+   */
+  fabButtons?: React.ReactNode;
 
-    /**
-     * Fab size
-     */
-    fabSize?: CustomFabSize;
+  /**
+   * Fab size
+   */
+  fabSize?: CustomFabSize;
 
-    /**
-     * Fab flex column direction, undefined to hide it
-     */
-    fabColumnDirection?: boolean;
+  /**
+   * Fab flex column direction, undefined to hide it
+   */
+  fabColumnDirection?: boolean;
 
-    /**
-     * Fab padding adjust
-     */
-    fabPaddingAdjust?: number;
+  /**
+   * Fab padding adjust
+   */
+  fabPaddingAdjust?: number;
 
-    /**
-     * More actions
-     */
-    moreActions?: ListItemReact[];
+  /**
+   * Add panel to the Fab
+   */
+  fabPanel?: boolean;
 
-    /**
-     * On refresh callback, only when authorized = true
-     */
-    onRefresh?: () => void | PromiseLike<void>;
+  /**
+   * More actions
+   */
+  moreActions?: ListItemReact[];
 
-    /**
-     * On page update, when authorized = null or true case, may uses onRefresh
-     */
-    onUpdate?: () => void | PromiseLike<void>;
+  /**
+   * On refresh callback, only when authorized = true
+   */
+  onRefresh?: () => void | PromiseLike<void>;
 
-    /**
-     * On page update, all cases with authorized
-     */
-    onUpdateAll?: IStateUpdate;
+  /**
+   * On page update, when authorized = null or true case, may uses onRefresh
+   */
+  onUpdate?: () => void | PromiseLike<void>;
 
-    /**
-     * Paddings
-     */
-    paddings?: Record<string, string | number>;
+  /**
+   * On page update, all cases with authorized
+   */
+  onUpdateAll?: IStateUpdate;
 
-    /**
-     * Scroll container
-     */
-    scrollContainer?: HTMLElement | object;
+  /**
+   * Paddings
+   */
+  paddings?: Record<string, string | number>;
 
-    /**
-     * Support back click
-     */
-    supportBack?: boolean;
+  /**
+   * Scroll container
+   */
+  scrollContainer?: HTMLElement | object;
 
-    /**
-     * State last changed fields
-     */
-    targetFields?: UserKey[];
+  /**
+   * Support back click
+   */
+  supportBack?: boolean;
+
+  /**
+   * State last changed fields
+   */
+  targetFields?: UserKey[];
 }

package/src/pages/ResponsivePageProps.ts

@@ -1,57 +1,65 @@
-import { GridMethodRef } from '@etsoo/react';
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { ListChildComponentProps } from 'react-window';
+import { GridMethodRef } from "@etsoo/react";
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { ListChildComponentProps } from "react-window";
 import {
-    ScrollerListExInnerItemRendererProps,
-    ScrollerListExItemSize
-} from '../ScrollerListEx';
-import { DataGridPageProps } from './DataGridPageProps';
+  ScrollerListExInnerItemRendererProps,
+  ScrollerListExItemSize
+} from "../ScrollerListEx";
+import { DataGridPageProps } from "./DataGridPageProps";
 
 /**
  * Response page props
  */
 export type ResponsePageProps<
-    T extends object,
-    F extends DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
+  T extends object,
+  F extends DataTypes.BasicTemplate,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>
 > = Omit<
-    DataGridPageProps<T, F, D>,
-    'mRef' | 'itemKey' | 'onScroll' | 'onItemsRendered'
+  DataGridPageProps<T, F, D>,
+  "mRef" | "itemKey" | "onScroll" | "onItemsRendered"
 > & {
-    /**
-     * Min width to show Datagrid
-     */
-    dataGridMinWidth?: 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;
-
-    /**
-     * Methods
-     */
-    mRef?: React.MutableRefObject<GridMethodRef<T> | undefined>;
-
-    /**
-     * Pull to refresh data
-     */
-    pullToRefresh?: boolean;
-
-    /**
-     * Quick action for double click or click under mobile
-     */
-    quickAction?: (data: T) => void;
+  /**
+   *
+   * @param height Current height
+   * @param isGrid Is displaying DataGrid
+   * @returns Adjusted height
+   */
+  adjustFabHeight?: (height: number, isGrid: boolean) => number;
+
+  /**
+   * Min width to show Datagrid
+   */
+  dataGridMinWidth?: 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;
+
+  /**
+   * Methods
+   */
+  mRef?: React.MutableRefObject<GridMethodRef<T> | undefined>;
+
+  /**
+   * Pull to refresh data
+   */
+  pullToRefresh?: boolean;
+
+  /**
+   * Quick action for double click or click under mobile
+   */
+  quickAction?: (data: T) => void;
 };