@umodeapporg/ui 0.1.0

package/dist/components/UI/DataTable/cells/DataTableEditableCell.js

@@ -0,0 +1,242 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import DatePicker from "../../../DateTime/DatePicker.js";
+import ControlledInput from "../../../Form/ControlledInput.js";
+import { ControlledSelect } from "../../../Form/ControlledSelect.js";
+import ControlledTooltip from "../../ControlledTooltip.js";
+import { MaterialSymbol } from "../../MaterialSymbol/index.js";
+import { formatIsoDate } from "../../../../helpers/dateHelpers.js";
+import { useHoverCapable } from "../../../../hooks/useHoverCapable.js";
+import { useInlineEditor } from "../../../../hooks/useInlineEditor.js";
+import { useGridStoreApi, useGridCellState } from "../grid/GridProvider.js";
+import { GRID_CELL_EDITING } from "../grid/gridTypes.js";
+import { useGridEditMode } from "../grid/useGridInstance.js";
+import { useDataTableCellEditing, buildEditableCellKey, EDITABLE_CELL_ATTR } from "../useCellEditingState.js";
+const EDITABLE_INPUT_ATTR = "data-datatable-editable-input";
+const isSameEditableValue = (current, previous) => {
+  if (Array.isArray(current) || Array.isArray(previous)) {
+    if (!Array.isArray(current) || !Array.isArray(previous)) return false;
+    return current.length === previous.length && current.every((entry, index) => entry === previous[index]);
+  }
+  return current === previous;
+};
+const resolveDecimalSeparator = (language) => {
+  const separator = 1.1.toLocaleString(language || "pt-BR").replace(/\d/g, "");
+  return separator || ".";
+};
+const focusNextEditableInput = (current) => {
+  const inputs = Array.from(document.querySelectorAll(`[${EDITABLE_INPUT_ATTR}]`));
+  const index = inputs.indexOf(current);
+  if (index === -1) return;
+  inputs[index + 1]?.focus();
+};
+const DataTableEditableCell = ({
+  column,
+  row,
+  gridRowId,
+  onCellChange,
+  keyboardNav = false,
+  clickToEdit = false
+}) => {
+  const { t, i18n } = useTranslation("ui");
+  const hoverCapable = useHoverCapable();
+  const cellEditing = useDataTableCellEditing();
+  const gridStore = useGridStoreApi();
+  const gridCellState = useGridCellState(gridRowId ?? "", column.id);
+  const cellKey = buildEditableCellKey(row.id, column.id);
+  const isGridEditModeOn = useGridEditMode(gridStore);
+  const hasGrid = !!gridStore && !!gridRowId;
+  const isGridCell = hasGrid && isGridEditModeOn;
+  const isEditing = isGridCell ? (gridCellState & GRID_CELL_EDITING) !== 0 : clickToEdit ? cellEditing?.editingCellKey === cellKey : true;
+  const showsReadView = isGridCell || clickToEdit;
+  const { containerRef, handleKeyDown } = useInlineEditor(
+    Boolean(!isGridCell && clickToEdit && isEditing),
+    () => cellEditing?.stopEditing(),
+    (direction) => cellEditing?.navigate(cellKey, direction)
+  );
+  const editable = column.editable;
+  const valueBeforeEditRef = useRef(null);
+  const wasEditingRef = useRef(false);
+  const [draftText, setDraftText] = useState(null);
+  useEffect(() => {
+    if (!isEditing) setDraftText(null);
+  }, [isEditing]);
+  useEffect(() => {
+    if (!isGridCell || !editable) return;
+    if (isEditing) {
+      if (!wasEditingRef.current) valueBeforeEditRef.current = editable.getValue(row);
+      wasEditingRef.current = true;
+      return;
+    }
+    if (!wasEditingRef.current) return;
+    wasEditingRef.current = false;
+    if (gridStore?.getState().editingOutcome !== "cancel") return;
+    if (isSameEditableValue(editable.getValue(row), valueBeforeEditRef.current)) return;
+    onCellChange(row, column.id, valueBeforeEditRef.current);
+  }, [isEditing, isGridCell, editable, gridStore, onCellChange, row, column.id]);
+  if (!editable) return null;
+  const rawValue = editable.getValue(row);
+  const disabled = editable.disabled?.(row) ?? false;
+  const error = editable.validate?.(rawValue, row) ?? null;
+  const arrayValue = Array.isArray(rawValue) ? rawValue.map(String) : [];
+  const stringValue = rawValue == null || Array.isArray(rawValue) ? "" : String(rawValue);
+  const decimalValue = editable.type === "number" && typeof rawValue === "number" ? stringValue.replace(".", resolveDecimalSeparator(i18n.language)) : stringValue;
+  const renderEditor = () => {
+    if (editable.renderEditor) {
+      return editable.renderEditor({
+        value: rawValue,
+        onChange: (nextValue) => onCellChange(row, column.id, nextValue),
+        disabled,
+        label: column.header
+      });
+    }
+    if (editable.type === "multiselect") {
+      return /* @__PURE__ */ jsx(
+        ControlledSelect,
+        {
+          className: "w-full [&_.controlled-select-container]:!min-w-0 [&_.controlled-select-input]:!min-w-0",
+          options: Array.isArray(editable.options) ? editable.options : [],
+          selectedValue: arrayValue,
+          onChangeHook: (selected) => onCellChange(row, column.id, Array.isArray(selected) ? selected : [selected]),
+          multiple: true,
+          searchable: true,
+          clearable: true,
+          disabled,
+          error: !!error
+        }
+      );
+    }
+    if (editable.type === "select") {
+      return (
+        // `ControlledSelect` ships hard min-widths (`min-w-52` on the field and the MT
+        // container's `min-w-[200px]`) that overflow narrow table cells and spill into
+        // the neighbouring column; force both to shrink so the editor fits its column
+        // like the text/number editors do.
+        /* @__PURE__ */ jsx(
+          ControlledSelect,
+          {
+            className: "w-full [&_.controlled-select-container]:!min-w-0 [&_.controlled-select-input]:!min-w-0",
+            options: Array.isArray(editable.options) ? editable.options : [],
+            selectedValue: stringValue,
+            onChangeHook: (selected) => onCellChange(row, column.id, selected),
+            multiple: false,
+            searchable: true,
+            clearable: true,
+            disabled,
+            error: !!error
+          }
+        )
+      );
+    }
+    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,
+        {
+          startValue,
+          onUpdate: (value) => onCellChange(row, column.id, value ?? null),
+          disabled
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      ControlledInput,
+      {
+        value: draftText ?? decimalValue,
+        onChange: (event) => {
+          setDraftText(event.target.value);
+          onCellChange(row, column.id, event.target.value);
+        },
+        onBlur: () => setDraftText(null),
+        onKeyDown: keyboardNav && !isGridCell ? (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            focusNextEditableInput(event.currentTarget);
+          }
+        } : void 0,
+        inputMode: editable.type === "number" ? "decimal" : void 0,
+        disabled,
+        error: !!error,
+        errorMessage: error ?? void 0,
+        "aria-label": column.header,
+        ...{ [EDITABLE_INPUT_ATTR]: "" },
+        containerClassName: "min-w-0"
+      }
+    );
+  };
+  if (!hasGrid && (!showsReadView || !cellEditing)) return renderEditor();
+  const resolveOptionLabel = (optionValue) => (editable.options ?? []).find((option) => String(option.value) === optionValue)?.label ?? optionValue;
+  const resolveDisplayText = () => {
+    if (editable.displayValue) return editable.displayValue(row);
+    if (editable.type === "multiselect") return arrayValue.map(resolveOptionLabel).join(", ");
+    if (stringValue === "") return "";
+    if (editable.type === "select") return resolveOptionLabel(stringValue);
+    if (editable.type === "date") return formatIsoDate(stringValue);
+    return decimalValue;
+  };
+  const displayText = resolveDisplayText();
+  const displayContent = !editable.displayValue && column.render ? column.render(row) : /* @__PURE__ */ jsx("span", { className: classNames("min-w-0 flex-1 truncate", displayText === "" && "text-foreground-faint"), children: displayText === "" ? "-" : displayText });
+  const showsEditAffordance = !disabled && (!hasGrid || isGridEditModeOn);
+  const readCell = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        // A mesma altura do editor (h-10), para a linha não pular quando a célula é aberta.
+        "flex min-h-10 w-full items-center gap-1 rounded-md border border-transparent px-2 py-1.5 text-sm",
+        disabled && "text-foreground-faint",
+        !disabled && !showsEditAffordance && "text-foreground",
+        showsEditAffordance && "group cursor-pointer text-foreground transition-colors hover:border-brand-border hover:bg-brand-soft/50",
+        error && "border-danger-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate", children: displayContent }),
+        showsEditAffordance && // On touch there is no hover, so a hover-only pencil means the cell never
+        // advertises that it can be edited. Keep it visible (dimmed) there instead.
+        /* @__PURE__ */ jsx(
+          MaterialSymbol,
+          {
+            icon: "edit",
+            size: 13,
+            className: classNames(
+              "shrink-0 text-brand-emphasis transition-opacity",
+              hoverCapable ? "opacity-0 group-hover:opacity-100" : "opacity-60"
+            )
+          }
+        )
+      ]
+    }
+  );
+  if (hasGrid && !isGridEditModeOn) return readCell;
+  if (isGridCell) {
+    if (isEditing) return renderEditor();
+    if (disabled) return readCell;
+    return (
+      // The cell itself is the focus target and the keyboard entry point (Enter / F2);
+      // the double click is the mouse equivalent, exactly like a spreadsheet.
+      /* @__PURE__ */ jsx("div", { onDoubleClick: () => gridStore?.getState().startEditing({ rowId: gridRowId, columnId: column.id }), children: readCell })
+    );
+  }
+  if (!cellEditing) return renderEditor();
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, onKeyDown: handleKeyDown, ...{ [EDITABLE_CELL_ATTR]: cellKey }, children: isEditing ? renderEditor() : disabled ? readCell : /* @__PURE__ */ jsx(ControlledTooltip, { content: t("dataTable.editCell"), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick: () => cellEditing.startEditing(cellKey),
+      onKeyDown: (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        cellEditing.startEditing(cellKey);
+      },
+      className: "rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-brand-border",
+      children: readCell
+    }
+  ) }) });
+};
+export {
+  DataTableEditableCell as default
+};
+//# sourceMappingURL=DataTableEditableCell.js.map

