pge-front-common 14.1.2 → 14.1.4

package/lib/components/modal/Modal.d.ts

@@ -1,4 +1,3 @@
 import React from "react";
 import { ModalProps } from "./index.type";
-declare const Modal: ({ isOpen, onClose, children, className }: ModalProps) => React.JSX.Element | null;
-export default Modal;
+export default function Modal({ isOpen, onClose, children, className, }: ModalProps): React.JSX.Element | null;

package/lib/index.d.ts

@@ -717,7 +717,7 @@ type ModalFooterProps = HTMLAttributes<HTMLDivElement> & {
     className?: string;
 };
 
-declare const Modal: ({ isOpen, onClose, children, className }: ModalProps) => React__default.JSX.Element | null;
+declare function Modal({ isOpen, onClose, children, className, }: ModalProps): React__default.JSX.Element | null;
 
 declare const ModalFooter: ({ children, className }: ModalFooterProps) => React__default.JSX.Element;
 

package/lib/index.esm.js

@@ -105,14 +105,14 @@ styleInject(css_248z$B);
 
 var InputBase = function (_a) {
     var _b;
-    var customClass = _a.customClass, restrictionMessage = _a.restrictionMessage, label = _a.label, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onRightIconClick = _a.onRightIconClick, style = _a.style, required = _a.required; _a.error; _a.helperText; var disabled = _a.disabled; _a.readOnly; _a.className; var showCounter = _a.showCounter, value = _a.value, props = __rest(_a, ["customClass", "restrictionMessage", "label", "leftIcon", "rightIcon", "onRightIconClick", "style", "required", "error", "helperText", "disabled", "readOnly", "className", "showCounter", "value"]);
+    var customClass = _a.customClass, restrictionMessage = _a.restrictionMessage, label = _a.label, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onRightIconClick = _a.onRightIconClick, style = _a.style, required = _a.required, error = _a.error; _a.helperText; var disabled = _a.disabled; _a.readOnly; _a.className; var showCounter = _a.showCounter, value = _a.value, props = __rest(_a, ["customClass", "restrictionMessage", "label", "leftIcon", "rightIcon", "onRightIconClick", "style", "required", "error", "helperText", "disabled", "readOnly", "className", "showCounter", "value"]);
     var characterCount = (value === null || value === void 0 ? void 0 : value.toString().length) || 0;
     return (React__default.createElement("div", { className: styles$y.inputContainer },
         label && (React__default.createElement("label", { tabIndex: disabled ? -1 : 0, htmlFor: props.name, className: "".concat(styles$y.labelInput, " ").concat(required ? styles$y.labelRequired : "") }, label)),
         React__default.createElement("div", { className: styles$y.inputContent },
             leftIcon && React__default.createElement("div", { className: styles$y.iconWrapperLeft }, leftIcon),
             React__default.createElement("input", __assign({ className: clsx(styles$y.textInput, customClass, (_b = {},
-                    _b[styles$y.textInputDanger] = restrictionMessage,
+                    _b[styles$y.textInputDanger] = restrictionMessage || error,
                     _b)), style: __assign({ paddingLeft: leftIcon ? "36px" : "8px", paddingRight: rightIcon ? "36px" : "8px" }, style), id: props.name, value: value }, props, { disabled: disabled })),
             rightIcon && (React__default.createElement("button", { tabIndex: -1, type: "button", className: styles$y.iconWrapperRight, onClick: function () { return onRightIconClick === null || onRightIconClick === void 0 ? void 0 : onRightIconClick(); }, "aria-label": "A\u00E7\u00E3o ao clicar no \u00EDcone ao lado direito" }, rightIcon))),
         (restrictionMessage || showCounter) && (React__default.createElement("div", { className: styles$y.messageContainer },
@@ -23758,26 +23758,39 @@ var css_248z$6 = "@keyframes styles-module__fadeIn___09YGY {\r\n  from {\r\n
 var style = {"modalOverlay":"styles-module__modalOverlay___zIq-T","fadeIn":"styles-module__fadeIn___09YGY","modal":"styles-module__modal___4vuMK","modalHeader":"styles-module__modalHeader___P-TK7","modalHeaderContent":"styles-module__modalHeaderContent___i6CzG","closeButton":"styles-module__closeButton___F4c5B","modalBody":"styles-module__modalBody___jzSq1","modalFooter":"styles-module__modalFooter___keSWl"};
 styleInject(css_248z$6);
 
-var Modal = function (_a) {
+var ELEMENTOS_COM_FOCO = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex="0"]';
+function Modal(_a) {
     var isOpen = _a.isOpen, onClose = _a.onClose, children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
-    var _c = useState(isOpen), isVisible = _c[0], setIsVisible = _c[1];
+    var contentRef = useRef(null);
+    var openerRef = useRef(null);
     useEffect(function () {
+        var _a, _b;
         if (isOpen) {
-            setIsVisible(true);
+            openerRef.current = document.activeElement;
+            (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_b = openerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [isOpen]);
-    if (!isOpen) {
+    if (!isOpen)
         return null;
-    }
-    var handleClose = function () {
-        setIsVisible(false);
-        onClose();
+    var moveToFirst = function () {
+        var els = contentRef.current.querySelectorAll(ELEMENTOS_COM_FOCO);
+        els.length && els[0].focus();
     };
-    if (!isVisible && !isOpen)
-        return null;
-    return (React__default.createElement("div", { className: "".concat(style.modalOverlay), onClick: handleClose },
-        React__default.createElement("div", { className: "".concat(style.modal, " ").concat(className || ""), onClick: function (e) { return e.stopPropagation(); } }, children)));
-};
+    var moveToLast = function () {
+        var els = contentRef.current.querySelectorAll(ELEMENTOS_COM_FOCO);
+        els.length && els[els.length - 1].focus();
+    };
+    return (React__default.createElement("div", { className: style.modalOverlay, onClick: onClose, role: "presentation" },
+        React__default.createElement("div", { tabIndex: 0, onFocus: moveToLast, "aria-hidden": "true" }),
+        React__default.createElement("div", { ref: contentRef, className: "".concat(style.modal, " ").concat(className), role: "dialog", "aria-modal": "true", tabIndex: -1, onClick: function (e) { return e.stopPropagation(); }, onKeyDown: function (e) {
+                if (e.key === "Escape")
+                    onClose();
+            } }, children),
+        React__default.createElement("div", { tabIndex: 0, onFocus: moveToFirst, "aria-hidden": "true" })));
+}
 
 var ModalFooter = function (_a) {
     var children = _a.children, className = _a.className;
@@ -23788,7 +23801,10 @@ var ModalHeader = function (_a) {
     var children = _a.children, onClose = _a.onClose, className = _a.className;
     return (React__default.createElement("header", { className: "".concat(style.modalHeader, " ").concat(className || "") },
         React__default.createElement("div", { className: style.modalHeaderContent }, children),
-        React__default.createElement(IconCLose, { className: style.closeButton, onClick: onClose })));
+        React__default.createElement(IconCLose, { role: "button", tabIndex: 0, className: style.closeButton, onClick: onClose, "aria-label": "Fechar modal", onKeyDown: function (e) {
+                if (e.key === "Enter" || e.key === " ")
+                    onClose();
+            } })));
 };
 
 var ModalBody = function (_a) {