@umodeapporg/ui 0.1.0

package/dist/components/UI/DataTable/DataTableAutoCard.d.ts

@@ -0,0 +1,20 @@
+import { Row } from '@tanstack/react-table';
+import { IDataTableColumnConfig, IDataTableRow } from './types';
+interface IDataTableAutoCardProps<T extends IDataTableRow> {
+    row: Row<T>;
+    columnConfigById: Map<string, IDataTableColumnConfig<T>>;
+}
+/**
+ * A table row rendered as a stacked label/value card, for viewports too narrow to
+ * read a real table.
+ *
+ * It is deliberately derived from the SAME column definitions the table uses, so
+ * a screen gets a usable narrow layout without authoring a second renderer and
+ * without the two drifting apart. Column visibility, order and the cell renderers
+ * are all inherited; only the geometry changes.
+ *
+ * Tables that ship a real `config.renderCard` keep using it: this is the fallback
+ * for the ones that do not.
+ */
+declare const DataTableAutoCard: <T extends IDataTableRow>({ row, columnConfigById }: IDataTableAutoCardProps<T>) => import("react").JSX.Element;
+export default DataTableAutoCard;

package/dist/components/UI/DataTable/DataTableAutoCard.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { flexRender } from "@tanstack/react-table";
+import { isBadgeColumnType } from "./dataTableColumnWidths.js";
+const DataTableAutoCard = ({ row, columnConfigById }) => {
+  const cells = row.getVisibleCells();
+  const actionCells = cells.filter((cell) => columnConfigById.get(cell.column.id)?.type === "actions");
+  const contentCells = cells.filter((cell) => columnConfigById.get(cell.column.id)?.type !== "actions");
+  const [titleCell, ...fieldCells] = contentCells;
+  const resolveHeader = (columnId) => {
+    const header = columnConfigById.get(columnId)?.header;
+    return typeof header === "string" ? header : "";
+  };
+  return /* @__PURE__ */ jsxs("article", { className: "flex w-full flex-col gap-2 rounded-xl border border-border bg-surface p-3 shadow-sm", children: [
+    titleCell && /* @__PURE__ */ jsx("div", { className: "min-w-0 break-words text-sm font-semibold text-foreground", children: flexRender(titleCell.column.columnDef.cell, titleCell.getContext()) }),
+    fieldCells.length > 0 && /* @__PURE__ */ jsx("dl", { className: "flex flex-col gap-1.5", children: fieldCells.map((cell) => {
+      const label = resolveHeader(cell.column.id);
+      const isBadge = isBadgeColumnType(columnConfigById.get(cell.column.id)?.type);
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5", children: [
+        /* @__PURE__ */ jsx("dt", { className: "shrink-0 text-xxs uppercase tracking-wide text-foreground-faint", children: label }),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            className: classNames(
+              "ml-auto min-w-0 break-words text-right text-sm text-foreground-muted",
+              isBadge && "shrink-0"
+            ),
+            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+          }
+        )
+      ] }, cell.id);
+    }) }),
+    actionCells.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle pt-2", children: actionCells.map((cell) => /* @__PURE__ */ jsx("div", { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) })
+  ] });
+};
+export {
+  DataTableAutoCard as default
+};
+//# sourceMappingURL=DataTableAutoCard.js.map

