@itwin/itwinui-react 3.15.4 → 3.16.0

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

@@ -13,6 +13,9 @@ _export(exports, {
   Table: function () {
     return Table;
   },
+  iuiId: function () {
+    return iuiId;
+  },
   tableResizeStartAction: function () {
     return tableResizeStartAction;
   },
@@ -36,6 +39,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 +92,7 @@ const Table = (props) => {
     headerProps,
     bodyProps,
     emptyTableContentProps,
+    getRowId,
     ...rest
   } = props;
   (0, _index.useGlobals)();
@@ -225,16 +230,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,
+        },
+      ];
     },
-    [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 = (0, _reacttable.useTable)(
     {
@@ -254,6 +273,7 @@ const Table = (props) => {
         ...props.initialState,
       },
       columnResizeMode,
+      getRowId: subComponent ? getRowIdWithSubComponents : getRowId,
     },
     _reacttable.useFlexLayout,
     (0, _index1.useResizeColumns)(ownerDocument),
@@ -459,51 +479,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,
@@ -640,11 +661,7 @@ const Table = (props) => {
               },
               bodyProps?.className,
             ),
-            style: {
-              outline: 0,
-            },
           }),
-          tabIndex: -1,
           'aria-multiselectable':
             (isSelectable && 'multi' === selectionMode) || void 0,
         },

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

@@ -60,7 +60,7 @@ const TablePaginator = (props) => {
   );
   let pageListRef = _react.useRef(null);
   let [focusedIndex, setFocusedIndex] = _react.useState(currentPage);
-  _react.useLayoutEffect(() => {
+  (0, _index.useLayoutEffect)(() => {
     setFocusedIndex(currentPage);
   }, [currentPage]);
   let needFocus = _react.useRef(false);
@@ -182,6 +182,7 @@ const TablePaginator = (props) => {
             : _react.createElement(TablePaginatorPageButtons, {
                 size: size,
                 focusedIndex: focusedIndex,
+                setFocusedIndex: setFocusedIndex,
                 totalPagesCount: totalPagesCount,
                 onPageChange: onPageChange,
                 currentPage: currentPage,
@@ -255,6 +256,7 @@ const TablePaginator = (props) => {
 const TablePaginatorPageButtons = (props) => {
   let {
     focusedIndex,
+    setFocusedIndex,
     totalPagesCount,
     onPageChange,
     currentPage,
@@ -274,14 +276,24 @@ const TablePaginatorPageButtons = (props) => {
           styleType: 'borderless',
           size: buttonSize,
           'data-iui-active': index === currentPage,
-          onClick: () => onPageChange(index),
+          onClick: () => {
+            setFocusedIndex(index);
+            onPageChange(index);
+          },
           'aria-current': index === currentPage,
           'aria-label': localization.goToPageLabel?.(index + 1),
           tabIndex: tabIndex,
         },
         index + 1,
       ),
-    [focusedIndex, currentPage, localization, buttonSize, onPageChange],
+    [
+      focusedIndex,
+      buttonSize,
+      currentPage,
+      localization,
+      setFocusedIndex,
+      onPageChange,
+    ],
   );
   let pageList = _react.useMemo(
     () =>

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

@@ -20,6 +20,7 @@ _export(exports, {
     return onToggleHandler;
   },
 });
+const _Table = require('../Table.js');
 const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
   if (!instance?.rows.length) {
     onSelect?.([], newState);
@@ -29,14 +30,16 @@ const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
   let handleRow = (row) => {
     if (isRowDisabled?.(row.original)) return false;
     let isAllSubSelected = true;
-    row.initialSubRows.forEach((subRow) => {
-      let result = handleRow(subRow);
-      if (!result) isAllSubSelected = false;
-    });
+    if (row.initialSubRows[0]?.original[_Table.iuiId] === void 0)
+      row.initialSubRows.forEach((subRow) => {
+        let result = handleRow(subRow);
+        if (!result) isAllSubSelected = false;
+      });
     if (
-      (!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
-      (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
-      (row.initialSubRows.length && isAllSubSelected)
+      newState.selectedRowIds[row.id] &&
+      (!instance.selectSubRows ||
+        !row.initialSubRows.length ||
+        isAllSubSelected)
     )
       newSelectedRowIds[row.id] = true;
     return !!newSelectedRowIds[row.id];

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

@@ -21,6 +21,7 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 const _react = _interop_require_wildcard._(require('react'));
 const _Checkbox = require('../../Checkbox/Checkbox.js');
 const _index = require('../cells/index.js');
+const _Table = require('../Table.js');
 const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 const SelectionColumn = (props = {}) => {
   let { isDisabled, density } = props;
@@ -70,7 +71,11 @@ const SelectionColumn = (props = {}) => {
         disabled: isDisabled?.(row.original),
         onClick: (e) => e.stopPropagation(),
         onChange: () => {
-          if (row.subRows.length > 0 && selectSubRows)
+          if (
+            row.subRows.length > 0 &&
+            selectSubRows &&
+            void 0 === row.initialSubRows[0].original[_Table.iuiId]
+          )
             row.toggleRowSelected(
               !row.subRows.every(
                 (subRow) => subRow.isSelected || isDisabled?.(subRow.original),

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

@@ -170,6 +170,7 @@ const Tree = (props) => {
           onKeyDown: handleKeyDown,
           ref: treeRef,
           className: className,
+          'data-iui-size': 'small' === size ? 'small' : void 0,
           style: style,
           ...rest,
         })

package/DEV-cjs/index.js

@@ -371,6 +371,9 @@ _export(exports, {
   tableFilters: function () {
     return _index.tableFilters;
   },
+  unstable_Panels: function () {
+    return _Panels.Panels;
+  },
   useToaster: function () {
     return _Toaster.useToaster;
   },
@@ -437,6 +440,7 @@ const _ModalContent = require('./core/Modal/ModalContent.js');
 const _ModalButtonBar = require('./core/Modal/ModalButtonBar.js');
 const _NotificationMarker = require('./core/NotificationMarker/NotificationMarker.js');
 const _Overlay = require('./core/Overlay/Overlay.js');
+const _Panels = require('./core/Panels/Panels.js');
 const _ProgressLinear = require('./core/ProgressIndicators/ProgressLinear.js');
 const _ProgressRadial = require('./core/ProgressIndicators/ProgressRadial.js');
 const _Radio = require('./core/Radio/Radio.js');

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.16.0';
 const u = new Proxy(
   {},
   {

package/DEV-cjs/utils/components/MiddleTextTruncation.js

@@ -11,9 +11,11 @@ Object.defineProperty(exports, 'MiddleTextTruncation', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const _OverflowContainer = require('./OverflowContainer.js');
+const _VisuallyHidden = require('../../core/VisuallyHidden/VisuallyHidden.js');
+const _ShadowRoot = require('./ShadowRoot.js');
 const ELLIPSIS_CHAR = '…';
-const MiddleTextTruncation = (props) => {
-  let { text, style, ...rest } = props;
+const MiddleTextTruncation = _react.forwardRef((props, forwardedRef) => {
+  let { text, endCharsCount, textRenderer, style, ...rest } = props;
   return _react.createElement(
     _OverflowContainer.OverflowContainer,
     {
@@ -27,10 +29,26 @@ const MiddleTextTruncation = (props) => {
       },
       itemsCount: text.length,
       ...rest,
+      ref: forwardedRef,
     },
-    _react.createElement(MiddleTextTruncationContent, props),
+    _react.createElement(
+      _ShadowRoot.ShadowRoot,
+      null,
+      _react.createElement(_VisuallyHidden.VisuallyHidden, null, text),
+      _react.createElement('slot', {
+        'aria-hidden': true,
+        style: {
+          pointerEvents: 'none',
+        },
+      }),
+    ),
+    _react.createElement(MiddleTextTruncationContent, {
+      text: text,
+      endCharsCount: endCharsCount,
+      textRenderer: textRenderer,
+    }),
   );
-};
+});
 MiddleTextTruncation.displayName = 'MiddleTextTruncation';
 const MiddleTextTruncationContent = (props) => {
   let { text, endCharsCount = 6, textRenderer } = props;

package/DEV-cjs/utils/components/OverflowContainer.js

@@ -12,49 +12,192 @@ const _interop_require_default = require('@swc/helpers/_/_interop_require_defaul
 const _react = _interop_require_default._(require('react'));
 const _useMergedRefs = require('../hooks/useMergedRefs.js');
 const _Box = require('./Box.js');
-const _useOverflow = require('../hooks/useOverflow.js');
+const _useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.js');
 const _useSafeContext = require('../hooks/useSafeContext.js');
-const OverflowContainerComponent = _react.default.forwardRef((props, ref) => {
-  let { itemsCount, children, overflowOrientation, ...rest } = props;
-  let [containerRef, visibleCount] = (0, _useOverflow.useOverflow)(
-    itemsCount,
-    false,
-    overflowOrientation,
-  );
-  let overflowContainerContextValue = _react.default.useMemo(
-    () => ({
-      visibleCount,
+const _dev = require('../functions/dev.js');
+const _useResizeObserver = require('../hooks/useResizeObserver.js');
+const OverflowContainerMain = _react.default.forwardRef(
+  (props, forwardedRef) => {
+    let { itemsCount, children, overflowOrientation, ...rest } = props;
+    let [containerRef, visibleCount] = useOverflow(
       itemsCount,
-    }),
-    [itemsCount, visibleCount],
-  );
-  return _react.default.createElement(
-    OverflowContainerContext.Provider,
-    {
-      value: overflowContainerContextValue,
-    },
-    _react.default.createElement(
-      _Box.Box,
+      overflowOrientation,
+    );
+    let overflowContainerContextValue = _react.default.useMemo(
+      () => ({
+        visibleCount,
+        itemsCount,
+      }),
+      [itemsCount, visibleCount],
+    );
+    return _react.default.createElement(
+      OverflowContainerContext.Provider,
       {
-        ref: (0, _useMergedRefs.useMergedRefs)(ref, containerRef),
-        ...rest,
+        value: overflowContainerContextValue,
       },
-      children,
-    ),
-  );
-});
+      _react.default.createElement(
+        _Box.Box,
+        {
+          ref: (0, _useMergedRefs.useMergedRefs)(forwardedRef, containerRef),
+          ...rest,
+        },
+        children,
+      ),
+    );
+  },
+);
 const OverflowContainerOverflowNode = (props) => {
   let { children } = props;
   let { visibleCount, itemsCount } = useOverflowContainerContext();
   let isOverflowing = visibleCount < itemsCount;
   return isOverflowing ? children : null;
 };
+const OverflowContainerComponent = _react.default.forwardRef(
+  (props, forwardedRef) => {
+    let { itemsCount, overflowOrientation = 'horizontal', ...rest } = props;
+    let [size, setSize] = _react.default.useState(null);
+    let [resizeRef] = (0, _useResizeObserver.useResizeObserver)(setSize);
+    let ref = (0, _useMergedRefs.useMergedRefs)(resizeRef, forwardedRef);
+    let key = `${itemsCount}${
+      'vertical' === overflowOrientation ? size?.height : size?.width
+    }`;
+    return _react.default.createElement(OverflowContainerMain, {
+      ...rest,
+      key: key,
+      ref: ref,
+      itemsCount: itemsCount,
+      overflowOrientation: overflowOrientation,
+    });
+  },
+);
 const OverflowContainer = Object.assign(OverflowContainerComponent, {
   OverflowNode: OverflowContainerOverflowNode,
   useContext: useOverflowContainerContext,
 });
 const OverflowContainerContext = _react.default.createContext(void 0);
 OverflowContainerContext.displayName = 'OverflowContainerContext';
+const useOverflow = (itemsCount, orientation = 'horizontal') => {
+  let [guessState, dispatch] = _react.default.useReducer(
+    overflowGuessReducer,
+    {
+      itemsCount,
+    },
+    overflowGuessReducerInitialState,
+  );
+  let containerRef = _react.default.useRef(null);
+  let isGuessing = _react.default.useRef(false);
+  (0, _useIsomorphicLayoutEffect.useLayoutEffect)(() => {
+    let { minGuess, maxGuess, isStabilized, visibleCount } = guessState;
+    if (isStabilized) return;
+    guessVisibleCount();
+    function guessVisibleCount() {
+      if (isStabilized || isGuessing.current || _dev.isUnitTest) return;
+      try {
+        isGuessing.current = true;
+        if (null == containerRef.current) return;
+        let dimension = 'horizontal' === orientation ? 'Width' : 'Height';
+        let availableSize = containerRef.current[`offset${dimension}`];
+        let requiredSize = containerRef.current[`scroll${dimension}`];
+        let isOverflowing = availableSize < requiredSize;
+        if (
+          0 === itemsCount ||
+          (1 === visibleCount && isOverflowing) ||
+          (visibleCount === itemsCount && !isOverflowing) ||
+          (maxGuess - minGuess === 1 && visibleCount === minGuess)
+        ) {
+          dispatch({
+            type: 'stabilize',
+          });
+          return;
+        }
+        if (maxGuess === visibleCount && !isOverflowing) {
+          dispatch({
+            type: 'shiftGuessRangeForward',
+          });
+          return;
+        }
+        isOverflowing
+          ? dispatch({
+              type: 'decreaseMaxGuess',
+              currentState: guessState,
+            })
+          : dispatch({
+              type: 'increaseMinGuess',
+              currentState: guessState,
+            });
+      } finally {
+        isGuessing.current = false;
+      }
+    }
+  }, [guessState, itemsCount, orientation]);
+  return [containerRef, guessState.visibleCount];
+};
+const STARTING_MAX_ITEMS_COUNT = 32;
+const overflowGuessReducerInitialState = ({ itemsCount }) => {
+  let initialVisibleCount = Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT);
+  return _dev.isUnitTest
+    ? {
+        isStabilized: true,
+        minGuess: null,
+        maxGuess: null,
+        itemsCount,
+        visibleCount: itemsCount,
+      }
+    : {
+        isStabilized: false,
+        minGuess: 0,
+        maxGuess: initialVisibleCount,
+        itemsCount,
+        visibleCount: initialVisibleCount,
+      };
+};
+const overflowGuessReducer = (state, action) => {
+  let getSafeVisibleCount = ({ visibleCount, itemsCount }) =>
+    Math.min(itemsCount, visibleCount);
+  switch (action.type) {
+    case 'decreaseMaxGuess':
+    case 'increaseMinGuess':
+      if (state.isStabilized) return state;
+      let newMinGuess = state.minGuess;
+      let newMaxGuess = state.maxGuess;
+      if ('decreaseMaxGuess' === action.type)
+        newMaxGuess = action.currentState.visibleCount;
+      else newMinGuess = action.currentState.visibleCount;
+      let newVisibleCount = Math.floor((newMinGuess + newMaxGuess) / 2);
+      return {
+        ...state,
+        isStabilized: false,
+        minGuess: newMinGuess,
+        maxGuess: newMaxGuess,
+        visibleCount: getSafeVisibleCount({
+          visibleCount: newVisibleCount,
+          itemsCount: state.itemsCount,
+        }),
+      };
+    case 'shiftGuessRangeForward':
+      if (state.isStabilized) return state;
+      let doubleOfMaxGuess = 2 * state.maxGuess;
+      return {
+        ...state,
+        isStabilized: false,
+        minGuess: state.maxGuess,
+        maxGuess: doubleOfMaxGuess,
+        visibleCount: getSafeVisibleCount({
+          visibleCount: doubleOfMaxGuess,
+          itemsCount: state.itemsCount,
+        }),
+      };
+    case 'stabilize':
+      return {
+        ...state,
+        isStabilized: true,
+        minGuess: null,
+        maxGuess: null,
+      };
+    default:
+      return state;
+  }
+};
 function useOverflowContainerContext() {
   let overflowContainerContext = (0, _useSafeContext.useSafeContext)(
     OverflowContainerContext,

package/DEV-cjs/utils/hooks/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', {
 const _export_star = require('@swc/helpers/_/_export_star');
 _export_star._(require('./useEventListener.js'), exports);
 _export_star._(require('./useMergedRefs.js'), exports);
-_export_star._(require('./useOverflow.js'), exports);
 _export_star._(require('./useResizeObserver.js'), exports);
 _export_star._(require('./useContainerWidth.js'), exports);
 _export_star._(require('./useGlobals.js'), exports);
@@ -19,4 +18,5 @@ _export_star._(require('./useId.js'), exports);
 _export_star._(require('./useControlledState.js'), exports);
 _export_star._(require('./useSyncExternalStore.js'), exports);
 _export_star._(require('./useVirtualScroll.js'), exports);
+_export_star._(require('./useInstance.js'), exports);
 _export_star._(require('./useWarningLogger.js'), exports);

package/DEV-cjs/utils/hooks/useInstance.js

@@ -0,0 +1,38 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  useInstance: function () {
+    return useInstance;
+  },
+  useSynchronizeInstance: function () {
+    return useSynchronizeInstance;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _useSyncExternalStore = require('./useSyncExternalStore.js');
+class Instance {}
+const useInstance = () => _react.useMemo(() => new Instance(), []);
+const useSynchronizeInstance = (instance, properties) => {
+  let synchronize = _react.useCallback(() => {
+    if (!(instance instanceof Instance)) return () => {};
+    Object.assign(instance, properties);
+    return () => {
+      for (let key in properties) delete instance[key];
+    };
+  }, [instance, properties]);
+  return (0, _useSyncExternalStore.useSyncExternalStore)(
+    synchronize,
+    () => instance,
+    () => instance,
+  );
+};

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

@@ -8,7 +8,7 @@ import {
 } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { Anchor } from '../Typography/Anchor.js';
-let BreadcrumbsComponent = React.forwardRef((props, ref) => {
+let BreadcrumbsComponent = React.forwardRef((props, forwardedRef) => {
   let {
     children: childrenProp,
     currentIndex = React.Children.count(childrenProp) - 1,
@@ -26,7 +26,7 @@ let BreadcrumbsComponent = React.forwardRef((props, ref) => {
     {
       as: 'nav',
       className: cx('iui-breadcrumbs', className),
-      ref: ref,
+      ref: forwardedRef,
       'aria-label': 'Breadcrumb',
       ...rest,
     },