@comitor/ui 1.9.0 → 1.11.0

package/dist/data-grid/data-grid-cell-variants.js

@@ -0,0 +1,1734 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { vi } from "date-fns/locale";
+import { Check, Upload, X } from "lucide-react";
+import * as React from "react";
+import { Badge, badgeVariants } from "../components/ui/badge.js";
+import { Button } from "../components/ui/button.js";
+import { Calendar } from "../components/ui/calendar.js";
+import { Checkbox } from "../components/ui/checkbox.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from "../components/ui/command.js";
+import { Popover, PopoverAnchor, PopoverContent } from "../components/ui/popover.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select.js";
+import { Skeleton } from "../components/ui/skeleton.js";
+import { Textarea } from "../components/ui/textarea.js";
+import { cn } from "../lib/cn.js";
+import { DataGridCellWrapper } from "./data-grid-cell-wrapper.js";
+import { msg } from "./messages.js";
+import { toastError, toastMessage } from "./toast.js";
+import { useBadgeOverflow } from "./use-badge-overflow.js";
+import { useDebouncedCallback } from "./use-debounced-callback.js";
+import {
+  formatDateForDisplay,
+  formatDateToString,
+  formatFileSize,
+  generateFileId,
+  getCellKey,
+  getFileIcon,
+  getLineCount,
+  getUrlHref,
+  parseLocalDate
+} from "./utils.js";
+function ShortTextCell({
+  cell,
+  tableMeta,
+  rowIndex,
+  columnId,
+  rowHeight,
+  isEditing,
+  isFocused,
+  isSelected,
+  isSearchMatch,
+  isActiveSearchMatch,
+  readOnly
+}) {
+  const initialValue = cell.getValue();
+  const [value, setValue] = React.useState(initialValue);
+  const cellRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const prevIsEditingRef = React.useRef(false);
+  const prevInitialValueRef = React.useRef(initialValue);
+  if (initialValue !== prevInitialValueRef.current) {
+    prevInitialValueRef.current = initialValue;
+    setValue(initialValue);
+    if (cellRef.current && !isEditing) {
+      cellRef.current.textContent = initialValue;
+    }
+  }
+  const onBlur = React.useCallback(() => {
+    const currentValue = cellRef.current?.textContent ?? "";
+    if (!readOnly && currentValue !== initialValue) {
+      tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue });
+    }
+    tableMeta?.onCellEditingStop?.();
+  }, [tableMeta, rowIndex, columnId, initialValue, readOnly]);
+  const onInput = React.useCallback((event) => {
+    const currentValue = event.currentTarget.textContent ?? "";
+    setValue(currentValue);
+  }, []);
+  const onWrapperKeyDown = React.useCallback(
+    (event) => {
+      if (isEditing) {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          const currentValue = cellRef.current?.textContent ?? "";
+          if (currentValue !== initialValue) {
+            tableMeta?.onDataUpdate?.({
+              rowIndex,
+              columnId,
+              value: currentValue
+            });
+          }
+          tableMeta?.onCellEditingStop?.({ moveToNextRow: true });
+        } else if (event.key === "Tab") {
+          event.preventDefault();
+          const currentValue = cellRef.current?.textContent ?? "";
+          if (currentValue !== initialValue) {
+            tableMeta?.onDataUpdate?.({
+              rowIndex,
+              columnId,
+              value: currentValue
+            });
+          }
+          tableMeta?.onCellEditingStop?.({
+            direction: event.shiftKey ? "left" : "right"
+          });
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          setValue(initialValue);
+          cellRef.current?.blur();
+        }
+      } else if (isFocused && event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+        setValue(event.key);
+        queueMicrotask(() => {
+          if (cellRef.current && cellRef.current.contentEditable === "true") {
+            cellRef.current.textContent = event.key;
+            const range = document.createRange();
+            const selection = window.getSelection();
+            range.selectNodeContents(cellRef.current);
+            range.collapse(false);
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+          }
+        });
+      }
+    },
+    [isEditing, isFocused, initialValue, tableMeta, rowIndex, columnId]
+  );
+  React.useEffect(() => {
+    const wasEditing = prevIsEditingRef.current;
+    prevIsEditingRef.current = isEditing;
+    if (isEditing && !wasEditing && cellRef.current) {
+      cellRef.current.focus();
+      if (!cellRef.current.textContent && value) {
+        cellRef.current.textContent = value;
+      }
+      if (cellRef.current.textContent) {
+        const range = document.createRange();
+        const selection = window.getSelection();
+        range.selectNodeContents(cellRef.current);
+        range.collapse(false);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+    }
+  }, [isEditing, value]);
+  const displayValue = !isEditing ? value ?? "" : "";
+  return /* @__PURE__ */ jsx(
+    DataGridCellWrapper,
+    {
+      ref: containerRef,
+      cell,
+      tableMeta,
+      rowIndex,
+      columnId,
+      rowHeight,
+      isEditing,
+      isFocused,
+      isSelected,
+      isSearchMatch,
+      isActiveSearchMatch,
+      readOnly,
+      onKeyDown: onWrapperKeyDown,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "textbox",
+          "data-slot": "grid-cell-content",
+          contentEditable: isEditing,
+          tabIndex: -1,
+          ref: cellRef,
+          onBlur,
+          onInput,
+          suppressContentEditableWarning: true,
+          className: cn("size-full overflow-hidden outline-none", {
+            "whitespace-nowrap [&_*]:inline [&_*]:whitespace-nowrap [&_br]:hidden": isEditing
+          }),
+          children: displayValue
+        }
+      )
+    }
+  );
+}
+function LongTextCell({
+  cell,
+  tableMeta,
+  rowIndex,
+  columnId,
+  rowHeight,
+  isFocused,
+  isEditing,
+  isSelected,
+  isSearchMatch,
+  isActiveSearchMatch,
+  readOnly
+}) {
+  const initialValue = cell.getValue();
+  const [value, setValue] = React.useState(initialValue ?? "");
+  const textareaRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const pendingCharRef = React.useRef(null);
+  const sideOffset = -(containerRef.current?.clientHeight ?? 0);
+  const prevInitialValueRef = React.useRef(initialValue);
+  if (initialValue !== prevInitialValueRef.current) {
+    prevInitialValueRef.current = initialValue;
+    setValue(initialValue ?? "");
+  }
+  const debouncedSave = useDebouncedCallback((newValue) => {
+    if (!readOnly) {
+      tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });
+    }
+  }, 300);
+  const onSave = React.useCallback(() => {
+    if (!readOnly && value !== initialValue) {
+      tableMeta?.onDataUpdate?.({ rowIndex, columnId, value });
+    }
+    tableMeta?.onCellEditingStop?.();
+  }, [tableMeta, value, initialValue, rowIndex, columnId, readOnly]);
+  const onCancel = React.useCallback(() => {
+    setValue(initialValue ?? "");
+    if (!readOnly) {
+      tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue });
+    }
+    tableMeta?.onCellEditingStop?.();
+  }, [tableMeta, initialValue, rowIndex, columnId, readOnly]);
+  const onOpenChange = React.useCallback(
+    (open) => {
+      if (open && !readOnly) {
+        tableMeta?.onCellEditingStart?.(rowIndex, columnId);
+      } else {
+        if (!readOnly && value !== initialValue) {
+          tableMeta?.onDataUpdate?.({ rowIndex, columnId, value });
+        }
+        tableMeta?.onCellEditingStop?.();
+      }
+    },
+    [tableMeta, value, initialValue, rowIndex, columnId, readOnly]
+  );
+  const onOpenAutoFocus = React.useCallback((event) => {
+    event.preventDefault();
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+      const length = textareaRef.current.value.length;
+      textareaRef.current.setSelectionRange(length, length);
+      if (pendingCharRef.current) {
+        const char = pendingCharRef.current;
+        pendingCharRef.current = null;
+        requestAnimationFrame(() => {
+          if (textareaRef.current && document.activeElement === textareaRef.current) {
+            document.execCommand("insertText", false, char);
+            textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
+          }
+        });
+      } else {
+        textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
+      }
+    }
+  }, []);
+  const onWrapperKeyDown = React.useCallback(
+    (event) => {
+      if (isFocused && !isEditing && !readOnly && event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+        pendingCharRef.current = event.key;
+      }
+    },
+    [isFocused, isEditing, readOnly]
+  );
+  const onBlur = React.useCallback(() => {
+    if (!readOnly && value !== initialValue) {
+      tableMeta?.onDataUpdate?.({ rowIndex, columnId, value });
+    }
+    tableMeta?.onCellEditingStop?.();
+  }, [tableMeta, value, initialValue, rowIndex, columnId, readOnly]);
+  const onChange = React.useCallback(
+    (event) => {
+      const newValue = event.target.value;
+      setValue(newValue);
+      debouncedSave(newValue);
+    },
+    [debouncedSave]
+  );
+  const onKeyDown = React.useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel();
+      } else if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        onSave();
+      } else if (event.key === "Tab") {
+        event.preventDefault();
+        if (value !== initialValue) {
+          tableMeta?.onDataUpdate?.({ rowIndex, columnId, value });
+        }
+        tableMeta?.onCellEditingStop?.({
+          direction: event.shiftKey ? "left" : "right"
+        });
+        return;
+      }
+      event.stopPropagation();
+    },
+    [onSave, onCancel, value, initialValue, tableMeta, rowIndex, columnId]
+  );
+  return /* @__PURE__ */ jsxs(Popover, { open: isEditing, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx(
+      DataGridCellWrapper,
+      {
+        ref: containerRef,
+        cell,
+        tableMeta,
+        rowIndex,
+        columnId,
+        rowHeight,
+        isEditing,
+        isFocused,
+        isSelected,
+        isSearchMatch,
+        isActiveSearchMatch,
+        readOnly,
+        onKeyDown: onWrapperKeyDown,
+        children: /* @__PURE__ */ jsx("span", { "data-slot": "grid-cell-content", children: value })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        "data-grid-cell-editor": "",
+        align: "start",
+        side: "bottom",
+        sideOffset,
+        className: "w-[400px] rounded-none p-0",
+        onOpenAutoFocus,
+        children: /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            placeholder: msg.cell.longTextPlaceholder,
+            "aria-label": msg.cell.longTextPlaceholder,
+            className: "max-h-[300px] min-h-[150px] resize-none overflow-y-auto rounded-none border-0 shadow-none focus-visible:ring-1 focus-visible:ring-ring/30",
+            ref: textareaRef,
+            value,
+            onBlur,
+            onChange,
+            onKeyDown
+          }
+        )
+      }
+    )
+  ] });
+}
+function NumberCell({
+  cell,
+  tableMeta,
+  rowIndex,
+  columnId,
+  rowHeight,
+  isFocused,
+  isEditing,
+  isSelected,
+  isSearchMatch,
+  isActiveSearchMatch,
+  readOnly
+}) {
+  const initialValue = cell.getValue();
+  const [value, setValue] = React.useState(String(initialValue ?? ""));
+  const inputRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const cellOpts = cell.column.columnDef.meta?.cell;
+  const numberCellOpts = cellOpts?.variant === "number" ? cellOpts : null;
+  const min = numberCellOpts?.min;
+  const max = numberCellOpts?.max;
+  const step = numberCellOpts?.step;
+  const prevIsEditingRef = React.useRef(false);
+  const prevInitialValueRef = React.useRef(initialValue);
+  if (initialValue !== prevInitialValueRef.current) {
+    prevInitialValueRef.current = initialValue;
+    setValue(String(initialValue ?? ""));
+  }
+  const onBlur = React.useCallback(() => {
+    const numValue = value === "" ? null : Number(value);
+    if (!readOnly && numValue !== initialValue) {
+      tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });
+    }
+    tableMeta?.onCellEditingStop?.();
+  }, [tableMeta, rowIndex, columnId, initialValue, value, readOnly]);
+  const onChange = React.useCallback((event) => {
+    setValue(event.target.value);
+  }, []);
+  const onWrapperKeyDown = React.useCallback(
+    (event) => {
+      if (isEditing) {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          const numValue = value === "" ? null : Number(value);
+          if (numValue !== initialValue) {
+            tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });
+          }
+          tableMeta?.onCellEditingStop?.({ moveToNextRow: true });
+        } else if (event.key === "Tab") {
+          event.preventDefault();
+          const numValue = value === "" ? null : Number(value);
+          if (numValue !== initialValue) {
+            tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: numValue });
+          }
+          tableMeta?.onCellEditingStop?.({
+            direction: event.shiftKey ? "left" : "right"
+          });
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          setValue(String(initialValue ?? ""));
+          inputRef.current?.blur();
+        }
+      } else if (isFocused) {
+        if (event.key === "Backspace") {
+          setValue("");
+        } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+          setValue(event.key);
+        }
+      }
+    },
+    [isEditing, isFocused, initialValue, tableMeta, rowIndex, columnId, value]
+  );
+  React.useEffect(() => {
+    const wasEditing = prevIsEditingRef.current;
+    prevIsEditingRef.current = isEditing;
+    if (isEditing && !wasEditing && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditing]);
+  return /* @__PURE__ */ jsx(
+    DataGridCellWrapper,
+    {
+      ref: containerRef,
+      cell,
+      tableMeta,
+      rowIndex,
+      columnId,
+      rowHeight,
+      isEditing,
+      isFocused,
+      isSelected,
+      isSearchMatch,
+      isActiveSearchMatch,
+      readOnly,
+      onKeyDown: onWrapperKeyDown,
+      children: isEditing ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          ref: inputRef,
+          value,
+          min,
+          max,
+          step,
+          className: "w-full border-none bg-transparent p-0 outline-none focus-visible:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+          onBlur,
+          onChange
+        }
+      ) : /* @__PURE__ */ jsx("span", { "data-slot": "grid-cell-content", children: value })
+    }
+  );
+}
+function UrlCell({
+  cell,
+  tableMeta,
+  rowIndex,
+  columnId,
+  rowHeight,
+  isEditing,
+  isFocused,
+  isSelected,
+  isSearchMatch,
+  isActiveSearchMatch,
+  readOnly
+}) {
+  const initialValue = cell.getValue();
+  const [value, setValue] = React.useState(initialValue ?? "");
+  const cellRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const prevIsEditingRef = React.useRef(false);
+  const prevInitialValueRef = React.useRef(initialValue);
+  if (initialValue !== prevInitialValueRef.current) {
+    prevInitialValueRef.current = initialValue;
+    setValue(initialValue ?? "");
+    if (cellRef.current && !isEditing) {
+      cellRef.current.textContent = initialValue ?? "";
+    }
+  }
+  const onBlur = React.useCallback(() => {
+    const currentValue = cellRef.current?.textContent?.trim() ?? "";
+    if (!readOnly && currentValue !== initialValue) {
+      tableMeta?.onDataUpdate?.({
+        rowIndex,
+        columnId,
+        value: currentValue || null
+      });
+    }
+    tableMeta?.onCellEditingStop?.();
+  }, [tableMeta, rowIndex, columnId, initialValue, readOnly]);
+  const onInput = React.useCallback((event) => {
+    const currentValue = event.currentTarget.textContent ?? "";
+    setValue(currentValue);
+  }, []);
+  const onWrapperKeyDown = React.useCallback(
+    (event) => {
+      if (isEditing) {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          const currentValue = cellRef.current?.textContent?.trim() ?? "";
+          if (!readOnly && currentValue !== initialValue) {
+            tableMeta?.onDataUpdate?.({
+              rowIndex,
+              columnId,
+              value: currentValue || null
+            });
+          }
+          tableMeta?.onCellEditingStop?.({ moveToNextRow: true });
+        } else if (event.key === "Tab") {
+          event.preventDefault();
+          const currentValue = cellRef.current?.textContent?.trim() ?? "";
+          if (!readOnly && currentValue !== initialValue) {
+            tableMeta?.onDataUpdate?.({
+              rowIndex,
+              columnId,
+              value: currentValue || null
+            });
+          }
+          tableMeta?.onCellEditingStop?.({
+            direction: event.shiftKey ? "left" : "right"
+          });
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          setValue(initialValue ?? "");
+          cellRef.current?.blur();
+        }
+      } else if (isFocused && !readOnly && event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+        setValue(event.key);
+        queueMicrotask(() => {
+          if (cellRef.current && cellRef.current.contentEditable === "true") {
+            cellRef.current.textContent = event.key;
+            const range = document.createRange();
+            const selection = window.getSelection();
+            range.selectNodeContents(cellRef.current);
+            range.collapse(false);
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+          }
+        });
+      }
+    },
+    [isEditing, isFocused, initialValue, tableMeta, rowIndex, columnId, readOnly]
+  );
+  const onLinkClick = React.useCallback(
+    (event) => {
+      if (isEditing) {
+        event.preventDefault();
+        return;
+      }
+      const href = getUrlHref(value);
+      if (!href) {
+        event.preventDefault();
+        toastError(msg.cell.invalidUrlTitle, msg.cell.invalidUrlDescription);
+        return;
+      }
+      event.stopPropagation();
+    },
+    [isEditing, value]
+  );
+  React.useEffect(() => {
+    const wasEditing = prevIsEditingRef.current;
+    prevIsEditingRef.current = isEditing;
+    if (isEditing && !wasEditing && cellRef.current) {
+      cellRef.current.focus();
+      if (!cellRef.current.textContent && value) {
+        cellRef.current.textContent = value;
+      }
+      if (cellRef.current.textContent) {
+        const range = document.createRange();
+        const selection = window.getSelection();
+        range.selectNodeContents(cellRef.current);
+        range.collapse(false);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+    }
+  }, [isEditing, value]);
+  const displayValue = !isEditing ? value ?? "" : "";
+  const urlHref = displayValue ? getUrlHref(displayValue) : "";
+  const isDangerousUrl = displayValue && !urlHref;
+  return /* @__PURE__ */ jsx(
+    DataGridCellWrapper,
+    {
+      ref: containerRef,
+      cell,
+      tableMeta,
+      rowIndex,
+      columnId,
+      rowHeight,
+      isEditing,
+      isFocused,
+      isSelected,
+      isSearchMatch,
+      isActiveSearchMatch,
+      readOnly,
+      onKeyDown: onWrapperKeyDown,
+      children: !isEditing && displayValue ? /* @__PURE__ */ jsx("div", { "data-slot": "grid-cell-content", className: "size-full overflow-hidden", children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          "data-focused": isFocused && !isDangerousUrl ? "" : void 0,
+          "data-invalid": isDangerousUrl ? "" : void 0,
+          href: urlHref,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "truncate text-link-ink underline decoration-link-ink underline-offset-2 hover:text-link-ink-hover hover:decoration-link-ink-hover data-[invalid]:cursor-not-allowed data-[focused]:text-foreground data-[invalid]:text-destructive-ink data-[focused]:decoration-foreground/50 data-[invalid]:decoration-destructive-ink data-[focused]:hover:decoration-foreground/70 data-[invalid]:hover:decoration-destructive-ink",
+          onClick: onLinkClick,
+          children: displayValue
+        }
+      ) }) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "textbox",
+          "data-slot": "grid-cell-content",
+          contentEditable: isEditing,
+          tabIndex: -1,
+          ref: cellRef,
+          onBlur,
+          onInput,
+          suppressContentEditableWarning: true,
+          className: cn("size-full overflow-hidden outline-none focus-visible:outline-none", {
+            "whitespace-nowrap [&_*]:inline [&_*]:whitespace-nowrap [&_br]:hidden": isEditing
+          }),
+          children: displayValue
+        }
+      )
+    }
+  );
+}
+function CheckboxCell({
+  cell,
+  tableMeta,
+  rowIndex,
+  columnId,
+  rowHeight,
+  isFocused,
+  isSelected,
+  isSearchMatch,
+  isActiveSearchMatch,
+  readOnly
+}) {
+  const initialValue = cell.getValue();
+  const [value, setValue] = React.useState(Boolean(initialValue));
+  const containerRef = React.useRef(null);
+  const prevInitialValueRef = React.useRef(initialValue);
+  if (initialValue !== prevInitialValueRef.current) {
+    prevInitialValueRef.current = initialValue;
+    setValue(Boolean(initialValue));
+  }
+  const onCheckedChange = React.useCallback(
+    (checked) => {
+      if (readOnly) return;
+      setValue(checked);
+      tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: checked });
+    },
+    [tableMeta, rowIndex, columnId, readOnly]
+  );
+  const onWrapperKeyDown = React.useCallback(
+    (event) => {
+      if (isFocused && !readOnly && (event.key === " " || event.key === "Enter")) {
+        event.preventDefault();
+        event.stopPropagation();
+        onCheckedChange(!value);
+      } else if (isFocused && event.key === "Tab") {
+        event.preventDefault();
+        tableMeta?.onCellEditingStop?.({
+          direction: event.shiftKey ? "left" : "right"
+        });
+      }
+    },
+    [isFocused, value, onCheckedChange, tableMeta, readOnly]
+  );
+  const onWrapperClick = React.useCallback(
+    (event) => {
+      if (isFocused && !readOnly) {
+        event.preventDefault();
+        event.stopPropagation();
+        onCheckedChange(!value);
+      }
+    },
+    [isFocused, value, onCheckedChange, readOnly]
+  );
+  const onCheckboxClick = React.useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+  const onCheckboxMouseDown = React.useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+  const onCheckboxDoubleClick = React.useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    DataGridCellWrapper,
+    {
+      ref: containerRef,
+      cell,
+      tableMeta,
+      rowIndex,
+      columnId,
+      rowHeight,
+      isEditing: false,
+      isFocused,
+      isSelected,
+      isSearchMatch,
+      isActiveSearchMatch,
+      readOnly,
+      className: "flex size-full justify-center",
+      onClick: onWrapperClick,
+      onKeyDown: onWrapperKeyDown,
+      children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: value,
+          onCheckedChange,
+          disabled: readOnly,
+          onClick: onCheckboxClick,
+          onMouseDown: onCheckboxMouseDown,
+          onDoubleClick: onCheckboxDoubleClick
+        }
+      )
+    }
+  );
+}
+function SelectCell({
+  cell,
+  tableMeta,
+  rowIndex,
+  columnId,
+  rowHeight,
+  isFocused,
+  isEditing,
+  isSelected,
+  isSearchMatch,
+  isActiveSearchMatch,
+  readOnly
+}) {
+  const initialValue = cell.getValue() ?? void 0;
+  const [value, setValue] = React.useState(initialValue);
+  const containerRef = React.useRef(null);
+  const cellOpts = cell.column.columnDef.meta?.cell;
+  const options = React.useMemo(() => cellOpts?.variant === "select" ? cellOpts.options : [], [cellOpts]);
+  const optionByValue = React.useMemo(() => new Map(options.map((option) => [option.value, option])), [options]);
+  const prevInitialValueRef = React.useRef(initialValue);
+  if (initialValue !== prevInitialValueRef.current) {
+    prevInitialValueRef.current = initialValue;
+    setValue(initialValue);
+  }
+  const onValueChange = React.useCallback(
+    (newValue) => {
+      if (readOnly) return;
+      setValue(newValue);
+      tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: newValue });
+      tableMeta?.onCellEditingStop?.();
+    },
+    [tableMeta, rowIndex, columnId, readOnly]
+  );
+  const onOpenChange = React.useCallback(
+    (open) => {
+      if (open && !readOnly) {
+        tableMeta?.onCellEditingStart?.(rowIndex, columnId);
+      } else {
+        tableMeta?.onCellEditingStop?.();
+      }
+    },
+    [tableMeta, rowIndex, columnId, readOnly]
+  );
+  const onWrapperKeyDown = React.useCallback(
+    (event) => {
+      if (isEditing && event.key === "Escape") {
+        event.preventDefault();
+        setValue(initialValue);
+        tableMeta?.onCellEditingStop?.();
+      } else if (isFocused && event.key === "Tab") {
+        event.preventDefault();
+        tableMeta?.onCellEditingStop?.({
+          direction: event.shiftKey ? "left" : "right"
+        });
+      }
+    },
+    [isEditing, isFocused, initialValue, tableMeta]
+  );
+  const displayLabel = value ? optionByValue.get(value)?.label ?? value : null;
+  return /* @__PURE__ */ jsx(
+    DataGridCellWrapper,
+    {
+      ref: containerRef,
+      cell,
+      tableMeta,
+      rowIndex,
+      columnId,
+      rowHeight,
+      isEditing,
+      isFocused,
+      isSelected,
+      isSearchMatch,
+      isActiveSearchMatch,
+      readOnly,
+      onKeyDown: onWrapperKeyDown,
+      children: isEditing ? /* @__PURE__ */ jsxs(Select, { value, onValueChange, open: isEditing, onOpenChange, children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            "aria-label": cell.column.columnDef.meta?.label ?? columnId,
+            className: "size-full items-start border-none bg-transparent p-0 shadow-none focus:ring-0 focus-visible:ring-0 [&>span]:line-clamp-none [&_svg]:hidden",
+            children: displayLabel ? (
+              // span (không dùng <Badge> vì Badge render <div>, đặt trong <button> là HTML sai)
+              /* @__PURE__ */ jsx("span", { className: cn(badgeVariants({ variant: "secondary" }), "whitespace-pre-wrap px-1.5 py-px"), children: /* @__PURE__ */ jsx(SelectValue, {}) })
+            ) : /* @__PURE__ */ jsx(SelectValue, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SelectContent,
+          {
+            "data-grid-cell-editor": "",
+            align: "start",
+            alignOffset: -8,
+            sideOffset: -8,
+            className: "min-w-[calc(var(--radix-select-trigger-width)+16px)]",
+            children: /* @__PURE__ */ jsx(SelectGroup, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+          }
+        )
+      ] }) : displayLabel ? /* @__PURE__ */ jsx(Badge, { "data-slot": "grid-cell-content", variant: "secondary", className: "whitespace-pre-wrap px-1.5 py-px", children: displayLabel }) : null
+    }
+  );
+}
+function MultiSelectCell({
+  cell,
+  tableMeta,
+  rowIndex,
+  columnId,
+  rowHeight,
+  isFocused,
+  isEditing,
+  isSelected,
+  isSearchMatch,
+  isActiveSearchMatch,
+  readOnly
+}) {
+  const cellValue = React.useMemo(() => {
+    const value = cell.getValue();
+    return value ?? [];
+  }, [cell]);
+  const cellKey = getCellKey(rowIndex, columnId);
+  const prevCellKeyRef = React.useRef(cellKey);
+  const [selectedValues, setSelectedValues] = React.useState(cellValue);
+  const [searchValue, setSearchValue] = React.useState("");
+  const containerRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const cellOpts = cell.column.columnDef.meta?.cell;
+  const options = React.useMemo(() => cellOpts?.variant === "multi-select" ? cellOpts.options : [], [cellOpts]);
+  const optionByValue = React.useMemo(() => new Map(options.map((option) => [option.value, option])), [options]);
+  const sideOffset = -(containerRef.current?.clientHeight ?? 0);
+  const prevCellValueRef = React.useRef(cellValue);
+  if (cellValue !== prevCellValueRef.current) {
+    prevCellValueRef.current = cellValue;
+    setSelectedValues(cellValue);
+  }
+  if (prevCellKeyRef.current !== cellKey) {
+    prevCellKeyRef.current = cellKey;
+    setSearchValue("");
+  }
+  const onValueChange = React.useCallback(
+    (value) => {
+      if (readOnly) return;
+      let newValues = [];
+      setSelectedValues((curr) => {
+        newValues = curr.includes(value) ? curr.filter((v) => v !== value) : [...curr, value];
+        return newValues;
+      });
+      queueMicrotask(() => {
+        tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });
+        inputRef.current?.focus();
+      });
+      setSearchValue("");
+    },
+    [tableMeta, rowIndex, columnId, readOnly]
+  );
+  const removeValue = React.useCallback(
+    (valueToRemove, event) => {
+      if (readOnly) return;
+      event?.stopPropagation();
+      event?.preventDefault();
+      let newValues = [];
+      setSelectedValues((curr) => {
+        newValues = curr.filter((v) => v !== valueToRemove);
+        return newValues;
+      });
+      queueMicrotask(() => {
+        tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });
+        inputRef.current?.focus();
+      });
+    },
+    [tableMeta, rowIndex, columnId, readOnly]
+  );
+  const clearAll = React.useCallback(() => {
+    if (readOnly) return;
+    setSelectedValues([]);
+    tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: [] });
+    queueMicrotask(() => inputRef.current?.focus());
+  }, [tableMeta, rowIndex, columnId, readOnly]);
+  const onOpenChange = React.useCallback(
+    (open) => {
+      if (open && !readOnly) {
+        tableMeta?.onCellEditingStart?.(rowIndex, columnId);
+      } else {
+        setSearchValue("");
+        tableMeta?.onCellEditingStop?.();
+      }
+    },
+    [tableMeta, rowIndex, columnId, readOnly]
+  );
+  const onOpenAutoFocus = React.useCallback((event) => {
+    event.preventDefault();
+    inputRef.current?.focus();
+  }, []);
+  const onWrapperKeyDown = React.useCallback(
+    (event) => {
+      if (isEditing && event.key === "Escape") {
+        event.preventDefault();
+        setSelectedValues(cellValue);
+        setSearchValue("");
+        tableMeta?.onCellEditingStop?.();
+      } else if (isFocused && event.key === "Tab") {
+        event.preventDefault();
+        setSearchValue("");
+        tableMeta?.onCellEditingStop?.({
+          direction: event.shiftKey ? "left" : "right"
+        });
+      }
+    },
+    [isEditing, isFocused, cellValue, tableMeta]
+  );
+  const onInputKeyDown = React.useCallback(
+    (event) => {
+      if (event.key === "Backspace" && searchValue === "") {
+        event.preventDefault();
+        let newValues = null;
+        setSelectedValues((curr) => {
+          if (curr.length === 0) return curr;
+          newValues = curr.slice(0, -1);
+          return newValues;
+        });
+        queueMicrotask(() => {
+          if (newValues !== null) {
+            tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });
+          }
+          inputRef.current?.focus();
+        });
+      }
+      if (event.key === "Escape") {
+        event.stopPropagation();
+      }
+    },
+    [searchValue, tableMeta, rowIndex, columnId]
+  );
+  const displayLabels = selectedValues.map((val) => optionByValue.get(val)?.label ?? val).filter(Boolean);
+  const selectedValuesSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const lineCount = getLineCount(rowHeight);
+  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } = useBadgeOverflow({
+    items: displayLabels,
+    getLabel: (label) => label,
+    containerRef,
+    lineCount
+  });
+  return /* @__PURE__ */ jsxs(
+    DataGridCellWrapper,
+    {
+      ref: containerRef,
+      cell,
+      tableMeta,
+      rowIndex,
+      columnId,
+      rowHeight,
+      isEditing,
+      isFocused,
+      isSelected,
+      isSearchMatch,
+      isActiveSearchMatch,
+      readOnly,
+      onKeyDown: onWrapperKeyDown,
+      children: [
+        isEditing ? /* @__PURE__ */ jsxs(Popover, { open: isEditing, onOpenChange, children: [
+          /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0" }) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              "data-grid-cell-editor": "",
+              align: "start",
+              sideOffset,
+              className: "w-[300px] rounded-none p-0",
+              onOpenAutoFocus,
+              children: /* @__PURE__ */ jsxs(Command, { className: "[&_[data-slot=command-input-wrapper]]:h-auto [&_[data-slot=command-input-wrapper]]:gap-0 [&_[data-slot=command-input-wrapper]]:border-none [&_[data-slot=command-input-wrapper]]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5", children: [
+                  selectedValues.map((value) => {
+                    const label = optionByValue.get(value)?.label ?? value;
+                    return /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1 px-1.5 py-px", children: [
+                      label,
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": `${msg.cell.clearAll}: ${label}`,
+                          onClick: (event) => removeValue(value, event),
+                          onPointerDown: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                          },
+                          children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3" })
+                        }
+                      )
+                    ] }, value);
+                  }),
+                  /* @__PURE__ */ jsx(
+                    CommandInput,
+                    {
+                      ref: inputRef,
+                      value: searchValue,
+                      onValueChange: setSearchValue,
+                      onKeyDown: onInputKeyDown,
+                      placeholder: msg.cell.optionSearchPlaceholder,
+                      "aria-label": msg.cell.optionSearchPlaceholder,
+                      className: "h-auto flex-1 p-0"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(CommandList, { className: "max-h-full", children: [
+                  /* @__PURE__ */ jsx(CommandEmpty, { children: msg.cell.optionEmpty }),
+                  /* @__PURE__ */ jsx(CommandGroup, { className: "max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden", children: options.map((option) => {
+                    const isSelected2 = selectedValuesSet.has(option.value);
+                    return /* @__PURE__ */ jsxs(CommandItem, { value: option.label, onSelect: () => onValueChange(option.value), children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "flex size-4 items-center justify-center rounded-sm border border-choice-edge",
+                            isSelected2 ? "border-control-on bg-control-on text-control-check" : "[&_svg]:invisible"
+                          ),
+                          children: /* @__PURE__ */ jsx(Check, { className: "size-3" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: option.label })
+                    ] }, option.value);
+                  }) }),
+                  selectedValues.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(CommandSeparator, {}),
+                    /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx(CommandItem, { onSelect: clearAll, className: "justify-center text-muted-foreground", children: msg.cell.clearAll }) })
+                  ] })
+                ] })
+              ] })
+            }
+          )
+        ] }) : null,
+        displayLabels.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 overflow-hidden", children: [
+          visibleLabels.map((label, index) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "px-1.5 py-px", children: label }, selectedValues[index])),
+          hiddenBadgeCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "px-1.5 py-px text-muted-foreground", children: [
+            "+",
+            hiddenBadgeCount
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+function DateCell({
+  cell,
+  tableMeta,
+  rowIndex,
+  columnId,
+  rowHeight,
+  isFocused,
+  isEditing,
+  isSelected,
+  isSearchMatch,
+  isActiveSearchMatch,
+  readOnly
+}) {
+  const initialValue = cell.getValue();
+  const [value, setValue] = React.useState(initialValue ?? "");
+  const containerRef = React.useRef(null);
+  const prevInitialValueRef = React.useRef(initialValue);
+  if (initialValue !== prevInitialValueRef.current) {
+    prevInitialValueRef.current = initialValue;
+    setValue(initialValue ?? "");
+  }
+  const selectedDate = value ? parseLocalDate(value) ?? void 0 : void 0;
+  const onDateSelect = React.useCallback(
+    (date) => {
+      if (!date || readOnly) return;
+      const formattedDate = formatDateToString(date);
+      setValue(formattedDate);
+      tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: formattedDate });
+      tableMeta?.onCellEditingStop?.();
+    },
+    [tableMeta, rowIndex, columnId, readOnly]
+  );
+  const onOpenChange = React.useCallback(
+    (open) => {
+      if (open && !readOnly) {
+        tableMeta?.onCellEditingStart?.(rowIndex, columnId);
+      } else {
+        tableMeta?.onCellEditingStop?.();
+      }
+    },
+    [tableMeta, rowIndex, columnId, readOnly]
+  );
+  const onWrapperKeyDown = React.useCallback(
+    (event) => {
+      if (isEditing && event.key === "Escape") {
+        event.preventDefault();
+        setValue(initialValue);
+        tableMeta?.onCellEditingStop?.();
+      } else if (isFocused && event.key === "Tab") {
+        event.preventDefault();
+        tableMeta?.onCellEditingStop?.({
+          direction: event.shiftKey ? "left" : "right"
+        });
+      }
+    },
+    [isEditing, isFocused, initialValue, tableMeta]
+  );
+  return /* @__PURE__ */ jsx(
+    DataGridCellWrapper,
+    {
+      ref: containerRef,
+      cell,
+      tableMeta,
+      rowIndex,
+      columnId,
+      rowHeight,
+      isEditing,
+      isFocused,
+      isSelected,
+      isSearchMatch,
+      isActiveSearchMatch,
+      readOnly,
+      onKeyDown: onWrapperKeyDown,
+      children: /* @__PURE__ */ jsxs(Popover, { open: isEditing, onOpenChange, children: [
+        /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx("span", { "data-slot": "grid-cell-content", children: formatDateForDisplay(value) }) }),
+        isEditing && /* @__PURE__ */ jsx(PopoverContent, { "data-grid-cell-editor": "", align: "start", alignOffset: -8, className: "w-auto p-0", children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "single",
+            locale: vi,
+            autoFocus: true,
+            defaultMonth: selectedDate ?? /* @__PURE__ */ new Date(),
+            selected: selectedDate,
+            onSelect: (date) => {
+              if (date) onDateSelect(date);
+            }
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function FileCell({
+  cell,
+  tableMeta,
+  rowIndex,
+  columnId,
+  rowHeight,
+  isFocused,
+  isEditing,
+  isSelected,
+  isSearchMatch,
+  isActiveSearchMatch,
+  readOnly
+}) {
+  const cellValue = React.useMemo(() => cell.getValue() ?? [], [cell]);
+  const cellKey = getCellKey(rowIndex, columnId);
+  const prevCellKeyRef = React.useRef(cellKey);
+  const labelId = React.useId();
+  const descriptionId = React.useId();
+  const [files, setFiles] = React.useState(cellValue);
+  const [uploadingFiles, setUploadingFiles] = React.useState(/* @__PURE__ */ new Set());
+  const [deletingFiles, setDeletingFiles] = React.useState(/* @__PURE__ */ new Set());
+  const [isDraggingOver, setIsDraggingOver] = React.useState(false);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const isUploading = uploadingFiles.size > 0;
+  const isDeleting = deletingFiles.size > 0;
+  const isPending = isUploading || isDeleting;
+  const containerRef = React.useRef(null);
+  const fileInputRef = React.useRef(null);
+  const dropzoneRef = React.useRef(null);
+  const cellOpts = cell.column.columnDef.meta?.cell;
+  const sideOffset = -(containerRef.current?.clientHeight ?? 0);
+  const fileCellOpts = cellOpts?.variant === "file" ? cellOpts : null;
+  const maxFileSize = fileCellOpts?.maxFileSize ?? 10 * 1024 * 1024;
+  const maxFiles = fileCellOpts?.maxFiles ?? 10;
+  const accept = fileCellOpts?.accept;
+  const multiple = fileCellOpts?.multiple ?? false;
+  const acceptedTypes = React.useMemo(() => accept ? accept.split(",").map((t) => t.trim()) : null, [accept]);
+  const prevCellValueRef = React.useRef(cellValue);
+  if (cellValue !== prevCellValueRef.current) {
+    prevCellValueRef.current = cellValue;
+    for (const file of files) {
+      if (file.url) {
+        URL.revokeObjectURL(file.url);
+      }
+    }
+    setFiles(cellValue);
+    setError(null);
+  }
+  if (prevCellKeyRef.current !== cellKey) {
+    prevCellKeyRef.current = cellKey;
+    setError(null);
+  }
+  const validateFile = React.useCallback(
+    (file) => {
+      if (maxFileSize && file.size > maxFileSize) {
+        return msg.file.tooLarge(formatFileSize(maxFileSize));
+      }
+      if (acceptedTypes) {
+        const fileExtension = `.${file.name.split(".").pop()}`;
+        const isAccepted = acceptedTypes.some((type) => {
+          if (type.endsWith("/*")) {
+            const baseType = type.slice(0, -2);
+            return file.type.startsWith(`${baseType}/`);
+          }
+          if (type.startsWith(".")) {
+            return fileExtension.toLowerCase() === type.toLowerCase();
+          }
+          return file.type === type;
+        });
+        if (!isAccepted) {
+          return msg.file.wrongType;
+        }
+      }
+      return null;
+    },
+    [maxFileSize, acceptedTypes]
+  );
+  const addFiles = React.useCallback(
+    async (newFiles, skipUpload = false) => {
+      if (readOnly || isPending) return;
+      setError(null);
+      if (maxFiles && files.length + newFiles.length > maxFiles) {
+        const errorMessage = msg.file.tooMany(maxFiles);
+        setError(errorMessage);
+        toastMessage(errorMessage);
+        setTimeout(() => {
+          setError(null);
+        }, 2e3);
+        return;
+      }
+      const rejectedFiles = [];
+      const filesToValidate = [];
+      for (const file of newFiles) {
+        const validationError = validateFile(file);
+        if (validationError) {
+          rejectedFiles.push({ name: file.name, reason: validationError });
+          continue;
+        }
+        filesToValidate.push(file);
+      }
+      if (rejectedFiles.length > 0) {
+        const firstError = rejectedFiles[0];
+        if (firstError) {
+          setError(firstError.reason);
+          const truncatedName = firstError.name.length > 20 ? `${firstError.name.slice(0, 20)}...` : firstError.name;
+          if (rejectedFiles.length === 1) {
+            toastMessage(firstError.reason, msg.file.rejectedOne(truncatedName));
+          } else {
+            toastMessage(firstError.reason, msg.file.rejectedMany(truncatedName, rejectedFiles.length - 1));
+          }
+          setTimeout(() => {
+            setError(null);
+          }, 2e3);
+        }
+      }
+      if (filesToValidate.length > 0) {
+        if (!skipUpload) {
+          const tempFiles = filesToValidate.map((f) => ({
+            id: generateFileId(),
+            name: f.name,
+            size: f.size,
+            type: f.type,
+            url: void 0
+          }));
+          const filesWithTemp = [...files, ...tempFiles];
+          setFiles(filesWithTemp);
+          const uploadingIds = new Set(tempFiles.map((f) => f.id));
+          setUploadingFiles(uploadingIds);
+          let uploadedFiles = [];
+          if (tableMeta?.onFilesUpload) {
+            try {
+              uploadedFiles = await tableMeta.onFilesUpload({
+                files: filesToValidate,
+                rowIndex,
+                columnId
+              });
+            } catch (error2) {
+              toastError(error2 instanceof Error ? error2.message : msg.file.uploadFailed(filesToValidate.length));
+              setFiles((prev) => prev.filter((f) => !uploadingIds.has(f.id)));
+              setUploadingFiles(/* @__PURE__ */ new Set());
+              return;
+            }
+          } else {
+            uploadedFiles = filesToValidate.map((f, i) => ({
+              id: tempFiles[i]?.id ?? generateFileId(),
+              name: f.name,
+              size: f.size,
+              type: f.type,
+              url: URL.createObjectURL(f)
+            }));
+          }
+          const finalFiles = filesWithTemp.map((f) => {
+            if (uploadingIds.has(f.id)) {
+              return uploadedFiles.find((uf) => uf.name === f.name) ?? f;
+            }
+            return f;
+          }).filter((f) => f.url !== void 0);
+          setFiles(finalFiles);
+          setUploadingFiles(/* @__PURE__ */ new Set());
+          tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: finalFiles });
+        } else {
+          const newFilesData = filesToValidate.map((f) => ({
+            id: generateFileId(),
+            name: f.name,
+            size: f.size,
+            type: f.type,
+            url: URL.createObjectURL(f)
+          }));
+          const updatedFiles = [...files, ...newFilesData];
+          setFiles(updatedFiles);
+          tableMeta?.onDataUpdate?.({
+            rowIndex,
+            columnId,
+            value: updatedFiles
+          });
+        }
+      }
+    },
+    [files, maxFiles, validateFile, tableMeta, rowIndex, columnId, readOnly, isPending]
+  );
+  const removeFile = React.useCallback(
+    async (fileId) => {
+      if (readOnly || isPending) return;
+      setError(null);
+      const fileToRemove = files.find((f) => f.id === fileId);
+      if (!fileToRemove) return;
+      setDeletingFiles((prev) => new Set(prev).add(fileId));
+      if (tableMeta?.onFilesDelete) {
+        try {
+          await tableMeta.onFilesDelete({
+            fileIds: [fileId],
+            rowIndex,
+            columnId
+          });
+        } catch (error2) {
+          toastError(error2 instanceof Error ? error2.message : msg.file.deleteFailed(fileToRemove.name));
+          setDeletingFiles((prev) => {
+            const next = new Set(prev);
+            next.delete(fileId);
+            return next;
+          });
+          return;
+        }
+      }
+      if (fileToRemove.url?.startsWith("blob:")) {
+        URL.revokeObjectURL(fileToRemove.url);
+      }
+      const updatedFiles = files.filter((f) => f.id !== fileId);
+      setFiles(updatedFiles);
+      setDeletingFiles((prev) => {
+        const next = new Set(prev);
+        next.delete(fileId);
+        return next;
+      });
+      tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });
+    },
+    [files, tableMeta, rowIndex, columnId, readOnly, isPending]
+  );
+  const clearAll = React.useCallback(async () => {
+    if (readOnly || isPending) return;
+    setError(null);
+    const fileIds = files.map((f) => f.id);
+    setDeletingFiles(new Set(fileIds));
+    if (tableMeta?.onFilesDelete && files.length > 0) {
+      try {
+        await tableMeta.onFilesDelete({
+          fileIds,
+          rowIndex,
+          columnId
+        });
+      } catch (error2) {
+        toastError(error2 instanceof Error ? error2.message : msg.file.deleteFailedMany);
+        setDeletingFiles(/* @__PURE__ */ new Set());
+        return;
+      }
+    }
+    for (const file of files) {
+      if (file.url?.startsWith("blob:")) {
+        URL.revokeObjectURL(file.url);
+      }
+    }
+    setFiles([]);
+    setDeletingFiles(/* @__PURE__ */ new Set());
+    tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: [] });
+  }, [files, tableMeta, rowIndex, columnId, readOnly, isPending]);
+  const onCellDragEnter = React.useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer.types.includes("Files")) {
+      setIsDraggingOver(true);
+    }
+  }, []);
+  const onCellDragLeave = React.useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX;
+    const y = event.clientY;
+    if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
+      setIsDraggingOver(false);
+    }
+  }, []);
+  const onCellDragOver = React.useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  const onCellDrop = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsDraggingOver(false);
+      const droppedFiles = Array.from(event.dataTransfer.files);
+      if (droppedFiles.length > 0) {
+        addFiles(droppedFiles, false);
+      }
+    },
+    [addFiles]
+  );
+  const onDropzoneDragEnter = React.useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(true);
+  }, []);
+  const onDropzoneDragLeave = React.useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX;
+    const y = event.clientY;
+    if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
+      setIsDragging(false);
+    }
+  }, []);
+  const onDropzoneDragOver = React.useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  const onDropzoneDrop = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsDragging(false);
+      const droppedFiles = Array.from(event.dataTransfer.files);
+      addFiles(droppedFiles, false);
+    },
+    [addFiles]
+  );
+  const onDropzoneClick = React.useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const onDropzoneKeyDown = React.useCallback(
+    (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onDropzoneClick();
+      }
+    },
+    [onDropzoneClick]
+  );
+  const onFileInputChange = React.useCallback(
+    (event) => {
+      const selectedFiles = Array.from(event.target.files ?? []);
+      addFiles(selectedFiles, false);
+      event.target.value = "";
+    },
+    [addFiles]
+  );
+  const onOpenChange = React.useCallback(
+    (open) => {
+      if (open && !readOnly) {
+        setError(null);
+        tableMeta?.onCellEditingStart?.(rowIndex, columnId);
+      } else {
+        setError(null);
+        tableMeta?.onCellEditingStop?.();
+      }
+    },
+    [tableMeta, rowIndex, columnId, readOnly]
+  );
+  const onEscapeKeyDown = React.useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+  const onOpenAutoFocus = React.useCallback((event) => {
+    event.preventDefault();
+    queueMicrotask(() => {
+      dropzoneRef.current?.focus();
+    });
+  }, []);
+  const onWrapperKeyDown = React.useCallback(
+    (event) => {
+      if (isEditing) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          setFiles(cellValue);
+          setError(null);
+          tableMeta?.onCellEditingStop?.();
+        } else if (event.key === " ") {
+          event.preventDefault();
+          onDropzoneClick();
+        } else if (event.key === "Tab") {
+          event.preventDefault();
+          tableMeta?.onCellEditingStop?.({
+            direction: event.shiftKey ? "left" : "right"
+          });
+        }
+      } else if (isFocused && event.key === "Enter") {
+        event.preventDefault();
+        tableMeta?.onCellEditingStart?.(rowIndex, columnId);
+      } else if (isFocused && event.key === "Tab") {
+        event.preventDefault();
+        tableMeta?.onCellEditingStop?.({
+          direction: event.shiftKey ? "left" : "right"
+        });
+      }
+    },
+    [isEditing, isFocused, cellValue, tableMeta, onDropzoneClick, rowIndex, columnId]
+  );
+  React.useEffect(() => {
+    return () => {
+      for (const file of files) {
+        if (file.url) {
+          URL.revokeObjectURL(file.url);
+        }
+      }
+    };
+  }, [files]);
+  const lineCount = getLineCount(rowHeight);
+  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } = useBadgeOverflow({
+    items: files,
+    getLabel: (file) => file.name,
+    containerRef,
+    lineCount,
+    cacheKeyPrefix: "file",
+    iconSize: 12,
+    maxWidth: 100
+  });
+  return /* @__PURE__ */ jsxs(
+    DataGridCellWrapper,
+    {
+      ref: containerRef,
+      cell,
+      tableMeta,
+      rowIndex,
+      columnId,
+      rowHeight,
+      isEditing,
+      isFocused,
+      isSelected,
+      isSearchMatch,
+      isActiveSearchMatch,
+      readOnly,
+      className: cn({
+        "ring-1 ring-primary/80 ring-inset": isDraggingOver
+      }),
+      onDragEnter: onCellDragEnter,
+      onDragLeave: onCellDragLeave,
+      onDragOver: onCellDragOver,
+      onDrop: onCellDrop,
+      onKeyDown: onWrapperKeyDown,
+      children: [
+        isEditing ? /* @__PURE__ */ jsxs(Popover, { open: isEditing, onOpenChange, children: [
+          /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0" }) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              "data-grid-cell-editor": "",
+              align: "start",
+              sideOffset,
+              className: "w-[400px] rounded-none p-0",
+              onEscapeKeyDown,
+              onOpenAutoFocus,
+              children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-3", children: [
+                /* @__PURE__ */ jsx("span", { id: labelId, className: "sr-only", children: msg.file.uploadLabel }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    role: "region",
+                    "aria-labelledby": labelId,
+                    "aria-describedby": descriptionId,
+                    "aria-invalid": !!error,
+                    "aria-disabled": isPending,
+                    "data-dragging": isDragging ? "" : void 0,
+                    "data-invalid": error ? "" : void 0,
+                    "data-disabled": isPending ? "" : void 0,
+                    tabIndex: isDragging || isPending ? -1 : 0,
+                    className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-primary-ink focus-visible:outline-none data-[disabled]:pointer-events-none data-[dragging]:border-primary-ink data-[invalid]:border-destructive-ink data-[dragging]:bg-accent/30 data-[disabled]:opacity-50",
+                    ref: dropzoneRef,
+                    onClick: onDropzoneClick,
+                    onDragEnter: onDropzoneDragEnter,
+                    onDragLeave: onDropzoneDragLeave,
+                    onDragOver: onDropzoneDragOver,
+                    onDrop: onDropzoneDrop,
+                    onKeyDown: onDropzoneKeyDown,
+                    children: [
+                      /* @__PURE__ */ jsx(Upload, { "aria-hidden": "true", className: "size-8 text-muted-foreground" }),
+                      /* @__PURE__ */ jsxs("div", { className: "text-center text-sm", children: [
+                        /* @__PURE__ */ jsx("p", { className: "font-medium", children: isDragging ? msg.file.dropHere : msg.file.dragHere }),
+                        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: msg.file.browse })
+                      ] }),
+                      /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-muted-foreground text-xs", children: msg.file.limits(maxFileSize ? formatFileSize(maxFileSize) : void 0, maxFiles) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "file",
+                    "aria-labelledby": labelId,
+                    "aria-describedby": descriptionId,
+                    multiple,
+                    accept,
+                    className: "sr-only",
+                    ref: fileInputRef,
+                    onChange: onFileInputChange
+                  }
+                ),
+                files.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground text-xs", children: msg.file.count(files.length) }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "ghost",
+                        className: "h-6 px-2 text-muted-foreground text-xs",
+                        onClick: clearAll,
+                        disabled: isPending,
+                        children: msg.file.clearAll
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "max-h-[200px] space-y-1 overflow-y-auto", children: files.map((file) => {
+                    const FileIcon = getFileIcon(file.type);
+                    const isFileUploading = uploadingFiles.has(file.id);
+                    const isFileDeleting = deletingFiles.has(file.id);
+                    const isFilePending = isFileUploading || isFileDeleting;
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        "data-pending": isFilePending ? "" : void 0,
+                        className: "flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1.5 data-[pending]:opacity-60",
+                        children: [
+                          FileIcon && /* @__PURE__ */ jsx(FileIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden", children: [
+                            /* @__PURE__ */ jsx("p", { className: "truncate text-sm", children: file.name }),
+                            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: isFileUploading ? msg.file.uploading : isFileDeleting ? msg.file.deleting : formatFileSize(file.size) })
+                          ] }),
+                          /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              type: "button",
+                              "aria-label": `${msg.file.remove}: ${file.name}`,
+                              variant: "ghost",
+                              size: "icon",
+                              className: "size-5 rounded-sm",
+                              onClick: () => removeFile(file.id),
+                              disabled: isPending,
+                              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3" })
+                            }
+                          )
+                        ]
+                      },
+                      file.id
+                    );
+                  }) })
+                ] })
+              ] })
+            }
+          )
+        ] }) : null,
+        isDraggingOver ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 text-primary-ink text-sm", children: [
+          /* @__PURE__ */ jsx(Upload, { "aria-hidden": "true", className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { children: msg.file.dropHere })
+        ] }) : files.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 overflow-hidden", children: [
+          visibleFiles.map((file) => {
+            const isUploading2 = uploadingFiles.has(file.id);
+            if (isUploading2) {
+              return /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  className: "h-5 shrink-0 px-1.5",
+                  style: {
+                    width: `${Math.min(file.name.length * 8 + 30, 100)}px`
+                  }
+                },
+                file.id
+              );
+            }
+            const FileIcon = getFileIcon(file.type);
+            return /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1 px-1.5 py-px", children: [
+              FileIcon && /* @__PURE__ */ jsx(FileIcon, { className: "size-3 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "max-w-[100px] truncate", children: file.name })
+            ] }, file.id);
+          }),
+          hiddenFileCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "px-1.5 py-px text-muted-foreground", children: [
+            "+",
+            hiddenFileCount
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  CheckboxCell,
+  DateCell,
+  FileCell,
+  LongTextCell,
+  MultiSelectCell,
+  NumberCell,
+  SelectCell,
+  ShortTextCell,
+  UrlCell
+};
+//# sourceMappingURL=data-grid-cell-variants.js.map