@etsoo/materialui 1.5.23 → 1.5.25

package/lib/cjs/FileUploadButton.d.ts

@@ -19,7 +19,7 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
     /**
      * Input field attributes
      */
-    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hidden">;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hidden" | "multiple">;
     /**
      * File invalid handler
      * @param values [expected, actual]

package/lib/cjs/FileUploadButton.js

@@ -16,7 +16,7 @@ const FlexBox_1 = require("./FlexBox");
  */
 function FileUploadButton(props) {
     // Destruct
-    const { dropFilesLabel, maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children = "Browse", ...rest } = props;
+    const { dropFilesLabel, maxFiles = 1, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children = "Browse", ...rest } = props;
     const { onChange } = inputProps ?? {};
     const [dragOver, setDragOver] = react_1.default.useState(false);
     const handleDrop = (e) => {
@@ -33,7 +33,7 @@ function FileUploadButton(props) {
         const fl = files.length;
         if (fl === 0)
             return;
-        if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+        if (maxFiles > 0 && fl > maxFiles) {
             if (onFileInvalid)
                 onFileInvalid([maxFiles, fl]);
             return;
@@ -58,7 +58,7 @@ function FileUploadButton(props) {
                 onDragOver: handleDragOver,
                 onDragLeave: handleDragLeave
             }), children: [dropFilesLabel &&
-                (typeof dropFilesLabel === "string" ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: dropFilesLabel })) : (dropFilesLabel)), (0, jsx_runtime_1.jsxs)(Button_1.default, { component: "label", sx: { textTransform: "none" }, ...rest, children: [children, (0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, onChange: (event) => {
+                (typeof dropFilesLabel === "string" ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: dropFilesLabel })) : (dropFilesLabel)), (0, jsx_runtime_1.jsxs)(Button_1.default, { component: "label", sx: { textTransform: "none" }, ...rest, children: [children, (0, jsx_runtime_1.jsx)("input", { type: "file", multiple: maxFiles > 1, hidden: true, onChange: (event) => {
                             if (onChange)
                                 onChange(event);
                             if (event.isDefaultPrevented())

package/lib/cjs/UserAvatarEditor.js

@@ -169,6 +169,6 @@ function UserAvatarEditor(props) {
     };
     // Load the component
     const AE = react_1.default.lazy(() => import("react-avatar-editor"));
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "column", spacing: 0.5, 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: { multiple: false, 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)(AE, { 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, 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)(AE, { 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: { paddingBottom: 2 }, alignItems: "center", 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/html/HtmlDiv.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlDiv = HtmlDiv;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
 const dompurify_1 = __importDefault(require("dompurify"));
 class HtmlDivElement extends HTMLElement {
     constructor() {
@@ -15,10 +16,16 @@ class HtmlDivElement extends HTMLElement {
         const shadow = this.attachShadow({ mode: "open" });
         // Create a wrapper element to hold the sanitized HTML content
         const wrapper = document.createElement("div");
-        if (this.textContent) {
+        const html = this.innerHTML;
+        if (shared_1.Utils.hasHtmlEntity(html) &&
+            !shared_1.Utils.hasHtmlTag(html) &&
+            this.textContent) {
             wrapper.innerHTML = dompurify_1.default.sanitize(this.textContent);
-            this.textContent = null; // Clear the textContent to avoid duplication
         }
+        else {
+            wrapper.innerHTML = dompurify_1.default.sanitize(html);
+        }
+        this.textContent = null; // Clear the textContent to avoid duplication
         shadow.appendChild(wrapper);
     }
 }

package/lib/mjs/FileUploadButton.d.ts

@@ -19,7 +19,7 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
     /**
      * Input field attributes
      */
-    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hidden">;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hidden" | "multiple">;
     /**
      * File invalid handler
      * @param values [expected, actual]

package/lib/mjs/FileUploadButton.js

@@ -10,7 +10,7 @@ import { HBox } from "./FlexBox";
  */
 export function FileUploadButton(props) {
     // Destruct
-    const { dropFilesLabel, maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children = "Browse", ...rest } = props;
+    const { dropFilesLabel, maxFiles = 1, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children = "Browse", ...rest } = props;
     const { onChange } = inputProps ?? {};
     const [dragOver, setDragOver] = React.useState(false);
     const handleDrop = (e) => {
@@ -27,7 +27,7 @@ export function FileUploadButton(props) {
         const fl = files.length;
         if (fl === 0)
             return;
-        if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+        if (maxFiles > 0 && fl > maxFiles) {
             if (onFileInvalid)
                 onFileInvalid([maxFiles, fl]);
             return;
@@ -52,7 +52,7 @@ export function FileUploadButton(props) {
                 onDragOver: handleDragOver,
                 onDragLeave: handleDragLeave
             }), children: [dropFilesLabel &&
-                (typeof dropFilesLabel === "string" ? (_jsx(Typography, { variant: "body2", children: dropFilesLabel })) : (dropFilesLabel)), _jsxs(Button, { component: "label", sx: { textTransform: "none" }, ...rest, children: [children, _jsx("input", { type: "file", hidden: true, onChange: (event) => {
+                (typeof dropFilesLabel === "string" ? (_jsx(Typography, { variant: "body2", children: dropFilesLabel })) : (dropFilesLabel)), _jsxs(Button, { component: "label", sx: { textTransform: "none" }, ...rest, children: [children, _jsx("input", { type: "file", multiple: maxFiles > 1, hidden: true, onChange: (event) => {
                             if (onChange)
                                 onChange(event);
                             if (event.isDefaultPrevented())

package/lib/mjs/UserAvatarEditor.js

@@ -163,6 +163,6 @@ export function UserAvatarEditor(props) {
     };
     // Load the component
     const AE = React.lazy(() => import("react-avatar-editor"));
-    return (_jsxs(Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ImageIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, 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(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
+    return (_jsxs(Stack, { direction: "column", spacing: 0.5, 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(AE, { 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: { paddingBottom: 2 }, alignItems: "center", 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/html/HtmlDiv.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Utils } from "@etsoo/shared";
 import DOMPurify from "dompurify";
 class HtmlDivElement extends HTMLElement {
     constructor() {
@@ -9,10 +10,16 @@ class HtmlDivElement extends HTMLElement {
         const shadow = this.attachShadow({ mode: "open" });
         // Create a wrapper element to hold the sanitized HTML content
         const wrapper = document.createElement("div");
-        if (this.textContent) {
+        const html = this.innerHTML;
+        if (Utils.hasHtmlEntity(html) &&
+            !Utils.hasHtmlTag(html) &&
+            this.textContent) {
             wrapper.innerHTML = DOMPurify.sanitize(this.textContent);
-            this.textContent = null; // Clear the textContent to avoid duplication
         }
+        else {
+            wrapper.innerHTML = DOMPurify.sanitize(html);
+        }
+        this.textContent = null; // Clear the textContent to avoid duplication
         shadow.appendChild(wrapper);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.23",
+  "version": "1.5.25",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -43,7 +43,7 @@
     "@etsoo/appscript": "^1.6.22",
     "@etsoo/notificationbase": "^1.1.60",
     "@etsoo/react": "^1.8.38",
-    "@etsoo/shared": "^1.2.66",
+    "@etsoo/shared": "^1.2.68",
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",
     "@mui/x-data-grid": "^7.28.3",

package/src/FileUploadButton.tsx

@@ -27,7 +27,7 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
    */
   inputProps?: Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
-    "type" | "hidden"
+    "type" | "hidden" | "multiple"
   >;
 
   /**
@@ -53,7 +53,7 @@ export function FileUploadButton(props: FileUploadButtonProps) {
   // Destruct
   const {
     dropFilesLabel,
-    maxFiles,
+    maxFiles = 1,
     maxFileSize,
     inputProps,
     onFileInvalid,
@@ -83,7 +83,7 @@ export function FileUploadButton(props: FileUploadButtonProps) {
     const fl = files.length;
     if (fl === 0) return;
 
-    if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+    if (maxFiles > 0 && fl > maxFiles) {
       if (onFileInvalid) onFileInvalid([maxFiles, fl]);
       return;
     }
@@ -128,6 +128,7 @@ export function FileUploadButton(props: FileUploadButtonProps) {
         {children}
         <input
           type="file"
+          multiple={maxFiles > 1}
           hidden={true}
           onChange={(event) => {
             if (onChange) onChange(event);

package/src/UserAvatarEditor.tsx

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

package/src/html/HtmlDiv.tsx

@@ -1,3 +1,4 @@
+import { Utils } from "@etsoo/shared";
 import DOMPurify from "dompurify";
 import { HTMLAttributes } from "react";
 
@@ -12,11 +13,19 @@ class HtmlDivElement extends HTMLElement {
 
     // Create a wrapper element to hold the sanitized HTML content
     const wrapper = document.createElement("div");
-    if (this.textContent) {
+    const html = this.innerHTML;
+    if (
+      Utils.hasHtmlEntity(html) &&
+      !Utils.hasHtmlTag(html) &&
+      this.textContent
+    ) {
       wrapper.innerHTML = DOMPurify.sanitize(this.textContent);
-      this.textContent = null; // Clear the textContent to avoid duplication
+    } else {
+      wrapper.innerHTML = DOMPurify.sanitize(html);
     }
 
+    this.textContent = null; // Clear the textContent to avoid duplication
+
     shadow.appendChild(wrapper);
   }
 }