@etsoo/materialui 1.6.76 → 1.6.78

package/lib/cjs/SignaturePadComponent.d.ts

@@ -0,0 +1,92 @@
+import React from "react";
+import SignaturePad, { Options } from "signature_pad";
+/**
+ * Extended SignaturePad class with trim method
+ */
+export declare class SignaturePadEx extends SignaturePad {
+    private readonly canvasElement;
+    constructor(canvasElement: HTMLCanvasElement, options?: Options);
+    /**
+     * Trim the canvas to remove empty space around the signature
+     * @returns Trimmed canvas
+     */
+    trim(): HTMLCanvasElement;
+}
+/**
+ * Props for SignaturePadComponent
+ */
+export type SignaturePadComponentProps = {
+    /**
+     * Width of the canvas
+     */
+    width: number | string;
+    /**
+     * Height of the canvas
+     */
+    height: number;
+    /**
+     * Options for SignaturePad
+     */
+    options?: Options;
+    /**
+     * Ref for the SignaturePadEx instance
+     */
+    ref: React.RefObject<SignaturePadEx | null>;
+};
+/**
+ * React component for SignaturePad
+ * @param props Props
+ * @returns Component
+ */
+export declare function SignaturePadComponent(props: SignaturePadComponentProps): React.JSX.Element;
+type Placement = "top" | "right" | "bottom" | "left";
+type Alignment = "flex-start" | "center" | "flex-end";
+/**
+ * Methods for SignaturePadFull component
+ */
+export interface SignaturePadFullMethods {
+    getInstance(): SignaturePadEx | null;
+}
+/**
+ * Props for SignaturePadFull component
+ */
+export type SignaturePadFullProps = Partial<Omit<SignaturePadComponentProps, "ref">> & {
+    /**
+     * Label for the clear button
+     * @default "Clear"
+     */
+    clearLabel?: string;
+    /**
+     * Label for the save button
+     * @default "Save"
+     */
+    saveLabel?: string;
+    /**
+     * Ref for the SignaturePadFull instance
+     */
+    mRef?: React.RefObject<SignaturePadFullMethods | null>;
+    /**
+     * Placement of the buttons relative to the canvas
+     * @default ["right", "flex-start"]
+     */
+    placement?: [Placement?, alignment?: Alignment];
+    /**
+     * Callback when the signature is saved
+     * @param signaturePad SignaturePadEx instance
+     * @returns void or Promise<void>
+     */
+    onSave?: (signaturePad: SignaturePadEx) => void | Promise<void>;
+    /**
+     * Spacing between the canvas and buttons
+     * @default 0.5
+     */
+    spacing?: number;
+};
+/**
+ * Full SignaturePad component with clear and save buttons
+ *
+ * @param props Props
+ * @returns Component
+ */
+export declare function SignaturePadFull(props: SignaturePadFullProps): React.JSX.Element;
+export {};

package/lib/cjs/SignaturePadComponent.js

