pge-front-common 14.1.31 → 14.1.32

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

@@ -13,6 +13,7 @@ interface PaginationProps {
         value: number;
         label: string;
     }[];
+    dropdownDirection?: "down" | "up";
 }
-declare const Pagination: ({ countPage, currentPage, totalItems, itemsPerPage, handleNext, handlePrevious, handleItemPorPage, pagina, handlePage, defaultOptions, }: PaginationProps) => React.JSX.Element;
+declare const Pagination: ({ countPage, currentPage, totalItems, itemsPerPage, handleNext, handlePrevious, handleItemPorPage, pagina, handlePage, defaultOptions, dropdownDirection, }: PaginationProps) => React.JSX.Element;
 export default Pagination;

package/lib/components/PaginationV2/pagination.stories.d.ts

@@ -9,3 +9,4 @@ export declare const LastPage: Story;
 export declare const CustomItemsPerPage: Story;
 export declare const LargeDataset: Story;
 export declare const DisabledNavigation: Story;
+export declare const DropdownUp: Story;

package/lib/components/PaginationV2/selectPagination.d.ts

@@ -7,6 +7,7 @@ interface SelectProps {
     }>;
     onChange: (value: number | string) => void;
     className?: string;
+    direction?: "down" | "up";
 }
-declare const SelectPagination: ({ value, options, onChange, className, }: SelectProps) => React.JSX.Element;
+declare const SelectPagination: ({ value, options, onChange, className, direction, }: SelectProps) => React.JSX.Element;
 export default SelectPagination;

package/lib/index.d.ts

@@ -515,8 +515,9 @@ interface PaginationProps {
         value: number;
         label: string;
     }[];
+    dropdownDirection?: "down" | "up";
 }
-declare const Pagination: ({ countPage, currentPage, totalItems, itemsPerPage, handleNext, handlePrevious, handleItemPorPage, pagina, handlePage, defaultOptions, }: PaginationProps) => React__default.JSX.Element;
+declare const Pagination: ({ countPage, currentPage, totalItems, itemsPerPage, handleNext, handlePrevious, handleItemPorPage, pagina, handlePage, defaultOptions, dropdownDirection, }: PaginationProps) => React__default.JSX.Element;
 
 interface SelectMultProps {
     name?: string;

package/lib/index.esm.js

@@ -1256,15 +1256,16 @@ var PaginationTable = function (_a) {
                 React__default.createElement("button", { type: "button", className: "".concat(styles$k.paginationButton, " ").concat(currentPage === countPage ? styles$k.paginationButtonDisabled : ""), onClick: function () { return handleClickPage === null || handleClickPage === void 0 ? void 0 : handleClickPage(currentPage + 1); }, disabled: currentPage === countPage }, ">")))));
 };
 
