@comitor/ui 1.10.0 → 2.0.0

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

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDirection } from "@radix-ui/react-direction";
+import { Check, Settings2 } from "lucide-react";
+import * as React from "react";
+import { Button } from "../components/ui/button.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../components/ui/command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover.js";
+import { cn } from "../lib/cn.js";
+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()),
+    [table]
+  );
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "aria-label": msg.view.toggleColumns,
+        role: "combobox",
+        dir,
+        variant: "outline",
+        size: "sm",
+        className: "font-normal",
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true", className: "size-3.5 text-muted-foreground" }),
+          msg.view.trigger
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { dir, align: "end", className: cn("w-52 p-0", className), ...props, children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: msg.view.searchPlaceholder, "aria-label": msg.view.searchPlaceholder }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: msg.view.empty }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: columns.map((column) => {
+          const isVisible = column.getIsVisible();
+          return /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              value: column.columnDef.meta?.label ?? column.id,
+              onSelect: () => column.toggleVisibility(!isVisible),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: column.columnDef.meta?.label ?? column.id }),
+                /* @__PURE__ */ jsx(Check, { className: cn("ms-auto size-4", isVisible ? "opacity-100" : "opacity-0") })
+              ]
+            },
+            column.id
+          );
+        }) })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  DataGridViewMenu
+};
+//# sourceMappingURL=data-grid-view-menu.js.map

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

