@itwin/itwinui-react 3.11.0 → 3.11.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 3.11.2
+
+### Patch Changes
+
+- [#2084](https://github.com/iTwin/iTwinUI/pull/2084): Fixed an issue where a portaled `ThemeProvider` would try to re-render infinitely.
+- [#2083](https://github.com/iTwin/iTwinUI/pull/2083): Removed the accidentally added no-op `loading` prop in `IconButton`.
+- [#2083](https://github.com/iTwin/iTwinUI/pull/2083): Fixed a visual bug where elements like `startIcon` and `endIcon` inside the `Button` (or its derivatives) were not hidden when the button was in a loading state. Now,`loading={true}` on `Button` hides _all_ its children except the `ProgressRadial`.
+
+## 3.11.1
+
+### Patch Changes
+
+- [#2074](https://github.com/iTwin/iTwinUI/pull/2074): Fixed indentation of `Tree` nodes to be aligned regardless of the presence of expander button.
+- [#2064](https://github.com/iTwin/iTwinUI/pull/2064): Adjusted `Dialog` and `ExpandableBlock` to round some CSS `transform` values. This helps avoid blurry text on Windows in some cases.
+- [#2055](https://github.com/iTwin/iTwinUI/pull/2055): Fixed an issue in `Breadcrumbs.Item` where using a custom link component (e.g. `as={Link}` for client side routing) would break the CSS styling.
+- [#2071](https://github.com/iTwin/iTwinUI/pull/2071): Fixed a minor issue in `ComboBox` where a `label` attribute was accidentally being added to options in the DOM.
+- [#2068](https://github.com/iTwin/iTwinUI/pull/2068): Fixed `EditableCell` so that it correctly merges `className` and `style` props with the corresponding internal props.
+- [#2073](https://github.com/iTwin/iTwinUI/pull/2073): Fixed CommonJS types exports for the `/react-table` entrypoint.
+- [#2055](https://github.com/iTwin/iTwinUI/pull/2055): Fixed a regression from `v3.10.0` where non-button and non-link `Breadcrumbs.Item`s were getting a hover styling as if it were a button.
+
 ## 3.11.0
 
 ### Minor Changes

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -102,9 +102,19 @@ const ListItem = ({ item, isActive, }) => {
 const Separator = ({ separator }) => (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator ?? React.createElement(index_js_1.SvgChevronRight, null)));
 // ----------------------------------------------------------------------------
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
-    const { children, className, ...rest } = props;
-    const defaultAs = !!props.href ? Anchor_js_1.Anchor : !!props.onClick ? 'button' : 'span';
-    return (React.createElement(Button_js_1.Button, { as: defaultAs, className: (0, classnames_1.default)('iui-breadcrumbs-content', className), styleType: 'borderless', ref: forwardedRef, ...rest }, children));
+    const { as: asProp, ...rest } = props;
+    const commonProps = {
+        ...rest,
+        className: (0, classnames_1.default)('iui-breadcrumbs-content', props.className),
+        ref: forwardedRef,
+    };
+    if (String(asProp) === 'span' ||
+        (props.href == null && props.onClick == null && asProp == null)) {
+        return React.createElement(index_js_1.Box, { as: 'span', ...commonProps });
+    }
+    return (React.createElement(Button_js_1.Button, { as: (asProp === 'a' || (asProp == null && !!props.href)
+            ? Anchor_js_1.Anchor
+            : asProp), styleType: 'borderless', ...commonProps }));
 });
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 // ----------------------------------------------------------------------------

package/cjs/core/Buttons/IconButton.d.ts

@@ -21,7 +21,7 @@ export type IconButtonProps = {
      * Passes props to IconButton icon.
      */
     iconProps?: React.ComponentProps<'span'>;
-} & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps'>;
+} & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps' | 'loading'>;
 /**
  * Icon button
  * @example

package/cjs/core/Carousel/Carousel.d.ts

@@ -42,7 +42,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"div", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -100,12 +100,12 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                 as?: "div" | undefined;
             }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
             iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-        } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -163,7 +163,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                 as?: "div" | undefined;
             }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
             iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-        } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
     };

package/cjs/core/Carousel/CarouselNavigation.d.ts

@@ -9,7 +9,7 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -67,12 +67,12 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             as?: "div" | undefined;
         }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -130,7 +130,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             as?: "div" | undefined;
         }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
 };

package/cjs/core/ComboBox/ComboBox.js

@@ -264,7 +264,7 @@ exports.ComboBox = React.forwardRef((props, forwardedRef) => {
     const getMenuItem = React.useCallback((option, filteredIndex) => {
         const optionId = getOptionId(option, id);
         const { __originalIndex } = optionsExtraInfoRef.current[optionId];
-        const { icon, startIcon: startIconProp, ...restOptions } = option;
+        const { icon, startIcon: startIconProp, label, ...restOptions } = option;
         const startIcon = startIconProp ?? icon;
         const customItem = itemRenderer
             ? itemRenderer(option, {
@@ -291,7 +291,7 @@ exports.ComboBox = React.forwardRef((props, forwardedRef) => {
             }),
         })) : (React.createElement(ComboBoxMenuItem_js_1.ComboBoxMenuItem, { key: optionId, id: optionId, startIcon: startIcon, ...restOptions, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
                 onClickHandler(__originalIndex);
-            }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, option.label));
+            }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, label));
     }, [
         enableVirtualization,
         focusedIndex,

package/cjs/core/Header/Header.d.ts

@@ -71,7 +71,7 @@ type HeaderProps = {
  *  appLogo={<HeaderLogo logo={<SvgImodelHollow />}>iTwin Application</HeaderLogo>}
  *  breadcrumbs={
  *   <HeaderBreadcrumbs items={[
- *    <HeaderButton key='project' name='Project A' />
+ *    <HeaderButton key='project' name='Project A' />,
  *    <HeaderButton key='imodel' name='IModel X' />
  *   ]} />
  *  }
@@ -82,9 +82,9 @@ type HeaderProps = {
  *     <SvgHelpCircularHollow />
  *    </IconButton>
  *   </DropdownMenu>,
- *   <DropdownMenu menuItems={...}>
+ *   <DropdownMenu menuItems={…}>
  *    <IconButton styleType='borderless'>
- *     <Avatar ... />
+ *     <Avatar … />
  *    </IconButton>
  *   </DropdownMenu>
  *  ]}

package/cjs/core/Header/Header.js

@@ -46,7 +46,7 @@ const defaultTranslations = {
  *  appLogo={<HeaderLogo logo={<SvgImodelHollow />}>iTwin Application</HeaderLogo>}
  *  breadcrumbs={
  *   <HeaderBreadcrumbs items={[
- *    <HeaderButton key='project' name='Project A' />
+ *    <HeaderButton key='project' name='Project A' />,
  *    <HeaderButton key='imodel' name='IModel X' />
  *   ]} />
  *  }
@@ -57,9 +57,9 @@ const defaultTranslations = {
  *     <SvgHelpCircularHollow />
  *    </IconButton>
  *   </DropdownMenu>,
- *   <DropdownMenu menuItems={...}>
+ *   <DropdownMenu menuItems={…}>
  *    <IconButton styleType='borderless'>
- *     <Avatar ... />
+ *     <Avatar … />
  *    </IconButton>
  *   </DropdownMenu>
  *  ]}

package/cjs/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -32,7 +32,7 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
      */
     Button: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
         styleType?: "default" | "cta" | "high-visibility" | "borderless" | undefined;
     } & {
         as?: "button" | undefined;

package/cjs/core/Table/cells/EditableCell.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.EditableCell = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -30,6 +33,7 @@ exports.EditableCell = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../../../utils/index.js");
+const classnames_1 = __importDefault(require("classnames"));
 /**
  * Editable cell.
  * It should be passed to `cellRenderer`.
@@ -41,7 +45,7 @@ const index_js_1 = require("../../../utils/index.js");
  * }
  */
 const EditableCell = (props) => {
-    const { cellElementProps, cellProps, onCellEdit, children, isDisabled, ...rest } = props;
+    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, cellProps, onCellEdit, children, isDisabled, className, style, ...rest } = props;
     isDisabled; // To omit and prevent eslint error.
     const sanitizeString = (text) => {
         return text.replace(/(\r\n|\n|\r)+/gm, ' ');
@@ -52,7 +56,7 @@ const EditableCell = (props) => {
     }, [cellProps.value]);
     const [key, setKey] = React.useState((0, index_js_1.getRandomValue)(10));
     const [isDirty, setIsDirty] = React.useState(false);
-    return (React.createElement(index_js_1.Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
+    return (React.createElement(index_js_1.Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, className: (0, classnames_1.default)(cellElementClassName, className), style: { ...cellElementStyle, ...style }, onInput: (e) => {
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);
             props.onInput?.(e);

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -101,10 +101,13 @@ const Root = React.forwardRef((props, forwardedRef) => {
     const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
     const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
     const shouldApplyBackground = themeOptions?.applyBackground;
-    const setOwnerDocument = (0, index_js_1.useScopedSetAtom)(ownerDocumentAtom);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: (0, index_js_1.useMergedRefs)(forwardedRef, (el) => {
-            setOwnerDocument(el?.ownerDocument);
-        }), ...rest }, children));
+    const [ownerDocument, setOwnerDocument] = (0, index_js_1.useScopedAtom)(ownerDocumentAtom);
+    const findOwnerDocumentFromRef = React.useCallback((el) => {
+        if (el && el.ownerDocument !== ownerDocument) {
+            setOwnerDocument(el.ownerDocument);
+        }
+    }, [ownerDocument, setOwnerDocument]);
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: (0, index_js_1.useMergedRefs)(forwardedRef, findOwnerDocumentFromRef), ...rest }, children));
 });
 // ----------------------------------------------------------------------------
 /**
@@ -159,33 +162,40 @@ const useParentThemeAndContext = (rootElement) => {
  */
 const PortalContainer = React.memo(({ portalContainerProp, portalContainerFromParent, isInheritingTheme, }) => {
     const [ownerDocument] = (0, index_js_1.useScopedAtom)(ownerDocumentAtom);
-    const [portalContainer, setPortalContainer] = (0, index_js_1.useScopedAtom)(index_js_1.portalContainerAtom);
+    const setPortalContainer = (0, index_js_1.useScopedSetAtom)(index_js_1.portalContainerAtom);
     // bail if not hydrated, because portals don't work on server
     const isHydrated = (0, index_js_1.useHydration)() === 'hydrated';
     if (!isHydrated) {
         return null;
     }
+    if (portalContainerProp) {
+        return React.createElement(PortaledToaster, { target: portalContainerProp });
+    }
     // Create a new portal container only if necessary:
     // - not inheriting theme
     // - no parent portal container to portal into
     // - parent portal container is in a different window (#2006)
-    if (!portalContainerProp && // bail if portalContainerProp is set, because it takes precedence
-        (!isInheritingTheme ||
-            !portalContainerFromParent ||
+    if (!isInheritingTheme ||
+        !portalContainerFromParent ||
+        (!!ownerDocument &&
             portalContainerFromParent.ownerDocument !== ownerDocument)) {
         return (React.createElement("div", { style: { display: 'contents' }, ref: setPortalContainer },
             React.createElement(Toaster_js_1.Toaster, null)));
     }
-    const portalTarget = portalContainerProp || portalContainerFromParent;
-    // Synchronize atom with the correct portal container if necessary.
-    if (portalTarget && portalTarget !== portalContainer) {
-        setPortalContainer(portalTarget);
-    }
-    return portalTarget
-        ? ReactDOM.createPortal(React.createElement(Toaster_js_1.Toaster, null), portalTarget)
-        : null;
+    return React.createElement(PortaledToaster, { target: portalContainerFromParent });
 });
 // ----------------------------------------------------------------------------
+const PortaledToaster = ({ target }) => {
+    const [portalContainer, setPortalContainer] = (0, index_js_1.useScopedAtom)(index_js_1.portalContainerAtom);
+    // Synchronize atom with the correct portal target if necessary.
+    React.useEffect(() => {
+        if (target && target !== portalContainer) {
+            setPortalContainer(target);
+        }
+    });
+    return target ? ReactDOM.createPortal(React.createElement(Toaster_js_1.Toaster, null), target) : null;
+};
+// ----------------------------------------------------------------------------
 /**
  * When `@itwin/itwinui-react/styles.css` is not imported, we will attempt to
  * dynamically import it (if possible) and fallback to loading it from a CDN.

package/cjs/core/Tile/Tile.d.ts

@@ -249,7 +249,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      */
     IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -323,7 +323,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
             as?: "div" | undefined;
         }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }, "ref">>;
     /**

package/cjs/utils/providers/ScopeProvider.js

@@ -60,9 +60,11 @@ const useScopedAtom = (atom) => {
     const setAtom = (0, exports.useScopedSetAtom)(atom);
     const value = (0, jotai_1.useAtomValue)(atom, { store });
     const inheritedValue = (0, jotai_1.useAtomValue)(atom, { store: parentStore || store });
-    if (value == undefined && inheritedValue != undefined) {
-        setAtom(inheritedValue);
-    }
+    React.useEffect(() => {
+        if (value == undefined && inheritedValue != undefined) {
+            setAtom(inheritedValue);
+        }
+    });
     return [value, setAtom];
 };
 exports.useScopedAtom = useScopedAtom;

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -73,9 +73,19 @@ const ListItem = ({ item, isActive, }) => {
 const Separator = ({ separator }) => (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator ?? React.createElement(SvgChevronRight, null)));
 // ----------------------------------------------------------------------------
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
-    const { children, className, ...rest } = props;
-    const defaultAs = !!props.href ? Anchor : !!props.onClick ? 'button' : 'span';
-    return (React.createElement(Button, { as: defaultAs, className: cx('iui-breadcrumbs-content', className), styleType: 'borderless', ref: forwardedRef, ...rest }, children));
+    const { as: asProp, ...rest } = props;
+    const commonProps = {
+        ...rest,
+        className: cx('iui-breadcrumbs-content', props.className),
+        ref: forwardedRef,
+    };
+    if (String(asProp) === 'span' ||
+        (props.href == null && props.onClick == null && asProp == null)) {
+        return React.createElement(Box, { as: 'span', ...commonProps });
+    }
+    return (React.createElement(Button, { as: (asProp === 'a' || (asProp == null && !!props.href)
+            ? Anchor
+            : asProp), styleType: 'borderless', ...commonProps }));
 });
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 // ----------------------------------------------------------------------------

package/esm/core/Buttons/IconButton.d.ts

@@ -21,7 +21,7 @@ export type IconButtonProps = {
      * Passes props to IconButton icon.
      */
     iconProps?: React.ComponentProps<'span'>;
-} & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps'>;
+} & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps' | 'loading'>;
 /**
  * Icon button
  * @example

package/esm/core/Carousel/Carousel.d.ts

@@ -42,7 +42,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"div", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -100,12 +100,12 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                 as?: "div" | undefined;
             }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
             iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-        } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -163,7 +163,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                 as?: "div" | undefined;
             }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
             iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-        } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
     };

package/esm/core/Carousel/CarouselNavigation.d.ts

@@ -9,7 +9,7 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -67,12 +67,12 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             as?: "div" | undefined;
         }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -130,7 +130,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             as?: "div" | undefined;
         }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
 };

package/esm/core/ComboBox/ComboBox.js

@@ -238,7 +238,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
     const getMenuItem = React.useCallback((option, filteredIndex) => {
         const optionId = getOptionId(option, id);
         const { __originalIndex } = optionsExtraInfoRef.current[optionId];
-        const { icon, startIcon: startIconProp, ...restOptions } = option;
+        const { icon, startIcon: startIconProp, label, ...restOptions } = option;
         const startIcon = startIconProp ?? icon;
         const customItem = itemRenderer
             ? itemRenderer(option, {
@@ -265,7 +265,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
             }),
         })) : (React.createElement(ComboBoxMenuItem, { key: optionId, id: optionId, startIcon: startIcon, ...restOptions, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
                 onClickHandler(__originalIndex);
-            }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, option.label));
+            }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, label));
     }, [
         enableVirtualization,
         focusedIndex,

package/esm/core/Header/Header.d.ts

@@ -71,7 +71,7 @@ type HeaderProps = {
  *  appLogo={<HeaderLogo logo={<SvgImodelHollow />}>iTwin Application</HeaderLogo>}
  *  breadcrumbs={
  *   <HeaderBreadcrumbs items={[
- *    <HeaderButton key='project' name='Project A' />
+ *    <HeaderButton key='project' name='Project A' />,
  *    <HeaderButton key='imodel' name='IModel X' />
  *   ]} />
  *  }
@@ -82,9 +82,9 @@ type HeaderProps = {
  *     <SvgHelpCircularHollow />
  *    </IconButton>
  *   </DropdownMenu>,
- *   <DropdownMenu menuItems={...}>
+ *   <DropdownMenu menuItems={…}>
  *    <IconButton styleType='borderless'>
- *     <Avatar ... />
+ *     <Avatar … />
  *    </IconButton>
  *   </DropdownMenu>
  *  ]}

package/esm/core/Header/Header.js

@@ -17,7 +17,7 @@ const defaultTranslations = {
  *  appLogo={<HeaderLogo logo={<SvgImodelHollow />}>iTwin Application</HeaderLogo>}
  *  breadcrumbs={
  *   <HeaderBreadcrumbs items={[
- *    <HeaderButton key='project' name='Project A' />
+ *    <HeaderButton key='project' name='Project A' />,
  *    <HeaderButton key='imodel' name='IModel X' />
  *   ]} />
  *  }
@@ -28,9 +28,9 @@ const defaultTranslations = {
  *     <SvgHelpCircularHollow />
  *    </IconButton>
  *   </DropdownMenu>,
- *   <DropdownMenu menuItems={...}>
+ *   <DropdownMenu menuItems={…}>
  *    <IconButton styleType='borderless'>
- *     <Avatar ... />
+ *     <Avatar … />
  *    </IconButton>
  *   </DropdownMenu>
  *  ]}

package/esm/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -32,7 +32,7 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
      */
     Button: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
         styleType?: "default" | "cta" | "high-visibility" | "borderless" | undefined;
     } & {
         as?: "button" | undefined;

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

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Box, getRandomValue } from '../../../utils/index.js';
+import cx from 'classnames';
 /**
  * Editable cell.
  * It should be passed to `cellRenderer`.
@@ -15,7 +16,7 @@ import { Box, getRandomValue } from '../../../utils/index.js';
  * }
  */
 export const EditableCell = (props) => {
-    const { cellElementProps, cellProps, onCellEdit, children, isDisabled, ...rest } = props;
+    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, cellProps, onCellEdit, children, isDisabled, className, style, ...rest } = props;
     isDisabled; // To omit and prevent eslint error.
     const sanitizeString = (text) => {
         return text.replace(/(\r\n|\n|\r)+/gm, ' ');
@@ -26,7 +27,7 @@ export const EditableCell = (props) => {
     }, [cellProps.value]);
     const [key, setKey] = React.useState(getRandomValue(10));
     const [isDirty, setIsDirty] = React.useState(false);
-    return (React.createElement(Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
+    return (React.createElement(Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, className: cx(cellElementClassName, className), style: { ...cellElementStyle, ...style }, onInput: (e) => {
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);
             props.onInput?.(e);