@itwin/itwinui-react 3.0.0-dev.9 → 3.0.1

package/cjs/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/cjs/core/LabeledSelect/LabeledSelect.js

@@ -7,11 +7,12 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Select/index.js');
-const index_js_2 = require('../utils/index.js');
+const Select_js_1 = require('../Select/Select.js');
+const index_js_1 = require('../utils/index.js');
 const StatusMessage_js_1 = require('../StatusMessage/StatusMessage.js');
 const InputGrid_js_1 = require('../InputGrid/InputGrid.js');
 const Label_js_1 = require('../Label/Label.js');
+const Icon_js_1 = require('../Icon/Icon.js');
 /**
  * Labeled select component to select value from options.
  * @example
@@ -45,7 +46,7 @@ const Label_js_1 = require('../Label/Label.js');
  *   svgIcon={<SvgCamera />}
  * />
  */
-const LabeledSelect = (props) => {
+exports.LabeledSelect = React.forwardRef((props, forwardedRef) => {
   const {
     className,
     disabled = false,
@@ -63,13 +64,13 @@ const LabeledSelect = (props) => {
     messageIconProps,
     ...rest
   } = props;
-  const labelId = `${(0, index_js_2.useId)()}-label`;
+  const labelId = `${(0, index_js_1.useId)()}-label`;
   const icon = () => {
     if (svgIcon) {
-      return React.createElement(index_js_2.Icon, null, svgIcon);
+      return React.createElement(Icon_js_1.Icon, null, svgIcon);
     }
     if (status && message) {
-      return index_js_2.StatusIconMap[status]();
+      return index_js_1.StatusIconMap[status]();
     }
     return undefined;
   };
@@ -88,12 +89,13 @@ const LabeledSelect = (props) => {
         },
         label,
       ),
-    React.createElement(index_js_1.Select, {
+    React.createElement(Select_js_1.Select, {
       disabled: disabled,
       className: className,
       style: style,
       status: status,
       ...rest,
+      ref: forwardedRef,
       triggerProps: {
         'aria-labelledby': labelId,
         ...triggerProps,
@@ -112,6 +114,5 @@ const LabeledSelect = (props) => {
         )
       : message,
   );
-};
-exports.LabeledSelect = LabeledSelect;
+});
 exports.default = exports.LabeledSelect;

package/cjs/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/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -7,7 +7,7 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../LabeledInput/index.js');
+const LabeledInput_js_1 = require('../LabeledInput/LabeledInput.js');
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example
@@ -34,7 +34,7 @@ exports.LabeledTextarea = React.forwardRef((props, forwardedRef) => {
     // ref types don't match but it's internal, so ts-ignore is ok here
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    React.createElement(index_js_1.LabeledInput, {
+    React.createElement(LabeledInput_js_1.LabeledInput, {
       as: 'textarea',
       rows: 3,
       ref: forwardedRef,

package/{esm/core/utils/components → cjs/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/cjs/core/{utils/components → LinkAction}/LinkAction.js

@@ -5,7 +5,7 @@ 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('../utils/functions/polymorphic.js');
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.

package/cjs/core/Menu/MenuItem.js

@@ -11,6 +11,7 @@ const index_js_1 = require('../utils/index.js');
 const Menu_js_1 = require('./Menu.js');
 const ListItem_js_1 = require('../List/ListItem.js');
 const react_dom_1 = require('react-dom');
+const Popover_js_1 = require('../Popover/Popover.js');
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
@@ -51,7 +52,7 @@ exports.MenuItem = React.forwardRef((props, forwardedRef) => {
     // so we need to let the parent know whether the submenu is still open.
     parent.setIsNestedSubmenuVisible(open);
   };
-  const popover = (0, index_js_1.usePopover)({
+  const popover = (0, Popover_js_1.usePopover)({
     visible: isSubmenuVisible || isNestedSubmenuVisible,
     onVisibleChange,
     placement: 'right-start',

package/cjs/core/Menu/MenuItemSkeleton.js

@@ -9,6 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
+const VisuallyHidden_js_1 = require('../VisuallyHidden/VisuallyHidden.js');
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
@@ -54,7 +55,7 @@ exports.MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
           'aria-hidden': true,
         }),
       React.createElement(
-        index_js_1.VisuallyHidden,
+        VisuallyHidden_js_1.VisuallyHidden,
         null,
         translatedStrings.loading,
       ),

package/cjs/core/Modal/Modal.js

@@ -7,7 +7,7 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Dialog/index.js');
+const Dialog_js_1 = require('../Dialog/Dialog.js');
 /**
  * Modal component which can wrap any content.
  * @example
@@ -42,7 +42,7 @@ exports.Modal = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   return React.createElement(
-    index_js_1.Dialog,
+    Dialog_js_1.Dialog,
     {
       isOpen: isOpen,
       closeOnEsc: closeOnEsc,
@@ -55,11 +55,11 @@ exports.Modal = React.forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       portal: portal,
     },
-    React.createElement(index_js_1.Dialog.Backdrop, null),
+    React.createElement(Dialog_js_1.Dialog.Backdrop, null),
     React.createElement(
-      index_js_1.Dialog.Main,
+      Dialog_js_1.Dialog.Main,
       { 'aria-modal': true, ...rest },
-      React.createElement(index_js_1.Dialog.TitleBar, { titleText: title }),
+      React.createElement(Dialog_js_1.Dialog.TitleBar, { titleText: title }),
       children,
     ),
   );

package/cjs/core/NonIdealState/ErrorPage.js

@@ -7,38 +7,38 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Buttons/Button/index.js');
+const Button_js_1 = require('../Buttons/Button.js');
 const NonIdealState_js_1 = require('./NonIdealState.js');
-const index_js_2 = require('../ProgressIndicators/index.js');
-const index_js_3 = require('../utils/index.js');
+const ProgressRadial_js_1 = require('../ProgressIndicators/ProgressRadial.js');
+const index_js_1 = require('../utils/index.js');
 const Svg401 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg401'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg401'),
 );
 const Svg403 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg403'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg403'),
 );
 const Svg404 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg404'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg404'),
 );
 const Svg500 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg500'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg500'),
 );
 const Svg502 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg502'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg502'),
 );
 const Svg503 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg503'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg503'),
 );
 const SvgError = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/SvgError'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/SvgError'),
 );
 const SvgRedirect = React.lazy(() =>
-  (0, index_js_3.dynamicImport)(
+  (0, index_js_1.dynamicImport)(
     '@itwin/itwinui-illustrations-react/SvgRedirect',
   ),
 );
 const SvgTimedOut = React.lazy(() =>
-  (0, index_js_3.dynamicImport)(
+  (0, index_js_1.dynamicImport)(
     '@itwin/itwinui-illustrations-react/SvgTimedOut',
   ),
 );
@@ -161,7 +161,7 @@ exports.ErrorPage = React.forwardRef((props, forwardedRef) => {
       return undefined;
     }
     return React.createElement(
-      index_js_1.Button,
+      Button_js_1.Button,
       { styleType: 'high-visibility', onClick: primaryButtonHandle },
       primaryButtonLabel,
     );
@@ -171,7 +171,7 @@ exports.ErrorPage = React.forwardRef((props, forwardedRef) => {
       return undefined;
     }
     return React.createElement(
-      index_js_1.Button,
+      Button_js_1.Button,
       { styleType: 'default', onClick: secondaryButtonHandle },
       secondaryButtonLabel,
     );
@@ -192,7 +192,9 @@ exports.ErrorPage = React.forwardRef((props, forwardedRef) => {
   return React.createElement(NonIdealState_js_1.NonIdealState, {
     svg: React.createElement(
       React.Suspense,
-      { fallback: React.createElement(index_js_2.ProgressRadial, null) },
+      {
+        fallback: React.createElement(ProgressRadial_js_1.ProgressRadial, null),
+      },
       getErrorIcon(),
     ),
     heading: getHeadingMessage(),

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Placement } from '@floating-ui/react';
-import type { PolymorphicForwardRefComponent } from '../index.js';
-import type { PortalProps } from './Portal.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PortalProps } from '../utils/components/Portal.js';
 type PopoverOptions = {
     /**
      * Placement of the popover content.
@@ -19,12 +19,10 @@ type PopoverOptions = {
     onVisibleChange?: (visible: boolean) => void;
     /**
      * If true, the popover will close when clicking outside it.
+     *
+     * @default true
      */
     closeOnOutsideClick?: boolean;
-    /**
-     * Whether the popover should match the width of the trigger.
-     */
-    matchWidth?: boolean;
 };
 type PopoverInternalProps = {
     /**
@@ -64,6 +62,10 @@ type PopoverInternalProps = {
      */
     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;
@@ -81,11 +83,7 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         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
-         */
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
         floating: HTMLElement | null;
     } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
@@ -113,13 +111,31 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
     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.
- * Built on top of [`floating-ui`](https://floating-ui.com/)
+ * 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;

package/cjs/core/{utils/components → Popover}/Popover.js

@@ -7,11 +7,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 exports.Popover = exports.usePopover = void 0;
 const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const react_1 = require('@floating-ui/react');
-const index_js_1 = require('../index.js');
-const Portal_js_1 = require('./Portal.js');
-const index_js_2 = require('../../Surface/index.js');
-const index_js_3 = require('../../ThemeProvider/index.js');
+const index_js_1 = require('../utils/index.js');
+const Portal_js_1 = require('../utils/components/Portal.js');
+const ThemeProvider_js_1 = require('../ThemeProvider/ThemeProvider.js');
 // ----------------------------------------------------------------------------
 const usePopover = (options) => {
   const {
@@ -96,8 +96,15 @@ const usePopover = (options) => {
 };
 exports.usePopover = usePopover;
 /**
- * A utility component to help with positioning of floating content.
- * Built on top of [`floating-ui`](https://floating-ui.com/)
+ * 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>
  */
 exports.Popover = React.forwardRef((props, forwardedRef) => {
   const {
@@ -105,15 +112,15 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
     //
     // popover options
     visible,
-    placement,
+    placement = 'bottom-start',
     onVisibleChange,
-    closeOnOutsideClick,
-    matchWidth,
+    closeOnOutsideClick = true,
     //
     // dom props
+    className,
     children,
     content,
-    applyBackground,
+    applyBackground = false,
     ...rest
   } = props;
   const popover = (0, exports.usePopover)({
@@ -121,7 +128,6 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
     placement,
     onVisibleChange,
     closeOnOutsideClick,
-    matchWidth,
     role: 'dialog',
   });
   const [popoverElement, setPopoverElement] = React.useState();
@@ -130,10 +136,13 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
     forwardedRef,
     setPopoverElement,
   );
+  const triggerId = `${(0, index_js_1.useId)()}-trigger`;
+  const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
   return React.createElement(
     React.Fragment,
     null,
     (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+      id: children.props.id || triggerId,
       ...popover.getReferenceProps(children.props),
       ref: popover.refs.setReference,
     })),
@@ -142,24 +151,33 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
           Portal_js_1.Portal,
           { portal: portal },
           React.createElement(
-            index_js_3.ThemeProvider,
-            { portalContainer: popoverElement },
+            react_1.FloatingPortal,
+            null,
             React.createElement(
-              react_1.FloatingFocusManager,
-              {
-                context: popover.context,
-                modal: false,
-                initialFocus: -1,
-                returnFocus: true,
-              },
+              ThemeProvider_js_1.ThemeProvider,
+              { portalContainer: popoverElement },
               React.createElement(
-                index_js_1.Box,
+                react_1.FloatingFocusManager,
                 {
-                  as: applyBackground ? index_js_2.Surface : 'div',
-                  ...popover.getFloatingProps(rest),
-                  ref: popoverRef,
+                  context: popover.context,
+                  modal: false,
+                  initialFocus: popover.refs.floating,
                 },
-                content,
+                React.createElement(
+                  index_js_1.Box,
+                  {
+                    className: (0, classnames_1.default)(
+                      { 'iui-popover-surface': applyBackground },
+                      className,
+                    ),
+                    'aria-labelledby': !hasAriaLabel
+                      ? popover.refs.domReference.current?.id
+                      : undefined,
+                    ...popover.getFloatingProps(rest),
+                    ref: popoverRef,
+                  },
+                  content,
+                ),
               ),
             ),
           ),

package/cjs/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InputGroup } from '../InputGroup/index.js';
+import { InputGroup } from '../InputGroup/InputGroup.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type RadioTileGroupProps = Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
 /**

package/cjs/core/RadioTiles/RadioTileGroup.js

@@ -7,8 +7,8 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../InputGroup/index.js');
-const index_js_2 = require('../utils/index.js');
+const InputGroup_js_1 = require('../InputGroup/InputGroup.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * RadioTileGroup component to group RadioTile components together
  * @example
@@ -20,10 +20,10 @@ const index_js_2 = require('../utils/index.js');
 exports.RadioTileGroup = React.forwardRef((props, forwardedRef) => {
   const { children, label, ...rest } = props;
   return React.createElement(
-    index_js_1.InputGroup,
+    InputGroup_js_1.InputGroup,
     { label: label, ref: forwardedRef, ...rest },
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       { className: 'iui-radio-tile-container' },
       children,
     ),

package/cjs/core/SearchBox/SearchBox.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import type { IconProps, PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
-import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js';
+import type { PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
+import type { IconButtonProps } from '../Buttons/IconButton.js';
+import type { IconProps } from '../Icon/Icon.js';
 type SearchBoxOwnProps = {
     /**
      * Whether the searchbox is expandable.

package/cjs/core/SearchBox/SearchBox.js

@@ -9,7 +9,8 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/IconButton/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const Icon_js_1 = require('../Icon/Icon.js');
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
   const {
@@ -122,7 +123,7 @@ SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
 const SearchBoxIcon = React.forwardRef((props, ref) => {
   const { className, children, ...rest } = props;
   return React.createElement(
-    index_js_1.Icon,
+    Icon_js_1.Icon,
     {
       'aria-hidden': true,
       className: (0, classnames_1.default)('iui-search-icon', className),
@@ -162,7 +163,7 @@ const SearchBoxButton = React.forwardRef((props, ref) => {
     SearchBoxContext,
   );
   return React.createElement(
-    index_js_2.IconButton,
+    IconButton_js_1.IconButton,
     {
       styleType: 'borderless',
       size: sizeContext,

package/cjs/core/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { usePopover } from '../utils/index.js';
 import type { CommonProps } from '../utils/index.js';
+import { usePopover } from '../Popover/Popover.js';
 export type ItemRendererProps = {
     /**
      * Close handler that closes the dropdown.
@@ -168,5 +168,5 @@ export type SelectProps<T> = {
  *   )}
  * />
  */
-export declare const Select: <T>(props: SelectProps<T>) => JSX.Element;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<HTMLElement>>;
 export default Select;