@@ -0,0 +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 { 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

@@ -0,0 +1,44 @@
+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" | "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ỳ
+     * (vd `"100%"`, `"calc(100dvh - 220px)"` khi muốn lưới lấp đầy phần còn lại của trang).
+     */
+    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,
+ * chọn vùng ô, sao chép/cắt/dán, ghim cột, đổi rộng cột.
+ *
+ * Nhận nguyên kết quả của {@link useDataGrid}:
+ * ```tsx
+ * const { table, ...dataGridProps } = useDataGrid({ data, columns, onDataChange });
+ * <DataGrid {...dataGridProps} table={table} aria-label="Danh sách bệnh nhân" />
+ * ```
+ *
+ * `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, 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

@@ -0,0 +1,238 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Plus } from "lucide-react";
+import * as React from "react";
+import { TooltipProvider } from "../components/ui/tooltip.js";
+import { cn } from "../lib/cn.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 { getDataGridMessages } from "./messages.js";
+import { useAsRef } from "./use-as-ref.js";
+import { flexRender, getColumnBorderVisibility, getColumnPinningStyle } from "./utils.js";
+const EMPTY_CELL_SELECTION_SET = /* @__PURE__ */ new Set();
+function DataGrid({
+  dataGridRef,
+  headerRef,
+  rowMapRef,
+  footerRef,
+  dir = "ltr",
+  table,
+  tableMeta,
+  virtualTotalSize,
+  virtualItems,
+  measureElement,
+  columns,
+  columnSizeVars,
+  searchState,
+  searchMatchesByRow,
+  activeSearchMatch,
+  cellSelectionMap,
+  focusedCell,
+  editingCell,
+  rowHeight,
+  contextMenu,
+  pasteDialog,
+  onRowAdd: onRowAddProp,
+  height = 600,
+  stretchColumns = false,
+  locale,
+  adjustLayout = false,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  "aria-describedby": ariaDescribedby,
+  ...props
+}) {
+  const rows = table.getRowModel().rows;
+  const readOnly = tableMeta?.readOnly ?? false;
+  const columnVisibility = table.getState().columnVisibility;
+  const columnPinning = table.getState().columnPinning;
+  const onRowAddRef = useAsRef(onRowAddProp);
+  const onRowAdd = React.useCallback(
+    (event) => {
+      onRowAddRef.current?.(event);
+    },
+    [onRowAddRef]
+  );
+  const onDataGridContextMenu = React.useCallback((event) => {
+    event.preventDefault();
+  }, []);
+  const onFooterCellKeyDown = React.useCallback(
+    (event) => {
+      if (!onRowAddRef.current) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onRowAddRef.current();
+      }
+    },
+    [onRowAddRef]
+  );
+  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 }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "grid",
+        "aria-label": ariaLabelledby ? void 0 : ariaLabel ?? msg.grid.label,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        "aria-rowcount": rows.length + (onRowAddProp ? 1 : 0),
+        "aria-colcount": columns.length,
+        "data-slot": "grid",
+        tabIndex: 0,
+        ref: dataGridRef,
+        className: "relative grid select-none overflow-auto rounded-lg border bg-card focus:outline-none focus-visible:outline-none",
+        style: {
+          ...columnSizeVars,
+          maxHeight: typeof height === "number" ? `${height}px` : height
+        },
+        onContextMenu: onDataGridContextMenu,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "rowgroup",
+              "data-slot": "grid-header",
+              ref: headerRef,
+              className: "sticky top-0 z-10 grid border-b bg-card",
+              children: table.getHeaderGroups().map((headerGroup, rowIndex) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "row",
+                  "aria-rowindex": rowIndex + 1,
+                  "data-slot": "grid-header-row",
+                  tabIndex: -1,
+                  className: "flex w-full",
+                  children: headerGroup.headers.map((header, colIndex) => {
+                    const sorting = table.getState().sorting;
+                    const currentSort = sorting.find((sort) => sort.id === header.column.id);
+                    const isSortable = header.column.getCanSort();
+                    const nextHeader = headerGroup.headers[colIndex + 1];
+                    const isLastColumn = colIndex === headerGroup.headers.length - 1;
+                    const { showEndBorder, showStartBorder } = getColumnBorderVisibility({
+                      column: header.column,
+                      nextColumn: nextHeader?.column,
+                      isLastColumn
+                    });
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        role: "columnheader",
+                        "aria-colindex": colIndex + 1,
+                        "aria-sort": currentSort?.desc === false ? "ascending" : currentSort?.desc === true ? "descending" : isSortable ? "none" : void 0,
+                        "data-slot": "grid-header-cell",
+                        tabIndex: -1,
+                        className: cn("relative", {
+                          grow: stretchColumns && header.column.id !== "select",
+                          "border-e": showEndBorder && header.column.id !== "select",
+                          "border-s": showStartBorder && header.column.id !== "select"
+                        }),
+                        style: {
+                          ...getColumnPinningStyle({ column: header.column, dir }),
+                          width: `calc(var(--header-${header.id}-size) * 1px)`
+                        },
+                        children: header.isPlaceholder ? null : typeof header.column.columnDef.header === "function" ? /* @__PURE__ */ jsx("div", { className: "size-full px-3 py-1.5", children: flexRender(header.column.columnDef.header, header.getContext()) }) : /* @__PURE__ */ jsx(DataGridColumnHeader, { header, table })
+                      },
+                      header.id
+                    );
+                  })
+                },
+                headerGroup.id
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "rowgroup",
+              "data-slot": "grid-body",
+              className: "relative grid",
+              style: {
+                height: `${virtualTotalSize}px`,
+                contain: adjustLayout ? "layout paint" : "strict"
+              },
+              children: virtualItems.map((virtualItem) => {
+                const row = rows[virtualItem.index];
+                if (!row) return null;
+                const cellSelectionKeys = cellSelectionMap?.get(virtualItem.index) ?? EMPTY_CELL_SELECTION_SET;
+                const searchMatchColumns = searchMatchesByRow?.get(virtualItem.index) ?? null;
+                const isActiveSearchRow = activeSearchMatch?.rowIndex === virtualItem.index;
+                return /* @__PURE__ */ jsx(
+                  DataGridRow,
+                  {
+                    row,
+                    tableMeta,
+                    rowMapRef,
+                    virtualItem,
+                    measureElement,
+                    rowHeight,
+                    columnVisibility,
+                    columnPinning,
+                    focusedCell,
+                    editingCell,
+                    cellSelectionKeys,
+                    searchMatchColumns,
+                    activeSearchMatch: isActiveSearchRow ? activeSearchMatch : null,
+                    dir,
+                    adjustLayout,
+                    stretchColumns,
+                    readOnly
+                  },
+                  row.id
+                );
+              })
+            }
+          ),
+          !readOnly && onRowAddProp && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "rowgroup",
+              "data-slot": "grid-footer",
+              ref: footerRef,
+              className: "sticky bottom-0 z-10 grid border-t bg-card",
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "row",
+                  "aria-rowindex": rows.length + 2,
+                  "data-slot": "grid-add-row",
+                  tabIndex: -1,
+                  className: "flex w-full",
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "gridcell",
+                      tabIndex: 0,
+                      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",
+                      style: {
+                        width: table.getTotalSize(),
+                        minWidth: table.getTotalSize()
+                      },
+                      onClick: onRowAdd,
+                      onKeyDown: onFooterCellKeyDown,
+                      children: /* @__PURE__ */ jsxs("div", { className: "sticky start-0 flex items-center gap-2 px-3 text-muted-foreground", children: [
+                        /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm", children: msg.grid.addRow })
+                      ] })
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] }) }) });
+}
+export {
+  DataGrid
+};
+//# sourceMappingURL=data-grid.js.map

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

@@ -0,0 +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 { 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 { 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\" | \"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":";AA4H0B,cA6JN,YA7JM;AA1H1B,SAAS,YAAY;AACrB,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAqD,2BAA2B;AAEhF,SAAS,gBAAgB;AAEzB,SAAS,YAAY,2BAA2B,6BAA6B;AAE7E,MAAM,2BAA2B,oBAAI,IAAY;AAqC1C,SAAS,SAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,GAAG;AACL,GAAyB;AACvB,QAAM,OAAO,MAAM,YAAY,EAAE;AACjC,QAAM,WAAW,WAAW,YAAY;AACxC,QAAM,mBAAmB,MAAM,SAAS,EAAE;AAC1C,QAAM,gBAAgB,MAAM,SAAS,EAAE;AAEvC,QAAM,cAAc,SAAS,YAAY;AAEzC,QAAM,WAAW,MAAM;AAAA,IACrB,CAAC,UAA4C;AAC3C,kBAAY,UAAU,KAAK;AAAA,IAC7B;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,wBAAwB,MAAM,YAAY,CAAC,UAA4C;AAC3F,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,MAAM;AAAA,IAChC,CAAC,UAA+C;AAC9C,UAAI,CAAC,YAAY,QAAS;AAE1B,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,cAAM,eAAe;AACrB,oBAAY,QAAQ;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,MAAM,MAAM,QAAQ,MAAM,oBAAoB,MAAM,GAAG,CAAC,MAAM,CAAC;AAErE,SACE,oBAAC,0BAAuB,QACtB,8BAAC,mBAAgB,eAAe,KAC9B,+BAAC,SAAI,aAAU,gBAAe,KAAW,GAAG,OAAO,WAAW,GAAG,iCAAiC,SAAS,GACxG;AAAA,mBAAe,oBAAC,kBAAgB,GAAG,aAAa;AAAA,IACjD,oBAAC,uBAAoB,WAAsB,SAAkB,aAA0B;AAAA,IACvF,oBAAC,uBAAoB,WAAsB,aAA0B;AAAA,IACrE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY,iBAAiB,SAAa,aAAa,IAAI,KAAK;AAAA,QAChE,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,iBAAe,KAAK,UAAU,eAAe,IAAI;AAAA,QACjD,iBAAe,QAAQ;AAAA,QACvB,aAAU;AAAA,QACV,UAAU;AAAA,QACV,KAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO;AAAA,UACL,GAAG;AAAA,UACH,WAAW,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AAAA,QAC1D;AAAA,QACA,eAAe;AAAA,QAEf;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,aAAU;AAAA,cACV,KAAK;AAAA,cACL,WAAU;AAAA,cAET,gBAAM,gBAAgB,EAAE,IAAI,CAAC,aAAa,aACzC;AAAA,gBAAC;AAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,iBAAe,WAAW;AAAA,kBAC1B,aAAU;AAAA,kBACV,UAAU;AAAA,kBACV,WAAU;AAAA,kBAET,sBAAY,QAAQ,IAAI,CAAC,QAAQ,aAAa;AAC7C,0BAAM,UAAU,MAAM,SAAS,EAAE;AACjC,0BAAM,cAAc,QAAQ,KAAK,CAAC,SAAS,KAAK,OAAO,OAAO,OAAO,EAAE;AACvE,0BAAM,aAAa,OAAO,OAAO,WAAW;AAE5C,0BAAM,aAAa,YAAY,QAAQ,WAAW,CAAC;AACnD,0BAAM,eAAe,aAAa,YAAY,QAAQ,SAAS;AAE/D,0BAAM,EAAE,eAAe,gBAAgB,IAAI,0BAA0B;AAAA,sBACnE,QAAQ,OAAO;AAAA,sBACf,YAAY,YAAY;AAAA,sBACxB;AAAA,oBACF,CAAC;AAED,2BACE;AAAA,sBAAC;AAAA;AAAA,wBAEC,MAAK;AAAA,wBACL,iBAAe,WAAW;AAAA,wBAC1B,aACE,aAAa,SAAS,QAClB,cACA,aAAa,SAAS,OACpB,eACA,aACE,SACA;AAAA,wBAEV,aAAU;AAAA,wBACV,UAAU;AAAA,wBACV,WAAW,GAAG,YAAY;AAAA,0BACxB,MAAM,kBAAkB,OAAO,OAAO,OAAO;AAAA,0BAC7C,YAAY,iBAAiB,OAAO,OAAO,OAAO;AAAA,0BAClD,YAAY,mBAAmB,OAAO,OAAO,OAAO;AAAA,wBACtD,CAAC;AAAA,wBACD,OAAO;AAAA,0BACL,GAAG,sBAAsB,EAAE,QAAQ,OAAO,QAAQ,IAAI,CAAC;AAAA,0BACvD,OAAO,qBAAqB,OAAO,EAAE;AAAA,wBACvC;AAAA,wBAEC,iBAAO,gBAAgB,OAAO,OAAO,OAAO,OAAO,UAAU,WAAW,aACvE,oBAAC,SAAI,WAAU,yBACZ,qBAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC,GACjE,IAEA,oBAAC,wBAAqB,QAAgB,OAAc;AAAA;AAAA,sBA7BjD,OAAO;AAAA,oBA+Bd;AAAA,kBAEJ,CAAC;AAAA;AAAA,gBAxDI,YAAY;AAAA,cAyDnB,CACD;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,aAAU;AAAA,cACV,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,QAAQ,GAAG,gBAAgB;AAAA,gBAC3B,SAAS,eAAe,iBAAiB;AAAA,cAC3C;AAAA,cAEC,uBAAa,IAAI,CAAC,gBAAgB;AACjC,sBAAM,MAAM,KAAK,YAAY,KAAK;AAClC,oBAAI,CAAC,IAAK,QAAO;AAEjB,sBAAM,oBAAoB,kBAAkB,IAAI,YAAY,KAAK,KAAK;AAEtE,sBAAM,qBAAqB,oBAAoB,IAAI,YAAY,KAAK,KAAK;AACzE,sBAAM,oBAAoB,mBAAmB,aAAa,YAAY;AAEtE,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,mBAAmB,oBAAoB,oBAAoB;AAAA,oBAC3D;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA;AAAA,kBAjBK,IAAI;AAAA,gBAkBX;AAAA,cAEJ,CAAC;AAAA;AAAA,UACH;AAAA,UAGC,CAAC,YAAY,gBACZ;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,aAAU;AAAA,cACV,KAAK;AAAA,cACL,WAAU;AAAA,cAEV;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,iBAAe,KAAK,SAAS;AAAA,kBAC7B,aAAU;AAAA,kBACV,UAAU;AAAA,kBACV,WAAU;AAAA,kBAEV;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,UAAU;AAAA,sBACV,WAAU;AAAA,sBACV,OAAO;AAAA,wBACL,OAAO,MAAM,aAAa;AAAA,wBAC1B,UAAU,MAAM,aAAa;AAAA,sBAC/B;AAAA,sBACA,SAAS;AAAA,sBACT,WAAW;AAAA,sBAEX,+BAAC,SAAI,WAAU,qEACb;AAAA,4CAAC,QAAK,WAAU,YAAW;AAAA,wBAC3B,oBAAC,UAAK,WAAU,WAAW,cAAI,KAAK,QAAO;AAAA,yBAC7C;AAAA;AAAA,kBACF;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF,GACF,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,27 @@
+import { FilterFn } from '@tanstack/react-table';
+import { DataGridMessages } from './messages-en.js';
+import { FilterOperator, BooleanFilterOperator, DateFilterOperator, NumberFilterOperator, SelectFilterOperator, TextFilterOperator } from './types.js';
+
+interface OperatorOption<TOperator extends FilterOperator> {
+    label: string;
+    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;
+/**
+ * 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;
+}>;
+declare function getFilterFn<TData>(): FilterFn<TData>;
+
+export { BOOLEAN_FILTER_OPERATORS, DATE_FILTER_OPERATORS, NUMBER_FILTER_OPERATORS, SELECT_FILTER_OPERATORS, TEXT_FILTER_OPERATORS, getDefaultOperator, getFilterFn, getOperatorsForVariant };

package/dist/data-grid/filters.js

@@ -0,0 +1,233 @@
+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":
+      return "equals";
+    case "date":
+      return "equals";
+    case "select":
+    case "multi-select":
+      return "is";
+    case "checkbox":
+      return "isTrue";
+    default:
+      return "contains";
+  }
+}
+function getOperatorsForVariant(variant, messages) {
+  const m = messages ?? DEFAULT_MESSAGES;
+  switch (variant) {
+    case "number":
+      return buildNumberOperators(m);
+    case "date":
+      return buildDateOperators(m);
+    case "select":
+    case "multi-select":
+      return buildSelectOperators(m);
+    case "checkbox":
+      return buildBooleanOperators(m);
+    default:
+      return buildTextOperators(m);
+  }
+}
+function getFilterFn() {
+  return (row, columnId, filterValue) => {
+    if (!filterValue || typeof filterValue !== "object") {
+      return true;
+    }
+    const filter = filterValue;
+    const { operator, value, endValue } = filter;
+    const cellValue = row.getValue(columnId);
+    if (operator === "isEmpty") {
+      return cellValue === null || cellValue === void 0 || cellValue === "" || Array.isArray(cellValue) && cellValue.length === 0;
+    }
+    if (operator === "isNotEmpty") {
+      return !(cellValue === null || cellValue === void 0 || cellValue === "" || Array.isArray(cellValue) && cellValue.length === 0);
+    }
+    if (operator === "isTrue") {
+      return cellValue === true;
+    }
+    if (operator === "isFalse") {
+      return cellValue === false || !cellValue;
+    }
+    if (value === void 0 || value === null || value === "") {
+      return true;
+    }
+    const cellValueStr = String(cellValue ?? "").toLowerCase();
+    const filterValueStr = typeof value === "string" ? value.toLowerCase() : String(value);
+    if (operator === "contains") {
+      return cellValueStr.includes(filterValueStr);
+    }
+    if (operator === "notContains") {
+      return !cellValueStr.includes(filterValueStr);
+    }
+    if (operator === "equals") {
+      if (typeof cellValue === "number" && typeof value === "number") {
+        return cellValue === value;
+      }
+      if (cellValue instanceof Date && typeof value === "string") {
+        const cellDate = new Date(cellValue);
+        const filterDate = new Date(value);
+        return cellDate.toDateString() === filterDate.toDateString();
+      }
+      return cellValueStr === filterValueStr;
+    }
+    if (operator === "notEquals") {
+      if (typeof cellValue === "number" && typeof value === "number") {
+        return cellValue !== value;
+      }
+      if (cellValue instanceof Date && typeof value === "string") {
+        const cellDate = new Date(cellValue);
+        const filterDate = new Date(value);
+        return cellDate.toDateString() !== filterDate.toDateString();
+      }
+      return cellValueStr !== filterValueStr;
+    }
+    if (operator === "startsWith") {
+      return cellValueStr.startsWith(filterValueStr);
+    }
+    if (operator === "endsWith") {
+      return cellValueStr.endsWith(filterValueStr);
+    }
+    if (typeof cellValue === "number" && typeof value === "number") {
+      if (operator === "greaterThan") {
+        return cellValue > value;
+      }
+      if (operator === "greaterThanOrEqual") {
+        return cellValue >= value;
+      }
+      if (operator === "lessThan") {
+        return cellValue < value;
+      }
+      if (operator === "lessThanOrEqual") {
+        return cellValue <= value;
+      }
+      if (operator === "isBetween" && typeof endValue === "number") {
+        return cellValue >= value && cellValue <= endValue;
+      }
+    }
+    if (cellValue instanceof Date || typeof cellValue === "string") {
+      const cellDate = new Date(cellValue);
+      if (!Number.isNaN(cellDate.getTime()) && typeof value === "string") {
+        const filterDate = new Date(value);
+        if (operator === "before") {
+          return cellDate < filterDate;
+        }
+        if (operator === "after") {
+          return cellDate > filterDate;
+        }
+        if (operator === "onOrBefore") {
+          return cellDate <= filterDate;
+        }
+        if (operator === "onOrAfter") {
+          return cellDate >= filterDate;
+        }
+        if (operator === "isBetween" && typeof endValue === "string") {
+          const filterDate2 = new Date(endValue);
+          return cellDate >= filterDate && cellDate <= filterDate2;
+        }
+      }
+    }
+    if (operator === "is") {
+      if (Array.isArray(cellValue)) {
+        return cellValue.some((v) => String(v) === String(value));
+      }
+      return String(cellValue) === String(value);
+    }
+    if (operator === "isNot") {
+      if (Array.isArray(cellValue)) {
+        return !cellValue.some((v) => String(v) === String(value));
+      }
+      return String(cellValue) !== String(value);
+    }
+    if (operator === "isAnyOf" && Array.isArray(value)) {
+      if (Array.isArray(cellValue)) {
+        return cellValue.some((v) => value.some((fv) => String(v) === String(fv)));
+      }
+      return value.some((fv) => String(cellValue) === String(fv));
+    }
+    if (operator === "isNoneOf" && Array.isArray(value)) {
+      if (Array.isArray(cellValue)) {
+        return !cellValue.some((v) => value.some((fv) => String(v) === String(fv)));
+      }
+      return !value.some((fv) => String(cellValue) === String(fv));
+    }
+    return true;
+  };
+}
+export {
+  BOOLEAN_FILTER_OPERATORS,
+  DATE_FILTER_OPERATORS,
+  NUMBER_FILTER_OPERATORS,
+  SELECT_FILTER_OPERATORS,
+  TEXT_FILTER_OPERATORS,
+  getDefaultOperator,
+  getFilterFn,
+  getOperatorsForVariant
+};
+//# sourceMappingURL=filters.js.map