@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SignaturePadEx = void 0;
+exports.SignaturePadComponent = SignaturePadComponent;
+exports.SignaturePadFull = SignaturePadFull;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Paper_1 = __importDefault(require("@mui/material/Paper"));
+const react_1 = __importDefault(require("react"));
+const signature_pad_1 = __importDefault(require("signature_pad"));
+const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
+const Save_1 = __importDefault(require("@mui/icons-material/Save"));
+const CanvasUtils_1 = require("./utils/CanvasUtils");
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const ButtonGroup_1 = __importDefault(require("@mui/material/ButtonGroup"));
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * Extended SignaturePad class with trim method
+ */
+class SignaturePadEx extends signature_pad_1.default {
+    canvasElement;
+    constructor(canvasElement, options) {
+        super(canvasElement, options);
+        this.canvasElement = canvasElement;
+    }
+    /**
+     * Trim the canvas to remove empty space around the signature
+     * @returns Trimmed canvas
+     */
+    trim() {
+        return CanvasUtils_1.CanvasUtils.trim(this.canvasElement);
+    }
+}
+exports.SignaturePadEx = SignaturePadEx;
+/**
+ * React component for SignaturePad
+ * @param props Props
+ * @returns Component
+ */
+function SignaturePadComponent(props) {
+    // Destruct
+    const { width, height, options, ref } = props;
+    // Refs
+    const canvasRef = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        ref.current = new SignaturePadEx(canvas, options);
+        const observer = new ResizeObserver((entries) => {
+            const { width, height } = entries[0].contentRect;
+            canvas.width = width;
+            canvas.height = height;
+        });
+        observer.observe(canvas.parentElement);
+        return () => {
+            ref.current?.off();
+            observer.disconnect();
+        };
+    }, [options, ref]);
+    return (0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: width, height: height });
+}
+/**
+ * Full SignaturePad component with clear and save buttons
+ *
+ * @param props Props
+ * @returns Component
+ */
+function SignaturePadFull(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
+    const { clear, save } = app?.getLabels("clear", "save") ?? {};
+    // Destruct
+    const { clearLabel = clear || "Clear", saveLabel = save || "Save", width = "100%", height = 300, mRef, onSave, options, placement = ["right", "flex-start"], spacing = 0.5 } = props;
+    // Ref
+    const signaturePadRef = react_1.default.useRef(null);
+    react_1.default.useImperativeHandle(mRef, () => ({
+        getInstance: () => signaturePadRef.current
+    }));
+    function handleClear() {
+        signaturePadRef.current?.clear();
+    }
+    function handleSave() {
+        const sp = signaturePadRef.current;
+        if (!sp || sp.isEmpty())
+            return;
+        onSave?.(sp);
+    }
+    const [p = "right", a = "flex-start"] = placement;
+    let stackDirection;
+    let buttonGroupOrientation;
+    if (p === "top" || p === "bottom") {
+        stackDirection = p === "top" ? "column-reverse" : "column";
+        buttonGroupOrientation = "horizontal";
+    }
+    else {
+        stackDirection = p === "left" ? "row-reverse" : "row";
+        buttonGroupOrientation = "vertical";
+    }
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: stackDirection, spacing: spacing, sx: { alignItems: a }, children: [(0, jsx_runtime_1.jsx)(Paper_1.default, { sx: { width, height }, children: (0, jsx_runtime_1.jsx)(SignaturePadComponent, { width: width, height: height, options: options, ref: signaturePadRef }) }), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.default, { orientation: buttonGroupOrientation, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleClear, startIcon: (0, jsx_runtime_1.jsx)(Clear_1.default, {}), children: clearLabel }), onSave && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", onClick: handleSave, startIcon: (0, jsx_runtime_1.jsx)(Save_1.default, {}), children: saveLabel }))] })] }));
+}

package/lib/cjs/UserAvatarEditor.js

