pge-front-common 14.2.12 → 14.2.13

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

@@ -1,6 +1,4 @@
 import React from "react";
-interface Props {
-    itens: React.ReactNode[];
-}
-declare const MenuAction: ({ itens }: Props) => React.JSX.Element;
+import { MenuActionProps } from "./index.types";
+export declare const MenuAction: ({ itens }: MenuActionProps) => React.JSX.Element;
 export default MenuAction;

package/lib/components/MenuAction/index.types.d.ts

@@ -0,0 +1,3 @@
+export interface MenuActionProps {
+    itens: React.ReactNode[];
+}

package/lib/components/MenuAction/menuaction.stories.d.ts

@@ -4,3 +4,5 @@ declare const meta: Meta<typeof MenuAction>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const ManyItems: Story;
+export declare const Empty: Story;

package/lib/icons/accordion-chevron-icon.d.ts

@@ -0,0 +1,6 @@
+import React, { SVGProps } from "react";
+export interface IconAccordionChevronProps extends SVGProps<SVGSVGElement> {
+    containerClassName?: string;
+    arrowClassName?: string;
+}
+export declare const IconAccordionChevron: ({ className, containerClassName, arrowClassName, ...props }: IconAccordionChevronProps) => React.JSX.Element;

package/lib/index.d.ts

@@ -521,19 +521,19 @@ type BoxSuccessProps = {
 };
 declare const BoxSuccess: ({ message, handleClose }: BoxSuccessProps) => React__default.JSX.Element;
 
