@comitor/ui 1.10.0 → 2.0.0

package/dist/data-grid/data-grid-column-header.js

@@ -0,0 +1,207 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, EyeOffIcon, PinIcon, PinOffIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "../components/ui/dropdown-menu.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip.js";
+import { cn } from "../lib/cn.js";
+import { useDataGridMessages } from "./data-grid-locale.js";
+import { getColumnVariant } from "./utils.js";
+function DataGridColumnHeader({
+  header,
+  table,
+  className,
+  onPointerDown,
+  ...props
+}) {
+  const msg = useDataGridMessages();
+  const column = header.column;
+  const label = column.columnDef.meta?.label ? column.columnDef.meta.label : typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+  const isAnyColumnResizing = table.getState().columnSizingInfo.isResizingColumn;
+  const cellVariant = column.columnDef.meta?.cell;
+  const columnVariant = getColumnVariant(cellVariant?.variant);
+  const pinnedPosition = column.getIsPinned();
+  const isPinnedLeft = pinnedPosition === "left";
+  const isPinnedRight = pinnedPosition === "right";
+  const onSortingChange = React.useCallback(
+    (direction) => {
+      table.setSorting((prev) => {
+        const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);
+        const newSort = {
+          id: column.id,
+          desc: direction === "desc"
+        };
+        if (existingSortIndex >= 0) {
+          const updated = [...prev];
+          updated[existingSortIndex] = newSort;
+          return updated;
+        } else {
+          return [...prev, newSort];
+        }
+      });
+    },
+    [column.id, table]
+  );
+  const onSortRemove = React.useCallback(() => {
+    table.setSorting((prev) => prev.filter((sort) => sort.id !== column.id));
+  }, [column.id, table]);
+  const onLeftPin = React.useCallback(() => {
+    column.pin("left");
+  }, [column]);
+  const onRightPin = React.useCallback(() => {
+    column.pin("right");
+  }, [column]);
+  const onUnpin = React.useCallback(() => {
+    column.pin(false);
+  }, [column]);
+  const onTriggerPointerDown = React.useCallback(
+    (event) => {
+      onPointerDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.button !== 0) {
+        return;
+      }
+      table.options.meta?.onColumnClick?.(column.id);
+    },
+    [table.options.meta, column.id, onPointerDown]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+      /* @__PURE__ */ jsxs(
+        DropdownMenuTrigger,
+        {
+          className: cn(
+            "flex size-full items-center justify-between gap-2 p-2 text-sm hover:bg-accent/40 data-[state=open]:bg-accent/40 [&_svg]:size-4",
+            isAnyColumnResizing && "pointer-events-none",
+            className
+          ),
+          onPointerDown: onTriggerPointerDown,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [
+              columnVariant && /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(columnVariant.icon, { className: "size-3.5 shrink-0 text-muted-foreground" }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: columnVariant.label })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+            ] }),
+            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5 shrink-0 text-muted-foreground" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", sideOffset: 0, className: "w-60", children: [
+        column.getCanSort() && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            DropdownMenuCheckboxItem,
+            {
+              className: "gap-2 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground",
+              checked: column.getIsSorted() === "asc",
+              onSelect: () => onSortingChange("asc"),
+              children: [
+                /* @__PURE__ */ jsx(ChevronUpIcon, {}),
+                msg.column.sortAsc
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuCheckboxItem,
+            {
+              className: "gap-2 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground",
+              checked: column.getIsSorted() === "desc",
+              onSelect: () => onSortingChange("desc"),
+              children: [
+                /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+                msg.column.sortDesc
+              ]
+            }
+          ),
+          column.getIsSorted() && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onSortRemove, children: [
+            /* @__PURE__ */ jsx(XIcon, {}),
+            msg.column.removeSort
+          ] })
+        ] }),
+        column.getCanPin() && /* @__PURE__ */ jsxs(Fragment, { children: [
+          column.getCanSort() && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          isPinnedLeft ? /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "[&_svg]:text-muted-foreground", onSelect: onUnpin, children: [
+            /* @__PURE__ */ jsx(PinOffIcon, {}),
+            msg.column.unpinLeft
+          ] }) : /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "[&_svg]:text-muted-foreground", onSelect: onLeftPin, children: [
+            /* @__PURE__ */ jsx(PinIcon, {}),
+            msg.column.pinLeft
+          ] }),
+          isPinnedRight ? /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "[&_svg]:text-muted-foreground", onSelect: onUnpin, children: [
+            /* @__PURE__ */ jsx(PinOffIcon, {}),
+            msg.column.unpinRight
+          ] }) : /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "[&_svg]:text-muted-foreground", onSelect: onRightPin, children: [
+            /* @__PURE__ */ jsx(PinIcon, {}),
+            msg.column.pinRight
+          ] })
+        ] }),
+        column.getCanHide() && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              className: "[&_svg]:text-muted-foreground",
+              onSelect: () => column.toggleVisibility(false),
+              children: [
+                /* @__PURE__ */ jsx(EyeOffIcon, {}),
+                msg.column.hide
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    header.column.getCanResize() && /* @__PURE__ */ jsx(DataGridColumnResizer, { header, table, label })
+  ] });
+}
+const DataGridColumnResizer = React.memo(DataGridColumnResizerImpl, (prev, next) => {
+  const prevColumn = prev.header.column;
+  const nextColumn = next.header.column;
+  if (prevColumn.getIsResizing() !== nextColumn.getIsResizing() || prevColumn.getSize() !== nextColumn.getSize()) {
+    return false;
+  }
+  if (prev.label !== next.label) return false;
+  return true;
+});
+function DataGridColumnResizerImpl({ header, table, label }) {
+  const msg = useDataGridMessages();
+  const defaultColumnDef = table._getDefaultColumnDef();
+  const onDoubleClick = React.useCallback(() => {
+    header.column.resetSize();
+  }, [header.column]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": msg.column.resize(label),
+      "aria-valuenow": header.column.getSize(),
+      "aria-valuemin": defaultColumnDef.minSize,
+      "aria-valuemax": defaultColumnDef.maxSize,
+      tabIndex: 0,
+      className: cn(
+        // Tay kéo chỉ hiện khi rê/focus/đang kéo, nên nó CHỈ mang đúng một màu — `--primary-ink`
+        // (bậc NÉT). `--primary` trần là bậc tô NỀN: gold #E8B824 chỉ 1,73:1 với nền trang ở
+        // light, tức một tay kéo nhìn thấy được ở dark mà gần như vô hình ở light.
+        "absolute -end-px top-0 z-50 h-full w-0.5 cursor-ew-resize touch-none select-none bg-primary-ink transition-opacity after:absolute after:inset-y-0 after:start-1/2 after:h-full after:w-[18px] after:-translate-x-1/2 after:content-[''] focus:outline-none",
+        header.column.getIsResizing() ? "opacity-100" : "opacity-0 hover:opacity-100 focus:opacity-100"
+      ),
+      onDoubleClick,
+      onMouseDown: header.getResizeHandler(),
+      onTouchStart: header.getResizeHandler()
+    }
+  );
+}
+export {
+  DataGridColumnHeader
+};
+//# sourceMappingURL=data-grid-column-header.js.map