@@ -175,6 +175,6 @@ function UserAvatarEditor(props) {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "column", spacing: 0.5, sx: { width: containerWidth }, children: [(0, jsx_runtime_1.jsx)(FileUploadButton_1.FileUploadButton, { variant: "outlined", size: "medium", startIcon: (0, jsx_runtime_1.jsx)(Image_1.default, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { accept: "image/png, image/jpeg" }, children: selectFileLabel }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(react_1.default.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: width, height: localHeight }), children: (0, jsx_runtime_1.jsx)(react_avatar_editor_1.default, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "column", spacing: 0.5, sx: { width: containerWidth }, children: [(0, jsx_runtime_1.jsx)(FileUploadButton_1.FileUploadButton, { variant: "outlined", size: "medium", startIcon: (0, jsx_runtime_1.jsx)(Image_1.default, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { accept: "image/png, image/jpeg, image/webp" }, children: selectFileLabel }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(react_1.default.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: width, height: localHeight }), children: (0, jsx_runtime_1.jsx)(react_avatar_editor_1.default, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
                                 "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", scale: editorState.scale, rotate: editorState.rotate }) }), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.default, { size: "small", orientation: "vertical", disabled: !ready, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => handleRotate(90), title: labels.rotateRight, children: (0, jsx_runtime_1.jsx)(RotateRight_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: (0, jsx_runtime_1.jsx)(RotateLeft_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleReset, title: labels.reset, children: (0, jsx_runtime_1.jsx)(ClearAll_1.default, {}) })] })] }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { spacing: 0.5, direction: "row", sx: { alignItems: "center", paddingBottom: 2 }, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }), (0, jsx_runtime_1.jsx)(Slider_1.default, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { ref: buttonRef, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Done_1.default, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
 }

package/lib/cjs/index.d.ts

@@ -35,6 +35,7 @@ export * from "./pages/ViewPage";
 export * from "./texts/DateText";
 export * from "./texts/MoneyText";
 export * from "./texts/NumberText";
+export * from "./utils/CanvasUtils";
 export * from "./AddresSelector";
 export * from "./AuditDisplay";
 export * from "./AutocompleteExtendedProps";
@@ -122,6 +123,7 @@ export * from "./SearchOptionGroup";
 export * from "./SelectBool";
 export * from "./SelectEx";
 export * from "./ShowDataComparison";
+export * from "./SignaturePadComponent";
 export * from "./Switch";
 export * from "./SwitchAnt";
 export * from "./SwitchField";

package/lib/cjs/index.js

@@ -55,6 +55,7 @@ __exportStar(require("./pages/ViewPage"), exports);
 __exportStar(require("./texts/DateText"), exports);
 __exportStar(require("./texts/MoneyText"), exports);
 __exportStar(require("./texts/NumberText"), exports);
+__exportStar(require("./utils/CanvasUtils"), exports);
 __exportStar(require("./AddresSelector"), exports);
 __exportStar(require("./AuditDisplay"), exports);
 __exportStar(require("./AutocompleteExtendedProps"), exports);
@@ -142,6 +143,7 @@ __exportStar(require("./SearchOptionGroup"), exports);
 __exportStar(require("./SelectBool"), exports);
 __exportStar(require("./SelectEx"), exports);
 __exportStar(require("./ShowDataComparison"), exports);
+__exportStar(require("./SignaturePadComponent"), exports);
 __exportStar(require("./Switch"), exports);
 __exportStar(require("./SwitchAnt"), exports);
 __exportStar(require("./SwitchField"), exports);

package/lib/cjs/utils/CanvasUtils.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Utility functions for canvas operations
+ */
+export declare namespace CanvasUtils {
+    /**
+     * JPEG content type
+     */
+    const JPG = "image/jpeg";
+    /**
+     * PNG content type
+     */
+    const PNG = "image/png";
+    /**
+     * WEBP content type
+     */
+    const WEBP = "image/webp";
+    /**
+     * SVG content type
+     */
+    const SVG = "image/svg+xml";
+    /**
+     * Convert canvas to Blob
+     * @param canvas Canvas element
+     * @param type MIME type of the image
+     * @param quality Image quality (0 to 1)
+     * @returns Promise that resolves to a Blob
+     */
+    function toBlob(canvas: HTMLCanvasElement, type?: string, quality?: number): Promise<Blob>;
+    /**
+     * Trim the canvas to remove empty space around the signature
+     * @param canvas Canvas element
+     * @returns Trimmed canvas
+     */
+    function trim(canvas: HTMLCanvasElement): HTMLCanvasElement;
+}

package/lib/cjs/utils/CanvasUtils.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasUtils = void 0;
+/**
+ * Utility functions for canvas operations
+ */
+var CanvasUtils;
+(function (CanvasUtils) {
+    /**
+     * JPEG content type
+     */
+    CanvasUtils.JPG = "image/jpeg";
+    /**
+     * PNG content type
+     */
+    CanvasUtils.PNG = "image/png";
+    /**
+     * WEBP content type
+     */
+    CanvasUtils.WEBP = "image/webp";
+    /**
+     * SVG content type
+     */
+    CanvasUtils.SVG = "image/svg+xml";
+    /**
+     * Convert canvas to Blob
+     * @param canvas Canvas element
+     * @param type MIME type of the image
+     * @param quality Image quality (0 to 1)
+     * @returns Promise that resolves to a Blob
+     */
+    function toBlob(canvas, type = "image/png", quality = 1) {
+        return new Promise((resolve, reject) => {
+            canvas.toBlob((blob) => {
+                if (blob) {
+                    resolve(blob);
+                }
+                else {
+                    reject(new Error("Failed to create Blob."));
+                }
+            }, type, quality);
+        });
+    }
+    CanvasUtils.toBlob = toBlob;
+    /**
+     * Trim the canvas to remove empty space around the signature
+     * @param canvas Canvas element
+     * @returns Trimmed canvas
+     */
+    function trim(canvas) {
+        const ctx = canvas.getContext("2d");
+        const { width, height } = canvas;
+        const { data } = ctx.getImageData(0, 0, width, height);
+        let top = height;
+        let left = width;
+        let right = 0;
+        let bottom = 0;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                if (data[(y * width + x) * 4 + 3] === 0)
+                    continue;
+                if (x < left)
+                    left = x;
+                if (x > right)
+                    right = x;
+                if (y < top)
+                    top = y;
+                if (y > bottom)
+                    bottom = y;
+            }
+        }
+        const trimmed = document.createElement("canvas");
+        // Empty canvas
+        if (right < left || bottom < top)
+            return trimmed;
+        trimmed.width = right - left + 1;
+        trimmed.height = bottom - top + 1;
+        trimmed
+            .getContext("2d")
+            .drawImage(canvas, left, top, trimmed.width, trimmed.height, 0, 0, trimmed.width, trimmed.height);
+        return trimmed;
+    }
+    CanvasUtils.trim = trim;
+})(CanvasUtils || (exports.CanvasUtils = CanvasUtils = {}));

package/lib/mjs/SignaturePadComponent.d.ts