package/dist/components/UI/DataTable/cells/DataTableEditableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableEditableCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableEditableCell.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport DatePicker from '@/components/DateTime/DatePicker';\nimport ControlledInput from '@/components/Form/ControlledInput';\nimport { ControlledSelect } from '@/components/Form/ControlledSelect';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { formatIsoDate } from '@/helpers/dateHelpers';\nimport { useHoverCapable } from '@/hooks/useHoverCapable';\nimport { useInlineEditor } from '@/hooks/useInlineEditor';\n\nimport { useGridCellState, useGridStoreApi } from '../grid/GridProvider';\nimport { GRID_CELL_EDITING } from '../grid/gridTypes';\nimport { useGridEditMode } from '../grid/useGridInstance';\nimport type { IDataTableColumnConfig, IDataTableRow } from '../types';\nimport { buildEditableCellKey, EDITABLE_CELL_ATTR, useDataTableCellEditing } from '../useCellEditingState';\n\n/**\n * Marks the typeable editable inputs so `keyboardNav` can walk them in DOM order.\n * Only text/number inputs opt in; date and select cells drive their own popovers\n * and fall back to native Tab traversal.\n */\nconst EDITABLE_INPUT_ATTR = 'data-datatable-editable-input';\n\ntype TEditableValue = string | number | Array<string> | null;\n\n/** Multi-select devolve um array novo a cada leitura, então `===` nunca casaria. */\nconst isSameEditableValue = (current: TEditableValue, previous: TEditableValue): boolean => {\n  if (Array.isArray(current) || Array.isArray(previous)) {\n    if (!Array.isArray(current) || !Array.isArray(previous)) return false;\n    return current.length === previous.length && current.every((entry, index) => entry === previous[index]);\n  }\n\n  return current === previous;\n};\n\n/** `,` for pt-BR, `.` for en: derived from the locale itself, no language table. */\nconst resolveDecimalSeparator = (language: string): string => {\n  const separator = (1.1).toLocaleString(language || 'pt-BR').replace(/\\d/g, '');\n  return separator || '.';\n};\n\nconst focusNextEditableInput = (current: HTMLElement): void => {\n  const inputs = Array.from(document.querySelectorAll<HTMLElement>(`[${EDITABLE_INPUT_ATTR}]`));\n  const index = inputs.indexOf(current);\n  if (index === -1) return;\n  inputs[index + 1]?.focus();\n};\n\ninterface IDataTableEditableCellProps<T extends IDataTableRow> {\n  column: IDataTableColumnConfig<T>;\n  row: T;\n  /** TanStack row id: present only inside a spreadsheet-enabled table. */\n  gridRowId?: string;\n  onCellChange: (row: T, columnId: string, value: unknown) => void;\n  /** When true, pressing Enter moves focus to the next editable input (DOM order). */\n  keyboardNav?: boolean;\n  /** When true, the cell shows the value as text until it is clicked. */\n  clickToEdit?: boolean;\n}\n\n/**\n * Controlled inline editor for a single cell. Reads the current value from the\n * host-owned row via `column.editable.getValue` and reports every edit through\n * `onCellChange`; the host re-renders with the updated row. Validation is derived\n * from the current value on each render, so no local state is kept.\n *\n * With `clickToEdit`, the cell renders the value as text and only swaps in the editor\n * once clicked, no editor is mounted before that.\n */\nconst DataTableEditableCell = <T extends IDataTableRow>({\n  column,\n  row,\n  gridRowId,\n  onCellChange,\n  keyboardNav = false,\n  clickToEdit = false,\n}: IDataTableEditableCellProps<T>) => {\n  const { t, i18n } = useTranslation('ui');\n  const hoverCapable = useHoverCapable();\n  const cellEditing = useDataTableCellEditing();\n  const gridStore = useGridStoreApi();\n  const gridCellState = useGridCellState(gridRowId ?? '', column.id);\n  const cellKey = buildEditableCellKey(row.id, column.id);\n\n  // Inside a spreadsheet-enabled table the grid store owns the editing state, so\n  // the legacy click-to-edit context and its document listener stay out of the way.\n  const isGridEditModeOn = useGridEditMode(gridStore);\n  const hasGrid = !!gridStore && !!gridRowId;\n  const isGridCell = hasGrid && isGridEditModeOn;\n  const isEditing = isGridCell\n    ? (gridCellState & GRID_CELL_EDITING) !== 0\n    : clickToEdit\n      ? cellEditing?.editingCellKey === cellKey\n      : true;\n  const showsReadView = isGridCell || clickToEdit;\n\n  const { containerRef, handleKeyDown } = useInlineEditor(\n    Boolean(!isGridCell && clickToEdit && isEditing),\n    () => cellEditing?.stopEditing(),\n    (direction) => cellEditing?.navigate(cellKey, direction),\n  );\n\n  const editable = column.editable;\n  const valueBeforeEditRef = useRef<string | number | Array<string> | null>(null);\n  const wasEditingRef = useRef(false);\n\n  // The cell is controlled by the value the host ALREADY parsed, so a half-typed\n  // decimal is erased on the same keystroke: `1,` parses to the number 1 and comes\n  // back as `\"1\"`, taking with it the separator just typed. The draft holds the exact\n  // text while the field is focused; the host still receives every keystroke and\n  // remains the source of truth.\n  const [draftText, setDraftText] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (!isEditing) setDraftText(null);\n  }, [isEditing]);\n\n  // Escape restores what the cell held when the editor opened. The editing model is\n  // controlled (every keystroke already reached the host), so cancelling means\n  // writing the snapshot back, not dropping local state.\n  useEffect(() => {\n    if (!isGridCell || !editable) return;\n\n    if (isEditing) {\n      if (!wasEditingRef.current) valueBeforeEditRef.current = editable.getValue(row);\n      wasEditingRef.current = true;\n      return;\n    }\n\n    if (!wasEditingRef.current) return;\n    wasEditingRef.current = false;\n\n    if (gridStore?.getState().editingOutcome !== 'cancel') return;\n    if (isSameEditableValue(editable.getValue(row), valueBeforeEditRef.current)) return;\n\n    onCellChange(row, column.id, valueBeforeEditRef.current);\n  }, [isEditing, isGridCell, editable, gridStore, onCellChange, row, column.id]);\n\n  if (!editable) return null;\n\n  const rawValue = editable.getValue(row);\n  const disabled = editable.disabled?.(row) ?? false;\n  const error = editable.validate?.(rawValue, row) ?? null;\n  const arrayValue = Array.isArray(rawValue) ? rawValue.map(String) : [];\n  const stringValue = rawValue == null || Array.isArray(rawValue) ? '' : String(rawValue);\n\n  // `String()` on a number always writes a dot, so a pt-BR user would get back a\n  // separator that is not theirs. Hosts that keep the raw text (the edit buffer) are\n  // untouched: only an actual number reaches this branch.\n  const decimalValue =\n    editable.type === 'number' && typeof rawValue === 'number'\n      ? stringValue.replace('.', resolveDecimalSeparator(i18n.language))\n      : stringValue;\n\n  const renderEditor = () => {\n    if (editable.renderEditor) {\n      return editable.renderEditor({\n        value: rawValue,\n        onChange: (nextValue) => onCellChange(row, column.id, nextValue),\n        disabled,\n        label: column.header,\n      });\n    }\n\n    if (editable.type === 'multiselect') {\n      return (\n        <ControlledSelect\n          className=\"w-full [&_.controlled-select-container]:!min-w-0 [&_.controlled-select-input]:!min-w-0\"\n          options={Array.isArray(editable.options) ? editable.options : []}\n          selectedValue={arrayValue}\n          onChangeHook={(selected) => onCellChange(row, column.id, Array.isArray(selected) ? selected : [selected])}\n          multiple\n          searchable\n          clearable\n          disabled={disabled}\n          error={!!error}\n        />\n      );\n    }\n\n    if (editable.type === 'select') {\n      return (\n        // `ControlledSelect` ships hard min-widths (`min-w-52` on the field and the MT\n        // container's `min-w-[200px]`) that overflow narrow table cells and spill into\n        // the neighbouring column; force both to shrink so the editor fits its column\n        // like the text/number editors do.\n        <ControlledSelect\n          className=\"w-full [&_.controlled-select-container]:!min-w-0 [&_.controlled-select-input]:!min-w-0\"\n          options={Array.isArray(editable.options) ? editable.options : []}\n          selectedValue={stringValue}\n          onChangeHook={(selected) => onCellChange(row, column.id, selected)}\n          multiple={false}\n          searchable\n          clearable\n          disabled={disabled}\n          error={!!error}\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          startValue={startValue}\n          onUpdate={(value) => onCellChange(row, column.id, value ?? null)}\n          disabled={disabled}\n        />\n      );\n    }\n\n    // `number` renders a text input with a decimal input mode rather than\n    // `type=\"number\"`, so pt-BR comma decimals are not blocked by the browser; the\n    // host parses the raw string it receives in `onCellChange`.\n    return (\n      <ControlledInput\n        value={draftText ?? decimalValue}\n        onChange={(event) => {\n          setDraftText(event.target.value);\n          onCellChange(row, column.id, event.target.value);\n        }}\n        onBlur={() => setDraftText(null)}\n        onKeyDown={\n          keyboardNav && !isGridCell\n            ? (event) => {\n                if (event.key === 'Enter') {\n                  event.preventDefault();\n                  focusNextEditableInput(event.currentTarget);\n                }\n              }\n            : undefined\n        }\n        inputMode={editable.type === 'number' ? 'decimal' : undefined}\n        disabled={disabled}\n        error={!!error}\n        errorMessage={error ?? undefined}\n        aria-label={column.header}\n        {...{ [EDITABLE_INPUT_ATTR]: '' }}\n        // The Material-Tailwind input container ships a hard `min-w-[200px]` that\n        // overflows narrow table cells; force it to shrink so the editor fits its\n        // column (the cell padding then provides the gap between adjacent inputs).\n        containerClassName=\"min-w-0\"\n      />\n    );\n  };\n\n  if (!hasGrid && (!showsReadView || !cellEditing)) return renderEditor();\n\n  const resolveOptionLabel = (optionValue: string): string =>\n    (editable.options ?? []).find((option) => String(option.value) === optionValue)?.label ?? optionValue;\n\n  const resolveDisplayText = (): string => {\n    if (editable.displayValue) return editable.displayValue(row);\n    if (editable.type === 'multiselect') return arrayValue.map(resolveOptionLabel).join(', ');\n    if (stringValue === '') return '';\n    if (editable.type === 'select') return resolveOptionLabel(stringValue);\n    if (editable.type === 'date') return formatIsoDate(stringValue);\n    return decimalValue;\n  };\n\n  const displayText = resolveDisplayText();\n\n  // Uma coluna com renderização própria (chip de etapa, status, thumbnail) mantém\n  // esse visual no modo de leitura: só o editor aberto troca a célula por um input.\n  const displayContent =\n    !editable.displayValue && column.render ? (\n      column.render(row)\n    ) : (\n      <span className={classNames('min-w-0 flex-1 truncate', displayText === '' && 'text-foreground-faint')}>\n        {displayText === '' ? '-' : displayText}\n      </span>\n    );\n\n  // Com o grid montado mas o modo de edição desligado, a célula é só o valor: sem\n  // lápis, sem realce e sem clique, para não prometer uma edição que não abre.\n  const showsEditAffordance = !disabled && (!hasGrid || isGridEditModeOn);\n\n  const readCell = (\n    <div\n      className={classNames(\n        // A mesma altura do editor (h-10), para a linha não pular quando a célula é aberta.\n        'flex min-h-10 w-full items-center gap-1 rounded-md border border-transparent px-2 py-1.5 text-sm',\n        disabled && 'text-foreground-faint',\n        !disabled && !showsEditAffordance && 'text-foreground',\n        showsEditAffordance &&\n          'group cursor-pointer text-foreground transition-colors hover:border-brand-border hover:bg-brand-soft/50',\n        error && 'border-danger-border',\n      )}\n    >\n      <div className=\"min-w-0 flex-1 truncate\">{displayContent}</div>\n      {showsEditAffordance && (\n        // On touch there is no hover, so a hover-only pencil means the cell never\n        // advertises that it can be edited. Keep it visible (dimmed) there instead.\n        <MaterialSymbol\n          icon=\"edit\"\n          size={13}\n          className={classNames(\n            'shrink-0 text-brand-emphasis transition-opacity',\n            hoverCapable ? 'opacity-0 group-hover:opacity-100' : 'opacity-60',\n          )}\n        />\n      )}\n    </div>\n  );\n\n  // Fora do modo de edição a tabela é de leitura: nenhum editor fica montado.\n  if (hasGrid && !isGridEditModeOn) return readCell;\n\n  if (isGridCell) {\n    if (isEditing) return renderEditor();\n    if (disabled) return readCell;\n\n    return (\n      // The cell itself is the focus target and the keyboard entry point (Enter / F2);\n      // the double click is the mouse equivalent, exactly like a spreadsheet.\n      <div onDoubleClick={() => gridStore?.getState().startEditing({ rowId: gridRowId, columnId: column.id })}>\n        {readCell}\n      </div>\n    );\n  }\n\n  if (!cellEditing) return renderEditor();\n\n  return (\n    <div ref={containerRef} onKeyDown={handleKeyDown} {...{ [EDITABLE_CELL_ATTR]: cellKey }}>\n      {isEditing ? (\n        renderEditor()\n      ) : disabled ? (\n        readCell\n      ) : (\n        <ControlledTooltip content={t('dataTable.editCell')}>\n          <div\n            role=\"button\"\n            tabIndex={0}\n            onClick={() => cellEditing.startEditing(cellKey)}\n            onKeyDown={(event) => {\n              if (event.key !== 'Enter' && event.key !== ' ') return;\n              event.preventDefault();\n              cellEditing.startEditing(cellKey);\n            }}\n            className=\"rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-brand-border\"\n          >\n            {readCell}\n          </div>\n        </ControlledTooltip>\n      )}\n    </div>\n  );\n};\n\nexport default DataTableEditableCell;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/DataTable/cells/DataTableEmpenhoCell.d.ts

@@ -0,0 +1,10 @@
+interface IDataTableEmpenhoCellProps {
+    value: number | null | undefined;
+}
+/**
+ * Placeholder renderer for empenho counts. The clickable behavior (opening the
+ * linked products/materials) is intentionally NOT wired yet. The business
+ * definition is still pending. For now it renders the count as plain text.
+ */
+declare const DataTableEmpenhoCell: React.FC<IDataTableEmpenhoCellProps>;
+export default DataTableEmpenhoCell;

package/dist/components/UI/DataTable/cells/DataTableEmpenhoCell.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { formatNumber } from "../../../../helpers/formatHelpers.js";
+const DataTableEmpenhoCell = ({ value }) => /* @__PURE__ */ jsx("span", { className: "text-sm tabular-nums text-foreground", children: formatNumber(value ?? 0) });
+export {
+  DataTableEmpenhoCell as default
+};
+//# sourceMappingURL=DataTableEmpenhoCell.js.map

package/dist/components/UI/DataTable/cells/DataTableEmpenhoCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableEmpenhoCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableEmpenhoCell.tsx"],"sourcesContent":["import { formatNumber } from '@/helpers/formatHelpers';\n\ninterface IDataTableEmpenhoCellProps {\n  value: number | null | undefined;\n}\n\n/**\n * Placeholder renderer for empenho counts. The clickable behavior (opening the\n * linked products/materials) is intentionally NOT wired yet. The business\n * definition is still pending. For now it renders the count as plain text.\n */\nconst DataTableEmpenhoCell: React.FC<IDataTableEmpenhoCellProps> = ({ value }) => (\n  <span className=\"text-sm tabular-nums text-foreground\">{formatNumber(value ?? 0)}</span>\n);\n\nexport default DataTableEmpenhoCell;\n"],"names":[],"mappings":";;AAWA,MAAM,uBAA6D,CAAC,EAAE,YACpE,oBAAC,QAAA,EAAK,WAAU,wCAAwC,UAAA,aAAa,SAAS,CAAC,EAAA,CAAE;"}

