@umodeapporg/ui 0.1.0

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

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledDialog from "../../Form/ControlledDialog.js";
+import Colors from "../Colors.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import DataTableStatusCell from "./cells/DataTableStatusCell.js";
+const DataTableDetailModal = ({
+  open,
+  row,
+  config,
+  size = "md",
+  onClose,
+  onEdit,
+  isEditDisabled,
+  onToggleStatus,
+  isActive,
+  canToggleStatus
+}) => {
+  const { t } = useTranslation("ui");
+  useEffect(() => {
+    if (!open) return void 0;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  if (!row) return null;
+  const status = config.status?.(row) ?? null;
+  const color = config.color?.(row) ?? null;
+  const thumbnail = config.thumbnail?.(row) ?? null;
+  const code = config.code?.(row) ?? null;
+  const detailContent = config.content?.(row) ?? null;
+  const hasDetailContent = detailContent !== null && detailContent !== void 0 && detailContent !== false;
+  const rowIsActive = isActive?.(row) ?? false;
+  const hasFooterActions = !!onToggleStatus && !!canToggleStatus?.(row) || !!onEdit;
+  return (
+    // With a `content` block the dialog body must not scroll: the block itself is the only
+    // scroller, so the header, the fields and the actions stay put while the list moves.
+    /* @__PURE__ */ jsx(ControlledDialog, { open, size, title: "", onCancel: onClose, useFooter: false, fitBody: hasDetailContent, children: /* @__PURE__ */ jsxs("div", { className: classNames("flex flex-col gap-4 p-4", hasDetailContent && "max-h-[70vh]"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-start gap-4 pr-8", children: [
+        color?.hex && /* @__PURE__ */ jsx(
+          Colors,
+          {
+            colors: [color.hex],
+            isSquare: true,
+            label: color.label,
+            className: "h-24 min-h-24 w-24 min-w-24 shrink-0 rounded-lg"
+          }
+        ),
+        thumbnail?.src && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: thumbnail.src,
+            alt: thumbnail.label ?? "",
+            className: "h-24 min-h-24 w-24 min-w-24 shrink-0 rounded-lg border border-border object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xl font-semibold leading-tight text-foreground", children: config.title(row) }),
+            status && /* @__PURE__ */ jsx(DataTableStatusCell, { value: status })
+          ] }),
+          code && /* @__PURE__ */ jsx("span", { className: "font-mono text-sm text-foreground-subtle", children: code })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("hr", { className: "shrink-0 border-border-subtle" }),
+      /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap gap-y-4", children: config.fields(row).map((field, index) => /* @__PURE__ */ jsxs("div", { className: "flex basis-1/2 flex-col gap-0.5 pr-4", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase text-foreground-faint", children: field.label }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: field.value })
+      ] }, `${field.label}-${index}`)) }),
+      hasDetailContent && /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto pr-1", children: detailContent }),
+      hasFooterActions && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-end gap-2 border-t border-border-subtle pt-3", children: [
+        onToggleStatus && canToggleStatus?.(row) && /* @__PURE__ */ jsxs(
+          ControlledButton,
+          {
+            variant: "outlined",
+            className: "flex items-center gap-1.5",
+            onClick: () => onToggleStatus(row),
+            children: [
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: rowIsActive ? "visibility_off" : "visibility", size: 16 }),
+              rowIsActive ? t("actions.deactivate") : t("actions.activate")
+            ]
+          }
+        ),
+        onEdit && /* @__PURE__ */ jsxs(
+          ControlledButton,
+          {
+            variant: "filled",
+            className: "flex items-center gap-1.5 bg-brand hover:bg-brand-hover disabled:bg-brand-soft-hover",
+            onClick: () => onEdit(row),
+            disabled: isEditDisabled?.(row),
+            children: [
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: "edit", size: 16, color: "white" }),
+              t("actions.edit")
+            ]
+          }
+        )
+      ] })
+    ] }) })
+  );
+};
+export {
+  DataTableDetailModal as default
+};
+//# sourceMappingURL=DataTableDetailModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableDetailModal.js","sources":["../../../../src/components/UI/DataTable/DataTableDetailModal.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledDialog from '@/components/Form/ControlledDialog';\nimport type { TDialogSize } from '@/components/Form/ControlledDialogPrimitives';\nimport Colors from '@/components/UI/Colors';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\nimport DataTableStatusCell from './cells/DataTableStatusCell';\nimport type { IDataTableDetailConfig, IDataTableRow } from './types';\n\ninterface IDataTableDetailModalProps<T extends IDataTableRow> {\n  open: boolean;\n  row: T | null;\n  config: IDataTableDetailConfig<T>;\n  /** Widen the dialog when the detail carries a `content` block. Defaults to the compact `md`. */\n  size?: TDialogSize;\n  onClose: () => void;\n  onEdit?: (row: T) => void;\n  isEditDisabled?: (row: T) => boolean;\n  onToggleStatus?: (row: T) => void;\n  isActive?: (row: T) => boolean;\n  canToggleStatus?: (row: T) => boolean;\n}\n\nconst DataTableDetailModal = <T extends IDataTableRow>({\n  open,\n  row,\n  config,\n  size = 'md',\n  onClose,\n  onEdit,\n  isEditDisabled,\n  onToggleStatus,\n  isActive,\n  canToggleStatus,\n}: IDataTableDetailModalProps<T>) => {\n  const { t } = useTranslation('ui');\n\n  useEffect(() => {\n    if (!open) return undefined;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') onClose();\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [open, onClose]);\n\n  if (!row) return null;\n\n  const status = config.status?.(row) ?? null;\n  const color = config.color?.(row) ?? null;\n  const thumbnail = config.thumbnail?.(row) ?? null;\n  const code = config.code?.(row) ?? null;\n  const detailContent = config.content?.(row) ?? null;\n  const hasDetailContent = detailContent !== null && detailContent !== undefined && detailContent !== false;\n  const rowIsActive = isActive?.(row) ?? false;\n  const hasFooterActions = (!!onToggleStatus && !!canToggleStatus?.(row)) || !!onEdit;\n\n  return (\n    // With a `content` block the dialog body must not scroll: the block itself is the only\n    // scroller, so the header, the fields and the actions stay put while the list moves.\n    <ControlledDialog open={open} size={size} title=\"\" onCancel={onClose} useFooter={false} fitBody={hasDetailContent}>\n      <div className={classNames('flex flex-col gap-4 p-4', hasDetailContent && 'max-h-[70vh]')}>\n        <div className=\"flex shrink-0 items-start gap-4 pr-8\">\n          {color?.hex && (\n            <Colors\n              colors={[color.hex]}\n              isSquare\n              label={color.label}\n              className=\"h-24 min-h-24 w-24 min-w-24 shrink-0 rounded-lg\"\n            />\n          )}\n\n          {thumbnail?.src && (\n            <img\n              src={thumbnail.src}\n              alt={thumbnail.label ?? ''}\n              className=\"h-24 min-h-24 w-24 min-w-24 shrink-0 rounded-lg border border-border object-cover\"\n            />\n          )}\n\n          <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n            <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n              <span className=\"text-xl font-semibold leading-tight text-foreground\">{config.title(row)}</span>\n              {status && <DataTableStatusCell value={status} />}\n            </div>\n            {code && <span className=\"font-mono text-sm text-foreground-subtle\">{code}</span>}\n          </div>\n        </div>\n\n        <hr className=\"shrink-0 border-border-subtle\" />\n\n        <div className=\"flex shrink-0 flex-wrap gap-y-4\">\n          {config.fields(row).map((field, index) => (\n            <div key={`${field.label}-${index}`} className=\"flex basis-1/2 flex-col gap-0.5 pr-4\">\n              <span className=\"text-xxs font-semibold uppercase text-foreground-faint\">{field.label}</span>\n              <span className=\"text-sm text-foreground\">{field.value}</span>\n            </div>\n          ))}\n        </div>\n\n        {hasDetailContent && <div className=\"flex min-h-0 flex-1 flex-col overflow-y-auto pr-1\">{detailContent}</div>}\n\n        {hasFooterActions && (\n          <div className=\"flex shrink-0 items-center justify-end gap-2 border-t border-border-subtle pt-3\">\n            {onToggleStatus && canToggleStatus?.(row) && (\n              <ControlledButton\n                variant=\"outlined\"\n                className=\"flex items-center gap-1.5\"\n                onClick={() => onToggleStatus(row)}\n              >\n                <MaterialSymbol icon={rowIsActive ? 'visibility_off' : 'visibility'} size={16} />\n                {rowIsActive ? t('actions.deactivate') : t('actions.activate')}\n              </ControlledButton>\n            )}\n\n            {onEdit && (\n              <ControlledButton\n                variant=\"filled\"\n                className=\"flex items-center gap-1.5 bg-brand hover:bg-brand-hover disabled:bg-brand-soft-hover\"\n                onClick={() => onEdit(row)}\n                disabled={isEditDisabled?.(row)}\n              >\n                <MaterialSymbol icon=\"edit\" size={16} color=\"white\" />\n                {t('actions.edit')}\n              </ControlledButton>\n            )}\n          </div>\n        )}\n      </div>\n    </ControlledDialog>\n  );\n};\n\nexport default DataTableDetailModal;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+import { IDataTableDetailColumnsState } from './DataTableDetailTable';
+import { IDataTableColumnConfig, IDataTableRow } from './types';
+interface IDataTableDetailPanelProps<C extends IDataTableRow> {
+    columns: Array<IDataTableColumnConfig<C>>;
+    rows: Array<C>;
+    loading?: boolean;
+    onRowClick?: (row: C) => void;
+    rowIsDimmed?: (row: C) => boolean;
+    emptyMessage?: string;
+    columnsState?: IDataTableDetailColumnsState;
+    /** Scrollport clientWidth: pins the panel to the visible area (sticky left). */
+    slotWidth?: number;
+}
+/**
+ * Inset, visually-distinct nested panel for a `detailTable` expansion (AG-Grid
+ * style). Owns the card's own scroll context and detects its horizontal
+ * overflow so the nested table can show the frozen-column shadow only while the
+ * card actually scrolls sideways (no always-on divider line otherwise).
+ */
+declare const DataTableDetailPanel: <C extends IDataTableRow>({ columns, rows, loading, onRowClick, rowIsDimmed, emptyMessage, columnsState, slotWidth, }: IDataTableDetailPanelProps<C>) => import("react").JSX.Element;
+export default DataTableDetailPanel;

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

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import LoadingSpinner from "../LoadingSpinner.js";
+import DataTableDetailTable from "./DataTableDetailTable.js";
+const DataTableDetailPanel = ({
+  columns,
+  rows,
+  loading = false,
+  onRowClick,
+  rowIsDimmed,
+  emptyMessage,
+  columnsState,
+  slotWidth
+}) => {
+  const scrollRef = useRef(null);
+  const [hasHorizontalOverflow, setHasHorizontalOverflow] = useState(false);
+  useEffect(() => {
+    const scroller = scrollRef.current;
+    if (!scroller) return void 0;
+    const updateOverflow = () => setHasHorizontalOverflow(scroller.scrollWidth > scroller.clientWidth + 1);
+    updateOverflow();
+    const observer = new ResizeObserver(updateOverflow);
+    observer.observe(scroller);
+    const nestedTable = scroller.querySelector("table");
+    if (nestedTable) observer.observe(nestedTable);
+    return () => observer.disconnect();
+  }, [loading, rows.length, columns.length]);
+  return /* @__PURE__ */ jsx("div", { className: "sticky left-0", style: slotWidth ? { width: slotWidth } : void 0, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scrollRef,
+      className: "mx-3 my-2 max-h-[26rem] overflow-auto rounded-lg border border-border bg-surface [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border-emphasis hover:[&::-webkit-scrollbar-thumb]:bg-foreground-faint [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar]:w-2.5",
+      children: loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 5, color: "foreground-faint" }) }) : /* @__PURE__ */ jsx(
+        DataTableDetailTable,
+        {
+          columns,
+          rows,
+          onRowClick,
+          rowIsDimmed,
+          emptyMessage,
+          columnsState,
+          showFrozenShadow: hasHorizontalOverflow
+        }
+      )
+    }
+  ) });
+};
+export {
+  DataTableDetailPanel as default
+};
+//# sourceMappingURL=DataTableDetailPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableDetailPanel.js","sources":["../../../../src/components/UI/DataTable/DataTableDetailPanel.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\n\nimport DataTableDetailTable, { type IDataTableDetailColumnsState } from './DataTableDetailTable';\nimport type { IDataTableColumnConfig, IDataTableRow } from './types';\n\ninterface IDataTableDetailPanelProps<C extends IDataTableRow> {\n  columns: Array<IDataTableColumnConfig<C>>;\n  rows: Array<C>;\n  loading?: boolean;\n  onRowClick?: (row: C) => void;\n  rowIsDimmed?: (row: C) => boolean;\n  emptyMessage?: string;\n  columnsState?: IDataTableDetailColumnsState;\n  /** Scrollport clientWidth: pins the panel to the visible area (sticky left). */\n  slotWidth?: number;\n}\n\n/**\n * Inset, visually-distinct nested panel for a `detailTable` expansion (AG-Grid\n * style). Owns the card's own scroll context and detects its horizontal\n * overflow so the nested table can show the frozen-column shadow only while the\n * card actually scrolls sideways (no always-on divider line otherwise).\n */\nconst DataTableDetailPanel = <C extends IDataTableRow>({\n  columns,\n  rows,\n  loading = false,\n  onRowClick,\n  rowIsDimmed,\n  emptyMessage,\n  columnsState,\n  slotWidth,\n}: IDataTableDetailPanelProps<C>) => {\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n  const [hasHorizontalOverflow, setHasHorizontalOverflow] = useState(false);\n\n  useEffect(() => {\n    const scroller = scrollRef.current;\n    if (!scroller) return undefined;\n\n    const updateOverflow = () => setHasHorizontalOverflow(scroller.scrollWidth > scroller.clientWidth + 1);\n    updateOverflow();\n\n    const observer = new ResizeObserver(updateOverflow);\n    observer.observe(scroller);\n    const nestedTable = scroller.querySelector('table');\n    if (nestedTable) observer.observe(nestedTable);\n\n    return () => observer.disconnect();\n  }, [loading, rows.length, columns.length]);\n\n  return (\n    <div className=\"sticky left-0\" style={slotWidth ? { width: slotWidth } : undefined}>\n      <div\n        ref={scrollRef}\n        className=\"mx-3 my-2 max-h-[26rem] overflow-auto rounded-lg border border-border bg-surface [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border-emphasis hover:[&::-webkit-scrollbar-thumb]:bg-foreground-faint [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar]:w-2.5\"\n      >\n        {loading ? (\n          <div className=\"flex items-center justify-center py-4\">\n            <LoadingSpinner size={5} color=\"foreground-faint\" />\n          </div>\n        ) : (\n          <DataTableDetailTable\n            columns={columns}\n            rows={rows}\n            onRowClick={onRowClick}\n            rowIsDimmed={rowIsDimmed}\n            emptyMessage={emptyMessage}\n            columnsState={columnsState}\n            showFrozenShadow={hasHorizontalOverflow}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default DataTableDetailPanel;\n"],"names":[],"mappings":";;;;AAyBA,MAAM,uBAAuB,CAA0B;AAAA,EACrD;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,YAAY,OAA8B,IAAI;AACpD,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,KAAK;AAExE,YAAU,MAAM;AACd,UAAM,WAAW,UAAU;AAC3B,QAAI,CAAC,SAAU,QAAO;AAEtB,UAAM,iBAAiB,MAAM,yBAAyB,SAAS,cAAc,SAAS,cAAc,CAAC;AACrG,mBAAA;AAEA,UAAM,WAAW,IAAI,eAAe,cAAc;AAClD,aAAS,QAAQ,QAAQ;AACzB,UAAM,cAAc,SAAS,cAAc,OAAO;AAClD,QAAI,YAAa,UAAS,QAAQ,WAAW;AAE7C,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,SAAS,KAAK,QAAQ,QAAQ,MAAM,CAAC;AAEzC,SACE,oBAAC,OAAA,EAAI,WAAU,iBAAgB,OAAO,YAAY,EAAE,OAAO,UAAA,IAAc,QACvE,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MAET,UAAA,UACC,oBAAC,OAAA,EAAI,WAAU,yCACb,UAAA,oBAAC,gBAAA,EAAe,MAAM,GAAG,OAAM,mBAAA,CAAmB,EAAA,CACpD,IAEA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,kBAAkB;AAAA,QAAA;AAAA,MAAA;AAAA,IACpB;AAAA,EAAA,GAGN;AAEJ;"}

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

