@itwin/itwinui-react 3.15.2 → 3.15.4

package/CHANGELOG.md

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

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

@@ -17,95 +17,115 @@ const _Button = require('../Buttons/Button.js');
 const _Anchor = require('../Typography/Anchor.js');
 const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
   let {
-    children: items,
-    currentIndex = items.length - 1,
+    children: childrenProp,
+    currentIndex = _react.Children.count(childrenProp) - 1,
     separator,
     overflowButton,
     className,
     ...rest
   } = props;
-  let [overflowRef, visibleCount] = (0, _index.useOverflow)(items);
-  let refs = (0, _index.useMergedRefs)(overflowRef, ref);
+  let items = _react.useMemo(
+    () => _react.Children.toArray(childrenProp),
+    [childrenProp],
+  );
   return _react.createElement(
     _index.Box,
     {
       as: 'nav',
       className: (0, _classnames.default)('iui-breadcrumbs', className),
-      ref: refs,
+      ref: ref,
       'aria-label': 'Breadcrumb',
       ...rest,
     },
     _react.createElement(
-      _index.Box,
+      _index.OverflowContainer,
       {
         as: 'ol',
+        itemsCount: items.length,
         className: 'iui-breadcrumbs-list',
       },
-      visibleCount > 1 &&
+      _react.createElement(
+        BreadcrumbContent,
+        {
+          currentIndex: currentIndex,
+          overflowButton: overflowButton,
+          separator: separator,
+        },
+        items,
+      ),
+    ),
+  );
+});
+BreadcrumbsComponent.displayName = 'Breadcrumbs';
+const BreadcrumbContent = (props) => {
+  let { children: items, currentIndex, overflowButton, separator } = props;
+  let { visibleCount } = _index.OverflowContainer.useContext();
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    visibleCount > 1 &&
+      _react.createElement(
+        _react.Fragment,
+        null,
+        _react.createElement(ListItem, {
+          item: items[0],
+          isActive: 0 === currentIndex,
+        }),
+        _react.createElement(Separator, {
+          separator: separator,
+        }),
+      ),
+    items.length - visibleCount > 0 &&
+      _react.createElement(
+        _react.Fragment,
+        null,
         _react.createElement(
-          _react.Fragment,
-          null,
-          _react.createElement(ListItem, {
-            item: items[0],
-            isActive: 0 === currentIndex,
-          }),
-          _react.createElement(Separator, {
-            separator: separator,
-          }),
+          _index.Box,
+          {
+            as: 'li',
+            className: 'iui-breadcrumbs-item',
+          },
+          overflowButton
+            ? overflowButton(visibleCount)
+            : _react.createElement(
+                _index.Box,
+                {
+                  as: 'span',
+                  className: 'iui-breadcrumbs-content',
+                },
+                '…',
+              ),
         ),
-      items.length - visibleCount > 0 &&
-        _react.createElement(
+        _react.createElement(Separator, {
+          separator: separator,
+        }),
+      ),
+    items
+      .slice(
+        visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
+      )
+      .map((_, _index) => {
+        let index =
+          visibleCount > 1
+            ? 1 + (items.length - visibleCount) + _index
+            : items.length - 1;
+        return _react.createElement(
           _react.Fragment,
-          null,
-          _react.createElement(
-            _index.Box,
-            {
-              as: 'li',
-              className: 'iui-breadcrumbs-item',
-            },
-            overflowButton
-              ? overflowButton(visibleCount)
-              : _react.createElement(
-                  _index.Box,
-                  {
-                    as: 'span',
-                    className: 'iui-breadcrumbs-content',
-                  },
-                  '…',
-                ),
-          ),
-          _react.createElement(Separator, {
-            separator: separator,
+          {
+            key: index,
+          },
+          _react.createElement(ListItem, {
+            item: items[index],
+            isActive: currentIndex === index,
           }),
-        ),
-      items
-        .slice(
-          visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
-        )
-        .map((_, _index) => {
-          let index =
-            visibleCount > 1
-              ? 1 + (items.length - visibleCount) + _index
-              : items.length - 1;
-          return _react.createElement(
-            _react.Fragment,
-            {
-              key: index,
-            },
-            _react.createElement(ListItem, {
-              item: items[index],
-              isActive: currentIndex === index,
+          index < items.length - 1 &&
+            _react.createElement(Separator, {
+              separator: separator,
             }),
-            index < items.length - 1 &&
-              _react.createElement(Separator, {
-                separator: separator,
-              }),
-          );
-        }),
-    ),
+        );
+      }),
   );
-});
-BreadcrumbsComponent.displayName = 'Breadcrumbs';
+};
 const ListItem = ({ item, isActive }) => {
   let children = item;
   let logWarning = (0, _index.useWarningLogger)();

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

@@ -110,14 +110,12 @@ const OverflowGroup = _react.forwardRef((props, forwardedRef) => {
     () => _react.Children.toArray(childrenProp).filter(Boolean),
     [childrenProp],
   );
-  let [overflowRef, visibleCount] = (0, _index.useOverflow)(
-    items,
-    !overflowButton,
-    orientation,
-  );
   return _react.createElement(
-    BaseGroup,
+    _index.OverflowContainer,
     {
+      as: BaseGroup,
+      itemsCount: items.length,
+      overflowOrientation: orientation,
       orientation: orientation,
       ...rest,
       className: (0, _classnames.default)(
@@ -127,27 +125,34 @@ const OverflowGroup = _react.forwardRef((props, forwardedRef) => {
         },
         props.className,
       ),
-      ref: (0, _index.useMergedRefs)(forwardedRef, overflowRef),
+      ref: forwardedRef,
     },
-    (() => {
-      if (!(visibleCount < items.length)) return items;
-      let overflowStart =
-        'start' === overflowPlacement
-          ? items.length - visibleCount
-          : visibleCount - 1;
-      return _react.createElement(
-        _react.Fragment,
-        null,
-        overflowButton &&
-          'start' === overflowPlacement &&
-          overflowButton(overflowStart),
-        'start' === overflowPlacement
-          ? items.slice(overflowStart + 1)
-          : items.slice(0, Math.max(0, overflowStart)),
-        overflowButton &&
-          'end' === overflowPlacement &&
-          overflowButton(overflowStart),
-      );
-    })(),
+    _react.createElement(OverflowGroupContent, {
+      overflowButton: overflowButton,
+      overflowPlacement: overflowPlacement,
+      items: items,
+    }),
   );
 });
+const OverflowGroupContent = (props) => {
+  let { overflowButton, overflowPlacement, items } = props;
+  let { visibleCount } = _index.OverflowContainer.useContext();
+  let overflowStart =
+    'start' === overflowPlacement
+      ? items.length - visibleCount
+      : visibleCount - 1;
+  if (!(visibleCount < items.length)) return items;
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    overflowButton &&
+      'start' === overflowPlacement &&
+      overflowButton(overflowStart),
+    'start' === overflowPlacement
+      ? items.slice(overflowStart + 1)
+      : items.slice(0, Math.max(0, overflowStart)),
+    overflowButton &&
+      'end' === overflowPlacement &&
+      overflowButton(overflowStart),
+  );
+};

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

