@comitor/ui 1.11.0 → 2.1.0

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

@@ -14,8 +14,15 @@ import {
 } from "../components/ui/command.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover.js";
 import { cn } from "../lib/cn.js";
-import { msg } from "./messages.js";
-function DataGridViewMenu({ table, disabled, className, ...props }) {
+import { useResolvedDataGridMessages } from "./data-grid-locale.js";
+function DataGridViewMenu({
+  table,
+  disabled,
+  className,
+  locale,
+  ...props
+}) {
+  const msg = useResolvedDataGridMessages(locale);
   const dir = useDirection();
   const columns = React.useMemo(
     () => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()),
@@ -29,10 +36,11 @@ function DataGridViewMenu({ table, disabled, className, ...props }) {
         role: "combobox",
         dir,
         variant: "outline",
-        className: "h-8 gap-2 font-normal",
+        size: "sm",
+        className: "font-normal",
         disabled,
         children: [
-          /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true", className: "text-muted-foreground" }),
+          /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true", className: "size-3.5 text-muted-foreground" }),
           msg.view.trigger
         ]
       }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/data-grid/data-grid-view-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport type { Table } from \"@tanstack/react-table\";\nimport { Check, Settings2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"../components/ui/button.js\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList\n} from \"../components/ui/command.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../components/ui/popover.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { msg } from \"./messages.js\";\n\ninterface DataGridViewMenuProps<TData> extends React.ComponentProps<typeof PopoverContent> {\n  table: Table<TData>;\n  disabled?: boolean;\n}\n\n/** Ẩn/hiện cột của lưới. Cột muốn khoá luôn hiển thị thì đặt `enableHiding: false`. */\nexport function DataGridViewMenu<TData>({ table, disabled, className, ...props }: DataGridViewMenuProps<TData>) {\n  const dir = useDirection();\n\n  const columns = React.useMemo(\n    () => table.getAllColumns().filter((column) => typeof column.accessorFn !== \"undefined\" && column.getCanHide()),\n    [table]\n  );\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          aria-label={msg.view.toggleColumns}\n          role=\"combobox\"\n          dir={dir}\n          variant=\"outline\"\n          className=\"h-8 gap-2 font-normal\"\n          disabled={disabled}\n        >\n          <Settings2 aria-hidden=\"true\" className=\"text-muted-foreground\" />\n          {msg.view.trigger}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent dir={dir} align=\"end\" className={cn(\"w-52 p-0\", className)} {...props}>\n        <Command>\n          <CommandInput placeholder={msg.view.searchPlaceholder} aria-label={msg.view.searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{msg.view.empty}</CommandEmpty>\n            <CommandGroup>\n              {columns.map((column) => {\n                const isVisible = column.getIsVisible();\n\n                return (\n                  <CommandItem\n                    key={column.id}\n                    value={column.columnDef.meta?.label ?? column.id}\n                    onSelect={() => column.toggleVisibility(!isVisible)}\n                  >\n                    <span className=\"truncate\">{column.columnDef.meta?.label ?? column.id}</span>\n                    <Check className={cn(\"ms-auto size-4\", isVisible ? \"opacity-100\" : \"opacity-0\")} />\n                  </CommandItem>\n                );\n              })}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";AAoCQ,SAQE,KARF;AAlCR,SAAS,oBAAoB;AAE7B,SAAS,OAAO,iBAAiB;AACjC,YAAY,WAAW;AACvB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AACnB,SAAS,WAAW;AAQb,SAAS,iBAAwB,EAAE,OAAO,UAAU,WAAW,GAAG,MAAM,GAAiC;AAC9G,QAAM,MAAM,aAAa;AAEzB,QAAM,UAAU,MAAM;AAAA,IACpB,MAAM,MAAM,cAAc,EAAE,OAAO,CAAC,WAAW,OAAO,OAAO,eAAe,eAAe,OAAO,WAAW,CAAC;AAAA,IAC9G,CAAC,KAAK;AAAA,EACR;AAEA,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MACrB;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,IAAI,KAAK;AAAA,QACrB,MAAK;AAAA,QACL;AAAA,QACA,SAAQ;AAAA,QACR,WAAU;AAAA,QACV;AAAA,QAEA;AAAA,8BAAC,aAAU,eAAY,QAAO,WAAU,yBAAwB;AAAA,UAC/D,IAAI,KAAK;AAAA;AAAA;AAAA,IACZ,GACF;AAAA,IACA,oBAAC,kBAAe,KAAU,OAAM,OAAM,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAC9E,+BAAC,WACC;AAAA,0BAAC,gBAAa,aAAa,IAAI,KAAK,mBAAmB,cAAY,IAAI,KAAK,mBAAmB;AAAA,MAC/F,qBAAC,eACC;AAAA,4BAAC,gBAAc,cAAI,KAAK,OAAM;AAAA,QAC9B,oBAAC,gBACE,kBAAQ,IAAI,CAAC,WAAW;AACvB,gBAAM,YAAY,OAAO,aAAa;AAEtC,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,OAAO,UAAU,MAAM,SAAS,OAAO;AAAA,cAC9C,UAAU,MAAM,OAAO,iBAAiB,CAAC,SAAS;AAAA,cAElD;AAAA,oCAAC,UAAK,WAAU,YAAY,iBAAO,UAAU,MAAM,SAAS,OAAO,IAAG;AAAA,gBACtE,oBAAC,SAAM,WAAW,GAAG,kBAAkB,YAAY,gBAAgB,WAAW,GAAG;AAAA;AAAA;AAAA,YAL5E,OAAO;AAAA,UAMd;AAAA,QAEJ,CAAC,GACH;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/data-grid/data-grid-view-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport type { Table } from \"@tanstack/react-table\";\nimport { Check, Settings2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"../components/ui/button.js\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList\n} from \"../components/ui/command.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../components/ui/popover.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useResolvedDataGridMessages } from \"./data-grid-locale.js\";\nimport type { DataGridLocale, DataGridMessages } from \"./messages.js\";\n\ninterface DataGridViewMenuProps<TData> extends React.ComponentProps<typeof PopoverContent> {\n  table: Table<TData>;\n  disabled?: boolean;\n  /**\n   * Ngôn ngữ của menu: `\"en\"` (mặc định) · `\"vi\"`, hoặc cả một bảng chuỗi tự soạn.\n   *\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\n   * cả màn bằng `DataGridLocaleProvider` (một lần, đúng cho mọi mảnh), hoặc truyền prop này cho\n   * từng menu. Prop thắng provider.\n   */\n  locale?: DataGridLocale | DataGridMessages;\n}\n\n/** Ẩn/hiện cột của lưới. Cột muốn khoá luôn hiển thị thì đặt `enableHiding: false`. */\nexport function DataGridViewMenu<TData>({\n  table,\n  disabled,\n  className,\n  locale,\n  ...props\n}: DataGridViewMenuProps<TData>) {\n  const msg = useResolvedDataGridMessages(locale);\n  const dir = useDirection();\n\n  const columns = React.useMemo(\n    () => table.getAllColumns().filter((column) => typeof column.accessorFn !== \"undefined\" && column.getCanHide()),\n    [table]\n  );\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          aria-label={msg.view.toggleColumns}\n          role=\"combobox\"\n          dir={dir}\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"font-normal\"\n          disabled={disabled}\n        >\n          <Settings2 aria-hidden=\"true\" className=\"size-3.5 text-muted-foreground\" />\n          {msg.view.trigger}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent dir={dir} align=\"end\" className={cn(\"w-52 p-0\", className)} {...props}>\n        <Command>\n          <CommandInput placeholder={msg.view.searchPlaceholder} aria-label={msg.view.searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{msg.view.empty}</CommandEmpty>\n            <CommandGroup>\n              {columns.map((column) => {\n                const isVisible = column.getIsVisible();\n\n                return (\n                  <CommandItem\n                    key={column.id}\n                    value={column.columnDef.meta?.label ?? column.id}\n                    onSelect={() => column.toggleVisibility(!isVisible)}\n                  >\n                    <span className=\"truncate\">{column.columnDef.meta?.label ?? column.id}</span>\n                    <Check className={cn(\"ms-auto size-4\", isVisible ? \"opacity-100\" : \"opacity-0\")} />\n                  </CommandItem>\n                );\n              })}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";AAoDQ,SASE,KATF;AAlDR,SAAS,oBAAoB;AAE7B,SAAS,OAAO,iBAAiB;AACjC,YAAY,WAAW;AACvB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AACnB,SAAS,mCAAmC;AAiBrC,SAAS,iBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,QAAM,MAAM,4BAA4B,MAAM;AAC9C,QAAM,MAAM,aAAa;AAEzB,QAAM,UAAU,MAAM;AAAA,IACpB,MAAM,MAAM,cAAc,EAAE,OAAO,CAAC,WAAW,OAAO,OAAO,eAAe,eAAe,OAAO,WAAW,CAAC;AAAA,IAC9G,CAAC,KAAK;AAAA,EACR;AAEA,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MACrB;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,IAAI,KAAK;AAAA,QACrB,MAAK;AAAA,QACL;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAU;AAAA,QACV;AAAA,QAEA;AAAA,8BAAC,aAAU,eAAY,QAAO,WAAU,kCAAiC;AAAA,UACxE,IAAI,KAAK;AAAA;AAAA;AAAA,IACZ,GACF;AAAA,IACA,oBAAC,kBAAe,KAAU,OAAM,OAAM,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAC9E,+BAAC,WACC;AAAA,0BAAC,gBAAa,aAAa,IAAI,KAAK,mBAAmB,cAAY,IAAI,KAAK,mBAAmB;AAAA,MAC/F,qBAAC,eACC;AAAA,4BAAC,gBAAc,cAAI,KAAK,OAAM;AAAA,QAC9B,oBAAC,gBACE,kBAAQ,IAAI,CAAC,WAAW;AACvB,gBAAM,YAAY,OAAO,aAAa;AAEtC,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,OAAO,UAAU,MAAM,SAAS,OAAO;AAAA,cAC9C,UAAU,MAAM,OAAO,iBAAiB,CAAC,SAAS;AAAA,cAElD;AAAA,oCAAC,UAAK,WAAU,YAAY,iBAAO,UAAU,MAAM,SAAS,OAAO,IAAG;AAAA,gBACtE,oBAAC,SAAM,WAAW,GAAG,kBAAkB,YAAY,gBAAgB,WAAW,GAAG;AAAA;AAAA;AAAA,YAL5E,OAAO;AAAA,UAMd;AAAA,QAEJ,CAAC,GACH;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -1,10 +1,13 @@
 import * as React from 'react';
