@apia/components 4.0.30 → 4.0.32

package/dist/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, useEffect, useMemo, useState, useCallback, useRef, forwardRef, Fragment as Fragment$1, useDeferredValue, lazy, Suspense, useTransition, Children, memo, isValidElement, cloneElement, createRef } from 'react';
 import parse, { domToReact, Element } from 'html-react-parser';
 import { Spinner as Spinner$1, Box as Box$1 } from 'theme-ui';
-import { uniqueId as uniqueId$3, debounce, cloneDeep, isFunction } from 'lodash-es';
+import { uniqueId as uniqueId$3, cloneDeep, isFunction } from 'lodash-es';
 import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Link, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, Progress, Label as Label$1, Paragraph, Container, Form, focusOutline, makeStyledComponent, useThemeUI, Grid, Textarea } from '@apia/theme';
 import { BarLoader } from 'react-spinners';
 import uniqueId$2 from 'lodash-es/uniqueId';
@@ -3146,7 +3146,7 @@ var __privateSet$5 = (obj, member, value, setter) => {
   member.set(obj, value);
   return value;
 };
-var _timeout, _tooltipTimeout, _unsuscribe, _tooltip;
+var _timeout$1, _tooltipTimeout, _unsuscribe, _tooltip;
 let y$1 = 0, x$1 = 0;
 document?.addEventListener("mousemove", (ev) => {
   x$1 = ev.clientX;
@@ -3155,7 +3155,7 @@ document?.addEventListener("mousemove", (ev) => {
 class AutomaticTooltip {
   constructor(tooltip = null, handler) {
     this.handler = handler;
-    __privateAdd$8(this, _timeout, 500);
+    __privateAdd$8(this, _timeout$1, 500);
     __privateAdd$8(this, _tooltipTimeout, 0);
     __privateAdd$8(this, _unsuscribe, null);
     __publicField$l(this, "ref", (el) => {
@@ -3172,7 +3172,7 @@ class AutomaticTooltip {
               ...__privateGet$7(this, _tooltip),
               anchorPoint: { left: x$1 + 3, top: y$1 + 3 }
             });
-        }, __privateGet$7(this, _timeout)));
+        }, __privateGet$7(this, _timeout$1)));
       };
       const reset = () => {
         clearTimeout(__privateGet$7(this, _tooltipTimeout));
@@ -3195,11 +3195,11 @@ class AutomaticTooltip {
     });
     __privateSet$5(this, _tooltip, tooltip);
     if (tooltip?.timeout !== void 0) {
-      __privateSet$5(this, _timeout, tooltip?.timeout);
+      __privateSet$5(this, _timeout$1, tooltip?.timeout);
     }
   }
 }
-_timeout = new WeakMap();
+_timeout$1 = new WeakMap();
 _tooltipTimeout = new WeakMap();
 _unsuscribe = new WeakMap();
 _tooltip = new WeakMap();
@@ -4008,7 +4008,7 @@ var __privateSet$2 = (obj, member, value, setter) => {
   member.set(obj, value);
   return value;
 };