-interface Props$3 {
+interface Props$2 {
     isOpen: boolean;
     text?: string;
 }
-declare function LoadingSpinner(props: Readonly<Props$3>): React$1.JSX.Element;
+declare function LoadingSpinner(props: Readonly<Props$2>): React$1.JSX.Element;
 
-interface Props$2 {
+interface Props$1 {
     currentPage: number;
     countPage: number;
     itemsVisiblePage?: number;
     handleClickPage?: (page: any) => void;
 }
-declare const PaginationTable: ({ currentPage, countPage, itemsVisiblePage, handleClickPage, }: Omit<Props$2, "header" | "body" | "footer">) => React__default.JSX.Element;
+declare const PaginationTable: ({ currentPage, countPage, itemsVisiblePage, handleClickPage, }: Omit<Props$1, "header" | "body" | "footer">) => React__default.JSX.Element;
 
 interface PaginationProps {
     countPage: number;
@@ -604,12 +604,12 @@ type OptionsProps$1 = {
 
 declare const BasicSelect: ({ name, optionsSelect, placeholder, isDisabled, label, hasError, handleChange, isRequired, value, isClearable, }: SelectDefaultProps$1) => React$1.JSX.Element;
 
-interface Props$1 {
+interface Props {
     isOpen: boolean;
     text?: string;
     mini?: boolean;
 }
-declare function OverlayLoadingSpinner({ isOpen, text, mini, }: Readonly<Props$1>): React$1.JSX.Element;
+declare function OverlayLoadingSpinner({ isOpen, text, mini, }: Readonly<Props>): React$1.JSX.Element;
 
 declare const Option: (props: any) => JSX.Element;
 declare const MenuList: (props: any) => JSX.Element;
@@ -787,10 +787,11 @@ declare const ModalHeader: ({ children, onClose, className }: ModalHeaderProps)
 
 declare const ModalBody: ({ children, className }: ModalBodyProps) => React__default.JSX.Element;
 
-interface Props {
-    itens: React__default.ReactNode[];
+interface MenuActionProps {
+    itens: React.ReactNode[];
 }
-declare const MenuAction: ({ itens }: Props) => React__default.JSX.Element;
+
+declare const MenuAction: ({ itens }: MenuActionProps) => React__default.JSX.Element;
 
 interface SkeletonProps {
     className?: string;

package/lib/index.esm.js

@@ -1187,10 +1187,17 @@ function FooterPge(_a) {
             React__default.createElement("span", { className: styles$q.copyrightText }, "2025 \u00A9 Copyright - Todos os direitos reservados."))));
 }
 
-var css_248z$t = ".styles-module__accordion___BdbSg {\r\n  border-radius: 15px;\r\n  width: 100%;\r\n}\r\n\r\n.styles-module__accordionItem___AcHG1 {\r\n  background-color: var(--background-color);\r\n  border-radius: 15px;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.styles-module__header___0zXFp {\r\n  border-radius: 15px;\r\n  margin: 0;\r\n}\r\n\r\n.styles-module__accordionButton___5W70F {\r\n  width: 100%;\r\n  background-color: var(--background-color);\r\n  box-shadow: none;\r\n  border: 1px solid var(--light-grey-color);\r\n  font-size: var(--font-size-20);\r\n  font-weight: var(--input-font-weight);\r\n  line-height: 30px;\r\n  text-align: left;\r\n  color: var(--primary-color);\r\n  padding: 12px 16px;\r\n  position: relative;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.styles-module__collapsed___7DjAi {\r\n  border-radius: 15px;\r\n}\r\n\r\n.styles-module__accordionButton___5W70F:focus {\r\n  border: 2px solid var(--color-weaker-blue);\r\n  outline: none;\r\n  box-shadow: none;\r\n}\r\n\r\n.styles-module__accordionButton___5W70F.styles-module__collapsed___7DjAi:focus {\r\n  border-radius: 15px;\r\n}\r\n\r\n.styles-module__accordionButton___5W70F:not(.styles-module__collapsed___7DjAi):focus {\r\n  border: 1px solid var();\r\n  outline: none;\r\n  box-shadow: none;\r\n  border-top-left-radius: 15px;\r\n  border-top-right-radius: 15px;\r\n}\r\n\r\n.styles-module__accordionIcon___s2ytc {\r\n  display: inline-block;\r\n  width: 24px;\r\n  height: 24px;\r\n  background-image: url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"24\" rx=\"12\" fill=\"%23005A92\" fill-opacity=\"0.2\"/><path d=\"M12.5 17L6 10.5135L7.51667 9L12.5 13.973L17.4833 9L19 10.5135L12.5 17Z\" fill=\"white\"/></svg>');\r\n  transition: transform 0.3s ease-in-out;\r\n  transform: rotate(180deg);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.styles-module__collapsed___7DjAi .styles-module__accordionIcon___s2ytc {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n.styles-module__accordionCollapse___g1CA6 {\r\n  max-height: 0;\r\n  overflow: hidden;\r\n  transition: max-height 0.2s ease-out;\r\n}\r\n\r\n.styles-module__accordionCollapse___g1CA6.styles-module__show___xeyUH {\r\n  max-height: fit-content;\r\n}\r\n\r\n.styles-module__accordionBody___goPRU {\r\n  background-color: var(--background-color);\r\n  border: 1px solid var(--light-grey-color);\r\n  border-top: none;\r\n  border-bottom-left-radius: 15px;\r\n  border-bottom-right-radius: 15px;\r\n  padding: 16px;\r\n}\r\n";
-var styles$p = {"accordion":"styles-module__accordion___BdbSg","accordionItem":"styles-module__accordionItem___AcHG1","header":"styles-module__header___0zXFp","accordionButton":"styles-module__accordionButton___5W70F","collapsed":"styles-module__collapsed___7DjAi","accordionIcon":"styles-module__accordionIcon___s2ytc","accordionCollapse":"styles-module__accordionCollapse___g1CA6","show":"styles-module__show___xeyUH","accordionBody":"styles-module__accordionBody___goPRU"};
+var css_248z$t = ".styles-module__accordion___BdbSg {\r\n  border-radius: 15px;\r\n  width: 100%;\r\n}\r\n\r\n.styles-module__accordionItem___AcHG1 {\r\n  background-color: var(--background-color);\r\n  border-radius: 15px;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.styles-module__header___0zXFp {\r\n  border-radius: 15px;\r\n  margin: 0;\r\n}\r\n\r\n.styles-module__accordionButton___5W70F {\r\n  width: 100%;\r\n  background-color: var(--background-color);\r\n  box-shadow: none;\r\n  border: 1px solid var(--light-grey-color);\r\n  font-size: var(--font-size-20);\r\n  font-weight: var(--input-font-weight);\r\n  line-height: 30px;\r\n  text-align: left;\r\n  color: var(--primary-color);\r\n  padding: 12px 16px;\r\n  position: relative;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.styles-module__collapsed___7DjAi {\r\n  border-radius: 15px;\r\n}\r\n\r\n.styles-module__accordionButton___5W70F:focus {\r\n  border: 2px solid var(--color-weaker-blue);\r\n  outline: none;\r\n  box-shadow: none;\r\n}\r\n\r\n.styles-module__accordionButton___5W70F.styles-module__collapsed___7DjAi:focus {\r\n  border-radius: 15px;\r\n}\r\n\r\n.styles-module__accordionButton___5W70F:not(.styles-module__collapsed___7DjAi):focus {\r\n  border: 1px solid var(--light-grey-color);\r\n  outline: none;\r\n  box-shadow: none;\r\n  border-top-left-radius: 15px;\r\n  border-top-right-radius: 15px;\r\n}\r\n\r\n.styles-module__accordionIcon___s2ytc {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 24px;\r\n  height: 24px;\r\n  transition: transform 0.3s ease-in-out;\r\n  transform: rotate(180deg);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.styles-module__accordionIconContainer___FUceu {\r\n  fill: #005a924d;\r\n  transition: fill 0.2s ease;\r\n}\r\n\r\n.styles-module__accordionButton___5W70F:hover .styles-module__accordionIconContainer___FUceu {\r\n  fill: #00436d80;\r\n}\r\n\r\n.styles-module__accordionButton___5W70F:focus .styles-module__accordionIconContainer___FUceu {\r\n  fill: #00436d80;\r\n}\r\n\r\n.styles-module__accordionIconArrow___PEwuM {\r\n  fill: #ffffff;\r\n}\r\n\r\n.styles-module__dark-mode___XMLvW .styles-module__accordionIconContainer___FUceu {\r\n  fill: #ffffff;\r\n}\r\n\r\n.styles-module__dark-mode___XMLvW .styles-module__accordionIconArrow___PEwuM {\r\n  fill: #4a4a4a;\r\n}\r\n\r\n.styles-module__collapsed___7DjAi .styles-module__accordionIcon___s2ytc {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n.styles-module__accordionCollapse___g1CA6 {\r\n  max-height: 0;\r\n  overflow: hidden;\r\n  transition: max-height 0.2s ease-out;\r\n}\r\n\r\n.styles-module__accordionCollapse___g1CA6.styles-module__show___xeyUH {\r\n  max-height: fit-content;\r\n}\r\n\r\n.styles-module__accordionBody___goPRU {\r\n  background-color: var(--background-color);\r\n  border: 1px solid var(--light-grey-color);\r\n  border-top: none;\r\n  border-bottom-left-radius: 15px;\r\n  border-bottom-right-radius: 15px;\r\n  padding: 16px;\r\n}\r\n";
+var styles$p = {"accordion":"styles-module__accordion___BdbSg","accordionItem":"styles-module__accordionItem___AcHG1","header":"styles-module__header___0zXFp","accordionButton":"styles-module__accordionButton___5W70F","collapsed":"styles-module__collapsed___7DjAi","accordionIcon":"styles-module__accordionIcon___s2ytc","accordionIconContainer":"styles-module__accordionIconContainer___FUceu","accordionIconArrow":"styles-module__accordionIconArrow___PEwuM","accordionCollapse":"styles-module__accordionCollapse___g1CA6","show":"styles-module__show___xeyUH","accordionBody":"styles-module__accordionBody___goPRU"};
 styleInject(css_248z$t);
 
+var IconAccordionChevron = function (_a) {
+    var className = _a.className, containerClassName = _a.containerClassName, arrowClassName = _a.arrowClassName, props = __rest(_a, ["className", "containerClassName", "arrowClassName"]);
+    return (React__default.createElement("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, props),
+        React__default.createElement("rect", { width: "24", height: "24", rx: "12", className: containerClassName }),
+        React__default.createElement("path", { d: "M12.5 17L6 10.5135L7.51667 9L12.5 13.973L17.4833 9L19 10.5135L12.5 17Z", className: arrowClassName })));
+};
+
 function AccordionItem(_a) {
     var title = _a.title, content = _a.content, providedId = _a.id, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b;
     var generatedId = useId$1();
@@ -1203,7 +1210,8 @@ function AccordionItem(_a) {
         React__default.createElement("h2", { className: styles$p.header },
             React__default.createElement("button", { className: "".concat(styles$p.accordionButton, " ").concat(isOpen ? "" : styles$p.collapsed), type: "button", onClick: toggleAccordion, "aria-expanded": isOpen, "aria-controls": id },
                 title,
-                React__default.createElement("span", { className: styles$p.accordionIcon }))),
+                React__default.createElement("span", { className: styles$p.accordionIcon },
+                    React__default.createElement(IconAccordionChevron, { containerClassName: styles$p.accordionIconContainer, arrowClassName: styles$p.accordionIconArrow })))),
         React__default.createElement("div", { id: id, className: "".concat(styles$p.accordionCollapse, " ").concat(isOpen ? styles$p.show : "") },
             React__default.createElement("div", { className: styles$p.accordionBody }, content))));
 }
@@ -24154,31 +24162,137 @@ var ModalBody = function (_a) {
     return (React__default.createElement("div", { className: "".concat(style.modalBody, " ").concat(className || "") }, children));
 };
 
-var css_248z$b = ".styles-module__relativeDiv___4G0-P {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n}\r\n\r\n.styles-module__buttonDropdownTrigger___EZxPN {\r\n  border: none;\r\n  cursor: pointer;\r\n  outline: none;\r\n  background-color: transparent;\r\n}\r\n\r\n.styles-module__buttonDropdownTrigger___EZxPN svg {\r\n  color: var(--color-secondary);\r\n  width: 24px;\r\n  height: 18px;\r\n}\r\n\r\n.styles-module__dropdownMenu___s4viz {\r\n  position: absolute;\r\n  top: 100%;\r\n  right: 10px;\r\n  min-width: 200px;\r\n  background-color: white;\r\n  border-radius: 10px;\r\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n  z-index: 1000;\r\n  padding: 5px;\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  transition: opacity 0.3s ease, visibility 0.3s ease;\r\n}\r\n\r\n.styles-module__dropdownMenu___s4viz.styles-module__active___ieadq {\r\n  opacity: 1;\r\n  visibility: visible;\r\n  transition: opacity 0.3s ease, visibility 0.3s ease;\r\n}\r\n\r\n.styles-module__dropdownItem___5HFiy {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0.2rem 0.4rem;\r\n  color: var(--color-secondary);\r\n  background-color: white;\r\n  border: none;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n}\r\n\r\n.styles-module__dropdownItem___5HFiy label {\r\n  vertical-align: middle;\r\n  border: none;\r\n  cursor: pointer;\r\n  font-family: Open Sans;\r\n  font-weight: 400;\r\n  font-size: 13px;\r\n}\r\n\r\n.styles-module__dropdownItem___5HFiy svg {\r\n  vertical-align: middle;\r\n  height: 16px;\r\n  width: 16px;\r\n  margin-right: 0.2rem;\r\n  color: var(--foreground);\r\n  cursor: pointer;\r\n}\r\n\r\n.styles-module__dropdownItem___5HFiy:hover {\r\n  background-color: #e5f1f9;\r\n  cursor: pointer;\r\n}\r\n\r\n.styles-module__iconeInDots___qmaFm {\r\n  border: none !important;\r\n  background-color: transparent;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  height: 1rem;\r\n  padding: 0;\r\n  margin: 0;\r\n  outline: none;\r\n  cursor: pointer;\r\n}\r\n";
-var styles$a = {"relativeDiv":"styles-module__relativeDiv___4G0-P","buttonDropdownTrigger":"styles-module__buttonDropdownTrigger___EZxPN","dropdownMenu":"styles-module__dropdownMenu___s4viz","active":"styles-module__active___ieadq","dropdownItem":"styles-module__dropdownItem___5HFiy"};
+var css_248z$b = ".styles-module__relativeDiv___4G0-P {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  gap: 8px;\r\n  margin-right: 4px;\r\n  position: relative;\r\n}\r\n\r\n.styles-module__buttonDropdownTrigger___EZxPN {\r\n  cursor: pointer;\r\n  padding: 8px;\r\n  border: none;\r\n  background: transparent;\r\n  border-radius: 8px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.styles-module__dropdownMenu___s4viz {\r\n  position: absolute;\r\n  right: 0;\r\n  top: calc(100% + 6px);\r\n  background-color: white;\r\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n  border-radius: 8px;\r\n  min-width: 120px;\r\n  width: fit-content;\r\n  max-width: calc(100vw - 32px);\r\n  white-space: nowrap;\r\n  z-index: 9999;\r\n  padding: 4px;\r\n  outline: none;\r\n  opacity: 0;\r\n  transition: opacity 280ms ease;\r\n}\r\n\r\n.styles-module__openUp___NKJFe {\r\n  top: auto;\r\n  bottom: calc(100% + 6px);\r\n}\r\n\r\n.styles-module__alignLeft___Z8wcg {\r\n  right: auto;\r\n  left: 0;\r\n}\r\n\r\n.styles-module__dropdownItem___5HFiy {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  font-size: 14px;\r\n  color: var(--color-secondary);\r\n  background-color: white;\r\n  padding: 6px 10px;\r\n  border: none;\r\n  cursor: pointer;\r\n  outline: none;\r\n}\r\n\r\n.styles-module__dropdownItem___5HFiy:focus,\r\n.styles-module__dropdownItem___5HFiy:hover {\r\n  background-color: var(--background-color-table-hover);\r\n}\r\n\r\n.styles-module__dropdownItemEmpty___1jeUQ:hover {\r\n  background-color: transparent;\r\n  cursor: default;\r\n}\r\n\r\n.styles-module__dropdownItem___5HFiy > span {\r\n  width: 100%;\r\n}\r\n\r\n.styles-module__dropdownItem___5HFiy svg {\r\n  vertical-align: middle;\r\n  margin-right: 4px;\r\n  color: var(--color-pge-base);\r\n  flex: 0 0 auto;\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n\r\n.styles-module__dropdownItem___5HFiy label {\r\n  vertical-align: middle;\r\n  border: none;\r\n  cursor: pointer;\r\n  font-family: var(--font-open-sans-regular);\r\n  font-weight: 400;\r\n  font-size: 13px;\r\n  line-height: 1;\r\n}\r\n\r\n.styles-module__menuVisible___8lvfd {\r\n  opacity: 1 !important;\r\n  pointer-events: auto;\r\n}\r\n\r\n.styles-module__menuHidden___fTSVx {\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n/* mobile adjustments */\r\n@media (max-width: 480px) {\r\n  .styles-module__dropdownMenu___s4viz {\r\n    position: fixed;\r\n    right: 8px;\r\n    left: 8px;\r\n    top: auto;\r\n    border-radius: 12px;\r\n    padding: 4px;\r\n    max-height: calc(100vh - 32px);\r\n    overflow-y: auto;\r\n    box-sizing: border-box;\r\n    white-space: normal;\r\n  }\r\n  .styles-module__openUp___NKJFe {\r\n    bottom: 8px;\r\n  }\r\n}\r\n";
+var styles$a = {"relativeDiv":"styles-module__relativeDiv___4G0-P","buttonDropdownTrigger":"styles-module__buttonDropdownTrigger___EZxPN","dropdownMenu":"styles-module__dropdownMenu___s4viz","openUp":"styles-module__openUp___NKJFe","alignLeft":"styles-module__alignLeft___Z8wcg","dropdownItem":"styles-module__dropdownItem___5HFiy","dropdownItemEmpty":"styles-module__dropdownItemEmpty___1jeUQ","menuVisible":"styles-module__menuVisible___8lvfd","menuHidden":"styles-module__menuHidden___fTSVx"};
 styleInject(css_248z$b);
 
 var MenuAction = function (_a) {
     var itens = _a.itens;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var dropdownRef = useRef(null);
     var filteredItems = itens.filter(Boolean);
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var containerRef = useRef(null);
+    var triggerRef = useRef(null);
+    var _c = useState(false), openUp = _c[0], setOpenUp = _c[1];
+    var _d = useState(false), alignLeft = _d[0], setAlignLeft = _d[1];
+    var _e = useState(null), menuCoords = _e[0], setMenuCoords = _e[1];
+    var menuRef = useRef(null);
+    var _f = useState(false), renderMenu = _f[0], setRenderMenu = _f[1];
+    var _g = useState(false), isClosing = _g[0], setIsClosing = _g[1];
+    var closeTimeoutRef = useRef(null);
     useEffect(function () {
-        var handleClickOutside = function (event) {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
-                setTimeout(function () {
-                    setIsOpen(false);
-                }, 300);
+        function handleOutside(e) {
+            var target = e.target;
+            if (containerRef.current &&
+                target &&
+                containerRef.current.contains(target))
+                return;
+            if (menuRef.current && target && menuRef.current.contains(target))
+                return;
+            setIsOpen(false);
+        }
+        function handleKey(e) {
+            if (e.key === "Escape")
+                setIsOpen(false);
+        }
+        if (isOpen) {
+            document.addEventListener("mousedown", handleOutside);
+            document.addEventListener("touchstart", handleOutside);
+            document.addEventListener("keydown", handleKey);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleOutside);
+            document.removeEventListener("touchstart", handleOutside);
+            document.removeEventListener("keydown", handleKey);
+        };
+    }, [isOpen]);
+    useEffect(function () {
+        if (!isOpen || !triggerRef.current)
+            return;
+        var updateCoords = function () {
+            if (!triggerRef.current)
+                return;
+            var rect = triggerRef.current.getBoundingClientRect();
+            var topPos = rect.top + 20;
+            var leftPos = rect.left + 12;
+            setOpenUp(false);
+            setAlignLeft(true);
+            setMenuCoords({
+                top: topPos,
+                left: leftPos,
+                useTransform: true,
+            });
+        };
+        updateCoords();
+        window.addEventListener("scroll", toggle, true);
+        window.addEventListener("resize", updateCoords);
+        return function () {
+            window.removeEventListener("scroll", toggle, true);
+            window.removeEventListener("resize", updateCoords);
+        };
+    }, [isOpen]);
+    useEffect(function () {
+        if (isOpen) {
+            if (closeTimeoutRef.current) {
+                window.clearTimeout(closeTimeoutRef.current);
+                closeTimeoutRef.current = null;
+            }
+            setRenderMenu(true);
+            setIsClosing(false);
+            return;
+        }
+        if (!isOpen && renderMenu) {
+            setIsClosing(true);
+            closeTimeoutRef.current = window.setTimeout(function () {
+                setRenderMenu(false);
+                setIsClosing(false);
+                closeTimeoutRef.current = null;
+            }, 180);
+        }
+        return function () {
+            if (closeTimeoutRef.current) {
+                window.clearTimeout(closeTimeoutRef.current);
+                closeTimeoutRef.current = null;
             }
         };
-        document.addEventListener("mousedown", handleClickOutside);
-        return function () { return document.removeEventListener("mousedown", handleClickOutside); };
-    }, []);
-    return (React__default.createElement("div", { className: styles$a.relativeDiv, ref: dropdownRef },
-        React__default.createElement("div", { className: styles$a.buttonDropdownTrigger, onClick: function () { return setIsOpen(!isOpen); } },
-            React__default.createElement(IconDotsVertical, null)),
-        React__default.createElement("div", { className: "".concat(styles$a.dropdownMenu, " ").concat(isOpen ? styles$a.active : "") }, filteredItems.length === 0 ? (React__default.createElement("div", { className: styles$a.dropdownItem }, "Nenhum item dispon\u00EDvel")) : (filteredItems.map(function (item, index) { return (React__default.createElement("div", { key: index, className: styles$a.dropdownItem, onClick: function () { return setIsOpen(false); } }, item)); })))));
+    }, [isOpen, renderMenu]);
+    var toggle = function () { return setIsOpen(function (s) { return !s; }); };
+    var handleTriggerKeyDown = function (e) {
+        var _a;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setIsOpen(function (s) { return !s; });
+        }
+        else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setIsOpen(true);
+            var first = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[role='menuitem']");
+            first === null || first === void 0 ? void 0 : first.focus();
+        }
+    };
+    var handleItemClick = function () {
+        setIsOpen(false);
+    };
+    return (React__default.createElement("div", { className: styles$a.relativeDiv, ref: containerRef },
+        React__default.createElement("button", { ref: triggerRef, className: styles$a.buttonDropdownTrigger, onClick: toggle, onKeyDown: handleTriggerKeyDown, "aria-haspopup": "menu", "aria-expanded": isOpen, title: "Menu", type: "button" },
+            React__default.createElement(CommonDotIcon, null)),
+        renderMenu &&
+            (typeof document !== "undefined" && menuCoords ? (createPortal(React__default.createElement("div", { ref: menuRef, className: "".concat(styles$a.dropdownMenu, " ").concat(openUp ? styles$a.openUp : "", " ").concat(alignLeft ? styles$a.alignLeft : "", " ").concat(isOpen && !isClosing ? styles$a.menuVisible : "", " ").concat(isClosing ? styles$a.menuHidden : ""), role: "menu", style: {
+                    position: "fixed",
+                    top: menuCoords.top,
+                    left: typeof menuCoords.left !== "undefined"
+                        ? menuCoords.left
+                        : undefined,
+                    right: typeof menuCoords.right !== "undefined"
+                        ? menuCoords.right
+                        : undefined,
+                    bottom: menuCoords.bottom,
+                    transform: menuCoords.useTransform
+                        ? "translateX(-100%)"
+                        : undefined,
+                    transformOrigin: menuCoords.useTransform
+                        ? "right top"
+                        : undefined,
+                } }, filteredItems.length === 0 ? (React__default.createElement("div", { className: "".concat(styles$a.dropdownItem, " ").concat(styles$a.dropdownItemEmpty), role: "menuitem", tabIndex: 0 }, "Nenhum item dispon\u00EDvel")) : (filteredItems.map(function (item, index) { return (React__default.createElement("div", { key: index, className: styles$a.dropdownItem, role: "menuitem", tabIndex: 0, onClick: handleItemClick }, item)); }))), document.body)) : (React__default.createElement("div", { className: "".concat(styles$a.dropdownMenu, " ").concat(openUp ? styles$a.openUp : "", " ").concat(alignLeft ? styles$a.alignLeft : "", " ").concat(isOpen && !isClosing ? styles$a.menuVisible : "", " ").concat(isClosing ? styles$a.menuHidden : ""), role: "menu" }, filteredItems.length === 0 ? (React__default.createElement("div", { className: styles$a.dropdownItem, role: "menuitem", tabIndex: 0 }, "Nenhum item dispon\u00EDvel")) : (filteredItems.map(function (item, index) { return (React__default.createElement("div", { key: index, className: styles$a.dropdownItem, role: "menuitem", tabIndex: 0, onClick: handleItemClick }, item)); })))))));
 };
 
 var css_248z$a = ".styles-module__skeletonContainer___0VNvK {\r\n  background: #e5e7eb;\r\n  border-radius: inherit;\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\n.styles-module__skeletonCell___EOlCz {\r\n  animation: styles-module__skeletonLoading___n8C-o 1.5s infinite;\r\n  background: linear-gradient(\r\n    90deg,\r\n    rgba(255, 255, 255, 0) 0,\r\n    rgba(255, 255, 255, 0.6) 50%,\r\n    rgba(255, 255, 255, 0) 100%\r\n  );\r\n  background-size: 200px 100%;\r\n  background-repeat: no-repeat;\r\n  border-radius: inherit;\r\n  height: 100%;\r\n  min-height: 24px;\r\n  overflow: hidden;\r\n  position: relative;\r\n  width: 100%;\r\n}\r\n\r\n@keyframes styles-module__skeletonLoading___n8C-o {\r\n  0% {\r\n    background-position: -200px 0;\r\n  }\r\n  100% {\r\n    background-position: calc(200px + 100%) 0;\r\n  }\r\n}\r\n";