package/dist/components/UI/DataTable/DataTableAutoCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableAutoCard.js","sources":["../../../../src/components/UI/DataTable/DataTableAutoCard.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { flexRender, type Row } from '@tanstack/react-table';\n\nimport { isBadgeColumnType } from './dataTableClasses';\nimport type { IDataTableColumnConfig, IDataTableRow } from './types';\n\ninterface IDataTableAutoCardProps<T extends IDataTableRow> {\n  row: Row<T>;\n  columnConfigById: Map<string, IDataTableColumnConfig<T>>;\n}\n\n/**\n * A table row rendered as a stacked label/value card, for viewports too narrow to\n * read a real table.\n *\n * It is deliberately derived from the SAME column definitions the table uses, so\n * a screen gets a usable narrow layout without authoring a second renderer and\n * without the two drifting apart. Column visibility, order and the cell renderers\n * are all inherited; only the geometry changes.\n *\n * Tables that ship a real `config.renderCard` keep using it: this is the fallback\n * for the ones that do not.\n */\nconst DataTableAutoCard = <T extends IDataTableRow>({ row, columnConfigById }: IDataTableAutoCardProps<T>) => {\n  const cells = row.getVisibleCells();\n\n  const actionCells = cells.filter((cell) => columnConfigById.get(cell.column.id)?.type === 'actions');\n  const contentCells = cells.filter((cell) => columnConfigById.get(cell.column.id)?.type !== 'actions');\n\n  // The first column is the row's identity everywhere else in the table (it is the\n  // frozen one), so it reads as the card title instead of another labelled field.\n  const [titleCell, ...fieldCells] = contentCells;\n\n  const resolveHeader = (columnId: string): string => {\n    const header = columnConfigById.get(columnId)?.header;\n    return typeof header === 'string' ? header : '';\n  };\n\n  return (\n    <article className=\"flex w-full flex-col gap-2 rounded-xl border border-border bg-surface p-3 shadow-sm\">\n      {titleCell && (\n        <div className=\"min-w-0 break-words text-sm font-semibold text-foreground\">\n          {flexRender(titleCell.column.columnDef.cell, titleCell.getContext())}\n        </div>\n      )}\n\n      {fieldCells.length > 0 && (\n        <dl className=\"flex flex-col gap-1.5\">\n          {fieldCells.map((cell) => {\n            const label = resolveHeader(cell.column.id);\n            const isBadge = isBadgeColumnType(columnConfigById.get(cell.column.id)?.type);\n\n            return (\n              <div key={cell.id} className=\"flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5\">\n                <dt className=\"shrink-0 text-xxs uppercase tracking-wide text-foreground-faint\">{label}</dt>\n                <dd\n                  className={classNames(\n                    'ml-auto min-w-0 break-words text-right text-sm text-foreground-muted',\n                    isBadge && 'shrink-0',\n                  )}\n                >\n                  {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </dd>\n              </div>\n            );\n          })}\n        </dl>\n      )}\n\n      {actionCells.length > 0 && (\n        <div className=\"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle pt-2\">\n          {actionCells.map((cell) => (\n            <div key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</div>\n          ))}\n        </div>\n      )}\n    </article>\n  );\n};\n\nexport default DataTableAutoCard;\n"],"names":[],"mappings":";;;;AAwBA,MAAM,oBAAoB,CAA0B,EAAE,KAAK,uBAAmD;AAC5G,QAAM,QAAQ,IAAI,gBAAA;AAElB,QAAM,cAAc,MAAM,OAAO,CAAC,SAAS,iBAAiB,IAAI,KAAK,OAAO,EAAE,GAAG,SAAS,SAAS;AACnG,QAAM,eAAe,MAAM,OAAO,CAAC,SAAS,iBAAiB,IAAI,KAAK,OAAO,EAAE,GAAG,SAAS,SAAS;AAIpG,QAAM,CAAC,WAAW,GAAG,UAAU,IAAI;AAEnC,QAAM,gBAAgB,CAAC,aAA6B;AAClD,UAAM,SAAS,iBAAiB,IAAI,QAAQ,GAAG;AAC/C,WAAO,OAAO,WAAW,WAAW,SAAS;AAAA,EAC/C;AAEA,SACE,qBAAC,WAAA,EAAQ,WAAU,uFAChB,UAAA;AAAA,IAAA,aACC,oBAAC,OAAA,EAAI,WAAU,6DACZ,UAAA,WAAW,UAAU,OAAO,UAAU,MAAM,UAAU,WAAA,CAAY,GACrE;AAAA,IAGD,WAAW,SAAS,KACnB,oBAAC,MAAA,EAAG,WAAU,yBACX,UAAA,WAAW,IAAI,CAAC,SAAS;AACxB,YAAM,QAAQ,cAAc,KAAK,OAAO,EAAE;AAC1C,YAAM,UAAU,kBAAkB,iBAAiB,IAAI,KAAK,OAAO,EAAE,GAAG,IAAI;AAE5E,aACE,qBAAC,OAAA,EAAkB,WAAU,mEAC3B,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,mEAAmE,UAAA,OAAM;AAAA,QACvF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,WAAW;AAAA,YAAA;AAAA,YAGZ,qBAAW,KAAK,OAAO,UAAU,MAAM,KAAK,YAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3D,EAAA,GATQ,KAAK,EAUf;AAAA,IAEJ,CAAC,EAAA,CACH;AAAA,IAGD,YAAY,SAAS,KACpB,oBAAC,OAAA,EAAI,WAAU,oFACZ,UAAA,YAAY,IAAI,CAAC,SAChB,oBAAC,SAAmB,UAAA,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAA,CAAY,EAAA,GAAlE,KAAK,EAA+D,CAC/E,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/UI/DataTable/DataTableBody.d.ts

@@ -0,0 +1,29 @@
+import { Row } from '@tanstack/react-table';
+import { IDataTableDetailColumnsState } from './DataTableDetailTable';
+import { IDataTableColumnConfig, IDataTableConfig, IDataTableRow } from './types';
+interface IDataTableBodyProps<T extends IDataTableRow, C extends IDataTableRow = IDataTableRow> {
+    config: IDataTableConfig<T, C>;
+    visibleRows: Array<Row<T>>;
+    columnConfigById: Map<string, IDataTableColumnConfig<T>>;
+    /** Row-derived widths for actions/badge columns; other columns fall back to the seed. */
+    columnContentWidths: Map<string, number>;
+    registerRow: (id: string) => (element: HTMLElement | null) => void;
+    onCollapseStart: (childRowIds: Array<string>) => void;
+    detailColumnsState?: IDataTableDetailColumnsState;
+    detailSlotWidth?: number;
+    showActionsShadow?: boolean;
+    /** Denser cell padding for embedded/editor (fit) layouts. */
+    dense?: boolean;
+    /** Roomier cell padding, for tables that need to read bigger. */
+    spacious?: boolean;
+    /** Whether editable columns show the drag-to-fill handle. */
+    fillEnabled?: boolean;
+    /** While true the cells own the pointer and the row click is suspended. */
+    editMode?: boolean;
+    /** Full-width band rendered as the first body row, spanning every column. */
+    bodyTopRow?: React.ReactNode;
+    /** Number of visible leaf columns the `bodyTopRow` cell must span. */
+    bodyTopRowColSpan?: number;
+}
+declare const DataTableBody: <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>({ config, visibleRows, columnConfigById, columnContentWidths, registerRow, onCollapseStart, detailColumnsState, detailSlotWidth, showActionsShadow, dense, spacious, fillEnabled, editMode, bodyTopRow, bodyTopRowColSpan, }: IDataTableBodyProps<T, C>) => import("react").JSX.Element;
+export default DataTableBody;

package/dist/components/UI/DataTable/DataTableBody.js

@@ -0,0 +1,243 @@
+import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { Fragment } from "react";
+import classNames from "classnames";
+import ControlledButton from "../../Form/ControlledButton.js";
+import LoadingSpinner from "../LoadingSpinner.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { flexRender } from "@tanstack/react-table";
+import DataTable from "./DataTable.js";
+import DataTableBodyCell from "./DataTableBodyCell.js";
+import { alignClass, FROZEN_LEFT_COLUMN_SHADOW, FROZEN_COLUMN_SHADOW } from "./dataTableClasses.js";
+import { resolveColumnMinWidthPx } from "./dataTableColumnWidths.js";
+import DataTableDetailPanel from "./DataTableDetailPanel.js";
+import { dataTableOpacityTransitionClass } from "./dataTableMotion.js";
+import { isDataTablePanelExpansion, isDataTableSubRowsExpansion, isDataTableDetailTableExpansion, isDataTableTableExpansion } from "./types.js";
+const INDENT_PER_LEVEL_PX = 24;
+const DataTableBody = ({
+  config,
+  visibleRows,
+  columnConfigById,
+  columnContentWidths,
+  registerRow,
+  onCollapseStart,
+  detailColumnsState,
+  detailSlotWidth,
+  showActionsShadow = false,
+  dense = false,
+  spacious = false,
+  fillEnabled = false,
+  editMode = false,
+  bodyTopRow,
+  bodyTopRowColSpan
+}) => {
+  const expansion = config.expansion;
+  const panelExpansionConfig = expansion && isDataTablePanelExpansion(expansion) ? expansion : null;
+  const subRowsExpansionConfig = expansion && isDataTableSubRowsExpansion(expansion) ? expansion : null;
+  const detailTableExpansionConfig = expansion && isDataTableDetailTableExpansion(expansion) ? expansion : null;
+  const tableExpansionConfig = expansion && isDataTableTableExpansion(expansion) ? expansion : null;
+  const rowClickEnabled = !!config.onRowClick && !editMode;
+  const summaryCells = config.summaryRow?.(visibleRows.map((row) => row.original)) ?? null;
+  const summaryContentById = new Map((summaryCells ?? []).map((cell) => [cell.columnId, cell.content]));
+  const expandTriggerColumnId = expansion?.triggerColumnId ?? null;
+  const toggleRowExpansion = (row) => {
+    if (!expansion || !row.getCanExpand()) return;
+    const willExpand = !row.getIsExpanded();
+    if (!willExpand && subRowsExpansionConfig) {
+      onCollapseStart(row.subRows.map((subRow) => subRow.id));
+    }
+    if (willExpand && tableExpansionConfig && tableExpansionConfig.getChildRows(row.original) === void 0) {
+      tableExpansionConfig.loadChildren?.(row.original);
+    }
+    row.toggleExpanded();
+    expansion.onExpandChange?.(row.original, willExpand);
+  };
+  const renderExpandControl = (row) => {
+    if (!expansion) return null;
+    if (!row.getCanExpand()) return /* @__PURE__ */ jsx("span", { className: "inline-block size-8 shrink-0" });
+    return /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        onClick: (event) => {
+          event.stopPropagation();
+          toggleRowExpansion(row);
+        },
+        className: "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-foreground-subtle transition-colors hover:bg-muted-hover hover:text-foreground-muted",
+        children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: row.getIsExpanded() ? "expand_more" : "chevron_right", size: 20 })
+      }
+    );
+  };
+  const tableBody = /* @__PURE__ */ jsxs(
+    "tbody",
+    {
+      className: classNames(
+        dataTableOpacityTransitionClass,
+        "[&_tr:last-child_td:first-child]:rounded-bl-md [&_tr:last-child_td:last-child]:rounded-br-md [&_tr:last-child_td]:border-b-0"
+      ),
+      children: [
+        bodyTopRow && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: bodyTopRowColSpan, className: "border-b border-border bg-surface p-0", children: /* @__PURE__ */ jsx("div", { className: "sticky left-0", style: detailSlotWidth ? { width: detailSlotWidth } : void 0, children: /* @__PURE__ */ jsx("div", { className: dense ? "px-2 py-2" : "px-4 py-2.5", children: bodyTopRow }) }) }) }),
+        visibleRows.map((row) => {
+          const isDimmed = config.rowIsDimmed?.(row.original) ?? false;
+          const isChild = row.depth > 0;
+          const isExpanded = row.getIsExpanded();
+          const columnCount = row.getVisibleCells().length;
+          const showSubRowsLoading = !!subRowsExpansionConfig && isExpanded && row.subRows.length === 0 && !!subRowsExpansionConfig.isLoadingChildren?.(row.original);
+          const showPanelContent = !!panelExpansionConfig && isExpanded;
+          const showPanelLoading = showPanelContent && !!panelExpansionConfig.isLoadingContent?.(row.original);
+          const showDetailTable = !!detailTableExpansionConfig && isExpanded;
+          const detailRows = showDetailTable ? detailTableExpansionConfig.getDetailRows(row.original) : void 0;
+          const showDetailLoading = showDetailTable && (detailRows === void 0 || !!detailTableExpansionConfig.isLoadingChildren?.(row.original));
+          const showNestedTable = !!tableExpansionConfig && isExpanded;
+          const nestedRows = showNestedTable ? tableExpansionConfig.getChildRows(row.original) : void 0;
+          const showNestedLoading = showNestedTable && (nestedRows === void 0 || !!tableExpansionConfig.isLoadingChildren?.(row.original));
+          const visibleCells = row.getVisibleCells();
+          const lastCellIndex = visibleCells.length - 1;
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "tr",
+              {
+                ref: registerRow(row.id),
+                onClick: rowClickEnabled ? () => config.onRowClick?.(row.original) : void 0,
+                className: classNames("transition-colors", dense ? "h-9" : "h-12", {
+                  "cursor-pointer": rowClickEnabled,
+                  "bg-surface": !isChild,
+                  "hover:bg-muted": rowClickEnabled && !isChild,
+                  "bg-muted-hover": isChild,
+                  "hover:bg-muted-active": isChild && rowClickEnabled
+                }),
+                children: visibleCells.map((cell, cellIndex) => {
+                  const columnConfig = columnConfigById.get(cell.column.id);
+                  const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
+                  const isFirstCell = cellIndex === 0;
+                  const isActionsCell = cellIndex === lastCellIndex && columnConfig?.type === "actions";
+                  const isTriggerColumnCell = !!expandTriggerColumnId && cell.column.id === expandTriggerColumnId;
+                  const isExpandCell = !!expansion && (expandTriggerColumnId ? isTriggerColumnCell : isFirstCell);
+                  return /* @__PURE__ */ jsx(
+                    DataTableBodyCell,
+                    {
+                      rowId: row.id,
+                      columnId: cell.column.id,
+                      navigable: editMode && columnConfig?.type !== "actions",
+                      fillEnabled: fillEnabled && !!columnConfig?.editable && columnConfig.editable.fillable !== false,
+                      className: classNames(
+                        "border-b border-border-subtle align-middle",
+                        dense ? "px-3 py-1.5" : spacious ? "px-5 py-4" : "px-4 py-2.5",
+                        !isFirstCell && !isActionsCell && "overflow-hidden",
+                        alignClass(columnConfig?.cellAlign),
+                        { "opacity-60": isDimmed && columnConfig?.type !== "actions" },
+                        isFirstCell && "sticky left-0 z-10 bg-inherit",
+                        isFirstCell && showActionsShadow && FROZEN_LEFT_COLUMN_SHADOW,
+                        isActionsCell && "sticky right-0 z-10 bg-inherit",
+                        isActionsCell && showActionsShadow && FROZEN_COLUMN_SHADOW
+                      ),
+                      style: {
+                        minWidth: columnContentWidths.get(cell.column.id) ?? resolveColumnMinWidthPx(columnConfig, {
+                          isFirstColumn: isFirstCell,
+                          hasColumnToggle: isFirstCell
+                        })
+                      },
+                      children: isExpandCell ? /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          role: isTriggerColumnCell && row.getCanExpand() ? "button" : void 0,
+                          tabIndex: isTriggerColumnCell && row.getCanExpand() ? 0 : void 0,
+                          onClick: isTriggerColumnCell && row.getCanExpand() ? (event) => {
+                            event.stopPropagation();
+                            toggleRowExpansion(row);
+                          } : void 0,
+                          onKeyDown: isTriggerColumnCell && row.getCanExpand() ? (event) => {
+                            if (event.key !== "Enter" && event.key !== " ") return;
+                            event.preventDefault();
+                            event.stopPropagation();
+                            toggleRowExpansion(row);
+                          } : void 0,
+                          className: classNames("flex min-w-0 items-center gap-1.5", {
+                            "cursor-pointer rounded-md": isTriggerColumnCell && row.getCanExpand()
+                          }),
+                          style: { paddingLeft: isFirstCell ? row.depth * INDENT_PER_LEVEL_PX : void 0 },
+                          children: [
+                            renderExpandControl(row),
+                            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: cellContent })
+                          ]
+                        }
+                      ) : cellContent
+                    },
+                    cell.id
+                  );
+                })
+              }
+            ),
+            showSubRowsLoading && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columnCount, className: "border-b border-border px-4 py-3", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 5, color: "foreground-faint" }) }) }),
+            showPanelContent && panelExpansionConfig && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columnCount, className: "border-b border-border p-0", children: /* @__PURE__ */ jsx("div", { className: "w-full bg-surface py-3", children: showPanelLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-2", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 5, color: "foreground-faint" }) }) : panelExpansionConfig.renderExpandedContent(row.original, {
+              collapse: () => {
+                if (!row.getIsExpanded()) return;
+                row.toggleExpanded(false);
+                panelExpansionConfig.onExpandChange?.(row.original, false);
+              }
+            }) }) }) }),
+            showDetailTable && detailTableExpansionConfig && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columnCount, className: "border-b border-border bg-muted/70 p-0", children: /* @__PURE__ */ jsx(
+              DataTableDetailPanel,
+              {
+                columns: typeof detailTableExpansionConfig.columns === "function" ? detailTableExpansionConfig.columns(row.original) : detailTableExpansionConfig.columns,
+                rows: detailRows ?? [],
+                loading: showDetailLoading,
+                onRowClick: detailTableExpansionConfig.onDetailRowClick ? (detailRow) => detailTableExpansionConfig.onDetailRowClick?.(detailRow, row.original) : void 0,
+                rowIsDimmed: detailTableExpansionConfig.detailRowIsDimmed,
+                emptyMessage: detailTableExpansionConfig.emptyMessage,
+                columnsState: detailColumnsState,
+                slotWidth: detailSlotWidth
+              }
+            ) }) }),
+            showNestedTable && tableExpansionConfig && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columnCount, className: "border-b border-border bg-muted/70 p-0", children: /* @__PURE__ */ jsx("div", { className: "sticky left-0", style: detailSlotWidth ? { width: detailSlotWidth } : void 0, children: /* @__PURE__ */ jsx("div", { className: "px-3 py-3", children: /* @__PURE__ */ jsx(
+              DataTable,
+              {
+                config: tableExpansionConfig.childConfig,
+                rows: nestedRows ?? [],
+                loading: showNestedLoading
+              }
+            ) }) }) }) })
+          ] }, row.id);
+        })
+      ]
+    }
+  );
+  const summaryFooter = summaryCells && summaryCells.length > 0 && visibleRows.length > 0 ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { className: "bg-muted font-semibold text-foreground-muted", children: visibleRows[0]?.getVisibleCells().map((cell, cellIndex) => {
+    const columnConfig = columnConfigById.get(cell.column.id);
+    const isFirstCell = cellIndex === 0;
+    const isActionsCell = cellIndex === (visibleRows[0]?.getVisibleCells().length ?? 0) - 1 && columnConfig?.type === "actions";
+    const content = summaryContentById.get(cell.column.id) ?? null;
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: classNames(
+          "sticky bottom-0 z-10 border-t-2 border-border bg-muted align-middle",
+          dense ? "px-3 py-1.5" : "px-4 py-2.5",
+          alignClass(columnConfig?.cellAlign),
+          isFirstCell && "left-0 z-20",
+          isFirstCell && showActionsShadow && FROZEN_LEFT_COLUMN_SHADOW,
+          isActionsCell && "right-0 z-20",
+          isActionsCell && showActionsShadow && FROZEN_COLUMN_SHADOW
+        ),
+        style: {
+          minWidth: resolveColumnMinWidthPx(columnConfig, {
+            isFirstColumn: isFirstCell,
+            hasColumnToggle: isFirstCell
+          })
+        },
+        children: isFirstCell && expansion ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "inline-block size-8 shrink-0" }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: content })
+        ] }) : content
+      },
+      cell.column.id
+    );
+  }) }) }) : null;
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    tableBody,
+    summaryFooter
+  ] });
+};
+export {
+  DataTableBody as default
+};
+//# sourceMappingURL=DataTableBody.js.map