@@ -0,0 +1,35 @@
+import { Updater, VisibilityState } from '@tanstack/react-table';
+import { IDataTableColumnConfig, IDataTableRow } from './types';
+/**
+ * Column preferences of the nested detail table, owned by the DataTable (one
+ * shared state for every expanded row) and persisted under `${entityKey}:detail`.
+ */
+export interface IDataTableDetailColumnsState {
+    visibility: VisibilityState;
+    toggleVisibility: (columnId: string) => void;
+    order: Array<string>;
+    onOrderChange: (updater: Updater<Array<string>>) => void;
+    resetOrder: () => void;
+}
+interface IDataTableDetailTableProps<C extends IDataTableRow> {
+    columns: Array<IDataTableColumnConfig<C>>;
+    rows: Array<C>;
+    onRowClick?: (row: C) => void;
+    rowIsDimmed?: (row: C) => boolean;
+    emptyMessage?: string;
+    columnsState?: IDataTableDetailColumnsState;
+    /** Show the frozen actions column shadow (set while the card scrolls sideways). */
+    showFrozenShadow?: boolean;
+}
+/**
+ * Nested table rendered inside the detail panel card of a `detailTable`
+ * expansion (see DataTableBody for the inset/tinted card that makes it read as
+ * content belonging to the parent row). The card is its own scroll context:
+ * the header pins at the card top, the first column freezes left and the actions
+ * column freezes right, all relative to the card. Reuses the standard cell
+ * renderer catalog and carries its own "Colunas" menu (visibility + drag
+ * reordering, shared with the parent toggle); it has no toolbar, sorting or
+ * pagination.
+ */
+declare const DataTableDetailTable: <C extends IDataTableRow>({ columns: columnsProp, rows: rowsProp, onRowClick, rowIsDimmed, emptyMessage, columnsState, showFrozenShadow, }: IDataTableDetailTableProps<C>) => import("react").JSX.Element;
+export default DataTableDetailTable;

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

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import NoDataFound from "../NoDataFound/index.js";
+import DataTableActionsCell from "./cells/DataTableActionsCell.js";
+import DataTableCell from "./cells/DataTableCell.js";
+import { alignClass, resolveColumnWidthClass, FROZEN_COLUMN_SHADOW } from "./dataTableClasses.js";
+import { DataTableColumnMenu } from "./DataTableColumnToggle.js";
+import { isBadgeColumnType } from "./dataTableColumnWidths.js";
+const DataTableDetailTable = ({
+  columns: columnsProp,
+  rows: rowsProp,
+  onRowClick,
+  rowIsDimmed,
+  emptyMessage,
+  columnsState,
+  showFrozenShadow = false
+}) => {
+  const { t } = useTranslation("ui");
+  const columns = useMemo(() => Array.isArray(columnsProp) ? columnsProp : [], [columnsProp]);
+  const rows = useMemo(() => Array.isArray(rowsProp) ? rowsProp : [], [rowsProp]);
+  const columnOrder = columnsState?.order;
+  const columnVisibility = columnsState?.visibility;
+  const orderedColumns = useMemo(() => {
+    if (!columnOrder?.length) return columns;
+    const columnById = new Map(columns.map((column) => [column.id, column]));
+    const ordered = columnOrder.map((columnId) => columnById.get(columnId)).filter((column) => !!column);
+    const orderedIds = new Set(ordered.map((column) => column.id));
+    for (const column of columns) if (!orderedIds.has(column.id)) ordered.push(column);
+    return ordered;
+  }, [columns, columnOrder]);
+  const visibleColumns = useMemo(
+    () => orderedColumns.filter((column) => {
+      if (column.hideable === false) return true;
+      if (columnVisibility) return columnVisibility[column.id] !== false;
+      return !column.defaultHidden;
+    }),
+    [orderedColumns, columnVisibility]
+  );
+  const flexColumnId = useMemo(() => {
+    const candidates = visibleColumns.filter(
+      (column, index) => index > 0 && column.type !== "actions" && !isBadgeColumnType(column.type)
+    );
+    return candidates[candidates.length - 1]?.id ?? null;
+  }, [visibleColumns]);
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(NoDataFound, { compact: true, message: emptyMessage ?? t("dataTable.empty") }) });
+  }
+  const lastColumnIndex = visibleColumns.length - 1;
+  const isActionsColumn = (column, index) => index === lastColumnIndex && column.type === "actions";
+  return /* @__PURE__ */ jsxs("table", { className: "w-full table-auto border-separate border-spacing-0", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "bg-muted", children: visibleColumns.map((column, columnIndex) => {
+      const isFirstColumn = columnIndex === 0;
+      const isActions = isActionsColumn(column, columnIndex);
+      return /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: classNames(
+            // Header band pinned to the top of the enclosing card (the
+            // card provides the border and rounded corners, so no per-cell
+            // rounding here). z tiers are local to the card's own scroll
+            // context: header above rows, frozen first/actions header
+            // cells above the scrolling header cells.
+            "sticky top-0 z-20 whitespace-nowrap border-b border-border bg-muted px-4 py-2.5 text-xxs font-semibold uppercase tracking-wide text-foreground-subtle",
+            alignClass(column.headerAlign ?? column.cellAlign),
+            resolveColumnWidthClass(column, "", { isFlexColumn: column.id === flexColumnId }),
+            isFirstColumn && "left-0 z-30",
+            isActions && "right-0 z-30",
+            isActions && showFrozenShadow && FROZEN_COLUMN_SHADOW
+          ),
+          children: isFirstColumn ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { children: column.header }),
+            columnsState && /* @__PURE__ */ jsx(
+              DataTableColumnMenu,
+              {
+                columns,
+                columnOrder: columnsState.order,
+                onColumnOrderChange: columnsState.onOrderChange,
+                resetColumnOrder: columnsState.resetOrder,
+                isColumnVisible: (columnId) => columnsState.visibility[columnId] !== false,
+                onToggleColumnVisibility: columnsState.toggleVisibility
+              }
+            )
+          ] }) : column.header
+        },
+        column.id
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx("tbody", { className: "[&_tr:last-child_td]:border-b-0", children: rows.map((row) => {
+      const isDimmed = rowIsDimmed?.(row) ?? false;
+      return /* @__PURE__ */ jsx(
+        "tr",
+        {
+          onClick: () => onRowClick?.(row),
+          className: classNames("bg-surface transition-colors", {
+            "cursor-pointer hover:bg-muted": !!onRowClick
+          }),
+          children: visibleColumns.map((column, columnIndex) => {
+            const isFirstColumn = columnIndex === 0;
+            const isActions = isActionsColumn(column, columnIndex);
+            const cellContent = column.type === "actions" && column.actions ? /* @__PURE__ */ jsx(DataTableActionsCell, { row, actions: column.actions }) : /* @__PURE__ */ jsx(DataTableCell, { column, row });
+            return /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: classNames(
+                  "border-b border-border bg-inherit px-4 py-2 align-middle",
+                  alignClass(column.cellAlign),
+                  resolveColumnWidthClass(column, "", { isFlexColumn: column.id === flexColumnId }),
+                  { "opacity-60": isDimmed && column.type !== "actions" },
+                  isFirstColumn && "sticky left-0 z-10",
+                  isActions && "sticky right-0 z-10",
+                  isActions && showFrozenShadow && FROZEN_COLUMN_SHADOW
+                ),
+                children: isFirstColumn ? /* @__PURE__ */ jsx("div", { className: "min-w-0", children: cellContent }) : cellContent
+              },
+              column.id
+            );
+          })
+        },
+        row.id
+      );
+    }) })
+  ] });
+};
+export {
+  DataTableDetailTable as default
+};
+//# sourceMappingURL=DataTableDetailTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableDetailTable.js","sources":["../../../../src/components/UI/DataTable/DataTableDetailTable.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Updater, VisibilityState } from '@tanstack/react-table';\n\nimport NoDataFound from '../NoDataFound';\n\nimport DataTableActionsCell from './cells/DataTableActionsCell';\nimport DataTableCell from './cells/DataTableCell';\nimport { alignClass, FROZEN_COLUMN_SHADOW, isBadgeColumnType, resolveColumnWidthClass } from './dataTableClasses';\nimport { DataTableColumnMenu } from './DataTableColumnToggle';\nimport type { IDataTableColumnConfig, IDataTableRow } from './types';\n\n/**\n * Column preferences of the nested detail table, owned by the DataTable (one\n * shared state for every expanded row) and persisted under `${entityKey}:detail`.\n */\nexport interface IDataTableDetailColumnsState {\n  visibility: VisibilityState;\n  toggleVisibility: (columnId: string) => void;\n  order: Array<string>;\n  onOrderChange: (updater: Updater<Array<string>>) => void;\n  resetOrder: () => void;\n}\n\ninterface IDataTableDetailTableProps<C extends IDataTableRow> {\n  columns: Array<IDataTableColumnConfig<C>>;\n  rows: Array<C>;\n  onRowClick?: (row: C) => void;\n  rowIsDimmed?: (row: C) => boolean;\n  emptyMessage?: string;\n  columnsState?: IDataTableDetailColumnsState;\n  /** Show the frozen actions column shadow (set while the card scrolls sideways). */\n  showFrozenShadow?: boolean;\n}\n\n/**\n * Nested table rendered inside the detail panel card of a `detailTable`\n * expansion (see DataTableBody for the inset/tinted card that makes it read as\n * content belonging to the parent row). The card is its own scroll context:\n * the header pins at the card top, the first column freezes left and the actions\n * column freezes right, all relative to the card. Reuses the standard cell\n * renderer catalog and carries its own \"Colunas\" menu (visibility + drag\n * reordering, shared with the parent toggle); it has no toolbar, sorting or\n * pagination.\n */\nconst DataTableDetailTable = <C extends IDataTableRow>({\n  columns: columnsProp,\n  rows: rowsProp,\n  onRowClick,\n  rowIsDimmed,\n  emptyMessage,\n  columnsState,\n  showFrozenShadow = false,\n}: IDataTableDetailTableProps<C>) => {\n  const { t } = useTranslation('ui');\n\n  const columns = useMemo(() => (Array.isArray(columnsProp) ? columnsProp : []), [columnsProp]);\n  const rows = useMemo(() => (Array.isArray(rowsProp) ? rowsProp : []), [rowsProp]);\n\n  const columnOrder = columnsState?.order;\n  const columnVisibility = columnsState?.visibility;\n\n  // Config columns re-sequenced by the persisted order; ids missing from the\n  // order (defensive) are appended in config order.\n  const orderedColumns = useMemo(() => {\n    if (!columnOrder?.length) return columns;\n\n    const columnById = new Map(columns.map((column) => [column.id, column]));\n    const ordered = columnOrder\n      .map((columnId) => columnById.get(columnId))\n      .filter((column): column is IDataTableColumnConfig<C> => !!column);\n\n    const orderedIds = new Set(ordered.map((column) => column.id));\n    for (const column of columns) if (!orderedIds.has(column.id)) ordered.push(column);\n\n    return ordered;\n  }, [columns, columnOrder]);\n\n  const visibleColumns = useMemo(\n    () =>\n      orderedColumns.filter((column) => {\n        if (column.hideable === false) return true;\n        if (columnVisibility) return columnVisibility[column.id] !== false;\n        return !column.defaultHidden;\n      }),\n    [orderedColumns, columnVisibility],\n  );\n\n  // Under table-auto layout, width classes are only minimum hints: leftover\n  // width spreads across every column, including actions, which would render it\n  // wider than the parent's. One data column must absorb all slack (w-full) so\n  // the actions column keeps its intrinsic width. When no visible column\n  // declares w-full (e.g. the configured absorber was hidden), fall back to the\n  // last non-actions column that is not the sticky first one.\n  const flexColumnId = useMemo(() => {\n    const candidates = visibleColumns.filter(\n      (column, index) => index > 0 && column.type !== 'actions' && !isBadgeColumnType(column.type),\n    );\n    return candidates[candidates.length - 1]?.id ?? null;\n  }, [visibleColumns]);\n\n  if (rows.length === 0) {\n    return (\n      <div className=\"px-4 py-3\">\n        <NoDataFound compact message={emptyMessage ?? t('dataTable.empty')} />\n      </div>\n    );\n  }\n\n  const lastColumnIndex = visibleColumns.length - 1;\n  const isActionsColumn = (column: IDataTableColumnConfig<C>, index: number) =>\n    index === lastColumnIndex && column.type === 'actions';\n\n  return (\n    <table className=\"w-full table-auto border-separate border-spacing-0\">\n      <thead>\n        <tr className=\"bg-muted\">\n          {visibleColumns.map((column, columnIndex) => {\n            const isFirstColumn = columnIndex === 0;\n            const isActions = isActionsColumn(column, columnIndex);\n\n            return (\n              <th\n                key={column.id}\n                className={classNames(\n                  // Header band pinned to the top of the enclosing card (the\n                  // card provides the border and rounded corners, so no per-cell\n                  // rounding here). z tiers are local to the card's own scroll\n                  // context: header above rows, frozen first/actions header\n                  // cells above the scrolling header cells.\n                  'sticky top-0 z-20 whitespace-nowrap border-b border-border bg-muted px-4 py-2.5 text-xxs font-semibold uppercase tracking-wide text-foreground-subtle',\n                  alignClass(column.headerAlign ?? column.cellAlign),\n                  resolveColumnWidthClass(column, '', { isFlexColumn: column.id === flexColumnId }),\n                  isFirstColumn && 'left-0 z-30',\n                  isActions && 'right-0 z-30',\n                  isActions && showFrozenShadow && FROZEN_COLUMN_SHADOW,\n                )}\n              >\n                {isFirstColumn ? (\n                  <div className=\"flex min-w-0 items-center justify-between gap-2\">\n                    <span>{column.header}</span>\n                    {columnsState && (\n                      <DataTableColumnMenu\n                        columns={columns}\n                        columnOrder={columnsState.order}\n                        onColumnOrderChange={columnsState.onOrderChange}\n                        resetColumnOrder={columnsState.resetOrder}\n                        isColumnVisible={(columnId) => columnsState.visibility[columnId] !== false}\n                        onToggleColumnVisibility={columnsState.toggleVisibility}\n                      />\n                    )}\n                  </div>\n                ) : (\n                  column.header\n                )}\n              </th>\n            );\n          })}\n        </tr>\n      </thead>\n\n      <tbody className=\"[&_tr:last-child_td]:border-b-0\">\n        {rows.map((row) => {\n          const isDimmed = rowIsDimmed?.(row) ?? false;\n\n          return (\n            <tr\n              key={row.id}\n              onClick={() => onRowClick?.(row)}\n              className={classNames('bg-surface transition-colors', {\n                'cursor-pointer hover:bg-muted': !!onRowClick,\n              })}\n            >\n              {visibleColumns.map((column, columnIndex) => {\n                const isFirstColumn = columnIndex === 0;\n                const isActions = isActionsColumn(column, columnIndex);\n\n                const cellContent =\n                  column.type === 'actions' && column.actions ? (\n                    <DataTableActionsCell row={row} actions={column.actions} />\n                  ) : (\n                    <DataTableCell column={column} row={row} />\n                  );\n\n                return (\n                  <td\n                    key={column.id}\n                    className={classNames(\n                      'border-b border-border bg-inherit px-4 py-2 align-middle',\n                      alignClass(column.cellAlign),\n                      resolveColumnWidthClass(column, '', { isFlexColumn: column.id === flexColumnId }),\n                      { 'opacity-60': isDimmed && column.type !== 'actions' },\n                      isFirstColumn && 'sticky left-0 z-10',\n                      isActions && 'sticky right-0 z-10',\n                      isActions && showFrozenShadow && FROZEN_COLUMN_SHADOW,\n                    )}\n                  >\n                    {isFirstColumn ? <div className=\"min-w-0\">{cellContent}</div> : cellContent}\n                  </td>\n                );\n              })}\n            </tr>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nexport default DataTableDetailTable;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface IDataTableEditModeButtonProps {
+    active: boolean;
+    onToggle: () => void;
+}
+/**
+ * Liga e desliga a edição em célula. Fica junto do controle de colunas, no rodapé
+ * da tabela: o modo pertence à tabela, não ao cabeçalho da página, e enquanto ele
+ * está ativo o clique na linha deixa de abrir o registro.
+ */
+declare const DataTableEditModeButton: React.FC<IDataTableEditModeButtonProps>;
+export default DataTableEditModeButton;

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

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+const DataTableEditModeButton = ({ active, onToggle }) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsx(ControlledTooltip, { content: active ? t("dataTable.editMode.activeHint") : t("dataTable.editMode.inactiveHint"), children: /* @__PURE__ */ jsxs(
+    ControlledButton,
+    {
+      defaultHtmlButton: true,
+      onClick: onToggle,
+      "aria-pressed": active,
+      className: classNames(
+        "inline-flex shrink-0 items-center gap-1.5 rounded-lg border p-2.5 text-sm font-medium shadow-sm transition-colors",
+        active ? "border-brand-border bg-brand text-brand-fg hover:bg-brand-hover" : "border-border bg-surface text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(MaterialSymbol, { icon: active ? "edit_off" : "edit", size: 18 }),
+        /* @__PURE__ */ jsx("span", { children: active ? t("dataTable.editMode.exit") : t("dataTable.editMode.enter") })
+      ]
+    }
+  ) });
+};
+export {
+  DataTableEditModeButton as default
+};
+//# sourceMappingURL=DataTableEditModeButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableEditModeButton.js","sources":["../../../../src/components/UI/DataTable/DataTableEditModeButton.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\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 IDataTableEditModeButtonProps {\n  active: boolean;\n  onToggle: () => void;\n}\n\n/**\n * Liga e desliga a edição em célula. Fica junto do controle de colunas, no rodapé\n * da tabela: o modo pertence à tabela, não ao cabeçalho da página, e enquanto ele\n * está ativo o clique na linha deixa de abrir o registro.\n */\nconst DataTableEditModeButton: React.FC<IDataTableEditModeButtonProps> = ({ active, onToggle }) => {\n  const { t } = useTranslation('ui');\n\n  return (\n    <ControlledTooltip content={active ? t('dataTable.editMode.activeHint') : t('dataTable.editMode.inactiveHint')}>\n      <ControlledButton\n        defaultHtmlButton\n        onClick={onToggle}\n        aria-pressed={active}\n        className={classNames(\n          'inline-flex shrink-0 items-center gap-1.5 rounded-lg border p-2.5 text-sm font-medium shadow-sm transition-colors',\n          active\n            ? 'border-brand-border bg-brand text-brand-fg hover:bg-brand-hover'\n            : 'border-border bg-surface text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted',\n        )}\n      >\n        <MaterialSymbol icon={active ? 'edit_off' : 'edit'} size={18} />\n        <span>{active ? t('dataTable.editMode.exit') : t('dataTable.editMode.enter')}</span>\n      </ControlledButton>\n    </ControlledTooltip>\n  );\n};\n\nexport default DataTableEditModeButton;\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,0BAAmE,CAAC,EAAE,QAAQ,eAAe;AACjG,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,SACE,oBAAC,qBAAkB,SAAS,SAAS,EAAE,+BAA+B,IAAI,EAAE,iCAAiC,GAC3G,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,gBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,SACI,oEACA;AAAA,MAAA;AAAA,MAGN,UAAA;AAAA,QAAA,oBAAC,kBAAe,MAAM,SAAS,aAAa,QAAQ,MAAM,IAAI;AAAA,QAC9D,oBAAC,UAAM,UAAA,SAAS,EAAE,yBAAyB,IAAI,EAAE,0BAA0B,EAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEjF;AAEJ;"}

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