package/dist/components/UI/DataTable/cells/DataTableOriginCell.d.ts

@@ -0,0 +1,6 @@
+import { IDataTableOriginValue } from '../types';
+interface IDataTableOriginCellProps {
+    value: IDataTableOriginValue | null | undefined;
+}
+declare const DataTableOriginCell: React.FC<IDataTableOriginCellProps>;
+export default DataTableOriginCell;

package/dist/components/UI/DataTable/cells/DataTableOriginCell.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import OutlinedChip from "../../Chips/OutlinedChip.js";
+const DataTableOriginCell = ({ value }) => {
+  if (!value) return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-faint", children: "-" });
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0", children: /* @__PURE__ */ jsx(
+    OutlinedChip,
+    {
+      label: value.label,
+      tooltip: value.label,
+      className: classNames("w-full min-w-0 border uppercase", {
+        "border-info-border bg-info-soft text-info-emphasis": value.tone === "erp",
+        "border-brand-border bg-brand-soft text-brand-emphasis": value.tone === "custom",
+        "border-success-border bg-success-soft text-success-emphasis": value.tone === "official",
+        "border-warning-border bg-warning-soft text-warning-emphasis": value.tone === "legacy",
+        "border-border bg-muted text-foreground-muted": value.tone === "default"
+      }),
+      labelClassName: "truncate"
+    }
+  ) });
+};
+export {
+  DataTableOriginCell as default
+};
+//# sourceMappingURL=DataTableOriginCell.js.map

