@apia/table 4.0.9 → 4.0.13

package/dist/index.d.ts

@@ -3,7 +3,7 @@ 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 } from '@apia/util';
+import { TApiaFilter, TModify, TId, EventEmitter } from '@apia/util';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
 import * as immer_dist_internal from 'immer/dist/internal';
@@ -30,7 +30,7 @@ type TColoredElement = {
  * el servidor devuelve Up y Down para referirse
  * al orden actual de una columna.
  */
-type TResponsiveTableSortValue = null | 'A' | 'D' | 'Down' | 'Up';
+type TResponsiveTableSortValue = null | 'A' | 'D' | 'Down' | 'Up' | 'Asc' | 'Des';
 /**
  * Cada vez que se hace click en el botón del
  * cabezal de una columna, si la columna tiene
@@ -667,10 +667,18 @@ declare const responsiveTableActions: _reduxjs_toolkit.CaseReducerActions<{
  * Esto permite una experiencia más fluida en el manejo del foco. Además, al no depender del estado para calcular las propiedades, se tiene un mayor control sobre qué elementos son afectados y de qué manera, permitiendo
  */
 declare class Controller2 {
+    #private;
     readonly tableName: string;
     constructor(tableName: string);
-    protected events: Pick<TKeyHandlerProps, 'onRowClick' | 'onSelectRows' | 'onChangeSelection'>;
-    setEvents(events: Pick<TKeyHandlerProps, 'onRowClick' | 'onSelectRows' | 'onChangeSelection'>): void;
+    events: EventEmitter<{
+        onRowClick: [row: {
+            index: number;
+            row: TResponsiveTableRow<Record<string, unknown>>;
+        }, focusedIndex: number];
+        onSelectRows: [newRows: TResponsiveTableRowsSelectionEvent, focusedIndex: number];
+        onChangeSelection: Parameters<NonNullable<TKeyHandlerProps['onChangeSelection']>>;
+    }>;
+    setResponsiveTableContextEvents(evs: Pick<TKeyHandlerProps, 'onRowClick' | 'onSelectRows' | 'onChangeSelection'>): void;
     private unsubscribe;
     private el;
     setRef: (el: HTMLElement) => void;
@@ -711,6 +719,12 @@ declare class Controller2 {
 }
 declare function makeController2(tableName: string): [Controller2, FC<TKeyHandlerProps>];
 
+declare const RangeFilter: ({ filter, tableName, className, }: {
+    filter: TApiaFilter;
+    tableName?: string | undefined;
+    className?: string | undefined;
+}) => React.JSX.Element;
+
 declare const TableContextReproducer: ({ children, tableName, }: {
     children: ReactNode;
     tableName: string;
@@ -798,5 +812,5 @@ declare const TableRenderer: React__default.MemoExoticComponent<({ variant }: {
     variant?: string | undefined;
 }) => 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, 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, TableRenderer, defaultLabels, getPriorityHandler, getResponsiveTableContext, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -3,8 +3,8 @@ import React, { useMemo, useRef, useState, memo, useEffect, useCallback, createR
 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';
-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, usePrevious, useIntermediateValue, getLabel, getDateFormat, formatMessage, noNaN, getIndex, downloadUrl, arrayOrArray, useMount as useMount$1 } from '@apia/util';
+import { injectReducers, createSlice, shallowEqual as shallowEqual$1 } from '@apia/store';
+import { addBoundary, useLatest, useUpdateEffect as useUpdateEffect$1, getSpecificParent, isChild, autoDisconnectMutationObserver, getFocusSelector, cantFocusSelector, globalFocus, scrollParentIntoElement, customEvents, persistentStorage, EventEmitter, debugDispatcher, usePrevious, useIntermediateValue, getLabel, formatMessage, getDateFormat, noNaN, getIndex, 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';
@@ -161,7 +161,6 @@ function willHandleKey(ev, state) {
 }
 function handleKey(state, { ev }) {
   const {
-    altKey: isAltPressed,
     ctrlKey: isCtrlPressed,
     key,
     shiftKey: isShiftPressed
@@ -174,7 +173,6 @@ function handleKey(state, { ev }) {
     newFocusedRow,
     ...rest
   }) => setNewFocused(state, {
-    altKey: isAltPressed,
     ctrlKey: isCtrlPressed,
     shiftKey: isShiftPressed,
     newFocusedColumn,
@@ -345,7 +343,6 @@ const responsiveTableSlice = createSlice({
       state[tableName] = { ...state[tableName], ...rest };
       if (handleFocus !== false) {
         setNewFocused(state[tableName], {
-          altKey: false,
           ctrlKey: false,
           shiftKey: false,
           shouldSelectNewFocused: rest.isFocused ?? state[tableName].isFocused
@@ -379,7 +376,6 @@ const responsiveTableSlice = createSlice({
         ...payload.newRows
       );
       setNewFocused(state[payload.tableName], {
-        altKey: false,
         ctrlKey: false,
         shiftKey: false,
         shouldSelectNewFocused: true,
@@ -395,7 +391,6 @@ const responsiveTableSlice = createSlice({
         (_, index) => !payload.rowIndices.includes(index)
       );
       setNewFocused(state[payload.tableName], {
-        altKey: false,
         ctrlKey: false,
         shiftKey: false,
         shouldSelectNewFocused: true,
@@ -1188,10 +1183,12 @@ const NoMemoHeaderCell = ({
   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 columns = useResponsiveTable((global) => {
     const tableState = global.responsiveTableSlice[name];
-    return tableState?.columns[columnIndex];
+    return tableState?.columns;
   }, shallowEqual);
+  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 [isResize, setIsResize] = React.useState(storedWidth !== void 0);
@@ -1342,6 +1339,15 @@ const NoMemoHeaderCell = ({
                     }
                   };
                 });
+                additionalInfoColumns.forEach((c) => {
+                  persistentStorage[widthStorageName] = {
+                    ...persistentStorage[widthStorageName],
+                    [actualName]: {
+                      ...persistentStorage[widthStorageName]?.[actualName],
+                      [c.name]: 100
+                    }
+                  };
+                });
                 document.removeEventListener("mousemove", resize);
                 document.removeEventListener("mouseup", unsuscribe);
               };
@@ -1404,9 +1410,9 @@ const NoMemoRangeFilter = ({
   const { onFilterBlur, onFilterChange, onFilterPressEnter } = useResponsiveTableContext(tableName);
   const filterLow = {
     ...filter,
-    changeFiltersTimestamp: filter.changeFiltersTimestamp,
+    changeFiltersTimestamp: filter?.changeFiltersTimestamp,
     currentValue: filter.currentValue,
-    deleteFiltersTimestamp: filter.deleteFiltersTimestamp,
+    deleteFiltersTimestamp: filter?.deleteFiltersTimestamp,
     id: filter.id,
     toolTip: filter.toolTip,
     type: "apiaNumber"
@@ -1415,13 +1421,13 @@ const NoMemoRangeFilter = ({
   const lastEmittedHigh = useRef(null);
   const lastEmittedLow = useRef(null);
   const lastEmittedMultiplier = useRef(1);
-  const previousChangeTimestamp = usePrevious(filter.changeFiltersTimestamp);
-  const previousDeleteTimestamp = usePrevious(filter.deleteFiltersTimestamp);
-  if (previousChangeTimestamp.current !== filter.changeFiltersTimestamp) {
+  const previousChangeTimestamp = usePrevious(filter?.changeFiltersTimestamp);
+  const previousDeleteTimestamp = usePrevious(filter?.deleteFiltersTimestamp);
+  if (previousChangeTimestamp.current !== filter?.changeFiltersTimestamp) {
     lastEmittedLow.current = filterLow.currentValue;
     lastEmittedHigh.current = filterLow.filterToValue || "";
   }
-  if (previousDeleteTimestamp.current !== filter.deleteFiltersTimestamp) {
+  if (previousDeleteTimestamp.current !== filter?.deleteFiltersTimestamp) {
     lastEmittedLow.current = "";
     lastEmittedHigh.current = "";
   }
@@ -2583,7 +2589,7 @@ 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);
+  __defNormalProp$1(obj, key + "" , value);
   return value;
 };
 const maximizationPersist = {
@@ -3319,10 +3325,31 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  member.set(obj, value);
+  return value;
+};
+var _unsubscribe;
 class Controller2 {
   constructor(tableName) {
     this.tableName = tableName;
-    __publicField(this, "events", {});
+    __publicField(this, "events", new EventEmitter());
+    __privateAdd(this, _unsubscribe, () => {
+    });
     __publicField(this, "unsubscribe", () => {
     });
     __publicField(this, "el", null);
@@ -3358,18 +3385,29 @@ class Controller2 {
         }, []);
         const rowIndex = noNaN(row?.dataset.rowindex || "a", -1);
         if (row && table && selectedRows.length > 0 && rowIndex >= 0) {
-          this.events.onSelectRows?.(
+          this.events.emit("onSelectRows", [
             selectedRows,
             this.getState().focusedRow
-          );
+          ]);
         }
       }
     });
     this.handleClickEvent = handleMouseDownEvent.bind(this);
     this.handleKeyDownEvent = handleKeyDownEvent.bind(this);
   }
-  setEvents(events) {
-    this.events = events;
+  setResponsiveTableContextEvents(evs) {
+    __privateGet(this, _unsubscribe).call(this);
+    const u1 = this.events.on(
+      "onChangeSelection",
+      (a) => evs.onChangeSelection?.(...a)
+    );
+    const u2 = this.events.on("onRowClick", (a) => evs.onRowClick?.(...a));
+    const u3 = this.events.on("onSelectRows", (a) => evs.onSelectRows?.(...a));
+    __privateSet(this, _unsubscribe, () => {
+      u1();
+      u2();
+      u3();
+    });
   }
   /**
    * Returns a copy of the current state object
@@ -3385,12 +3423,12 @@ class Controller2 {
   }
   setState(state) {
     if (state.selectedRows && !shallowEqual$1(state.selectedRows, this.getState().selectedRows)) {
-      this.events.onChangeSelection?.(
+      this.events.emit("onChangeSelection", [
         state.selectedRows.map((index) => ({
           index,
           row: this.getState().rows[index]
         }))
-      );
+      ]);
     }
     if (state.scrollIntoViewRow !== void 0 && state.scrollIntoViewRow !== this.getState().scrollIntoViewRow) {
       const row = this.el?.querySelector(
@@ -3418,11 +3456,12 @@ class Controller2 {
     });
   }
 }
+_unsubscribe = new WeakMap();
 const Controller2Component = ({
   controller,
   ...props
 }) => {
-  controller.setEvents({
+  controller.setResponsiveTableContextEvents({
     onChangeSelection: props.onChangeSelection,
     onSelectRows: props.onSelectRows,
     onRowClick: props.onRowClick
@@ -3828,5 +3867,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, 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, TableRenderer, defaultLabels, getPriorityHandler, getResponsiveTableContext, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
 //# sourceMappingURL=index.js.map