@itwin/itwinui-react 3.3.4 → 3.4.0

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

@@ -64,7 +64,7 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
     const updateContainerSize = React.useCallback(({ width, height }) => setContainerSize(orientation === 'horizontal' ? width : height), [orientation]);
     const [resizeRef, observer] = (0, useResizeObserver_js_1.useResizeObserver)(updateContainerSize);
     const resizeObserverRef = React.useRef(observer);
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
         if (disabled) {
             setVisibleCount(items.length);
         }
@@ -74,7 +74,7 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
         }
     }, [containerSize, disabled, items]);
     const mergedRefs = (0, useMergedRefs_js_1.useMergedRefs)(containerRef, resizeRef);
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
         if (!containerRef.current || disabled) {
             resizeObserverRef.current?.disconnect();
             return;
@@ -103,7 +103,7 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
         }
         needsFullRerender.current = false;
     }, [containerSize, visibleCount, disabled, items.length, orientation]);
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
         previousContainerSize.current = containerSize;
     }, [containerSize]);
     return [mergedRefs, visibleCount];

package/esm/core/Carousel/CarouselSlider.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { getWindow, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
+import { getWindow, useMergedRefs, useLayoutEffect, Box, } from '../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
@@ -23,7 +23,7 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
             index,
         })
         : child) ?? [], [children, idPrefix]);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         setSlideCount(items.length);
     }, [items.length, setSlideCount]);
     const sliderRef = React.useRef(null);

package/esm/core/ComboBox/ComboBox.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { MenuExtraContent } from '../Menu/MenuExtraContent.js';
 import { SelectTag } from '../Select/SelectTag.js';
 import { Text } from '../Typography/Text.js';
-import { mergeRefs, useLatestRef, useIsomorphicLayoutEffect, AutoclearingHiddenLiveRegion, useId, } from '../utils/index.js';
+import { mergeRefs, useLatestRef, useLayoutEffect, AutoclearingHiddenLiveRegion, useId, } from '../utils/index.js';
 import { usePopover } from '../Popover/Popover.js';
 import { ComboBoxActionContext, comboBoxReducer, ComboBoxRefsContext, ComboBoxStateContext, } from './helpers.js';
 import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
@@ -94,7 +94,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
         dispatch({ type: 'close' });
         onHideRef.current?.();
     }, [onHideRef]);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         // When the dropdown opens
         if (isOpen) {
             inputRef.current?.focus(); // Focus the input

package/esm/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/esm/core/DatePicker/DatePicker.js

@@ -110,7 +110,7 @@ export const generateLocalizedStrings = (locale) => {
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
 export const 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;
@@ -152,8 +152,9 @@ export const 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 = [];
@@ -163,7 +164,7 @@ export const 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);
@@ -353,6 +354,10 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
                 return (React.createElement(Box, { as: 'div', key: `week-${displayedMonthIndex}-${weekIndex}`, ...weekProps, className: cx('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(Box, { key: `day-${displayedMonthIndex}-${dayIndex}`, className: cx(getDayClass(weekDay), dayProps?.className), "aria-hidden": true }));
+                    }
                     return (React.createElement(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: cx(getDayClass(weekDay), dayProps?.className) }, dateValue));

package/esm/core/Dialog/DialogMain.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
+import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useLayoutEffect, Box, } from '../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
 import { CSSTransition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
@@ -81,7 +81,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
         }
     }, [isDraggable, onPointerDown]);
     // Prevents dialog from moving when window is being resized
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!isDraggable || !isOpen) {
             return;
         }

package/esm/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/esm/core/FileUpload/FileUploadTemplate.js

@@ -7,7 +7,8 @@ import cx from 'classnames';
 import { SvgUpload, Box } from '../utils/index.js';
 import { Anchor } from '../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/esm/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/esm/core/LinkAction/LinkAction.js

@@ -2,7 +2,10 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import cx from 'classnames';
 import { polymorphic } from '../utils/functions/polymorphic.js';