package/dist/components/UI/DataTable/cells/DataTableOriginCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableOriginCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableOriginCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\n\nimport type { IDataTableOriginValue } from '../types';\n\ninterface IDataTableOriginCellProps {\n  value: IDataTableOriginValue | null | undefined;\n}\n\nconst DataTableOriginCell: React.FC<IDataTableOriginCellProps> = ({ value }) => {\n  if (!value) return <span className=\"text-sm text-foreground-faint\">-</span>;\n\n  return (\n    <div className=\"flex w-full min-w-0\">\n      <OutlinedChip\n        label={value.label}\n        tooltip={value.label}\n        className={classNames('w-full min-w-0 border uppercase', {\n          'border-info-border bg-info-soft text-info-emphasis': value.tone === 'erp',\n          'border-brand-border bg-brand-soft text-brand-emphasis': value.tone === 'custom',\n          'border-success-border bg-success-soft text-success-emphasis': value.tone === 'official',\n          'border-warning-border bg-warning-soft text-warning-emphasis': value.tone === 'legacy',\n          'border-border bg-muted text-foreground-muted': value.tone === 'default',\n        })}\n        labelClassName=\"truncate\"\n      />\n    </div>\n  );\n};\n\nexport default DataTableOriginCell;\n"],"names":[],"mappings":";;;AAUA,MAAM,sBAA2D,CAAC,EAAE,YAAY;AAC9E,MAAI,CAAC,MAAO,4BAAQ,QAAA,EAAK,WAAU,iCAAgC,UAAA,KAAC;AAEpE,SACE,oBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,SAAS,MAAM;AAAA,MACf,WAAW,WAAW,mCAAmC;AAAA,QACvD,sDAAsD,MAAM,SAAS;AAAA,QACrE,yDAAyD,MAAM,SAAS;AAAA,QACxE,+DAA+D,MAAM,SAAS;AAAA,QAC9E,+DAA+D,MAAM,SAAS;AAAA,QAC9E,gDAAgD,MAAM,SAAS;AAAA,MAAA,CAChE;AAAA,MACD,gBAAe;AAAA,IAAA;AAAA,EAAA,GAEnB;AAEJ;"}

