@itwin/itwinui-react 3.19.7 → 3.20.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 3.20.0
+
+### Minor Changes
+
+- [#2660](https://github.com/iTwin/iTwinUI/pull/2660): Updated the **theme bridge** to use `@stratakit/mui` instead of `@stratakit/foundations`.
+  - eee1bcfd838b07743a6a2d96c50160ad62497235: `styles.css` will now declare `@layer mui, stratakit` after `@layer itwinui`.
+- DOM changes:
+  - [#2663](https://github.com/iTwin/iTwinUI/pull/2663): Improved the accessibility of **Dialog** and **Tile** by rendering headings by default. The default heading level is `<h2>`, which can be customized passing the `as` prop to `Dialog.TitleBar.Title` and `Tile.NameLabel` respectively.
+  - [#2664](https://github.com/iTwin/iTwinUI/pull/2664): Refactored the internal structure of text-only cells to improve the rendering performance of `Table`. The wrapper elements used for line clamping and increasing text selection hit target size are now always rendered in light DOM, avoiding the overhead of shadow DOM.
+- [#2664](https://github.com/iTwin/iTwinUI/pull/2664): Added `text` prop to `DefaultCell` as an alternative to `children`. Using this prop will ensure that the cell content is conditionally wrapped with additional elements for better text selection experience and line clamping (if `clamp` prop is not `false`).
+- [#2662](https://github.com/iTwin/iTwinUI/pull/2662): Replaced several instances of the `SvgChevronRight` icon with `SvgChevronRightSmall` for better visual balance. Components affected: `Breadcrumbs`, `ExpandableBlock`, `Table` (row expanders), and `TreeNode`.
+
+### Patch Changes
+
+- [#2617](https://github.com/iTwin/iTwinUI/pull/2617): Fixed `Tabs` bug where orientation related styles of nested tabs were sometimes incorrect. (**Note**: Nesting tabs is still _not_ recommended for UX reasons.)
+- 6f2f94d4341f41aead12cbafacf97f0fc6ea2113: `ComboBox` options will now attempt to use `value` (instead of `label`) as `key` in cases where it is serializable.
+- 0abc87b4c2d1db88f263056e534f19c6ab171b8d: `DropdownMenu` will now close by default when a menu item is clicked. Set `closeOnItemClick={false}` to opt out of this behavior.
+- 4b4a5cde202d34995e9036985a329c6383e13dc6: Memoized `getItemKey` in `Table`.
+
 ## 3.19.7
 
 ### Patch Changes

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

@@ -169,7 +169,7 @@ const Separator = ({ separator }) =>
       className: 'iui-breadcrumbs-separator',
       'aria-hidden': true,
     },
-    separator ?? _react.createElement(_index.SvgChevronRight, null),
+    separator ?? _react.createElement(_index.SvgChevronRightSmall, null),
   );
 const BreadcrumbsItem = _react.forwardRef((props, forwardedRef) => {
   let { as: asProp, ...rest } = props;

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

@@ -24,8 +24,12 @@ const _ComboBoxMenuItem = require('./ComboBoxMenuItem.js');
 const isMultipleEnabled = (variable, multiple) =>
   multiple && (Array.isArray(variable) || null == variable);
 const isSingleOnChange = (onChange, multiple) => !multiple;
-const getOptionId = (option, idPrefix) =>
-  option.id ?? `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
+const getOptionId = (option, idPrefix) => {
+  if (option.id) return option.id;
+  if ('string' == typeof option.value || 'number' == typeof option.value)
+    return `${idPrefix}-option-${option.value.toString().replace(/\s/g, '-')}`;
+  return `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
+};
 const ComboBox = _react.forwardRef((props, forwardedRef) => {
   let idPrefix = (0, _index.useId)();
   let defaultFilterFunction = _react.useCallback(

package/DEV-cjs/core/Dialog/DialogTitleBarTitle.js

@@ -9,6 +9,6 @@ Object.defineProperty(exports, 'DialogTitleBarTitle', {
   },
 });
 const _index = require('../../utils/index.js');
-const DialogTitleBarTitle = _index.polymorphic.div('iui-dialog-title');
+const DialogTitleBarTitle = _index.polymorphic.h2('iui-dialog-title');
 if ('development' === process.env.NODE_ENV)
   DialogTitleBarTitle.displayName = 'Dialog.TitleBar.Title';

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

@@ -48,7 +48,7 @@ const DropdownMenuContent = _react.forwardRef((props, forwardedRef) => {
     onVisibleChange,
     portal = true,
     middleware,
-    closeOnItemClick = false,
+    closeOnItemClick = true,
     ...rest
   } = props;
   let [visible, setVisible] = (0, _index.useControlledState)(

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

@@ -147,7 +147,7 @@ const ExpandableBlockExpandIcon = _react.forwardRef((props, forwardedRef) => {
       ...rest,
     },
     children ??
-      _react.createElement(_index.SvgChevronRight, {
+      _react.createElement(_index.SvgChevronRightSmall, {
         'aria-hidden': true,
       }),
   );

package/DEV-cjs/core/InformationPanel/InformationPanelHeader.js

@@ -28,7 +28,6 @@ const InformationPanelHeader = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(
       _index.Box,
       {
-        as: 'span',
         className: 'iui-information-header-label',
       },
       children,

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

@@ -38,7 +38,7 @@ const SubRowExpander = (props) => {
             disabled: isDisabled,
             ...rest,
           },
-          _react.createElement(_index.SvgChevronRight, {
+          _react.createElement(_index.SvgChevronRightSmall, {
             style: {
               transform: cell.row.isExpanded ? 'rotate(90deg)' : void 0,
             },

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

@@ -561,7 +561,7 @@ const Table = (props) => {
     count: page.length,
     getScrollElement: () => tableRef.current,
     estimateSize: () => rowHeight,
-    getItemKey: (index) => page[index].id,
+    getItemKey: _react.useCallback((index) => page[index].id, [page]),
     overscan: 1,
   });
   (0, _index.useLayoutEffect)(() => {

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

@@ -67,24 +67,18 @@ const TableCell = (props) => {
     }),
     [cell, tableInstance],
   );
-  let cellContent = _react.useMemo(
+  let expander = _react.useMemo(
     () =>
-      _react.createElement(
-        _react.Fragment,
-        null,
-        tableHasSubRows &&
-          hasSubRowExpander &&
-          cell.row.canExpand &&
-          _react.createElement(_SubRowExpander.SubRowExpander, {
+      tableHasSubRows && hasSubRowExpander && cell.row.canExpand
+        ? _react.createElement(_SubRowExpander.SubRowExpander, {
             cell: cell,
             isDisabled: isDisabled,
             cellProps: cellProps,
             expanderCell: expanderCell,
             density: density,
             slot: 'start',
-          }),
-        cell.render('Cell'),
-      ),
+          })
+        : null,
     [
       cell,
       cellProps,
@@ -95,32 +89,40 @@ const TableCell = (props) => {
       tableHasSubRows,
     ],
   );
-  let defaultCellRendererChildren = _react.useMemo(
+  let cellContent = _react.useMemo(() => cell.render('Cell'), [cell]);
+  let shadows = _react.useMemo(
     () =>
       _react.createElement(
         _react.Fragment,
         null,
-        cellContent,
         'left' === cell.column.sticky &&
           tableInstance.state.sticky.isScrolledToRight &&
           _react.createElement(_index2.Box, {
             className: 'iui-table-cell-shadow-right',
-            slot: 'shadows',
           }),
         'right' === cell.column.sticky &&
           tableInstance.state.sticky.isScrolledToLeft &&
           _react.createElement(_index2.Box, {
             className: 'iui-table-cell-shadow-left',
-            slot: 'shadows',
           }),
       ),
     [
       cell.column.sticky,
-      cellContent,
       tableInstance.state.sticky.isScrolledToLeft,
       tableInstance.state.sticky.isScrolledToRight,
     ],
   );
+  let defaultCellRendererChildren = _react.useMemo(
+    () =>
+      _react.createElement(
+        _react.Fragment,
+        null,
+        cellContent,
+        expander,
+        shadows,
+      ),
+    [cellContent, expander, shadows],
+  );
   let cellRendererProps = _react.useMemo(
     () => ({
       cellElementProps,
@@ -133,9 +135,16 @@ const TableCell = (props) => {
     _react.Fragment,
     null,
     _react.createElement(
-      _DefaultCell.DefaultCellRendererPropsChildren.Provider,
+      _DefaultCell.DefaultCellContext.Provider,
       {
-        value: defaultCellRendererChildren,
+        value: _react.useMemo(
+          () => ({
+            children: defaultCellRendererChildren,
+            expander,
+            shadows,
+          }),
+          [defaultCellRendererChildren, expander, shadows],
+        ),
       },
       cell.column.cellRenderer
         ? cell.column.cellRenderer({

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

@@ -13,8 +13,8 @@ _export(exports, {
   DefaultCell: function () {
     return DefaultCell;
   },
-  DefaultCellRendererPropsChildren: function () {
-    return DefaultCellRendererPropsChildren;
+  DefaultCellContext: function () {
+    return DefaultCellContext;
   },
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
@@ -26,7 +26,7 @@ const _classnames = /*#__PURE__*/ _interop_require_default._(
 );
 const _index = require('../../../utils/index.js');
 const _utils = require('../utils.js');
-const DefaultCellRendererPropsChildren = _react.createContext(void 0);
+const DefaultCellContext = _react.createContext({});
 const DefaultCell = (props) => {
   let instance = _react.useContext(_utils.TableInstanceContext);
   let isCustomCell = _react.useMemo(
@@ -35,8 +35,9 @@ const DefaultCell = (props) => {
         ?.Cell !== _reacttable.defaultColumn.Cell,
     [instance, props.cellProps.column.id],
   );
+  let defaultCellContext = _react.useContext(DefaultCellContext);
   let isCellRendererChildrenCustom =
-    _react.useContext(DefaultCellRendererPropsChildren) !== props.children;
+    defaultCellContext.children !== props.children;
   let isDefaultTextCell =
     'string' == typeof props.cellProps.value &&
     !isCustomCell &&
@@ -55,10 +56,33 @@ const DefaultCell = (props) => {
     className,
     style,
     status,
-    clamp = isDefaultTextCell,
+    text = isDefaultTextCell ? cellProps.value : void 0,
+    clamp = !!text,
     ...rest
   } = props;
   let { key: cellElementKey, ...cellElementPropsRest } = cellElementProps;
+  let decorations = {
+    start: startIcon
+      ? _react.createElement(
+          _index.Box,
+          {
+            className: 'iui-table-cell-start-icon',
+            key: `${cellElementKey}-start`,
+          },
+          startIcon,
+        )
+      : null,
+    end: endIcon
+      ? _react.createElement(
+          _index.Box,
+          {
+            className: 'iui-table-cell-end-icon',
+            key: `${cellElementKey}-end`,
+          },
+          endIcon,
+        )
+      : null,
+  };
   return _react.createElement(
     _index.Box,
     {
@@ -73,87 +97,41 @@ const DefaultCell = (props) => {
         ...style,
       },
     },
-    _react.createElement(
-      _index.ShadowRoot,
-      {
-        key: `${cellElementKey}-shadow-root`,
-        flush: false,
-        css: css,
-      },
-      _react.createElement('slot', {
-        name: 'start',
-      }),
-      _react.createElement(
-        TableCellContent,
-        {
-          shouldRenderWrapper: isDefaultTextCell,
-        },
-        clamp
-          ? _react.createElement(
-              'div',
-              {
-                className: _index.lineClamp.className,
-              },
-              _react.createElement('slot', null),
-            )
-          : _react.createElement('slot', null),
-      ),
-      _react.createElement('slot', {
-        name: 'end',
-      }),
-      _react.createElement('slot', {
-        name: 'shadows',
-      }),
-    ),
-    startIcon &&
-      _react.createElement(
-        _index.Box,
-        {
-          className: 'iui-table-cell-start-icon',
-          slot: 'start',
-          key: `${cellElementKey}-start`,
-        },
-        startIcon,
-      ),
-    children,
-    endIcon &&
-      _react.createElement(
-        _index.Box,
-        {
-          className: 'iui-table-cell-end-icon',
-          slot: 'end',
-          key: `${cellElementKey}-end`,
-        },
-        endIcon,
-      ),
+    (() => {
+      if (text)
+        return _react.createElement(
+          _react.Fragment,
+          null,
+          decorations.start,
+          defaultCellContext.expander,
+          _react.createElement(
+            _index.Box,
+            {
+              className: 'iui-table-cell-default-content',
+              onClick: (e) => e.stopPropagation(),
+            },
+            clamp
+              ? _react.createElement(
+                  _index.Box,
+                  {
+                    className: 'iui-line-clamp',
+                  },
+                  text,
+                )
+              : text,
+          ),
+          decorations.end,
+          defaultCellContext.shadows,
+        );
+      return _react.createElement(
+        _react.Fragment,
+        null,
+        decorations.start,
+        children,
+        decorations.end,
+      );
+    })(),
   );
 };
 if ('development' === process.env.NODE_ENV)
   DefaultCell.displayName = 'DefaultCell';
-const TableCellContent = (props) => {
-  let { children, shouldRenderWrapper } = props;
-  return shouldRenderWrapper
-    ? _react.createElement(
-        'div',
-        {
-          className: '_iui-table-cell-default-content',
-          onClick: (e) => e.stopPropagation(),
-        },
-        children,
-      )
-    : children;
-};
-const css = `
-._iui-table-cell-default-content {
-  position: relative;
-  isolation: isolate;
-}
-._iui-table-cell-default-content::before {
-  content: '';
-  display: block;
-  position: absolute;
-  inset: -6px;
-  z-index: -1;
-}
-${_index.lineClamp.css}
-`;

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

@@ -52,7 +52,7 @@ const ExpanderColumn = (props = {}) => {
           disabled: isDisabled?.(props.row.original),
           'aria-expanded': row.isExpanded,
         },
-        _react.createElement(_index.SvgChevronRight, null),
+        _react.createElement(_index.SvgChevronRightSmall, null),
       );
     },
     cellRenderer: (props) =>

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

@@ -85,11 +85,8 @@ const TabsWrapperPresentation = _react.forwardRef((props, forwardedRef) => {
   let { orientation = 'horizontal', ...rest } = props;
   return _react.createElement(_index.Box, {
     ...rest,
-    className: (0, _classnames.default)(
-      'iui-tabs-wrapper',
-      `iui-${orientation}`,
-      props.className,
-    ),
+    className: (0, _classnames.default)('iui-tabs-wrapper', props.className),
+    'data-iui-orientation': orientation,
     ref: forwardedRef,
   });
 });
@@ -290,6 +287,7 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
         if ('auto' === focusActivationMode && !props.disabled)
           setActiveValue(value);
       }),
+      'data-iui-orientation': orientation,
     },
     label ? _react.createElement(Tabs.TabLabel, null, label) : children,
   );
@@ -336,6 +334,7 @@ if ('development' === process.env.NODE_ENV)
   TabDescription.displayName = 'Tabs.TabDescription';
 const TabsActions = _react.forwardRef((props, ref) => {
   let { wrapperProps, className, children, ...rest } = props;
+  let { orientation } = (0, _index.useSafeContext)(TabsContext);
   return _react.createElement(
     _index.Box,
     {
@@ -344,12 +343,14 @@ const TabsActions = _react.forwardRef((props, ref) => {
         'iui-tabs-actions-wrapper',
         wrapperProps?.className,
       ),
+      'data-iui-orientation': orientation,
     },
     _react.createElement(
       _index.Box,
       {
         className: (0, _classnames.default)('iui-tabs-actions', className),
         ref: ref,
+        'data-iui-orientation': orientation,
         ...rest,
       },
       children,
@@ -360,7 +361,9 @@ if ('development' === process.env.NODE_ENV)
   TabsActions.displayName = 'Tabs.Actions';
 const TabsPanel = _react.forwardRef((props, ref) => {
   let { value, className, children, ...rest } = props;
-  let { activeValue, idPrefix } = (0, _index.useSafeContext)(TabsContext);
+  let { activeValue, idPrefix, orientation } = (0, _index.useSafeContext)(
+    TabsContext,
+  );
   return _react.createElement(
     _index.Box,
     {
@@ -371,6 +374,7 @@ const TabsPanel = _react.forwardRef((props, ref) => {
       ref: ref,
       ...rest,
       id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
+      'data-iui-orientation': orientation,
     },
     children,
   );

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

@@ -210,7 +210,7 @@ const TileNameIcon = _react.forwardRef((props, forwardedRef) => {
 });
 if ('development' === process.env.NODE_ENV)
   TileNameIcon.displayName = 'Tile.NameIcon';
-const TileNameLabel = _index.polymorphic.span('iui-tile-name-label');
+const TileNameLabel = _index.polymorphic.h2('iui-tile-name-label');
 if ('development' === process.env.NODE_ENV)
   TileNameLabel.displayName = 'Tile.NameLabel';
 const TileContentArea = _index.polymorphic.div('iui-tile-content');
@@ -243,7 +243,6 @@ const TileMoreOptions = _react.forwardRef((props, forwardedRef) => {
       {
         onVisibleChange: setIsMenuVisible,
         menuItems: children,
-        closeOnItemClick: true,
       },
       _react.createElement(
         _IconButton.IconButton,

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

@@ -16,12 +16,8 @@ const _classnames = /*#__PURE__*/ _interop_require_default._(
 );
 const _index = require('../../utils/index.js');
 const _IconButton = require('../Buttons/IconButton.js');
-const _TreeContext = require('./TreeContext.js');
 const TreeNodeExpander = _react.forwardRef((props, ref) => {
   let { isExpanded, expanderIconProps = {}, ...rest } = props;
-  let size = _react.useContext(_TreeContext.TreeContext)?.size ?? 'default';
-  let ChevronIcon =
-    'small' === size ? _index.SvgChevronRightSmall : _index.SvgChevronRight;
   return _react.createElement(
     _IconButton.IconButton,
     {
@@ -31,7 +27,7 @@ const TreeNodeExpander = _react.forwardRef((props, ref) => {
       ref: ref,
       ...rest,
     },
-    _react.createElement(ChevronIcon, {
+    _react.createElement(_index.SvgChevronRightSmall, {
       ...expanderIconProps,
       className: (0, _classnames.default)(
         'iui-tree-node-content-expander-icon',

package/DEV-cjs/styles.js

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

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import cx from 'classnames';
 import {
-  SvgChevronRight,
   Box,
   OverflowContainer,
   useWarningLogger,
   cloneElementWithRef,
+  SvgChevronRightSmall,
 } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { Anchor } from '../Typography/Anchor.js';
@@ -161,7 +161,7 @@ let Separator = ({ separator }) =>
       className: 'iui-breadcrumbs-separator',
       'aria-hidden': true,
     },
-    separator ?? React.createElement(SvgChevronRight, null),
+    separator ?? React.createElement(SvgChevronRightSmall, null),
   );
 let BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
   let { as: asProp, ...rest } = props;

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

@@ -20,8 +20,12 @@ import { ComboBoxMenuItem } from './ComboBoxMenuItem.js';
 let isMultipleEnabled = (variable, multiple) =>
   multiple && (Array.isArray(variable) || null == variable);
 let isSingleOnChange = (onChange, multiple) => !multiple;
-let getOptionId = (option, idPrefix) =>
-  option.id ?? `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
+let getOptionId = (option, idPrefix) => {
+  if (option.id) return option.id;
+  if ('string' == typeof option.value || 'number' == typeof option.value)
+    return `${idPrefix}-option-${option.value.toString().replace(/\s/g, '-')}`;
+  return `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
+};
 export const ComboBox = React.forwardRef((props, forwardedRef) => {
   let idPrefix = useId();
   let defaultFilterFunction = React.useCallback(

package/DEV-esm/core/Dialog/DialogTitleBarTitle.js

@@ -1,4 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
-export const DialogTitleBarTitle = polymorphic.div('iui-dialog-title');
+export const DialogTitleBarTitle = polymorphic.h2('iui-dialog-title');
 if ('development' === process.env.NODE_ENV)
   DialogTitleBarTitle.displayName = 'Dialog.TitleBar.Title';

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

@@ -25,7 +25,7 @@ let DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
     onVisibleChange,
     portal = true,
     middleware,
-    closeOnItemClick = false,
+    closeOnItemClick = true,
     ...rest
   } = props;
   let [visible, setVisible] = useControlledState(

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

@@ -2,13 +2,13 @@ import cx from 'classnames';
 import * as React from 'react';
 import {
   StatusIconMap,
-  SvgChevronRight,
   Box,
   useSafeContext,
   polymorphic,
   mergeEventHandlers,
   ButtonBase,
   useId,
+  SvgChevronRightSmall,
 } from '../../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
 import { LinkBox } from '../LinkAction/LinkAction.js';
@@ -128,7 +128,7 @@ let ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
       ...rest,
     },
     children ??
-      React.createElement(SvgChevronRight, {
+      React.createElement(SvgChevronRightSmall, {
         'aria-hidden': true,
       }),
   );

package/DEV-esm/core/InformationPanel/InformationPanelHeader.js

@@ -15,7 +15,6 @@ export const InformationPanelHeader = React.forwardRef(
       React.createElement(
         Box,
         {
-          as: 'span',
           className: 'iui-information-header-label',
         },
         children,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SvgChevronRight } from '../../utils/index.js';
+import { SvgChevronRightSmall } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 export const SubRowExpander = (props) => {
   let { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
@@ -27,7 +27,7 @@ export const SubRowExpander = (props) => {
             disabled: isDisabled,
             ...rest,
           },
-          React.createElement(SvgChevronRight, {
+          React.createElement(SvgChevronRightSmall, {
             style: {
               transform: cell.row.isExpanded ? 'rotate(90deg)' : void 0,
             },

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

@@ -567,7 +567,7 @@ export const Table = (props) => {
     count: page.length,
     getScrollElement: () => tableRef.current,
     estimateSize: () => rowHeight,
-    getItemKey: (index) => page[index].id,
+    getItemKey: React.useCallback((index) => page[index].id, [page]),
     overscan: 1,
   });
   useLayoutEffect(() => {