@etsoo/materialui 1.2.89 → 1.2.91

package/lib/ComboBox.js

@@ -113,7 +113,7 @@ export function ComboBox(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
+        React.createElement("input", { ref: inputRef, "data-reset": inputReset !== null && inputReset !== void 0 ? inputReset : true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
         React.createElement(Stack, { gap: 0.5, direction: "row", width: "100%" },
             React.createElement(Autocomplete, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                     // Set value

package/lib/ComboBoxMultiple.js

@@ -115,7 +115,7 @@ export function ComboBoxMultiple(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
+        React.createElement("input", { ref: inputRef, "data-reset": inputReset !== null && inputReset !== void 0 ? inputReset : true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
         React.createElement(Autocomplete, { value: stateValue == null
                 ? []
                 : Array.isArray(stateValue)

package/lib/FileUploadButton.d.ts

@@ -4,10 +4,24 @@ import React from "react";
  * File upload button props
  */
 export type FileUploadButtonProps = ButtonProps<"label"> & {
+    /**
+     * Max files allowed
+     */
+    maxFiles?: number;
+    /**
+     * Max file size
+     */
+    maxFileSize?: number;
     /**
      * Input field attributes
      */
     inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hidden">;
+    /**
+     * File invalid handler
+     * @param values [expected, actual]
+     * @param file File
+     */
+    onFileInvalid?: (values: [number, number], file?: File) => void;
     /**
      * Upload files callback
      * @param files Files

package/lib/FileUploadButton.js

@@ -7,7 +7,7 @@ import React from "react";
  */
 export function FileUploadButton(props) {
     // Destruct
-    const { inputProps, onUploadFiles, children, ...rest } = props;
+    const { maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children, ...rest } = props;
     const { onChange } = inputProps !== null && inputProps !== void 0 ? inputProps : {};
     // Layout
     return (React.createElement(Button, { component: "label", ...rest },
@@ -19,8 +19,26 @@ export function FileUploadButton(props) {
                     return;
                 if (onUploadFiles) {
                     const files = event.target.files;
-                    if (files == null || files.length == 0)
+                    if (files == null)
                         return;
+                    const fl = files.length;
+                    if (fl === 0)
+                        return;
+                    if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+                        if (onFileInvalid)
+                            onFileInvalid([maxFiles, fl]);
+                        return;
+                    }
+                    if (maxFileSize && maxFileSize > 0) {
+                        for (let f = 0; f < fl; f++) {
+                            const file = files[f];
+                            if (file.size > maxFileSize) {
+                                if (onFileInvalid)
+                                    onFileInvalid([maxFileSize, file.size], file);
+                                return;
+                            }
+                        }
+                    }
                     onUploadFiles(files);
                 }
             }, ...inputProps })));

package/lib/Tiplist.js

@@ -166,7 +166,7 @@ export function Tiplist(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: "none" }, name: name, value: `${inputValue !== null && inputValue !== void 0 ? inputValue : (state.current.idSet ? "" : localIdValue !== null && localIdValue !== void 0 ? localIdValue : "")}`, readOnly: true, onChange: inputOnChange }),
+        React.createElement("input", { ref: inputRef, "data-reset": inputReset !== null && inputReset !== void 0 ? inputReset : true, type: "text", style: { display: "none" }, name: name, value: `${inputValue !== null && inputValue !== void 0 ? inputValue : (state.current.idSet ? "" : localIdValue !== null && localIdValue !== void 0 ? localIdValue : "")}`, readOnly: true, onChange: inputOnChange }),
         React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                 // Set value
                 setInputValue(value);

package/lib/TiplistPro.d.ts

@@ -38,6 +38,10 @@ export type TiplistProProps<T extends ListType2 = ListType2> = Omit<Autocomplete
      * Input props
      */
     inputProps?: Omit<InputFieldProps, "onChange">;
+    /**
+     * Set 'data-reset'
+     */
+    inputReset?: boolean;
     /**
      * Value change handler
      * @param value New value

package/lib/TiplistPro.js

@@ -13,7 +13,7 @@ export function TiplistPro(props) {
     // Labels
     const { noOptions, loading, more, open: openDefault } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more", "open")) !== null && _a !== void 0 ? _a : {};
     // Destruct
-    const { label, loadData, defaultValue, value, idValue, maxItems = 16, width, name, inputOnChange, inputProps, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, ...rest } = props;
+    const { label, loadData, defaultValue, value, idValue, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -150,7 +150,7 @@ export function TiplistPro(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: "none" }, name: name, value: inputValue !== null && inputValue !== void 0 ? inputValue : (state.current.idSet ? "" : localIdValue !== null && localIdValue !== void 0 ? localIdValue : ""), readOnly: true, onChange: inputOnChange }),
+        React.createElement("input", { ref: inputRef, "data-reset": inputReset !== null && inputReset !== void 0 ? inputReset : true, type: "text", style: { display: "none" }, name: name, value: inputValue !== null && inputValue !== void 0 ? inputValue : (state.current.idSet ? "" : localIdValue !== null && localIdValue !== void 0 ? localIdValue : ""), readOnly: true, onChange: inputOnChange }),
         React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
                 if (typeof value === "object") {
                     // Set value
@@ -185,7 +185,7 @@ export function TiplistPro(props) {
             }, loading: states.loading, renderInput: (params) => (React.createElement(InputField, { ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
                     if (states.value == null && onChange)
                         onChange(event, event.target.value, "blur", undefined);
-                } })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
+                }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
                 if (item.id === -1)
                     return true;
                 return getOptionDisabled ? getOptionDisabled(item) : false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.89",
+  "version": "1.2.91",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,10 +53,10 @@
     "@etsoo/appscript": "^1.4.32",
     "@etsoo/notificationbase": "^1.1.26",
     "@etsoo/react": "^1.7.3",
-    "@etsoo/shared": "^1.2.8",
-    "@mui/icons-material": "^5.14.6",
-    "@mui/material": "^5.14.6",
-    "@mui/x-data-grid": "^6.11.2",
+    "@etsoo/shared": "^1.2.9",
+    "@mui/icons-material": "^5.14.7",
+    "@mui/material": "^5.14.7",
+    "@mui/x-data-grid": "^6.12.0",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.2.21",
@@ -85,8 +85,8 @@
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.4",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
     "jest": "^29.6.4",
     "jest-environment-jsdom": "^29.6.4",
     "typescript": "^5.2.2"

package/src/ComboBox.tsx

@@ -234,7 +234,7 @@ export function ComboBox<
     <div>
       <input
         ref={inputRef}
-        data-reset="true"
+        data-reset={inputReset ?? true}
         type="text"
         style={{ display: "none" }}
         name={name}

package/src/ComboBoxMultiple.tsx

@@ -242,7 +242,7 @@ export function ComboBoxMultiple<
     <div>
       <input
         ref={inputRef}
-        data-reset="true"
+        data-reset={inputReset ?? true}
         type="text"
         style={{ display: "none" }}
         name={name}

package/src/FileUploadButton.tsx

@@ -5,6 +5,16 @@ import React from "react";
  * File upload button props
  */
 export type FileUploadButtonProps = ButtonProps<"label"> & {
+  /**
+   * Max files allowed
+   */
+  maxFiles?: number;
+
+  /**
+   * Max file size
+   */
+  maxFileSize?: number;
+
   /**
    * Input field attributes
    */
@@ -13,6 +23,13 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
     "type" | "hidden"
   >;
 
+  /**
+   * File invalid handler
+   * @param values [expected, actual]
+   * @param file File
+   */
+  onFileInvalid?: (values: [number, number], file?: File) => void;
+
   /**
    * Upload files callback
    * @param files Files
@@ -27,7 +44,15 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
  */
 export function FileUploadButton(props: FileUploadButtonProps) {
   // Destruct
-  const { inputProps, onUploadFiles, children, ...rest } = props;
+  const {
+    maxFiles,
+    maxFileSize,
+    inputProps,
+    onFileInvalid,
+    onUploadFiles,
+    children,
+    ...rest
+  } = props;
 
   const { onChange } = inputProps ?? {};
 
@@ -44,7 +69,27 @@ export function FileUploadButton(props: FileUploadButtonProps) {
 
           if (onUploadFiles) {
             const files = event.target.files;
-            if (files == null || files.length == 0) return;
+            if (files == null) return;
+
+            const fl = files.length;
+            if (fl === 0) return;
+
+            if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+              if (onFileInvalid) onFileInvalid([maxFiles, fl]);
+              return;
+            }
+
+            if (maxFileSize && maxFileSize > 0) {
+              for (let f = 0; f < fl; f++) {
+                const file = files[f];
+                if (file.size > maxFileSize) {
+                  if (onFileInvalid)
+                    onFileInvalid([maxFileSize, file.size], file);
+                  return;
+                }
+              }
+            }
+
             onUploadFiles(files);
           }
         }}

package/src/Tiplist.tsx

@@ -275,7 +275,7 @@ export function Tiplist<
     <div>
       <input
         ref={inputRef}
-        data-reset="true"
+        data-reset={inputReset ?? true}
         type="text"
         style={{ display: "none" }}
         name={name}

package/src/TiplistPro.tsx

@@ -56,6 +56,11 @@ export type TiplistProProps<T extends ListType2 = ListType2> = Omit<
    */
   inputProps?: Omit<InputFieldProps, "onChange">;
 
+  /**
+   * Set 'data-reset'
+   */
+  inputReset?: boolean;
+
   /**
    * Value change handler
    * @param value New value
@@ -99,6 +104,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
     name,
     inputOnChange,
     inputProps,
+    inputReset,
     sx,
     openOnFocus = true,
     noOptionsText = noOptions,
@@ -278,7 +284,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
     <div>
       <input
         ref={inputRef}
-        data-reset="true"
+        data-reset={inputReset ?? true}
         type="text"
         style={{ display: "none" }}
         name={name}
@@ -348,6 +354,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
               if (states.value == null && onChange)
                 onChange(event, event.target.value, "blur", undefined);
             }}
+            data-reset={inputReset}
           />
         )}
         isOptionEqualToValue={(option, value) => option.id === value.id}