package/dist/components/UI/DataTable/DataTableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/UI/DataTable/DataTableBody.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport classNames from 'classnames';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { flexRender, type Row } from '@tanstack/react-table';\n\nimport DataTable from './DataTable';\nimport DataTableBodyCell from './DataTableBodyCell';\nimport { alignClass, FROZEN_COLUMN_SHADOW, FROZEN_LEFT_COLUMN_SHADOW } from './dataTableClasses';\nimport { resolveColumnMinWidthPx } from './dataTableColumnWidths';\nimport DataTableDetailPanel from './DataTableDetailPanel';\nimport { type IDataTableDetailColumnsState } from './DataTableDetailTable';\nimport { dataTableOpacityTransitionClass } from './dataTableMotion';\nimport {\n  type IDataTableColumnConfig,\n  type IDataTableConfig,\n  type IDataTableRow,\n  isDataTableDetailTableExpansion,\n  isDataTablePanelExpansion,\n  isDataTableSubRowsExpansion,\n  isDataTableTableExpansion,\n} from './types';\n\ninterface IDataTableBodyProps<T extends IDataTableRow, C extends IDataTableRow = IDataTableRow> {\n  config: IDataTableConfig<T, C>;\n  visibleRows: Array<Row<T>>;\n  columnConfigById: Map<string, IDataTableColumnConfig<T>>;\n  /** Row-derived widths for actions/badge columns; other columns fall back to the seed. */\n  columnContentWidths: Map<string, number>;\n  registerRow: (id: string) => (element: HTMLElement | null) => void;\n  onCollapseStart: (childRowIds: Array<string>) => void;\n  detailColumnsState?: IDataTableDetailColumnsState;\n  detailSlotWidth?: number;\n  showActionsShadow?: boolean;\n  /** Denser cell padding for embedded/editor (fit) layouts. */\n  dense?: boolean;\n  /** Roomier cell padding, for tables that need to read bigger. */\n  spacious?: boolean;\n  /** Whether editable columns show the drag-to-fill handle. */\n  fillEnabled?: boolean;\n  /** While true the cells own the pointer and the row click is suspended. */\n  editMode?: boolean;\n  /** Full-width band rendered as the first body row, spanning every column. */\n  bodyTopRow?: React.ReactNode;\n  /** Number of visible leaf columns the `bodyTopRow` cell must span. */\n  bodyTopRowColSpan?: number;\n}\n\nconst INDENT_PER_LEVEL_PX = 24;\n\nconst DataTableBody = <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>({\n  config,\n  visibleRows,\n  columnConfigById,\n  columnContentWidths,\n  registerRow,\n  onCollapseStart,\n  detailColumnsState,\n  detailSlotWidth,\n  showActionsShadow = false,\n  dense = false,\n  spacious = false,\n  fillEnabled = false,\n  editMode = false,\n  bodyTopRow,\n  bodyTopRowColSpan,\n}: IDataTableBodyProps<T, C>) => {\n  const expansion = config.expansion;\n  const panelExpansionConfig = expansion && isDataTablePanelExpansion(expansion) ? expansion : null;\n  const subRowsExpansionConfig = expansion && isDataTableSubRowsExpansion(expansion) ? expansion : null;\n  const detailTableExpansionConfig = expansion && isDataTableDetailTableExpansion(expansion) ? expansion : null;\n  const tableExpansionConfig = expansion && isDataTableTableExpansion(expansion) ? expansion : null;\n\n  const rowClickEnabled = !!config.onRowClick && !editMode;\n\n  const summaryCells = config.summaryRow?.(visibleRows.map((row) => row.original)) ?? null;\n  const summaryContentById = new Map((summaryCells ?? []).map((cell) => [cell.columnId, cell.content]));\n\n  const expandTriggerColumnId = expansion?.triggerColumnId ?? null;\n\n  const toggleRowExpansion = (row: Row<T>) => {\n    if (!expansion || !row.getCanExpand()) return;\n\n    const willExpand = !row.getIsExpanded();\n    if (!willExpand && subRowsExpansionConfig) {\n      onCollapseStart(row.subRows.map((subRow) => subRow.id));\n    }\n    if (willExpand && tableExpansionConfig && tableExpansionConfig.getChildRows(row.original) === undefined) {\n      tableExpansionConfig.loadChildren?.(row.original);\n    }\n    row.toggleExpanded();\n    expansion.onExpandChange?.(row.original, willExpand);\n  };\n\n  const renderExpandControl = (row: Row<T>) => {\n    if (!expansion) return null;\n\n    if (!row.getCanExpand()) return <span className=\"inline-block size-8 shrink-0\" />;\n\n    return (\n      <ControlledButton\n        defaultHtmlButton\n        onClick={(event) => {\n          event.stopPropagation();\n          toggleRowExpansion(row);\n        }}\n        className=\"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-foreground-subtle transition-colors hover:bg-muted-hover hover:text-foreground-muted\"\n      >\n        <MaterialSymbol icon={row.getIsExpanded() ? 'expand_more' : 'chevron_right'} size={20} />\n      </ControlledButton>\n    );\n  };\n\n  const tableBody = (\n    <tbody\n      className={classNames(\n        dataTableOpacityTransitionClass,\n        '[&_tr:last-child_td:first-child]:rounded-bl-md [&_tr:last-child_td:last-child]:rounded-br-md [&_tr:last-child_td]:border-b-0',\n      )}\n    >\n      {bodyTopRow && (\n        <tr>\n          <td colSpan={bodyTopRowColSpan} className=\"border-b border-border bg-surface p-0\">\n            {/* Pin the band to the scroller's visible width so it never widens with\n                the (possibly overflowing) table and its trailing controls stay in view. */}\n            <div className=\"sticky left-0\" style={detailSlotWidth ? { width: detailSlotWidth } : undefined}>\n              <div className={dense ? 'px-2 py-2' : 'px-4 py-2.5'}>{bodyTopRow}</div>\n            </div>\n          </td>\n        </tr>\n      )}\n\n      {visibleRows.map((row) => {\n        const isDimmed = config.rowIsDimmed?.(row.original) ?? false;\n        const isChild = row.depth > 0;\n        const isExpanded = row.getIsExpanded();\n        const columnCount = row.getVisibleCells().length;\n\n        const showSubRowsLoading =\n          !!subRowsExpansionConfig &&\n          isExpanded &&\n          row.subRows.length === 0 &&\n          !!subRowsExpansionConfig.isLoadingChildren?.(row.original);\n\n        const showPanelContent = !!panelExpansionConfig && isExpanded;\n        const showPanelLoading = showPanelContent && !!panelExpansionConfig.isLoadingContent?.(row.original);\n\n        const showDetailTable = !!detailTableExpansionConfig && isExpanded;\n        const detailRows = showDetailTable ? detailTableExpansionConfig.getDetailRows(row.original) : undefined;\n        const showDetailLoading =\n          showDetailTable &&\n          (detailRows === undefined || !!detailTableExpansionConfig.isLoadingChildren?.(row.original));\n\n        const showNestedTable = !!tableExpansionConfig && isExpanded;\n        const nestedRows = showNestedTable ? tableExpansionConfig.getChildRows(row.original) : undefined;\n        const showNestedLoading =\n          showNestedTable && (nestedRows === undefined || !!tableExpansionConfig.isLoadingChildren?.(row.original));\n\n        const visibleCells = row.getVisibleCells();\n        const lastCellIndex = visibleCells.length - 1;\n\n        return (\n          <Fragment key={row.id}>\n            <tr\n              ref={registerRow(row.id)}\n              // Em modo de edição o clique pertence à célula: abrir o registro\n              // aqui roubaria todo gesto de seleção, arraste e edição.\n              onClick={rowClickEnabled ? () => config.onRowClick?.(row.original) : undefined}\n              // A altura na linha vale como MÍNIMO numa tabela: linhas de texto puro e\n              // linhas com miniatura ou chip param de alternar de altura, e o olho\n              // percorre a coluna sem tropeço. Conteúdo mais alto ainda expande.\n              className={classNames('transition-colors', dense ? 'h-9' : 'h-12', {\n                'cursor-pointer': rowClickEnabled,\n                'bg-surface': !isChild,\n                'hover:bg-muted': rowClickEnabled && !isChild,\n                'bg-muted-hover': isChild,\n                'hover:bg-muted-active': isChild && rowClickEnabled,\n              })}\n            >\n              {visibleCells.map((cell, cellIndex) => {\n                const columnConfig = columnConfigById.get(cell.column.id);\n                const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());\n                const isFirstCell = cellIndex === 0;\n                const isActionsCell = cellIndex === lastCellIndex && columnConfig?.type === 'actions';\n                const isTriggerColumnCell = !!expandTriggerColumnId && cell.column.id === expandTriggerColumnId;\n                const isExpandCell = !!expansion && (expandTriggerColumnId ? isTriggerColumnCell : isFirstCell);\n\n                return (\n                  <DataTableBodyCell\n                    key={cell.id}\n                    rowId={row.id}\n                    columnId={cell.column.id}\n                    navigable={editMode && columnConfig?.type !== 'actions'}\n                    fillEnabled={fillEnabled && !!columnConfig?.editable && columnConfig.editable.fillable !== false}\n                    className={classNames(\n                      'border-b border-border-subtle align-middle',\n                      dense ? 'px-3 py-1.5' : spacious ? 'px-5 py-4' : 'px-4 py-2.5',\n                      !isFirstCell && !isActionsCell && 'overflow-hidden',\n                      alignClass(columnConfig?.cellAlign),\n                      { 'opacity-60': isDimmed && columnConfig?.type !== 'actions' },\n                      isFirstCell && 'sticky left-0 z-10 bg-inherit',\n                      isFirstCell && showActionsShadow && FROZEN_LEFT_COLUMN_SHADOW,\n                      isActionsCell && 'sticky right-0 z-10 bg-inherit',\n                      isActionsCell && showActionsShadow && FROZEN_COLUMN_SHADOW,\n                    )}\n                    style={{\n                      minWidth:\n                        columnContentWidths.get(cell.column.id) ??\n                        resolveColumnMinWidthPx(columnConfig, {\n                          isFirstColumn: isFirstCell,\n                          hasColumnToggle: isFirstCell,\n                        }),\n                    }}\n                  >\n                    {isExpandCell ? (\n                      <div\n                        role={isTriggerColumnCell && row.getCanExpand() ? 'button' : undefined}\n                        tabIndex={isTriggerColumnCell && row.getCanExpand() ? 0 : undefined}\n                        onClick={\n                          isTriggerColumnCell && row.getCanExpand()\n                            ? (event) => {\n                                event.stopPropagation();\n                                toggleRowExpansion(row);\n                              }\n                            : undefined\n                        }\n                        onKeyDown={\n                          isTriggerColumnCell && row.getCanExpand()\n                            ? (event) => {\n                                if (event.key !== 'Enter' && event.key !== ' ') return;\n                                event.preventDefault();\n                                event.stopPropagation();\n                                toggleRowExpansion(row);\n                              }\n                            : undefined\n                        }\n                        className={classNames('flex min-w-0 items-center gap-1.5', {\n                          'cursor-pointer rounded-md': isTriggerColumnCell && row.getCanExpand(),\n                        })}\n                        style={{ paddingLeft: isFirstCell ? row.depth * INDENT_PER_LEVEL_PX : undefined }}\n                      >\n                        {renderExpandControl(row)}\n                        <div className=\"min-w-0 flex-1\">{cellContent}</div>\n                      </div>\n                    ) : (\n                      cellContent\n                    )}\n                  </DataTableBodyCell>\n                );\n              })}\n            </tr>\n\n            {showSubRowsLoading && (\n              <tr>\n                <td colSpan={columnCount} className=\"border-b border-border px-4 py-3\">\n                  <LoadingSpinner size={5} color=\"foreground-faint\" />\n                </td>\n              </tr>\n            )}\n\n            {showPanelContent && panelExpansionConfig && (\n              <tr>\n                <td colSpan={columnCount} className=\"border-b border-border p-0\">\n                  <div className=\"w-full bg-surface py-3\">\n                    {showPanelLoading ? (\n                      <div className=\"flex items-center justify-center py-2\">\n                        <LoadingSpinner size={5} color=\"foreground-faint\" />\n                      </div>\n                    ) : (\n                      panelExpansionConfig.renderExpandedContent(row.original, {\n                        collapse: () => {\n                          if (!row.getIsExpanded()) return;\n                          row.toggleExpanded(false);\n                          panelExpansionConfig.onExpandChange?.(row.original, false);\n                        },\n                      })\n                    )}\n                  </div>\n                </td>\n              </tr>\n            )}\n\n            {showDetailTable && detailTableExpansionConfig && (\n              <tr>\n                <td colSpan={columnCount} className=\"border-b border-border bg-muted/70 p-0\">\n                  <DataTableDetailPanel\n                    columns={\n                      typeof detailTableExpansionConfig.columns === 'function'\n                        ? detailTableExpansionConfig.columns(row.original)\n                        : detailTableExpansionConfig.columns\n                    }\n                    rows={detailRows ?? []}\n                    loading={showDetailLoading}\n                    onRowClick={\n                      detailTableExpansionConfig.onDetailRowClick\n                        ? (detailRow) => detailTableExpansionConfig.onDetailRowClick?.(detailRow, row.original)\n                        : undefined\n                    }\n                    rowIsDimmed={detailTableExpansionConfig.detailRowIsDimmed}\n                    emptyMessage={detailTableExpansionConfig.emptyMessage}\n                    columnsState={detailColumnsState}\n                    slotWidth={detailSlotWidth}\n                  />\n                </td>\n              </tr>\n            )}\n\n            {showNestedTable && tableExpansionConfig && (\n              <tr>\n                <td colSpan={columnCount} className=\"border-b border-border bg-muted/70 p-0\">\n                  <div className=\"sticky left-0\" style={detailSlotWidth ? { width: detailSlotWidth } : undefined}>\n                    <div className=\"px-3 py-3\">\n                      <DataTable\n                        config={tableExpansionConfig.childConfig}\n                        rows={nestedRows ?? []}\n                        loading={showNestedLoading}\n                      />\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            )}\n          </Fragment>\n        );\n      })}\n    </tbody>\n  );\n\n  const summaryFooter =\n    summaryCells && summaryCells.length > 0 && visibleRows.length > 0 ? (\n      <tfoot>\n        <tr className=\"bg-muted font-semibold text-foreground-muted\">\n          {visibleRows[0]?.getVisibleCells().map((cell, cellIndex) => {\n            const columnConfig = columnConfigById.get(cell.column.id);\n            const isFirstCell = cellIndex === 0;\n            const isActionsCell =\n              cellIndex === (visibleRows[0]?.getVisibleCells().length ?? 0) - 1 && columnConfig?.type === 'actions';\n            const content = summaryContentById.get(cell.column.id) ?? null;\n\n            return (\n              <td\n                key={cell.column.id}\n                className={classNames(\n                  'sticky bottom-0 z-10 border-t-2 border-border bg-muted align-middle',\n                  dense ? 'px-3 py-1.5' : 'px-4 py-2.5',\n                  alignClass(columnConfig?.cellAlign),\n                  isFirstCell && 'left-0 z-20',\n                  isFirstCell && showActionsShadow && FROZEN_LEFT_COLUMN_SHADOW,\n                  isActionsCell && 'right-0 z-20',\n                  isActionsCell && showActionsShadow && FROZEN_COLUMN_SHADOW,\n                )}\n                style={{\n                  minWidth: resolveColumnMinWidthPx(columnConfig, {\n                    isFirstColumn: isFirstCell,\n                    hasColumnToggle: isFirstCell,\n                  }),\n                }}\n              >\n                {isFirstCell && expansion ? (\n                  <div className=\"flex min-w-0 items-center gap-1.5\">\n                    <span className=\"inline-block size-8 shrink-0\" />\n                    <div className=\"min-w-0 flex-1\">{content}</div>\n                  </div>\n                ) : (\n                  content\n                )}\n              </td>\n            );\n          })}\n        </tr>\n      </tfoot>\n    ) : null;\n\n  return (\n    <>\n      {tableBody}\n      {summaryFooter}\n    </>\n  );\n};\n\nexport default DataTableBody;\n"],"names":["Fragment"],"mappings":"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"}