@@ -0,0 +1,92 @@
+import React from "react";
+import SignaturePad, { Options } from "signature_pad";
+/**
+ * Extended SignaturePad class with trim method
+ */
+export declare class SignaturePadEx extends SignaturePad {
+    private readonly canvasElement;
+    constructor(canvasElement: HTMLCanvasElement, options?: Options);
+    /**
+     * Trim the canvas to remove empty space around the signature
+     * @returns Trimmed canvas
+     */
+    trim(): HTMLCanvasElement;
+}
+/**
+ * Props for SignaturePadComponent
+ */
+export type SignaturePadComponentProps = {
+    /**
+     * Width of the canvas
+     */
+    width: number | string;
+    /**
+     * Height of the canvas
+     */
+    height: number;
+    /**
+     * Options for SignaturePad
+     */
+    options?: Options;
+    /**
+     * Ref for the SignaturePadEx instance
+     */
+    ref: React.RefObject<SignaturePadEx | null>;
+};
+/**
+ * React component for SignaturePad
+ * @param props Props
+ * @returns Component
+ */
+export declare function SignaturePadComponent(props: SignaturePadComponentProps): React.JSX.Element;
+type Placement = "top" | "right" | "bottom" | "left";
+type Alignment = "flex-start" | "center" | "flex-end";
+/**
+ * Methods for SignaturePadFull component
+ */
+export interface SignaturePadFullMethods {
+    getInstance(): SignaturePadEx | null;
+}
+/**
+ * Props for SignaturePadFull component
+ */
+export type SignaturePadFullProps = Partial<Omit<SignaturePadComponentProps, "ref">> & {
+    /**
+     * Label for the clear button
+     * @default "Clear"
+     */
+    clearLabel?: string;
+    /**
+     * Label for the save button
+     * @default "Save"
+     */
+    saveLabel?: string;
+    /**
+     * Ref for the SignaturePadFull instance
+     */
+    mRef?: React.RefObject<SignaturePadFullMethods | null>;
+    /**
+     * Placement of the buttons relative to the canvas
+     * @default ["right", "flex-start"]
+     */
+    placement?: [Placement?, alignment?: Alignment];
+    /**
+     * Callback when the signature is saved
+     * @param signaturePad SignaturePadEx instance
+     * @returns void or Promise<void>
+     */
+    onSave?: (signaturePad: SignaturePadEx) => void | Promise<void>;
+    /**
+     * Spacing between the canvas and buttons
+     * @default 0.5
+     */
+    spacing?: number;
+};
+/**
+ * Full SignaturePad component with clear and save buttons
+ *
+ * @param props Props
+ * @returns Component
+ */
+export declare function SignaturePadFull(props: SignaturePadFullProps): React.JSX.Element;
+export {};

package/lib/mjs/SignaturePadComponent.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "@mui/material/Button";
+import Paper from "@mui/material/Paper";
+import React from "react";
+import SignaturePad from "signature_pad";
+import ClearIcon from "@mui/icons-material/Clear";
+import SaveIcon from "@mui/icons-material/Save";
+import { CanvasUtils } from "./utils/CanvasUtils";
+import Stack from "@mui/material/Stack";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import { useAppContext } from "./app/ReactApp";
+/**
+ * Extended SignaturePad class with trim method
+ */
+export class SignaturePadEx extends SignaturePad {
+    canvasElement;
+    constructor(canvasElement, options) {
+        super(canvasElement, options);
+        this.canvasElement = canvasElement;
+    }
+    /**
+     * Trim the canvas to remove empty space around the signature
+     * @returns Trimmed canvas
+     */
+    trim() {
+        return CanvasUtils.trim(this.canvasElement);
+    }
+}
+/**
+ * React component for SignaturePad
+ * @param props Props
+ * @returns Component
+ */
+export function SignaturePadComponent(props) {
+    // Destruct
+    const { width, height, options, ref } = props;
+    // Refs
+    const canvasRef = React.useRef(null);
+    React.useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        ref.current = new SignaturePadEx(canvas, options);
+        const observer = new ResizeObserver((entries) => {
+            const { width, height } = entries[0].contentRect;
+            canvas.width = width;
+            canvas.height = height;
+        });
+        observer.observe(canvas.parentElement);
+        return () => {
+            ref.current?.off();
+            observer.disconnect();
+        };
+    }, [options, ref]);
+    return _jsx("canvas", { ref: canvasRef, width: width, height: height });
+}
+/**
+ * Full SignaturePad component with clear and save buttons
+ *
+ * @param props Props
+ * @returns Component
+ */
+export function SignaturePadFull(props) {
+    // Global app
+    const app = useAppContext();
+    const { clear, save } = app?.getLabels("clear", "save") ?? {};
+    // Destruct
+    const { clearLabel = clear || "Clear", saveLabel = save || "Save", width = "100%", height = 300, mRef, onSave, options, placement = ["right", "flex-start"], spacing = 0.5 } = props;
+    // Ref
+    const signaturePadRef = React.useRef(null);
+    React.useImperativeHandle(mRef, () => ({
+        getInstance: () => signaturePadRef.current
+    }));
+    function handleClear() {
+        signaturePadRef.current?.clear();
+    }
+    function handleSave() {
+        const sp = signaturePadRef.current;
+        if (!sp || sp.isEmpty())
+            return;
+        onSave?.(sp);
+    }
+    const [p = "right", a = "flex-start"] = placement;
+    let stackDirection;
+    let buttonGroupOrientation;
+    if (p === "top" || p === "bottom") {
+        stackDirection = p === "top" ? "column-reverse" : "column";
+        buttonGroupOrientation = "horizontal";
+    }
+    else {
+        stackDirection = p === "left" ? "row-reverse" : "row";
+        buttonGroupOrientation = "vertical";
+    }
+    return (_jsxs(Stack, { direction: stackDirection, spacing: spacing, sx: { alignItems: a }, children: [_jsx(Paper, { sx: { width, height }, children: _jsx(SignaturePadComponent, { width: width, height: height, options: options, ref: signaturePadRef }) }), _jsxs(ButtonGroup, { orientation: buttonGroupOrientation, children: [_jsx(Button, { onClick: handleClear, startIcon: _jsx(ClearIcon, {}), children: clearLabel }), onSave && (_jsx(Button, { variant: "contained", onClick: handleSave, startIcon: _jsx(SaveIcon, {}), children: saveLabel }))] })] }));
+}

