@itwin/itwinui-react 3.15.5 → 5.0.0-alpha.0

package/esm/core/Table/TableRowMemoized.js

@@ -1,155 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box, useIntersection, useMergedRefs } from '../../utils/index.js';
-import { TableCell } from './TableCell.js';
-export const TableRow = (props) => {
-  let {
-    row,
-    rowProps,
-    isLast,
-    onRowInViewport,
-    onBottomReached,
-    intersectionMargin,
-    onClick,
-    subComponent,
-    isDisabled,
-    tableHasSubRows,
-    tableInstance,
-    expanderCell,
-    scrollContainerRef,
-    tableRowRef,
-    density,
-    virtualItem,
-    virtualizer,
-  } = props;
-  let onIntersect = React.useCallback(() => {
-    onRowInViewport.current?.(row.original);
-    isLast && onBottomReached.current?.();
-  }, [isLast, onBottomReached, onRowInViewport, row.original]);
-  let intersectionRoot = React.useMemo(() => {
-    let isTableScrollable =
-      (scrollContainerRef?.scrollHeight ?? 0) >
-      (scrollContainerRef?.offsetHeight ?? 0);
-    if (isTableScrollable) return scrollContainerRef;
-  }, [scrollContainerRef]);
-  let intersectionRef = useIntersection(onIntersect, {
-    rootMargin: `${intersectionMargin}px`,
-    root: intersectionRoot,
-  });
-  let userRowProps = rowProps?.(row) ?? {};
-  let { status, isLoading, ...restUserRowProps } = userRowProps;
-  let mergedProps = {
-    ...row.getRowProps({
-      style: {
-        flex: '0 0 auto',
-        minWidth: '100%',
-        ...(null != virtualItem
-          ? {
-              transform: `translateY(${virtualItem.start}px)`,
-            }
-          : {}),
-      },
-    }),
-    ...restUserRowProps,
-    ...{
-      className: cx(
-        'iui-table-row',
-        {
-          'iui-table-row-expanded': row.isExpanded && subComponent,
-          'iui-loading': isLoading,
-        },
-        userRowProps?.className,
-      ),
-      'aria-selected': row.isSelected || void 0,
-      'aria-disabled': isDisabled || void 0,
-      'data-iui-status': status,
-      'data-iui-index': virtualItem?.index,
-      ...(null != virtualItem && {
-        'data-iui-virtualizer': 'item',
-      }),
-    },
-  };
-  let refs = useMergedRefs(
-    intersectionRef,
-    mergedProps.ref,
-    tableRowRef,
-    virtualizer?.measureElement,
-  );
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(
-      Box,
-      {
-        ...mergedProps,
-        ref: refs,
-        onClick: (event) => {
-          mergedProps?.onClick?.(event);
-          onClick?.(event, row);
-        },
-      },
-      row.cells.map((cell, index) =>
-        React.createElement(TableCell, {
-          key: cell.getCellProps().key,
-          cell: cell,
-          cellIndex: index,
-          isDisabled: isDisabled,
-          tableHasSubRows: tableHasSubRows,
-          tableInstance: tableInstance,
-          expanderCell: expanderCell,
-          density: density,
-        }),
-      ),
-    ),
-  );
-};
-let hasAnySelectedSubRow = (row, selectedRowIds) => {
-  if (selectedRowIds?.[row.id]) return true;
-  return row.subRows.some((subRow) =>
-    hasAnySelectedSubRow(subRow, selectedRowIds),
-  );
-};
-export const TableRowMemoized = React.memo(
-  TableRow,
-  (prevProp, nextProp) =>
-    prevProp.isLast === nextProp.isLast &&
-    prevProp.state.hiddenColumns?.length ===
-      nextProp.state.hiddenColumns?.length &&
-    !!prevProp.state.hiddenColumns?.every(
-      (column, index) => nextProp.state.hiddenColumns?.[index] === column,
-    ) &&
-    prevProp.onRowInViewport === nextProp.onRowInViewport &&
-    prevProp.onBottomReached === nextProp.onBottomReached &&
-    prevProp.onClick === nextProp.onClick &&
-    prevProp.row.original === nextProp.row.original &&
-    prevProp.state.selectedRowIds?.[prevProp.row.id] ===
-      nextProp.state.selectedRowIds?.[nextProp.row.id] &&
-    prevProp.row.subRows.some((subRow) =>
-      hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds),
-    ) ===
-      nextProp.row.subRows.some((subRow) =>
-        hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds),
-      ) &&
-    prevProp.state.expanded?.[prevProp.row.id] ===
-      nextProp.state.expanded?.[nextProp.row.id] &&
-    prevProp.subComponent === nextProp.subComponent &&
-    prevProp.row.cells.every(
-      (cell, index) => nextProp.row.cells[index].column === cell.column,
-    ) &&
-    prevProp.isDisabled === nextProp.isDisabled &&
-    prevProp.rowProps === nextProp.rowProps &&
-    prevProp.expanderCell === nextProp.expanderCell &&
-    prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
-    prevProp.scrollContainerRef === nextProp.scrollContainerRef &&
-    prevProp.state.columnOrder === nextProp.state.columnOrder &&
-    !nextProp.state.columnResizing.isResizingColumn &&
-    prevProp.state.isTableResizing === nextProp.state.isTableResizing &&
-    prevProp.state.sticky.isScrolledToLeft ===
-      nextProp.state.sticky.isScrolledToLeft &&
-    prevProp.state.sticky.isScrolledToRight ===
-      nextProp.state.sticky.isScrolledToRight &&
-    prevProp.density === nextProp.density &&
-    prevProp.virtualizer === nextProp.virtualizer &&
-    prevProp.virtualItem?.index === nextProp.virtualItem?.index &&
-    prevProp.virtualItem?.start === nextProp.virtualItem?.start,
-);

