@itwin/itwinui-react 3.3.3 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 3.4.0
+
+### Minor Changes
+
+- [#1824](https://github.com/iTwin/iTwinUI/pull/1824): `LinkAction` will now automatically render a `<button>` by default if no `href` is passed.
+- [#1815](https://github.com/iTwin/iTwinUI/pull/1815): Removed unnecessary `Tag` styles, and added support for tags to be used as `<button>` elements.
+- [#1813](https://github.com/iTwin/iTwinUI/pull/1813): Added warning status for `ProgressRadial`/`ProgressLinear`
+- [#1815](https://github.com/iTwin/iTwinUI/pull/1815): Added `labelProps` and `removeButtonProps` to `Tag` to allow customizing internal parts.
+- [#1821](https://github.com/iTwin/iTwinUI/pull/1821): Added new props to `Modal` to allow customizing inner DOM elements: `wrapperProps`, `backdropProps`, `titleBarProps`.
+- [#1822](https://github.com/iTwin/iTwinUI/pull/1822): Added new `showDatesOutsideMonth` prop to `DatePicker`. Currently defaults to `true` but is recommended to be set to `false`.
+
+## 3.3.4
+
+### Patch Changes
+
+- [#1816](https://github.com/iTwin/iTwinUI/pull/1816): Fixed an issue where `Table` was showing a dummy vertical scrollbar track inside the table header in Chromium 121 + Windows.
+- [#1810](https://github.com/iTwin/iTwinUI/pull/1810): Fixed `Surface.Body` not being visually aligned with `Surface.Header` depending on scrollbar visibility.
+- [#1776](https://github.com/iTwin/iTwinUI/pull/1776): Fixed broken animation in full-page `Modal` and `Dialog`.
+- [#1809](https://github.com/iTwin/iTwinUI/pull/1809): Fixed `Table` bug where the table-body had an incorrect horizontal scrollbar/overflow when the `Table`'s width is reduced below the initial width.
+
 ## 3.3.3
 
 ### Patch Changes

package/cjs/core/Carousel/CarouselSlider.js

@@ -52,7 +52,7 @@ exports.CarouselSlider = React.forwardRef((props, ref) => {
             index,
         })
         : child) ?? [], [children, idPrefix]);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         setSlideCount(items.length);
     }, [items.length, setSlideCount]);
     const sliderRef = React.useRef(null);

package/cjs/core/ComboBox/ComboBox.js

@@ -120,7 +120,7 @@ exports.ComboBox = React.forwardRef((props, forwardedRef) => {
         dispatch({ type: 'close' });
         onHideRef.current?.();
     }, [onHideRef]);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         // When the dropdown opens
         if (isOpen) {
             inputRef.current?.focus(); // Focus the input

package/cjs/core/DatePicker/DatePicker.d.ts

@@ -96,6 +96,14 @@ type DatePickerProps = {
      * @default true
      */
     applyBackground?: boolean;
+    /**
+     * Whether dates outside the current month should be displayed (in a muted text style).
+     *
+     * It is recommended to set this to false. Currently it defaults to true for backward compatibility.
+     *
+     * @default true
+     */
+    showDatesOutsideMonth?: boolean;
 } & DateRangePickerProps & Omit<TimePickerProps, 'date' | 'onChange' | 'setFocusHour'>;
 /**
  * Date picker component

package/cjs/core/DatePicker/DatePicker.js

@@ -140,7 +140,7 @@ exports.generateLocalizedStrings = generateLocalizedStrings;
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
 exports.DatePicker = React.forwardRef((props, forwardedRef) => {
-    const { date, onChange, localizedNames, className, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, monthYearProps, calendarProps, monthProps, weekDayProps, dayProps, weekProps, isDateDisabled, applyBackground = true, ...rest } = props;
+    const { date, onChange, localizedNames, className, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, monthYearProps, calendarProps, monthProps, weekDayProps, dayProps, weekProps, isDateDisabled, applyBackground = true, showDatesOutsideMonth = true, ...rest } = props;
     const monthNames = localizedNames?.months ?? defaultMonths;
     const shortDays = localizedNames?.shortDays ?? defaultShortDays;
     const longDays = localizedNames?.days ?? defaultLongDays;
@@ -182,8 +182,9 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
     }, [date, setMonthAndYear, startDate, endDate, enableRangeSelect]);
     const days = React.useMemo(() => {
         let offsetToFirst = new Date(displayedYear, displayedMonthIndex, 1).getDay();
-        // if its sunday, show one week before
-        if (0 === offsetToFirst) {
+        // If it's sunday, show one week before, but only if dates outside month are shown.
+        // (We do not want empty space at the top if dates outside month are not shown.)
+        if (0 === offsetToFirst && showDatesOutsideMonth) {
             offsetToFirst = 7;
         }
         const daysInMonth = [];
@@ -193,7 +194,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
             daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
         }
         return daysInMonth;
-    }, [displayedMonthIndex, displayedYear]);
+    }, [displayedMonthIndex, displayedYear, showDatesOutsideMonth]);
     const weeks = React.useMemo(() => {
         const weeksInMonth = [];
         const weekCount = Math.ceil(days.length / 7);
@@ -383,6 +384,10 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
                 return (React.createElement(index_js_1.Box, { as: 'div', key: `week-${displayedMonthIndex}-${weekIndex}`, ...weekProps, className: (0, classnames_1.default)('iui-calendar-week', weekProps?.className) }, weekDays.map((weekDay, dayIndex) => {
                     const dateValue = weekDay.getDate();
                     const isDisabled = isDateDisabled?.(weekDay);
+                    const isOutsideMonth = weekDay.getMonth() !== displayedMonthIndex;
+                    if (isOutsideMonth && !showDatesOutsideMonth) {
+                        return (React.createElement(index_js_1.Box, { key: `day-${displayedMonthIndex}-${dayIndex}`, className: (0, classnames_1.default)(getDayClass(weekDay), dayProps?.className), "aria-hidden": true }));
+                    }
                     return (React.createElement(index_js_1.Box, { as: 'div', key: `day-${displayedMonthIndex}-${dayIndex}`, onClick: () => !isDisabled && onDayClick(weekDay), role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, "aria-disabled": isDisabled ? 'true' : undefined, ref: (element) => isSameDay(weekDay, focusedDay) &&
                             needFocus.current &&
                             element?.focus(), ...dayProps, className: (0, classnames_1.default)(getDayClass(weekDay), dayProps?.className) }, dateValue));

package/cjs/core/Dialog/DialogMain.js

@@ -38,6 +38,7 @@ const DialogContext_js_1 = require("./DialogContext.js");
 const react_transition_group_1 = require("react-transition-group");
 const DialogDragContext_js_1 = require("./DialogDragContext.js");
 const useDragAndDrop_js_1 = __importDefault(require("../utils/hooks/useDragAndDrop.js"));
+const styles_js_1 = __importDefault(require("../../styles.js"));
 /**
  * Dialog component which can wrap any content.
  * @example
@@ -109,7 +110,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
         }
     }, [isDraggable, onPointerDown]);
     // Prevents dialog from moving when window is being resized
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         if (!isDraggable || !isOpen) {
             return;
         }
@@ -133,7 +134,6 @@ exports.DialogMain = React.forwardRef((props, ref) => {
     const content = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
-            'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
             transform,
@@ -148,8 +148,9 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             }, onResizeEnd: setResizeStyle })),
         children));
     return (React.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: {
-            enter: 'iui-dialog-animation-enter',
-            enterActive: 'iui-dialog-animation-enter-active',
+            enter: styles_js_1.default['iui-dialog-animation-enter'],
+            enterActive: styles_js_1.default['iui-dialog-animation-enter-active'],
+            enterDone: styles_js_1.default['iui-dialog-visible'],
         }, timeout: { exit: 600 }, 
         // Focuses dialog when opened
         onEntered: () => {

package/cjs/core/FileUpload/FileUploadTemplate.d.ts

@@ -32,7 +32,8 @@ type FileUploadTemplateProps = {
     children?: React.ReactNode;
 };
 /**
- * @deprecated Use `FileUploadCard` instead.
+ * @deprecated Use [`FileUploadCard`](https://itwinui.bentley.com/docs/fileupload#fileuploadcard) instead.
+ *
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).
  * @example

package/cjs/core/FileUpload/FileUploadTemplate.js

@@ -36,7 +36,8 @@ const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const Anchor_js_1 = require("../Typography/Anchor.js");
 /**
- * @deprecated Use `FileUploadCard` instead.
+ * @deprecated Use [`FileUploadCard`](https://itwinui.bentley.com/docs/fileupload#fileuploadcard) instead.
+ *
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).
  * @example

package/cjs/core/LinkAction/LinkAction.d.ts

@@ -1,3 +1,4 @@
+import type { PolymorphicForwardRefComponent } from '../utils/props.js';
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.
@@ -8,7 +9,7 @@
  *   </Surface>
  * </LinkBox>
  */
-export declare const LinkAction: import("../utils/props.js").PolymorphicForwardRefComponent<"a", {}>;
+export declare const LinkAction: PolymorphicForwardRefComponent<"a", {}>;
 /**
  * Polymorphic link box component.
  * Used to wrap around your component to use LinkAction.
@@ -20,4 +21,4 @@ export declare const LinkAction: import("../utils/props.js").PolymorphicForwardR
  *   </Surface>
  * </LinkBox>
  */
-export declare const LinkBox: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
+export declare const LinkBox: PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/LinkAction/LinkAction.js

@@ -1,11 +1,40 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkBox = exports.LinkAction = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const polymorphic_js_1 = require("../utils/functions/polymorphic.js");
+const index_js_1 = require("../utils/components/index.js");
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.
@@ -16,7 +45,10 @@ const polymorphic_js_1 = require("../utils/functions/polymorphic.js");
  *   </Surface>
  * </LinkBox>
  */
-exports.LinkAction = polymorphic_js_1.polymorphic.a('iui-link-action');
+exports.LinkAction = React.forwardRef((props, forwardedRef) => {
+    const { as: asProp = (!!props.href ? 'a' : 'button') } = props;
+    return (React.createElement(index_js_1.Box, { ...props, as: asProp, className: (0, classnames_1.default)('iui-link-action', props.className), ref: forwardedRef }));
+});
 exports.LinkAction.displayName = 'LinkAction';
 /**
  * Polymorphic link box component.

package/cjs/core/Modal/Modal.d.ts

@@ -42,6 +42,18 @@ type ModalProps = {
      * Content of the modal.
      */
     children: React.ReactNode;
+    /**
+     * Props for customizing the title bar element.
+     */
+    titleBarProps?: React.ComponentPropsWithRef<'div'>;
+    /**
+     * Props for customizing the dialog-wrapper element.
+     */
+    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
+    /**
+     * Props for customizing the backdrop element.
+     */
+    backdropProps?: React.ComponentPropsWithRef<'div'>;
 } & Pick<DialogMainProps, 'isOpen' | 'styleType'>;
 /**
  * Modal component which can wrap any content.

package/cjs/core/Modal/Modal.js

@@ -52,11 +52,11 @@ const Dialog_js_1 = require("../Dialog/Dialog.js");
  * </Modal>
  */
 exports.Modal = React.forwardRef((props, forwardedRef) => {
-    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, portal = true, ...rest } = props;
-    return (React.createElement(Dialog_js_1.Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef, portal: portal },
-        React.createElement(Dialog_js_1.Dialog.Backdrop, null),
+    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, portal = true, wrapperProps, backdropProps, titleBarProps, ...rest } = props;
+    return (React.createElement(Dialog_js_1.Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef, portal: portal, ...wrapperProps },
+        React.createElement(Dialog_js_1.Dialog.Backdrop, { ...backdropProps }),
         React.createElement(Dialog_js_1.Dialog.Main, { "aria-modal": true, ...rest },
-            React.createElement(Dialog_js_1.Dialog.TitleBar, { titleText: title }),
+            React.createElement(Dialog_js_1.Dialog.TitleBar, { titleText: title, ...titleBarProps }),
             children)));
 });
 exports.default = exports.Modal;

package/cjs/core/Popover/Popover.js

@@ -131,7 +131,7 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
     const popoverRef = (0, index_js_1.useMergedRefs)(popover.refs.setFloating, forwardedRef, setPopoverElement);
     const triggerId = `${(0, index_js_1.useId)()}-trigger`;
     const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         if (!positionReference) {
             return;
         }

package/cjs/core/ProgressIndicators/ProgressLinear.d.ts

@@ -23,7 +23,7 @@ type ProgressLinearProps = {
     /**
      * Status of progress.
      */
-    status?: 'positive' | 'negative';
+    status?: 'positive' | 'negative' | 'warning';
     /**
      * Pass props to ProgressLinear label group.
      */
@@ -32,16 +32,24 @@ type ProgressLinearProps = {
 /**
  * Shows progress on a linear bar
  * @example
- * Determinate
+ * // Determinate
  * <ProgressLinear value={25}/>
- * Indeterminate
+ * // Indeterminate
  * <ProgressLinear indeterminate={true}/>
- * Labeled - Center
+ * // Labeled - Center
  * <ProgressLinear value={50} labels={['Centered Label']} />
- * Labeled - Left & Right
+ * // Labeled - Left & Right
  * <ProgressLinear value={50} labels={['Loading...', '50%']} />
- * Positive / Negative.
- * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
+ * // Status
+ * <ProgressLinear
+ *   status='positive'
+ *   labels={[
+ *    'Upload done!',
+ *    <Icon key='icon'>
+ *      <SvgStatusSuccess />{' '}
+ *    </Icon>
+ *   ]}
+ * />
  * <ProgressLinear status='negative' />
  */
 export declare const ProgressLinear: PolymorphicForwardRefComponent<"div", ProgressLinearProps>;

package/cjs/core/ProgressIndicators/ProgressLinear.js

@@ -37,16 +37,24 @@ const index_js_1 = require("../utils/index.js");
 /**
  * Shows progress on a linear bar
  * @example
- * Determinate
+ * // Determinate
  * <ProgressLinear value={25}/>
- * Indeterminate
+ * // Indeterminate
  * <ProgressLinear indeterminate={true}/>
- * Labeled - Center
+ * // Labeled - Center
  * <ProgressLinear value={50} labels={['Centered Label']} />
- * Labeled - Left & Right
+ * // Labeled - Left & Right
  * <ProgressLinear value={50} labels={['Loading...', '50%']} />
- * Positive / Negative.
- * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
+ * // Status
+ * <ProgressLinear
+ *   status='positive'
+ *   labels={[
+ *    'Upload done!',
+ *    <Icon key='icon'>
+ *      <SvgStatusSuccess />{' '}
+ *    </Icon>
+ *   ]}
+ * />
  * <ProgressLinear status='negative' />
  */
 exports.ProgressLinear = React.forwardRef((props, forwardedRef) => {

package/cjs/core/ProgressIndicators/ProgressRadial.d.ts

@@ -14,7 +14,7 @@ type ProgressRadialProps = {
     /**
      * Status of Progress. Positive status always has 100% value.
      */
-    status?: 'positive' | 'negative';
+    status?: 'positive' | 'negative' | 'warning';
     /**
      * Size of the progress indicator. Defaults to medium size.
      * @default ''
@@ -32,9 +32,10 @@ type ProgressRadialProps = {
  * <ProgressRadial value={50} />
  * Indeterminate
  * <ProgressRadial indeterminate />
- * Positive / Negative
+ * // Positive / Negative / Warning
  * <ProgressRadial status='positive' />
  * <ProgressRadial status='negative' />
+ * <ProgressRadial status='warning' />
  * Centered Content
  * <ProgressRadial value={63}>63</ProgressRadial>
  * Small

package/cjs/core/ProgressIndicators/ProgressRadial.js

@@ -41,9 +41,10 @@ const index_js_1 = require("../utils/index.js");
  * <ProgressRadial value={50} />
  * Indeterminate
  * <ProgressRadial indeterminate />
- * Positive / Negative
+ * // Positive / Negative / Warning
  * <ProgressRadial status='positive' />
  * <ProgressRadial status='negative' />
+ * <ProgressRadial status='warning' />
  * Centered Content
  * <ProgressRadial value={63}>63</ProgressRadial>
  * Small
@@ -54,6 +55,7 @@ exports.ProgressRadial = React.forwardRef((props, forwardedRef) => {
     const statusMap = {
         negative: React.createElement(index_js_1.SvgImportantSmall, { "aria-hidden": true }),
         positive: React.createElement(index_js_1.SvgCheckmarkSmall, { "aria-hidden": true }),
+        warning: React.createElement(index_js_1.SvgImportantSmall, { "aria-hidden": true }),
     };
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-progress-indicator-radial', className), "data-iui-size": size, "data-iui-status": status, "data-iui-indeterminate": indeterminate ? 'true' : undefined, ref: forwardedRef, style: {
             ...(value !== undefined && {

package/cjs/core/Table/Table.js

@@ -316,10 +316,19 @@ const Table = (props) => {
         instance.selectedFlatRows,
         selectionMode,
     ]);
+    const headerRef = React.useRef(null);
+    const bodyRef = 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;
+        }
         instance.tableWidth = width;
         if (width === previousTableWidth.current) {
             return;
@@ -337,10 +346,18 @@ const Table = (props) => {
             return;
         }
         dispatch({ type: exports.tableResizeStartAction });
-    }, [dispatch, state.columnResizing.columnWidths, flatHeaders, instance]);
+    }, [
+        dispatch,
+        state.columnResizing.columnWidths,
+        flatHeaders,
+        instance,
+        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.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         if (state.isTableResizing) {
             const newColumnWidths = {};
             flatHeaders.forEach((column) => {
@@ -352,8 +369,6 @@ const Table = (props) => {
             dispatch({ type: tableResizeEndAction, columnWidths: newColumnWidths });
         }
     });
-    const headerRef = React.useRef(null);
-    const bodyRef = React.useRef(null);
     const getPreparedRow = React.useCallback((index) => {
         const row = page[index];
         prepareRow(row);
@@ -403,9 +418,7 @@ const Table = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(index_js_1.Box, { ref: (element) => {
                 ownerDocument.current = element?.ownerDocument;
-                if (isResizable) {
-                    resizeRef(element);
-                }
+                resizeRef(element);
             }, id: id, ...getTableProps({
                 className: (0, classnames_1.default)('iui-table', className),
                 style: {
@@ -497,12 +510,12 @@ const Table = (props) => {
                 }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
                 React.createElement(ShadowTemplate, null,
                     React.createElement("slot", null),
-                    React.createElement("div", { "aria-hidden": true, style: {
+                    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: headerRef.current?.scrollWidth,
+                            width: headerScrollWidth,
                             height: 0.1,
-                        } })),
+                        } }))),
                 data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll_js_1.default, { 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 }))),

package/cjs/core/Tabs/Tabs.js

@@ -82,27 +82,27 @@ const Tab = React.forwardRef((props, forwardedRef) => {
     const isActive = activeValue === value;
     const isActiveRef = (0, index_js_1.useLatestRef)(isActive);
     // Scroll to active tab only on initial render
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         if (isActiveRef.current) {
             tabRef.current?.parentElement?.scrollTo({
                 [orientation === 'horizontal' ? 'left' : 'top']: tabRef.current?.[orientation === 'horizontal' ? 'offsetLeft' : 'offsetTop'] - 4,
                 behavior: 'instant', // not using 'smooth' to reduce layout shift on page load
             });
         }
-    }, []);
-    const updateStripe = () => {
-        const currentTabRect = tabRef.current?.getBoundingClientRect();
-        setStripeProperties({
-            '--iui-tabs-stripe-size': orientation === 'horizontal'
-                ? `${currentTabRect?.width}px`
-                : `${currentTabRect?.height}px`,
-            '--iui-tabs-stripe-position': orientation === 'horizontal'
-                ? `${tabRef.current?.offsetLeft}px`
-                : `${tabRef.current?.offsetTop}px`,
-        });
-    };
+    }, [isActiveRef, orientation]);
     // CSS custom properties to place the active stripe
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
+        const updateStripe = () => {
+            const currentTabRect = tabRef.current?.getBoundingClientRect();
+            setStripeProperties({
+                '--iui-tabs-stripe-size': orientation === 'horizontal'
+                    ? `${currentTabRect?.width}px`
+                    : `${currentTabRect?.height}px`,
+                '--iui-tabs-stripe-position': orientation === 'horizontal'
+                    ? `${tabRef.current?.offsetLeft}px`
+                    : `${tabRef.current?.offsetTop}px`,
+            });
+        };
         if (type !== 'default' && isActive) {
             updateStripe();
         }
@@ -110,7 +110,8 @@ const Tab = React.forwardRef((props, forwardedRef) => {
         type,
         orientation,
         isActive,
-        tabsWidth, // to fix visual artifact on initial render
+        tabsWidth,
+        setStripeProperties,
     ]);
     const onKeyDown = (event) => {
         if (event.altKey) {
@@ -186,7 +187,7 @@ TabLabel.displayName = 'Tabs.TabLabel';
 const TabDescription = React.forwardRef((props, ref) => {
     const { className, children, ...rest } = props;
     const { hasSublabel, setHasSublabel } = (0, index_js_1.useSafeContext)(TabsContext);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         if (!hasSublabel) {
             setHasSublabel(true);
         }

package/cjs/core/Tag/Tag.d.ts

@@ -2,22 +2,44 @@ import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type TagProps = {
     /**
-     * Callback function that handles click on close icon.
-     * Close icon is shown only when this function is passed.
-     * Use only with 'default' Tag.
+     * Text inside the tag.
+     */
+    children: React.ReactNode;
+    /**
+     * Callback invoked when the tag is clicked.
+     *
+     * When this prop is passed, the tag will be rendered as a button.
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * Callback function that handles click on the remove ("❌") button.
+     * If not passed, the remove button will not be shown.
+     *
+     * If both `onClick` and `onRemove` are passed, then the tag label (rather than the tag itself)
+     * will be rendered as a button, to avoid invalid markup (nested buttons).
      */
     onRemove?: React.MouseEventHandler;
     /**
-     * Text inside the tag.
+     * Props for customizing the remove ("❌") button.
      */
-    children: React.ReactNode;
+    removeButtonProps?: React.ComponentPropsWithRef<'button'>;
+} & ({
     /**
      * Variant of tag.
      * Basic tags don't have an outline.
      * @default 'default'
      */
-    variant?: 'default' | 'basic';
-};
+    variant?: 'default';
+    /**
+     * Props for customizing the label.
+     *
+     * Only relevant for the 'default' Tag.
+     */
+    labelProps?: React.ComponentPropsWithRef<'span'>;
+} | {
+    variant?: 'basic';
+    labelProps?: never;
+});
 /**
  * Tag for showing categories, filters etc.
  * @example

package/cjs/core/Tag/Tag.js

@@ -35,6 +35,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const IconButton_js_1 = require("../Buttons/IconButton.js");
+const LinkAction_js_1 = require("../LinkAction/LinkAction.js");
 /**
  * Tag for showing categories, filters etc.
  * @example
@@ -42,13 +43,19 @@ const IconButton_js_1 = require("../Buttons/IconButton.js");
  * <Tag variant='basic'>Basic tag</Tag>
  */
 exports.Tag = React.forwardRef((props, forwardedRef) => {
-    const { className, variant = 'default', children, onRemove, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)({
+    const { className, variant = 'default', children, onRemove, onClick, labelProps, removeButtonProps, ...rest } = props;
+    // If both onClick and onRemove are passed, we want to render the label as a button
+    // to avoid invalid markup (nested buttons). LinkAction ensures that clicking anywhere outside
+    // the remove button (including padding) will still trigger the main onClick callback.
+    const shouldUseLinkAction = !!onClick && !!onRemove;
+    return (React.createElement(index_js_1.Box, { as: shouldUseLinkAction ? LinkAction_js_1.LinkBox : !!onClick ? index_js_1.ButtonBase : 'span', className: (0, classnames_1.default)({
             'iui-tag-basic': variant === 'basic',
             'iui-tag': variant === 'default',
-        }, className), ref: forwardedRef, ...rest },
-        variant === 'default' ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tag-label' }, children)) : (children),
-        onRemove && (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
+        }, className), 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- ref's type doesn't matter internally
+        ref: forwardedRef, onClick: !shouldUseLinkAction ? onClick : undefined, ...rest },
+        variant === 'default' ? (React.createElement(index_js_1.Box, { as: (shouldUseLinkAction ? LinkAction_js_1.LinkAction : 'span'), onClick: shouldUseLinkAction ? onClick : undefined, ...labelProps, className: (0, classnames_1.default)('iui-tag-label', labelProps?.className) }, children)) : (children),
+        onRemove && (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', ...removeButtonProps, className: (0, classnames_1.default)('iui-tag-button', removeButtonProps?.className) },
             React.createElement(index_js_1.SvgCloseSmall, { "aria-hidden": true })))));
 });
 exports.default = exports.Tag;