@tanstack/table-core 9.0.0-beta.7 → 9.0.0-beta.70

package/src/features/column-resizing/columnResizingFeature.ts

@@ -1,65 +0,0 @@
-import {
-  assignPrototypeAPIs,
-  assignTableAPIs,
-  makeStateUpdater,
-} from '../../utils'
-import {
-  column_getCanResize,
-  column_getIsResizing,
-  getDefaultColumnResizingState,
-  header_getResizeHandler,
-  table_resetHeaderSizeInfo,
-  table_setColumnResizing,
-} from './columnResizingFeature.utils'
-import type { TableFeature } from '../../types/TableFeatures'
-
-/**
- * Feature that adds column resizing state, options, and resize handlers.
- */
-export const columnResizingFeature: TableFeature = {
-  getInitialState: (initialState) => {
-    return {
-      columnResizing: getDefaultColumnResizingState(),
-      ...initialState,
-    }
-  },
-
-  getDefaultTableOptions: (table) => {
-    return {
-      columnResizeMode: 'onEnd',
-      columnResizeDirection: 'ltr',
-      onColumnResizingChange: makeStateUpdater('columnResizing', table),
-    }
-  },
-
-  assignColumnPrototype: (prototype, table) => {
-    assignPrototypeAPIs('columnResizingFeature', prototype, table, {
-      column_getCanResize: {
-        fn: (column) => column_getCanResize(column),
-      },
-      column_getIsResizing: {
-        fn: (column) => column_getIsResizing(column),
-      },
-    })
-  },
-
-  assignHeaderPrototype: (prototype, table) => {
-    assignPrototypeAPIs('columnResizingFeature', prototype, table, {
-      header_getResizeHandler: {
-        fn: (header, _contextDocument) =>
-          header_getResizeHandler(header, _contextDocument),
-      },
-    })
-  },
-
-  constructTableAPIs: (table) => {
-    assignTableAPIs('columnResizingFeature', table, {
-      table_setColumnResizing: {
-        fn: (updater) => table_setColumnResizing(table, updater),
-      },
-      table_resetHeaderSizeInfo: {
-        fn: (defaultState) => table_resetHeaderSizeInfo(table, defaultState),
-      },
-    })
-  },
-}

package/src/features/column-resizing/columnResizingFeature.types.ts

@@ -1,89 +0,0 @@
-import type { OnChangeFn, Updater } from '../../types/type-utils'
-
-export interface TableState_ColumnResizing {
-  columnResizing: columnResizingState
-}
-
-export interface columnResizingState {
-  columnSizingStart: Array<[string, number]>
-  deltaOffset: null | number
-  deltaPercentage: null | number
-  isResizingColumn: false | string
-  startOffset: null | number
-  startSize: null | number
-}
-
-export type ColumnResizeMode = 'onChange' | 'onEnd'
-
-export type ColumnResizeDirection = 'ltr' | 'rtl'
-
-export interface TableOptions_ColumnResizing {
-  /**
-   * Determines when committed `columnSizing` values are updated. `onChange`
-   * commits sizes while the resize handle is dragged; `onEnd` commits when the
-   * resize interaction finishes.
-   */
-  columnResizeMode?: ColumnResizeMode
-  /**
-   * Enables or disables column resizing for the whole table.
-   */
-  enableColumnResizing?: boolean
-  /**
-   * Sets the resize direction used to calculate drag offsets. Defaults to `ltr`.
-   */
-  columnResizeDirection?: ColumnResizeDirection
-  /**
-   * Called with an updater when the transient `columnResizing` state changes.
-   * Pair this with `state.columnResizing` when using external state; external
-   * atoms can own the slice without this callback.
-   */
-  onColumnResizingChange?: OnChangeFn<columnResizingState>
-}
-
-export type ColumnResizingDefaultOptions = Pick<
-  TableOptions_ColumnResizing,
-  'columnResizeMode' | 'onColumnResizingChange' | 'columnResizeDirection'
->
-
-export interface Table_ColumnResizing {
-  /**
-   * Resets `columnResizing` to `initialState.columnResizing`.
-   *
-   * Pass `true` to ignore initial state and reset to the no-drag default state.
-   */
-  resetHeaderSizeInfo: (defaultState?: boolean) => void
-  /**
-   * Updates transient resize interaction state with a next state or updater function.
-   *
-   * The lowercase `c` in this API name matches the current generated v9 table
-   * API for the `columnResizing` state slice.
-   */
-  setcolumnResizing: (updater: Updater<columnResizingState>) => void
-}
-
-export interface ColumnDef_ColumnResizing {
-  /**
-   * Enables or disables column resizing for the column.
-   */
-  enableResizing?: boolean
-}
-
-export interface Column_ColumnResizing {
-  /**
-   * Checks whether this column can start a resize interaction.
-   */
-  getCanResize: () => boolean
-  /**
-   * Checks whether this column is the active resize target.
-   */
-  getIsResizing: () => boolean
-}
-
-export interface Header_ColumnResizing {
-  /**
-   * Creates the `onMouseDown`/`onTouchStart` handler for a resize handle.
-   *
-   * Dragging and release listeners are installed and cleaned up automatically.
-   */
-  getResizeHandler: (context?: Document) => (event: unknown) => void
-}

