@itwin/itwinui-react 3.12.2 → 3.13.0

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

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Button } from '../Buttons/Button.js';
+import { DropdownButton } from '../Buttons/DropdownButton.js';
+import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
+import { MenuItem } from '../Menu/MenuItem.js';
+import { getBoundedValue, useGlobals, useOverflow, useContainerWidth, SvgChevronLeft, SvgChevronRight, Box } from '../../utils/index.js';
+let defaultLocalization = {
+    pageSizeLabel: (size)=>`${size} per page`,
+    rangeLabel: (startIndex, endIndex, totalRows, isLoading)=>isLoading ? `${startIndex}-${endIndex}…` : `${startIndex}-${endIndex} of ${totalRows}`,
+    previousPage: 'Previous page',
+    nextPage: 'Next page',
+    goToPageLabel: (page)=>`Go to page ${page}`,
+    rowsPerPageLabel: 'Rows per page',
+    rowsSelectedLabel: (totalSelectedRowsCount)=>`${totalSelectedRowsCount} ${1 === totalSelectedRowsCount ? 'row' : 'rows'} selected`
+};
+export const TablePaginator = (props)=>{
+    let { currentPage, totalRowsCount, pageSize, onPageChange, totalSelectedRowsCount = 0, focusActivationMode = 'manual', isLoading = false, size = 'default', pageSizeList, onPageSizeChange, localization: userLocalization, className, ...rest } = props;
+    useGlobals();
+    let localization = React.useMemo(()=>({
+            ...defaultLocalization,
+            ...userLocalization
+        }), [
+        userLocalization
+    ]);
+    let pageListRef = React.useRef(null);
+    let [focusedIndex, setFocusedIndex] = React.useState(currentPage);
+    React.useEffect(()=>{
+        setFocusedIndex(currentPage);
+    }, [
+        currentPage
+    ]);
+    let needFocus = React.useRef(false);
+    let isMounted = React.useRef(false);
+    React.useEffect(()=>{
+        if (isMounted.current && needFocus.current) {
+            let buttonToFocus = Array.from(pageListRef.current?.querySelectorAll('.iui-table-paginator-page-button') ?? []).find((el)=>el.textContent?.trim() === (focusedIndex + 1).toString());
+            buttonToFocus?.focus();
+            needFocus.current = false;
+        }
+        isMounted.current = true;
+    }, [
+        focusedIndex
+    ]);
+    let buttonSize = 'default' != size ? 'small' : void 0;
+    let pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1)=>React.createElement(Button, {
+            key: index,
+            className: "iui-table-paginator-page-button",
+            styleType: "borderless",
+            size: buttonSize,
+            "data-iui-active": index === currentPage,
+            onClick: ()=>onPageChange(index),
+            "aria-current": index === currentPage,
+            "aria-label": localization.goToPageLabel(index + 1),
+            tabIndex: tabIndex
+        }, index + 1), [
+        focusedIndex,
+        currentPage,
+        localization,
+        buttonSize,
+        onPageChange
+    ]);
+    let totalPagesCount = Math.ceil(totalRowsCount / pageSize);
+    let pageList = React.useMemo(()=>new Array(totalPagesCount).fill(null).map((_, index)=>pageButton(index)), [
+        pageButton,
+        totalPagesCount
+    ]);
+    let [overflowRef, visibleCount] = useOverflow(pageList);
+    let [paginatorResizeRef, paginatorWidth] = useContainerWidth();
+    let onKeyDown = (event)=>{
+        if (event.altKey) return;
+        let focusPage = (delta)=>{
+            let newFocusedIndex = getBoundedValue(focusedIndex + delta, 0, totalPagesCount - 1);
+            needFocus.current = true;
+            if ('auto' === focusActivationMode) onPageChange(newFocusedIndex);
+            else setFocusedIndex(newFocusedIndex);
+        };
+        switch(event.key){
+            case 'ArrowRight':
+                focusPage(1);
+                event.preventDefault();
+                break;
+            case 'ArrowLeft':
+                focusPage(-1);
+                event.preventDefault();
+                break;
+            case 'Enter':
+            case ' ':
+            case 'Spacebar':
+                if ('manual' === focusActivationMode) onPageChange(focusedIndex);
+                break;
+            default:
+                break;
+        }
+    };
+    let halfVisibleCount = Math.floor(visibleCount / 2);
+    let startPage = focusedIndex - halfVisibleCount;
+    let endPage = focusedIndex + halfVisibleCount + 1;
+    if (startPage < 0) {
+        endPage = Math.min(totalPagesCount, endPage + Math.abs(startPage));
+        startPage = 0;
+    }
+    if (endPage > totalPagesCount) {
+        startPage = Math.max(0, startPage - (endPage - totalPagesCount));
+        endPage = totalPagesCount;
+    }
+    let hasNoRows = 0 === totalPagesCount;
+    let showPagesList = totalPagesCount > 1 || isLoading;
+    let showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
+    let ellipsis = React.createElement(Box, {
+        as: "span",
+        className: cx('iui-table-paginator-ellipsis', {
+            'iui-table-paginator-ellipsis-small': 'small' === size
+        })
+    }, "…");
+    let noRowsContent = React.createElement(React.Fragment, null, isLoading ? React.createElement(ProgressRadial, {
+        indeterminate: true,
+        size: "small"
+    }) : React.createElement(Button, {
+        styleType: "borderless",
+        disabled: true,
+        size: buttonSize
+    }, "1"));
+    if (!showPagesList && !showPageSizeList) return null;
+    return React.createElement(Box, {
+        className: cx('iui-table-paginator', className),
+        ref: paginatorResizeRef,
+        ...rest
+    }, React.createElement(Box, {
+        className: "iui-left"
+    }, totalSelectedRowsCount > 0 && React.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount))), showPagesList && React.createElement(Box, {
+        className: "iui-center",
+        ref: overflowRef
+    }, React.createElement(IconButton, {
+        styleType: "borderless",
+        disabled: 0 === currentPage,
+        onClick: ()=>onPageChange(currentPage - 1),
+        size: buttonSize,
+        "aria-label": localization.previousPage
+    }, React.createElement(SvgChevronLeft, null)), React.createElement(Box, {
+        as: "span",
+        className: "iui-table-paginator-pages-group",
+        onKeyDown: onKeyDown,
+        ref: pageListRef
+    }, (()=>{
+        if (hasNoRows) return noRowsContent;
+        if (1 === visibleCount) return pageButton(focusedIndex);
+        return React.createElement(React.Fragment, null, 0 !== startPage && React.createElement(React.Fragment, null, pageButton(0, 0), ellipsis), pageList.slice(startPage, endPage), endPage !== totalPagesCount && !isLoading && React.createElement(React.Fragment, null, ellipsis, pageButton(totalPagesCount - 1, 0)), isLoading && React.createElement(React.Fragment, null, ellipsis, React.createElement(ProgressRadial, {
+            indeterminate: true,
+            size: "small"
+        })));
+    })()), React.createElement(IconButton, {
+        styleType: "borderless",
+        disabled: currentPage === totalPagesCount - 1 || hasNoRows,
+        onClick: ()=>onPageChange(currentPage + 1),
+        size: buttonSize,
+        "aria-label": localization.nextPage
+    }, React.createElement(SvgChevronRight, null))), React.createElement(Box, {
+        className: "iui-right"
+    }, showPageSizeList && React.createElement(React.Fragment, null, null !== localization.rowsPerPageLabel && paginatorWidth >= 1024 && React.createElement(Box, {
+        as: "span",
+        className: "iui-table-paginator-page-size-label"
+    }, localization.rowsPerPageLabel), React.createElement(DropdownButton, {
+        styleType: "borderless",
+        size: buttonSize,
+        menuItems: (close)=>pageSizeList.map((size)=>React.createElement(MenuItem, {
+                    key: size,
+                    isSelected: size === pageSize,
+                    onClick: ()=>{
+                        close();
+                        onPageSizeChange(size);
+                    }
+                }, localization.pageSizeLabel(size)))
+    }, localization.rangeLabel(currentPage * pageSize + 1, Math.min(totalRowsCount, (currentPage + 1) * pageSize), totalRowsCount, isLoading)))));
+};

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

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import cx from 'classnames';
+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 ? {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    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
+    };
+    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))));
+};
+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/DEV-esm/core/Table/actionHandlers/expandHandler.js

@@ -0,0 +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);
+};

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

@@ -0,0 +1,16 @@
+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

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

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,79 @@
+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/DEV-esm/core/Table/cells/DefaultCell.js

@@ -0,0 +1,36 @@
+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));
+};
+DefaultCell.displayName = 'DefaultCell';

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

@@ -0,0 +1,55 @@
+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);
+};
+EditableCell.displayName = 'EditableCell';

package/DEV-esm/core/Table/cells/index.js

@@ -0,0 +1,2 @@
+export { DefaultCell } from './DefaultCell.js';
+export { EditableCell } from './EditableCell.js';

package/DEV-esm/core/Table/columns/actionColumn.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+import { FieldsetBase, SvgColumnManager } from '../../../utils/index.js';
+import { IconButton } from '../../Buttons/IconButton.js';
+import { tableResizeStartAction } from '../Table.js';
+import { SELECTION_CELL_ID } from './selectionColumn.js';
+import { EXPANDER_CELL_ID } from './expanderColumn.js';
+import { Popover } from '../../Popover/Popover.js';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.js';
+import { Flex } from '../../Flex/Flex.js';
+let ACTION_CELL_ID = 'iui-table-action';
+export const ActionColumn = ({ columnManager = false } = {})=>({
+        id: ACTION_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        disableReordering: true,
+        Header: ({ allColumns, dispatch, state })=>{
+            let buttonRef = React.useRef(null);
+            if (!columnManager) return null;
+            let defaultColumnIds = [
+                SELECTION_CELL_ID,
+                EXPANDER_CELL_ID,
+                ACTION_CELL_ID
+            ];
+            let headerCheckBoxes = ()=>allColumns.filter(({ id })=>!defaultColumnIds.includes(id)).map((column)=>{
+                    let { checked } = column.getToggleHiddenProps();
+                    let onChange = ()=>{
+                        column.toggleHidden(checked);
+                        if (0 === Object.keys(state.columnResizing.columnWidths).length) return;
+                        dispatch({
+                            type: tableResizeStartAction
+                        });
+                        queueMicrotask(()=>{
+                            buttonRef.current?.scrollIntoView({
+                                block: 'nearest'
+                            });
+                        });
+                    };
+                    return React.createElement(Checkbox, {
+                        key: column.id,
+                        checked: checked,
+                        disabled: column.disableToggleVisibility,
+                        onChange: onChange,
+                        label: column.render('Header')
+                    });
+                });
+            let popoverProps = 'boolean' != typeof columnManager ? columnManager.dropdownMenuProps : {};
+            return React.createElement(Popover, {
+                applyBackground: true,
+                content: React.createElement(Flex, {
+                    as: FieldsetBase,
+                    className: "iui-table-column-manager",
+                    flexDirection: "column",
+                    alignItems: "flex-start"
+                }, React.createElement(VisuallyHidden, {
+                    as: "legend"
+                }, "Show/hide columns"), headerCheckBoxes()),
+                ...popoverProps
+            }, React.createElement(IconButton, {
+                styleType: "borderless",
+                ref: buttonRef,
+                label: "Column manager"
+            }, React.createElement(SvgColumnManager, null)));
+        }
+    });