package/dist/components/UI/DataTable/DataTableBodyCell.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+interface IDataTableBodyCellProps {
+    /** TanStack row id: unique across nesting levels, unlike the entity id. */
+    rowId: string;
+    columnId: string;
+    /** Actions columns hold controls, never a value: they stay out of the matrix. */
+    navigable: boolean;
+    /** Whether this column accepts a drag-to-fill from the selection corner. */
+    fillEnabled?: boolean;
+    className: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+/**
+ * The `<td>` of a data row. Outside a spreadsheet-enabled table it renders exactly
+ * what it always did; inside one it also carries the roving tabindex, the grid
+ * semantics and its own subscription to the grid state, so moving the active cell
+ * re-renders two cells instead of the table.
+ */
+declare const DataTableBodyCell: React.FC<IDataTableBodyCellProps>;
+export default DataTableBodyCell;

package/dist/components/UI/DataTable/DataTableBodyCell.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import classNames from "classnames";
+import GridFillHandle from "./grid/GridFillHandle.js";
+import { useGridStoreApi, useGridCellRegistry, useGridCellState } from "./grid/GridProvider.js";
+import { GRID_COLUMN_DATA_ATTR, GRID_ROW_DATA_ATTR, GRID_CELL_DATA_ATTR, GRID_CELL_TABBABLE, buildGridCellKey, GRID_CELL_FILL_HANDLE, GRID_CELL_SELECTED, GRID_CELL_ACTIVE, GRID_CELL_FILL_PREVIEW, GRID_CELL_SAVING, GRID_CELL_SAVE_ERROR } from "./grid/gridTypes.js";
+const DataTableBodyCell = ({
+  rowId,
+  columnId,
+  navigable,
+  fillEnabled = false,
+  className,
+  style,
+  children
+}) => {
+  const store = useGridStoreApi();
+  const registry = useGridCellRegistry();
+  const cellState = useGridCellState(rowId, columnId);
+  const isGridCell = !!store && !!registry && navigable;
+  const cellKey = buildGridCellKey(rowId, columnId);
+  const registerCell = useCallback(
+    (element) => {
+      if (!registry) return;
+      registry.register(cellKey, element);
+    },
+    [registry, cellKey]
+  );
+  const handleMouseDown = useCallback(
+    (event) => {
+      store?.getState().setActiveCell({ rowId, columnId }, { extend: event.shiftKey });
+    },
+    [store, rowId, columnId]
+  );
+  if (!isGridCell) {
+    return /* @__PURE__ */ jsx("td", { className, style, children });
+  }
+  const isActive = (cellState & GRID_CELL_ACTIVE) !== 0;
+  const isSelected = (cellState & GRID_CELL_SELECTED) !== 0;
+  const isFillPreview = (cellState & GRID_CELL_FILL_PREVIEW) !== 0;
+  const showsFillHandle = fillEnabled && (cellState & GRID_CELL_FILL_HANDLE) !== 0;
+  const isSaving = (cellState & GRID_CELL_SAVING) !== 0;
+  const hasSaveError = (cellState & GRID_CELL_SAVE_ERROR) !== 0;
+  return /* @__PURE__ */ jsxs(
+    "td",
+    {
+      ref: registerCell,
+      role: "gridcell",
+      "aria-selected": isSelected,
+      tabIndex: isActive || (cellState & GRID_CELL_TABBABLE) !== 0 ? 0 : -1,
+      onMouseDown: handleMouseDown,
+      ...{ [GRID_CELL_DATA_ATTR]: cellKey, [GRID_ROW_DATA_ATTR]: rowId, [GRID_COLUMN_DATA_ATTR]: columnId },
+      className: classNames(
+        className,
+        "outline-none",
+        // `!` because the frozen first/actions cells paint `bg-inherit`, which is
+        // the same utility group: the state fill has to win regardless of the
+        // order Tailwind emits them in.
+        isSelected && !isActive && "!bg-brand-soft/40",
+        isFillPreview && "!bg-brand-soft/60",
+        (isActive || showsFillHandle) && "relative",
+        isActive && "z-20 ring-2 ring-inset ring-brand",
+        isFillPreview && "ring-1 ring-inset ring-brand-border",
+        isSaving && "opacity-70",
+        hasSaveError && "!bg-danger-soft ring-1 ring-inset ring-danger-border"
+      ),
+      style,
+      children: [
+        children,
+        showsFillHandle && /* @__PURE__ */ jsx(GridFillHandle, {})
+      ]
+    }
+  );
+};
+export {
+  DataTableBodyCell as default
+};
+//# sourceMappingURL=DataTableBodyCell.js.map

package/dist/components/UI/DataTable/DataTableBodyCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableBodyCell.js","sources":["../../../../src/components/UI/DataTable/DataTableBodyCell.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport classNames from 'classnames';\n\nimport GridFillHandle from './grid/GridFillHandle';\nimport { useGridCellRegistry, useGridCellState, useGridStoreApi } from './grid/GridProvider';\nimport {\n  buildGridCellKey,\n  GRID_CELL_ACTIVE,\n  GRID_CELL_DATA_ATTR,\n  GRID_CELL_FILL_HANDLE,\n  GRID_CELL_FILL_PREVIEW,\n  GRID_CELL_SAVE_ERROR,\n  GRID_CELL_SAVING,\n  GRID_CELL_SELECTED,\n  GRID_CELL_TABBABLE,\n  GRID_COLUMN_DATA_ATTR,\n  GRID_ROW_DATA_ATTR,\n} from './grid/gridTypes';\n\ninterface IDataTableBodyCellProps {\n  /** TanStack row id: unique across nesting levels, unlike the entity id. */\n  rowId: string;\n  columnId: string;\n  /** Actions columns hold controls, never a value: they stay out of the matrix. */\n  navigable: boolean;\n  /** Whether this column accepts a drag-to-fill from the selection corner. */\n  fillEnabled?: boolean;\n  className: string;\n  style?: React.CSSProperties;\n  children: React.ReactNode;\n}\n\n/**\n * The `<td>` of a data row. Outside a spreadsheet-enabled table it renders exactly\n * what it always did; inside one it also carries the roving tabindex, the grid\n * semantics and its own subscription to the grid state, so moving the active cell\n * re-renders two cells instead of the table.\n */\nconst DataTableBodyCell: React.FC<IDataTableBodyCellProps> = ({\n  rowId,\n  columnId,\n  navigable,\n  fillEnabled = false,\n  className,\n  style,\n  children,\n}) => {\n  const store = useGridStoreApi();\n  const registry = useGridCellRegistry();\n  const cellState = useGridCellState(rowId, columnId);\n\n  const isGridCell = !!store && !!registry && navigable;\n  const cellKey = buildGridCellKey(rowId, columnId);\n\n  const registerCell = useCallback(\n    (element: HTMLTableCellElement | null) => {\n      if (!registry) return;\n      registry.register(cellKey, element);\n    },\n    [registry, cellKey],\n  );\n\n  const handleMouseDown = useCallback(\n    (event: React.MouseEvent<HTMLTableCellElement>) => {\n      store?.getState().setActiveCell({ rowId, columnId }, { extend: event.shiftKey });\n    },\n    [store, rowId, columnId],\n  );\n\n  if (!isGridCell) {\n    return (\n      <td className={className} style={style}>\n        {children}\n      </td>\n    );\n  }\n\n  const isActive = (cellState & GRID_CELL_ACTIVE) !== 0;\n  const isSelected = (cellState & GRID_CELL_SELECTED) !== 0;\n  const isFillPreview = (cellState & GRID_CELL_FILL_PREVIEW) !== 0;\n  const showsFillHandle = fillEnabled && (cellState & GRID_CELL_FILL_HANDLE) !== 0;\n  const isSaving = (cellState & GRID_CELL_SAVING) !== 0;\n  const hasSaveError = (cellState & GRID_CELL_SAVE_ERROR) !== 0;\n\n  return (\n    <td\n      ref={registerCell}\n      role=\"gridcell\"\n      aria-selected={isSelected}\n      tabIndex={isActive || (cellState & GRID_CELL_TABBABLE) !== 0 ? 0 : -1}\n      onMouseDown={handleMouseDown}\n      {...{ [GRID_CELL_DATA_ATTR]: cellKey, [GRID_ROW_DATA_ATTR]: rowId, [GRID_COLUMN_DATA_ATTR]: columnId }}\n      className={classNames(\n        className,\n        'outline-none',\n        // `!` because the frozen first/actions cells paint `bg-inherit`, which is\n        // the same utility group: the state fill has to win regardless of the\n        // order Tailwind emits them in.\n        isSelected && !isActive && '!bg-brand-soft/40',\n        isFillPreview && '!bg-brand-soft/60',\n        (isActive || showsFillHandle) && 'relative',\n        isActive && 'z-20 ring-2 ring-inset ring-brand',\n        isFillPreview && 'ring-1 ring-inset ring-brand-border',\n        isSaving && 'opacity-70',\n        hasSaveError && '!bg-danger-soft ring-1 ring-inset ring-danger-border',\n      )}\n      style={style}\n    >\n      {children}\n      {showsFillHandle && <GridFillHandle />}\n    </td>\n  );\n};\n\nexport default DataTableBodyCell;\n"],"names":[],"mappings":";;;;;;AAsCA,MAAM,oBAAuD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,gBAAA;AACd,QAAM,WAAW,oBAAA;AACjB,QAAM,YAAY,iBAAiB,OAAO,QAAQ;AAElD,QAAM,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,YAAY;AAC5C,QAAM,UAAU,iBAAiB,OAAO,QAAQ;AAEhD,QAAM,eAAe;AAAA,IACnB,CAAC,YAAyC;AACxC,UAAI,CAAC,SAAU;AACf,eAAS,SAAS,SAAS,OAAO;AAAA,IACpC;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EAAA;AAGpB,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAAkD;AACjD,aAAO,SAAA,EAAW,cAAc,EAAE,OAAO,SAAA,GAAY,EAAE,QAAQ,MAAM,UAAU;AAAA,IACjF;AAAA,IACA,CAAC,OAAO,OAAO,QAAQ;AAAA,EAAA;AAGzB,MAAI,CAAC,YAAY;AACf,WACE,oBAAC,MAAA,EAAG,WAAsB,OACvB,SAAA,CACH;AAAA,EAEJ;AAEA,QAAM,YAAY,YAAY,sBAAsB;AACpD,QAAM,cAAc,YAAY,wBAAwB;AACxD,QAAM,iBAAiB,YAAY,4BAA4B;AAC/D,QAAM,kBAAkB,gBAAgB,YAAY,2BAA2B;AAC/E,QAAM,YAAY,YAAY,sBAAsB;AACpD,QAAM,gBAAgB,YAAY,0BAA0B;AAE5D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,UAAU,aAAa,YAAY,wBAAwB,IAAI,IAAI;AAAA,MACnE,aAAa;AAAA,MACZ,GAAG,EAAE,CAAC,mBAAmB,GAAG,SAAS,CAAC,kBAAkB,GAAG,OAAO,CAAC,qBAAqB,GAAG,SAAA;AAAA,MAC5F,WAAW;AAAA,QACT;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,QAIA,cAAc,CAAC,YAAY;AAAA,QAC3B,iBAAiB;AAAA,SAChB,YAAY,oBAAoB;AAAA,QACjC,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,gBAAgB;AAAA,MAAA;AAAA,MAElB;AAAA,MAEC,UAAA;AAAA,QAAA;AAAA,QACA,uCAAoB,gBAAA,CAAA,CAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;"}

package/dist/components/UI/DataTable/DataTableBulkEditButton.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+interface IDataTableBulkEditButtonProps {
+    onClick: () => void;
+}
+/**
+ * Abre a edição em massa. Fica junto do controle de colunas e do modo planilha,
+ * e existe nos dois modos de exibição: nos cards o alcance é o acumulado do
+ * scroll infinito, que é onde a edição célula a célula não alcança.
+ */
+declare const DataTableBulkEditButton: React.FC<IDataTableBulkEditButtonProps>;
+export default DataTableBulkEditButton;

package/dist/components/UI/DataTable/DataTableBulkEditButton.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+const DataTableBulkEditButton = ({ onClick }) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsx(ControlledTooltip, { content: t("dataTable.bulkEdit.hint"), children: /* @__PURE__ */ jsxs(
+    ControlledButton,
+    {
+      defaultHtmlButton: true,
+      onClick,
+      className: "inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border bg-surface p-2.5 text-sm font-medium text-foreground-subtle shadow-sm transition-colors hover:bg-muted-hover hover:text-foreground-muted",
+      children: [
+        /* @__PURE__ */ jsx(MaterialSymbol, { icon: "playlist_add_check", size: 18 }),
+        /* @__PURE__ */ jsx("span", { children: t("dataTable.bulkEdit.open") })
+      ]
+    }
+  ) });
+};
+export {
+  DataTableBulkEditButton as default
+};
+//# sourceMappingURL=DataTableBulkEditButton.js.map

