@itwin/itwinui-react 3.15.4 → 3.15.5

package/CHANGELOG.md

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

package/DEV-cjs/core/Table/Table.js

@@ -36,6 +36,7 @@ const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 const tableResizeStartAction = 'tableResizeStart';
 const tableResizeEndAction = 'tableResizeEnd';
+const iuiId = Symbol('iui-id');
 const flattenColumns = (columns) => {
   let flatColumns = [];
   columns.forEach((column) => {
@@ -88,6 +89,7 @@ const Table = (props) => {
     headerProps,
     bodyProps,
     emptyTableContentProps,
+    getRowId,
     ...rest
   } = props;
   (0, _index.useGlobals)();
@@ -225,16 +227,30 @@ const Table = (props) => {
       ),
     [data, getSubRows],
   );
-  let [rowHasParent] = _react.useState(() => new WeakSet());
   let getSubRowsWithSubComponents = _react.useCallback(
-    (originalRow) => {
-      if (!rowHasParent.has(originalRow)) {
-        rowHasParent.add(originalRow);
-        return [originalRow];
-      }
-      return originalRow.subRows || [];
+    (originalRow, relativeIndex) => {
+      if (originalRow[iuiId]) return [];
+      if (originalRow.subRows) return originalRow.subRows;
+      return [
+        {
+          [iuiId]: `subcomponent-${relativeIndex}`,
+          ...originalRow,
+        },
+      ];
+    },
+    [],
+  );
+  let getRowIdWithSubComponents = _react.useCallback(
+    (originalRow, relativeIndex, parent) => {
+      let defaultRowId = parent
+        ? `${parent.id}.${relativeIndex}`
+        : `${relativeIndex}`;
+      let rowIdFromUser = getRowId?.(originalRow, relativeIndex, parent);
+      if (void 0 !== rowIdFromUser && originalRow[iuiId])
+        return `${rowIdFromUser}-${defaultRowId}`;
+      return rowIdFromUser ?? defaultRowId;
     },
-    [rowHasParent],
+    [getRowId],
   );
   let instance = (0, _reacttable.useTable)(
     {
@@ -254,6 +270,7 @@ const Table = (props) => {
         ...props.initialState,
       },
       columnResizeMode,
+      getRowId: subComponent ? getRowIdWithSubComponents : getRowId,
     },
     _reacttable.useFlexLayout,
     (0, _index1.useResizeColumns)(ownerDocument),
@@ -459,51 +476,52 @@ const Table = (props) => {
     (index, virtualItem, virtualizer) => {
       let row = page[index];
       prepareRow(row);
-      if (row.subRows.length > 0 || !subComponent)
-        return _react.createElement(_TableRowMemoized.TableRowMemoized, {
-          row: row,
-          rowProps: rowProps,
-          isLast: index === page.length - 1,
-          onRowInViewport: onRowInViewportRef,
-          onBottomReached: onBottomReachedRef,
-          intersectionMargin: intersectionMargin,
-          state: state,
-          key: row.getRowProps().key,
-          onClick: onRowClickHandler,
-          subComponent: subComponent,
-          isDisabled: !!isRowDisabled?.(row.original),
-          tableHasSubRows: hasAnySubRows,
-          tableInstance: instance,
-          expanderCell: expanderCell,
-          scrollContainerRef: tableRef.current,
-          tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
-          density: density,
-          virtualItem: virtualItem,
-          virtualizer: virtualizer,
-        });
-      return _react.createElement(
-        _TableExpandableContentMemoized.TableExpandableContentMemoized,
-        {
-          key: row.getRowProps().key,
-          virtualItem: virtualItem,
-          ref: enableVirtualization
-            ? virtualizer?.measureElement
-            : tableRowRef(row),
-          isDisabled: !!isRowDisabled?.(row.original),
-        },
-        subComponent(row),
-      );
+      let isRowASubComponent = !!row.original[iuiId] && !!subComponent;
+      if (isRowASubComponent)
+        return _react.createElement(
+          _TableExpandableContentMemoized.TableExpandableContentMemoized,
+          {
+            key: row.getRowProps().key,
+            virtualItem: virtualItem,
+            ref: enableVirtualization
+              ? virtualizer?.measureElement
+              : tableRowRef(row),
+            isDisabled: !!isRowDisabled?.(row.original),
+          },
+          subComponent(row),
+        );
+      return _react.createElement(_TableRowMemoized.TableRowMemoized, {
+        row: row,
+        rowProps: rowProps,
+        isLast: index === page.length - 1,
+        onRowInViewport: onRowInViewportRef,
+        onBottomReached: onBottomReachedRef,
+        intersectionMargin: intersectionMargin,
+        state: state,
+        key: row.getRowProps().key,
+        onClick: onRowClickHandler,
+        subComponent: subComponent,
+        isDisabled: !!isRowDisabled?.(row.original),
+        tableHasSubRows: hasAnySubRows,
+        tableInstance: instance,
+        expanderCell: expanderCell,
+        scrollContainerRef: tableRef.current,
+        tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
+        density: density,
+        virtualItem: virtualItem,
+        virtualizer: virtualizer,
+      });
     },
     [
       page,
       prepareRow,
+      subComponent,
       rowProps,
       onRowInViewportRef,
       onBottomReachedRef,
       intersectionMargin,
       state,
       onRowClickHandler,
-      subComponent,
       isRowDisabled,
       hasAnySubRows,
       instance,

package/DEV-cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.15.4';
+const e = '3.15.5';
 const u = new Proxy(
   {},
   {

package/DEV-esm/core/Table/Table.js

@@ -53,6 +53,7 @@ let singleRowSelectedAction = 'singleRowSelected';
 let shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
 let tableResizeEndAction = 'tableResizeEnd';
+let iuiId = Symbol('iui-id');
 let flattenColumns = (columns) => {
   let flatColumns = [];
   columns.forEach((column) => {
@@ -105,6 +106,7 @@ export const Table = (props) => {
     headerProps,
     bodyProps,
     emptyTableContentProps,
+    getRowId,
     ...rest
   } = props;
   useGlobals();
@@ -240,16 +242,30 @@ export const Table = (props) => {
       ),
     [data, getSubRows],
   );
-  let [rowHasParent] = React.useState(() => new WeakSet());
   let getSubRowsWithSubComponents = React.useCallback(
-    (originalRow) => {
-      if (!rowHasParent.has(originalRow)) {
-        rowHasParent.add(originalRow);
-        return [originalRow];
-      }
-      return originalRow.subRows || [];
+    (originalRow, relativeIndex) => {
+      if (originalRow[iuiId]) return [];
+      if (originalRow.subRows) return originalRow.subRows;
+      return [
+        {
+          [iuiId]: `subcomponent-${relativeIndex}`,
+          ...originalRow,
+        },
+      ];
+    },
+    [],
+  );
+  let getRowIdWithSubComponents = React.useCallback(
+    (originalRow, relativeIndex, parent) => {
+      let defaultRowId = parent
+        ? `${parent.id}.${relativeIndex}`
+        : `${relativeIndex}`;
+      let rowIdFromUser = getRowId?.(originalRow, relativeIndex, parent);
+      if (void 0 !== rowIdFromUser && originalRow[iuiId])
+        return `${rowIdFromUser}-${defaultRowId}`;
+      return rowIdFromUser ?? defaultRowId;
     },
-    [rowHasParent],
+    [getRowId],
   );
   let instance = useTable(
     {
@@ -269,6 +285,7 @@ export const Table = (props) => {
         ...props.initialState,
       },
       columnResizeMode,
+      getRowId: subComponent ? getRowIdWithSubComponents : getRowId,
     },
     useFlexLayout,
     useResizeColumns(ownerDocument),
@@ -469,51 +486,52 @@ export const Table = (props) => {
     (index, virtualItem, virtualizer) => {
       let row = page[index];
       prepareRow(row);
-      if (row.subRows.length > 0 || !subComponent)
-        return React.createElement(TableRowMemoized, {
-          row: row,
-          rowProps: rowProps,
-          isLast: index === page.length - 1,
-          onRowInViewport: onRowInViewportRef,
-          onBottomReached: onBottomReachedRef,
-          intersectionMargin: intersectionMargin,
-          state: state,
-          key: row.getRowProps().key,
-          onClick: onRowClickHandler,
-          subComponent: subComponent,
-          isDisabled: !!isRowDisabled?.(row.original),
-          tableHasSubRows: hasAnySubRows,
-          tableInstance: instance,
-          expanderCell: expanderCell,
-          scrollContainerRef: tableRef.current,
-          tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
-          density: density,
-          virtualItem: virtualItem,
-          virtualizer: virtualizer,
-        });
-      return React.createElement(
-        TableExpandableContentMemoized,
-        {
-          key: row.getRowProps().key,
-          virtualItem: virtualItem,
-          ref: enableVirtualization
-            ? virtualizer?.measureElement
-            : tableRowRef(row),
-          isDisabled: !!isRowDisabled?.(row.original),
-        },
-        subComponent(row),
-      );
+      let isRowASubComponent = !!row.original[iuiId] && !!subComponent;
+      if (isRowASubComponent)
+        return React.createElement(
+          TableExpandableContentMemoized,
+          {
+            key: row.getRowProps().key,
+            virtualItem: virtualItem,
+            ref: enableVirtualization
+              ? virtualizer?.measureElement
+              : tableRowRef(row),
+            isDisabled: !!isRowDisabled?.(row.original),
+          },
+          subComponent(row),
+        );
+      return React.createElement(TableRowMemoized, {
+        row: row,
+        rowProps: rowProps,
+        isLast: index === page.length - 1,
+        onRowInViewport: onRowInViewportRef,
+        onBottomReached: onBottomReachedRef,
+        intersectionMargin: intersectionMargin,
+        state: state,
+        key: row.getRowProps().key,
+        onClick: onRowClickHandler,
+        subComponent: subComponent,
+        isDisabled: !!isRowDisabled?.(row.original),
+        tableHasSubRows: hasAnySubRows,
+        tableInstance: instance,
+        expanderCell: expanderCell,
+        scrollContainerRef: tableRef.current,
+        tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
+        density: density,
+        virtualItem: virtualItem,
+        virtualizer: virtualizer,
+      });
     },
     [
       page,
       prepareRow,
+      subComponent,
       rowProps,
       onRowInViewportRef,
       onBottomReachedRef,
       intersectionMargin,
       state,
       onRowClickHandler,
-      subComponent,
       isRowDisabled,
       hasAnySubRows,
       instance,

package/DEV-esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.15.4';
+const t = '3.15.5';
 const u = new Proxy(
   {},
   {

package/cjs/core/NonIdealState/NonIdealState.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type NonIdealStateProps = {
     /**
-     * An svg component, preferably from @itwin/itwinui-illustrations-react.
+     * An svg component, preferably from `@itwin/itwinui-illustrations-react`.
      *
      * @example
      * import { Svg404 } from '@itwin/itwinui-illustrations-react';
@@ -10,13 +10,17 @@ type NonIdealStateProps = {
      */
     svg: React.ReactNode;
     /**
-     * Primary heading for the error page
+     * Primary heading for the `NonIdealState`
      */
     heading?: React.ReactNode;
     /**
      * Secondary text to explain the error
      * Can include html in order to provide a hyperlink
-     * E.g. `Please visit <a href="https://www.bentley.com/help">our support page</a> for help.`
+     *
+     * @example
+     * <>
+     *   Please visit <Anchor href="https://www.bentley.com/help">our support page</Anchor> for help.
+     * </>
      */
     description?: React.ReactNode;
     /**
@@ -24,13 +28,13 @@ type NonIdealStateProps = {
      * Typically should be a primary and secondary button.
      *
      * @example
-     * <ErrorPage
-     *  actions={
-     *   <>
-     *    <Button styleType={'high-visibility'}>Retry</Button>
-     *    <Button>Contact us</Button>
-     *   </>
-     *  }
+     * <NonIdealState
+     *   actions={
+     *     <>
+     *       <Button styleType={'high-visibility'}>Retry</Button>
+     *       <Button>Contact us</Button>
+     *     </>
+     *   }
      * />
      */
     actions?: React.ReactNode;
@@ -53,7 +57,7 @@ type NonIdealStateProps = {
 };
 /**
  * A stylized display to communicate common http errors and other non-ideal states.
- * Works well with svgs from @itwin/itwinui-illustrations-react.
+ * Works well with svgs from `@itwin/itwinui-illustrations-react`.
  *
  * @example
  * <NonIdealState svg={<Svg404 />} heading='Not found' />

package/cjs/core/Table/Table.js

@@ -36,6 +36,7 @@ const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 const tableResizeStartAction = 'tableResizeStart';
 const tableResizeEndAction = 'tableResizeEnd';
+const iuiId = Symbol('iui-id');
 const flattenColumns = (columns) => {
   let flatColumns = [];
   columns.forEach((column) => {
@@ -88,6 +89,7 @@ const Table = (props) => {
     headerProps,
     bodyProps,
     emptyTableContentProps,
+    getRowId,
     ...rest
   } = props;
   (0, _index.useGlobals)();
@@ -225,16 +227,30 @@ const Table = (props) => {
       ),
     [data, getSubRows],
   );
-  let [rowHasParent] = _react.useState(() => new WeakSet());
   let getSubRowsWithSubComponents = _react.useCallback(
-    (originalRow) => {
-      if (!rowHasParent.has(originalRow)) {
-        rowHasParent.add(originalRow);
-        return [originalRow];
-      }
-      return originalRow.subRows || [];
+    (originalRow, relativeIndex) => {
+      if (originalRow[iuiId]) return [];
+      if (originalRow.subRows) return originalRow.subRows;
+      return [
+        {
+          [iuiId]: `subcomponent-${relativeIndex}`,
+          ...originalRow,
+        },
+      ];
+    },
+    [],
+  );
+  let getRowIdWithSubComponents = _react.useCallback(
+    (originalRow, relativeIndex, parent) => {
+      let defaultRowId = parent
+        ? `${parent.id}.${relativeIndex}`
+        : `${relativeIndex}`;
+      let rowIdFromUser = getRowId?.(originalRow, relativeIndex, parent);
+      if (void 0 !== rowIdFromUser && originalRow[iuiId])
+        return `${rowIdFromUser}-${defaultRowId}`;
+      return rowIdFromUser ?? defaultRowId;
     },
-    [rowHasParent],
+    [getRowId],
   );
   let instance = (0, _reacttable.useTable)(
     {
@@ -254,6 +270,7 @@ const Table = (props) => {
         ...props.initialState,
       },
       columnResizeMode,
+      getRowId: subComponent ? getRowIdWithSubComponents : getRowId,
     },
     _reacttable.useFlexLayout,
     (0, _index1.useResizeColumns)(ownerDocument),
@@ -451,51 +468,52 @@ const Table = (props) => {
     (index, virtualItem, virtualizer) => {
       let row = page[index];
       prepareRow(row);
-      if (row.subRows.length > 0 || !subComponent)
-        return _react.createElement(_TableRowMemoized.TableRowMemoized, {
-          row: row,
-          rowProps: rowProps,
-          isLast: index === page.length - 1,
-          onRowInViewport: onRowInViewportRef,
-          onBottomReached: onBottomReachedRef,
-          intersectionMargin: intersectionMargin,
-          state: state,
-          key: row.getRowProps().key,
-          onClick: onRowClickHandler,
-          subComponent: subComponent,
-          isDisabled: !!isRowDisabled?.(row.original),
-          tableHasSubRows: hasAnySubRows,
-          tableInstance: instance,
-          expanderCell: expanderCell,
-          scrollContainerRef: tableRef.current,
-          tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
-          density: density,
-          virtualItem: virtualItem,
-          virtualizer: virtualizer,
-        });
-      return _react.createElement(
-        _TableExpandableContentMemoized.TableExpandableContentMemoized,
-        {
-          key: row.getRowProps().key,
-          virtualItem: virtualItem,
-          ref: enableVirtualization
-            ? virtualizer?.measureElement
-            : tableRowRef(row),
-          isDisabled: !!isRowDisabled?.(row.original),
-        },
-        subComponent(row),
-      );
+      let isRowASubComponent = !!row.original[iuiId] && !!subComponent;
+      if (isRowASubComponent)
+        return _react.createElement(
+          _TableExpandableContentMemoized.TableExpandableContentMemoized,
+          {
+            key: row.getRowProps().key,
+            virtualItem: virtualItem,
+            ref: enableVirtualization
+              ? virtualizer?.measureElement
+              : tableRowRef(row),
+            isDisabled: !!isRowDisabled?.(row.original),
+          },
+          subComponent(row),
+        );
+      return _react.createElement(_TableRowMemoized.TableRowMemoized, {
+        row: row,
+        rowProps: rowProps,
+        isLast: index === page.length - 1,
+        onRowInViewport: onRowInViewportRef,
+        onBottomReached: onBottomReachedRef,
+        intersectionMargin: intersectionMargin,
+        state: state,
+        key: row.getRowProps().key,
+        onClick: onRowClickHandler,
+        subComponent: subComponent,
+        isDisabled: !!isRowDisabled?.(row.original),
+        tableHasSubRows: hasAnySubRows,
+        tableInstance: instance,
+        expanderCell: expanderCell,
+        scrollContainerRef: tableRef.current,
+        tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
+        density: density,
+        virtualItem: virtualItem,
+        virtualizer: virtualizer,
+      });
     },
     [
       page,
       prepareRow,
+      subComponent,
       rowProps,
       onRowInViewportRef,
       onBottomReachedRef,
       intersectionMargin,
       state,
       onRowClickHandler,
-      subComponent,
       isRowDisabled,
       hasAnySubRows,
       instance,

package/cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.15.4';
+const e = '3.15.5';
 const u = new Proxy(
   {},
   {

package/esm/core/NonIdealState/NonIdealState.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type NonIdealStateProps = {
     /**
-     * An svg component, preferably from @itwin/itwinui-illustrations-react.
+     * An svg component, preferably from `@itwin/itwinui-illustrations-react`.
      *
      * @example
      * import { Svg404 } from '@itwin/itwinui-illustrations-react';
@@ -10,13 +10,17 @@ type NonIdealStateProps = {
      */
     svg: React.ReactNode;
     /**
-     * Primary heading for the error page
+     * Primary heading for the `NonIdealState`
      */
     heading?: React.ReactNode;
     /**
      * Secondary text to explain the error
      * Can include html in order to provide a hyperlink
-     * E.g. `Please visit <a href="https://www.bentley.com/help">our support page</a> for help.`
+     *
+     * @example
+     * <>
+     *   Please visit <Anchor href="https://www.bentley.com/help">our support page</Anchor> for help.
+     * </>
      */
     description?: React.ReactNode;
     /**
@@ -24,13 +28,13 @@ type NonIdealStateProps = {
      * Typically should be a primary and secondary button.
      *
      * @example
-     * <ErrorPage
-     *  actions={
-     *   <>
-     *    <Button styleType={'high-visibility'}>Retry</Button>
-     *    <Button>Contact us</Button>
-     *   </>
-     *  }
+     * <NonIdealState
+     *   actions={
+     *     <>
+     *       <Button styleType={'high-visibility'}>Retry</Button>
+     *       <Button>Contact us</Button>
+     *     </>
+     *   }
      * />
      */
     actions?: React.ReactNode;
@@ -53,7 +57,7 @@ type NonIdealStateProps = {
 };
 /**
  * A stylized display to communicate common http errors and other non-ideal states.
- * Works well with svgs from @itwin/itwinui-illustrations-react.
+ * Works well with svgs from `@itwin/itwinui-illustrations-react`.
  *
  * @example
  * <NonIdealState svg={<Svg404 />} heading='Not found' />