@itwin/itwinui-react 3.0.0-dev.3 → 3.0.0-dev.4

package/cjs/core/Tile/Tile.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tile = exports.TileAction = void 0;
+exports.Tile = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -38,51 +38,21 @@ const index_js_2 = require("../DropdownMenu/index.js");
 const index_js_3 = require("../Buttons/index.js");
 const index_js_4 = require("../ProgressIndicators/index.js");
 const TileContext = React.createContext(undefined);
-/**
- * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
- * Renders `a` element by default.
- * @example
- * <Tile
- *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
- * />
- */
-exports.TileAction = React.forwardRef((props, forwardedRef) => {
-    const tileContext = (0, index_js_1.useSafeContext)(TileContext);
-    React.useEffect(() => {
-        if (!(0, index_js_1.supportsHas)()) {
-            tileContext.setActionable(true);
-        }
-    }, [tileContext]);
-    return React.createElement(index_js_1.LinkAction, { ref: forwardedRef, ...props });
-});
-/**
- * Tile component that displays content and actions in a card-like format.
- * @example
- * <Tile
- *  name='Tile name'
- *  description='Tile description that takes upto 3 lines'
- *  metadata={<TagContainer><Tag variant='basic'>Tag 1</Tag></TagContainer>}
- *  thumbnail='/url/to/image.jpg'
- *  badge={<Badge backgroundColor='blue'>Badge label</Badge>}
- *  buttons={[<Button>Button 1</Button>, <Button>Button 2</Button>]}
- *  moreOptions={[<MenuItem>Item 1</MenuItem>, <MenuItem>Item 2</MenuItem>]}
- *  leftIcon={<IconButton><SvgInfo /></IconButton>}
- *  rightIcon={<IconButton><SvgStar /></IconButton>}
- *  isSelected={true}
- *  isNew={false}
- * />
- */
-exports.Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
-    const { className, name, description, metadata, thumbnail, buttons, leftIcon, rightIcon, badge, isNew, isSelected, moreOptions, variant = 'default', children, isActionable: isActionableProp, status, isLoading = false, isDisabled = false, onClick, ...rest } = props;
-    const [isMenuVisible, setIsMenuVisible] = React.useState(false);
-    const showMenu = React.useCallback(() => setIsMenuVisible(true), []);
-    const hideMenu = React.useCallback(() => setIsMenuVisible(false), []);
-    const [localActionable, setLocalActionable] = React.useState(isActionableProp);
-    const isActionable = isActionableProp ?? localActionable;
-    const tileName = (React.createElement(index_js_1.Box, { className: 'iui-tile-name' },
-        React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
-        React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tile-name-label' }, isActionable && onClick ? (React.createElement(index_js_1.LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
-    return (React.createElement(TileContext.Provider, { value: { setActionable: setLocalActionable } },
+TileContext.displayName = 'TileContext';
+const TileComponent = React.forwardRef((props, forwardedRef) => {
+    const { className, status, variant, isNew, isSelected, isLoading, isDisabled, ...rest } = props;
+    const [localActionable, setLocalActionable] = React.useState(false);
+    const isActionable = localActionable;
+    return (React.createElement(TileContext.Provider, { value: {
+            status,
+            variant,
+            isNew,
+            isSelected,
+            isLoading,
+            isActionable,
+            isDisabled,
+            setActionable: setLocalActionable,
+        } },
         React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile', {
                 'iui-folder': variant === 'folder',
                 'iui-new': isNew,
@@ -90,65 +60,269 @@ exports.Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
                 'iui-actionable': isActionable,
                 [`iui-${status}`]: !!status,
                 'iui-loading': isLoading,
-            }, className), "aria-disabled": isDisabled, ref: forwardedRef, ...rest },
-            variant !== 'folder' ? tileName : null,
-            thumbnail && (React.createElement(index_js_1.Box, { className: 'iui-tile-thumbnail' },
-                typeof thumbnail === 'string' ? (React.createElement(index_js_1.Box, { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
-                    className: 'iui-tile-thumbnail-picture',
-                })) : (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-thumbnail-icon' }, thumbnail)),
-                leftIcon &&
-                    React.cloneElement(leftIcon, {
-                        className: 'iui-tile-thumbnail-type-indicator',
-                        'data-iui-size': 'small',
-                    }),
-                rightIcon &&
-                    React.cloneElement(rightIcon, {
-                        className: 'iui-tile-thumbnail-quick-action',
-                        'data-iui-size': 'small',
-                    }),
-                badge && (React.createElement(index_js_1.Box, { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
-            React.createElement(index_js_1.Box, { className: 'iui-tile-content' },
-                variant === 'folder' ? tileName : null,
-                description != undefined && (React.createElement(index_js_1.Box, { className: 'iui-tile-description' }, description)),
-                metadata != undefined && (React.createElement(index_js_1.Box, { className: 'iui-tile-metadata' }, metadata)),
-                moreOptions && (React.createElement(index_js_2.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => React.cloneElement(option, {
-                        onClick: (value) => {
-                            close();
-                            option.props.onClick?.(value);
-                        },
-                    })) },
-                    React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-more-options', {
-                            'iui-visible': isMenuVisible,
-                        }) },
-                        React.createElement(index_js_3.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
-                            React.createElement(index_js_1.SvgMore, null))))),
-                children),
-            buttons && React.createElement(index_js_1.Box, { className: 'iui-tile-buttons' }, buttons))));
-}), {
-    /**
-     * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
-     * Renders `a` element by default.
-     * @example
-     * <Tile
-     *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
-     * />
-     */
-    Action: exports.TileAction,
+            }, className), "aria-disabled": isDisabled, ref: forwardedRef, ...rest })));
+});
+TileComponent.displayName = 'Tile';
+// ----------------------------------------------------------------------------
+// Tile.Action component
+const TileAction = React.forwardRef((props, forwardedRef) => {
+    const { onClick, children, href, ...rest } = props;
+    const { setActionable, isDisabled } = (0, index_js_1.useSafeContext)(TileContext);
+    React.useEffect(() => {
+        if (!(0, index_js_1.supportsHas)()) {
+            setActionable(true);
+        }
+    }, [setActionable]);
+    return (React.createElement(index_js_1.LinkAction, { as: (!!props.href ? 'a' : 'button'), href: href, onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled, ref: forwardedRef, ...rest }, children));
+});
+TileAction.displayName = 'Tile.Action';
+// ----------------------------------------------------------------------------
+// Tile.ThumbnailArea component
+const TileThumbnailArea = (0, index_js_1.polymorphic)('iui-tile-thumbnail');
+TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
+const TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
+    const { className, url, children, ...rest } = props;
+    if (url) {
+        return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-thumbnail-picture', className), style: {
+                backgroundImage: typeof url === 'string' ? `url(${url})` : undefined,
+            }, ref: forwardedRef, ...rest }));
+    }
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-thumbnail-icon', className), ref: forwardedRef, ...rest }, children));
+});
+TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
+// ----------------------------------------------------------------------------
+// Tile.QuickAction component
+const TileQuickAction = (0, index_js_1.polymorphic)('iui-tile-thumbnail-quick-action');
+TileQuickAction.displayName = 'Tile.QuickAction';
+// ----------------------------------------------------------------------------
+// Tile.TypeIndicator component
+const TileTypeIndicator = (0, index_js_1.polymorphic)('iui-tile-thumbnail-type-indicator');
+TileTypeIndicator.displayName = 'Tile.TypeIndicator';
+// ----------------------------------------------------------------------------
+// Tile.IconButton component
+const TileIconButton = React.forwardRef((props, forwardedRef) => {
+    const { className, children, ...rest } = props;
+    return (React.createElement(index_js_3.IconButton, { className: className, styleType: 'borderless', size: 'small', ref: forwardedRef, ...rest }, children));
+});
+TileIconButton.displayName = 'Tile.IconButton';
+// ----------------------------------------------------------------------------
+// Tile.BadgeContainer component
+const TileBadgeContainer = (0, index_js_1.polymorphic)('iui-tile-thumbnail-badge-container');
+TileBadgeContainer.displayName = 'Tile.BadgeContainer';
+const TileName = React.forwardRef((props, forwardedRef) => {
+    const { className, children, name, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-name', className), ref: forwardedRef, ...rest }, children ?? name));
 });
-const TitleIcon = ({ isLoading = false, isSelected = false, isNew = false, status, }) => {
+TileBadgeContainer.displayName = 'Tile.Name';
+// ----------------------------------------------------------------------------
+// Tile.NameIcon component
+const TileNameIcon = React.forwardRef((props, forwardedRef) => {
+    const { children, className, ...rest } = props;
+    const { status, isLoading, isSelected, isNew } = (0, index_js_1.useSafeContext)(TileContext);
     const StatusIcon = !!status && index_js_1.StatusIconMap[status];
+    let icon;
+    if (StatusIcon) {
+        icon = React.createElement(StatusIcon, { "aria-hidden": true });
+    }
     if (isLoading) {
-        return (React.createElement(index_js_4.ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
+        icon = React.createElement(index_js_4.ProgressRadial, { size: 'x-small', "aria-hidden": true, indeterminate: true });
     }
     if (isSelected) {
-        return React.createElement(index_js_1.SvgCheckmark, { className: 'iui-tile-status-icon', "aria-hidden": true });
+        icon = React.createElement(index_js_1.SvgCheckmark, { "aria-hidden": true });
     }
     if (isNew) {
-        return React.createElement(index_js_1.SvgNew, { className: 'iui-tile-status-icon', "aria-hidden": true });
-    }
-    if (StatusIcon) {
-        return React.createElement(StatusIcon, { className: 'iui-tile-status-icon' });
+        icon = React.createElement(index_js_1.SvgNew, { "aria-hidden": true });
     }
-    return null;
-};
+    return children || icon ? (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-status-icon', className), ref: forwardedRef, ...rest }, children ?? icon)) : null;
+});
+TileNameIcon.displayName = 'Tile.NameIcon';
+// ----------------------------------------------------------------------------
+// Tile.NameLabel component
+const TileNameLabel = index_js_1.polymorphic.span('iui-tile-name-label');
+TileNameLabel.displayName = 'Tile.NameLabel';
+// ----------------------------------------------------------------------------
+// Tile.ContentArea component
+const TileContentArea = (0, index_js_1.polymorphic)('iui-tile-content');
+TileContentArea.displayName = 'Tile.ContentArea';
+// ----------------------------------------------------------------------------
+// Tile.Description component
+const TileDescription = (0, index_js_1.polymorphic)('iui-tile-description');
+TileDescription.displayName = 'Tile.Description';
+// ----------------------------------------------------------------------------
+// Tile.Metadata component
+const TileMetadata = (0, index_js_1.polymorphic)('iui-tile-metadata');
+TileMetadata.displayName = 'Tile.Metadata';
+const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
+    const { className, children = [], buttonProps, ...rest } = props;
+    const [isMenuVisible, setIsMenuVisible] = React.useState(false);
+    return (React.createElement(index_js_2.DropdownMenu, { onShow: React.useCallback(() => setIsMenuVisible(true), []), onHide: React.useCallback(() => setIsMenuVisible(false), []), menuItems: (close) => children?.map((option) => React.cloneElement(option, {
+            onClick: (value) => {
+                close();
+                option.props.onClick?.(value);
+            },
+        })) },
+        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-more-options', {
+                'iui-visible': isMenuVisible,
+            }, className), ref: forwardedRef, ...rest },
+            React.createElement(index_js_3.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options', ...buttonProps },
+                React.createElement(index_js_1.SvgMore, null)))));
+});
+TileMoreOptions.displayName = 'Tile.MoreOptions';
+// ----------------------------------------------------------------------------
+// Tile.Buttons component
+const TileButtons = (0, index_js_1.polymorphic)('iui-tile-buttons');
+TileButtons.displayName = 'Tile.Buttons';
+/**
+ * Tile with customizable Thumbnail, Name, Content and Buttons subcomponents
+ * @example
+ * <Tile>
+ *    <Tile.ThumbnailArea>
+ *      <Tile.ThumbnailPicture/>
+ *      <Tile.Badge/>
+ *      <Tile.TypeIndicator/>
+ *      <Tile.QuickAction/>
+ *    </Tile.ThumbnailArea>
+ *    <Tile.Name>
+ *      <Tile.NameIcon/>
+ *      <Tile.NameLabel/>
+ *    <Tile.Name/>
+ *    <Tile.ContentArea>
+ *      <Tile.Description />
+ *      <Tile.Metadata/>
+ *      <Tile.MoreOptions/>
+ *    </Tile.ContentArea>
+ *    <Tile.Buttons/>
+ * </Tile>
+ */
+exports.Tile = Object.assign(TileComponent, {
+    /**
+     * ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer`
+     * @example
+     * <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture/>
+     *    // or
+     *    <Tile.ThumbnailAvatar/>
+     *    <Tile.QuickAction/>
+     *    <Tile.TypeIndicator/>
+     *    <Tile.BadgeContainer/>
+     * </Tile.ThumbnailArea>
+     */
+    ThumbnailArea: TileThumbnailArea,
+    /**
+     * Thumbnail image url, a custom component or an svg for thumbnail avatar.
+     * @example
+     * <Tile>
+     *  // ...
+     *  <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture url = '/url/to/image.jpg'/>
+     *  </Tile.ThumbnailArea>
+     * </Tile>
+     * or
+     * <Tile>
+     *  // ...
+     *  <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture>
+     *      {<Avatar image={<img src='icon.png' />} />}
+     *      // or
+     *      {<SvgImodelHollow />}
+     *    </Tile.ThumbnailPicture>
+     *   </Tile.ThumbnailArea>
+     * /Tile>
+     */
+    ThumbnailPicture: TileThumbnailPicture,
+    /**
+     * `QuickAction` subcomponent shown on top left of the tile.
+     * Recommended to use an invisible `IconButton`.
+     */
+    QuickAction: TileQuickAction,
+    /**
+     * `TypeIndicator` subcomponent shown on top left of the tile.
+     * Recommended to use an invisible `IconButton`.
+     */
+    TypeIndicator: TileTypeIndicator,
+    /**
+     * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
+     */
+    BadgeContainer: TileBadgeContainer,
+    /**
+     * `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
+     */
+    IconButton: TileIconButton,
+    /**
+     * `Name` subcomponent under thumbnail or top of the Tile if no thumbnail present.
+     */
+    Name: TileName,
+    /**
+     * `NameIcon` next to name of the tile. Goes under <Tile.Name>
+     * @example
+     * <Tile>
+     *  <Tile.Name>
+     *    <Tile.NameIcon/>
+     *  </Tile.Name>
+     * <Tile/>
+     */
+    NameIcon: TileNameIcon,
+    /*
+     * `NameLabel` of the tile
+     * @example
+     * <Tile>
+     *  <Tile.Name>
+     *    <Tile.NameLabel> Tile Name <Tile.NameLabel/>
+     *  </Tile.Name/>
+     * <Tile/>
+     */
+    NameLabel: TileNameLabel,
+    /**
+     * Polymorphic Tile action component. Recommended to be used in `Tile.NameLabel` subcomponent.
+     * Renders `a` element by default.
+     * @example
+     * <Tile.Name>
+     *  <Tile.NameLabel>
+     *   {<Tile.Action href='/new-page'>Tile Name<Tile.Action/>}
+     *  <Tile.NameLabel/>
+     * </Tile.Name>
+     */
+    Action: TileAction,
+    /**
+     * Tile content area that contains `Description`, `Metadata` and `MoreOptions` Tile subcomponents
+     * @example
+     * <Tile>
+     *  <Tile.ContentArea>
+     *    <Tile.Description/>
+     *    <Tile.Metadata/>
+     *    <Tile.MoreOptions/>
+     *  </Tile.ContentArea>
+     * </Tile>
+     */
+    ContentArea: TileContentArea,
+    /**
+     * Description text of the tile.
+     * Gets truncated if it can't fit in the tile.
+     */
+    Description: TileDescription,
+    /**
+     * Metadata section located below description.
+     * @example
+     * <Tile.Metadata>
+     *  // ...
+     *  'basic metadata'
+     *  // or
+     *  {<span><SvgClock /> 2021-01-01, 04:30 AM</span>}
+     *  // or
+     *  {<>
+     *    <SvgTag2 />
+     *    <TagContainer><Tag variant='basic'>Tag 1</Tag><Tag variant='basic'>Tag 2</Tag></TagContainer>
+     *  </>}
+     * </Tile.Metadata>
+     */
+    Metadata: TileMetadata,
+    /**
+     * Dropdown menu containing `MenuItem`s.
+     */
+    MoreOptions: TileMoreOptions,
+    /**
+     * Upto two buttons shown at the bottom of the tile.
+     */
+    Buttons: TileButtons,
+});
 exports.default = exports.Tile;

package/cjs/core/Tooltip/Tooltip.d.ts

@@ -1,6 +1,49 @@
 import * as React from 'react';
-import type { CommonProps, PopoverProps } from '../utils/index.js';
-export declare type TooltipProps = {
+import type { Placement } from '@floating-ui/react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type TooltipOptions = {
+    /**
+     * Placement of the Tooltip
+     * @default 'top'
+     */
+    placement?: Placement;
+    /**
+     * Property for manual visibility control
+     */
+    visible?: boolean;
+    /**
+     * autoUpdate options that recalculates position
+     * to ensure the floating element remains anchored
+     * to its reference element, such as when scrolling
+     * and resizing the screen
+     *
+     * https://floating-ui.com/docs/autoUpdate#options
+     */
+    autoUpdateOptions?: {
+        ancestorScroll?: boolean;
+        ancestorResize?: boolean;
+        elementResize?: boolean;
+        /**
+         * Use this if you want Tooltip to follow moving trigger element
+         */
+        animationFrame?: boolean;
+        layoutShift?: boolean;
+    };
+    /**
+     * Tooltip middleware options.
+     * https://floating-ui.com/docs/offset
+     */
+    middleware?: {
+        offset?: number;
+        flip?: boolean;
+        shift?: boolean;
+        size?: boolean;
+        autoPlacement?: boolean;
+        hide?: boolean;
+        inline?: boolean;
+    };
+};
+declare type TooltipOwnProps = {
     /**
      * Content of the tooltip.
      */
@@ -9,18 +52,35 @@ export declare type TooltipProps = {
      * Element to have tooltip on. Has to be a valid JSX element and needs to forward its ref.
      * If not specified, the `reference` prop should be used instead.
      */
-    children?: JSX.Element;
-} & Omit<PopoverProps, 'className'> & Omit<CommonProps, 'title'>;
+    children?: React.ReactNode;
+    /**
+     * Element to portal tooltip to.
+     * Portals to ThemeProvider portalContainerRef by default.
+     * @default true;
+     */
+    portal?: boolean | {
+        to: HTMLElement;
+    };
+    /**
+     * Sets reference point to user provided element.
+     * @example
+     * const buttonRef = React.useRef();
+     * ...
+     * <Button ref={buttonRef} />
+     * <Tooltip content='tooltip text' reference={buttonRef} />
+     */
+    reference?: React.RefObject<HTMLElement>;
+};
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Uses [FloatingUI](https://floating-ui.com/).
  * @example
- * <Tooltip content='tooltip text' placement='top'><div>Hover here</div></Tooltip>
+ * <Tooltip content='tooltip text' placement='top'>Hover here</Tooltip>
  * @example
  * const buttonRef = React.useRef();
  * ...
  * <Button ref={buttonRef} />
  * <Tooltip content='tooltip text' reference={buttonRef} />
  */
-export declare const Tooltip: (props: TooltipProps) => JSX.Element;
+export declare const Tooltip: PolymorphicForwardRefComponent<"div", TooltipOwnProps & TooltipOptions>;
 export default Tooltip;

package/cjs/core/Tooltip/Tooltip.js

@@ -33,21 +33,110 @@ exports.Tooltip = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("@floating-ui/react");
 const index_js_1 = require("../utils/index.js");
+const react_dom_1 = __importDefault(require("react-dom"));
+const useTooltip = (options = {}) => {
+    const { placement, visible: controlledOpen, middleware = {
+        flip: true,
+        shift: true,
+    }, autoUpdateOptions = {}, } = options;
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+    const open = controlledOpen ?? uncontrolledOpen;
+    const data = (0, react_1.useFloating)({
+        placement,
+        open,
+        onOpenChange: setUncontrolledOpen,
+        whileElementsMounted: (referenceEl, floatingEl, update) => (0, react_1.autoUpdate)(referenceEl, floatingEl, update, {
+            animationFrame: autoUpdateOptions.animationFrame,
+            ancestorScroll: autoUpdateOptions.ancestorScroll,
+            ancestorResize: autoUpdateOptions.ancestorResize,
+            elementResize: autoUpdateOptions.elementResize,
+            layoutShift: autoUpdateOptions.layoutShift,
+        }),
+        middleware: [
+            middleware.offset !== undefined ? (0, react_1.offset)(middleware.offset) : (0, react_1.offset)(4),
+            middleware.flip && (0, react_1.flip)(),
+            middleware.shift && (0, react_1.shift)(),
+            middleware.size && (0, react_1.size)(),
+            middleware.autoPlacement && (0, react_1.autoPlacement)(),
+            middleware.inline && (0, react_1.inline)(),
+            middleware.hide && (0, react_1.hide)(),
+        ].filter(Boolean),
+    });
+    const context = data.context;
+    const hover = (0, react_1.useHover)(context, {
+        enabled: controlledOpen == null,
+        delay: {
+            open: 50,
+            close: 250,
+        },
+        handleClose: (0, react_1.safePolygon)({ buffer: -Infinity }),
+    });
+    const focus = (0, react_1.useFocus)(context, {
+        enabled: controlledOpen == null,
+    });
+    const click = (0, react_1.useClick)(context, {
+        enabled: controlledOpen == null,
+    });
+    const dismiss = (0, react_1.useDismiss)(context, {
+        enabled: controlledOpen == null,
+    });
+    const role = (0, react_1.useRole)(context, { role: 'tooltip' });
+    const interactions = (0, react_1.useInteractions)([click, hover, focus, dismiss, role]);
+    return React.useMemo(() => ({
+        open,
+        setUncontrolledOpen,
+        ...interactions,
+        ...data,
+    }), [open, interactions, data]);
+};
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Uses [FloatingUI](https://floating-ui.com/).
  * @example
- * <Tooltip content='tooltip text' placement='top'><div>Hover here</div></Tooltip>
+ * <Tooltip content='tooltip text' placement='top'>Hover here</Tooltip>
  * @example
  * const buttonRef = React.useRef();
  * ...
  * <Button ref={buttonRef} />
  * <Tooltip content='tooltip text' reference={buttonRef} />
  */
-const Tooltip = (props) => {
-    const { content, children, className, style, visible, ref, id, ...rest } = props;
-    return (React.createElement(index_js_1.Popover, { visible: visible, interactive: false, content: React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tooltip', className), style: style, role: 'tooltip', id: id }, content), offset: [0, 4], ref: ref, ...rest }, children && React.cloneElement(children, { title: undefined })));
-};
-exports.Tooltip = Tooltip;
+exports.Tooltip = React.forwardRef((props, forwardRef) => {
+    const { content, children, portal = true, placement = 'top', autoUpdateOptions, middleware, style, className, visible, reference, ...rest } = props;
+    const tooltip = useTooltip({
+        placement,
+        visible,
+        autoUpdateOptions,
+        middleware,
+    });
+    const context = (0, index_js_1.useGlobals)();
+    React.useEffect(() => {
+        if (reference) {
+            tooltip.refs.setReference(reference.current);
+        }
+    }, [reference, tooltip.refs]);
+    const portalTo = typeof portal !== 'boolean'
+        ? portal.to
+        : portal
+            ? context?.portalContainerRef?.current ?? (0, index_js_1.getDocument)()?.body
+            : null;
+    const contentBox = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tooltip', className), ref: (0, index_js_1.useMergedRefs)(tooltip.refs.setFloating, forwardRef), style: { ...tooltip.floatingStyles, ...style }, ...tooltip.getFloatingProps(), ...rest }, content));
+    const childrenRef = React.isValidElement(children) &&
+        (0, index_js_1.mergeRefs)(tooltip.refs.setReference, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        children.ref);
+    return (React.createElement(React.Fragment, null,
+        React.isValidElement(children)
+            ? React.cloneElement(children, tooltip.getReferenceProps({
+                ref: childrenRef,
+                ...children.props,
+            }))
+            : null,
+        tooltip.open
+            ? portalTo
+                ? react_dom_1.default.createPortal(contentBox, portalTo)
+                : contentBox
+            : null));
+});
 exports.default = exports.Tooltip;

package/cjs/core/index.d.ts

@@ -1,6 +1,6 @@
 export { Alert } from './Alert/index.js';
-export { Avatar, UserIcon } from './Avatar/index.js';
-export { AvatarGroup, UserIconGroup } from './AvatarGroup/index.js';
+export { Avatar } from './Avatar/index.js';
+export { AvatarGroup } from './AvatarGroup/index.js';
 export { Backdrop } from './Backdrop/index.js';
 export { Badge } from './Badge/index.js';
 export { Breadcrumbs } from './Breadcrumbs/index.js';
@@ -23,7 +23,7 @@ export type { FooterElement, TitleTranslations } from './Footer/index.js';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo, } from './Header/index.js';
 export { List, ListItem } from './List/index.js';
 export { TransferList } from './TransferList/index.js';
-export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs/index.js';
+export { Tabs, Tab } from './Tabs/index.js';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel/index.js';
 export { Input } from './Input/index.js';
 export { Label } from './Label/index.js';
@@ -59,7 +59,7 @@ export { Tooltip } from './Tooltip/index.js';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree/index.js';
 export type { NodeData, NodeRenderProps } from './Tree/index.js';
 export { Anchor, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography/index.js';
-export { Wizard, Stepper, WorkflowDiagram } from './Stepper/index.js';
-export type { StepProperties, WizardType, WizardLocalization, StepperLocalization, } from './Stepper/index.js';
+export { Stepper, WorkflowDiagram } from './Stepper/index.js';
+export type { StepProperties, StepperLocalization } from './Stepper/index.js';
 export { SearchBox } from './SearchBox/index.js';
 export { getUserColor, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, } from './utils/index.js';