@umodeapporg/ui 0.0.0-canary.ca10e69

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

@@ -0,0 +1,20 @@
+import { IDataTableEditableConfig, IDataTableRow } from './types';
+interface IDataTableBulkEditValueEditorProps<T extends IDataTableRow> {
+    editable: IDataTableEditableConfig<T>;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    label?: string;
+    disabled?: boolean;
+    errorMessage?: string | null;
+    /** The single row being edited (per-item mode). */
+    row?: T;
+    /** Every row the value goes to ("same value" mode): only an option every row accepts is offered. */
+    rows?: Array<T>;
+}
+/**
+ * A value editor derived from the column's `editable` descriptor, the same one
+ * the spreadsheet cell opens. Used by the "same value" mode (one editor for the
+ * whole scope) and by the per-item matrix (one editor per cell).
+ */
+declare const DataTableBulkEditValueEditor: <T extends IDataTableRow>({ editable, value, onChange, label, disabled, errorMessage, row, rows, }: IDataTableBulkEditValueEditorProps<T>) => import("react").JSX.Element;
+export default DataTableBulkEditValueEditor;

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

@@ -0,0 +1,94 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import DatePicker from "../../DateTime/DatePicker.js";
+import ControlledInput from "../../Form/ControlledInput.js";
+import { ControlledSelect } from "../../Form/ControlledSelect.js";
+const resolveEditorOptions = (editable, row, rows) => {
+  const baseOptions = Array.isArray(editable.options) ? editable.options : [];
+  if (!editable.getOptions) return baseOptions;
+  if (row) return editable.getOptions(row) ?? baseOptions;
+  if (!rows || rows.length === 0) return baseOptions;
+  return rows.reduce((sharedOptions, candidateRow) => {
+    const rowOptions = editable.getOptions?.(candidateRow);
+    if (!rowOptions) return sharedOptions;
+    const rowValues = new Set(rowOptions.map((option) => String(option.value)));
+    return sharedOptions.filter((option) => rowValues.has(String(option.value)));
+  }, baseOptions);
+};
+const DataTableBulkEditValueEditor = ({
+  editable,
+  value,
+  onChange,
+  label,
+  disabled,
+  errorMessage,
+  row,
+  rows
+}) => {
+  if (editable.renderEditor) {
+    return /* @__PURE__ */ jsx(Fragment, { children: editable.renderEditor({ value, onChange, disabled, label, row, rows }) });
+  }
+  const editorOptions = resolveEditorOptions(editable, row, rows);
+  const arrayValue = Array.isArray(value) ? value.map(String) : [];
+  const stringValue = value == null || Array.isArray(value) ? "" : String(value);
+  if (editable.type === "multiselect") {
+    return /* @__PURE__ */ jsx(
+      ControlledSelect,
+      {
+        className: "w-full",
+        label,
+        options: editorOptions,
+        selectedValue: arrayValue,
+        onChangeHook: (selected) => onChange(Array.isArray(selected) ? selected : [selected]),
+        multiple: true,
+        searchable: true,
+        clearable: true,
+        disabled
+      }
+    );
+  }
+  if (editable.type === "select") {
+    return /* @__PURE__ */ jsx(
+      ControlledSelect,
+      {
+        className: "w-full",
+        label,
+        options: editorOptions,
+        selectedValue: stringValue,
+        onChangeHook: (selected) => onChange(typeof selected === "string" ? selected : ""),
+        multiple: false,
+        searchable: true,
+        clearable: true,
+        disabled
+      }
+    );
+  }
+  if (editable.type === "date") {
+    const parsed = stringValue ? new Date(stringValue) : void 0;
+    const startValue = parsed && !Number.isNaN(parsed.getTime()) ? parsed : void 0;
+    return /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        label,
+        startValue,
+        onUpdate: (nextValue) => onChange(nextValue ?? ""),
+        disabled
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ControlledInput,
+    {
+      label,
+      value: stringValue,
+      onChange: (event) => onChange(event.target.value),
+      inputMode: editable.type === "number" ? "decimal" : void 0,
+      disabled,
+      error: !!errorMessage,
+      errorMessage: errorMessage ?? void 0
+    }
+  );
+};
+export {
+  DataTableBulkEditValueEditor as default
+};
+//# sourceMappingURL=DataTableBulkEditValueEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableBulkEditValueEditor.js","sources":["../../../../src/components/UI/DataTable/DataTableBulkEditValueEditor.tsx"],"sourcesContent":["import DatePicker from '@/components/DateTime/DatePicker';\nimport ControlledInput from '@/components/Form/ControlledInput';\nimport { ControlledSelect } from '@/components/Form/ControlledSelect';\nimport type { IFilterOption } from '@/interfaces/IFilterOption';\n\nimport type { IDataTableEditableConfig, IDataTableRow } from './types';\n\ninterface IDataTableBulkEditValueEditorProps<T extends IDataTableRow> {\n  editable: IDataTableEditableConfig<T>;\n  value: unknown;\n  onChange: (value: unknown) => void;\n  label?: string;\n  disabled?: boolean;\n  errorMessage?: string | null;\n  /** The single row being edited (per-item mode). */\n  row?: T;\n  /** Every row the value goes to (\"same value\" mode): only an option every row accepts is offered. */\n  rows?: Array<T>;\n}\n\nconst resolveEditorOptions = <T extends IDataTableRow>(\n  editable: IDataTableEditableConfig<T>,\n  row: T | undefined,\n  rows: Array<T> | undefined,\n): Array<IFilterOption> => {\n  const baseOptions = Array.isArray(editable.options) ? editable.options : [];\n  if (!editable.getOptions) return baseOptions;\n  if (row) return editable.getOptions(row) ?? baseOptions;\n  if (!rows || rows.length === 0) return baseOptions;\n\n  return rows.reduce<Array<IFilterOption>>((sharedOptions, candidateRow) => {\n    const rowOptions = editable.getOptions?.(candidateRow);\n    if (!rowOptions) return sharedOptions;\n    const rowValues = new Set(rowOptions.map((option) => String(option.value)));\n    return sharedOptions.filter((option) => rowValues.has(String(option.value)));\n  }, baseOptions);\n};\n\n/**\n * A value editor derived from the column's `editable` descriptor, the same one\n * the spreadsheet cell opens. Used by the \"same value\" mode (one editor for the\n * whole scope) and by the per-item matrix (one editor per cell).\n */\nconst DataTableBulkEditValueEditor = <T extends IDataTableRow>({\n  editable,\n  value,\n  onChange,\n  label,\n  disabled,\n  errorMessage,\n  row,\n  rows,\n}: IDataTableBulkEditValueEditorProps<T>) => {\n  if (editable.renderEditor) {\n    return <>{editable.renderEditor({ value, onChange, disabled, label, row, rows })}</>;\n  }\n\n  const editorOptions = resolveEditorOptions(editable, row, rows);\n\n  const arrayValue = Array.isArray(value) ? value.map(String) : [];\n  const stringValue = value == null || Array.isArray(value) ? '' : String(value);\n\n  if (editable.type === 'multiselect') {\n    return (\n      <ControlledSelect\n        className=\"w-full\"\n        label={label}\n        options={editorOptions}\n        selectedValue={arrayValue}\n        onChangeHook={(selected) => onChange(Array.isArray(selected) ? selected : [selected])}\n        multiple\n        searchable\n        clearable\n        disabled={disabled}\n      />\n    );\n  }\n\n  if (editable.type === 'select') {\n    return (\n      <ControlledSelect\n        className=\"w-full\"\n        label={label}\n        options={editorOptions}\n        selectedValue={stringValue}\n        onChangeHook={(selected) => onChange(typeof selected === 'string' ? selected : '')}\n        multiple={false}\n        searchable\n        clearable\n        disabled={disabled}\n      />\n    );\n  }\n\n  if (editable.type === 'date') {\n    const parsed = stringValue ? new Date(stringValue) : undefined;\n    const startValue = parsed && !Number.isNaN(parsed.getTime()) ? parsed : undefined;\n\n    return (\n      <DatePicker\n        label={label}\n        startValue={startValue}\n        onUpdate={(nextValue) => onChange(nextValue ?? '')}\n        disabled={disabled}\n      />\n    );\n  }\n\n  return (\n    <ControlledInput\n      label={label}\n      value={stringValue}\n      onChange={(event) => onChange(event.target.value)}\n      inputMode={editable.type === 'number' ? 'decimal' : undefined}\n      disabled={disabled}\n      error={!!errorMessage}\n      errorMessage={errorMessage ?? undefined}\n    />\n  );\n};\n\nexport default DataTableBulkEditValueEditor;\n"],"names":[],"mappings":";;;;AAoBA,MAAM,uBAAuB,CAC3B,UACA,KACA,SACyB;AACzB,QAAM,cAAc,MAAM,QAAQ,SAAS,OAAO,IAAI,SAAS,UAAU,CAAA;AACzE,MAAI,CAAC,SAAS,WAAY,QAAO;AACjC,MAAI,IAAK,QAAO,SAAS,WAAW,GAAG,KAAK;AAC5C,MAAI,CAAC,QAAQ,KAAK,WAAW,EAAG,QAAO;AAEvC,SAAO,KAAK,OAA6B,CAAC,eAAe,iBAAiB;AACxE,UAAM,aAAa,SAAS,aAAa,YAAY;AACrD,QAAI,CAAC,WAAY,QAAO;AACxB,UAAM,YAAY,IAAI,IAAI,WAAW,IAAI,CAAC,WAAW,OAAO,OAAO,KAAK,CAAC,CAAC;AAC1E,WAAO,cAAc,OAAO,CAAC,WAAW,UAAU,IAAI,OAAO,OAAO,KAAK,CAAC,CAAC;AAAA,EAC7E,GAAG,WAAW;AAChB;AAOA,MAAM,+BAA+B,CAA0B;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AAC3C,MAAI,SAAS,cAAc;AACzB,WAAO,oBAAA,UAAA,EAAG,UAAA,SAAS,aAAa,EAAE,OAAO,UAAU,UAAU,OAAO,KAAK,KAAA,CAAM,EAAA,CAAE;AAAA,EACnF;AAEA,QAAM,gBAAgB,qBAAqB,UAAU,KAAK,IAAI;AAE9D,QAAM,aAAa,MAAM,QAAQ,KAAK,IAAI,MAAM,IAAI,MAAM,IAAI,CAAA;AAC9D,QAAM,cAAc,SAAS,QAAQ,MAAM,QAAQ,KAAK,IAAI,KAAK,OAAO,KAAK;AAE7E,MAAI,SAAS,SAAS,eAAe;AACnC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,eAAe;AAAA,QACf,cAAc,CAAC,aAAa,SAAS,MAAM,QAAQ,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC;AAAA,QACpF,UAAQ;AAAA,QACR,YAAU;AAAA,QACV,WAAS;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,MAAI,SAAS,SAAS,UAAU;AAC9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,eAAe;AAAA,QACf,cAAc,CAAC,aAAa,SAAS,OAAO,aAAa,WAAW,WAAW,EAAE;AAAA,QACjF,UAAU;AAAA,QACV,YAAU;AAAA,QACV,WAAS;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,MAAI,SAAS,SAAS,QAAQ;AAC5B,UAAM,SAAS,cAAc,IAAI,KAAK,WAAW,IAAI;AACrD,UAAM,aAAa,UAAU,CAAC,OAAO,MAAM,OAAO,QAAA,CAAS,IAAI,SAAS;AAExE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,UAAU,CAAC,cAAc,SAAS,aAAa,EAAE;AAAA,QACjD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,MAChD,WAAW,SAAS,SAAS,WAAW,YAAY;AAAA,MACpD;AAAA,MACA,OAAO,CAAC,CAAC;AAAA,MACT,cAAc,gBAAgB;AAAA,IAAA;AAAA,EAAA;AAGpC;"}

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

