@itwin/itwinui-react 3.19.0 → 3.19.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 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
+
+- [#2590](https://github.com/iTwin/iTwinUI/pull/2590): Fix draggable `Dialog` to also work properly on touch devices.
+- [#2596](https://github.com/iTwin/iTwinUI/pull/2596): Fixed `TransferList.Item` to now properly handle long strings.
+- [#2589](https://github.com/iTwin/iTwinUI/pull/2589): Removed the accidentally added `stretched` prop from `IconButton`.
+
 ## 3.19.0
 
 ### Minor Changes
@@ -8,6 +25,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/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.0';
+const e = '3.19.2';
 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/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.0';
+const t = '3.19.2';
 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/Buttons/IconButton.d.ts

@@ -25,7 +25,7 @@ export type IconButtonProps = {
      * @deprecated Use `label` instead.
      */
     title?: string;
-} & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps' | 'loading'>;
+} & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps' | 'loading' | 'stretched'>;
 /**
  * Icon button
  * @example

package/cjs/core/Carousel/Carousel.d.ts

@@ -40,22 +40,22 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
      * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
      */
     Navigation: PolymorphicForwardRefComponent<"div", {}> & {
-        PreviousButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        PreviousButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
             isActive?: boolean;
             label?: React.ReactNode;
             labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
             iconProps?: React.ComponentProps<"span">;
             title?: string;
-        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps" | "stretched"> & {
             as?: "button" | undefined;
         }>;
-        NextButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        NextButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
             isActive?: boolean;
             label?: React.ReactNode;
             labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
             iconProps?: React.ComponentProps<"span">;
             title?: string;
-        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps" | "stretched"> & {
             as?: "button" | undefined;
         }>;
     };

package/cjs/core/Carousel/CarouselNavigation.d.ts

@@ -7,22 +7,22 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
  * `children` can be specified to override what is shown in this navigation section.
  */
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
-    PreviousButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    PreviousButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
         isActive?: boolean;
         label?: React.ReactNode;
         labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
         iconProps?: React.ComponentProps<"span">;
         title?: string;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps" | "stretched"> & {
         as?: "button" | undefined;
     }>;
-    NextButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    NextButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
         isActive?: boolean;
         label?: React.ReactNode;
         labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
         iconProps?: React.ComponentProps<"span">;
         title?: string;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps" | "stretched"> & {
         as?: "button" | undefined;
     }>;
 };

package/cjs/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -28,7 +28,7 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
      * Although similar to `IconButton`, this subcomponent additionally collapses the padding between the button and the input/textarea
      * in `InputWithDecorations`.
      */
-    Button: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
+    Button: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
         styleType?: import("../Buttons/IconButton.js").IconButtonProps["styleType"];
     } & {
         as?: "button" | undefined;

package/cjs/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/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),
+      }),
   };
 };