@itwin/itwinui-react 3.3.4 → 3.4.0

package/CHANGELOG.md

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

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

@@ -110,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;
         }

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

@@ -357,7 +357,7 @@ const Table = (props) => {
     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) => {

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;

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -116,7 +116,7 @@ const useParentThemeAndContext = (rootElement) => {
     const [parentThemeState, setParentTheme] = React.useState(parentContext?.theme);
     const [parentHighContrastState, setParentHighContrastState] = React.useState(parentContext?.themeOptions?.highContrast);
     const parentThemeRef = (0, index_js_1.useLatestRef)(parentContext?.theme);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         // bail if we already have theme from context
         if (parentThemeRef.current) {
             return;
@@ -155,7 +155,7 @@ const useParentThemeAndContext = (rootElement) => {
  * dynamically import it (if possible) and fallback to loading it from a CDN.
  */
 const FallbackStyles = ({ root }) => {
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         // bail if styles are already loaded
         if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
             return;

package/cjs/core/utils/components/VirtualScroll.js

@@ -172,17 +172,17 @@ const useVirtualization = (props) => {
     const [resizeRef, resizeObserver] = (0, index_js_1.useResizeObserver)(onResize);
     // Find scrollable parent
     // Needed only on init
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         const scrollableParent = getScrollableParent(parentRef.current, parentRef.current?.ownerDocument);
         scrollContainer.current = scrollableParent;
         resizeRef(scrollableParent);
     }, [resizeRef]);
     // Stop watching resize, when virtual scroll is unmounted
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         return () => resizeObserver?.disconnect();
     }, [resizeObserver]);
     // Get child height when children available
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => updateChildHeight(), [updateChildHeight]);
+    (0, index_js_1.useLayoutEffect)(() => updateChildHeight(), [updateChildHeight]);
     const updateVirtualScroll = React.useCallback(() => {
         const scrollableContainer = getScrollableContainer();
         if (!scrollableContainer) {
@@ -215,7 +215,7 @@ const useVirtualization = (props) => {
             : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
     }, []);
     // Add event listener to the scrollable container.
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         removeScrollListener();
         onScrollRef.current = onScroll;
         if (!scrollContainer.current ||
@@ -227,7 +227,7 @@ const useVirtualization = (props) => {
         }
         return removeScrollListener;
     }, [onScroll, removeScrollListener]);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         if (!isMounted) {
             return;
         }
@@ -282,8 +282,8 @@ const useVirtualization = (props) => {
                 });
             }
         }
-    }, [scrollToIndex, isMounted]);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    }, [scrollToIndex, isMounted, itemsLength]);
+    (0, index_js_1.useLayoutEffect)(() => {
         if (!scrollContainerHeight) {
             return;
         }

package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *
+ * Exported as `useLayoutEffect` so that the react hooks linter correctly identifies the necessary dependencies.
+ *
  * @see https://fb.me/react-uselayouteffect-ssr
  */
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export { useIsomorphicLayoutEffect as useLayoutEffect };

package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsomorphicLayoutEffect = void 0;
+exports.useLayoutEffect = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -32,6 +32,9 @@ const React = __importStar(require("react"));
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *
+ * Exported as `useLayoutEffect` so that the react hooks linter correctly identifies the necessary dependencies.
+ *
  * @see https://fb.me/react-uselayouteffect-ssr
  */
-exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+exports.useLayoutEffect = useIsomorphicLayoutEffect;

package/cjs/core/utils/hooks/useMediaQuery.js

@@ -33,7 +33,7 @@ const index_js_1 = require("../functions/index.js");
 const useIsomorphicLayoutEffect_js_1 = require("./useIsomorphicLayoutEffect.js");
 const useMediaQuery = (queryString) => {
     const [matches, setMatches] = React.useState();
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
         const mediaQueryList = (0, index_js_1.getWindow)()?.matchMedia?.(queryString);
         const handleChange = ({ matches }) => setMatches(matches);
         if (mediaQueryList != undefined) {