react-data-grid/lib/bundle.cjs.map

Feature-rich and customizable data grid React component

{"version":3,"file":"bundle.cjs","sources":["../src/utils/colSpanUtils.ts","../src/utils/domUtils.ts","../src/utils/eventUtils.ts","../src/utils/keyboardUtils.ts","../src/utils/renderMeasuringCells.tsx","../src/utils/selectedCellUtils.ts","../src/style/cell.ts","../src/utils/styleUtils.ts","../src/utils/index.ts","../src/cellRenderers/renderCheckbox.tsx","../src/cellRenderers/renderToggleGroup.tsx","../src/cellRenderers/renderValue.tsx","../src/DataGridDefaultRenderersProvider.ts","../src/cellRenderers/SelectCellFormatter.tsx","../src/hooks/useRowSelection.ts","../src/Columns.tsx","../src/hooks/useCalculatedColumns.ts","../src/hooks/useLayoutEffect.ts","../src/hooks/useColumnWidths.ts","../src/hooks/useGridDimensions.ts","../src/hooks/useLatestFunc.ts","../src/hooks/useRovingTabIndex.ts","../src/hooks/useViewportColumns.ts","../src/hooks/useViewportRows.ts","../src/DragHandle.tsx","../src/EditCell.tsx","../src/GroupedColumnHeaderCell.tsx","../src/renderHeaderCell.tsx","../src/HeaderCell.tsx","../src/style/row.ts","../src/HeaderRow.tsx","../src/GroupedColumnHeaderRow.tsx","../src/Cell.tsx","../src/Row.tsx","../src/ScrollToCell.tsx","../src/sortStatus.tsx","../src/style/core.ts","../src/SummaryCell.tsx","../src/SummaryRow.tsx","../src/DataGrid.tsx","../src/GroupCell.tsx","../src/GroupRow.tsx","../src/TreeDataGrid.tsx","../src/editors/textEditor.tsx"],"sourcesContent":["import type { CalculatedColumn, ColSpanArgs } from '../types';\n\nexport function getColSpan<R, SR>(\n  column: CalculatedColumn<R, SR>,\n  lastFrozenColumnIndex: number,\n  args: ColSpanArgs<R, SR>\n): number | undefined {\n  const colSpan = typeof column.colSpan === 'function' ? column.colSpan(args) : 1;\n  if (\n    Number.isInteger(colSpan) &&\n    colSpan! > 1 &&\n    // ignore colSpan if it spans over both frozen and regular columns\n    (!column.frozen || column.idx + colSpan! - 1 <= lastFrozenColumnIndex)\n  ) {\n    return colSpan!;\n  }\n  return undefined;\n}\n","import type { Maybe } from '../types';\n\nexport function stopPropagation(event: React.SyntheticEvent) {\n  event.stopPropagation();\n}\n\nexport function scrollIntoView(element: Maybe<Element>) {\n  element?.scrollIntoView({ inline: 'nearest', block: 'nearest' });\n}\n","import type { CellEvent } from '../types';\n\nexport function createCellEvent<E extends React.SyntheticEvent<HTMLDivElement>>(\n  event: E\n): CellEvent<E> {\n  let defaultPrevented = false;\n  const cellEvent = {\n    ...event,\n    preventGridDefault() {\n      defaultPrevented = true;\n    },\n    isGridDefaultPrevented() {\n      return defaultPrevented;\n    }\n  };\n\n  Object.setPrototypeOf(cellEvent, Object.getPrototypeOf(event));\n\n  return cellEvent;\n}\n","// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values\nconst nonInputKeys = new Set([\n  // Special keys\n  'Unidentified',\n  // Modifier keys\n  'Alt',\n  'AltGraph',\n  'CapsLock',\n  'Control',\n  'Fn',\n  'FnLock',\n  'Meta',\n  'NumLock',\n  'ScrollLock',\n  'Shift',\n  // Whitespace keys\n  'Tab',\n  // Navigation keys\n  'ArrowDown',\n  'ArrowLeft',\n  'ArrowRight',\n  'ArrowUp',\n  'End',\n  'Home',\n  'PageDown',\n  'PageUp',\n  // Editing\n  'Insert',\n  // UI keys\n  'ContextMenu',\n  'Escape',\n  'Pause',\n  'Play',\n  // Device keys\n  'PrintScreen',\n  // Function keys\n  'F1',\n  // 'F2', /!\\ specifically allowed, do not edit\n  'F3',\n  'F4',\n  'F5',\n  'F6',\n  'F7',\n  'F8',\n  'F9',\n  'F10',\n  'F11',\n  'F12'\n]);\n\nexport function isCtrlKeyHeldDown(e: React.KeyboardEvent): boolean {\n  return (e.ctrlKey || e.metaKey) && e.key !== 'Control';\n}\n\nexport function isDefaultCellInput(event: React.KeyboardEvent<HTMLDivElement>): boolean {\n  const vKey = 86;\n  if (isCtrlKeyHeldDown(event) && event.keyCode !== vKey) return false;\n  return !nonInputKeys.has(event.key);\n}\n\n/**\n * By default, the following navigation keys are enabled while an editor is open, under specific conditions:\n * - Tab:\n *   - The editor must be an <input>, a <textarea>, or a <select> element.\n *   - The editor element must be the only immediate child of the editor container/a label.\n */\nexport function onEditorNavigation({ key, target }: React.KeyboardEvent<HTMLDivElement>): boolean {\n  if (\n    key === 'Tab' &&\n    (target instanceof HTMLInputElement ||\n      target instanceof HTMLTextAreaElement ||\n      target instanceof HTMLSelectElement)\n  ) {\n    return (\n      target.closest('.rdg-editor-container')?.querySelectorAll('input, textarea, select')\n        .length === 1\n    );\n  }\n  return false;\n}\n","import { css } from '@linaria/core';\n\nimport type { CalculatedColumn } from '../types';\n\nconst measuringCellClassname = css`\n  @layer rdg.MeasuringCell {\n    contain: strict;\n    grid-row: 1;\n    visibility: hidden;\n  }\n`;\n\nexport function renderMeasuringCells<R, SR>(viewportColumns: readonly CalculatedColumn<R, SR>[]) {\n  return viewportColumns.map(({ key, idx, minWidth, maxWidth }) => (\n    <div\n      key={key}\n      className={measuringCellClassname}\n      style={{ gridColumnStart: idx + 1, minWidth, maxWidth }}\n      data-measuring-cell-key={key}\n    />\n  ));\n}\n","import type {\n  CalculatedColumn,\n  CalculatedColumnParent,\n  CellNavigationMode,\n  Maybe,\n  Position\n} from '../types';\nimport { getColSpan } from './colSpanUtils';\n\ninterface IsSelectedCellEditableOpts<R, SR> {\n  selectedPosition: Position;\n  columns: readonly CalculatedColumn<R, SR>[];\n  rows: readonly R[];\n}\n\nexport function isSelectedCellEditable<R, SR>({\n  selectedPosition,\n  columns,\n  rows\n}: IsSelectedCellEditableOpts<R, SR>): boolean {\n  const column = columns[selectedPosition.idx];\n  const row = rows[selectedPosition.rowIdx];\n  return isCellEditableUtil(column, row);\n}\n\n// https://github.com/vercel/next.js/issues/56480\nexport function isCellEditableUtil<R, SR>(column: CalculatedColumn<R, SR>, row: R): boolean {\n  return (\n    column.renderEditCell != null &&\n    (typeof column.editable === 'function' ? column.editable(row) : column.editable) !== false\n  );\n}\n\ninterface GetNextSelectedCellPositionOpts<R, SR> {\n  moveUp: boolean;\n  moveNext: boolean;\n  cellNavigationMode: CellNavigationMode;\n  columns: readonly CalculatedColumn<R, SR>[];\n  colSpanColumns: readonly CalculatedColumn<R, SR>[];\n  rows: readonly R[];\n  topSummaryRows: Maybe<readonly SR[]>;\n  bottomSummaryRows: Maybe<readonly SR[]>;\n  minRowIdx: number;\n  mainHeaderRowIdx: number;\n  maxRowIdx: number;\n  currentPosition: Position;\n  nextPosition: Position;\n  lastFrozenColumnIndex: number;\n  isCellWithinBounds: (position: Position) => boolean;\n}\n\nfunction getSelectedCellColSpan<R, SR>({\n  rows,\n  topSummaryRows,\n  bottomSummaryRows,\n  rowIdx,\n  mainHeaderRowIdx,\n  lastFrozenColumnIndex,\n  column\n}: Pick<\n  GetNextSelectedCellPositionOpts<R, SR>,\n  'rows' | 'topSummaryRows' | 'bottomSummaryRows' | 'lastFrozenColumnIndex' | 'mainHeaderRowIdx'\n> & {\n  rowIdx: number;\n  column: CalculatedColumn<R, SR>;\n}) {\n  const topSummaryRowsCount = topSummaryRows?.length ?? 0;\n  if (rowIdx === mainHeaderRowIdx) {\n    return getColSpan(column, lastFrozenColumnIndex, { type: 'HEADER' });\n  }\n\n  if (\n    topSummaryRows &&\n    rowIdx > mainHeaderRowIdx &&\n    rowIdx <= topSummaryRowsCount + mainHeaderRowIdx\n  ) {\n    return getColSpan(column, lastFrozenColumnIndex, {\n      type: 'SUMMARY',\n      row: topSummaryRows[rowIdx + topSummaryRowsCount]\n    });\n  }\n\n  if (rowIdx >= 0 && rowIdx < rows.length) {\n    const row = rows[rowIdx];\n    return getColSpan(column, lastFrozenColumnIndex, { type: 'ROW', row });\n  }\n\n  if (bottomSummaryRows) {\n    return getColSpan(column, lastFrozenColumnIndex, {\n      type: 'SUMMARY',\n      row: bottomSummaryRows[rowIdx - rows.length]\n    });\n  }\n\n  return undefined;\n}\n\nexport function getNextSelectedCellPosition<R, SR>({\n  moveUp,\n  moveNext,\n  cellNavigationMode,\n  columns,\n  colSpanColumns,\n  rows,\n  topSummaryRows,\n  bottomSummaryRows,\n  minRowIdx,\n  mainHeaderRowIdx,\n  maxRowIdx,\n  currentPosition: { idx: currentIdx, rowIdx: currentRowIdx },\n  nextPosition,\n  lastFrozenColumnIndex,\n  isCellWithinBounds\n}: GetNextSelectedCellPositionOpts<R, SR>): Position {\n  let { idx: nextIdx, rowIdx: nextRowIdx } = nextPosition;\n  const columnsCount = columns.length;\n\n  const setColSpan = (moveNext: boolean) => {\n    // If a cell within the colspan range is selected then move to the\n    // previous or the next cell depending on the navigation direction\n    for (const column of colSpanColumns) {\n      const colIdx = column.idx;\n      if (colIdx > nextIdx) break;\n      const colSpan = getSelectedCellColSpan({\n        rows,\n        topSummaryRows,\n        bottomSummaryRows,\n        rowIdx: nextRowIdx,\n        mainHeaderRowIdx,\n        lastFrozenColumnIndex,\n        column\n      });\n\n      if (colSpan && nextIdx > colIdx && nextIdx < colSpan + colIdx) {\n        nextIdx = colIdx + (moveNext ? colSpan : 0);\n        break;\n      }\n    }\n  };\n\n  const getParentRowIdx = (parent: CalculatedColumnParent<R, SR>) => {\n    return parent.level + mainHeaderRowIdx;\n  };\n\n  const setHeaderGroupColAndRowSpan = () => {\n    if (moveNext) {\n      // find the parent at the same row level\n      const nextColumn = columns[nextIdx];\n      let parent = nextColumn.parent;\n      while (parent !== undefined) {\n        const parentRowIdx = getParentRowIdx(parent);\n        if (nextRowIdx === parentRowIdx) {\n          nextIdx = parent.idx + parent.colSpan;\n          break;\n        }\n        parent = parent.parent;\n      }\n    } else if (moveUp) {\n      // find the first reachable parent\n      const nextColumn = columns[nextIdx];\n      let parent = nextColumn.parent;\n      let found = false;\n      while (parent !== undefined) {\n        const parentRowIdx = getParentRowIdx(parent);\n        if (nextRowIdx >= parentRowIdx) {\n          nextIdx = parent.idx;\n          nextRowIdx = parentRowIdx;\n          found = true;\n          break;\n        }\n        parent = parent.parent;\n      }\n\n      // keep the current position if there is no parent matching the new row position\n      if (!found) {\n        nextIdx = currentIdx;\n        nextRowIdx = currentRowIdx;\n      }\n    }\n  };\n\n  if (isCellWithinBounds(nextPosition)) {\n    setColSpan(moveNext);\n\n    if (nextRowIdx < mainHeaderRowIdx) {\n      setHeaderGroupColAndRowSpan();\n    }\n  }\n\n  if (cellNavigationMode === 'CHANGE_ROW') {\n    const isAfterLastColumn = nextIdx === columnsCount;\n    const isBeforeFirstColumn = nextIdx === -1;\n\n    if (isAfterLastColumn) {\n      const isLastRow = nextRowIdx === maxRowIdx;\n      if (!isLastRow) {\n        nextIdx = 0;\n        nextRowIdx += 1;\n      }\n    } else if (isBeforeFirstColumn) {\n      const isFirstRow = nextRowIdx === minRowIdx;\n      if (!isFirstRow) {\n        nextRowIdx -= 1;\n        nextIdx = columnsCount - 1;\n      }\n      setColSpan(false);\n    }\n  }\n\n  if (nextRowIdx < mainHeaderRowIdx) {\n    // Find the last reachable parent for the new rowIdx\n    // This check is needed when navigating to a column\n    // that does not have a parent matching the new rowIdx\n    const nextColumn = columns[nextIdx];\n    let parent = nextColumn.parent;\n    const nextParentRowIdx = nextRowIdx;\n    nextRowIdx = mainHeaderRowIdx;\n    while (parent !== undefined) {\n      const parentRowIdx = getParentRowIdx(parent);\n      if (parentRowIdx >= nextParentRowIdx) {\n        nextRowIdx = parentRowIdx;\n        nextIdx = parent.idx;\n      }\n      parent = parent.parent;\n    }\n  }\n\n  return { idx: nextIdx, rowIdx: nextRowIdx };\n}\n\ninterface CanExitGridOpts {\n  maxColIdx: number;\n  minRowIdx: number;\n  maxRowIdx: number;\n  selectedPosition: Position;\n  shiftKey: boolean;\n}\n\nexport function canExitGrid({\n  maxColIdx,\n  minRowIdx,\n  maxRowIdx,\n  selectedPosition: { rowIdx, idx },\n  shiftKey\n}: CanExitGridOpts): boolean {\n  // Exit the grid if we're at the first or last cell of the grid\n  const atLastCellInRow = idx === maxColIdx;\n  const atFirstCellInRow = idx === 0;\n  const atLastRow = rowIdx === maxRowIdx;\n  const atFirstRow = rowIdx === minRowIdx;\n\n  return shiftKey ? atFirstCellInRow && atFirstRow : atLastCellInRow && atLastRow;\n}\n","import { css } from '@linaria/core';\n\nexport const cell = css`\n  @layer rdg.Cell {\n    /* max-content does not work with size containment\n     * dynamically switching between different containment styles incurs a heavy relayout penalty\n     * Chromium bug: at odd zoom levels or subpixel positioning,\n     * layout/paint/style containment can make cell borders disappear\n     *   https://bugs.chromium.org/p/chromium/issues/detail?id=1326946\n     */\n    position: relative; /* needed for absolute positioning to work */\n    padding-block: 0;\n    padding-inline: 8px;\n    border-inline-end: 1px solid var(--rdg-border-color);\n    border-block-end: 1px solid var(--rdg-border-color);\n    grid-row-start: var(--rdg-grid-row-start);\n    background-color: inherit;\n\n    white-space: nowrap;\n    overflow: clip;\n    text-overflow: ellipsis;\n    outline: none;\n\n    &[aria-selected='true'] {\n      outline: 2px solid var(--rdg-selection-color);\n      outline-offset: -2px;\n    }\n  }\n`;\n\nexport const cellClassname = `rdg-cell ${cell}`;\n\nexport const cellFrozen = css`\n  @layer rdg.Cell {\n    position: sticky;\n    /* Should have a higher value than 0 to show up above unfrozen cells */\n    z-index: 1;\n\n    /* Add box-shadow on the last frozen cell */\n    &:nth-last-child(1 of &) {\n      box-shadow: var(--rdg-cell-frozen-box-shadow);\n    }\n  }\n`;\n\nexport const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;\n","import type { CSSProperties } from 'react';\nimport clsx from 'clsx';\n\nimport type { CalculatedColumn, CalculatedColumnOrColumnGroup } from '../types';\nimport { cellClassname, cellFrozenClassname } from '../style/cell';\n\nexport function getRowStyle(rowIdx: number, height?: number): CSSProperties {\n  if (height !== undefined) {\n    return {\n      '--rdg-grid-row-start': rowIdx,\n      '--rdg-row-height': `${height}px`\n    } as unknown as CSSProperties;\n  }\n\n  return { '--rdg-grid-row-start': rowIdx } as unknown as CSSProperties;\n}\n\nexport function getHeaderCellStyle<R, SR>(\n  column: CalculatedColumnOrColumnGroup<R, SR>,\n  rowIdx: number,\n  rowSpan: number\n): React.CSSProperties {\n  const gridRowEnd = rowIdx + 1;\n  const paddingBlockStart = `calc(${rowSpan - 1} * var(--rdg-header-row-height))`;\n\n  if (column.parent === undefined) {\n    return {\n      insetBlockStart: 0,\n      gridRowStart: 1,\n      gridRowEnd,\n      paddingBlockStart\n    };\n  }\n\n  return {\n    insetBlockStart: `calc(${rowIdx - rowSpan} * var(--rdg-header-row-height))`,\n    gridRowStart: gridRowEnd - rowSpan,\n    gridRowEnd,\n    paddingBlockStart\n  };\n}\n\nexport function getCellStyle<R, SR>(\n  column: CalculatedColumn<R, SR>,\n  colSpan = 1\n): React.CSSProperties {\n  const index = column.idx + 1;\n  return {\n    gridColumnStart: index,\n    gridColumnEnd: index + colSpan,\n    insetInlineStart: column.frozen ? `var(--rdg-frozen-left-${column.idx})` : undefined\n  };\n}\n\nexport function getCellClassname<R, SR>(\n  column: CalculatedColumn<R, SR>,\n  ...extraClasses: Parameters<typeof clsx>\n): string {\n  return clsx(\n    cellClassname,\n    {\n      [cellFrozenClassname]: column.frozen\n    },\n    ...extraClasses\n  );\n}\n","import type { CalculatedColumn, CalculatedColumnOrColumnGroup } from '../types';\n\nexport * from './colSpanUtils';\nexport * from './domUtils';\nexport * from './eventUtils';\nexport * from './keyboardUtils';\nexport * from './renderMeasuringCells';\nexport * from './selectedCellUtils';\nexport * from './styleUtils';\n\nexport const { min, max, floor, sign, abs } = Math;\n\nexport function assertIsValidKeyGetter<R, K extends React.Key>(\n  keyGetter: unknown\n): asserts keyGetter is (row: R) => K {\n  if (typeof keyGetter !== 'function') {\n    throw new Error('Please specify the rowKeyGetter prop to use selection');\n  }\n}\n\nexport function clampColumnWidth<R, SR>(\n  width: number,\n  { minWidth, maxWidth }: CalculatedColumn<R, SR>\n): number {\n  width = max(width, minWidth);\n\n  // ignore maxWidth if it less than minWidth\n  if (typeof maxWidth === 'number' && maxWidth >= minWidth) {\n    return min(width, maxWidth);\n  }\n\n  return width;\n}\n\nexport function getHeaderCellRowSpan<R, SR>(\n  column: CalculatedColumnOrColumnGroup<R, SR>,\n  rowIdx: number\n) {\n  return column.parent === undefined ? rowIdx : column.level - column.parent.level;\n}\n","import { css } from '@linaria/core';\nimport clsx from 'clsx';\n\nimport type { RenderCheckboxProps } from '../types';\n\nconst checkboxLabel = css`\n  @layer rdg.CheckboxLabel {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    inset: 0;\n    margin-inline-end: 1px; /* align checkbox in row group cell */\n  }\n`;\n\nconst checkboxLabelClassname = `rdg-checkbox-label ${checkboxLabel}`;\n\nconst checkboxInput = css`\n  @layer rdg.CheckboxInput {\n    all: unset;\n  }\n`;\n\nconst checkboxInputClassname = `rdg-checkbox-input ${checkboxInput}`;\n\nconst checkbox = css`\n  @layer rdg.CheckboxIcon {\n    content: '';\n    inline-size: 20px;\n    block-size: 20px;\n    border: 2px solid var(--rdg-border-color);\n    background-color: var(--rdg-background-color);\n\n    .${checkboxInput}:checked + & {\n      background-color: var(--rdg-checkbox-color);\n      outline: 4px solid var(--rdg-background-color);\n      outline-offset: -6px;\n    }\n\n    .${checkboxInput}:focus + & {\n      border-color: var(--rdg-checkbox-focus-color);\n    }\n  }\n`;\n\nconst checkboxClassname = `rdg-checkbox ${checkbox}`;\n\nconst checkboxLabelDisabled = css`\n  @layer rdg.CheckboxLabel {\n    cursor: default;\n\n    .${checkbox} {\n      border-color: var(--rdg-checkbox-disabled-border-color);\n      background-color: var(--rdg-checkbox-disabled-background-color);\n    }\n  }\n`;\n\nconst checkboxLabelDisabledClassname = `rdg-checkbox-label-disabled ${checkboxLabelDisabled}`;\n\nexport function renderCheckbox({ onChange, ...props }: RenderCheckboxProps) {\n  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    onChange(e.target.checked, (e.nativeEvent as MouseEvent).shiftKey);\n  }\n\n  return (\n    <label\n      className={clsx(checkboxLabelClassname, {\n        [checkboxLabelDisabledClassname]: props.disabled\n      })}\n    >\n      <input\n        type=\"checkbox\"\n        {...props}\n        className={checkboxInputClassname}\n        onChange={handleChange}\n      />\n      <div className={checkboxClassname} />\n    </label>\n  );\n}\n","import { css } from '@linaria/core';\n\nimport type { RenderGroupCellProps } from '../types';\n\nconst groupCellContent = css`\n  @layer rdg.GroupCellContent {\n    outline: none;\n  }\n`;\n\nconst groupCellContentClassname = `rdg-group-cell-content ${groupCellContent}`;\n\nconst caret = css`\n  @layer rdg.GroupCellCaret {\n    margin-inline-start: 4px;\n    stroke: currentColor;\n    stroke-width: 1.5px;\n    fill: transparent;\n    vertical-align: middle;\n\n    > path {\n      transition: d 0.1s;\n    }\n  }\n`;\n\nconst caretClassname = `rdg-caret ${caret}`;\n\nexport function renderToggleGroup<R, SR>(props: RenderGroupCellProps<R, SR>) {\n  return <ToggleGroup {...props} />;\n}\n\nexport function ToggleGroup<R, SR>({\n  groupKey,\n  isExpanded,\n  tabIndex,\n  toggleGroup\n}: RenderGroupCellProps<R, SR>) {\n  function handleKeyDown({ key }: React.KeyboardEvent<HTMLSpanElement>) {\n    if (key === 'Enter') {\n      toggleGroup();\n    }\n  }\n\n  const d = isExpanded ? 'M1 1 L 7 7 L 13 1' : 'M1 7 L 7 1 L 13 7';\n\n  return (\n    <span className={groupCellContentClassname} tabIndex={tabIndex} onKeyDown={handleKeyDown}>\n      {groupKey as string}\n      <svg viewBox=\"0 0 14 8\" width=\"14\" height=\"8\" className={caretClassname} aria-hidden>\n        <path d={d} />\n      </svg>\n    </span>\n  );\n}\n","import type { RenderCellProps } from '../types';\n\nexport function renderValue<R, SR>(props: RenderCellProps<R, SR>) {\n  try {\n    return props.row[props.column.key as keyof R] as React.ReactNode;\n  } catch {\n    return null;\n  }\n}\n","import { createContext, useContext } from 'react';\n\nimport type { Maybe, Renderers } from './types';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst DataGridDefaultRenderersContext = createContext<Maybe<Renderers<any, any>>>(undefined);\n\nexport const DataGridDefaultRenderersProvider = DataGridDefaultRenderersContext.Provider;\n\nexport function useDefaultRenderers<R, SR>(): Maybe<Renderers<R, SR>> {\n  return useContext(DataGridDefaultRenderersContext);\n}\n","import type { RenderCheckboxProps } from '../types';\nimport { useDefaultRenderers } from '../DataGridDefaultRenderersProvider';\n\ntype SharedInputProps = Pick<\n  RenderCheckboxProps,\n  'disabled' | 'tabIndex' | 'aria-label' | 'aria-labelledby'\n>;\n\ninterface SelectCellFormatterProps extends SharedInputProps {\n  value: boolean;\n  onChange: (value: boolean, isShiftClick: boolean) => void;\n}\n\nexport function SelectCellFormatter({\n  value,\n  tabIndex,\n  disabled,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy\n}: SelectCellFormatterProps) {\n  const renderCheckbox = useDefaultRenderers()!.renderCheckbox!;\n\n  return renderCheckbox({\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    tabIndex,\n    disabled,\n    checked: value,\n    onChange\n  });\n}\n","import { createContext, useContext } from 'react';\n\nimport type { SelectRowEvent } from '../types';\n\nconst RowSelectionContext = createContext<boolean | undefined>(undefined);\n\nexport const RowSelectionProvider = RowSelectionContext.Provider;\n\nconst RowSelectionChangeContext = createContext<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ((selectRowEvent: SelectRowEvent<any>) => void) | undefined\n>(undefined);\n\nexport const RowSelectionChangeProvider = RowSelectionChangeContext.Provider;\n\nexport function useRowSelection<R>(): [boolean, (selectRowEvent: SelectRowEvent<R>) => void] {\n  const rowSelectionContext = useContext(RowSelectionContext);\n  const rowSelectionChangeContext = useContext(RowSelectionChangeContext);\n\n  if (rowSelectionContext === undefined || rowSelectionChangeContext === undefined) {\n    throw new Error('useRowSelection must be used within DataGrid cells');\n  }\n\n  return [rowSelectionContext, rowSelectionChangeContext];\n}\n","import { useRowSelection } from './hooks/useRowSelection';\nimport type { Column, RenderCellProps, RenderGroupCellProps, RenderHeaderCellProps } from './types';\nimport { SelectCellFormatter } from './cellRenderers';\n\nexport const SELECT_COLUMN_KEY = 'select-row';\n\nfunction HeaderRenderer(props: RenderHeaderCellProps<unknown>) {\n  const [isRowSelected, onRowSelectionChange] = useRowSelection();\n\n  return (\n    <SelectCellFormatter\n      aria-label=\"Select All\"\n      tabIndex={props.tabIndex}\n      value={isRowSelected}\n      onChange={(checked) => {\n        onRowSelectionChange({ type: 'HEADER', checked });\n      }}\n    />\n  );\n}\n\nfunction SelectFormatter(props: RenderCellProps<unknown>) {\n  const [isRowSelected, onRowSelectionChange] = useRowSelection();\n\n  return (\n    <SelectCellFormatter\n      aria-label=\"Select\"\n      tabIndex={props.tabIndex}\n      value={isRowSelected}\n      onChange={(checked, isShiftClick) => {\n        onRowSelectionChange({ type: 'ROW', row: props.row, checked, isShiftClick });\n      }}\n    />\n  );\n}\n\nfunction SelectGroupFormatter(props: RenderGroupCellProps<unknown>) {\n  const [isRowSelected, onRowSelectionChange] = useRowSelection();\n\n  return (\n    <SelectCellFormatter\n      aria-label=\"Select Group\"\n      tabIndex={props.tabIndex}\n      value={isRowSelected}\n      onChange={(checked) => {\n        onRowSelectionChange({ type: 'ROW', row: props.row, checked, isShiftClick: false });\n      }}\n    />\n  );\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const SelectColumn: Column<any, any> = {\n  key: SELECT_COLUMN_KEY,\n  name: '',\n  width: 35,\n  minWidth: 35,\n  maxWidth: 35,\n  resizable: false,\n  sortable: false,\n  frozen: true,\n  renderHeaderCell(props) {\n    return <HeaderRenderer {...props} />;\n  },\n  renderCell(props) {\n    return <SelectFormatter {...props} />;\n  },\n  renderGroupCell(props) {\n    return <SelectGroupFormatter {...props} />;\n  }\n};\n","import { useMemo } from 'react';\n\nimport { clampColumnWidth, max, min } from '../utils';\nimport type { CalculatedColumn, CalculatedColumnParent, ColumnOrColumnGroup, Omit } from '../types';\nimport { renderValue } from '../cellRenderers';\nimport { SELECT_COLUMN_KEY } from '../Columns';\nimport type { DataGridProps } from '../DataGrid';\n\ntype Mutable<T> = {\n  -readonly [P in keyof T]: T[P] extends ReadonlyArray<infer V> ? Mutable<V>[] : T[P];\n};\n\ninterface WithParent<R, SR> {\n  readonly parent: MutableCalculatedColumnParent<R, SR> | undefined;\n}\n\ntype MutableCalculatedColumnParent<R, SR> = Omit<Mutable<CalculatedColumnParent<R, SR>>, 'parent'> &\n  WithParent<R, SR>;\ntype MutableCalculatedColumn<R, SR> = Omit<Mutable<CalculatedColumn<R, SR>>, 'parent'> &\n  WithParent<R, SR>;\n\ninterface ColumnMetric {\n  width: number;\n  left: number;\n}\n\nconst DEFAULT_COLUMN_WIDTH = 'auto';\nconst DEFAULT_COLUMN_MIN_WIDTH = 50;\n\ninterface CalculatedColumnsArgs<R, SR> {\n  rawColumns: readonly ColumnOrColumnGroup<R, SR>[];\n  defaultColumnOptions: DataGridProps<R, SR>['defaultColumnOptions'];\n  viewportWidth: number;\n  scrollLeft: number;\n  getColumnWidth: (column: CalculatedColumn<R, SR>) => string | number;\n  enableVirtualization: boolean;\n}\n\nexport function useCalculatedColumns<R, SR>({\n  rawColumns,\n  defaultColumnOptions,\n  getColumnWidth,\n  viewportWidth,\n  scrollLeft,\n  enableVirtualization\n}: CalculatedColumnsArgs<R, SR>) {\n  const defaultWidth = defaultColumnOptions?.width ?? DEFAULT_COLUMN_WIDTH;\n  const defaultMinWidth = defaultColumnOptions?.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH;\n  const defaultMaxWidth = defaultColumnOptions?.maxWidth ?? undefined;\n  const defaultCellRenderer = defaultColumnOptions?.renderCell ?? renderValue;\n  const defaultSortable = defaultColumnOptions?.sortable ?? false;\n  const defaultResizable = defaultColumnOptions?.resizable ?? false;\n  const defaultDraggable = defaultColumnOptions?.draggable ?? false;\n\n  const { columns, colSpanColumns, lastFrozenColumnIndex, headerRowsCount } = useMemo((): {\n    readonly columns: readonly CalculatedColumn<R, SR>[];\n    readonly colSpanColumns: readonly CalculatedColumn<R, SR>[];\n    readonly lastFrozenColumnIndex: number;\n    readonly headerRowsCount: number;\n  } => {\n    let lastFrozenColumnIndex = -1;\n    let headerRowsCount = 1;\n    const columns: MutableCalculatedColumn<R, SR>[] = [];\n\n    collectColumns(rawColumns, 1);\n\n    function collectColumns(\n      rawColumns: readonly ColumnOrColumnGroup<R, SR>[],\n      level: number,\n      parent?: MutableCalculatedColumnParent<R, SR>\n    ) {\n      for (const rawColumn of rawColumns) {\n        if ('children' in rawColumn) {\n          const calculatedColumnParent: MutableCalculatedColumnParent<R, SR> = {\n            name: rawColumn.name,\n            parent,\n            idx: -1,\n            colSpan: 0,\n            level: 0,\n            headerCellClass: rawColumn.headerCellClass\n          };\n\n          collectColumns(rawColumn.children, level + 1, calculatedColumnParent);\n          continue;\n        }\n\n        const frozen = rawColumn.frozen ?? false;\n\n        const column: MutableCalculatedColumn<R, SR> = {\n          ...rawColumn,\n          parent,\n          idx: 0,\n          level: 0,\n          frozen,\n          width: rawColumn.width ?? defaultWidth,\n          minWidth: rawColumn.minWidth ?? defaultMinWidth,\n          maxWidth: rawColumn.maxWidth ?? defaultMaxWidth,\n          sortable: rawColumn.sortable ?? defaultSortable,\n          resizable: rawColumn.resizable ?? defaultResizable,\n          draggable: rawColumn.draggable ?? defaultDraggable,\n          renderCell: rawColumn.renderCell ?? defaultCellRenderer\n        };\n\n        columns.push(column);\n\n        if (frozen) {\n          lastFrozenColumnIndex++;\n        }\n\n        if (level > headerRowsCount) {\n          headerRowsCount = level;\n        }\n      }\n    }\n\n    columns.sort(({ key: aKey, frozen: frozenA }, { key: bKey, frozen: frozenB }) => {\n      // Sort select column first:\n      if (aKey === SELECT_COLUMN_KEY) return -1;\n      if (bKey === SELECT_COLUMN_KEY) return 1;\n\n      // Sort frozen columns second:\n      if (frozenA) {\n        if (frozenB) return 0;\n        return -1;\n      }\n      if (frozenB) return 1;\n\n      // TODO: sort columns to keep them grouped if they have a parent\n\n      // Sort other columns last:\n      return 0;\n    });\n\n    const colSpanColumns: CalculatedColumn<R, SR>[] = [];\n    columns.forEach((column, idx) => {\n      column.idx = idx;\n      updateColumnParent(column, idx, 0);\n\n      if (column.colSpan != null) {\n        colSpanColumns.push(column);\n      }\n    });\n\n    return {\n      columns,\n      colSpanColumns,\n      lastFrozenColumnIndex,\n      headerRowsCount\n    };\n  }, [\n    rawColumns,\n    defaultWidth,\n    defaultMinWidth,\n    defaultMaxWidth,\n    defaultCellRenderer,\n    defaultResizable,\n    defaultSortable,\n    defaultDraggable\n  ]);\n\n  const { templateColumns, layoutCssVars, totalFrozenColumnWidth, columnMetrics } = useMemo((): {\n    templateColumns: readonly string[];\n    layoutCssVars: Readonly<Record<string, string>>;\n    totalFrozenColumnWidth: number;\n    columnMetrics: ReadonlyMap<CalculatedColumn<R, SR>, ColumnMetric>;\n  } => {\n    const columnMetrics = new Map<CalculatedColumn<R, SR>, ColumnMetric>();\n    let left = 0;\n    let totalFrozenColumnWidth = 0;\n    const templateColumns: string[] = [];\n\n    for (const column of columns) {\n      let width = getColumnWidth(column);\n\n      if (typeof width === 'number') {\n        width = clampColumnWidth(width, column);\n      } else {\n        // This is a placeholder width so we can continue to use virtualization.\n        // The actual value is set after the column is rendered\n        width = column.minWidth;\n      }\n      templateColumns.push(`${width}px`);\n      columnMetrics.set(column, { width, left });\n      left += width;\n    }\n\n    if (lastFrozenColumnIndex !== -1) {\n      const columnMetric = columnMetrics.get(columns[lastFrozenColumnIndex])!;\n      totalFrozenColumnWidth = columnMetric.left + columnMetric.width;\n    }\n\n    const layoutCssVars: Record<string, string> = {};\n\n    for (let i = 0; i <= lastFrozenColumnIndex; i++) {\n      const column = columns[i];\n      layoutCssVars[`--rdg-frozen-left-${column.idx}`] = `${columnMetrics.get(column)!.left}px`;\n    }\n\n    return { templateColumns, layoutCssVars, totalFrozenColumnWidth, columnMetrics };\n  }, [getColumnWidth, columns, lastFrozenColumnIndex]);\n\n  const [colOverscanStartIdx, colOverscanEndIdx] = useMemo((): [number, number] => {\n    if (!enableVirtualization) {\n      return [0, columns.length - 1];\n    }\n    // get the viewport's left side and right side positions for non-frozen columns\n    const viewportLeft = scrollLeft + totalFrozenColumnWidth;\n    const viewportRight = scrollLeft + viewportWidth;\n    // get first and last non-frozen column indexes\n    const lastColIdx = columns.length - 1;\n    const firstUnfrozenColumnIdx = min(lastFrozenColumnIndex + 1, lastColIdx);\n\n    // skip rendering non-frozen columns if the frozen columns cover the entire viewport\n    if (viewportLeft >= viewportRight) {\n      return [firstUnfrozenColumnIdx, firstUnfrozenColumnIdx];\n    }\n\n    // get the first visible non-frozen column index\n    let colVisibleStartIdx = firstUnfrozenColumnIdx;\n    while (colVisibleStartIdx < lastColIdx) {\n      const { left, width } = columnMetrics.get(columns[colVisibleStartIdx])!;\n      // if the right side of the columnn is beyond the left side of the available viewport,\n      // then it is the first column that's at least partially visible\n      if (left + width > viewportLeft) {\n        break;\n      }\n      colVisibleStartIdx++;\n    }\n\n    // get the last visible non-frozen column index\n    let colVisibleEndIdx = colVisibleStartIdx;\n    while (colVisibleEndIdx < lastColIdx) {\n      const { left, width } = columnMetrics.get(columns[colVisibleEndIdx])!;\n      // if the right side of the column is beyond or equal to the right side of the available viewport,\n      // then it the last column that's at least partially visible, as the previous column's right side is not beyond the viewport.\n      if (left + width >= viewportRight) {\n        break;\n      }\n      colVisibleEndIdx++;\n    }\n\n    const colOverscanStartIdx = max(firstUnfrozenColumnIdx, colVisibleStartIdx - 1);\n    const colOverscanEndIdx = min(lastColIdx, colVisibleEndIdx + 1);\n\n    return [colOverscanStartIdx, colOverscanEndIdx];\n  }, [\n    columnMetrics,\n    columns,\n    lastFrozenColumnIndex,\n    scrollLeft,\n    totalFrozenColumnWidth,\n    viewportWidth,\n    enableVirtualization\n  ]);\n\n  return {\n    columns,\n    colSpanColumns,\n    colOverscanStartIdx,\n    colOverscanEndIdx,\n    templateColumns,\n    layoutCssVars,\n    headerRowsCount,\n    lastFrozenColumnIndex,\n    totalFrozenColumnWidth\n  };\n}\n\nfunction updateColumnParent<R, SR>(\n  column: MutableCalculatedColumn<R, SR> | MutableCalculatedColumnParent<R, SR>,\n  index: number,\n  level: number\n) {\n  if (level < column.level) {\n    column.level = level;\n  }\n\n  if (column.parent !== undefined) {\n    const { parent } = column;\n    if (parent.idx === -1) {\n      parent.idx = index;\n    }\n    parent.colSpan += 1;\n    updateColumnParent(parent, index, level - 1);\n  }\n}\n","// eslint-disable-next-line @typescript-eslint/no-restricted-imports\nimport { useEffect, useLayoutEffect as useOriginalLayoutEffect } from 'react';\n\n// Silence silly warning\n// https://reactjs.org/link/uselayouteffect-ssr\nexport const useLayoutEffect = typeof window === 'undefined' ? useEffect : useOriginalLayoutEffect;\n","import { useRef } from 'react';\nimport { flushSync } from 'react-dom';\n\nimport type { CalculatedColumn, StateSetter } from '../types';\nimport { useLayoutEffect } from './useLayoutEffect';\nimport type { DataGridProps } from '../DataGrid';\n\nexport function useColumnWidths<R, SR>(\n  columns: readonly CalculatedColumn<R, SR>[],\n  viewportColumns: readonly CalculatedColumn<R, SR>[],\n  templateColumns: readonly string[],\n  gridRef: React.RefObject<HTMLDivElement>,\n  gridWidth: number,\n  resizedColumnWidths: ReadonlyMap<string, number>,\n  measuredColumnWidths: ReadonlyMap<string, number>,\n  setResizedColumnWidths: StateSetter<ReadonlyMap<string, number>>,\n  setMeasuredColumnWidths: StateSetter<ReadonlyMap<string, number>>,\n  onColumnResize: DataGridProps<R, SR>['onColumnResize']\n) {\n  const prevGridWidthRef = useRef(gridWidth);\n  const columnsCanFlex: boolean = columns.length === viewportColumns.length;\n  // Allow columns to flex again when...\n  const ignorePreviouslyMeasuredColumns: boolean =\n    // there is enough space for columns to flex and the grid was resized\n    columnsCanFlex && gridWidth !== prevGridWidthRef.current;\n  const newTemplateColumns = [...templateColumns];\n  const columnsToMeasure: string[] = [];\n\n  for (const { key, idx, width } of viewportColumns) {\n    if (\n      typeof width === 'string' &&\n      (ignorePreviouslyMeasuredColumns || !measuredColumnWidths.has(key)) &&\n      !resizedColumnWidths.has(key)\n    ) {\n      newTemplateColumns[idx] = width;\n      columnsToMeasure.push(key);\n    }\n  }\n\n  const gridTemplateColumns = newTemplateColumns.join(' ');\n\n  useLayoutEffect(() => {\n    prevGridWidthRef.current = gridWidth;\n    updateMeasuredWidths(columnsToMeasure);\n  });\n\n  function updateMeasuredWidths(columnsToMeasure: readonly string[]) {\n    if (columnsToMeasure.length === 0) return;\n\n    setMeasuredColumnWidths((measuredColumnWidths) => {\n      const newMeasuredColumnWidths = new Map(measuredColumnWidths);\n      let hasChanges = false;\n\n      for (const key of columnsToMeasure) {\n        const measuredWidth = measureColumnWidth(gridRef, key);\n        hasChanges ||= measuredWidth !== measuredColumnWidths.get(key);\n        if (measuredWidth === undefined) {\n          newMeasuredColumnWidths.delete(key);\n        } else {\n          newMeasuredColumnWidths.set(key, measuredWidth);\n        }\n      }\n\n      return hasChanges ? newMeasuredColumnWidths : measuredColumnWidths;\n    });\n  }\n\n  function handleColumnResize(column: CalculatedColumn<R, SR>, nextWidth: number | 'max-content') {\n    const { key: resizingKey } = column;\n    const newTemplateColumns = [...templateColumns];\n    const columnsToMeasure: string[] = [];\n\n    for (const { key, idx, width } of viewportColumns) {\n      if (resizingKey === key) {\n        const width = typeof nextWidth === 'number' ? `${nextWidth}px` : nextWidth;\n        newTemplateColumns[idx] = width;\n      } else if (columnsCanFlex && typeof width === 'string' && !resizedColumnWidths.has(key)) {\n        newTemplateColumns[idx] = width;\n        columnsToMeasure.push(key);\n      }\n    }\n\n    gridRef.current!.style.gridTemplateColumns = newTemplateColumns.join(' ');\n    const measuredWidth =\n      typeof nextWidth === 'number' ? nextWidth : measureColumnWidth(gridRef, resizingKey)!;\n\n    // TODO: remove\n    // need flushSync to keep frozen column offsets in sync\n    // we may be able to use `startTransition` or even `requestIdleCallback` instead\n    flushSync(() => {\n      setResizedColumnWidths((resizedColumnWidths) => {\n        const newResizedColumnWidths = new Map(resizedColumnWidths);\n        newResizedColumnWidths.set(resizingKey, measuredWidth);\n        return newResizedColumnWidths;\n      });\n      updateMeasuredWidths(columnsToMeasure);\n    });\n\n    onColumnResize?.(column.idx, measuredWidth);\n  }\n\n  return {\n    gridTemplateColumns,\n    handleColumnResize\n  } as const;\n}\n\nfunction measureColumnWidth(gridRef: React.RefObject<HTMLDivElement>, key: string) {\n  const selector = `[data-measuring-cell-key=\"${CSS.escape(key)}\"]`;\n  const measuringCell = gridRef.current!.querySelector(selector);\n  return measuringCell?.getBoundingClientRect().width;\n}\n","import { useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\n\nimport { useLayoutEffect } from './useLayoutEffect';\n\nexport function useGridDimensions() {\n  const gridRef = useRef<HTMLDivElement>(null);\n  const [inlineSize, setInlineSize] = useState(1);\n  const [blockSize, setBlockSize] = useState(1);\n  const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = useState(0);\n\n  useLayoutEffect(() => {\n    const { ResizeObserver } = window;\n\n    // don't break in Node.js (SSR), jsdom, and browsers that don't support ResizeObserver\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (ResizeObserver == null) return;\n\n    const { clientWidth, clientHeight, offsetWidth, offsetHeight } = gridRef.current!;\n    const { width, height } = gridRef.current!.getBoundingClientRect();\n    const initialHorizontalScrollbarHeight = offsetHeight - clientHeight;\n    const initialWidth = width - offsetWidth + clientWidth;\n    const initialHeight = height - initialHorizontalScrollbarHeight;\n\n    setInlineSize(initialWidth);\n    setBlockSize(initialHeight);\n    setHorizontalScrollbarHeight(initialHorizontalScrollbarHeight);\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const size = entries[0].contentBoxSize[0];\n      const { clientHeight, offsetHeight } = gridRef.current!;\n\n      // we use flushSync here to avoid flashing scrollbars\n      flushSync(() => {\n        setInlineSize(size.inlineSize);\n        setBlockSize(size.blockSize);\n        setHorizontalScrollbarHeight(offsetHeight - clientHeight);\n      });\n    });\n    resizeObserver.observe(gridRef.current!);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  return [gridRef, inlineSize, blockSize, horizontalScrollbarHeight] as const;\n}\n","import { useCallback, useEffect, useRef } from 'react';\n\nimport type { Maybe } from '../types';\n\n// https://reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useLatestFunc<T extends Maybe<(...args: any[]) => any>>(fn: T): T {\n  const ref = useRef(fn);\n\n  useEffect(() => {\n    ref.current = fn;\n  });\n\n  const callbackFn = useCallback((...args: Parameters<NonNullable<T>>) => {\n    ref.current!(...args);\n  }, []);\n\n  // @ts-expect-error\n  return fn ? callbackFn : fn;\n}\n","import { useState } from 'react';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex\nexport function useRovingTabIndex(isSelected: boolean) {\n  // https://www.w3.org/TR/wai-aria-practices-1.1/#gridNav_focus\n  const [isChildFocused, setIsChildFocused] = useState(false);\n\n  if (isChildFocused && !isSelected) {\n    setIsChildFocused(false);\n  }\n\n  function onFocus(event: React.FocusEvent<HTMLDivElement>) {\n    if (event.target !== event.currentTarget) {\n      setIsChildFocused(true);\n    }\n  }\n\n  const isFocusable = isSelected && !isChildFocused;\n\n  return {\n    tabIndex: isFocusable ? 0 : -1,\n    childTabIndex: isSelected ? 0 : -1,\n    onFocus: isSelected ? onFocus : undefined\n  };\n}\n","import { useMemo } from 'react';\n\nimport { getColSpan } from '../utils';\nimport type { CalculatedColumn, Maybe } from '../types';\n\ninterface ViewportColumnsArgs<R, SR> {\n  columns: readonly CalculatedColumn<R, SR>[];\n  colSpanColumns: readonly CalculatedColumn<R, SR>[];\n  rows: readonly R[];\n  topSummaryRows: Maybe<readonly SR[]>;\n  bottomSummaryRows: Maybe<readonly SR[]>;\n  colOverscanStartIdx: number;\n  colOverscanEndIdx: number;\n  lastFrozenColumnIndex: number;\n  rowOverscanStartIdx: number;\n  rowOverscanEndIdx: number;\n}\n\nexport function useViewportColumns<R, SR>({\n  columns,\n  colSpanColumns,\n  rows,\n  topSummaryRows,\n  bottomSummaryRows,\n  colOverscanStartIdx,\n  colOverscanEndIdx,\n  lastFrozenColumnIndex,\n  rowOverscanStartIdx,\n  rowOverscanEndIdx\n}: ViewportColumnsArgs<R, SR>) {\n  // find the column that spans over a column within the visible columns range and adjust colOverscanStartIdx\n  const startIdx = useMemo(() => {\n    if (colOverscanStartIdx === 0) return 0;\n\n    let startIdx = colOverscanStartIdx;\n\n    const updateStartIdx = (colIdx: number, colSpan: number | undefined) => {\n      if (colSpan !== undefined && colIdx + colSpan > colOverscanStartIdx) {\n        startIdx = colIdx;\n        return true;\n      }\n      return false;\n    };\n\n    for (const column of colSpanColumns) {\n      // check header row\n      const colIdx = column.idx;\n      if (colIdx >= startIdx) break;\n      if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, { type: 'HEADER' }))) {\n        break;\n      }\n\n      // check viewport rows\n      for (let rowIdx = rowOverscanStartIdx; rowIdx <= rowOverscanEndIdx; rowIdx++) {\n        const row = rows[rowIdx];\n        if (\n          updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, { type: 'ROW', row }))\n        ) {\n          break;\n        }\n      }\n\n      // check summary rows\n      if (topSummaryRows != null) {\n        for (const row of topSummaryRows) {\n          if (\n            updateStartIdx(\n              colIdx,\n              getColSpan(column, lastFrozenColumnIndex, { type: 'SUMMARY', row })\n            )\n          ) {\n            break;\n          }\n        }\n      }\n\n      if (bottomSummaryRows != null) {\n        for (const row of bottomSummaryRows) {\n          if (\n            updateStartIdx(\n              colIdx,\n              getColSpan(column, lastFrozenColumnIndex, { type: 'SUMMARY', row })\n            )\n          ) {\n            break;\n          }\n        }\n      }\n    }\n\n    return startIdx;\n  }, [\n    rowOverscanStartIdx,\n    rowOverscanEndIdx,\n    rows,\n    topSummaryRows,\n    bottomSummaryRows,\n    colOverscanStartIdx,\n    lastFrozenColumnIndex,\n    colSpanColumns\n  ]);\n\n  return useMemo((): readonly CalculatedColumn<R, SR>[] => {\n    const viewportColumns: CalculatedColumn<R, SR>[] = [];\n    for (let colIdx = 0; colIdx <= colOverscanEndIdx; colIdx++) {\n      const column = columns[colIdx];\n\n      if (colIdx < startIdx && !column.frozen) continue;\n      viewportColumns.push(column);\n    }\n\n    return viewportColumns;\n  }, [startIdx, colOverscanEndIdx, columns]);\n}\n","import { useMemo } from 'react';\n\nimport { floor, max, min } from '../utils';\n\ninterface ViewportRowsArgs<R> {\n  rows: readonly R[];\n  rowHeight: number | ((row: R) => number);\n  clientHeight: number;\n  scrollTop: number;\n  enableVirtualization: boolean;\n}\n\nexport function useViewportRows<R>({\n  rows,\n  rowHeight,\n  clientHeight,\n  scrollTop,\n  enableVirtualization\n}: ViewportRowsArgs<R>) {\n  const { totalRowHeight, gridTemplateRows, getRowTop, getRowHeight, findRowIdx } = useMemo(() => {\n    if (typeof rowHeight === 'number') {\n      return {\n        totalRowHeight: rowHeight * rows.length,\n        gridTemplateRows: ` repeat(${rows.length}, ${rowHeight}px)`,\n        getRowTop: (rowIdx: number) => rowIdx * rowHeight,\n        getRowHeight: () => rowHeight,\n        findRowIdx: (offset: number) => floor(offset / rowHeight)\n      };\n    }\n\n    let totalRowHeight = 0;\n    let gridTemplateRows = ' ';\n    // Calcule the height of all the rows upfront. This can cause performance issues\n    // and we can consider using a similar approach as react-window\n    // https://github.com/bvaughn/react-window/blob/b0a470cc264e9100afcaa1b78ed59d88f7914ad4/src/VariableSizeList.js#L68\n    const rowPositions = rows.map((row) => {\n      const currentRowHeight = rowHeight(row);\n      const position = { top: totalRowHeight, height: currentRowHeight };\n      gridTemplateRows += `${currentRowHeight}px `;\n      totalRowHeight += currentRowHeight;\n      return position;\n    });\n\n    const validateRowIdx = (rowIdx: number) => {\n      return max(0, min(rows.length - 1, rowIdx));\n    };\n\n    return {\n      totalRowHeight,\n      gridTemplateRows,\n      getRowTop: (rowIdx: number) => rowPositions[validateRowIdx(rowIdx)].top,\n      getRowHeight: (rowIdx: number) => rowPositions[validateRowIdx(rowIdx)].height,\n      findRowIdx(offset: number) {\n        let start = 0;\n        let end = rowPositions.length - 1;\n        while (start <= end) {\n          const middle = start + floor((end - start) / 2);\n          const currentOffset = rowPositions[middle].top;\n\n          if (currentOffset === offset) return middle;\n\n          if (currentOffset < offset) {\n            start = middle + 1;\n          } else if (currentOffset > offset) {\n            end = middle - 1;\n          }\n\n          if (start > end) return end;\n        }\n        return 0;\n      }\n    };\n  }, [rowHeight, rows]);\n\n  let rowOverscanStartIdx = 0;\n  let rowOverscanEndIdx = rows.length - 1;\n\n  if (enableVirtualization) {\n    const overscanThreshold = 4;\n    const rowVisibleStartIdx = findRowIdx(scrollTop);\n    const rowVisibleEndIdx = findRowIdx(scrollTop + clientHeight);\n    rowOverscanStartIdx = max(0, rowVisibleStartIdx - overscanThreshold);\n    rowOverscanEndIdx = min(rows.length - 1, rowVisibleEndIdx + overscanThreshold);\n  }\n\n  return {\n    rowOverscanStartIdx,\n    rowOverscanEndIdx,\n    totalRowHeight,\n    gridTemplateRows,\n    getRowTop,\n    getRowHeight,\n    findRowIdx\n  };\n}\n","import { css } from '@linaria/core';\nimport clsx from 'clsx';\n\nimport { getCellStyle } from './utils';\nimport type { CalculatedColumn, FillEvent, Position } from './types';\nimport type { DataGridProps, SelectCellState } from './DataGrid';\n\nconst cellDragHandle = css`\n  @layer rdg.DragHandle {\n    --rdg-drag-handle-size: 8px;\n    z-index: 0;\n    cursor: move;\n    inline-size: var(--rdg-drag-handle-size);\n    block-size: var(--rdg-drag-handle-size);\n    background-color: var(--rdg-selection-color);\n    place-self: end;\n\n    &:hover {\n      --rdg-drag-handle-size: 16px;\n      border: 2px solid var(--rdg-selection-color);\n      background-color: var(--rdg-background-color);\n    }\n  }\n`;\n\nconst cellDragHandleFrozenClassname = css`\n  @layer rdg.DragHandle {\n    z-index: 1;\n    position: sticky;\n  }\n`;\n\nconst cellDragHandleClassname = `rdg-cell-drag-handle ${cellDragHandle}`;\n\ninterface Props<R, SR> extends Pick<DataGridProps<R, SR>, 'rows' | 'onRowsChange'> {\n  gridRowStart: number;\n  column: CalculatedColumn<R, SR>;\n  columnWidth: number | string;\n  maxColIdx: number;\n  isLastRow: boolean;\n  selectedPosition: SelectCellState;\n  latestDraggedOverRowIdx: React.MutableRefObject<number | undefined>;\n  isCellEditable: (position: Position) => boolean;\n  onClick: () => void;\n  onFill: (event: FillEvent<R>) => R;\n  setDragging: (isDragging: boolean) => void;\n  setDraggedOverRowIdx: (overRowIdx: number | undefined) => void;\n}