package/src/features/column-resizing/columnResizingFeature.utils.ts

@@ -1,364 +0,0 @@
-import {
-  column_getSize,
-  header_getSize,
-  table_setColumnSizing,
-} from '../column-sizing/columnSizingFeature.utils'
-import { cloneState } from '../../utils'
-import type { CellData, RowData, Updater } from '../../types/type-utils'
-import type { TableFeatures } from '../../types/TableFeatures'
-import type { Table_Internal } from '../../types/Table'
-import type { Header } from '../../types/Header'
-import type { Column_Internal } from '../../types/Column'
-import type { ColumnSizingState } from '../column-sizing/columnSizingFeature.types'
-import type { columnResizingState } from './columnResizingFeature.types'
-
-/**
- * Creates the default transient column resizing state.
- *
- * The feature default represents no active drag interaction. Reset APIs use
- * this value when `defaultState` is `true`.
- *
- * @example
- * ```ts
- * const resizeInfo = getDefaultColumnResizingState()
- * ```
- */
-export function getDefaultColumnResizingState(): columnResizingState {
-  return {
-    startOffset: null,
-    startSize: null,
-    deltaOffset: null,
-    deltaPercentage: null,
-    isResizingColumn: false,
-    columnSizingStart: [],
-  }
-}
-
-/**
- * Checks whether this column can start a resize interaction.
- *
- * Both `columnDef.enableResizing` and table `enableColumnResizing` default to
- * `true`.
- *
- * @example
- * ```ts
- * const canResize = column_getCanResize(column)
- * ```
- */
-export function column_getCanResize<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TValue extends CellData = CellData,
->(column: Column_Internal<TFeatures, TData, TValue>) {
-  return (
-    (column.columnDef.enableResizing ?? true) &&
-    (column.table.options.enableColumnResizing ?? true)
-  )
-}
-
-/**
- * Checks whether this column is the active column resize target.
- *
- * The value is read from `state.columnResizing.isResizingColumn`.
- *
- * @example
- * ```ts
- * const isResizing = column_getIsResizing(column)
- * ```
- */
-export function column_getIsResizing<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TValue extends CellData = CellData,
->(column: Column_Internal<TFeatures, TData, TValue>) {
-  return (
-    column.table.atoms.columnResizing?.get()?.isResizingColumn === column.id
-  )
-}
-
-/**
- * Creates the pointer/touch start handler for resizing a header.
- *
- * The handler records starting sizes for all leaf headers, tracks drag deltas,
- * writes transient resize info, and commits column sizes on change or drag end
- * depending on `columnResizeMode`.
- *
- * @example
- * ```ts
- * const onMouseDown = header_getResizeHandler(header)
- * ```
- */
-export function header_getResizeHandler<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TValue extends CellData = CellData,
->(header: Header<TFeatures, TData, TValue>, _contextDocument?: Document) {
-  const column = header.table.getColumn(header.column.id)!
-  const canResize = column_getCanResize(column)
-
-  return (event: unknown) => {
-    if (!canResize) {
-      return
-    }
-
-    ;(event as any).persist?.()
-
-    if (isTouchStartEvent(event)) {
-      // lets not respond to multiple touches (e.g. 2 or 3 fingers)
-      if (event.touches.length > 1) {
-        return
-      }
-    }
-
-    const startSize = header_getSize(header)
-
-    const columnSizingStart: Array<[string, number]> = header
-      .getLeafHeaders()
-      .map((leafHeader) => [
-        leafHeader.column.id,
-        column_getSize(leafHeader.column),
-      ])
-
-    const clientX = isTouchStartEvent(event)
-      ? Math.round(event.touches[0]!.clientX)
-      : (event as MouseEvent).clientX
-
-    const newColumnSizing: ColumnSizingState = {}
-
-    const updateOffset = (eventType: 'move' | 'end', clientXPos?: number) => {
-      if (typeof clientXPos !== 'number') {
-        return
-      }
-
-      table_setColumnResizing(column.table, (old) => {
-        const deltaDirection =
-          column.table.options.columnResizeDirection === 'rtl' ? -1 : 1
-        const deltaOffset =
-          (clientXPos - (old.startOffset ?? 0)) * deltaDirection
-        const startSize = old.startSize ?? 0
-        const deltaPercentage = Math.max(
-          startSize > 0 ? deltaOffset / startSize : 0,
-          -0.999999,
-        )
-
-        old.columnSizingStart.forEach(([columnId, headerSize]) => {
-          newColumnSizing[columnId] =
-            Math.round(
-              Math.max(
-                headerSize > 0
-                  ? headerSize + headerSize * deltaPercentage
-                  : deltaOffset / old.columnSizingStart.length,
-                0,
-              ) * 100,
-            ) / 100
-        })
-
-        return {
-          ...old,
-          deltaOffset,
-          deltaPercentage,
-        }
-      })
-
-      if (
-        column.table.options.columnResizeMode === 'onChange' ||
-        eventType === 'end'
-      ) {
-        table_setColumnSizing(column.table, (old) => ({
-          ...old,
-          ...newColumnSizing,
-        }))
-      }
-    }
-
-    const onMove = (clientXPos?: number) => updateOffset('move', clientXPos)
-
-    const onEnd = (clientXPos?: number) => {
-      updateOffset('end', clientXPos)
-
-      table_setColumnResizing(column.table, (old) => ({
-        ...old,
-        isResizingColumn: false,
-        startOffset: null,
-        startSize: null,
-        deltaOffset: null,
-        deltaPercentage: null,
-        columnSizingStart: [],
-      }))
-    }
-
-    const contextDocument =
-      _contextDocument || typeof document !== 'undefined' ? document : null
-
-    const mouseEvents = {
-      moveHandler: (e: MouseEvent) => onMove(e.clientX),
-      upHandler: (e: MouseEvent) => {
-        contextDocument?.removeEventListener(
-          'mousemove',
-          mouseEvents.moveHandler,
-        )
-        contextDocument?.removeEventListener('mouseup', mouseEvents.upHandler)
-        onEnd(e.clientX)
-      },
-    }
-
-    const touchEvents = {
-      moveHandler: (touchEvent: TouchEvent) => {
-        if (touchEvent.cancelable) {
-          touchEvent.preventDefault()
-          touchEvent.stopPropagation()
-        }
-        onMove(touchEvent.touches[0]!.clientX)
-        return false
-      },
-      upHandler: (e: TouchEvent) => {
-        contextDocument?.removeEventListener(
-          'touchmove',
-          touchEvents.moveHandler,
-        )
-        contextDocument?.removeEventListener('touchend', touchEvents.upHandler)
-        if (e.cancelable) {
-          e.preventDefault()
-          e.stopPropagation()
-        }
-        onEnd(e.touches[0]?.clientX)
-      },
-    }
-
-    const passiveIfSupported = passiveEventSupported()
-      ? { passive: false }
-      : false
-
-    if (isTouchStartEvent(event)) {
-      contextDocument?.addEventListener(
-        'touchmove',
-        touchEvents.moveHandler,
-        passiveIfSupported,
-      )
-      contextDocument?.addEventListener(
-        'touchend',
-        touchEvents.upHandler,
-        passiveIfSupported,
-      )
-    } else {
-      contextDocument?.addEventListener(
-        'mousemove',
-        mouseEvents.moveHandler,
-        passiveIfSupported,
-      )
-      contextDocument?.addEventListener(
-        'mouseup',
-        mouseEvents.upHandler,
-        passiveIfSupported,
-      )
-    }
-
-    table_setColumnResizing(column.table, (old) => ({
-      ...old,
-      startOffset: clientX,
-      startSize,
-      deltaOffset: 0,
-      deltaPercentage: 0,
-      columnSizingStart,
-      isResizingColumn: column.id,
-    }))
-  }
-}
-
-/**
- * Routes a transient column resizing updater through the table's resize handler.
- *
- * This state tracks the active drag interaction; committed widths live in
- * `columnSizing`.
- *
- * @example
- * ```ts
- * table_setColumnResizing(table, (old) => ({ ...old, deltaOffset: 12 }))
- * ```
- */
-export function table_setColumnResizing<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
->(
-  table: Table_Internal<TFeatures, TData>,
-  updater: Updater<columnResizingState>,
-) {
-  table.options.onColumnResizingChange?.(updater)
-}
-
-/**
- * Resets `columnResizing` to the configured initial state or feature default.
- *
- * With no argument, the reset clones `table.initialState.columnResizing` when
- * it exists. Passing `true` ignores initial state and resets to the no-drag
- * default state.
- *
- * @example
- * ```ts
- * table_resetHeaderSizeInfo(table)
- * table_resetHeaderSizeInfo(table, true)
- * ```
- */
-export function table_resetHeaderSizeInfo<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
->(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
-  table_setColumnResizing(
-    table,
-    defaultState
-      ? getDefaultColumnResizingState()
-      : cloneState(
-          table.initialState.columnResizing ?? getDefaultColumnResizingState(),
-        ),
-  )
-}
-
-let passiveSupported: boolean | null = null
-/**
- * Detects whether the current environment supports passive event listeners.
- *
- * Column resizing uses this to register pointer and touch listeners with
- * `passive: false` only when the environment understands passive options.
- *
- * @example
- * ```ts
- * const canUsePassiveListeners = passiveEventSupported()
- * ```
- */
-export function passiveEventSupported() {
-  if (typeof passiveSupported === 'boolean') return passiveSupported
-
-  let supported = false
-  try {
-    const options = {
-      get passive() {
-        supported = true
-        return false
-      },
-    }
-
-    const noop = () => {}
-
-    window.addEventListener('test', noop, options)
-    window.removeEventListener('test', noop)
-  } catch (err) {
-    supported = false
-  }
-  passiveSupported = supported
-  return passiveSupported
-}
-
-/**
- * Narrows an unknown event to a `touchstart` event.
- *
- * Column resizing uses this before reading touch coordinates and installing
- * touch-specific listeners.
- *
- * @example
- * ```ts
- * const isTouch = isTouchStartEvent(event)
- * ```
- */
-export function isTouchStartEvent(e: unknown): e is TouchEvent {
-  return (e as TouchEvent).type === 'touchstart'
-}