package/esm/core/Table/actionHandlers/expandHandler.d.ts

@@ -1,2 +0,0 @@
-import type { TableInstance, TableState } from '../../../react-table/react-table.js';
-export declare const onExpandHandler: <T extends Record<string, unknown>>(newState: TableState<T>, instance?: TableInstance<T>, onExpand?: (expandedData: T[] | undefined, tableState?: TableState<T>) => void) => void;

package/esm/core/Table/actionHandlers/expandHandler.js

@@ -1,11 +0,0 @@
-export const onExpandHandler = (newState, instance, onExpand) => {
-  if (!instance?.preFilteredFlatRows.length) {
-    onExpand?.([], newState);
-    return;
-  }
-  let expandedData = [];
-  instance.preFilteredFlatRows.forEach((row) => {
-    if (newState.expanded[row.id]) expandedData.push(row.original);
-  });
-  onExpand?.(expandedData, newState);
-};

package/esm/core/Table/actionHandlers/filterHandler.d.ts

@@ -1,3 +0,0 @@
-import type { ActionType, TableInstance, TableState } from '../../../react-table/react-table.js';
-import type { TableFilterValue } from '../filters/index.js';
-export declare const onFilterHandler: <T extends Record<string, unknown>>(newState: TableState<T>, action: ActionType, previousState: TableState<T>, currentFilter: TableFilterValue<T>[], instance?: TableInstance<T>) => TableFilterValue<T>[];

package/esm/core/Table/actionHandlers/filterHandler.js

@@ -1,24 +0,0 @@
-export const onFilterHandler = (
-  newState,
-  action,
-  previousState,
-  currentFilter,
-  instance,
-) => {
-  let previousFilter = previousState.filters.find(
-    (f) => f.id === action.columnId,
-  );
-  if (previousFilter?.value != action.filterValue) {
-    let filters = newState.filters.map((f) => {
-      let column = instance?.allColumns.find((c) => c.id === f.id);
-      return {
-        id: f.id,
-        value: f.value,
-        fieldType: column?.fieldType ?? 'text',
-        filterType: column?.filter ?? 'text',
-      };
-    });
-    return filters;
-  }
-  return currentFilter;
-};

package/esm/core/Table/actionHandlers/index.d.ts

@@ -1,4 +0,0 @@
-export { onExpandHandler } from './expandHandler.js';
-export { onFilterHandler } from './filterHandler.js';
-export { onToggleHandler, onSingleSelectHandler, onShiftSelectHandler, } from './selectHandler.js';
-export { onTableResizeStart, onTableResizeEnd } from './resizeHandler.js';

package/esm/core/Table/actionHandlers/index.js