+import { DataGridLocale } from './messages.js';
 import { Direction } from './types.js';
 import { useDataGrid } from './use-data-grid.js';
+import { DataGridMessages } from './messages-en.js';
+import './messages-vi.js';
 import '@tanstack/react-table';
 import '@tanstack/react-virtual';
 
-interface DataGridProps<TData> extends Omit<ReturnType<typeof useDataGrid<TData>>, "dir">, Omit<React.ComponentProps<"div">, "contextMenu"> {
+interface DataGridProps<TData> extends Omit<ReturnType<typeof useDataGrid<TData>>, "dir" | "locale">, Omit<React.ComponentProps<"div">, "contextMenu"> {
     dir?: Direction;
     /**
      * Chiều cao tối đa của hộp cuộn: số = px, chuỗi = giá trị CSS bất kỳ
@@ -13,6 +16,15 @@ interface DataGridProps<TData> extends Omit<ReturnType<typeof useDataGrid<TData>
     height?: number | string;
     /** Kéo giãn các cột cho vừa bề ngang khi tổng bề rộng cột nhỏ hơn khung */
     stretchColumns?: boolean;
+    /**
+     * Ngôn ngữ của lưới: `"en"` (mặc định) · `"vi"`, hoặc cả một bảng chuỗi tự soạn.
+     *
+     * Thường nó đi theo kết quả của {@link useDataGrid} nên không phải truyền lại ở đây. Giá trị
+     * đặt thẳng lên `<DataGrid>` THẮNG giá trị từ hook — hữu ích khi một màn có hai lưới khác ngôn
+     * ngữ. Thanh công cụ nằm ngoài lưới nên nó KHÔNG nhận được giá trị này: bọc cả màn bằng
+     * `DataGridLocaleProvider`, hoặc truyền `locale` cho từng menu.
+     */
+    locale?: DataGridLocale | DataGridMessages;
 }
 /**
  * Lưới dữ liệu sửa trực tiếp (như bảng tính): ảo hoá dòng, điều hướng bằng bàn phím,
@@ -27,6 +39,6 @@ interface DataGridProps<TData> extends Omit<ReturnType<typeof useDataGrid<TData>
  * `aria-label` / `aria-labelledby` / `aria-describedby` được đặt lên đúng thẻ mang
  * `role="grid"` (thẻ bọc ngoài chỉ là hộp bố cục, gắn nhãn lên đó trình đọc màn hình bỏ qua).
  */
-declare function DataGrid<TData>({ dataGridRef, headerRef, rowMapRef, footerRef, dir, table, tableMeta, virtualTotalSize, virtualItems, measureElement, columns, columnSizeVars, searchState, searchMatchesByRow, activeSearchMatch, cellSelectionMap, focusedCell, editingCell, rowHeight, contextMenu, pasteDialog, onRowAdd: onRowAddProp, height, stretchColumns, adjustLayout, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }: DataGridProps<TData>): React.JSX.Element;
+declare function DataGrid<TData>({ dataGridRef, headerRef, rowMapRef, footerRef, dir, table, tableMeta, virtualTotalSize, virtualItems, measureElement, columns, columnSizeVars, searchState, searchMatchesByRow, activeSearchMatch, cellSelectionMap, focusedCell, editingCell, rowHeight, contextMenu, pasteDialog, onRowAdd: onRowAddProp, height, stretchColumns, locale, adjustLayout, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }: DataGridProps<TData>): React.JSX.Element;
 
 export { DataGrid };

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

@@ -4,13 +4,14 @@ import { Plus } from "lucide-react";
 import * as React from "react";
 import { TooltipProvider } from "../components/ui/tooltip.js";
 import { cn } from "../lib/cn.js";
+import { useAsRef } from "../lib/use-as-ref.js";
 import { DataGridColumnHeader } from "./data-grid-column-header.js";
 import { DataGridContextMenu } from "./data-grid-context-menu.js";
+import { DataGridLocaleProvider } from "./data-grid-locale.js";
 import { DataGridPasteDialog } from "./data-grid-paste-dialog.js";
 import { DataGridRow } from "./data-grid-row.js";
 import { DataGridSearch } from "./data-grid-search.js";
-import { msg } from "./messages.js";
-import { useAsRef } from "./use-as-ref.js";
+import { getDataGridMessages } from "./messages.js";
 import { flexRender, getColumnBorderVisibility, getColumnPinningStyle } from "./utils.js";
 const EMPTY_CELL_SELECTION_SET = /* @__PURE__ */ new Set();
 function DataGrid({
@@ -38,6 +39,7 @@ function DataGrid({
   onRowAdd: onRowAddProp,
   height = 600,
   stretchColumns = false,
+  locale,
   adjustLayout = false,
   className,
   "aria-label": ariaLabel,
@@ -69,7 +71,8 @@ function DataGrid({
     },
     [onRowAddRef]
   );
-  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs("div", { "data-slot": "grid-wrapper", dir, ...props, className: cn("relative flex w-full flex-col", className), children: [
+  const msg = React.useMemo(() => getDataGridMessages(locale), [locale]);
+  return /* @__PURE__ */ jsx(DataGridLocaleProvider, { locale, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs("div", { "data-slot": "grid-wrapper", dir, ...props, className: cn("relative flex w-full flex-col", className), children: [
     searchState && /* @__PURE__ */ jsx(DataGridSearch, { ...searchState }),
     /* @__PURE__ */ jsx(DataGridContextMenu, { tableMeta, columns, contextMenu }),
     /* @__PURE__ */ jsx(DataGridPasteDialog, { tableMeta, pasteDialog }),
@@ -227,7 +230,7 @@ function DataGrid({
         ]
       }
     )
-  ] }) });
+  ] }) }) });
 }
 export {
   DataGrid

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/data-grid/data-grid.tsx"],"sourcesContent":["\"use client\";\n\nimport { Plus } from \"lucide-react\";\nimport * as React from \"react\";\nimport { TooltipProvider } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { DataGridColumnHeader } from \"./data-grid-column-header.js\";\nimport { DataGridContextMenu } from \"./data-grid-context-menu.js\";\nimport { DataGridPasteDialog } from \"./data-grid-paste-dialog.js\";\nimport { DataGridRow } from \"./data-grid-row.js\";\nimport { DataGridSearch } from \"./data-grid-search.js\";\nimport { msg } from \"./messages.js\";\nimport type { Direction } from \"./types.js\";\nimport { useAsRef } from \"./use-as-ref.js\";\nimport type { useDataGrid } from \"./use-data-grid.js\";\nimport { flexRender, getColumnBorderVisibility, getColumnPinningStyle } from \"./utils.js\";\n\nconst EMPTY_CELL_SELECTION_SET = new Set<string>();\n\ninterface DataGridProps<TData>\n  extends Omit<ReturnType<typeof useDataGrid<TData>>, \"dir\">,\n    Omit<React.ComponentProps<\"div\">, \"contextMenu\"> {\n  dir?: Direction;\n  /**\n   * Chiều cao tối đa của hộp cuộn: số = px, chuỗi = giá trị CSS bất kỳ\n   * (vd `\"100%\"`, `\"calc(100dvh - 220px)\"` khi muốn lưới lấp đầy phần còn lại của trang).\n   */\n  height?: number | string;\n  /** Kéo giãn các cột cho vừa bề ngang khi tổng bề rộng cột nhỏ hơn khung */\n  stretchColumns?: boolean;\n}\n\n/**\n * Lưới dữ liệu sửa trực tiếp (như bảng tính): ảo hoá dòng, điều hướng bằng bàn phím,\n * chọn vùng ô, sao chép/cắt/dán, ghim cột, đổi rộng cột.\n *\n * Nhận nguyên kết quả của {@link useDataGrid}:\n * ```tsx\n * const { table, ...dataGridProps } = useDataGrid({ data, columns, onDataChange });\n * <DataGrid {...dataGridProps} table={table} aria-label=\"Danh sách bệnh nhân\" />\n * ```\n *\n * `aria-label` / `aria-labelledby` / `aria-describedby` được đặt lên đúng thẻ mang\n * `role=\"grid\"` (thẻ bọc ngoài chỉ là hộp bố cục, gắn nhãn lên đó trình đọc màn hình bỏ qua).\n */\nexport function DataGrid<TData>({\n  dataGridRef,\n  headerRef,\n  rowMapRef,\n  footerRef,\n  dir = \"ltr\",\n  table,\n  tableMeta,\n  virtualTotalSize,\n  virtualItems,\n  measureElement,\n  columns,\n  columnSizeVars,\n  searchState,\n  searchMatchesByRow,\n  activeSearchMatch,\n  cellSelectionMap,\n  focusedCell,\n  editingCell,\n  rowHeight,\n  contextMenu,\n  pasteDialog,\n  onRowAdd: onRowAddProp,\n  height = 600,\n  stretchColumns = false,\n  adjustLayout = false,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n  \"aria-describedby\": ariaDescribedby,\n  ...props\n}: DataGridProps<TData>) {\n  const rows = table.getRowModel().rows;\n  const readOnly = tableMeta?.readOnly ?? false;\n  const columnVisibility = table.getState().columnVisibility;\n  const columnPinning = table.getState().columnPinning;\n\n  const onRowAddRef = useAsRef(onRowAddProp);\n\n  const onRowAdd = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      onRowAddRef.current?.(event);\n    },\n    [onRowAddRef]\n  );\n\n  const onDataGridContextMenu = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    event.preventDefault();\n  }, []);\n\n  const onFooterCellKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!onRowAddRef.current) return;\n\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onRowAddRef.current();\n      }\n    },\n    [onRowAddRef]\n  );\n\n  return (\n    <TooltipProvider delayDuration={200}>\n      <div data-slot=\"grid-wrapper\" dir={dir} {...props} className={cn(\"relative flex w-full flex-col\", className)}>\n        {searchState && <DataGridSearch {...searchState} />}\n        <DataGridContextMenu tableMeta={tableMeta} columns={columns} contextMenu={contextMenu} />\n        <DataGridPasteDialog tableMeta={tableMeta} pasteDialog={pasteDialog} />\n        <div\n          role=\"grid\"\n          aria-label={ariaLabelledby ? undefined : (ariaLabel ?? msg.grid.label)}\n          aria-labelledby={ariaLabelledby}\n          aria-describedby={ariaDescribedby}\n          aria-rowcount={rows.length + (onRowAddProp ? 1 : 0)}\n          aria-colcount={columns.length}\n          data-slot=\"grid\"\n          tabIndex={0}\n          ref={dataGridRef}\n          className=\"relative grid select-none overflow-auto rounded-lg border bg-card focus:outline-none focus-visible:outline-none\"\n          style={{\n            ...columnSizeVars,\n            maxHeight: typeof height === \"number\" ? `${height}px` : height\n          }}\n          onContextMenu={onDataGridContextMenu}\n        >\n          <div\n            role=\"rowgroup\"\n            data-slot=\"grid-header\"\n            ref={headerRef}\n            className=\"sticky top-0 z-10 grid border-b bg-card\"\n          >\n            {table.getHeaderGroups().map((headerGroup, rowIndex) => (\n              <div\n                key={headerGroup.id}\n                role=\"row\"\n                aria-rowindex={rowIndex + 1}\n                data-slot=\"grid-header-row\"\n                tabIndex={-1}\n                className=\"flex w-full\"\n              >\n                {headerGroup.headers.map((header, colIndex) => {\n                  const sorting = table.getState().sorting;\n                  const currentSort = sorting.find((sort) => sort.id === header.column.id);\n                  const isSortable = header.column.getCanSort();\n\n                  const nextHeader = headerGroup.headers[colIndex + 1];\n                  const isLastColumn = colIndex === headerGroup.headers.length - 1;\n\n                  const { showEndBorder, showStartBorder } = getColumnBorderVisibility({\n                    column: header.column,\n                    nextColumn: nextHeader?.column,\n                    isLastColumn\n                  });\n\n                  return (\n                    <div\n                      key={header.id}\n                      role=\"columnheader\"\n                      aria-colindex={colIndex + 1}\n                      aria-sort={\n                        currentSort?.desc === false\n                          ? \"ascending\"\n                          : currentSort?.desc === true\n                            ? \"descending\"\n                            : isSortable\n                              ? \"none\"\n                              : undefined\n                      }\n                      data-slot=\"grid-header-cell\"\n                      tabIndex={-1}\n                      className={cn(\"relative\", {\n                        grow: stretchColumns && header.column.id !== \"select\",\n                        \"border-e\": showEndBorder && header.column.id !== \"select\",\n                        \"border-s\": showStartBorder && header.column.id !== \"select\"\n                      })}\n                      style={{\n                        ...getColumnPinningStyle({ column: header.column, dir }),\n                        width: `calc(var(--header-${header.id}-size) * 1px)`\n                      }}\n                    >\n                      {header.isPlaceholder ? null : typeof header.column.columnDef.header === \"function\" ? (\n                        <div className=\"size-full px-3 py-1.5\">\n                          {flexRender(header.column.columnDef.header, header.getContext())}\n                        </div>\n                      ) : (\n                        <DataGridColumnHeader header={header} table={table} />\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n          <div\n            role=\"rowgroup\"\n            data-slot=\"grid-body\"\n            className=\"relative grid\"\n            style={{\n              height: `${virtualTotalSize}px`,\n              contain: adjustLayout ? \"layout paint\" : \"strict\"\n            }}\n          >\n            {virtualItems.map((virtualItem) => {\n              const row = rows[virtualItem.index];\n              if (!row) return null;\n\n              const cellSelectionKeys = cellSelectionMap?.get(virtualItem.index) ?? EMPTY_CELL_SELECTION_SET;\n\n              const searchMatchColumns = searchMatchesByRow?.get(virtualItem.index) ?? null;\n              const isActiveSearchRow = activeSearchMatch?.rowIndex === virtualItem.index;\n\n              return (\n                <DataGridRow\n                  key={row.id}\n                  row={row}\n                  tableMeta={tableMeta}\n                  rowMapRef={rowMapRef}\n                  virtualItem={virtualItem}\n                  measureElement={measureElement}\n                  rowHeight={rowHeight}\n                  columnVisibility={columnVisibility}\n                  columnPinning={columnPinning}\n                  focusedCell={focusedCell}\n                  editingCell={editingCell}\n                  cellSelectionKeys={cellSelectionKeys}\n                  searchMatchColumns={searchMatchColumns}\n                  activeSearchMatch={isActiveSearchRow ? activeSearchMatch : null}\n                  dir={dir}\n                  adjustLayout={adjustLayout}\n                  stretchColumns={stretchColumns}\n                  readOnly={readOnly}\n                />\n              );\n            })}\n          </div>\n          {/* Chỉ hiện dòng \"Thêm dòng\" khi ứng dụng thật sự truyền onRowAdd\n            (biến `onRowAdd` bên dưới là callback bọc, luôn khác undefined). */}\n          {!readOnly && onRowAddProp && (\n            <div\n              role=\"rowgroup\"\n              data-slot=\"grid-footer\"\n              ref={footerRef}\n              className=\"sticky bottom-0 z-10 grid border-t bg-card\"\n            >\n              <div\n                role=\"row\"\n                aria-rowindex={rows.length + 2}\n                data-slot=\"grid-add-row\"\n                tabIndex={-1}\n                className=\"flex w-full\"\n              >\n                <div\n                  role=\"gridcell\"\n                  tabIndex={0}\n                  className=\"relative flex h-9 grow items-center bg-muted/30 transition-colors hover:bg-muted/50 focus:bg-muted/50 focus:outline-none focus-visible:outline-none\"\n                  style={{\n                    width: table.getTotalSize(),\n                    minWidth: table.getTotalSize()\n                  }}\n                  onClick={onRowAdd}\n                  onKeyDown={onFooterCellKeyDown}\n                >\n                  <div className=\"sticky start-0 flex items-center gap-2 px-3 text-muted-foreground\">\n                    <Plus className=\"size-3.5\" />\n                    <span className=\"text-sm\">{msg.grid.addRow}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/data-grid/data-grid.tsx"],"sourcesContent":["\"use client\";\n\nimport { Plus } from \"lucide-react\";\nimport * as React from \"react\";\nimport { TooltipProvider } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useAsRef } from \"../lib/use-as-ref.js\";\nimport { DataGridColumnHeader } from \"./data-grid-column-header.js\";\nimport { DataGridContextMenu } from \"./data-grid-context-menu.js\";\nimport { DataGridLocaleProvider } from \"./data-grid-locale.js\";\nimport { DataGridPasteDialog } from \"./data-grid-paste-dialog.js\";\nimport { DataGridRow } from \"./data-grid-row.js\";\nimport { DataGridSearch } from \"./data-grid-search.js\";\nimport { type DataGridLocale, type DataGridMessages, getDataGridMessages } from \"./messages.js\";\nimport type { Direction } from \"./types.js\";\nimport type { useDataGrid } from \"./use-data-grid.js\";\nimport { flexRender, getColumnBorderVisibility, getColumnPinningStyle } from \"./utils.js\";\n\nconst EMPTY_CELL_SELECTION_SET = new Set<string>();\n\ninterface DataGridProps<TData>\n  extends Omit<ReturnType<typeof useDataGrid<TData>>, \"dir\" | \"locale\">,\n    Omit<React.ComponentProps<\"div\">, \"contextMenu\"> {\n  dir?: Direction;\n  /**\n   * Chiều cao tối đa của hộp cuộn: số = px, chuỗi = giá trị CSS bất kỳ\n   * (vd `\"100%\"`, `\"calc(100dvh - 220px)\"` khi muốn lưới lấp đầy phần còn lại của trang).\n   */\n  height?: number | string;\n  /** Kéo giãn các cột cho vừa bề ngang khi tổng bề rộng cột nhỏ hơn khung */\n  stretchColumns?: boolean;\n  /**\n   * Ngôn ngữ của lưới: `\"en\"` (mặc định) · `\"vi\"`, hoặc cả một bảng chuỗi tự soạn.\n   *\n   * Thường nó đi theo kết quả của {@link useDataGrid} nên không phải truyền lại ở đây. Giá trị\n   * đặt thẳng lên `<DataGrid>` THẮNG giá trị từ hook — hữu ích khi một màn có hai lưới khác ngôn\n   * ngữ. Thanh công cụ nằm ngoài lưới nên nó KHÔNG nhận được giá trị này: bọc cả màn bằng\n   * `DataGridLocaleProvider`, hoặc truyền `locale` cho từng menu.\n   */\n  locale?: DataGridLocale | DataGridMessages;\n}\n\n/**\n * Lưới dữ liệu sửa trực tiếp (như bảng tính): ảo hoá dòng, điều hướng bằng bàn phím,\n * chọn vùng ô, sao chép/cắt/dán, ghim cột, đổi rộng cột.\n *\n * Nhận nguyên kết quả của {@link useDataGrid}:\n * ```tsx\n * const { table, ...dataGridProps } = useDataGrid({ data, columns, onDataChange });\n * <DataGrid {...dataGridProps} table={table} aria-label=\"Danh sách bệnh nhân\" />\n * ```\n *\n * `aria-label` / `aria-labelledby` / `aria-describedby` được đặt lên đúng thẻ mang\n * `role=\"grid\"` (thẻ bọc ngoài chỉ là hộp bố cục, gắn nhãn lên đó trình đọc màn hình bỏ qua).\n */\nexport function DataGrid<TData>({\n  dataGridRef,\n  headerRef,\n  rowMapRef,\n  footerRef,\n  dir = \"ltr\",\n  table,\n  tableMeta,\n  virtualTotalSize,\n  virtualItems,\n  measureElement,\n  columns,\n  columnSizeVars,\n  searchState,\n  searchMatchesByRow,\n  activeSearchMatch,\n  cellSelectionMap,\n  focusedCell,\n  editingCell,\n  rowHeight,\n  contextMenu,\n  pasteDialog,\n  onRowAdd: onRowAddProp,\n  height = 600,\n  stretchColumns = false,\n  locale,\n  adjustLayout = false,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n  \"aria-describedby\": ariaDescribedby,\n  ...props\n}: DataGridProps<TData>) {\n  const rows = table.getRowModel().rows;\n  const readOnly = tableMeta?.readOnly ?? false;\n  const columnVisibility = table.getState().columnVisibility;\n  const columnPinning = table.getState().columnPinning;\n\n  const onRowAddRef = useAsRef(onRowAddProp);\n\n  const onRowAdd = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      onRowAddRef.current?.(event);\n    },\n    [onRowAddRef]\n  );\n\n  const onDataGridContextMenu = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    event.preventDefault();\n  }, []);\n\n  const onFooterCellKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!onRowAddRef.current) return;\n\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onRowAddRef.current();\n      }\n    },\n    [onRowAddRef]\n  );\n\n  const msg = React.useMemo(() => getDataGridMessages(locale), [locale]);\n\n  return (\n    <DataGridLocaleProvider locale={locale}>\n      <TooltipProvider delayDuration={200}>\n        <div data-slot=\"grid-wrapper\" dir={dir} {...props} className={cn(\"relative flex w-full flex-col\", className)}>\n          {searchState && <DataGridSearch {...searchState} />}\n          <DataGridContextMenu tableMeta={tableMeta} columns={columns} contextMenu={contextMenu} />\n          <DataGridPasteDialog tableMeta={tableMeta} pasteDialog={pasteDialog} />\n          <div\n            role=\"grid\"\n            aria-label={ariaLabelledby ? undefined : (ariaLabel ?? msg.grid.label)}\n            aria-labelledby={ariaLabelledby}\n            aria-describedby={ariaDescribedby}\n            aria-rowcount={rows.length + (onRowAddProp ? 1 : 0)}\n            aria-colcount={columns.length}\n            data-slot=\"grid\"\n            tabIndex={0}\n            ref={dataGridRef}\n            className=\"relative grid select-none overflow-auto rounded-lg border bg-card focus:outline-none focus-visible:outline-none\"\n            style={{\n              ...columnSizeVars,\n              maxHeight: typeof height === \"number\" ? `${height}px` : height\n            }}\n            onContextMenu={onDataGridContextMenu}\n          >\n            <div\n              role=\"rowgroup\"\n              data-slot=\"grid-header\"\n              ref={headerRef}\n              className=\"sticky top-0 z-10 grid border-b bg-card\"\n            >\n              {table.getHeaderGroups().map((headerGroup, rowIndex) => (\n                <div\n                  key={headerGroup.id}\n                  role=\"row\"\n                  aria-rowindex={rowIndex + 1}\n                  data-slot=\"grid-header-row\"\n                  tabIndex={-1}\n                  className=\"flex w-full\"\n                >\n                  {headerGroup.headers.map((header, colIndex) => {\n                    const sorting = table.getState().sorting;\n                    const currentSort = sorting.find((sort) => sort.id === header.column.id);\n                    const isSortable = header.column.getCanSort();\n\n                    const nextHeader = headerGroup.headers[colIndex + 1];\n                    const isLastColumn = colIndex === headerGroup.headers.length - 1;\n\n                    const { showEndBorder, showStartBorder } = getColumnBorderVisibility({\n                      column: header.column,\n                      nextColumn: nextHeader?.column,\n                      isLastColumn\n                    });\n\n                    return (\n                      <div\n                        key={header.id}\n                        role=\"columnheader\"\n                        aria-colindex={colIndex + 1}\n                        aria-sort={\n                          currentSort?.desc === false\n                            ? \"ascending\"\n                            : currentSort?.desc === true\n                              ? \"descending\"\n                              : isSortable\n                                ? \"none\"\n                                : undefined\n                        }\n                        data-slot=\"grid-header-cell\"\n                        tabIndex={-1}\n                        className={cn(\"relative\", {\n                          grow: stretchColumns && header.column.id !== \"select\",\n                          \"border-e\": showEndBorder && header.column.id !== \"select\",\n                          \"border-s\": showStartBorder && header.column.id !== \"select\"\n                        })}\n                        style={{\n                          ...getColumnPinningStyle({ column: header.column, dir }),\n                          width: `calc(var(--header-${header.id}-size) * 1px)`\n                        }}\n                      >\n                        {header.isPlaceholder ? null : typeof header.column.columnDef.header === \"function\" ? (\n                          <div className=\"size-full px-3 py-1.5\">\n                            {flexRender(header.column.columnDef.header, header.getContext())}\n                          </div>\n                        ) : (\n                          <DataGridColumnHeader header={header} table={table} />\n                        )}\n                      </div>\n                    );\n                  })}\n                </div>\n              ))}\n            </div>\n            <div\n              role=\"rowgroup\"\n              data-slot=\"grid-body\"\n              className=\"relative grid\"\n              style={{\n                height: `${virtualTotalSize}px`,\n                contain: adjustLayout ? \"layout paint\" : \"strict\"\n              }}\n            >\n              {virtualItems.map((virtualItem) => {\n                const row = rows[virtualItem.index];\n                if (!row) return null;\n\n                const cellSelectionKeys = cellSelectionMap?.get(virtualItem.index) ?? EMPTY_CELL_SELECTION_SET;\n\n                const searchMatchColumns = searchMatchesByRow?.get(virtualItem.index) ?? null;\n                const isActiveSearchRow = activeSearchMatch?.rowIndex === virtualItem.index;\n\n                return (\n                  <DataGridRow\n                    key={row.id}\n                    row={row}\n                    tableMeta={tableMeta}\n                    rowMapRef={rowMapRef}\n                    virtualItem={virtualItem}\n                    measureElement={measureElement}\n                    rowHeight={rowHeight}\n                    columnVisibility={columnVisibility}\n                    columnPinning={columnPinning}\n                    focusedCell={focusedCell}\n                    editingCell={editingCell}\n                    cellSelectionKeys={cellSelectionKeys}\n                    searchMatchColumns={searchMatchColumns}\n                    activeSearchMatch={isActiveSearchRow ? activeSearchMatch : null}\n                    dir={dir}\n                    adjustLayout={adjustLayout}\n                    stretchColumns={stretchColumns}\n                    readOnly={readOnly}\n                  />\n                );\n              })}\n            </div>\n            {/* Chỉ hiện dòng \"Thêm dòng\" khi ứng dụng thật sự truyền onRowAdd\n            (biến `onRowAdd` bên dưới là callback bọc, luôn khác undefined). */}\n            {!readOnly && onRowAddProp && (\n              <div\n                role=\"rowgroup\"\n                data-slot=\"grid-footer\"\n                ref={footerRef}\n                className=\"sticky bottom-0 z-10 grid border-t bg-card\"\n              >\n                <div\n                  role=\"row\"\n                  aria-rowindex={rows.length + 2}\n                  data-slot=\"grid-add-row\"\n                  tabIndex={-1}\n                  className=\"flex w-full\"\n                >\n                  <div\n                    role=\"gridcell\"\n                    tabIndex={0}\n                    className=\"relative flex h-9 grow items-center bg-muted/30 transition-colors hover:bg-muted/50 focus:bg-muted/50 focus:outline-none focus-visible:outline-none\"\n                    style={{\n                      width: table.getTotalSize(),\n                      minWidth: table.getTotalSize()\n                    }}\n                    onClick={onRowAdd}\n                    onKeyDown={onFooterCellKeyDown}\n                  >\n                    <div className=\"sticky start-0 flex items-center gap-2 px-3 text-muted-foreground\">\n                      <Plus className=\"size-3.5\" />\n                      <span className=\"text-sm\">{msg.grid.addRow}</span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </TooltipProvider>\n    </DataGridLocaleProvider>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/data-grid/filters.d.ts

@@ -1,28 +1,24 @@
 import { FilterFn } from '@tanstack/react-table';
-import { BooleanFilterOperator, DateFilterOperator, NumberFilterOperator, SelectFilterOperator, TextFilterOperator, FilterOperator } from './types.js';
+import { DataGridMessages } from './messages-en.js';
+import { FilterOperator, BooleanFilterOperator, DateFilterOperator, NumberFilterOperator, SelectFilterOperator, TextFilterOperator } from './types.js';
 
-declare const TEXT_FILTER_OPERATORS: ReadonlyArray<{
+interface OperatorOption<TOperator extends FilterOperator> {
     label: string;
-    value: TextFilterOperator;
-}>;
-declare const NUMBER_FILTER_OPERATORS: ReadonlyArray<{
-    label: string;
-    value: NumberFilterOperator;
-}>;
-declare const DATE_FILTER_OPERATORS: ReadonlyArray<{
-    label: string;
-    value: DateFilterOperator;
-}>;
-declare const SELECT_FILTER_OPERATORS: ReadonlyArray<{
-    label: string;
-    value: SelectFilterOperator;
-}>;
-declare const BOOLEAN_FILTER_OPERATORS: ReadonlyArray<{
-    label: string;
-    value: BooleanFilterOperator;
-}>;
+    value: TOperator;
+}
+declare const TEXT_FILTER_OPERATORS: ReadonlyArray<OperatorOption<TextFilterOperator>>;
+declare const NUMBER_FILTER_OPERATORS: ReadonlyArray<OperatorOption<NumberFilterOperator>>;
+declare const DATE_FILTER_OPERATORS: ReadonlyArray<OperatorOption<DateFilterOperator>>;
+declare const SELECT_FILTER_OPERATORS: ReadonlyArray<OperatorOption<SelectFilterOperator>>;
+declare const BOOLEAN_FILTER_OPERATORS: ReadonlyArray<OperatorOption<BooleanFilterOperator>>;
 declare function getDefaultOperator(variant: string): FilterOperator;
-declare function getOperatorsForVariant(variant: string): ReadonlyArray<{
+/**
+ * Toán tử hợp lệ cho một kiểu ô, kèm nhãn đã dịch.
+ *
+ * `messages` bỏ trống = bảng mặc định (tiếng Anh) — giữ đúng chữ ký của `1.11.0` nên chỗ gọi cũ
+ * không phải sửa.
+ */
+declare function getOperatorsForVariant(variant: string, messages?: DataGridMessages): ReadonlyArray<{
     label: string;
     value: FilterOperator;
 }>;

package/dist/data-grid/filters.js

@@ -1,49 +1,69 @@
-import { msg } from "./messages.js";
-const op = msg.filter.operators;
-const TEXT_FILTER_OPERATORS = [
-  { label: op.contains, value: "contains" },
-  { label: op.notContains, value: "notContains" },
-  { label: op.equals, value: "equals" },
-  { label: op.notEquals, value: "notEquals" },
-  { label: op.startsWith, value: "startsWith" },
-  { label: op.endsWith, value: "endsWith" },
-  { label: op.isEmpty, value: "isEmpty" },
-  { label: op.isNotEmpty, value: "isNotEmpty" }
-];
-const NUMBER_FILTER_OPERATORS = [
-  { label: op.equals, value: "equals" },
-  { label: op.notEquals, value: "notEquals" },
-  { label: op.lessThan, value: "lessThan" },
-  { label: op.lessThanOrEqual, value: "lessThanOrEqual" },
-  { label: op.greaterThan, value: "greaterThan" },
-  { label: op.greaterThanOrEqual, value: "greaterThanOrEqual" },
-  { label: op.isBetween, value: "isBetween" },
-  { label: op.isEmpty, value: "isEmpty" },
-  { label: op.isNotEmpty, value: "isNotEmpty" }
-];
-const DATE_FILTER_OPERATORS = [
-  { label: op.dateEquals, value: "equals" },
-  { label: op.dateNotEquals, value: "notEquals" },
-  { label: op.before, value: "before" },
-  { label: op.after, value: "after" },
-  { label: op.onOrBefore, value: "onOrBefore" },
-  { label: op.onOrAfter, value: "onOrAfter" },
-  { label: op.isBetween, value: "isBetween" },
-  { label: op.isEmpty, value: "isEmpty" },
-  { label: op.isNotEmpty, value: "isNotEmpty" }
-];
-const SELECT_FILTER_OPERATORS = [
-  { label: op.is, value: "is" },
-  { label: op.isNot, value: "isNot" },
-  { label: op.isAnyOf, value: "isAnyOf" },
-  { label: op.isNoneOf, value: "isNoneOf" },
-  { label: op.isEmpty, value: "isEmpty" },
-  { label: op.isNotEmpty, value: "isNotEmpty" }
-];
-const BOOLEAN_FILTER_OPERATORS = [
-  { label: op.isTrue, value: "isTrue" },
-  { label: op.isFalse, value: "isFalse" }
-];
+import { getDataGridMessages } from "./messages.js";
+function buildTextOperators(m) {
+  const op = m.filter.operators;
+  return [
+    { label: op.contains, value: "contains" },
+    { label: op.notContains, value: "notContains" },
+    { label: op.equals, value: "equals" },
+    { label: op.notEquals, value: "notEquals" },
+    { label: op.startsWith, value: "startsWith" },
+    { label: op.endsWith, value: "endsWith" },
+    { label: op.isEmpty, value: "isEmpty" },
+    { label: op.isNotEmpty, value: "isNotEmpty" }
+  ];
+}
+function buildNumberOperators(m) {
+  const op = m.filter.operators;
+  return [
+    { label: op.equals, value: "equals" },
+    { label: op.notEquals, value: "notEquals" },
+    { label: op.lessThan, value: "lessThan" },
+    { label: op.lessThanOrEqual, value: "lessThanOrEqual" },
+    { label: op.greaterThan, value: "greaterThan" },
+    { label: op.greaterThanOrEqual, value: "greaterThanOrEqual" },
+    { label: op.isBetween, value: "isBetween" },
+    { label: op.isEmpty, value: "isEmpty" },
+    { label: op.isNotEmpty, value: "isNotEmpty" }
+  ];
+}
+function buildDateOperators(m) {
+  const op = m.filter.operators;
+  return [
+    { label: op.dateEquals, value: "equals" },
+    { label: op.dateNotEquals, value: "notEquals" },
+    { label: op.before, value: "before" },
+    { label: op.after, value: "after" },
+    { label: op.onOrBefore, value: "onOrBefore" },
+    { label: op.onOrAfter, value: "onOrAfter" },
+    { label: op.isBetween, value: "isBetween" },
+    { label: op.isEmpty, value: "isEmpty" },
+    { label: op.isNotEmpty, value: "isNotEmpty" }
+  ];
+}
+function buildSelectOperators(m) {
+  const op = m.filter.operators;
+  return [
+    { label: op.is, value: "is" },
+    { label: op.isNot, value: "isNot" },
+    { label: op.isAnyOf, value: "isAnyOf" },
+    { label: op.isNoneOf, value: "isNoneOf" },
+    { label: op.isEmpty, value: "isEmpty" },
+    { label: op.isNotEmpty, value: "isNotEmpty" }
+  ];
+}
+function buildBooleanOperators(m) {
+  const op = m.filter.operators;
+  return [
+    { label: op.isTrue, value: "isTrue" },
+    { label: op.isFalse, value: "isFalse" }
+  ];
+}
+const DEFAULT_MESSAGES = getDataGridMessages();
+const TEXT_FILTER_OPERATORS = buildTextOperators(DEFAULT_MESSAGES);
+const NUMBER_FILTER_OPERATORS = buildNumberOperators(DEFAULT_MESSAGES);
+const DATE_FILTER_OPERATORS = buildDateOperators(DEFAULT_MESSAGES);
+const SELECT_FILTER_OPERATORS = buildSelectOperators(DEFAULT_MESSAGES);
+const BOOLEAN_FILTER_OPERATORS = buildBooleanOperators(DEFAULT_MESSAGES);
 function getDefaultOperator(variant) {
   switch (variant) {
     case "number":
@@ -59,19 +79,20 @@ function getDefaultOperator(variant) {
       return "contains";
   }
 }
-function getOperatorsForVariant(variant) {
+function getOperatorsForVariant(variant, messages) {
+  const m = messages ?? DEFAULT_MESSAGES;
   switch (variant) {
     case "number":
-      return NUMBER_FILTER_OPERATORS;
+      return buildNumberOperators(m);
     case "date":
-      return DATE_FILTER_OPERATORS;
+      return buildDateOperators(m);
     case "select":
     case "multi-select":
-      return SELECT_FILTER_OPERATORS;
+      return buildSelectOperators(m);
     case "checkbox":
-      return BOOLEAN_FILTER_OPERATORS;
+      return buildBooleanOperators(m);
     default:
-      return TEXT_FILTER_OPERATORS;
+      return buildTextOperators(m);
   }
 }
 function getFilterFn() {

package/dist/data-grid/filters.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/data-grid/filters.ts"],"sourcesContent":["import type { FilterFn, Row } from \"@tanstack/react-table\";\nimport { msg } from \"./messages.js\";\nimport type {\n  BooleanFilterOperator,\n  DateFilterOperator,\n  FilterOperator,\n  FilterValue,\n  NumberFilterOperator,\n  SelectFilterOperator,\n  TextFilterOperator\n} from \"./types.js\";\n\nconst op = msg.filter.operators;\n\nexport const TEXT_FILTER_OPERATORS: ReadonlyArray<{\n  label: string;\n  value: TextFilterOperator;\n}> = [\n  { label: op.contains, value: \"contains\" },\n  { label: op.notContains, value: \"notContains\" },\n  { label: op.equals, value: \"equals\" },\n  { label: op.notEquals, value: \"notEquals\" },\n  { label: op.startsWith, value: \"startsWith\" },\n  { label: op.endsWith, value: \"endsWith\" },\n  { label: op.isEmpty, value: \"isEmpty\" },\n  { label: op.isNotEmpty, value: \"isNotEmpty\" }\n];\n\nexport const NUMBER_FILTER_OPERATORS: ReadonlyArray<{\n  label: string;\n  value: NumberFilterOperator;\n}> = [\n  { label: op.equals, value: \"equals\" },\n  { label: op.notEquals, value: \"notEquals\" },\n  { label: op.lessThan, value: \"lessThan\" },\n  { label: op.lessThanOrEqual, value: \"lessThanOrEqual\" },\n  { label: op.greaterThan, value: \"greaterThan\" },\n  { label: op.greaterThanOrEqual, value: \"greaterThanOrEqual\" },\n  { label: op.isBetween, value: \"isBetween\" },\n  { label: op.isEmpty, value: \"isEmpty\" },\n  { label: op.isNotEmpty, value: \"isNotEmpty\" }\n];\n\nexport const DATE_FILTER_OPERATORS: ReadonlyArray<{\n  label: string;\n  value: DateFilterOperator;\n}> = [\n  { label: op.dateEquals, value: \"equals\" },\n  { label: op.dateNotEquals, value: \"notEquals\" },\n  { label: op.before, value: \"before\" },\n  { label: op.after, value: \"after\" },\n  { label: op.onOrBefore, value: \"onOrBefore\" },\n  { label: op.onOrAfter, value: \"onOrAfter\" },\n  { label: op.isBetween, value: \"isBetween\" },\n  { label: op.isEmpty, value: \"isEmpty\" },\n  { label: op.isNotEmpty, value: \"isNotEmpty\" }\n];\n\nexport const SELECT_FILTER_OPERATORS: ReadonlyArray<{\n  label: string;\n  value: SelectFilterOperator;\n}> = [\n  { label: op.is, value: \"is\" },\n  { label: op.isNot, value: \"isNot\" },\n  { label: op.isAnyOf, value: \"isAnyOf\" },\n  { label: op.isNoneOf, value: \"isNoneOf\" },\n  { label: op.isEmpty, value: \"isEmpty\" },\n  { label: op.isNotEmpty, value: \"isNotEmpty\" }\n];\n\nexport const BOOLEAN_FILTER_OPERATORS: ReadonlyArray<{\n  label: string;\n  value: BooleanFilterOperator;\n}> = [\n  { label: op.isTrue, value: \"isTrue\" },\n  { label: op.isFalse, value: \"isFalse\" }\n];\n\nexport function getDefaultOperator(variant: string): FilterOperator {\n  switch (variant) {\n    case \"number\":\n      return \"equals\";\n    case \"date\":\n      return \"equals\";\n    case \"select\":\n    case \"multi-select\":\n      return \"is\";\n    case \"checkbox\":\n      return \"isTrue\";\n    default:\n      return \"contains\";\n  }\n}\n\nexport function getOperatorsForVariant(variant: string): ReadonlyArray<{\n  label: string;\n  value: FilterOperator;\n}> {\n  switch (variant) {\n    case \"number\":\n      return NUMBER_FILTER_OPERATORS;\n    case \"date\":\n      return DATE_FILTER_OPERATORS;\n    case \"select\":\n    case \"multi-select\":\n      return SELECT_FILTER_OPERATORS;\n    case \"checkbox\":\n      return BOOLEAN_FILTER_OPERATORS;\n    default:\n      return TEXT_FILTER_OPERATORS;\n  }\n}\n\nexport function getFilterFn<TData>(): FilterFn<TData> {\n  return (row: Row<TData>, columnId: string, filterValue: unknown): boolean => {\n    if (!filterValue || typeof filterValue !== \"object\") {\n      return true;\n    }\n\n    const filter = filterValue as FilterValue;\n    const { operator, value, endValue } = filter;\n\n    const cellValue = row.getValue(columnId);\n\n    if (operator === \"isEmpty\") {\n      return (\n        cellValue === null ||\n        cellValue === undefined ||\n        cellValue === \"\" ||\n        (Array.isArray(cellValue) && cellValue.length === 0)\n      );\n    }\n\n    if (operator === \"isNotEmpty\") {\n      return !(\n        cellValue === null ||\n        cellValue === undefined ||\n        cellValue === \"\" ||\n        (Array.isArray(cellValue) && cellValue.length === 0)\n      );\n    }\n\n    if (operator === \"isTrue\") {\n      return cellValue === true;\n    }\n\n    if (operator === \"isFalse\") {\n      return cellValue === false || !cellValue;\n    }\n\n    if (value === undefined || value === null || value === \"\") {\n      return true;\n    }\n\n    const cellValueStr = String(cellValue ?? \"\").toLowerCase();\n    const filterValueStr = typeof value === \"string\" ? value.toLowerCase() : String(value);\n\n    if (operator === \"contains\") {\n      return cellValueStr.includes(filterValueStr);\n    }\n\n    if (operator === \"notContains\") {\n      return !cellValueStr.includes(filterValueStr);\n    }\n\n    if (operator === \"equals\") {\n      if (typeof cellValue === \"number\" && typeof value === \"number\") {\n        return cellValue === value;\n      }\n      if (cellValue instanceof Date && typeof value === \"string\") {\n        const cellDate = new Date(cellValue);\n        const filterDate = new Date(value);\n        return cellDate.toDateString() === filterDate.toDateString();\n      }\n      return cellValueStr === filterValueStr;\n    }\n\n    if (operator === \"notEquals\") {\n      if (typeof cellValue === \"number\" && typeof value === \"number\") {\n        return cellValue !== value;\n      }\n      if (cellValue instanceof Date && typeof value === \"string\") {\n        const cellDate = new Date(cellValue);\n        const filterDate = new Date(value);\n        return cellDate.toDateString() !== filterDate.toDateString();\n      }\n      return cellValueStr !== filterValueStr;\n    }\n\n    if (operator === \"startsWith\") {\n      return cellValueStr.startsWith(filterValueStr);\n    }\n\n    if (operator === \"endsWith\") {\n      return cellValueStr.endsWith(filterValueStr);\n    }\n\n    if (typeof cellValue === \"number\" && typeof value === \"number\") {\n      if (operator === \"greaterThan\") {\n        return cellValue > value;\n      }\n\n      if (operator === \"greaterThanOrEqual\") {\n        return cellValue >= value;\n      }\n\n      if (operator === \"lessThan\") {\n        return cellValue < value;\n      }\n\n      if (operator === \"lessThanOrEqual\") {\n        return cellValue <= value;\n      }\n\n      if (operator === \"isBetween\" && typeof endValue === \"number\") {\n        return cellValue >= value && cellValue <= endValue;\n      }\n    }\n\n    if (cellValue instanceof Date || typeof cellValue === \"string\") {\n      const cellDate = new Date(cellValue);\n      if (!Number.isNaN(cellDate.getTime()) && typeof value === \"string\") {\n        const filterDate = new Date(value);\n\n        if (operator === \"before\") {\n          return cellDate < filterDate;\n        }\n\n        if (operator === \"after\") {\n          return cellDate > filterDate;\n        }\n\n        if (operator === \"onOrBefore\") {\n          return cellDate <= filterDate;\n        }\n\n        if (operator === \"onOrAfter\") {\n          return cellDate >= filterDate;\n        }\n\n        if (operator === \"isBetween\" && typeof endValue === \"string\") {\n          const filterDate2 = new Date(endValue);\n          return cellDate >= filterDate && cellDate <= filterDate2;\n        }\n      }\n    }\n\n    if (operator === \"is\") {\n      if (Array.isArray(cellValue)) {\n        return cellValue.some((v) => String(v) === String(value));\n      }\n      return String(cellValue) === String(value);\n    }\n\n    if (operator === \"isNot\") {\n      if (Array.isArray(cellValue)) {\n        return !cellValue.some((v) => String(v) === String(value));\n      }\n      return String(cellValue) !== String(value);\n    }\n\n    if (operator === \"isAnyOf\" && Array.isArray(value)) {\n      if (Array.isArray(cellValue)) {\n        return cellValue.some((v) => value.some((fv) => String(v) === String(fv)));\n      }\n      return value.some((fv) => String(cellValue) === String(fv));\n    }\n\n    if (operator === \"isNoneOf\" && Array.isArray(value)) {\n      if (Array.isArray(cellValue)) {\n        return !cellValue.some((v) => value.some((fv) => String(v) === String(fv)));\n      }\n      return !value.some((fv) => String(cellValue) === String(fv));\n    }\n\n    return true;\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/data-grid/filters.ts"],"sourcesContent":["import type { FilterFn, Row } from \"@tanstack/react-table\";\nimport { type DataGridMessages, getDataGridMessages } from \"./messages.js\";\nimport type {\n  BooleanFilterOperator,\n  DateFilterOperator,\n  FilterOperator,\n  FilterValue,\n  NumberFilterOperator,\n  SelectFilterOperator,\n  TextFilterOperator\n} from \"./types.js\";\n\ninterface OperatorOption<TOperator extends FilterOperator> {\n  label: string;\n  value: TOperator;\n}\n\n/*\n * ⚠ Nhãn toán tử phụ thuộc NGÔN NGỮ, nên chúng phải dựng theo bảng chuỗi chứ không đóng băng vào\n * một mảng hằng ở đầu module. Sáu `build*` bên dưới là khuôn; sáu hằng `*_FILTER_OPERATORS` là\n * khuôn ấy áp cho bảng MẶC ĐỊNH (tiếng Anh), giữ lại vì chúng là API công khai từ `1.11.0` và vì\n * phần lớn app chỉ cần đúng bản đó.\n * Chỗ nào dựng giao diện theo `locale` thì gọi `getOperatorsForVariant(variant, messages)` —\n * đọc hằng ở trên là khoá cứng tiếng Anh.\n */\nfunction buildTextOperators(m: DataGridMessages): OperatorOption<TextFilterOperator>[] {\n  const op = m.filter.operators;\n  return [\n    { label: op.contains, value: \"contains\" },\n    { label: op.notContains, value: \"notContains\" },\n    { label: op.equals, value: \"equals\" },\n    { label: op.notEquals, value: \"notEquals\" },\n    { label: op.startsWith, value: \"startsWith\" },\n    { label: op.endsWith, value: \"endsWith\" },\n    { label: op.isEmpty, value: \"isEmpty\" },\n    { label: op.isNotEmpty, value: \"isNotEmpty\" }\n  ];\n}\n\nfunction buildNumberOperators(m: DataGridMessages): OperatorOption<NumberFilterOperator>[] {\n  const op = m.filter.operators;\n  return [\n    { label: op.equals, value: \"equals\" },\n    { label: op.notEquals, value: \"notEquals\" },\n    { label: op.lessThan, value: \"lessThan\" },\n    { label: op.lessThanOrEqual, value: \"lessThanOrEqual\" },\n    { label: op.greaterThan, value: \"greaterThan\" },\n    { label: op.greaterThanOrEqual, value: \"greaterThanOrEqual\" },\n    { label: op.isBetween, value: \"isBetween\" },\n    { label: op.isEmpty, value: \"isEmpty\" },\n    { label: op.isNotEmpty, value: \"isNotEmpty\" }\n  ];\n}\n\nfunction buildDateOperators(m: DataGridMessages): OperatorOption<DateFilterOperator>[] {\n  const op = m.filter.operators;\n  return [\n    { label: op.dateEquals, value: \"equals\" },\n    { label: op.dateNotEquals, value: \"notEquals\" },\n    { label: op.before, value: \"before\" },\n    { label: op.after, value: \"after\" },\n    { label: op.onOrBefore, value: \"onOrBefore\" },\n    { label: op.onOrAfter, value: \"onOrAfter\" },\n    { label: op.isBetween, value: \"isBetween\" },\n    { label: op.isEmpty, value: \"isEmpty\" },\n    { label: op.isNotEmpty, value: \"isNotEmpty\" }\n  ];\n}\n\nfunction buildSelectOperators(m: DataGridMessages): OperatorOption<SelectFilterOperator>[] {\n  const op = m.filter.operators;\n  return [\n    { label: op.is, value: \"is\" },\n    { label: op.isNot, value: \"isNot\" },\n    { label: op.isAnyOf, value: \"isAnyOf\" },\n    { label: op.isNoneOf, value: \"isNoneOf\" },\n    { label: op.isEmpty, value: \"isEmpty\" },\n    { label: op.isNotEmpty, value: \"isNotEmpty\" }\n  ];\n}\n\nfunction buildBooleanOperators(m: DataGridMessages): OperatorOption<BooleanFilterOperator>[] {\n  const op = m.filter.operators;\n  return [\n    { label: op.isTrue, value: \"isTrue\" },\n    { label: op.isFalse, value: \"isFalse\" }\n  ];\n}\n\nconst DEFAULT_MESSAGES = getDataGridMessages();\n\nexport const TEXT_FILTER_OPERATORS: ReadonlyArray<OperatorOption<TextFilterOperator>> =\n  buildTextOperators(DEFAULT_MESSAGES);\nexport const NUMBER_FILTER_OPERATORS: ReadonlyArray<OperatorOption<NumberFilterOperator>> =\n  buildNumberOperators(DEFAULT_MESSAGES);\nexport const DATE_FILTER_OPERATORS: ReadonlyArray<OperatorOption<DateFilterOperator>> =\n  buildDateOperators(DEFAULT_MESSAGES);\nexport const SELECT_FILTER_OPERATORS: ReadonlyArray<OperatorOption<SelectFilterOperator>> =\n  buildSelectOperators(DEFAULT_MESSAGES);\nexport const BOOLEAN_FILTER_OPERATORS: ReadonlyArray<OperatorOption<BooleanFilterOperator>> =\n  buildBooleanOperators(DEFAULT_MESSAGES);\n\nexport function getDefaultOperator(variant: string): FilterOperator {\n  switch (variant) {\n    case \"number\":\n      return \"equals\";\n    case \"date\":\n      return \"equals\";\n    case \"select\":\n    case \"multi-select\":\n      return \"is\";\n    case \"checkbox\":\n      return \"isTrue\";\n    default:\n      return \"contains\";\n  }\n}\n\n/**\n * Toán tử hợp lệ cho một kiểu ô, kèm nhãn đã dịch.\n *\n * `messages` bỏ trống = bảng mặc định (tiếng Anh) — giữ đúng chữ ký của `1.11.0` nên chỗ gọi cũ\n * không phải sửa.\n */\nexport function getOperatorsForVariant(\n  variant: string,\n  messages?: DataGridMessages\n): ReadonlyArray<{\n  label: string;\n  value: FilterOperator;\n}> {\n  const m = messages ?? DEFAULT_MESSAGES;\n  switch (variant) {\n    case \"number\":\n      return buildNumberOperators(m);\n    case \"date\":\n      return buildDateOperators(m);\n    case \"select\":\n    case \"multi-select\":\n      return buildSelectOperators(m);\n    case \"checkbox\":\n      return buildBooleanOperators(m);\n    default:\n      return buildTextOperators(m);\n  }\n}\n\nexport function getFilterFn<TData>(): FilterFn<TData> {\n  return (row: Row<TData>, columnId: string, filterValue: unknown): boolean => {\n    if (!filterValue || typeof filterValue !== \"object\") {\n      return true;\n    }\n\n    const filter = filterValue as FilterValue;\n    const { operator, value, endValue } = filter;\n\n    const cellValue = row.getValue(columnId);\n\n    if (operator === \"isEmpty\") {\n      return (\n        cellValue === null ||\n        cellValue === undefined ||\n        cellValue === \"\" ||\n        (Array.isArray(cellValue) && cellValue.length === 0)\n      );\n    }\n\n    if (operator === \"isNotEmpty\") {\n      return !(\n        cellValue === null ||\n        cellValue === undefined ||\n        cellValue === \"\" ||\n        (Array.isArray(cellValue) && cellValue.length === 0)\n      );\n    }\n\n    if (operator === \"isTrue\") {\n      return cellValue === true;\n    }\n\n    if (operator === \"isFalse\") {\n      return cellValue === false || !cellValue;\n    }\n\n    if (value === undefined || value === null || value === \"\") {\n      return true;\n    }\n\n    const cellValueStr = String(cellValue ?? \"\").toLowerCase();\n    const filterValueStr = typeof value === \"string\" ? value.toLowerCase() : String(value);\n\n    if (operator === \"contains\") {\n      return cellValueStr.includes(filterValueStr);\n    }\n\n    if (operator === \"notContains\") {\n      return !cellValueStr.includes(filterValueStr);\n    }\n\n    if (operator === \"equals\") {\n      if (typeof cellValue === \"number\" && typeof value === \"number\") {\n        return cellValue === value;\n      }\n      if (cellValue instanceof Date && typeof value === \"string\") {\n        const cellDate = new Date(cellValue);\n        const filterDate = new Date(value);\n        return cellDate.toDateString() === filterDate.toDateString();\n      }\n      return cellValueStr === filterValueStr;\n    }\n\n    if (operator === \"notEquals\") {\n      if (typeof cellValue === \"number\" && typeof value === \"number\") {\n        return cellValue !== value;\n      }\n      if (cellValue instanceof Date && typeof value === \"string\") {\n        const cellDate = new Date(cellValue);\n        const filterDate = new Date(value);\n        return cellDate.toDateString() !== filterDate.toDateString();\n      }\n      return cellValueStr !== filterValueStr;\n    }\n\n    if (operator === \"startsWith\") {\n      return cellValueStr.startsWith(filterValueStr);\n    }\n\n    if (operator === \"endsWith\") {\n      return cellValueStr.endsWith(filterValueStr);\n    }\n\n    if (typeof cellValue === \"number\" && typeof value === \"number\") {\n      if (operator === \"greaterThan\") {\n        return cellValue > value;\n      }\n\n      if (operator === \"greaterThanOrEqual\") {\n        return cellValue >= value;\n      }\n\n      if (operator === \"lessThan\") {\n        return cellValue < value;\n      }\n\n      if (operator === \"lessThanOrEqual\") {\n        return cellValue <= value;\n      }\n\n      if (operator === \"isBetween\" && typeof endValue === \"number\") {\n        return cellValue >= value && cellValue <= endValue;\n      }\n    }\n\n    if (cellValue instanceof Date || typeof cellValue === \"string\") {\n      const cellDate = new Date(cellValue);\n      if (!Number.isNaN(cellDate.getTime()) && typeof value === \"string\") {\n        const filterDate = new Date(value);\n\n        if (operator === \"before\") {\n          return cellDate < filterDate;\n        }\n\n        if (operator === \"after\") {\n          return cellDate > filterDate;\n        }\n\n        if (operator === \"onOrBefore\") {\n          return cellDate <= filterDate;\n        }\n\n        if (operator === \"onOrAfter\") {\n          return cellDate >= filterDate;\n        }\n\n        if (operator === \"isBetween\" && typeof endValue === \"string\") {\n          const filterDate2 = new Date(endValue);\n          return cellDate >= filterDate && cellDate <= filterDate2;\n        }\n      }\n    }\n\n    if (operator === \"is\") {\n      if (Array.isArray(cellValue)) {\n        return cellValue.some((v) => String(v) === String(value));\n      }\n      return String(cellValue) === String(value);\n    }\n\n    if (operator === \"isNot\") {\n      if (Array.isArray(cellValue)) {\n        return !cellValue.some((v) => String(v) === String(value));\n      }\n      return String(cellValue) !== String(value);\n    }\n\n    if (operator === \"isAnyOf\" && Array.isArray(value)) {\n      if (Array.isArray(cellValue)) {\n        return cellValue.some((v) => value.some((fv) => String(v) === String(fv)));\n      }\n      return value.some((fv) => String(cellValue) === String(fv));\n    }\n\n    if (operator === \"isNoneOf\" && Array.isArray(value)) {\n      if (Array.isArray(cellValue)) {\n        return !cellValue.some((v) => value.some((fv) => String(v) === String(fv)));\n      }\n      return !value.some((fv) => String(cellValue) === String(fv));\n    }\n\n    return true;\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/data-grid/index.d.ts

@@ -1,6 +1,7 @@
 export { DataGrid } from './data-grid.js';
 export { DataGridFilterMenu } from './data-grid-filter-menu.js';
 export { DataGridKeyboardShortcuts } from './data-grid-keyboard-shortcuts.js';
+export { DataGridLocaleProvider, DataGridLocaleProviderProps, useDataGridMessages } from './data-grid-locale.js';
 export { DataGridCellPresence, DataGridPresenceProvider, useDataGridPresence } from './data-grid-presence.js';
 export { DataGridRowHeightMenu } from './data-grid-row-height-menu.js';
 export { getDataGridSelectColumn } from './data-grid-select-column.js';
@@ -8,11 +9,13 @@ export { DataGridSkeleton, DataGridSkeletonGrid, DataGridSkeletonToolbar } from
 export { DataGridSortMenu } from './data-grid-sort-menu.js';
 export { DataGridViewMenu } from './data-grid-view-menu.js';
 export { BOOLEAN_FILTER_OPERATORS, DATE_FILTER_OPERATORS, NUMBER_FILTER_OPERATORS, SELECT_FILTER_OPERATORS, TEXT_FILTER_OPERATORS, getDefaultOperator, getFilterFn, getOperatorsForVariant } from './filters.js';
-export { DataGridMessages, msg as dataGridMessages } from './messages.js';
+export { DATA_GRID_MESSAGES, DEFAULT_DATA_GRID_LOCALE, DataGridLocale, getDataGridMessages } from './messages.js';
 export { BooleanFilterOperator, CellOpts, CellPosition, CellRange, CellSelectOption, CellUpdate, ContextMenuState, DataGridCellProps, DateFilterOperator, Direction, FileCellData, FilterOperator, FilterValue, NavigationDirection, NumberFilterOperator, PasteDialogState, RowHeightValue, SearchState, SelectFilterOperator, SelectionState, TextFilterOperator } from './types.js';
 export { UseDataGridProps, useDataGrid } from './use-data-grid.js';
 export { UndoRedoCellUpdate, useDataGridUndoRedo } from './use-data-grid-undo-redo.js';
 export { formatDate, formatDateForDisplay, formatDateToString, formatFileSize, generateFileId, getCellKey, getColumnVariant, getEmptyCellValue, getLineCount, getRowHeightValue, parseCellKey, parseLocalDate } from './utils.js';
+export { DataGridMessages, messagesEn as dataGridMessages, messagesEn as dataGridMessagesEn } from './messages-en.js';
+export { messagesVi as dataGridMessagesVi } from './messages-vi.js';
 import 'react';
 import '@tanstack/react-table';
 import '../components/ui/popover.js';

package/dist/data-grid/index.js

@@ -1,6 +1,10 @@
 import { DataGrid } from "./data-grid.js";
 import { DataGridFilterMenu } from "./data-grid-filter-menu.js";
 import { DataGridKeyboardShortcuts } from "./data-grid-keyboard-shortcuts.js";
+import {
+  DataGridLocaleProvider,
+  useDataGridMessages
+} from "./data-grid-locale.js";
 import {
   DataGridPresenceProvider,
   useDataGridPresence
@@ -20,7 +24,14 @@ import {
   SELECT_FILTER_OPERATORS,
   TEXT_FILTER_OPERATORS
 } from "./filters.js";
-import { msg } from "./messages.js";
+import {
+  DATA_GRID_MESSAGES,
+  DEFAULT_DATA_GRID_LOCALE,
+  getDataGridMessages,
+  messagesEn,
+  messagesEn as messagesEn2,
+  messagesVi
+} from "./messages.js";
 import { useDataGrid } from "./use-data-grid.js";
 import { useDataGridUndoRedo } from "./use-data-grid-undo-redo.js";
 import {
@@ -39,10 +50,13 @@ import {
 } from "./utils.js";
 export {
   BOOLEAN_FILTER_OPERATORS,
+  DATA_GRID_MESSAGES,
   DATE_FILTER_OPERATORS,
+  DEFAULT_DATA_GRID_LOCALE,
   DataGrid,
   DataGridFilterMenu,
   DataGridKeyboardShortcuts,
+  DataGridLocaleProvider,
   DataGridPresenceProvider,
   DataGridRowHeightMenu,
   DataGridSkeleton,
@@ -53,7 +67,9 @@ export {
   NUMBER_FILTER_OPERATORS,
   SELECT_FILTER_OPERATORS,
   TEXT_FILTER_OPERATORS,
-  msg as dataGridMessages,
+  messagesEn as dataGridMessages,
+  messagesEn2 as dataGridMessagesEn,
+  messagesVi as dataGridMessagesVi,
   formatDate,
   formatDateForDisplay,
   formatDateToString,
@@ -61,6 +77,7 @@ export {
   generateFileId,
   getCellKey,
   getColumnVariant,
+  getDataGridMessages,
   getDataGridSelectColumn,
   getDefaultOperator,
   getEmptyCellValue,
@@ -71,6 +88,7 @@ export {
   parseCellKey,
   parseLocalDate,
   useDataGrid,
+  useDataGridMessages,
   useDataGridPresence,
   useDataGridUndoRedo
 };

package/dist/data-grid/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/data-grid/index.ts"],"sourcesContent":["// @comitor/ui/data-grid — lưới dữ liệu sửa trực tiếp (như bảng tính).\n//\n// Port từ tablecn (https://tablecn.com) — MIT License, Copyright (c) 2024 Sadman Sakib —\n// và chỉnh lại để dùng primitive/token của package, chuỗi tiếng Việt, không phụ thuộc backend.\n// Xem docs/data-grid.md (§10) để biết danh sách khác biệt so với bản gốc.\n//\n// Tách khỏi barrel chính vì kéo theo @tanstack/react-table (peer), @tanstack/react-virtual và @dnd-kit,\n// đồng thời khoanh vùng phần `declare module \"@tanstack/react-table\"` (thêm `meta.cell`, `TableMeta`)\n// để ứng dụng không dùng lưới không bị ảnh hưởng.\n\n// Components\nexport { DataGrid } from \"./data-grid.js\";\nexport { DataGridFilterMenu } from \"./data-grid-filter-menu.js\";\nexport { DataGridKeyboardShortcuts } from \"./data-grid-keyboard-shortcuts.js\";\nexport {\n  type DataGridCellPresence,\n  DataGridPresenceProvider,\n  useDataGridPresence\n} from \"./data-grid-presence.js\";\nexport { DataGridRowHeightMenu } from \"./data-grid-row-height-menu.js\";\nexport { getDataGridSelectColumn } from \"./data-grid-select-column.js\";\nexport { DataGridSkeleton, DataGridSkeletonGrid, DataGridSkeletonToolbar } from \"./data-grid-skeleton.js\";\nexport { DataGridSortMenu } from \"./data-grid-sort-menu.js\";\nexport { DataGridViewMenu } from \"./data-grid-view-menu.js\";\n// Bộ lọc\nexport {\n  BOOLEAN_FILTER_OPERATORS,\n  DATE_FILTER_OPERATORS,\n  getDefaultOperator,\n  getFilterFn,\n  getOperatorsForVariant,\n  NUMBER_FILTER_OPERATORS,\n  SELECT_FILTER_OPERATORS,\n  TEXT_FILTER_OPERATORS\n} from \"./filters.js\";\n// Chuỗi hiển thị (dùng lại khi app muốn nhất quán từ ngữ)\nexport { type DataGridMessages, msg as dataGridMessages } from \"./messages.js\";\n// Types\nexport type * from \"./types.js\";\n// Hooks\nexport { type UseDataGridProps, useDataGrid } from \"./use-data-grid.js\";\nexport { type UndoRedoCellUpdate, useDataGridUndoRedo } from \"./use-data-grid-undo-redo.js\";\n// Tiện ích hay dùng ở phía ứng dụng\nexport {\n  formatDate,\n  formatDateForDisplay,\n  formatDateToString,\n  formatFileSize,\n  generateFileId,\n  getCellKey,\n  getColumnVariant,\n  getEmptyCellValue,\n  getLineCount,\n  getRowHeightValue,\n  parseCellKey,\n  parseLocalDate\n} from \"./utils.js\";\n"],"mappings":"AAWA,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,iCAAiC;AAC1C;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AACxC,SAAS,kBAAkB,sBAAsB,+BAA+B;AAChF,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAuC,WAAwB;AAI/D,SAAgC,mBAAmB;AACnD,SAAkC,2BAA2B;AAE7D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}
+{"version":3,"sources":["../../src/data-grid/index.ts"],"sourcesContent":["// @comitor/ui/data-grid — lưới dữ liệu sửa trực tiếp (như bảng tính).\n//\n// Port từ tablecn (https://tablecn.com) — MIT License, Copyright (c) 2024 Sadman Sakib —\n// và chỉnh lại để dùng primitive/token của package, chuỗi tiếng Việt, không phụ thuộc backend.\n// Xem docs/data-grid.md (§10) để biết danh sách khác biệt so với bản gốc.\n//\n// Tách khỏi barrel chính vì kéo theo @tanstack/react-table (peer), @tanstack/react-virtual và @dnd-kit,\n// đồng thời khoanh vùng phần `declare module \"@tanstack/react-table\"` (thêm `meta.cell`, `TableMeta`)\n// để ứng dụng không dùng lưới không bị ảnh hưởng.\n\n// Components\nexport { DataGrid } from \"./data-grid.js\";\nexport { DataGridFilterMenu } from \"./data-grid-filter-menu.js\";\nexport { DataGridKeyboardShortcuts } from \"./data-grid-keyboard-shortcuts.js\";\n// Ngôn ngữ\nexport {\n  DataGridLocaleProvider,\n  type DataGridLocaleProviderProps,\n  useDataGridMessages\n} from \"./data-grid-locale.js\";\nexport {\n  type DataGridCellPresence,\n  DataGridPresenceProvider,\n  useDataGridPresence\n} from \"./data-grid-presence.js\";\nexport { DataGridRowHeightMenu } from \"./data-grid-row-height-menu.js\";\nexport { getDataGridSelectColumn } from \"./data-grid-select-column.js\";\nexport { DataGridSkeleton, DataGridSkeletonGrid, DataGridSkeletonToolbar } from \"./data-grid-skeleton.js\";\nexport { DataGridSortMenu } from \"./data-grid-sort-menu.js\";\nexport { DataGridViewMenu } from \"./data-grid-view-menu.js\";\n// Bộ lọc\nexport {\n  BOOLEAN_FILTER_OPERATORS,\n  DATE_FILTER_OPERATORS,\n  getDefaultOperator,\n  getFilterFn,\n  getOperatorsForVariant,\n  NUMBER_FILTER_OPERATORS,\n  SELECT_FILTER_OPERATORS,\n  TEXT_FILTER_OPERATORS\n} from \"./filters.js\";\n/*\n * Chuỗi hiển thị. `dataGridMessages` là bảng ĐANG MẶC ĐỊNH (tiếng Anh từ `2.0.0`) — dùng khi app\n * muốn từ ngữ ở chỗ khác trên màn khớp với lưới. Muốn một ngôn ngữ cụ thể thì gọi\n * `getDataGridMessages(\"vi\")`, đừng đọc hằng rồi đoán.\n */\nexport {\n  DATA_GRID_MESSAGES,\n  type DataGridLocale,\n  type DataGridMessages,\n  DEFAULT_DATA_GRID_LOCALE,\n  getDataGridMessages,\n  messagesEn as dataGridMessages,\n  messagesEn as dataGridMessagesEn,\n  messagesVi as dataGridMessagesVi\n} from \"./messages.js\";\n// Types\nexport type * from \"./types.js\";\n// Hooks\nexport { type UseDataGridProps, useDataGrid } from \"./use-data-grid.js\";\nexport { type UndoRedoCellUpdate, useDataGridUndoRedo } from \"./use-data-grid-undo-redo.js\";\n// Tiện ích hay dùng ở phía ứng dụng\nexport {\n  formatDate,\n  formatDateForDisplay,\n  formatDateToString,\n  formatFileSize,\n  generateFileId,\n  getCellKey,\n  getColumnVariant,\n  getEmptyCellValue,\n  getLineCount,\n  getRowHeightValue,\n  parseCellKey,\n  parseLocalDate\n} from \"./utils.js\";\n"],"mappings":"AAWA,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,iCAAiC;AAE1C;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AACP;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AACxC,SAAS,kBAAkB,sBAAsB,+BAA+B;AAChF,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMP;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,EACc;AAAA,EACA,cAAdA;AAAA,EACc;AAAA,OACT;AAIP,SAAgC,mBAAmB;AACnD,SAAkC,2BAA2B;AAE7D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":["messagesEn"]}