+import { Box } from '../utils/components/index.js';
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.
@@ -13,7 +16,10 @@ import { polymorphic } from '../utils/functions/polymorphic.js';
  *   </Surface>
  * </LinkBox>
  */
-export const LinkAction = polymorphic.a('iui-link-action');
+export const LinkAction = React.forwardRef((props, forwardedRef) => {
+    const { as: asProp = (!!props.href ? 'a' : 'button') } = props;
+    return (React.createElement(Box, { ...props, as: asProp, className: cx('iui-link-action', props.className), ref: forwardedRef }));
+});
 LinkAction.displayName = 'LinkAction';
 /**
  * Polymorphic link box component.

package/esm/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/esm/core/Modal/Modal.js

@@ -26,11 +26,11 @@ import { Dialog } from '../Dialog/Dialog.js';
  * </Modal>
  */
 export const 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, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef, portal: portal },
-        React.createElement(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, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef, portal: portal, ...wrapperProps },
+        React.createElement(Dialog.Backdrop, { ...backdropProps }),
         React.createElement(Dialog.Main, { "aria-modal": true, ...rest },
-            React.createElement(Dialog.TitleBar, { titleText: title }),
+            React.createElement(Dialog.TitleBar, { titleText: title, ...titleBarProps }),
             children)));
 });
 export default Modal;

package/esm/core/Popover/Popover.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useFloating, useClick, useDismiss, useInteractions, size, autoUpdate, offset, flip, shift, autoPlacement, inline, hide, FloatingFocusManager, useHover, useFocus, safePolygon, useRole, FloatingPortal, } from '@floating-ui/react';
-import { Box, cloneElementWithRef, useControlledState, useId, useIsomorphicLayoutEffect, useMergedRefs, } from '../utils/index.js';
+import { Box, cloneElementWithRef, useControlledState, useId, useLayoutEffect, useMergedRefs, } from '../utils/index.js';
 import { Portal } from '../utils/components/Portal.js';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
 // ----------------------------------------------------------------------------
@@ -101,7 +101,7 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     const popoverRef = useMergedRefs(popover.refs.setFloating, forwardedRef, setPopoverElement);
     const triggerId = `${useId()}-trigger`;
     const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!positionReference) {
             return;
         }

package/esm/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/esm/core/ProgressIndicators/ProgressLinear.js

