@itwin/itwinui-react 3.6.2 → 3.7.0

package/esm/core/Table/Table.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useLayoutEffect, Box, createWarningLogger, ShadowRoot, } from '../utils/index.js';
+import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useLayoutEffect, Box, createWarningLogger, ShadowRoot, LineClamp, useMergedRefs, } from '../utils/index.js';
 import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { FilterToggle } from './filters/index.js';
@@ -19,6 +19,10 @@ const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
 const tableResizeEndAction = 'tableResizeEnd';
+const COLUMN_MIN_WIDTHS = {
+    default: 72,
+    withExpander: 108, // expander column should be wider to accommodate the expander icon
+};
 const logWarningInDev = createWarningLogger();
 const flattenColumns = (columns) => {
     const flatColumns = [];
@@ -287,15 +291,11 @@ export const Table = (props) => {
         instance.selectedFlatRows,
         selectionMode,
     ]);
-    const headerRef = React.useRef(null);
-    const bodyRef = React.useRef(null);
+    const tableRef = React.useRef(null);
     const { scrollToIndex, tableRowRef } = useScrollToRow({ ...props, page });
     const columnRefs = React.useRef({});
     const previousTableWidth = React.useRef(0);
     const onTableResize = React.useCallback(({ width }) => {
-        // Handle header properties, regardless of whether the table is resizable
-        setHeaderScrollWidth(headerRef.current?.scrollWidth ?? 0);
-        setHeaderClientWidth(headerRef.current?.clientWidth ?? 0);
         // Handle table properties, but only when table is resizable
         if (!isResizable) {
             return;
@@ -325,8 +325,6 @@ export const Table = (props) => {
         isResizable,
     ]);
     const [resizeRef] = useResizeObserver(onTableResize);
-    const [headerScrollWidth, setHeaderScrollWidth] = React.useState(0);
-    const [headerClientWidth, setHeaderClientWidth] = React.useState(0);
     // Flexbox handles columns resize so we take new column widths before browser repaints.
     useLayoutEffect(() => {
         if (state.isTableResizing) {
@@ -343,7 +341,7 @@ export const Table = (props) => {
     const getPreparedRow = React.useCallback((index) => {
         const row = page[index];
         prepareRow(row);
-        return (React.createElement(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, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row), density: density }));
+        return (React.createElement(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 ? undefined : tableRowRef(row), density: density }));
     }, [
         page,
         prepareRow,
@@ -362,18 +360,18 @@ export const Table = (props) => {
     ]);
     const virtualizedItemRenderer = React.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
     const updateStickyState = () => {
-        if (!bodyRef.current || flatHeaders.every((header) => !header.sticky)) {
+        if (!tableRef.current || flatHeaders.every((header) => !header.sticky)) {
             return;
         }
-        if (bodyRef.current.scrollLeft !== 0) {
+        if (tableRef.current.scrollLeft !== 0) {
             dispatch({ type: TableActions.setScrolledRight, value: true });
         }
         else {
             dispatch({ type: TableActions.setScrolledRight, value: false });
         }
         // If scrolled a bit to the left looking from the right side
-        if (bodyRef.current.scrollLeft !==
-            bodyRef.current.scrollWidth - bodyRef.current.clientWidth) {
+        if (tableRef.current.scrollLeft !==
+            tableRef.current.scrollWidth - tableRef.current.clientWidth) {
             dispatch({ type: TableActions.setScrolledLeft, value: true });
         }
         else {
@@ -387,16 +385,16 @@ export const Table = (props) => {
     }, []);
     const isHeaderDirectClick = React.useRef(false);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Box, { ref: (element) => {
+        React.createElement(Box, { ref: useMergedRefs(tableRef, (element) => {
                 ownerDocument.current = element?.ownerDocument;
                 resizeRef(element);
-            }, id: id, ...getTableProps({
+            }), id: id, ...getTableProps({
                 className: cx('iui-table', className),
                 style: {
                     minWidth: 0,
                     ...style,
                 },
-            }), "data-iui-size": density === 'default' ? undefined : density, ...ariaDataAttributes },
+            }), onScroll: () => updateStickyState(), "data-iui-size": density === 'default' ? undefined : density, ...ariaDataAttributes },
             headerGroups.map((headerGroup) => {
                 // There may be a better solution for this, but for now I'm filtering out the placeholder cells using header.id
                 headerGroup.headers = headerGroup.headers.filter((header) => !header.id.includes('iui-table-checkbox-selector_placeholder') &&
@@ -404,18 +402,19 @@ export const Table = (props) => {
                 const headerGroupProps = headerGroup.getHeaderGroupProps({
                     className: 'iui-table-row',
                 });
-                return (React.createElement(Box, { as: 'div', ref: headerRef, onScroll: () => {
-                        if (headerRef.current && bodyRef.current) {
-                            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
-                            updateStickyState();
-                        }
-                    }, key: headerGroupProps.key, ...headerWrapperProps, className: cx('iui-table-header-wrapper', headerWrapperProps?.className) },
+                return (React.createElement(Box, { as: 'div', key: headerGroupProps.key, ...headerWrapperProps, className: cx('iui-table-header-wrapper', headerWrapperProps?.className) },
                     React.createElement(Box, { as: 'div', ...headerProps, className: cx('iui-table-header', headerProps?.className) },
                         React.createElement(Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
                             const { onClick, ...restSortProps } = column.getSortByToggleProps();
                             const columnHasExpanders = hasAnySubRows &&
                                 index ===
                                     headerGroup.headers.findIndex((c) => c.id !== SELECTION_CELL_ID);
+                            // override "undefined" or zero min-width with default value
+                            if ([undefined, 0].includes(column.minWidth)) {
+                                column.minWidth = columnHasExpanders
+                                    ? COLUMN_MIN_WIDTHS.withExpander
+                                    : COLUMN_MIN_WIDTHS.default;
+                            }
                             const columnProps = column.getHeaderProps({
                                 ...restSortProps,
                                 className: cx('iui-table-cell', {
@@ -427,7 +426,8 @@ export const Table = (props) => {
                                     ...getCellStyle(column, !!state.isTableResizing),
                                     ...(columnHasExpanders && getSubRowStyle({ density })),
                                     ...getStickyStyle(column, visibleColumns),
-                                    flexWrap: 'unset',
+                                    flexWrap: 'wrap',
+                                    columnGap: 'var(--iui-size-xs)',
                                 },
                             });
                             return (React.createElement(Box, { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
@@ -449,55 +449,47 @@ export const Table = (props) => {
                                         column.toggleSortBy();
                                     }
                                 } },
+                                React.createElement(ShadowRoot, null,
+                                    typeof column.Header === 'string' ? (React.createElement(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(Box, { className: 'iui-table-header-actions-container', onKeyDown: (e) => e.stopPropagation() },
+                                    showSortButton(column)) && (React.createElement(Box, { className: 'iui-table-header-actions-container', onKeyDown: (e) => e.stopPropagation(), slot: 'actions' },
                                     showFilterButton(column) && (React.createElement(FilterToggle, { column: column })),
                                     showSortButton(column) && (React.createElement(Box, { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
                                         (!column.isSorted && column.sortDescFirst) ? (React.createElement(SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
                                 isResizable &&
                                     column.isResizerVisible &&
                                     (index !== headerGroup.headers.length - 1 ||
-                                        columnResizeMode === 'expand') && (React.createElement(Box, { ...column.getResizerProps(), className: 'iui-table-resizer' },
+                                        columnResizeMode === 'expand') && (React.createElement(Box, { ...column.getResizerProps(), className: 'iui-table-resizer', slot: 'resizers' },
                                     React.createElement(Box, { className: 'iui-table-resizer-bar' }))),
                                 enableColumnReordering &&
-                                    !column.disableReordering && (React.createElement(Box, { className: 'iui-table-reorder-bar' })),
+                                    !column.disableReordering && (React.createElement(Box, { className: 'iui-table-reorder-bar', slot: 'resizers' })),
                                 column.sticky === 'left' &&
-                                    state.sticky.isScrolledToRight && (React.createElement(Box, { className: 'iui-table-cell-shadow-right' })),
+                                    state.sticky.isScrolledToRight && (React.createElement(Box, { className: 'iui-table-cell-shadow-right', slot: 'shadows' })),
                                 column.sticky === 'right' &&
-                                    state.sticky.isScrolledToLeft && (React.createElement(Box, { className: 'iui-table-cell-shadow-left' }))));
+                                    state.sticky.isScrolledToLeft && (React.createElement(Box, { className: 'iui-table-cell-shadow-left', slot: 'shadows' }))));
                         })))));
             }),
-            React.createElement(Box, { ...bodyProps, ...getTableBodyProps({
+            React.createElement(Box, { as: 'div', ...bodyProps, ...getTableBodyProps({
                     className: cx('iui-table-body', {
                         'iui-zebra-striping': styleType === 'zebra-rows',
                     }, bodyProps?.className),
                     style: { outline: 0 },
-                }), ref: bodyRef, onScroll: () => {
-                    if (headerRef.current && bodyRef.current) {
-                        headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
-                        updateStickyState();
-                    }
-                }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
-                React.createElement(ShadowRoot, null,
-                    React.createElement("slot", null),
-                    rows.length === 0 && headerScrollWidth > headerClientWidth && (React.createElement("div", { "aria-hidden": true, style: {
-                            // This ensures that the table-body is always the same width as the table-header,
-                            // even if the table has no rows. See https://github.com/iTwin/iTwinUI/pull/1725
-                            width: headerScrollWidth,
-                            height: 0.1,
-                        } }))),
+                }), tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
                 data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map((_, index) => getPreparedRow(index))))),
                 isLoading && data.length === 0 && (React.createElement(Box, { as: 'div', ...emptyTableContentProps, className: cx('iui-table-empty', emptyTableContentProps?.className) },
                     React.createElement(ProgressRadial, { indeterminate: true }))),
-                isLoading && data.length !== 0 && (React.createElement(Box, { className: 'iui-table-row', "data-iui-loading": 'true' },
-                    React.createElement(Box, { className: 'iui-table-cell' },
-                        React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })))),
                 !isLoading && data.length === 0 && !areFiltersSet && (React.createElement(Box, { as: 'div', ...emptyTableContentProps, className: cx('iui-table-empty', emptyTableContentProps?.className) },
                     React.createElement("div", null, emptyTableContent))),
                 !isLoading &&
                     (data.length === 0 || rows.length === 0) &&
                     areFiltersSet && (React.createElement(Box, { as: 'div', ...emptyTableContentProps, className: cx('iui-table-empty', emptyTableContentProps?.className) },
                     React.createElement("div", null, emptyFilteredTableContent)))),
+            isLoading && data.length !== 0 && (React.createElement(Box, { className: 'iui-table-body-extra', "data-iui-loading": 'true' },
+                React.createElement(ProgressRadial, { indeterminate: true, size: 'small' }))),
             paginatorRenderer?.(paginatorRendererProps))));
 };

package/esm/core/Table/TableCell.js

@@ -34,7 +34,7 @@ export const TableCell = (props) => {
         ...{ cell, row: cell.row, value: cell.value, column: cell.column },
     };
     const cellContent = (React.createElement(React.Fragment, null,
-        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (React.createElement(SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell, density: density })),
+        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (React.createElement(SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell, density: density, slot: 'start' })),
         cell.render('Cell')));
     const cellRendererProps = {
         cellElementProps,
@@ -42,9 +42,9 @@ export const TableCell = (props) => {
         children: (React.createElement(React.Fragment, null,
             cellContent,
             cell.column.sticky === 'left' &&
-                tableInstance.state.sticky.isScrolledToRight && (React.createElement(Box, { className: 'iui-table-cell-shadow-right' })),
+                tableInstance.state.sticky.isScrolledToRight && (React.createElement(Box, { className: 'iui-table-cell-shadow-right', slot: 'shadows' })),
             cell.column.sticky === 'right' &&
-                tableInstance.state.sticky.isScrolledToLeft && (React.createElement(Box, { className: 'iui-table-cell-shadow-left' })))),
+                tableInstance.state.sticky.isScrolledToLeft && (React.createElement(Box, { className: 'iui-table-cell-shadow-left', slot: 'shadows' })))),
     };
     return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer({
         ...cellRendererProps,

package/esm/core/Table/TableRowMemoized.d.ts

@@ -23,7 +23,7 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
     expanderCell?: ((cellProps: CellProps<T>) => React.ReactNode) | undefined;
-    bodyRef: HTMLDivElement | null;
+    scrollContainerRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement> | undefined;
     density?: "default" | "condensed" | "extra-condensed" | undefined;
 }) => React.JSX.Element;
@@ -44,7 +44,7 @@ export declare const TableRowMemoized: <T extends Record<string, unknown>>(props
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
     expanderCell?: ((cellProps: CellProps<T>) => React.ReactNode) | undefined;
-    bodyRef: HTMLDivElement | null;
+    scrollContainerRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement> | undefined;
     density?: "default" | "condensed" | "extra-condensed" | undefined;
 }) => React.JSX.Element;

package/esm/core/Table/TableRowMemoized.js

@@ -13,20 +13,21 @@ import { TableCell } from './TableCell.js';
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 export const TableRow = (props) => {
-    const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, bodyRef, tableRowRef, density, } = props;
+    const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, scrollContainerRef, tableRowRef, density, } = props;
     const onIntersect = React.useCallback(() => {
         onRowInViewport.current?.(row.original);
         isLast && onBottomReached.current?.();
     }, [isLast, onBottomReached, onRowInViewport, row.original]);
     const intersectionRoot = React.useMemo(() => {
-        const isTableBodyScrollable = (bodyRef?.scrollHeight ?? 0) > (bodyRef?.offsetHeight ?? 0);
+        const isTableScrollable = (scrollContainerRef?.scrollHeight ?? 0) >
+            (scrollContainerRef?.offsetHeight ?? 0);
         // If table body is scrollable, make it the intersection root
-        if (isTableBodyScrollable) {
-            return bodyRef;
+        if (isTableScrollable) {
+            return scrollContainerRef;
         }
         // Otherwise, make the viewport the intersection root
         return undefined;
-    }, [bodyRef]);
+    }, [scrollContainerRef]);
     const intersectionRef = useIntersection(onIntersect, {
         rootMargin: `${intersectionMargin}px`,
         root: intersectionRoot,
@@ -84,7 +85,7 @@ export const TableRowMemoized = React.memo(TableRow, (prevProp, nextProp) => pre
     prevProp.rowProps === nextProp.rowProps &&
     prevProp.expanderCell === nextProp.expanderCell &&
     prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
-    prevProp.bodyRef === nextProp.bodyRef &&
+    prevProp.scrollContainerRef === nextProp.scrollContainerRef &&
     prevProp.state.columnOrder === nextProp.state.columnOrder &&
     !nextProp.state.columnResizing.isResizingColumn &&
     prevProp.state.isTableResizing === nextProp.state.isTableResizing &&

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

@@ -13,6 +13,12 @@ export type DefaultCellProps<T extends Record<string, unknown>> = {
      * 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.
+     */
+    clamp?: boolean;
 } & CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
 /**
  * Default cell.

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from '../../utils/index.js';
+import { Box, LineClamp, ShadowRoot } from '../../utils/index.js';
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -17,11 +17,15 @@ import { Box } from '../../utils/index.js';
  * }
  */
 export const DefaultCell = (props) => {
-    // Omitting `cellProps`
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, ...rest } = props;
+    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, clamp = typeof cellProps.value === 'string', ...rest } = props;
     return (React.createElement(Box, { ...cellElementProps, ...rest, className: cx(cellElementClassName, className), "aria-disabled": isDisabled?.(cellProps.row.original) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
-        startIcon && (React.createElement(Box, { className: 'iui-table-cell-start-icon' }, startIcon)),
+        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' }, endIcon)));
+        endIcon && (React.createElement(Box, { className: 'iui-table-cell-end-icon', slot: 'end' }, endIcon))));
 };

package/esm/core/Table/filters/FilterToggle.js

@@ -28,5 +28,5 @@ export const FilterToggle = (props) => {
         React.createElement(IconButton, { styleType: 'borderless', isActive: isVisible || isColumnFiltered, className: cx('iui-table-filter-button', className), "aria-label": 'Filter', onClick: (e) => {
                 // Prevents from triggering sort
                 e.stopPropagation();
-            }, ...rest }, isColumnFiltered ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))))));
+            }, "data-iui-shift": 'left', ...rest }, isColumnFiltered ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))))));
 };

package/esm/core/Toast/Toast.js

@@ -122,7 +122,7 @@ export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
     return (React.createElement(Box, { className: cx(`iui-toast iui-${category}`, className), ref: forwardedRef, ...rest },
         React.createElement(Box, { className: 'iui-status-area' }, React.createElement(StatusIcon, { className: 'iui-icon' })),
         React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-message', contentProps?.className) }, content),
-        link && (React.createElement(ButtonBase, { className: 'iui-toast-anchor', ...link, title: undefined }, link.title)),
+        link && (React.createElement(ButtonBase, { ...link, className: cx('iui-anchor', 'iui-toast-anchor', link.className), title: undefined, "data-iui-status": category, "data-iui-underline": true }, link.title)),
         (type === 'persisting' || hasCloseButton) && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             React.createElement(SvgCloseSmall, null)))));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",