@apia/table 4.0.18 → 4.0.20

package/dist/index.d.ts

@@ -153,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.
      */
@@ -696,6 +697,14 @@ 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;
@@ -789,5 +798,5 @@ declare const TableRenderer: React__default.MemoExoticComponent<({ variant }: {
     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