Remove clsx dependency (#3883)

Author: amanmahajan7

README.md

@@ -22,7 +22,7 @@ The DataGrid component is designed to handle large datasets efficiently while of
 
 - [React 19.2+](package.json) support
 - Evergreen browsers and server-side rendering support
-- Tree-shaking support and only [one npm dependency](package.json) to keep your bundles slim
+- Tree-shaking support with no external dependencies to keep your bundles slim
 - Great performance thanks to virtualization: columns and rows outside the viewport are not rendered
 - Strictly typed with TypeScript
 - [Keyboard accessibility](https://comcast.github.io/react-data-grid/#/CommonFeatures)

package.json

@@ -48,9 +48,6 @@
     "prepublishOnly": "npm install && node --run build",
     "postpublish": "git push --follow-tags origin HEAD"
   },
-  "dependencies": {
-    "clsx": "^2.0.0"
-  },
   "devDependencies": {
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.2.5",
@@ -72,6 +69,7 @@
     "@vitest/eslint-plugin": "^1.3.4",
     "@wyw-in-js/rollup": "^0.7.0",
     "@wyw-in-js/vite": "^0.7.0",
+    "clsx": "^2.1.1",
     "eslint": "^9.36.0",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-react": "^7.37.5",

src/DataGrid.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react';
 import type { Key, KeyboardEvent } from 'react';
 import { flushSync } from 'react-dom';
-import clsx from 'clsx';
 
 import {
   HeaderRowSelectionChangeContext,
@@ -26,6 +25,7 @@ import {
   abs,
   assertIsValidKeyGetter,
   canExitGrid,
+  classnames,
   createCellEvent,
   getCellStyle,
   getColSpan,
@@ -991,7 +991,10 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     return (
       <div
         style={dragHandleStyle}
-        className={clsx(cellDragHandleClassname, column.frozen && cellDragHandleFrozenClassname)}
+        className={classnames(
+          cellDragHandleClassname,
+          column.frozen && cellDragHandleFrozenClassname
+        )}
         onPointerDown={handleDragHandlePointerDown}
         onPointerMove={isDragging ? handleDragHandlePointerMove : undefined}
         onLostPointerCapture={isDragging ? handleDragHandleLostPointerCapture : undefined}
@@ -1185,7 +1188,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
       // Scrollable containers without tabIndex are keyboard focusable in Chrome only if there is no focusable element inside
       // whereas they are always focusable in Firefox. We need to set tabIndex to have a consistent behavior across browsers.
       tabIndex={-1}
-      className={clsx(
+      className={classnames(
         rootClassname,
         {
           [viewportDraggingClassname]: isDragging
@@ -1329,7 +1332,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
         <div
           ref={focusSinkRef}
           tabIndex={isGroupRowFocused ? 0 : -1}
-          className={clsx(focusSinkClassname, {
+          className={classnames(focusSinkClassname, {
             [focusSinkHeaderAndSummaryClassname]: !isRowIdxWithinViewportBounds(
               selectedPosition.rowIdx
             ),

src/GroupRow.tsx

@@ -1,9 +1,8 @@
 import { memo, useMemo } from 'react';
 import { css } from '@linaria/core';
-import clsx from 'clsx';
 
 import { RowSelectionContext, type RowSelectionContextValue } from './hooks';
-import { getRowStyle } from './utils';
+import { classnames, getRowStyle } from './utils';
 import type { BaseRenderRowProps, GroupRow } from './types';
 import { SELECT_COLUMN_KEY } from './Columns';
 import GroupCell from './GroupCell';
@@ -65,7 +64,7 @@ function GroupedRow<R, SR>({
         aria-setsize={row.setSize}
         aria-posinset={row.posInSet + 1} // aria-posinset is 1-based
         aria-expanded={row.isExpanded}
-        className={clsx(
+        className={classnames(
           rowClassname,
           groupRowClassname,
           `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,

src/GroupedColumnHeaderCell.tsx

@@ -1,7 +1,5 @@
-import clsx from 'clsx';
-
 import { useRovingTabIndex } from './hooks';
-import { getHeaderCellRowSpan, getHeaderCellStyle } from './utils';
+import { classnames, getHeaderCellRowSpan, getHeaderCellStyle } from './utils';
 import type { CalculatedColumnParent } from './types';
 import type { GroupedColumnHeaderRowProps } from './GroupedColumnHeaderRow';
 import { cellClassname } from './style/cell';
@@ -39,7 +37,7 @@ export default function GroupedColumnHeaderCell<R, SR>({
       aria-rowspan={rowSpan}
       aria-selected={isCellSelected}
       tabIndex={tabIndex}
-      className={clsx(cellClassname, column.headerCellClass)}
+      className={classnames(cellClassname, column.headerCellClass)}
       style={{
         ...getHeaderCellStyle(column, rowIdx, rowSpan),
         gridColumnStart: index,

src/HeaderRow.tsx

@@ -1,8 +1,7 @@
 import { memo, useState } from 'react';
 import { css } from '@linaria/core';
-import clsx from 'clsx';
 
-import { getColSpan } from './utils';
+import { classnames, getColSpan } from './utils';
 import type { CalculatedColumn, Direction, Maybe, Position, ResizedWidth } from './types';
 import type { DataGridProps } from './DataGrid';
 import HeaderCell from './HeaderCell';
@@ -97,7 +96,7 @@ function HeaderRow<R, SR, K extends React.Key>({
     <div
       role="row"
       aria-rowindex={rowIdx} // aria-rowindex is 1 based
-      className={clsx(
+      className={classnames(
         headerRowClassname,
         {
           [rowSelectedClassname]: selectedCellIdx === -1

src/Row.tsx

@@ -1,8 +1,7 @@
 import { memo, useMemo } from 'react';
-import clsx from 'clsx';
 
 import { RowSelectionContext, useLatestFunc, type RowSelectionContextValue } from './hooks';
-import { getColSpan, getRowStyle } from './utils';
+import { classnames, getColSpan, getRowStyle } from './utils';
 import type { CalculatedColumn, RenderRowProps } from './types';
 import { useDefaultRenderers } from './DataGridDefaultRenderersContext';
 import { rowClassname, rowSelectedClassname } from './style/row';
@@ -35,7 +34,7 @@ function Row<R, SR>({
     onRowChange(column, rowIdx, newRow);
   });
 
-  className = clsx(
+  className = classnames(
     rowClassname,
     `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
     {

src/SummaryRow.tsx

@@ -1,8 +1,7 @@
 import { memo } from 'react';
 import { css } from '@linaria/core';
-import clsx from 'clsx';
 
-import { getColSpan, getRowStyle } from './utils';
+import { classnames, getColSpan, getRowStyle } from './utils';
 import type { RenderRowProps } from './types';
 import { cell, cellFrozen } from './style/cell';
 import {
@@ -90,7 +89,7 @@ function SummaryRow<R, SR>({
     <div
       role="row"
       aria-rowindex={ariaRowIndex}
-      className={clsx(
+      className={classnames(
         rowClassname,
         `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
         summaryRowClassname,

src/utils/styleUtils.ts

@@ -1,7 +1,6 @@
 import type { CSSProperties } from 'react';
-import clsx from 'clsx';
 
-import type { CalculatedColumn, CalculatedColumnOrColumnGroup } from '../types';
+import type { CalculatedColumn, CalculatedColumnOrColumnGroup, Maybe } from '../types';
 import { cellClassname, cellFrozenClassname } from '../style/cell';
 
 export function getRowStyle(rowIdx: number): CSSProperties {
@@ -45,11 +44,33 @@ export function getCellStyle<R, SR>(
   };
 }
 
+type ClassValue = Maybe<string> | Record<string, boolean> | false;
+
+export function classnames(...args: readonly ClassValue[]) {
+  let classname = '';
+
+  for (const arg of args) {
+    if (arg) {
+      if (typeof arg === 'string') {
+        classname += ` ${arg}`;
+      } else if (typeof arg === 'object') {
+        for (const key in arg) {
+          if (arg[key]) {
+            classname += ` ${key}`;
+          }
+        }
+      }
+    }
+  }
+
+  return classname.trimStart();
+}
+
 export function getCellClassname<R, SR>(
   column: CalculatedColumn<R, SR>,
-  ...extraClasses: Parameters<typeof clsx>
+  ...extraClasses: readonly ClassValue[]
 ): string {
-  return clsx(
+  return classnames(
     cellClassname,
     {
       [cellFrozenClassname]: column.frozen