@comitor/ui 1.10.0 → 2.0.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-grid/data-grid-paste-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport type { TableMeta } from \"@tanstack/react-table\";\nimport * as React from \"react\";\nimport { Button } from \"../components/ui/button.js\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle\n} from \"../components/ui/dialog.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useDataGridMessages } from \"./data-grid-locale.js\";\nimport type { PasteDialogState } from \"./types.js\";\nimport { useAsRef } from \"./use-as-ref.js\";\n\ninterface DataGridPasteDialogProps<TData> {\n  tableMeta: TableMeta<TData>;\n  pasteDialog: PasteDialogState;\n}\n\nexport function DataGridPasteDialog<TData>({ tableMeta, pasteDialog }: DataGridPasteDialogProps<TData>) {\n  const onPasteDialogOpenChange = tableMeta?.onPasteDialogOpenChange;\n  const onCellsPaste = tableMeta?.onCellsPaste;\n\n  if (!pasteDialog.open) return null;\n\n  return (\n    <PasteDialog\n      pasteDialog={pasteDialog}\n      onPasteDialogOpenChange={onPasteDialogOpenChange}\n      onCellsPaste={onCellsPaste}\n    />\n  );\n}\n\ninterface PasteDialogProps\n  extends Pick<TableMeta<unknown>, \"onPasteDialogOpenChange\" | \"onCellsPaste\">,\n    Required<Pick<TableMeta<unknown>, \"pasteDialog\">> {}\n\nconst PasteDialog = React.memo(PasteDialogImpl, (prev, next) => {\n  if (prev.pasteDialog.open !== next.pasteDialog.open) return false;\n  if (!next.pasteDialog.open) return true;\n  if (prev.pasteDialog.rowsNeeded !== next.pasteDialog.rowsNeeded) return false;\n\n  return true;\n});\n\nfunction PasteDialogImpl({ pasteDialog, onPasteDialogOpenChange, onCellsPaste }: PasteDialogProps) {\n  const msg = useDataGridMessages();\n\n  const propsRef = useAsRef({\n    onPasteDialogOpenChange,\n    onCellsPaste\n  });\n\n  const expandRadioRef = React.useRef<HTMLInputElement | null>(null);\n\n  const onOpenChange = React.useCallback(\n    (open: boolean) => {\n      propsRef.current.onPasteDialogOpenChange?.(open);\n    },\n    [propsRef]\n  );\n\n  const onCancel = React.useCallback(() => {\n    propsRef.current.onPasteDialogOpenChange?.(false);\n  }, [propsRef]);\n\n  const onContinue = React.useCallback(() => {\n    propsRef.current.onCellsPaste?.(expandRadioRef.current?.checked ?? false);\n  }, [propsRef]);\n\n  return (\n    <Dialog open={pasteDialog.open} onOpenChange={onOpenChange}>\n      <DialogContent data-grid-popover=\"\">\n        <DialogHeader>\n          <DialogTitle>{msg.pasteDialog.title}</DialogTitle>\n          <DialogDescription>{msg.pasteDialog.description(pasteDialog.rowsNeeded)}</DialogDescription>\n        </DialogHeader>\n        <div className=\"flex flex-col gap-3 py-1\">\n          {/* biome-ignore lint/a11y/noLabelWithoutControl: <RadioItem> bọc sẵn <input type=\"radio\"> bên trong */}\n          <label className=\"flex cursor-pointer items-start gap-3\">\n            <RadioItem ref={expandRadioRef} name=\"expand-option\" value=\"expand\" defaultChecked />\n            <div className=\"flex flex-col gap-1\">\n              <span className=\"font-medium text-sm leading-none\">{msg.pasteDialog.expandTitle}</span>\n              <span className=\"text-muted-foreground text-sm\">\n                {msg.pasteDialog.expandDescription(pasteDialog.rowsNeeded)}\n              </span>\n            </div>\n          </label>\n          {/* biome-ignore lint/a11y/noLabelWithoutControl: <RadioItem> bọc sẵn <input type=\"radio\"> bên trong */}\n          <label className=\"flex cursor-pointer items-start gap-3\">\n            <RadioItem name=\"expand-option\" value=\"no-expand\" />\n            <div className=\"flex flex-col gap-1\">\n              <span className=\"font-medium text-sm leading-none\">{msg.pasteDialog.keepTitle}</span>\n              <span className=\"text-muted-foreground text-sm\">{msg.pasteDialog.keepDescription}</span>\n            </div>\n          </label>\n        </div>\n        <DialogFooter className=\"gap-2\">\n          <Button variant=\"outline\" onClick={onCancel}>\n            {msg.pasteDialog.cancel}\n          </Button>\n          <Button onClick={onContinue}>{msg.pasteDialog.confirm}</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/**\n * Radio thuần HTML (không dùng RadioGroup của Radix) để bấm vào cả khối `<label>`\n * là chọn được, và để đọc trạng thái qua ref lúc bấm \"Tiếp tục\".\n */\nfunction RadioItem({ className, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type=\"radio\"\n      className={cn(\n        // Cùng bộ token với `RadioGroupItem` của gói (`--choice-edge` cho viền nghỉ,\n        // `--control-on` cho viền + chấm khi chọn) — đừng quay lại `--primary`/`--ring`: đó là\n        // bậc tô NỀN, đem vẽ NÉT thì ở light chỉ 1,73:1.\n        \"relative mt-0.5 size-4 shrink-0 appearance-none rounded-full border border-choice-edge outline-none transition-colors dark:bg-input-fill\",\n        \"hover:border-choice-edge-strong checked:border-control-on\",\n        \"focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"checked:before:absolute checked:before:start-1/2 checked:before:top-1/2 checked:before:size-2 checked:before:-translate-x-1/2 checked:before:-translate-y-1/2 checked:before:rounded-full checked:before:bg-control-on checked:before:content-['']\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface DataGridCellPresence {
+    color: string;
+    name: string;
+}
+interface DataGridPresenceProviderProps {
+    value: Map<string, DataGridCellPresence>;
+    children: React.ReactNode;
+}
+declare function DataGridPresenceProvider({ value, children }: DataGridPresenceProviderProps): React.JSX.Element;
+declare function useDataGridPresence(cellKey: string): DataGridCellPresence | null;
+
+export { type DataGridCellPresence, DataGridPresenceProvider, useDataGridPresence };

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

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+const DataGridCellPresenceContext = React.createContext(null);
+function DataGridPresenceProvider({ value, children }) {
+  return /* @__PURE__ */ jsx(DataGridCellPresenceContext.Provider, { value, children });
+}
+function useDataGridPresence(cellKey) {
+  const map = React.useContext(DataGridCellPresenceContext);
+  return map?.get(cellKey) ?? null;
+}
+export {
+  DataGridPresenceProvider,
+  useDataGridPresence
+};
+//# sourceMappingURL=data-grid-presence.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-grid/data-grid-presence.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\ninterface DataGridCellPresence {\n  color: string;\n  name: string;\n}\n\nconst DataGridCellPresenceContext = React.createContext<Map<string, DataGridCellPresence> | null>(null);\n\ninterface DataGridPresenceProviderProps {\n  value: Map<string, DataGridCellPresence>;\n  children: React.ReactNode;\n}\n\nfunction DataGridPresenceProvider({ value, children }: DataGridPresenceProviderProps) {\n  return <DataGridCellPresenceContext.Provider value={value}>{children}</DataGridCellPresenceContext.Provider>;\n}\n\nfunction useDataGridPresence(cellKey: string): DataGridCellPresence | null {\n  const map = React.useContext(DataGridCellPresenceContext);\n  return map?.get(cellKey) ?? null;\n}\n\nexport { type DataGridCellPresence, DataGridPresenceProvider, useDataGridPresence };\n"],"mappings":";AAiBS;AAfT,YAAY,WAAW;AAOvB,MAAM,8BAA8B,MAAM,cAAwD,IAAI;AAOtG,SAAS,yBAAyB,EAAE,OAAO,SAAS,GAAkC;AACpF,SAAO,oBAAC,4BAA4B,UAA5B,EAAqC,OAAe,UAAS;AACvE;AAEA,SAAS,oBAAoB,SAA8C;AACzE,QAAM,MAAM,MAAM,WAAW,2BAA2B;AACxD,SAAO,KAAK,IAAI,OAAO,KAAK;AAC9B;","names":[]}