package/dist/components/UI/DataTable/cells/DataTableStatusCell.d.ts

@@ -0,0 +1,6 @@
+import { IDataTableStatusValue } from '../types';
+interface IDataTableStatusCellProps {
+    value: IDataTableStatusValue | null | undefined;
+}
+declare const DataTableStatusCell: React.FC<IDataTableStatusCellProps>;
+export default DataTableStatusCell;

package/dist/components/UI/DataTable/cells/DataTableStatusCell.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import OutlinedChip from "../../Chips/OutlinedChip.js";
+const DataTableStatusCell = ({ value }) => {
+  if (!value) return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-faint", children: "-" });
+  const isActive = value.tone === "active";
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0", children: /* @__PURE__ */ jsx(
+    OutlinedChip,
+    {
+      label: value.label,
+      tooltip: value.label,
+      dotClassName: classNames({ "bg-success": isActive, "bg-foreground-faint": !isActive }),
+      className: classNames("w-full min-w-0 border uppercase", {
+        "border-success-border bg-success-soft text-success-emphasis": isActive,
+        "border-border bg-muted text-foreground-subtle": !isActive
+      }),
+      labelClassName: "truncate"
+    }
+  ) });
+};
+export {
+  DataTableStatusCell as default
+};
+//# sourceMappingURL=DataTableStatusCell.js.map