package/src/features/column-sizing/columnSizingFeature.ts

@@ -1,145 +0,0 @@
-import {
-  assignPrototypeAPIs,
-  assignTableAPIs,
-  makeStateUpdater,
-} from '../../utils'
-import {
-  column_getAfter,
-  column_getSize,
-  column_getStart,
-  column_resetSize,
-  getDefaultColumnSizingColumnDef,
-  getDefaultColumnSizingState,
-  header_getSize,
-  header_getStart,
-  table_getCenterTotalSize,
-  table_getLeftTotalSize,
-  table_getRightTotalSize,
-  table_getTotalSize,
-  table_resetColumnSizing,
-  table_setColumnSizing,
-} from './columnSizingFeature.utils'
-import type { TableFeature } from '../../types/TableFeatures'
-
-/**
- * Feature that adds column sizing state, defaults, and size measurement APIs.
- */
-export const columnSizingFeature: TableFeature = {
-  getInitialState: (initialState) => {
-    return {
-      columnSizing: getDefaultColumnSizingState(),
-      ...initialState,
-    }
-  },
-
-  getDefaultColumnDef: () => {
-    return getDefaultColumnSizingColumnDef()
-  },
-
-  getDefaultTableOptions: (table) => {
-    return {
-      onColumnSizingChange: makeStateUpdater('columnSizing', table),
-    }
-  },
-
-  assignColumnPrototype: (prototype, table) => {
-    assignPrototypeAPIs('columnSizingFeature', prototype, table, {
-      column_getSize: {
-        fn: (column) => column_getSize(column),
-        memoDeps: (column) => [
-          table.options.columns,
-          table.atoms.columnSizing?.get()?.[column.id], // just this column's size state
-        ],
-      },
-      column_getStart: {
-        fn: (column, position) => column_getStart(column, position),
-        memoDeps: (column, position) => [
-          position,
-          table.options.columns,
-          table.atoms.columnSizing?.get(),
-          table.atoms.columnOrder?.get(),
-          table.atoms.columnPinning?.get(),
-          table.atoms.columnVisibility?.get(),
-        ],
-      },
-      column_getAfter: {
-        fn: (column, position) => column_getAfter(column, position),
-        memoDeps: (column, position) => [
-          position,
-          table.options.columns,
-          table.atoms.columnSizing?.get(),
-          table.atoms.columnOrder?.get(),
-          table.atoms.columnPinning?.get(),
-          table.atoms.columnVisibility?.get(),
-        ],
-      },
-      column_resetSize: {
-        fn: (column) => column_resetSize(column),
-      },
-    })
-  },
-
-  assignHeaderPrototype: (prototype, table) => {
-    assignPrototypeAPIs('columnSizingFeature', prototype, table, {
-      header_getSize: {
-        fn: (header) => header_getSize(header),
-        memoDeps: (header) => [
-          table.options.columns,
-          header.column.columns.length > 0
-            ? table.atoms.columnSizing?.get() // must be all columns (sum child columns)
-            : table.atoms.columnSizing?.get()?.[header.column.id], // can just check it's associated column size state
-        ],
-      },
-      header_getStart: {
-        fn: (header) => header_getStart(header),
-        memoDeps: (header, position) => [
-          position,
-          table.options.columns,
-          table.atoms.columnSizing?.get(),
-          table.atoms.columnOrder?.get(),
-          table.atoms.columnPinning?.get(),
-          table.atoms.columnVisibility?.get(),
-        ],
-      },
-    })
-  },
-
-  constructTableAPIs: (table) => {
-    assignTableAPIs('columnSizingFeature', table, {
-      table_setColumnSizing: {
-        fn: (updater) => table_setColumnSizing(table, updater),
-      },
-      table_resetColumnSizing: {
-        fn: (defaultState) => table_resetColumnSizing(table, defaultState),
-      },
-      table_getTotalSize: {
-        fn: () => table_getTotalSize(table),
-        memoDeps: () => [
-          table.atoms.columnSizing?.get(),
-          table.getHeaderGroups(),
-        ],
-      },
-      table_getLeftTotalSize: {
-        fn: () => table_getLeftTotalSize(table),
-        memoDeps: () => [
-          table.atoms.columnSizing?.get(),
-          table.getHeaderGroups(),
-        ],
-      },
-      table_getCenterTotalSize: {
-        fn: () => table_getCenterTotalSize(table),
-        memoDeps: () => [
-          table.atoms.columnSizing?.get(),
-          table.getHeaderGroups(),
-        ],
-      },
-      table_getRightTotalSize: {
-        fn: () => table_getRightTotalSize(table),
-        memoDeps: () => [
-          table.atoms.columnSizing?.get(),
-          table.getHeaderGroups(),
-        ],
-      },
-    })
-  },
-}