@etsoo/materialui 1.1.96 → 1.1.98

package/lib/FabBox.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BoxProps } from '@mui/material';
+import { BoxProps } from "@mui/material";
 /**
  * Fabs container box props
  */

package/lib/FabBox.js

@@ -1,5 +1,5 @@
-import { Box, useTheme } from '@mui/material';
-import React from 'react';
+import { Box, useTheme } from "@mui/material";
+import React from "react";
 /**
  * Fabs container box
  * @param props Props
@@ -7,7 +7,7 @@ import React from 'react';
  */
 export function FabBox(props) {
     // Destruct
-    const { columnDirection, itemGap = 1, sx = {}, ...rest } = props;
+    const { columnDirection, itemGap = 1, sx, ...rest } = props;
     // Theme
     const theme = useTheme();
     const spaceGap = theme.spacing(itemGap);
@@ -17,15 +17,12 @@ export function FabBox(props) {
     const margin = columnDirection
         ? { marginTop: spaceGap }
         : { marginLeft: spaceGap };
-    // Default style
-    if (typeof sx === 'object') {
-        Object.assign(sx, {
-            position: 'fixed',
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: columnDirection ? 'column' : 'row',
-            '& > :not(style) + :not(style)': margin
-        });
-    }
-    return React.createElement(Box, { sx: sx, ...rest });
+    return (React.createElement(Box, { sx: {
+            position: "fixed",
+            display: "flex",
+            alignItems: "center",
+            flexDirection: columnDirection ? "column" : "row",
+            "& > :not(style) + :not(style)": margin,
+            ...sx
+        }, ...rest }));
 }

package/lib/MenuButton.d.ts

@@ -0,0 +1,9 @@
+import { DataTypes } from "@etsoo/shared";
+import { ButtonProps, MenuProps } from "@mui/material";
+import React from "react";
+export type MenuButtonProps<T extends DataTypes.IdItem> = Omit<MenuProps, "open"> & {
+    items: T[];
+    labelField: DataTypes.Keys<T, string>;
+    button: ((clickHandler: React.MouseEventHandler<HTMLButtonElement>) => React.ReactNode) | ButtonProps;
+};
+export declare function MenuButton<T extends DataTypes.IdItem>(props: MenuButtonProps<T>): JSX.Element;

package/lib/MenuButton.js

@@ -0,0 +1,58 @@
+import { Button, Menu, MenuItem } from "@mui/material";
+import React from "react";
+export function MenuButton(props) {
+    // Destruct
+    const { button, items, labelField, anchorOrigin = {
+        vertical: "top",
+        horizontal: "right"
+    }, transformOrigin = {
+        vertical: anchorOrigin.vertical === "center"
+            ? "center"
+            : anchorOrigin.vertical === "top"
+                ? "bottom"
+                : "top",
+        horizontal: anchorOrigin.horizontal
+    }, sx, ...rest } = props;
+    // Top?
+    const isTop = transformOrigin.vertical === "top";
+    // Menu anchor
+    const [anchorEl, setAnchorEl] = React.useState();
+    // Menu open or not
+    const isMenuOpen = Boolean(anchorEl);
+    const handleMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleMenuClose = () => {
+        setAnchorEl(undefined);
+    };
+    return (React.createElement(React.Fragment, null,
+        typeof button === "function" ? (button(handleMenuOpen)) : (React.createElement(Button, { onClick: handleMenuOpen, ...button })),
+        React.createElement(Menu, { PaperProps: {
+                elevation: 0,
+                sx: {
+                    overflow: "visible",
+                    filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                    "& .MuiAvatar-root": {
+                        width: 32,
+                        height: 32
+                    },
+                    "&:before": {
+                        content: '""',
+                        display: "block",
+                        position: "absolute",
+                        top: isTop ? 0 : undefined,
+                        bottom: isTop ? undefined : -10,
+                        right: 14,
+                        width: 10,
+                        height: 10,
+                        bgcolor: "background.paper",
+                        transform: "translateY(-50%) rotate(45deg)",
+                        zIndex: 0
+                    },
+                    ...{ sx }
+                }
+            }, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: isMenuOpen, transitionDuration: 0, onClose: handleMenuClose, ...rest }, items.map((item) => {
+            const label = item[labelField];
+            return (React.createElement(MenuItem, { key: item.id, disabled: true }, label));
+        }))));
+}

package/lib/ResponsibleContainer.d.ts

@@ -15,6 +15,13 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
      * @param rect Current rect data
      */
     adjustHeight?: (height: number, rect: DOMRect) => number;
+    /**
+     *
+     * @param height Current height
+     * @param isGrid Is displaying DataGrid
+     * @returns Adjusted height
+     */
+    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
@@ -97,6 +97,8 @@ export function ResponsibleContainer(props) {
             if (adjustHeight != null)
                 heightLocal -= adjustHeight(heightLocal, rect);
         }
+        if (adjustFabHeight)
+            heightLocal = adjustFabHeight(heightLocal, showDataGrid);
         if (showDataGrid) {
             // Delete
             delete rest.itemRenderer;

package/lib/index.d.ts

@@ -61,6 +61,7 @@ export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";
 export * from "./LoadingButton";
 export * from "./MaskInput";
+export * from "./MenuButton";
 export * from "./MobileListItemRenderer";
 export * from "./MoneyInputField";
 export * from "./MoreFab";

package/lib/index.js

@@ -61,6 +61,7 @@ export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";
 export * from "./LoadingButton";
 export * from "./MaskInput";
+export * from "./MenuButton";
 export * from "./MobileListItemRenderer";
 export * from "./MoneyInputField";
 export * from "./MoreFab";

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.96",
+  "version": "1.1.98",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/FabBox.tsx

@@ -1,19 +1,19 @@
-import { Box, BoxProps, useTheme } from '@mui/material';
-import React from 'react';
+import { Box, BoxProps, useTheme } from "@mui/material";
+import React from "react";
 
 /**
  * Fabs container box props
  */
 export type FabBoxProps = BoxProps & {
-    /**
-     * Item gap
-     */
-    itemGap?: number;
-
-    /**
-     * Flex direction, row or column
-     */
-    columnDirection?: boolean;
+  /**
+   * Item gap
+   */
+  itemGap?: number;
+
+  /**
+   * Flex direction, row or column
+   */
+  columnDirection?: boolean;
 };
 
 /**
@@ -22,30 +22,31 @@ export type FabBoxProps = BoxProps & {
  * @returns Component
  */
 export function FabBox(props: FabBoxProps) {
-    // Destruct
-    const { columnDirection, itemGap = 1, sx = {}, ...rest } = props;
-
-    // Theme
-    const theme = useTheme();
-    const spaceGap = theme.spacing(itemGap);
-
-    if (columnDirection == null) return <React.Fragment />;
-
-    // margin
-    const margin = columnDirection
-        ? { marginTop: spaceGap }
-        : { marginLeft: spaceGap };
-
-    // Default style
-    if (typeof sx === 'object') {
-        Object.assign(sx as any, {
-            position: 'fixed',
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: columnDirection ? 'column' : 'row',
-            '& > :not(style) + :not(style)': margin
-        });
-    }
-
-    return <Box sx={sx} {...rest} />;
+  // Destruct
+  const { columnDirection, itemGap = 1, sx, ...rest } = props;
+
+  // Theme
+  const theme = useTheme();
+  const spaceGap = theme.spacing(itemGap);
+
+  if (columnDirection == null) return <React.Fragment />;
+
+  // margin
+  const margin = columnDirection
+    ? { marginTop: spaceGap }
+    : { marginLeft: spaceGap };
+
+  return (
+    <Box
+      sx={{
+        position: "fixed",
+        display: "flex",
+        alignItems: "center",
+        flexDirection: columnDirection ? "column" : "row",
+        "& > :not(style) + :not(style)": margin,
+        ...sx
+      }}
+      {...rest}
+    />
+  );
 }

package/src/MenuButton.tsx

@@ -0,0 +1,115 @@
+import { DataTypes } from "@etsoo/shared";
+import { Button, ButtonProps, Menu, MenuItem, MenuProps } from "@mui/material";
+import React from "react";
+
+export type MenuButtonProps<T extends DataTypes.IdItem> = Omit<
+  MenuProps,
+  "open"
+> & {
+  items: T[];
+  labelField: DataTypes.Keys<T, string>;
+  button:
+    | ((
+        clickHandler: React.MouseEventHandler<HTMLButtonElement>
+      ) => React.ReactNode)
+    | ButtonProps;
+};
+
+export function MenuButton<T extends DataTypes.IdItem>(
+  props: MenuButtonProps<T>
+) {
+  // Destruct
+  const {
+    button,
+    items,
+    labelField,
+    anchorOrigin = {
+      vertical: "top",
+      horizontal: "right"
+    },
+    transformOrigin = {
+      vertical:
+        anchorOrigin.vertical === "center"
+          ? "center"
+          : anchorOrigin.vertical === "top"
+          ? "bottom"
+          : "top",
+      horizontal: anchorOrigin.horizontal
+    },
+    sx,
+    ...rest
+  } = props;
+
+  // Top?
+  const isTop = transformOrigin.vertical === "top";
+
+  // Menu anchor
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement>();
+
+  // Menu open or not
+  const isMenuOpen = Boolean(anchorEl);
+
+  const handleMenuOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(undefined);
+  };
+
+  return (
+    <React.Fragment>
+      {typeof button === "function" ? (
+        button(handleMenuOpen)
+      ) : (
+        <Button onClick={handleMenuOpen} {...button} />
+      )}
+
+      <Menu
+        PaperProps={{
+          elevation: 0,
+          sx: {
+            overflow: "visible",
+            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+            "& .MuiAvatar-root": {
+              width: 32,
+              height: 32
+            },
+            "&:before": {
+              content: '""',
+              display: "block",
+              position: "absolute",
+              top: isTop ? 0 : undefined,
+              bottom: isTop ? undefined : -10,
+              right: 14,
+              width: 10,
+              height: 10,
+              bgcolor: "background.paper",
+              transform: "translateY(-50%) rotate(45deg)",
+              zIndex: 0
+            },
+            ...{ sx }
+          }
+        }}
+        disableScrollLock
+        anchorEl={anchorEl}
+        anchorOrigin={anchorOrigin}
+        keepMounted
+        transformOrigin={transformOrigin}
+        open={isMenuOpen}
+        transitionDuration={0}
+        onClose={handleMenuClose}
+        {...rest}
+      >
+        {items.map((item) => {
+          const label = item[labelField] as string;
+          return (
+            <MenuItem key={item.id} disabled>
+              {label}
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </React.Fragment>
+  );
+}

package/src/ResponsibleContainer.tsx

@@ -45,6 +45,14 @@ export type ResponsibleContainerProps<
    */
   adjustHeight?: (height: number, rect: DOMRect) => number;
 
+  /**
+   *
+   * @param height Current height
+   * @param isGrid Is displaying DataGrid
+   * @returns Adjusted height
+   */
+  adjustFabHeight?: (height: number, isGrid: boolean) => number;
+
   /**
    * Columns
    */
@@ -171,6 +179,7 @@ export function ResponsibleContainer<
   // Destruct
   const {
     adjustHeight,
+    adjustFabHeight,
     columns,
     containerBoxSx = defaultContainerBoxSx,
     dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total),
@@ -281,6 +290,9 @@ export function ResponsibleContainer<
       if (adjustHeight != null) heightLocal -= adjustHeight(heightLocal, rect);
     }
 
+    if (adjustFabHeight)
+      heightLocal = adjustFabHeight(heightLocal, showDataGrid);
+
     if (showDataGrid) {
       // Delete
       delete rest.itemRenderer;

package/src/index.ts

@@ -64,6 +64,7 @@ export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";
 export * from "./LoadingButton";
 export * from "./MaskInput";
+export * from "./MenuButton";
 export * from "./MobileListItemRenderer";
 export * from "./MoneyInputField";
 export * from "./MoreFab";

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;
 };