@apia/table 4.0.25 → 4.0.27

package/dist/index.d.ts

@@ -255,6 +255,7 @@ type TResponsiveTableStoreProps = {
      * definida de estados con este parámetro.
      */
     reserveColumnsForStates?: number;
+    statesColumns?: TResponsiveTableRowState[];
 };
 type TResponsiveTableRowsSelectionEvent = {
     index: number;
@@ -519,7 +520,7 @@ interface ISelectableState<ColumnType extends IBasicColumn = IBasicColumn, Filte
      * automáticamente por el keyHandler.
      */
     selectedRows: number[];
-    statesColumns: number;
+    statesColumns: TResponsiveTableContextProps['statesColumns'];
 }
 type TKeyHandlerProps = BoxProps & {
     /**
@@ -588,9 +589,14 @@ interface IPagination {
 }
 declare const Pagination: React__default.MemoExoticComponent<({ appliedFilters, areAllFiltersApplied, className, currentPage, disabled, disableReduced, hasMore, hideInfo, hideMaximizeButton, hideRefreshButton, isLoading, isPerforming, listId: outerListId, onDeleteFilters, onPageChange, onRefresh, pageCount, recordsCount: outerRecordsCount, reachedMax, showMaximizeOnSmallBreakpoints, variant, }: IPagination) => React__default.JSX.Element>;
 
+declare const Grouped: React__default.MemoExoticComponent<({ group, tableName, }: {
+    group: string;
+    tableName?: string;
+}) => React__default.JSX.Element>;
+
 declare function getResponsiveTableContext(tableName: string): TResponsiveTableContext;
 declare function useResponsiveTableContext(tableName?: string): TResponsiveTableContext;
-declare const ResponsiveTableContext: React__default.MemoExoticComponent<({ allowEdition, allowRowsKeyboardSorting, avoidAutoEllipsis, allowSelection, allowSorting, avoidReparseSelectionOnRowChange, children, className, currentBreakPoint, customLabels, columns, filters, FiltersRenderer, rows, label, isMultiple, name, onChangeSelection, onFilterBlur, onFilterChange, onFilterPressEnter, onRowClick, onSelectRows, onSortChange, reserveColumnsForStates, SelectionHandler, variant, }: TResponsiveTableContextProps) => React__default.JSX.Element>;
+declare const ResponsiveTableContext: React__default.MemoExoticComponent<({ allowEdition, allowRowsKeyboardSorting, avoidAutoEllipsis, allowSelection, allowSorting, avoidReparseSelectionOnRowChange, children, className, currentBreakPoint, customLabels, columns, filters, FiltersRenderer, rows, label, isMultiple, isLoading, name, statesColumns, onChangeSelection, onFilterBlur, onFilterChange, onFilterPressEnter, onRowClick, onSelectRows, onSortChange, reserveColumnsForStates, SelectionHandler, variant, }: TResponsiveTableContextProps) => React__default.JSX.Element>;
 
 type TPayloadWithId$1<P = Record<string, unknown>, T extends string = string, M = never, E = never> = PayloadAction$1<P & {
     id: string;
@@ -671,6 +677,7 @@ declare class Controller2 {
         allowSorting?: boolean | undefined;
         isMultiple?: boolean;
         reserveColumnsForStates?: number | undefined;
+        statesColumns: TResponsiveTableContextProps["statesColumns"];
         allowEdition?: boolean;
         allowRowsKeyboardSorting?: boolean;
         allowSelection?: boolean;
@@ -687,7 +694,6 @@ declare class Controller2 {
         rows: TResponsiveTableRow<any>[];
         scrollIntoViewRow?: number;
         selectedRows: number[];
-        statesColumns: number;
         accordionIndexColumns: TResponsiveTableIndexColumns;
         isLoading: boolean;
     };
@@ -798,5 +804,5 @@ declare const TableRenderer: React__default.MemoExoticComponent<({ variant }: {
     variant?: string;
 }) => React__default.JSX.Element>;
 
-export { AccordionCell, AccordionDocNameCellRenderer, AccordionElement, AccordionHTMLCellRenderer, AccordionRenderer, Additional, AdditionalColumnDefaultRenderer, Controller2, DefaultCellRenderer, DefaultRowRenderer, DocNameCellRenderer, HTMLCellRenderer, type IAccordionElement, IsLoadingRenderer, NoEllipsisCellRenderer, NoRegistersRenderer, Pagination, PriorityAccordionRenderer, PriorityRenderer, RangeFilter, Responsive, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, Sort, StatusAccordionRenderer, StatusRenderer, type TAccordionCellRenderer, type TAccordionCellRendererProps, type TColoredElement, type TDocNameCellRenderer, type TDocNameCellRendererProps, type TResponsiveTableCell, type TResponsiveTableCellRenderer, type TResponsiveTableCellRendererProps, type TResponsiveTableColumn, type TResponsiveTableContext, type TResponsiveTableContextProps, type TResponsiveTableRow, type TResponsiveTableRowRenderer, type TResponsiveTableRowRendererProps, type TResponsiveTableRowState, type TResponsiveTableRowsSelectionEvent, type TResponsiveTableSortChangeEvent, type TResponsiveTableSortValue, type TResponsiveTableStoreProps, type TResponsiveTableWithRendererElement, TableContextReproducer, TableLoadingContext, TableRenderer, defaultLabels, getPriorityHandler, getResponsiveTableContext, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
+export { AccordionCell, AccordionDocNameCellRenderer, AccordionElement, AccordionHTMLCellRenderer, AccordionRenderer, Additional, AdditionalColumnDefaultRenderer, Controller2, DefaultCellRenderer, DefaultRowRenderer, DocNameCellRenderer, Grouped, HTMLCellRenderer, type IAccordionElement, IsLoadingRenderer, NoEllipsisCellRenderer, NoRegistersRenderer, Pagination, PriorityAccordionRenderer, PriorityRenderer, RangeFilter, Responsive, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, Sort, StatusAccordionRenderer, StatusRenderer, type TAccordionCellRenderer, type TAccordionCellRendererProps, type TColoredElement, type TDocNameCellRenderer, type TDocNameCellRendererProps, type TResponsiveTableCell, type TResponsiveTableCellRenderer, type TResponsiveTableCellRendererProps, type TResponsiveTableColumn, type TResponsiveTableContext, type TResponsiveTableContextProps, type TResponsiveTableRow, type TResponsiveTableRowRenderer, type TResponsiveTableRowRendererProps, type TResponsiveTableRowState, type TResponsiveTableRowsSelectionEvent, type TResponsiveTableSortChangeEvent, type TResponsiveTableSortValue, type TResponsiveTableStoreProps, type TResponsiveTableWithRendererElement, TableContextReproducer, TableLoadingContext, TableRenderer, defaultLabels, getPriorityHandler, getResponsiveTableContext, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -32,8 +32,8 @@ function getInitialState$1() {
     isMultiple: true,
     nonAdditionalColumnsCount: 0,
     rows: [],
-    selectedRows: [],
-    statesColumns: 0
+    statesColumns: [],
+    selectedRows: []
   };
 }
 
@@ -353,14 +353,6 @@ const responsiveTableSlice = createSlice({
           (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(
@@ -470,7 +462,9 @@ const NoMemoResponsiveTableContext = ({
   rows,
   label,
   isMultiple,
+  isLoading,
   name,
+  statesColumns,
   onChangeSelection,
   onFilterBlur,
   onFilterChange,
@@ -505,7 +499,9 @@ const NoMemoResponsiveTableContext = ({
       onRowClick,
       onSelectRows,
       onSortChange,
-      SelectionHandler
+      SelectionHandler,
+      statesColumns,
+      isLoading
     }),
     [
       currentBreakPoint,
@@ -521,7 +517,9 @@ const NoMemoResponsiveTableContext = ({
       onRowClick,
       onSelectRows,
       onSortChange,
-      SelectionHandler
+      SelectionHandler,
+      statesColumns,
+      isLoading
     ]
   );
   tableContexts[actualName] = contextValue;
@@ -538,7 +536,9 @@ const NoMemoResponsiveTableContext = ({
         isMultiple,
         tableName: actualName,
         reserveColumnsForStates,
-        handleFocus: !SelectionHandler
+        handleFocus: !SelectionHandler,
+        statesColumns,
+        isLoading
       })
     );
   });
@@ -578,6 +578,22 @@ const NoMemoResponsiveTableContext = ({
       })
     );
   }, [filters]);
+  useUpdateEffect(() => {
+    responsiveTableStore.dispatch(
+      responsiveTableActions.update({
+        tableName: actualName,
+        statesColumns
+      })
+    );
+  }, [statesColumns]);
+  useUpdateEffect(() => {
+    responsiveTableStore.dispatch(
+      responsiveTableActions.update({
+        tableName: actualName,
+        isLoading
+      })
+    );
+  }, [isLoading]);
   useUnmount(() => {
     responsiveTableStore.dispatch(
       responsiveTableActions.destroy({ tableName: actualName })
@@ -949,7 +965,7 @@ function getDomStoreProps(element, elementProps, stateSelector) {
   const tableState = stateSelector(globalState);
   const hasNonAdditionalFilters = tableState?.hasNonAdditionalFilters;
   const startDataRowIndex = hasNonAdditionalFilters ? 2 : 1;
-  const statesColumns = tableState?.statesColumns ?? 0;
+  const statesColumns = tableState?.statesColumns?.length ?? 0;
   let expandedBeforeThisRow = 0;
   if (element === "tr")
     expandedBeforeThisRow = tableState?.expandedRows.filter(
@@ -1023,7 +1039,7 @@ function getDomProps(state, element, elementProps) {
     case "filterTd": {
       const castedProps = elementProps;
       returnObject = {
-        "aria-colindex": castedProps.columnIndex + 1 + state.statesColumns + (state.hasNonAdditionalFilters ? 1 : 0),
+        "aria-colindex": castedProps.columnIndex + 1 + (state.statesColumns?.length || 0) + (state.hasNonAdditionalFilters ? 1 : 0),
         "data-editionmode": state.isEditionMode && state.isFocused,
         "data-focused": state.isFocused,
         tabIndex: state.isFocused ? 0 : -1,
@@ -1077,7 +1093,7 @@ function getDomProps(state, element, elementProps) {
     case "td": {
       const castedProps = elementProps;
       returnObject = {
-        "aria-colindex": castedProps.columnIndex + 1 + state.statesColumns + (state.hasNonAdditionalFilters ? 1 : 0),
+        "aria-colindex": castedProps.columnIndex + 1 + (state.statesColumns?.length ?? 0) + (state.hasNonAdditionalFilters ? 1 : 0),
         "data-editionmode": state.isEditionMode && state.isFocused,
         "data-focused": state.isFocused,
         tabIndex: state.isFocused ? 0 : -1,
@@ -1121,7 +1137,7 @@ function getDomProps(state, element, elementProps) {
     case "th": {
       const castedProps = elementProps;
       returnObject = {
-        "aria-colindex": castedProps.columnIndex + 1 + state.statesColumns + (state.hasNonAdditionalFilters ? 1 : 0),
+        "aria-colindex": castedProps.columnIndex + 1 + (state.statesColumns?.length ?? 0) + (state.hasNonAdditionalFilters ? 1 : 0),
         "aria-sort": ["ascending", "descending", void 0][["Asc", "Desc", null].findIndex(
           (current) => current === state.columns[castedProps.columnIndex].currentSorting
         )],
@@ -1190,7 +1206,7 @@ const NoMemoHeaderCell = ({
   const column = columns[columnIndex];
   const additionalInfoColumns = columns.filter((c) => c.showAsAdditional);
   const storedWidth = persistentStorage[widthStorageName]?.[actualName]?.[column.name];
-  const [width, setWidth] = React.useState(storedWidth ?? 200);
+  const [width, setWidth] = React.useState(storedWidth ?? column.width ?? 200);
   const [isResize, setIsResize] = React.useState(storedWidth !== void 0);
   React.useEffect(() => {
     return void thWidthEmitter.on("resize", (ev) => {
@@ -1211,6 +1227,10 @@ const NoMemoHeaderCell = ({
     const tableState = global.responsiveTableSlice[name];
     return tableState?.allowSorting;
   });
+  const isLoading = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.isLoading;
+  });
   const domProps = useDomProps(
     "th",
     {
@@ -1220,22 +1240,33 @@ const NoMemoHeaderCell = ({
   );
   const sx = React.useMemo(
     () => !isResize ? {
-      minWidth: getColumnWidth(column.minWidth ?? column.width),
+      minWidth: columnIndex === columns.length - 1 ? "100%" : getColumnWidth(column.minWidth ?? column.width),
       maxWidth: column.maxWidth !== void 0 ? getColumnWidth(column.maxWidth) : void 0,
-      width: getColumnWidth(column.width),
+      width: columnIndex === columns.length - 1 ? "100%" : getColumnWidth(column.width),
       position: "relative"
     } : {
       width: `${width}px`,
-      minWidth: `${width}px`,
+      minWidth: columnIndex === columns.length - 1 ? "100%" : `${width}px`,
       position: "relative"
     },
-    [column.maxWidth, column.minWidth, column.width, isResize, width]
+    [
+      column.maxWidth,
+      column.minWidth,
+      column.width,
+      columnIndex,
+      columns.length,
+      isResize,
+      width
+    ]
   );
+  const lastIsLoading = useLatest(isLoading);
   const buttonProps = useOtherTagButton(
     React.useMemo(
       () => ({
         className: "headButton",
         onClick: (ev) => {
+          if (lastIsLoading.current)
+            return;
           if (isChild(
             ev.target,
             (current) => current.classList.contains("headButton__resizer")
@@ -1250,14 +1281,14 @@ const NoMemoHeaderCell = ({
             });
         }
       }),
-      [apiaColumnIndex, column, isSortingAllowed, onSortChange]
+      [apiaColumnIndex, column, isSortingAllowed, lastIsLoading, onSortChange]
     )
   );
   return /* @__PURE__ */ jsx(
     Box,
     {
       as: "th",
-      style: sx,
+      ...{ sx },
       "data-columnname": column.name,
       title: column.title ?? column.label ?? column.name,
       ...buttonProps,
@@ -1424,7 +1455,7 @@ const StateCell = ({ index, rowIndex, state, isHeader }) => {
     { columnIndex: index, rowIndex },
     domPropsSelector(name)
   );
-  return /* @__PURE__ */ jsx(Box, { as: "td", className: "stateCell", ...domProps, children: state ? /* @__PURE__ */ jsx(RowStatesRenderer, { state }) : "" });
+  return /* @__PURE__ */ jsx(Box, { as: "td", className: "stateCell", ...domProps, children: state?.Icon ? /* @__PURE__ */ jsx(RowStatesRenderer, { state }) : "" });
 };
 
 const units = ["B", "KB", "MB", "GB"];
@@ -1629,6 +1660,25 @@ const NoMemoHeader = () => {
   const focusedRow = useResponsiveTable(
     (global) => global.responsiveTableSlice[name]?.focusedRow
   );
+  const statesColumns = useResponsiveTable((global) => {
+    const state = global.responsiveTableSlice[name];
+    return Array(
+      Math.max(
+        0,
+        state?.reserveColumnsForStates || 0,
+        state?.statesColumns?.length || 0
+      )
+    ).fill(1).map((_, index) => {
+      const r = {
+        Icon: "",
+        iconColor: "transparent",
+        id: String(index),
+        tooltip: "",
+        ...state.statesColumns?.[index]
+      };
+      return r;
+    });
+  });
   const filters = useResponsiveTable(
     (global) => {
       const tableState = global.responsiveTableSlice[name];
@@ -1646,10 +1696,6 @@ const NoMemoHeader = () => {
       }, 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),
@@ -1657,9 +1703,6 @@ const NoMemoHeader = () => {
     ),
     [columns]
   );
-  const statesIds = React.useMemo(() => {
-    return Array(statesCount).fill("").map(() => uniqueId());
-  }, [statesCount]);
   const [isFiltersRowVisible, setIsFiltersRowVisible] = React.useState(
     /* (persistentStorage.showResponsiveTableFilters as boolean) ??  */
     false
@@ -1714,7 +1757,7 @@ const NoMemoHeader = () => {
           ] })
         }
       ),
