@apia/table 0.3.3 → 0.3.4

package/LICENSE.md

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) [year] [fullname]
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,28 +1,28 @@
-# Initiator
-
-Este package se creó con la única utilidad de copiarlo entero y pegarlo a la hora de crear un nuevo package.
-
-Este iniciador permite crear un paquete que compila typescript y puede ser importado desde otros packages.
-
-## IMPORTANTE
-
-Los archivos **tsconfig.json** y **tsup.config.ts** no son archivos únicos sino symlinks a archivos de configuración comunes a todos los packages. En caso de que sea necesario modificar alguno de ellos **que en la gran mayoría de los casos no sería necesario**, es necesario eliminar el archivo a modificar y crear uno nuevo.
-
-## Procedimiento
-
- - Copiar la carpeta initiator y pegarla con otro nombre dentro de packages.
- - Modificar el package.json:
-   - Eliminar la línea ```private: true```.
-   - Cambiar la ocurrencia `initiator` por el nombre del nuevo paquete. 
-   - Agregar los scripts convenientes: dev, build, etc.
- - Ejecutar el comando lerna bootstrap desde la carpeta raíz.
-
-Luego de ejecutar estos pasos, el package estaría listo para comenzar a usarse.
-
-Este package trae como dependencias por defecto theme-ui y react. Si se desea agregar más dependencias se debe ejecutar el comando ```lerna add --scope="@apia/packageName" dependencyName```. Ejemplo, si creamos un paquete con el nombre @apia/myPackage y queremos agregar lodash como dependencia, ejecutamos el comando ```lerna add --scope="@apia/myPackage" lodash```. 
-
-**Importante 1**: Dado que estamos desarrollando packages, es importante determinar si las dependencias que vamos a agregar son de tipo dependency o de tipo peerDependency.
-
-**Importante 2**: lerna no permite instalar de a varias dependencias a la vez como lo hace npm, por lo tanto, si se desea agregar varias dependencias se debe ejecutar el comando anterior tantas veces como dependencias se quiera agregar.
-
+# Initiator
+
+Este package se creó con la única utilidad de copiarlo entero y pegarlo a la hora de crear un nuevo package.
+
+Este iniciador permite crear un paquete que compila typescript y puede ser importado desde otros packages.
+
+## IMPORTANTE
+
+Los archivos **tsconfig.json** y **tsup.config.ts** no son archivos únicos sino symlinks a archivos de configuración comunes a todos los packages. En caso de que sea necesario modificar alguno de ellos **que en la gran mayoría de los casos no sería necesario**, es necesario eliminar el archivo a modificar y crear uno nuevo.
+
+## Procedimiento
+
+ - Copiar la carpeta initiator y pegarla con otro nombre dentro de packages.
+ - Modificar el package.json:
+   - Eliminar la línea ```private: true```.
+   - Cambiar la ocurrencia `initiator` por el nombre del nuevo paquete. 
+   - Agregar los scripts convenientes: dev, build, etc.
+ - Ejecutar el comando lerna bootstrap desde la carpeta raíz.
+
+Luego de ejecutar estos pasos, el package estaría listo para comenzar a usarse.
+
+Este package trae como dependencias por defecto theme-ui y react. Si se desea agregar más dependencias se debe ejecutar el comando ```lerna add --scope="@apia/packageName" dependencyName```. Ejemplo, si creamos un paquete con el nombre @apia/myPackage y queremos agregar lodash como dependencia, ejecutamos el comando ```lerna add --scope="@apia/myPackage" lodash```. 
+
+**Importante 1**: Dado que estamos desarrollando packages, es importante determinar si las dependencias que vamos a agregar son de tipo dependency o de tipo peerDependency.
+
+**Importante 2**: lerna no permite instalar de a varias dependencias a la vez como lo hace npm, por lo tanto, si se desea agregar varias dependencias se debe ejecutar el comando anterior tantas veces como dependencias se quiera agregar.
+
 **Importante 3**: React y theme-ui vienen instalados como peerDependencies. En caso de no ser necesarios pueden ser removidos, pero en cualquier caso asegurarse de que estas dependencias no sean instaladas como dependencies puesto que esto causaría comportamientos indeseados en la aplicación.

package/cleanDist.json

@@ -0,0 +1,3 @@
+{
+  "cleanDist": 0.1481583416616694
+}

package/dist/index.d.ts

@@ -115,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
@@ -485,6 +489,7 @@ 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: _reduxjs_toolkit_dist_configureStore.ToolkitStore<{
@@ -620,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 };