package/dist/components/UI/DataTable/DataTableBulkEditButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableBulkEditButton.js","sources":["../../../../src/components/UI/DataTable/DataTableBulkEditButton.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\ninterface IDataTableBulkEditButtonProps {\n  onClick: () => void;\n}\n\n/**\n * Abre a edição em massa. Fica junto do controle de colunas e do modo planilha,\n * e existe nos dois modos de exibição: nos cards o alcance é o acumulado do\n * scroll infinito, que é onde a edição célula a célula não alcança.\n */\nconst DataTableBulkEditButton: React.FC<IDataTableBulkEditButtonProps> = ({ onClick }) => {\n  const { t } = useTranslation('ui');\n\n  return (\n    <ControlledTooltip content={t('dataTable.bulkEdit.hint')}>\n      <ControlledButton\n        defaultHtmlButton\n        onClick={onClick}\n        className=\"inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border bg-surface p-2.5 text-sm font-medium text-foreground-subtle shadow-sm transition-colors hover:bg-muted-hover hover:text-foreground-muted\"\n      >\n        <MaterialSymbol icon=\"playlist_add_check\" size={18} />\n        <span>{t('dataTable.bulkEdit.open')}</span>\n      </ControlledButton>\n    </ControlledTooltip>\n  );\n};\n\nexport default DataTableBulkEditButton;\n"],"names":[],"mappings":";;;;;AAgBA,MAAM,0BAAmE,CAAC,EAAE,cAAc;AACxF,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,SACE,oBAAC,mBAAA,EAAkB,SAAS,EAAE,yBAAyB,GACrD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAiB;AAAA,MACjB;AAAA,MACA,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,gBAAA,EAAe,MAAK,sBAAqB,MAAM,IAAI;AAAA,QACpD,oBAAC,QAAA,EAAM,UAAA,EAAE,yBAAyB,EAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAExC;AAEJ;"}