-var _actualSearch, _makeSearch, _search;
+var _actualSearch, _timeout;
 class AutocompleteController {
   constructor(properties) {
     __publicField$f(this, "state", {
@@ -4022,22 +4022,28 @@ class AutocompleteController {
       value: "",
       width: 55
     });
-    __privateAdd$4(this, _actualSearch, (str) => {
-      this.state.options.forEach((c) => {
-        if (this.state.caseInsensitive) {
-          c.filtered = (c.searchLabel ?? c.label?.toString?.() ?? c.value).toLowerCase().indexOf(str.toLowerCase()) === -1;
-        } else {
-          c.filtered = (c.searchLabel ?? c.label?.toString?.() ?? c.value)?.indexOf(str) === -1;
-        }
-        if (this.getOptionByValue(this.state.focusedValue)?.filtered) {
-          this.state.focusedValue = this.state.options.find((c2) => !c2.filtered)?.value || null;
-        }
-      });
-    });
-    __privateAdd$4(this, _makeSearch, () => {
-      return debounce(__privateGet$3(this, _actualSearch), this.state.searchDebounce);
+    __privateAdd$4(this, _actualSearch, async (str) => {
+      if (this.state.onSearch) {
+        if (str === "")
+          this.state.value = "";
+        const newOptions = await this.state.onSearch(str, this);
+        this.state.options = newOptions;
+      } else {
+        this.state.options.forEach((c) => {
+          if (this.state.caseInsensitive) {
+            c.filtered = (c.searchLabel ?? c.label?.toString?.() ?? c.value).toLowerCase().indexOf(str.toLowerCase()) === -1;
+          } else {
+            c.filtered = (c.searchLabel ?? c.label?.toString?.() ?? c.value)?.indexOf(
+              str
+            ) === -1;
+          }
+          if (this.getOptionByValue(this.state.focusedValue)?.filtered) {
+            this.state.focusedValue = this.state.options.find((c2) => !c2.filtered)?.value || null;
+          }
+        });
+      }
     });
-    __privateAdd$4(this, _search, __privateGet$3(this, _makeSearch).call(this));
+    __privateAdd$4(this, _timeout, 0);
     __publicField$f(this, "tooltipRef", null);
     Object.assign(this.state, properties);
     if (properties.value) {
@@ -4050,12 +4056,6 @@ class AutocompleteController {
       getAutocompleteBox: false,
       getOptionByValue: false
     });
-    reaction(
-      () => this.state.searchDebounce,
-      () => {
-        __privateSet$2(this, _search, __privateGet$3(this, _makeSearch).call(this));
-      }
-    );
     reaction(
       () => this.state.focusedValue,
       () => {
@@ -4083,7 +4083,8 @@ class AutocompleteController {
   close(selectValue = true) {
     this.tooltipRef?.close();
     this.tooltipRef = null;
-    __privateGet$3(this, _actualSearch).call(this, "");
+    if (!this.state.showValue)
+      __privateGet$3(this, _actualSearch).call(this, "");
     if (selectValue) {
       let currentValue = this.state.options.find(
         (c) => c.value === this.state.focusedValue
@@ -4210,7 +4211,10 @@ class AutocompleteController {
       return;
     }
     this.state.showValue = str;
-    __privateGet$3(this, _search).call(this, str);
+    clearTimeout(__privateGet$3(this, _timeout));
+    __privateSet$2(this, _timeout, setTimeout(() => {
+      __privateGet$3(this, _actualSearch).call(this, str);
+    }, 100));
   }
   selectFocused() {
     this.close();
@@ -4239,8 +4243,7 @@ class AutocompleteController {
   }
 }
 _actualSearch = new WeakMap();
-_makeSearch = new WeakMap();
-_search = new WeakMap();
+_timeout = new WeakMap();
 
 const SearchBox = observer((props) => {
   const handler = useAutocompleteContext();
@@ -4271,7 +4274,7 @@ const SearchBox = observer((props) => {
           ...props,
           ref: inputRef,
           className: `autocomplete__search ${handler.state.disabled ? "disabled" : ""} ${handler.state.readOnly ? "readOnly" : ""}`,
-          onChange: (ev) => {
+          onChange: async (ev) => {
             handler.search(ev.target.value);
           },
           onMouseDown: () => {
@@ -4293,7 +4296,7 @@ const SearchBox = observer((props) => {
           Icon$1,
           {
             title: "",
-            name: "ArrowDown",
+            name: handler.state?.icon || "ArrowDown",
             className: "autocomplete__downArrow"
           }
         )
@@ -4821,8 +4824,6 @@ const IconInput = ({
   const { sx: inputSx, ...actualInputProps } = inputProps ?? {};
   const innerButtonRef = React__default.useRef(null);
   const assignButtonRef = useCombinedRefs(buttonRef, innerButtonRef);
-  const innerInputRef = React__default.useRef(null);
-  const assignInputRef = useCombinedRefs(inputRef, innerInputRef);
   const parentRef = React__default.useRef(null);
   const handleBlur = React__default.useCallback(
     (ev) => {
@@ -4830,7 +4831,9 @@ const IconInput = ({
         ev.relatedTarget,
         (current) => current === parentRef.current
       ))) {
-        Object.assign(ev.target, { value: innerInputRef.current?.value });
+        Object.assign(ev.target, {
+          value: ev.target.closest(".iconInput").querySelector("input").value
+        });
         onBlur(ev);
       }
     },
@@ -4840,17 +4843,16 @@ const IconInput = ({
     Box,
     {
       ...getVariant("forms.iconInput"),
-      className: `${className ?? ""} iconInput`,
       ref: parentRef,
       onBlur: handleBlur,
+      className: `${className ?? ""} iconInput`,
       children: [
         /* @__PURE__ */ jsx(
           ReactInputMask,
           {
             mask: mask ?? "",
-            onBlur: handleBlur,
             disabled: isLoading || disabled,
-            ref: assignInputRef,
+            ref: inputRef,
             readOnly,
             sx: { variant: "forms.input", ...inputSx },
             "data-variant": "forms.input",
@@ -4901,6 +4903,7 @@ const DateInput = React__default.forwardRef(
     onError,
     renderLabel,
     value: outerValue,
+    avoidErrorMessage,
     ...props
   }, ref) => {
     const id = React__default.useMemo(uniqueId$3, []);
@@ -4910,6 +4913,7 @@ const DateInput = React__default.forwardRef(
     const { deleteFiltersTimestamp, ...otherProps } = props;
     const hasBlured = useRef(false);
     const [stateError, setError] = React__default.useState(error ?? null);
+    const [isFocused, setIsFocused] = React__default.useState(false);
     const lastEmittedValue = React__default.useRef(outerValue ?? "");
     useUpdateEffect$1(() => {
       setInputValue(outerValue ?? "");
@@ -4998,13 +5002,13 @@ const DateInput = React__default.forwardRef(
       [setCalendarValue]
     );
     useEffect(() => {
-      if (stateError !== "" && stateError !== null) {
+      if (stateError !== "" && stateError !== null && !avoidErrorMessage) {
         ApiaUtil.instance.notifications.notify({
           message: stateError,
           type: "warning"
         });
       }
-    }, [stateError]);
+    }, [avoidErrorMessage, stateError]);
     const handleBlur = React__default.useCallback(
       (ev) => {
         hasBlured.current = true;
@@ -5044,6 +5048,9 @@ const DateInput = React__default.forwardRef(
         value: stateError ? "" : renderLabel ? renderLabel(inputValue) : inputValue,
         ref,
         onChange: (ev) => {
+          if (props.readOnly) {
+            return;
+          }
           setInputValue(ev.target.value);
           if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== ev.target.value && ev.target.value !== "") {
             setError(null);
@@ -5053,6 +5060,7 @@ const DateInput = React__default.forwardRef(
           }
         },
         onBlur: (ev) => {
+          setIsFocused(false);
           if (!(props.readOnly || getCustomMask || document.querySelector(".overlay.screenLock")))
             setCalendarValue(ev.target.value, false, true);
           if (hasBlured.current) {
@@ -5061,6 +5069,9 @@ const DateInput = React__default.forwardRef(
             handleBlur(ev);
           }
         },
+        onFocus: () => {
+          setIsFocused(true);
+        },
         onKeyDown: (ev) => {
           if (ev.key === "Enter")
             setCalendarValue(inputValue);
@@ -5088,25 +5099,38 @@ const DateInput = React__default.forwardRef(
       }),
       [outerButtonProps, props.disabled, props.readOnly]
     );
-    const additionalButtons = React__default.useMemo(
-      () => /* @__PURE__ */ jsx(
-        Close,
+    const additionalButtons = React__default.useMemo(() => {
+      const doDelete = (e) => {
+        e?.stopPropagation();
+        setCalendarValue("");
+        onDelete?.();
+        document.querySelector(`#DateInput${id} input`)?.focus();
+      };
+      return /* @__PURE__ */ jsx(
+        "span",
         {
-          className: "delete_date_button",
-          onClick: () => {
-            setCalendarValue("");
-            onDelete?.();
-            document.querySelector(
-              `#DateInput${id} input`
-            )?.focus();
+          role: "button",
+          tabIndex: 0,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            doDelete(e);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              doDelete(e);
+            }
           },
-          title: getLabel("btnAiDelete").text,
           "aria-label": getLabel("btnAiDelete").text,
-          type: "button"
+          title: getLabel("btnAiDelete").text,
+          children: /* @__PURE__ */ jsx(Close, { type: "button", className: "delete_date_button" })
         }
-      ),
-      [id, onDelete, setCalendarValue]
-    );
+      );
+    }, [id, onDelete, setCalendarValue]);
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
       Box,
       {
@@ -5115,6 +5139,7 @@ const DateInput = React__default.forwardRef(
         id: `DateInput${id}`,
         ref: boxRef,
         onBlur: (e) => {
+          setIsFocused(false);
           if (hasBlured.current) {
             hasBlured.current = false;
           } else if (!document.querySelector(".overlay.screenLock")) {
@@ -5124,10 +5149,14 @@ const DateInput = React__default.forwardRef(
         children: /* @__PURE__ */ jsx(
           IconInput,
           {
-            additionalButtons: inputValue && inputValue !== getMaskForDateFormat().replaceAll(
-              "9",
-              DEFAULT_MASK_PLACEHOLDER
-            ) && !props.readOnly && !props.disabled ? additionalButtons : void 0,
+            additionalButtons: (
+              // mostrar sólo si el campo tiene valor, no está en modo placeholder,
+              // no es readOnly/disabled Y el input está enfocado
+              inputValue && inputValue !== getMaskForDateFormat().replaceAll(
+                "9",
+                DEFAULT_MASK_PLACEHOLDER
+              ) && !props.readOnly && !props.disabled && isFocused ? additionalButtons : void 0
+            ),
             buttonProps,
             className: `${stateError !== null ? "field__withError" : ""}`,
             icon: FaCalendarAlt,
@@ -6132,7 +6161,7 @@ const AutoscrollContainer = ({ children, threshold = 150, className }) => {
       mo.disconnect();
     };
   }, [threshold]);
-  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className, children });
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: `${className || ""} autoscrollContainer`, children });
 };
 
 const FileCard = forwardRef(
@@ -9022,6 +9051,31 @@ const SkeletonItem = () => /* @__PURE__ */ jsx(
 );
 const ListSkeletonLoader = ({ items = 5 }) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx(SkeletonItem, {}, index)) });
 
+const LinearSpinnerLock = ({ isLocked }) => isLocked ? /* @__PURE__ */ jsx(
+  Box,
+  {
+    className: "locker",
+    style: {
+      backgroundColor: "rgb(128 128 128 / 0%)",
+      inset: 0,
+      position: "fixed",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: "modal",
+      transition: "background-color 2s"
+    },
+    ref: (el) => {
+      if (el instanceof HTMLElement) {
+        window.requestAnimationFrame(() => {
+          el.style.backgroundColor = "rgb(200 200 200 / 60%)";
+        });
+      }
+    },
+    children: /* @__PURE__ */ jsx(LinearLoader, {})
+  }
+) : null;
+
 const distinctors = {
   grid: [
     (distinctors2, state) => {
@@ -9570,21 +9624,28 @@ const DefaultIconRendererNoMemo = (props) => {
     console.error({ props });
     console.error("The icon has no imageUrl nor icon defined");
   }
-  return /* @__PURE__ */ jsxs(Box, { title: props.label, className: "iconsList__icon__wrapper", children: [
-    /* @__PURE__ */ jsxs(Box, { className: "iconsList__icon__image__wrapper", children: [
-      props.imageUrl && /* @__PURE__ */ jsx(
-        Image,
-        {
-          className: "iconsList__icon__image",
-          src: props.imageUrl,
-          role: "none",
-          alt: ""
-        }
-      ),
-      props.icon && /* @__PURE__ */ jsx(Icon$1, { icon: props.icon, title: props.ariaLabel })
-    ] }),
-    /* @__PURE__ */ jsx(Box, { className: "iconsList__icon__label", children: props.label })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      title: props.title || props.label,
+      className: "iconsList__icon__wrapper",
+      children: [
+        /* @__PURE__ */ jsxs(Box, { className: "iconsList__icon__image__wrapper", children: [
+          props.imageUrl && /* @__PURE__ */ jsx(
+            Image,
+            {
+              className: "iconsList__icon__image",
+              src: props.imageUrl,
+              role: "none",
+              alt: ""
+            }
+          ),
+          props.icon && /* @__PURE__ */ jsx(Icon$1, { icon: props.icon, title: props.ariaLabel })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { className: "iconsList__icon__label", children: props.label })
+      ]
+    }
+  );
 };
 const DefaultIconRenderer = memo(DefaultIconRendererNoMemo);
 
@@ -10133,6 +10194,22 @@ const SortableList = makeStyledComponent(
   UnstyledSortableList
 );
 
+const defaultLabels = Object.freeze({
+  totalRecords: window.GNR_TOT_RECORDS,
+  totalRecordsReached: window.GNR_TOT_RECORDS_REACHED,
+  maximize: window.LBL_MAXIMIZE,
+  minimize: window.LBL_MINIMIZE,
+  information: window.BTN_FILE_INFO_TOOLTIP,
+  deleteFilters: window.BTN_DELETE_FILTERS,
+  refresh: window.NAV_REFRESH,
+  firstPage: window.NAV_FIRST_PAGE,
+  previousPage: window.NAV_PREVIOUS_PAGE,
+  lastPage: window.NAV_LAST_PAGE,
+  nextPage: window.NAV_NEXT_PAGE,
+  pageInputInstructions: window.NAV_INPUT_LABEL,
+  page: window.PAGE,
+  moreData: window.QUERY_MORE_DATA
+});
 const NoMemoPagination = ({
   appliedFilters,
   areAllFiltersApplied,
@@ -10155,30 +10232,15 @@ const NoMemoPagination = ({
   showMaximizeOnSmallBreakpoints,
   variant = "primary",
   isMaximized,
-  onMaximize
+  onMaximize,
+  labels
 }) => {
   const numberPageCount = Number(pageCount);
-  const breakPoint = useBreakpointIndex();
   const numberCurrentPage = Number(currentPage);
+  const breakPoint = useBreakpointIndex();
   const recordsCount = outerRecordsCount;
-  const [internCurrentPage, setCurrentPage] = useState(
-    numberCurrentPage ?? 1
-  );
-  const [lastEmittedPage, setLastEmittedPage] = useState(
-    numberCurrentPage ?? 1
-  );
+  const definedLabels = Object.assign({}, defaultLabels, labels);
   const [hasNoValue, setHasNoValue] = useState(false);
-  useEffect(() => {
-    setCurrentPage(numberCurrentPage);
-  }, [numberCurrentPage]);
-  const setCurrentAndDispatch = useCallback(
-    (page) => {
-      setCurrentPage(page);
-      onPageChange(page);
-      setLastEmittedPage(page);
-    },
-    [onPageChange]
-  );
   const InputRef = createRef();
   const options = [];
   for (let i = 1; i <= numberPageCount; i++) {
@@ -10187,19 +10249,22 @@ const NoMemoPagination = ({
   const [infoButtonRef, setInfoButtonRef] = React__default.useState(
     null
   );
-  const recordsCountLabel = `${window.GNR_TOT_RECORDS}: ${recordsCount}`;
+  const recordsCountLabel = `${definedLabels.totalRecords}: ${recordsCount}`;
   const tooltipProps = React__default.useMemo(
     () => ({
-      text: breakPoint <= 3 ? `${recordsCountLabel}.${!reachedMax && !hasMore ? "" : reachedMax && window.GNR_TOT_RECORDS_REACHED || hasMore && window.QUERY_MORE_DATA}` : `${!reachedMax && !hasMore ? "" : reachedMax && window.GNR_TOT_RECORDS_REACHED || hasMore && window.QUERY_MORE_DATA}`,
+      text: breakPoint <= 3 ? `${recordsCountLabel}.${!reachedMax && !hasMore ? "" : reachedMax && definedLabels.totalRecordsReached || hasMore && definedLabels.moreData}` : `${!reachedMax && !hasMore ? "" : reachedMax && definedLabels.totalRecordsReached || hasMore && definedLabels.moreData}`,
       attachToElement: { current: infoButtonRef },
       closeOnClickOut: true
-      // closeOnClickOutChecker(element) {
-      //   return !getSpecificParent(element, (current) =>
-      //     current.classList.contains('pagination__information'),
-      //   );
-      // },
     }),
-    [breakPoint, hasMore, infoButtonRef, reachedMax, recordsCountLabel]
+    [
+      breakPoint,
+      definedLabels.moreData,
+      definedLabels.totalRecordsReached,
+      hasMore,
+      infoButtonRef,
+      reachedMax,
+      recordsCountLabel
+    ]
   );
   return /* @__PURE__ */ jsxs(
     Box,
@@ -10217,8 +10282,8 @@ const NoMemoPagination = ({
               className: "pagination__fullScreenButton",
               onClick: onMaximize,
               icon: !isMaximized ? "Maximize" : "Minimize",
-              title: !isMaximized ? window.LBL_MAXIMIZE : window.LBL_MINIMIZE,
-              "aria-label": !isMaximized ? window.LBL_MAXIMIZE : window.LBL_MINIMIZE,
+              title: !isMaximized ? definedLabels.maximize : definedLabels.minimize,
+              "aria-label": !isMaximized ? definedLabels.maximize : definedLabels.minimize,
               iconSize: "Md"
             }
           ),
@@ -10232,8 +10297,8 @@ const NoMemoPagination = ({
                 onClick: () => ApiaUtil.instance.tooltips.open(tooltipProps),
                 ref: setInfoButtonRef,
                 iconSize: "Md",
-                "aria-label": window.BTN_FILE_INFO_TOOLTIP,
-                title: window.BTN_FILE_INFO_TOOLTIP
+                "aria-label": definedLabels.information,
+                title: definedLabels.information
               }
             ) : "",
             breakPoint > 3 && /* @__PURE__ */ jsx(
@@ -10242,7 +10307,7 @@ const NoMemoPagination = ({
                 as: "span",
                 className: "recordsCounter pagination__deleteLabels",
                 title: recordsCountLabel,
-                children: recordsCount !== -1 && `${window.GNR_TOT_RECORDS}: ${recordsCount} `
+                children: recordsCount !== -1 && `${definedLabels.totalRecords}: ${recordsCount} `
               }
             )
           ] })
@@ -10252,11 +10317,12 @@ const NoMemoPagination = ({
             IconButton,
             {
               variant: "icon-primary",
-              disabled: disabled || internCurrentPage === 1 || isLoading || isPerforming,
-              "aria-label": window.NAV_FIRST_PAGE,
+              disabled: disabled || numberCurrentPage === 1 || isLoading || isPerforming,
+              title: definedLabels.firstPage,
+              "aria-label": definedLabels.firstPage,
               type: "button",
               onClick: () => {
-                setCurrentAndDispatch(1);
+                onPageChange(1);
               },
               icon: "First",
               iconSize: "Sm"
@@ -10266,11 +10332,12 @@ const NoMemoPagination = ({
             IconButton,
             {
               variant: "icon-primary",
-              disabled: disabled || internCurrentPage <= 1 || isLoading || isPerforming,
-              "aria-label": window.NAV_PREVIOUS_PAGE,
+              disabled: disabled || numberCurrentPage <= 1 || isLoading || isPerforming,
+              title: definedLabels.previousPage,
+              "aria-label": definedLabels.previousPage,
               type: "button",
               onClick: () => {
-                setCurrentAndDispatch(internCurrentPage - 1);
+                onPageChange(numberCurrentPage - 1);
               },
               icon: "Previous",
               iconSize: "Sm"
@@ -10281,10 +10348,10 @@ const NoMemoPagination = ({
               Input,
               {
                 className: "pagination__controls__input",
-                "aria-label": window.NAV_INPUT_LABEL,
-                title: `${window.PAGE}: ${internCurrentPage} `,
+                "aria-label": definedLabels.pageInputInstructions,
+                title: `${definedLabels.page}: ${numberCurrentPage} `,
                 ref: InputRef,
-                value: hasNoValue ? "" : internCurrentPage,
+                value: hasNoValue ? "" : numberCurrentPage,
                 onKeyDown: (ev) => {
                   const regex = /([0-9])|(Backspace)|(Tab)/;
                   if (!ev.key.match(regex)) {
@@ -10294,28 +10361,28 @@ const NoMemoPagination = ({
                   if (ev.key === "Enter") {
                     ev.stopPropagation();
                     ev.preventDefault();
-                    setCurrentAndDispatch(internCurrentPage);
+                    onPageChange(numberCurrentPage);
                   }
                 },
                 onBlur: () => {
-                  if (lastEmittedPage !== internCurrentPage) {
-                    setCurrentAndDispatch(internCurrentPage);
-                  }
+                  onPageChange(numberCurrentPage);
                 },
                 onFocus: (ev) => {
                   ev.currentTarget.select();
                 },
                 onChange: (ev) => {
                   setHasNoValue(ev.target.value === "");
-                  setCurrentPage(
-                    Math.max(
-                      1,
-                      Math.min(
-                        noNaN(Number(ev.currentTarget.value)),
-                        pageCount
+                  if (ev.target.value !== "") {
+                    onPageChange(
+                      Math.max(
+                        1,
+                        Math.min(
+                          noNaN(Number(ev.currentTarget.value)),
+                          pageCount
+                        )
                       )
-                    )
-                  );
+                    );
+                  }
                 },
                 disabled: disabled || isLoading || isPerforming
               }
@@ -10327,7 +10394,7 @@ const NoMemoPagination = ({
               Box,
               {
                 as: "span",
-                title: recordsCount !== -1 ? `${window.GNR_TOT_RECORDS} ${recordsCount}` : window.NAV_INPUT_LABEL,
+                title: recordsCount !== -1 ? `${definedLabels.totalRecords} ${recordsCount}` : definedLabels.pageInputInstructions,
                 children: pageCount
               }
             )
@@ -10336,9 +10403,9 @@ const NoMemoPagination = ({
             Select,
             {
               className: "pagination__selectPage",
-              value: internCurrentPage,
+              value: numberCurrentPage,
               onChange: (e) => {
-                setCurrentAndDispatch(Number(e.target.value));
+                onPageChange(Number(e.target.value));
               },
               children: [
                 /* @__PURE__ */ jsxs("option", { disabled: true, children: [
@@ -10355,11 +10422,12 @@ const NoMemoPagination = ({
             IconButton,
             {
               variant: "icon-primary",
-              disabled: disabled || internCurrentPage >= numberPageCount || isLoading || isPerforming,
-              "aria-label": window.NAV_NEXT_PAGE,
+              disabled: disabled || numberCurrentPage >= numberPageCount || isLoading || isPerforming,
+              title: definedLabels.nextPage,
+              "aria-label": definedLabels.nextPage,
               type: "button",
               onClick: () => {
-                setCurrentAndDispatch(internCurrentPage + 1);
+                onPageChange(numberCurrentPage + 1);
               },
               icon: "Next",
               iconSize: "Sm"
@@ -10370,10 +10438,11 @@ const NoMemoPagination = ({
             {
               variant: "icon-primary",
               type: "button",
-              "aria-label": window.NAV_LAST_PAGE,
-              disabled: disabled || internCurrentPage >= numberPageCount || isLoading || isPerforming,
+              title: definedLabels.lastPage,
+              "aria-label": definedLabels.lastPage,
+              disabled: disabled || numberCurrentPage >= numberPageCount || isLoading || isPerforming,
               onClick: () => {
-                setCurrentAndDispatch(numberPageCount);
+                onPageChange(numberPageCount);
               },
               icon: "Last",
               iconSize: "Sm"
@@ -10388,7 +10457,7 @@ const NoMemoPagination = ({
               className: "pagination__deleteFiltersButton",
               onClick: onDeleteFilters,
               children: [
-                breakPoint > 3 && /* @__PURE__ */ jsx(Box, { as: "span", className: "pagination__deleteLabels", children: window.BTN_DELETE_FILTERS }),
+                breakPoint > 3 && /* @__PURE__ */ jsx(Box, { as: "span", className: "pagination__deleteLabels", children: definedLabels.deleteFilters }),
                 /* @__PURE__ */ jsx(
                   Box,
                   {
@@ -10403,7 +10472,8 @@ const NoMemoPagination = ({
           !hideRefreshButton && /* @__PURE__ */ jsx(
             IconButton,
             {
-              "aria-label": window.NAV_REFRESH,
+              title: definedLabels.refresh,
+              "aria-label": definedLabels.refresh,
               onClick: () => onRefresh(numberCurrentPage),
               icon: "Refresh",
               iconSize: "Md",
@@ -10678,9 +10748,7 @@ const HamburguerMenu = ({
         const bounding = document.querySelector(container).getBoundingClientRect();
         if (!hamburguerRef || bounding.height === 0)
           return;
-        const hamburguerHeight = Number(
-          hamburguerRef.querySelector(".hamburguerIcon").clientHeight
-        );
+        const hamburguerHeight = 40;
         const hamburguerTop = bounding.top + bounding.height / 2 - hamburguerHeight / 2 + window.scrollY;
         const shouldOpenBelow = bounding.top <= window.innerHeight / 3;
         const menuTop = shouldOpenBelow ? hamburguerTop + hamburguerHeight + 10 : 10;
@@ -10728,7 +10796,7 @@ const HamburguerMenu = ({
       Box,
       {
         id: "HamburguerIconWrapper",
-        className: "HamburguerIconWrapper",
+        className: `HamburguerIconWrapper ${forceVisibility ? "forced" : ""}`,
         ref: setHamburguerRef,
         as: "aside",
         "aria-label": window.LBL_OPTIONS_VAR,
@@ -11915,5 +11983,5 @@ const _FiltersStore = class _FiltersStore {
 __publicField(_FiltersStore, "instance", new _FiltersStore());
 let FiltersStore = _FiltersStore;
 
-export { Accordion, AccordionAside, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, Aside, AsideLoader, AsidePanel, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, AutoscrollContainer, BaseButton, BodyAside, CalendarModal, Captcha, CenteredHeaderButtons, ChatController, ChatMessage, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DeadSessionModal, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, Dropzone, FavoriteIcon, FieldErrorMessage, FieldLabel, FileCard, FilterConditionDTO, FilterDTO, FiltersStore, FloatingAside, FloatingChatController, FooterButtons, FooterResponsiveButtons, HamburguerMenu, Header, HeaderButtons, IconButton, IconInput, IconsList, Label, LabelBox, LinearLoader, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, Modal, NumberInput, Overlay, Pagination, Parameter, ParameterRender, Parameters, ParametersGroup, ParametersStore, ParametersTable, ProgressBar, RequiredMark, ScreenLocker, ShowResponsive, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Templater, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, UploadHandler, Uploader, WaiTypeAhead, getBase64FromBlob, getBase64FromFile, getFieldErrorStyles, getFieldTouchedStyles, getFileExtension, importComponent, isFavoriteIcon, isImage, isParametersGroup, makeResponsiveComponent, menuController, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useMenu, useModal, useModalContext, useOtherTagButton, useTabsContext };
+export { Accordion, AccordionAside, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, Aside, AsideLoader, AsidePanel, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, AutoscrollContainer, BaseButton, BodyAside, CalendarModal, Captcha, CenteredHeaderButtons, ChatController, ChatMessage, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DeadSessionModal, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, Dropzone, FavoriteIcon, FieldErrorMessage, FieldLabel, FileCard, FilterConditionDTO, FilterDTO, FiltersStore, FloatingAside, FloatingChatController, FooterButtons, FooterResponsiveButtons, HamburguerMenu, Header, HeaderButtons, IconButton, IconInput, IconsList, Label, LabelBox, LinearLoader, LinearSpinnerLock, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, Modal, NumberInput, Overlay, Pagination, Parameter, ParameterRender, Parameters, ParametersGroup, ParametersStore, ParametersTable, ProgressBar, RequiredMark, ScreenLocker, ShowResponsive, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Templater, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, UploadHandler, Uploader, WaiTypeAhead, getBase64FromBlob, getBase64FromFile, getFieldErrorStyles, getFieldTouchedStyles, getFileExtension, importComponent, isFavoriteIcon, isImage, isParametersGroup, makeResponsiveComponent, menuController, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useMenu, useModal, useModalContext, useOtherTagButton, useTabsContext };
 //# sourceMappingURL=index.js.map