@itwin/itwinui-react 3.19.1 → 3.19.2

package/esm/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/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/esm/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/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/esm/core/Table/columns/expanderColumn.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellRendererProps, Row } from '../../../react-table/react-table.js';
+import type { CellProps, CellRendererProps, Row } from '../../../react-table/react-table.js';
 export declare const EXPANDER_CELL_ID = "iui-table-expander";
 /**
  * Expander column that adds sub-content expander column to the Table.
@@ -39,6 +39,6 @@ export declare const ExpanderColumn: <T extends Record<string, unknown>>(props?:
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Cell: () => null;
+    Cell: (props: CellProps<T>) => React.JSX.Element | null;
     cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

package/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/esm/core/Table/columns/selectionColumn.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellRendererProps, HeaderProps } from '../../../react-table/react-table.js';
+import type { CellProps, CellRendererProps, HeaderProps } from '../../../react-table/react-table.js';
 export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 /**
  * Selection column that adds selection checkbox column to the Table.
@@ -28,6 +28,6 @@ export declare const SelectionColumn: <T extends Record<string, unknown>>(props?
     columnClassName: string;
     cellClassName: string;
     Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }: HeaderProps<T>) => React.JSX.Element;
-    Cell: () => null;
+    Cell: ({ row, selectSubRows }: CellProps<T>) => React.JSX.Element;
     cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

package/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/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/esm/core/Typography/Kbd.d.ts

@@ -27,7 +27,7 @@ type KbdProps = {
  * A keyboard key element.
  * @example
  * <Kbd>A</Kbd>
- * <Kbd title='Enter'>{KbdKeys.Enter}</Kbd>
+ * <Kbd>{KbdKeys.Enter}</Kbd>
  */
 export declare const Kbd: PolymorphicForwardRefComponent<"kbd", KbdProps>;
 export {};

package/esm/styles.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.19.1",
+  "version": "3.19.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",