@itwin/itwinui-react 3.0.0-dev.6 → 3.0.0-dev.8

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## 3.0.0-dev.8
+
+### Major Changes
+
+- [#1544](https://github.com/iTwin/iTwinUI/pull/1544): Removed `iconDisplayStyle` prop from `LabeledInput` and `LabeledTextarea` components. `svgIcon` is now added inline. Users must use `StatusMessage` to add custom icon to the message.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Removed `inputStyle` and `inputClassName` props from `LabeledInput`; style and className props are being passed down to input. Added `wrapperProps`, `labelProps`, `messageProps`, `messageIconProps`, `inputWrapperProps` to pass props to sub elements.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Removed `selectStyle` and `selectClassName` props from `LabeledSelect`; style and className props are being passed down to textarea. Added `wrapperProps`, `labelProps`, `messageProps`, `messageIconProps` to pass props to sub elements.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Removed `textareaStyle` and `textareaClassName` props from `LabeledTextarea`; style and className props are being passed down to textarea. Added `wrapperProps`, `labelProps`, `messageProps`, `messageIconProps` to pass props to sub elements.
+
+### Minor Changes
+
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added `status` prop to `Input`, `Textarea` and `Select`.
+- [#1510](https://github.com/iTwin/iTwinUI/pull/1510): Added `domProps` to allow Toast's DOM customisation.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added two new components for building complex input layouts.
+
+  - `InputGrid` for the "outer" layout (label, inputs and statusMessage)
+  - `InputWithDecorations` for the "inner" layout (start icon/button, end icon/button)
+
+  `LabeledInput`, `LabeledSelect`, `LabeledTextarea` and table `DatePickerInput` have been updated to make use of these new components internally.
+
+- [#1531](https://github.com/iTwin/iTwinUI/pull/1531): Selected options in Select/ComboBox will now have a checkmark.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added new `padded` prop to `Icon`.
+- [#1466](https://github.com/iTwin/iTwinUI/pull/1466): Adding the ability for every DOM node inside DatePicker component to have a custom className passed to it.
+- [#1523](https://github.com/iTwin/iTwinUI/pull/1523): Added `ariaStrategy` prop to Tooltip. Can be used to change how the tooltip is associated with the trigger element.
+
+### Patch Changes
+
+- [#1533](https://github.com/iTwin/iTwinUI/pull/1533): Fixed missing accessible name in SplitButton.
+- [#1495](https://github.com/iTwin/iTwinUI/pull/1495): Added accessible name to dropdown menu button in HeaderSplitButton.
+- [#1496](https://github.com/iTwin/iTwinUI/pull/1496): Added accessible button name to SideNavigation expand button.
+- [#1505](https://github.com/iTwin/iTwinUI/pull/1505): Gave accessible label to the sub-row toggle in <Table>.
+
+## 3.0.0-dev.7
+
+### Major Changes
+
+- [#1478](https://github.com/iTwin/iTwinUI/pull/1478): ThemeProvider now defaults the `theme` value to `"inherit"` and falls back to `"light"` there is no parent theme found. Also the inherit behavior has been made more resilient for cases where react context fails.
+- [#1458](https://github.com/iTwin/iTwinUI/pull/1458): Added wrapperProps, contentProps, topProps, and bottomProps to Side Navigation component to improve customization. Top-level props (className, styling, etc) now passed to SideNav button instead of to the wrapper.
+- [#1435](https://github.com/iTwin/iTwinUI/pull/1435): Improving customization of SplitButton with wrapperProps and menuButtonProps. ClassName now passed to the button instead of the component wrapper.
+- [#1461](https://github.com/iTwin/iTwinUI/pull/1461): Changed disabled button behavior to make them focusable and use `aria-disabled` instead of `disabled` attribute.
+
+### Minor Changes
+
+- [#1440](https://github.com/iTwin/iTwinUI/pull/1440): Adding the ability for every DOM node to have a custom className passed to it.
+  New prop for `FileUpload` component: `contentProps`
+- [#1430](https://github.com/iTwin/iTwinUI/pull/1430): Adding the ability for each node element in `Stepper` to have a custom `prop`.
+  New props include: `stepProps`, `trackContentProps`, `circleProps`, `nameProps`, `labelProps`, `labelCountProps`
+- [#1435](https://github.com/iTwin/iTwinUI/pull/1435): Improving customization of Button with new props: labelProps, startIconProps, and endIconProps.
+  Improving customization of IconButton with iconProps.
+- [#1477](https://github.com/iTwin/iTwinUI/pull/1477): Added a new `portalContainer` prop to `ThemeProvider`. When specified, all floating elements (tooltips, toats, dialogs) under the ThemeProvider will read this prop from context and portal into it.
+
+### Patch Changes
+
+- [#1446](https://github.com/iTwin/iTwinUI/pull/1446): Avatar has been refactored to be a single `<span>`. The colors have been updated to pass AAA contrast ratio.
+- [#1492](https://github.com/iTwin/iTwinUI/pull/1492): Fixed `aria-owns` syntax for `TreeNode`
+- [#1486](https://github.com/iTwin/iTwinUI/pull/1486): DatePicker date tables now have accessible labels.
+- [#1499](https://github.com/iTwin/iTwinUI/pull/1499): Removed special handling of iPhone notch in Header and SideNavigation.
+
 ## 3.0.0-dev.6
 
 ### Major Changes
@@ -120,6 +178,49 @@
 - Updated dependencies:
   - @itwin/itwinui-css@2.0.0-dev.0
 
+## 2.12.7
+
+### Patch Changes
+
+- [#1545](https://github.com/iTwin/iTwinUI/pull/1545): `tableFilters.DateRangeFilter` now supports localizing the date picker using `translatedLabels.datePicker`.
+
+## 2.12.6
+
+### Patch Changes
+
+- [#1516](https://github.com/iTwin/iTwinUI/pull/1516): Update SearchBox placeholder color to match Input.
+
+## 2.12.5
+
+### Patch Changes
+
+- [#1511](https://github.com/iTwin/iTwinUI/pull/1511): Fix high-visibility button background on hover.
+
+## 2.12.4
+
+### Patch Changes
+
+- [#1508](https://github.com/iTwin/iTwinUI/pull/1508): Fixed an issue where styles were not included in CommonJS environments.
+
+## 2.12.3
+
+### Patch Changes
+
+- [#1485](https://github.com/iTwin/iTwinUI/pull/1485): Improved color contrast for input and select placeholder text.
+- [#1501](https://github.com/iTwin/iTwinUI/pull/1501): Fixed a small misalignment in Table when using sticky columns.
+
+## 2.12.2
+
+### Patch Changes
+
+- [#1494](https://github.com/iTwin/iTwinUI/pull/1494): Updated color-picker dot so its outline adapts dynamically to the backgrounds for better contrast.
+
+## 2.12.1
+
+### Patch Changes
+
+- [#1467](https://github.com/iTwin/iTwinUI/pull/1467): Fixed an issue in Carousel where latest `onSlideChange` callback was being ignored.
+
 ## 2.12.0
 
 ### Minor Changes

package/cjs/core/Alert/Alert.d.ts

@@ -12,20 +12,26 @@ type AlertOwnProps = {
      */
     isSticky?: boolean;
 };
+type AlertLegacyProps = {
+    /** @deprecated Use `Alert.Action` subcomponent. */
+    clickableText?: React.ReactNode;
+    /** @deprecated Use `Alert.Action` subcomponent. */
+    clickableTextProps?: React.ComponentPropsWithoutRef<'a'>;
+    /** @deprecated Use `Alert.CloseButton` subcomponent. */
+    onClose?: () => void;
+};
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
- * <Alert>
- *  <Alert.Message>This is an alert.</Alert.Message>
- * </Alert>
+ * <Alert>This is an alert.</Alert>
  * @example
- * <Alert type='informational'>
+ * <Alert.Wrapper type='informational'>
  *  <Alert.Icon />
  *  <Alert.Message>This is an informational alert.</Alert.Message>
  *  <Alert.CloseButton onClick={() => {}} />
- * </Alert>
+ * </Alert.Wrapper>
  * @example
- * <Alert type='positive'>
+ * <Alert.Wrapper type='positive'>
  *  <Alert.Icon>
  *    <SvgSmileyHappy />
  *  </Alert.Icon>
@@ -36,17 +42,22 @@ type AlertOwnProps = {
  *  <Alert.CloseButton onClick={() => {}}>
  *    <SvgCollapse />
  *  </Alert.CloseButton>
- * </Alert>
+ * </Alert.Wrapper>
  */
-export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps> & {
+export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps & AlertLegacyProps> & {
+    /**
+     *  Alert wrapper subcomponent
+     */
+    Wrapper: PolymorphicForwardRefComponent<"div", AlertOwnProps>;
     /**
      * 	Alert icon subcomponent
      */
     Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
+        padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;
     }>;

package/cjs/core/Alert/Alert.js

@@ -11,7 +11,43 @@ const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
 const index_js_2 = require('../Buttons/index.js');
 const AlertContext = React.createContext(undefined);
-const AlertComponent = React.forwardRef((props, ref) => {
+// ----------------------------------------------------------------------------
+// Alert component
+const AlertComponent = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    type = 'informational',
+    isSticky = false,
+    clickableText,
+    clickableTextProps,
+    onClose,
+    ...rest
+  } = props;
+  return React.createElement(
+    exports.Alert.Wrapper,
+    { type: type, isSticky: isSticky, ref: forwardedRef, ...rest },
+    React.createElement(exports.Alert.Icon, null),
+    React.createElement(
+      exports.Alert.Message,
+      null,
+      children,
+      clickableText
+        ? React.createElement(
+            exports.Alert.Action,
+            { ...clickableTextProps },
+            clickableText,
+          )
+        : null,
+    ),
+    onClose
+      ? React.createElement(exports.Alert.CloseButton, { onClick: onClose })
+      : null,
+  );
+});
+AlertComponent.displayName = 'Alert';
+// ----------------------------------------------------------------------------
+// Alert.Wrapper component
+const AlertWrapper = React.forwardRef((props, ref) => {
   const {
     children,
     className,
@@ -31,7 +67,7 @@ const AlertComponent = React.forwardRef((props, ref) => {
     React.createElement(AlertContext.Provider, { value: { type } }, children),
   );
 });
-AlertComponent.displayName = 'Alert';
+AlertWrapper.displayName = 'Alert.Wrapper';
 // ----------------------------------------------------------------------------
 // Alert.Icon component
 const AlertIcon = React.forwardRef((props, ref) => {
@@ -54,7 +90,7 @@ AlertMessage.displayName = 'Alert.Message';
 const AlertAction = React.forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
   return React.createElement(
-    index_js_1.Box,
+    index_js_1.ButtonBase,
     {
       as: !!props.href ? 'a' : 'button',
       className: (0, classnames_1.default)('iui-alert-link', className),
@@ -85,17 +121,15 @@ AlertCloseButton.displayName = 'Alert.CloseButton';
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
- * <Alert>
- *  <Alert.Message>This is an alert.</Alert.Message>
- * </Alert>
+ * <Alert>This is an alert.</Alert>
  * @example
- * <Alert type='informational'>
+ * <Alert.Wrapper type='informational'>
  *  <Alert.Icon />
  *  <Alert.Message>This is an informational alert.</Alert.Message>
  *  <Alert.CloseButton onClick={() => {}} />
- * </Alert>
+ * </Alert.Wrapper>
  * @example
- * <Alert type='positive'>
+ * <Alert.Wrapper type='positive'>
  *  <Alert.Icon>
  *    <SvgSmileyHappy />
  *  </Alert.Icon>
@@ -106,9 +140,13 @@ AlertCloseButton.displayName = 'Alert.CloseButton';
  *  <Alert.CloseButton onClick={() => {}}>
  *    <SvgCollapse />
  *  </Alert.CloseButton>
- * </Alert>
+ * </Alert.Wrapper>
  */
 exports.Alert = Object.assign(AlertComponent, {
+  /**
+   *  Alert wrapper subcomponent
+   */
+  Wrapper: AlertWrapper,
   /**
    * 	Alert icon subcomponent
    */

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { SoftBackgrounds } from '../utils/index.js';
+import type { AnyString, PolymorphicForwardRefComponent } from '../utils/index.js';
 export type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 type StatusTitles = {
     [key in Exclude<AvatarStatus, ''>]: string;
@@ -29,7 +30,7 @@ type AvatarProps = {
     /**
      * Color of the icon. You can use `getUserColor` function to generate color from user name or email. If not provided, default background color from CSS styling will be used (hsl(72, 51%, 56%) / olive green).
      */
-    backgroundColor?: string;
+    backgroundColor?: keyof typeof SoftBackgrounds | AnyString;
     /**
      * Translated status messages shown on hover.
      */

package/cjs/core/Avatar/Avatar.js

@@ -9,6 +9,17 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
+/**
+ * Helper function that returns one of the preset badge color values.
+ */
+const getBackground = (color) => {
+  if (!color) {
+    return '';
+  }
+  return (0, index_js_1.isSoftBackground)(color)
+    ? index_js_1.SoftBackgrounds[color]
+    : color;
+};
 exports.defaultStatusTitles = {
   away: 'Away',
   busy: 'Busy',
@@ -56,30 +67,21 @@ exports.Avatar = React.forwardRef((props, ref) => {
         { [`iui-${size}`]: size !== 'medium' },
         className,
       ),
+      'data-iui-status': status,
       title: title,
-      style: { backgroundColor, ...style },
+      style: { backgroundColor: getBackground(backgroundColor), ...style },
       ref: ref,
       ...rest,
     },
-    !image &&
-      React.createElement(
-        index_js_1.Box,
-        { as: 'abbr', className: 'iui-initials' },
-        abbreviation?.substring(0, 2),
-      ),
+    !image ? abbreviation?.substring(0, 2) : null,
     image,
-    React.createElement(index_js_1.Box, {
-      as: 'span',
-      className: 'iui-stroke',
-    }),
-    status &&
-      React.createElement(index_js_1.Box, {
-        as: 'span',
-        title: statusTitles[status],
-        className: (0, classnames_1.default)('iui-status', {
-          [`iui-${status}`]: !!status,
-        }),
-      }),
+    status
+      ? React.createElement(
+          index_js_1.VisuallyHidden,
+          null,
+          statusTitles[status],
+        )
+      : null,
   );
 });
 exports.default = exports.Avatar;

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -89,14 +89,9 @@ exports.AvatarGroup = React.forwardRef((props, ref) => {
               countIconProps?.className,
             ),
           },
-          React.createElement(
-            index_js_1.Box,
-            { as: 'abbr', className: 'iui-initials' },
-            childrenLength <= maxLength
-              ? `${childrenLength - maxIcons}`
-              : `${maxLength}+`,
-          ),
-          React.createElement(index_js_1.Box, { className: 'iui-stroke' }),
+          childrenLength <= maxLength
+            ? `${childrenLength - maxIcons}`
+            : `${maxLength}+`,
         ),
       ),
   );

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -9,6 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
+const react_1 = require('@floating-ui/react');
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.
@@ -60,42 +61,46 @@ exports.ButtonGroup = React.forwardRef((props, ref) => {
   );
   const refs = (0, index_js_1.useMergedRefs)(overflowRef, ref);
   return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        {
-          'iui-button-group': orientation === 'horizontal',
-          'iui-button-group-vertical': orientation === 'vertical',
-          'iui-button-group-overflow-x':
-            !!overflowButton && orientation === 'horizontal',
-        },
-        className,
-      ),
-      ref: refs,
-      ...rest,
-    },
-    (() => {
-      if (!(visibleCount < items.length)) {
-        return items;
-      }
-      const overflowStart =
-        overflowPlacement === 'start'
-          ? items.length - visibleCount
-          : visibleCount - 1;
-      return React.createElement(
-        React.Fragment,
-        null,
-        overflowButton &&
-          overflowPlacement === 'start' &&
-          React.createElement('div', null, overflowButton(overflowStart)),
-        overflowPlacement === 'start'
-          ? items.slice(overflowStart + 1)
-          : items.slice(0, Math.max(0, overflowStart)),
-        overflowButton &&
-          overflowPlacement === 'end' &&
-          React.createElement('div', null, overflowButton(overflowStart)),
-      );
-    })(),
+    react_1.FloatingDelayGroup,
+    { delay: { open: 50, close: 250 } },
+    React.createElement(
+      index_js_1.Box,
+      {
+        className: (0, classnames_1.default)(
+          {
+            'iui-button-group': orientation === 'horizontal',
+            'iui-button-group-vertical': orientation === 'vertical',
+            'iui-button-group-overflow-x':
+              !!overflowButton && orientation === 'horizontal',
+          },
+          className,
+        ),
+        ref: refs,
+        ...rest,
+      },
+      (() => {
+        if (!(visibleCount < items.length)) {
+          return items;
+        }
+        const overflowStart =
+          overflowPlacement === 'start'
+            ? items.length - visibleCount
+            : visibleCount - 1;
+        return React.createElement(
+          React.Fragment,
+          null,
+          overflowButton &&
+            overflowPlacement === 'start' &&
+            React.createElement('div', null, overflowButton(overflowStart)),
+          overflowPlacement === 'start'
+            ? items.slice(overflowStart + 1)
+            : items.slice(0, Math.max(0, overflowStart)),
+          overflowButton &&
+            overflowPlacement === 'end' &&
+            React.createElement('div', null, overflowButton(overflowStart)),
+        );
+      })(),
+    ),
   );
 });
 exports.default = exports.ButtonGroup;

package/cjs/core/Buttons/Button/Button.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { ButtonBase } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type ButtonProps = {
     /**
@@ -19,7 +20,19 @@ export type ButtonProps = {
      * Icon shown after the main button content.
      */
     endIcon?: JSX.Element;
-};
+    /**
+     * Passes props to the button label.
+     */
+    labelProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to the start icon.
+     */
+    startIconProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to the end icon.
+     */
+    endIconProps?: React.ComponentProps<'span'>;
+} & Pick<React.ComponentProps<typeof ButtonBase>, 'htmlDisabled'>;
 /**
  * Generic button component
  * @example

package/cjs/core/Buttons/Button/Button.js

@@ -23,36 +23,50 @@ exports.Button = React.forwardRef((props, ref) => {
     children,
     className,
     size,
-    style,
     styleType = 'default',
-    type = 'button',
     startIcon,
     endIcon,
+    labelProps,
+    startIconProps,
+    endIconProps,
     ...rest
   } = props;
   return React.createElement(
-    index_js_1.Box,
+    index_js_1.ButtonBase,
     {
-      as: 'button',
       ref: ref,
       className: (0, classnames_1.default)('iui-button', className),
       'data-iui-variant': styleType !== 'default' ? styleType : undefined,
       'data-iui-size': size,
-      style: style,
-      type: type,
       ...rest,
     },
     startIcon &&
       React.createElement(
         index_js_1.Box,
-        { as: 'span', className: 'iui-button-icon', 'aria-hidden': true },
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...startIconProps,
+          className: (0, classnames_1.default)(
+            'iui-button-icon',
+            startIconProps?.className,
+          ),
+        },
         startIcon,
       ),
-    children && React.createElement('span', null, children),
+    children && React.createElement('span', { ...labelProps }, children),
     endIcon &&
       React.createElement(
         index_js_1.Box,
-        { as: 'span', className: 'iui-button-icon', 'aria-hidden': true },
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...endIconProps,
+          className: (0, classnames_1.default)(
+            'iui-button-icon',
+            endIconProps?.className,
+          ),
+        },
         endIcon,
       ),
   );

package/cjs/core/Buttons/DropdownButton/DropdownButton.js

@@ -52,7 +52,7 @@ exports.DropdownButton = React.forwardRef((props, ref) => {
         setIsMenuOpen(false);
         dropdownMenuProps?.onHide?.(i);
       },
-      style: { minWidth: menuWidth, ...dropdownMenuProps?.style },
+      style: { minInlineSize: menuWidth, ...dropdownMenuProps?.style },
     },
     React.createElement(
       index_js_1.Button,

package/cjs/core/Buttons/IconButton/IconButton.d.ts

@@ -11,7 +11,11 @@ export type IconButtonProps = {
      * Name of the button, shown in a tooltip and exposed to assistive technologies.
      */
     label?: React.ReactNode;
-} & Omit<ButtonProps, 'startIcon' | 'endIcon'>;
+    /**
+     * Passes props to IconButton icon.
+     */
+    iconProps?: React.ComponentProps<'span'>;
+} & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps'>;
 /**
  * Icon button
  * @example

package/cjs/core/Buttons/IconButton/IconButton.js

@@ -9,6 +9,7 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../../utils/index.js');
+const Tooltip_js_1 = require('../../Tooltip/Tooltip.js');
 /**
  * Icon button
  * @example
@@ -22,55 +23,43 @@ exports.IconButton = React.forwardRef((props, ref) => {
     children,
     styleType = 'default',
     size,
-    type = 'button',
     className,
     label,
+    iconProps,
     ...rest
   } = props;
-  return React.createElement(
-    IconButtonTooltip,
-    { label: label },
+  const button = React.createElement(
+    index_js_1.ButtonBase,
+    {
+      ref: ref,
+      className: (0, classnames_1.default)('iui-button', className),
+      'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+      'data-iui-size': size,
+      'data-iui-active': isActive,
+      'aria-pressed': isActive,
+      ...rest,
+    },
     React.createElement(
       index_js_1.Box,
       {
-        as: 'button',
-        ref: ref,
-        className: (0, classnames_1.default)('iui-button', className),
-        'data-iui-variant': styleType !== 'default' ? styleType : undefined,
-        'data-iui-size': size,
-        'data-iui-active': isActive,
-        'aria-pressed': isActive,
-        type: type,
-        ...rest,
+        as: 'span',
+        'aria-hidden': true,
+        ...iconProps,
+        className: (0, classnames_1.default)(
+          'iui-button-icon',
+          iconProps?.className,
+        ),
       },
-      React.createElement(
-        index_js_1.Box,
-        { as: 'span', className: 'iui-button-icon', 'aria-hidden': true },
-        children,
-      ),
-      label
-        ? React.createElement(index_js_1.VisuallyHidden, null, label)
-        : null,
+      children,
     ),
+    label ? React.createElement(index_js_1.VisuallyHidden, null, label) : null,
   );
-});
-const IconButtonTooltip = (props) => {
-  const { label, children } = props;
   return label
     ? React.createElement(
-        index_js_1.Popover,
-        {
-          interactive: false,
-          offset: [0, 4],
-          aria: { content: null },
-          content: React.createElement(
-            index_js_1.Box,
-            { 'aria-hidden': 'true', className: 'iui-tooltip' },
-            label,
-          ),
-        },
-        children,
+        Tooltip_js_1.Tooltip,
+        { content: label, ariaStrategy: 'none' },
+        button,
       )
-    : children;
-};
+    : button;
+});
 exports.default = exports.IconButton;