@apia/table 3.0.1 → 3.0.2

package/dist/index.js

@@ -1,25 +1,3668 @@
-export { ResponsiveTable } from './ResponsiveTable.js';
-export { ResponsiveTableContext, useResponsiveTableContext } from './ResponsiveTableContext.js';
-export { responsiveTableActions, responsiveTableStore, useResponsiveTable } from './store/index.js';
-export { defaultLabels } from './types.js';
-export { AccordionCell } from './renderers/AccordionCell.js';
-export { AccordionDocNameCellRenderer } from './renderers/AccordionDocNameCellRenderer.js';
-export { AccordionElement } from './renderers/AccordionElement.js';
-export { AccordionHTMLCellRenderer } from './renderers/AccordionHTMLCellRenderer.js';
-export { AccordionRenderer } from './renderers/AccordionRenderer.js';
-export { AdditionalColumnDefaultRenderer } from './renderers/AdditionalColumnDefaultRenderer.js';
-export { DefaultCellRenderer } from './renderers/DefaultCellRenderer.js';
-export { DefaultRowRenderer } from './renderers/DefaultRowRenderer.js';
-export { HTMLCellRenderer } from './renderers/HTMLCellRenderer.js';
-export { IsLoadingRenderer } from './renderers/IsLoadingRenderer.js';
-export { makeAccordionAsyncRenderer } from './renderers/makeAccordionAsyncRenderer.js';
-export { makeAsyncRenderer } from './renderers/makeAsyncRenderer.js';
-export { NoRegistersRenderer } from './renderers/NoRegistersRenderer.js';
-export { PriorityAccordionRenderer } from './renderers/PriorityAccordionRenderer.js';
-export { PriorityRenderer, getPriorityHandler } from './renderers/PriorityRenderer.js';
-export { RowStatesRenderer } from './renderers/RowStatesRenderer.js';
-export { StatusAccordionRenderer } from './renderers/StatusAccordionRenderer.js';
-export { StatusRenderer, getStatusRendererClassName } from './renderers/StatusRenderer.js';
-export { TableRenderer } from './renderers/TableRenderer.js';
-export { DocNameCellRenderer } from './renderers/DocNameCellRenderer.js';
+import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
+import React, { useMemo, useState, useRef, memo, useEffect, useCallback, createRef, forwardRef } from 'react';
+import { Box, getVariant, Input, useBreakpointIndex, Label, Select, Link, Spinner } from '@apia/theme';
+import { useMount, useUpdateEffect, useUnmount, useThrottleFn } from 'ahooks';
+import uniqueId from 'lodash-es/uniqueId';
+import { createSlice, injectReducers, shallowEqual as shallowEqual$1 } from '@apia/store';
+import { addBoundary, useLatest, useUpdateEffect as useUpdateEffect$1, getSpecificParent, isChild, autoDisconnectMutationObserver, getFocusSelector, cantFocusSelector, globalFocus, scrollParentIntoElement, customEvents, debugDispatcher, persistentStorage, EventEmitter, getLabel, getDateFormat, formatMessage, noNaN, downloadUrl, arrayOrArray, useMount as useMount$1 } from '@apia/util';
+import { shallowEqual } from 'react-redux';
+import { useOtherTagButton, AutoEllipsis, ApiaFilter, IconButton, AccordionItem, Accordion, RequiredMark, ApiaUtil, SimpleButton } from '@apia/components';
+import { Icon } from '@apia/icons';
+import { FaSortUp, FaSortDown, FaSort, FaSquare } from '@meronex/icons/fa';
+import { MdKeyboardArrowDown, MdKeyboardArrowRight } from '@meronex/icons/md/';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+const defaultLabels = {
+  noRegisters: window.FINDER_NO_DATA
+};
+
+function getInitialState$1() {
+  return {
+    allowEdition: false,
+    allowSelection: true,
+    columns: [],
+    expandedRows: [],
+    isEditionMode: false,
+    isFocused: false,
+    filters: [],
+    focusedColumn: 0,
+    focusedRow: 0,
+    hasNonAdditionalFilters: false,
+    isMultiple: true,
+    nonAdditionalColumnsCount: 0,
+    rows: [],
+    selectedRows: [],
+    statesColumns: 0
+  };
+}
+
+function addRowBoundary(newRow, state) {
+  const hasFiltersRow = !!state.filters.find(
+    (current) => !!state.columns.find((search) => search.name === current.column)
+  );
+  return addBoundary({
+    number: newRow,
+    min: hasFiltersRow ? -2 : -1,
+    max: Math.max(0, state.rows.length - 1)
+  });
+}
+function addColumnBoundary(newColumn, state) {
+  return addBoundary({
+    number: newColumn,
+    min: 0,
+    max: state.nonAdditionalColumnsCount + state.statesColumns + (state.hasNonAdditionalFilters ? 1 : 0)
+  });
+}
+function isBasicRow(row) {
+  return typeof row === "object" && !!row && "forbidSelection" in row;
+}
+function filterNonSellectableRows(state, newSelection) {
+  let expandedRowsBefore = 0;
+  return newSelection.filter((selectedRowIndex) => {
+    const row = state.rows[selectedRowIndex + expandedRowsBefore];
+    if (state.expandedRows.includes(selectedRowIndex))
+      expandedRowsBefore += 1;
+    return !(isBasicRow(row) && row.forbidSelection);
+  });
+}
+function setNewFocused(state, {
+  /**
+   * Propiedad proveniente del evento click o keydown.
+   */
+  ctrlKey,
+  /**
+   * Propiedad proveniente del evento click o keydown.
+   */
+  shiftKey,
+  newFocusedColumn,
+  newFocusedRow,
+  /**
+   * Con este método se puede seleccionar cuál celda
+   * va a recibir el foco y la selección, o solamente
+   * el foco si esta propiedad es pasada en false.
+   */
+  shouldSelectNewFocused
+}) {
+  let actualNewFocusedRow = Math.round(
+    addRowBoundary(newFocusedRow ?? state.focusedRow ?? 0, state) * 2
+  ) / 2;
+  const actualNewFocusedColumn = addColumnBoundary(
+    newFocusedColumn ?? state.focusedColumn,
+    state
+  );
+  state.focusedColumn = actualNewFocusedColumn;
+  state.focusedRow = actualNewFocusedRow;
+  state.isFocused = shouldSelectNewFocused ?? false;
+  if (shouldSelectNewFocused === false || actualNewFocusedRow < 0)
+    return;
+  if (Math.round(actualNewFocusedRow) - actualNewFocusedRow !== 0)
+    actualNewFocusedRow = Math.floor(actualNewFocusedRow);
+  const isDeselectingWithCtrl = ctrlKey && state.selectedRows.includes(actualNewFocusedRow);
+  if (state.allowSelection !== false) {
+    if (!ctrlKey && !shiftKey || state.isMultiple === false && !isDeselectingWithCtrl)
+      state.selectedRows = filterNonSellectableRows(state, [
+        actualNewFocusedRow
+      ]);
+    else if (ctrlKey && state.isMultiple || isDeselectingWithCtrl) {
+      state.selectedRows = filterNonSellectableRows(
+        state,
+        state.selectedRows.includes(actualNewFocusedRow) ? state.selectedRows.filter(
+          (current) => current !== actualNewFocusedRow
+        ) : [...state.selectedRows, actualNewFocusedRow]
+      );
+    } else if (shiftKey && state.isMultiple) {
+      const sortedSelectedRows = [...state.selectedRows].sort((a, b) => a - b);
+      let minSelectedRow = sortedSelectedRows[0];
+      let maxSelectedRow = sortedSelectedRows[sortedSelectedRows.length - 1];
+      if (minSelectedRow === void 0) {
+        state.selectedRows = filterNonSellectableRows(state, [
+          actualNewFocusedRow
+        ]);
+        return;
+      }
+      if (actualNewFocusedRow < minSelectedRow)
+        minSelectedRow = actualNewFocusedRow;
+      if (actualNewFocusedRow > maxSelectedRow)
+        maxSelectedRow = actualNewFocusedRow;
+      const newSelectedRows = filterNonSellectableRows(
+        state,
+        new Array(maxSelectedRow - minSelectedRow + 1).fill("").map((_, i) => i + (minSelectedRow ?? 0))
+      );
+      state.selectedRows = filterNonSellectableRows(state, newSelectedRows);
+    }
+  }
+}
+
+function willHandleKey(ev, state) {
+  const actualKey = ev.key.toLowerCase();
+  if (state.isEditionMode)
+    return false;
+  if (actualKey === " " && ev.ctrlKey)
+    return true;
+  if (actualKey === "a" && ev.ctrlKey)
+    return true;
+  if (actualKey === "m" && ev.ctrlKey)
+    return true;
+  if (state.draggingRow !== void 0) {
+    return ["Escape", "Enter"].includes(ev.key);
+  }
+  return [
+    "arrowup",
+    "arrowdown",
+    "arrowleft",
+    "arrowright",
+    "end",
+    "enter",
+    "home",
+    "pageup",
+    "pagedown"
+  ].includes(ev.key.toLowerCase());
+}
+function handleKey(state, { ev }) {
+  const {
+    altKey: isAltPressed,
+    ctrlKey: isCtrlPressed,
+    key,
+    shiftKey: isShiftPressed
+  } = ev;
+  if (willHandleKey(ev, state))
+    ev.preventDefault();
+  const actualKey = key.toLowerCase();
+  const setFocus = ({
+    newFocusedColumn,
+    newFocusedRow,
+    ...rest
+  }) => setNewFocused(state, {
+    altKey: isAltPressed,
+    ctrlKey: isCtrlPressed,
+    shiftKey: isShiftPressed,
+    newFocusedColumn,
+    newFocusedRow,
+    ...rest
+  });
+  if (!state.isEditionMode) {
+    if (actualKey === "enter" && (state.allowEdition === true || state.focusedRow < 0))
+      state.isEditionMode = true;
+    else
+      switch (actualKey) {
+        case "arrowup": {
+          let sumRate = state.expandedRows.includes(state.focusedRow - 1) ? 0.6 : 1;
+          if (Math.round(state.focusedRow) - state.focusedRow !== 0)
+            sumRate = 0.5;
+          setFocus({
+            newFocusedRow: state.focusedRow - sumRate,
+            shouldSelectNewFocused: !isCtrlPressed
+          });
+          break;
+        }
+        case "arrowdown": {
+          let sumRate = state.expandedRows.includes(state.focusedRow) ? 0.6 : 1;
+          if (Math.round(state.focusedRow) - state.focusedRow !== 0)
+            sumRate = 0.5;
+          setFocus({
+            newFocusedRow: state.focusedRow + sumRate,
+            shouldSelectNewFocused: !isCtrlPressed
+          });
+          break;
+        }
+        case "arrowleft":
+        case "arrowright": {
+          setFocus({
+            newFocusedColumn: state.focusedColumn + (actualKey === "arrowleft" ? -1 : 1),
+            shouldSelectNewFocused: !isCtrlPressed
+          });
+          break;
+        }
+        case "home": {
+          if (isCtrlPressed)
+            setFocus({ newFocusedColumn: 0, newFocusedRow: 0, ctrlKey: false });
+          else
+            setFocus({ newFocusedColumn: 0 });
+          break;
+        }
+        case "end": {
+          if (isCtrlPressed)
+            setFocus({
+              newFocusedRow: Number.POSITIVE_INFINITY,
+              newFocusedColumn: Number.POSITIVE_INFINITY,
+              ctrlKey: false
+            });
+          else
+            setFocus({
+              newFocusedColumn: Number.POSITIVE_INFINITY
+            });
+          break;
+        }
+        case "pageup": {
+          setFocus({
+            newFocusedRow: state.focusedRow - 5,
+            shouldSelectNewFocused: !isCtrlPressed
+          });
+          break;
+        }
+        case "pagedown": {
+          setFocus({
+            newFocusedRow: state.focusedRow + 5,
+            shouldSelectNewFocused: !isCtrlPressed
+          });
+          break;
+        }
+        case " ": {
+          if (isCtrlPressed)
+            setFocus({
+              newFocusedRow: state.focusedRow
+            });
+          break;
+        }
+        case "a": {
+          if (isCtrlPressed && state.allowSelection)
+            state.selectedRows = state.rows.map((_, i) => i);
+          break;
+        }
+      }
+  } else
+    switch (actualKey) {
+      case "escape":
+      case "enter": {
+        if (state.isEditionMode)
+          state.isEditionMode = false;
+        ev.stopPropagation();
+        break;
+      }
+    }
+}
+
+function getReduxActions() {
+  return {
+    handleKey(state, { payload }) {
+      handleKey(state[payload.id], payload);
+    },
+    selectionStateUpdate(state, { payload: { id, ...payload } }) {
+      state[id] = { ...state[id], ...payload };
+    },
+    setNewFocused(state, { payload: { id, ...payload } }) {
+      setNewFocused(state[id], payload);
+    },
+    updateByClick(state, {
+      payload: {
+        id,
+        colIndex,
+        rowIndex,
+        ariaColIndex,
+        ariaRowIndex,
+        isFocused,
+        ...payload
+      }
+    }) {
+      const hasFiltersRow = state[id].hasNonAdditionalFilters;
+      state[id].isEditionMode = false;
+      const newFocusedColumn = colIndex ?? ariaColIndex ?? 1;
+      const newFocusedRow = ariaRowIndex !== void 0 ? ariaRowIndex : (rowIndex ?? 0) - (1 + (hasFiltersRow ? 2 : 1));
+      setNewFocused(state[id], {
+        ...payload,
+        newFocusedColumn,
+        newFocusedRow
+      });
+      if (isFocused !== void 0)
+        state[id].isFocused = isFocused;
+    }
+  };
+}
+
+function getController2ReduxActions() {
+  return {
+    controller2UpdateSelectionState(state, {
+      payload: { tableName, ...payload }
+    }) {
+      Object.assign(state[tableName], payload);
+    }
+  };
+}
+
+function getInitialState() {
+  const newState = {
+    ...getInitialState$1(),
+    allowSelection: true,
+    allowSorting: true,
+    filters: [],
+    isLoading: false,
+    isMultiple: true,
+    accordionIndexColumns: {},
+    expandedRows: []
+  };
+  return newState;
+}
+const responsiveTableSlice = createSlice({
+  name: "responsiveTableSlice",
+  initialState: {},
+  reducers: {
+    update(state, {
+      payload: { tableName, handleFocus, ...rest }
+    }) {
+      if (!state[tableName])
+        state[tableName] = getInitialState();
+      state[tableName] = { ...state[tableName], ...rest };
+      if (handleFocus !== false) {
+        setNewFocused(state[tableName], {
+          altKey: false,
+          ctrlKey: false,
+          shiftKey: false,
+          shouldSelectNewFocused: rest.isFocused ?? state[tableName].isFocused
+        });
+      }
+      if (rest.columns) {
+        state[tableName].nonAdditionalColumnsCount = rest.columns.filter(
+          (current) => !current.showAsAdditional
+        ).length;
+      }
+      if (rest.rows) {
+        state[tableName].statesColumns = Math.max(
+          state[tableName]?.reserveColumnsForStates ?? 0,
+          ...state[tableName]?.rows?.map(
+            (current) => current.states?.length ?? 0
+          ) ?? [0]
+        );
+      }
+      if (rest.filters) {
+        state[tableName].hasNonAdditionalFilters = rest.filters.filter(
+          (current) => !current.asAdditional && (rest.columns ?? state[tableName].columns)?.find(
+            (search) => search.name === current.column
+          )
+        ).length > 0;
+      }
+    },
+    addRows(state, { payload }) {
+      if (!state[payload.tableName])
+        state[payload.tableName] = getInitialState();
+      state[payload.tableName].rows = state[payload.tableName].rows.concat(
+        ...payload.newRows
+      );
+      setNewFocused(state[payload.tableName], {
+        altKey: false,
+        ctrlKey: false,
+        shiftKey: false,
+        shouldSelectNewFocused: true,
+        newFocusedRow: state[payload.tableName].rows.length
+      });
+    },
+    deleteRows(state, { payload }) {
+      const table = state[payload.tableName];
+      const minIndex = payload.rowIndices.reduce((min, current) => {
+        return current < min ? current : min;
+      }, Infinity);
+      table.rows = table.rows.filter(
+        (_, index) => !payload.rowIndices.includes(index)
+      );
+      setNewFocused(state[payload.tableName], {
+        altKey: false,
+        ctrlKey: false,
+        shiftKey: false,
+        shouldSelectNewFocused: true,
+        newFocusedRow: minIndex
+      });
+      state[payload.tableName].isFocused = false;
+    },
+    destroy(state, { payload: { tableName } }) {
+      delete state[tableName];
+    },
+    swapFocusedRow(state, {
+      payload: { newIndex, tableName }
+    }) {
+      const tableState = state[tableName];
+      const focusedIndex = tableState.focusedRow;
+      if (focusedIndex === void 0 || newIndex < 0 || newIndex >= tableState.rows.length)
+        return;
+      if (focusedIndex === newIndex) {
+        if (tableState.draggingRow === newIndex)
+          tableState.draggingRow = void 0;
+        else
+          tableState.draggingRow = newIndex;
+        return;
+      }
+      const isSelected = tableState.selectedRows.includes(focusedIndex);
+      if (isSelected) {
+        tableState.selectedRows = [
+          ...tableState.selectedRows.filter(
+            (current) => current !== focusedIndex
+          ),
+          newIndex
+        ];
+      }
+      const aux = tableState.rows[newIndex];
+      tableState.rows[newIndex] = tableState.rows[focusedIndex];
+      tableState.rows[focusedIndex] = aux;
+      tableState.focusedRow = newIndex;
+      tableState.draggingRow = newIndex;
+    },
+    // Rows selection
+    ...getReduxActions(),
+    ...getController2ReduxActions()
+  }
+});
+const { store: responsiveTableStore, useSelector } = injectReducers({
+  responsiveTableSlice: responsiveTableSlice.reducer
+});
+const useResponsiveTable = useSelector;
+const responsiveTableActions = responsiveTableSlice.actions;
+
+const ResponsiveTableReactContext = React.createContext({});
+const tableContexts = {};
+function useResponsiveTableContext(tableName) {
+  const reactContext = React.useContext(ResponsiveTableReactContext);
+  const context = tableName ? tableContexts[tableName] : reactContext;
+  if (!context)
+    throw new Error("There is no ResponsiveTableContext");
+  return context;
+}
+const NoMemoResponsiveTableContext = ({
+  allowEdition,
+  allowRowsKeyboardSorting,
+  allowSelection,
+  allowSorting,
+  avoidReparseSelectionOnRowChange,
+  children = /* @__PURE__ */ jsx(ResponsiveTable, {}),
+  className,
+  currentBreakPoint,
+  customLabels,
+  columns,
+  filters,
+  rows,
+  label,
+  isMultiple,
+  name,
+  onChangeSelection,
+  onFilterBlur,
+  onFilterChange,
+  onFilterPressEnter,
+  onSelectRows,
+  onSortChange,
+  reserveColumnsForStates,
+  SelectionHandler,
+  variant
+}) => {
+  const actualName = React.useMemo(
+    () => name ?? uniqueId("responsiveTable"),
+    [name]
+  );
+  const labels = React.useMemo(
+    () => ({ ...defaultLabels, ...customLabels }),
+    [customLabels]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      currentBreakPoint,
+      label,
+      labels,
+      name: actualName,
+      onChangeSelection,
+      onFilterBlur,
+      onFilterChange,
+      onFilterPressEnter,
+      onSelectRows,
+      onSortChange,
+      SelectionHandler
+    }),
+    [
+      actualName,
+      currentBreakPoint,
+      label,
+      labels,
+      onChangeSelection,
+      onFilterBlur,
+      onFilterChange,
+      onFilterPressEnter,
+      onSelectRows,
+      onSortChange,
+      SelectionHandler
+    ]
+  );
+  tableContexts[actualName] = contextValue;
+  useMount(() => {
+    responsiveTableStore.dispatch(
+      responsiveTableActions.update({
+        allowEdition,
+        allowRowsKeyboardSorting,
+        allowSelection,
+        allowSorting,
+        columns,
+        filters: filters ?? [],
+        rows,
+        isMultiple,
+        tableName: actualName,
+        reserveColumnsForStates,
+        handleFocus: !SelectionHandler
+      })
+    );
+  });
+  useUpdateEffect(() => {
+    responsiveTableStore.dispatch(
+      responsiveTableActions.update({
+        tableName: actualName,
+        columns,
+        handleFocus: !SelectionHandler
+      })
+    );
+  }, [columns]);
+  useUpdateEffect(() => {
+    responsiveTableStore.dispatch(
+      responsiveTableActions.update({
+        tableName: actualName,
+        rows,
+        handleFocus: !SelectionHandler
+      })
+    );
+    if (!SelectionHandler && avoidReparseSelectionOnRowChange !== true) {
+      const selected = rows.map((current, i) => ({ ...current, i })).filter((current) => current.initiallySelected);
+      responsiveTableStore.dispatch(
+        responsiveTableActions.update({
+          tableName: actualName,
+          selectedRows: selected.map((current) => current.i)
+        })
+      );
+    }
+  }, [rows]);
+  useUpdateEffect(() => {
+    responsiveTableStore.dispatch(
+      responsiveTableActions.update({
+        tableName: actualName,
+        filters,
+        handleFocus: !SelectionHandler
+      })
+    );
+  }, [filters]);
+  useUnmount(() => {
+    responsiveTableStore.dispatch(
+      responsiveTableActions.destroy({ tableName: actualName })
+    );
+  });
+  return /* @__PURE__ */ jsx(ResponsiveTableReactContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      id: name,
+      className: `responsiveTableContext__wrapper ${className ?? ""}`,
+      ...variant ? getVariant(variant) : null,
+      children
+    }
+  ) });
+};
+const ResponsiveTableContext = React.memo(NoMemoResponsiveTableContext);
+
+let scrollTimeout;
+function makeKeyHandler(actions, id, config) {
+  return function KeyHandler({
+    children,
+    onChangeSelection,
+    onSelectRows,
+    ...props
+  }) {
+    const { run: keyHandler } = useThrottleFn(
+      (ev) => {
+        if (!["shift", "alt", "control"].includes(ev.key.toLowerCase())) {
+          responsiveTableStore.dispatch(actions.handleKey({ id, ev }));
+        }
+      },
+      config?.throttleOptions ?? { wait: 100 }
+    );
+    const [ref, setRef] = React.useState(null);
+    const selectedRows = useResponsiveTable(
+      (global) => {
+        const state = config.stateSelector(global);
+        return (state?.selectedRows ?? []).map((current) => ({
+          index: current,
+          row: state.rows[current]
+        }));
+      },
+      (a, b) => shallowEqual(
+        a.map((current) => current.index),
+        b.map((current) => current.index)
+      )
+    );
+    const selectedRowsRef = useLatest(selectedRows);
+    const { allowKeyboardSorting, focusedCell, isEditionMode, isFocused } = useResponsiveTable((global) => {
+      const state = config.stateSelector(global);
+      return {
+        focusedCell: state?.focusedRow !== void 0 ? `${state?.focusedRow}_${state?.focusedColumn}` : void 0,
+        isEditionMode: state?.isEditionMode,
+        rows: state?.rows,
+        isFocused: state?.isFocused,
+        allowKeyboardSorting: state?.allowRowsKeyboardSorting
+      };
+    }, shallowEqual);
+    useUpdateEffect$1(() => {
+      if (onChangeSelection)
+        onChangeSelection(selectedRows);
+    }, [onChangeSelection, selectedRows]);
+    const handleClick = React.useCallback(
+      (ev) => {
+        if (ev.target.closest(".moreInformationButton"))
+          return;
+        if (ev.shiftKey) {
+          document.getSelection()?.removeAllRanges();
+        }
+        const parentRow = getSpecificParent(
+          ev.target,
+          (current) => {
+            if (current.tagName.toLowerCase() === "table")
+              return null;
+            if (current.matches("tr")) {
+              return true;
+            }
+            return false;
+          }
+        );
+        const parentCell = getSpecificParent(
+          ev.target,
+          (current) => {
+            if (current.tagName.toLowerCase() === "table")
+              return null;
+            if (current.matches("td,th")) {
+              return true;
+            }
+            return false;
+          }
+        );
+        if (parentCell && parentRow) {
+          responsiveTableStore.dispatch(
+            actions.updateByClick({
+              altKey: ev.altKey,
+              id,
+              ctrlKey: ev.ctrlKey,
+              ariaColIndex: Number(parentCell.getAttribute("aria-colindex")),
+              rowIndex: Number(parentRow.getAttribute("data-focusindex")),
+              shiftKey: ev.shiftKey
+            })
+          );
+        }
+      },
+      []
+    );
+    const handleDoubleClick = React.useCallback(
+      (ev) => {
+        if (isChild(
+          ev.target,
+          (current) => current.tagName === "THEAD"
+        ))
+          return;
+        ev.preventDefault();
+        if (onSelectRows)
+          onSelectRows(
+            selectedRowsRef.current,
+            config.stateSelector(responsiveTableStore.getState()).focusedRow
+          );
+      },
+      [onSelectRows, selectedRowsRef]
+    );
+    const initialized = React.useRef(true);
+    const running = React.useRef(false);
+    const doFocusThings = React.useCallback(() => {
+      if (!running.current) {
+        running.current = true;
+        if (focusedCell === void 0) {
+          running.current = false;
+          return () => {
+          };
+        }
+        if (ref) {
+          const disconnectObserver = autoDisconnectMutationObserver(
+            ref,
+            () => {
+              scrollTimeout = setTimeout(() => {
+                const focusedElement = ref.querySelector(
+                  '[data-focused="true"]'
+                );
+                let tableCellElement = null;
+                let tableCellWidget = null;
+                if (["td", "th"].includes(
+                  focusedElement?.tagName.toLowerCase() ?? ""
+                )) {
+                  tableCellElement = focusedElement;
+                  tableCellWidget = focusedElement?.querySelector(
+                    getFocusSelector(":not(.debug_info__button)")
+                  );
+                }
+                if (focusedElement?.tagName.toLowerCase() === "tr") {
+                  tableCellElement = focusedElement.querySelector("td,th");
+                  tableCellWidget = focusedElement.querySelector(
+                    getFocusSelector(":not(.debug_info__button)")
+                  ) || tableCellElement;
+                }
+                if (tableCellWidget) {
+                  tableCellElement?.setAttribute("tabIndex", "-1");
+                  tableCellWidget.setAttribute("tabIndex", "0");
+                } else
+                  tableCellElement?.setAttribute("tabIndex", "0");
+                if (!isEditionMode) {
+                  const allFocusableElements = ref?.querySelectorAll(
+                    getFocusSelector(
+                      `${cantFocusSelector}:not([data-focused="true"])`
+                    )
+                  );
+                  allFocusableElements?.forEach((current) => {
+                    if (current !== tableCellWidget) {
+                      current.setAttribute("tabIndex", "-1");
+                    }
+                    if (tableCellWidget?.tagName === "BUTTON")
+                      tableCellWidget.setAttribute("role", "gridcell");
+                  });
+                } else {
+                  const focusableElements = tableCellElement?.querySelectorAll('[tabindex="-1"]');
+                  focusableElements?.forEach(
+                    (current) => current.setAttribute("tabIndex", "0")
+                  );
+                }
+                const focusElement = tableCellWidget ?? tableCellElement;
+                const row = getSpecificParent(
+                  focusElement,
+                  (current) => current.tagName === "TR"
+                );
+                if (focusElement && initialized.current && config.stateSelector(responsiveTableStore.getState()).isFocused) {
+                  globalFocus.focus = focusElement;
+                  focusElement.focus();
+                }
+                if (row) {
+                  scrollParentIntoElement(row, 55, 2, 100, "makeKeyHandler");
+                }
+                if (!initialized.current) {
+                  initialized.current = true;
+                }
+              }, 0);
+            },
+            { timeout: 5e3 }
+          );
+          running.current = false;
+          return () => {
+            disconnectObserver();
+            clearTimeout(scrollTimeout);
+          };
+        }
+        running.current = false;
+      }
+      return () => {
+      };
+    }, [focusedCell, ref, isEditionMode]);
+    React.useLayoutEffect(doFocusThings, [
+      focusedCell,
+      isFocused,
+      isEditionMode
+    ]);
+    React.useEffect(() => {
+      function handleFocus(ev) {
+        const targetTable = getSpecificParent(
+          ev.target,
+          (current) => current.tagName.toLowerCase() === "table"
+        );
+        const relatedTargetTable = getSpecificParent(
+          ev.relatedTarget,
+          (current) => current.tagName.toLowerCase() === "table"
+        );
+        if (!relatedTargetTable || relatedTargetTable !== targetTable)
+          handleClick(ev);
+      }
+      ref?.addEventListener("dblclick", handleDoubleClick);
+      ref?.addEventListener("mousedown", handleClick);
+      ref?.addEventListener("focusin", handleFocus);
+      ref?.addEventListener(customEvents.focus, handleClick);
+      return () => {
+        ref?.removeEventListener("mousedown", handleClick);
+        ref?.removeEventListener("dblclick", handleDoubleClick);
+        ref?.removeEventListener("focusin", handleFocus);
+        ref?.removeEventListener(customEvents.focus, handleClick);
+      };
+    }, [ref]);
+    const isDragging = React.useRef(false);
+    const isFocusedRef = React.useRef(false);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: setRef,
+        ...props,
+        className: `selection__keyHandler ${props.className ?? ""}`,
+        onBlur: React.useCallback(
+          (ev) => {
+            if (!ev.relatedTarget || !getSpecificParent(
+              ev.relatedTarget,
+              (current) => current === ref
+            )) {
+              responsiveTableStore.dispatch(
+                actions.selectionStateUpdate({ id, isFocused: false })
+              );
+              isFocusedRef.current = false;
+            }
+          },
+          [ref]
+        ),
+        onFocus: React.useCallback(() => {
+          isFocusedRef.current = true;
+        }, []),
+        sx: React.useMemo(
+          () => ({ overflow: "auto", position: "relative" }),
+          []
+        ),
+        onKeyDown: React.useCallback(
+          (ev) => {
+            const state = config.stateSelector(responsiveTableStore.getState());
+            if (willHandleKey(
+              ev,
+              config.stateSelector(responsiveTableStore.getState())
+            )) {
+              ev.preventDefault();
+              ev.stopPropagation();
+            }
+            if (actions.swapFocusedRow && isDragging.current && allowKeyboardSorting) {
+              if ((ev.key === "Enter" || ev.key === "Escape") && isDragging.current) {
+                isDragging.current = false;
+                responsiveTableStore.dispatch(
+                  actions.swapFocusedRow({
+                    tableName: id,
+                    newIndex: state.focusedRow
+                  })
+                );
+              } else if (["ArrowDown", "ArrowUp"].includes(ev.key)) {
+                if (ev.key === "ArrowDown") {
+                  responsiveTableStore.dispatch(
+                    actions.swapFocusedRow({
+                      tableName: id,
+                      newIndex: state.focusedRow + 1
+                    })
+                  );
+                } else {
+                  responsiveTableStore.dispatch(
+                    actions.swapFocusedRow({
+                      tableName: id,
+                      newIndex: state.focusedRow - 1
+                    })
+                  );
+                }
+              }
+            } else if (ev.key === "m" && ev.ctrlKey && !isDragging.current && state.focusedRow >= 0 && actions.swapFocusedRow) {
+              isDragging.current = true;
+              responsiveTableStore.dispatch(
+                actions.swapFocusedRow({
+                  tableName: id,
+                  newIndex: state.focusedRow
+                })
+              );
+            } else {
+              const currentSelectedRows = (state?.selectedRows ?? []).map((current) => ({
+                index: current,
+                row: state.rows[current]
+              }));
+              if (props.onKeyDown)
+                props.onKeyDown(ev);
+              if (ev.key === "Enter" && onSelectRows && state.focusedRow >= 0) {
+                onSelectRows(currentSelectedRows, state.focusedRow);
+              }
+              keyHandler(ev);
+            }
+          },
+          [allowKeyboardSorting, keyHandler, onSelectRows, props]
+        ),
+        children
+      }
+    );
+  };
+}
+
+const NoMemoKeyHandler = (props) => {
+  const { name, onChangeSelection, onSelectRows, SelectionHandler } = useResponsiveTableContext();
+  const Handler = React.useMemo(
+    () => SelectionHandler || makeKeyHandler(responsiveTableActions, name, {
+      throttleOptions: { wait: 50 },
+      stateSelector: (global) => global.responsiveTableSlice[name]
+    }),
+    [SelectionHandler, name]
+  );
+  return /* @__PURE__ */ jsx(
+    Handler,
+    {
+      onChangeSelection,
+      onSelectRows,
+      ...props
+    }
+  );
+};
+const KeyHandler = React.memo(NoMemoKeyHandler);
+
+function getDomStoreProps(element, elementProps, stateSelector) {
+  const globalState = responsiveTableStore.getState();
+  const tableState = stateSelector(globalState);
+  const hasNonAdditionalFilters = tableState?.hasNonAdditionalFilters;
+  const startDataRowIndex = hasNonAdditionalFilters ? 2 : 1;
+  const statesColumns = tableState?.statesColumns ?? 0;
+  let expandedBeforeThisRow = 0;
+  if (element === "tr")
+    expandedBeforeThisRow = tableState?.expandedRows.filter(
+      (current) => current < elementProps.rowIndex
+    ).length;
+  let isFocused = false;
+  let isSelected = false;
+  switch (element) {
+    case "filterTd": {
+      const castedProps = elementProps;
+      isFocused = tableState?.focusedRow === 1 - startDataRowIndex && addBoundary(tableState?.focusedColumn ?? 0, 0) - statesColumns === castedProps.columnIndex + 1 + (hasNonAdditionalFilters ? 1 : 0);
+      break;
+    }
+    case "tr": {
+      const castedProps = elementProps;
+      isFocused = !tableState ? false : tableState.focusedRow === castedProps.rowIndex && tableState?.focusedColumn === 0 || Math.floor(tableState?.focusedRow) === castedProps.rowIndex && Math.round(tableState?.focusedRow) - tableState.focusedRow !== 0 && !!castedProps.isTheExpandedRow;
+      isSelected = !castedProps.isTheExpandedRow && tableState?.selectedRows.includes(castedProps.rowIndex);
+      break;
+    }
+    case "headerTr": {
+      isFocused = !tableState ? false : tableState.focusedRow === 0 && tableState?.focusedColumn === 0;
+      isSelected = false;
+      break;
+    }
+    case "stateCell": {
+      const castedProps = elementProps;
+      isFocused = tableState?.focusedRow === castedProps.rowIndex && (tableState?.focusedColumn ?? 0) === castedProps.columnIndex + 1 + (hasNonAdditionalFilters ? 1 : 0);
+      break;
+    }
+    case "additionalTd": {
+      const castedProps = elementProps;
+      isFocused = tableState?.focusedRow === castedProps.rowIndex && (tableState?.focusedColumn ?? 0) === 1;
+      break;
+    }
+    case "td": {
+      const castedProps = elementProps;
+      isFocused = tableState?.focusedRow === castedProps.rowIndex && (tableState?.focusedColumn ?? 0) - statesColumns === castedProps.columnIndex + 1 + (hasNonAdditionalFilters ? 1 : 0);
+      break;
+    }
+    case "headerStateCell": {
+      const castedProps = elementProps;
+      isFocused = tableState?.focusedRow === castedProps.rowIndex - 1 - startDataRowIndex && addBoundary(tableState?.focusedColumn, 0) === castedProps.columnIndex + 1 + (hasNonAdditionalFilters ? 1 : 0);
+      break;
+    }
+    case "th": {
+      const castedProps = elementProps;
+      isFocused = tableState?.focusedRow === 0 - startDataRowIndex && addBoundary((tableState?.focusedColumn ?? 0) - statesColumns, 0) === castedProps.columnIndex + 1 + (hasNonAdditionalFilters ? 1 : 0);
+      break;
+    }
+    case "separator": {
+      const castedProps = elementProps;
+      isFocused = !tableState ? false : tableState.focusedRow === castedProps.rowIndex;
+      break;
+    }
+  }
+  return {
+    columns: tableState?.columns ?? [],
+    expandedBeforeThisRow,
+    isEditionMode: tableState?.isEditionMode,
+    hasNonAdditionalFilters,
+    rowsLength: element === "table" ? tableState?.rows.length : "",
+    isSelected,
+    isFocused,
+    startDataRowIndex,
+    statesColumns: tableState?.statesColumns
+  };
+}
+function getDomProps(state, element, elementProps) {
+  let returnObject = {};
+  switch (element) {
+    case "filterTd": {
+      const castedProps = elementProps;
+      returnObject = {
+        "aria-colindex": castedProps.columnIndex + 1 + state.statesColumns + (state.hasNonAdditionalFilters ? 1 : 0),
+        "data-editionmode": state.isEditionMode && state.isFocused,
+        "data-focused": state.isFocused,
+        tabIndex: state.isFocused ? 0 : -1,
+        "data-rowindex": 2
+      };
+      break;
+    }
+    case "separator": {
+      const castedProps = elementProps;
+      returnObject = {
+        "aria-rowindex": castedProps.rowIndex + state.startDataRowIndex + 1 + state.expandedBeforeThisRow,
+        "data-focusindex": castedProps.rowIndex + state.startDataRowIndex + 1,
+        "aria-selected": state.isSelected,
+        "data-focused": state.isFocused,
+        "aria-expanded": false
+      };
+      break;
+    }
+    case "table": {
+      returnObject = {
+        role: "treegrid",
+        "aria-colcount": state.columns.length,
+        "aria-rowcount": state.rowsLength
+      };
+      break;
+    }
+    case "tr": {
+      const castedProps = elementProps;
+      returnObject = {
+        "aria-rowindex": castedProps.rowIndex + state.startDataRowIndex + 1 + state.expandedBeforeThisRow + (castedProps.isTheExpandedRow ? 1 : 0),
+        "data-focusindex": castedProps.rowIndex + state.startDataRowIndex + 1 + (castedProps.isTheExpandedRow ? 0.5 : 0),
+        "data-rowindex": castedProps.rowIndex,
+        "aria-selected": state.isSelected,
+        "data-focused": state.isFocused,
+        "aria-expanded": castedProps.isThisRowExpanded,
+        tabIndex: state.isFocused ? 0 : -1
+      };
+      break;
+    }
+    case "headerTr": {
+      returnObject = {
+        "aria-rowindex": 1,
+        "data-focusindex": 1,
+        "data-rowindex": state.hasNonAdditionalFilters ? -2 : -1,
+        "aria-selected": false,
+        "data-focused": state.isFocused,
+        "aria-expanded": false
+      };
+      break;
+    }
+    case "td": {
+      const castedProps = elementProps;
+      returnObject = {
+        "aria-colindex": castedProps.columnIndex + 1 + state.statesColumns + (state.hasNonAdditionalFilters ? 1 : 0),
+        "data-editionmode": state.isEditionMode && state.isFocused,
+        "data-focused": state.isFocused,
+        tabIndex: state.isFocused ? 0 : -1,
+        "data-rowindex": castedProps.rowIndex + state.startDataRowIndex + 1
+      };
+      break;
+    }
+    case "additionalTd": {
+      const castedProps = elementProps;
+      returnObject = {
+        "aria-colindex": 1,
+        "data-editionmode": state.isEditionMode && state.isFocused,
+        "data-focused": state.isFocused,
+        tabIndex: state.isFocused ? 0 : -1,
+        "data-rowindex": castedProps.rowIndex + state.startDataRowIndex + 1
+      };
+      break;
+    }
+    case "stateCell": {
+      const castedProps = elementProps;
+      returnObject = {
+        "aria-colindex": castedProps.columnIndex + 1 + (state.hasNonAdditionalFilters ? 1 : 0),
+        "data-editionmode": state.isEditionMode && state.isFocused,
+        "data-focused": state.isFocused,
+        tabIndex: state.isFocused ? 0 : -1,
+        "data-rowindex": castedProps.rowIndex + state.startDataRowIndex + 1
+      };
+      break;
+    }
+    case "headerStateCell": {
+      const castedProps = elementProps;
+      returnObject = {
+        "aria-colindex": castedProps.columnIndex + 1 + (state.hasNonAdditionalFilters ? 1 : 0),
+        "data-editionmode": state.isEditionMode && state.isFocused,
+        "data-focused": state.isFocused,
+        tabIndex: state.isFocused ? 0 : -1,
+        "data-rowindex": castedProps.rowIndex
+      };
+      break;
+    }
+    case "th": {
+      const castedProps = elementProps;
+      returnObject = {
+        "aria-colindex": castedProps.columnIndex + 1 + state.statesColumns + (state.hasNonAdditionalFilters ? 1 : 0),
+        "aria-sort": ["ascending", "descending", void 0][["Asc", "Desc", null].findIndex(
+          (current) => current === state.columns[castedProps.columnIndex].currentSorting
+        )],
+        "data-editionmode": state.isEditionMode && state.isFocused,
+        "data-focused": state.isFocused,
+        tabIndex: state.isFocused ? 0 : -1,
+        "data-rowindex": 1
+      };
+      break;
+    }
+  }
+  return returnObject;
+}
+function useDomProps(element, elementProps, stateSelector) {
+  const state = useResponsiveTable(() => {
+    return getDomStoreProps(element, elementProps, stateSelector);
+  }, shallowEqual);
+  return useMemo(() => {
+    return getDomProps(state, element, elementProps);
+  }, [element, elementProps, state]);
+}
+
+const widthStorageName = "tablesWidths";
+function getColumnWidth(width) {
+  if (typeof width === "string") {
+    if (width.match(/(%|px|vw|vh|vmin|vmax|cm|mm|in|pt|pc)/))
+      return width;
+    if (width === "")
+      return "auto";
+    const numberValue = Number.parseInt(width, 10);
+    if (isNaN(numberValue))
+      return "auto";
+    return numberValue;
+  }
+  if (typeof width === "number")
+    return width;
+  return width;
+}
+debugDispatcher.on(
+  "cleanTableSizes",
+  ([tableName]) => {
+    const currentWidths = persistentStorage[widthStorageName];
+    delete currentWidths[tableName];
+    persistentStorage[widthStorageName] = currentWidths;
+  },
+  'Se usa para borrar el estado de una tabla. Uso: dd.cleanTableSizes("TableName")'
+);
+function makeColumnName(tableName, columnName) {
+  return `${tableName}${columnName}`;
+}
+const thWidthEmitter = new class ThWidthEmitter extends EventEmitter {
+}();
+const NoMemoHeaderCell = ({
+  apiaColumnIndex,
+  columnIndex,
+  inTableColumnIndex
+}) => {
+  const { name, onSortChange } = useResponsiveTableContext();
+  const uniqueId = window.location.href.match(/busEntId=(\d+)/)?.[1] ?? window.location.href.match(/query=(\d+)/)?.[1] ?? "";
+  const isGlobal = window.isGlobal ? "isGlobal" : "notGlobal";
+  const actualName = name + uniqueId + String(isGlobal);
+  const column = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.columns[columnIndex];
+  }, shallowEqual);
+  const storedWidth = persistentStorage[widthStorageName]?.[actualName]?.[column.name];
+  const [width, setWidth] = React.useState(storedWidth ?? 200);
+  const [isResize, setIsResize] = React.useState(storedWidth !== void 0);
+  React.useEffect(() => {
+    return void thWidthEmitter.on("resize", (ev) => {
+      if (ev.name === makeColumnName(actualName, column.name)) {
+        setIsResize(true);
+        setWidth(ev.width);
+      }
+    });
+  }, [column.name, actualName]);
+  const isFilterRequired = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    const columnFilter = tableState?.filters.find(
+      (current) => current.column === column.title
+    );
+    return columnFilter?.required;
+  }, shallowEqual);
+  const isSortingAllowed = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.allowSorting;
+  });
+  const domProps = useDomProps(
+    "th",
+    {
+      columnIndex: inTableColumnIndex
+    },
+    domPropsSelector(name)
+  );
+  const sx = React.useMemo(
+    () => !isResize ? {
+      minWidth: getColumnWidth(column.minWidth ?? column.width),
+      maxWidth: column.maxWidth !== void 0 ? getColumnWidth(column.maxWidth) : void 0,
+      width: getColumnWidth(column.width),
+      position: "relative"
+    } : {
+      width: `${width}px`,
+      minWidth: `${width}px`,
+      position: "relative"
+    },
+    [column.maxWidth, column.minWidth, column.width, isResize, width]
+  );
+  const buttonProps = useOtherTagButton(
+    React.useMemo(
+      () => ({
+        className: "headButton",
+        onClick: (ev) => {
+          if (isChild(
+            ev.target,
+            (current) => current.classList.contains("headButton__resizer")
+          ))
+            return;
+          if (onSortChange && column.allowSorting !== false && isSortingAllowed !== false)
+            onSortChange({
+              column,
+              columnIndex: apiaColumnIndex,
+              name: column.name,
+              sortValue: ["Asc", "Desc"][column.currentSorting !== "A" ? 0 : 1]
+            });
+        }
+      }),
+      [apiaColumnIndex, column, isSortingAllowed, onSortChange]
+    )
+  );
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "th",
+      style: sx,
+      "data-columnname": column.name,
+      title: column.title ?? column.label ?? column.name,
+      ...buttonProps,
+      ...domProps,
+      role: "rowheader",
+      className: `${isFilterRequired && window.SHOW_REQUIRED_POSITION ? "requiredFilterColumn" : ""}`,
+      children: /* @__PURE__ */ jsxs(Box, { as: "span", className: "headButton__container", children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "span",
+            className: `${isFilterRequired ? "requiredFilter__Column" : ""} headButton__label`,
+            children: /* @__PURE__ */ jsx(
+              AutoEllipsis,
+              {
+                overrideStyles: (el) => {
+                  const th = el.closest("th");
+                  return {
+                    width: `${Math.max(
+                      100,
+                      Number.parseInt(window.getComputedStyle(th).width)
+                    )}px`
+                  };
+                },
+                children: column.label
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { as: "span", className: "headButton__sortIcon", children: [
+          column.allowSorting !== false && column.currentSorting === "A" && /* @__PURE__ */ jsx(FaSortUp, {}),
+          column.allowSorting !== false && column.currentSorting === "D" && /* @__PURE__ */ jsx(FaSortDown, {}),
+          column.allowSorting !== false && !column.currentSorting && /* @__PURE__ */ jsx(FaSort, {})
+        ] }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: "headButton__resizer",
+            onMouseDown: (ev) => {
+              if (!isResize) {
+                const trElement = getSpecificParent(
+                  ev.target,
+                  (current) => current.tagName === "TR"
+                );
+                trElement?.querySelectorAll("th").forEach((current) => {
+                  thWidthEmitter.emit("resize", {
+                    name: makeColumnName(
+                      actualName,
+                      current.dataset.columnname
+                    ),
+                    width: current.clientWidth
+                  });
+                });
+                setIsResize(true);
+              }
+              const th = getSpecificParent(
+                ev.target,
+                (current) => current.tagName === "TH"
+              );
+              if (!th)
+                throw new Error("There is no th");
+              const initialX = ev.clientX;
+              const initialWidth = th.clientWidth;
+              const resize = (mousemoveEv) => {
+                const dif = mousemoveEv.clientX - initialX;
+                setWidth(initialWidth + dif);
+              };
+              const unsuscribe = () => {
+                const trElement = getSpecificParent(
+                  ev.target,
+                  (current) => current.tagName === "TR"
+                );
+                trElement?.querySelectorAll("th").forEach((current) => {
+                  persistentStorage[widthStorageName] = {
+                    ...persistentStorage[widthStorageName],
+                    [actualName]: {
+                      ...persistentStorage[widthStorageName]?.[actualName],
+                      [current.dataset.columnname]: current.clientWidth
+                    }
+                  };
+                });
+                document.removeEventListener("mousemove", resize);
+                document.removeEventListener("mouseup", unsuscribe);
+              };
+              document.addEventListener("mousemove", resize);
+              document.addEventListener("mouseup", unsuscribe);
+              return false;
+            }
+          }
+        )
+      ] })
+    }
+  );
+};
+const HeaderCell = React.memo(NoMemoHeaderCell);
+
+const NoMemoRowStatesRenderer = ({
+  state
+}) => {
+  const { Icon } = state;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: React.useMemo(
+        () => ({
+          "&, svg, path": {
+            color: state.color ?? ""
+          }
+        }),
+        [state.color]
+      ),
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          ...getVariant("inherit"),
+          title: state.tooltip,
+          className: `${state.className ?? "state"}_icon state_icon`
+        }
+      )
+    }
+  );
+};
+const RowStatesRenderer = React.memo(NoMemoRowStatesRenderer);
+
+const StateCell = ({ index, rowIndex, state, isHeader }) => {
+  const { name } = useResponsiveTableContext();
+  const domProps = useDomProps(
+    isHeader ? "headerStateCell" : "stateCell",
+    { columnIndex: index, rowIndex },
+    domPropsSelector(name)
+  );
+  return /* @__PURE__ */ jsx(Box, { as: "td", className: "stateCell", ...domProps, children: state ? /* @__PURE__ */ jsx(RowStatesRenderer, { state }) : "" });
+};
+
+const NoMemoRangeFilter = ({
+  filter,
+  tableName
+}) => {
+  const { onFilterBlur, onFilterChange, onFilterPressEnter } = useResponsiveTableContext(tableName);
+  const filterLow = {
+    id: filter.id,
+    currentValue: filter.currentValue,
+    type: "number"
+  };
+  const filterHigh = {
+    id: filter.filterToId ?? "",
+    currentValue: filter.filterToValue ?? "",
+    type: "number"
+  };
+  return /* @__PURE__ */ jsxs(Box, { className: "ApiaFilter__Range", children: [
+    /* @__PURE__ */ jsx(Box, { className: "ApiaFilter__Range__Low", children: /* @__PURE__ */ jsx(
+      ApiaFilter,
+      {
+        filter: filterLow,
+        onChange: (currentValue) => {
+          if (onFilterChange)
+            void onFilterChange({ ...filterLow, currentValue });
+        },
+        onBlur: (currentValue) => {
+          if (onFilterBlur)
+            void onFilterBlur({ ...filterLow, currentValue });
+        },
+        onPressEnter: (currentValue) => {
+          if (onFilterPressEnter)
+            void onFilterPressEnter({ ...filterLow, currentValue });
+        }
+      }
+    ) }),
+    " - ",
+    /* @__PURE__ */ jsx(Box, { className: "ApiaFilter__Range__High", children: /* @__PURE__ */ jsx(
+      ApiaFilter,
+      {
+        filter: filterHigh,
+        onChange: (currentValue) => {
+          if (onFilterChange)
+            void onFilterChange({ ...filterHigh, currentValue });
+        },
+        onBlur: (currentValue) => {
+          if (onFilterBlur)
+            void onFilterBlur({ ...filterHigh, currentValue });
+        },
+        onPressEnter: (currentValue) => {
+          if (onFilterPressEnter)
+            void onFilterPressEnter({ ...filterHigh, currentValue });
+        }
+      }
+    ) })
+  ] });
+};
+const RangeFilter = NoMemoRangeFilter;
+
+const FilterCell = ({ columnIndex, filter }) => {
+  const { name, onFilterBlur, onFilterChange, onFilterPressEnter } = useResponsiveTableContext();
+  const domProps = useDomProps(
+    "filterTd",
+    {
+      columnIndex
+    },
+    domPropsSelector(name)
+  );
+  const handleOnBlur = React.useCallback(
+    (currentValue) => {
+      if (filter && onFilterBlur)
+        onFilterBlur({ ...filter, currentValue });
+    },
+    [filter, onFilterBlur]
+  );
+  const handleOnChange = React.useCallback(
+    (currentValue) => {
+      if (filter && onFilterChange)
+        return onFilterChange({ ...filter, currentValue });
+      return true;
+    },
+    [filter, onFilterChange]
+  );
+  const handleOnPressEnter = React.useCallback(
+    (currentValue) => {
+      if (filter && onFilterPressEnter)
+        onFilterPressEnter({ ...filter, currentValue });
+    },
+    [filter, onFilterPressEnter]
+  );
+  function findFilter() {
+    if (filter?.isRange) {
+      return /* @__PURE__ */ jsx(RangeFilter, { filter });
+    }
+    if (filter && !(filter.asAdditional || !filter.column || filter.isRange)) {
+      return /* @__PURE__ */ jsx(
+        ApiaFilter,
+        {
+          onBlur: handleOnBlur,
+          onChange: handleOnChange,
+          onPressEnter: handleOnPressEnter,
+          filter
+        }
+      );
+    }
+    let label;
+    if (filter && (filter.asAdditional || !filter.column || filter.isRange)) {
+      label = window.LBL_ADDITIONAL_FILTER;
+    } else {
+      label = window.LBL_NO_COLUMN_FILTER;
+    }
+    return /* @__PURE__ */ jsx(Input, { "aria-label": label, disabled: true });
+  }
+  return /* @__PURE__ */ jsx("td", { ...domProps, children: findFilter() });
+};
+
+const NoMemoHeader = () => {
+  const { name } = useResponsiveTableContext();
+  const columns = useResponsiveTable(
+    (global) => global.responsiveTableSlice[name]?.columns
+  );
+  const hasNonAdditionalFilters = useResponsiveTable(
+    (global) => global.responsiveTableSlice[name]?.hasNonAdditionalFilters
+  );
+  const focusedColumn = useResponsiveTable(
+    (global) => global.responsiveTableSlice[name]?.focusedColumn
+  );
+  const focusedRow = useResponsiveTable(
+    (global) => global.responsiveTableSlice[name]?.focusedRow
+  );
+  const filters = useResponsiveTable(
+    (global) => {
+      const tableState = global.responsiveTableSlice[name];
+      const returnObject = tableState?.filters?.map((current) => ({
+        columnIndex: tableState.columns.findIndex(
+          (search) => search.name === current.column
+        ),
+        definition: current
+      })).filter((current) => current.columnIndex >= 0);
+      return returnObject;
+    },
+    (a, b) => {
+      return a?.length === b?.length && a?.reduce((result, current, index) => {
+        return result && shallowEqual$1(current.definition, b[index].definition);
+      }, true);
+    }
+  );
+  const statesCount = useResponsiveTable((globalState) => {
+    const state = globalState.responsiveTableSlice[name];
+    return state?.statesColumns ?? 0;
+  }, shallowEqual$1);
+  const additionalColumns = React.useMemo(
+    () => columns?.reduce(
+      (count, column) => count + (column.showAsAdditional ? 1 : 0),
+      0
+    ),
+    [columns]
+  );
+  const statesIds = React.useMemo(() => {
+    return Array(statesCount).fill("").map(() => uniqueId());
+  }, [statesCount]);
+  const [isFiltersRowVisible, setIsFiltersRowVisible] = React.useState(
+    /* (persistentStorage.showResponsiveTableFilters as boolean) ??  */
+    false
+  );
+  React.useEffect(() => {
+    persistentStorage.showResponsiveTableFilters = isFiltersRowVisible;
+  }, [isFiltersRowVisible]);
+  const buttonProps = useOtherTagButton(
+    React.useMemo(
+      () => ({
+        className: "additionalColumn",
+        onClick: () => setIsFiltersRowVisible((current) => !current)
+      }),
+      []
+    )
+  );
+  const [ref, setRef] = useState(null);
+  useUpdateEffect(() => {
+    const handleFocus = (ev) => {
+      ev.stopPropagation();
+      setIsFiltersRowVisible(true);
+    };
+    ref?.addEventListener(customEvents.focus, handleFocus);
+    return () => {
+      ref?.removeEventListener(customEvents.focus, handleFocus);
+    };
+  }, [ref]);
+  const domProps = useDomProps("headerTr", {}, domPropsSelector(name));
+  return /* @__PURE__ */ jsxs("thead", { children: [
+    /* @__PURE__ */ jsxs("tr", { ...domProps, children: [
+      (additionalColumns > 0 || hasNonAdditionalFilters) && /* @__PURE__ */ jsx(
+        "th",
+        {
+          "aria-colindex": 1,
+          "aria-rowindex": 1,
+          "data-focused": focusedColumn === 1 && focusedRow === -1 - (hasNonAdditionalFilters ? 1 : 0),
+          ...buttonProps,
+          tabIndex: focusedColumn === 1 && focusedRow === -1 - (hasNonAdditionalFilters ? 1 : 0) ? 0 : -1,
+          "aria-label": isFiltersRowVisible ? getLabel("lblHideFilters").text : getLabel("lblShowFilters").text,
+          role: "rowheader",
+          children: hasNonAdditionalFilters ? /* @__PURE__ */ jsx(
+            Icon,
+            {
+              className: "filterButton",
+              name: "Filter",
+              title: isFiltersRowVisible ? getLabel("lblHideFilters").text : getLabel("lblShowFilters").text,
+              "aria-label": isFiltersRowVisible ? getLabel("lblHideFilters").text : getLabel("lblShowFilters").text
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { style: { display: "none" }, children: isFiltersRowVisible ? getLabel("lblHideFilters").text : getLabel("lblShowFilters").text }),
+            /* @__PURE__ */ jsx("span", { children: "\xA0" })
+          ] })
+        }
+      ),
+      statesIds.map((id, i) => /* @__PURE__ */ jsx(StateCell, { isHeader: true, index: i, rowIndex: 1 }, id)),
+      columns?.map((current, actualColumnIndex) => ({
+        ...current,
+        actualTableColumnIndex: actualColumnIndex
+      })).filter((current) => !current.showAsAdditional).map((current, columnIndex) => {
+        if (current.hidden)
+          return null;
+        return /* @__PURE__ */ jsx(
+          HeaderCell,
+          {
+            apiaColumnIndex: current.actualTableColumnIndex,
+            columnIndex: current.actualTableColumnIndex,
+            inTableColumnIndex: columnIndex
+          },
+          current.name
+        );
+      })
+    ] }),
+    (filters?.length ?? 0) > 0 && /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        ref: setRef,
+        "data-focusindex": 2,
+        className: `responsiveTable__filters__row ${isFiltersRowVisible ? "" : "hidden"}`,
+        children: [
+          (additionalColumns > 0 || hasNonAdditionalFilters) && /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: "noFilter",
+              "aria-colindex": 1,
+              "aria-rowindex": 2,
+              tabIndex: focusedColumn === 1 && focusedRow === -1 ? 0 : -1,
+              "data-focused": focusedColumn === 1 && focusedRow === -1,
+              children: "\xA0"
+            }
+          ),
+          statesIds.map((id, i) => /* @__PURE__ */ jsx(StateCell, { isHeader: true, index: i, rowIndex: 2 }, id)),
+          columns?.filter((current) => !current.showAsAdditional).map((current, columnIndex) => {
+            const filter = filters.find(
+              (search) => search.definition.column === current.name
+            );
+            return current.showAsAdditional ? null : /* @__PURE__ */ jsx(
+              FilterCell,
+              {
+                columnIndex,
+                filter: filter?.definition
+              },
+              current.name
+            );
+          })
+        ]
+      }
+    )
+  ] });
+};
+const Header = React.memo(NoMemoHeader);
+
+const NoMemoAdditionalColumnDefaultRenderer = ({
+  column,
+  cell
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: `${cell.className ?? ""} responsiveTable__additionalInfoItem`,
+      id: cell.id,
+      title: cell.title,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { as: "strong", children: [
+          column.name,
+          ":"
+        ] }),
+        " ",
+        cell.children
+      ]
+    }
+  );
+};
+const AdditionalColumnDefaultRenderer = React.memo(
+  NoMemoAdditionalColumnDefaultRenderer
+);
+
+const SeparatorCell = ({
+  colSpan,
+  rowIndex
+}) => {
+  const { name } = useResponsiveTableContext();
+  const domProps = useDomProps(
+    "separator",
+    { rowIndex },
+    domPropsSelector(name)
+  );
+  return /* @__PURE__ */ jsx("td", { className: "row__separator__cell", colSpan, ...domProps });
+};
+
+const NoMemoDefaultRowRenderer = React.forwardRef(({ row, rowIndex, ...props }, currentRef) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    as: "tr",
+    sx: useMemo(
+      () => ({
+        "&.colored, & > *": {
+          color: row.color,
+          background: row.background
+        }
+      }),
+      [row.background, row.color]
+    ),
+    ref: currentRef,
+    ...props
+  }
+));
+NoMemoDefaultRowRenderer.displayName = "DefaultRowRenderer";
+const DefaultRowRenderer = NoMemoDefaultRowRenderer;
+
+const NoMemoDefaultCellRenderer = React.forwardRef(
+  ({
+    cell: { Renderer, rendererProps, AccordionRenderer, ariaLabel, ...cell },
+    column,
+    row,
+    ...props
+  }, currentRef) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "td",
+      sx: useMemo(
+        () => ({
+          "&.colored": {
+            background: cell.background,
+            color: cell.color,
+            fontWeight: "bold"
+          }
+        }),
+        [cell.background, cell.color]
+      ),
+      ref: currentRef,
+      ...props,
+      ...cell,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(
+        AutoEllipsis,
+        {
+          overrideStyles: (el) => {
+            const td = el.closest("td");
+            return {
+              width: window.getComputedStyle(td).width
+            };
+          },
+          children: props.children ?? cell.children
+        }
+      )
+    }
+  )
+);
+NoMemoDefaultCellRenderer.displayName = "DefaultCellRenderer";
+const DefaultCellRenderer = NoMemoDefaultCellRenderer;
+
+const NoMemoCell = ({
+  columnIndex,
+  inTableColumnIndex,
+  rowIndex
+}) => {
+  const { name } = useResponsiveTableContext();
+  const domProps = useDomProps(
+    "td",
+    { columnIndex: inTableColumnIndex, rowIndex },
+    domPropsSelector(name)
+  );
+  const cell = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.rows[rowIndex]?.cells[columnIndex];
+  }, shallowEqual);
+  const column = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.columns[columnIndex];
+  }, shallowEqual);
+  const row = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.rows[rowIndex];
+  }, shallowEqual);
+  const Renderer = React.useMemo(
+    () => cell?.Renderer ?? column.Renderer ?? DefaultCellRenderer,
+    [cell?.Renderer, column.Renderer]
+  );
+  if (!Renderer || !cell)
+    return row.separator ? /* @__PURE__ */ jsx("div", { className: "separator" }) : null;
+  return /* @__PURE__ */ jsx(
+    Renderer,
+    {
+      ...domProps,
+      cell,
+      column,
+      row,
+      onFocus: (ev) => {
+        if (ev.target instanceof HTMLElement) {
+          const cell2 = ev.target.closest("td,th");
+          if (ev.target === cell2) {
+            const widget = cell2?.querySelector(getFocusSelector());
+            if (cell2 && widget) {
+              widget.focus();
+              cell2.tabIndex = -1;
+            }
+          }
+        }
+      }
+    }
+  );
+};
+const Cell = React.memo(NoMemoCell);
+
+const NoMemoRow = ({ rowIndex }) => {
+  const { name } = useResponsiveTableContext();
+  const { columns, hasNonAdditionalFilters, isScrolledIntoView } = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return {
+      columns: tableState?.columns ?? [],
+      hasNonAdditionalFilters: tableState?.hasNonAdditionalFilters,
+      isScrolledIntoView: tableState.scrollIntoViewRow === rowIndex
+    };
+  }, shallowEqual);
+  const row = useResponsiveTable(
+    (global) => global.responsiveTableSlice[name].rows[rowIndex],
+    shallowEqual
+  );
+  const additionalCells = useResponsiveTable(
+    (global) => {
+      const tableState = global.responsiveTableSlice[name];
+      return tableState.columns.map(
+        (current, index) => current.showAsAdditional ? {
+          index,
+          column: current
+        } : null
+      ).filter(
+        (current) => !!current
+      ).map((current) => {
+        return {
+          cell: tableState.rows[rowIndex]?.cells[current.index],
+          column: current.column,
+          columnIndex: current.index
+        };
+      });
+    },
+    (currentValue, newValue) => {
+      return currentValue.reduce(
+        (accumulatedBoolean, currentCell, cellIndex) => {
+          return accumulatedBoolean && shallowEqual(currentCell, newValue[cellIndex]);
+        },
+        true
+      );
+    }
+  );
+  const { isDragging, isExpanded, shouldForbidSelection } = useResponsiveTable(
+    (global) => {
+      const tableState = global.responsiveTableSlice[name];
+      return {
+        isExpanded: tableState.expandedRows.includes(rowIndex),
+        isDragging: tableState.draggingRow === rowIndex,
+        shouldForbidSelection: tableState.rows[rowIndex]?.forbidSelection
+      };
+    },
+    shallowEqual
+  );
+  const domProps = useDomProps(
+    "tr",
+    {
+      isThisRowExpanded: isExpanded,
+      rowIndex
+    },
+    domPropsSelector(name)
+  );
+  const expandedRowDomProps = useDomProps(
+    "tr",
+    {
+      isTheExpandedRow: true,
+      rowIndex
+    },
+    domPropsSelector(name)
+  );
+  const handleExpandedState = React.useCallback(
+    (ev) => {
+      const willBeExpanded = typeof ev === "boolean" ? ev : !isExpanded;
+      if (!willBeExpanded)
+        responsiveTableStore.dispatch(
+          responsiveTableActions.update({
+            tableName: name,
+            expandedRows: responsiveTableStore.getState().responsiveTableSlice[name].expandedRows.filter((current) => current !== rowIndex)
+          })
+        );
+      else
+        responsiveTableStore.dispatch(
+          responsiveTableActions.update({
+            tableName: name,
+            expandedRows: [
+              ...responsiveTableStore.getState().responsiveTableSlice[name].expandedRows,
+              rowIndex
+            ]
+          })
+        );
+    },
+    [isExpanded, name, rowIndex]
+  );
+  const statesCount = useResponsiveTable((globalState) => {
+    const state = globalState.responsiveTableSlice[name];
+    return state?.statesColumns ?? 0;
+  }, shallowEqual);
+  const states = React.useMemo(
+    () => (row.states ?? []).map((current) => ({ ...current, id: uniqueId() })),
+    [row.states]
+  );
+  const { ref, ...additionalCellDomProps } = useDomProps(
+    "additionalTd",
+    { rowIndex },
+    domPropsSelector(name)
+  );
+  const Renderer = React.useMemo(
+    () => row.renderer ?? DefaultRowRenderer,
+    [row.renderer]
+  );
+  const hasScrolled = useRef(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Renderer,
+      {
+        ...domProps,
+        row,
+        rowIndex,
+        className: `responsiveTable__row ${row.isHidden ? "hidden" : ""} ${domProps["aria-selected"] ? "selected" : ""} ${shouldForbidSelection ? "non-selectable" : ""} ${states.map((current) => current.className).join(" ")} ${row.className ?? ""} ${row.separator ? "row__separator" : ""} ${isDragging ? "draggingRow" : ""}`,
+        onKeyDown: React.useCallback(
+          (ev) => {
+            if (ev.key.toLowerCase() === "arrowleft" && ev.ctrlKey) {
+              ev.preventDefault();
+              ev.stopPropagation();
+              handleExpandedState(false);
+            }
+            if (ev.key.toLowerCase() === "arrowright" && ev.ctrlKey) {
+              ev.preventDefault();
+              ev.stopPropagation();
+              handleExpandedState(true);
+            }
+          },
+          [handleExpandedState]
+        ),
+        ...{
+          ref: (el) => {
+            if (el && isScrolledIntoView && !hasScrolled.current) {
+              hasScrolled.current = true;
+              scrollParentIntoElement(el);
+            }
+          }
+        },
+        children: row.separator ? /* @__PURE__ */ jsx(
+          SeparatorCell,
+          {
+            colSpan: (additionalCells.length > 0 || hasNonAdditionalFilters ? 1 : 0) + statesCount + columns.filter((current) => !current.showAsAdditional).length,
+            rowIndex
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          (additionalCells.length > 0 || hasNonAdditionalFilters) && /* @__PURE__ */ jsx("td", { className: "additionalInfo__cell", ...additionalCellDomProps, children: additionalCells.length > 0 && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "Lg",
+              ...getVariant("icon-outline"),
+              icon: isExpanded ? MdKeyboardArrowDown : MdKeyboardArrowRight,
+              "aria-label": isExpanded ? getLabel("lblCollapseRow").text : getLabel("lblExpandRow").text,
+              className: "moreInformationButton",
+              onClick: handleExpandedState
+            }
+          ) }),
+          Array(statesCount).fill("").map((_, i) => {
+            return /* @__PURE__ */ jsx(
+              StateCell,
+              {
+                index: i,
+                state: states[i],
+                rowIndex
+              },
+              states[i]?.id ?? i
+            );
+          }),
+          columns.map((current, actualColumnIndex) => ({
+            ...current,
+            actualColumnIndex
+          })).filter((current) => !current.showAsAdditional).map((current, inTableColumnIndex) => {
+            if (current.hidden)
+              return null;
+            return /* @__PURE__ */ jsx(
+              Cell,
+              {
+                columnIndex: current.actualColumnIndex,
+                rowIndex,
+                inTableColumnIndex
+              },
+              current.name
+            );
+          })
+        ] })
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx("tr", { className: "expandedRow", ...expandedRowDomProps, children: /* @__PURE__ */ jsx(
+      "td",
+      {
+        colSpan: columns.length - additionalCells.length + states.length + 1,
+        children: /* @__PURE__ */ jsx(Box, { className: "responsiveTable__additionalInfoContainer", children: additionalCells.map((current) => {
+          const { Renderer: ColumnRenderer } = current.column;
+          if (ColumnRenderer)
+            return /* @__PURE__ */ jsx(
+              ColumnRenderer,
+              {
+                cell: current.cell,
+                column: current.column,
+                row
+              },
+              current.column.name
+            );
+          return /* @__PURE__ */ jsx(
+            AdditionalColumnDefaultRenderer,
+            {
+              cell: current.cell,
+              column: current.column,
+              row
+            },
+            current.column.name
+          );
+        }) })
+      }
+    ) })
+  ] });
+};
+const Row = React.memo(NoMemoRow);
+
+const NoRegistersRenderer = () => {
+  const { labels } = useResponsiveTableContext();
+  return /* @__PURE__ */ jsx(Box, { className: "no__registers", children: labels.noRegisters });
+};
+
+const NoMemoTableRenderer = ({ variant }) => {
+  const { name, label, labels } = useResponsiveTableContext();
+  const domProps = useDomProps(
+    "table",
+    {},
+    (global) => global.responsiveTableSlice[name]
+  );
+  const rows = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.rows?.map((current) => current.id);
+  }, shallowEqual);
+  const columnsCount = useResponsiveTable(
+    (global) => (global.responsiveTableSlice[name]?.nonAdditionalColumnsCount ?? 0) + (global.responsiveTableSlice[name]?.hasNonAdditionalFilters ? 1 : 0) + (global.responsiveTableSlice[name]?.statesColumns ?? 0) + (global.responsiveTableSlice[name]?.columns.find(
+      (current) => current.showAsAdditional
+    ) ? 1 : 0)
+  );
+  const rowsCount = useResponsiveTable(
+    (global) => global.responsiveTableSlice[name]?.rows.length || 0
+  );
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...domProps,
+      as: "table",
+      className: "responsiveTable__table",
+      ...getVariant(variant || "layout.common.tables.primary"),
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx(Header, {}),
+        /* @__PURE__ */ jsx("tbody", { children: rowsCount > 0 ? rows?.map((row, index) => {
+          return /* @__PURE__ */ jsx(Row, { rowIndex: index }, row ?? `${row}-${index}`);
+        }) : labels.noRegisters ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columnsCount, children: /* @__PURE__ */ jsx(NoRegistersRenderer, {}) }) }) : null })
+      ]
+    }
+  );
+};
+const TableRenderer = React.memo(NoMemoTableRenderer);
+
+const NoMemoAccordionCell = ({ cell, column }) => {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: `responsiveTable__accordionElement__column ${cell.className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { as: "strong", children: [
+          column.label ?? column.name,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsx(Box, { as: "span", sx: { color: cell.color, background: cell.background }, children: cell?.children })
+      ]
+    },
+    column.name
+  );
+};
+const AccordionCell = NoMemoAccordionCell;
+
+const NoMemoAccordionElement = ({ row, rowIndex }) => {
+  const { name } = useResponsiveTableContext();
+  const indexColumns = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.accordionIndexColumns;
+  }, shallowEqual);
+  const columns = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.columns;
+  }, shallowEqual);
+  const title = React.useMemo(() => {
+    if (row.title)
+      return row.title;
+    if (Array.isArray(indexColumns))
+      return indexColumns.map(
+        (current) => (
+          // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+          row.cells[current.index].title || row.cells[current.index].children
+        )
+      ).join(" | ");
+    return row.cells[0].title ?? row.cells[0].children;
+  }, [indexColumns, row.cells, row.title]);
+  const isSelected = useResponsiveTable(
+    (global) => global.responsiveTableSlice[name].allowSelection !== false ? global.responsiveTableSlice[name].selectedRows.includes(rowIndex) : void 0
+  );
+  const isFocused = useResponsiveTable(
+    (global) => global.responsiveTableSlice[name].focusedRow === rowIndex
+  );
+  const buttonProps = useMemo(
+    () => ({
+      title,
+      ariaLabel: title,
+      label: title,
+      checked: isSelected,
+      onChange: (isChecked) => {
+        const isMultiple = responsiveTableStore.getState().responsiveTableSlice[name].isMultiple;
+        responsiveTableStore.dispatch(
+          responsiveTableActions.update({
+            tableName: name,
+            selectedRows: isMultiple ? isChecked ? [
+              ...responsiveTableStore.getState().responsiveTableSlice[name].selectedRows,
+              rowIndex
+            ] : responsiveTableStore.getState().responsiveTableSlice[name].selectedRows.filter((current) => current !== rowIndex) : [rowIndex]
+          })
+        );
+      },
+      tabIndex: isFocused ? 0 : -1,
+      rightButtons: row.accordionButtonProps?.rightButtons,
+      onUserPressEnter: row.accordionButtonProps?.onUserPressEnter,
+      domButtonProps: {
+        buttonSx: {
+          "&.accordion__item__button .accordion__item__button__label": {
+            color: row.color
+          }
+        }
+      }
+    }),
+    [
+      isFocused,
+      isSelected,
+      name,
+      row.accordionButtonProps?.onUserPressEnter,
+      row.accordionButtonProps?.rightButtons,
+      row.color,
+      rowIndex,
+      title
+    ]
+  );
+  if (!Array.isArray(indexColumns) || !columns)
+    return null;
+  return /* @__PURE__ */ jsxs(AccordionItem, { id: row.id, buttonProps, children: [
+    columns.map((currentColumn, columnIndex) => {
+      const Renderer = row.cells[columnIndex].AccordionRenderer ?? currentColumn.AccordionRenderer ?? AccordionCell;
+      return currentColumn.hideFromAccordion || currentColumn.showAsAdditional ? null : /* @__PURE__ */ jsx(
+        Renderer,
+        {
+          cell: row.cells[columnIndex],
+          column: currentColumn,
+          columnIndex,
+          row,
+          rowIndex
+        },
+        currentColumn.name
+      );
+    }),
+    columns.filter((current) => !!current.showAsAdditional).map((currentColumn, columnIndex) => {
+      const Renderer = row.cells[columnIndex].AccordionRenderer ?? currentColumn.AccordionRenderer ?? AccordionCell;
+      return currentColumn.hideFromAccordion ? null : /* @__PURE__ */ jsx(
+        Renderer,
+        {
+          cell: row.cells[columnIndex],
+          column: currentColumn,
+          columnIndex,
+          row,
+          rowIndex
+        },
+        currentColumn.name
+      );
+    })
+  ] });
+};
+const AccordionElement = memo(NoMemoAccordionElement);
+
+const NoMemoAccordionRenderer = () => {
+  const { name } = useResponsiveTableContext();
+  const { columns, rows } = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return {
+      columns: tableState?.columns,
+      rows: tableState?.rows
+    };
+  }, shallowEqual);
+  React.useEffect(() => {
+    if (columns && rows) {
+      const markedAsTitleColumns = [];
+      columns.forEach((column, index) => {
+        if (column.showInAccordionTitle)
+          markedAsTitleColumns.push({ column, index });
+      });
+      if (markedAsTitleColumns.length > 0) {
+        responsiveTableStore.dispatch(
+          responsiveTableActions.update({
+            tableName: name,
+            accordionIndexColumns: markedAsTitleColumns
+          })
+        );
+      } else {
+        const columnsLength = columns.length;
+        let indexColumn = null;
+        let currentIndex = 0;
+        while (!indexColumn && currentIndex < columns.length) {
+          let isAnyEmptyRow = false;
+          for (const row of rows) {
+            if (!row.cells[currentIndex].children) {
+              isAnyEmptyRow = true;
+              break;
+            }
+          }
+          if (!isAnyEmptyRow && columns[currentIndex]) {
+            indexColumn = columns[currentIndex];
+          } else {
+            currentIndex += 1;
+            if (currentIndex === columnsLength)
+              break;
+          }
+        }
+        if (!indexColumn) {
+          [indexColumn] = columns;
+          currentIndex = 0;
+        }
+        responsiveTableStore.dispatch(
+          responsiveTableActions.update({
+            tableName: name,
+            accordionIndexColumns: [
+              { column: indexColumn, index: currentIndex }
+            ]
+          })
+        );
+      }
+    }
+  }, [columns, name, rows]);
+  return /* @__PURE__ */ jsxs(Accordion, { children: [
+    !rows || rows.length === 0 && /* @__PURE__ */ jsx(NoRegistersRenderer, {}),
+    rows?.map((current, rowIndex) => /* @__PURE__ */ jsx(AccordionElement, { row: current, rowIndex }, current.id))
+  ] });
+};
+const AccordionRenderer = React.memo(NoMemoAccordionRenderer);
+
+const domPropsSelector = (name) => (global) => global.responsiveTableSlice[name];
+const NoMemoResponsiveTable = React.forwardRef(({ className, variant, ...props }, ref) => {
+  const breakpoint = useBreakpointIndex({ defaultIndex: 3 });
+  const { currentBreakPoint } = useResponsiveTableContext();
+  const actualBreakpoint = currentBreakPoint ?? breakpoint;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...props,
+      ...getVariant("layout.common.tables.responsive"),
+      className: `responsiveTable__wrapper ${className ?? ""}`,
+      ref,
+      children: actualBreakpoint >= 3 ? /* @__PURE__ */ jsx(KeyHandler, { children: /* @__PURE__ */ jsx(TableRenderer, { variant }) }) : /* @__PURE__ */ jsx(AccordionRenderer, {})
+    }
+  );
+});
+NoMemoResponsiveTable.displayName = "ResponsiveTable";
+const ResponsiveTable = React.memo(NoMemoResponsiveTable);
+
+const NoMemoSort = ({ tableName }) => {
+  const { name, onSortChange } = useResponsiveTableContext(tableName);
+  const columns = useResponsiveTable((global) => {
+    return global.responsiveTableSlice[name]?.columns;
+  }, shallowEqual);
+  return /* @__PURE__ */ jsx(Fragment, { children: columns?.map((column, columnIndex) => {
+    return column.showAsAdditional || column.allowSorting === false ? null : /* @__PURE__ */ jsxs(Label, { children: [
+      /* @__PURE__ */ jsx(Box, { as: "span", children: column.label ?? column.name }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: column.currentSorting === null ? "" : column.currentSorting,
+          onChange: (ev) => {
+            if (onSortChange)
+              onSortChange({
+                columnIndex,
+                column,
+                name: column.name,
+                sortValue: ev.target.value === "" ? null : ev.target.value
+              });
+          },
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "" }),
+            /* @__PURE__ */ jsx("option", { value: "A", children: window.ORDER_ASC_LABEL }),
+            /* @__PURE__ */ jsx("option", { value: "D", children: window.ORDER_DESC_LABEL })
+          ]
+        }
+      ) })
+    ] }, column.name);
+  }) });
+};
+const Sort = React.memo(NoMemoSort);
+
+dayjs.extend(customParseFormat);
+const dateFormat = getDateFormat();
+function controlDatesOrder(first, last) {
+  if (!first || !last)
+    return true;
+  if (dayjs(last, dateFormat).isBefore(dayjs(first, dateFormat))) {
+    return window.MSG_FEC_FIN_MAY_FEC_INI;
+  }
+  return true;
+}
+const NoMemoInnerRender = React.forwardRef(
+  ({
+    filters,
+    tableName
+  }, ref) => {
+    const { onFilterBlur, onFilterChange, onFilterPressEnter, name } = useResponsiveTableContext(tableName);
+    const [lastEmittedValue, setLastEmittedValue] = React.useState(null);
+    const [lastEmittedValueByPartner, setLastEmittedValueByPartner] = React.useState(null);
+    return /* @__PURE__ */ jsx(Box, { ref, className: "filtersRender", children: filters?.map((filter, key) => {
+      if (filter.hide)
+        return null;
+      const isDate = filter.type === "D" || filter.type === "date";
+      const filterToId = filter.filterToId ?? `${filter.id}i`;
+      const filterTo = {
+        ...filter,
+        hide: filter.filterToId === void 0,
+        id: filterToId,
+        currentValue: filter.filterToValue ?? "",
+        required: false
+      };
+      const column = responsiveTableStore.getState().responsiveTableSlice[name].columns.find((current) => current.name === filter.column);
+      const filterTitle = filter.title || column?.label || column?.title || column?.name || "noFilterNorColumnTitle";
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: filter.type === "D" || filter.type === "date" ? "twoColumns" : "",
+            children: /* @__PURE__ */ jsxs(
+              Label,
+              {
+                title: isDate ? window.LBL_DATE_FILTER_FROM_TOOLTIP : filterTitle,
+                children: [
+                  window.SHOW_REQUIRED_POSITION !== "0" && /* @__PURE__ */ jsx(RequiredMark, { isRequired: filter.required }),
+                  /* @__PURE__ */ jsx(Box, { as: "span", children: isDate && !filter.hideToFilter ? formatMessage(window.LBL_DATE_FILTER_FROM_TXT, {
+                    TOK1: filterTitle
+                  }) : filterTitle }),
+                  filter.isRange ? /* @__PURE__ */ jsx(RangeFilter, { filter }) : /* @__PURE__ */ jsx(
+                    ApiaFilter,
+                    {
+                      filter,
+                      onChange: (currentValue) => {
+                        const result = controlDatesOrder(
+                          currentValue,
+                          lastEmittedValueByPartner
+                        );
+                        if (result === true) {
+                          setLastEmittedValue(currentValue);
+                          if (onFilterChange)
+                            void onFilterChange({ ...filter, currentValue });
+                        }
+                        return result;
+                      },
+                      onBlur: (currentValue) => {
+                        if (onFilterBlur)
+                          void onFilterBlur({ ...filter, currentValue });
+                      },
+                      onPressEnter: (currentValue) => {
+                        if (onFilterPressEnter)
+                          void onFilterPressEnter({
+                            ...filter,
+                            currentValue
+                          });
+                      }
+                    }
+                  ),
+                  window.SHOW_REQUIRED_POSITION === "0" && /* @__PURE__ */ jsx(RequiredMark, { isRequired: filter.required })
+                ]
+              }
+            )
+          },
+          filter.id ?? filter.column ?? key
+        ),
+        isDate && !filter.hideToFilter && /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: filter.type === "D" || filter.type === "date" ? "twoColumns" : "",
+            children: /* @__PURE__ */ jsxs(Label, { title: window.LBL_DATE_FILTER_TO_TOOLTIP, children: [
+              /* @__PURE__ */ jsx(Box, { as: "span", children: formatMessage(window.LBL_DATE_FILTER_TO_TXT, {
+                TOK1: filterTitle
+              }) }),
+              /* @__PURE__ */ jsx(
+                ApiaFilter,
+                {
+                  filter: filterTo,
+                  onChange: (currentValue) => {
+                    const result = controlDatesOrder(
+                      lastEmittedValue,
+                      currentValue
+                    );
+                    if (result === true) {
+                      setLastEmittedValueByPartner(currentValue);
+                      if (onFilterChange)
+                        void onFilterChange({
+                          ...filter,
+                          filterToId,
+                          filterToValue: currentValue
+                        });
+                    }
+                    return result;
+                  },
+                  onBlur: (currentValue) => {
+                    if (onFilterBlur)
+                      void onFilterBlur({
+                        ...filter,
+                        filterToId,
+                        filterToValue: currentValue
+                      });
+                  },
+                  onPressEnter: (currentValue) => {
+                    if (onFilterPressEnter)
+                      void onFilterPressEnter({
+                        ...filter,
+                        filterToId,
+                        filterToValue: currentValue
+                      });
+                  }
+                }
+              )
+            ] })
+          }
+        )
+      ] }, filter.id ?? filter.column ?? key);
+    }) });
+  }
+);
+NoMemoInnerRender.displayName = "FiltersInnerRender";
+const InnerRender = React.memo(NoMemoInnerRender);
+
+const NoMemoAdditional = ({ tableName }) => {
+  const { name } = useResponsiveTableContext(tableName);
+  const additionalFilters = useResponsiveTable((global) => {
+    const state = global.responsiveTableSlice[name];
+    return state?.filters.filter(
+      (current) => !current.group && (!current.isMeta && !state?.columns.find(
+        (search) => search.name === current.column && !current.asAdditional
+      ) || state?.columns.find(
+        (search) => search.name === current.column && search.showAsAdditional
+      ) || current.asAdditional)
+    );
+  }, shallowEqual);
+  return /* @__PURE__ */ jsx(InnerRender, { tableName, filters: additionalFilters });
+};
+const Additional = React.memo(NoMemoAdditional);
+
+const NoMemoResponsive = ({ tableName }) => {
+  const { name } = useResponsiveTableContext(tableName);
+  const nonAdditionalFilters = useResponsiveTable((global) => {
+    const state = global.responsiveTableSlice[name];
+    return state?.filters.filter(
+      (current) => !current.isMeta && state?.columns.find((search) => search.name === current.column)
+    );
+  }, shallowEqual);
+  return /* @__PURE__ */ jsx(
+    InnerRender,
+    {
+      tableName,
+      isResponsive: true,
+      filters: nonAdditionalFilters
+    }
+  );
+};
+const Responsive = React.memo(NoMemoResponsive);
+
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const maximizationPersist = {
+  getState(id) {
+    const current = persistentStorage.maximizationPersist ?? {};
+    return current[id];
+  },
+  setState(id, isMaximized) {
+    const current = persistentStorage.maximizationPersist ?? {};
+    current[id] = isMaximized;
+    persistentStorage.maximizationPersist = current;
+  }
+};
+class Maximization extends EventEmitter {
+  constructor() {
+    super(...arguments);
+    __publicField$1(this, "components", {});
+  }
+  checkComponentExists(id) {
+    return this.components[id] === void 0;
+  }
+  emit(eventName, params) {
+    if (eventName === "toggle") {
+      const { id, isMaximized } = params;
+      this.checkComponentExists(id);
+      if (!this.components[id])
+        return;
+      this.components[id].isMaximized = isMaximized ?? !this.components[id].isMaximized;
+      maximizationPersist.setState(id, this.components[id].isMaximized);
+      this.isMaximized(id);
+      super.emit(eventName, {
+        id,
+        isMaximized: this.components[id].isMaximized
+      });
+    }
+  }
+  isMaximized(id) {
+    this.checkComponentExists(id);
+    const selector = this.components[id]?.selector;
+    if (selector === void 0)
+      return void 0;
+    const content = typeof selector === "string" ? document.querySelector(selector) : selector?.();
+    if (content)
+      content.classList.toggle("maximized", this.components[id].isMaximized);
+    return this.components[id]?.isMaximized;
+  }
+  registerMaximizableComponent(id, selector) {
+    this.components[id] = {
+      selector: selector ?? this.components[id]?.selector,
+      isMaximized: false
+      // isDefaultMaximized ??
+      // (conf<boolean>('lists.persistMaximized', true, 'boolean')
+      //   ? maximizationPersist.getState(id)
+      //   : undefined) ??
+      // isConfDefaultMaximized,
+    };
+  }
+  toggleIsMaximized(id, isMaximized) {
+    this.emit("toggle", { id, isMaximized });
+  }
+}
+const maximizationController = new Maximization();
+function useIsMaximized(id) {
+  React.useEffect(() => {
+    maximizationController.registerMaximizableComponent(id);
+  }, [id]);
+  const [isInnerMaximized, innerSetIsMaximized] = React.useState(
+    maximizationController.isMaximized(id) ?? false
+  );
+  React.useEffect(() => {
+    const handleToggle = ({
+      id: eventId,
+      isMaximized: eventIsMaximized
+    }) => {
+      if (id === eventId)
+        innerSetIsMaximized((current) => eventIsMaximized ?? !current);
+    };
+    const unsuscribe1 = maximizationController.on("toggle", handleToggle);
+    innerSetIsMaximized(
+      maximizationController.components[id].isMaximized ?? false
+    );
+    return () => {
+      unsuscribe1();
+    };
+  }, [id]);
+  return {
+    isMaximized: isInnerMaximized,
+    toggleIsMaximized: React.useCallback(
+      (isMaximized) => {
+        maximizationController.emit("toggle", { id, isMaximized });
+      },
+      [id]
+    )
+  };
+}
+
+const NoMemoPagination = ({
+  appliedFilters,
+  areAllFiltersApplied,
+  className,
+  currentPage,
+  disabled,
+  disableReduced,
+  hasMore,
+  hideMaximizeButton,
+  hideRefreshButton,
+  isLoading,
+  isPerforming,
+  listId: outerListId,
+  onDeleteFilters,
+  onPageChange,
+  onRefresh,
+  pageCount,
+  recordsCount: outerRecordsCount,
+  reachedMax,
+  showMaximizeOnSmallBreakpoints,
+  variant = "primary"
+}) => {
+  const numberPageCount = Number(pageCount);
+  const breakPoint = useBreakpointIndex();
+  const numberCurrentPage = Number(currentPage);
+  const recordsCount = outerRecordsCount;
+  const [internCurrentPage, setCurrentPage] = useState(
+    numberCurrentPage ?? 1
+  );
+  const [lastEmittedPage, setLastEmittedPage] = useState(
+    numberCurrentPage ?? 1
+  );
+  const [hasNoValue, setHasNoValue] = useState(false);
+  useEffect(() => {
+    setCurrentPage(numberCurrentPage);
+  }, [numberCurrentPage]);
+  const setCurrentAndDispatch = useCallback(
+    (page) => {
+      setCurrentPage(page);
+      onPageChange(page);
+      setLastEmittedPage(page);
+    },
+    [onPageChange]
+  );
+  const InputRef = createRef();
+  const listId = useResponsiveTableContext().name;
+  const { isMaximized, toggleIsMaximized } = useIsMaximized(
+    outerListId ?? listId
+  );
+  const options = [];
+  for (let i = 1; i <= numberPageCount; i++) {
+    options.push(i);
+  }
+  const [infoButtonRef, setInfoButtonRef] = React.useState(
+    null
+  );
+  const recordsCountLabel = `${window.GNR_TOT_RECORDS}: ${recordsCount}`;
+  const tooltipProps = React.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}`,
+      attachToElement: { current: infoButtonRef },
+      closeOnClickOut: true
+      // closeOnClickOutChecker(element) {
+      //   return !getSpecificParent(element, (current) =>
+      //     current.classList.contains('pagination__information'),
+      //   );
+      // },
+    }),
+    [breakPoint, hasMore, infoButtonRef, reachedMax, recordsCountLabel]
+  );
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: "nav",
+      variant: `layout.common.components.pagination.${variant}`,
+      "aria-label": getLabel("lblQryParamPag").text,
+      className: `pagination ${numberPageCount <= 1 && !disableReduced ? "onlyRefresh" : ""} ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { className: "pagination__leftToolbar", children: [
+          !hideMaximizeButton && (showMaximizeOnSmallBreakpoints || breakPoint > 4) && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "icon",
+              className: "pagination__fullScreenButton",
+              onClick: toggleIsMaximized.bind(toggleIsMaximized, void 0),
+              icon: !isMaximized ? "Maximize" : "Minimize",
+              title: !isMaximized ? window.LBL_MAXIMIZE : window.LBL_MINIMIZE,
+              "aria-label": !isMaximized ? window.LBL_MAXIMIZE : window.LBL_MINIMIZE,
+              iconSize: "Md"
+            }
+          ),
+          ((reachedMax || hasMore) && breakPoint > 3 || breakPoint <= 3) && className !== "grid__pagination" ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "icon-primary",
+              icon: "Info",
+              className: `pagination__information ${reachedMax || hasMore ? "pagination__alertInfo" : ""}`,
+              onClick: () => ApiaUtil.instance.tooltips.open(tooltipProps),
+              ref: setInfoButtonRef,
+              iconSize: "Md",
+              "aria-label": window.BTN_FILE_INFO_TOOLTIP,
+              title: window.BTN_FILE_INFO_TOOLTIP
+            }
+          ) : "",
+          breakPoint > 3 && /* @__PURE__ */ jsx(
+            Box,
+            {
+              as: "span",
+              className: "recordsCounter pagination__deleteLabels",
+              title: recordsCountLabel,
+              children: recordsCount !== -1 && `${window.GNR_TOT_RECORDS}: ${recordsCount} `
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Box, { className: "pagination__controls", children: (numberPageCount > 0 || disableReduced) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          breakPoint > 2 && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "icon-primary",
+              disabled: disabled || internCurrentPage === 1 || isLoading || isPerforming,
+              "aria-label": window.NAV_FIRST_PAGE,
+              type: "button",
+              onClick: () => {
+                setCurrentAndDispatch(1);
+              },
+              icon: "First",
+              iconSize: "Sm"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "icon-primary",
+              disabled: disabled || internCurrentPage <= 1 || isLoading || isPerforming,
+              "aria-label": window.NAV_PREVIOUS_PAGE,
+              type: "button",
+              onClick: () => {
+                setCurrentAndDispatch(internCurrentPage - 1);
+              },
+              icon: "Previous",
+              iconSize: "Sm"
+            }
+          ),
+          breakPoint > 2 && /* @__PURE__ */ jsxs(Box, { className: "input", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                className: "pagination__controls__input",
+                "aria-label": window.NAV_INPUT_LABEL,
+                title: `${window.PAGE}: ${internCurrentPage} `,
+                ref: InputRef,
+                value: hasNoValue ? "" : internCurrentPage,
+                onKeyDown: (ev) => {
+                  const regex = /([0-9])|(Backspace)|(Tab)/;
+                  if (!ev.key.match(regex)) {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                  }
+                  if (ev.key === "Enter") {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    setCurrentAndDispatch(internCurrentPage);
+                  }
+                },
+                onBlur: () => {
+                  if (lastEmittedPage !== internCurrentPage) {
+                    setCurrentAndDispatch(internCurrentPage);
+                  }
+                },
+                onFocus: (ev) => {
+                  ev.currentTarget.select();
+                },
+                onChange: (ev) => {
+                  setHasNoValue(ev.target.value === "");
+                  setCurrentPage(
+                    Math.max(
+                      1,
+                      Math.min(
+                        noNaN(Number(ev.currentTarget.value)),
+                        pageCount
+                      )
+                    )
+                  );
+                },
+                disabled: disabled || isLoading || isPerforming
+              }
+            ),
+            " ",
+            "/",
+            " ",
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                as: "span",
+                title: recordsCount !== -1 ? `${window.GNR_TOT_RECORDS} ${recordsCount}` : window.NAV_INPUT_LABEL,
+                children: pageCount
+              }
+            )
+          ] }),
+          breakPoint <= 2 && /* @__PURE__ */ jsxs(
+            Select,
+            {
+              className: "pagination__selectPage",
+              value: internCurrentPage,
+              onChange: (e) => {
+                setCurrentAndDispatch(Number(e.target.value));
+              },
+              children: [
+                /* @__PURE__ */ jsxs("option", { disabled: true, children: [
+                  "Total: ",
+                  numberPageCount
+                ] }),
+                options.map((current) => {
+                  return /* @__PURE__ */ jsx("option", { children: current }, current);
+                })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "icon-primary",
+              disabled: disabled || internCurrentPage >= numberPageCount || isLoading || isPerforming,
+              "aria-label": window.NAV_NEXT_PAGE,
+              type: "button",
+              onClick: () => {
+                setCurrentAndDispatch(internCurrentPage + 1);
+              },
+              icon: "Next",
+              iconSize: "Sm"
+            }
+          ),
+          breakPoint > 2 && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "icon-primary",
+              type: "button",
+              "aria-label": window.NAV_LAST_PAGE,
+              disabled: disabled || internCurrentPage >= numberPageCount || isLoading || isPerforming,
+              onClick: () => {
+                setCurrentAndDispatch(numberPageCount);
+              },
+              icon: "Last",
+              iconSize: "Sm"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(Box, { className: "pagination__rightToolbar", children: (!hideRefreshButton || onDeleteFilters) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          onDeleteFilters && /* @__PURE__ */ jsxs(
+            SimpleButton,
+            {
+              disabled: isPerforming,
+              className: "pagination__deleteFiltersButton",
+              onClick: onDeleteFilters,
+              children: [
+                breakPoint > 3 && /* @__PURE__ */ jsx(Box, { as: "span", className: "pagination__deleteLabels", children: window.BTN_DELETE_FILTERS }),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    as: "span",
+                    className: `pagination__appliedFiltersLabel ${areAllFiltersApplied ? "" : "withFilters"}`,
+                    children: appliedFilters
+                  }
+                )
+              ]
+            }
+          ),
+          !hideRefreshButton && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": window.NAV_REFRESH,
+              onClick: () => onRefresh(numberCurrentPage),
+              icon: "Refresh",
+              iconSize: "Md",
+              disabled: disabled || isLoading,
+              variant: "icon-primary",
+              isLoading: isPerforming,
+              className: "pagiantion__refreshIcon"
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+const Pagination = React.memo(NoMemoPagination);
+
+function applyFocusAttributes(table, _previousState, state, focus = state.isFocused) {
+  table.querySelectorAll(getFocusSelector()).forEach((e) => {
+    e.tabIndex = -1;
+  });
+  if (state.focusedColumn === 0) {
+    const focusedRow = table.querySelector(
+      `tr[data-rowindex="${state.focusedRow}"]`
+    );
+    if (focusedRow) {
+      focusedRow.tabIndex = 0;
+      window.requestAnimationFrame(() => {
+        if (focus) {
+          focusedRow.focus();
+        }
+      });
+    }
+  } else {
+    const focusedCell = table.querySelector(
+      `tr[data-rowindex="${state.focusedRow}"] td[aria-colindex="${state.focusedColumn}"], tr[data-rowindex="${state.focusedRow}"] th[aria-colindex="${state.focusedColumn}"]`
+    );
+    console.log(focusedCell);
+    if (focusedCell instanceof HTMLElement) {
+      const widgets = [];
+      if (state.isEditionMode) {
+        widgets.push(
+          ...focusedCell.querySelectorAll(getFocusSelector())
+        );
+      } else {
+        const widget = focusedCell.querySelector(getFocusSelector());
+        if (widget) {
+          widgets.push(widget);
+        }
+      }
+      if (widgets.length) {
+        console.log(widgets);
+        widgets.forEach((widget, i) => {
+          widget.tabIndex = 0;
+          if (i === 0)
+            window.requestAnimationFrame(() => {
+              if (focus) {
+                widget.focus();
+              }
+            });
+        });
+      } else {
+        focusedCell.tabIndex = 0;
+        window.requestAnimationFrame(() => {
+          if (focus) {
+            focusedCell.focus();
+          }
+        });
+      }
+    }
+  }
+}
+
+function setAriaAttributes(element, attribute, value) {
+  element.setAttribute(attribute, value);
+}
+function getRowDomProps(rowIndex, state) {
+  return getDomProps(
+    getDomStoreProps(
+      rowIndex < 0 ? "headerTr" : "tr",
+      {
+        rowIndex
+      },
+      () => state
+    ),
+    rowIndex < 0 ? "headerTr" : "tr",
+    { rowIndex }
+  );
+}
+function applyRowSelectionAttributes(row, state) {
+  if (!(row instanceof HTMLElement))
+    return;
+  const rowIndex = Number.parseInt(row.dataset.rowindex || "a", 10);
+  const props = getRowDomProps(rowIndex, state);
+  Object.entries(props).forEach(([key, value]) => {
+    let match;
+    match = key.match(/aria-(\w+)/);
+    if (match) {
+      setAriaAttributes(row, key, value);
+    } else if (match = key.match(/data-(\w+)/)) {
+      row.dataset[match[1]] = value;
+    }
+  });
+}
+function applySelectionAttributes(table, _previousState, state) {
+  const previousSelectedRows = table.querySelectorAll(
+    '[aria-selected="true"]'
+  );
+  previousSelectedRows.forEach((c) => applyRowSelectionAttributes(c, state));
+  if (state.selectedRows.length) {
+    const newSelectedRows = table.querySelectorAll(
+      state.selectedRows.map((index) => `tr[data-rowindex="${index}"]`).join(",")
+    );
+    newSelectedRows.forEach((c) => applyRowSelectionAttributes(c, state));
+  }
+}
+
+function handleMouseDownEvent(ev) {
+  const target = ev.target;
+  if (target instanceof HTMLElement) {
+    const cell = target.closest("th,td");
+    const row = target.closest("tr");
+    const table = target.closest("table");
+    if (cell && row && table) {
+      const state = this.getState();
+      const rowIndex = Number.parseInt(row.dataset.rowindex || "a", 10);
+      const colIndex = Number.parseInt(cell.ariaColIndex || "a", 10);
+      if (!isNaN(rowIndex) && !isNaN(colIndex)) {
+        if (!ev.ctrlKey && !ev.shiftKey) {
+          state.selectedRows = [rowIndex];
+        } else if (ev.ctrlKey) {
+          if (state.selectedRows.includes(rowIndex)) {
+            state.selectedRows = state.selectedRows.filter(
+              (c) => c !== rowIndex
+            );
+          } else {
+            state.selectedRows = [...state.selectedRows, rowIndex];
+          }
+        } else if (ev.shiftKey) {
+          const previousFocused = this.getState().focusedRow;
+          state.selectedRows = [...state.selectedRows];
+          const min = Math.min(previousFocused, rowIndex);
+          const max = Math.max(previousFocused, rowIndex);
+          for (let i = min; i <= max; i++) {
+            state.selectedRows.push(i);
+          }
+        }
+        state.focusedColumn = colIndex;
+        state.focusedRow = rowIndex;
+        state.isFocused = true;
+        applySelectionAttributes(table, this.getState(), state);
+        applyFocusAttributes(table, this.getState(), state);
+        this.setState(state);
+      } else {
+        console.warn("Cannot parse rowIndex or colIndex");
+      }
+    } else {
+      console.warn("Cannot find cell, row or table");
+    }
+  }
+}
+
+function handleKeyDownEvent(ev) {
+  const target = ev.target;
+  const state = this.getState();
+  if (target instanceof HTMLElement) {
+    const table = target.closest("table");
+    const row = target.closest("tr");
+    const cell = target.closest("th,td");
+    if (table && row) {
+      if (state.isEditionMode) {
+        if (ev.code === "Escape" || ev.code === "Enter") {
+          state.isEditionMode = false;
+          this.setState(state);
+          applyFocusAttributes(table, this.getState(), state);
+        }
+      } else {
+        const rowIndex = Number.parseInt(row.dataset.rowindex || "a", 10);
+        const colIndex = Number.parseInt(cell?.ariaColIndex || "0", 10);
+        if (!isNaN(rowIndex) && !isNaN(colIndex)) {
+          if ([
+            "ArrowDown",
+            "ArrowUp",
+            "ArrowLeft",
+            "ArrowRight",
+            "End",
+            "Enter",
+            "Home",
+            "PageUp",
+            "PageDown"
+          ].includes(ev.code) || ev.code === "Space" && ev.ctrlKey) {
+            ev.preventDefault();
+            switch (ev.code) {
+              case "Space":
+                if (state.selectedRows.includes(rowIndex)) {
+                  state.selectedRows = state.selectedRows.filter(
+                    (c) => c !== rowIndex
+                  );
+                } else {
+                  state.selectedRows = [...state.selectedRows, rowIndex];
+                }
+                break;
+              case "ArrowDown":
+                state.focusedRow = addBoundary(
+                  state.focusedRow + 1,
+                  state.hasNonAdditionalFilters ? -2 : -1,
+                  state.rows.length - 1
+                );
+                if (ev.ctrlKey) ; else if (ev.shiftKey) {
+                  state.selectedRows = [
+                    ...state.selectedRows,
+                    state.focusedRow
+                  ];
+                } else {
+                  state.selectedRows = [state.focusedRow];
+                }
+                break;
+              case "ArrowUp":
+                state.focusedRow = addBoundary(
+                  state.focusedRow - 1,
+                  state.hasNonAdditionalFilters ? -2 : -1,
+                  state.rows.length - 1
+                );
+                if (ev.ctrlKey) ; else if (ev.shiftKey) {
+                  state.selectedRows = [
+                    ...state.selectedRows,
+                    state.focusedRow
+                  ];
+                } else {
+                  state.selectedRows = [state.focusedRow];
+                }
+                break;
+              case "ArrowLeft":
+                state.focusedColumn = addBoundary(
+                  state.focusedColumn - 1,
+                  0,
+                  state.columns.length
+                );
+                break;
+              case "ArrowRight":
+                state.focusedColumn = addBoundary(
+                  state.focusedColumn + 1,
+                  0,
+                  state.columns.length
+                );
+                break;
+              case "Home":
+                if (state.focusedColumn === 0) {
+                  state.focusedRow = state.hasNonAdditionalFilters ? -2 : -1;
+                  if (ev.ctrlKey) ; else if (ev.shiftKey) {
+                    const max = Math.max(
+                      state.focusedRow,
+                      this.getState().focusedRow
+                    );
+                    const min = Math.min(
+                      state.focusedRow,
+                      this.getState().focusedRow
+                    );
+                    for (let i = min; i <= max; i++) {
+                      state.selectedRows.push(i);
+                    }
+                  } else {
+                    state.selectedRows = [state.focusedRow];
+                  }
+                } else {
+                  state.focusedColumn = 1;
+                }
+                break;
+              case "End":
+                if (state.focusedColumn === 0) {
+                  state.focusedRow = state.rows.length - 1;
+                  if (ev.ctrlKey) ; else if (ev.shiftKey) {
+                    const max = Math.max(
+                      state.focusedRow,
+                      this.getState().focusedRow
+                    );
+                    const min = Math.min(
+                      state.focusedRow,
+                      this.getState().focusedRow
+                    );
+                    for (let i = min; i <= max; i++) {
+                      state.selectedRows.push(i);
+                    }
+                  } else {
+                    state.selectedRows = [state.focusedRow];
+                  }
+                } else {
+                  state.focusedColumn = state.columns.length;
+                }
+                break;
+              case "PageUp":
+                state.focusedRow = addBoundary(
+                  state.focusedRow - 6,
+                  state.hasNonAdditionalFilters ? -2 : -1,
+                  state.rows.length - 1
+                );
+                if (ev.ctrlKey) ; else if (ev.shiftKey) {
+                  const previousFocused = this.getState().focusedRow;
+                  state.selectedRows = [...state.selectedRows];
+                  const min = Math.min(previousFocused, state.focusedRow);
+                  const max = Math.max(previousFocused, state.focusedRow);
+                  for (let i = min; i <= max; i++) {
+                    state.selectedRows.push(i);
+                  }
+                } else {
+                  state.selectedRows = [state.focusedRow];
+                }
+                break;
+              case "PageDown":
+                state.focusedRow = addBoundary(
+                  state.focusedRow + 6,
+                  state.hasNonAdditionalFilters ? -2 : -1,
+                  state.rows.length - 1
+                );
+                if (ev.ctrlKey) ; else if (ev.shiftKey) {
+                  const previousFocused = this.getState().focusedRow;
+                  state.selectedRows = [...state.selectedRows];
+                  const min = Math.min(previousFocused, state.focusedRow);
+                  const max = Math.max(previousFocused, state.focusedRow);
+                  for (let i = min; i <= max; i++) {
+                    state.selectedRows.push(i);
+                  }
+                } else {
+                  state.selectedRows = [state.focusedRow];
+                }
+                break;
+              case "Enter":
+                state.isEditionMode = true;
+                this.setState(state);
+                applyFocusAttributes(table, this.getState(), state);
+                return;
+            }
+            state.isFocused = true;
+            applySelectionAttributes(table, this.getState(), state);
+            applyFocusAttributes(table, this.getState(), state);
+            this.setState(state);
+          }
+        }
+      }
+    }
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class Controller2 {
+  constructor(tableName) {
+    this.tableName = tableName;
+    __publicField(this, "events", {});
+    __publicField(this, "unsubscribe", () => {
+    });
+    __publicField(this, "el", null);
+    __publicField(this, "setRef", (el) => {
+      this.unsubscribe();
+      this.el = el;
+      if (el) {
+        el.addEventListener("keydown", this.handleKeyDownEvent);
+        el.addEventListener("mousedown", this.handleClickEvent);
+        this.unsubscribe = () => {
+          el.removeEventListener("keydown", this.handleKeyDownEvent);
+          el.removeEventListener("mousedown", this.handleClickEvent);
+        };
+      }
+    });
+    __publicField(this, "handleClickEvent");
+    __publicField(this, "handleKeyDownEvent");
+    this.handleClickEvent = handleMouseDownEvent.bind(this);
+    this.handleKeyDownEvent = handleKeyDownEvent.bind(this);
+  }
+  setEvents(events) {
+    this.events = events;
+  }
+  /**
+   * Returns a copy of the current state object
+   */
+  getState() {
+    return {
+      ...responsiveTableStore.getState().responsiveTableSlice[this.tableName]
+    };
+  }
+  setState(state) {
+    if (state.selectedRows && !shallowEqual$1(state.selectedRows, this.getState().selectedRows)) {
+      this.events.onChangeSelection?.(
+        state.selectedRows.map((index) => ({
+          index,
+          row: this.getState().rows[index]
+        }))
+      );
+      this.events.onSelectRows?.(
+        state.selectedRows.map((index) => ({
+          index,
+          row: this.getState().rows[index]
+        })),
+        state.focusedRow
+      );
+    }
+    if (state.scrollIntoViewRow !== void 0 && state.scrollIntoViewRow !== this.getState().scrollIntoViewRow) {
+      const row = this.el?.querySelector(
+        `tr[data-rowindex="${state.scrollIntoViewRow}"]`
+      );
+      if (row) {
+        row.scrollIntoView({ block: "nearest", inline: "nearest" });
+      }
+    }
+    responsiveTableStore.dispatch(
+      responsiveTableActions.controller2UpdateSelectionState({
+        tableName: this.tableName,
+        ...state
+      })
+    );
+  }
+  updateSelectionState() {
+    window.requestAnimationFrame(() => {
+      if (this.el) {
+        const table = this.el.querySelector("table");
+        if (table) {
+          applyFocusAttributes(table, this.getState(), this.getState());
+        }
+      }
+    });
+  }
+}
+const Controller2Component = ({
+  controller,
+  ...props
+}) => {
+  controller.setEvents({
+    onChangeSelection: props.onChangeSelection,
+    onSelectRows: props.onSelectRows
+  });
+  const previousColumns = useRef([]);
+  const previousRows = useRef([]);
+  const box = useRef(null);
+  useResponsiveTable((state) => {
+    if (!Object.is(
+      state.responsiveTableSlice[controller.tableName]?.columns,
+      previousColumns.current
+    )) {
+      previousColumns.current = state.responsiveTableSlice[controller.tableName]?.columns;
+      controller.updateSelectionState();
+    }
+    if (!Object.is(
+      state.responsiveTableSlice[controller.tableName]?.rows,
+      previousRows.current
+    )) {
+      previousRows.current = state.responsiveTableSlice[controller.tableName]?.rows;
+      controller.updateSelectionState();
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...props,
+      ref: (el) => {
+        controller.setRef(el);
+        box.current = el;
+      }
+    }
+  );
+};
+function makeController2(tableName) {
+  const controller = new Controller2(tableName);
+  return [
+    controller,
+    (props) => {
+      return /* @__PURE__ */ jsx(Controller2Component, { ...props, controller });
+    }
+  ];
+}
+
+const NoMemoDocNameCellRenderer = React.forwardRef(
+  ({
+    cell: { children, Renderer, rendererProps, AccordionRenderer, ...cell },
+    column,
+    row,
+    ...props
+  }, currentRef) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref: currentRef,
+      ...props,
+      ...cell,
+      children: /* @__PURE__ */ jsxs(
+        Link,
+        {
+          className: "cell__download__document",
+          title: rendererProps?.docName,
+          href: rendererProps?.docUrl,
+          onClick: (ev) => {
+            ev.preventDefault();
+            if (rendererProps?.docUrl)
+              void downloadUrl(rendererProps?.docUrl);
+          },
+          children: [
+            /* @__PURE__ */ jsx(Icon, { title: "", name: "Download" }),
+            rendererProps?.docName
+          ]
+        }
+      )
+    }
+  )
+);
+NoMemoDocNameCellRenderer.displayName = "DocNameCellRenderer";
+const DocNameCellRenderer = NoMemoDocNameCellRenderer;
+
+const NoMemoAccordionDocNameCellRenderer = React.forwardRef(
+  ({
+    cell: { children, Renderer, rendererProps, AccordionRenderer, ...cell },
+    column
+  }, currentRef) => /* @__PURE__ */ jsxs(Box, { ref: currentRef, ...cell, children: [
+    /* @__PURE__ */ jsxs(Box, { as: "strong", children: [
+      column.label ?? column.name,
+      ": "
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Link,
+      {
+        className: "cell__download__document",
+        title: rendererProps?.docName,
+        href: rendererProps?.docUrl,
+        onClick: (ev) => {
+          ev.preventDefault();
+          if (rendererProps?.docUrl)
+            void downloadUrl(rendererProps?.docUrl);
+        },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { title: "", name: "Download" }),
+          rendererProps?.docName
+        ]
+      }
+    )
+  ] })
+);
+NoMemoAccordionDocNameCellRenderer.displayName = "AccordionDocNameCellRenderer";
+const AccordionDocNameCellRenderer = NoMemoAccordionDocNameCellRenderer;
+
+const NoMemoAccordionHTMLCellRenderer = React.forwardRef(
+  ({
+    cell: { children, Renderer, rendererProps, AccordionRenderer, ...cell },
+    column,
+    row,
+    ...props
+  }, currentRef) => (
+    /**
+     * Aca falta el title de la columna
+     */
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: currentRef,
+        ...props,
+        ...cell,
+        className: "accordion__cell__renderer",
+        dangerouslySetInnerHTML: {
+          __html: String(rendererProps?.html ?? children ?? "").replaceAll(
+            /<TOK(\d+)/g,
+            "&lt;TOK$1"
+          )
+        },
+        as: "span"
+      }
+    )
+  )
+);
+NoMemoAccordionHTMLCellRenderer.displayName = "AccordionHTMLCellRenderer";
+const AccordionHTMLCellRenderer = NoMemoAccordionHTMLCellRenderer;
+
+const NoMemoHTMLCellRenderer = React.forwardRef(
+  ({
+    cell: { children, Renderer, rendererProps, AccordionRenderer, ...cell },
+    column,
+    row,
+    ...props
+  }, currentRef) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref: currentRef,
+      ...props,
+      ...cell,
+      dangerouslySetInnerHTML: {
+        __html: String(rendererProps?.html ?? children ?? "").replaceAll(
+          /<TOK(\d+)/g,
+          "&lt;TOK$1"
+        )
+      }
+    }
+  )
+);
+NoMemoHTMLCellRenderer.displayName = "HTMLCellRenderer";
+const HTMLCellRenderer = NoMemoHTMLCellRenderer;
+
+const IsLoadingRenderer = () => {
+  return /* @__PURE__ */ jsx(Box, { className: "responsiveTable__isLoading", children: /* @__PURE__ */ jsx(Spinner, {}) });
+};
+
+function makeAccordionAsyncRenderer(additionalInfoGetter) {
+  const InnerRender = forwardRef(({ row }, ref) => {
+    const [moreInfo, setMoreInfo] = useState(null);
+    const loadMore = useCallback(async () => {
+      const result = await additionalInfoGetter(row);
+      setMoreInfo(result);
+    }, [row]);
+    return /* @__PURE__ */ jsx(Fragment, { children: moreInfo ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(IconButton, { icon: "Minus", onClick: () => setMoreInfo(null) }),
+      arrayOrArray(moreInfo).map(
+        (dataCell) => {
+          return /* @__PURE__ */ jsxs(Box, { ref, as: "div", children: [
+            /* @__PURE__ */ jsxs(Box, { as: "strong", children: [
+              dataCell.name,
+              ":"
+            ] }),
+            " ",
+            dataCell.label
+          ] }, dataCell.name);
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(IconButton, { icon: "Plus", onClick: () => void loadMore() }) });
+  });
+  InnerRender.displayName = "MakeAccordionAsyncRenderer";
+  return InnerRender;
+}
+
+function makeAsyncRenderer(additionalInfoGetter) {
+  const InnerRender = forwardRef(({ row }, ref) => {
+    const [moreInfo, setMoreInfo] = useState(null);
+    useMount$1(() => {
+      void (async () => {
+        const result = await additionalInfoGetter(row);
+        setMoreInfo(result);
+      })();
+    });
+    return /* @__PURE__ */ jsx(Fragment, { children: moreInfo ? arrayOrArray(moreInfo).map((dataCell) => {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          ref,
+          className: `responsiveTable__additionalInfoItem ${dataCell.newline ? "separator" : ""}`,
+          children: dataCell.newline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { height: "20px" }, as: "strong", children: [
+              dataCell.name,
+              ":"
+            ] }),
+            " ",
+            dataCell.label
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(Box, { as: "strong", children: [
+              dataCell.name,
+              ":"
+            ] }),
+            " ",
+            dataCell.label
+          ] })
+        },
+        `${dataCell.name}-${uniqueId()}`
+      );
+    }) : /* @__PURE__ */ jsx(Spinner, { size: 15 }) });
+  });
+  InnerRender.displayName = "MakeAsyncRenderer";
+  return InnerRender;
+}
+
+const NoMemoNoEllipsisCellRenderer = React.forwardRef(
+  ({
+    cell: { Renderer, rendererProps, AccordionRenderer, ariaLabel, ...cell },
+    column,
+    row,
+    ...props
+  }, currentRef) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "td",
+      sx: useMemo(
+        () => ({
+          "&.colored": {
+            background: cell.background,
+            color: cell.color,
+            fontWeight: "bold"
+          }
+        }),
+        [cell.background, cell.color]
+      ),
+      ref: currentRef,
+      ...props,
+      ...cell,
+      "aria-label": ariaLabel,
+      children: props.children ?? cell.children
+    }
+  )
+);
+NoMemoNoEllipsisCellRenderer.displayName = "DefaultCellRenderer";
+const NoEllipsisCellRenderer = memo(NoMemoNoEllipsisCellRenderer);
+
+function getPriorityHandler(priority) {
+  let prio;
+  if (priority?.includes("priority0"))
+    prio = "priorityNone";
+  if (priority?.includes("priority1"))
+    prio = "priorityLow";
+  if (priority?.includes("priority2"))
+    prio = "priorityNormal";
+  if (priority?.includes("priority3"))
+    prio = "priorityHigh";
+  if (priority?.includes("priority4"))
+    prio = "priorityUrgent";
+  return prio;
+}
+const NoMemoPriorityRenderer = React.forwardRef(
+  ({
+    cell: { children, Renderer, rendererProps, AccordionRenderer, ...cell },
+    column,
+    row,
+    ...props
+  }, currentRef) => {
+    const taskPriorityColor = getPriorityHandler(rendererProps?.src);
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ...props,
+        ...cell,
+        ref: currentRef,
+        className: "priority",
+        sx: {
+          color: taskPriorityColor
+        },
+        children: /* @__PURE__ */ jsx(FaSquare, {})
+      }
+    );
+  }
+);
+NoMemoPriorityRenderer.displayName = "PriorityRenderer";
+const PriorityRenderer = NoMemoPriorityRenderer;
+
+const NoMemoPriorityAccordionRenderer = React.forwardRef(
+  ({ cell, column }, currentRef) => {
+    const taskPriorityColor = getPriorityHandler(
+      cell.rendererProps?.src
+    );
+    const title = column.label ?? column.name;
+    return /* @__PURE__ */ jsxs(Box, { ref: currentRef, className: "priority_container", children: [
+      title && /* @__PURE__ */ jsxs(Box, { as: "strong", children: [
+        column.label ?? column.name,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          as: "span",
+          className: "priority",
+          sx: {
+            color: taskPriorityColor
+          },
+          children: /* @__PURE__ */ jsx(FaSquare, {})
+        }
+      )
+    ] });
+  }
+);
+NoMemoPriorityAccordionRenderer.displayName = "PriorityAccordionRenderer";
+const PriorityAccordionRenderer = NoMemoPriorityAccordionRenderer;
+
+function getStatusRendererClassName(cellValue, columnName) {
+  if (cellValue === void 0)
+    return "";
+  const cellValueDate = cellValue.split(" ")[0];
+  const cellValueHour = cellValue.split(" ")[1] ?? "00:00:00";
+  const dateFormat = getDateFormat();
+  const currentDate = dayjs();
+  const currentHour = Number(dayjs().format("HHmm"));
+  const queriedDate = dayjs(cellValueDate, dateFormat);
+  const queriedHour = Number(dayjs(cellValueHour, dateFormat));
+  let statusClassName = "";
+  if (currentDate >= queriedDate) {
+    statusClassName = columnName;
+  }
+  if (!queriedHour)
+    return statusClassName;
+  if (currentDate <= queriedDate && currentHour < queriedHour) {
+    statusClassName = columnName;
+  }
+  return statusClassName;
+}
+const NoMemoStatusRenderer = React.forwardRef(
+  ({
+    cell: { children, Renderer, rendererProps, AccordionRenderer, ...cell },
+    column,
+    row,
+    ...props
+  }, currentRef) => {
+    const taskStatusClassName = getStatusRendererClassName(
+      children,
+      column.name
+    );
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ...props,
+        ...cell,
+        ref: currentRef,
+        className: taskStatusClassName,
+        children
+      }
+    );
+  }
+);
+NoMemoStatusRenderer.displayName = "StatusRenderer";
+const StatusRenderer = NoMemoStatusRenderer;
+
+const NoMemoStatusAccordionRenderer = React.forwardRef(({ cell, column }, currentRef) => {
+  const taskStatusClassName = getStatusRendererClassName(
+    cell.children,
+    column.name
+  );
+  return /* @__PURE__ */ jsxs(Box, { ref: currentRef, children: [
+    /* @__PURE__ */ jsxs(Box, { as: "strong", children: [
+      column.label ?? column.name,
+      ": "
+    ] }),
+    /* @__PURE__ */ jsx(Box, { as: "span", className: taskStatusClassName, children: cell.children })
+  ] });
+});
+NoMemoStatusAccordionRenderer.displayName = "StatusAccordionRenderer";
+const StatusAccordionRenderer = NoMemoStatusAccordionRenderer;
+
+export { AccordionCell, AccordionDocNameCellRenderer, AccordionElement, AccordionHTMLCellRenderer, AccordionRenderer, Additional, AdditionalColumnDefaultRenderer, Controller2, DefaultCellRenderer, DefaultRowRenderer, DocNameCellRenderer, HTMLCellRenderer, IsLoadingRenderer, NoEllipsisCellRenderer, NoRegistersRenderer, Pagination, PriorityAccordionRenderer, PriorityRenderer, Responsive, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, Sort, StatusAccordionRenderer, StatusRenderer, TableRenderer, defaultLabels, getPriorityHandler, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
 //# sourceMappingURL=index.js.map