Merge branch 'main' into r/react-transition-group-removal

apps/website/src/content/docs/anchor.mdx

@@ -61,7 +61,7 @@ If you do ultimately decide based on your research that it is beneficial to open
 
 By default, an anchor is only underlined when hovered, with a few exceptions:
 
-1. Anchors inside a [`Text`](https://itwinui.bentley.com/docs/typography#text) component are underlined by default.
+1. Anchors inside a [`Text`](/docs/text) component are underlined by default.
 2. All anchors are underlined by default when using a high-contrast theme.
 
 For [better accessibility](https://adrianroselli.com/2016/06/on-link-underlines.html#recommendation), it is recommended to explicitly make the anchor underlined in all themes, even when used outside `Text`. This can be achieved using the `underline` prop.

apps/website/src/content/docs/combobox.mdx

@@ -81,7 +81,7 @@ If you expect the combobox to have a very long list of items, you can set `enabl
 
 ### Labels
 
-You can use a [Label](typography#label) component alongside the combobox to add a label. Note that passing the same id to the label as `htmlFor` and to the combobox as `id` in `inputProps` will allow users to open the combobox by clicking on the label.
+You can use a [Label](/docs/label) component alongside the combobox to add a label. Note that passing the same id to the label as `htmlFor` and to the combobox as `id` in `inputProps` will allow users to open the combobox by clicking on the label.
 
 <LiveExample src='ComboBox.label.jsx'>
   <AllExamples.ComboBoxLabelExample client:load />

apps/website/src/content/docs/inputgrid.mdx

@@ -15,7 +15,7 @@ InputGrid is a layout component that allows to group label, form field and statu
 
 You can add any form field (eg. Select, ComboBox or InputWithDecorations).
 
-We recommend [Label](typography#label) and [StatusMessage](statusmessage) components with this layout.
+We recommend [Label](/docs/label) and [StatusMessage](statusmessage) components with this layout.
 
 <LiveExample src='InputGrid.select.jsx'>
   <AllExamples.InputGridSelectExample client:load />

packages/itwinui-react/CHANGELOG.md

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

packages/itwinui-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.16.3",
+  "version": "3.16.5",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",

packages/itwinui-react/src/core/Table/Table.test.tsx

@@ -2217,6 +2217,33 @@ it('should handle sub-rows selection', async () => {
   );
 });
 
+it('should show parent row being selected when all sub-rows are selected', async () => {
+  const data = mockedSubRowsData();
+  const { container } = renderComponent({
+    data,
+    isSelectable: true,
+  });
+
+  const rows = container.querySelectorAll('.iui-table-body .iui-table-row');
+  expect(rows.length).toBe(3);
+
+  await expandAll(container);
+
+  let checkboxes = container.querySelectorAll<HTMLInputElement>(
+    '.iui-table-body .iui-checkbox',
+  );
+  expect(checkboxes.length).toBe(10);
+  // Select all sub-rows of row 2
+  await userEvent.click(checkboxes[7]);
+  await userEvent.click(checkboxes[8]);
+
+  checkboxes = container.querySelectorAll<HTMLInputElement>(
+    '.iui-table-body .iui-checkbox',
+  );
+
+  expect(checkboxes[6].checked).toBe(true);
+});
+
 it('should show indeterminate checkbox when some sub-rows are selected', async () => {
   const onSelect = vi.fn();
   const data = mockedSubRowsData();

packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts

@@ -38,8 +38,14 @@ const onSelectHandler = <T extends Record<string, unknown>>(
       return false;
     }
 
+    // In case when sub-rows are not present but sub-components are,
+    // the length of sub-rows for each row is 1 (because a sub-component is a sub-row).
+    // Therefore, we also need to check for sub-components whenever checking for sub-rows.
+    const hasSubComponents = !!row.initialSubRows[0]?.original[iuiId as any];
+    const hasSubRows = row.subRows.length > 0 && !hasSubComponents;
     let isAllSubSelected = true;
-    if (row.initialSubRows[0]?.original[iuiId as any] === undefined) {
+
+    if (hasSubRows) {
       row.initialSubRows.forEach((subRow) => {
         const result = handleRow(subRow);
         if (!result) {
@@ -48,18 +54,21 @@ const onSelectHandler = <T extends Record<string, unknown>>(
       });
     }
 
-    // A row is considered selected if it is selected AND one of the following:
-    // - `selectSubRows` is false, OR
-    // - the row has no sub-rows, OR
-    // - the row has sub-rows and all of them are selected
-    if (
-      newState.selectedRowIds[row.id] &&
-      (!instance.selectSubRows ||
-        !row.initialSubRows.length ||
-        isAllSubSelected)
-    ) {
+    // A row is considered selected if it satisfies one of the following:
+    // - Case 1: If the row is directly selected, AND one of the following:
+    //   + `selectSubRows` is false, OR
+    //   + the row has no sub-rows.
+    // - Case 2: If the row is not directly selected,
+    // check if it has sub-rows and all of them are selected.
+
+    const isRowSelected = newState.selectedRowIds[row.id];
+    const case1 = isRowSelected && (!instance.selectSubRows || !hasSubRows);
+    const case2 = hasSubRows && isAllSubSelected;
+
+    if (case1 || case2) {
       newSelectedRowIds[row.id as IdType<T>] = true;
     }
+
     return !!newSelectedRowIds[row.id];
   };
   instance.initialRows.forEach((row) => handleRow(row));

packages/itwinui-react/src/core/Tabs/Tabs.tsx

@@ -286,6 +286,7 @@ const Tab = React.forwardRef((props, forwardedRef) => {
     tabsWidth, // to fix visual artifact on initial render
     setStripeProperties,
     tablistRef,
+    value, // since Tab with a different value might be later added to the same position
   ]);
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {