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

package/esm/core/{utils/components → Icon}/Icon.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from './Box.js';
+import { Box } from '../utils/components/Box.js';
 const getSizeValue = (size) => {
   switch (size) {
     case 'small':

package/esm/core/InformationPanel/InformationPanelHeader.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 import { SvgCloseSmall, Box } from '../utils/index.js';
 /**
  * Header of the InformationPanel to be passed in the `header` prop.

package/esm/core/Input/Input.d.ts

@@ -17,7 +17,6 @@ export type InputProps = {
 /**
  * Basic input component
  * @example
- * <Input setFocus />
  * <Input disabled />
  * <Input size='small' />
  */

package/esm/core/Input/Input.js

@@ -8,7 +8,6 @@ import { useMergedRefs, Box } from '../utils/index.js';
 /**
  * Basic input component
  * @example
- * <Input setFocus />
  * <Input disabled />
  * <Input size='small' />
  */

package/esm/core/InputGroup/InputGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import { StatusMessage } from '../StatusMessage/index.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 type InputGroupProps = {
     /**
      * Label of the group.

package/esm/core/InputGroup/InputGroup.js

@@ -5,9 +5,9 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { StatusIconMap, Box } from '../utils/index.js';
-import { InputGrid } from '../InputGrid/index.js';
-import { Label } from '../Label/index.js';
-import { StatusMessage } from '../StatusMessage/index.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { Label } from '../Label/Label.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 /**
  * Group Checkbox/Radio components together
  * @example

package/esm/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -33,7 +33,7 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
 };

package/esm/core/InputWithDecorations/InputWithDecorations.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Box, InputFlexContainer, useSafeContext } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 const InputWithDecorationsContext = React.createContext(undefined);
 const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
   const { children, size, isDisabled, ...rest } = props;

package/esm/core/LabeledInput/LabeledInput.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import { Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import { InputGrid } from '../InputGrid/index.js';
-import { InputWithDecorations } from '../InputWithDecorations/index.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { InputWithDecorations } from '../InputWithDecorations/InputWithDecorations.js';
+import { Icon } from '../Icon/Icon.js';
 export type LabeledInputProps = {
     /**
      * Label of the input.
@@ -56,7 +56,7 @@ export type LabeledInputProps = {
  * <LabeledInput label='My label' />
  * <LabeledInput disabled label='My label' />
  * <LabeledInput status='positive' label='Positive' />
- * <LabeledInput status='negative' label='Negative' setFocus />
+ * <LabeledInput status='negative' label='Negative' />
  */
 export declare const LabeledInput: PolymorphicForwardRefComponent<"input", LabeledInputProps>;
 export default LabeledInput;

package/esm/core/LabeledInput/LabeledInput.js

@@ -4,18 +4,19 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import { StatusIconMap, useId, Icon } from '../utils/index.js';
-import { InputGrid } from '../InputGrid/index.js';
-import { InputWithDecorations } from '../InputWithDecorations/index.js';
+import { StatusIconMap, useId } from '../utils/index.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { InputWithDecorations } from '../InputWithDecorations/InputWithDecorations.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { Label } from '../Label/Label.js';
+import { Icon } from '../Icon/Icon.js';
 /**
  * Basic labeled input component
  * @example
  * <LabeledInput label='My label' />
  * <LabeledInput disabled label='My label' />
  * <LabeledInput status='positive' label='Positive' />
- * <LabeledInput status='negative' label='Negative' setFocus />
+ * <LabeledInput status='negative' label='Negative' />
  */
 export const LabeledInput = React.forwardRef((props, ref) => {
   const uid = useId();

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { SelectProps } from '../Select/Select.js';
-import { Icon } from '../utils/index.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
+import { Icon } from '../Icon/Icon.js';
 export type LabeledSelectProps<T> = {
     /**
      * Label of the select.
@@ -76,5 +76,5 @@ export type LabeledSelectProps<T> = {
  *   svgIcon={<SvgCamera />}
  * />
  */
-export declare const LabeledSelect: <T>(props: LabeledSelectProps<T>) => JSX.Element;
+export declare const LabeledSelect: React.ForwardRefExoticComponent<LabeledSelectProps<unknown> & React.RefAttributes<HTMLElement>>;
 export default LabeledSelect;

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -3,11 +3,12 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Select } from '../Select/index.js';
-import { StatusIconMap, useId, Icon } from '../utils/index.js';
+import { Select } from '../Select/Select.js';
+import { StatusIconMap, useId } from '../utils/index.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
 import { Label } from '../Label/Label.js';
+import { Icon } from '../Icon/Icon.js';
 /**
  * Labeled select component to select value from options.
  * @example
@@ -41,7 +42,7 @@ import { Label } from '../Label/Label.js';
  *   svgIcon={<SvgCamera />}
  * />
  */
-export const LabeledSelect = (props) => {
+export const LabeledSelect = React.forwardRef((props, forwardedRef) => {
   const {
     className,
     disabled = false,
@@ -90,6 +91,7 @@ export const LabeledSelect = (props) => {
       style: style,
       status: status,
       ...rest,
+      ref: forwardedRef,
       triggerProps: {
         'aria-labelledby': labelId,
         ...triggerProps,
@@ -108,5 +110,5 @@ export const LabeledSelect = (props) => {
         )
       : message,
   );
-};
+});
 export default LabeledSelect;

package/esm/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon } from '../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Icon } from '../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
-import { LabeledInput } from '../LabeledInput/index.js';
+import { LabeledInput } from '../LabeledInput/LabeledInput.js';
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example

package/{cjs/core/utils/components → esm/core/LinkAction}/LinkAction.d.ts

@@ -8,7 +8,7 @@
  *   </Surface>
  * </LinkBox>
  */
-export declare const LinkAction: import("../props.js").PolymorphicForwardRefComponent<"a", {}>;
+export declare const LinkAction: import("../utils/props.js").PolymorphicForwardRefComponent<"a", {}>;
 /**
  * Polymorphic link box component.
  * Used to wrap around your component to use LinkAction.
@@ -20,4 +20,4 @@ export declare const LinkAction: import("../props.js").PolymorphicForwardRefComp
  *   </Surface>
  * </LinkBox>
  */
-export declare const LinkBox: import("../props.js").PolymorphicForwardRefComponent<"div", {}>;
+export declare const LinkBox: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/esm/core/{utils/components → LinkAction}/LinkAction.js

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { polymorphic } from '../functions/polymorphic.js';
+import { polymorphic } from '../utils/functions/polymorphic.js';
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.

package/esm/core/Menu/Menu.js

@@ -4,7 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useMergedRefs, getFocusableElements, Box } from '../utils/index.js';
+import {
+  useMergedRefs,
+  getFocusableElements,
+  Box,
+  mergeEventHandlers,
+} from '../utils/index.js';
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
@@ -63,9 +68,9 @@ export const Menu = React.forwardRef((props, ref) => {
     as: 'div',
     className: cx('iui-menu', className),
     role: 'menu',
-    onKeyDown: onKeyDown,
     ref: refs,
     ...rest,
+    onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown),
   });
 });
 export default Menu;

package/esm/core/Menu/MenuItem.js

@@ -3,17 +3,27 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Popover, useMergedRefs, SvgCaretRightSmall } from '../utils/index.js';
+import {
+  SvgCaretRightSmall,
+  Portal,
+  useMergedRefs,
+  useId,
+} from '../utils/index.js';
 import { Menu } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
