@apia/table 3.0.9 → 3.0.10

package/dist/index.d.ts

@@ -266,6 +266,7 @@ type TResponsiveTableContextProps = TResponsiveTableStoreProps & Pick<ISelectabl
      * en true**, este comportamiento es deshabilitado.
      */
     avoidReparseSelectionOnRowChange?: boolean;
+    avoidAutoEllipsis?: boolean;
     children?: React__default.ReactNode;
     className?: string;
     /**
@@ -298,6 +299,10 @@ type TResponsiveTableContextProps = TResponsiveTableStoreProps & Pick<ISelectabl
      * filas no vacía y presione la tecla Enter.
      */
     onSelectRows?: (ev: TResponsiveTableRowsSelectionEvent, focusedRowIndex: number) => unknown;
+    /**
+     * Este evento será llamado cada vez que el usuario haga click en una fila
+     */
+    onRowClick?: (ev: TResponsiveTableRowsSelectionEvent[0], focusedRowIndex: number) => unknown;
     /**
      * Es llamado cada vez que el usuario hace click en el botón
      * del cabezal de la columna. **Importante:** la tabla no
@@ -319,7 +324,7 @@ type TResponsiveTableContextProps = TResponsiveTableStoreProps & Pick<ISelectabl
  * desee informar de un evento en particular
  * pueda hacerlo en forma sencilla.
  */