@@ -0,0 +1,34 @@
+import { Table, Updater } from '@tanstack/react-table';
+import { IDataTableColumnConfig, IDataTableRow } from './types';
+/**
+ * Table-agnostic core of the "Colunas" menu (visibility checkboxes + drag
+ * reordering). Visibility is injected via callbacks so the same menu serves the
+ * parent table (TanStack-backed, see the default export) and the nested detail
+ * table (plain visibility map, see DataTableDetailTable).
+ */
+export interface IDataTableColumnMenuProps<R extends IDataTableRow> {
+    columns: Array<IDataTableColumnConfig<R>>;
+    columnOrder: Array<string>;
+    onColumnOrderChange: (updater: Updater<Array<string>>) => void;
+    resetColumnOrder: () => void;
+    isColumnVisible: (columnId: string) => boolean;
+    onToggleColumnVisibility: (columnId: string) => void;
+    /** When provided, adds a "restore default widths" action to the menu footer. */
+    resetColumnSizing?: () => void;
+    /** `header` (padrão): ícone discreto no cabeçalho. `toolbar`: botão com borda, pareado com o toggle de visualização. */
+    variant?: 'header' | 'toolbar';
+}
+interface IDataTableColumnToggleProps<T extends IDataTableRow> {
+    table: Table<T>;
+    columns: Array<IDataTableColumnConfig<T>>;
+    columnOrder: Array<string>;
+    onColumnOrderChange: (updater: Updater<Array<string>>) => void;
+    resetColumnOrder: () => void;
+    /** When provided, adds a "restore default widths" action to the menu footer. */
+    resetColumnSizing?: () => void;
+    /** `header` (padrão): ícone discreto no cabeçalho. `toolbar`: botão com borda, pareado com o toggle de visualização. */
+    variant?: 'header' | 'toolbar';
+}
+export declare const DataTableColumnMenu: <R extends IDataTableRow>({ columns, columnOrder, onColumnOrderChange, resetColumnOrder, isColumnVisible, onToggleColumnVisibility, resetColumnSizing, variant, }: IDataTableColumnMenuProps<R>) => import("react").JSX.Element | null;
+declare const DataTableColumnToggle: <T extends IDataTableRow>({ table, columns, columnOrder, onColumnOrderChange, resetColumnOrder, resetColumnSizing, variant, }: IDataTableColumnToggleProps<T>) => import("react").JSX.Element;
+export default DataTableColumnToggle;

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

