@etsoo/materialui 1.1.96 → 1.1.97

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,13 @@ 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",
+            background: "rgba(255, 255, 255, .4)",
+            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

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

package/lib/ResponsibleContainer.js

@@ -95,7 +95,7 @@ export function ResponsibleContainer(props) {
             if (!isNaN(boxMargin))
                 heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
             if (adjustHeight != null)
-                heightLocal -= adjustHeight(heightLocal, rect);
+                heightLocal -= adjustHeight(heightLocal, rect, showDataGrid);
         }
         if (showDataGrid) {
             // Delete

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.96",
+  "version": "1.1.97",
   "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,32 @@ 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",
+        background: "rgba(255, 255, 255, .4)",
+        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

@@ -42,8 +42,9 @@ export type ResponsibleContainerProps<
    * Height will be deducted
    * @param height Current calcuated height
    * @param rect Current rect data
+   * @param isGrid Is displaying DataGrid
    */
-  adjustHeight?: (height: number, rect: DOMRect) => number;
+  adjustHeight?: (height: number, rect: DOMRect, isGrid: boolean) => number;
 
   /**
    * Columns
@@ -278,7 +279,8 @@ 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);
+      if (adjustHeight != null)
+        heightLocal -= adjustHeight(heightLocal, rect, showDataGrid);
     }
 
     if (showDataGrid) {

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