@umodeapporg/ui 0.0.0-canary.ca10e69

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,65 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import "classnames";
+import "react-i18next";
+import "../../Form/ControlledButton.js";
+import "../ControlledMenu.js";
+import "motion/react";
+import "react-dom";
+import "../../../helpers/mergeClasses.js";
+import "@floating-ui/dom";
+import "../../../motion/motionPresets.js";
+import "../../../motion/motionTokens.js";
+import "../MaterialSymbol/index.js";
+import "../../Form/ControlledSwitch.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 "../../Navigation/UiNavigationContext.js";
+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;

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

@@ -0,0 +1,198 @@
+import { jsxs, Fragment, jsx } 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";
+import { flexRender } from "@tanstack/react-table";
+import { alignClass, FROZEN_LEFT_COLUMN_SHADOW, FROZEN_COLUMN_SHADOW } from "./dataTableClasses.js";
+import DataTableColumnToggle from "./DataTableColumnToggle.js";
+import { resolveColumnMinWidthPx } from "./dataTableColumnWidths.js";
+const DataTableHead = ({
+  table,
+  columns,
+  columnConfigById,
+  columnContentWidths,
+  columnOrder,
+  onColumnOrderChange,
+  resetColumnOrder,
+  resetColumnSizing,
+  onHeaderSortClick,
+  resolveSortDirection,
+  hideColumnToggle = false,
+  flexColumnId = null,
+  showActionsShadow = false,
+  dense = false,
+  spacious = false
+}) => {
+  const { t } = useTranslation("ui");
+  const columnSizing = table.getState().columnSizing;
+  const { isResizingColumn } = table.getState().columnSizingInfo;
+  const renderResizeHandle = (header) => {
+    if (!header.column.getCanResize()) return null;
+    if (header.column.id === flexColumnId && !columnSizing[header.column.id]) return null;
+    const isResizing = isResizingColumn === header.column.id;
+    return /* @__PURE__ */ jsx(ControlledTooltip, { content: t("dataTable.resizeColumn"), children: /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+        onDoubleClick: () => header.column.resetSize(),
+        onClick: (event) => event.stopPropagation(),
+        className: classNames(
+          "absolute right-0 top-0 z-40 h-full w-3 cursor-col-resize touch-none select-none",
+          "before:absolute before:inset-y-1 before:right-0 before:w-0.5 before:rounded-full before:content-['']",
+          isResizing ? "before:bg-brand" : "before:bg-transparent hover:before:bg-brand-hover"
+        ),
+        children: null
+      }
+    ) });
+  };
+  const renderSortIndicator = (columnConfig) => {
+    if (!columnConfig.sortable) return null;
+    const direction = resolveSortDirection(columnConfig);
+    const icon = direction === "desc" ? "arrow_downward" : "arrow_upward";
+    return /* @__PURE__ */ jsx(
+      MaterialSymbol,
+      {
+        icon,
+        size: 14,
+        className: classNames("transition-opacity", {
+          "text-brand-emphasis opacity-100": !!direction,
+          "opacity-30": !direction
+        })
+      }
+    );
+  };
+  const visibleColumns = table.getVisibleLeafColumns();
+  const leafHeaders = table.getHeaderGroups()[0]?.headers ?? [];
+  const headerGroupSegments = leafHeaders.reduce((segments, header, index) => {
+    const label = columnConfigById.get(header.column.id)?.headerGroupLabel ?? null;
+    const lastSegment = segments[segments.length - 1];
+    if (lastSegment && lastSegment.label === label) {
+      lastSegment.headers.push({ header, index });
+      return segments;
+    }
+    segments.push({ label, headers: [{ header, index }] });
+    return segments;
+  }, []);
+  const hasHeaderGroupRow = headerGroupSegments.some((segment) => segment.label !== null);
+  const renderColumnHeaderCell = (header, headerIndex, totalHeaders, placement) => {
+    const columnConfig = columnConfigById.get(header.column.id);
+    const isSortable = !!columnConfig?.sortable;
+    const isFirstColumn = headerIndex === 0;
+    const isLastColumn = headerIndex === totalHeaders - 1;
+    const isStickyLeft = isFirstColumn;
+    const isStickyRight = isLastColumn && columnConfig?.type === "actions";
+    const rawHeaderContent = isSortable ? /* @__PURE__ */ jsxs(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        onClick: () => columnConfig && onHeaderSortClick(columnConfig),
+        className: "inline-flex cursor-pointer items-center gap-1 uppercase hover:text-foreground-muted",
+        children: [
+          flexRender(header.column.columnDef.header, header.getContext()),
+          columnConfig && renderSortIndicator(columnConfig)
+        ]
+      }
+    ) : flexRender(header.column.columnDef.header, header.getContext());
+    const headerContent = columnConfig?.headerTooltip ? /* @__PURE__ */ jsx(ControlledTooltip, { content: columnConfig.headerTooltip, children: /* @__PURE__ */ jsx("span", { className: "inline-flex max-w-full", children: rawHeaderContent }) }) : rawHeaderContent;
+    return /* @__PURE__ */ jsxs(
+      "th",
+      {
+        rowSpan: placement === "spanning" ? 2 : void 0,
+        className: classNames(
+          "sticky z-20 whitespace-nowrap bg-muted font-semibold uppercase tracking-wide text-foreground-subtle",
+          // The leaf row sits below the band row (fixed h-6) and closes the
+          // header's bottom edge; the other placements own both edges.
+          placement === "leaf" ? "top-6 border-b border-border" : "top-0 border-y border-border",
+          // Outer edges come from the column's table position, not the row
+          // position: a banded header splits columns across two rows, so the
+          // `first:`/`last:` pseudo-classes would decorate the wrong cells.
+          isFirstColumn && "border-l",
+          isFirstColumn && (placement === "leaf" ? "rounded-bl-md" : "rounded-l-md"),
+          isLastColumn && "border-r",
+          isLastColumn && (placement === "leaf" ? "rounded-br-md" : "rounded-r-md"),
+          placement === "spanning" && "align-middle",
+          spacious ? "text-xs" : "text-xxs",
+          placement === "leaf" ? dense ? "px-3 py-1" : spacious ? "px-5 py-1.5" : "px-4 py-1" : dense ? "px-3 py-1.5" : spacious ? "px-5 py-3.5" : "px-4 py-2.5",
+          alignClass(columnConfig?.headerAlign ?? columnConfig?.cellAlign),
+          isStickyLeft && "left-0 z-30",
+          isStickyLeft && showActionsShadow && FROZEN_LEFT_COLUMN_SHADOW,
+          isStickyRight && "right-0 z-30",
+          isStickyRight && showActionsShadow && FROZEN_COLUMN_SHADOW
+        ),
+        style: {
+          minWidth: columnContentWidths.get(header.column.id) ?? resolveColumnMinWidthPx(columnConfig, {
+            isFirstColumn,
+            hasColumnToggle: isFirstColumn && !hideColumnToggle
+          })
+        },
+        children: [
+          isFirstColumn && !hideColumnToggle ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            headerContent,
+            /* @__PURE__ */ jsx(
+              DataTableColumnToggle,
+              {
+                table,
+                columns,
+                columnOrder,
+                onColumnOrderChange,
+                resetColumnOrder,
+                resetColumnSizing
+              }
+            )
+          ] }) : headerContent,
+          renderResizeHandle(header)
+        ]
+      },
+      header.id
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("colgroup", { children: visibleColumns.map((leafColumn, columnIndex) => {
+      const colConfig = columnConfigById.get(leafColumn.id);
+      const isFirstColumn = columnIndex === 0;
+      const isFlexColumn = leafColumn.id === flexColumnId && !columnSizing[leafColumn.id];
+      const minWidthPx = columnContentWidths.get(leafColumn.id) ?? resolveColumnMinWidthPx(colConfig, {
+        isFirstColumn,
+        hasColumnToggle: isFirstColumn && !hideColumnToggle
+      });
+      return /* @__PURE__ */ jsx(
+        "col",
+        {
+          style: isFlexColumn ? { minWidth: minWidthPx } : { width: leafColumn.getSize(), minWidth: minWidthPx }
+        },
+        leafColumn.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx("thead", { children: hasHeaderGroupRow ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("tr", { className: "bg-muted", children: headerGroupSegments.map(
+        (segment) => segment.label === null ? segment.headers.map(
+          ({ header, index }) => renderColumnHeaderCell(header, index, leafHeaders.length, "spanning")
+        ) : /* @__PURE__ */ jsx(
+          "th",
+          {
+            colSpan: segment.headers.length,
+            className: classNames(
+              "sticky top-0 z-20 h-6 whitespace-nowrap border-x border-y border-border bg-muted px-3 py-0 text-center align-middle font-semibold uppercase tracking-wide text-foreground-subtle",
+              spacious ? "text-xs" : "text-xxs",
+              segment.headers[0]?.index === 0 && "rounded-tl-md",
+              segment.headers[segment.headers.length - 1]?.index === leafHeaders.length - 1 && "rounded-tr-md"
+            ),
+            children: segment.label
+          },
+          `band:${segment.headers[0]?.header.id}`
+        )
+      ) }),
+      /* @__PURE__ */ jsx("tr", { className: "bg-muted", children: headerGroupSegments.filter((segment) => segment.label !== null).flatMap((segment) => segment.headers).map(({ header, index }) => renderColumnHeaderCell(header, index, leafHeaders.length, "leaf")) })
+    ] }) : /* @__PURE__ */ jsx("tr", { className: "bg-muted", children: leafHeaders.map(
+      (header, headerIndex) => renderColumnHeaderCell(header, headerIndex, leafHeaders.length, "single")
+    ) }) })
+  ] });
+};
+export {
+  DataTableHead as default
+};
+//# sourceMappingURL=DataTableHead.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableHead.js","sources":["../../../../src/components/UI/DataTable/DataTableHead.tsx"],"sourcesContent":["import 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';\nimport { flexRender, type Header, type Table, type Updater } from '@tanstack/react-table';\n\nimport { alignClass, FROZEN_COLUMN_SHADOW, FROZEN_LEFT_COLUMN_SHADOW } from './dataTableClasses';\nimport DataTableColumnToggle from './DataTableColumnToggle';\nimport { resolveColumnMinWidthPx } from './dataTableColumnWidths';\nimport type { IDataTableColumnConfig, IDataTableRow } from './types';\n\ninterface IDataTableHeadProps<T extends IDataTableRow> {\n  table: Table<T>;\n  columns: Array<IDataTableColumnConfig<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  columnOrder: Array<string>;\n  onColumnOrderChange: (updater: Updater<Array<string>>) => void;\n  resetColumnOrder: () => void;\n  resetColumnSizing: () => void;\n  onHeaderSortClick: (columnConfig: IDataTableColumnConfig<T>) => void;\n  resolveSortDirection: (columnConfig: IDataTableColumnConfig<T>) => false | 'asc' | 'desc';\n  /** Omite o toggle de colunas do cabeçalho (quando o host o renderiza no toolbar). */\n  hideColumnToggle?: boolean;\n  /** Column that absorbs leftover horizontal space under table-fixed. */\n  flexColumnId?: string | null;\n  /** Show the frozen actions column shadow (set while the table scrolls sideways). */\n  showActionsShadow?: boolean;\n  /** Denser cell padding for embedded/editor (fit) layouts. */\n  dense?: boolean;\n  /** Roomier cell padding and type scale, for tables that need to read bigger. */\n  spacious?: boolean;\n}\n\nconst DataTableHead = <T extends IDataTableRow>({\n  table,\n  columns,\n  columnConfigById,\n  columnContentWidths,\n  columnOrder,\n  onColumnOrderChange,\n  resetColumnOrder,\n  resetColumnSizing,\n  onHeaderSortClick,\n  resolveSortDirection,\n  hideColumnToggle = false,\n  flexColumnId = null,\n  showActionsShadow = false,\n  dense = false,\n  spacious = false,\n}: IDataTableHeadProps<T>) => {\n  const { t } = useTranslation('ui');\n\n  const columnSizing = table.getState().columnSizing;\n  const { isResizingColumn } = table.getState().columnSizingInfo;\n\n  const renderResizeHandle = (header: Header<T, unknown>) => {\n    if (!header.column.getCanResize()) return null;\n    if (header.column.id === flexColumnId && !columnSizing[header.column.id]) return null;\n\n    const isResizing = isResizingColumn === header.column.id;\n\n    return (\n      <ControlledTooltip content={t('dataTable.resizeColumn')}>\n        <ControlledButton\n          defaultHtmlButton\n          onMouseDown={header.getResizeHandler()}\n          onTouchStart={header.getResizeHandler()}\n          onDoubleClick={() => header.column.resetSize()}\n          onClick={(event) => event.stopPropagation()}\n          className={classNames(\n            'absolute right-0 top-0 z-40 h-full w-3 cursor-col-resize touch-none select-none',\n            \"before:absolute before:inset-y-1 before:right-0 before:w-0.5 before:rounded-full before:content-['']\",\n            isResizing ? 'before:bg-brand' : 'before:bg-transparent hover:before:bg-brand-hover',\n          )}\n        >\n          {null}\n        </ControlledButton>\n      </ControlledTooltip>\n    );\n  };\n\n  const renderSortIndicator = (columnConfig: IDataTableColumnConfig<T>) => {\n    if (!columnConfig.sortable) return null;\n\n    const direction = resolveSortDirection(columnConfig);\n    const icon = direction === 'desc' ? 'arrow_downward' : 'arrow_upward';\n\n    return (\n      <MaterialSymbol\n        icon={icon}\n        size={14}\n        className={classNames('transition-opacity', {\n          'text-brand-emphasis opacity-100': !!direction,\n          'opacity-30': !direction,\n        })}\n      />\n    );\n  };\n\n  const visibleColumns = table.getVisibleLeafColumns();\n  const leafHeaders = table.getHeaderGroups()[0]?.headers ?? [];\n\n  // Banded header. The header keeps its single-row height: columns WITHOUT a\n  // `headerGroupLabel` render one cell spanning both rows (rowSpan 2, centered),\n  // while contiguous columns sharing a label split that same height into the\n  // group label (band row, fixed h-6) and their own labels (leaf row).\n  const headerGroupSegments = leafHeaders.reduce<\n    Array<{ label: string | null; headers: Array<{ header: Header<T, unknown>; index: number }> }>\n  >((segments, header, index) => {\n    const label = columnConfigById.get(header.column.id)?.headerGroupLabel ?? null;\n    const lastSegment = segments[segments.length - 1];\n\n    if (lastSegment && lastSegment.label === label) {\n      lastSegment.headers.push({ header, index });\n      return segments;\n    }\n\n    segments.push({ label, headers: [{ header, index }] });\n    return segments;\n  }, []);\n  const hasHeaderGroupRow = headerGroupSegments.some((segment) => segment.label !== null);\n\n  // `single`: the only row (no bands). `spanning`: ungrouped column spanning both\n  // rows of a banded header. `leaf`: grouped column's own label under its band.\n  const renderColumnHeaderCell = (\n    header: Header<T, unknown>,\n    headerIndex: number,\n    totalHeaders: number,\n    placement: 'single' | 'spanning' | 'leaf',\n  ) => {\n    const columnConfig = columnConfigById.get(header.column.id);\n    const isSortable = !!columnConfig?.sortable;\n    const isFirstColumn = headerIndex === 0;\n    const isLastColumn = headerIndex === totalHeaders - 1;\n    const isStickyLeft = isFirstColumn;\n    const isStickyRight = isLastColumn && columnConfig?.type === 'actions';\n\n    const rawHeaderContent = isSortable ? (\n      <ControlledButton\n        defaultHtmlButton\n        onClick={() => columnConfig && onHeaderSortClick(columnConfig)}\n        className=\"inline-flex cursor-pointer items-center gap-1 uppercase hover:text-foreground-muted\"\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {columnConfig && renderSortIndicator(columnConfig)}\n      </ControlledButton>\n    ) : (\n      flexRender(header.column.columnDef.header, header.getContext())\n    );\n\n    const headerContent = columnConfig?.headerTooltip ? (\n      <ControlledTooltip content={columnConfig.headerTooltip}>\n        <span className=\"inline-flex max-w-full\">{rawHeaderContent}</span>\n      </ControlledTooltip>\n    ) : (\n      rawHeaderContent\n    );\n\n    return (\n      <th\n        key={header.id}\n        rowSpan={placement === 'spanning' ? 2 : undefined}\n        className={classNames(\n          'sticky z-20 whitespace-nowrap bg-muted font-semibold uppercase tracking-wide text-foreground-subtle',\n          // The leaf row sits below the band row (fixed h-6) and closes the\n          // header's bottom edge; the other placements own both edges.\n          placement === 'leaf' ? 'top-6 border-b border-border' : 'top-0 border-y border-border',\n          // Outer edges come from the column's table position, not the row\n          // position: a banded header splits columns across two rows, so the\n          // `first:`/`last:` pseudo-classes would decorate the wrong cells.\n          isFirstColumn && 'border-l',\n          isFirstColumn && (placement === 'leaf' ? 'rounded-bl-md' : 'rounded-l-md'),\n          isLastColumn && 'border-r',\n          isLastColumn && (placement === 'leaf' ? 'rounded-br-md' : 'rounded-r-md'),\n          placement === 'spanning' && 'align-middle',\n          spacious ? 'text-xs' : 'text-xxs',\n          placement === 'leaf'\n            ? dense\n              ? 'px-3 py-1'\n              : spacious\n                ? 'px-5 py-1.5'\n                : 'px-4 py-1'\n            : dense\n              ? 'px-3 py-1.5'\n              : spacious\n                ? 'px-5 py-3.5'\n                : 'px-4 py-2.5',\n          alignClass(columnConfig?.headerAlign ?? columnConfig?.cellAlign),\n          isStickyLeft && 'left-0 z-30',\n          isStickyLeft && showActionsShadow && FROZEN_LEFT_COLUMN_SHADOW,\n          isStickyRight && 'right-0 z-30',\n          isStickyRight && showActionsShadow && FROZEN_COLUMN_SHADOW,\n        )}\n        style={{\n          minWidth:\n            columnContentWidths.get(header.column.id) ??\n            resolveColumnMinWidthPx(columnConfig, {\n              isFirstColumn,\n              hasColumnToggle: isFirstColumn && !hideColumnToggle,\n            }),\n        }}\n      >\n        {isFirstColumn && !hideColumnToggle ? (\n          <div className=\"flex items-center justify-between gap-2\">\n            {headerContent}\n            <DataTableColumnToggle\n              table={table}\n              columns={columns}\n              columnOrder={columnOrder}\n              onColumnOrderChange={onColumnOrderChange}\n              resetColumnOrder={resetColumnOrder}\n              resetColumnSizing={resetColumnSizing}\n            />\n          </div>\n        ) : (\n          headerContent\n        )}\n        {renderResizeHandle(header)}\n      </th>\n    );\n  };\n\n  return (\n    <>\n      <colgroup>\n        {visibleColumns.map((leafColumn, columnIndex) => {\n          const colConfig = columnConfigById.get(leafColumn.id);\n          const isFirstColumn = columnIndex === 0;\n          const isFlexColumn = leafColumn.id === flexColumnId && !columnSizing[leafColumn.id];\n          const minWidthPx =\n            columnContentWidths.get(leafColumn.id) ??\n            resolveColumnMinWidthPx(colConfig, {\n              isFirstColumn,\n              hasColumnToggle: isFirstColumn && !hideColumnToggle,\n            });\n\n          return (\n            <col\n              key={leafColumn.id}\n              style={isFlexColumn ? { minWidth: minWidthPx } : { width: leafColumn.getSize(), minWidth: minWidthPx }}\n            />\n          );\n        })}\n      </colgroup>\n\n      <thead>\n        {hasHeaderGroupRow ? (\n          <>\n            <tr className=\"bg-muted\">\n              {headerGroupSegments.map((segment) =>\n                segment.label === null ? (\n                  segment.headers.map(({ header, index }) =>\n                    renderColumnHeaderCell(header, index, leafHeaders.length, 'spanning'),\n                  )\n                ) : (\n                  <th\n                    key={`band:${segment.headers[0]?.header.id}`}\n                    colSpan={segment.headers.length}\n                    className={classNames(\n                      'sticky top-0 z-20 h-6 whitespace-nowrap border-x border-y border-border bg-muted px-3 py-0 text-center align-middle font-semibold uppercase tracking-wide text-foreground-subtle',\n                      spacious ? 'text-xs' : 'text-xxs',\n                      segment.headers[0]?.index === 0 && 'rounded-tl-md',\n                      segment.headers[segment.headers.length - 1]?.index === leafHeaders.length - 1 && 'rounded-tr-md',\n                    )}\n                  >\n                    {segment.label}\n                  </th>\n                ),\n              )}\n            </tr>\n            <tr className=\"bg-muted\">\n              {headerGroupSegments\n                .filter((segment) => segment.label !== null)\n                .flatMap((segment) => segment.headers)\n                .map(({ header, index }) => renderColumnHeaderCell(header, index, leafHeaders.length, 'leaf'))}\n            </tr>\n          </>\n        ) : (\n          <tr className=\"bg-muted\">\n            {leafHeaders.map((header, headerIndex) =>\n              renderColumnHeaderCell(header, headerIndex, leafHeaders.length, 'single'),\n            )}\n          </tr>\n        )}\n      </thead>\n    </>\n  );\n};\n\nexport default DataTableHead;\n"],"names":[],"mappings":";;;;;;;;;;AAqCA,MAAM,gBAAgB,CAA0B;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,QAAQ;AAAA,EACR,WAAW;AACb,MAA8B;AAC5B,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,eAAe,MAAM,SAAA,EAAW;AACtC,QAAM,EAAE,iBAAA,IAAqB,MAAM,WAAW;AAE9C,QAAM,qBAAqB,CAAC,WAA+B;AACzD,QAAI,CAAC,OAAO,OAAO,aAAA,EAAgB,QAAO;AAC1C,QAAI,OAAO,OAAO,OAAO,gBAAgB,CAAC,aAAa,OAAO,OAAO,EAAE,EAAG,QAAO;AAEjF,UAAM,aAAa,qBAAqB,OAAO,OAAO;AAEtD,WACE,oBAAC,mBAAA,EAAkB,SAAS,EAAE,wBAAwB,GACpD,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiB;AAAA,QACjB,aAAa,OAAO,iBAAA;AAAA,QACpB,cAAc,OAAO,iBAAA;AAAA,QACrB,eAAe,MAAM,OAAO,OAAO,UAAA;AAAA,QACnC,SAAS,CAAC,UAAU,MAAM,gBAAA;AAAA,QAC1B,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,aAAa,oBAAoB;AAAA,QAAA;AAAA,QAGlC,UAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AAEA,QAAM,sBAAsB,CAAC,iBAA4C;AACvE,QAAI,CAAC,aAAa,SAAU,QAAO;AAEnC,UAAM,YAAY,qBAAqB,YAAY;AACnD,UAAM,OAAO,cAAc,SAAS,mBAAmB;AAEvD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN,WAAW,WAAW,sBAAsB;AAAA,UAC1C,mCAAmC,CAAC,CAAC;AAAA,UACrC,cAAc,CAAC;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,QAAM,iBAAiB,MAAM,sBAAA;AAC7B,QAAM,cAAc,MAAM,gBAAA,EAAkB,CAAC,GAAG,WAAW,CAAA;AAM3D,QAAM,sBAAsB,YAAY,OAEtC,CAAC,UAAU,QAAQ,UAAU;AAC7B,UAAM,QAAQ,iBAAiB,IAAI,OAAO,OAAO,EAAE,GAAG,oBAAoB;AAC1E,UAAM,cAAc,SAAS,SAAS,SAAS,CAAC;AAEhD,QAAI,eAAe,YAAY,UAAU,OAAO;AAC9C,kBAAY,QAAQ,KAAK,EAAE,QAAQ,OAAO;AAC1C,aAAO;AAAA,IACT;AAEA,aAAS,KAAK,EAAE,OAAO,SAAS,CAAC,EAAE,QAAQ,MAAA,CAAO,GAAG;AACrD,WAAO;AAAA,EACT,GAAG,CAAA,CAAE;AACL,QAAM,oBAAoB,oBAAoB,KAAK,CAAC,YAAY,QAAQ,UAAU,IAAI;AAItF,QAAM,yBAAyB,CAC7B,QACA,aACA,cACA,cACG;AACH,UAAM,eAAe,iBAAiB,IAAI,OAAO,OAAO,EAAE;AAC1D,UAAM,aAAa,CAAC,CAAC,cAAc;AACnC,UAAM,gBAAgB,gBAAgB;AACtC,UAAM,eAAe,gBAAgB,eAAe;AACpD,UAAM,eAAe;AACrB,UAAM,gBAAgB,gBAAgB,cAAc,SAAS;AAE7D,UAAM,mBAAmB,aACvB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiB;AAAA,QACjB,SAAS,MAAM,gBAAgB,kBAAkB,YAAY;AAAA,QAC7D,WAAU;AAAA,QAET,UAAA;AAAA,UAAA,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,YAAY;AAAA,UAC9D,gBAAgB,oBAAoB,YAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAGnD,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,YAAY;AAGhE,UAAM,gBAAgB,cAAc,gBAClC,oBAAC,qBAAkB,SAAS,aAAa,eACvC,UAAA,oBAAC,QAAA,EAAK,WAAU,0BAA0B,UAAA,iBAAA,CAAiB,GAC7D,IAEA;AAGF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,SAAS,cAAc,aAAa,IAAI;AAAA,QACxC,WAAW;AAAA,UACT;AAAA;AAAA;AAAA,UAGA,cAAc,SAAS,iCAAiC;AAAA;AAAA;AAAA;AAAA,UAIxD,iBAAiB;AAAA,UACjB,kBAAkB,cAAc,SAAS,kBAAkB;AAAA,UAC3D,gBAAgB;AAAA,UAChB,iBAAiB,cAAc,SAAS,kBAAkB;AAAA,UAC1D,cAAc,cAAc;AAAA,UAC5B,WAAW,YAAY;AAAA,UACvB,cAAc,SACV,QACE,cACA,WACE,gBACA,cACJ,QACE,gBACA,WACE,gBACA;AAAA,UACR,WAAW,cAAc,eAAe,cAAc,SAAS;AAAA,UAC/D,gBAAgB;AAAA,UAChB,gBAAgB,qBAAqB;AAAA,UACrC,iBAAiB;AAAA,UACjB,iBAAiB,qBAAqB;AAAA,QAAA;AAAA,QAExC,OAAO;AAAA,UACL,UACE,oBAAoB,IAAI,OAAO,OAAO,EAAE,KACxC,wBAAwB,cAAc;AAAA,YACpC;AAAA,YACA,iBAAiB,iBAAiB,CAAC;AAAA,UAAA,CACpC;AAAA,QAAA;AAAA,QAGJ,UAAA;AAAA,UAAA,iBAAiB,CAAC,mBACjB,qBAAC,OAAA,EAAI,WAAU,2CACZ,UAAA;AAAA,YAAA;AAAA,YACD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,EAAA,CACF,IAEA;AAAA,UAED,mBAAmB,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAzDrB,OAAO;AAAA,IAAA;AAAA,EA4DlB;AAEA,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,YAAA,EACE,UAAA,eAAe,IAAI,CAAC,YAAY,gBAAgB;AAC/C,YAAM,YAAY,iBAAiB,IAAI,WAAW,EAAE;AACpD,YAAM,gBAAgB,gBAAgB;AACtC,YAAM,eAAe,WAAW,OAAO,gBAAgB,CAAC,aAAa,WAAW,EAAE;AAClF,YAAM,aACJ,oBAAoB,IAAI,WAAW,EAAE,KACrC,wBAAwB,WAAW;AAAA,QACjC;AAAA,QACA,iBAAiB,iBAAiB,CAAC;AAAA,MAAA,CACpC;AAEH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,OAAO,eAAe,EAAE,UAAU,WAAA,IAAe,EAAE,OAAO,WAAW,WAAW,UAAU,WAAA;AAAA,QAAW;AAAA,QADhG,WAAW;AAAA,MAAA;AAAA,IAItB,CAAC,EAAA,CACH;AAAA,IAEA,oBAAC,SAAA,EACE,UAAA,oBACC,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,WAAU,YACX,UAAA,oBAAoB;AAAA,QAAI,CAAC,YACxB,QAAQ,UAAU,OAChB,QAAQ,QAAQ;AAAA,UAAI,CAAC,EAAE,QAAQ,YAC7B,uBAAuB,QAAQ,OAAO,YAAY,QAAQ,UAAU;AAAA,QAAA,IAGtE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS,QAAQ,QAAQ;AAAA,YACzB,WAAW;AAAA,cACT;AAAA,cACA,WAAW,YAAY;AAAA,cACvB,QAAQ,QAAQ,CAAC,GAAG,UAAU,KAAK;AAAA,cACnC,QAAQ,QAAQ,QAAQ,QAAQ,SAAS,CAAC,GAAG,UAAU,YAAY,SAAS,KAAK;AAAA,YAAA;AAAA,YAGlF,UAAA,QAAQ;AAAA,UAAA;AAAA,UATJ,QAAQ,QAAQ,QAAQ,CAAC,GAAG,OAAO,EAAE;AAAA,QAAA;AAAA,MAU5C,GAGN;AAAA,MACA,oBAAC,MAAA,EAAG,WAAU,YACX,UAAA,oBACE,OAAO,CAAC,YAAY,QAAQ,UAAU,IAAI,EAC1C,QAAQ,CAAC,YAAY,QAAQ,OAAO,EACpC,IAAI,CAAC,EAAE,QAAQ,MAAA,MAAY,uBAAuB,QAAQ,OAAO,YAAY,QAAQ,MAAM,CAAC,EAAA,CACjG;AAAA,IAAA,GACF,IAEA,oBAAC,MAAA,EAAG,WAAU,YACX,UAAA,YAAY;AAAA,MAAI,CAAC,QAAQ,gBACxB,uBAAuB,QAAQ,aAAa,YAAY,QAAQ,QAAQ;AAAA,IAAA,GAE5E,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,15 @@
+interface IDataTablePaginationProps {
+    pageSize: number;
+    numberOfPages: number;
+    currentPage: number;
+    setCurrentPage: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    totalItems?: number;
+}
+export declare const DATA_TABLE_MIN_PAGE_SIZE: number;
+/**
+ * Compact, right-aligned pagination for the DataTable. Deliberately smaller and
+ * more discreet than the shared TableComponentPagination.
+ */
+declare const DataTablePagination: React.FC<IDataTablePaginationProps>;
+export default DataTablePagination;