@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.10

package/cjs/core/utils/components/Icon.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { AnyString } from '../types.js';
 import type { PolymorphicForwardRefComponent } from '../props.js';
-export declare type IconProps = {
+export type IconProps = {
     /**
      * Size of the svg.
      *  - 'medium': works well with most text
@@ -24,6 +24,11 @@ export declare type IconProps = {
      * @default 'default'
      */
     fill?: 'default' | 'positive' | 'informational' | 'negative' | 'warning' | AnyString;
+    /**
+     * Option to add padding to the icon.
+     * @default false
+     */
+    padded?: boolean;
 } & React.ComponentPropsWithoutRef<'span'>;
 /**
  * A utility component to provide size and fill to svgs.

package/cjs/core/utils/components/Icon.js

@@ -1,50 +1,25 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Icon = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Box_js_1 = require("./Box.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const Box_js_1 = require('./Box.js');
 const getSizeValue = (size) => {
-    switch (size) {
-        case 'small':
-            return 's';
-        case 'medium':
-            return 'm';
-        case 'large':
-            return 'l';
-        default:
-            return size;
-    }
+  switch (size) {
+    case 'small':
+      return 's';
+    case 'medium':
+      return 'm';
+    case 'large':
+      return 'l';
+    default:
+      return size;
+  }
 };
 /**
  * A utility component to provide size and fill to svgs.
@@ -61,7 +36,21 @@ const getSizeValue = (size) => {
  * </Icon>
  */
 exports.Icon = React.forwardRef((props, ref) => {
-    const { size = 'medium', fill = 'default', className, ...rest } = props;
-    return (React.createElement(Box_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
+  const {
+    size = 'medium',
+    fill = 'default',
+    className,
+    padded = false,
+    ...rest
+  } = props;
+  return React.createElement(Box_js_1.Box, {
+    as: 'span',
+    className: (0, classnames_1.default)('iui-svg-icon', className),
+    'data-iui-icon-size': getSizeValue(size),
+    'data-iui-icon-color': fill,
+    'data-iui-padded': padded ? 'true' : undefined,
+    ref: ref,
+    ...rest,
+  });
 });
 exports.default = exports.Icon;

package/cjs/core/utils/components/InputContainer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
-    as?: T;
+import type { PolymorphicForwardRefComponent } from '../props.js';
+export type InputContainerProps = {
     label?: React.ReactNode;
     disabled?: boolean;
     required?: boolean;
@@ -8,13 +8,12 @@ export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     message?: React.ReactNode;
     icon?: JSX.Element;
     isLabelInline?: boolean;
-    isIconInline?: boolean;
     statusMessage?: React.ReactNode;
     inputId?: string;
     labelId?: string;
-} & React.ComponentPropsWithoutRef<T>;
+};
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-export declare const InputContainer: <T extends React.ElementType<any> = "div">(props: InputContainerProps<T>) => JSX.Element;
+export declare const InputContainer: PolymorphicForwardRefComponent<"div", InputContainerProps>;

package/cjs/core/utils/components/InputContainer.js

@@ -1,58 +1,71 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.InputContainer = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Box_js_1 = require("./Box.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const Box_js_1 = require('./Box.js');
+const index_js_1 = require('../../Label/index.js');
+const index_js_2 = require('../../StatusMessage/index.js');
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-const InputContainer = (props) => {
-    const { label, disabled, required, status, message, icon, isLabelInline, isIconInline, children, className, style, statusMessage, inputId, labelId, ...rest } = props;
-    return (React.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-input-container', {
-            'iui-disabled': disabled,
-            [`iui-${status}`]: !!status,
-            'iui-inline-label': isLabelInline,
-            'iui-inline-icon': isIconInline,
-            'iui-with-message': (!!message || !!icon || !!statusMessage) && !isLabelInline,
-        }, className), style: style, ...rest },
-        label && (React.createElement(Box_js_1.Box, { as: inputId && props.as !== 'label' ? 'label' : 'div', className: (0, classnames_1.default)('iui-label', {
-                'iui-required': required,
-            }), htmlFor: inputId, id: labelId }, label)),
-        children,
-        statusMessage ? (statusMessage) : (React.createElement(React.Fragment, null,
-            icon && (React.createElement(Box_js_1.Box, { as: 'span', className: 'iui-input-icon', "aria-hidden": true }, icon)),
-            message && !isLabelInline && (React.createElement(Box_js_1.Box, { className: 'iui-message' }, message))))));
-};
-exports.InputContainer = InputContainer;
+exports.InputContainer = React.forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    disabled,
+    required,
+    status,
+    message,
+    icon,
+    isLabelInline,
+    children,
+    className,
+    style,
+    statusMessage,
+    inputId,
+    labelId,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-input-grid', className),
+      'data-iui-status': status,
+      'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
+      style: style,
+      ref: forwardedRef,
+      ...rest,
+    },
+    label &&
+      React.createElement(
+        index_js_1.Label,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          as: inputId && props.as !== 'label' ? 'label' : 'div',
+          required: required,
+          disabled: disabled,
+          htmlFor: inputId,
+          id: labelId,
+        },
+        label,
+      ),
+    children,
+    statusMessage
+      ? statusMessage
+      : message &&
+          React.createElement(
+            index_js_2.StatusMessage,
+            { startIcon: icon, status: status },
+            message,
+          ),
+  );
+});