@@ -8,16 +8,24 @@ import { Box, getBoundedValue } from '../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' />
  */
 export const ProgressLinear = React.forwardRef((props, forwardedRef) => {

package/esm/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/esm/core/ProgressIndicators/ProgressRadial.js

@@ -12,9 +12,10 @@ import { SvgCheckmarkSmall, SvgImportantSmall, Box, getBoundedValue, } from '../
  * <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
@@ -25,6 +26,7 @@ export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
     const statusMap = {
         negative: React.createElement(SvgImportantSmall, { "aria-hidden": true }),
         positive: React.createElement(SvgCheckmarkSmall, { "aria-hidden": true }),
+        warning: React.createElement(SvgImportantSmall, { "aria-hidden": true }),
     };
     return (React.createElement(Box, { className: cx('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/esm/core/Table/Table.js

@@ -7,7 +7,7 @@ import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useIsomorphicLayoutEffect, Box, createWarningLogger, } from '../utils/index.js';
+import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useLayoutEffect, Box, createWarningLogger, } from '../utils/index.js';
 import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { FilterToggle } from './filters/index.js';
@@ -328,7 +328,7 @@ export 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.
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (state.isTableResizing) {
             const newColumnWidths = {};
             flatHeaders.forEach((column) => {

package/esm/core/Tabs/Tabs.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useSafeContext, Box, polymorphic, useIsClient, useIsomorphicLayoutEffect, useMergedRefs, useContainerWidth, ButtonBase, mergeEventHandlers, useControlledState, useId, useLatestRef, } from '../utils/index.js';
+import { useSafeContext, Box, polymorphic, useIsClient, useLayoutEffect, useMergedRefs, useContainerWidth, ButtonBase, mergeEventHandlers, useControlledState, useId, useLatestRef, } from '../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
 const TabsWrapper = React.forwardRef((props, ref) => {
     const { className, children, orientation = 'horizontal', type = 'default', focusActivationMode = 'auto', color = 'blue', defaultValue, value: activeValueProp, onValueChange, ...rest } = props;
@@ -53,27 +53,27 @@ const Tab = React.forwardRef((props, forwardedRef) => {
     const isActive = activeValue === value;
     const isActiveRef = useLatestRef(isActive);
     // Scroll to active tab only on initial render
-    useIsomorphicLayoutEffect(() => {
+    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
-    useIsomorphicLayoutEffect(() => {
+    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();
         }
@@ -81,7 +81,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) {
@@ -157,7 +158,7 @@ TabLabel.displayName = 'Tabs.TabLabel';
 const TabDescription = React.forwardRef((props, ref) => {
     const { className, children, ...rest } = props;
     const { hasSublabel, setHasSublabel } = useSafeContext(TabsContext);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!hasSublabel) {
             setHasSublabel(true);
         }

package/esm/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/esm/core/Tag/Tag.js

@@ -4,8 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { SvgCloseSmall, Box } from '../utils/index.js';
+import { SvgCloseSmall, Box, ButtonBase } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
+import { LinkAction, LinkBox } from '../LinkAction/LinkAction.js';
 /**
  * Tag for showing categories, filters etc.
  * @example
@@ -13,13 +14,19 @@ import { IconButton } from '../Buttons/IconButton.js';
  * <Tag variant='basic'>Basic tag</Tag>
  */
 export const Tag = React.forwardRef((props, forwardedRef) => {
-    const { className, variant = 'default', children, onRemove, ...rest } = props;
-    return (React.createElement(Box, { as: 'span', className: cx({
+    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(Box, { as: shouldUseLinkAction ? LinkBox : !!onClick ? ButtonBase : 'span', className: cx({
             'iui-tag-basic': variant === 'basic',
             'iui-tag': variant === 'default',
-        }, className), ref: forwardedRef, ...rest },
-        variant === 'default' ? (React.createElement(Box, { as: 'span', className: 'iui-tag-label' }, children)) : (children),
-        onRemove && (React.createElement(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(Box, { as: (shouldUseLinkAction ? LinkAction : 'span'), onClick: shouldUseLinkAction ? onClick : undefined, ...labelProps, className: cx('iui-tag-label', labelProps?.className) }, children)) : (children),
+        onRemove && (React.createElement(IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', ...removeButtonProps, className: cx('iui-tag-button', removeButtonProps?.className) },
             React.createElement(SvgCloseSmall, { "aria-hidden": true })))));
 });
 export default Tag;

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, Box, useIsomorphicLayoutEffect, useControlledState, useLatestRef, importCss, isUnitTest, } from '../utils/index.js';
+import { useMediaQuery, useMergedRefs, Box, useLayoutEffect, useControlledState, useLatestRef, importCss, isUnitTest, } from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
 /**
@@ -87,7 +87,7 @@ const useParentThemeAndContext = (rootElement) => {
     const [parentThemeState, setParentTheme] = React.useState(parentContext?.theme);
     const [parentHighContrastState, setParentHighContrastState] = React.useState(parentContext?.themeOptions?.highContrast);
     const parentThemeRef = useLatestRef(parentContext?.theme);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         // bail if we already have theme from context
         if (parentThemeRef.current) {
             return;
@@ -126,7 +126,7 @@ const useParentThemeAndContext = (rootElement) => {
  * dynamically import it (if possible) and fallback to loading it from a CDN.
  */
 const FallbackStyles = ({ root }) => {
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         // bail if styles are already loaded
         if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
             return;