package/dist/data-grid/data-grid-row-height-menu.d.ts

@@ -0,0 +1,25 @@
+import { Table } from '@tanstack/react-table';
+import * as React from 'react';
+import { SelectContent } from '../components/ui/select.js';
+import { DataGridLocale } from './messages.js';
+import { DataGridMessages } from './messages-en.js';
+import '@radix-ui/react-select';
+import './messages-vi.js';
+
+interface DataGridRowHeightMenuProps<TData> extends React.ComponentProps<typeof SelectContent> {
+    table: Table<TData>;
+    disabled?: boolean;
+    /** className cho nút mở menu (mặc định cao 8 như các nút khác trên thanh công cụ) */
+    triggerClassName?: string;
+    /**
+     * Ngôn ngữ của menu: `"en"` (mặc định) · `"vi"`, hoặc cả một bảng chuỗi tự soạn.
+     *
+     * ⚠ Thanh công cụ nằm NGOÀI `<DataGrid>`, nên `locale` truyền cho lưới không với tới đây. Bọc
+     * cả màn bằng `DataGridLocaleProvider`, hoặc truyền prop này cho từng menu. Prop thắng provider.
+     */
+    locale?: DataGridLocale | DataGridMessages;
+}
+/** Chọn chiều cao dòng của lưới (thấp/vừa/cao/rất cao) — đặt trên thanh công cụ. */
+declare function DataGridRowHeightMenu<TData>({ table, disabled, triggerClassName, locale, ...props }: DataGridRowHeightMenuProps<TData>): React.JSX.Element;
+
+export { DataGridRowHeightMenu };

package/dist/data-grid/data-grid-row-height-menu.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlignVerticalSpaceAroundIcon, ChevronsDownUpIcon, EqualIcon, MinusIcon } from "lucide-react";
+import * as React from "react";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select.js";
+import { cn } from "../lib/cn.js";
+import { useResolvedDataGridMessages } from "./data-grid-locale.js";
+function buildRowHeights(msg) {
+  return [
+    { label: msg.rowHeight.short, value: "short", icon: MinusIcon },
+    { label: msg.rowHeight.medium, value: "medium", icon: EqualIcon },
+    { label: msg.rowHeight.tall, value: "tall", icon: AlignVerticalSpaceAroundIcon },
+    { label: msg.rowHeight.extraTall, value: "extra-tall", icon: ChevronsDownUpIcon }
+  ];
+}
+function DataGridRowHeightMenu({
+  table,
+  disabled,
+  triggerClassName,
+  locale,
+  ...props
+}) {
+  const msg = useResolvedDataGridMessages(locale);
+  const rowHeights = React.useMemo(() => buildRowHeights(msg), [msg]);
+  const rowHeight = table.options.meta?.rowHeight;
+  const onRowHeightChange = table.options.meta?.onRowHeightChange;
+  const selectedRowHeight = React.useMemo(
+    () => rowHeights.find((option) => option.value === rowHeight) ?? rowHeights[0],
+    [rowHeight, rowHeights]
+  );
+  return /* @__PURE__ */ jsxs(Select, { value: rowHeight, onValueChange: onRowHeightChange, disabled, children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        "aria-label": msg.rowHeight.label,
+        size: "sm",
+        className: cn("w-auto gap-2 font-normal", triggerClassName),
+        children: /* @__PURE__ */ jsx(SelectValue, { placeholder: msg.rowHeight.label, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(selectedRowHeight.icon, { "aria-hidden": "true", className: "size-3.5 text-muted-foreground" }),
+          selectedRowHeight.label
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(SelectContent, { ...props, children: /* @__PURE__ */ jsx(SelectGroup, { children: rowHeights.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(option.icon, { "aria-hidden": "true", className: "size-4 text-muted-foreground" }),
+      option.label
+    ] }) }, option.value)) }) })
+  ] });
+}
+export {
+  DataGridRowHeightMenu
+};
+//# sourceMappingURL=data-grid-row-height-menu.js.map

