pge-front-common 14.1.3 → 14.1.5

package/lib/index.js

@@ -923,8 +923,8 @@ var DropDown = function (_a) {
     })));
 };
 
-var css_248z$q = ".menu-module__iconMenu___hsJkY {\r\n  width: 48px;\r\n  height: 49px;\r\n  color: var(--header-menu-icon-color);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .menu-module__iconMenu___hsJkY {\r\n    width: 31px;\r\n    height: 49px;\r\n  }\r\n}\r\n";
-var styles$n = {"iconMenu":"menu-module__iconMenu___hsJkY"};
+var css_248z$q = ".menu-module__iconMenu___hsJkY {\r\n  width: 48px;\r\n  height: 49px;\r\n  color: var(--header-menu-icon-color);\r\n}\r\n\r\n.menu-module__menuButton___BV-Rs {\r\n  background: none;\r\n  border: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  cursor: pointer;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .menu-module__iconMenu___hsJkY {\r\n    width: 31px;\r\n    height: 49px;\r\n  }\r\n}\r\n";
+var styles$n = {"iconMenu":"menu-module__iconMenu___hsJkY","menuButton":"menu-module__menuButton___BV-Rs"};
 styleInject(css_248z$q);
 
 var Menu$2 = function (_a) {
@@ -952,7 +952,7 @@ var Menu$2 = function (_a) {
             document.removeEventListener("click", handleClickOutside);
         };
     }, [showDropDown]);
-    return (React.createElement("button", { ref: buttonRef, style: { all: "unset", cursor: "pointer" }, className: showDropDown ? "active" : undefined, onClick: toggleDropDown, "aria-expanded": showDropDown, "aria-label": "Abrir menu" },
+    return (React.createElement("button", { ref: buttonRef, className: "".concat(styles$n.menuButton, " ").concat(showDropDown ? styles$n.active : ""), onClick: toggleDropDown, "aria-expanded": showDropDown, "aria-label": "Abrir menu" },
         React.createElement(MenuIcon, { className: styles$n.iconMenu }),
         showDropDown && (React.createElement(DropDown, { options: options, showDropDown: showDropDown, toggleDropDown: toggleDropDown, optionSelection: handleSelectOption }))));
 };
@@ -8670,11 +8670,19 @@ var selectColourStyles$1 = function (isInvalid, isDarkMode, isMobile) { return (
     option: function (styles, _a) {
         var isDisabled = _a.isDisabled, isFocused = _a.isFocused;
         return (__assign(__assign({}, styles), { cursor: isDisabled ? "not-allowed" : "default", color: isDisabled ? "white" : isDarkMode ? "#fff" : "#303030CC", backgroundColor: isDarkMode
-                ? isFocused ? "#303030" : "#4B4B4C"
-                : isFocused ? "#005A921A" : "#fff", fontSize: "inherit", ":hover": {
+                ? isFocused
+                    ? "#303030"
+                    : "#4B4B4C"
+                : isFocused
+                    ? "#005A921A"
+                    : "#fff", fontSize: "inherit", ":hover": {
                 backgroundColor: isDarkMode
-                    ? isFocused ? "#303030" : "#4B4B4C"
-                    : isFocused ? "#005A921A" : "#fff",
+                    ? isFocused
+                        ? "#303030"
+                        : "#4B4B4C"
+                    : isFocused
+                        ? "#005A921A"
+                        : "#fff",
             } }));
     },
     multiValue: function (styles) { return (__assign(__assign({}, styles), { backgroundColor: "#005a921a", borderRadius: "9px" })); },
@@ -8703,9 +8711,26 @@ var BasicSelect = function (_a) {
             label,
             isRequired ? React__namespace.createElement("span", { className: styles$f.errorRequired }, "*") : null)),
         React__namespace.createElement("div", { className: styles$f.selectElement },
-            React__namespace.createElement(StateManagedSelect$1, { inputId: name, isMulti: false, isDisabled: isDisabled, options: optionsSelect, value: optionsSelect.find(function (opt) { return opt.value === value; }) || value, onChange: handleChange, placeholder: placeholder, styles: selectColourStyles$1(hasError, isDarkMode), isClearable: true, isSearchable: true, noOptionsMessage: function () { return "Nenhuma opção disponível"; }, components: { DropdownIndicator: CustomDropdownIndicator }, "aria-label": typeof label === 'string' ? label : (placeholder || "Campo para seleção") })),
+            React__namespace.createElement(StateManagedSelect$1, { inputId: name, isMulti: false, isDisabled: isDisabled, options: optionsSelect, value: optionsSelect.find(function (opt) { return opt.value === value; }) || value, onChange: handleChange, placeholder: placeholder, styles: selectColourStyles$1(hasError, isDarkMode), isSearchable: true, isClearable: true, noOptionsMessage: function () { return "Nenhuma opção disponível"; }, components: {
+                    DropdownIndicator: CustomDropdownIndicator,
+                    ClearIndicator: CustomClearIndicator,
+                }, "aria-label": typeof label === "string"
+                    ? label
+                    : placeholder || "Campo para seleção" })),
         hasError && (React__namespace.createElement("span", { className: styles$f.errorText }, "Campo obrigat\u00F3rio ou inv\u00E1lido"))));
 };
