@comitor/ui 1.9.0 → 1.11.0

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

@@ -0,0 +1,66 @@
+"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 { msg } from "./messages.js";
+function DataGridViewMenu({ table, disabled, className, ...props }) {
+  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",
+        className: "h-8 gap-2 font-normal",
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true", className: "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 { 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":[]}

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Direction } from './types.js';
+import { useDataGrid } from './use-data-grid.js';
+import '@tanstack/react-table';
+import '@tanstack/react-virtual';
+
+interface DataGridProps<TData> extends Omit<ReturnType<typeof useDataGrid<TData>>, "dir">, 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;
+}
+/**
+ * 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, 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,235 @@
+"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 { 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 { 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,
+  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]
+  );
+  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: [
+    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 { 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":[]}

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

@@ -0,0 +1,31 @@
+import { FilterFn } from '@tanstack/react-table';
+import { BooleanFilterOperator, DateFilterOperator, NumberFilterOperator, SelectFilterOperator, TextFilterOperator, FilterOperator } from './types.js';
+
+declare const TEXT_FILTER_OPERATORS: ReadonlyArray<{
+    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;
+}>;
+declare function getDefaultOperator(variant: string): FilterOperator;
+declare function getOperatorsForVariant(variant: string): 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,212 @@
+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" }
+];
+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) {
+  switch (variant) {
+    case "number":
+      return NUMBER_FILTER_OPERATORS;
+    case "date":
+      return DATE_FILTER_OPERATORS;
+    case "select":
+    case "multi-select":
+      return SELECT_FILTER_OPERATORS;
+    case "checkbox":
+      return BOOLEAN_FILTER_OPERATORS;
+    default:
+      return TEXT_FILTER_OPERATORS;
+  }
+}
+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

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

@@ -0,0 +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":[]}