-type TResponsiveTableContext = TModify<Pick<TResponsiveTableContextProps, 'currentBreakPoint' | 'name' | 'onChangeSelection' | 'onFilterBlur' | 'onFilterChange' | 'onFilterPressEnter' | 'onSelectRows' | 'onSortChange' | 'label' | 'SelectionHandler'>, {
+type TResponsiveTableContext = TModify<Pick<TResponsiveTableContextProps, 'avoidAutoEllipsis' | 'currentBreakPoint' | 'name' | 'onChangeSelection' | 'onFilterBlur' | 'onFilterChange' | 'onFilterPressEnter' | 'onSelectRows' | 'onRowClick' | 'onSortChange' | 'label' | 'SelectionHandler'>, {
     labels: typeof defaultLabels;
     name: string;
 }>;
@@ -516,6 +521,7 @@ type TKeyHandlerProps = BoxProps & {
      * la selección actual.
      */
     onChangeSelection?: (newRows: TResponsiveTableRowsSelectionEvent) => unknown;
+    onRowClick?: (row: TResponsiveTableRowsSelectionEvent[0], focusedIndex: number) => unknown;
     onSelectRows?: (newRows: TResponsiveTableRowsSelectionEvent, focusedIndex: number) => unknown;
 };
 
@@ -576,7 +582,7 @@ interface IPagination {
 declare const Pagination: React__default.MemoExoticComponent<({ appliedFilters, areAllFiltersApplied, className, currentPage, disabled, disableReduced, hasMore, hideMaximizeButton, hideRefreshButton, isLoading, isPerforming, listId: outerListId, onDeleteFilters, onPageChange, onRefresh, pageCount, recordsCount: outerRecordsCount, reachedMax, showMaximizeOnSmallBreakpoints, variant, }: IPagination) => React__default.JSX.Element>;
 
 declare function useResponsiveTableContext(tableName?: string): TResponsiveTableContext;
-declare const ResponsiveTableContext: React__default.MemoExoticComponent<({ allowEdition, allowRowsKeyboardSorting, allowSelection, allowSorting, avoidReparseSelectionOnRowChange, children, className, currentBreakPoint, customLabels, columns, filters, rows, label, isMultiple, name, onChangeSelection, onFilterBlur, onFilterChange, onFilterPressEnter, 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, rows, label, isMultiple, name, onChangeSelection, onFilterBlur, onFilterChange, onFilterPressEnter, onRowClick, onSelectRows, onSortChange, reserveColumnsForStates, SelectionHandler, variant, }: TResponsiveTableContextProps) => React__default.JSX.Element>;
 
 type TypedUseSelectorHook<TState> = <TSelected>(selector: (state: TState) => TSelected, equalityFn?: (a: TSelected, b: TSelected) => boolean) => TSelected;
 declare const responsiveTableStore: _reduxjs_toolkit_dist_configureStore.ToolkitStore<{

package/dist/index.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
-import React, { useMemo, useState, useRef, memo, useEffect, useCallback, createRef, forwardRef } from 'react';
-import { Box, getVariant, Input, useBreakpointIndex, Label, Select, Link, Spinner } from '@apia/theme';
+import React, { useMemo, useRef, useState, 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';
 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, getLabel, getDateFormat, formatMessage, noNaN, downloadUrl, arrayOrArray, useMount as useMount$1 } from '@apia/util';
+import { addBoundary, useLatest, useUpdateEffect as useUpdateEffect$1, getSpecificParent, isChild, autoDisconnectMutationObserver, getFocusSelector, cantFocusSelector, globalFocus, scrollParentIntoElement, customEvents, debugDispatcher, persistentStorage, EventEmitter, usePrevious, useIntermediateValue, getLabel, getDateFormat, formatMessage, noNaN, 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';
@@ -458,6 +458,7 @@ function useResponsiveTableContext(tableName) {
 const NoMemoResponsiveTableContext = ({
   allowEdition,
   allowRowsKeyboardSorting,
+  avoidAutoEllipsis,
   allowSelection,
   allowSorting,
   avoidReparseSelectionOnRowChange,
@@ -475,6 +476,7 @@ const NoMemoResponsiveTableContext = ({
   onFilterBlur,
   onFilterChange,
   onFilterPressEnter,
+  onRowClick,
   onSelectRows,
   onSortChange,
   reserveColumnsForStates,
@@ -494,24 +496,28 @@ const NoMemoResponsiveTableContext = ({
       currentBreakPoint,
       label,
       labels,
+      avoidAutoEllipsis,
       name: actualName,
       onChangeSelection,
       onFilterBlur,
       onFilterChange,
       onFilterPressEnter,
+      onRowClick,
       onSelectRows,
       onSortChange,
       SelectionHandler
     }),
     [
-      actualName,
       currentBreakPoint,
       label,
       labels,
+      avoidAutoEllipsis,
+      actualName,
       onChangeSelection,
       onFilterBlur,
       onFilterChange,
       onFilterPressEnter,
+      onRowClick,
       onSelectRows,
       onSortChange,
       SelectionHandler
@@ -593,6 +599,7 @@ function makeKeyHandler(actions, id, config) {
   return function KeyHandler({
     children,
     onChangeSelection,
+    onRowClick: onClickRows,
     onSelectRows,
     ...props
   }) {
@@ -673,9 +680,14 @@ function makeKeyHandler(actions, id, config) {
               shiftKey: ev.shiftKey
             })
           );
+          if (onClickRows && ev.type === "mousedown")
+            onClickRows(
+              selectedRowsRef.current?.[0],
+              config.stateSelector(responsiveTableStore.getState()).focusedRow
+            );
         }
       },
-      []
+      [onClickRows, selectedRowsRef]
     );
     const handleDoubleClick = React.useCallback(
       (ev) => {
@@ -905,7 +917,13 @@ function makeKeyHandler(actions, id, config) {
 }
 
 const NoMemoKeyHandler = (props) => {
-  const { name, onChangeSelection, onSelectRows, SelectionHandler } = useResponsiveTableContext();
+  const {
+    name,
+    onChangeSelection,
+    onRowClick,
+    onSelectRows,
+    SelectionHandler
+  } = useResponsiveTableContext();
   const Handler = React.useMemo(
     () => SelectionHandler || makeKeyHandler(responsiveTableActions, name, {
       throttleOptions: { wait: 50 },
@@ -918,6 +936,7 @@ const NoMemoKeyHandler = (props) => {
     {
       onChangeSelection,
       onSelectRows,
+      onRowClick,
       ...props
     }
   );
@@ -1370,60 +1389,134 @@ const StateCell = ({ index, rowIndex, state, isHeader }) => {
   return /* @__PURE__ */ jsx(Box, { as: "td", className: "stateCell", ...domProps, children: state ? /* @__PURE__ */ jsx(RowStatesRenderer, { state }) : "" });
 };
 
+const units = ["B", "KB", "MB", "GB"];
 const NoMemoRangeFilter = ({
   filter,
-  tableName
+  tableName,
+  className
 }) => {
   const { onFilterBlur, onFilterChange, onFilterPressEnter } = useResponsiveTableContext(tableName);
   const filterLow = {
-    id: filter.id,
+    ...filter,
+    changeFiltersTimestamp: filter.changeFiltersTimestamp,
     currentValue: filter.currentValue,
-    type: "number"
+    deleteFiltersTimestamp: filter.deleteFiltersTimestamp,
+    id: filter.id,
+    toolTip: filter.toolTip,
+    type: "apiaNumber"
   };
-  const filterHigh = {
-    id: filter.filterToId ?? "",
-    currentValue: filter.filterToValue ?? "",
-    type: "number"
+  const multiplier = useRef(1);
+  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) {
+    lastEmittedLow.current = filterLow.currentValue;
+    lastEmittedHigh.current = filterLow.filterToValue || "";
+  }
+  if (previousDeleteTimestamp.current !== filter.deleteFiltersTimestamp) {
+    lastEmittedLow.current = "";
+    lastEmittedHigh.current = "";
+  }
+  const emitLow = (method, currentValue) => {
+    const numberValue = currentValue ?? "";
+    if (lastEmittedLow.current === numberValue && lastEmittedMultiplier.current === multiplier.current) {
+      return;
+    }
+    lastEmittedLow.current = numberValue;
+    lastEmittedMultiplier.current = multiplier.current;
+    const emitValue = numberValue;
+    void method?.({
+      ...filterLow,
+      currentValue: emitValue,
+      filterToValue: lastEmittedHigh.current ?? "",
+      sizeMultiplier: multiplier.current
+    });
   };
-  return /* @__PURE__ */ jsxs(Box, { className: "ApiaFilter__Range", children: [
-    /* @__PURE__ */ jsx(Box, { className: "ApiaFilter__Range__Low", children: /* @__PURE__ */ jsx(
-      ApiaFilter,
-      {
-        filter: filterLow,
-        onChange: (currentValue) => {
-          if (onFilterChange)
-            void onFilterChange({ ...filterLow, currentValue });
-        },
-        onBlur: (currentValue) => {
-          if (onFilterBlur)
-            void onFilterBlur({ ...filterLow, currentValue });
-        },
-        onPressEnter: (currentValue) => {
-          if (onFilterPressEnter)
-            void onFilterPressEnter({ ...filterLow, currentValue });
-        }
-      }
-    ) }),
-    " - ",
-    /* @__PURE__ */ jsx(Box, { className: "ApiaFilter__Range__High", children: /* @__PURE__ */ jsx(
-      ApiaFilter,
-      {
-        filter: filterHigh,
-        onChange: (currentValue) => {
-          if (onFilterChange)
-            void onFilterChange({ ...filterHigh, currentValue });
-        },
-        onBlur: (currentValue) => {
-          if (onFilterBlur)
-            void onFilterBlur({ ...filterHigh, currentValue });
-        },
-        onPressEnter: (currentValue) => {
-          if (onFilterPressEnter)
-            void onFilterPressEnter({ ...filterHigh, currentValue });
-        }
-      }
-    ) })
-  ] });
+  const emitHigh = (method, currentValue) => {
+    const numberValue = currentValue ?? "";
+    if (lastEmittedHigh.current === numberValue && lastEmittedMultiplier.current === multiplier.current) {
+      return;
+    }
+    lastEmittedHigh.current = numberValue;
+    lastEmittedMultiplier.current = multiplier.current;
+    const emitValue = numberValue;
+    void method?.({
+      ...filterLow,
+      currentValue: lastEmittedLow.current ?? "",
+      filterToValue: emitValue,
+      sizeMultiplier: multiplier.current
+    });
+  };
+  const [lowValue, setLowValue] = useIntermediateValue(filterLow.currentValue);
+  const [highValue, setHighValue] = useIntermediateValue(
+    filterLow.filterToValue
+  );
+  const [unit, setUnit] = useIntermediateValue(filterLow.sizeMultiplier);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: `ApiaFilter__Range ${className || ""}`,
+      ...getVariant("layout.common.filters.rangeFilter"),
+      children: [
+        /* @__PURE__ */ jsx(Box, { className: "ApiaFilter__Range__Low", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            onChange: ({ target: { value: currentValue } }) => {
+              setLowValue(currentValue);
+              emitLow(onFilterChange, currentValue);
+            },
+            onBlur: ({ target: { value: currentValue } }) => {
+              emitLow(onFilterBlur, currentValue);
+            },
+            onKeyDown: ({ code, target }) => {
+              if (code === "Enter") {
+                emitLow(onFilterPressEnter, target.value);
+              }
+            },
+            value: lowValue
+          }
+        ) }),
+        " - ",
+        /* @__PURE__ */ jsx(Box, { className: "ApiaFilter__Range__High", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            onChange: ({ target: { value: currentValue } }) => {
+              setHighValue(currentValue);
+              emitHigh(onFilterChange, currentValue);
+            },
+            onBlur: ({ target: { value: currentValue } }) => {
+              emitHigh(onFilterBlur, currentValue);
+            },
+            onKeyDown: ({ code, target }) => {
+              if (code === "Enter") {
+                emitHigh(onFilterPressEnter, target.value);
+              }
+            },
+            value: highValue
+          }
+        ) }),
+        filter.isSize && /* @__PURE__ */ jsx(
+          Select,
+          {
+            className: "ApiaFilter__Range__UnitSelector",
+            onChange: (ev) => {
+              const unit2 = ev.target.value;
+              const index = units.indexOf(unit2);
+              if (index !== -1) {
+                multiplier.current = 2 ** (index * 10);
+                setUnit(multiplier.current);
+                emitLow(onFilterChange, lastEmittedLow.current ?? "");
+              }
+            },
+            value: units[Math.log2(unit || 1) / 10],
+            children: units.map((c) => /* @__PURE__ */ jsx("option", { value: c, children: c }, c))
+          }
+        )
+      ]
+    }
+  );
 };
 const RangeFilter = NoMemoRangeFilter;
 
@@ -1704,38 +1797,41 @@ const NoMemoDefaultCellRenderer = React.forwardRef(
     column,
     row,
     ...props
-  }, currentRef) => /* @__PURE__ */ jsx(
-    Box,
-    {
-      as: "td",
-      sx: useMemo(
-        () => ({
-          "&.colored": {
-            background: cell.background,
-            color: cell.color,
-            fontWeight: "bold"
+  }, currentRef) => {
+    const { avoidAutoEllipsis } = useResponsiveTableContext();
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "td",
+        sx: useMemo(
+          () => ({
+            "&.colored": {
+              background: cell.background,
+              color: cell.color,
+              fontWeight: "bold"
+            }
+          }),
+          [cell.background, cell.color]
+        ),
+        ref: currentRef,
+        ...props,
+        ...cell,
+        "aria-label": ariaLabel,
+        children: !avoidAutoEllipsis ? /* @__PURE__ */ jsx(
+          AutoEllipsis,
+          {
+            overrideStyles: (el) => {
+              const td = el.closest("td");
+              return {
+                width: window.getComputedStyle(td).width
+              };
+            },
+            children: props.children ?? cell.children
           }
-        }),
-        [cell.background, cell.color]
-      ),
-      ref: currentRef,
-      ...props,
-      ...cell,
-      "aria-label": ariaLabel,
-      children: /* @__PURE__ */ jsx(
-        AutoEllipsis,
-        {
-          overrideStyles: (el) => {
-            const td = el.closest("td");
-            return {
-              width: window.getComputedStyle(td).width
-            };
-          },
-          children: props.children ?? cell.children
-        }
-      )
-    }
-  )
+        ) : props.children ?? cell.children
+      }
+    );
+  }
 );
 NoMemoDefaultCellRenderer.displayName = "DefaultCellRenderer";
 const DefaultCellRenderer = NoMemoDefaultCellRenderer;
@@ -2874,7 +2970,6 @@ function applyFocusAttributes(table, _previousState, state, focus = state.isFocu
     const focusedCell = table.querySelector(
       `tr[data-rowindex="${state.focusedRow}"] td[aria-colindex="${state.focusedColumn}"], tr[data-rowindex="${state.focusedRow}"] th[aria-colindex="${state.focusedColumn}"]`
     );
-    console.log(focusedCell);
     if (focusedCell instanceof HTMLElement) {
       const widgets = [];
       if (state.isEditionMode) {
@@ -2888,7 +2983,6 @@ function applyFocusAttributes(table, _previousState, state, focus = state.isFocu
         }
       }
       if (widgets.length) {
-        console.log(widgets);
         widgets.forEach((widget, i) => {
           widget.tabIndex = 0;
           if (i === 0)