+var CustomClearIndicator = function (props) {
+    var _a = props.innerProps, onClick = _a.onClick, onMouseDown = _a.onMouseDown, onTouchEnd = _a.onTouchEnd, restInner = __rest(_a, ["onClick", "onMouseDown", "onTouchEnd"]), clearValue = props.clearValue, innerProps = props.innerProps;
+    var handleKeyDown = function (e) {
+        var _a;
+        if (e.key === "Enter") {
+            e.preventDefault();
+            clearValue();
+        }
+        (_a = innerProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(innerProps, e);
+    };
+    return (React__namespace.createElement(components.ClearIndicator, __assign({}, props, { innerProps: __assign(__assign({}, restInner), { onClick: onClick, onMouseDown: onMouseDown, onTouchEnd: onTouchEnd, tabIndex: 0, role: "button", "aria-label": "Limpar opção selecionada", onKeyDown: handleKeyDown }) })));
+};
 
 var css_248z$e = ".header-module__separator_background___Sicie {\r\n  background-color: rgb(188, 157, 50);\r\n  width: 100%;\r\n  height: 4px;\r\n  opacity: 1;\r\n}\r\n\r\n.header-module__headerContentWrapper___3CWPS {\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  width: 100%;\r\n  max-width: 1440px;\r\n  padding: 0px 72px;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .header-module__headerContentWrapper___3CWPS {\r\n    padding: 0px 4px;\r\n  }\r\n}\r\n\r\n.header-module__container___pv1f6 {\r\n  height: 100%;\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 28px 0px;\r\n  min-width: 1024px;\r\n\r\n  @media (max-width: 1024px) {\r\n    padding: 22px 16px;\r\n    min-width: 100%;\r\n  }\r\n}\r\n\r\n.header-module__wrapperMenu___qgf2- {\r\n  display: flex;\r\n  gap: 24px;\r\n  align-items: center;\r\n\r\n  @media (max-width: 1024px) {\r\n    gap: 8px;\r\n  }\r\n}\r\n\r\n.header-module__iconLogo___Sr8Ih {\r\n  @media (max-width: 1024px) {\r\n    width: 100px;\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .header-module__iconLogo___Sr8Ih {\r\n    width: 64px;\r\n    height: 25px;\r\n  }\r\n}\r\n\r\n.header-module__verticalDivider___j6I1p {\r\n  content: \"\";\r\n  display: inline-block;\r\n  height: 50px;\r\n  width: 1px;\r\n  background-color: #ccc;\r\n  margin: 0px 0px 0px 0px;\r\n}\r\n\r\n.header-module__containerHeaderIndex___6ddUY {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  max-height: 6rem;\r\n  font-size: 2rem;\r\n  box-shadow: 0px 15px 10px -15px rgba(0, 0, 0, 0.19);\r\n  background-color: var(--header-bg-main-color);\r\n}\r\n\r\n.header-module__set_shadow___Wwh0E {\r\n  border-radius: 0px 0px 16px 16px;\r\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);\r\n}\r\n\r\n.header-module__limitedWidth___PhM7B {\r\n  max-width: 1440px;\r\n  margin: 0 auto;\r\n}\r\n\r\n@media (min-width: 640px) {\r\n  .header-module__containerHeaderIndex___6ddUY {\r\n    max-height: 6rem;\r\n  }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n  .header-module__containerHeaderIndex___6ddUY {\r\n    max-height: 13rem;\r\n  }\r\n}\r\n\r\n.header-module__iconLogoCASC___HX7YL {\r\n  height: 65px;\r\n  width: auto;\r\n}\r\n\r\n.header-module__iconLogoPGE___II1i2 {\r\n  margin-right: 20px;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .header-module__iconLogoCASC___HX7YL {\r\n    height: 45px;\r\n    width: auto;\r\n  }\r\n}\r\n\r\n.header-module__responsiveCASC___nqE60 {\r\n  @media (max-width: 1024px) {\r\n    .header-module__iconLogoCASC___HX7YL {\r\n      height: 45px;\r\n      width: auto;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .header-module__iconLogoCASC___HX7YL {\r\n      height: 40px;\r\n      width: auto;\r\n    }\r\n  }\r\n}\r\n\r\n.header-module__dividaAtivaLogoContainer___k6PDu {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: 4px;\r\n}\r\n\r\n.header-module__IconMenu___guscJ {\r\n  display: flex;\r\n  max-height: 48px;\r\n}\r\n";
 var styles$e = {"separator_background":"header-module__separator_background___Sicie","headerContentWrapper":"header-module__headerContentWrapper___3CWPS","container":"header-module__container___pv1f6","wrapperMenu":"header-module__wrapperMenu___qgf2-","iconLogo":"header-module__iconLogo___Sr8Ih","verticalDivider":"header-module__verticalDivider___j6I1p","containerHeaderIndex":"header-module__containerHeaderIndex___6ddUY","set_shadow":"header-module__set_shadow___Wwh0E","limitedWidth":"header-module__limitedWidth___PhM7B","iconLogoCASC":"header-module__iconLogoCASC___HX7YL","iconLogoPGE":"header-module__iconLogoPGE___II1i2","responsiveCASC":"header-module__responsiveCASC___nqE60","dividaAtivaLogoContainer":"header-module__dividaAtivaLogoContainer___k6PDu","IconMenu":"header-module__IconMenu___guscJ"};
@@ -23778,26 +23803,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 = React.useState(isOpen), isVisible = _c[0], setIsVisible = _c[1];
+    var contentRef = React.useRef(null);
+    var openerRef = React.useRef(null);
     React.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.createElement("div", { className: "".concat(style.modalOverlay), onClick: handleClose },
-        React.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.createElement("div", { className: style.modalOverlay, onClick: onClose, role: "presentation" },
+        React.createElement("div", { tabIndex: 0, onFocus: moveToLast, "aria-hidden": "true" }),
+        React.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.createElement("div", { tabIndex: 0, onFocus: moveToFirst, "aria-hidden": "true" })));
+}
 
 var ModalFooter = function (_a) {
     var children = _a.children, className = _a.className;
@@ -23808,7 +23846,10 @@ var ModalHeader = function (_a) {
     var children = _a.children, onClose = _a.onClose, className = _a.className;
     return (React.createElement("header", { className: "".concat(style.modalHeader, " ").concat(className || "") },
         React.createElement("div", { className: style.modalHeaderContent }, children),
-        React.createElement(IconCLose, { className: style.closeButton, onClick: onClose })));
+        React.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) {