@itwin/itwinui-react 3.19.1 → 3.19.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 3.19.3
+
+### Patch Changes
+
+- [#2622](https://github.com/iTwin/iTwinUI/pull/2622): Fixed `ComboBox` and `Select` bug by no longer rendering the deselect ("❌") button in the tags when the multiselect `ComboBox`'s input or the multiselect `Select` is disabled.
+- [#2618](https://github.com/iTwin/iTwinUI/pull/2618): `TreeNode` hover styles only applied when hover is supported.
+- [#2624](https://github.com/iTwin/iTwinUI/pull/2624): Floating elements will try to prefer a best fit placement.
+
+## 3.19.2
+
+### Patch Changes
+
+- [#2612](https://github.com/iTwin/iTwinUI/pull/2612): Fixed theme bridge to use StrataKit fonts.
+- [#2616](https://github.com/iTwin/iTwinUI/pull/2616): Reverted the internal change made in [v3.19.0](https://github.com/iTwin/iTwinUI/releases/tag/%40itwin%2Fitwinui-react%403.19.0) where `Table`'s `SelectionColumn` and `ExpanderColumn` had been fixed to use `cellRenderer` instead of `Cell`.
+- [#2603](https://github.com/iTwin/iTwinUI/pull/2603): `Breadcrumbs.Item` now respects the `aria-current` prop.
+- [#2615](https://github.com/iTwin/iTwinUI/pull/2615): `Table` row and header separators made more subtle.
+
 ## 3.19.1
 
 ### Patch Changes
@@ -16,6 +33,7 @@
 
   - [#2573](https://github.com/iTwin/iTwinUI/pull/2573): Added the ability to pass `future={true}` to `ThemeProvider` to enable _all_ future flags.
   - [#2543](https://github.com/iTwin/iTwinUI/pull/2543): Added a new future flag to `ThemeProvider`'s `future` prop: `ToggleSwitch.consistentPropsSpread`. Setting this to `true` will result in all `ToggleSwitch` DOM props being applied on the input element.
+
 - [#2544](https://github.com/iTwin/iTwinUI/pull/2544): Added a new `wrapperProps` prop to `ToggleSwitch` to pass props to the wrapper. To prevent breaking changes:
   - If this new `wrapperProps` is provided or `ThemeProvider`'s `ToggleSwitch.consistentPropsSpread` future flag is `true`, `className` and `style` will be applied on the `input` and `wrapperProps` will be applied on the wrapper.
   - Else, `className` and `style` continue to be applied on the wrapper.

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

@@ -44,7 +44,6 @@ const Avatar = _react.forwardRef((props, ref) => {
     abbreviation,
     image,
     backgroundColor,
-    title,
     translatedStatusTitles,
     className,
     style,
@@ -61,7 +60,6 @@ const Avatar = _react.forwardRef((props, ref) => {
       className: (0, _classnames.default)('iui-avatar', className),
       'data-iui-size': 'medium' !== size ? size : void 0,
       'data-iui-status': status,
-      title: title,
       style: {
         backgroundColor: getBackground(backgroundColor),
         ...style,

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

@@ -143,17 +143,22 @@ const ListItem = ({ item, isActive }) => {
       );
     children = _react.createElement(BreadcrumbsItem, children.props);
   }
+  let getProps = _react.useCallback(
+    (children) => {
+      let defaultAriaCurrent = isActive ? 'location' : void 0;
+      return {
+        'aria-current': children.props['aria-current'] ?? defaultAriaCurrent,
+      };
+    },
+    [isActive],
+  );
   return _react.createElement(
     _index.Box,
     {
       as: 'li',
       className: 'iui-breadcrumbs-item',
     },
-    children &&
-      _react.cloneElement(children, {
-        'aria-current':
-          children.props['aria-current'] ?? isActive ? 'location' : void 0,
-      }),
+    children ? (0, _index.cloneElementWithRef)(children, getProps) : null,
   );
 };
 const Separator = ({ separator }) =>

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

@@ -410,10 +410,12 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
                   return _react.createElement(_SelectTag.SelectTag, {
                     key: option.label,
                     label: option.label,
-                    onRemove: () => {
-                      handleOptionSelection(__originalIndex);
-                      hide();
-                    },
+                    onRemove: inputProps?.disabled
+                      ? void 0
+                      : () => {
+                          handleOptionSelection(__originalIndex);
+                          hide();
+                        },
                   });
                 })
                 .filter(Boolean)

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

@@ -97,7 +97,7 @@ const usePopover = (options) => {
             (0, _react1.offset)(middleware.offset),
           middleware.flip &&
             (0, _react1.flip)({
-              padding: 4,
+              padding: 5,
             }),
           middleware.shift &&
             (0, _react1.shift)({

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

@@ -238,14 +238,16 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
       _react.createElement(_SelectTag.SelectTag, {
         key: option.label,
         label: option.label,
-        onRemove: () => {
-          handleOptionSelection(option, {
-            isSelected: true,
-          });
-          selectRef.current?.focus();
-        },
+        onRemove: disabled
+          ? void 0
+          : () => {
+              handleOptionSelection(option, {
+                isSelected: true,
+              });
+              selectRef.current?.focus();
+            },
       }),
-    [handleOptionSelection],
+    [disabled, handleOptionSelection],
   );
   let popover = (0, _Popover.usePopover)({
     visible: isOpen,

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

@@ -35,35 +35,30 @@ const ExpanderColumn = (props = {}) => {
     maxWidth: 48,
     columnClassName: 'iui-slot',
     cellClassName: 'iui-slot',
-    Cell: () => null,
-    cellRenderer: (props) => {
-      let { row } = props.cellProps;
-      let children = subComponent?.(row)
-        ? _react.createElement(
-            _IconButton.IconButton,
-            {
-              'aria-label': 'Toggle expandable content',
-              className: 'iui-table-row-expander',
-              styleType: 'borderless',
-              size: 'small',
-              onClick: (e) => {
-                e.stopPropagation();
-                row.toggleRowExpanded();
-              },
-              disabled: isDisabled?.(row.original),
-              'aria-expanded': row.isExpanded,
-            },
-            _react.createElement(_index.SvgChevronRight, null),
-          )
-        : null;
+    Cell: (props) => {
+      let { row } = props;
+      if (!subComponent?.(row)) return null;
       return _react.createElement(
-        _index1.DefaultCell,
+        _IconButton.IconButton,
         {
-          ...props,
-          isDisabled: (rowData) => !!isDisabled?.(rowData),
+          'aria-label': 'Toggle expandable content',
+          className: 'iui-table-row-expander',
+          styleType: 'borderless',
+          size: 'small',
+          onClick: (e) => {
+            e.stopPropagation();
+            row.toggleRowExpanded();
+          },
+          disabled: isDisabled?.(props.row.original),
+          'aria-expanded': row.isExpanded,
         },
-        children,
+        _react.createElement(_index.SvgChevronRight, null),
       );
     },
+    cellRenderer: (props) =>
+      _react.createElement(_index1.DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
   };
 };

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

@@ -64,10 +64,8 @@ const SelectionColumn = (props = {}) => {
         onChange: () => toggleAllRowsSelected(nextToggleState),
       });
     },
-    Cell: () => null,
-    cellRenderer: (props) => {
-      let { row, selectSubRows = true } = props.cellProps;
-      let children = _react.createElement(_Checkbox.Checkbox, {
+    Cell: ({ row, selectSubRows = true }) =>
+      _react.createElement(_Checkbox.Checkbox, {
         ...row.getToggleRowSelectedProps(),
         style: {},
         title: '',
@@ -87,15 +85,11 @@ const SelectionColumn = (props = {}) => {
             );
           else row.toggleRowSelected(!row.isSelected);
         },
-      });
-      return _react.createElement(
-        _index.DefaultCell,
-        {
-          ...props,
-          isDisabled: (rowData) => !!isDisabled?.(rowData),
-        },
-        children,
-      );
-    },
+      }),
+    cellRenderer: (props) =>
+      _react.createElement(_index.DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
   };
 };

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

@@ -11,7 +11,6 @@ Object.defineProperty(exports, 'useExpanderCell', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _index = require('../columns/index.js');
-const _DefaultCell = require('../cells/DefaultCell.js');
 const useExpanderCell =
   (subComponent, expanderCell, isRowDisabled) => (hooks) => {
     if (!subComponent) return;
@@ -27,17 +26,14 @@ const useExpanderCell =
       return [
         {
           ...expanderColumn,
-          cellRenderer: expanderCell
-            ? (props) =>
+          Cell: expanderCell
+            ? (cellProps) =>
                 _react.createElement(
-                  _DefaultCell.DefaultCell,
-                  {
-                    ...props,
-                    isDisabled: (rowData) => !!isRowDisabled?.(rowData),
-                  },
-                  expanderCell(props.cellProps),
+                  _react.Fragment,
+                  null,
+                  expanderCell(cellProps),
                 )
-            : expanderColumn.cellRenderer,
+            : expanderColumn.Cell,
         },
         ...columns,
       ];

package/DEV-cjs/styles.js

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

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

@@ -19,7 +19,6 @@ export const Avatar = React.forwardRef((props, ref) => {
     abbreviation,
     image,
     backgroundColor,
-    title,
     translatedStatusTitles,
     className,
     style,
@@ -36,7 +35,6 @@ export const Avatar = React.forwardRef((props, ref) => {
       className: cx('iui-avatar', className),
       'data-iui-size': 'medium' !== size ? size : void 0,
       'data-iui-status': status,
-      title: title,
       style: {
         backgroundColor: getBackground(backgroundColor),
         ...style,

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

@@ -5,6 +5,7 @@ import {
   Box,
   OverflowContainer,
   useWarningLogger,
+  cloneElementWithRef,
 } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { Anchor } from '../Typography/Anchor.js';
@@ -134,17 +135,22 @@ let ListItem = ({ item, isActive }) => {
       );
     children = React.createElement(BreadcrumbsItem, children.props);
   }
+  let getProps = React.useCallback(
+    (children) => {
+      let defaultAriaCurrent = isActive ? 'location' : void 0;
+      return {
+        'aria-current': children.props['aria-current'] ?? defaultAriaCurrent,
+      };
+    },
+    [isActive],
+  );
   return React.createElement(
     Box,
     {
       as: 'li',
       className: 'iui-breadcrumbs-item',
     },
-    children &&
-      React.cloneElement(children, {
-        'aria-current':
-          children.props['aria-current'] ?? isActive ? 'location' : void 0,
-      }),
+    children ? cloneElementWithRef(children, getProps) : null,
   );
 };
 let Separator = ({ separator }) =>

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

@@ -406,10 +406,12 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
                   return React.createElement(SelectTag, {
                     key: option.label,
                     label: option.label,
-                    onRemove: () => {
-                      handleOptionSelection(__originalIndex);
-                      hide();
-                    },
+                    onRemove: inputProps?.disabled
+                      ? void 0
+                      : () => {
+                          handleOptionSelection(__originalIndex);
+                          hide();
+                        },
                   });
                 })
                 .filter(Boolean)

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

@@ -98,7 +98,7 @@ export const usePopover = (options) => {
           void 0 !== middleware.offset && offset(middleware.offset),
           middleware.flip &&
             flip({
-              padding: 4,
+              padding: 5,
             }),
           middleware.shift &&
             shift({

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

@@ -230,14 +230,16 @@ let CustomSelect = React.forwardRef((props, forwardedRef) => {
       React.createElement(SelectTag, {
         key: option.label,
         label: option.label,
-        onRemove: () => {
-          handleOptionSelection(option, {
-            isSelected: true,
-          });
-          selectRef.current?.focus();
-        },
+        onRemove: disabled
+          ? void 0
+          : () => {
+              handleOptionSelection(option, {
+                isSelected: true,
+              });
+              selectRef.current?.focus();
+            },
       }),
-    [handleOptionSelection],
+    [disabled, handleOptionSelection],
   );
   let popover = usePopover({
     visible: isOpen,

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

@@ -15,35 +15,30 @@ export const ExpanderColumn = (props = {}) => {
     maxWidth: 48,
     columnClassName: 'iui-slot',
     cellClassName: 'iui-slot',
-    Cell: () => null,
-    cellRenderer: (props) => {
-      let { row } = props.cellProps;
-      let children = subComponent?.(row)
-        ? React.createElement(
-            IconButton,
-            {
-              'aria-label': 'Toggle expandable content',
-              className: 'iui-table-row-expander',
-              styleType: 'borderless',
-              size: 'small',
-              onClick: (e) => {
-                e.stopPropagation();
-                row.toggleRowExpanded();
-              },
-              disabled: isDisabled?.(row.original),
-              'aria-expanded': row.isExpanded,
-            },
-            React.createElement(SvgChevronRight, null),
-          )
-        : null;
+    Cell: (props) => {
+      let { row } = props;
+      if (!subComponent?.(row)) return null;
       return React.createElement(
-        DefaultCell,
+        IconButton,
         {
-          ...props,
-          isDisabled: (rowData) => !!isDisabled?.(rowData),
+          'aria-label': 'Toggle expandable content',
+          className: 'iui-table-row-expander',
+          styleType: 'borderless',
+          size: 'small',
+          onClick: (e) => {
+            e.stopPropagation();
+            row.toggleRowExpanded();
+          },
+          disabled: isDisabled?.(props.row.original),
+          'aria-expanded': row.isExpanded,
         },
-        children,
+        React.createElement(SvgChevronRight, null),
       );
     },
+    cellRenderer: (props) =>
+      React.createElement(DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
   };
 };

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

@@ -44,10 +44,8 @@ export const SelectionColumn = (props = {}) => {
         onChange: () => toggleAllRowsSelected(nextToggleState),
       });
     },
-    Cell: () => null,
-    cellRenderer: (props) => {
-      let { row, selectSubRows = true } = props.cellProps;
-      let children = React.createElement(Checkbox, {
+    Cell: ({ row, selectSubRows = true }) =>
+      React.createElement(Checkbox, {
         ...row.getToggleRowSelectedProps(),
         style: {},
         title: '',
@@ -67,15 +65,11 @@ export const SelectionColumn = (props = {}) => {
             );
           else row.toggleRowSelected(!row.isSelected);
         },
-      });
-      return React.createElement(
-        DefaultCell,
-        {
-          ...props,
-          isDisabled: (rowData) => !!isDisabled?.(rowData),
-        },
-        children,
-      );
-    },
+      }),
+    cellRenderer: (props) =>
+      React.createElement(DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
   };
 };

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns/index.js';
-import { DefaultCell } from '../cells/DefaultCell.js';
 export const useExpanderCell =
   (subComponent, expanderCell, isRowDisabled) => (hooks) => {
     if (!subComponent) return;
@@ -14,17 +13,14 @@ export const useExpanderCell =
       return [
         {
           ...expanderColumn,
-          cellRenderer: expanderCell
-            ? (props) =>
+          Cell: expanderCell
+            ? (cellProps) =>
                 React.createElement(
-                  DefaultCell,
-                  {
-                    ...props,
-                    isDisabled: (rowData) => !!isRowDisabled?.(rowData),
-                  },
-                  expanderCell(props.cellProps),
+                  React.Fragment,
+                  null,
+                  expanderCell(cellProps),
                 )
-            : expanderColumn.cellRenderer,
+            : expanderColumn.Cell,
         },
         ...columns,
       ];

package/DEV-esm/styles.js

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

package/cjs/core/Avatar/Avatar.d.ts

@@ -15,10 +15,6 @@ type AvatarProps = {
      * Status/Availability of a user.
      */
     status?: AvatarStatus;
-    /**
-     * Text which will appear when hovering over the icon.
-     */
-    title?: string;
     /**
      * Abbreviation to be displayed.
      */
@@ -41,16 +37,16 @@ export declare const defaultStatusTitles: StatusTitles;
  * Basic avatar component
  * @example
  * <caption>Small icon with abbreviation</caption>
- * <Avatar size='small' title='Terry Rivers' abbreviation='TR' backgroundColor='green'/>
+ * <Avatar size='small' abbreviation='TR' backgroundColor='green'/>
  * @example
  * <caption>Medium icon with image</caption>
- * <Avatar size='medium' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
+ * <Avatar size='medium' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  * @example
  * <caption>Large icon with status</caption>
- * <Avatar size='large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' status='online' />
+ * <Avatar size='large' abbreviation='TR' backgroundColor='green' status='online' />
  * @example
  * <caption>X-large icon with image</caption>
- * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
+ * <Avatar size='x-large' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
 export declare const Avatar: PolymorphicForwardRefComponent<"span", AvatarProps>;
 export {};

package/cjs/core/Avatar/Avatar.js

@@ -44,7 +44,6 @@ const Avatar = _react.forwardRef((props, ref) => {
     abbreviation,
     image,
     backgroundColor,
-    title,
     translatedStatusTitles,
     className,
     style,
@@ -61,7 +60,6 @@ const Avatar = _react.forwardRef((props, ref) => {
       className: (0, _classnames.default)('iui-avatar', className),
       'data-iui-size': 'medium' !== size ? size : void 0,
       'data-iui-status': status,
-      title: title,
       style: {
         backgroundColor: getBackground(backgroundColor),
         ...style,

package/cjs/core/AvatarGroup/AvatarGroup.d.ts

@@ -43,17 +43,14 @@ type AvatarGroupProps = {
  *  <Avatar
  *    abbreviation="TR"
  *    backgroundColor={getUserColor("Terry Rivers")}
- *    title="Terry Rivers"
  *  />
  *  <Avatar
  *    abbreviation="RM"
  *    backgroundColor={getUserColor("Robin Mercer")}
- *    title="Robin Mercer"
  *  />
  *  <Avatar
  *    abbreviation="JM"
  *    backgroundColor={getUserColor("Jean Mullins")}
- *    title="Jean Mullins"
  *  />
  * </AvatarGroup>
  */

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -143,17 +143,22 @@ const ListItem = ({ item, isActive }) => {
       );
     children = _react.createElement(BreadcrumbsItem, children.props);
   }
+  let getProps = _react.useCallback(
+    (children) => {
+      let defaultAriaCurrent = isActive ? 'location' : void 0;
+      return {
+        'aria-current': children.props['aria-current'] ?? defaultAriaCurrent,
+      };
+    },
+    [isActive],
+  );
   return _react.createElement(
     _index.Box,
     {
       as: 'li',
       className: 'iui-breadcrumbs-item',
     },
-    children &&
-      _react.cloneElement(children, {
-        'aria-current':
-          children.props['aria-current'] ?? isActive ? 'location' : void 0,
-      }),
+    children ? (0, _index.cloneElementWithRef)(children, getProps) : null,
   );
 };
 const Separator = ({ separator }) =>

package/cjs/core/ComboBox/ComboBox.js

@@ -410,10 +410,12 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
                   return _react.createElement(_SelectTag.SelectTag, {
                     key: option.label,
                     label: option.label,
-                    onRemove: () => {
-                      handleOptionSelection(__originalIndex);
-                      hide();
-                    },
+                    onRemove: inputProps?.disabled
+                      ? void 0
+                      : () => {
+                          handleOptionSelection(__originalIndex);
+                          hide();
+                        },
                   });
                 })
                 .filter(Boolean)

package/cjs/core/Popover/Popover.js

@@ -97,7 +97,7 @@ const usePopover = (options) => {
             (0, _react1.offset)(middleware.offset),
           middleware.flip &&
             (0, _react1.flip)({
-              padding: 4,
+              padding: 5,
             }),
           middleware.shift &&
             (0, _react1.shift)({

package/cjs/core/Select/Select.js

@@ -238,14 +238,16 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
       _react.createElement(_SelectTag.SelectTag, {
         key: option.label,
         label: option.label,
-        onRemove: () => {
-          handleOptionSelection(option, {
-            isSelected: true,
-          });
-          selectRef.current?.focus();
-        },
+        onRemove: disabled
+          ? void 0
+          : () => {
+              handleOptionSelection(option, {
+                isSelected: true,
+              });
+              selectRef.current?.focus();
+            },
       }),
-    [handleOptionSelection],
+    [disabled, handleOptionSelection],
   );
   let popover = (0, _Popover.usePopover)({
     visible: isOpen,