package/dist/components/UI/DataTable/cells/DataTableStatusCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableStatusCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableStatusCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\n\nimport type { IDataTableStatusValue } from '../types';\n\ninterface IDataTableStatusCellProps {\n  value: IDataTableStatusValue | null | undefined;\n}\n\nconst DataTableStatusCell: React.FC<IDataTableStatusCellProps> = ({ value }) => {\n  if (!value) return <span className=\"text-sm text-foreground-faint\">-</span>;\n\n  const isActive = value.tone === 'active';\n\n  return (\n    <div className=\"flex w-full min-w-0\">\n      <OutlinedChip\n        label={value.label}\n        tooltip={value.label}\n        dotClassName={classNames({ 'bg-success': isActive, 'bg-foreground-faint': !isActive })}\n        className={classNames('w-full min-w-0 border uppercase', {\n          'border-success-border bg-success-soft text-success-emphasis': isActive,\n          'border-border bg-muted text-foreground-subtle': !isActive,\n        })}\n        labelClassName=\"truncate\"\n      />\n    </div>\n  );\n};\n\nexport default DataTableStatusCell;\n"],"names":[],"mappings":";;;AAUA,MAAM,sBAA2D,CAAC,EAAE,YAAY;AAC9E,MAAI,CAAC,MAAO,4BAAQ,QAAA,EAAK,WAAU,iCAAgC,UAAA,KAAC;AAEpE,QAAM,WAAW,MAAM,SAAS;AAEhC,SACE,oBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,SAAS,MAAM;AAAA,MACf,cAAc,WAAW,EAAE,cAAc,UAAU,uBAAuB,CAAC,UAAU;AAAA,MACrF,WAAW,WAAW,mCAAmC;AAAA,QACvD,+DAA+D;AAAA,QAC/D,iDAAiD,CAAC;AAAA,MAAA,CACnD;AAAA,MACD,gBAAe;AAAA,IAAA;AAAA,EAAA,GAEnB;AAEJ;"}

package/dist/components/UI/DataTable/cells/DataTableTagCell.d.ts

@@ -0,0 +1,6 @@
+import { IDataTableTagValue } from '../types';
+interface IDataTableTagCellProps {
+    value: IDataTableTagValue | null | undefined;
+}
+declare const DataTableTagCell: React.FC<IDataTableTagCellProps>;
+export default DataTableTagCell;

package/dist/components/UI/DataTable/cells/DataTableTagCell.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import OutlinedChip from "../../Chips/OutlinedChip.js";
+const FULL_WIDTH = "w-full";
+const DataTableTagCell = ({ value }) => {
+  if (!value?.label) return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-faint", children: "-" });
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0", children: /* @__PURE__ */ jsx(
+    OutlinedChip,
+    {
+      label: value.label,
+      tooltip: value.label,
+      chipIcon: value.chipIcon,
+      className: classNames(
+        "w-full min-w-0 border border-border bg-muted uppercase text-foreground-muted",
+        value.className
+      ),
+      wrapperClassName: FULL_WIDTH,
+      labelClassName: "truncate"
+    }
+  ) });
+};
+export {
+  DataTableTagCell as default
+};
+//# sourceMappingURL=DataTableTagCell.js.map

package/dist/components/UI/DataTable/cells/DataTableTagCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableTagCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableTagCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\n\nimport type { IDataTableTagValue } from '../types';\n\ninterface IDataTableTagCellProps {\n  value: IDataTableTagValue | null | undefined;\n}\n\nconst FULL_WIDTH = 'w-full';\n\nconst DataTableTagCell: React.FC<IDataTableTagCellProps> = ({ value }) => {\n  if (!value?.label) return <span className=\"text-sm text-foreground-faint\">-</span>;\n\n  return (\n    <div className=\"flex w-full min-w-0\">\n      <OutlinedChip\n        label={value.label}\n        tooltip={value.label}\n        chipIcon={value.chipIcon}\n        className={classNames(\n          'w-full min-w-0 border border-border bg-muted uppercase text-foreground-muted',\n          value.className,\n        )}\n        wrapperClassName={FULL_WIDTH}\n        labelClassName=\"truncate\"\n      />\n    </div>\n  );\n};\n\nexport default DataTableTagCell;\n"],"names":[],"mappings":";;;AAUA,MAAM,aAAa;AAEnB,MAAM,mBAAqD,CAAC,EAAE,YAAY;AACxE,MAAI,CAAC,OAAO,MAAO,4BAAQ,QAAA,EAAK,WAAU,iCAAgC,UAAA,KAAC;AAE3E,SACE,oBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,SAAS,MAAM;AAAA,MACf,UAAU,MAAM;AAAA,MAChB,WAAW;AAAA,QACT;AAAA,QACA,MAAM;AAAA,MAAA;AAAA,MAER,kBAAkB;AAAA,MAClB,gBAAe;AAAA,IAAA;AAAA,EAAA,GAEnB;AAEJ;"}

