@apia/table 0.3.2 → 0.3.4

package/dist/index.d.ts

@@ -8,6 +8,8 @@ import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
 import * as immer_dist_internal from 'immer/dist/internal';
 import * as react_redux from 'react-redux';
+import * as _reduxjs_toolkit_dist_configureStore from '@reduxjs/toolkit/dist/configureStore';
+import * as redux_thunk from 'redux-thunk';
 import * as redux from 'redux';
 
 type TAccordionCellRendererProps<CellProps = Record<string, unknown>> = {
@@ -113,6 +115,10 @@ type TResponsiveTableRowRendererProps<RendererPropsType extends Partial<Record<k
 } & React__default.AllHTMLAttributes<HTMLTableRowElement>;
 type TResponsiveTableRowRenderer<RendererPropsType extends Partial<Record<keyof RendererPropsType, unknown>> = Record<string, unknown>> = React__default.FunctionComponent<TResponsiveTableRowRendererProps<RendererPropsType>>;
 type TResponsiveTableRow<RendererPropsType extends Partial<Record<keyof RendererPropsType, unknown>> = Record<string, unknown>> = TBasicRow & TColoredElement & {
+    accordionButtonProps?: {
+        rightButtons?: React__default.ReactNode;
+        onUserPressEnter?: (ev: React__default.KeyboardEvent) => unknown;
+    };
     cells: TResponsiveTableCell[];
     /**
      * Si se pasa en true, la fila se mostrará como un separador
@@ -483,11 +489,14 @@ interface ISelectableState<ColumnType extends IBasicColumn = IBasicColumn, Filte
 
 declare const ResponsiveTable: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<BoxProps & React__default.RefAttributes<HTMLDivElement>>>;
 
+declare function useResponsiveTableContext(): 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, variant, }: TResponsiveTableContextProps) => React__default.JSX.Element>;
 
-declare const responsiveTableStore: redux.Store<redux.CombinedState<{
+declare const responsiveTableStore: _reduxjs_toolkit_dist_configureStore.ToolkitStore<{
     responsiveTableSlice: TResponsiveTableSlice;
-}>, redux.AnyAction>;
+}, redux.AnyAction, [redux_thunk.ThunkMiddleware<{
+    responsiveTableSlice: TResponsiveTableSlice;
+}, redux.AnyAction, undefined>]>;
 declare const useResponsiveTable: <TSelected>(selector: (state: {
     responsiveTableSlice: TResponsiveTableSlice;
 }) => TSelected, equalityFn?: react_redux.EqualityFn<TSelected> | undefined) => TSelected;
@@ -616,4 +625,4 @@ declare const StatusRenderer: TResponsiveTableCellRenderer<{
 
 declare const TableRenderer: React__default.MemoExoticComponent<() => React__default.JSX.Element>;
 
-export { AccordionCell, AccordionDocNameCellRenderer, AccordionElement, AccordionHTMLCellRenderer, AccordionRenderer, AdditionalColumnDefaultRenderer, DefaultCellRenderer, DefaultRowRenderer, DocNameCellRenderer, HTMLCellRenderer, IAccordionElement, IsLoadingRenderer, NoRegistersRenderer, PriorityAccordionRenderer, PriorityRenderer, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, StatusAccordionRenderer, StatusRenderer, TAccordionCellRenderer, TAccordionCellRendererProps, TColoredElement, TDocNameCellRenderer, TDocNameCellRendererProps, TResponsiveTableCell, TResponsiveTableCellRenderer, TResponsiveTableCellRendererProps, TResponsiveTableColumn, TResponsiveTableContext, TResponsiveTableContextProps, TResponsiveTableRow, TResponsiveTableRowRenderer, TResponsiveTableRowRendererProps, TResponsiveTableRowState, TResponsiveTableRowsSelectionEvent, TResponsiveTableSortChangeEvent, TResponsiveTableSortValue, TResponsiveTableStoreProps, TResponsiveTableWithRendererElement, TableRenderer, defaultLabels, getPriorityHandler, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, responsiveTableActions, responsiveTableStore, useResponsiveTable };
+export { AccordionCell, AccordionDocNameCellRenderer, AccordionElement, AccordionHTMLCellRenderer, AccordionRenderer, AdditionalColumnDefaultRenderer, DefaultCellRenderer, DefaultRowRenderer, DocNameCellRenderer, HTMLCellRenderer, IAccordionElement, IsLoadingRenderer, NoRegistersRenderer, PriorityAccordionRenderer, PriorityRenderer, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, StatusAccordionRenderer, StatusRenderer, TAccordionCellRenderer, TAccordionCellRendererProps, TColoredElement, TDocNameCellRenderer, TDocNameCellRendererProps, TResponsiveTableCell, TResponsiveTableCellRenderer, TResponsiveTableCellRendererProps, TResponsiveTableColumn, TResponsiveTableContext, TResponsiveTableContextProps, TResponsiveTableRow, TResponsiveTableRowRenderer, TResponsiveTableRowRendererProps, TResponsiveTableRowState, TResponsiveTableRowsSelectionEvent, TResponsiveTableSortChangeEvent, TResponsiveTableSortValue, TResponsiveTableStoreProps, TResponsiveTableWithRendererElement, TableRenderer, defaultLabels, getPriorityHandler, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };

package/dist/index.js

@@ -2454,17 +2454,17 @@ const NoMemoTableRenderer = () => {
 const TableRenderer = React.memo(NoMemoTableRenderer);
 
 const NoMemoAccordionCell = ({ cell, column }) => {
-  var _a;
+  var _a, _b;
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      className: "responsiveTable__accordionElement__column",
+      className: `responsiveTable__accordionElement__column ${(_a = cell.className) != null ? _a : ""}`,
       children: [
         /* @__PURE__ */ jsxs(Box, { as: "strong", children: [
-          (_a = column.label) != null ? _a : column.name,
+          (_b = column.label) != null ? _b : column.name,
           ": "
         ] }),
-        /* @__PURE__ */ jsx(Box, { as: "span", children: cell == null ? void 0 : cell.children })
+        /* @__PURE__ */ jsx(Box, { as: "span", sx: { color: cell.color, background: cell.background }, children: cell == null ? void 0 : cell.children })
       ]
     },
     column.name
