@etsoo/materialui 1.6.75 → 1.6.76

package/lib/cjs/ImagePreviewButton.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps } from "@mui/material/Button";
 import { DialogProps } from "@mui/material/Dialog";
-import React from "react";
+import React, { CSSProperties } from "react";
 /**
  * Image preview button props
  */
@@ -17,6 +17,10 @@ export type ImagePreviewButtonProps = {
      * Image
      */
     image?: string;
+    /**
+     * Object fit style
+     */
+    objectFit?: CSSProperties["objectFit"];
     /**
      * Size
      */

package/lib/cjs/ImagePreviewButton.js

@@ -17,11 +17,17 @@ const react_1 = __importDefault(require("react"));
  */
 function ImagePreviewButton(props) {
     // Destruct
-    const { buttonProps, dialogProps, image, size = 32 } = props;
+    const { buttonProps, dialogProps, image, objectFit = "contain", size = 32 } = props;
     const [open, setOpen] = react_1.default.useState(false);
     const [width, height] = typeof size === "number" ? [size, size] : size;
     return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => setOpen(true), variant: "text", disabled: !image, sx: {
                     p: 0,
                     minWidth: 0
-                }, ...buttonProps, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { src: image, variant: "rounded", sx: { width, height } }) }), (0, jsx_runtime_1.jsx)(Dialog_1.default, { open: open, onClose: () => setOpen(false), maxWidth: "sm", ...dialogProps, children: (0, jsx_runtime_1.jsx)(DialogContent_1.default, { children: image && ((0, jsx_runtime_1.jsx)("img", { src: image, style: { maxWidth: "100%", height: "auto" } })) }) })] }));
+                }, ...buttonProps, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { src: image, variant: "rounded", sx: {
+                        width,
+                        height,
+                        "& img": {
+                            objectFit
+                        }
+                    } }) }), (0, jsx_runtime_1.jsx)(Dialog_1.default, { open: open, onClose: () => setOpen(false), maxWidth: "sm", ...dialogProps, children: (0, jsx_runtime_1.jsx)(DialogContent_1.default, { children: image && ((0, jsx_runtime_1.jsx)("img", { src: image, style: { maxWidth: "100%", height: "auto" } })) }) })] }));
 }

package/lib/mjs/ImagePreviewButton.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps } from "@mui/material/Button";
 import { DialogProps } from "@mui/material/Dialog";
-import React from "react";
+import React, { CSSProperties } from "react";
 /**
  * Image preview button props
  */
@@ -17,6 +17,10 @@ export type ImagePreviewButtonProps = {
      * Image
      */
     image?: string;
+    /**
+     * Object fit style
+     */
+    objectFit?: CSSProperties["objectFit"];
     /**
      * Size
      */

package/lib/mjs/ImagePreviewButton.js

@@ -11,11 +11,17 @@ import React from "react";
  */
 export function ImagePreviewButton(props) {
     // Destruct
-    const { buttonProps, dialogProps, image, size = 32 } = props;
+    const { buttonProps, dialogProps, image, objectFit = "contain", size = 32 } = props;
     const [open, setOpen] = React.useState(false);
     const [width, height] = typeof size === "number" ? [size, size] : size;
     return (_jsxs(React.Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), variant: "text", disabled: !image, sx: {
                     p: 0,
                     minWidth: 0
-                }, ...buttonProps, children: _jsx(Avatar, { src: image, variant: "rounded", sx: { width, height } }) }), _jsx(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "sm", ...dialogProps, children: _jsx(DialogContent, { children: image && (_jsx("img", { src: image, style: { maxWidth: "100%", height: "auto" } })) }) })] }));
+                }, ...buttonProps, children: _jsx(Avatar, { src: image, variant: "rounded", sx: {
+                        width,
+                        height,
+                        "& img": {
+                            objectFit
+                        }
+                    } }) }), _jsx(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "sm", ...dialogProps, children: _jsx(DialogContent, { children: image && (_jsx("img", { src: image, style: { maxWidth: "100%", height: "auto" } })) }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.75",
+  "version": "1.6.76",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ImagePreviewButton.tsx

@@ -2,7 +2,7 @@ import Avatar from "@mui/material/Avatar";
 import Button, { ButtonProps } from "@mui/material/Button";
 import Dialog, { DialogProps } from "@mui/material/Dialog";
 import DialogContent from "@mui/material/DialogContent";
-import React from "react";
+import React, { CSSProperties } from "react";
 
 /**
  * Image preview button props
@@ -23,6 +23,11 @@ export type ImagePreviewButtonProps = {
    */
   image?: string;
 
+  /**
+   * Object fit style
+   */
+  objectFit?: CSSProperties["objectFit"];
+
   /**
    * Size
    */
@@ -36,7 +41,13 @@ export type ImagePreviewButtonProps = {
  */
 export function ImagePreviewButton(props: ImagePreviewButtonProps) {
   // Destruct
-  const { buttonProps, dialogProps, image, size = 32 } = props;
+  const {
+    buttonProps,
+    dialogProps,
+    image,
+    objectFit = "contain",
+    size = 32
+  } = props;
 
   const [open, setOpen] = React.useState(false);
 
@@ -54,7 +65,17 @@ export function ImagePreviewButton(props: ImagePreviewButtonProps) {
         }}
         {...buttonProps}
       >
-        <Avatar src={image} variant="rounded" sx={{ width, height }} />
+        <Avatar
+          src={image}
+          variant="rounded"
+          sx={{
+            width,
+            height,
+            "& img": {
+              objectFit
+            }
+          }}
+        />
       </Button>
       <Dialog
         open={open}