-var css_248z$k = ".styles-module__paginationContainer___FagFs {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 16px;\r\n  border: 1px solid #d9d9d9;\r\n  border-radius: 8px;\r\n  font-size: var(--font-size-14);\r\n  height: 61px;\r\n  border-radius: 0px 0px 10px 10px;\r\n  background-color: var(--background-color);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__paginationContainer___FagFs {\r\n    font-size: var(--font-size-12);\r\n    min-height: 50px;\r\n    height: auto;\r\n    padding: 6px 10px;\r\n  }  \r\n}\r\n\r\n.styles-module__labelItems___p-9pv {\r\n  font-size: var(--font-size-14, 14px);\r\n  font-weight: 400;\r\n  color: var(--foreground);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__labelItems___p-9pv {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.styles-module__itemsPerPageWrapper___PTkJr {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n  height: 61px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__itemsPerPageWrapper___PTkJr {\r\n    height: auto;\r\n  }\r\n}\r\n\r\n.styles-module__itemsPerPageWrapperSelect___gVLGU {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 15px;\r\n}\r\n\r\n.styles-module__paginationInfo___NrLda {\r\n  font-size: var(--font-size-14, 14px);\r\n  font-weight: 400;\r\n  color: var(--foreground);\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__paginationInfo___NrLda {\r\n    font-size: var(--font-size-12, 12px);\r\n  }\r\n}\r\n\r\n.styles-module__navigationWrapper___lJ040 {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n  height: 61px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__navigationWrapper___lJ040 {\r\n    height: auto;\r\n  }\r\n}\r\n\r\n.styles-module__separatorItem___t-PSR {\r\n  width: 1px;\r\n  height: 50%;\r\n  background-color: #cccccc;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__separatorItem___t-PSR {\r\n    height: 25px;\r\n  }\r\n}\r\n\r\n.styles-module__currentPage___SRV7Q {\r\n  font-size: var(--font-size-16, 16px);\r\n  font-weight: bold;\r\n  margin: 0 5px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border: 1px solid #FFFFFF;\r\n  background-color: transparent;\r\n  color: var(--paginationv2-arrow-color);\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:first-of-type {\r\n  border-top-left-radius: 4px;\r\n  border-bottom-left-radius: 4px;\r\n  margin-left: 10px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:last-of-type {\r\n  border-top-right-radius: 4px;\r\n  border-bottom-right-radius: 4px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:disabled {\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* .navButton:hover:not(:disabled) {\r\n} */\r\n\r\n/* Select.module.css */\r\n.styles-module__selectContainerPagination___C-Epb {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.styles-module__selectTrigger___A5PsD {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 8px 12px;\r\n  background: var(--paginationv2-selecttrigger-bg-color);\r\n  border: 1px solid var(--paginationv2-selecttrigger-border-color);\r\n  border-radius: 4px;\r\n  cursor: default;\r\n  gap: 12px;\r\n  margin-right: 10px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__selectTrigger___A5PsD {\r\n    padding: 4px 8px;\r\n  }\r\n}\r\n\r\n.styles-module__selectedValue___S6skE {\r\n  font-size: var(--font-size-14, 14px);\r\n  color: var(--paginationv2-selectedValue-color);\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__selectedValue___S6skE {\r\n    font-size: var(--font-size-12, 12px);\r\n  }\r\n}\r\n\r\n.styles-module__icon___-BaZE {\r\n  width: 10px;\r\n  height: 18px;\r\n  cursor: pointer;\r\n  transition: transform 0.2s ease;\r\n}\r\n\r\n.styles-module__iconOpen___Azg3S {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n.styles-module__optionsList___Xs-ze {\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 0;\r\n  right: 0;\r\n  margin-top: 4px;\r\n  background: var(--paginationv2-optionslist-bg-color);\r\n  border: 1px solid #e1e1e1;\r\n  border-radius: 4px;\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n  z-index: 1000;\r\n  max-height: 200px;\r\n  overflow-y: auto;\r\n  width: fit-content;\r\n  padding: 0;\r\n}\r\n\r\n.styles-module__option___riTqX {\r\n  padding: 8px 12px;\r\n  font-size: var(--font-size-14, 14px);\r\n  color: var(--paginationv2-optionslist-font-color);\r\n  cursor: pointer;\r\n}\r\n\r\n.styles-module__option___riTqX:hover {\r\n  background-color: var(--paginationv2-optionslist-hover-bg-color);\r\n}\r\n\r\n.styles-module__option___riTqX.styles-module__selected___6iUvP {\r\n  background-color: var(--paginationv2-optionselect-bg-color);\r\n  color: var(--paginationv2-optionselect-text-color);\r\n}\r\n\r\n.styles-module__selectTrigger___A5PsD:hover {\r\n  border-color: var(--primary-color);\r\n}";
-var styles$j = {"paginationContainer":"styles-module__paginationContainer___FagFs","labelItems":"styles-module__labelItems___p-9pv","itemsPerPageWrapper":"styles-module__itemsPerPageWrapper___PTkJr","itemsPerPageWrapperSelect":"styles-module__itemsPerPageWrapperSelect___gVLGU","paginationInfo":"styles-module__paginationInfo___NrLda","navigationWrapper":"styles-module__navigationWrapper___lJ040","separatorItem":"styles-module__separatorItem___t-PSR","currentPage":"styles-module__currentPage___SRV7Q","navButton":"styles-module__navButton___pqOMS","selectContainerPagination":"styles-module__selectContainerPagination___C-Epb","selectTrigger":"styles-module__selectTrigger___A5PsD","selectedValue":"styles-module__selectedValue___S6skE","icon":"styles-module__icon___-BaZE","iconOpen":"styles-module__iconOpen___Azg3S","optionsList":"styles-module__optionsList___Xs-ze","option":"styles-module__option___riTqX","selected":"styles-module__selected___6iUvP"};
+var css_248z$k = ".styles-module__paginationContainer___FagFs {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 16px;\r\n  border: 1px solid #d9d9d9;\r\n  border-radius: 8px;\r\n  font-size: var(--font-size-14);\r\n  height: 61px;\r\n  border-radius: 0px 0px 10px 10px;\r\n  background-color: var(--background-color);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__paginationContainer___FagFs {\r\n    font-size: var(--font-size-12);\r\n    min-height: 50px;\r\n    height: auto;\r\n    padding: 6px 10px;\r\n  }  \r\n}\r\n\r\n.styles-module__labelItems___p-9pv {\r\n  font-size: var(--font-size-14, 14px);\r\n  font-weight: 400;\r\n  color: var(--foreground);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__labelItems___p-9pv {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.styles-module__itemsPerPageWrapper___PTkJr {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n  height: 61px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__itemsPerPageWrapper___PTkJr {\r\n    height: auto;\r\n  }\r\n}\r\n\r\n.styles-module__itemsPerPageWrapperSelect___gVLGU {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 15px;\r\n}\r\n\r\n.styles-module__paginationInfo___NrLda {\r\n  font-size: var(--font-size-14, 14px);\r\n  font-weight: 400;\r\n  color: var(--foreground);\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__paginationInfo___NrLda {\r\n    font-size: var(--font-size-12, 12px);\r\n  }\r\n}\r\n\r\n.styles-module__navigationWrapper___lJ040 {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n  height: 61px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__navigationWrapper___lJ040 {\r\n    height: auto;\r\n  }\r\n}\r\n\r\n.styles-module__separatorItem___t-PSR {\r\n  width: 1px;\r\n  height: 50%;\r\n  background-color: #cccccc;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__separatorItem___t-PSR {\r\n    height: 25px;\r\n  }\r\n}\r\n\r\n.styles-module__currentPage___SRV7Q {\r\n  font-size: var(--font-size-16, 16px);\r\n  font-weight: bold;\r\n  margin: 0 5px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border: 1px solid #FFFFFF;\r\n  background-color: transparent;\r\n  color: var(--paginationv2-arrow-color);\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:first-of-type {\r\n  border-top-left-radius: 4px;\r\n  border-bottom-left-radius: 4px;\r\n  margin-left: 10px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:last-of-type {\r\n  border-top-right-radius: 4px;\r\n  border-bottom-right-radius: 4px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:disabled {\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* .navButton:hover:not(:disabled) {\r\n} */\r\n\r\n/* Select.module.css */\r\n.styles-module__selectContainerPagination___C-Epb {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.styles-module__selectTrigger___A5PsD {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 8px 12px;\r\n  background: var(--paginationv2-selecttrigger-bg-color);\r\n  border: 1px solid var(--paginationv2-selecttrigger-border-color);\r\n  border-radius: 4px;\r\n  cursor: default;\r\n  gap: 12px;\r\n  margin-right: 10px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .styles-module__selectTrigger___A5PsD {\r\n    padding: 4px 8px;\r\n  }\r\n}\r\n\r\n.styles-module__selectedValue___S6skE {\r\n  font-size: var(--font-size-14, 14px);\r\n  color: var(--paginationv2-selectedValue-color);\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__selectedValue___S6skE {\r\n    font-size: var(--font-size-12, 12px);\r\n  }\r\n}\r\n\r\n.styles-module__icon___-BaZE {\r\n  width: 10px;\r\n  height: 18px;\r\n  cursor: pointer;\r\n  transition: transform 0.2s ease;\r\n}\r\n\r\n.styles-module__iconOpen___Azg3S {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n.styles-module__optionsList___Xs-ze {\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 0;\r\n  right: 0;\r\n  margin-top: 4px;\r\n  background: var(--paginationv2-optionslist-bg-color);\r\n  border: 1px solid #e1e1e1;\r\n  border-radius: 4px;\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n  z-index: 1000;\r\n  max-height: 200px;\r\n  overflow-y: auto;\r\n  width: fit-content;\r\n  padding: 0;\r\n}\r\n\r\n.styles-module__optionsListUp___JurU2 {\r\n  top: auto;\r\n  bottom: 100%;\r\n  margin-top: 0;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.styles-module__option___riTqX {\r\n  padding: 8px 12px;\r\n  font-size: var(--font-size-14, 14px);\r\n  color: var(--paginationv2-optionslist-font-color);\r\n  cursor: pointer;\r\n}\r\n\r\n.styles-module__option___riTqX:hover {\r\n  background-color: var(--paginationv2-optionslist-hover-bg-color);\r\n}\r\n\r\n.styles-module__option___riTqX.styles-module__selected___6iUvP {\r\n  background-color: var(--paginationv2-optionselect-bg-color);\r\n  color: var(--paginationv2-optionselect-text-color);\r\n}\r\n\r\n.styles-module__selectTrigger___A5PsD:hover {\r\n  border-color: var(--primary-color);\r\n}";
+var styles$j = {"paginationContainer":"styles-module__paginationContainer___FagFs","labelItems":"styles-module__labelItems___p-9pv","itemsPerPageWrapper":"styles-module__itemsPerPageWrapper___PTkJr","itemsPerPageWrapperSelect":"styles-module__itemsPerPageWrapperSelect___gVLGU","paginationInfo":"styles-module__paginationInfo___NrLda","navigationWrapper":"styles-module__navigationWrapper___lJ040","separatorItem":"styles-module__separatorItem___t-PSR","currentPage":"styles-module__currentPage___SRV7Q","navButton":"styles-module__navButton___pqOMS","selectContainerPagination":"styles-module__selectContainerPagination___C-Epb","selectTrigger":"styles-module__selectTrigger___A5PsD","selectedValue":"styles-module__selectedValue___S6skE","icon":"styles-module__icon___-BaZE","iconOpen":"styles-module__iconOpen___Azg3S","optionsList":"styles-module__optionsList___Xs-ze","optionsListUp":"styles-module__optionsListUp___JurU2","option":"styles-module__option___riTqX","selected":"styles-module__selected___6iUvP"};
 styleInject(css_248z$k);
 
 var SelectPagination = function (_a) {
-    var value = _a.value, options = _a.options, onChange = _a.onChange, _b = _a.className, className = _b === void 0 ? "" : _b;
-    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    var value = _a.value, options = _a.options, onChange = _a.onChange, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.direction, direction = _c === void 0 ? "down" : _c;
+    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
     var selectRef = useRef(null);
     var selectedOption = options.find(function (opt) { return opt.value === value; });
+    var displayOptions = direction === "up" ? __spreadArray([], options, true).reverse() : options;
     useEffect(function () {
         var handleClickOutside = function (event) {
             if (selectRef.current &&
@@ -1290,7 +1291,7 @@ var SelectPagination = function (_a) {
             } },
             React__default.createElement("span", { className: styles$j.selectedValue }, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label.padStart(2, "0")),
             React__default.createElement(IconTriangleRecall, { onClick: function () { return setIsOpen(!isOpen); }, className: "".concat(styles$j.icon, " ").concat(isOpen ? styles$j.iconOpen : ""), fill: "#005A92" })),
-        isOpen && (React__default.createElement("div", { className: styles$j.optionsList }, options.map(function (option) { return (React__default.createElement("div", { key: option.value, tabIndex: 0, className: "".concat(styles$j.option, " ").concat(option.value === value ? styles$j.selected : ""), onClick: function () { return handleSelect(option.value); }, onKeyDown: function (e) {
+        isOpen && (React__default.createElement("div", { className: "".concat(styles$j.optionsList, " ").concat(direction === "up" ? styles$j.optionsListUp : "") }, displayOptions.map(function (option) { return (React__default.createElement("div", { key: option.value, tabIndex: 0, className: "".concat(styles$j.option, " ").concat(option.value === value ? styles$j.selected : ""), onClick: function () { return handleSelect(option.value); }, onKeyDown: function (e) {
                 if (e.key === "Enter" || e.key === " ") {
                     e.preventDefault();
                     handleSelect(option.value);
@@ -1303,7 +1304,7 @@ var Pagination = function (_a) {
         { value: 10, label: "10" },
         { value: 20, label: "20" },
         { value: 50, label: "50" },
-    ] : _b;
+    ] : _b, _c = _a.dropdownDirection, dropdownDirection = _c === void 0 ? "down" : _c;
     var generatePageOptions = function (totalPages) {
         return Array.from({ length: totalPages }, function (_, index) { return ({
             value: index + 1,
@@ -1316,14 +1317,14 @@ var Pagination = function (_a) {
                 React__default.createElement("label", { className: styles$j.labelItems, htmlFor: "itemsPerPage" }, "Exibir"),
                 React__default.createElement(SelectPagination, { value: itemsPerPage, options: defaultOptions, onChange: function (value) {
                         handleItemPorPage(Number(value));
-                    } })),
+                    }, direction: dropdownDirection })),
             React__default.createElement("div", { className: styles$j.separatorItem }),
             React__default.createElement("div", { className: styles$j.paginationInfo }, "".concat((currentPage - 1) * itemsPerPage + 1, "-").concat(Math.min(currentPage * itemsPerPage, totalItems), " de ").concat(totalItems, " itens"))),
         React__default.createElement("div", { className: styles$j.navigationWrapper },
             React__default.createElement("label", { className: styles$j.labelItems, htmlFor: "itemsPerPage" }, "P\u00E1gina"),
             React__default.createElement(SelectPagination, { value: pagina, options: generatePageOptions(Math.ceil(totalItems / itemsPerPage)), onChange: function (value) {
                     handlePage(Number(value));
-                } }),
+                }, direction: dropdownDirection }),
             React__default.createElement("div", { className: styles$j.separatorItem }),
             React__default.createElement("button", { className: styles$j.navButton, onClick: handlePrevious, disabled: currentPage === 1, "aria-label": "P\u00E1gina anterior" },
                 React__default.createElement(IconArrowLeft, { fill: "currentColor" })),