@@ -2473,6 +2473,7 @@ const NoMemoAccordionCell = ({ cell, column }) => {
 const AccordionCell = NoMemoAccordionCell;
 
 const NoMemoAccordionElement = ({ row, rowIndex }) => {
+  var _a, _b;
   const { name } = useResponsiveTableContext();
   const indexColumns = useResponsiveTable((global) => {
     const tableState = global.responsiveTableSlice[name];
@@ -2483,7 +2484,7 @@ const NoMemoAccordionElement = ({ row, rowIndex }) => {
     return tableState == null ? void 0 : tableState.columns;
   }, shallowEqual);
   const title = React.useMemo(() => {
-    var _a;
+    var _a2;
     if (row.title)
       return row.title;
     if (Array.isArray(indexColumns))
@@ -2493,7 +2494,7 @@ const NoMemoAccordionElement = ({ row, rowIndex }) => {
           row.cells[current.index].title || row.cells[current.index].children
         )
       ).join(" | ");
-    return (_a = row.cells[0].title) != null ? _a : row.cells[0].children;
+    return (_a2 = row.cells[0].title) != null ? _a2 : row.cells[0].children;
   }, [indexColumns, row.cells, row.title]);
   const isSelected = useResponsiveTable(
     (global) => global.responsiveTableSlice[name].allowSelection !== false ? global.responsiveTableSlice[name].selectedRows.includes(rowIndex) : void 0
@@ -2502,34 +2503,56 @@ const NoMemoAccordionElement = ({ row, rowIndex }) => {
     (global) => global.responsiveTableSlice[name].focusedRow === rowIndex
   );
   const buttonProps = useMemo(
-    () => ({
-      title,
-      ariaLabel: title,
-      label: title,
-      checked: isSelected,
-      onChange: (isChecked) => {
-        responsiveTableStore.dispatch(
-          responsiveTableActions.update({
-            tableName: name,
-            selectedRows: isChecked ? [
-              ...responsiveTableStore.getState().responsiveTableSlice[name].selectedRows,
-              rowIndex
-            ] : responsiveTableStore.getState().responsiveTableSlice[name].selectedRows.filter(
-              (current) => current !== rowIndex
-            )
-          })
-        );
-      },
-      tabIndex: isFocused ? 0 : -1
-    }),
-    [isFocused, isSelected, name, rowIndex, title]
+    () => {
+      var _a2, _b2;
+      return {
+        title,
+        ariaLabel: title,
+        label: title,
+        checked: isSelected,
+        onChange: (isChecked) => {
+          const isMultiple = responsiveTableStore.getState().responsiveTableSlice[name].isMultiple;
+          responsiveTableStore.dispatch(
+            responsiveTableActions.update({
+              tableName: name,
+              selectedRows: isMultiple ? isChecked ? [
+                ...responsiveTableStore.getState().responsiveTableSlice[name].selectedRows,
+                rowIndex
+              ] : responsiveTableStore.getState().responsiveTableSlice[name].selectedRows.filter(
+                (current) => current !== rowIndex
+              ) : [rowIndex]
+            })
+          );
+        },
+        tabIndex: isFocused ? 0 : -1,
+        rightButtons: (_a2 = row.accordionButtonProps) == null ? void 0 : _a2.rightButtons,
+        onUserPressEnter: (_b2 = row.accordionButtonProps) == null ? void 0 : _b2.onUserPressEnter,
+        domButtonProps: {
+          buttonSx: {
+            "&.accordion__item__button .accordion__item__button__label": {
+              color: row.color
+            }
+          }
+        }
+      };
+    },
+    [
+      isFocused,
+      isSelected,
+      name,
+      (_a = row.accordionButtonProps) == null ? void 0 : _a.onUserPressEnter,
+      (_b = row.accordionButtonProps) == null ? void 0 : _b.rightButtons,
+      row.color,
+      rowIndex,
+      title
+    ]
   );
   if (!Array.isArray(indexColumns) || !columns)
     return null;
   return /* @__PURE__ */ jsxs(AccordionItem, { id: row.id, buttonProps, children: [
     columns.map((currentColumn, columnIndex) => {
-      var _a, _b;
-      const Renderer = (_b = (_a = row.cells[columnIndex].AccordionRenderer) != null ? _a : currentColumn.AccordionRenderer) != null ? _b : AccordionCell;
+      var _a2, _b2;
+      const Renderer = (_b2 = (_a2 = row.cells[columnIndex].AccordionRenderer) != null ? _a2 : currentColumn.AccordionRenderer) != null ? _b2 : AccordionCell;
       return currentColumn.hideFromAccordion || currentColumn.showAsAdditional ? null : /* @__PURE__ */ jsx(
         Renderer,
         {
@@ -2543,8 +2566,8 @@ const NoMemoAccordionElement = ({ row, rowIndex }) => {
       );
     }),
     columns.filter((current) => !!current.showAsAdditional).map((currentColumn, columnIndex) => {
-      var _a, _b;
-      const Renderer = (_b = (_a = row.cells[columnIndex].AccordionRenderer) != null ? _a : currentColumn.AccordionRenderer) != null ? _b : AccordionCell;
+      var _a2, _b2;
+      const Renderer = (_b2 = (_a2 = row.cells[columnIndex].AccordionRenderer) != null ? _a2 : currentColumn.AccordionRenderer) != null ? _b2 : AccordionCell;
       return currentColumn.hideFromAccordion ? null : /* @__PURE__ */ jsx(
         Renderer,
         {
@@ -3237,4 +3260,4 @@ const NoMemoStatusAccordionRenderer = React.forwardRef(({ cell, column }, curren
 NoMemoStatusAccordionRenderer.displayName = "StatusAccordionRenderer";
 const StatusAccordionRenderer = NoMemoStatusAccordionRenderer;
 
-export { AccordionCell, AccordionDocNameCellRenderer, AccordionElement, AccordionHTMLCellRenderer, AccordionRenderer, AdditionalColumnDefaultRenderer, DefaultCellRenderer, DefaultRowRenderer, DocNameCellRenderer, HTMLCellRenderer, IsLoadingRenderer, NoRegistersRenderer, PriorityAccordionRenderer, PriorityRenderer, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, StatusAccordionRenderer, StatusRenderer, TableRenderer, defaultLabels, getPriorityHandler, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, responsiveTableActions, responsiveTableStore, useResponsiveTable };
+export { AccordionCell, AccordionDocNameCellRenderer, AccordionElement, AccordionHTMLCellRenderer, AccordionRenderer, AdditionalColumnDefaultRenderer, DefaultCellRenderer, DefaultRowRenderer, DocNameCellRenderer, HTMLCellRenderer, IsLoadingRenderer, NoRegistersRenderer, PriorityAccordionRenderer, PriorityRenderer, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, StatusAccordionRenderer, StatusRenderer, TableRenderer, defaultLabels, getPriorityHandler, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };