@itwin/itwinui-react 3.15.3 → 3.15.5

package/esm/core/Popover/Popover.js

@@ -33,7 +33,9 @@ import {
   useMergedRefs,
 } from '../../utils/index.js';
 import { usePortalTo } from '../../utils/components/Portal.js';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
 export const PopoverOpenContext = React.createContext(void 0);
+export const PopoverInitialFocusContext = React.createContext(void 0);
 export const usePopover = (options) => {
   let {
     placement = 'bottom-start',
@@ -231,7 +233,12 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     role: 'dialog',
     middleware,
   });
-  let popoverRef = useMergedRefs(popover.refs.setFloating, forwardedRef);
+  let [popoverElement, setPopoverElement] = React.useState();
+  let popoverRef = useMergedRefs(
+    popover.refs.setFloating,
+    forwardedRef,
+    setPopoverElement,
+  );
   let triggerId = `${useId()}-trigger`;
   let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
   useLayoutEffect(() => {
@@ -239,6 +246,13 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     popover.refs.setPositionReference(positionReference);
     return () => void popover.refs.setPositionReference(null);
   }, [popover.refs, positionReference]);
+  let [initialFocus, setInitialFocus] = React.useState();
+  let initialFocusContextValue = React.useMemo(
+    () => ({
+      setInitialFocus,
+    }),
+    [],
+  );
   return React.createElement(
     React.Fragment,
     null,
@@ -255,32 +269,46 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     ),
     popover.open
       ? React.createElement(
-          PopoverPortal,
+          PopoverInitialFocusContext.Provider,
           {
-            portal: portal,
+            value: initialFocusContextValue,
           },
           React.createElement(
-            FloatingFocusManager,
+            PopoverPortal,
             {
-              context: popover.context,
-              modal: false,
+              portal: portal,
             },
             React.createElement(
-              Box,
+              ThemeProvider,
               {
-                className: cx(
+                portalContainer: popoverElement,
+              },
+              React.createElement(DisplayContents, null),
+              React.createElement(
+                FloatingFocusManager,
+                {
+                  context: popover.context,
+                  modal: false,
+                  initialFocus: initialFocus,
+                },
+                React.createElement(
+                  Box,
                   {
-                    'iui-popover-surface': applyBackground,
+                    className: cx(
+                      {
+                        'iui-popover-surface': applyBackground,
+                      },
+                      className,
+                    ),
+                    'aria-labelledby': hasAriaLabel
+                      ? void 0
+                      : popover.refs.domReference.current?.id,
+                    ...popover.getFloatingProps(rest),
+                    ref: popoverRef,
                   },
-                  className,
+                  content,
                 ),
-                'aria-labelledby': hasAriaLabel
-                  ? void 0
-                  : popover.refs.domReference.current?.id,
-                ...popover.getFloatingProps(rest),
-                ref: popoverRef,
-              },
-              content,
+              ),
             ),
           ),
         )

package/esm/core/Select/SelectTagContainer.js

@@ -1,26 +1,37 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
 import { SelectTag } from './SelectTag.js';
+import { OverflowContainer } from '../../utils/index.js';
 export const SelectTagContainer = React.forwardRef((props, ref) => {
-  let { tags, className, ...rest } = props;
-  let [containerRef, visibleCount] = useOverflow(tags);
-  let refs = useMergedRefs(ref, containerRef);
+  let { tags: tagsProp, className, ...rest } = props;
+  let tags = React.useMemo(() => React.Children.toArray(tagsProp), [tagsProp]);
   return React.createElement(
-    Box,
+    OverflowContainer,
     {
+      itemsCount: tags.length,
       className: cx('iui-select-tag-container', className),
-      ref: refs,
+      ref: ref,
       ...rest,
     },
+    React.createElement(SelectTagContainerContent, {
+      ...props,
+      tags: tags,
+    }),
+  );
+});
+let SelectTagContainerContent = (props) => {
+  let { tags } = props;
+  let { visibleCount } = OverflowContainer.useContext();
+  return React.createElement(
+    React.Fragment,
+    null,
+    visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
     React.createElement(
-      React.Fragment,
+      OverflowContainer.OverflowNode,
       null,
-      visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
-      visibleCount < tags.length &&
-        React.createElement(SelectTag, {
-          label: `+${tags.length - visibleCount + 1} item(s)`,
-        }),
+      React.createElement(SelectTag, {
+        label: `+${tags.length - visibleCount + 1} item(s)`,
+      }),
     ),
   );
-});
+};

package/esm/core/Table/ColumnHeader.d.ts

@@ -1,19 +1,15 @@
-import * as React from 'react';
-import type { ColumnInstance, HeaderGroup, TableKeyedProps, TableState } from '../../react-table/react-table.js';
-type ColumnHeaderProps<T extends Record<string, unknown> = Record<string, unknown>> = TableKeyedProps & {
-    columnRefs: React.MutableRefObject<Record<string, HTMLDivElement>>;
-    column: HeaderGroup<T>;
-    index: number;
+import { type PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { HeaderGroup, TableKeyedProps } from '../../react-table/react-table.js';
+type ColumnHeaderProps = TableKeyedProps & {
+    column: HeaderGroup<Record<string, unknown>>;
     areFiltersSet: boolean;
-    hasAnySubRows: boolean;
-    headers: HeaderGroup<T>[];
-    state: TableState<T>;
-    data: T[];
     isResizable: boolean;
     columnResizeMode: 'fit' | 'expand';
     enableColumnReordering: boolean;
     density: string | undefined;
-    visibleColumns: ColumnInstance<T>[];
+    columnHasExpanders: boolean;
+    isLast: boolean;
+    isTableEmpty: boolean;
 };
-export declare const ColumnHeader: <T extends Record<string, unknown> = Record<string, unknown>>(props: ColumnHeaderProps<T>) => JSX.Element;
+export declare const ColumnHeader: PolymorphicForwardRefComponent<"div", ColumnHeaderProps>;
 export {};

package/esm/core/Table/ColumnHeader.js

@@ -5,40 +5,39 @@ import {
   LineClamp,
   SvgSortDown,
   SvgSortUp,
+  useMergedRefs,
 } from '../../utils/index.js';
-import { SELECTION_CELL_ID } from './columns/index.js';
 import { FilterToggle } from './filters/FilterToggle.js';
-import { getCellStyle, getSubRowStyle, getStickyStyle } from './utils.js';
+import {
+  getCellStyle,
+  getSubRowStyle,
+  getStickyStyle,
+  TableInstanceContext,
+} from './utils.js';
 import cx from 'classnames';
-export const ColumnHeader = (props) => {
+export const ColumnHeader = React.forwardRef((props, forwardedRef) => {
   let {
-    columnRefs,
     column,
-    index,
     areFiltersSet,
-    hasAnySubRows,
-    headers,
-    state,
-    data,
     isResizable,
     columnResizeMode,
     enableColumnReordering,
     density,
-    visibleColumns,
+    columnHasExpanders,
+    isLast,
+    isTableEmpty,
     ...rest
   } = props;
   let isHeaderDirectClick = React.useRef(false);
+  let instance = React.useContext(TableInstanceContext);
   let COLUMN_MIN_WIDTHS = {
     default: 72,
     withExpander: 108,
   };
   let showFilterButton = (column) =>
-    (0 !== data.length || areFiltersSet) && column.canFilter && !!column.Filter;
-  let showSortButton = (column) => 0 !== data.length && column.canSort;
+    (!isTableEmpty || areFiltersSet) && column.canFilter && !!column.Filter;
+  let showSortButton = (column) => !isTableEmpty && column.canSort;
   let { onClick, ...restSortProps } = column.getSortByToggleProps();
-  let columnHasExpanders =
-    hasAnySubRows &&
-    index === headers.findIndex((c) => c.id !== SELECTION_CELL_ID);
   if ([void 0, 0].includes(column.minWidth)) {
     column.minWidth = columnHasExpanders
       ? COLUMN_MIN_WIDTHS.withExpander
@@ -58,12 +57,12 @@ export const ColumnHeader = (props) => {
       column.columnClassName,
     ),
     style: {
-      ...getCellStyle(column, !!state.isTableResizing),
+      ...getCellStyle(column, !!instance?.state.isTableResizing),
       ...(columnHasExpanders &&
         getSubRowStyle({
           density,
         })),
-      ...getStickyStyle(column, visibleColumns),
+      ...getStickyStyle(column, instance?.visibleColumns ?? []),
       flexWrap: 'wrap',
       columnGap: 'var(--iui-size-xs)',
     },
@@ -75,14 +74,14 @@ export const ColumnHeader = (props) => {
       ...rest,
       key: columnProps.key,
       title: void 0,
-      ref: React.useCallback(
-        (el) => {
-          if (el) {
-            columnRefs.current[column.id] = el;
-            column.resizeWidth = el.getBoundingClientRect().width;
-          }
-        },
-        [column, columnRefs],
+      ref: useMergedRefs(
+        React.useCallback(
+          (el) => {
+            if (el) column.resizeWidth = el.getBoundingClientRect().width;
+          },
+          [column],
+        ),
+        forwardedRef,
       ),
       onMouseDown: () => {
         isHeaderDirectClick.current = true;
@@ -153,7 +152,7 @@ export const ColumnHeader = (props) => {
         ),
       isResizable &&
         column.isResizerVisible &&
-        (index !== headers.length - 1 || 'expand' === columnResizeMode) &&
+        (!isLast || 'expand' === columnResizeMode) &&
         React.createElement(
           Box,
           {
@@ -172,17 +171,17 @@ export const ColumnHeader = (props) => {
           slot: 'resizers',
         }),
       'left' === column.sticky &&
-        state.sticky.isScrolledToRight &&
+        instance?.state.sticky.isScrolledToRight &&
         React.createElement(Box, {
           className: 'iui-table-cell-shadow-right',
           slot: 'shadows',
         }),
       'right' === column.sticky &&
-        state.sticky.isScrolledToLeft &&
+        instance?.state.sticky.isScrolledToLeft &&
         React.createElement(Box, {
           className: 'iui-table-cell-shadow-left',
           slot: 'shadows',
         }),
     ),
   );
-};
+});

package/esm/core/Table/Table.js

@@ -24,7 +24,7 @@ import {
   useLatestRef,
   useVirtualScroll,
 } from '../../utils/index.js';
-import { TableColumnsContext } from './utils.js';
+import { TableInstanceContext } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { customFilterFunctions } from './filters/customFilterFunctions.js';
 import {
@@ -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,
+        },
+      ];
     },
-    [rowHasParent],
+    [],
+  );
+  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;
+    },
+    [getRowId],
   );
   let instance = useTable(
     {
@@ -269,6 +285,7 @@ export const Table = (props) => {
         ...props.initialState,
       },
       columnResizeMode,
+      getRowId: subComponent ? getRowIdWithSubComponents : getRowId,
     },
     useFlexLayout,
     useResizeColumns(ownerDocument),
@@ -299,7 +316,6 @@ export const Table = (props) => {
     gotoPage,
     setPageSize,
     flatHeaders,
-    visibleColumns,
     setGlobalFilter,
   } = instance;
   let headerGroups = _headerGroups;
@@ -462,51 +478,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,
@@ -543,9 +560,9 @@ export const Table = (props) => {
     updateStickyState();
   }, []);
   return React.createElement(
-    TableColumnsContext.Provider,
+    TableInstanceContext.Provider,
     {
-      value: instance.columns,
+      value: instance,
     },
     React.createElement(
       Box,
@@ -604,19 +621,23 @@ export const Table = (props) => {
                 return React.createElement(ColumnHeader, {
                   ...dragAndDropProps,
                   key: dragAndDropProps.key || column.id || index,
-                  columnRefs: columnRefs,
                   column: column,
-                  index: index,
                   areFiltersSet: areFiltersSet,
-                  hasAnySubRows: hasAnySubRows,
-                  headers: headerGroup.headers,
-                  state: state,
-                  data: data,
+                  columnHasExpanders:
+                    hasAnySubRows &&
+                    index ===
+                      headerGroup.headers.findIndex(
+                        (c) => c.id !== SELECTION_CELL_ID,
+                      ),
+                  isLast: index === headerGroup.headers.length - 1,
+                  isTableEmpty: 0 === data.length,
                   isResizable: isResizable,
                   columnResizeMode: columnResizeMode,
                   enableColumnReordering: enableColumnReordering,
                   density: density,
-                  visibleColumns: visibleColumns,
+                  ref: (el) => {
+                    if (el) columnRefs.current[column.id] = el;
+                  },
                 });
               }),
             ),