@@ -117,12 +117,14 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
         setFocusedIndex(selectedIndexes ?? -1);
     } else {
       setFocusedIndex(-1);
-      if (!isMultipleEnabled(selectedIndexes, multiple))
-        setInputValue(
-          selectedIndexes >= 0
-            ? optionsRef.current[selectedIndexes]?.label ?? ''
-            : '',
-        );
+      isMultipleEnabled(selectedIndexes, multiple)
+        ? setInputValue('')
+        : setInputValue(
+            selectedIndexes >= 0
+              ? optionsRef.current[selectedIndexes]?.label ?? ''
+              : '',
+          );
+      setIsInputDirty(false);
     }
   }, [isOpen, multiple, optionsRef, selectedIndexes]);
   let previousOptions = _react.useRef(options);
@@ -220,6 +222,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
             .filter(Boolean)
             .join(', '),
         );
+        setInputValue('');
       } else {
         setSelectedIndexes(__originalIndex);
         hide();

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

@@ -24,6 +24,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const _IconButton = require('../Buttons/IconButton.js');
 const _TimePicker = require('../TimePicker/TimePicker.js');
+const _Popover = require('../Popover/Popover.js');
 const isSameDay = (a, b) =>
   a &&
   b &&
@@ -188,6 +189,13 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
         currentDate.getFullYear(),
     );
   }, [date, setMonthAndYear, startDate, endDate, enableRangeSelect]);