package/dist/components/UI/DataTable/cells/DataTableTextCell.d.ts

@@ -0,0 +1,6 @@
+interface IDataTableTextCellProps {
+    value: string | null | undefined;
+    className?: string;
+}
+declare const DataTableTextCell: React.FC<IDataTableTextCellProps>;
+export default DataTableTextCell;

package/dist/components/UI/DataTable/cells/DataTableTextCell.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const DataTableTextCell = ({ value, className }) => /* @__PURE__ */ jsx("span", { className: classNames("block truncate text-sm text-foreground", className), children: value?.length ? value : "-" });
+export {
+  DataTableTextCell as default
+};
+//# sourceMappingURL=DataTableTextCell.js.map

package/dist/components/UI/DataTable/cells/DataTableTextCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableTextCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableTextCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\ninterface IDataTableTextCellProps {\n  value: string | null | undefined;\n  className?: string;\n}\n\nconst DataTableTextCell: React.FC<IDataTableTextCellProps> = ({ value, className }) => (\n  <span className={classNames('block truncate text-sm text-foreground', className)}>{value?.length ? value : '-'}</span>\n);\n\nexport default DataTableTextCell;\n"],"names":[],"mappings":";;AAOA,MAAM,oBAAuD,CAAC,EAAE,OAAO,UAAA,MACrE,oBAAC,QAAA,EAAK,WAAW,WAAW,0CAA0C,SAAS,GAAI,UAAA,OAAO,SAAS,QAAQ,IAAA,CAAI;"}

package/dist/components/UI/DataTable/cells/DataTableThumbnailCell.d.ts

@@ -0,0 +1,6 @@
+import { IDataTableThumbnailValue } from '../types';
+interface IDataTableThumbnailCellProps {
+    value: IDataTableThumbnailValue | null | undefined;
+}
+declare const DataTableThumbnailCell: React.FC<IDataTableThumbnailCellProps>;
+export default DataTableThumbnailCell;

package/dist/components/UI/DataTable/cells/DataTableThumbnailCell.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import ControlledImage from "../../../Form/ControlledImage/index.js";
+const DataTableThumbnailCell = ({ value }) => {
+  if (!value?.src) return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-faint", children: "-" });
+  return /* @__PURE__ */ jsx(ControlledImage, { src: value.src, tooltip: value.label, className: "size-9 rounded-md object-cover" });
+};
+export {
+  DataTableThumbnailCell as default
+};
+//# sourceMappingURL=DataTableThumbnailCell.js.map

package/dist/components/UI/DataTable/cells/DataTableThumbnailCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableThumbnailCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableThumbnailCell.tsx"],"sourcesContent":["import ControlledImage from '@/components/Form/ControlledImage';\n\nimport type { IDataTableThumbnailValue } from '../types';\n\ninterface IDataTableThumbnailCellProps {\n  value: IDataTableThumbnailValue | null | undefined;\n}\n\nconst DataTableThumbnailCell: React.FC<IDataTableThumbnailCellProps> = ({ value }) => {\n  if (!value?.src) return <span className=\"text-sm text-foreground-faint\">-</span>;\n\n  return <ControlledImage src={value.src} tooltip={value.label} className=\"size-9 rounded-md object-cover\" />;\n};\n\nexport default DataTableThumbnailCell;\n"],"names":[],"mappings":";;AAQA,MAAM,yBAAiE,CAAC,EAAE,YAAY;AACpF,MAAI,CAAC,OAAO,IAAK,4BAAQ,QAAA,EAAK,WAAU,iCAAgC,UAAA,KAAC;AAEzE,SAAO,oBAAC,mBAAgB,KAAK,MAAM,KAAK,SAAS,MAAM,OAAO,WAAU,iCAAA,CAAiC;AAC3G;"}

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

@@ -0,0 +1,12 @@
+import { IDataTableColumnConfig, IDataTableRow } from './types';
+export { isBadgeColumnType } from './dataTableColumnWidths';
+export declare const alignClass: (align?: "left" | "center" | "right") => string;
+export declare const FROZEN_COLUMN_SHADOW = "shadow-[-8px_0_8px_-8px_rgb(var(--color-foreground)/0.12)]";
+export declare const FROZEN_LEFT_COLUMN_SHADOW = "shadow-[8px_0_8px_-8px_rgb(var(--color-foreground)/0.12)]";
+export declare const DEFAULT_MIN_WIDTH = "min-w-[11.25rem]";
+export declare const ACTIONS_COLUMN_WIDTH = "w-40 whitespace-nowrap";
+export declare const BADGE_COLUMN_WIDTH = "w-[1%] min-w-0 whitespace-nowrap";
+export interface IResolveColumnWidthClassOptions {
+    isFlexColumn?: boolean;
+}
+export declare const resolveColumnWidthClass: <T extends IDataTableRow>(columnConfig: IDataTableColumnConfig<T> | undefined, fallback: string, options?: IResolveColumnWidthClassOptions) => string;

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

