pge-front-common 14.0.56 → 14.1.0

package/lib/components/Upload/index.d.ts

@@ -8,6 +8,9 @@ export declare const FileUpload: React.ForwardRefExoticComponent<{
     title?: React.ReactNode;
     descricaoLabel?: string;
     errorText?: string;
+    noSelectedFileText?: string;
+    maxFileSize?: `${number}KB` | `${number}MB` | `${number}GB`;
+    helperText?: React.ReactNode;
 } & {
     disabled?: boolean | undefined;
     form?: string | undefined;

package/lib/components/Upload/index.type.d.ts

@@ -9,6 +9,9 @@ export type UploadFileProps = {
     title?: ReactNode;
     descricaoLabel?: string;
     errorText?: string;
+    noSelectedFileText?: string;
+    maxFileSize?: `${number}KB` | `${number}MB` | `${number}GB`;
+    helperText?: ReactNode;
 } & ButtonAttrs;
 export type FileUploadHandle = {
     reset: () => void;

package/lib/index.d.ts

@@ -85,6 +85,9 @@ declare const FileUpload: React__default.ForwardRefExoticComponent<{
     title?: React__default.ReactNode;
     descricaoLabel?: string;
     errorText?: string;
+    noSelectedFileText?: string;
+    maxFileSize?: `${number}KB` | `${number}MB` | `${number}GB`;
+    helperText?: React__default.ReactNode;
 } & {
     disabled?: boolean | undefined;
     form?: string | undefined;

package/lib/index.esm.js

@@ -607,18 +607,51 @@ var css_248z$w = ".styles-module__container___9pLua {\r\n  width: 100%;\r\n  hei
 var styles$t = {"container":"styles-module__container___9pLua","label":"styles-module__label___AWyTG","labelUpload":"styles-module__labelUpload___LOAO-","inputContainer":"styles-module__inputContainer___tsCfV","button":"styles-module__button___1GicM","hiddenInput":"styles-module__hiddenInput___lDoAG","description":"styles-module__description___S1vZj","instructionText":"styles-module__instructionText___fa9r4","primary":"styles-module__primary___AtNI-","secondary":"styles-module__secondary___-anJq","danger":"styles-module__danger___RwQhk","errorText":"styles-module__errorText___1LAhk","successText":"styles-module__successText___s1G4K"};
 styleInject(css_248z$w);
 
+var parseSizeToBytes = function (size) {
+    if (!size)
+        return 0;
+    var match = size.match(/(\d+(?:\.\d+)?)\s*(KB|MB|GB)/i);
+    if (!match)
+        return 0;
+    var value = parseFloat(match[1]);
+    var unit = match[2].toUpperCase();
+    switch (unit) {
+        case "KB":
+            return value * 1024;
+        case "MB":
+            return value * 1024 * 1024;
+        case "GB":
+            return value * 1024 * 1024 * 1024;
+        default:
+            return 0;
+    }
+};
 var FileUpload = forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.variant, variant = _c === void 0 ? "primary" : _c, _d = _a.danger, danger = _d === void 0 ? false : _d, fileTypes = _a.fileTypes, onFileSelect = _a.onFileSelect, _e = _a.title, title = _e === void 0 ? React__default.createElement(React__default.Fragment, null, "Upload de Arquivos:") : _e, _f = _a.descricaoLabel, descricaoLabel = _f === void 0 ? "Escolher arquivo" : _f, className = _a.className, _g = _a.errorText, errorText = _g === void 0 ? "" : _g; __rest(_a, ["variant", "danger", "fileTypes", "onFileSelect", "title", "descricaoLabel", "className", "errorText"]);
+    var _c = _a.variant, variant = _c === void 0 ? "primary" : _c, _d = _a.danger, danger = _d === void 0 ? false : _d, fileTypes = _a.fileTypes, onFileSelect = _a.onFileSelect, _e = _a.title, title = _e === void 0 ? React__default.createElement(React__default.Fragment, null, "Upload de Arquivos:") : _e, _f = _a.descricaoLabel, descricaoLabel = _f === void 0 ? "Escolher arquivo" : _f, className = _a.className, _g = _a.errorText, errorText = _g === void 0 ? "" : _g, _h = _a.noSelectedFileText, noSelectedFileText = _h === void 0 ? "Nenhum arquivo selecionado" : _h, _j = _a.helperText, helperText = _j === void 0 ? "" : _j, _k = _a.maxFileSize, maxFileSize = _k === void 0 ? "" : _k; __rest(_a, ["variant", "danger", "fileTypes", "onFileSelect", "title", "descricaoLabel", "className", "errorText", "noSelectedFileText", "helperText", "maxFileSize"]);
     var buttonClass = clsx(styles$t.labelUpload, styles$t.button, styles$t[variant], (_b = {},
         _b[styles$t.danger] = danger && variant !== "primary",
         _b), className);
-    var _h = React__default.useState(""), fileName = _h[0], setFileName = _h[1];
+    var inputId = useId$1();
+    var helperId = useId$1();
+    var errorId = useId$1();
+    var _l = React__default.useState(""), fileName = _l[0], setFileName = _l[1];
     var fileInputRef = useRef(null);
     var handleFileChange = function (event) {
         var _a, _b;
         var selectedFile = ((_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
         if (selectedFile) {
+            if (maxFileSize) {
+                var maxBytes = parseSizeToBytes(maxFileSize);
+                if (selectedFile.size > maxBytes) {
+                    setFileName("");
+                    onFileSelect(selectedFile);
+                    if (fileInputRef.current) {
+                        fileInputRef.current.value = "";
+                    }
+                    return;
+                }
+            }
             var fileExtension = (_b = selectedFile.name.split(".").pop()) === null || _b === void 0 ? void 0 : _b.toLowerCase();
             if (fileExtension && fileTypes.includes(".".concat(fileExtension))) {
                 setFileName(selectedFile.name);
@@ -626,7 +659,7 @@ var FileUpload = forwardRef(function (_a, ref) {
             }
             else {
                 setFileName("");
-                onFileSelect(null);
+                onFileSelect(selectedFile);
                 if (fileInputRef.current) {
                     fileInputRef.current.value = "";
                 }
@@ -642,20 +675,25 @@ var FileUpload = forwardRef(function (_a, ref) {
             }
         },
     }); });
-    return (React__default.createElement("div", { className: styles$t.container },
-        React__default.createElement("label", { className: styles$t.label },
-            title,
-            React__default.createElement("div", { className: styles$t.inputContainer },
-                React__default.createElement("label", { className: buttonClass },
-                    React__default.createElement(IconUploadFile, { className: buttonClass }),
-                    descricaoLabel,
-                    React__default.createElement("input", { type: "file", ref: fileInputRef, className: styles$t.hiddenInput, onChange: handleFileChange, accept: fileTypes.join(",") })),
-                React__default.createElement("span", { className: styles$t.description }, fileName || "Nenhum arquivo selecionado"))),
-        React__default.createElement("span", { className: errorText
+    var openFileDialog = function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
+    return (React__default.createElement("div", { role: "group", "aria-labelledby": "".concat(inputId, "-label"), "aria-describedby": "".concat(helperId, " ").concat(errorText ? errorId : ""), className: styles$t.container },
+        React__default.createElement("span", { id: "".concat(inputId, "-label"), className: styles$t.label }, title),
+        React__default.createElement("div", { className: styles$t.inputContainer },
+            React__default.createElement("button", { type: "button", className: buttonClass, onClick: openFileDialog, onKeyDown: function (e) {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        openFileDialog();
+                    }
+                }, "aria-label": "".concat(typeof title === "string" ? title : descricaoLabel, ". Tipos permitidos: ").concat(fileTypes.join(", "), ". Tamanho m\u00E1ximo: ").concat(maxFileSize, ".") },
+                React__default.createElement(IconUploadFile, { "aria-hidden": "true" }),
+                descricaoLabel),
+            React__default.createElement("input", { id: inputId, type: "file", ref: fileInputRef, className: styles$t.hiddenInput, onChange: handleFileChange, accept: fileTypes.join(","), "aria-describedby": "".concat(helperId, " ").concat(errorText ? errorId : ""), "aria-invalid": !!errorText }),
+            React__default.createElement("span", { className: styles$t.description }, fileName || noSelectedFileText)),
+        React__default.createElement("span", { id: errorText ? errorId : helperId, role: "alert", "aria-live": "polite", className: errorText
                 ? styles$t.errorText
                 : fileName
                     ? styles$t.successText
-                    : styles$t.instructionText, style: { minHeight: "21px" } }, errorText || "\u00A0")));
+                    : styles$t.instructionText }, errorText || helperText)));
 });
 
 var css_248z$v = ".styles-module__container___YGeVk {\r\n  position: relative;\r\n  display: flex;\r\n}\r\n\r\n.styles-module__tooltip___mnnfp {\r\n  position: absolute;\r\n  width: max-content;\r\n  height: fit-content;\r\n  max-width: 480px;\r\n  border-radius: 8px;\r\n  word-wrap: break-word;\r\n  background: var(--background-color);\r\n  padding: 10px;\r\n  border: 1px solid #c3c3c3;\r\n  z-index: 1000;\r\n}\r\n\r\n.styles-module__textContent___F6Omr {\r\n  font-weight: 400;\r\n  font-size: var(--font-size-14, 14px);\r\n  line-height: 21px;\r\n  color: var(--foreground);\r\n}\r\n\r\n.styles-module__top-right___KAK6B {\r\n  bottom: 100%;\r\n  left: 100%;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.styles-module__bottom-right___2qH8T {\r\n  top: 100%;\r\n  left: 100%;\r\n  margin-top: 8px;\r\n}\r\n\r\n.styles-module__bottom-left___9jLIE {\r\n  top: 100%;\r\n  right: 100%;\r\n  margin-top: 8px;\r\n}\r\n\r\n.styles-module__top-left___wu3BB {\r\n  bottom: 100%;\r\n  right: 100%;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.styles-module__mobile___jimue {\r\n  bottom: 100%;\r\n  left: 100%;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__container___YGeVk {\r\n    position: static;\r\n  }\r\n\r\n  .styles-module__tooltip___mnnfp {\r\n    width: max-content;\r\n    max-width: 92vw;\r\n    left: 0;\r\n    bottom: 90%;\r\n    text-align: start;\r\n    padding: 10px;\r\n    position: absolute;\r\n    flex-wrap: wrap;\r\n    border-radius: 8px;\r\n  }\r\n\r\n  .styles-module__textContent___F6Omr {\r\n    font-size: var(--font-size-12, 12px);\r\n  }\r\n}\r\n";
@@ -21523,7 +21561,9 @@ var selectColourStyles = function (isInvalid, isMobile) { return ({
                 ? "0px 0px 0px 2px #DC354580"
                 : isFocused
                     ? "0px 0px 0px 2px #0091ea80"
-                    : "0px hsl(0, 0%, 96%)", backgroundColor: isDisabled ? "var(--input-disabled-bg-color)" : "white" }));
+                    : "0px hsl(0, 0%, 96%)", backgroundColor: isDisabled ? "var(--input-disabled-bg-color)" : "white", ":hover": {
+                backgroundColor: isDisabled ? "var(--input-disabled-bg-color)" : "#005a9214",
+            } }));
     },
     option: function (styles, _a) {
         var isDisabled = _a.isDisabled, isSelected = _a.isSelected, isFocused = _a.isFocused;