@apia/table 4.0.19 → 4.0.24

package/dist/index.d.ts

@@ -3,9 +3,11 @@ import React__default, { FunctionComponent, ReactNode, FC } from 'react';
 import { BoxProps } from '@apia/theme';
 import { IconType } from '@meronex/icons';
 import * as _apia_util from '@apia/util';
-import { TApiaFilter, TModify, TId, EventEmitter } from '@apia/util';
+import { TApiaFilter, TModify, TId, TRequireOnlyOne, EventEmitter } from '@apia/util';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
+import * as _apia_store from '@apia/store';
+import { PayloadAction as PayloadAction$1 } from '@apia/store';
 import * as immer_dist_internal from 'immer/dist/internal';
 import * as _reduxjs_toolkit_dist_configureStore from '@reduxjs/toolkit/dist/configureStore';
 import * as redux_thunk from 'redux-thunk';
@@ -151,6 +153,7 @@ type TResponsiveTableRowState = {
 type TResponsiveTableColumn = TResponsiveTableWithRendererElement & {
     /** Con esta propiedad se puede pasar parámetros opcionales */
     additionalData?: Record<string, unknown>;
+    autoAdjustWidth?: boolean;
     /**
      * Determina si la columna admite ordenamiento.
      */
@@ -531,15 +534,15 @@ type TKeyHandlerProps = BoxProps & {
 declare const ResponsiveTable: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<BoxProps & React__default.RefAttributes<HTMLDivElement>>>;
 
 declare const Sort: React__default.MemoExoticComponent<({ tableName }: {
-    tableName?: string | undefined;
+    tableName?: string;
 }) => React__default.JSX.Element>;
 
 declare const Additional: React__default.MemoExoticComponent<({ tableName }: {
-    tableName?: string | undefined;
+    tableName?: string;
 }) => React__default.JSX.Element>;
 
 declare const Responsive: React__default.MemoExoticComponent<({ tableName }: {
-    tableName?: string | undefined;
+    tableName?: string;
 }) => React__default.JSX.Element>;
 
 interface IPagination {
@@ -589,6 +592,24 @@ declare function getResponsiveTableContext(tableName: string): TResponsiveTableC
 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>;
 
+type TPayloadWithId$1<P = Record<string, unknown>, T extends string = string, M = never, E = never> = PayloadAction$1<P & {
+    id: string;
+}, T, M, E>;
+type THandleKeyPayload = TPayloadWithId$1<THandleKey>;
+type TSelectionStateUpdatePayload = TPayloadWithId$1<Partial<ISelectableState>>;
+type TSetNewFocusedPayload = TPayloadWithId$1<INewFocus>;
+type TUpdateByClickPayload = TPayloadWithId$1<TRequireOnlyOne<{
+    ariaRowIndex: number;
+    rowIndex: number;
+}> & TRequireOnlyOne<{
+    ariaColIndex?: number;
+    colIndex: number;
+}> & Pick<INewFocus, 'altKey' | 'ctrlKey' | 'shiftKey' | 'isFocused'>>;
+
+type TPayloadWithId<P = Record<string, unknown>, T extends string = string, M = never, E = never> = PayloadAction$1<P & {
+    tableName: string;
+}, T, M, E>;
+
 type TypedUseSelectorHook<TState> = <TSelected>(selector: (state: TState) => TSelected, equalityFn?: (a: TSelected, b: TSelected) => boolean) => TSelected;
 declare const responsiveTableStore: _reduxjs_toolkit_dist_configureStore.ToolkitStore<{
     responsiveTableSlice: TResponsiveTableSlice;
@@ -600,51 +621,15 @@ declare const useResponsiveTable: TypedUseSelectorHook<{
 }>;
 
 declare const responsiveTableActions: _reduxjs_toolkit.CaseReducerActions<{
-    controller2UpdateSelectionState(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload: { tableName, ...payload }, }: {
-        payload: Partial<TResponsiveTableState> & {
-            tableName: string;
-        };
-        type: string;
-    }): void;
-    handleKey(state: immer_dist_internal.WritableDraft<Record<string, ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>>>, { payload }: {
-        payload: THandleKey & {
-            id: string;
-        };
-        type: string;
-    }): void;
-    selectionStateUpdate(state: immer_dist_internal.WritableDraft<Record<string, ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>>>, { payload: { id, ...payload } }: {
-        payload: Partial<ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>> & {
-            id: string;
-        };
-        type: string;
-    }): void;
-    setNewFocused(state: immer_dist_internal.WritableDraft<Record<string, ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>>>, { payload: { id, ...payload } }: {
-        payload: INewFocus & {
-            id: string;
-        };
-        type: string;
-    }): void;
-    updateByClick(state: immer_dist_internal.WritableDraft<Record<string, ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>>>, { payload: { id, colIndex, rowIndex, ariaColIndex, ariaRowIndex, isFocused, ...payload }, }: {
-        payload: (_apia_util.TRequireOnlyOne<{
-            ariaRowIndex: number;
-            rowIndex: number;
-        }> & _apia_util.TRequireOnlyOne<{
-            ariaColIndex?: number | undefined;
-            colIndex: number;
-        }> & Pick<INewFocus, "isFocused" | "altKey" | "ctrlKey" | "shiftKey">) & {
-            id: string;
-        };
-        type: string;
-    }): void;
-    update(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload: { tableName, handleFocus, ...rest }, }: {
-        payload: Partial<TResponsiveTableState> & {
-            isFocused?: boolean | undefined;
-            handleFocus?: boolean | undefined;
-        } & {
-            tableName: string;
-        };
-        type: string;
-    }): void;
+    controller2UpdateSelectionState(state: _apia_store.Draft<TResponsiveTableSlice>, { payload: { tableName, ...payload }, }: TPayloadWithId<Partial<TResponsiveTableState>>): void;
+    handleKey(state: immer_dist_internal.WritableDraft<Record<string, ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>>>, { payload }: THandleKeyPayload): void;
+    selectionStateUpdate(state: immer_dist_internal.WritableDraft<Record<string, ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>>>, { payload: { id, ...payload } }: TSelectionStateUpdatePayload): void;
+    setNewFocused(state: immer_dist_internal.WritableDraft<Record<string, ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>>>, { payload: { id, ...payload } }: TSetNewFocusedPayload): void;
+    updateByClick(state: immer_dist_internal.WritableDraft<Record<string, ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>>>, { payload: { id, colIndex, rowIndex, ariaColIndex, ariaRowIndex, isFocused, ...payload }, }: TUpdateByClickPayload): void;
+    update(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload: { tableName, handleFocus, ...rest }, }: TResponsiveTableAction<Partial<TResponsiveTableState> & {
+        isFocused?: boolean;
+        handleFocus?: boolean;
+    }>): void;
     addRows(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload }: TResponsiveTableAction<{
         newRows: TResponsiveTableRow[];
     }>): void;
@@ -652,14 +637,9 @@ declare const responsiveTableActions: _reduxjs_toolkit.CaseReducerActions<{
         rowIndices: number[];
     }>): void;
     destroy(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload: { tableName } }: TResponsiveTableAction): void;