@@ -0,0 +1,29 @@
+import classNames from "classnames";
+import { isBadgeColumnType } from "./dataTableColumnWidths.js";
+const alignClass = (align) => classNames({
+  "text-left": !align || align === "left",
+  "text-center": align === "center",
+  "text-right": align === "right"
+});
+const FROZEN_COLUMN_SHADOW = "shadow-[-8px_0_8px_-8px_rgb(var(--color-foreground)/0.12)]";
+const FROZEN_LEFT_COLUMN_SHADOW = "shadow-[8px_0_8px_-8px_rgb(var(--color-foreground)/0.12)]";
+const DEFAULT_MIN_WIDTH = "min-w-[11.25rem]";
+const ACTIONS_COLUMN_WIDTH = "w-40 whitespace-nowrap";
+const BADGE_COLUMN_WIDTH = "w-[1%] min-w-0 whitespace-nowrap";
+const resolveColumnWidthClass = (columnConfig, fallback, options = {}) => {
+  if (columnConfig?.type === "actions") return ACTIONS_COLUMN_WIDTH;
+  if (isBadgeColumnType(columnConfig?.type)) return BADGE_COLUMN_WIDTH;
+  if (columnConfig?.widthClassName) return columnConfig.widthClassName;
+  return classNames(fallback, options.isFlexColumn && "w-full");
+};
+export {
+  ACTIONS_COLUMN_WIDTH,
+  BADGE_COLUMN_WIDTH,
+  DEFAULT_MIN_WIDTH,
+  FROZEN_COLUMN_SHADOW,
+  FROZEN_LEFT_COLUMN_SHADOW,
+  alignClass,
+  isBadgeColumnType,
+  resolveColumnWidthClass
+};
+//# sourceMappingURL=dataTableClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dataTableClasses.js","sources":["../../../../src/components/UI/DataTable/dataTableClasses.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { isBadgeColumnType } from './dataTableColumnWidths';\nimport type { IDataTableColumnConfig, IDataTableRow } from './types';\n\nexport { isBadgeColumnType } from './dataTableColumnWidths';\n\nexport const alignClass = (align?: 'left' | 'center' | 'right') =>\n  classNames({\n    'text-left': !align || align === 'left',\n    'text-center': align === 'center',\n    'text-right': align === 'right',\n  });\n\nexport const FROZEN_COLUMN_SHADOW = 'shadow-[-8px_0_8px_-8px_rgb(var(--color-foreground)/0.12)]';\n\nexport const FROZEN_LEFT_COLUMN_SHADOW = 'shadow-[8px_0_8px_-8px_rgb(var(--color-foreground)/0.12)]';\n\nexport const DEFAULT_MIN_WIDTH = 'min-w-[11.25rem]';\n\nexport const ACTIONS_COLUMN_WIDTH = 'w-40 whitespace-nowrap';\n\nexport const BADGE_COLUMN_WIDTH = 'w-[1%] min-w-0 whitespace-nowrap';\n\nexport interface IResolveColumnWidthClassOptions {\n  isFlexColumn?: boolean;\n}\n\nexport const resolveColumnWidthClass = <T extends IDataTableRow>(\n  columnConfig: IDataTableColumnConfig<T> | undefined,\n  fallback: string,\n  options: IResolveColumnWidthClassOptions = {},\n): string => {\n  if (columnConfig?.type === 'actions') return ACTIONS_COLUMN_WIDTH;\n  if (isBadgeColumnType(columnConfig?.type)) return BADGE_COLUMN_WIDTH;\n  if (columnConfig?.widthClassName) return columnConfig.widthClassName;\n\n  return classNames(fallback, options.isFlexColumn && 'w-full');\n};\n"],"names":[],"mappings":";;AAOO,MAAM,aAAa,CAAC,UACzB,WAAW;AAAA,EACT,aAAa,CAAC,SAAS,UAAU;AAAA,EACjC,eAAe,UAAU;AAAA,EACzB,cAAc,UAAU;AAC1B,CAAC;AAEI,MAAM,uBAAuB;AAE7B,MAAM,4BAA4B;AAElC,MAAM,oBAAoB;AAE1B,MAAM,uBAAuB;AAE7B,MAAM,qBAAqB;AAM3B,MAAM,0BAA0B,CACrC,cACA,UACA,UAA2C,CAAA,MAChC;AACX,MAAI,cAAc,SAAS,UAAW,QAAO;AAC7C,MAAI,kBAAkB,cAAc,IAAI,EAAG,QAAO;AAClD,MAAI,cAAc,eAAgB,QAAO,aAAa;AAEtD,SAAO,WAAW,UAAU,QAAQ,gBAAgB,QAAQ;AAC9D;"}

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

@@ -0,0 +1,15 @@
+import { IDataTableColumnConfig, IDataTableRow, TDataTableCellType } from './types';
+export declare const DEFAULT_COLUMN_WIDTH_PX = 180;
+export declare const ACTIONS_COLUMN_WIDTH_PX = 160;
+export declare const BADGE_COLUMN_WIDTH_PX = 96;
+export declare const isBadgeColumnType: (type?: TDataTableCellType) => boolean;
+export interface IEstimateColumnHeaderMinWidthContext {
+    isFirstColumn?: boolean;
+    hasColumnToggle?: boolean;
+}
+export declare const estimateColumnHeaderMinWidthPx: <T extends IDataTableRow>(columnConfig: IDataTableColumnConfig<T> | undefined, context?: IEstimateColumnHeaderMinWidthContext) => number;
+export declare const resolveTypeSeedWidthPx: <T extends IDataTableRow>(columnConfig: IDataTableColumnConfig<T> | undefined) => number;
+export declare const resolveColumnMinWidthPx: <T extends IDataTableRow>(columnConfig: IDataTableColumnConfig<T> | undefined, context?: IEstimateColumnHeaderMinWidthContext) => number;
+export declare const parseWidthClassToPx: (widthClassName?: string) => number | undefined;
+export declare const estimateActionsColumnWidthPx: (visibleActionCount: number) => number;
+export declare const computeColumnContentWidths: <T extends IDataTableRow>(columns: Array<IDataTableColumnConfig<T>>, rows: Array<T>) => Map<string, number>;