package/dist/data-grid/data-grid-row-height-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-grid/data-grid-row-height-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Table } from \"@tanstack/react-table\";\nimport { AlignVerticalSpaceAroundIcon, ChevronsDownUpIcon, EqualIcon, MinusIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from \"../components/ui/select.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useResolvedDataGridMessages } from \"./data-grid-locale.js\";\nimport type { DataGridLocale, DataGridMessages } from \"./messages.js\";\n\n/*\n * Bốn mức chiều cao. PHẢI dựng theo bảng chuỗi chứ không đóng băng thành hằng ở đầu module —\n * nhãn (\"Short\" / \"Thấp\") đổi theo ngôn ngữ, còn `value` và icon thì không.\n */\nfunction buildRowHeights(msg: DataGridMessages) {\n  // Tuple (không phải mảng) để `rowHeights[0]` có kiểu chắc chắn — bốn mức là cố định.\n  return [\n    { label: msg.rowHeight.short, value: \"short\" as const, icon: MinusIcon },\n    { label: msg.rowHeight.medium, value: \"medium\" as const, icon: EqualIcon },\n    { label: msg.rowHeight.tall, value: \"tall\" as const, icon: AlignVerticalSpaceAroundIcon },\n    { label: msg.rowHeight.extraTall, value: \"extra-tall\" as const, icon: ChevronsDownUpIcon }\n  ] as const;\n}\n\ninterface DataGridRowHeightMenuProps<TData> extends React.ComponentProps<typeof SelectContent> {\n  table: Table<TData>;\n  disabled?: boolean;\n  /** className cho nút mở menu (mặc định cao 8 như các nút khác trên thanh công cụ) */\n  triggerClassName?: string;\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`, hoặc truyền prop này cho từng menu. Prop thắng provider.\n   */\n  locale?: DataGridLocale | DataGridMessages;\n}\n\n/** Chọn chiều cao dòng của lưới (thấp/vừa/cao/rất cao) — đặt trên thanh công cụ. */\nexport function DataGridRowHeightMenu<TData>({\n  table,\n  disabled,\n  triggerClassName,\n  locale,\n  ...props\n}: DataGridRowHeightMenuProps<TData>) {\n  const msg = useResolvedDataGridMessages(locale);\n  const rowHeights = React.useMemo(() => buildRowHeights(msg), [msg]);\n  const rowHeight = table.options.meta?.rowHeight;\n  const onRowHeightChange = table.options.meta?.onRowHeightChange;\n\n  const selectedRowHeight = React.useMemo(\n    () => rowHeights.find((option) => option.value === rowHeight) ?? rowHeights[0],\n    [rowHeight, rowHeights]\n  );\n\n  return (\n    <Select value={rowHeight} onValueChange={onRowHeightChange} disabled={disabled}>\n      <SelectTrigger\n        aria-label={msg.rowHeight.label}\n        size=\"sm\"\n        className={cn(\"w-auto gap-2 font-normal\", triggerClassName)}\n      >\n        <SelectValue placeholder={msg.rowHeight.label}>\n          <span className=\"flex items-center gap-2\">\n            <selectedRowHeight.icon aria-hidden=\"true\" className=\"size-3.5 text-muted-foreground\" />\n            {selectedRowHeight.label}\n          </span>\n        </SelectValue>\n      </SelectTrigger>\n      <SelectContent {...props}>\n        <SelectGroup>\n          {rowHeights.map((option) => (\n            <SelectItem key={option.value} value={option.value}>\n              <span className=\"flex items-center gap-2\">\n                <option.icon aria-hidden=\"true\" className=\"size-4 text-muted-foreground\" />\n                {option.label}\n              </span>\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":";AAgEU,SACE,KADF;AA7DV,SAAS,8BAA8B,oBAAoB,WAAW,iBAAiB;AACvF,YAAY,WAAW;AACvB,SAAS,QAAQ,eAAe,aAAa,YAAY,eAAe,mBAAmB;AAC3F,SAAS,UAAU;AACnB,SAAS,mCAAmC;AAO5C,SAAS,gBAAgB,KAAuB;AAE9C,SAAO;AAAA,IACL,EAAE,OAAO,IAAI,UAAU,OAAO,OAAO,SAAkB,MAAM,UAAU;AAAA,IACvE,EAAE,OAAO,IAAI,UAAU,QAAQ,OAAO,UAAmB,MAAM,UAAU;AAAA,IACzE,EAAE,OAAO,IAAI,UAAU,MAAM,OAAO,QAAiB,MAAM,6BAA6B;AAAA,IACxF,EAAE,OAAO,IAAI,UAAU,WAAW,OAAO,cAAuB,MAAM,mBAAmB;AAAA,EAC3F;AACF;AAiBO,SAAS,sBAA6B;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,QAAM,MAAM,4BAA4B,MAAM;AAC9C,QAAM,aAAa,MAAM,QAAQ,MAAM,gBAAgB,GAAG,GAAG,CAAC,GAAG,CAAC;AAClE,QAAM,YAAY,MAAM,QAAQ,MAAM;AACtC,QAAM,oBAAoB,MAAM,QAAQ,MAAM;AAE9C,QAAM,oBAAoB,MAAM;AAAA,IAC9B,MAAM,WAAW,KAAK,CAAC,WAAW,OAAO,UAAU,SAAS,KAAK,WAAW,CAAC;AAAA,IAC7E,CAAC,WAAW,UAAU;AAAA,EACxB;AAEA,SACE,qBAAC,UAAO,OAAO,WAAW,eAAe,mBAAmB,UAC1D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,IAAI,UAAU;AAAA,QAC1B,MAAK;AAAA,QACL,WAAW,GAAG,4BAA4B,gBAAgB;AAAA,QAE1D,8BAAC,eAAY,aAAa,IAAI,UAAU,OACtC,+BAAC,UAAK,WAAU,2BACd;AAAA,8BAAC,kBAAkB,MAAlB,EAAuB,eAAY,QAAO,WAAU,kCAAiC;AAAA,UACrF,kBAAkB;AAAA,WACrB,GACF;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,iBAAe,GAAG,OACjB,8BAAC,eACE,qBAAW,IAAI,CAAC,WACf,oBAAC,cAA8B,OAAO,OAAO,OAC3C,+BAAC,UAAK,WAAU,2BACd;AAAA,0BAAC,OAAO,MAAP,EAAY,eAAY,QAAO,WAAU,gCAA+B;AAAA,MACxE,OAAO;AAAA,OACV,KAJe,OAAO,KAKxB,CACD,GACH,GACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,28 @@
+import { Row, TableMeta, VisibilityState, ColumnPinningState } from '@tanstack/react-table';
+import { VirtualItem } from '@tanstack/react-virtual';
+import * as React from 'react';
+import { RowHeightValue, CellPosition, Direction } from './types.js';
+
+interface DataGridRowProps<TData> extends React.ComponentProps<"div"> {
+    row: Row<TData>;
+    tableMeta: TableMeta<TData>;
+    virtualItem: VirtualItem;
+    measureElement: (node: Element | null) => void;
+    rowMapRef: React.RefObject<Map<number, HTMLDivElement>>;
+    rowHeight: RowHeightValue;
+    columnVisibility: VisibilityState;
+    columnPinning: ColumnPinningState;
+    focusedCell: CellPosition | null;
+    editingCell: CellPosition | null;
+    cellSelectionKeys: Set<string>;
+    searchMatchColumns: Set<string> | null;
+    activeSearchMatch: CellPosition | null;
+    dir: Direction;
+    readOnly: boolean;
+    stretchColumns: boolean;
+    adjustLayout: boolean;
+}
+declare const DataGridRow: typeof DataGridRowImpl;
+declare function DataGridRowImpl<TData>({ row, tableMeta, virtualItem, measureElement, rowMapRef, rowHeight, columnVisibility, columnPinning, focusedCell, editingCell, cellSelectionKeys, searchMatchColumns, activeSearchMatch, dir, readOnly, stretchColumns, adjustLayout, className, style, ref, ...props }: DataGridRowProps<TData>): React.JSX.Element;
+
+export { DataGridRow };

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

