@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-esm/core/Table/TableRowMemoized.js

@@ -1,81 +1,175 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, useIntersection, useMergedRefs, WithCSSTransition } from '../../utils/index.js';
+import {
+  Box,
+  useIntersection,
+  useMergedRefs,
+  WithCSSTransition,
+} 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)`
-                } : {}
+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, {
+          : {}),
+      },
+    }),
+    ...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
-        }))), subComponent && React.createElement(WithCSSTransition, {
-        in: row.isExpanded
-    }, React.createElement(Box, {
-        className: cx('iui-table-row', 'iui-table-expanded-content'),
-        "aria-disabled": isDisabled
-    }, subComponent(row))));
+        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,
+        }),
+      ),
+    ),
+    subComponent &&
+      React.createElement(
+        WithCSSTransition,
+        {
+          in: row.isExpanded,
+        },
+        React.createElement(
+          Box,
+          {
+            className: cx('iui-table-row', 'iui-table-expanded-content'),
+            'aria-disabled': isDisabled,
+          },
+          subComponent(row),
+        ),
+      ),
+  );
 };
-let hasAnySelectedSubRow = (row, selectedRowIds)=>{
-    if (selectedRowIds?.[row.id]) return true;
-    return row.subRows.some((subRow)=>hasAnySelectedSubRow(subRow, selectedRowIds));
+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);
+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/DEV-esm/core/Table/actionHandlers/expandHandler.js

@@ -1,11 +1,11 @@
-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);
+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/DEV-esm/core/Table/actionHandlers/filterHandler.js

@@ -1,16 +1,24 @@
-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;
+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/DEV-esm/core/Table/actionHandlers/index.js

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

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

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

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

@@ -1,79 +1,114 @@
-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);
+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 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
+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));
     };
-    onSelectHandler(newState, instance, onSelect, isRowDisabled);
-    return newState;
+    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;
+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;
+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/DEV-esm/core/Table/cells/DefaultCell.js

@@ -2,35 +2,84 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box, LineClamp, ShadowRoot } from '../../../utils/index.js';
 import { TableColumnsContext } from '../utils.js';
-export const DefaultCell = (props)=>{
-    let columnsProp = React.useContext(TableColumnsContext);
-    let isCustomCell = React.useMemo(()=>columnsProp.find(({ id })=>props.cellProps.column.id === id)?.hasOwnProperty('Cell'), [
-        props.cellProps.column.id,
-        columnsProp
-    ]);
-    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));
+export const DefaultCell = (props) => {
+  let columnsProp = React.useContext(TableColumnsContext);
+  let isCustomCell = React.useMemo(
+    () =>
+      columnsProp
+        .find(({ id }) => props.cellProps.column.id === id)
+        ?.hasOwnProperty('Cell'),
+    [props.cellProps.column.id, columnsProp],
+  );
+  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,
+      ),
+  );
 };
 DefaultCell.displayName = 'DefaultCell';