@itwin/itwinui-react 3.13.4 → 3.14.0

package/cjs/core/Table/filters/TextFilter/TextFilter.js

@@ -22,21 +22,18 @@ const TextFilter = (props) => {
   _react.useEffect(() => {
     if (inputRef.current) inputRef.current.focus();
   }, []);
-  let onKeyDown = (event) => {
-    if (event.altKey) return;
-    if ('Enter' === event.key) setFilter(text);
-  };
   return _react.createElement(
     _BaseFilter.BaseFilter,
-    null,
+    {
+      onSubmit: () => setFilter(text),
+    },
     _react.createElement(_Input.Input, {
       ref: inputRef,
       value: text,
       onChange: (e) => setText(e.target.value),
-      onKeyDown: onKeyDown,
+      required: true,
     }),
     _react.createElement(_FilterButtonBar.FilterButtonBar, {
-      setFilter: () => setFilter(text),
       clearFilter: clearFilter,
       translatedLabels: translatedLabels,
     }),

package/cjs/core/Table/filters/index.d.ts

@@ -1,5 +1,4 @@
 export { BaseFilter } from './BaseFilter.js';
-export type { BaseFilterProps } from './BaseFilter.js';
 export { tableFilters } from './tableFilters.js';
 export type { DateRangeFilterOptions } from './tableFilters.js';
 export type { TableFilterProps, TableFilterValue } from './types.js';

package/cjs/core/Table/index.d.ts

@@ -1,7 +1,7 @@
 export { Table } from './Table.js';
 export type { TablePaginatorRendererProps } from './Table.js';
 export { BaseFilter, FilterButtonBar, tableFilters } from './filters/index.js';
-export type { BaseFilterProps, DateRangeFilterOptions, FilterButtonBarProps, FilterButtonBarTranslation, TableFilterProps, TableFilterValue, } from './filters/index.js';
+export type { DateRangeFilterOptions, FilterButtonBarProps, FilterButtonBarTranslation, TableFilterProps, TableFilterValue, } from './filters/index.js';
 export { DefaultCell, EditableCell } from './cells/index.js';
 export type { DefaultCellProps, EditableCellProps } from './cells/index.js';
 export { TablePaginator } from './TablePaginator.js';

package/cjs/core/ThemeProvider/ThemeProvider.d.ts

@@ -38,10 +38,6 @@ type RootProps = {
          */
         applyBackground?: boolean;
     };
-    /**
-     * This will be used to determine if background will be applied.
-     */
-    shouldApplyBackground?: boolean;
 };
 type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
     themeOptions?: RootProps['themeOptions'];

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -61,14 +61,16 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
         },
         _react.createElement(
           _Toaster.ToastProvider,
-          null,
+          {
+            inherit: 'inherit' === themeProp && !portalContainerProp,
+          },
           includeCss && rootElement
             ? _react.createElement(FallbackStyles, {
                 root: rootElement,
               })
             : null,
           _react.createElement(
-            Root,
+            MainRoot,
             {
               theme: theme,
               themeOptions: themeOptions,
@@ -81,6 +83,8 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
             },
             children,
             _react.createElement(PortalContainer, {
+              theme: theme,
+              themeOptions: themeOptions,
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
               isInheritingTheme: 'inherit' === themeProp,
@@ -91,15 +95,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-const Root = _react.forwardRef((props, forwardedRef) => {
-  let { theme, children, themeOptions, className, ...rest } = props;
-  let prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
-  let prefersHighContrast = (0, _index.useMediaQuery)(
-    '(prefers-contrast: more)',
-  );
-  let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
-  let shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
-  let shouldApplyBackground = themeOptions?.applyBackground;
+const MainRoot = _react.forwardRef((props, forwardedRef) => {
   let [ownerDocument, setOwnerDocument] = (0, _index.useScopedAtom)(
     ownerDocumentAtom,
   );
@@ -110,6 +106,20 @@ const Root = _react.forwardRef((props, forwardedRef) => {
     },
     [ownerDocument, setOwnerDocument],
   );
+  return _react.createElement(Root, {
+    ...props,
+    ref: (0, _index.useMergedRefs)(findOwnerDocumentFromRef, forwardedRef),
+  });
+});
+const Root = _react.forwardRef((props, forwardedRef) => {
+  let { theme, children, themeOptions, className, ...rest } = props;
+  let prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
+  let prefersHighContrast = (0, _index.useMediaQuery)(
+    '(prefers-contrast: more)',
+  );
+  let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
+  let shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
+  let shouldApplyBackground = themeOptions?.applyBackground;
   return _react.createElement(
     _index.Box,
     {
@@ -122,7 +132,7 @@ const Root = _react.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      ref: (0, _index.useMergedRefs)(forwardedRef, findOwnerDocumentFromRef),
+      ref: forwardedRef,
       ...rest,
     },
     children,
@@ -165,54 +175,61 @@ const useParentThemeAndContext = (rootElement) => {
   };
 };
 const PortalContainer = _react.memo(
-  ({ portalContainerProp, portalContainerFromParent, isInheritingTheme }) => {
+  ({
+    portalContainerProp,
+    portalContainerFromParent,
+    isInheritingTheme,
+    theme,
+    themeOptions,
+  }) => {
     let [ownerDocument] = (0, _index.useScopedAtom)(ownerDocumentAtom);
-    let setPortalContainer = (0, _index.useScopedSetAtom)(
+    let [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(
       _index.portalContainerAtom,
     );
+    let shouldSetupPortalContainer =
+      !portalContainerProp &&
+      (!isInheritingTheme ||
+        !portalContainerFromParent ||
+        (!!ownerDocument &&
+          portalContainerFromParent.ownerDocument !== ownerDocument));
     let id = (0, _index.useId)();
+    _react.useEffect(() => {
+      if (shouldSetupPortalContainer) return;
+      let portalTarget = portalContainerProp || portalContainerFromParent;
+      if (portalTarget && portalTarget !== portalContainer)
+        setPortalContainer(portalTarget);
+    });
     let isHydrated = 'hydrated' === (0, _index.useHydration)();
     if (!isHydrated) return null;
-    if (portalContainerProp)
-      return _react.createElement(PortaledToaster, {
-        target: portalContainerProp,
-      });
-    if (
-      !isInheritingTheme ||
-      !portalContainerFromParent ||
-      (!!ownerDocument &&
-        portalContainerFromParent.ownerDocument !== ownerDocument)
-    )
-      return _react.createElement(
-        'div',
-        {
-          style: {
-            display: 'contents',
+    if (shouldSetupPortalContainer && ownerDocument)
+      return _reactdom.createPortal(
+        _react.createElement(
+          Root,
+          {
+            theme: theme,
+            themeOptions: {
+              ...themeOptions,
+              applyBackground: false,
+            },
+            'data-iui-portal': true,
+            style: {
+              display: 'contents',
+            },
+            ref: setPortalContainer,
+            id: id,
           },
-          ref: setPortalContainer,
-          id: id,
-        },
+          _react.createElement(_Toaster.Toaster, null),
+        ),
+        ownerDocument.body,
+      );
+    if (portalContainerProp)
+      return _reactdom.createPortal(
         _react.createElement(_Toaster.Toaster, null),
+        portalContainerProp,
       );
-    return _react.createElement(PortaledToaster, {
-      target: portalContainerFromParent,
-    });
+    return null;
   },
 );
-const PortaledToaster = ({ target }) => {
-  let [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(
-    _index.portalContainerAtom,
-  );
-  _react.useEffect(() => {
-    if (target && target !== portalContainer) setPortalContainer(target);
-  });
-  return target
-    ? _reactdom.createPortal(
-        _react.createElement(_Toaster.Toaster, null),
-        target,
-      )
-    : null;
-};
 const FallbackStyles = ({ root }) => {
   (0, _index.useLayoutEffect)(() => {
     if (

package/cjs/core/Tile/Tile.d.ts

@@ -207,7 +207,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      *    <Tile.BadgeContainer/>
      * </Tile.ThumbnailArea>
      */
-    ThumbnailArea: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    ThumbnailArea: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Thumbnail image url, a custom component or an svg for thumbnail avatar.
      * @example
@@ -234,26 +234,27 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      * `QuickAction` subcomponent shown on top left of the tile.
      * Recommended to use an invisible `IconButton`.
      */
-    QuickAction: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    QuickAction: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * `TypeIndicator` subcomponent shown on top left of the tile.
      * Recommended to use an invisible `IconButton`.
      */
-    TypeIndicator: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    TypeIndicator: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
      */
-    BadgeContainer: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    BadgeContainer: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
      */
     IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "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"> & {
         as?: "button" | undefined;
     }, "ref">>;
@@ -294,12 +295,12 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      *  </Tile.ContentArea>
      * </Tile.Wrapper>
      */
-    ContentArea: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    ContentArea: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Description text of the tile.
      * Gets truncated if it can't fit in the tile.
      */
-    Description: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Description: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Metadata section located below description.
      * @example
@@ -315,7 +316,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      *  </>}
      * </Tile.Metadata>
      */
-    Metadata: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Metadata: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Dropdown menu containing `MenuItem`s.
      */
@@ -323,6 +324,6 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
     /**
      * Upto two buttons shown at the bottom of the tile.
      */
-    Buttons: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Buttons: PolymorphicForwardRefComponent<"div", {}>;
 };
 export {};

package/cjs/core/Tile/Tile.js

@@ -83,7 +83,7 @@ const TileAction = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-const TileThumbnailArea = (0, _index.polymorphic)('iui-tile-thumbnail');
+const TileThumbnailArea = _index.polymorphic.div('iui-tile-thumbnail');
 const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
   let { className, url, children, ...rest } = props;
   if (url)
@@ -108,10 +108,10 @@ const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-const TileQuickAction = (0, _index.polymorphic)(
+const TileQuickAction = _index.polymorphic.div(
   'iui-tile-thumbnail-quick-action',
 );
-const TileTypeIndicator = (0, _index.polymorphic)(
+const TileTypeIndicator = _index.polymorphic.div(
   'iui-tile-thumbnail-type-indicator',
 );
 const TileIconButton = _react.forwardRef((props, forwardedRef) => {
@@ -131,7 +131,7 @@ const TileIconButton = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-const TileBadgeContainer = (0, _index.polymorphic)(
+const TileBadgeContainer = _index.polymorphic.div(
   'iui-tile-thumbnail-badge-container',
 );
 const TileName = _react.forwardRef((props, forwardedRef) => {
@@ -187,9 +187,9 @@ const TileNameIcon = _react.forwardRef((props, forwardedRef) => {
     : null;
 });
 const TileNameLabel = _index.polymorphic.span('iui-tile-name-label');
-const TileContentArea = (0, _index.polymorphic)('iui-tile-content');
-const TileDescription = (0, _index.polymorphic)('iui-tile-description');
-const TileMetadata = (0, _index.polymorphic)('iui-tile-metadata');
+const TileContentArea = _index.polymorphic.div('iui-tile-content');
+const TileDescription = _index.polymorphic.div('iui-tile-description');
+const TileMetadata = _index.polymorphic.div('iui-tile-metadata');
 const TileMoreOptions = _react.forwardRef((props, forwardedRef) => {
   let { className, children = [], buttonProps, ...rest } = props;
   let [isMenuVisible, setIsMenuVisible] = _react.useState(false);
@@ -233,7 +233,7 @@ const TileMoreOptions = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-const TileButtons = (0, _index.polymorphic)('iui-tile-buttons');
+const TileButtons = _index.polymorphic.div('iui-tile-buttons');
 const TileComponent = _react.forwardRef((props, forwardedRef) => {
   let {
     name,

package/cjs/core/Toast/Toaster.d.ts

@@ -35,9 +35,10 @@ export declare const useToaster: () => {
     setSettings: (settings: Partial<ToasterSettings>) => void;
 };
 export declare const Toaster: () => React.JSX.Element;
-export declare const ToastProvider: ({ children }: {
+export declare const ToastProvider: ({ children, inherit, }: {
     children: React.ReactNode;
-}) => React.JSX.Element;
+    inherit?: boolean;
+}) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 export declare const ToasterStateContext: React.Context<ToasterState | undefined>;
 type ToasterState = {
     toasts: ToastProps[];

package/cjs/core/Toast/Toaster.js

@@ -88,7 +88,7 @@ const Toaster = () => {
     ),
   );
 };
-const ToastProvider = ({ children }) => {
+const ToastProvider = ({ children, inherit = false }) => {
   let [toasterState, dispatch] = _react.useReducer(toastReducer, {
     toasts: [],
     settings: {
@@ -96,6 +96,7 @@ const ToastProvider = ({ children }) => {
       placement: 'top',
     },
   });
+  if (_react.useContext(ToasterStateContext) && inherit) return children;
   return _react.createElement(
     ToasterDispatchContext.Provider,
     {

package/cjs/core/Tooltip/Tooltip.js

@@ -49,6 +49,7 @@ const useTooltip = (options = {}) => {
     placement,
     open,
     onOpenChange,
+    strategy: 'fixed',
     whileElementsMounted: _react.useMemo(
       () =>
         open
@@ -62,12 +63,27 @@ const useTooltip = (options = {}) => {
           void 0 !== middleware.offset
             ? (0, _react1.offset)(middleware.offset)
             : (0, _react1.offset)(4),
-          middleware.flip && (0, _react1.flip)(),
-          middleware.shift && (0, _react1.shift)(),
-          middleware.size && (0, _react1.size)(),
-          middleware.autoPlacement && (0, _react1.autoPlacement)(),
+          middleware.flip &&
+            (0, _react1.flip)({
+              padding: 4,
+            }),
+          middleware.shift &&
+            (0, _react1.shift)({
+              padding: 4,
+            }),
+          middleware.size &&
+            (0, _react1.size)({
+              padding: 4,
+            }),
+          middleware.autoPlacement &&
+            (0, _react1.autoPlacement)({
+              padding: 4,
+            }),
           middleware.inline && (0, _react1.inline)(),
-          middleware.hide && (0, _react1.hide)(),
+          middleware.hide &&
+            (0, _react1.hide)({
+              padding: 4,
+            }),
         ].filter(Boolean),
       [middleware],
     ),
@@ -90,8 +106,7 @@ const useTooltip = (options = {}) => {
           : {},
     [ariaStrategy, id],
   );
-  let { delay } = (0, _react1.useDelayGroupContext)();
-  (0, _react1.useDelayGroup)(floating.context, {
+  let { delay } = (0, _react1.useDelayGroup)(floating.context, {
     id: (0, _index.useId)(),
   });
   let interactions = (0, _react1.useInteractions)([

package/cjs/core/TransferList/TransferList.d.ts

@@ -30,7 +30,7 @@ type TransferListListboxLabelOwnProps = {
  *   </TransferList.ListboxWrapper>
  * </TransferList>
  */
-export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}> & {
+export declare const TransferList: PolymorphicForwardRefComponent<"div", {}> & {
     /**
      * 	TransferList listbox wrapper subcomponent
      */
@@ -38,10 +38,10 @@ export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.Intr
     /**
      * 	TransferList listbox subcomponent
      */
-    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-        ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     }, "as"> & {
-        as?: "ul" | undefined;
+        as?: "div" | undefined;
     }>;
     /**
      * 	TransferList item subcomponent
@@ -54,7 +54,7 @@ export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.Intr
     /**
      * 	TransferList toolbar subcomponent
      */
-    Toolbar: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Toolbar: PolymorphicForwardRefComponent<"div", {}>;
 };
 export declare const TransferListContext: React.Context<{
     /**

package/cjs/core/TransferList/TransferList.js

@@ -25,7 +25,7 @@ const _index = require('../../utils/index.js');
 const _List = require('../List/List.js');
 const _ListItem = require('../List/ListItem.js');
 const _Label = require('../Label/Label.js');
-const TransferListComponent = (0, _index.polymorphic)(
+const TransferListComponent = _index.polymorphic.div(
   'iui-transfer-list-wrapper',
 );
 const TransferListListboxWrapper = _react.forwardRef((props, ref) => {
@@ -169,7 +169,7 @@ const TransferListListboxLabel = _react.forwardRef((props, ref) => {
     children,
   );
 });
-const TransferListToolbar = (0, _index.polymorphic)(
+const TransferListToolbar = _index.polymorphic.div(
   'iui-transfer-list-toolbar',
   {
     role: 'toolbar',

package/cjs/styles.js

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

package/cjs/utils/functions/polymorphic.d.ts

@@ -3,8 +3,8 @@ declare const _base: <As extends keyof JSX.IntrinsicElements = "div">(defaultEle
 /**
  * Utility to create a type-safe polymorphic component with a simple class.
  *
- * Can be called directly or as a property of the `polymorphic` object.
- * In both cases, returns a component that:
+ * Should be called as a property of the `polymorphic` object.
+ * Returns a component that:
  * - uses CSS-modules scoped classes
  * - supports `as` prop with default element
  * - forwards ref and spreads rest props
@@ -12,14 +12,10 @@ declare const _base: <As extends keyof JSX.IntrinsicElements = "div">(defaultEle
  * - adds tabIndex to interactive elements (Safari workaround)
  *
  * @example
- * const MyPolyDiv = polymorphic('my-poly-div');
- * <MyPolyDiv>...</MyPolyDiv>;
- *
- * @example
  * const MyPolyButton = polymorphic.button('my-poly-button', { type: 'button' });
  * <MyPolyButton as='a' href='#'>...</MyPolyButton>;
  *
  * @private
  */
-export declare const polymorphic: ReturnType<typeof _base> & { [key in keyof JSX.IntrinsicElements]: ReturnType<typeof _base<key>>; };
+export declare const polymorphic: { [key in keyof JSX.IntrinsicElements]: ReturnType<typeof _base<key>>; };
 export {};

package/cjs/utils/functions/polymorphic.js

@@ -40,12 +40,15 @@ const _base = (defaultElement) => (className, attrs) => {
   });
   return Comp;
 };
-const polymorphic = new Proxy(_base('div'), {
-  get: (target, prop) => {
-    if ('string' == typeof prop) return _base(prop);
-    return Reflect.get(target, prop);
+const polymorphic = new Proxy(
+  {},
+  {
+    get: (target, prop) => {
+      if ('string' == typeof prop) return _base(prop);
+      return Reflect.get(target, prop);
+    },
   },
-});
+);
 const getDisplayNameFromClass = (str) => {
   let camel = str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
   return camel.substring(3);

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

@@ -21,6 +21,10 @@ export type IconButtonProps = {
      * Passes props to IconButton icon.
      */
     iconProps?: React.ComponentProps<'span'>;
+    /**
+     * @deprecated Use `label` instead.
+     */
+    title?: string;
 } & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps' | 'loading'>;
 /**
  * Icon button

package/esm/core/Buttons/IconButton.js

@@ -1,10 +1,11 @@
 import cx from 'classnames';
 import * as React from 'react';
-import { Box, ButtonBase } from '../../utils/index.js';
+import { Box, ButtonBase, createWarningLogger } from '../../utils/index.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { ButtonGroupContext } from '../ButtonGroup/ButtonGroup.js';
 import { PopoverOpenContext } from '../Popover/Popover.js';
+let logWarning = createWarningLogger();
 export const IconButton = React.forwardRef((props, ref) => {
   let {
     isActive,
@@ -12,7 +13,8 @@ export const IconButton = React.forwardRef((props, ref) => {
     styleType = 'default',
     size,
     className,
-    label,
+    title,
+    label = title,
     iconProps,
     labelProps,
     ...rest

package/esm/core/Carousel/Carousel.d.ts

@@ -42,21 +42,23 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"div", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "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"> & {
             as?: "button" | undefined;
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "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"> & {
             as?: "button" | undefined;
         }>;

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

@@ -9,21 +9,23 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "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"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "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"> & {
         as?: "button" | undefined;
     }>;

package/esm/core/ComboBox/ComboBox.js

@@ -314,6 +314,11 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
     visible: isOpen,
     onVisibleChange: (open) => (open ? show() : hide()),
     matchWidth: true,
+    middleware: {
+      size: {
+        maxHeight: 'var(--iui-menu-max-height)',
+      },
+    },
     closeOnOutsideClick: true,
     interactions: {
       click: false,