@etsoo/materialui 1.5.22 → 1.5.24

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.d.ts

@@ -1,10 +1,9 @@
+import { HTMLAttributes } from "react";
 /**
  * Custom HTML element properties
  * 自定义 HTML 元素属性
  */
-export type HtmlDivProps = Omit<HTMLElement, "children"> & {
-    children: React.ReactNode;
-};
+export type HtmlDivProps = HTMLAttributes<HTMLElement>;
 /**
  * Custom HTML element that sanitizes and displays HTML content
  * 自定义 HTML 元素，用于清理和显示 HTML 内容

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.d.ts

@@ -1,10 +1,9 @@
+import { HTMLAttributes } from "react";
 /**
  * Custom HTML element properties
  * 自定义 HTML 元素属性
  */
-export type HtmlDivProps = Omit<HTMLElement, "children"> & {
-    children: React.ReactNode;
-};
+export type HtmlDivProps = HTMLAttributes<HTMLElement>;
 /**
  * Custom HTML element that sanitizes and displays HTML content
  * 自定义 HTML 元素，用于清理和显示 HTML 内容

package/package.json

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

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/global.d.ts

@@ -1,5 +1,5 @@
 declare namespace JSX {
   interface IntrinsicElements {
-    "html-div";
+    "html-div": React.HTMLAttributes<HTMLElement>;
   }
 }

package/src/html/HtmlDiv.tsx

@@ -1,4 +1,5 @@
 import DOMPurify from "dompurify";
+import { HTMLAttributes } from "react";
 
 class HtmlDivElement extends HTMLElement {
   constructor() {
@@ -29,9 +30,7 @@ if (!customElements.get("html-div")) {
  * Custom HTML element properties
  * 自定义 HTML 元素属性
  */
-export type HtmlDivProps = Omit<HTMLElement, "children"> & {
-  children: React.ReactNode;
-};
+export type HtmlDivProps = HTMLAttributes<HTMLElement>;
 
 /**
  * Custom HTML element that sanitizes and displays HTML content