@itwin/itwinui-react 3.6.3 → 3.7.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 3.7.1
+
+### Patch Changes
+
+- [#1934](https://github.com/iTwin/iTwinUI/pull/1934): Fixed the types for `Table` column `filter` to allow `"includesSome"`, which is an already-supported filter function. Also improved the types for the `filter` prop to improve TS autocompletion.
+- [#1936](https://github.com/iTwin/iTwinUI/pull/1936): Fixed an issue in `ProgressRadial` where the visually hidden "Loading." text was sometimes incorrectly displayed for a short while in the beginning.
+
+## 3.7.0
+
+### Minor Changes
+
+- [#1863](https://github.com/iTwin/iTwinUI/pull/1863): The filter button inside a `Table` will now always be visible, instead of only being shown on hover/focus.
+- [#1891](https://github.com/iTwin/iTwinUI/pull/1891): The entire `Table` is now scrollable instead of just the `Table`'s body. This leads to a better scroll experience (e.g. the `Table`'s header now scrolls horizontally when hovering a dragged column near the header's left or right edges).
+- [#1863](https://github.com/iTwin/iTwinUI/pull/1863): The responsive behavior of `Table` columns has been improved in a few different ways:
+  - All columns now have a non-zero default min-width. While we still recommend passing a custom min-width based on your data, this default will help prevent resizable columns from becoming too small.
+  - The filter and sort icons in a column header will now wrap to the next line, before the text starts wrapping.
+  - For cells that have a string value, the value will be automatically truncated after three lines.
+
 ## 3.6.3
 
 ### Patch Changes
@@ -24,7 +42,7 @@
 
 - [#1879](https://github.com/iTwin/iTwinUI/pull/1879): Added a new `native` prop to `Select` and `LabeledSelect`. When true, a native `<select>` element will be rendered.
 - [#1886](https://github.com/iTwin/iTwinUI/pull/1886): Native `Select` (`<Select native>`) offers a new `styleType` prop that accepts the values: `default` (pre-existing) and `borderless` (new).
-- [#1877](https://github.com/iTwin/iTwinUI/pull/1877): Fixed a bug in `LabeledSelect` where nested `<StatusMessage>`s were rendered when using `message={<StatusMessage>}`. As a result, non-string `message` values are no longer automatically wrapped in `<StatusMessage>`.
+- [#1877](https://github.com/iTwin/iTwinUI/pull/1877): Fixed a bug in `InputGroup` where nested `<StatusMessage>`s were rendered when using `message={<StatusMessage>}`. As a result, non-string `message` values are no longer automatically wrapped in `<StatusMessage>`.
   - If you were passing a custom `ReactNode`, you might need to wrap it with `<StatusMessage>` for proper styling of `message`.
 - [#1881](https://github.com/iTwin/iTwinUI/pull/1881): Added a new subcomponent `InputWithDecorations.Icon` to replace direct usage of `Icon` inside `InputWithDecorations`.
 - Visual changes:

package/cjs/core/Alert/Alert.js

@@ -36,6 +36,7 @@ const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const IconButton_js_1 = require("../Buttons/IconButton.js");
 const Icon_js_1 = require("../Icon/Icon.js");
+const Anchor_js_1 = require("../Typography/Anchor.js");
 const AlertContext = React.createContext(undefined);
 // ----------------------------------------------------------------------------
 // Alert component
@@ -74,7 +75,8 @@ AlertMessage.displayName = 'Alert.Message';
 // Alert.Action component
 const AlertAction = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
-    return (React.createElement(index_js_1.ButtonBase, { as: (!!props.href ? 'a' : 'button'), className: (0, classnames_1.default)('iui-alert-link', className), ref: ref, ...rest }, children));
+    const { type } = (0, index_js_1.useSafeContext)(AlertContext);
+    return (React.createElement(Anchor_js_1.Anchor, { as: (!!props.href ? 'a' : 'button'), className: (0, classnames_1.default)('iui-button-base', 'iui-alert-link', className), underline: true, "data-iui-status": type, ref: ref, ...rest }, children));
 });
 AlertAction.displayName = 'Alert.Action';
 // ----------------------------------------------------------------------------

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -35,6 +35,7 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const Button_js_1 = require("../Buttons/Button.js");
+const Anchor_js_1 = require("../Typography/Anchor.js");
 const logWarningInDev = (0, index_js_1.createWarningLogger)();
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
@@ -103,7 +104,7 @@ const Separator = ({ separator }) => (React.createElement(index_js_1.Box, { as:
 // ----------------------------------------------------------------------------
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
     const { children: childrenProp, className, ...rest } = props;
-    const defaultAs = !!props.href ? 'a' : !!props.onClick ? 'button' : 'span';
+    const defaultAs = !!props.href ? Anchor_js_1.Anchor : !!props.onClick ? 'button' : 'span';
     const children = defaultAs === 'button' ? React.createElement("span", null, childrenProp) : childrenProp;
     return (React.createElement(index_js_1.Box, { as: defaultAs, className: (0, classnames_1.default)('iui-breadcrumbs-content', className), ref: forwardedRef, ...rest }, children));
 });

package/cjs/core/Footer/Footer.js

@@ -37,6 +37,7 @@ const index_js_1 = require("../utils/index.js");
 const FooterItem_js_1 = require("./FooterItem.js");
 const FooterSeparator_js_1 = require("./FooterSeparator.js");
 const FooterList_js_1 = require("./FooterList.js");
+const Anchor_js_1 = require("../Typography/Anchor.js");
 const footerTranslations = {
     cookies: 'Cookies',
     legalNotices: 'Legal notices',
@@ -111,7 +112,7 @@ exports.Footer = Object.assign((props) => {
     return (React.createElement(index_js_1.Box, { as: 'footer', className: (0, classnames_1.default)('iui-legal-footer', className), ...rest }, children ? (children) : (React.createElement(FooterList_js_1.FooterList, null, elements.map((element, index) => {
         return (React.createElement(React.Fragment, { key: element.key || `${element.title}-${index}` },
             index > 0 && React.createElement(FooterSeparator_js_1.FooterSeparator, null),
-            React.createElement(FooterItem_js_1.FooterItem, null, element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));
+            React.createElement(FooterItem_js_1.FooterItem, null, element.url ? (React.createElement(Anchor_js_1.Anchor, { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));
     })))));
 }, {
     List: FooterList_js_1.FooterList,

package/cjs/core/Table/SubRowExpander.d.ts

@@ -6,5 +6,6 @@ export type SubRowExpanderProps<T extends Record<string, unknown>> = {
     isDisabled: boolean;
     cellProps: CellProps<T>;
     density?: 'default' | 'condensed' | 'extra-condensed';
+    [k: string]: unknown;
 };
 export declare const SubRowExpander: <T extends Record<string, unknown>>(props: SubRowExpanderProps<T>) => React.JSX.Element;

package/cjs/core/Table/SubRowExpander.js

@@ -32,13 +32,13 @@ const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const IconButton_js_1 = require("../Buttons/IconButton.js");
 const SubRowExpander = (props) => {
-    const { cell, isDisabled, cellProps, expanderCell, density } = props;
+    const { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
     return (React.createElement(React.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (React.createElement(IconButton_js_1.IconButton, { "aria-label": 'Toggle sub row', "aria-expanded": cell.row.isExpanded ? 'true' : 'false', style: {
             marginInlineEnd: density === 'default' || density === undefined ? 8 : 4,
         }, className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
             e.stopPropagation();
             cell.row.toggleRowExpanded();
-        }, disabled: isDisabled }, React.createElement(index_js_1.SvgChevronRight, { style: {
+        }, disabled: isDisabled, ...rest }, React.createElement(index_js_1.SvgChevronRight, { style: {
             transform: cell.row.isExpanded ? 'rotate(90deg)' : undefined,
         } })))));
 };

package/cjs/core/Table/Table.js

@@ -48,6 +48,10 @@ const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 exports.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 = (0, index_js_1.createWarningLogger)();
 const flattenColumns = (columns) => {
     const flatColumns = [];
@@ -316,15 +320,11 @@ const Table = (props) => {
         instance.selectedFlatRows,
         selectionMode,
     ]);
-    const headerRef = React.useRef(null);
-    const bodyRef = React.useRef(null);
+    const tableRef = React.useRef(null);
     const { scrollToIndex, tableRowRef } = (0, index_js_3.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;
@@ -354,8 +354,6 @@ const Table = (props) => {
         isResizable,
     ]);
     const [resizeRef] = (0, index_js_1.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.
     (0, index_js_1.useLayoutEffect)(() => {
         if (state.isTableResizing) {
@@ -372,7 +370,7 @@ const Table = (props) => {
     const getPreparedRow = React.useCallback((index) => {
         const row = page[index];
         prepareRow(row);
-        return (React.createElement(TableRowMemoized_js_1.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_js_1.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,
@@ -391,18 +389,18 @@ 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: react_table_1.actions.setScrolledRight, value: true });
         }
         else {
             dispatch({ type: react_table_1.actions.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: react_table_1.actions.setScrolledLeft, value: true });
         }
         else {
@@ -416,16 +414,16 @@ const Table = (props) => {
     }, []);
     const isHeaderDirectClick = React.useRef(false);
     return (React.createElement(React.Fragment, null,
-        React.createElement(index_js_1.Box, { ref: (element) => {
+        React.createElement(index_js_1.Box, { ref: (0, index_js_1.useMergedRefs)(tableRef, (element) => {
                 ownerDocument.current = element?.ownerDocument;
                 resizeRef(element);
-            }, id: id, ...getTableProps({
+            }), id: id, ...getTableProps({
                 className: (0, classnames_1.default)('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') &&
@@ -433,18 +431,19 @@ const Table = (props) => {
                 const headerGroupProps = headerGroup.getHeaderGroupProps({
                     className: 'iui-table-row',
                 });
-                return (React.createElement(index_js_1.Box, { as: 'div', ref: headerRef, onScroll: () => {
-                        if (headerRef.current && bodyRef.current) {
-                            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
-                            updateStickyState();
-                        }
-                    }, key: headerGroupProps.key, ...headerWrapperProps, className: (0, classnames_1.default)('iui-table-header-wrapper', headerWrapperProps?.className) },
+                return (React.createElement(index_js_1.Box, { as: 'div', key: headerGroupProps.key, ...headerWrapperProps, className: (0, classnames_1.default)('iui-table-header-wrapper', headerWrapperProps?.className) },
                     React.createElement(index_js_1.Box, { as: 'div', ...headerProps, className: (0, classnames_1.default)('iui-table-header', headerProps?.className) },
                         React.createElement(index_js_1.Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
                             const { onClick, ...restSortProps } = column.getSortByToggleProps();
                             const columnHasExpanders = hasAnySubRows &&
                                 index ===
                                     headerGroup.headers.findIndex((c) => c.id !== index_js_5.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: (0, classnames_1.default)('iui-table-cell', {
@@ -456,7 +455,8 @@ const Table = (props) => {
                                     ...(0, utils_js_1.getCellStyle)(column, !!state.isTableResizing),
                                     ...(columnHasExpanders && (0, utils_js_1.getSubRowStyle)({ density })),
                                     ...(0, utils_js_1.getStickyStyle)(column, visibleColumns),
-                                    flexWrap: 'unset',
+                                    flexWrap: 'wrap',
+                                    columnGap: 'var(--iui-size-xs)',
                                 },
                             });
                             return (React.createElement(index_js_1.Box, { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
@@ -478,56 +478,48 @@ const Table = (props) => {
                                         column.toggleSortBy();
                                     }
                                 } },
+                                React.createElement(index_js_1.ShadowRoot, null,
+                                    typeof column.Header === 'string' ? (React.createElement(index_js_1.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_js_1.Box, { className: 'iui-table-header-actions-container', onKeyDown: (e) => e.stopPropagation() },
+                                    showSortButton(column)) && (React.createElement(index_js_1.Box, { className: 'iui-table-header-actions-container', onKeyDown: (e) => e.stopPropagation(), slot: 'actions' },
                                     showFilterButton(column) && (React.createElement(index_js_2.FilterToggle, { column: column })),
                                     showSortButton(column) && (React.createElement(index_js_1.Box, { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
                                         (!column.isSorted && column.sortDescFirst) ? (React.createElement(index_js_1.SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (React.createElement(index_js_1.SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
                                 isResizable &&
                                     column.isResizerVisible &&
                                     (index !== headerGroup.headers.length - 1 ||
-                                        columnResizeMode === 'expand') && (React.createElement(index_js_1.Box, { ...column.getResizerProps(), className: 'iui-table-resizer' },
+                                        columnResizeMode === 'expand') && (React.createElement(index_js_1.Box, { ...column.getResizerProps(), className: 'iui-table-resizer', slot: 'resizers' },
                                     React.createElement(index_js_1.Box, { className: 'iui-table-resizer-bar' }))),
                                 enableColumnReordering &&
-                                    !column.disableReordering && (React.createElement(index_js_1.Box, { className: 'iui-table-reorder-bar' })),
+                                    !column.disableReordering && (React.createElement(index_js_1.Box, { className: 'iui-table-reorder-bar', slot: 'resizers' })),
                                 column.sticky === 'left' &&
-                                    state.sticky.isScrolledToRight && (React.createElement(index_js_1.Box, { className: 'iui-table-cell-shadow-right' })),
+                                    state.sticky.isScrolledToRight && (React.createElement(index_js_1.Box, { className: 'iui-table-cell-shadow-right', slot: 'shadows' })),
                                 column.sticky === 'right' &&
-                                    state.sticky.isScrolledToLeft && (React.createElement(index_js_1.Box, { className: 'iui-table-cell-shadow-left' }))));
+                                    state.sticky.isScrolledToLeft && (React.createElement(index_js_1.Box, { className: 'iui-table-cell-shadow-left', slot: 'shadows' }))));
                         })))));
             }),
-            React.createElement(index_js_1.Box, { ...bodyProps, ...getTableBodyProps({
+            React.createElement(index_js_1.Box, { as: 'div', ...bodyProps, ...getTableBodyProps({
                     className: (0, classnames_1.default)('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(index_js_1.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_js_1.VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map((_, index) => getPreparedRow(index))))),
                 isLoading && data.length === 0 && (React.createElement(index_js_1.Box, { as: 'div', ...emptyTableContentProps, className: (0, classnames_1.default)('iui-table-empty', emptyTableContentProps?.className) },
                     React.createElement(ProgressRadial_js_1.ProgressRadial, { indeterminate: true }))),
-                isLoading && data.length !== 0 && (React.createElement(index_js_1.Box, { className: 'iui-table-row', "data-iui-loading": 'true' },
-                    React.createElement(index_js_1.Box, { className: 'iui-table-cell' },
-                        React.createElement(ProgressRadial_js_1.ProgressRadial, { indeterminate: true, size: 'small' })))),
                 !isLoading && data.length === 0 && !areFiltersSet && (React.createElement(index_js_1.Box, { as: 'div', ...emptyTableContentProps, className: (0, classnames_1.default)('iui-table-empty', emptyTableContentProps?.className) },
                     React.createElement("div", null, emptyTableContent))),
                 !isLoading &&
                     (data.length === 0 || rows.length === 0) &&
                     areFiltersSet && (React.createElement(index_js_1.Box, { as: 'div', ...emptyTableContentProps, className: (0, classnames_1.default)('iui-table-empty', emptyTableContentProps?.className) },
                     React.createElement("div", null, emptyFilteredTableContent)))),
+            isLoading && data.length !== 0 && (React.createElement(index_js_1.Box, { className: 'iui-table-body-extra', "data-iui-loading": 'true' },
+                React.createElement(ProgressRadial_js_1.ProgressRadial, { indeterminate: true, size: 'small' }))),
             paginatorRenderer?.(paginatorRendererProps))));
 };
 exports.Table = Table;

package/cjs/core/Table/TableCell.js

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

package/cjs/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/cjs/core/Table/TableRowMemoized.js

@@ -42,20 +42,21 @@ const TableCell_js_1 = require("./TableCell.js");
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 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 = (0, index_js_1.useIntersection)(onIntersect, {
         rootMargin: `${intersectionMargin}px`,
         root: intersectionRoot,
@@ -114,7 +115,7 @@ exports.TableRowMemoized = React.memo(exports.TableRow, (prevProp, nextProp) =>
     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/cjs/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/cjs/core/Table/cells/DefaultCell.js

@@ -46,12 +46,16 @@ const index_js_1 = require("../../utils/index.js");
  * }
  */
 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(index_js_1.Box, { ...cellElementProps, ...rest, className: (0, classnames_1.default)(cellElementClassName, className), "aria-disabled": isDisabled?.(cellProps.row.original) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
-        startIcon && (React.createElement(index_js_1.Box, { className: 'iui-table-cell-start-icon' }, startIcon)),
+        React.createElement(index_js_1.ShadowRoot, null,
+            React.createElement("slot", { name: 'start' }),
+            clamp ? (React.createElement(index_js_1.LineClamp, null,
+                React.createElement("slot", null))) : (React.createElement("slot", null)),
+            React.createElement("slot", { name: 'end' }),
+            React.createElement("slot", { name: 'shadows' })),
+        startIcon && (React.createElement(index_js_1.Box, { className: 'iui-table-cell-start-icon', slot: 'start' }, startIcon)),
         children,
-        endIcon && React.createElement(index_js_1.Box, { className: 'iui-table-cell-end-icon' }, endIcon)));
+        endIcon && (React.createElement(index_js_1.Box, { className: 'iui-table-cell-end-icon', slot: 'end' }, endIcon))));
 };
 exports.DefaultCell = DefaultCell;

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

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

package/cjs/core/Toast/Toast.js

@@ -152,7 +152,7 @@ exports.ToastPresentation = React.forwardRef((props, forwardedRef) => {
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)(`iui-toast iui-${category}`, className), ref: forwardedRef, ...rest },
         React.createElement(index_js_1.Box, { className: 'iui-status-area' }, React.createElement(StatusIcon, { className: 'iui-icon' })),
         React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-message', contentProps?.className) }, content),
-        link && (React.createElement(index_js_1.ButtonBase, { className: 'iui-toast-anchor', ...link, title: undefined }, link.title)),
+        link && (React.createElement(index_js_1.ButtonBase, { ...link, className: (0, classnames_1.default)('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_js_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             React.createElement(index_js_1.SvgCloseSmall, null)))));
 });

package/cjs/core/VisuallyHidden/VisuallyHidden.js

@@ -46,11 +46,12 @@ const index_js_1 = require("../utils/index.js");
  */
 exports.VisuallyHidden = React.forwardRef((props, ref) => {
     const { as: asProp = 'span', className, unhideOnFocus = true, children: childrenProp, ...rest } = props;
+    const isMounted = (0, index_js_1.useIsClient)();
     // ShadowRoot is not supported on all elements, so we only use it for few common ones.
     const children = !['div', 'span', 'p'].includes(asProp) ? (childrenProp) : (React.createElement(React.Fragment, null,
         React.createElement(index_js_1.ShadowRoot, { css: css },
             React.createElement("slot", null)),
-        childrenProp));
+        isMounted && childrenProp));
     return (React.createElement(index_js_1.Box, { as: asProp, className: (0, classnames_1.default)('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }, children));
 });
 // ----------------------------------------------------------------------------

package/cjs/react-table/react-table.d.ts

@@ -1,4 +1,9 @@
 import type { ChangeEvent, ComponentType, CSSProperties, DependencyList, EffectCallback, MouseEvent, ReactElement, ReactFragment, ReactNode } from 'react';
+/**
+ * This allows custom strings and keeps intellisense for string unions.
+ * See https://github.com/Microsoft/TypeScript/issues/29729
+ */
+type AnyString = string & {};
 export type FieldType = 'text' | 'number' | 'date' | string;
 export type CellRendererProps<D extends Record<string, unknown> = {}> = {
     /**
@@ -109,10 +114,10 @@ export interface ColumnInterface<D extends Record<string, unknown> = {}> extends
     Filter?: Renderer<FilterProps<D>> | Renderer<TableFilterProps<D>>;
     /**
      * String value or custom function to use for filtering.
-     * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`.
-     * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js
+     * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `includesSome`, `exact`, `equals`, `between`.
+     * More info about these filters: https://github.com/TanStack/table/blob/v7/src/filterTypes.js
      */
-    filter?: FilterType<D> | DefaultFilterTypes | string;
+    filter?: FilterType<D> | DefaultFilterTypes | AnyString;
     /**
      * Function that should return whole cell element not only the content.
      * Must be memoized.
@@ -428,7 +433,7 @@ export type UseFiltersColumnOptions<D extends Record<string, unknown>> = Partial
     Filter: Renderer<FilterProps<D>>;
     disableFilters: boolean;
     defaultCanFilter: boolean;
-    filter: FilterType<D> | DefaultFilterTypes | string;
+    filter: FilterType<D> | DefaultFilterTypes | AnyString;
 }>;
 export interface UseFiltersInstanceProps<D extends Record<string, unknown>> {
     preFilteredRows: Array<Row<D>>;
@@ -457,7 +462,7 @@ export type Filters<D extends Record<string, unknown>> = Array<{
     value: FilterValue;
 }>;
 export type FilterTypes<D extends Record<string, unknown>> = Record<string, FilterType<D>>;
-export type DefaultFilterTypes = 'text' | 'exactText' | 'exactTextCase' | 'includes' | 'includesAll' | 'exact' | 'equals' | 'between';
+export type DefaultFilterTypes = 'text' | 'exactText' | 'exactTextCase' | 'includes' | 'includesAll' | 'includesSome' | 'exact' | 'equals' | 'between';
 export interface FilterType<D extends Record<string, unknown>> {
     (rows: Array<Row<D>>, columnIds: Array<IdType<D>>, filterValue: FilterValue): Array<Row<D>>;
     autoRemove?: ((filterValue: FilterValue) => boolean) | undefined;

package/esm/core/Alert/Alert.js

@@ -4,9 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useSafeContext, polymorphic, StatusIconMap, SvgCloseSmall, Box, ButtonBase, } from '../utils/index.js';
+import { useSafeContext, polymorphic, StatusIconMap, SvgCloseSmall, Box, } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Icon } from '../Icon/Icon.js';
+import { Anchor } from '../Typography/Anchor.js';
 const AlertContext = React.createContext(undefined);
 // ----------------------------------------------------------------------------
 // Alert component
@@ -45,7 +46,8 @@ AlertMessage.displayName = 'Alert.Message';
 // Alert.Action component
 const AlertAction = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
-    return (React.createElement(ButtonBase, { as: (!!props.href ? 'a' : 'button'), className: cx('iui-alert-link', className), ref: ref, ...rest }, children));
+    const { type } = useSafeContext(AlertContext);
+    return (React.createElement(Anchor, { as: (!!props.href ? 'a' : 'button'), className: cx('iui-button-base', 'iui-alert-link', className), underline: true, "data-iui-status": type, ref: ref, ...rest }, children));
 });
 AlertAction.displayName = 'Alert.Action';
 // ----------------------------------------------------------------------------

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useMergedRefs, useOverflow, SvgChevronRight, Box, createWarningLogger, } from '../utils/index.js';
 import { Button } from '../Buttons/Button.js';
+import { Anchor } from '../Typography/Anchor.js';
 const logWarningInDev = createWarningLogger();
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
@@ -74,7 +75,7 @@ const Separator = ({ separator }) => (React.createElement(Box, { as: 'li', class
 // ----------------------------------------------------------------------------
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
     const { children: childrenProp, className, ...rest } = props;
-    const defaultAs = !!props.href ? 'a' : !!props.onClick ? 'button' : 'span';
+    const defaultAs = !!props.href ? Anchor : !!props.onClick ? 'button' : 'span';
     const children = defaultAs === 'button' ? React.createElement("span", null, childrenProp) : childrenProp;
     return (React.createElement(Box, { as: defaultAs, className: cx('iui-breadcrumbs-content', className), ref: forwardedRef, ...rest }, children));
 });

package/esm/core/Footer/Footer.js

@@ -8,6 +8,7 @@ import { Box } from '../utils/index.js';
 import { FooterItem } from './FooterItem.js';
 import { FooterSeparator } from './FooterSeparator.js';
 import { FooterList } from './FooterList.js';
+import { Anchor } from '../Typography/Anchor.js';
 const footerTranslations = {
     cookies: 'Cookies',
     legalNotices: 'Legal notices',
@@ -82,7 +83,7 @@ export const Footer = Object.assign((props) => {
     return (React.createElement(Box, { as: 'footer', className: cx('iui-legal-footer', className), ...rest }, children ? (children) : (React.createElement(FooterList, null, elements.map((element, index) => {
         return (React.createElement(React.Fragment, { key: element.key || `${element.title}-${index}` },
             index > 0 && React.createElement(FooterSeparator, null),
-            React.createElement(FooterItem, null, element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));
+            React.createElement(FooterItem, null, element.url ? (React.createElement(Anchor, { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));
     })))));
 }, {
     List: FooterList,

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

@@ -6,5 +6,6 @@ export type SubRowExpanderProps<T extends Record<string, unknown>> = {
     isDisabled: boolean;
     cellProps: CellProps<T>;
     density?: 'default' | 'condensed' | 'extra-condensed';
+    [k: string]: unknown;
 };
 export declare const SubRowExpander: <T extends Record<string, unknown>>(props: SubRowExpanderProps<T>) => React.JSX.Element;

package/esm/core/Table/SubRowExpander.js

@@ -6,13 +6,13 @@ import * as React from 'react';
 import { SvgChevronRight } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 export const SubRowExpander = (props) => {
-    const { cell, isDisabled, cellProps, expanderCell, density } = props;
+    const { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
     return (React.createElement(React.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (React.createElement(IconButton, { "aria-label": 'Toggle sub row', "aria-expanded": cell.row.isExpanded ? 'true' : 'false', style: {
             marginInlineEnd: density === 'default' || density === undefined ? 8 : 4,
         }, className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
             e.stopPropagation();
             cell.row.toggleRowExpanded();
-        }, disabled: isDisabled }, React.createElement(SvgChevronRight, { style: {
+        }, disabled: isDisabled, ...rest }, React.createElement(SvgChevronRight, { style: {
             transform: cell.row.isExpanded ? 'rotate(90deg)' : undefined,
         } })))));
 };