@@ -0,0 +1,206 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useComposedRefs } from "./compose-refs.js";
+import { DataGridCell } from "./data-grid-cell.js";
+import {
+  flexRender,
+  getCellKey,
+  getColumnBorderVisibility,
+  getColumnPinningStyle,
+  getRowHeightValue
+} from "./utils.js";
+const DataGridRow = React.memo(DataGridRowImpl, (prev, next) => {
+  const prevRowIndex = prev.virtualItem.index;
+  const nextRowIndex = next.virtualItem.index;
+  if (prev.row.id !== next.row.id) {
+    return false;
+  }
+  if (prev.row.original !== next.row.original) {
+    return false;
+  }
+  if (prev.virtualItem.start !== next.virtualItem.start) {
+    return false;
+  }
+  const prevHasFocus = prev.focusedCell?.rowIndex === prevRowIndex;
+  const nextHasFocus = next.focusedCell?.rowIndex === nextRowIndex;
+  if (prevHasFocus !== nextHasFocus) {
+    return false;
+  }
+  if (nextHasFocus && prevHasFocus) {
+    if (prev.focusedCell?.columnId !== next.focusedCell?.columnId) {
+      return false;
+    }
+  }
+  const prevHasEditing = prev.editingCell?.rowIndex === prevRowIndex;
+  const nextHasEditing = next.editingCell?.rowIndex === nextRowIndex;
+  if (prevHasEditing !== nextHasEditing) {
+    return false;
+  }
+  if (nextHasEditing && prevHasEditing) {
+    if (prev.editingCell?.columnId !== next.editingCell?.columnId) {
+      return false;
+    }
+  }
+  if (prev.cellSelectionKeys !== next.cellSelectionKeys) {
+    return false;
+  }
+  if (prev.columnVisibility !== next.columnVisibility) {
+    return false;
+  }
+  if (prev.rowHeight !== next.rowHeight) {
+    return false;
+  }
+  if (prev.columnPinning !== next.columnPinning) {
+    return false;
+  }
+  if (prev.readOnly !== next.readOnly) {
+    return false;
+  }
+  if (prev.searchMatchColumns !== next.searchMatchColumns) {
+    return false;
+  }
+  if (prev.activeSearchMatch?.columnId !== next.activeSearchMatch?.columnId) {
+    return false;
+  }
+  if (prev.dir !== next.dir) {
+    return false;
+  }
+  if (prev.adjustLayout !== next.adjustLayout) {
+    return false;
+  }
+  if (prev.stretchColumns !== next.stretchColumns) {
+    return false;
+  }
+  return true;
+});
+function DataGridRowImpl({
+  row,
+  tableMeta,
+  virtualItem,
+  measureElement,
+  rowMapRef,
+  rowHeight,
+  columnVisibility,
+  columnPinning,
+  focusedCell,
+  editingCell,
+  cellSelectionKeys,
+  searchMatchColumns,
+  activeSearchMatch,
+  dir,
+  readOnly,
+  stretchColumns,
+  adjustLayout,
+  className,
+  style,
+  ref,
+  ...props
+}) {
+  const virtualRowIndex = virtualItem.index;
+  const onRowChange = React.useCallback(
+    (node) => {
+      if (typeof virtualRowIndex === "undefined") return;
+      if (node) {
+        measureElement(node);
+        rowMapRef.current?.set(virtualRowIndex, node);
+      } else {
+        rowMapRef.current?.delete(virtualRowIndex);
+      }
+    },
+    [virtualRowIndex, measureElement, rowMapRef]
+  );
+  const rowRef = useComposedRefs(ref, onRowChange);
+  const isRowSelected = row.getIsSelected();
+  const visibleCells = React.useMemo(() => row.getVisibleCells(), [row, columnVisibility, columnPinning]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "row",
+      "aria-rowindex": virtualRowIndex + 2,
+      "aria-selected": isRowSelected,
+      "data-index": virtualRowIndex,
+      "data-slot": "grid-row",
+      tabIndex: -1,
+      ...props,
+      ref: rowRef,
+      className: cn(
+        "absolute flex w-full border-b [content-visibility:auto]",
+        !adjustLayout && "will-change-transform",
+        className
+      ),
+      style: {
+        height: `${getRowHeightValue(rowHeight)}px`,
+        ...adjustLayout ? { top: `${virtualItem.start}px` } : { transform: `translateY(${virtualItem.start}px)` },
+        ...style
+      },
+      children: visibleCells.map((cell, colIndex) => {
+        const columnId = cell.column.id;
+        const isCellFocused = focusedCell?.rowIndex === virtualRowIndex && focusedCell?.columnId === columnId;
+        const isCellEditing = editingCell?.rowIndex === virtualRowIndex && editingCell?.columnId === columnId;
+        const isCellSelected = cellSelectionKeys?.has(getCellKey(virtualRowIndex, columnId)) ?? false;
+        const isSearchMatch = searchMatchColumns?.has(columnId) ?? false;
+        const isActiveSearchMatch = activeSearchMatch?.columnId === columnId;
+        const nextCell = visibleCells[colIndex + 1];
+        const isLastColumn = colIndex === visibleCells.length - 1;
+        const { showEndBorder, showStartBorder } = getColumnBorderVisibility({
+          column: cell.column,
+          nextColumn: nextCell?.column,
+          isLastColumn
+        });
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "gridcell",
+            "aria-colindex": colIndex + 1,
+            "data-highlighted": isCellFocused ? "" : void 0,
+            "data-slot": "grid-cell",
+            tabIndex: -1,
+            className: cn({
+              grow: stretchColumns && columnId !== "select",
+              "border-e": showEndBorder && columnId !== "select",
+              "border-s": showStartBorder && columnId !== "select"
+            }),
+            style: {
+              ...getColumnPinningStyle({ column: cell.column, dir }),
+              width: `calc(var(--col-${columnId}-size) * 1px)`
+            },
+            children: typeof cell.column.columnDef.header === "function" ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("size-full px-3 py-1.5", {
+                  // `--accent` là bậc tint TRẠNG THÁI của gói (Tabs/Switch/Progress dùng đúng nó
+                  // để nói "đang bật"). `bg-primary/10` là gold pha 10% — 1,05:1, một dấu hiệu giả.
+                  "bg-accent": isRowSelected
+                }),
+                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+              }
+            ) : /* @__PURE__ */ jsx(
+              DataGridCell,
+              {
+                cell,
+                tableMeta,
+                rowIndex: virtualRowIndex,
+                columnId,
+                rowHeight,
+                isFocused: isCellFocused,
+                isEditing: isCellEditing,
+                isSelected: isCellSelected,
+                isSearchMatch,
+                isActiveSearchMatch,
+                readOnly
+              }
+            )
+          },
+          cell.id
+        );
+      })
+    },
+    row.id
+  );
+}
+export {
+  DataGridRow
+};
+//# sourceMappingURL=data-grid-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-grid/data-grid-row.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ColumnPinningState, Row, TableMeta, VisibilityState } from \"@tanstack/react-table\";\nimport type { VirtualItem } from \"@tanstack/react-virtual\";\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { useComposedRefs } from \"./compose-refs.js\";\nimport { DataGridCell } from \"./data-grid-cell.js\";\nimport type { CellPosition, Direction, RowHeightValue } from \"./types.js\";\nimport {\n  flexRender,\n  getCellKey,\n  getColumnBorderVisibility,\n  getColumnPinningStyle,\n  getRowHeightValue\n} from \"./utils.js\";\n\ninterface DataGridRowProps<TData> extends React.ComponentProps<\"div\"> {\n  row: Row<TData>;\n  tableMeta: TableMeta<TData>;\n  virtualItem: VirtualItem;\n  measureElement: (node: Element | null) => void;\n  rowMapRef: React.RefObject<Map<number, HTMLDivElement>>;\n  rowHeight: RowHeightValue;\n  columnVisibility: VisibilityState;\n  columnPinning: ColumnPinningState;\n  focusedCell: CellPosition | null;\n  editingCell: CellPosition | null;\n  cellSelectionKeys: Set<string>;\n  searchMatchColumns: Set<string> | null;\n  activeSearchMatch: CellPosition | null;\n  dir: Direction;\n  readOnly: boolean;\n  stretchColumns: boolean;\n  adjustLayout: boolean;\n}\n\nexport const DataGridRow = React.memo(DataGridRowImpl, (prev, next) => {\n  const prevRowIndex = prev.virtualItem.index;\n  const nextRowIndex = next.virtualItem.index;\n\n  // Re-render if row identity changed\n  if (prev.row.id !== next.row.id) {\n    return false;\n  }\n\n  // Re-render if row data (original) reference changed\n  if (prev.row.original !== next.row.original) {\n    return false;\n  }\n\n  // Re-render if virtual position changed (handles transform updates)\n  if (prev.virtualItem.start !== next.virtualItem.start) {\n    return false;\n  }\n\n  // Re-render if focus state changed for this row\n  const prevHasFocus = prev.focusedCell?.rowIndex === prevRowIndex;\n  const nextHasFocus = next.focusedCell?.rowIndex === nextRowIndex;\n\n  if (prevHasFocus !== nextHasFocus) {\n    return false;\n  }\n\n  // Re-render if focused column changed within this row\n  if (nextHasFocus && prevHasFocus) {\n    if (prev.focusedCell?.columnId !== next.focusedCell?.columnId) {\n      return false;\n    }\n  }\n\n  // Re-render if editing state changed for this row\n  const prevHasEditing = prev.editingCell?.rowIndex === prevRowIndex;\n  const nextHasEditing = next.editingCell?.rowIndex === nextRowIndex;\n\n  if (prevHasEditing !== nextHasEditing) {\n    return false;\n  }\n\n  // Re-render if editing column changed within this row\n  if (nextHasEditing && prevHasEditing) {\n    if (prev.editingCell?.columnId !== next.editingCell?.columnId) {\n      return false;\n    }\n  }\n\n  // Re-render if this row's selected cells changed\n  // Using stable Set reference that only includes this row's cells\n  if (prev.cellSelectionKeys !== next.cellSelectionKeys) {\n    return false;\n  }\n\n  // Re-render if column visibility changed\n  if (prev.columnVisibility !== next.columnVisibility) {\n    return false;\n  }\n\n  // Re-render if row height changed\n  if (prev.rowHeight !== next.rowHeight) {\n    return false;\n  }\n\n  // Re-render if column pinning state changed\n  if (prev.columnPinning !== next.columnPinning) {\n    return false;\n  }\n\n  // Re-render if readOnly changed\n  if (prev.readOnly !== next.readOnly) {\n    return false;\n  }\n\n  // Re-render if search match columns changed for this row\n  if (prev.searchMatchColumns !== next.searchMatchColumns) {\n    return false;\n  }\n\n  // Re-render if active search match changed for this row\n  if (prev.activeSearchMatch?.columnId !== next.activeSearchMatch?.columnId) {\n    return false;\n  }\n\n  // Re-render if direction changed\n  if (prev.dir !== next.dir) {\n    return false;\n  }\n\n  // Re-render if adjustLayout state changed\n  if (prev.adjustLayout !== next.adjustLayout) {\n    return false;\n  }\n\n  // Re-render if stretchColumns changed\n  if (prev.stretchColumns !== next.stretchColumns) {\n    return false;\n  }\n\n  // Skip re-render - props are equal\n  return true;\n}) as typeof DataGridRowImpl;\n\nfunction DataGridRowImpl<TData>({\n  row,\n  tableMeta,\n  virtualItem,\n  measureElement,\n  rowMapRef,\n  rowHeight,\n  columnVisibility,\n  columnPinning,\n  focusedCell,\n  editingCell,\n  cellSelectionKeys,\n  searchMatchColumns,\n  activeSearchMatch,\n  dir,\n  readOnly,\n  stretchColumns,\n  adjustLayout,\n  className,\n  style,\n  ref,\n  ...props\n}: DataGridRowProps<TData>) {\n  const virtualRowIndex = virtualItem.index;\n\n  const onRowChange = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      if (typeof virtualRowIndex === \"undefined\") return;\n\n      if (node) {\n        measureElement(node);\n        rowMapRef.current?.set(virtualRowIndex, node);\n      } else {\n        rowMapRef.current?.delete(virtualRowIndex);\n      }\n    },\n    [virtualRowIndex, measureElement, rowMapRef]\n  );\n\n  const rowRef = useComposedRefs(ref, onRowChange);\n\n  const isRowSelected = row.getIsSelected();\n\n  // Memoize visible cells to avoid recreating cell array on every render\n  // Though TanStack returns new Cell wrappers, memoizing the array helps React's reconciliation\n  // biome-ignore lint/correctness/useExhaustiveDependencies: columnVisibility and columnPinning are used for calculating the visible cells\n  const visibleCells = React.useMemo(() => row.getVisibleCells(), [row, columnVisibility, columnPinning]);\n\n  return (\n    <div\n      key={row.id}\n      role=\"row\"\n      aria-rowindex={virtualRowIndex + 2}\n      aria-selected={isRowSelected}\n      data-index={virtualRowIndex}\n      data-slot=\"grid-row\"\n      tabIndex={-1}\n      {...props}\n      ref={rowRef}\n      className={cn(\n        \"absolute flex w-full border-b [content-visibility:auto]\",\n        !adjustLayout && \"will-change-transform\",\n        className\n      )}\n      style={{\n        height: `${getRowHeightValue(rowHeight)}px`,\n        ...(adjustLayout ? { top: `${virtualItem.start}px` } : { transform: `translateY(${virtualItem.start}px)` }),\n        ...style\n      }}\n    >\n      {visibleCells.map((cell, colIndex) => {\n        const columnId = cell.column.id;\n\n        const isCellFocused = focusedCell?.rowIndex === virtualRowIndex && focusedCell?.columnId === columnId;\n        const isCellEditing = editingCell?.rowIndex === virtualRowIndex && editingCell?.columnId === columnId;\n        const isCellSelected = cellSelectionKeys?.has(getCellKey(virtualRowIndex, columnId)) ?? false;\n\n        const isSearchMatch = searchMatchColumns?.has(columnId) ?? false;\n        const isActiveSearchMatch = activeSearchMatch?.columnId === columnId;\n\n        const nextCell = visibleCells[colIndex + 1];\n        const isLastColumn = colIndex === visibleCells.length - 1;\n        const { showEndBorder, showStartBorder } = getColumnBorderVisibility({\n          column: cell.column,\n          nextColumn: nextCell?.column,\n          isLastColumn\n        });\n\n        return (\n          <div\n            key={cell.id}\n            role=\"gridcell\"\n            aria-colindex={colIndex + 1}\n            data-highlighted={isCellFocused ? \"\" : undefined}\n            data-slot=\"grid-cell\"\n            tabIndex={-1}\n            className={cn({\n              grow: stretchColumns && columnId !== \"select\",\n              \"border-e\": showEndBorder && columnId !== \"select\",\n              \"border-s\": showStartBorder && columnId !== \"select\"\n            })}\n            style={{\n              ...getColumnPinningStyle({ column: cell.column, dir }),\n              width: `calc(var(--col-${columnId}-size) * 1px)`\n            }}\n          >\n            {typeof cell.column.columnDef.header === \"function\" ? (\n              <div\n                className={cn(\"size-full px-3 py-1.5\", {\n                  // `--accent` là bậc tint TRẠNG THÁI của gói (Tabs/Switch/Progress dùng đúng nó\n                  // để nói \"đang bật\"). `bg-primary/10` là gold pha 10% — 1,05:1, một dấu hiệu giả.\n                  \"bg-accent\": isRowSelected\n                })}\n              >\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </div>\n            ) : (\n              <DataGridCell\n                cell={cell}\n                tableMeta={tableMeta}\n                rowIndex={virtualRowIndex}\n                columnId={columnId}\n                rowHeight={rowHeight}\n                isFocused={isCellFocused}\n                isEditing={isCellEditing}\n                isSelected={isCellSelected}\n                isSearchMatch={isSearchMatch}\n                isActiveSearchMatch={isActiveSearchMatch}\n                readOnly={readOnly}\n              />\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { SearchState } from './types.js';
+import '@tanstack/react-table';
+
+interface DataGridSearchProps extends SearchState {
+}
+declare const DataGridSearch: React.MemoExoticComponent<typeof DataGridSearchImpl>;
+declare function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpenChange, searchQuery, onSearchQueryChange, onSearch, onNavigateToNextMatch, onNavigateToPrevMatch }: DataGridSearchProps): React.JSX.Element | null;
+
+export { DataGridSearch };

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