-      statesIds.map((id, i) => /* @__PURE__ */ jsx(StateCell, { isHeader: true, index: i, rowIndex: 1 }, id)),
+      statesColumns.map(({ id, ...state }, i) => /* @__PURE__ */ jsx(StateCell, { isHeader: true, index: i, rowIndex: 1, state }, id)),
       columns?.map((current, actualColumnIndex) => ({
         ...current,
         actualTableColumnIndex: actualColumnIndex
@@ -1752,7 +1795,7 @@ const NoMemoHeader = () => {
               children: "\xA0"
             }
           ),
-          statesIds.map((id, i) => /* @__PURE__ */ jsx(StateCell, { isHeader: true, index: i, rowIndex: 2 }, id)),
+          statesColumns.map(({ id }, i) => /* @__PURE__ */ jsx(StateCell, { isHeader: true, index: i, rowIndex: 2 }, id)),
           columns?.filter((current) => !current.showAsAdditional && !current.hidden).map((current, columnIndex) => {
             const filter = filters.find(
               (search) => search.definition.column === current.name
@@ -2024,7 +2067,11 @@ const NoMemoRow = ({ rowIndex }) => {
   );
   const statesCount = useResponsiveTable((globalState) => {
     const state = globalState.responsiveTableSlice[name];
-    return state?.statesColumns ?? 0;
+    return Math.max(
+      state?.reserveColumnsForStates || 0,
+      state?.statesColumns?.length ?? 0,
+      0
+    );
   }, shallowEqual);
   const states = React.useMemo(
     () => (row.states ?? []).map((current) => ({ ...current, id: uniqueId() })),
@@ -2173,7 +2220,7 @@ const NoMemoTableRenderer = ({ variant }) => {
     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(
+    (global) => (global.responsiveTableSlice[name]?.nonAdditionalColumnsCount ?? 0) + (global.responsiveTableSlice[name]?.hasNonAdditionalFilters ? 1 : 0) + (global.responsiveTableSlice[name]?.statesColumns?.length ?? 0) + (global.responsiveTableSlice[name]?.columns.find(
       (current) => current.showAsAdditional
     ) ? 1 : 0)
   );
@@ -2487,7 +2534,7 @@ const NoMemoInnerRender = React.forwardRef(
                 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, {
+                  !filter?.avoidLabel && /* @__PURE__ */ jsx(Box, { as: "span", children: isDate && !filter.hideToFilter ? formatMessage(window.LBL_DATE_FILTER_FROM_TXT, {
                     TOK1: filterTitle
                   }) : filterTitle }),
                   Renderer ? /* @__PURE__ */ jsx(Renderer, { filter }) : filter.isRange ? /* @__PURE__ */ jsx(RangeFilter, { filter }) : /* @__PURE__ */ jsx(
@@ -2531,7 +2578,7 @@ const NoMemoInnerRender = React.forwardRef(
           {
             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, {
+              !filter?.avoidLabel && /* @__PURE__ */ jsx(Box, { as: "span", children: formatMessage(window.LBL_DATE_FILTER_TO_TXT, {
                 TOK1: filterTitle
               }) }),
               /* @__PURE__ */ jsx(
@@ -3007,62 +3054,18 @@ const NoMemoPagination = ({
 };
 const Pagination = React.memo(NoMemoPagination);
 
-function applyFocusAttributes(table, _previousState, state, focus = state.isFocused, target) {
-  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}"]`
-    );
-    if (target) {
-      target.focus();
-    }
-    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) {
-        widgets.forEach((widget, i) => {
-          widget.tabIndex = 0;
-          if (i === 0)
-            window.requestAnimationFrame(() => {
-              if (!target && focus) {
-                widget.focus();
-              }
-            });
-        });
-      } else {
-        focusedCell.tabIndex = 0;
-        window.requestAnimationFrame(() => {
-          if (!target && focus) {
-            focusedCell.focus();
-          }
-        });
-      }
-    }
-  }
-}
+const NoMemoGrouped = ({
+  group,
+  tableName
+}) => {
+  const { name } = useResponsiveTableContext(tableName);
+  const groupedFilters = useResponsiveTable((global) => {
+    const state = global.responsiveTableSlice[name];
+    return state?.filters.filter((current) => current.group === group);
+  }, shallowEqual);
+  return /* @__PURE__ */ jsx(InnerRender, { tableName, filters: groupedFilters });
+};
+const Grouped = React.memo(NoMemoGrouped);
 
 function setAriaAttributes(element, attribute, value) {
   element.setAttribute(attribute, value);
@@ -3150,18 +3153,11 @@ function handleMouseDownEvent(ev) {
         state.focusedRow = rowIndex;
         state.isFocused = true;
         applySelectionAttributes(table, this.getState(), state);
-        applyFocusAttributes(
-          table,
-          this.getState(),
-          state,
-          state.isFocused,
-          target
-        );
         this.setState(state);
-        this.events.onRowClick?.(
+        this.events.emit("onRowClick", [
           { row: state.rows[state.focusedRow], index: state.focusedRow },
           state.focusedRow
-        );
+        ]);
       } else {
         console.warn("Cannot parse rowIndex or colIndex");
       }
@@ -3171,6 +3167,61 @@ function handleMouseDownEvent(ev) {
   }
 }
 
+function applyFocusAttributes(table, _previousState, state, focus = state.isFocused, target) {
+  focus = focus && table.contains(document.activeElement);
+  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}"]`
+    );
+    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) {
+        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 handleKeyDownEvent(ev) {
   const target = ev.target;
   const state = this.getState();
@@ -3201,6 +3252,11 @@ function handleKeyDownEvent(ev) {
             "PageDown"
           ].includes(ev.code) || ev.code === "Space" && ev.ctrlKey) {
             ev.preventDefault();
+            let mustFocus = false;
+            const maxColumnIndex = state.columns.length + Math.max(
+              state.reserveColumnsForStates ?? 0,
+              state.statesColumns?.length ?? 0
+            ) + (state.hasNonAdditionalFilters ? 1 : 0);
             switch (ev.code) {
               case "Space":
                 if (state.selectedRows.includes(rowIndex)) {
@@ -3217,6 +3273,7 @@ function handleKeyDownEvent(ev) {
                   state.hasNonAdditionalFilters ? -2 : -1,
                   state.rows.length - 1
                 );
+                mustFocus = true;
                 if (ev.ctrlKey) ; else if (ev.shiftKey && state.isMultiple !== false) {
                   state.selectedRows = [
                     ...state.selectedRows,
@@ -3232,6 +3289,7 @@ function handleKeyDownEvent(ev) {
                   state.hasNonAdditionalFilters ? -2 : -1,
                   state.rows.length - 1
                 );
+                mustFocus = true;
                 if (ev.ctrlKey) ; else if (ev.shiftKey && state.isMultiple !== false) {
                   state.selectedRows = [
                     ...state.selectedRows,
@@ -3245,17 +3303,20 @@ function handleKeyDownEvent(ev) {
                 state.focusedColumn = addBoundary(
                   state.focusedColumn - 1,
                   0,
-                  state.columns.length
+                  maxColumnIndex
                 );
+                mustFocus = true;
                 break;
               case "ArrowRight":
                 state.focusedColumn = addBoundary(
                   state.focusedColumn + 1,
                   0,
-                  state.columns.length + (state.hasNonAdditionalFilters ? 1 : 0)
+                  maxColumnIndex
                 );
+                mustFocus = true;
                 break;
               case "Home":
+                mustFocus = true;
                 if (state.focusedColumn === 0) {
                   state.focusedRow = state.hasNonAdditionalFilters ? -2 : -1;
                   if (ev.ctrlKey) ; else if (ev.shiftKey && state.isMultiple !== false) {
@@ -3278,6 +3339,7 @@ function handleKeyDownEvent(ev) {
                 }
                 break;
               case "End":
+                mustFocus = true;
                 if (state.focusedColumn === 0) {
                   state.focusedRow = state.rows.length - 1;
                   if (ev.ctrlKey) ; else if (ev.shiftKey && state.isMultiple !== false) {
@@ -3296,10 +3358,11 @@ function handleKeyDownEvent(ev) {
                     state.selectedRows = [state.focusedRow];
                   }
                 } else {
-                  state.focusedColumn = state.columns.length;
+                  state.focusedColumn = maxColumnIndex;
                 }
                 break;
               case "PageUp":
+                mustFocus = true;
                 state.focusedRow = addBoundary(
                   state.focusedRow - 6,
                   state.hasNonAdditionalFilters ? -2 : -1,
@@ -3318,6 +3381,7 @@ function handleKeyDownEvent(ev) {
                 }
                 break;
               case "PageDown":
+                mustFocus = true;
                 state.focusedRow = addBoundary(
                   state.focusedRow + 6,
                   state.hasNonAdditionalFilters ? -2 : -1,
@@ -3336,24 +3400,24 @@ function handleKeyDownEvent(ev) {
                 }
                 break;
               case "Enter": {
+                mustFocus = true;
                 state.isEditionMode = true;
                 this.setState(state);
-                applyFocusAttributes(table, this.getState(), state);
                 if (state.focusedRow >= 0) {
-                  this.events.onSelectRows?.(
+                  this.events.emit("onSelectRows", [
                     this.getSelection().map((index) => ({
                       index,
                       row: this.getState().rows[index]
                     })),
                     state.focusedRow
-                  );
+                  ]);
                 }
                 return;
               }
             }
             state.isFocused = true;
             applySelectionAttributes(table, this.getState(), state);
-            applyFocusAttributes(table, this.getState(), state);
+            applyFocusAttributes(table, this.getState(), state, mustFocus);
             this.setState(state);
           }
         }
@@ -3911,5 +3975,5 @@ const NoMemoStatusAccordionRenderer = React.forwardRef(({ cell, column }, curren
 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, RangeFilter, Responsive, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, Sort, StatusAccordionRenderer, StatusRenderer, TableContextReproducer, TableLoadingContext, TableRenderer, defaultLabels, getPriorityHandler, getResponsiveTableContext, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
+export { AccordionCell, AccordionDocNameCellRenderer, AccordionElement, AccordionHTMLCellRenderer, AccordionRenderer, Additional, AdditionalColumnDefaultRenderer, Controller2, DefaultCellRenderer, DefaultRowRenderer, DocNameCellRenderer, Grouped, HTMLCellRenderer, IsLoadingRenderer, NoEllipsisCellRenderer, NoRegistersRenderer, Pagination, PriorityAccordionRenderer, PriorityRenderer, RangeFilter, Responsive, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, Sort, StatusAccordionRenderer, StatusRenderer, TableContextReproducer, TableLoadingContext, TableRenderer, defaultLabels, getPriorityHandler, getResponsiveTableContext, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
 //# sourceMappingURL=index.js.map