+  let popoverInitialFocusContext = _react.useContext(
+    _Popover.PopoverInitialFocusContext,
+  );
+  _react.useLayoutEffect(() => {
+    if (setFocus && popoverInitialFocusContext)
+      popoverInitialFocusContext.setInitialFocus(-1);
+  }, [popoverInitialFocusContext, setFocus]);
   let days = _react.useMemo(() => {
     let offsetToFirst = new Date(
       displayedYear,
@@ -527,10 +535,12 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
                   role: 'option',
                   tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1,
                   'aria-disabled': isDisabled ? 'true' : void 0,
-                  ref: (element) =>
-                    isSameDay(weekDay, focusedDay) &&
-                    needFocus.current &&
-                    element?.focus(),
+                  ref: (element) => {
+                    if (isSameDay(weekDay, focusedDay) && needFocus.current)
+                      setTimeout(() => {
+                        element?.focus();
+                      });
+                  },
                   ...dayProps,
                   className: (0, _classnames.default)(
                     getDayClass(weekDay),

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

@@ -13,6 +13,9 @@ _export(exports, {
   Popover: function () {
     return Popover;
   },
+  PopoverInitialFocusContext: function () {
+    return PopoverInitialFocusContext;
+  },
   PopoverOpenContext: function () {
     return PopoverOpenContext;
   },
@@ -27,7 +30,9 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _react1 = require('@floating-ui/react');
 const _index = require('../../utils/index.js');
 const _Portal = require('../../utils/components/Portal.js');
+const _ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
 const PopoverOpenContext = _react.createContext(void 0);
+const PopoverInitialFocusContext = _react.createContext(void 0);
 const usePopover = (options) => {
   let {
     placement = 'bottom-start',
@@ -228,9 +233,11 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
     role: 'dialog',
     middleware,
   });
+  let [popoverElement, setPopoverElement] = _react.useState();
   let popoverRef = (0, _index.useMergedRefs)(
     popover.refs.setFloating,
     forwardedRef,
+    setPopoverElement,
   );
   let triggerId = `${(0, _index.useId)()}-trigger`;
   let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
@@ -239,6 +246,13 @@ 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 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
     ),
     popover.open
       ? _react.createElement(
-          PopoverPortal,
+          PopoverInitialFocusContext.Provider,
           {
-            portal: portal,
+            value: initialFocusContextValue,
           },
           _react.createElement(
-            _react1.FloatingFocusManager,
+            PopoverPortal,
             {
-              context: popover.context,
-              modal: false,
+              portal: portal,
             },
             _react.createElement(
-              _index.Box,
+              _ThemeProvider.ThemeProvider,
               {
-                className: (0, _classnames.default)(
+                portalContainer: popoverElement,
+              },
+              _react.createElement(DisplayContents, null),
+              _react.createElement(
+                _react1.FloatingFocusManager,
+                {
+                  context: popover.context,
+                  modal: false,
+                  initialFocus: initialFocus,
+                },
+                _react.createElement(
+                  _index.Box,
                   {
-                    'iui-popover-surface': applyBackground,
+                    className: (0, _classnames.default)(
+                      {
+                        '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/DEV-cjs/core/ProgressIndicators/ProgressLinear.js

@@ -37,10 +37,11 @@ const ProgressLinear = _react.forwardRef((props, forwardedRef) => {
       'data-iui-status': status,
       'data-iui-indeterminate': indeterminate ? 'true' : void 0,
       'data-iui-animated': isAnimated ? 'true' : void 0,
+      ...rest,
       style: {
         '--iui-progress-percentage': `${boundedValue}%`,
+        ...props.style,
       },
-      ...rest,
     },
     _react.createElement(
       _index.ShadowRoot,

package/DEV-cjs/core/Select/SelectTagContainer.js

@@ -12,30 +12,44 @@ const _interop_require_default = require('@swc/helpers/_/_interop_require_defaul
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
 const _SelectTag = require('./SelectTag.js');
+const _index = require('../../utils/index.js');
 const SelectTagContainer = _react.forwardRef((props, ref) => {
-  let { tags, className, ...rest } = props;
-  let [containerRef, visibleCount] = (0, _index.useOverflow)(tags);
-  let refs = (0, _index.useMergedRefs)(ref, containerRef);
+  let { tags: tagsProp, className, ...rest } = props;
+  let tags = _react.useMemo(
+    () => _react.Children.toArray(tagsProp),
+    [tagsProp],
+  );
   return _react.createElement(
-    _index.Box,
+    _index.OverflowContainer,
     {
+      itemsCount: tags.length,
       className: (0, _classnames.default)(
         'iui-select-tag-container',
         className,
       ),
-      ref: refs,
+      ref: ref,
       ...rest,
     },
+    _react.createElement(SelectTagContainerContent, {
+      ...props,
+      tags: tags,
+    }),
+  );
+});
+const SelectTagContainerContent = (props) => {
+  let { tags } = props;
+  let { visibleCount } = _index.OverflowContainer.useContext();
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
     _react.createElement(
-      _react.Fragment,
+      _index.OverflowContainer.OverflowNode,
       null,
-      visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
-      visibleCount < tags.length &&
-        _react.createElement(_SelectTag.SelectTag, {
-          label: `+${tags.length - visibleCount + 1} item(s)`,
-        }),
+      _react.createElement(_SelectTag.SelectTag, {
+        label: `+${tags.length - visibleCount + 1} item(s)`,
+      }),
     ),
   );
-});
+};

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

@@ -12,39 +12,32 @@ const _interop_require_default = require('@swc/helpers/_/_interop_require_defaul
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
-const _index1 = require('./columns/index.js');
 const _FilterToggle = require('./filters/FilterToggle.js');
 const _utils = require('./utils.js');
 const _classnames = _interop_require_default._(require('classnames'));
-const ColumnHeader = (props) => {
+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(_utils.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 !== _index1.SELECTION_CELL_ID);
   if ([void 0, 0].includes(column.minWidth)) {
     column.minWidth = columnHasExpanders
       ? COLUMN_MIN_WIDTHS.withExpander
@@ -64,12 +57,12 @@ const ColumnHeader = (props) => {
       column.columnClassName,
     ),
     style: {
-      ...(0, _utils.getCellStyle)(column, !!state.isTableResizing),
+      ...(0, _utils.getCellStyle)(column, !!instance?.state.isTableResizing),
       ...(columnHasExpanders &&
         (0, _utils.getSubRowStyle)({
           density,
         })),
-      ...(0, _utils.getStickyStyle)(column, visibleColumns),
+      ...(0, _utils.getStickyStyle)(column, instance?.visibleColumns ?? []),
       flexWrap: 'wrap',
       columnGap: 'var(--iui-size-xs)',
     },
@@ -81,14 +74,14 @@ 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: (0, _index.useMergedRefs)(
+        _react.useCallback(
+          (el) => {
+            if (el) column.resizeWidth = el.getBoundingClientRect().width;
+          },
+          [column],
+        ),
+        forwardedRef,
       ),
       onMouseDown: () => {
         isHeaderDirectClick.current = true;
@@ -159,7 +152,7 @@ const ColumnHeader = (props) => {
         ),
       isResizable &&
         column.isResizerVisible &&
-        (index !== headers.length - 1 || 'expand' === columnResizeMode) &&
+        (!isLast || 'expand' === columnResizeMode) &&
         _react.createElement(
           _index.Box,
           {
@@ -178,17 +171,17 @@ const ColumnHeader = (props) => {
           slot: 'resizers',
         }),
       'left' === column.sticky &&
-        state.sticky.isScrolledToRight &&
+        instance?.state.sticky.isScrolledToRight &&
         _react.createElement(_index.Box, {
           className: 'iui-table-cell-shadow-right',
           slot: 'shadows',
         }),
       'right' === column.sticky &&
-        state.sticky.isScrolledToLeft &&
+        instance?.state.sticky.isScrolledToLeft &&
         _react.createElement(_index.Box, {
           className: 'iui-table-cell-shadow-left',
           slot: 'shadows',
         }),
     ),
   );
-};
+});