@itwin/itwinui-react 3.12.1 → 3.13.0

package/DEV-cjs/core/Table/Table.js

@@ -0,0 +1,538 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Table: function() {
+        return Table;
+    },
+    tableResizeStartAction: function() {
+        return tableResizeStartAction;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _reacttable = require("react-table");
+const _ProgressRadial = require("../ProgressIndicators/ProgressRadial.js");
+const _index = require("../../utils/index.js");
+const _utils = require("./utils.js");
+const _TableRowMemoized = require("./TableRowMemoized.js");
+const _index1 = require("./filters/index.js");
+const _customFilterFunctions = require("./filters/customFilterFunctions.js");
+const _index2 = require("./hooks/index.js");
+const _index3 = require("./actionHandlers/index.js");
+const _index4 = require("./columns/index.js");
+const singleRowSelectedAction = 'singleRowSelected';
+const shiftRowSelectedAction = 'shiftRowSelected';
+const tableResizeStartAction = 'tableResizeStart';
+const tableResizeEndAction = 'tableResizeEnd';
+const COLUMN_MIN_WIDTHS = {
+    default: 72,
+    withExpander: 108
+};
+const logWarning = (0, _index.createWarningLogger)();
+const flattenColumns = (columns)=>{
+    let flatColumns = [];
+    columns.forEach((column)=>{
+        flatColumns.push(column);
+        if ('columns' in column) flatColumns.push(...flattenColumns(column.columns));
+    });
+    return flatColumns;
+};
+const Table = (props)=>{
+    let { data, columns, isLoading = false, emptyTableContent, className, style, id, isSelectable = false, onSelect, onRowClick, selectionMode = 'multi', isSortable = false, onSort, stateReducer, onBottomReached, onRowInViewport, intersectionMargin = 300, subComponent, onExpand, onFilter, globalFilterValue, emptyFilteredTableContent, filterTypes: filterFunctions, expanderCell, isRowDisabled, rowProps, density = 'default', selectSubRows = true, getSubRows, selectRowOnClick = true, paginatorRenderer, pageSize = 25, isResizable = false, columnResizeMode = 'fit', styleType = 'default', enableVirtualization = false, enableColumnReordering = false, headerWrapperProps, headerProps, bodyProps, emptyTableContentProps, ...rest } = props;
+    (0, _index.useGlobals)();
+    let ownerDocument = _react.useRef();
+    let defaultColumn = _react.useMemo(()=>({
+            maxWidth: 0,
+            minWidth: 0,
+            width: 0
+        }), []);
+    let rowHeight = _react.useMemo(()=>{
+        if ('condensed' === density) return 50;
+        if ('extra-condensed' === density) return 38;
+        return 62;
+    }, [
+        density
+    ]);
+    let onBottomReachedRef = (0, _index.useLatestRef)(onBottomReached);
+    let onRowInViewportRef = (0, _index.useLatestRef)(onRowInViewport);
+    let hasManualSelectionColumn = _react.useMemo(()=>{
+        let flatColumns = flattenColumns(columns);
+        return flatColumns.some((column)=>column.id === _index4.SELECTION_CELL_ID);
+    }, [
+        columns
+    ]);
+    let disableUserSelect = _react.useCallback((e)=>{
+        if ('Shift' === e.key) ownerDocument.current && (ownerDocument.current.documentElement.style.userSelect = 'none');
+    }, []);
+    let enableUserSelect = _react.useCallback((e)=>{
+        if ('Shift' === e.key) ownerDocument.current && (ownerDocument.current.documentElement.style.userSelect = '');
+    }, []);
+    _react.useEffect(()=>{
+        if (!isSelectable || 'multi' !== selectionMode) return;
+        let ownerDoc = ownerDocument.current;
+        ownerDoc?.addEventListener('keydown', disableUserSelect);
+        ownerDoc?.addEventListener('keyup', enableUserSelect);
+        return ()=>{
+            ownerDoc?.removeEventListener('keydown', disableUserSelect);
+            ownerDoc?.removeEventListener('keyup', enableUserSelect);
+        };
+    }, [
+        isSelectable,
+        selectionMode,
+        ownerDocument,
+        disableUserSelect,
+        enableUserSelect
+    ]);
+    let previousFilter = _react.useRef([]);
+    let currentFilter = _react.useRef(previousFilter.current);
+    let tableStateReducer = _react.useCallback((newState, action, previousState, instance)=>{
+        switch(action.type){
+            case _reacttable.actions.toggleSortBy:
+                onSort?.(newState);
+                break;
+            case _reacttable.actions.setFilter:
+                currentFilter.current = (0, _index3.onFilterHandler)(newState, action, previousState, currentFilter.current, instance);
+                break;
+            case _reacttable.actions.toggleRowExpanded:
+            case _reacttable.actions.toggleAllRowsExpanded:
+                (0, _index3.onExpandHandler)(newState, instance, onExpand);
+                break;
+            case singleRowSelectedAction:
+                newState = (0, _index3.onSingleSelectHandler)(newState, action, instance, onSelect, hasManualSelectionColumn ? void 0 : isRowDisabled);
+                break;
+            case shiftRowSelectedAction:
+                newState = (0, _index3.onShiftSelectHandler)(newState, action, instance, onSelect, hasManualSelectionColumn ? void 0 : isRowDisabled);
+                break;
+            case _reacttable.actions.toggleRowSelected:
+            case _reacttable.actions.toggleAllRowsSelected:
+            case _reacttable.actions.toggleAllPageRowsSelected:
+                (0, _index3.onToggleHandler)(newState, action, instance, onSelect, hasManualSelectionColumn ? void 0 : isRowDisabled);
+                break;
+            case tableResizeStartAction:
+                newState = (0, _index3.onTableResizeStart)(newState);
+                break;
+            case tableResizeEndAction:
+                newState = (0, _index3.onTableResizeEnd)(newState, action);
+                break;
+            default:
+                break;
+        }
+        return stateReducer ? stateReducer(newState, action, previousState, instance) : newState;
+    }, [
+        hasManualSelectionColumn,
+        isRowDisabled,
+        onExpand,
+        onSelect,
+        onSort,
+        stateReducer
+    ]);
+    let filterTypes = _react.useMemo(()=>({
+            ..._customFilterFunctions.customFilterFunctions,
+            ...filterFunctions
+        }), [
+        filterFunctions
+    ]);
+    let hasAnySubRows = _react.useMemo(()=>data.some((item, index)=>getSubRows ? getSubRows(item, index) : item.subRows), [
+        data,
+        getSubRows
+    ]);
+    let instance = (0, _reacttable.useTable)({
+        manualPagination: !paginatorRenderer,
+        paginateExpandedRows: false,
+        ...props,
+        columns,
+        defaultColumn,
+        disableSortBy: !isSortable,
+        stateReducer: tableStateReducer,
+        filterTypes,
+        selectSubRows,
+        data,
+        getSubRows,
+        initialState: {
+            pageSize,
+            ...props.initialState
+        },
+        columnResizeMode
+    }, _reacttable.useFlexLayout, (0, _index2.useResizeColumns)(ownerDocument), _reacttable.useFilters, (0, _index2.useSubRowFiltering)(hasAnySubRows), _reacttable.useGlobalFilter, _reacttable.useSortBy, _reacttable.useExpanded, _reacttable.usePagination, _reacttable.useRowSelect, _index2.useSubRowSelection, (0, _index2.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, _index2.useSelectionCell)(isSelectable, selectionMode, isRowDisabled, density), _reacttable.useColumnOrder, (0, _index2.useColumnDragAndDrop)(enableColumnReordering), _index2.useStickyColumns);
+    let { getTableProps, rows, headerGroups: _headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter } = instance;
+    let headerGroups = _headerGroups;
+    if (1 === columns.length && 'columns' in columns[0]) {
+        headerGroups = _headerGroups.slice(1);
+        logWarning("Table's `columns` prop should not have a top-level `Header` or sub-columns. They are only allowed to be passed for backwards compatibility.\n See https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes");
+    }
+    let ariaDataAttributes = Object.entries(rest).reduce((result, [key, value])=>{
+        if (key.startsWith('data-') || key.startsWith('aria-')) result[key] = value;
+        return result;
+    }, {});
+    let areFiltersSet = allColumns.some((column)=>null != column.filterValue && '' !== column.filterValue) || !!globalFilterValue;
+    let showFilterButton = (column)=>(0 !== data.length || areFiltersSet) && column.canFilter && !!column.Filter;
+    let showSortButton = (column)=>0 !== data.length && column.canSort;
+    let onRowClickHandler = _react.useCallback((event, row)=>{
+        let isDisabled = isRowDisabled?.(row.original);
+        let ctrlPressed = event.ctrlKey || event.metaKey;
+        if (!isDisabled) onRowClick?.(event, row);
+        if (isSelectable && !isDisabled && selectRowOnClick && !event.isDefaultPrevented()) {
+            if ('multi' === selectionMode && event.shiftKey) dispatch({
+                type: shiftRowSelectedAction,
+                id: row.id,
+                ctrlPressed: ctrlPressed
+            });
+            else if (row.isSelected || 'single' !== selectionMode && ctrlPressed) row.toggleRowSelected(!row.isSelected);
+            else dispatch({
+                type: singleRowSelectedAction,
+                id: row.id
+            });
+        }
+    }, [
+        isRowDisabled,
+        isSelectable,
+        selectRowOnClick,
+        selectionMode,
+        dispatch,
+        onRowClick
+    ]);
+    _react.useEffect(()=>{
+        setGlobalFilter(globalFilterValue);
+    }, [
+        globalFilterValue,
+        setGlobalFilter
+    ]);
+    _react.useEffect(()=>{
+        setPageSize(pageSize);
+    }, [
+        pageSize,
+        setPageSize
+    ]);
+    _react.useEffect(()=>{
+        if (previousFilter.current !== currentFilter.current) {
+            previousFilter.current = currentFilter.current;
+            onFilter?.(currentFilter.current, state, instance.filteredRows);
+        }
+    }, [
+        state,
+        instance.filteredRows,
+        onFilter
+    ]);
+    let lastPassedColumns = _react.useRef([]);
+    _react.useEffect(()=>{
+        if (lastPassedColumns.current.length > 0 && JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) instance.setColumnOrder([]);
+        lastPassedColumns.current = columns;
+    }, [
+        columns,
+        instance
+    ]);
+    let paginatorRendererProps = _react.useMemo(()=>({
+            currentPage: state.pageIndex,
+            pageSize: state.pageSize,
+            totalRowsCount: rows.length,
+            size: 'default' !== density ? 'small' : 'default',
+            isLoading,
+            onPageChange: gotoPage,
+            onPageSizeChange: setPageSize,
+            totalSelectedRowsCount: 'single' === selectionMode ? 0 : instance.selectedFlatRows.length
+        }), [
+        density,
+        gotoPage,
+        isLoading,
+        rows.length,
+        setPageSize,
+        state.pageIndex,
+        state.pageSize,
+        instance.selectedFlatRows,
+        selectionMode
+    ]);
+    let tableRef = _react.useRef(null);
+    let { scrollToIndex, tableRowRef } = (0, _index2.useScrollToRow)({
+        ...props,
+        page
+    });
+    let columnRefs = _react.useRef({});
+    let previousTableWidth = _react.useRef(0);
+    let onTableResize = _react.useCallback(({ width })=>{
+        if (!isResizable) return;
+        instance.tableWidth = width;
+        if (width === previousTableWidth.current) return;
+        previousTableWidth.current = width;
+        flatHeaders.forEach((header)=>{
+            if (columnRefs.current[header.id]) header.resizeWidth = columnRefs.current[header.id].getBoundingClientRect().width;
+        });
+        if (0 === Object.keys(state.columnResizing.columnWidths).length) return;
+        dispatch({
+            type: tableResizeStartAction
+        });
+    }, [
+        dispatch,
+        state.columnResizing.columnWidths,
+        flatHeaders,
+        instance,
+        isResizable
+    ]);
+    let [resizeRef] = (0, _index.useResizeObserver)(onTableResize);
+    (0, _index.useLayoutEffect)(()=>{
+        if (state.isTableResizing) {
+            let newColumnWidths = {};
+            flatHeaders.forEach((column)=>{
+                if (columnRefs.current[column.id]) newColumnWidths[column.id] = columnRefs.current[column.id].getBoundingClientRect().width;
+            });
+            dispatch({
+                type: tableResizeEndAction,
+                columnWidths: newColumnWidths
+            });
+        }
+    });
+    let virtualizer = (0, _index.useVirtualScroll)({
+        count: page.length,
+        getScrollElement: ()=>tableRef.current,
+        estimateSize: ()=>rowHeight,
+        getItemKey: (index)=>page[index].id,
+        overscan: 1
+    });
+    (0, _index.useLayoutEffect)(()=>{
+        if (scrollToIndex) virtualizer.scrollToIndex(scrollToIndex, {
+            align: 'center'
+        });
+    }, [
+        virtualizer,
+        scrollToIndex
+    ]);
+    let getPreparedRow = _react.useCallback((index, virtualItem, virtualizer)=>{
+        let row = page[index];
+        prepareRow(row);
+        return _react.createElement(_TableRowMemoized.TableRowMemoized, {
+            row: row,
+            rowProps: rowProps,
+            isLast: index === page.length - 1,
+            onRowInViewport: onRowInViewportRef,
+            onBottomReached: onBottomReachedRef,
+            intersectionMargin: intersectionMargin,
+            state: state,
+            key: row.getRowProps().key,
+            onClick: onRowClickHandler,
+            subComponent: subComponent,
+            isDisabled: !!isRowDisabled?.(row.original),
+            tableHasSubRows: hasAnySubRows,
+            tableInstance: instance,
+            expanderCell: expanderCell,
+            scrollContainerRef: tableRef.current,
+            tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
+            density: density,
+            virtualItem: virtualItem,
+            virtualizer: virtualizer
+        });
+    }, [
+        page,
+        prepareRow,
+        rowProps,
+        intersectionMargin,
+        state,
+        onRowClickHandler,
+        subComponent,
+        isRowDisabled,
+        hasAnySubRows,
+        instance,
+        expanderCell,
+        enableVirtualization,
+        tableRowRef,
+        density,
+        onBottomReachedRef,
+        onRowInViewportRef
+    ]);
+    let updateStickyState = ()=>{
+        if (!tableRef.current || flatHeaders.every((header)=>!header.sticky)) return;
+        0 !== tableRef.current.scrollLeft ? dispatch({
+            type: _reacttable.actions.setScrolledRight,
+            value: true
+        }) : dispatch({
+            type: _reacttable.actions.setScrolledRight,
+            value: false
+        });
+        tableRef.current.scrollLeft !== tableRef.current.scrollWidth - tableRef.current.clientWidth ? dispatch({
+            type: _reacttable.actions.setScrolledLeft,
+            value: true
+        }) : dispatch({
+            type: _reacttable.actions.setScrolledLeft,
+            value: false
+        });
+    };
+    _react.useEffect(()=>{
+        updateStickyState();
+    }, []);
+    let isHeaderDirectClick = _react.useRef(false);
+    let columnResizeRef = _react.useCallback((el, column)=>{
+        if (el) {
+            columnRefs.current[column.id] = el;
+            column.resizeWidth = el.getBoundingClientRect().width;
+        }
+    }, []);
+    return _react.createElement(_utils.TableColumnsContext.Provider, {
+        value: columns
+    }, _react.createElement(_index.Box, {
+        ref: (0, _index.useMergedRefs)(tableRef, resizeRef, _react.useCallback((element)=>{
+            ownerDocument.current = element?.ownerDocument;
+        }, [])),
+        id: id,
+        ...getTableProps({
+            className: (0, _classnames.default)('iui-table', className),
+            style: {
+                minWidth: 0,
+                ...style
+            }
+        }),
+        onScroll: ()=>updateStickyState(),
+        "data-iui-size": 'default' === density ? void 0 : density,
+        ...ariaDataAttributes
+    }, headerGroups.map((headerGroup)=>{
+        headerGroup.headers = headerGroup.headers.filter((header)=>!header.id.includes('iui-table-checkbox-selector_placeholder') && !header.id.includes('iui-table-expander_placeholder'));
+        let headerGroupProps = headerGroup.getHeaderGroupProps({
+            className: 'iui-table-row'
+        });
+        return _react.createElement(_index.Box, {
+            as: "div",
+            key: headerGroupProps.key,
+            ...headerWrapperProps,
+            className: (0, _classnames.default)('iui-table-header-wrapper', headerWrapperProps?.className)
+        }, _react.createElement(_index.Box, {
+            as: "div",
+            ...headerProps,
+            className: (0, _classnames.default)('iui-table-header', headerProps?.className)
+        }, _react.createElement(_index.Box, headerGroupProps, headerGroup.headers.map((column, index)=>{
+            let { onClick, ...restSortProps } = column.getSortByToggleProps();
+            let columnHasExpanders = hasAnySubRows && index === headerGroup.headers.findIndex((c)=>c.id !== _index4.SELECTION_CELL_ID);
+            if ([
+                void 0,
+                0
+            ].includes(column.minWidth)) column.minWidth = columnHasExpanders ? COLUMN_MIN_WIDTHS.withExpander : COLUMN_MIN_WIDTHS.default;
+            let columnProps = column.getHeaderProps({
+                ...restSortProps,
+                className: (0, _classnames.default)('iui-table-cell', {
+                    'iui-actionable': column.canSort,
+                    'iui-sorted': column.isSorted,
+                    'iui-table-cell-sticky': !!column.sticky
+                }, column.columnClassName),
+                style: {
+                    ...(0, _utils.getCellStyle)(column, !!state.isTableResizing),
+                    ...columnHasExpanders && (0, _utils.getSubRowStyle)({
+                        density
+                    }),
+                    ...(0, _utils.getStickyStyle)(column, visibleColumns),
+                    flexWrap: 'wrap',
+                    columnGap: 'var(--iui-size-xs)'
+                }
+            });
+            return _react.createElement(_index.Box, {
+                ...columnProps,
+                ...column.getDragAndDropProps(),
+                key: columnProps.key,
+                title: void 0,
+                ref: (el)=>{
+                    columnResizeRef(el, column);
+                },
+                onMouseDown: ()=>{
+                    isHeaderDirectClick.current = true;
+                },
+                onClick: (e)=>{
+                    if (isHeaderDirectClick.current) {
+                        onClick?.(e);
+                        isHeaderDirectClick.current = false;
+                    }
+                },
+                tabIndex: showSortButton(column) ? 0 : void 0,
+                onKeyDown: (e)=>{
+                    if ('Enter' == e.key && showSortButton(column)) column.toggleSortBy();
+                }
+            }, _react.createElement(_react.Fragment, null, _react.createElement(_index.ShadowRoot, null, 'string' == typeof column.Header ? _react.createElement(_index.LineClamp, null, _react.createElement("slot", null)) : _react.createElement("slot", null), _react.createElement("slot", {
+                name: "actions"
+            }), _react.createElement("slot", {
+                name: "resizers"
+            }), _react.createElement("slot", {
+                name: "shadows"
+            })), column.render('Header'), (showFilterButton(column) || showSortButton(column)) && _react.createElement(_index.Box, {
+                className: "iui-table-header-actions-container",
+                onKeyDown: (e)=>e.stopPropagation(),
+                slot: "actions"
+            }, showFilterButton(column) && _react.createElement(_index1.FilterToggle, {
+                column: column
+            }), showSortButton(column) && _react.createElement(_index.Box, {
+                className: "iui-table-cell-end-icon"
+            }, column.isSortedDesc || !column.isSorted && column.sortDescFirst ? _react.createElement(_index.SvgSortDown, {
+                className: "iui-table-sort",
+                "aria-hidden": true
+            }) : _react.createElement(_index.SvgSortUp, {
+                className: "iui-table-sort",
+                "aria-hidden": true
+            }))), isResizable && column.isResizerVisible && (index !== headerGroup.headers.length - 1 || 'expand' === columnResizeMode) && _react.createElement(_index.Box, {
+                ...column.getResizerProps(),
+                className: "iui-table-resizer",
+                slot: "resizers"
+            }, _react.createElement(_index.Box, {
+                className: "iui-table-resizer-bar"
+            })), enableColumnReordering && !column.disableReordering && _react.createElement(_index.Box, {
+                className: "iui-table-reorder-bar",
+                slot: "resizers"
+            }), 'left' === column.sticky && state.sticky.isScrolledToRight && _react.createElement(_index.Box, {
+                className: "iui-table-cell-shadow-right",
+                slot: "shadows"
+            }), 'right' === column.sticky && state.sticky.isScrolledToLeft && _react.createElement(_index.Box, {
+                className: "iui-table-cell-shadow-left",
+                slot: "shadows"
+            })));
+        }))));
+    }), _react.createElement(_index.Box, {
+        as: "div",
+        ...bodyProps,
+        ...getTableBodyProps({
+            className: (0, _classnames.default)('iui-table-body', {
+                'iui-zebra-striping': 'zebra-rows' === styleType
+            }, bodyProps?.className),
+            style: {
+                outline: 0
+            }
+        }),
+        tabIndex: -1,
+        "aria-multiselectable": isSelectable && 'multi' === selectionMode || void 0
+    }, _react.createElement(_index.ShadowRoot, {
+        css: `
+              div,
+              slot {
+                border-radius: inherit;
+              }
+            `
+    }, enableVirtualization ? _react.createElement("div", {
+        style: {
+            minBlockSize: virtualizer.getTotalSize(),
+            minInlineSize: '100%',
+            contain: 'strict'
+        }
+    }, _react.createElement("slot", null)) : _react.createElement("slot", null)), 0 !== data.length && _react.createElement(_react.Fragment, null, enableVirtualization ? virtualizer.getVirtualItems().map((virtualItem)=>getPreparedRow(virtualItem.index, virtualItem, virtualizer)) : page.map((_, index)=>getPreparedRow(index))), isLoading && 0 === data.length && _react.createElement(_index.Box, {
+        as: "div",
+        ...emptyTableContentProps,
+        className: (0, _classnames.default)('iui-table-empty', emptyTableContentProps?.className)
+    }, _react.createElement(_ProgressRadial.ProgressRadial, {
+        indeterminate: true
+    })), !isLoading && 0 === data.length && !areFiltersSet && _react.createElement(_index.Box, {
+        as: "div",
+        ...emptyTableContentProps,
+        className: (0, _classnames.default)('iui-table-empty', emptyTableContentProps?.className)
+    }, _react.createElement("div", null, emptyTableContent)), !isLoading && (0 === data.length || 0 === rows.length) && areFiltersSet && _react.createElement(_index.Box, {
+        as: "div",
+        ...emptyTableContentProps,
+        className: (0, _classnames.default)('iui-table-empty', emptyTableContentProps?.className)
+    }, _react.createElement("div", null, emptyFilteredTableContent))), isLoading && 0 !== data.length && _react.createElement(_index.Box, {
+        className: "iui-table-body-extra",
+        "data-iui-loading": "true"
+    }, _react.createElement(_ProgressRadial.ProgressRadial, {
+        indeterminate: true,
+        size: "small"
+    })), paginatorRenderer?.(paginatorRendererProps)));
+};
+Table.displayName = 'Table';

package/DEV-cjs/core/Table/TableCell.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableCell", {
+    enumerable: true,
+    get: function() {
+        return TableCell;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _utils = require("./utils.js");
+const _SubRowExpander = require("./SubRowExpander.js");
+const _index = require("./columns/index.js");
+const _index1 = require("./cells/index.js");
+const _index2 = require("../../utils/index.js");
+const TableCell = (props)=>{
+    let { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density } = props;
+    let hasSubRowExpander = cellIndex === cell.row.cells.findIndex((c)=>c.column.id !== _index.SELECTION_CELL_ID);
+    let cellElementProps = cell.getCellProps({
+        className: (0, _classnames.default)('iui-table-cell', cell.column.cellClassName, {
+            'iui-table-cell-sticky': !!cell.column.sticky
+        }),
+        style: {
+            ...(0, _utils.getCellStyle)(cell.column, !!tableInstance.state.isTableResizing),
+            ...tableHasSubRows && hasSubRowExpander && (0, _utils.getSubRowStyle)({
+                density,
+                depth: cell.row.depth + (cell.row.canExpand ? 0 : 1)
+            }),
+            ...(0, _utils.getStickyStyle)(cell.column, tableInstance.visibleColumns)
+        }
+    });
+    let cellProps = {
+        ...tableInstance,
+        cell,
+        row: cell.row,
+        value: cell.value,
+        column: cell.column
+    };
+    let cellContent = _react.createElement(_react.Fragment, null, tableHasSubRows && hasSubRowExpander && cell.row.canExpand && _react.createElement(_SubRowExpander.SubRowExpander, {
+        cell: cell,
+        isDisabled: isDisabled,
+        cellProps: cellProps,
+        expanderCell: expanderCell,
+        density: density,
+        slot: "start"
+    }), cell.render('Cell'));
+    let cellRendererProps = {
+        cellElementProps,
+        cellProps,
+        children: _react.createElement(_react.Fragment, null, cellContent, 'left' === cell.column.sticky && tableInstance.state.sticky.isScrolledToRight && _react.createElement(_index2.Box, {
+            className: "iui-table-cell-shadow-right",
+            slot: "shadows"
+        }), 'right' === cell.column.sticky && tableInstance.state.sticky.isScrolledToLeft && _react.createElement(_index2.Box, {
+            className: "iui-table-cell-shadow-left",
+            slot: "shadows"
+        }))
+    };
+    return _react.createElement(_react.Fragment, null, cell.column.cellRenderer ? cell.column.cellRenderer({
+        ...cellRendererProps,
+        isDisabled: ()=>isDisabled
+    }) : _react.createElement(_index1.DefaultCell, {
+        ...cellRendererProps,
+        isDisabled: ()=>isDisabled
+    }));
+};