package/dist/components/UI/DataTable/DataTableBulkEditDialog.d.ts

@@ -0,0 +1,25 @@
+import { IDataTableColumnConfig, IDataTableFillChange, IDataTableRow } from './types';
+interface IDataTableBulkEditDialogProps<T extends IDataTableRow> {
+    open: boolean;
+    onClose: () => void;
+    /** Todas as colunas da tabela: só as editáveis viram opção de campo. */
+    columns: Array<IDataTableColumnConfig<T>>;
+    /** As linhas carregadas: a página atual na lista, o acumulado do scroll nos cards. */
+    rows: Array<T>;
+    /** Rótulo de cada linha na lista de escolha. Sem ele, a primeira coluna de texto responde. */
+    getRowLabel?: (row: T) => string;
+    /** Ids já escolhidos fora do diálogo: abre no modo "escolher" com eles marcados. */
+    initialTargetIds?: ReadonlyArray<string>;
+    onApply: (changes: Array<IDataTableFillChange<T>>) => void;
+}
+/**
+ * Aplica um valor a um campo em várias linhas de uma vez. É a mesma edição de
+ * célula da planilha, com o alcance escolhido pelo usuário: todas as linhas
+ * carregadas ou um subconjunto marcado na lista.
+ *
+ * O diálogo não persiste nada. Ele devolve as células escritas por `onApply`, que
+ * o host entrega ao `onFillCells` da fila de commit: um render, um flush e uma
+ * requisição em lote, exatamente como o preenchimento por arraste.
+ */
+declare const DataTableBulkEditDialog: <T extends IDataTableRow>({ open, onClose, columns, rows, getRowLabel, initialTargetIds, onApply, }: IDataTableBulkEditDialogProps<T>) => import("react").JSX.Element;
+export default DataTableBulkEditDialog;