-    swapFocusedRow(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload: { newIndex, tableName }, }: {
-        payload: {
-            newIndex: number;
-        } & {
-            tableName: string;
-        };
-        type: string;
-    }): void;
+    swapFocusedRow(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload: { newIndex, tableName }, }: TResponsiveTableAction<{
+        newIndex: number;
+    }>): void;
 }, "responsiveTableSlice">;
 
 /**
@@ -672,12 +652,9 @@ declare class Controller2 {
     readonly tableName: string;
     constructor(tableName: string);
     events: EventEmitter<{
-        onRowClick: [row: {
-            index: number;
-            row: TResponsiveTableRow<Record<string, unknown>>;
-        }, focusedIndex: number];
-        onSelectRows: [newRows: TResponsiveTableRowsSelectionEvent, focusedIndex: number];
-        onChangeSelection: Parameters<NonNullable<TKeyHandlerProps['onChangeSelection']>>;
+        onRowClick: Parameters<NonNullable<TKeyHandlerProps["onRowClick"]>>;
+        onSelectRows: Parameters<NonNullable<TKeyHandlerProps["onSelectRows"]>>;
+        onChangeSelection: Parameters<NonNullable<TKeyHandlerProps["onChangeSelection"]>>;
     }>;
     setResponsiveTableContextEvents(evs: Pick<TKeyHandlerProps, 'onRowClick' | 'onSelectRows' | 'onChangeSelection'>): void;
     private unsubscribe;
@@ -690,25 +667,25 @@ declare class Controller2 {
      * Returns a copy of the current state object
      */
     getState(): {
-        allowSorting?: boolean | undefined;
-        isMultiple?: boolean | undefined;
         label?: string | undefined;
+        allowSorting?: boolean | undefined;
+        isMultiple?: boolean;
         reserveColumnsForStates?: number | undefined;
-        allowEdition?: boolean | undefined;
-        allowRowsKeyboardSorting?: boolean | undefined;
-        allowSelection?: boolean | undefined;
+        allowEdition?: boolean;
+        allowRowsKeyboardSorting?: boolean;
+        allowSelection?: boolean;
         columns: TResponsiveTableColumn[];
-        draggingRow?: number | undefined;
+        draggingRow?: number;
         expandedRows: number[];
         filters: _apia_util.TApiaFilter[];
         focusedRow: number;
         focusedColumn: number;
         hasNonAdditionalFilters: boolean;
-        isEditionMode?: boolean | undefined;
+        isEditionMode?: boolean;
         isFocused: boolean;
         nonAdditionalColumnsCount: number;
         rows: TResponsiveTableRow<any>[];
-        scrollIntoViewRow?: number | undefined;
+        scrollIntoViewRow?: number;
         selectedRows: number[];
         statesColumns: number;
         accordionIndexColumns: TResponsiveTableIndexColumns;
@@ -720,10 +697,18 @@ declare class Controller2 {
 }
 declare function makeController2(tableName: string): [Controller2, FC<TKeyHandlerProps>];
 
+/**
+ * Este contexto es necesario para resolver el problema de que no se muestra
+ * la etiqueta correcta cuando la tabla está cargando.
+ */
+declare const TableLoadingContext: React.Context<{
+    current: boolean;
+}>;
+
 declare const RangeFilter: ({ filter, tableName, className, }: {
     filter: TApiaFilter;
-    tableName?: string | undefined;
-    className?: string | undefined;
+    tableName?: string;
+    className?: string;
 }) => React.JSX.Element;
 
 declare const TableContextReproducer: ({ children, tableName, }: {
@@ -761,7 +746,7 @@ declare const AdditionalColumnDefaultRenderer: React__default.MemoExoticComponen
 declare const DefaultCellRenderer: React__default.ForwardRefExoticComponent<{
     cell: TResponsiveTableCell<Record<string, unknown>>;
     column: TResponsiveTableColumn;
-    row: TResponsiveTableRow<Record<string, unknown>>;
+    row: TResponsiveTableRow;
 } & React__default.AllHTMLAttributes<HTMLTableCellElement> & React__default.RefAttributes<HTMLTableCellElement>>;
 
 declare const DefaultRowRenderer: TResponsiveTableRowRenderer;
@@ -786,7 +771,7 @@ declare function makeAsyncRenderer(additionalInfoGetter: (row: TResponsiveTableR
 declare const NoEllipsisCellRenderer: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
     cell: TResponsiveTableCell<Record<string, unknown>>;
     column: TResponsiveTableColumn;
-    row: TResponsiveTableRow<Record<string, unknown>>;
+    row: TResponsiveTableRow;
 } & React__default.AllHTMLAttributes<HTMLTableCellElement> & React__default.RefAttributes<HTMLTableCellElement>>>;
 
 declare const NoRegistersRenderer: () => React.JSX.Element;
@@ -810,8 +795,8 @@ declare const StatusRenderer: TResponsiveTableCellRenderer<{
 }>;
 
 declare const TableRenderer: React__default.MemoExoticComponent<({ variant }: {
-    variant?: string | undefined;
+    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, TableRenderer, defaultLabels, getPriorityHandler, getResponsiveTableContext, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
+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 };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
-import React, { useMemo, useRef, useState, memo, useEffect, useCallback, createRef, forwardRef } from 'react';
+import React, { useMemo, useRef, useState, createContext, useContext, memo, useEffect, useCallback, createRef, 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';
@@ -1264,6 +1264,32 @@ const NoMemoHeaderCell = ({
       ...domProps,
       role: "rowheader",
       className: `${isFilterRequired && window.SHOW_REQUIRED_POSITION ? "requiredFilterColumn" : ""}`,
+      ref: (el) => {
+        if (!column?.autoAdjustWidth)
+          return;
+        if (el instanceof HTMLElement && !el.dataset.resized && storedWidth === void 0) {
+          const clone = el.cloneNode(true);
+          const child = clone.querySelector(
+            ".headButton__label"
+          );
+          child.style.opacity = "0";
+          document.body.append(child);
+          child.style.position = "fixed";
+          child.style.maxWidth = "0";
+          child.style.minWidth = "0";
+          child.style.width = "0";
+          child.style.overflow = "auto";
+          child.style.textWrap = "nowrap";
+          window.requestAnimationFrame(() => {
+            const idealWidth = child.scrollWidth;
+            const currentWidth = el.querySelector(".headButton__label").getBoundingClientRect().width;
+            const elWidth = el.getBoundingClientRect().width;
+            const diff = idealWidth - currentWidth;
+            setWidth(elWidth + diff + 5);
+            el.dataset.resized = "true";
+          });
+        }
+      },
       children: /* @__PURE__ */ jsxs(Box, { as: "span", className: "headButton__container", children: [
         /* @__PURE__ */ jsx(
           Box,
@@ -2125,9 +2151,14 @@ const NoMemoRow = ({ rowIndex }) => {
 };
 const Row = React.memo(NoMemoRow);
 
+const TableLoadingContext = createContext({
+  current: true
+});
+
 const NoRegistersRenderer = () => {
   const { labels } = useResponsiveTableContext();
-  return /* @__PURE__ */ jsx(Box, { className: "no__registers", children: labels.noRegisters });
+  const { current } = useContext(TableLoadingContext);
+  return /* @__PURE__ */ jsx(Box, { className: "no__registers", children: current ? labels.noRegisters : "" });
 };
 
 const NoMemoTableRenderer = ({ variant }) => {
@@ -3598,10 +3629,11 @@ const NoMemoAccordionHTMLCellRenderer = React.forwardRef(
     column,
     row,
     ...props
-  }, currentRef) => (
-    /**
-     * Aca falta el title de la columna
-     */
+  }, currentRef) => /* @__PURE__ */ jsxs(Box, { children: [
+    column.label.trim() !== "" && /* @__PURE__ */ jsxs(Box, { as: "strong", children: [
+      column.label,
+      ": "
+    ] }),
     /* @__PURE__ */ jsx(
       Box,
       {
@@ -3618,7 +3650,7 @@ const NoMemoAccordionHTMLCellRenderer = React.forwardRef(
         as: "span"
       }
     )
-  )
+  ] })
 );
 NoMemoAccordionHTMLCellRenderer.displayName = "AccordionHTMLCellRenderer";
 const AccordionHTMLCellRenderer = NoMemoAccordionHTMLCellRenderer;
@@ -3879,5 +3911,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, TableRenderer, defaultLabels, getPriorityHandler, getResponsiveTableContext, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
+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 };
 //# sourceMappingURL=index.js.map