@@ -0,0 +1,184 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, X } from "lucide-react";
+import * as React from "react";
+import { Button } from "../components/ui/button.js";
+import { Input } from "../components/ui/input.js";
+import { useDataGridMessages } from "./data-grid-locale.js";
+import { useAsRef } from "./use-as-ref.js";
+import { useDebouncedCallback } from "./use-debounced-callback.js";
+function onTriggerPointerDown(event) {
+  const target = event.target;
+  if (!(target instanceof HTMLElement)) return;
+  if (target.hasPointerCapture(event.pointerId)) {
+    target.releasePointerCapture(event.pointerId);
+  }
+  if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse" && !(event.target instanceof HTMLInputElement)) {
+    event.preventDefault();
+  }
+}
+const DataGridSearch = React.memo(DataGridSearchImpl, (prev, next) => {
+  if (prev.searchOpen !== next.searchOpen) return false;
+  if (!next.searchOpen) return true;
+  if (prev.matchIndex !== next.matchIndex) return false;
+  if (prev.searchMatches.length !== next.searchMatches.length) return false;
+  for (let i = 0; i < prev.searchMatches.length; i++) {
+    const prevMatch = prev.searchMatches[i];
+    const nextMatch = next.searchMatches[i];
+    if (!prevMatch || !nextMatch) return false;
+    if (prevMatch.rowIndex !== nextMatch.rowIndex || prevMatch.columnId !== nextMatch.columnId) {
+      return false;
+    }
+  }
+  return true;
+});
+function DataGridSearchImpl({
+  searchMatches,
+  matchIndex,
+  searchOpen,
+  onSearchOpenChange,
+  searchQuery,
+  onSearchQueryChange,
+  onSearch,
+  onNavigateToNextMatch,
+  onNavigateToPrevMatch
+}) {
+  const msg = useDataGridMessages();
+  const propsRef = useAsRef({
+    onSearchOpenChange,
+    onSearchQueryChange,
+    onSearch,
+    onNavigateToNextMatch,
+    onNavigateToPrevMatch
+  });
+  const inputRef = React.useRef(null);
+  const isComposingRef = React.useRef(false);
+  const [hasQuery, setHasQuery] = React.useState(searchQuery.length > 0);
+  React.useEffect(() => {
+    if (searchOpen) {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+      });
+      return;
+    }
+    isComposingRef.current = false;
+    setHasQuery(false);
+  }, [searchOpen]);
+  React.useEffect(() => {
+    if (!searchOpen) return;
+    function onEscape(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        propsRef.current.onSearchOpenChange(false);
+      }
+    }
+    document.addEventListener("keydown", onEscape);
+    return () => document.removeEventListener("keydown", onEscape);
+  }, [searchOpen, propsRef]);
+  const debouncedSearch = useDebouncedCallback((query) => {
+    propsRef.current.onSearch(query);
+  }, 150);
+  function onCompositionStart() {
+    isComposingRef.current = true;
+  }
+  function onCompositionEnd(event) {
+    isComposingRef.current = false;
+    const value = event.currentTarget.value;
+    setHasQuery(value.length > 0);
+    propsRef.current.onSearchQueryChange(value);
+    debouncedSearch(value);
+  }
+  function onKeyDown(event) {
+    event.stopPropagation();
+    if (event.key === "Enter") {
+      if (event.nativeEvent.isComposing) return;
+      event.preventDefault();
+      if (event.shiftKey) {
+        propsRef.current.onNavigateToPrevMatch();
+      } else {
+        propsRef.current.onNavigateToNextMatch();
+      }
+    }
+  }
+  function onChange(event) {
+    if (isComposingRef.current) return;
+    const value = event.target.value;
+    setHasQuery(value.length > 0);
+    propsRef.current.onSearchQueryChange(value);
+    debouncedSearch(value);
+  }
+  function onClose() {
+    propsRef.current.onSearchOpenChange(false);
+  }
+  function onPrevMatch() {
+    propsRef.current.onNavigateToPrevMatch();
+  }
+  function onNextMatch() {
+    propsRef.current.onNavigateToNextMatch();
+  }
+  if (!searchOpen) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "search",
+      "data-slot": "grid-search",
+      className: "fade-in-0 slide-in-from-top-2 absolute end-4 top-4 z-50 flex animate-in flex-col gap-2 rounded-lg border bg-popover p-2 shadow-overlay",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              autoComplete: "off",
+              autoCorrect: "off",
+              autoCapitalize: "off",
+              spellCheck: false,
+              placeholder: msg.search.placeholder,
+              "aria-label": msg.search.label,
+              className: "h-8 w-64",
+              ref: inputRef,
+              defaultValue: searchQuery,
+              onChange,
+              onKeyDown,
+              onCompositionStart,
+              onCompositionEnd
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": msg.search.prevMatch,
+                variant: "ghost",
+                size: "icon",
+                className: "size-7",
+                onClick: onPrevMatch,
+                onPointerDown: onTriggerPointerDown,
+                disabled: searchMatches.length === 0,
+                children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": msg.search.nextMatch,
+                variant: "ghost",
+                size: "icon",
+                className: "size-7",
+                onClick: onNextMatch,
+                onPointerDown: onTriggerPointerDown,
+                disabled: searchMatches.length === 0,
+                children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { "aria-label": msg.search.close, variant: "ghost", size: "icon", className: "size-7", onClick: onClose, children: /* @__PURE__ */ jsx(X, { className: "size-3.5" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { role: "status", className: "flex items-center gap-1 whitespace-nowrap text-muted-foreground text-xs", children: searchMatches.length > 0 ? /* @__PURE__ */ jsx("span", { children: msg.search.matchPosition(matchIndex + 1, searchMatches.length) }) : hasQuery ? /* @__PURE__ */ jsx("span", { children: msg.search.noResults }) : /* @__PURE__ */ jsx("span", { children: msg.search.typeToSearch }) })
+      ]
+    }
+  );
+}
+export {
+  DataGridSearch
+};
+//# sourceMappingURL=data-grid-search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-grid/data-grid-search.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronDown, ChevronUp, X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"../components/ui/button.js\";\nimport { Input } from \"../components/ui/input.js\";\nimport { useDataGridMessages } from \"./data-grid-locale.js\";\nimport type { SearchState } from \"./types.js\";\nimport { useAsRef } from \"./use-as-ref.js\";\nimport { useDebouncedCallback } from \"./use-debounced-callback.js\";\n\nfunction onTriggerPointerDown(event: React.PointerEvent<HTMLButtonElement>) {\n  const target = event.target;\n  if (!(target instanceof HTMLElement)) return;\n  if (target.hasPointerCapture(event.pointerId)) {\n    target.releasePointerCapture(event.pointerId);\n  }\n\n  // Prevent the trigger from stealing focus away from the input\n  if (\n    event.button === 0 &&\n    event.ctrlKey === false &&\n    event.pointerType === \"mouse\" &&\n    !(event.target instanceof HTMLInputElement)\n  ) {\n    event.preventDefault();\n  }\n}\n\ninterface DataGridSearchProps extends SearchState {}\n\nexport const DataGridSearch = React.memo(DataGridSearchImpl, (prev, next) => {\n  if (prev.searchOpen !== next.searchOpen) return false;\n\n  if (!next.searchOpen) return true;\n\n  // Exclude searchQuery because the input is uncontrolled, and hasQuery state handles the status text\n  if (prev.matchIndex !== next.matchIndex) return false;\n\n  if (prev.searchMatches.length !== next.searchMatches.length) return false;\n\n  for (let i = 0; i < prev.searchMatches.length; i++) {\n    const prevMatch = prev.searchMatches[i];\n    const nextMatch = next.searchMatches[i];\n\n    if (!prevMatch || !nextMatch) return false;\n\n    if (prevMatch.rowIndex !== nextMatch.rowIndex || prevMatch.columnId !== nextMatch.columnId) {\n      return false;\n    }\n  }\n\n  return true;\n});\n\nfunction DataGridSearchImpl({\n  searchMatches,\n  matchIndex,\n  searchOpen,\n  onSearchOpenChange,\n  searchQuery,\n  onSearchQueryChange,\n  onSearch,\n  onNavigateToNextMatch,\n  onNavigateToPrevMatch\n}: DataGridSearchProps) {\n  const msg = useDataGridMessages();\n\n  const propsRef = useAsRef({\n    onSearchOpenChange,\n    onSearchQueryChange,\n    onSearch,\n    onNavigateToNextMatch,\n    onNavigateToPrevMatch\n  });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const isComposingRef = React.useRef(false);\n  const [hasQuery, setHasQuery] = React.useState(searchQuery.length > 0);\n\n  React.useEffect(() => {\n    if (searchOpen) {\n      requestAnimationFrame(() => {\n        inputRef.current?.focus();\n      });\n      return;\n    }\n\n    isComposingRef.current = false;\n    setHasQuery(false);\n  }, [searchOpen]);\n\n  React.useEffect(() => {\n    if (!searchOpen) return;\n\n    function onEscape(event: KeyboardEvent) {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        propsRef.current.onSearchOpenChange(false);\n      }\n    }\n\n    document.addEventListener(\"keydown\", onEscape);\n    return () => document.removeEventListener(\"keydown\", onEscape);\n  }, [searchOpen, propsRef]);\n\n  const debouncedSearch = useDebouncedCallback((query: string) => {\n    propsRef.current.onSearch(query);\n  }, 150);\n\n  function onCompositionStart() {\n    isComposingRef.current = true;\n  }\n\n  function onCompositionEnd(event: React.CompositionEvent<HTMLInputElement>) {\n    isComposingRef.current = false;\n    const value = event.currentTarget.value;\n    setHasQuery(value.length > 0);\n    propsRef.current.onSearchQueryChange(value);\n    debouncedSearch(value);\n  }\n\n  function onKeyDown(event: React.KeyboardEvent) {\n    event.stopPropagation();\n\n    if (event.key === \"Enter\") {\n      if (event.nativeEvent.isComposing) return;\n      event.preventDefault();\n      if (event.shiftKey) {\n        propsRef.current.onNavigateToPrevMatch();\n      } else {\n        propsRef.current.onNavigateToNextMatch();\n      }\n    }\n  }\n\n  function onChange(event: React.ChangeEvent<HTMLInputElement>) {\n    if (isComposingRef.current) return;\n    const value = event.target.value;\n    setHasQuery(value.length > 0);\n    propsRef.current.onSearchQueryChange(value);\n    debouncedSearch(value);\n  }\n\n  function onClose() {\n    propsRef.current.onSearchOpenChange(false);\n  }\n\n  function onPrevMatch() {\n    propsRef.current.onNavigateToPrevMatch();\n  }\n\n  function onNextMatch() {\n    propsRef.current.onNavigateToNextMatch();\n  }\n\n  if (!searchOpen) return null;\n\n  return (\n    <div\n      role=\"search\"\n      data-slot=\"grid-search\"\n      // `shadow-overlay`, KHÔNG `shadow-lg`: bóng của gói đi qua `--elevation-*` nên nó đổi\n      // theo sáng/tối; `shadow-lg` của Tailwind là rgba đen cố định, ở dark gần như vô hình.\n      className=\"fade-in-0 slide-in-from-top-2 absolute end-4 top-4 z-50 flex animate-in flex-col gap-2 rounded-lg border bg-popover p-2 shadow-overlay\"\n    >\n      <div className=\"flex items-center gap-2\">\n        <Input\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoCapitalize=\"off\"\n          spellCheck={false}\n          placeholder={msg.search.placeholder}\n          // placeholder biến mất ngay khi người dùng gõ → vẫn phải có nhãn riêng\n          aria-label={msg.search.label}\n          className=\"h-8 w-64\"\n          ref={inputRef}\n          defaultValue={searchQuery}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          onCompositionStart={onCompositionStart}\n          onCompositionEnd={onCompositionEnd}\n        />\n        <div className=\"flex items-center gap-1\">\n          <Button\n            aria-label={msg.search.prevMatch}\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"size-7\"\n            onClick={onPrevMatch}\n            onPointerDown={onTriggerPointerDown}\n            disabled={searchMatches.length === 0}\n          >\n            <ChevronUp className=\"size-3.5\" />\n          </Button>\n          <Button\n            aria-label={msg.search.nextMatch}\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"size-7\"\n            onClick={onNextMatch}\n            onPointerDown={onTriggerPointerDown}\n            disabled={searchMatches.length === 0}\n          >\n            <ChevronDown className=\"size-3.5\" />\n          </Button>\n          <Button aria-label={msg.search.close} variant=\"ghost\" size=\"icon\" className=\"size-7\" onClick={onClose}>\n            <X className=\"size-3.5\" />\n          </Button>\n        </div>\n      </div>\n      <div role=\"status\" className=\"flex items-center gap-1 whitespace-nowrap text-muted-foreground text-xs\">\n        {searchMatches.length > 0 ? (\n          <span>{msg.search.matchPosition(matchIndex + 1, searchMatches.length)}</span>\n        ) : hasQuery ? (\n          <span>{msg.search.noResults}</span>\n        ) : (\n          <span>{msg.search.typeToSearch}</span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,12 @@
+import { ColumnDef } from '@tanstack/react-table';
+
+type HitboxSize = "default" | "sm" | "lg";
+interface GetDataGridSelectColumnOptions<TData> extends Omit<Partial<ColumnDef<TData>>, "id" | "header" | "cell"> {
+    enableRowMarkers?: boolean;
+    readOnly?: boolean;
+    hitboxSize?: HitboxSize;
+    debug?: boolean;
+}
+declare function getDataGridSelectColumn<TData>({ size, hitboxSize, enableHiding, enableResizing, enableSorting, enableRowMarkers, readOnly, debug, ...props }?: GetDataGridSelectColumnOptions<TData>): ColumnDef<TData>;
+
+export { getDataGridSelectColumn };