@apia/table 4.0.30 → 4.0.31

package/dist/index.d.ts

@@ -323,6 +323,7 @@ type TResponsiveTableContextProps = TResponsiveTableStoreProps & Pick<ISelectabl
      * Si se pasa selectionHandler, la tabla no realizará ningún control de eventos de teclado o mouse.
      */
     SelectionHandler?: FC<TKeyHandlerProps>;
+    showFilters?: boolean;
     variant?: string;
 };
 /**
@@ -332,7 +333,7 @@ type TResponsiveTableContextProps = TResponsiveTableStoreProps & Pick<ISelectabl
  * desee informar de un evento en particular
  * pueda hacerlo en forma sencilla.
  */
-type TResponsiveTableContext = TModify<Pick<TResponsiveTableContextProps, 'avoidAutoEllipsis' | 'FiltersRenderer' | 'currentBreakPoint' | 'name' | 'onChangeSelection' | 'onFilterBlur' | 'onFilterChange' | 'onFilterPressEnter' | 'onSelectRows' | 'onRowClick' | 'onSortChange' | 'label' | 'SelectionHandler'>, {
+type TResponsiveTableContext = TModify<Pick<TResponsiveTableContextProps, 'avoidAutoEllipsis' | 'FiltersRenderer' | 'currentBreakPoint' | 'name' | 'onChangeSelection' | 'onFilterBlur' | 'onFilterChange' | 'onFilterPressEnter' | 'onSelectRows' | 'onRowClick' | 'onSortChange' | 'label' | 'SelectionHandler' | 'showFilters'>, {
     labels: typeof defaultLabels;
     name: string;
 }>;
@@ -547,7 +548,7 @@ declare const Responsive: React__default.MemoExoticComponent<({ tableName }: {
     tableName?: string;
 }) => React__default.JSX.Element>;
 
-declare const Pagination: React__default.MemoExoticComponent<({ listId: outerListId, ...props }: Omit<IPagination, "isMaximized" | "onMaximize"> & {
+declare const Pagination: React__default.MemoExoticComponent<({ listId: outerListId, onPageChange, ...props }: Omit<IPagination, "isMaximized" | "onMaximize"> & {
     listId: string;
 }) => React__default.JSX.Element>;
 
@@ -558,7 +559,7 @@ declare const Grouped: React__default.MemoExoticComponent<({ group, tableName, }
 
 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, isLoading, name, statesColumns, 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, showFilters, 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;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
-import React, { useMemo, useRef, useState, createContext, useContext, memo, forwardRef, useCallback } from 'react';
+import React, { useMemo, useRef, useState, createContext, useContext, memo, useCallback, useEffect, forwardRef } from 'react';
 import { Box, getVariant, Input, Select, useBreakpointIndex, Label, Link, Spinner } from '@apia/theme';
 import { useMount, useUpdateEffect, useUnmount, useThrottleFn } from 'ahooks';
 import uniqueId from 'lodash-es/uniqueId';
@@ -465,6 +465,7 @@ const NoMemoResponsiveTableContext = ({
   isLoading,
   name,
   statesColumns,
+  showFilters,
   onChangeSelection,
   onFilterBlur,
   onFilterChange,
@@ -501,15 +502,16 @@ const NoMemoResponsiveTableContext = ({
       onSortChange,
       SelectionHandler,
       statesColumns,
-      isLoading
+      isLoading,
+      showFilters
     }),
     [
       currentBreakPoint,
       label,
       labels,
       avoidAutoEllipsis,
-      actualName,
       FiltersRenderer,
+      actualName,
       onChangeSelection,
       onFilterBlur,
       onFilterChange,
@@ -519,7 +521,8 @@ const NoMemoResponsiveTableContext = ({
       onSortChange,
       SelectionHandler,
       statesColumns,
-      isLoading
+      isLoading,
+      showFilters
     ]
   );
   tableContexts[actualName] = contextValue;
@@ -1647,7 +1650,7 @@ const FilterCell = ({ columnIndex, filter, Renderer }) => {
 };
 
 const NoMemoHeader = () => {
-  const { name, FiltersRenderer } = useResponsiveTableContext();
+  const { name, FiltersRenderer, showFilters } = useResponsiveTableContext();
   const columns = useResponsiveTable(
     (global) => global.responsiveTableSlice[name]?.columns
   );
@@ -1704,8 +1707,7 @@ const NoMemoHeader = () => {
     [columns]
   );
   const [isFiltersRowVisible, setIsFiltersRowVisible] = React.useState(
-    /* (persistentStorage.showResponsiveTableFilters as boolean) ??  */
-    false
+    showFilters ?? false
   );
   React.useEffect(() => {
     persistentStorage.showResponsiveTableFilters = isFiltersRowVisible;
@@ -2766,13 +2768,41 @@ function useIsMaximized(id) {
 
 const NoMemoPagination = ({
   listId: outerListId,
+  onPageChange,
   ...props
 }) => {
   const listId = useResponsiveTableContext().name;
   const { isMaximized, toggleIsMaximized } = useIsMaximized(
     outerListId ?? listId
   );
-  return /* @__PURE__ */ jsx(Pagination$1, { ...{ ...props, isMaximized, onMaximize: toggleIsMaximized } });
+  const numberCurrentPage = Number(props.currentPage);
+  const [internCurrentPage, setCurrentPage] = useState(
+    numberCurrentPage ?? 1
+  );
+  const [lastEmittedPage, setLastEmittedPage] = useState(
+    numberCurrentPage ?? 1
+  );
+  const setCurrentAndDispatch = useCallback(
+    (page) => {
+      if (page !== lastEmittedPage) {
+        setCurrentPage(page);
+        onPageChange?.(page);
+        setLastEmittedPage(page);
+      }
+    },
+    [lastEmittedPage, onPageChange]
+  );
+  useEffect(() => {
+    setCurrentPage(numberCurrentPage);
+  }, [numberCurrentPage]);
+  return /* @__PURE__ */ jsx(
+    Pagination$1,
+    {
+      ...{ ...props, isMaximized, onMaximize: toggleIsMaximized },
+      currentPage: internCurrentPage,
+      onPageChange: setCurrentAndDispatch
+    }
+  );
 };
 const Pagination = React.memo(NoMemoPagination);