@@ -0,0 +1,170 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledCheckbox from "../../Form/ControlledCheckbox.js";
+import { ControlledMenuRoot, ControlledMenuHandler, ControlledMenuList } from "../ControlledMenu.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { getFixedStartColumns, getFixedEndColumns, getReorderableColumns } from "./useColumnOrder.js";
+const DataTableColumnToggleItem = ({ id, header, isVisible, onToggleVisibility }) => {
+  const { t } = useTranslation("ui");
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref: setNodeRef,
+      style,
+      className: classNames("flex items-center gap-1 rounded-md px-1.5 py-1.5", {
+        "relative z-10 bg-surface shadow-md": isDragging,
+        "hover:bg-muted-hover": !isDragging
+      }),
+      children: [
+        /* @__PURE__ */ jsx(ControlledTooltip, { content: t("dataTable.reorderColumn"), children: /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            "aria-label": t("dataTable.reorderColumn"),
+            defaultHtmlButton: true,
+            className: "flex cursor-grab touch-none items-center text-foreground-faint hover:text-foreground-muted active:cursor-grabbing",
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "drag_indicator", size: 18 })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            onClick: onToggleVisibility,
+            className: "flex flex-1 items-center gap-2 rounded-md px-1.5 py-1 text-left",
+            children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none flex items-center", children: /* @__PURE__ */ jsx(ControlledCheckbox, { checked: isVisible, onChange: () => void 0, label: header, size: "sm", tabIndex: -1 }) })
+          }
+        )
+      ]
+    }
+  );
+};
+const DataTableColumnMenu = ({
+  columns,
+  columnOrder,
+  onColumnOrderChange,
+  resetColumnOrder,
+  isColumnVisible,
+  onToggleColumnVisibility,
+  resetColumnSizing,
+  variant = "header"
+}) => {
+  const { t } = useTranslation("ui");
+  const [isOpen, setIsOpen] = useState(false);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const fixedStartIds = useMemo(() => getFixedStartColumns(columns).map((column) => column.id), [columns]);
+  const fixedEndIds = useMemo(() => getFixedEndColumns(columns).map((column) => column.id), [columns]);
+  const reorderableColumns = useMemo(() => getReorderableColumns(columns), [columns]);
+  const orderedReorderableColumns = useMemo(() => {
+    const reorderableColumnById = new Map(reorderableColumns.map((column) => [column.id, column]));
+    const ordered = (columnOrder ?? []).map((id) => reorderableColumnById.get(id)).filter((column) => !!column);
+    const orderedIds = new Set(ordered.map((column) => column.id));
+    for (const column of reorderableColumns) if (!orderedIds.has(column.id)) ordered.push(column);
+    return ordered;
+  }, [reorderableColumns, columnOrder]);
+  const sortableIds = useMemo(() => orderedReorderableColumns.map((column) => column.id), [orderedReorderableColumns]);
+  if (reorderableColumns.length === 0) return null;
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = sortableIds.indexOf(String(active.id));
+    const newIndex = sortableIds.indexOf(String(over.id));
+    if (oldIndex === -1 || newIndex === -1) return;
+    const nextReorderableIds = arrayMove(sortableIds, oldIndex, newIndex);
+    onColumnOrderChange([...fixedStartIds, ...nextReorderableIds, ...fixedEndIds]);
+  };
+  return /* @__PURE__ */ jsxs(ControlledMenuRoot, { open: isOpen, handler: setIsOpen, placement: "bottom-end", dismiss: { itemPress: false }, children: [
+    /* @__PURE__ */ jsx(ControlledTooltip, { content: t("dataTable.columns"), children: /* @__PURE__ */ jsx(ControlledMenuHandler, { children: /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        "aria-label": t("dataTable.columns"),
+        defaultHtmlButton: true,
+        className: variant === "toolbar" ? "inline-flex shrink-0 items-center justify-center rounded-lg border border-border bg-surface p-2.5 text-foreground-subtle shadow-sm transition-colors hover:bg-muted-hover hover:text-foreground-muted" : "inline-flex items-center justify-center rounded p-1 text-foreground-faint transition-colors hover:bg-muted-active hover:text-foreground-muted",
+        children: /* @__PURE__ */ jsx("span", { className: "flex", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "view_column", size: variant === "toolbar" ? 18 : 16 }) })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(ControlledMenuList, { className: "z-[9999] min-w-56 overflow-hidden p-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto overscroll-contain p-1", onWheel: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx(DndContext, { sensors, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: sortableIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col", children: orderedReorderableColumns.map((columnConfig) => /* @__PURE__ */ jsx(
+        DataTableColumnToggleItem,
+        {
+          id: columnConfig.id,
+          header: columnConfig.header,
+          isVisible: isColumnVisible(columnConfig.id),
+          onToggleVisibility: () => onToggleColumnVisibility(columnConfig.id)
+        },
+        columnConfig.id
+      )) }) }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "border-t border-border-subtle p-1", children: [
+        /* @__PURE__ */ jsxs(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            onClick: resetColumnOrder,
+            className: "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-xs font-medium text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted",
+            children: [
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: "restart_alt", size: 16 }),
+              t("dataTable.restoreDefaultOrder")
+            ]
+          }
+        ),
+        resetColumnSizing && /* @__PURE__ */ jsxs(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            onClick: resetColumnSizing,
+            className: "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-xs font-medium text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted",
+            children: [
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: "width", size: 16 }),
+              t("dataTable.restoreDefaultWidths")
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+const DataTableColumnToggle = ({
+  table,
+  columns,
+  columnOrder,
+  onColumnOrderChange,
+  resetColumnOrder,
+  resetColumnSizing,
+  variant = "header"
+}) => /* @__PURE__ */ jsx(
+  DataTableColumnMenu,
+  {
+    columns,
+    columnOrder,
+    onColumnOrderChange,
+    resetColumnOrder,
+    resetColumnSizing,
+    isColumnVisible: (columnId) => table.getColumn(columnId)?.getIsVisible() ?? true,
+    onToggleColumnVisibility: (columnId) => {
+      const column = table.getColumn(columnId);
+      column?.toggleVisibility(!(column?.getIsVisible() ?? true));
+    },
+    variant
+  }
+);
+export {
+  DataTableColumnMenu,
+  DataTableColumnToggle as default
+};
+//# sourceMappingURL=DataTableColumnToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableColumnToggle.js","sources":["../../../../src/components/UI/DataTable/DataTableColumnToggle.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledCheckbox from '@/components/Form/ControlledCheckbox';\nimport { ControlledMenuHandler, ControlledMenuList, ControlledMenuRoot } from '@/components/UI/ControlledMenu';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { DndContext, type DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport type { Table, Updater } from '@tanstack/react-table';\n\nimport type { IDataTableColumnConfig, IDataTableRow } from './types';\nimport { getFixedEndColumns, getFixedStartColumns, getReorderableColumns } from './useColumnOrder';\n\n/**\n * Table-agnostic core of the \"Colunas\" menu (visibility checkboxes + drag\n * reordering). Visibility is injected via callbacks so the same menu serves the\n * parent table (TanStack-backed, see the default export) and the nested detail\n * table (plain visibility map, see DataTableDetailTable).\n */\nexport interface IDataTableColumnMenuProps<R extends IDataTableRow> {\n  columns: Array<IDataTableColumnConfig<R>>;\n  columnOrder: Array<string>;\n  onColumnOrderChange: (updater: Updater<Array<string>>) => void;\n  resetColumnOrder: () => void;\n  isColumnVisible: (columnId: string) => boolean;\n  onToggleColumnVisibility: (columnId: string) => void;\n  /** When provided, adds a \"restore default widths\" action to the menu footer. */\n  resetColumnSizing?: () => void;\n  /** `header` (padrão): ícone discreto no cabeçalho. `toolbar`: botão com borda, pareado com o toggle de visualização. */\n  variant?: 'header' | 'toolbar';\n}\n\ninterface IDataTableColumnToggleProps<T extends IDataTableRow> {\n  table: Table<T>;\n  columns: Array<IDataTableColumnConfig<T>>;\n  columnOrder: Array<string>;\n  onColumnOrderChange: (updater: Updater<Array<string>>) => void;\n  resetColumnOrder: () => void;\n  /** When provided, adds a \"restore default widths\" action to the menu footer. */\n  resetColumnSizing?: () => void;\n  /** `header` (padrão): ícone discreto no cabeçalho. `toolbar`: botão com borda, pareado com o toggle de visualização. */\n  variant?: 'header' | 'toolbar';\n}\n\ninterface IDataTableColumnToggleItemProps {\n  id: string;\n  header: string;\n  isVisible: boolean;\n  onToggleVisibility: () => void;\n}\n\nconst DataTableColumnToggleItem = ({ id, header, isVisible, onToggleVisibility }: IDataTableColumnToggleItemProps) => {\n  const { t } = useTranslation('ui');\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  };\n\n  return (\n    <li\n      ref={setNodeRef}\n      style={style}\n      className={classNames('flex items-center gap-1 rounded-md px-1.5 py-1.5', {\n        'relative z-10 bg-surface shadow-md': isDragging,\n        'hover:bg-muted-hover': !isDragging,\n      })}\n    >\n      <ControlledTooltip content={t('dataTable.reorderColumn')}>\n        <ControlledButton\n          aria-label={t('dataTable.reorderColumn')}\n          defaultHtmlButton\n          className=\"flex cursor-grab touch-none items-center text-foreground-faint hover:text-foreground-muted active:cursor-grabbing\"\n          {...attributes}\n          {...listeners}\n        >\n          <MaterialSymbol icon=\"drag_indicator\" size={18} />\n        </ControlledButton>\n      </ControlledTooltip>\n      {/* Checkbox is display-only: pointer-events-none lets the click fall through\n          to the button, so clicking anywhere (checkbox or label) toggles once. */}\n      <ControlledButton\n        defaultHtmlButton\n        onClick={onToggleVisibility}\n        className=\"flex flex-1 items-center gap-2 rounded-md px-1.5 py-1 text-left\"\n      >\n        <span className=\"pointer-events-none flex items-center\">\n          <ControlledCheckbox checked={isVisible} onChange={() => undefined} label={header} size=\"sm\" tabIndex={-1} />\n        </span>\n      </ControlledButton>\n    </li>\n  );\n};\n\nexport const DataTableColumnMenu = <R extends IDataTableRow>({\n  columns,\n  columnOrder,\n  onColumnOrderChange,\n  resetColumnOrder,\n  isColumnVisible,\n  onToggleColumnVisibility,\n  resetColumnSizing,\n  variant = 'header',\n}: IDataTableColumnMenuProps<R>) => {\n  const { t } = useTranslation('ui');\n  const [isOpen, setIsOpen] = useState(false);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n  );\n\n  const fixedStartIds = useMemo(() => getFixedStartColumns(columns).map((column) => column.id), [columns]);\n  const fixedEndIds = useMemo(() => getFixedEndColumns(columns).map((column) => column.id), [columns]);\n\n  const reorderableColumns = useMemo(() => getReorderableColumns(columns), [columns]);\n\n  // Reorderable columns rendered in the CURRENT persisted order. Any reorderable\n  // column missing from `columnOrder` (defensive) is appended in config order.\n  const orderedReorderableColumns = useMemo(() => {\n    const reorderableColumnById = new Map(reorderableColumns.map((column) => [column.id, column]));\n    const ordered = (columnOrder ?? [])\n      .map((id) => reorderableColumnById.get(id))\n      .filter((column): column is IDataTableColumnConfig<R> => !!column);\n\n    const orderedIds = new Set(ordered.map((column) => column.id));\n    for (const column of reorderableColumns) if (!orderedIds.has(column.id)) ordered.push(column);\n\n    return ordered;\n  }, [reorderableColumns, columnOrder]);\n\n  const sortableIds = useMemo(() => orderedReorderableColumns.map((column) => column.id), [orderedReorderableColumns]);\n\n  if (reorderableColumns.length === 0) return null;\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n    if (!over || active.id === over.id) return;\n\n    const oldIndex = sortableIds.indexOf(String(active.id));\n    const newIndex = sortableIds.indexOf(String(over.id));\n    if (oldIndex === -1 || newIndex === -1) return;\n\n    const nextReorderableIds = arrayMove(sortableIds, oldIndex, newIndex);\n    onColumnOrderChange([...fixedStartIds, ...nextReorderableIds, ...fixedEndIds]);\n  };\n\n  return (\n    <ControlledMenuRoot open={isOpen} handler={setIsOpen} placement=\"bottom-end\" dismiss={{ itemPress: false }}>\n      <ControlledTooltip content={t('dataTable.columns')}>\n        <ControlledMenuHandler>\n          <ControlledButton\n            aria-label={t('dataTable.columns')}\n            defaultHtmlButton\n            className={\n              variant === 'toolbar'\n                ? 'inline-flex shrink-0 items-center justify-center rounded-lg border border-border bg-surface p-2.5 text-foreground-subtle shadow-sm transition-colors hover:bg-muted-hover hover:text-foreground-muted'\n                : 'inline-flex items-center justify-center rounded p-1 text-foreground-faint transition-colors hover:bg-muted-active hover:text-foreground-muted'\n            }\n          >\n            <span className=\"flex\">\n              <MaterialSymbol icon=\"view_column\" size={variant === 'toolbar' ? 18 : 16} />\n            </span>\n          </ControlledButton>\n        </ControlledMenuHandler>\n      </ControlledTooltip>\n      {/* MenuList gets role=\"menu\", and global CSS forces `[role='menu'] { overflow: hidden !important }`,\n          so scroll must live on an inner wrapper (same pattern as ControlledSelect). z-[9999] lifts the\n          portaled menu above the table's sticky cells and the app chrome so it is never covered. */}\n      <ControlledMenuList className=\"z-[9999] min-w-56 overflow-hidden p-0\">\n        <div className=\"max-h-80 overflow-y-auto overscroll-contain p-1\" onWheel={(event) => event.stopPropagation()}>\n          <DndContext sensors={sensors} onDragEnd={handleDragEnd}>\n            <SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>\n              <ul className=\"flex flex-col\">\n                {orderedReorderableColumns.map((columnConfig) => (\n                  <DataTableColumnToggleItem\n                    key={columnConfig.id}\n                    id={columnConfig.id}\n                    header={columnConfig.header}\n                    isVisible={isColumnVisible(columnConfig.id)}\n                    onToggleVisibility={() => onToggleColumnVisibility(columnConfig.id)}\n                  />\n                ))}\n              </ul>\n            </SortableContext>\n          </DndContext>\n        </div>\n        <div className=\"border-t border-border-subtle p-1\">\n          <ControlledButton\n            defaultHtmlButton\n            onClick={resetColumnOrder}\n            className=\"flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-xs font-medium text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted\"\n          >\n            <MaterialSymbol icon=\"restart_alt\" size={16} />\n            {t('dataTable.restoreDefaultOrder')}\n          </ControlledButton>\n          {resetColumnSizing && (\n            <ControlledButton\n              defaultHtmlButton\n              onClick={resetColumnSizing}\n              className=\"flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-xs font-medium text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted\"\n            >\n              <MaterialSymbol icon=\"width\" size={16} />\n              {t('dataTable.restoreDefaultWidths')}\n            </ControlledButton>\n          )}\n        </div>\n      </ControlledMenuList>\n    </ControlledMenuRoot>\n  );\n};\n\n// Parent-table entry point: derives visibility from the TanStack table instance\n// so it stays the single source of truth for the main columns.\nconst DataTableColumnToggle = <T extends IDataTableRow>({\n  table,\n  columns,\n  columnOrder,\n  onColumnOrderChange,\n  resetColumnOrder,\n  resetColumnSizing,\n  variant = 'header',\n}: IDataTableColumnToggleProps<T>) => (\n  <DataTableColumnMenu\n    columns={columns}\n    columnOrder={columnOrder}\n    onColumnOrderChange={onColumnOrderChange}\n    resetColumnOrder={resetColumnOrder}\n    resetColumnSizing={resetColumnSizing}\n    isColumnVisible={(columnId) => table.getColumn(columnId)?.getIsVisible() ?? true}\n    onToggleColumnVisibility={(columnId) => {\n      const column = table.getColumn(columnId);\n      column?.toggleVisibility(!(column?.getIsVisible() ?? true));\n    }}\n    variant={variant}\n  />\n);\n\nexport default DataTableColumnToggle;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+import { TDialogSize } from '../../Form/ControlledDialogPrimitives';
+import { IDataTableDetailConfig, IDataTableRow } from './types';
+interface IDataTableDetailModalProps<T extends IDataTableRow> {
+    open: boolean;
+    row: T | null;
+    config: IDataTableDetailConfig<T>;
+    /** Widen the dialog when the detail carries a `content` block. Defaults to the compact `md`. */
+    size?: TDialogSize;
+    onClose: () => void;
+    onEdit?: (row: T) => void;
+    isEditDisabled?: (row: T) => boolean;
+    onToggleStatus?: (row: T) => void;
+    isActive?: (row: T) => boolean;
+    canToggleStatus?: (row: T) => boolean;
+}
+declare const DataTableDetailModal: <T extends IDataTableRow>({ open, row, config, size, onClose, onEdit, isEditDisabled, onToggleStatus, isActive, canToggleStatus, }: IDataTableDetailModalProps<T>) => import("react").JSX.Element | null;
+export default DataTableDetailModal;

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;"}