package/lib/mjs/UserAvatarEditor.js

@@ -169,6 +169,6 @@ export function UserAvatarEditor(props) {
             }
         }
     };
-    return (_jsxs(Stack, { direction: "column", spacing: 0.5, sx: { width: containerWidth }, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ImageIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { accept: "image/png, image/jpeg" }, children: selectFileLabel }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: localHeight }), children: _jsx(AvatarEditor, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
+    return (_jsxs(Stack, { direction: "column", spacing: 0.5, sx: { width: containerWidth }, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ImageIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { accept: "image/png, image/jpeg, image/webp" }, children: selectFileLabel }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: localHeight }), children: _jsx(AvatarEditor, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
                                 "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", scale: editorState.scale, rotate: editorState.rotate }) }), _jsxs(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [_jsx(Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: _jsx(RotateRightIcon, {}) }), _jsx(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: _jsx(RotateLeftIcon, {}) }), _jsx(Button, { onClick: handleReset, title: labels.reset, children: _jsx(ClearAllIcon, {}) })] })] }), _jsxs(Stack, { spacing: 0.5, direction: "row", sx: { alignItems: "center", paddingBottom: 2 }, children: [_jsx(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: _jsx(RemoveIcon, {}) }), _jsx(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), _jsx(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: _jsx(AddIcon, {}) })] }), _jsx(Button, { ref: buttonRef, variant: "contained", startIcon: _jsx(DoneIcon, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
 }

package/lib/mjs/index.d.ts

@@ -35,6 +35,7 @@ export * from "./pages/ViewPage";
 export * from "./texts/DateText";
 export * from "./texts/MoneyText";
 export * from "./texts/NumberText";
+export * from "./utils/CanvasUtils";
 export * from "./AddresSelector";
 export * from "./AuditDisplay";
 export * from "./AutocompleteExtendedProps";
@@ -122,6 +123,7 @@ export * from "./SearchOptionGroup";
 export * from "./SelectBool";
 export * from "./SelectEx";
 export * from "./ShowDataComparison";
+export * from "./SignaturePadComponent";
 export * from "./Switch";
 export * from "./SwitchAnt";
 export * from "./SwitchField";

package/lib/mjs/index.js

@@ -35,6 +35,7 @@ export * from "./pages/ViewPage";
 export * from "./texts/DateText";
 export * from "./texts/MoneyText";
 export * from "./texts/NumberText";
+export * from "./utils/CanvasUtils";
 export * from "./AddresSelector";
 export * from "./AuditDisplay";
 export * from "./AutocompleteExtendedProps";
@@ -122,6 +123,7 @@ export * from "./SearchOptionGroup";
 export * from "./SelectBool";
 export * from "./SelectEx";
 export * from "./ShowDataComparison";
+export * from "./SignaturePadComponent";
 export * from "./Switch";
 export * from "./SwitchAnt";
 export * from "./SwitchField";

package/lib/mjs/utils/CanvasUtils.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Utility functions for canvas operations
+ */
+export declare namespace CanvasUtils {
+    /**
+     * JPEG content type
+     */
+    const JPG = "image/jpeg";
+    /**
+     * PNG content type
+     */
+    const PNG = "image/png";
+    /**
+     * WEBP content type
+     */
+    const WEBP = "image/webp";
+    /**
+     * SVG content type
+     */
+    const SVG = "image/svg+xml";
+    /**
+     * Convert canvas to Blob
+     * @param canvas Canvas element
+     * @param type MIME type of the image
+     * @param quality Image quality (0 to 1)
+     * @returns Promise that resolves to a Blob
+     */
+    function toBlob(canvas: HTMLCanvasElement, type?: string, quality?: number): Promise<Blob>;
+    /**
+     * Trim the canvas to remove empty space around the signature
+     * @param canvas Canvas element
+     * @returns Trimmed canvas
+     */
+    function trim(canvas: HTMLCanvasElement): HTMLCanvasElement;
+}

package/lib/mjs/utils/CanvasUtils.js

@@ -0,0 +1,81 @@
+/**
+ * Utility functions for canvas operations
+ */
+export var CanvasUtils;
+(function (CanvasUtils) {
+    /**
+     * JPEG content type
+     */
+    CanvasUtils.JPG = "image/jpeg";
+    /**
+     * PNG content type
+     */
+    CanvasUtils.PNG = "image/png";
+    /**
+     * WEBP content type
+     */
+    CanvasUtils.WEBP = "image/webp";
+    /**
+     * SVG content type
+     */
+    CanvasUtils.SVG = "image/svg+xml";
+    /**
+     * Convert canvas to Blob
+     * @param canvas Canvas element
+     * @param type MIME type of the image
+     * @param quality Image quality (0 to 1)
+     * @returns Promise that resolves to a Blob
+     */
+    function toBlob(canvas, type = "image/png", quality = 1) {
+        return new Promise((resolve, reject) => {
+            canvas.toBlob((blob) => {
+                if (blob) {
+                    resolve(blob);
+                }
+                else {
+                    reject(new Error("Failed to create Blob."));
+                }
+            }, type, quality);
+        });
+    }
+    CanvasUtils.toBlob = toBlob;
+    /**
+     * Trim the canvas to remove empty space around the signature
+     * @param canvas Canvas element
+     * @returns Trimmed canvas
+     */
+    function trim(canvas) {
+        const ctx = canvas.getContext("2d");
+        const { width, height } = canvas;
+        const { data } = ctx.getImageData(0, 0, width, height);
+        let top = height;
+        let left = width;
+        let right = 0;
+        let bottom = 0;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                if (data[(y * width + x) * 4 + 3] === 0)
+                    continue;
+                if (x < left)
+                    left = x;
+                if (x > right)
+                    right = x;
+                if (y < top)
+                    top = y;
+                if (y > bottom)
+                    bottom = y;
+            }
+        }
+        const trimmed = document.createElement("canvas");
+        // Empty canvas
+        if (right < left || bottom < top)
+            return trimmed;
+        trimmed.width = right - left + 1;
+        trimmed.height = bottom - top + 1;
+        trimmed
+            .getContext("2d")
+            .drawImage(canvas, left, top, trimmed.width, trimmed.height, 0, 0, trimmed.width, trimmed.height);
+        return trimmed;
+    }
+    CanvasUtils.trim = trim;
+})(CanvasUtils || (CanvasUtils = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.76",
+  "version": "1.6.78",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -44,9 +44,9 @@
     "@etsoo/notificationbase": "^1.1.72",
     "@etsoo/react": "^1.8.94",
     "@etsoo/shared": "^1.2.87",
-    "@mui/icons-material": "^9.1.1",
-    "@mui/material": "^9.1.2",
-    "@mui/x-data-grid": "^9.7.0",
+    "@mui/icons-material": "^9.2.0",
+    "@mui/material": "^9.2.0",
+    "@mui/x-data-grid": "^9.8.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.4.11",
@@ -58,7 +58,8 @@
     "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.2.7",
     "react-draggable": "^4.7.0",
-    "react-imask": "7.6.1"
+    "react-imask": "7.6.1",
+    "signature_pad": "^5.1.3"
   },
   "overrides": {
     "react": "$react",

package/src/SignaturePadComponent.tsx

@@ -0,0 +1,230 @@
+import Button from "@mui/material/Button";
+import Paper from "@mui/material/Paper";
+import React from "react";
+import SignaturePad, { Options } from "signature_pad";
+import ClearIcon from "@mui/icons-material/Clear";
+import SaveIcon from "@mui/icons-material/Save";
+import { ResponsiveStyleValue } from "@mui/system";
+import { CanvasUtils } from "./utils/CanvasUtils";
+import Stack from "@mui/material/Stack";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import { useAppContext } from "./app/ReactApp";
+
+/**
+ * Extended SignaturePad class with trim method
+ */
+export class SignaturePadEx extends SignaturePad {
+  constructor(
+    private readonly canvasElement: HTMLCanvasElement,
+    options?: Options
+  ) {
+    super(canvasElement, options);
+  }
+
+  /**
+   * Trim the canvas to remove empty space around the signature
+   * @returns Trimmed canvas
+   */
+  trim(): HTMLCanvasElement {
+    return CanvasUtils.trim(this.canvasElement);
+  }
+}
+
+/**
+ * Props for SignaturePadComponent
+ */
+export type SignaturePadComponentProps = {
+  /**
+   * Width of the canvas
+   */
+  width: number | string;
+
+  /**
+   * Height of the canvas
+   */
+  height: number;
+
+  /**
+   * Options for SignaturePad
+   */
+  options?: Options;
+
+  /**
+   * Ref for the SignaturePadEx instance
+   */
+  ref: React.RefObject<SignaturePadEx | null>;
+};
+
+/**
+ * React component for SignaturePad
+ * @param props Props
+ * @returns Component
+ */
+export function SignaturePadComponent(props: SignaturePadComponentProps) {
+  // Destruct
+  const { width, height, options, ref } = props;
+
+  // Refs
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    ref.current = new SignaturePadEx(canvas, options);
+
+    const observer = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect;
+
+      canvas.width = width;
+      canvas.height = height;
+    });
+
+    observer.observe(canvas.parentElement!);
+
+    return () => {
+      ref.current?.off();
+      observer.disconnect();
+    };
+  }, [options, ref]);
+
+  return <canvas ref={canvasRef} width={width} height={height} />;
+}
+
+type Placement = "top" | "right" | "bottom" | "left";
+type Alignment = "flex-start" | "center" | "flex-end";
+
+/**
+ * Methods for SignaturePadFull component
+ */
+export interface SignaturePadFullMethods {
+  getInstance(): SignaturePadEx | null;
+}
+
+/**
+ * Props for SignaturePadFull component
+ */
+export type SignaturePadFullProps = Partial<
+  Omit<SignaturePadComponentProps, "ref">
+> & {
+  /**
+   * Label for the clear button
+   * @default "Clear"
+   */
+  clearLabel?: string;
+
+  /**
+   * Label for the save button
+   * @default "Save"
+   */
+  saveLabel?: string;
+
+  /**
+   * Ref for the SignaturePadFull instance
+   */
+  mRef?: React.RefObject<SignaturePadFullMethods | null>;
+
+  /**
+   * Placement of the buttons relative to the canvas
+   * @default ["right", "flex-start"]
+   */
+  placement?: [Placement?, alignment?: Alignment];
+
+  /**
+   * Callback when the signature is saved
+   * @param signaturePad SignaturePadEx instance
+   * @returns void or Promise<void>
+   */
+  onSave?: (signaturePad: SignaturePadEx) => void | Promise<void>;
+
+  /**
+   * Spacing between the canvas and buttons
+   * @default 0.5
+   */
+  spacing?: number;
+};
+
+/**
+ * Full SignaturePad component with clear and save buttons
+ *
+ * @param props Props
+ * @returns Component
+ */
+export function SignaturePadFull(props: SignaturePadFullProps) {
+  // Global app
+  const app = useAppContext();
+  const { clear, save } = app?.getLabels("clear", "save") ?? {};
+
+  // Destruct
+  const {
+    clearLabel = clear || "Clear",
+    saveLabel = save || "Save",
+    width = "100%",
+    height = 300,
+    mRef,
+    onSave,
+    options,
+    placement = ["right", "flex-start"],
+    spacing = 0.5
+  } = props;
+
+  // Ref
+  const signaturePadRef = React.useRef<SignaturePadEx>(null);
+
+  React.useImperativeHandle(mRef, () => ({
+    getInstance: () => signaturePadRef.current
+  }));
+
+  function handleClear() {
+    signaturePadRef.current?.clear();
+  }
+
+  function handleSave() {
+    const sp = signaturePadRef.current;
+    if (!sp || sp.isEmpty()) return;
+
+    onSave?.(sp);
+  }
+
+  const [p = "right", a = "flex-start"] = placement;
+
+  let stackDirection: ResponsiveStyleValue<
+    "row" | "row-reverse" | "column" | "column-reverse"
+  >;
+  let buttonGroupOrientation: "horizontal" | "vertical";
+
+  if (p === "top" || p === "bottom") {
+    stackDirection = p === "top" ? "column-reverse" : "column";
+    buttonGroupOrientation = "horizontal";
+  } else {
+    stackDirection = p === "left" ? "row-reverse" : "row";
+    buttonGroupOrientation = "vertical";
+  }
+
+  return (
+    <Stack direction={stackDirection} spacing={spacing} sx={{ alignItems: a }}>
+      <Paper sx={{ width, height }}>
+        <SignaturePadComponent
+          width={width}
+          height={height}
+          options={options}
+          ref={signaturePadRef}
+        />
+      </Paper>
+      <ButtonGroup orientation={buttonGroupOrientation}>
+        <Button onClick={handleClear} startIcon={<ClearIcon />}>
+          {clearLabel}
+        </Button>
+        {onSave && (
+          <Button
+            variant="contained"
+            onClick={handleSave}
+            startIcon={<SaveIcon />}
+          >
+            {saveLabel}
+          </Button>
+        )}
+      </ButtonGroup>
+    </Stack>
+  );
+}