@@ -1,8 +0,0 @@
-export { onExpandHandler } from './expandHandler.js';
-export { onFilterHandler } from './filterHandler.js';
-export {
-  onToggleHandler,
-  onSingleSelectHandler,
-  onShiftSelectHandler,
-} from './selectHandler.js';
-export { onTableResizeStart, onTableResizeEnd } from './resizeHandler.js';

package/esm/core/Table/actionHandlers/resizeHandler.d.ts

@@ -1,63 +0,0 @@
-import type { ActionType, TableState } from '../../../react-table/react-table.js';
-export declare const onTableResizeStart: <T extends Record<string, unknown>>(state: TableState<T>) => {
-    isTableResizing: boolean;
-    hiddenColumns?: import("../../../react-table/react-table.js").IdType<T>[] | undefined;
-    columnResizing: {
-        startX?: number;
-        columnWidth?: number;
-        nextColumnWidth?: number;
-        headerIdWidths?: Array<[string, number]>;
-        nextHeaderIdWidths?: Array<[string, number]>;
-        columnWidths: Record<string, number>;
-        isResizingColumn?: string;
-    };
-    columnReorderStartIndex: number;
-    sticky: {
-        isScrolledToRight?: boolean;
-        isScrolledToLeft?: boolean;
-    };
-    lastSelectedRowId?: string;
-    columnOrder: import("../../../react-table/react-table.js").IdType<T>[];
-    expanded: Record<import("../../../react-table/react-table.js").IdType<T>, boolean>;
-    filters: import("../../../react-table/react-table.js").Filters<T>;
-    globalFilter: any;
-    groupBy: import("../../../react-table/react-table.js").IdType<T>[];
-    pageSize: number;
-    pageIndex: number;
-    selectedRowIds: Record<import("../../../react-table/react-table.js").IdType<T>, boolean>;
-    rowState: Record<string, {
-        cellState: import("../../../react-table/react-table.js").UseRowStateLocalState<T, unknown>;
-    }>;
-    sortBy: import("../../../react-table/react-table.js").SortingRule<T>[];
-};
-export declare const onTableResizeEnd: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType) => {
-    isTableResizing: boolean;
-    columnResizing: {
-        columnWidths: any;
-        startX?: number;
-        columnWidth?: number;
-        nextColumnWidth?: number;
-        headerIdWidths?: Array<[string, number]>;
-        nextHeaderIdWidths?: Array<[string, number]>;
-        isResizingColumn?: string;
-    };
-    hiddenColumns?: import("../../../react-table/react-table.js").IdType<T>[] | undefined;
-    columnReorderStartIndex: number;
-    sticky: {
-        isScrolledToRight?: boolean;
-        isScrolledToLeft?: boolean;
-    };
-    lastSelectedRowId?: string;
-    columnOrder: import("../../../react-table/react-table.js").IdType<T>[];
-    expanded: Record<import("../../../react-table/react-table.js").IdType<T>, boolean>;
-    filters: import("../../../react-table/react-table.js").Filters<T>;
-    globalFilter: any;
-    groupBy: import("../../../react-table/react-table.js").IdType<T>[];
-    pageSize: number;
-    pageIndex: number;
-    selectedRowIds: Record<import("../../../react-table/react-table.js").IdType<T>, boolean>;
-    rowState: Record<string, {
-        cellState: import("../../../react-table/react-table.js").UseRowStateLocalState<T, unknown>;
-    }>;
-    sortBy: import("../../../react-table/react-table.js").SortingRule<T>[];
-};

package/esm/core/Table/actionHandlers/resizeHandler.js

@@ -1,14 +0,0 @@
-export const onTableResizeStart = (state) => ({
-  ...state,
-  isTableResizing: true,
-});
-export const onTableResizeEnd = (state, action) => ({
-  ...state,
-  isTableResizing: false,
-  columnResizing: {
-    ...state.columnResizing,
-    columnWidths: {
-      ...action.columnWidths,
-    },
-  },
-});

package/esm/core/Table/actionHandlers/selectHandler.d.ts