+import { flushSync } from 'react-dom';
+import { usePopover } from '../Popover/Popover.js';
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
-const MenuItemContext = React.createContext({ ref: undefined });
+const MenuItemContext = React.createContext({
+  ref: undefined,
+  setIsNestedSubmenuVisible: () => {},
+});
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
-export const MenuItem = React.forwardRef((props, ref) => {
+export const MenuItem = React.forwardRef((props, forwardedRef) => {
   const {
     children,
     isSelected,
@@ -22,21 +32,33 @@ export const MenuItem = React.forwardRef((props, ref) => {
     onClick,
     sublabel,
     size = !!sublabel ? 'large' : 'default',
-    startIcon: startIconProp,
     icon,
-    endIcon: endIconProp,
+    startIcon = icon,
     badge,
+    endIcon = badge,
     role = 'menuitem',
     subMenuItems = [],
     ...rest
   } = props;
   const menuItemRef = React.useRef(null);
-  const refs = useMergedRefs(menuItemRef, ref);
-  const { ref: parentMenuItemRef } = React.useContext(MenuItemContext);
-  const subMenuRef = React.useRef(null);
+  const [focusOnSubmenu, setFocusOnSubmenu] = React.useState(false);
+  const submenuId = useId();
   const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
-  const startIcon = startIconProp ?? icon;
-  const endIcon = endIconProp ?? badge;
+  const [isNestedSubmenuVisible, setIsNestedSubmenuVisible] =
+    React.useState(false);
+  const parent = React.useContext(MenuItemContext);
+  const onVisibleChange = (open) => {
+    setIsSubmenuVisible(open);
+    // we don't want parent to close when mouse goes into a nested submenu,
+    // so we need to let the parent know whether the submenu is still open.
+    parent.setIsNestedSubmenuVisible(open);
+  };
+  const popover = usePopover({
+    visible: isSubmenuVisible || isNestedSubmenuVisible,
+    onVisibleChange,
+    placement: 'right-start',
+    trigger: { hover: true, focus: true },
+  });
   const onKeyDown = (event) => {
     if (event.altKey) {
       return;
@@ -52,22 +74,37 @@ export const MenuItem = React.forwardRef((props, ref) => {
       case 'ArrowRight': {
         if (subMenuItems.length > 0) {
           setIsSubmenuVisible(true);
+          // flush and reset state so we are ready to focus again next time
+          flushSync(() => setFocusOnSubmenu(true));
+          setFocusOnSubmenu(false);
           event.preventDefault();
           event.stopPropagation();
         }
         break;
       }
       case 'ArrowLeft': {
-        parentMenuItemRef?.current?.focus();
+        if (parent.ref) {
+          parent.ref.current?.focus();
+          parent.setIsNestedSubmenuVisible(false);
+        }
         event.stopPropagation();
         event.preventDefault();
         break;
       }
+      case 'Escape': {
+        // focus might get lost if submenu closes so move it back to parent
+        parent.ref?.current?.focus();
+        break;
+      }
       default:
         break;
     }
   };
-  const listItem = React.createElement(
+  const handlers = {
+    onClick: () => !disabled && onClick?.(value),
+    onKeyDown,
+  };
+  return React.createElement(
     ListItem,
     {
       as: 'div',
@@ -75,24 +112,21 @@ export const MenuItem = React.forwardRef((props, ref) => {
       size: size,
       active: isSelected,
       disabled: disabled,
-      onClick: () => !disabled && onClick?.(value),
-      ref: refs,
+      ref: useMergedRefs(
+        menuItemRef,
+        forwardedRef,
+        subMenuItems.length > 0 ? popover.refs.setReference : null,
+      ),
       role: role,
       tabIndex: disabled || role === 'presentation' ? undefined : -1,
       'aria-selected': isSelected,
-      'aria-haspopup': subMenuItems.length > 0,
+      'aria-haspopup': subMenuItems.length > 0 ? 'true' : undefined,
+      'aria-controls': subMenuItems.length > 0 ? submenuId : undefined,
+      'aria-expanded': subMenuItems.length > 0 ? popover.open : undefined,
       'aria-disabled': disabled,
-      onKeyDown: onKeyDown,
-      onMouseEnter: () => setIsSubmenuVisible(true),
-      onMouseLeave: (e) => {
-        if (
-          !(e.relatedTarget instanceof Node) ||
-          !subMenuRef.current?.contains(e.relatedTarget)
-        ) {
-          setIsSubmenuVisible(false);
-        }
-      },
-      ...rest,
+      ...(subMenuItems.length === 0
+        ? { ...handlers, ...rest }
+        : popover.getReferenceProps({ ...handlers, ...rest })),
     },
     startIcon &&
       React.createElement(
@@ -119,34 +153,32 @@ export const MenuItem = React.forwardRef((props, ref) => {
         { as: 'span', 'aria-hidden': true },
         endIcon,
       ),
-  );
-  return subMenuItems.length === 0
-    ? listItem
-    : React.createElement(
-        MenuItemContext.Provider,
-        { value: { ref: menuItemRef } },
+    subMenuItems.length > 0 &&
+      popover.open &&
+      React.createElement(
+        Portal,
+        null,
         React.createElement(
-          Popover,
-          {
-            placement: 'right-start',
-            visible: isSubmenuVisible,
-            appendTo: 'parent',
-            content: React.createElement(
-              'div',
-              {
-                onMouseLeave: () => setIsSubmenuVisible(false),
-                onBlur: (e) => {
-                  !!(e.relatedTarget instanceof Node) &&
-                    !subMenuRef.current?.contains(e.relatedTarget) &&
-                    !subMenuRef.current?.isEqualNode(e.relatedTarget) &&
-                    setIsSubmenuVisible(false);
+          MenuItemContext.Provider,
+          { value: { ref: menuItemRef, setIsNestedSubmenuVisible } },
+          React.createElement(
+            Menu,
+            {
+              setFocus: focusOnSubmenu,
+              ref: popover.refs.setFloating,
+              ...popover.getFloatingProps({
+                id: submenuId,
+                onPointerMove: () => {
+                  // pointer might move into a nested submenu and set isSubmenuVisible to false,
+                  // so we need to flip it back to true when pointer re-enters this submenu.
+                  setIsSubmenuVisible(true);
                 },
-              },
-              React.createElement(Menu, { ref: subMenuRef }, subMenuItems),
-            ),
-          },
-          listItem,
+              }),
+            },
+            subMenuItems,
+          ),
         ),
-      );
+      ),
+  );
 });
 export default MenuItem;

package/esm/core/Menu/MenuItemSkeleton.js

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, VisuallyHidden } from '../utils/index.js';
+import { Box } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Menu item that uses skeletons to indicate loading state.
  */

package/esm/core/Modal/Modal.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Dialog } from '../Dialog/index.js';
+import { Dialog } from '../Dialog/Dialog.js';
 /**
  * Modal component which can wrap any content.
  * @example

package/esm/core/NonIdealState/ErrorPage.js

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Button } from '../Buttons/Button/index.js';
+import { Button } from '../Buttons/Button.js';
 import { NonIdealState } from './NonIdealState.js';
-import { ProgressRadial } from '../ProgressIndicators/index.js';
+import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { dynamicImport } from '../utils/index.js';
 const Svg401 = React.lazy(() =>
   dynamicImport('@itwin/itwinui-illustrations-react/Svg401'),

package/esm/core/Popover/Popover.d.ts

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import type { Placement } from '@floating-ui/react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PortalProps } from '../utils/components/Portal.js';
+type PopoverOptions = {
+    /**
+     * Placement of the popover content.
+     * @default 'bottom-start'
+     */
+    placement?: Placement;
+    /**
+     * Controlled flag for whether the popover is visible.
+     */
+    visible?: boolean;
+    /**
+     * Callback invoked every time the popover visibility changes as a result
+     * of internal logic. Should be used alongside `visible` prop.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * If true, the popover will close when clicking outside it.
+     *
+     * @default true
+     */
+    closeOnOutsideClick?: boolean;
+};
+type PopoverInternalProps = {
+    /**
+     * 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 popover to follow moving trigger element
+         */
+        animationFrame?: boolean;
+        layoutShift?: boolean;
+    };
+    /**
+     * Middleware options.
+     *
+     * @see https://floating-ui.com/docs/offset
+     */
+    middleware?: {
+        offset?: number;
+        flip?: boolean;
+        shift?: boolean;
+        autoPlacement?: boolean;
+        hide?: boolean;
+        inline?: boolean;
+    };
+    /**
+     * By default, the popover will only open on click.
+     * `hover` and `focus` can be manually specified as triggers.
+     */
+    trigger?: Partial<Record<'hover' | 'click' | 'focus', boolean>>;
+    role?: 'dialog' | 'menu' | 'listbox';
+    /**
+     * Whether the popover should match the width of the trigger.
+     */
+    matchWidth?: boolean;
+};
+export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
+    placement: Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    open: boolean | undefined;
+    onOpenChange: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+};
+type PopoverPublicProps = {
+    /**
+     * Content displayed inside the popover.
+     */
+    content?: React.ReactNode;
+    /**
+     * Element that triggers the popover. Should usually be a button.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the popover adds recommended CSS (background-color, box-shadow, etc.) to itself.
+     *
+     * @default false
+     */
+    applyBackground?: boolean;
+} & PortalProps & PopoverOptions;
+/**
+ * A utility component to help with positioning of floating content relative to a trigger.
+ * Built on top of [`floating-ui`](https://floating-ui.com/).
+ *
+ * @see https://itwinui.bentley.com/docs/popover
+ *
+ * @example
+ * <Popover content='This is a popover'>
+ *   <Button>Show popover</Button>
+ * </Popover>
+ */
+export declare const Popover: PolymorphicForwardRefComponent<"div", PopoverPublicProps>;
+export default Popover;