@apia/table 4.0.24 → 4.0.26

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 & {
     /**
@@ -590,7 +591,7 @@ declare const Pagination: React__default.MemoExoticComponent<({ appliedFilters,
 
 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 +672,7 @@ declare class Controller2 {
         allowSorting?: boolean | undefined;
         isMultiple?: boolean;
         reserveColumnsForStates?: number | undefined;
+        statesColumns: TResponsiveTableContextProps["statesColumns"];
         allowEdition?: boolean;
         allowRowsKeyboardSorting?: boolean;
         allowSelection?: boolean;
@@ -687,7 +689,6 @@ declare class Controller2 {
         rows: TResponsiveTableRow<any>[];
         scrollIntoViewRow?: number;
         selectedRows: number[];
-        statesColumns: number;
         accordionIndexColumns: TResponsiveTableIndexColumns;
         isLoading: boolean;
     };

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
         )],
@@ -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",
     {
@@ -1231,11 +1251,14 @@ const NoMemoHeaderCell = ({
     },
     [column.maxWidth, column.minWidth, column.width, 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")
@@ -1424,7 +1447,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 +1652,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 +1688,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 +1695,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 +1749,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 +1787,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 +2059,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 +2212,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)
   );
@@ -3007,63 +3046,6 @@ 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();
-          }
-        });
-      }
-    }
-  }
-}
-
 function setAriaAttributes(element, attribute, value) {
   element.setAttribute(attribute, value);
 }
@@ -3150,18 +3132,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 +3146,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 +3231,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 +3252,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 +3268,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 +3282,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 +3318,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 +3337,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 +3360,7 @@ function handleKeyDownEvent(ev) {
                 }
                 break;
               case "PageDown":
+                mustFocus = true;
                 state.focusedRow = addBoundary(
                   state.focusedRow + 6,
                   state.hasNonAdditionalFilters ? -2 : -1,
@@ -3336,24 +3379,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);
           }
         }