@@ -1,43 +0,0 @@
-import type { ActionType, TableInstance, TableState, IdType } from '../../../react-table/react-table.js';
-/**
- * Handles selection when toggling a row (Ctrl click or checkbox click)
- */
-export declare const onToggleHandler: <T extends Record<string, unknown>>(newState: TableState<T>, action: ActionType, instance?: TableInstance<T>, onSelect?: (selectedData: T[] | undefined, tableState?: TableState<T>) => void, isRowDisabled?: (rowData: T) => boolean) => void;
-/**
- * Handles selection when clicked on a row.
- */
-export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType, instance?: TableInstance<T>, onSelect?: (selectedData: T[] | undefined, tableState?: TableState<T>) => void, isRowDisabled?: (rowData: T) => boolean) => {
-    lastSelectedRowId: any;
-    selectedRowIds: Record<string, boolean>;
-    hiddenColumns?: IdType<T>[] | undefined;
-    columnResizing: {
-        startX?: number;
-        columnWidth?: number;
-        nextColumnWidth?: number;
-        headerIdWidths?: Array<[string, number]>;
-        nextHeaderIdWidths?: Array<[string, number]>;
-        columnWidths: Record<string, number>;
-        isResizingColumn?: string;
-    };
-    isTableResizing?: boolean;
-    columnReorderStartIndex: number;
-    sticky: {
-        isScrolledToRight?: boolean;
-        isScrolledToLeft?: boolean;
-    };
-    columnOrder: IdType<T>[];
-    expanded: Record<IdType<T>, boolean>;
-    filters: import("../../../react-table/react-table.js").Filters<T>;
-    globalFilter: any;
-    groupBy: IdType<T>[];
-    pageSize: number;
-    pageIndex: number;
-    rowState: Record<string, {
-        cellState: import("../../../react-table/react-table.js").UseRowStateLocalState<T, unknown>;
-    }>;
-    sortBy: import("../../../react-table/react-table.js").SortingRule<T>[];
-};
-/**
- * Handles selection when clicked on a row while shift key is pressed.
- */
-export declare const onShiftSelectHandler: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType, instance?: TableInstance<T>, onSelect?: (selectedData: T[] | undefined, tableState?: TableState<T>) => void, isRowDisabled?: (rowData: T) => boolean) => TableState<T>;

package/esm/core/Table/actionHandlers/selectHandler.js