package/cjs/core/utils/components/InputFlexContainer.d.ts

@@ -1,7 +1,8 @@
 import type { PolymorphicForwardRefComponent } from '../props.js';
-export declare type InputFlexContainerProps = {
+export type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';
+    size?: 'small' | 'large';
 };
 /**
  * Utility component for input container with display flex abilities.

package/cjs/core/utils/components/InputFlexContainer.js

@@ -1,21 +1,35 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.InputFlexContainer = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Box_js_1 = require("./Box.js");
+const react_1 = tslib_1.__importDefault(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const Box_js_1 = require('./Box.js');
 /**
  * Utility component for input container with display flex abilities.
  * @private
  */
 exports.InputFlexContainer = react_1.default.forwardRef((props, ref) => {
-    const { isDisabled, status, children, className, style, ...rest } = props;
-    return (react_1.default.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-input-flex-container', className), "data-iui-status": status, "data-iui-disabled": isDisabled ? 'true' : undefined, ref: ref, style: style, ...rest }, children));
+  const { isDisabled, status, children, className, size, style, ...rest } =
+    props;
+  return react_1.default.createElement(
+    Box_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-input-flex-container',
+        className,
+      ),
+      'data-iui-status': status,
+      'data-iui-size': size,
+      'data-iui-disabled': isDisabled ? 'true' : undefined,
+      ref: ref,
+      style: style,
+      ...rest,
+    },
+    children,
+  );
 });

package/cjs/core/utils/components/LinkAction.js

@@ -1,11 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.LinkBox = exports.LinkAction = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const polymorphic_js_1 = require("../functions/polymorphic.js");
+const polymorphic_js_1 = require('../functions/polymorphic.js');
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.

