@comitor/ui 1.10.0 → 1.11.0

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

@@ -0,0 +1,56 @@
+"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 { msg } from "./messages.js";
+const rowHeights = [
+  {
+    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,
+  ...props
+}) {
+  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]
+  );
+  return /* @__PURE__ */ jsxs(Select, { value: rowHeight, onValueChange: onRowHeightChange, disabled, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": msg.rowHeight.label, className: cn("h-8 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-4 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 { msg } from \"./messages.js\";\n\nconst rowHeights = [\n  {\n    label: msg.rowHeight.short,\n    value: \"short\" as const,\n    icon: MinusIcon\n  },\n  {\n    label: msg.rowHeight.medium,\n    value: \"medium\" as const,\n    icon: EqualIcon\n  },\n  {\n    label: msg.rowHeight.tall,\n    value: \"tall\" as const,\n    icon: AlignVerticalSpaceAroundIcon\n  },\n  {\n    label: msg.rowHeight.extraTall,\n    value: \"extra-tall\" as const,\n    icon: ChevronsDownUpIcon\n  }\n] as const;\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\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  ...props\n}: DataGridRowHeightMenuProps<TData>) {\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]\n  );\n\n  return (\n    <Select value={rowHeight} onValueChange={onRowHeightChange} disabled={disabled}>\n      <SelectTrigger aria-label={msg.rowHeight.label} className={cn(\"h-8 w-auto gap-2 font-normal\", triggerClassName)}>\n        <SelectValue placeholder={msg.rowHeight.label}>\n          <span className=\"flex items-center gap-2\">\n            <selectedRowHeight.icon aria-hidden=\"true\" className=\"size-4 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":";AA0DU,SACE,KADF;AAvDV,SAAS,8BAA8B,oBAAoB,WAAW,iBAAiB;AACvF,YAAY,WAAW;AACvB,SAAS,QAAQ,eAAe,aAAa,YAAY,eAAe,mBAAmB;AAC3F,SAAS,UAAU;AACnB,SAAS,WAAW;AAEpB,MAAM,aAAa;AAAA,EACjB;AAAA,IACE,OAAO,IAAI,UAAU;AAAA,IACrB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO,IAAI,UAAU;AAAA,IACrB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO,IAAI,UAAU;AAAA,IACrB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO,IAAI,UAAU;AAAA,IACrB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAUO,SAAS,sBAA6B;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,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,SAAS;AAAA,EACZ;AAEA,SACE,qBAAC,UAAO,OAAO,WAAW,eAAe,mBAAmB,UAC1D;AAAA,wBAAC,iBAAc,cAAY,IAAI,UAAU,OAAO,WAAW,GAAG,gCAAgC,gBAAgB,GAC5G,8BAAC,eAAY,aAAa,IAAI,UAAU,OACtC,+BAAC,UAAK,WAAU,2BACd;AAAA,0BAAC,kBAAkB,MAAlB,EAAuB,eAAY,QAAO,WAAU,gCAA+B;AAAA,MACnF,kBAAkB;AAAA,OACrB,GACF,GACF;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,183 @@
+"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 { msg } from "./messages.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 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, {})
+              }
+            ),
+            /* @__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, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { "aria-label": msg.search.close, variant: "ghost", size: "icon", className: "size-7", onClick: onClose, children: /* @__PURE__ */ jsx(X, {}) })
+          ] })
+        ] }),
+        /* @__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 { msg } from \"./messages.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 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 />\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 />\n          </Button>\n          <Button aria-label={msg.search.close} variant=\"ghost\" size=\"icon\" className=\"size-7\" onClick={onClose}>\n            <X />\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 };