package/DEV-esm/core/Table/columns/expanderColumn.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { SvgChevronRight } from '../../../utils/index.js';
+import { IconButton } from '../../Buttons/IconButton.js';
+import { DefaultCell } from '../cells/index.js';
+export const EXPANDER_CELL_ID = 'iui-table-expander';
+export const ExpanderColumn = (props = {})=>{
+    let { subComponent, isDisabled } = props;
+    return {
+        id: EXPANDER_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        disableReordering: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        Cell: (props)=>{
+            let { row } = props;
+            if (subComponent?.(row)) return React.createElement(IconButton, {
+                className: "iui-table-row-expander",
+                styleType: "borderless",
+                size: "small",
+                onClick: (e)=>{
+                    e.stopPropagation();
+                    row.toggleRowExpanded();
+                },
+                disabled: isDisabled?.(props.row.original),
+                "aria-expanded": row.isExpanded
+            }, React.createElement(SvgChevronRight, null));
+            return null;
+        },
+        cellRenderer: (props)=>React.createElement(DefaultCell, {
+                ...props,
+                isDisabled: (rowData)=>!!isDisabled?.(rowData)
+            })
+    };
+};

package/DEV-esm/core/Table/columns/index.js

@@ -0,0 +1,3 @@
+export { ActionColumn } from './actionColumn.js';
+export { SELECTION_CELL_ID, SelectionColumn } from './selectionColumn.js';
+export { EXPANDER_CELL_ID, ExpanderColumn } from './expanderColumn.js';

package/DEV-esm/core/Table/columns/selectionColumn.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+import { DefaultCell } from '../cells/index.js';
+export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
+export const SelectionColumn = (props = {})=>{
+    let { isDisabled, density } = props;
+    let densityWidth = 'condensed' === density ? 42 : 'extra-condensed' === density ? 34 : 48;
+    return {
+        id: SELECTION_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        disableReordering: true,
+        minWidth: densityWidth,
+        width: densityWidth,
+        maxWidth: densityWidth,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state })=>{
+            let disabled = preFilteredFlatRows.every((row)=>isDisabled?.(row.original));
+            let checked = preFilteredFlatRows.every((row)=>state.selectedRowIds[row.id] || isDisabled?.(row.original));
+            let indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
+            return React.createElement(Checkbox, {
+                ...getToggleAllRowsSelectedProps(),
+                style: {},
+                title: "",
+                checked: checked && !disabled,
+                indeterminate: indeterminate,
+                disabled: disabled,
+                onChange: ()=>toggleAllRowsSelected(!rows.some((row)=>row.isSelected))
+            });
+        },
+        Cell: ({ row, selectSubRows = true })=>React.createElement(Checkbox, {
+                ...row.getToggleRowSelectedProps(),
+                style: {},
+                title: "",
+                disabled: isDisabled?.(row.original),
+                onClick: (e)=>e.stopPropagation(),
+                onChange: ()=>{
+                    if (row.subRows.length > 0 && selectSubRows) row.toggleRowSelected(!row.subRows.every((subRow)=>subRow.isSelected || isDisabled?.(subRow.original)));
+                    else row.toggleRowSelected();
+                }
+            }),
+        cellRenderer: (props)=>React.createElement(DefaultCell, {
+                ...props,
+                isDisabled: (rowData)=>!!isDisabled?.(rowData)
+            })
+    };
+};

package/DEV-esm/core/Table/filters/BaseFilter.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box, useGlobals } from '../../../utils/index.js';
+export const BaseFilter = (props)=>{
+    let { children, className, style, id } = props;
+    useGlobals();
+    return React.createElement(Box, {
+        className: cx('iui-table-column-filter', className),
+        style: style,
+        onClick: (e)=>{
+            e.stopPropagation();
+        },
+        id: id
+    }, children);
+};