package/src/UserAvatarEditor.tsx

@@ -314,7 +314,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
         startIcon={<ImageIcon />}
         fullWidth
         onUploadFiles={handleFileUpload}
-        inputProps={{ accept: "image/png, image/jpeg" }}
+        inputProps={{ accept: "image/png, image/jpeg, image/webp" }}
       >
         {selectFileLabel}
       </FileUploadButton>

package/src/index.ts

@@ -41,6 +41,8 @@ export * from "./texts/DateText";
 export * from "./texts/MoneyText";
 export * from "./texts/NumberText";
 
+export * from "./utils/CanvasUtils";
+
 export * from "./AddresSelector";
 export * from "./AuditDisplay";
 export * from "./AutocompleteExtendedProps";
@@ -128,6 +130,7 @@ export * from "./SearchOptionGroup";
 export * from "./SelectBool";
 export * from "./SelectEx";
 export * from "./ShowDataComparison";
+export * from "./SignaturePadComponent";
 export * from "./Switch";
 export * from "./SwitchAnt";
 export * from "./SwitchField";

package/src/utils/CanvasUtils.ts

@@ -0,0 +1,103 @@
+/**
+ * Utility functions for canvas operations
+ */
+export namespace CanvasUtils {
+  /**
+   * JPEG content type
+   */
+  export const JPG = "image/jpeg";
+
+  /**
+   * PNG content type
+   */
+  export const PNG = "image/png";
+
+  /**
+   * WEBP content type
+   */
+  export const WEBP = "image/webp";
+
+  /**
+   * SVG content type
+   */
+  export const SVG = "image/svg+xml";
+
+  /**
+   * Convert canvas to Blob
+   * @param canvas Canvas element
+   * @param type MIME type of the image
+   * @param quality Image quality (0 to 1)
+   * @returns Promise that resolves to a Blob
+   */
+  export function toBlob(
+    canvas: HTMLCanvasElement,
+    type = "image/png",
+    quality = 1
+  ): Promise<Blob> {
+    return new Promise((resolve, reject) => {
+      canvas.toBlob(
+        (blob) => {
+          if (blob) {
+            resolve(blob);
+          } else {
+            reject(new Error("Failed to create Blob."));
+          }
+        },
+        type,
+        quality
+      );
+    });
+  }
+
+  /**
+   * Trim the canvas to remove empty space around the signature
+   * @param canvas Canvas element
+   * @returns Trimmed canvas
+   */
+  export function trim(canvas: HTMLCanvasElement): HTMLCanvasElement {
+    const ctx = canvas.getContext("2d")!;
+    const { width, height } = canvas;
+
+    const { data } = ctx.getImageData(0, 0, width, height);
+
+    let top = height;
+    let left = width;
+    let right = 0;
+    let bottom = 0;
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        if (data[(y * width + x) * 4 + 3] === 0) continue;
+
+        if (x < left) left = x;
+        if (x > right) right = x;
+        if (y < top) top = y;
+        if (y > bottom) bottom = y;
+      }
+    }
+
+    const trimmed = document.createElement("canvas");
+
+    // Empty canvas
+    if (right < left || bottom < top) return trimmed;
+
+    trimmed.width = right - left + 1;
+    trimmed.height = bottom - top + 1;
+
+    trimmed
+      .getContext("2d")!
+      .drawImage(
+        canvas,
+        left,
+        top,
+        trimmed.width,
+        trimmed.height,
+        0,
+        0,
+        trimmed.width,
+        trimmed.height
+      );
+
+    return trimmed;
+  }
+}