package/dist/data-grid/data-grid-column-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-grid/data-grid-column-header.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ColumnSort, Header, SortDirection, SortingState, Table } from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, EyeOffIcon, PinIcon, PinOffIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from \"../components/ui/dropdown-menu.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useDataGridMessages } from \"./data-grid-locale.js\";\nimport { getColumnVariant } from \"./utils.js\";\n\ninterface DataGridColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {\n  header: Header<TData, TValue>;\n  table: Table<TData>;\n}\n\nexport function DataGridColumnHeader<TData, TValue>({\n  header,\n  table,\n  className,\n  onPointerDown,\n  ...props\n}: DataGridColumnHeaderProps<TData, TValue>) {\n  const msg = useDataGridMessages();\n\n  const column = header.column;\n  const label = column.columnDef.meta?.label\n    ? column.columnDef.meta.label\n    : typeof column.columnDef.header === \"string\"\n      ? column.columnDef.header\n      : column.id;\n\n  const isAnyColumnResizing = table.getState().columnSizingInfo.isResizingColumn;\n\n  const cellVariant = column.columnDef.meta?.cell;\n  const columnVariant = getColumnVariant(cellVariant?.variant);\n\n  const pinnedPosition = column.getIsPinned();\n  const isPinnedLeft = pinnedPosition === \"left\";\n  const isPinnedRight = pinnedPosition === \"right\";\n\n  const onSortingChange = React.useCallback(\n    (direction: SortDirection) => {\n      table.setSorting((prev: SortingState) => {\n        const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);\n        const newSort: ColumnSort = {\n          id: column.id,\n          desc: direction === \"desc\"\n        };\n\n        if (existingSortIndex >= 0) {\n          const updated = [...prev];\n          updated[existingSortIndex] = newSort;\n          return updated;\n        } else {\n          return [...prev, newSort];\n        }\n      });\n    },\n    [column.id, table]\n  );\n\n  const onSortRemove = React.useCallback(() => {\n    table.setSorting((prev: SortingState) => prev.filter((sort) => sort.id !== column.id));\n  }, [column.id, table]);\n\n  const onLeftPin = React.useCallback(() => {\n    column.pin(\"left\");\n  }, [column]);\n\n  const onRightPin = React.useCallback(() => {\n    column.pin(\"right\");\n  }, [column]);\n\n  const onUnpin = React.useCallback(() => {\n    column.pin(false);\n  }, [column]);\n\n  const onTriggerPointerDown = React.useCallback(\n    (event: React.PointerEvent<HTMLButtonElement>) => {\n      onPointerDown?.(event);\n      if (event.defaultPrevented) return;\n\n      if (event.button !== 0) {\n        return;\n      }\n      table.options.meta?.onColumnClick?.(column.id);\n    },\n    [table.options.meta, column.id, onPointerDown]\n  );\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger\n          className={cn(\n            \"flex size-full items-center justify-between gap-2 p-2 text-sm hover:bg-accent/40 data-[state=open]:bg-accent/40 [&_svg]:size-4\",\n            isAnyColumnResizing && \"pointer-events-none\",\n            className\n          )}\n          onPointerDown={onTriggerPointerDown}\n          {...props}\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">\n            {columnVariant && (\n              <Tooltip delayDuration={100}>\n                <TooltipTrigger asChild>\n                  <columnVariant.icon className=\"size-3.5 shrink-0 text-muted-foreground\" />\n                </TooltipTrigger>\n                {/* `TooltipContent` của gói TỰ portal ra ngoài — cần thiết vì hộp lưới\n                    có overflow-auto, không portal thì tooltip bị cắt. */}\n                <TooltipContent side=\"top\">{columnVariant.label}</TooltipContent>\n              </Tooltip>\n            )}\n            <span className=\"truncate\">{label}</span>\n          </div>\n          <ChevronDownIcon className=\"size-3.5 shrink-0 text-muted-foreground\" />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" sideOffset={0} className=\"w-60\">\n          {column.getCanSort() && (\n            <>\n              <DropdownMenuCheckboxItem\n                className=\"gap-2 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground\"\n                checked={column.getIsSorted() === \"asc\"}\n                onSelect={() => onSortingChange(\"asc\")}\n              >\n                <ChevronUpIcon />\n                {msg.column.sortAsc}\n              </DropdownMenuCheckboxItem>\n              <DropdownMenuCheckboxItem\n                className=\"gap-2 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground\"\n                checked={column.getIsSorted() === \"desc\"}\n                onSelect={() => onSortingChange(\"desc\")}\n              >\n                <ChevronDownIcon />\n                {msg.column.sortDesc}\n              </DropdownMenuCheckboxItem>\n              {column.getIsSorted() && (\n                <DropdownMenuItem onSelect={onSortRemove}>\n                  <XIcon />\n                  {msg.column.removeSort}\n                </DropdownMenuItem>\n              )}\n            </>\n          )}\n          {column.getCanPin() && (\n            <>\n              {column.getCanSort() && <DropdownMenuSeparator />}\n\n              {isPinnedLeft ? (\n                <DropdownMenuItem className=\"[&_svg]:text-muted-foreground\" onSelect={onUnpin}>\n                  <PinOffIcon />\n                  {msg.column.unpinLeft}\n                </DropdownMenuItem>\n              ) : (\n                <DropdownMenuItem className=\"[&_svg]:text-muted-foreground\" onSelect={onLeftPin}>\n                  <PinIcon />\n                  {msg.column.pinLeft}\n                </DropdownMenuItem>\n              )}\n              {isPinnedRight ? (\n                <DropdownMenuItem className=\"[&_svg]:text-muted-foreground\" onSelect={onUnpin}>\n                  <PinOffIcon />\n                  {msg.column.unpinRight}\n                </DropdownMenuItem>\n              ) : (\n                <DropdownMenuItem className=\"[&_svg]:text-muted-foreground\" onSelect={onRightPin}>\n                  <PinIcon />\n                  {msg.column.pinRight}\n                </DropdownMenuItem>\n              )}\n            </>\n          )}\n          {column.getCanHide() && (\n            <>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                className=\"[&_svg]:text-muted-foreground\"\n                onSelect={() => column.toggleVisibility(false)}\n              >\n                <EyeOffIcon />\n                {msg.column.hide}\n              </DropdownMenuItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n      {header.column.getCanResize() && <DataGridColumnResizer header={header} table={table} label={label} />}\n    </>\n  );\n}\n\nconst DataGridColumnResizer = React.memo(DataGridColumnResizerImpl, (prev, next) => {\n  const prevColumn = prev.header.column;\n  const nextColumn = next.header.column;\n\n  if (prevColumn.getIsResizing() !== nextColumn.getIsResizing() || prevColumn.getSize() !== nextColumn.getSize()) {\n    return false;\n  }\n\n  if (prev.label !== next.label) return false;\n\n  return true;\n}) as typeof DataGridColumnResizerImpl;\n\ninterface DataGridColumnResizerProps<TData, TValue> extends DataGridColumnHeaderProps<TData, TValue> {\n  label: string;\n}\n\nfunction DataGridColumnResizerImpl<TData, TValue>({ header, table, label }: DataGridColumnResizerProps<TData, TValue>) {\n  const msg = useDataGridMessages();\n  const defaultColumnDef = table._getDefaultColumnDef();\n\n  const onDoubleClick = React.useCallback(() => {\n    header.column.resetSize();\n  }, [header.column]);\n\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label={msg.column.resize(label)}\n      aria-valuenow={header.column.getSize()}\n      aria-valuemin={defaultColumnDef.minSize}\n      aria-valuemax={defaultColumnDef.maxSize}\n      tabIndex={0}\n      className={cn(\n        // Tay kéo chỉ hiện khi rê/focus/đang kéo, nên nó CHỈ mang đúng một màu — `--primary-ink`\n        // (bậc NÉT). `--primary` trần là bậc tô NỀN: gold #E8B824 chỉ 1,73:1 với nền trang ở\n        // light, tức một tay kéo nhìn thấy được ở dark mà gần như vô hình ở light.\n        \"absolute -end-px top-0 z-50 h-full w-0.5 cursor-ew-resize touch-none select-none bg-primary-ink transition-opacity after:absolute after:inset-y-0 after:start-1/2 after:h-full after:w-[18px] after:-translate-x-1/2 after:content-[''] focus:outline-none\",\n        header.column.getIsResizing() ? \"opacity-100\" : \"opacity-0 hover:opacity-100 focus:opacity-100\"\n      )}\n      onDoubleClick={onDoubleClick}\n      onMouseDown={header.getResizeHandler()}\n      onTouchStart={header.getResizeHandler()}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/data-grid/data-grid-context-menu.d.ts

@@ -0,0 +1,12 @@
+import { TableMeta, ColumnDef } from '@tanstack/react-table';
+import * as React from 'react';
+import { ContextMenuState } from './types.js';
+
+interface DataGridContextMenuProps<TData> {
+    tableMeta: TableMeta<TData>;
+    columns: Array<ColumnDef<TData>>;
+    contextMenu: ContextMenuState;
+}
+declare function DataGridContextMenu<TData>({ tableMeta, columns, contextMenu }: DataGridContextMenuProps<TData>): React.JSX.Element | null;
+
+export { DataGridContextMenu };

package/dist/data-grid/data-grid-context-menu.js

@@ -0,0 +1,161 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CopyIcon, EraserIcon, ScissorsIcon, Trash2Icon } from "lucide-react";
+import * as React from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "../components/ui/dropdown-menu.js";
+import { useDataGridMessages } from "./data-grid-locale.js";
+import { toastSuccess } from "./toast.js";
+import { useAsRef } from "./use-as-ref.js";
+import { getEmptyCellValue, parseCellKey } from "./utils.js";
+function DataGridContextMenu({ tableMeta, columns, contextMenu }) {
+  const onContextMenuOpenChange = tableMeta?.onContextMenuOpenChange;
+  const selectionState = tableMeta?.selectionState;
+  const dataGridRef = tableMeta?.dataGridRef;
+  const onDataUpdate = tableMeta?.onDataUpdate;
+  const onRowsDelete = tableMeta?.onRowsDelete;
+  const onCellsCopy = tableMeta?.onCellsCopy;
+  const onCellsCut = tableMeta?.onCellsCut;
+  if (!contextMenu.open) return null;
+  return /* @__PURE__ */ jsx(
+    ContextMenu,
+    {
+      tableMeta,
+      columns,
+      dataGridRef,
+      contextMenu,
+      onContextMenuOpenChange,
+      selectionState,
+      onDataUpdate,
+      onRowsDelete,
+      onCellsCopy,
+      onCellsCut
+    }
+  );
+}
+const ContextMenu = React.memo(ContextMenuImpl, (prev, next) => {
+  if (prev.contextMenu.open !== next.contextMenu.open) return false;
+  if (!next.contextMenu.open) return true;
+  if (prev.contextMenu.x !== next.contextMenu.x) return false;
+  if (prev.contextMenu.y !== next.contextMenu.y) return false;
+  const prevSize = prev.selectionState?.selectedCells?.size ?? 0;
+  const nextSize = next.selectionState?.selectedCells?.size ?? 0;
+  if (prevSize !== nextSize) return false;
+  return true;
+});
+function ContextMenuImpl({
+  tableMeta,
+  columns,
+  dataGridRef,
+  contextMenu,
+  onContextMenuOpenChange,
+  selectionState,
+  onDataUpdate,
+  onRowsDelete,
+  onCellsCopy,
+  onCellsCut
+}) {
+  const msg = useDataGridMessages();
+  const propsRef = useAsRef({
+    dataGridRef,
+    selectionState,
+    onDataUpdate,
+    onRowsDelete,
+    onCellsCopy,
+    onCellsCut,
+    columns
+  });
+  const triggerStyle = React.useMemo(
+    () => ({
+      position: "fixed",
+      left: `${contextMenu.x}px`,
+      top: `${contextMenu.y}px`,
+      width: "1px",
+      height: "1px",
+      padding: 0,
+      margin: 0,
+      border: "none",
+      background: "transparent",
+      pointerEvents: "none",
+      opacity: 0
+    }),
+    [contextMenu.x, contextMenu.y]
+  );
+  const onCloseAutoFocus = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      propsRef.current.dataGridRef?.current?.focus();
+    },
+    [propsRef]
+  );
+  const onCopy = React.useCallback(() => {
+    propsRef.current.onCellsCopy?.();
+  }, [propsRef]);
+  const onCut = React.useCallback(() => {
+    propsRef.current.onCellsCut?.();
+  }, [propsRef]);
+  const onClear = React.useCallback(() => {
+    const { selectionState: selectionState2, columns: columns2, onDataUpdate: onDataUpdate2 } = propsRef.current;
+    if (!selectionState2?.selectedCells || selectionState2.selectedCells.size === 0) return;
+    const updates = [];
+    for (const cellKey of selectionState2.selectedCells) {
+      const { rowIndex, columnId } = parseCellKey(cellKey);
+      const column = columns2.find((col) => {
+        if (col.id) return col.id === columnId;
+        if ("accessorKey" in col) return col.accessorKey === columnId;
+        return false;
+      });
+      const cellVariant = column?.meta?.cell?.variant;
+      const emptyValue = getEmptyCellValue(cellVariant);
+      updates.push({ rowIndex, columnId, value: emptyValue });
+    }
+    onDataUpdate2?.(updates);
+    toastSuccess(msg.toast.cellsCleared(updates.length));
+  }, [propsRef, msg]);
+  const onDelete = React.useCallback(async () => {
+    const { selectionState: selectionState2, onRowsDelete: onRowsDelete2 } = propsRef.current;
+    if (!selectionState2?.selectedCells || selectionState2.selectedCells.size === 0) return;
+    const rowIndices = /* @__PURE__ */ new Set();
+    for (const cellKey of selectionState2.selectedCells) {
+      const { rowIndex } = parseCellKey(cellKey);
+      rowIndices.add(rowIndex);
+    }
+    const rowIndicesArray = Array.from(rowIndices).sort((a, b) => a - b);
+    const rowCount = rowIndicesArray.length;
+    await onRowsDelete2?.(rowIndicesArray);
+    toastSuccess(msg.toast.rowsDeleted(rowCount));
+  }, [propsRef, msg]);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { open: contextMenu.open, onOpenChange: onContextMenuOpenChange, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { style: triggerStyle }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { "data-grid-popover": "", align: "start", className: "w-48", onCloseAutoFocus, children: [
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onCopy, children: [
+        /* @__PURE__ */ jsx(CopyIcon, {}),
+        msg.contextMenu.copy
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onCut, disabled: tableMeta?.readOnly, children: [
+        /* @__PURE__ */ jsx(ScissorsIcon, {}),
+        msg.contextMenu.cut
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onClear, disabled: tableMeta?.readOnly, children: [
+        /* @__PURE__ */ jsx(EraserIcon, {}),
+        msg.contextMenu.clear
+      ] }),
+      onRowsDelete && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { variant: "destructive", onSelect: onDelete, children: [
+          /* @__PURE__ */ jsx(Trash2Icon, {}),
+          msg.contextMenu.deleteRows
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DataGridContextMenu
+};
+//# sourceMappingURL=data-grid-context-menu.js.map

package/dist/data-grid/data-grid-context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-grid/data-grid-context-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ColumnDef, TableMeta } from \"@tanstack/react-table\";\nimport { CopyIcon, EraserIcon, ScissorsIcon, Trash2Icon } from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from \"../components/ui/dropdown-menu.js\";\nimport { useDataGridMessages } from \"./data-grid-locale.js\";\nimport { toastSuccess } from \"./toast.js\";\nimport type { CellUpdate, ContextMenuState } from \"./types.js\";\nimport { useAsRef } from \"./use-as-ref.js\";\nimport { getEmptyCellValue, parseCellKey } from \"./utils.js\";\n\ninterface DataGridContextMenuProps<TData> {\n  tableMeta: TableMeta<TData>;\n  columns: Array<ColumnDef<TData>>;\n  contextMenu: ContextMenuState;\n}\n\nexport function DataGridContextMenu<TData>({ tableMeta, columns, contextMenu }: DataGridContextMenuProps<TData>) {\n  const onContextMenuOpenChange = tableMeta?.onContextMenuOpenChange;\n  const selectionState = tableMeta?.selectionState;\n  const dataGridRef = tableMeta?.dataGridRef;\n  const onDataUpdate = tableMeta?.onDataUpdate;\n  const onRowsDelete = tableMeta?.onRowsDelete;\n  const onCellsCopy = tableMeta?.onCellsCopy;\n  const onCellsCut = tableMeta?.onCellsCut;\n\n  if (!contextMenu.open) return null;\n\n  return (\n    <ContextMenu\n      tableMeta={tableMeta}\n      columns={columns}\n      dataGridRef={dataGridRef}\n      contextMenu={contextMenu}\n      onContextMenuOpenChange={onContextMenuOpenChange}\n      selectionState={selectionState}\n      onDataUpdate={onDataUpdate}\n      onRowsDelete={onRowsDelete}\n      onCellsCopy={onCellsCopy}\n      onCellsCut={onCellsCut}\n    />\n  );\n}\n\ninterface ContextMenuProps<TData>\n  extends Pick<\n      TableMeta<TData>,\n      | \"dataGridRef\"\n      | \"onContextMenuOpenChange\"\n      | \"selectionState\"\n      | \"onDataUpdate\"\n      | \"onRowsDelete\"\n      | \"onCellsCopy\"\n      | \"onCellsCut\"\n      | \"readOnly\"\n    >,\n    Required<Pick<TableMeta<TData>, \"contextMenu\">> {\n  tableMeta: TableMeta<TData>;\n  columns: Array<ColumnDef<TData>>;\n}\n\nconst ContextMenu = React.memo(ContextMenuImpl, (prev, next) => {\n  if (prev.contextMenu.open !== next.contextMenu.open) return false;\n  if (!next.contextMenu.open) return true;\n  if (prev.contextMenu.x !== next.contextMenu.x) return false;\n  if (prev.contextMenu.y !== next.contextMenu.y) return false;\n\n  const prevSize = prev.selectionState?.selectedCells?.size ?? 0;\n  const nextSize = next.selectionState?.selectedCells?.size ?? 0;\n  if (prevSize !== nextSize) return false;\n\n  return true;\n}) as typeof ContextMenuImpl;\n\nfunction ContextMenuImpl<TData>({\n  tableMeta,\n  columns,\n  dataGridRef,\n  contextMenu,\n  onContextMenuOpenChange,\n  selectionState,\n  onDataUpdate,\n  onRowsDelete,\n  onCellsCopy,\n  onCellsCut\n}: ContextMenuProps<TData>) {\n  const msg = useDataGridMessages();\n\n  const propsRef = useAsRef({\n    dataGridRef,\n    selectionState,\n    onDataUpdate,\n    onRowsDelete,\n    onCellsCopy,\n    onCellsCut,\n    columns\n  });\n\n  const triggerStyle = React.useMemo<React.CSSProperties>(\n    () => ({\n      position: \"fixed\",\n      left: `${contextMenu.x}px`,\n      top: `${contextMenu.y}px`,\n      width: \"1px\",\n      height: \"1px\",\n      padding: 0,\n      margin: 0,\n      border: \"none\",\n      background: \"transparent\",\n      pointerEvents: \"none\",\n      opacity: 0\n    }),\n    [contextMenu.x, contextMenu.y]\n  );\n\n  const onCloseAutoFocus: NonNullable<React.ComponentProps<typeof DropdownMenuContent>[\"onCloseAutoFocus\"]> =\n    React.useCallback(\n      (event) => {\n        event.preventDefault();\n        propsRef.current.dataGridRef?.current?.focus();\n      },\n      [propsRef]\n    );\n\n  const onCopy = React.useCallback(() => {\n    propsRef.current.onCellsCopy?.();\n  }, [propsRef]);\n\n  const onCut = React.useCallback(() => {\n    propsRef.current.onCellsCut?.();\n  }, [propsRef]);\n\n  const onClear = React.useCallback(() => {\n    const { selectionState, columns, onDataUpdate } = propsRef.current;\n\n    if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;\n\n    const updates: Array<CellUpdate> = [];\n\n    for (const cellKey of selectionState.selectedCells) {\n      const { rowIndex, columnId } = parseCellKey(cellKey);\n\n      // Get column from columns array\n      const column = columns.find((col) => {\n        if (col.id) return col.id === columnId;\n        if (\"accessorKey\" in col) return col.accessorKey === columnId;\n        return false;\n      });\n      const cellVariant = column?.meta?.cell?.variant;\n\n      const emptyValue = getEmptyCellValue(cellVariant);\n\n      updates.push({ rowIndex, columnId, value: emptyValue });\n    }\n\n    onDataUpdate?.(updates);\n\n    toastSuccess(msg.toast.cellsCleared(updates.length));\n  }, [propsRef, msg]);\n\n  const onDelete = React.useCallback(async () => {\n    const { selectionState, onRowsDelete } = propsRef.current;\n\n    if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;\n\n    const rowIndices = new Set<number>();\n    for (const cellKey of selectionState.selectedCells) {\n      const { rowIndex } = parseCellKey(cellKey);\n      rowIndices.add(rowIndex);\n    }\n\n    const rowIndicesArray = Array.from(rowIndices).sort((a, b) => a - b);\n    const rowCount = rowIndicesArray.length;\n\n    await onRowsDelete?.(rowIndicesArray);\n\n    toastSuccess(msg.toast.rowsDeleted(rowCount));\n  }, [propsRef, msg]);\n\n  return (\n    <DropdownMenu open={contextMenu.open} onOpenChange={onContextMenuOpenChange}>\n      <DropdownMenuTrigger style={triggerStyle} />\n      <DropdownMenuContent data-grid-popover=\"\" align=\"start\" className=\"w-48\" onCloseAutoFocus={onCloseAutoFocus}>\n        <DropdownMenuItem onSelect={onCopy}>\n          <CopyIcon />\n          {msg.contextMenu.copy}\n        </DropdownMenuItem>\n        <DropdownMenuItem onSelect={onCut} disabled={tableMeta?.readOnly}>\n          <ScissorsIcon />\n          {msg.contextMenu.cut}\n        </DropdownMenuItem>\n        <DropdownMenuItem onSelect={onClear} disabled={tableMeta?.readOnly}>\n          <EraserIcon />\n          {msg.contextMenu.clear}\n        </DropdownMenuItem>\n        {onRowsDelete && (\n          <>\n            <DropdownMenuSeparator />\n            {/* `variant=\"destructive\"` của gói đã đi qua `--destructive-ink` (bậc CHỮ) cho cả\n                chữ, icon và nền focus — đừng tự viết lại bằng `text-destructive` (bậc TÔ NỀN). */}\n            <DropdownMenuItem variant=\"destructive\" onSelect={onDelete}>\n              <Trash2Icon />\n              {msg.contextMenu.deleteRows}\n            </DropdownMenuItem>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":["selectionState","columns","onDataUpdate","onRowsDelete"]}

package/dist/data-grid/data-grid-filter-menu.d.ts

@@ -0,0 +1,23 @@
+import { Table } from '@tanstack/react-table';
+import * as React from 'react';
+import { PopoverContent } from '../components/ui/popover.js';
+import { DataGridLocale } from './messages.js';
+import { DataGridMessages } from './messages-en.js';
+import '@radix-ui/react-popover';
+import './messages-vi.js';
+
+interface DataGridFilterMenuProps<TData> extends React.ComponentProps<typeof PopoverContent> {
+    table: Table<TData>;
+    disabled?: boolean;
+    /**
+     * Ngôn ngữ của menu: `"en"` (mặc định) · `"vi"`, hoặc cả một bảng chuỗi tự soạn.
+     *
+     * ⚠ Thanh công cụ nằm NGOÀI `<DataGrid>`, nên `locale` truyền cho lưới không với tới đây. Bọc
+     * cả màn bằng `DataGridLocaleProvider` (một lần, đúng cho mọi mảnh), hoặc truyền prop này cho
+     * từng menu. Prop thắng provider.
+     */
+    locale?: DataGridLocale | DataGridMessages;
+}
+declare function DataGridFilterMenu<TData>({ table, disabled, className, locale, ...props }: DataGridFilterMenuProps<TData>): React.JSX.Element;
+
+export { DataGridFilterMenu };