@umodeapporg/ui 0.1.0

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

@@ -0,0 +1,251 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo, useState, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import DatePicker from "../../DateTime/DatePicker.js";
+import ControlledCheckbox from "../../Form/ControlledCheckbox.js";
+import ControlledDialog from "../../Form/ControlledDialog.js";
+import ControlledInput from "../../Form/ControlledInput.js";
+import { ControlledSelect } from "../../Form/ControlledSelect.js";
+import ControlledViewToggle from "../../Form/ControlledViewToggle.js";
+import "classnames";
+import "../../Form/ControlledButton.js";
+import "tailwind-merge";
+import "../ControlledMenu.js";
+import "motion/react";
+import "react-dom";
+import "@floating-ui/dom";
+import "../../../motion/motionPresets.js";
+import "../../../motion/motionTokens.js";
+import { normalizeText } from "../../../helpers/stringHelpers.js";
+import "../MaterialSymbol/index.js";
+import "date-fns";
+import "../../DateTime/DateRangePicker.js";
+import NoDataFound from "../NoDataFound/index.js";
+import "../../Search/filters/FiltersButton.js";
+import "../../../helpers/utilityHelpers.js";
+import "../ControlledPopover.js";
+import "react-router-dom";
+import UnifiedSearchBar from "../../Search/UnifiedSearchBar.js";
+const resolveDefaultRowLabel = (row, columns) => {
+  const label = (columns ?? []).filter((column) => column.type !== "actions" && !!column.accessor).map((column) => column.accessor?.(row)).find((value) => typeof value === "string" || typeof value === "number");
+  return label == null || label === "" ? row.id : String(label);
+};
+const DataTableBulkEditDialog = ({
+  open,
+  onClose,
+  columns,
+  rows,
+  getRowLabel,
+  initialTargetIds,
+  onApply
+}) => {
+  const { t } = useTranslation("ui");
+  const editableColumns = useMemo(() => (columns ?? []).filter((column) => !!column.editable), [columns]);
+  const [columnId, setColumnId] = useState("");
+  const [value, setValue] = useState("");
+  const [scope, setScope] = useState("loaded");
+  const [pickedIds, setPickedIds] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const wasOpenRef = useRef(false);
+  useEffect(() => {
+    if (open === wasOpenRef.current) return;
+    wasOpenRef.current = open;
+    if (!open) return;
+    const preselected = Array.from(initialTargetIds ?? []);
+    setColumnId(editableColumns[0]?.id ?? "");
+    setValue("");
+    setScope(preselected.length > 0 ? "picked" : "loaded");
+    setPickedIds(preselected);
+    setSearchTerm("");
+  }, [open, editableColumns, initialTargetIds]);
+  const selectedColumn = useMemo(
+    () => editableColumns.find((column) => column.id === columnId),
+    [editableColumns, columnId]
+  );
+  const editable = selectedColumn?.editable;
+  const arrayValue = Array.isArray(value) ? value.map(String) : [];
+  const stringValue = value == null || Array.isArray(value) ? "" : String(value);
+  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value == null || value === "";
+  const resolveLabel = useMemo(
+    () => getRowLabel ?? ((row) => resolveDefaultRowLabel(row, columns ?? [])),
+    [getRowLabel, columns]
+  );
+  const eligibleRows = useMemo(
+    () => (rows ?? []).filter((row) => !(editable?.disabled?.(row) ?? false)),
+    [rows, editable]
+  );
+  const pickedIdSet = useMemo(() => new Set(pickedIds), [pickedIds]);
+  const targetRows = useMemo(
+    () => scope === "loaded" ? eligibleRows : eligibleRows.filter((row) => pickedIdSet.has(row.id)),
+    [scope, eligibleRows, pickedIdSet]
+  );
+  const visibleRows = useMemo(() => {
+    const term = normalizeText(searchTerm.trim());
+    if (term === "") return eligibleRows;
+    return eligibleRows.filter((row) => normalizeText(resolveLabel(row)).includes(term));
+  }, [eligibleRows, searchTerm, resolveLabel]);
+  const validationError = useMemo(() => {
+    if (!editable?.validate) return null;
+    const firstInvalid = targetRows.map((row) => editable.validate?.(value, row) ?? null).find((message) => !!message);
+    return firstInvalid ?? null;
+  }, [editable, targetRows, value]);
+  const scopeOptions = [
+    { value: "loaded", label: t("dataTable.bulkEdit.scopeLoaded"), icon: "select_all", count: eligibleRows.length },
+    { value: "picked", label: t("dataTable.bulkEdit.scopePicked"), icon: "checklist", count: pickedIdSet.size }
+  ];
+  const togglePicked = (rowId) => setPickedIds((current) => current.includes(rowId) ? current.filter((id) => id !== rowId) : [...current, rowId]);
+  const areAllVisiblePicked = visibleRows.length > 0 && visibleRows.every((row) => pickedIdSet.has(row.id));
+  const toggleAllVisible = () => setPickedIds((current) => {
+    const visibleIds = visibleRows.map((row) => row.id);
+    if (areAllVisiblePicked) return current.filter((id) => !visibleIds.includes(id));
+    return Array.from(/* @__PURE__ */ new Set([...current, ...visibleIds]));
+  });
+  const handleApply = () => {
+    if (!selectedColumn || targetRows.length === 0) return;
+    onApply(targetRows.map((row) => ({ row, columnId: selectedColumn.id, value })));
+    onClose();
+  };
+  const renderValueEditor = () => {
+    if (!editable) return null;
+    if (editable.renderEditor) {
+      return editable.renderEditor({ value, onChange: setValue, label: t("dataTable.bulkEdit.newValue") });
+    }
+    if (editable.type === "multiselect") {
+      return /* @__PURE__ */ jsx(
+        ControlledSelect,
+        {
+          className: "w-full",
+          label: t("dataTable.bulkEdit.newValue"),
+          options: Array.isArray(editable.options) ? editable.options : [],
+          selectedValue: arrayValue,
+          onChangeHook: (selected) => setValue(Array.isArray(selected) ? selected : [selected]),
+          multiple: true,
+          searchable: true,
+          clearable: true
+        }
+      );
+    }
+    if (editable.type === "select") {
+      return /* @__PURE__ */ jsx(
+        ControlledSelect,
+        {
+          className: "w-full",
+          label: t("dataTable.bulkEdit.newValue"),
+          options: Array.isArray(editable.options) ? editable.options : [],
+          selectedValue: stringValue,
+          onChangeHook: (selected) => setValue(typeof selected === "string" ? selected : ""),
+          multiple: false,
+          searchable: true,
+          clearable: true
+        }
+      );
+    }
+    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: t("dataTable.bulkEdit.newValue"),
+          startValue,
+          onUpdate: (nextValue) => setValue(nextValue ?? "")
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      ControlledInput,
+      {
+        label: t("dataTable.bulkEdit.newValue"),
+        value: stringValue,
+        onChange: (event) => setValue(event.target.value),
+        inputMode: editable.type === "number" ? "decimal" : void 0,
+        error: !!validationError,
+        errorMessage: validationError ?? void 0
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    ControlledDialog,
+    {
+      open,
+      size: "md",
+      title: t("dataTable.bulkEdit.title"),
+      subtitle: t("dataTable.bulkEdit.subtitle"),
+      onCancel: onClose,
+      onConfirm: handleApply,
+      confirmLabel: targetRows.length === 0 ? t("dataTable.bulkEdit.confirmEmpty") : t("dataTable.bulkEdit.confirm", { count: targetRows.length }),
+      cancelLabel: t("actions.cancel"),
+      disableConfirm: !selectedColumn || targetRows.length === 0 || isValueEmpty || !!validationError,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(
+          ControlledSelect,
+          {
+            className: "w-full",
+            label: t("dataTable.bulkEdit.field"),
+            options: editableColumns.map((column) => ({ value: column.id, label: column.header })),
+            selectedValue: columnId,
+            onChangeHook: (selected) => {
+              setColumnId(typeof selected === "string" ? selected : "");
+              setValue("");
+            },
+            multiple: false,
+            searchable: true
+          }
+        ),
+        renderValueEditor(),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-foreground-subtle", children: t("dataTable.bulkEdit.scopeLabel") }),
+          /* @__PURE__ */ jsx(
+            ControlledViewToggle,
+            {
+              options: scopeOptions,
+              value: scope,
+              onChange: setScope,
+              showLabels: true,
+              size: "sm"
+            }
+          )
+        ] }),
+        scope === "picked" && /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col gap-2 rounded-xl border border-border bg-surface-sunken p-3", children: [
+          /* @__PURE__ */ jsx(
+            UnifiedSearchBar,
+            {
+              mode: "callback",
+              label: t("dataTable.bulkEdit.searchRows"),
+              debounceTime: 200,
+              minSearchLength: 1,
+              showClearButton: true,
+              filterCallback: setSearchTerm,
+              onClearFilter: () => setSearchTerm("")
+            }
+          ),
+          visibleRows.length === 0 ? /* @__PURE__ */ jsx(NoDataFound, { size: "sm", variant: "search", message: t("dataTable.bulkEdit.noRowsFound") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              ControlledCheckbox,
+              {
+                checked: areAllVisiblePicked,
+                onChange: toggleAllVisible,
+                label: t("dataTable.bulkEdit.selectAll", { count: visibleRows.length }),
+                size: "sm"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex max-h-64 flex-col overflow-y-auto", children: visibleRows.map((row) => /* @__PURE__ */ jsx(
+              ControlledCheckbox,
+              {
+                checked: pickedIdSet.has(row.id),
+                onChange: () => togglePicked(row.id),
+                label: resolveLabel(row),
+                size: "sm"
+              },
+              row.id
+            )) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  DataTableBulkEditDialog as default
+};
+//# sourceMappingURL=DataTableBulkEditDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableBulkEditDialog.js","sources":["../../../../src/components/UI/DataTable/DataTableBulkEditDialog.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport DatePicker from '@/components/DateTime/DatePicker';\nimport ControlledCheckbox from '@/components/Form/ControlledCheckbox';\nimport ControlledDialog from '@/components/Form/ControlledDialog';\nimport ControlledInput from '@/components/Form/ControlledInput';\nimport { ControlledSelect } from '@/components/Form/ControlledSelect';\nimport ControlledViewToggle, { type IControlledViewToggleOption } from '@/components/Form/ControlledViewToggle';\nimport { UnifiedSearchBar } from '@/components/Search';\nimport NoDataFound from '@/components/UI/NoDataFound';\nimport { normalizeText } from '@/helpers/stringHelpers';\n\nimport type { IDataTableColumnConfig, IDataTableFillChange, IDataTableRow } from './types';\n\ntype TBulkEditScope = 'loaded' | 'picked';\n\ninterface IDataTableBulkEditDialogProps<T extends IDataTableRow> {\n  open: boolean;\n  onClose: () => void;\n  /** Todas as colunas da tabela: só as editáveis viram opção de campo. */\n  columns: Array<IDataTableColumnConfig<T>>;\n  /** As linhas carregadas: a página atual na lista, o acumulado do scroll nos cards. */\n  rows: Array<T>;\n  /** Rótulo de cada linha na lista de escolha. Sem ele, a primeira coluna de texto responde. */\n  getRowLabel?: (row: T) => string;\n  /** Ids já escolhidos fora do diálogo: abre no modo \"escolher\" com eles marcados. */\n  initialTargetIds?: ReadonlyArray<string>;\n  onApply: (changes: Array<IDataTableFillChange<T>>) => void;\n}\n\n/**\n * Sem `getRowLabel`, o nome sai da primeira coluna que sabe devolver um valor\n * legível. Colunas que só desenham (`render`, sem `accessor`) não respondem, e é\n * por isso que uma tabela cuja identidade mora numa coluna `custom` precisa\n * declarar `getRowLabel`: aqui só sobraria o id.\n */\nconst resolveDefaultRowLabel = <T extends IDataTableRow>(row: T, columns: Array<IDataTableColumnConfig<T>>): string => {\n  const label = (columns ?? [])\n    .filter((column) => column.type !== 'actions' && !!column.accessor)\n    .map((column) => column.accessor?.(row))\n    .find((value) => typeof value === 'string' || typeof value === 'number');\n\n  return label == null || label === '' ? row.id : String(label);\n};\n\n/**\n * Aplica um valor a um campo em várias linhas de uma vez. É a mesma edição de\n * célula da planilha, com o alcance escolhido pelo usuário: todas as linhas\n * carregadas ou um subconjunto marcado na lista.\n *\n * O diálogo não persiste nada. Ele devolve as células escritas por `onApply`, que\n * o host entrega ao `onFillCells` da fila de commit: um render, um flush e uma\n * requisição em lote, exatamente como o preenchimento por arraste.\n */\nconst DataTableBulkEditDialog = <T extends IDataTableRow>({\n  open,\n  onClose,\n  columns,\n  rows,\n  getRowLabel,\n  initialTargetIds,\n  onApply,\n}: IDataTableBulkEditDialogProps<T>) => {\n  const { t } = useTranslation('ui');\n\n  const editableColumns = useMemo(() => (columns ?? []).filter((column) => !!column.editable), [columns]);\n\n  const [columnId, setColumnId] = useState('');\n  const [value, setValue] = useState<unknown>('');\n  const [scope, setScope] = useState<TBulkEditScope>('loaded');\n  const [pickedIds, setPickedIds] = useState<Array<string>>([]);\n  const [searchTerm, setSearchTerm] = useState('');\n\n  // Cada abertura recomeça do zero: um valor sobrando da vez anterior seria\n  // aplicado em massa por um clique só. O reset acontece na transição de abrir,\n  // nunca por uma nova referência de `columns` ou de `initialTargetIds`, que a\n  // tela recria ao marcar uma linha atrás do diálogo.\n  const wasOpenRef = useRef(false);\n  useEffect(() => {\n    if (open === wasOpenRef.current) return;\n    wasOpenRef.current = open;\n    if (!open) return;\n\n    const preselected = Array.from(initialTargetIds ?? []);\n    setColumnId(editableColumns[0]?.id ?? '');\n    setValue('');\n    setScope(preselected.length > 0 ? 'picked' : 'loaded');\n    setPickedIds(preselected);\n    setSearchTerm('');\n  }, [open, editableColumns, initialTargetIds]);\n\n  const selectedColumn = useMemo(\n    () => editableColumns.find((column) => column.id === columnId),\n    [editableColumns, columnId],\n  );\n  const editable = selectedColumn?.editable;\n\n  const arrayValue = Array.isArray(value) ? value.map(String) : [];\n  const stringValue = value == null || Array.isArray(value) ? '' : String(value);\n  // Vazio não aplica: o diálogo abre sem valor, e um Enter distraído limparia o\n  // campo em todo o alcance. Limpar continua sendo edição célula a célula.\n  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value == null || value === '';\n\n  const resolveLabel = useMemo(\n    () => getRowLabel ?? ((row: T) => resolveDefaultRowLabel(row, columns ?? [])),\n    [getRowLabel, columns],\n  );\n\n  // Uma linha que o próprio editor recusa (variante, registro bloqueado) não entra\n  // no alcance nem aparece na lista: prometer a alteração e descartá-la é pior.\n  const eligibleRows = useMemo(\n    () => (rows ?? []).filter((row) => !(editable?.disabled?.(row) ?? false)),\n    [rows, editable],\n  );\n\n  const pickedIdSet = useMemo(() => new Set(pickedIds), [pickedIds]);\n\n  const targetRows = useMemo(\n    () => (scope === 'loaded' ? eligibleRows : eligibleRows.filter((row) => pickedIdSet.has(row.id))),\n    [scope, eligibleRows, pickedIdSet],\n  );\n\n  const visibleRows = useMemo(() => {\n    const term = normalizeText(searchTerm.trim());\n    if (term === '') return eligibleRows;\n\n    return eligibleRows.filter((row) => normalizeText(resolveLabel(row)).includes(term));\n  }, [eligibleRows, searchTerm, resolveLabel]);\n\n  const validationError = useMemo(() => {\n    if (!editable?.validate) return null;\n\n    const firstInvalid = targetRows.map((row) => editable.validate?.(value, row) ?? null).find((message) => !!message);\n\n    return firstInvalid ?? null;\n  }, [editable, targetRows, value]);\n\n  const scopeOptions: Array<IControlledViewToggleOption<TBulkEditScope>> = [\n    { value: 'loaded', label: t('dataTable.bulkEdit.scopeLoaded'), icon: 'select_all', count: eligibleRows.length },\n    { value: 'picked', label: t('dataTable.bulkEdit.scopePicked'), icon: 'checklist', count: pickedIdSet.size },\n  ];\n\n  const togglePicked = (rowId: string) =>\n    setPickedIds((current) => (current.includes(rowId) ? current.filter((id) => id !== rowId) : [...current, rowId]));\n\n  const areAllVisiblePicked = visibleRows.length > 0 && visibleRows.every((row) => pickedIdSet.has(row.id));\n\n  const toggleAllVisible = () =>\n    setPickedIds((current) => {\n      const visibleIds = visibleRows.map((row) => row.id);\n      if (areAllVisiblePicked) return current.filter((id) => !visibleIds.includes(id));\n\n      return Array.from(new Set([...current, ...visibleIds]));\n    });\n\n  const handleApply = () => {\n    if (!selectedColumn || targetRows.length === 0) return;\n\n    onApply(targetRows.map((row) => ({ row, columnId: selectedColumn.id, value })));\n    onClose();\n  };\n\n  const renderValueEditor = () => {\n    if (!editable) return null;\n\n    if (editable.renderEditor) {\n      return editable.renderEditor({ value, onChange: setValue, label: t('dataTable.bulkEdit.newValue') });\n    }\n\n    if (editable.type === 'multiselect') {\n      return (\n        <ControlledSelect\n          className=\"w-full\"\n          label={t('dataTable.bulkEdit.newValue')}\n          options={Array.isArray(editable.options) ? editable.options : []}\n          selectedValue={arrayValue}\n          onChangeHook={(selected) => setValue(Array.isArray(selected) ? selected : [selected])}\n          multiple\n          searchable\n          clearable\n        />\n      );\n    }\n\n    if (editable.type === 'select') {\n      return (\n        <ControlledSelect\n          className=\"w-full\"\n          label={t('dataTable.bulkEdit.newValue')}\n          options={Array.isArray(editable.options) ? editable.options : []}\n          selectedValue={stringValue}\n          onChangeHook={(selected) => setValue(typeof selected === 'string' ? selected : '')}\n          multiple={false}\n          searchable\n          clearable\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={t('dataTable.bulkEdit.newValue')}\n          startValue={startValue}\n          onUpdate={(nextValue) => setValue(nextValue ?? '')}\n        />\n      );\n    }\n\n    return (\n      <ControlledInput\n        label={t('dataTable.bulkEdit.newValue')}\n        value={stringValue}\n        onChange={(event) => setValue(event.target.value)}\n        inputMode={editable.type === 'number' ? 'decimal' : undefined}\n        error={!!validationError}\n        errorMessage={validationError ?? undefined}\n      />\n    );\n  };\n\n  return (\n    <ControlledDialog\n      open={open}\n      size=\"md\"\n      title={t('dataTable.bulkEdit.title')}\n      subtitle={t('dataTable.bulkEdit.subtitle')}\n      onCancel={onClose}\n      onConfirm={handleApply}\n      confirmLabel={\n        targetRows.length === 0\n          ? t('dataTable.bulkEdit.confirmEmpty')\n          : t('dataTable.bulkEdit.confirm', { count: targetRows.length })\n      }\n      cancelLabel={t('actions.cancel')}\n      disableConfirm={!selectedColumn || targetRows.length === 0 || isValueEmpty || !!validationError}\n    >\n      <div className=\"flex flex-col gap-4\">\n        <ControlledSelect\n          className=\"w-full\"\n          label={t('dataTable.bulkEdit.field')}\n          options={editableColumns.map((column) => ({ value: column.id, label: column.header }))}\n          selectedValue={columnId}\n          onChangeHook={(selected) => {\n            setColumnId(typeof selected === 'string' ? selected : '');\n            setValue('');\n          }}\n          multiple={false}\n          searchable\n        />\n\n        {renderValueEditor()}\n\n        <div className=\"flex flex-col gap-2\">\n          <span className=\"text-xs font-medium uppercase tracking-wide text-foreground-subtle\">\n            {t('dataTable.bulkEdit.scopeLabel')}\n          </span>\n          <ControlledViewToggle<TBulkEditScope>\n            options={scopeOptions}\n            value={scope}\n            onChange={setScope}\n            showLabels\n            size=\"sm\"\n          />\n        </div>\n\n        {scope === 'picked' && (\n          <div className=\"flex min-h-0 flex-col gap-2 rounded-xl border border-border bg-surface-sunken p-3\">\n            <UnifiedSearchBar\n              mode=\"callback\"\n              label={t('dataTable.bulkEdit.searchRows')}\n              debounceTime={200}\n              minSearchLength={1}\n              showClearButton\n              filterCallback={setSearchTerm}\n              onClearFilter={() => setSearchTerm('')}\n            />\n\n            {visibleRows.length === 0 ? (\n              <NoDataFound size=\"sm\" variant=\"search\" message={t('dataTable.bulkEdit.noRowsFound')} />\n            ) : (\n              <>\n                <ControlledCheckbox\n                  checked={areAllVisiblePicked}\n                  onChange={toggleAllVisible}\n                  label={t('dataTable.bulkEdit.selectAll', { count: visibleRows.length })}\n                  size=\"sm\"\n                />\n                <div className=\"flex max-h-64 flex-col overflow-y-auto\">\n                  {visibleRows.map((row) => (\n                    <ControlledCheckbox\n                      key={row.id}\n                      checked={pickedIdSet.has(row.id)}\n                      onChange={() => togglePicked(row.id)}\n                      label={resolveLabel(row)}\n                      size=\"sm\"\n                    />\n                  ))}\n                </div>\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </ControlledDialog>\n  );\n};\n\nexport default DataTableBulkEditDialog;\n"],"names":[],"mappings":"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"}

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,168 @@
+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,
+          {
+            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" }) })
+          }
+        )
+      ]
+    }
+  );
+};
+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,
+      {
+        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          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\" />\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            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;