@etsoo/materialui 1.2.0 → 1.2.1

package/lib/FabBox.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { BoxProps } from "@mui/material";
+import { BoxProps, PaperProps } from "@mui/material";
+type SharedProps = keyof BoxProps & keyof PaperProps;
 /**
  * Fabs container box props
  */
-export type FabBoxProps = BoxProps & {
+export type FabBoxProps = Pick<BoxProps, SharedProps> & Pick<PaperProps, SharedProps> & {
     /**
      * Item gap
      */
@@ -23,3 +24,4 @@ export type FabBoxProps = BoxProps & {
  * @returns Component
  */
 export declare function FabBox(props: FabBoxProps): JSX.Element;
+export {};

package/lib/FabBox.js

@@ -7,7 +7,7 @@ import React from "react";
  */
 export function FabBox(props) {
     // Destruct
-    const { columnDirection, fabPanel = columnDirection === false ? true : false, itemGap = 1, sx, ...rest } = props;
+    const { columnDirection, fabPanel = columnDirection, itemGap = 1, sx, ...rest } = props;
     // Theme
     const theme = useTheme();
     const spaceGap = theme.spacing(itemGap);
@@ -17,7 +17,15 @@ export function FabBox(props) {
     const margin = columnDirection
         ? { marginTop: spaceGap }
         : { marginLeft: spaceGap };
-    const box = (React.createElement(Box, { sx: {
+    return fabPanel ? (React.createElement(Paper, { sx: {
+            position: "fixed",
+            display: "flex",
+            alignItems: "center",
+            padding: spaceGap,
+            flexDirection: columnDirection ? "column" : "row",
+            "& > :not(style) + :not(style)": margin,
+            ...sx
+        }, ...rest })) : (React.createElement(Box, { sx: {
             position: "fixed",
             display: "flex",
             alignItems: "center",
@@ -25,5 +33,4 @@ export function FabBox(props) {
             "& > :not(style) + :not(style)": margin,
             ...sx
         }, ...rest }));
-    return fabPanel ? React.createElement(Paper, { sx: { padding: spaceGap } }, box) : box;
 }

package/package.json

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

package/src/FabBox.tsx

@@ -1,25 +1,28 @@
-import { Box, BoxProps, Paper, useTheme } from "@mui/material";
+import { Box, BoxProps, Paper, PaperProps, useTheme } from "@mui/material";
 import React from "react";
 
+type SharedProps = keyof BoxProps & keyof PaperProps;
+
 /**
  * Fabs container box props
  */
-export type FabBoxProps = BoxProps & {
-  /**
-   * Item gap
-   */
-  itemGap?: number;
+export type FabBoxProps = Pick<BoxProps, SharedProps> &
+  Pick<PaperProps, SharedProps> & {
+    /**
+     * Item gap
+     */
+    itemGap?: number;
 
-  /**
-   * Flex direction, row or column
-   */
-  columnDirection?: boolean;
+    /**
+     * Flex direction, row or column
+     */
+    columnDirection?: boolean;
 
-  /**
-   * Add panel to the Fab
-   */
-  fabPanel?: boolean;
-};
+    /**
+     * Add panel to the Fab
+     */
+    fabPanel?: boolean;
+  };
 
 /**
  * Fabs container box
@@ -30,7 +33,7 @@ export function FabBox(props: FabBoxProps) {
   // Destruct
   const {
     columnDirection,
-    fabPanel = columnDirection === false ? true : false,
+    fabPanel = columnDirection,
     itemGap = 1,
     sx,
     ...rest
@@ -47,7 +50,20 @@ export function FabBox(props: FabBoxProps) {
     ? { marginTop: spaceGap }
     : { marginLeft: spaceGap };
 
-  const box = (
+  return fabPanel ? (
+    <Paper
+      sx={{
+        position: "fixed",
+        display: "flex",
+        alignItems: "center",
+        padding: spaceGap,
+        flexDirection: columnDirection ? "column" : "row",
+        "& > :not(style) + :not(style)": margin,
+        ...sx
+      }}
+      {...rest}
+    />
+  ) : (
     <Box
       sx={{
         position: "fixed",
@@ -60,6 +76,4 @@ export function FabBox(props: FabBoxProps) {
       {...rest}
     />
   );
-
-  return fabPanel ? <Paper sx={{ padding: spaceGap }}>{box}</Paper> : box;
 }