@@ -1,114 +0,0 @@
-let onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
-  if (!instance?.rows.length) {
-    onSelect?.([], newState);
-    return;
-  }
-  let newSelectedRowIds = {};
-  let handleRow = (row) => {
-    if (isRowDisabled?.(row.original)) return false;
-    let isAllSubSelected = true;
-    row.initialSubRows.forEach((subRow) => {
-      let result = handleRow(subRow);
-      if (!result) isAllSubSelected = false;
-    });
-    if (
-      (!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
-      (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
-      (row.initialSubRows.length && isAllSubSelected)
-    )
-      newSelectedRowIds[row.id] = true;
-    return !!newSelectedRowIds[row.id];
-  };
-  instance.initialRows.forEach((row) => handleRow(row));
-  let selectedData = getSelectedData(newSelectedRowIds, instance);
-  newState.selectedRowIds = newSelectedRowIds;
-  onSelect?.(selectedData, newState);
-};
-export const onToggleHandler = (
-  newState,
-  action,
-  instance,
-  onSelect,
-  isRowDisabled,
-) => {
-  onSelectHandler(newState, instance, onSelect, isRowDisabled);
-  newState.lastSelectedRowId = action.id;
-};
-export const onSingleSelectHandler = (
-  state,
-  action,
-  instance,
-  onSelect,
-  isRowDisabled,
-) => {
-  let selectedRowIds = {
-    [action.id]: true,
-  };
-  if (instance?.selectSubRows) {
-    let handleRow = (row) => {
-      selectedRowIds[row.id] = true;
-      row.subRows.forEach((r) => handleRow(r));
-    };
-    handleRow(instance.rowsById[action.id]);
-  }
-  let newState = {
-    ...state,
-    lastSelectedRowId: action.id,
-    selectedRowIds,
-  };
-  onSelectHandler(newState, instance, onSelect, isRowDisabled);
-  return newState;
-};
-export const onShiftSelectHandler = (
-  state,
-  action,
-  instance,
-  onSelect,
-  isRowDisabled,
-) => {
-  if (null == instance) return state;
-  let startIndex = Math.max(
-    0,
-    instance.flatRows.findIndex((row) => row.id === state.lastSelectedRowId),
-  );
-  let endIndex = Math.max(
-    0,
-    instance.flatRows.findIndex((row) => row.id === action.id),
-  );
-  if (startIndex > endIndex) {
-    let temp = startIndex;
-    startIndex = endIndex;
-    endIndex = temp;
-  }
-  let isLastSelectedRowIdSelected =
-    null == state.lastSelectedRowId ||
-    !!state.selectedRowIds[state.lastSelectedRowId];
-  let selectedRowIds = action.ctrlPressed
-    ? {
-        ...state.selectedRowIds,
-      }
-    : {};
-  instance.flatRows
-    .slice(startIndex, endIndex + 1)
-    .forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
-  let handleRow = (row) => {
-    selectedRowIds[row.id] = isLastSelectedRowIdSelected;
-    row.subRows.forEach((r) => handleRow(r));
-  };
-  handleRow(instance.flatRows[endIndex]);
-  let newState = {
-    ...state,
-    selectedRowIds,
-  };
-  onSelectHandler(newState, instance, onSelect, isRowDisabled);
-  return newState;
-};
-let getSelectedData = (selectedRowIds, instance) => {
-  let selectedData = [];
-  let setSelectedData = (row) => {
-    if (selectedRowIds[row.id]) selectedData.push(row.original);
-    row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
-  };
-  instance?.initialRows.forEach((row) => setSelectedData(row));
-  return selectedData;
-};

package/esm/core/Table/cells/DefaultCell.d.ts

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import type { CellRendererProps } from '../../../react-table/react-table.js';
-export type DefaultCellProps<T extends Record<string, unknown>> = {
-    /**
-     * Custom icon to be displayed at the beginning of the cell.
-     */
-    startIcon?: JSX.Element;
-    /**
-     * Custom icon to be displayed at the end of the cell.
-     */
-    endIcon?: JSX.Element;
-    /**
-     * Status of the cell.
-     */
-    status?: 'positive' | 'negative' | 'warning';
-    /**
-     * Should the contents of the cell be clamped after a certain number of lines?
-     *
-     * Will be enabled by default if the cell content is a string and a custom `Cell`
-     * is not specified in the column object.
-     */
-    clamp?: boolean;
-} & CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
-/**
- * Default cell.
- * It should be passed to `cellRenderer`.
- * It can can be used to pass native HTML attributes to the cell container.
- * @example
- * {
- *   Header: 'Name',
- *   accessor: 'name',
- *   cellRenderer: (props) => <DefaultCell {...props} />,
- * }
- */
-export declare const DefaultCell: {
-    <T extends Record<string, unknown>>(props: DefaultCellProps<T>): React.JSX.Element;
-    displayName: string;
-};

package/esm/core/Table/cells/DefaultCell.js

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import { defaultColumn } from 'react-table';
-import cx from 'classnames';
-import { Box, LineClamp, ShadowRoot } from '../../../utils/index.js';
-import { TableInstanceContext } from '../utils.js';
-export const DefaultCell = (props) => {
-  let instance = React.useContext(TableInstanceContext);
-  let isCustomCell = React.useMemo(
-    () =>
-      instance?.columns.find(({ id }) => props.cellProps.column.id === id)
-        ?.Cell !== defaultColumn.Cell,
-    [instance, props.cellProps.column.id],
-  );
-  let {
-    cellElementProps: {
-      className: cellElementClassName,
-      style: cellElementStyle,
-      ...cellElementProps
-    },
-    children,
-    startIcon,
-    endIcon,
-    cellProps,
-    isDisabled,
-    className,
-    style,
-    status,
-    clamp = 'string' == typeof cellProps.value && !isCustomCell,
-    ...rest
-  } = props;
-  return React.createElement(
-    Box,
-    {
-      ...cellElementProps,
-      ...rest,
-      className: cx(cellElementClassName, className),
-      'aria-disabled': isDisabled?.(cellProps.row.original) || void 0,
-      'data-iui-status': status,
-      style: {
-        ...cellElementStyle,
-        ...style,
-      },
-    },
-    React.createElement(
-      ShadowRoot,
-      null,
-      React.createElement('slot', {
-        name: 'start',
-      }),
-      clamp
-        ? React.createElement(
-            LineClamp,
-            null,
-            React.createElement('slot', null),
-          )
-        : React.createElement('slot', null),
-      React.createElement('slot', {
-        name: 'end',
-      }),
-      React.createElement('slot', {
-        name: 'shadows',
-      }),
-    ),
-    startIcon &&
-      React.createElement(
-        Box,
-        {
-          className: 'iui-table-cell-start-icon',
-          slot: 'start',
-        },
-        startIcon,
-      ),
-    children,
-    endIcon &&
-      React.createElement(
-        Box,
-        {
-          className: 'iui-table-cell-end-icon',
-          slot: 'end',
-        },
-        endIcon,
-      ),
-  );
-};

package/esm/core/Table/cells/EditableCell.d.ts

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import type { CellRendererProps } from '../../../react-table/react-table.js';
-export type EditableCellProps<T extends Record<string, unknown>> = CellRendererProps<T> & {
-    /**
-     * Callback function when cell is edited. It is called only when `onBlur` event is fired.
-     * @example
-     * const onCellEdit = React.useCallback(
-     *  (columnId: string, value: string, rowData: T) => {
-     *    setData((oldData) => {
-     *      const newData = [...oldData];
-     *      const index = oldData.indexOf(rowData);
-     *      const newObject = { ...newData[index] };
-     *      newObject[columnId] = value;
-     *      newData[index] = newObject;
-     *      return newData;
-     *    });
-     *  },
-     *  [],
-     * );
-     */
-    onCellEdit: (columnId: string, value: string, rowData: T) => void;
-} & React.ComponentPropsWithoutRef<'div'>;
-/**
- * Editable cell.
- * It should be passed to `cellRenderer`.
- * @example
- * {
- *   Header: 'Name',
- *   accessor: 'name',
- *   cellRenderer: (props) => <EditableCell {...props} onCellEdit={onCellEditHandler} />,
- * }
- */
-export declare const EditableCell: {
-    <T extends Record<string, unknown>>(props: EditableCellProps<T>): React.JSX.Element;
-    displayName: string;
-};

package/esm/core/Table/cells/EditableCell.js

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { Box, getRandomValue } from '../../../utils/index.js';
-import cx from 'classnames';
-export const EditableCell = (props) => {
-  let {
-    cellElementProps: {
-      className: cellElementClassName,
-      style: cellElementStyle,
-      ...cellElementProps
-    },
-    cellProps,
-    onCellEdit,
-    children,
-    isDisabled,
-    className,
-    style,
-    ...rest
-  } = props;
-  let sanitizeString = (text) => text.replace(/(\r\n|\n|\r)+/gm, ' ');
-  let [value, setValue] = React.useState(() => sanitizeString(cellProps.value));
-  React.useEffect(() => {
-    setValue(sanitizeString(cellProps.value));
-  }, [cellProps.value]);
-  let [key, setKey] = React.useState(getRandomValue(10));
-  let [isDirty, setIsDirty] = React.useState(false);
-  return React.createElement(
-    Box,
-    {
-      ...cellElementProps,
-      contentEditable: true,
-      suppressContentEditableWarning: true,
-      key: key,
-      ...rest,
-      className: cx(cellElementClassName, className),
-      style: {
-        ...cellElementStyle,
-        ...style,
-      },
-      onInput: (e) => {
-        setValue(sanitizeString(e.target.innerText));
-        setIsDirty(true);
-        props.onInput?.(e);
-      },
-      onBlur: (e) => {
-        if (isDirty)
-          onCellEdit(cellProps.column.id, value, cellProps.row.original);
-        props.onBlur?.(e);
-        setKey(getRandomValue(10));
-      },
-      onKeyDown: (e) => {
-        if ('Enter' === e.key) e.preventDefault();
-        props.onKeyDown?.(e);
-      },
-      onPaste: (e) => {
-        e.preventDefault();
-        document.execCommand(
-          'inserttext',
-          false,
-          sanitizeString(e.clipboardData.getData('text/plain')),
-        );
-        props.onPaste?.(e);
-      },
-      onDrop: (e) => {
-        e.preventDefault();
-        props.onDrop?.(e);
-      },
-      onClick: (e) => {
-        e.stopPropagation();
-        props.onClick?.(e);
-      },
-    },
-    children,
-  );
-};