@@ -0,0 +1,20 @@
+import { TFiltersSize, TFiltersVariant } from '../../Search/filters';
+import { IDataTableFiltersConfig, IDataTableRow, TDataTableFilterValues } from './types';
+interface IDataTableFiltersProps<T extends IDataTableRow> {
+    filters: IDataTableFiltersConfig<T>;
+    values: TDataTableFilterValues;
+    onChange: (values: TDataTableFilterValues) => void;
+    disabled?: boolean;
+    variant?: TFiltersVariant;
+    size?: TFiltersSize;
+    /** Persists the applied values in the URL under `f.<urlKey>.<fieldKey>`. */
+    urlKey?: string;
+    onFirstOpen?: () => void;
+}
+/**
+ * Adapter between a table config and the shared filter panel. The panel owns
+ * the draft, the dirty state, the badge count and the discard guard, so this
+ * file no longer mirrors state in a ref to survive the commit ordering.
+ */
+declare const DataTableFilters: <T extends IDataTableRow>({ filters, values, onChange, disabled, variant, size, urlKey, onFirstOpen, }: IDataTableFiltersProps<T>) => import("react").JSX.Element;
+export default DataTableFilters;

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

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import "classnames";
+import "react-i18next";
+import "../../Form/ControlledButton.js";
+import "tailwind-merge";
+import "../ControlledMenu.js";
+import "motion/react";
+import "react-dom";
+import "@floating-ui/dom";
+import "../../../motion/motionPresets.js";
+import "../../../motion/motionTokens.js";
+import "../MaterialSymbol/index.js";
+import "date-fns";
+import "date-fns/locale";
+import "react-day-picker";
+import "../ControlledPopover.js";
+import "react-day-picker/style.css";
+import "../../DateTime/DateRangePicker.js";
+import "react-infinite-scroll-component";
+import "react-window";
+import "../NoDataFound/index.js";
+/* empty css                                    */
+import "../../Search/filters/FiltersButton.js";
+import "../../../helpers/utilityHelpers.js";
+import FiltersPanel from "../../Search/filters/FiltersPanel.js";
+import "react-router-dom";
+const DataTableFilters = ({
+  filters,
+  values,
+  onChange,
+  disabled,
+  variant,
+  size,
+  urlKey,
+  onFirstOpen
+}) => {
+  const schema = useMemo(
+    () => ({
+      title: filters?.title,
+      subtitle: filters?.subtitle,
+      groups: filters?.groups,
+      fields: filters?.fields ?? []
+    }),
+    [filters]
+  );
+  return /* @__PURE__ */ jsx(
+    FiltersPanel,
+    {
+      schema,
+      values,
+      onChange,
+      disabled,
+      variant,
+      size,
+      urlKey,
+      onFirstOpen
+    }
+  );
+};
+export {
+  DataTableFilters as default
+};
+//# sourceMappingURL=DataTableFilters.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableFilters.js","sources":["../../../../src/components/UI/DataTable/DataTableFilters.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { FiltersPanel, IFiltersSchema, TFiltersSize, TFiltersVariant } from '@/components/Search/filters';\n\nimport type { IDataTableFiltersConfig, IDataTableRow, TDataTableFilterValues } from './types';\n\ninterface IDataTableFiltersProps<T extends IDataTableRow> {\n  filters: IDataTableFiltersConfig<T>;\n  values: TDataTableFilterValues;\n  onChange: (values: TDataTableFilterValues) => void;\n  disabled?: boolean;\n  variant?: TFiltersVariant;\n  size?: TFiltersSize;\n  /** Persists the applied values in the URL under `f.<urlKey>.<fieldKey>`. */\n  urlKey?: string;\n  onFirstOpen?: () => void;\n}\n\n/**\n * Adapter between a table config and the shared filter panel. The panel owns\n * the draft, the dirty state, the badge count and the discard guard, so this\n * file no longer mirrors state in a ref to survive the commit ordering.\n */\nconst DataTableFilters = <T extends IDataTableRow>({\n  filters,\n  values,\n  onChange,\n  disabled,\n  variant,\n  size,\n  urlKey,\n  onFirstOpen,\n}: IDataTableFiltersProps<T>) => {\n  const schema = useMemo<IFiltersSchema>(\n    () => ({\n      title: filters?.title,\n      subtitle: filters?.subtitle,\n      groups: filters?.groups,\n      fields: filters?.fields ?? [],\n    }),\n    [filters],\n  );\n\n  return (\n    <FiltersPanel\n      schema={schema}\n      values={values}\n      onChange={onChange}\n      disabled={disabled}\n      variant={variant}\n      size={size}\n      urlKey={urlKey}\n      onFirstOpen={onFirstOpen}\n    />\n  );\n};\n\nexport default DataTableFilters;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,mBAAmB,CAA0B;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiC;AAC/B,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,OAAO,SAAS;AAAA,MAChB,UAAU,SAAS;AAAA,MACnB,QAAQ,SAAS;AAAA,MACjB,QAAQ,SAAS,UAAU,CAAA;AAAA,IAAC;AAAA,IAE9B,CAAC,OAAO;AAAA,EAAA;AAGV,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,27 @@
+import { Table, Updater } from '@tanstack/react-table';
+import { IDataTableColumnConfig, IDataTableRow } from './types';
+interface IDataTableHeadProps<T extends IDataTableRow> {
+    table: Table<T>;
+    columns: Array<IDataTableColumnConfig<T>>;
+    columnConfigById: Map<string, IDataTableColumnConfig<T>>;
+    /** Row-derived widths for actions/badge columns; other columns fall back to the seed. */
+    columnContentWidths: Map<string, number>;
+    columnOrder: Array<string>;
+    onColumnOrderChange: (updater: Updater<Array<string>>) => void;
+    resetColumnOrder: () => void;
+    resetColumnSizing: () => void;
+    onHeaderSortClick: (columnConfig: IDataTableColumnConfig<T>) => void;
+    resolveSortDirection: (columnConfig: IDataTableColumnConfig<T>) => false | 'asc' | 'desc';
+    /** Omite o toggle de colunas do cabeçalho (quando o host o renderiza no toolbar). */
+    hideColumnToggle?: boolean;
+    /** Column that absorbs leftover horizontal space under table-fixed. */
+    flexColumnId?: string | null;
+    /** Show the frozen actions column shadow (set while the table scrolls sideways). */
+    showActionsShadow?: boolean;
+    /** Denser cell padding for embedded/editor (fit) layouts. */
+    dense?: boolean;
+    /** Roomier cell padding and type scale, for tables that need to read bigger. */
+    spacious?: boolean;
+}
+declare const DataTableHead: <T extends IDataTableRow>({ table, columns, columnConfigById, columnContentWidths, columnOrder, onColumnOrderChange, resetColumnOrder, resetColumnSizing, onHeaderSortClick, resolveSortDirection, hideColumnToggle, flexColumnId, showActionsShadow, dense, spacious, }: IDataTableHeadProps<T>) => import("react").JSX.Element;
+export default DataTableHead;