package/cjs/core/utils/components/MiddleTextTruncation.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { CommonProps } from '../props.js';
-export declare type MiddleTextTruncationProps = {
+export type MiddleTextTruncationProps = {
     /**
      * Text to truncate.
      */
@@ -31,5 +31,5 @@ export declare type MiddleTextTruncationProps = {
  *   )}
  * />
  */
-export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => JSX.Element;
+export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => React.JSX.Element;
 export default MiddleTextTruncation;

package/cjs/core/utils/components/MiddleTextTruncation.js

@@ -1,35 +1,13 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.MiddleTextTruncation = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const useOverflow_js_1 = require("../hooks/useOverflow.js");
+const React = tslib_1.__importStar(require('react'));
+const useOverflow_js_1 = require('../hooks/useOverflow.js');
 const ELLIPSIS_CHAR = '…';
 /**
  * Truncates text with the ellipsis in the middle,
@@ -48,24 +26,33 @@ const ELLIPSIS_CHAR = '…';
  * />
  */
 const MiddleTextTruncation = (props) => {
-    var _a;
-    const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
-    const [ref, visibleCount] = (0, useOverflow_js_1.useOverflow)(text);
-    const truncatedText = React.useMemo(() => {
-        if (visibleCount < text.length) {
-            return `${text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
-        }
-        else {
-            return text;
-        }
-    }, [endCharsCount, text, visibleCount]);
-    return (React.createElement("span", { style: {
-            display: 'flex',
-            minWidth: 0,
-            flexGrow: 1,
-            whiteSpace: 'nowrap',
-            ...style,
-        }, ref: ref, ...rest }, (_a = textRenderer === null || textRenderer === void 0 ? void 0 : textRenderer(truncatedText, text)) !== null && _a !== void 0 ? _a : truncatedText));
+  const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
+  const [ref, visibleCount] = (0, useOverflow_js_1.useOverflow)(text);
+  const truncatedText = React.useMemo(() => {
+    if (visibleCount < text.length) {
+      return `${text.substring(
+        0,
+        visibleCount - endCharsCount - ELLIPSIS_CHAR.length,
+      )}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
+    } else {
+      return text;
+    }
+  }, [endCharsCount, text, visibleCount]);
+  return React.createElement(
+    'span',
+    {
+      style: {
+        display: 'flex',
+        minWidth: 0,
+        flexGrow: 1,
+        whiteSpace: 'nowrap',
+        ...style,
+      },
+      ref: ref,
+      ...rest,
+    },
+    textRenderer?.(truncatedText, text) ?? truncatedText,
+  );
 };
 exports.MiddleTextTruncation = MiddleTextTruncation;
 exports.default = exports.MiddleTextTruncation;

package/cjs/core/utils/components/Popover.d.ts

@@ -1,39 +1,125 @@
 import * as React from 'react';
-import type { TippyProps } from '@tippyjs/react';
-import type { Placement, Instance } from 'tippy.js';
-export declare type PopoverInstance = Instance;
-export declare type PopoverProps = {
+import type { Placement } from '@floating-ui/react';
+import type { PolymorphicForwardRefComponent } from '../index.js';
+import type { PortalProps } from './Portal.js';
+type PopoverOptions = {
+    /**
+     * Placement of the popover content.
+     * @default 'bottom-start'
+     */
+    placement?: Placement;
     /**
      * Controlled flag for whether the popover is visible.
      */
     visible?: boolean;
     /**
-     * Determines the events that cause the popover to show.
-     * Should not be used when `visible` is set.
-     * @see [tippy.js trigger prop](https://atomiks.github.io/tippyjs/v6/all-props/#trigger)
+     * Callback invoked every time the popover visibility changes as a result
+     * of internal logic. Should be used alongside `visible` prop.
      */
-    trigger?: string;
+    onVisibleChange?: (visible: boolean) => void;
     /**
-     * Placement of the popover content.
-     * @default 'bottom-start'
-     * @see [tippy.js placement prop](https://atomiks.github.io/tippyjs/v6/all-props/#placement).
+     * If true, the popover will close when clicking outside it.
      */
-    placement?: Placement;
-} & Omit<TippyProps, 'placement' | 'trigger' | 'visible'>;
-/**
- * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
- * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
- * @private
- */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "className" | "role" | "offset" | "children" | "content" | "plugins" | "theme" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
-/**
- * Plugin to hide Popover when either Esc key is pressed,
- * or when the content inside is not tabbable and Tab key is pressed.
- */
-export declare const hideOnEscOrTab: {
-    fn(instance: Instance): {
-        onShow(): void;
-        onHide(): void;
+    closeOnOutsideClick?: boolean;
+    /**
+     * Whether the popover should match the width of the trigger.
+     */
+    matchWidth?: 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';
+};
+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; /**
+         * Middleware options.
+         *
+         * @see https://floating-ui.com/docs/offset
+         */
+        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?: React.ReactNode;
+    children?: React.ReactNode;
+    applyBackground?: boolean;
+} & PortalProps & PopoverOptions;
+/**
+ * A utility component to help with positioning of floating content.
+ * Built on top of [`floating-ui`](https://floating-ui.com/)
+ */
+export declare const Popover: PolymorphicForwardRefComponent<"div", PopoverPublicProps>;
 export default Popover;