@itwin/itwinui-react/CHANGELOG.md

A react component library for iTwinUI

# Changelog

## 3.19.7

### Patch Changes

- [#2655](https://github.com/iTwin/iTwinUI/pull/2655): Force text wrapping for long words in `Tile.Description`.
- 611d8d5e2b3ea63652ab36024043ef8826821c60: Fixed a bug in `Table` where the SelectionColumn Header would incorrectly calculate the indeterminate state if `state.selectedRowIds` contained any `false` values.
- Theme bridge:
  - cfe6f8896c46d290695a459cd979e4aa7c75d6bb: Fixed `FileUpload` background transparency issue.
  - d1e28aa80ab429008d65e1ff7a23faaf70aecadc: Updated the minimum required version of `@stratakit/foundations` to `>=0.4.0`.

## 3.19.6

### Patch Changes

- [#2647](https://github.com/iTwin/iTwinUI/pull/2647): Updated theme bridge to use latest token values.

## 3.19.5

### Patch Changes

- [#2636](https://github.com/iTwin/iTwinUI/pull/2636): Added `color` to all text `::selection` styles. This fixes a theme bridge issue with text selection color contrast.
- [#2598](https://github.com/iTwin/iTwinUI/pull/2598): Added theme bridge hover state to all components.
- [#2598](https://github.com/iTwin/iTwinUI/pull/2598): Minor theme bridge visual changes in various components to reflect the latest version of StrataKit.
- [#2637](https://github.com/iTwin/iTwinUI/pull/2637): Updated theme bridge styling for `Tabs` to use accent colors.
- [#2642](https://github.com/iTwin/iTwinUI/pull/2642): Updated focus outline styles in some components.
- [#2641](https://github.com/iTwin/iTwinUI/pull/2641): Changed menu item's background-color on hover state.

## 3.19.4

### Patch Changes

- [#2633](https://github.com/iTwin/iTwinUI/pull/2633): Fixed horizontal scroll in `Tree` with `enableVirtualization` so that all nodes are equally wide instead of using their intrinsic width.
- c07a7166f1cbf5d8ec6c86389da2f9e1870af6d6: Fixed a theme bridge issue where `<Checkbox indeterminate>` was not displaying correctly in light theme.
- 6d73dbecc2a5d57d1c4979ddbc7ef931744aebeb: Added `aria-haspopup` attribute to `DropdownMenu`'s trigger.

## 3.19.3

### Patch Changes

- [#2622](https://github.com/iTwin/iTwinUI/pull/2622): Fixed `ComboBox` and `Select` bug by no longer rendering the deselect ("❌") button in the tags when the multiselect `ComboBox`'s input or the multiselect `Select` is disabled.
- [#2618](https://github.com/iTwin/iTwinUI/pull/2618): `TreeNode` hover styles only applied when hover is supported.
- [#2624](https://github.com/iTwin/iTwinUI/pull/2624): Floating elements will try to prefer a best fit placement.

## 3.19.2

### Patch Changes

- [#2612](https://github.com/iTwin/iTwinUI/pull/2612): Fixed theme bridge to use StrataKit fonts.
- [#2616](https://github.com/iTwin/iTwinUI/pull/2616): Reverted the internal change made in [v3.19.0](https://github.com/iTwin/iTwinUI/releases/tag/%40itwin%2Fitwinui-react%403.19.0) where `Table`'s `SelectionColumn` and `ExpanderColumn` had been fixed to use `cellRenderer` instead of `Cell`.
- [#2603](https://github.com/iTwin/iTwinUI/pull/2603): `Breadcrumbs.Item` now respects the `aria-current` prop.
- [#2615](https://github.com/iTwin/iTwinUI/pull/2615): `Table` row and header separators made more subtle.

## 3.19.1

### Patch Changes

- [#2590](https://github.com/iTwin/iTwinUI/pull/2590): Fix draggable `Dialog` to also work properly on touch devices.
- [#2596](https://github.com/iTwin/iTwinUI/pull/2596): Fixed `TransferList.Item` to now properly handle long strings.
- [#2589](https://github.com/iTwin/iTwinUI/pull/2589): Removed the accidentally added `stretched` prop from `IconButton`.

## 3.19.0

### Minor Changes

- **Future flags**:

  - [#2573](https://github.com/iTwin/iTwinUI/pull/2573): Added the ability to pass `future={true}` to `ThemeProvider` to enable _all_ future flags.
  - [#2543](https://github.com/iTwin/iTwinUI/pull/2543): Added a new future flag to `ThemeProvider`'s `future` prop: `ToggleSwitch.consistentPropsSpread`. Setting this to `true` will result in all `ToggleSwitch` DOM props being applied on the input element.

- [#2544](https://github.com/iTwin/iTwinUI/pull/2544): Added a new `wrapperProps` prop to `ToggleSwitch` to pass props to the wrapper. To prevent breaking changes:
  - If this new `wrapperProps` is provided or `ThemeProvider`'s `ToggleSwitch.consistentPropsSpread` future flag is `true`, `className` and `style` will be applied on the `input` and `wrapperProps` will be applied on the wrapper.
  - Else, `className` and `style` continue to be applied on the wrapper.
- [#2576](https://github.com/iTwin/iTwinUI/pull/2576): `MenuItem`'s `value` prop has been deprecated. When the `value` is not passed, the `onClick` prop will now be called with the `event` instead of `value`.
- [#2551](https://github.com/iTwin/iTwinUI/pull/2551): `Tree` now horizontally scrolls instead of truncation of `TreeNode`s when in horizontally overflowing `Tree`s.
- [#2528](https://github.com/iTwin/iTwinUI/pull/2528): The behavior of all `on[Value]Change` props has been made consistent such that they are only called when `[value]` actually _changes_ (uncontrolled mode) or should _change_ (controlled mode).
  Affected props include:
  - `Tabs.Wrapper`: `onValueChange` prop
  - `Tabs`: `onTabSelected` prop
  - `DropdownMenu`: `onVisibleChange` prop
  - `Popover`: `onVisibleChange` prop
  - `Tooltip`: `onVisibleChange` prop
- [#2541](https://github.com/iTwin/iTwinUI/pull/2541), [#2584](https://github.com/iTwin/iTwinUI/pull/2584): Visual changes to `Tabs` for better accessibility and appearance when in theme bridge mode.
  - `Tabs.Wrapper` without `type` declared focus `outline-offset` inset more so to not obstruct the active tab stripe.
  - `Tabs.Wrapper type='borderless'` dividing line reduced to give the active tab stripe a visual difference.
  - `Tabs.Wrapper type='borderless'` active tab no longer has `background-color` change.
  - `Tabs.TabDescription` has `color` change with `transition`.
  - `Tabs.Wrapper type='default'` disabled tab will now have the same background color as the non-disabled tab.
- [#2585](https://github.com/iTwin/iTwinUI/pull/2585): Bumped the minimum required versions of `@floating-ui/react`, `@tanstack/react-virtual`, and `@swc/helpers`.

### Patch Changes

- [#2569](https://github.com/iTwin/iTwinUI/pull/2569), [#2578](https://github.com/iTwin/iTwinUI/pull/2578): The [**theme bridge**](https://github.com/iTwin/iTwinUI/wiki/StrataKit-theme-bridge) has been updated to more closely match the latest StrataKit visuals. The most prominent change is in the background-color of various components.
- [#2551](https://github.com/iTwin/iTwinUI/pull/2551): Fixed non-virtualized `Tree` where the `TreeNode`s now stretch to the full width of the horizontally scrolling `Tree`.
- **Table**:
  - [#2568](https://github.com/iTwin/iTwinUI/pull/2568): Fixed `Table` bug where it unintentionally tried to add non-DOM props (e.g. `useControlledState` and `autoResetResize`) to the DOM which lead to a React console warning.
  - [#2579](https://github.com/iTwin/iTwinUI/pull/2579): Changed the internal implementation of `Table` cells so that an extra wrapper element is rendered when the cell contains _text only_. Any custom cell content (passed via `Cell`) will now be rendered as-is.
  - [#2568](https://github.com/iTwin/iTwinUI/pull/2568): `Table`'s `defaultColumn` prop is now respected.
  - [#2583](https://github.com/iTwin/iTwinUI/pull/2583): Fixed `Table` to no longer give a hydration mismatch error when using `ActionColumn`.
- [#2575](https://github.com/iTwin/iTwinUI/pull/2575): `DropdownButton`'s `menuItems` now also allows directly passing `React.JSX.Element[]` or `React.JSX.Element` (like `DropdownMenu`'s `menuItems`). If doing so, can be used with `dropdownMenuProps` prop's `closeOnItemClick`.
- [#2571](https://github.com/iTwin/iTwinUI/pull/2571): Fixed `DropdownMenu` and other components to no longer result in a React warning of `ref` being incorrectly accessed as a prop in React 18 or earlier.
- [#2575](https://github.com/iTwin/iTwinUI/pull/2575): Fixed `DropdownMenu`'s `children` type to be `React.JSX.Element` instead of `React.ReactNode`.
- [#2574](https://github.com/iTwin/iTwinUI/pull/2574): `ButtonGroup` no longer has overlapping borders between adjacent iTwinUI borderless buttons.
- [#2570](https://github.com/iTwin/iTwinUI/pull/2570): Fixed `Tag` to correctly merge `labelProps.onClick` and `removeButtonProps.onClick` with the internal `onClick` handlers.
- [#2581](https://github.com/iTwin/iTwinUI/pull/2581): Moved legacy `::-webkit-scrollbar` styles under a `@supports` block.

## 3.18.3

### Patch Changes

- [#2554](https://github.com/iTwin/iTwinUI/pull/2554): Fixed color mismatch between font icons and svg icons in `IconButton` and `MenuItem`. (NOTE: Despite this fix, use of font icons is still discouraged).

## 3.18.2

### Patch Changes

- [#2535](https://github.com/iTwin/iTwinUI/pull/2535): Fixed `Table` regression where custom content passed into `DefaultCell` was not stretching to the full cell width.
- [#2524](https://github.com/iTwin/iTwinUI/pull/2524): Fixed `Popover` regression of unintended automatic resizing of floating content when opened.
- [#2538](https://github.com/iTwin/iTwinUI/pull/2538): `Table`'s `caption` prop is now correctly applied.

## 3.18.1

### Patch Changes

- [#2525](https://github.com/iTwin/iTwinUI/pull/2525): Fixed an issue in `Dialog`/`Modal` where nested floating elements (e.g. `Select` dropdown) were not interactable because they were being portaled incorrectly.
- [#2526](https://github.com/iTwin/iTwinUI/pull/2526): `Tooltip`'s entry delay has been increased to match the exit delay. This change will help reduce the chances of a user accidentally triggering the tooltip, while also preventing multiple tooltips from showing at the same time.
- [#2521](https://github.com/iTwin/iTwinUI/pull/2521): Fixed `Table` not working in older React versions where `useId` is not available.
- [#2527](https://github.com/iTwin/iTwinUI/pull/2527): Fixed `Table` bug where it unintentionally tried to add `scrollToRow` to the DOM and thus led to a console error.
- [#2512](https://github.com/iTwin/iTwinUI/pull/2512): Clicking a `MenuItem` with a submenu no longer closes the parent menu, regardless of `DropdownMenu`'s `closeOnItemClick` prop, for example.

## 3.18.0

### Minor Changes

- [#2498](https://github.com/iTwin/iTwinUI/pull/2498): **ComboBox, Select**: Added the ability to deselect options in the closed state when using `multiple` selection mode. The tags will now each have a deselect ("❌") button.
  - [#2346](https://github.com/iTwin/iTwinUI/pull/2346): `<Select multiple>` now renders the tag container outside the select-button. While this shouldn't make a noticeable difference in most cases, it might affect the use of `selectedItemRenderer`.
- [#2487](https://github.com/iTwin/iTwinUI/pull/2487): `Table`'s accessibility tree structure has been fixed. This required moving the `role="table"` attribute from the outermost element to a new element inside the Table's shadow DOM. Elements that are not allowed within `role="table"` (e.g. paginator, loading indicator, empty state) will now remain outside `role="table"`, thus resulting in a valid accessibility tree.

  A new `tableProps` prop has been added, which allows passing props to the inner `role="table"` element.

  **NOTE**: For backwards compatibility, ARIA attributes passed directly to `<Table>` will now be automatically propagated to the inner `role="table"` element by default. However, when `tableProps` or `role` is also passed, the ARIA attributes passed directly to `<Table>` will remain on the outermost element to keep the behavior more predictable.

- [#2487](https://github.com/iTwin/iTwinUI/pull/2487): Added a `caption` prop to `Table` that serves as the table caption. Although optional for backward compatibility, it is **recommended** to use it for accessibility purposes.

- **Nested popovers**:

  - [#2490](https://github.com/iTwin/iTwinUI/pull/2490): `Dialog`, `Modal` and `Popover` will now correctly handle portaling of nested floating elements.
  - [#2490](https://github.com/iTwin/iTwinUI/pull/2490): Fixed an issue in `toaster` where toasts was portaling into a new container when used inside `<Popover>`. With this change, the global toaster container will be correctly reused.
  - [#2491](https://github.com/iTwin/iTwinUI/pull/2491): Fixed an issue where `Dialog` nested inside `Popover` was not appearing correctly.
  - [#2491](https://github.com/iTwin/iTwinUI/pull/2491): Adjusted the `z-index` value of `Popover` and other floating elements to match `Dialog`.

- **Markup changes**:

  - [#2480](https://github.com/iTwin/iTwinUI/pull/2480): `<MenuExtraContent>` now renders a `<div>` instead of `<li>` to prevent invalid markup.
  - [#2481](https://github.com/iTwin/iTwinUI/pull/2481): `<SideNavigation>` now renders a `<nav>` as the topmost element. This creates a [navigation landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html) for assistive technology.

- [#2482](https://github.com/iTwin/iTwinUI/pull/2482): Added a new `closeItemOnClick` prop to `<DropdownMenu>`. When set to `true`, the menu will automatically close when any menu-item is clicked, without having to explicitly call `close()`.
- [#2506](https://github.com/iTwin/iTwinUI/pull/2506): Added a new `positionReference` prop to `DropdownMenu`. This prop changes the position of the dropdown menu, which may be useful for building context menus.

- [#2493](https://github.com/iTwin/iTwinUI/pull/2493): Added a new `unstable_TabsPresentation` component. This can be used in cases where the [ARIA Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) is not desirable. Includes the following subcomponents: `Wrapper`, `TabList`, and `Tab`.

- [#2499](https://github.com/iTwin/iTwinUI/pull/2499): Passing the `name` prop to `<Tile.Name>` now internally wraps the name with `<Tile.NameLabel>` to make the behavior consistent with the composition API.

  <details>
    <summary>Code</summary>

  The following two examples are now equivalent:

  ```tsx
  <Tile.Name name='My Tile' />
  ```

  ```tsx
  <Tile.Name>
    <Tile.NameLabel>My Tile</Tile.NameLabel>
  </Tile.Name>
  ```

  </details>

- **Dependencies**:
  - [#2485](https://github.com/iTwin/iTwinUI/pull/2485): Removed dependency on `jotai`.
  - [#2496](https://github.com/iTwin/iTwinUI/pull/2496): Bumped the minimum required versions of `@floating-ui/react` and `@tanstack/react-virtual`.

### Patch Changes

- [#2497](https://github.com/iTwin/iTwinUI/pull/2497): Fixed a `Tile` bug where `Badge` is not visible within `Tile.ThumbnailArea`.
- [#2503](https://github.com/iTwin/iTwinUI/pull/2503): Updated `--iui-color-background-backdrop` [theme bridge](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-v5-theme-bridge) mapping to match latest designs.
- **Table**:
  - [#2462](https://github.com/iTwin/iTwinUI/pull/2462): Fixed a "Maximum update depth exceeded" error in `Table`.
  - [#2505](https://github.com/iTwin/iTwinUI/pull/2505): Fixed an issue in `Table` where `onSelect` was being incorrectly called when selecting text inside cells.
  - [#2505](https://github.com/iTwin/iTwinUI/pull/2505): Increased the hit target size of checkboxes and text inside cells to prevent accidental row clicks when clicking the checkbox or selecting the text.
  - [#2487](https://github.com/iTwin/iTwinUI/pull/2487): Add missing labels to row checkboxes and to the select all checkbox.
  - [#2487](https://github.com/iTwin/iTwinUI/pull/2487): Removed invalid and unsupported ARIA attributes from `Table` and its internal elements. Notably, `aria-multiselectable` and `role="rowgroup"` were removed.

## 3.17.4

### Patch Changes

- [#2473](https://github.com/iTwin/iTwinUI/pull/2473): Fixed scrolling on touch devices when using the `enableVirtualization` prop in `Tree` and `ComboBox`.
- [#2466](https://github.com/iTwin/iTwinUI/pull/2466): Fix `Tab`'s stripe positioning when `Tabs.TabList` overflows.
- [#2469](https://github.com/iTwin/iTwinUI/pull/2469): Fixed `Tabs` bug where orientation related styles of nested tabs were sometimes incorrect.

## 3.17.3

### Patch Changes

- [#2452](https://github.com/iTwin/iTwinUI/pull/2452): Fixed bug where nested `MenuItem`s in `Tile.MoreOptions` were not closing when clicked.
- [#2455](https://github.com/iTwin/iTwinUI/pull/2455): Submenus will now correctly portal to the same place as their parent menu (E.g. `DropdownMenu`, `SplitButton`)
- [#2457](https://github.com/iTwin/iTwinUI/pull/2457): Fixed bug in `ExpandableBlock` where cursor was `pointer` even when it was disabled.

## 3.17.2

### Patch Changes

- [#2442](https://github.com/iTwin/iTwinUI/pull/2442): Removed a leftover `@layer` name, which was originally intended to support _very_ old versions of iTwinUI.
- [#2443](https://github.com/iTwin/iTwinUI/pull/2443): Fixed bug in `Modal` where focus was sometimes jumping from a modal child to the modal itself.
- [#2431](https://github.com/iTwin/iTwinUI/pull/2431): Force text wrapping for long words. Affected components: `Text`, `NonIdealState`, `Stepper`, `WorkflowDiagram`.
- [#2446](https://github.com/iTwin/iTwinUI/pull/2446): Fixed background color in menus when the [theme bridge](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-v5-theme-bridge) is enabled.

## 3.17.1

### Patch Changes

- [#2436](https://github.com/iTwin/iTwinUI/pull/2436): The **theme bridge** has been updated to handle the breaking changes introduced in `@itwin/itwinui-react@5.0.0-alpha.6`.
- [#2430](https://github.com/iTwin/iTwinUI/pull/2430): Fixed bug in `SplitButton` where the `dropdownMenuProps.middleware` prop was not respected.
- [#2430](https://github.com/iTwin/iTwinUI/pull/2430): Fixed a `SplitButton` bug where `dropdownMenuProps` was accidentally being added to the DOM.
- [#2430](https://github.com/iTwin/iTwinUI/pull/2430): Added missing `div` props in `dropdownMenuProps`'s type for `DropdownButton` and `SplitButton`.

## 3.17.0

### Minor Changes

- [#2387](https://github.com/iTwin/iTwinUI/pull/2387): Added support for React 19.
- [#2373](https://github.com/iTwin/iTwinUI/pull/2373): Added a **theme bridge** which adjusts iTwinUI v3 visuals to blend in with iTwinUI v5's new look-and-feel.

  To enable the theme bridge, use the `future.themeBridge` flag on `<ThemeProvider>`. See [full documentation](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-v5-theme-bridge) for more detailed instructions.

  **Note**: The theme bridge is still considered an _alpha_ feature, so there may be breaking changes until it's stabilized.

- [#2391](https://github.com/iTwin/iTwinUI/pull/2391): Removed dependency on `react-transition-group`. Notable changes in components:
  - `useToaster`: Animations have been reworked to directly use the web animations API.
  - `Dialog` and `Modal`: Exit animations have been temporarily removed.
- [#2387](https://github.com/iTwin/iTwinUI/pull/2387): Bumped the minimum required versions of the following dependencies:
  - `@tanstack/react-virtual` to `3.13.0`
  - `@floating-ui/react` to `0.27.4`
  - `classnames` to `2.5.1`

### Patch Changes

- [#2429](https://github.com/iTwin/iTwinUI/pull/2429): Fixed an issue where disabled buttons were still causing form submissions. Affects `Button`, `IconButton`, and all other button components.
- [#2368](https://github.com/iTwin/iTwinUI/pull/2368): Fine-tuned the default Tooltip delay to `{ open: 100ms, close: 200ms }`.
- [#2368](https://github.com/iTwin/iTwinUI/pull/2368): Added `Tooltip` delay grouping to components that use `Tooltip` internally. This prevents the tooltip from lingering when quickly hovering across different parts of the component.
  - Components affected: `SideNavigation`, `Slider`, `Stepper`, `List`.
- [#2373](https://github.com/iTwin/iTwinUI/pull/2373): Fixed an issue in `InputWithDecorations` and `SearchBox` where the component-level focus styling was colliding with global focus styling, leading to double focus outlines.

## 3.16.6

### Patch Changes

- [#2411](https://github.com/iTwin/iTwinUI/pull/2411): Fixed `Panels.Trigger` not working in older React versions where `useId` is not available.
- [#2407](https://github.com/iTwin/iTwinUI/pull/2407): Increased contrast (i.e. opacity) of light theme's text selection background. This also affects some other opacities of other components (e.g. shadows and hover backgrounds).

## 3.16.5

### Patch Changes

- [#2402](https://github.com/iTwin/iTwinUI/pull/2402): Fixed an issue in `Tabs` where it wasn't recalculating the active stripe position when a new tab was asynchronously added to the tablist.

## 3.16.4

### Patch Changes

- [#2389](https://github.com/iTwin/iTwinUI/pull/2389): Fixed `Table` bug where parent rows had indeterminate checkboxes even when all sub rows were selected.
- [#2390](https://github.com/iTwin/iTwinUI/pull/2390): Fixed `ThemeProvider` bug of re-mounting its children and losing state when `portalContainer` is toggled between `undefined` and defined.
- [#2396](https://github.com/iTwin/iTwinUI/pull/2396): Fixed rare bug where icons in button components (e.g. `Button`, `SidenavButton`, etc.) were becoming 0 in width when less space was available.

## 3.16.3

### Patch Changes

- [#2384](https://github.com/iTwin/iTwinUI/pull/2384): Fixed the syntax for `react` and `react-dom` version ranges declared in `peerDependencies`.
- [#2386](https://github.com/iTwin/iTwinUI/pull/2386): Fixed a visual issue in `Tile.Name` where a long string without spaces wasn't wrapping properly.

## 3.16.2

### Patch Changes

- [#2378](https://github.com/iTwin/iTwinUI/pull/2378): Fixed folder variant `Tile`'s broken layout when it has a long name.

## 3.16.1

### Patch Changes

- [#2362](https://github.com/iTwin/iTwinUI/pull/2362): `Select` with "small" size now has the same height (`24px`) as other input elements with "small" size (e.g. `ComboBox`)
- [#2370](https://github.com/iTwin/iTwinUI/pull/2370): Fixed `Panels` animations not working in some rare cases.
- [#2374](https://github.com/iTwin/iTwinUI/pull/2374): Fixed `HeaderButton`'s `startIcon` and `endIcon` fill color.
- [#2359](https://github.com/iTwin/iTwinUI/pull/2359): `Tooltip` now remains visible when hovered up to `4px` outside its border.

## 3.16.0

### Minor Changes

- [#2001](https://github.com/iTwin/iTwinUI/pull/2001): Added a new generic `unstable_Panels` component for easy setup of nested screens/panels. Example uses: multi-layered menus, wizards, settings screens, etc.
  - This API is temporarily marked as **unstable** to collect [feedback](https://github.com/iTwin/iTwinUI/discussions/2348) for some time to tailor the generic component specifically to users' needs.
- [#2345](https://github.com/iTwin/iTwinUI/pull/2345): `Stepper` now allows passing custom icon or content in each step circle using a `stepContent` property in each item of the `steps` array.
- [#2294](https://github.com/iTwin/iTwinUI/pull/2294): `ComboBox` with `multiple` enabled now offers a `clearFilterOnOptionToggle` prop to control whether the filter is cleared or not when an option is toggled. Default value is `true` (i.e. no breaking change).
- [#2299](https://github.com/iTwin/iTwinUI/pull/2299)/[5d313a7](https://github.com/iTwin/iTwinUI/commit/5d313a763b5b5996664a3af14c8270e40dc07b72): Added new `tileContainer` prop to `RadioTileGroup` to allow further customization of inner DOM elements.

### Patch Changes

- [#2337](https://github.com/iTwin/iTwinUI/pull/2337): Fixed a `Table` bug where row items could not be focused via the `Tab` key.
- [#2317](https://github.com/iTwin/iTwinUI/pull/2317): Fixed duplicate data returned from `Table`'s `onSelect` prop.
- [#2316](https://github.com/iTwin/iTwinUI/pull/2316): `TablePaginator`'s page buttons no longer get overlapped by neighboring paginator elements.
- [#2327](https://github.com/iTwin/iTwinUI/pull/2327): Fixed a `Tree` bug where the `size` prop was not respected when virtualization was enabled.
- [#2311](https://github.com/iTwin/iTwinUI/pull/2311): Updated the default value of `Dialog`'s `setFocus` prop to be based on the value of the `trapFocus` prop.
- [#2154](https://github.com/iTwin/iTwinUI/pull/2154): Fixed bugs and improved performance in components with overflow support (e.g. `ComboBox`, `Select`, `ButtonGroup`, `Breadcrumbs`, etc.)
- [#2339](https://github.com/iTwin/iTwinUI/pull/2339): Improved the accessibility of `MiddleTextTruncation` so that the entire untruncated text is part of the accessibility tree.
- [#2334](https://github.com/iTwin/iTwinUI/pull/2334): `DatePicker` with `enableRangeSelect` now allows `startDate` and `endDate` to _both_ be `undefined` (e.g. when there is no initial range). Passing `Date` to just _one_ of them is not allowed.
- [#2347](https://github.com/iTwin/iTwinUI/pull/2347): `InputWithDecorations.Input` now properly gets `cursor: not-allowed` when disabled.
- [#2323](https://github.com/iTwin/iTwinUI/pull/2323): Ensured that the `useToaster` wrapper does not block clicks when used within other portal containers (e.g. from AppUI).

## 3.15.5

### Patch Changes

- [#2306](https://github.com/iTwin/iTwinUI/pull/2306): Fixed broken expandable content (`subComponent`) when `Table` is asynchronously re-rendered.
- [#2306](https://github.com/iTwin/iTwinUI/pull/2306): Fixed `Table`'s max depth reached error caused when passing the `getRowId` prop.

## 3.15.4

### Patch Changes

- [#2297](https://github.com/iTwin/iTwinUI/pull/2297): More robust fix for an issue where nested `Popover`s were automatically closing due to faulty "outside click" detection.
- [#2295](https://github.com/iTwin/iTwinUI/pull/2295): `ComboBox` with `multiple={true}` properly clears its input's value whenever the filter is cleared. e.g. when an option is toggled or the combobox is unfocused.
- [#2288](https://github.com/iTwin/iTwinUI/pull/2288): `Table` now displays development-only console warnings when both `subRows` and `subComponent` are simultaneously passed to it.
- [#2301](https://github.com/iTwin/iTwinUI/pull/2301): Fixed arrow keys page navigation in `TablePaginator`.
- [#2303](https://github.com/iTwin/iTwinUI/pull/2303): `TablePaginator` shows ellipses only whenever needed.

## 3.15.3

### Patch Changes

- [#2285](https://github.com/iTwin/iTwinUI/pull/2285): Fixed an issue in `ProgressLinear` where passing a `style` prop would cause it to lose its `value`.
- [#2281](https://github.com/iTwin/iTwinUI/pull/2281): Inputs (e.g. `Input`, `ComboBox`, etc.) with "small" size now have the same height as other field elements with "small" size (e.g. `Button`).
- [#2274](https://github.com/iTwin/iTwinUI/pull/2274): `IconButton`s inside `TransferList.Toolbar` will now show tooltips on the right side by default to avoid obscuring adjacent buttons in the group. This placement can be changed using the `labelProps.placement` prop on the `IconButton`.
- [#2274](https://github.com/iTwin/iTwinUI/pull/2274): `TransferList.Toolbar` implements the previously missing [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/), including the arrow-key navigation functionality.

## 3.15.2

### Patch Changes

- [#2275](https://github.com/iTwin/iTwinUI/pull/2275): Made the `ActionType.type` type in `Table` more specific. This will help when using the `action` argument in the `stateReducer` function, for example.
- [#2273](https://github.com/iTwin/iTwinUI/pull/2273): Fixed an issue where the internal unit test detection logic was incorrectly treating Cypress like a unit test environment.

## 3.15.1

### Patch Changes

- [#2263](https://github.com/iTwin/iTwinUI/pull/2263): Default `Tooltip` delay is now correctly applied.
- [#2266](https://github.com/iTwin/iTwinUI/pull/2266): All instances of `user-select: all` have been removed.
  - Affected components: `Code`, `InformationPanel`, `Slider`, `Stepper`, `Tile`.

## 3.15.0

### Minor Changes

- [#2233](https://github.com/iTwin/iTwinUI/pull/2233): `Popover` now enables the [`hide` middleware](https://floating-ui.com/docs/hide) to hide the floating content when the trigger is hidden.

  - This also affects other popover-like components (e.g. `Select`, `ComboBox`, `DropdownMenu`, `SplitButton`).
  - If the floating content gets hidden even when it shouldn't (e.g. due to some custom styles interfering with the trigger's hide detection), consider disabling the `hide` middleware.

- [#2233](https://github.com/iTwin/iTwinUI/pull/2233): Added a new `dropdownMenuProps` prop to `SplitButton` for additional control over the menu (e.g. to disable the [`hide` middleware](https://floating-ui.com/docs/hide)).

- [#2259](https://github.com/iTwin/iTwinUI/pull/2259): `ComboBox` and `Select` now allow customizing the portal behavior of the floating listbox.

  - To customize `ComboBox` portaling behavior, use `dropdownMenuProps.portal`.
  - To customize `Select` portaling behavior, use `popoverProps.portal`.

  <details>
  <summary>Example</summary>

  To turn off the default portaling behavior, use `portal: false`.

  ```jsx
  <ComboBox
    options={[…]}
    dropdownMenuProps={{ portal: false }}
  />
  ```

  ```jsx
  <Select
    options={[…]}
    popoverProps={{ portal: false }}
  />
  ```

  </details>

- [#2238](https://github.com/iTwin/iTwinUI/pull/2238): Passing `styleType="borderless"` to `SearchBox.ExpandButton` now works as expected. This is because collapsed `SearchBox` will now hide its border and background in favor of the ones from `SearchBox.ExpandButton`.

  <details>
  <summary>Example</summary>

  ```diff
  <SearchBox expandable>
    <SearchBox.CollapsedState>
  -     <SearchBox.ExpandButton/>
  +     <SearchBox.ExpandButton styleType="borderless"/>
    </SearchBox.CollapsedState>
    <SearchBox.ExpandedState>…</SearchBox.ExpandedState>
  </SearchBox>
  ```

  </details>

- [#2211](https://github.com/iTwin/iTwinUI/pull/2211): Added the ability to have custom `props` for each sub-component of `ColorPicker`.
  - New **ColorBuilder** props: `colorFieldProps`, `colorDotProps`, `opacitySliderProps`, and `hueSliderProps`.
  - New **ColorInputPanel** props: `panelLabelProps`, `colorInputContainerProps`, `inputFieldsGroupProps` and `swapColorFormatButtonProps`.
  - New **ColorPalette** props: `labelProps`, and `paletteContainerProps`.

### Patch Changes

- [#2208](https://github.com/iTwin/iTwinUI/pull/2208): Fixed an issue in `Table` where `subComponent` was broken when enabling virtualization.
- [#2239](https://github.com/iTwin/iTwinUI/pull/2239): Fixed `scrollToRow` in un-virtualized `Table`. In virtualized `Table`, `scrollToRow` now scrolls to the top for consistent behavior.
- [#2233](https://github.com/iTwin/iTwinUI/pull/2233): `Popover`'s `middleware.hide` prop is now respected.
- [#2208](https://github.com/iTwin/iTwinUI/pull/2208): `Table`'s animation to show and hide its `subComponent` is now removed.
- [#2252](https://github.com/iTwin/iTwinUI/pull/2252): Fixed an issue where some components (e.g. `VisuallyHidden` inside `ProgressRadial`) were losing their styles when reparented into a different window.

## 3.14.2

### Patch Changes

- [#2217](https://github.com/iTwin/iTwinUI/pull/2217): Fixed the `Footer`'s `translatedTitles` prop's type to allow passing partial translations.
- [#2218](https://github.com/iTwin/iTwinUI/pull/2218): Fixed a `Table` bug where custom `Cell` content was not taking up the entire available width in some cases.
- [#2216](https://github.com/iTwin/iTwinUI/pull/2216): Fixed the fallback CSS logic in `ThemeProvider` to load the correct stylesheet version.

## 3.14.1

### Patch Changes

- [#2209](https://github.com/iTwin/iTwinUI/pull/2209): Fixed an issue where nested `Popover`s were automatically closing due to faulty "outside click" detection.
- [#2213](https://github.com/iTwin/iTwinUI/pull/2213): Dev-only warnings have been improved so that they are correctly shown for every individual instance of a component. Additionally, these warnings are now logged using `console.error`, which results in a better stack trace.

## 3.14.0

### Minor Changes

- [#2040](https://github.com/iTwin/iTwinUI/pull/2040): The colors of disabled controls have been adjusted make them easier to distinguish from regular controls.
  - Also added hover state to disabled button, select, input, textarea, and actionable list item to help with accessibility.
- [#2153](https://github.com/iTwin/iTwinUI/pull/2153): Nested `ThemeProvider`s will now reuse the same toaster instead of creating new ones.
- [#2201](https://github.com/iTwin/iTwinUI/pull/2201): `List` and `ListItem` will now be rendered as `<div>`s instead of `<ul>`/`<li>`. This change makes these components less restrictive and less error-prone to use.
- [#2187](https://github.com/iTwin/iTwinUI/pull/2187): Floating elements will now use `position: fixed` instead of `position: absolute`.
  - This fixes some issues when a floating element is placed near the edge of the viewport.
  - Some components affected: `Tooltip`, `Popover`, `Select`, `DropdownMenu`, `ComboBox`, etc.
- [#2190](https://github.com/iTwin/iTwinUI/pull/2190): `Popover` now enables the [`size` middleware](https://floating-ui.com/docs/size) to prevent it from overflowing the viewport.
  - This also affects other popover-like components (e.g. `Select`, `ComboBox`, `DropdownMenu`).
  - `Popover` now also sets a default max-height of `400px` to prevent it from becoming too large. This can be customized using the `middleware.size.maxHeight` prop.
- [#2205](https://github.com/iTwin/iTwinUI/pull/2205): `tableFilters.TextFilter` now prevents the user from applying the filter when the text input is empty.
- [#2205](https://github.com/iTwin/iTwinUI/pull/2205): `BaseFilter` now renders as a `<form>` and `FilterButtonBar` now renders a `<button type="submit">`. Together, this enables the use of browser's built-in validation before applying filters.

  - The `setFilter` prop in `FilterButtonBar` has been deprecated, as `onSubmit` should be used instead.
    <details>
      <summary>Diff</summary>

    ```diff
      <BaseFilter
    +   onSubmit={() => setFilter(text)}
      >
        …
        <FilterButtonBar
    -     setFilter={() => setFilter(text)}
        />
      </BaseFilter>
    ```

    </details>

### Patch Changes

- [#2194](https://github.com/iTwin/iTwinUI/pull/2194): Fixed an issue where CommonJS files in the development build output (`DEV-cjs/` directory) were being treated as ESM, inadvertently causing runtime errors during development.
- [#2185](https://github.com/iTwin/iTwinUI/pull/2185): Portal containers will now default to a `<div>` rendered at the end of `<body>` instead of a `<div>` rendered inside the `<ThemeProvider>`.
- [#2202](https://github.com/iTwin/iTwinUI/pull/2202): `IconButton` will now reroute the HTML `title` prop to its own `label` prop for better accessibility. The `title` prop has also been marked deprecated to encourage the use of `label`.
- [#2168](https://github.com/iTwin/iTwinUI/pull/2168): Adjusted focus management in `Popover` so that it allows interactive elements inside the popover to be more easily focused. This more closely matches the behavior of the HTML `<dialog>` element, which focuses the first interactive element inside it.
- [#2207](https://github.com/iTwin/iTwinUI/pull/2207): Fixed a bug where `pointer-events: none` was sometimes applied to the main `<body>` when a `MenuItem` was hovered in a popout window.
- [#2189](https://github.com/iTwin/iTwinUI/pull/2189): Floating elements will now have a few pixels of padding from the edge of the viewport.
- [#2202](https://github.com/iTwin/iTwinUI/pull/2202): `IconButton` will now display warnings during development when it's missing a label.
- [#2178](https://github.com/iTwin/iTwinUI/pull/2178): Reduced layout thrashing on `Table` component by memoizing an expensive `ref` function.
- [#2194](https://github.com/iTwin/iTwinUI/pull/2194): The development build output is now also formatted using `prettier` for easier debugging.

## 3.13.4

### Patch Changes

- [#2138](https://github.com/iTwin/iTwinUI/pull/2138): Fixed an issue in `Table` column resizing where passing in a `width` value that was less than the column's default `minWidth` would cause an undesirable shift when the column was resized.
- [#2170](https://github.com/iTwin/iTwinUI/pull/2170): Fixed an issue in virtualized `Tree` where the `style` prop passed to `TreeNode` was not respected.
- [#2170](https://github.com/iTwin/iTwinUI/pull/2170): Fixed an issue in virtualized `Tree` where horizontal scroll was impossible to achieve.
- [#2174](https://github.com/iTwin/iTwinUI/pull/2174): Fixed an issue in `Table` where the virtualizer was being initialized when the `enableVirtualization` prop wasn't set to `true`.

## 3.13.3

### Patch Changes

- [#2163](https://github.com/iTwin/iTwinUI/pull/2163): Fixed an issue in virtualized `Table` where horizontal scroll was broken.

## 3.13.2

### Patch Changes

- [#2143](https://github.com/iTwin/iTwinUI/pull/2143): Added `border-radius` to the `Table` component so that the border radius is correctly applied to the `Table`'s corners.
- [#2161](https://github.com/iTwin/iTwinUI/pull/2161): Fixed issue where `emptyTableContent` would not appear on virutalized `Table` components.

## 3.13.1

### Patch Changes

- [#2147](https://github.com/iTwin/iTwinUI/pull/2147): Fixed a CSS issue in `ExpandableBlock` where its content wouldn't stay constrained by the width of the parent.
- [#2148](https://github.com/iTwin/iTwinUI/pull/2148): Fixed regression where the value of the `toggleRowSelected` action for the `Table` would be undefined when `selectSubRows` was set to `false`.

## 3.13.0

### Minor Changes

- [#2106](https://github.com/iTwin/iTwinUI/pull/2106): All internal CSS class prefixes have been changed to prevent style conflicts across minor versions.

  - While this is _not_ considered a breaking change according to our [support policy](https://github.com/iTwin/iTwinUI/wiki/Support-policy), this change might affect you if you ignore our pleas to not rely on these internal class names. The recommendation is to pass your own custom `className` through props.

- [#2131](https://github.com/iTwin/iTwinUI/pull/2131): Development-only warnings will now be properly excluded from the production build. This is done using a separate `"development"` entrypoint listed in `package.json#exports`.

- [#2135](https://github.com/iTwin/iTwinUI/pull/2135): Changed the column manager from a `DropdownMenu` to a `Popover` to fix invalid markup and accessibility issues.

- Added dependency on `@tanstack/react-virtual` to replace the custom virtual-scroll implementation. This affects the `enableVirtualization` prop in `ComboBox`, `Table`, and `Tree`.

  - [#2061](https://github.com/iTwin/iTwinUI/pull/2061): Virtualized `ComboBox` now correctly supports dynamic sizing, e.g. when options both with and without `subLabel` are present.
  - [#2092](https://github.com/iTwin/iTwinUI/pull/2092): Virtualized `Table` has been improved so that scrolling no longer jumps when rows are scrolled past.
  - [#2139](https://github.com/iTwin/iTwinUI/pull/2139): Virtualized `Tree` no longer requires a wrapping scrollable element, since the tree itself is scrollable now.
    <details>
      <summary>Diff</summary>

    ```diff
    - <div style={{overflow: 'auto', height: 'min(400px, 90vh)'}}>
        <Tree
          enableVirtualization
    +     style={{height: 'min(400px, 90vh)'}}
        />
    - </div>
    ```

    </details>

### Patch Changes

- [#2139](https://github.com/iTwin/iTwinUI/pull/2139): Added `overflow: auto` to `Tree` component to provide more consistent styling across components.
- [#2137](https://github.com/iTwin/iTwinUI/pull/2137): Console warnings will now be displayed during development when multiple versions of iTwinUI are detected.
- [#2145](https://github.com/iTwin/iTwinUI/pull/2145): Fixed an issue where the `Overlay` component was causing bundler warnings about a non-analyzable expression used in a dependency.
- [#2135](https://github.com/iTwin/iTwinUI/pull/2135): The `Table` column manager button's open state no longer has the `Button`'s blue active color.
- [#2142](https://github.com/iTwin/iTwinUI/pull/2142): Added `displayName`s to all components that were previously missing them.
- [#2141](https://github.com/iTwin/iTwinUI/pull/2141): `displayName`s have been eliminated from the production build, so they only show up during development.
- [#2135](https://github.com/iTwin/iTwinUI/pull/2135): `ActionColumn`'s `dropdownMenuProps` no longer exposes the unnecessary `matchWidth` prop.

## 3.12.2

### Patch Changes

- [#2127](https://github.com/iTwin/iTwinUI/pull/2127): Fixed an issue in `Dialog` and `Modal`, where long titles were not wrapping properly.

## 3.12.1

### Patch Changes

- [#2124](https://github.com/iTwin/iTwinUI/pull/2124): Fixed a CommonJS-related error where an internal variable was accidentally trying to override the [`module`](https://nodejs.org/api/modules.html#the-module-object) object.
- [#2122](https://github.com/iTwin/iTwinUI/pull/2122): The new JSX transform added in [v3.12.0](https://github.com/iTwin/iTwinUI/releases/tag/%40itwin%2Fitwinui-react%403.12.0) has been reverted, because React 17 [doesn't properly support it](https://github.com/facebook/react/issues/20235).

## 3.12.0

### Minor Changes

- [#2048](https://github.com/iTwin/iTwinUI/pull/2048): Added a new `defaultValue` prop to `ComboBox`. This is useful when you don't want to maintain your own state but still want to control the initial `value`.
- [#2076](https://github.com/iTwin/iTwinUI/pull/2076): Added open popover styling to `Button` (and `IconButton`). When an associated `Popover` or `DropdownMenu` is open, the button will now get a subtle visual indication.
- [#2111](https://github.com/iTwin/iTwinUI/pull/2111): Added the ability to pass arbitrary DOM props to `TreeNode`.
- [#2107](https://github.com/iTwin/iTwinUI/pull/2107): A new `meta` object is exported, containing meta information about the package.

  ```ts
  import { meta } from '@itwin/itwinui-react';

  console.log(meta.version, meta.module); // 3.12.0, ESM
  ```

- [#2048](https://github.com/iTwin/iTwinUI/pull/2048): Fixed a bug in `ComboBox` where the controlled state (`value` prop) was not given priority over the uncontrolled state. As a result:

  - Setting the default value using `value={myDefaultValue}` will no longer work. Instead, use the new `defaultValue` prop.
  - Resetting the value using `value={null}` will now force the ComboBox to be in _controlled_ mode. If you want to reset the value but be in _uncontrolled_ mode, then use `value={undefined}` instead.

- [#2101](https://github.com/iTwin/iTwinUI/pull/2101): Passing an `IconButton` to `Tile.QuickAction` and `Tile.TypeIndicator` is now deprecated. Use `Tile.IconButton` instead.
- [#2021](https://github.com/iTwin/iTwinUI/pull/2021): In menu-like components (`DropdownMenu`, `SplitButton`, `Table`'s column manager), using the _mouse_ to operate the menu will no longer move focus like it does when using the _keyboard_.
- [#2021](https://github.com/iTwin/iTwinUI/pull/2021): `MenuItem`'s `tabIndex` now is `0` when it's selected and `-1` when it's not. Additionally, `MenuItem` passed inside most menu type components (e.g. `DropdownMenu`, `SplitButton`, `Table`'s column manager, etc.) have roving `tabIndex`.
- Dependency changes:
  - [#2116](https://github.com/iTwin/iTwinUI/pull/2116): Bumped the minimum required version of `@floating-ui/react` to `0.26.18`.
  - [#2100](https://github.com/iTwin/iTwinUI/pull/2100): Replaced dependency on `tslib` with `@swc/helpers`. This is used mainly by the CommonJS build for [interop reasons](https://www.typescriptlang.org/docs/handbook/modules/appendices/esm-cjs-interop.html).

### Patch Changes

- [#2117](https://github.com/iTwin/iTwinUI/pull/2117): Fixed an error in `Select` caused by updating `@floating-ui/react` to `0.26.18`.
- [#2101](https://github.com/iTwin/iTwinUI/pull/2101): Fixed a small visual bug in `Tile.IconButton` where the hover state wasn't working.
- [#2021](https://github.com/iTwin/iTwinUI/pull/2021): `MenuItem` now renders as a `<button>` instead of a `<div>`.
- [#2113](https://github.com/iTwin/iTwinUI/pull/2113): Fixed an issue where a portaled `Popover` was sometimes showing up in the wrong window during the first render.
- [#2048](https://github.com/iTwin/iTwinUI/pull/2048): Fixed a bug in `ComboBox` where the `isSelected` passed to `itemRenderer` was always `false` whenever `multiple` was `true`.

### Build Output Changes

- [#2102](https://github.com/iTwin/iTwinUI/pull/2102): The build output is now generated using SWC and uses the [new JSX transform](https://react.dev/link/new-jsx-transform) instead of `React.createElement`.
- [#2118](https://github.com/iTwin/iTwinUI/pull/2118): Type declarations are now generated using TypeScript 5.5 with `"module": "NodeNext"`.
- [#2118](https://github.com/iTwin/iTwinUI/pull/2118): The `"exports"` fallback for `/react-table` types is now handled using [`typesVersions`](https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html#version-selection-with-typesversions).
- [#2100](https://github.com/iTwin/iTwinUI/pull/2100): The build output is now (again) formatted using `prettier` for easier debugging.
- [#2100](https://github.com/iTwin/iTwinUI/pull/2100): All code comments have been removed from the build output.

## 3.11.3

### Patch Changes

- [#2098](https://github.com/iTwin/iTwinUI/pull/2098): Fixed a regression in `Table` component where `selectSubRows` prop being set to `false` would cause parent rows to become uncheckable.

## 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

- [#2058](https://github.com/iTwin/iTwinUI/pull/2058): Added new `loading` prop to `Button`. This is useful when you want to display a brief loading state after the user clicks the button.

  ```jsx
  <Button loading={isProcessing}>Click me</Button>
  ```

- [#2057](https://github.com/iTwin/iTwinUI/pull/2057): Updated warning and negative background colors to better match the rest of the color palette.
- [#2060](https://github.com/iTwin/iTwinUI/pull/2060): Updated `Tooltip` to automatically use the [`popover` API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) in supported browsers. This ensures that tooltips appear in the top layer, avoiding stacking context issues.
- [#2022](https://github.com/iTwin/iTwinUI/pull/2022): Added optional props to `TreeNode` for customization: `nodeProps`, `contentProps`, `labelProps`, `titleProps`, `sublabelProps`, `checkboxProps`, `iconProps`, `expanderProps` and `subTreeProps`.

### Patch Changes

- [#2042](https://github.com/iTwin/iTwinUI/pull/2042): Fixed `Table` empty state horizontal alignment when table is very narrow.
- [#2054](https://github.com/iTwin/iTwinUI/pull/2054): Removed unnecessary gap below the inline `<InputGrid>` when no secondary line (`StatusMessage`) is present. Some other affected components: `LabeledInput`, `LabeledSelect`, `LabeledTextarea`.
- [#2049](https://github.com/iTwin/iTwinUI/pull/2049): Adjusted disabled controls' borders to slightly increase color contrast.
- [#2043](https://github.com/iTwin/iTwinUI/pull/2043): Adjusted the behavior of buttons so that double tapping them doesn't zoom the viewport on iOS.
- [#2044](https://github.com/iTwin/iTwinUI/pull/2044): Fixed a rare hydration error in `Surface` caused by using an empty string inside the `style` attribute.

## 3.10.1

### Patch Changes

- [#2031](https://github.com/iTwin/iTwinUI/pull/2031): Fixed an issue where popovers and dropdown menus used with `SidenavButton` were showing up inside a tooltip.
- [#2030](https://github.com/iTwin/iTwinUI/pull/2030): Fixed a visual bug where items in a `ButtonGroup` were displaying a double border when an associated `Popover` was opened.
- [#2026](https://github.com/iTwin/iTwinUI/pull/2026): Submenus within a `DropdownMenu` will now consistently require less precision when moving the mouse between the parent item and the submenu.

## 3.10.0

### Minor Changes

- [#1942](https://github.com/iTwin/iTwinUI/pull/1942): Clicking a `MenuItem` with `submenuItems` now toggles the submenu visibility.
  - If both `submenuItems` and `onClick` props are passed, then c