@patternfly/react-core 6.3.1-prerelease.9 → 6.4.0-prerelease.1

package/src/components/Menu/Menu.tsx

@@ -4,6 +4,7 @@ import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb
 import { css } from '@patternfly/react-styles';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 import { MenuContext } from './MenuContext';
+import type { MenuItemProps } from './MenuItem';
 import { canUseDOM } from '../../helpers/util';
 import { KeyboardHandler } from '../../helpers';
 export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'ref' | 'onSelect'>, OUIAProps {
@@ -14,7 +15,7 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   /** ID of the menu */
   id?: string;
   /** Callback for updating when item selection changes. You can also specify onClick on the MenuItem. */
-  onSelect?: (event?: React.MouseEvent, itemId?: string | number) => void;
+  onSelect?: (event?: React.MouseEvent, itemId?: MenuItemProps['itemId']) => void;
   /** Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the MenuItem. */
   selected?: any | any[];
   /** Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction. */
@@ -183,7 +184,6 @@ class MenuBase extends Component<MenuProps, MenuState> {
       !(event.target as HTMLElement).classList.contains(breadcrumbStyles.breadcrumbLink)
     ) {
       this.activeMenu = (event.target as HTMLElement).closest(`.${styles.menu}`);
-      this.setState({ disableHover: true });
     }
 
     if ((event.target as HTMLElement).tagName === 'INPUT') {

package/src/components/Menu/MenuContainer.tsx

@@ -1,22 +1,9 @@
 import { useEffect, useRef } from 'react';
 import { onToggleArrowKeydownDefault, Popper } from '../../helpers';
+import type { PopperOptions } from '../../helpers/Popper/Popper';
 
-export interface MenuPopperProps {
-  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
-  direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center' | 'start' | 'end';
-  /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
-  width?: string | 'trigger';
-  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
-  minWidth?: string | 'trigger';
-  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */
-  maxWidth?: string | 'trigger';
-  /** Enable to flip the popper when it reaches the boundary */
-  enableFlip?: boolean;
-  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
-  preventOverflow?: boolean;
-}
+/** @deprecated Use PopperOptions instead */
+export type MenuPopperProps = PopperOptions;
 
 export interface MenuContainerProps {
   /** Menu to be rendered */
@@ -39,7 +26,7 @@ export interface MenuContainerProps {
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
-  popperProps?: MenuPopperProps;
+  popperProps?: PopperOptions;
   /** @beta Flag indicating the first menu item should be focused after opening the dropdown. */
   shouldFocusFirstItemOnOpen?: boolean;
   /** Flag indicating if scroll on focus of the first menu item should occur. */

package/src/components/Menu/MenuGroup.tsx

@@ -20,22 +20,28 @@ export interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
 const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
   children,
   className = '',
-  label = '',
+  label,
   titleId,
   innerRef,
   labelHeadingLevel: HeadingLevel = 'h1',
   ...props
 }: MenuGroupProps) => {
   const Wrapper = typeof label === 'function' ? label : HeadingLevel;
+  const hasLabel = label !== undefined && label !== null && label !== '';
+
   return (
     <section {...props} className={css(styles.menuGroup, className)} ref={innerRef}>
       <>
-        {['function', 'string'].includes(typeof label) ? (
-          <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>
-            {label}
-          </Wrapper>
-        ) : (
-          label
+        {hasLabel && (
+          <>
+            {['function', 'string'].includes(typeof label) ? (
+              <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>
+                {label}
+              </Wrapper>
+            ) : (
+              label
+            )}
+          </>
         )}
         {children}
       </>

package/src/components/Menu/MenuItem.tsx

@@ -210,10 +210,10 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     if (flyoutTarget) {
       if (flyoutVisible) {
         const flyoutMenu = (flyoutTarget as HTMLElement).nextElementSibling;
-        const flyoutItems = Array.from(flyoutMenu.getElementsByTagName('UL')[0].children).filter(
+        const flyoutItems = Array.from(flyoutMenu?.getElementsByTagName('UL')[0]?.children || []).filter(
           (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
         );
-        (flyoutItems[0].firstChild as HTMLElement).focus();
+        (flyoutItems[0]?.firstChild as HTMLElement)?.focus();
       } else {
         flyoutTarget.focus();
       }

package/src/components/Menu/MenuItemAction.tsx

@@ -1,7 +1,6 @@
 import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
-import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 import { MenuContext, MenuItemContext } from './MenuContext';
 import { Button } from '../Button';
 export interface MenuItemActionProps extends React.HTMLProps<HTMLDivElement> {
@@ -60,9 +59,11 @@ const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
                 ref={innerRef}
                 role="menuitem"
                 variant="plain"
+                isFavorite={isFavorited !== null}
+                isFavorited={isFavorited ?? false}
                 tabIndex={-1}
                 isDisabled={isDisabled || isDisabledContext}
-                icon={icon === 'favorites' || isFavorited !== null ? <StarIcon /> : icon}
+                icon={isFavorited === null ? icon : undefined}
               />
             </div>
           );

package/src/components/Menu/__tests__/Menu.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import { Menu } from '../Menu';
-import { MenuItem } from '../MenuItem';
+import { MenuItem, MenuItemProps } from '../MenuItem';
 import { MenuList } from '../MenuList';
 import { MenuContent } from '../MenuContent';
 
@@ -16,6 +16,44 @@ describe('Menu', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('should accept onSelect with various types', () => {
+    const onSelectMock = jest.fn();
+
+    const items: MenuItemProps[] = [
+      { itemId: 1, children: 'Item 1', key: 'item1' },
+      { itemId: new Date(1), children: 'Item 2', key: 'item2' },
+      { itemId: 'item3', children: 'Item 3', key: 'item3' },
+      { itemId: { some: 'object' }, children: 'Item 4', key: 'item4' },
+      { itemId: NaN, children: 'Item 5', key: 'item5' },
+      { itemId: null, children: 'Item 6', key: 'item6' },
+      { itemId: 0n, children: 'Item 7', key: 'item7' },
+      { itemId: true, children: 'Item 8', key: 'item8' },
+      { itemId: false, children: 'Item 9', key: 'item9' },
+      { itemId: -0, children: 'Item 10', key: 'item10' },
+      { itemId: '', children: 'Item 11', key: 'item11' }
+    ];
+
+    render(
+      <Menu activeItemId={0} onSelect={onSelectMock}>
+        <MenuContent>
+          <MenuList>
+            {items.map((item) => (
+              <MenuItem key={item.key} itemId={item.itemId}>
+                {item.children}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </MenuContent>
+      </Menu>
+    );
+
+    for (const item of items) {
+      const menuItem = screen.getByText(item.children as string);
+      menuItem.click();
+      expect(onSelectMock).toHaveBeenCalledWith(expect.anything(), item.itemId);
+    }
+  });
+
   describe('with isPlain', () => {
     test('should render Menu with plain styles applied', () => {
       render(

package/src/components/Menu/examples/Menu.md

@@ -14,8 +14,8 @@ propComponents:
     'MenuSearchInput',
     'MenuGroup',
     'MenuContainer',
-    'MenuPopperProps',
-    'TooltipProps'
+    'TooltipProps',
+    'PopperOptions'
   ]
 ouia: true
 ---
@@ -241,4 +241,4 @@ Router links can be used for in-app linking in React environments to prevent pag
 >
   {...Link Content}
 </MenuItem>
-```
+```

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -50,6 +50,8 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   progressAriaLabel?: string;
   /** Associates the progress bar with it's label for accessibility purposes. Required when title not used */
   progressAriaLabelledBy?: string;
+  /** Adds an accessible description to the ProgressBar via space separated list of ids. Required when helperText is passed in. */
+  progressAriaDescribedBy?: string;
   /** Modifies the text announced by assistive technologies when the progress bar updates. */
   progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
@@ -74,6 +76,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressVariant,
   progressAriaLabel,
   progressAriaLabelledBy,
+  progressAriaDescribedBy,
   progressId,
   progressAriaLiveMessage,
   buttonAriaLabel = 'Remove from list',
@@ -161,6 +164,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
           variant={variant}
           aria-label={progressAriaLabel}
           aria-labelledby={progressAriaLabelledBy}
+          aria-describedby={progressAriaDescribedBy}
           id={progressId}
           helperText={progressHelperText}
         />

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -96,11 +96,11 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   };
 
   // add helper text to a status item showing any error encountered during the file reading process
-  const createHelperText = (file: File) => {
+  const createHelperText = (file: File, fileIndex: number) => {
     const fileResult = readFileData.find((readFile) => readFile.fileName === file.name);
     if (fileResult?.loadError) {
       return (
-        <HelperText isLiveRegion>
+        <HelperText id={`multiple-file-upload-basic-example-help-text-${fileIndex}`} isLiveRegion>
           <HelperTextItem variant="error">{fileResult.loadError.toString()}</HelperTextItem>
         </HelperText>
       );
@@ -135,14 +135,15 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
             statusToggleIcon={statusIcon}
             aria-label="Current uploads"
           >
-            {currentFiles.map((file) => (
+            {currentFiles.map((file, index) => (
               <MultipleFileUploadStatusItem
                 file={file}
                 key={file.name}
                 onClearClick={() => removeFiles([file.name])}
                 onReadSuccess={handleReadSuccess}
                 onReadFail={handleReadFail}
-                progressHelperText={createHelperText(file)}
+                progressHelperText={createHelperText(file, index)}
+                progressAriaDescribedBy={`multiple-file-upload-basic-example-help-text-${index}`}
               />
             ))}
           </MultipleFileUploadStatus>

package/src/components/Progress/Progress.tsx

@@ -42,6 +42,8 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   'aria-label'?: string;
   /** Associates the ProgressBar with it's label for accessibility purposes. Required when title not used */
   'aria-labelledby'?: string;
+  /** Adds an accessible description to the ProgressBar via space separated list of ids. Required when helperText is passed in. */
+  'aria-describedby'?: string;
   /** Content which can be used to convey additional information about the progress component.
    * We recommend the helper text component as it was designed for this purpose.
    */
@@ -65,7 +67,8 @@ class Progress extends Component<ProgressProps> {
     isTitleTruncated: false,
     tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
     'aria-label': null as string,
-    'aria-labelledby': null as string
+    'aria-labelledby': null as string,
+    'aria-describedby': null as string
   };
 
   id = this.props.id || getUniqueId();
@@ -89,6 +92,7 @@ class Progress extends Component<ProgressProps> {
       tooltipPosition,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
       helperText,
       ...props
     } = this.props;
@@ -107,6 +111,10 @@ class Progress extends Component<ProgressProps> {
       progressBarAriaProps['aria-label'] = ariaLabel;
     }
 
+    if (ariaDescribedBy) {
+      progressBarAriaProps['aria-describedby'] = ariaDescribedBy;
+    }
+
     if (valueText) {
       progressBarAriaProps['aria-valuetext'] = valueText;
     }

package/src/components/Progress/ProgressBar.tsx

@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';
 export interface AriaProps {
   'aria-labelledby'?: string;
   'aria-label'?: string;
+  'aria-describedby'?: string;
   'aria-valuemin'?: number;
   'aria-valuenow'?: number;
   'aria-valuemax'?: number;
@@ -28,7 +29,7 @@ export const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({
   value,
   ...props
 }: ProgressBarProps) => (
-  <div {...props} className={css(styles.progressBar, className)} {...progressBarAriaProps}>
+  <div role="progressbar" {...props} className={css(styles.progressBar, className)} {...progressBarAriaProps}>
     <div className={css(styles.progressIndicator)} style={{ width: `${value}%` }}>
       <span className={css(styles.progressMeasure)}>{children}</span>
     </div>

package/src/components/Progress/ProgressContainer.tsx

@@ -130,7 +130,7 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
           )}
         </div>
       )}
-      <ProgressBar role="progressbar" progressBarAriaProps={progressBarAriaProps} value={value}>
+      <ProgressBar progressBarAriaProps={progressBarAriaProps} value={value}>
         {measureLocation === ProgressMeasureLocation.inside && `${value}%`}
       </ProgressBar>
       {helperText && <ProgressHelperText>{helperText}</ProgressHelperText>}

package/src/components/Progress/__tests__/Generated/__snapshots__/ProgressBar.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`ProgressBar should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress__bar ''"
+    role="progressbar"
   >
     <div
       class="pf-v6-c-progress__indicator"

package/src/components/Progress/__tests__/ProgressBar.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { ProgressBar } from '../ProgressBar';
+
+test('Does not render with aria-describedby by default', () => {
+  render(<ProgressBar value={33} />);
+
+  expect(screen.getByRole('progressbar')).not.toHaveAccessibleDescription();
+});
+
+test('Renders with aria-describedby when progressBarAriaProps is passed in', () => {
+  render(
+    <>
+      <div id="test-id">Test description</div>
+      <ProgressBar value={33} progressBarAriaProps={{ 'aria-describedby': 'test-id' }} />
+    </>
+  );
+
+  expect(screen.getByRole('progressbar')).toHaveAccessibleDescription('Test description');
+});

package/src/components/Progress/examples/Progress.md

@@ -8,75 +8,119 @@ propComponents: ['Progress']
 import { useState } from 'react';
 
 ## Examples
+
 ### Basic
+
 ```ts file="./ProgressBasic.tsx"
+
 ```
 
 ### Small
+
 ```ts file="./ProgressSmall.tsx"
+
 ```
 
 ### Large
+
 ```ts file="./ProgressLarge.tsx"
-```
 
-### Outside
-```ts file="./ProgressOutside.tsx"
 ```
 
-### Inside
-```ts file="./ProgressInside.tsx"
-```
+### Outside
 
-### Success
-```ts file="./ProgressSuccess.tsx"
-```
+```ts file="./ProgressOutside.tsx"
 
-### Failure
-```ts file="./ProgressFailure.tsx"
 ```
 
-### Warning
-```ts file="./ProgressWarning.tsx"
-```
+### Inside
 
-### Inside success
-```ts file="./ProgressInsideSuccess.tsx"
-```
+```ts file="./ProgressInside.tsx"
 
-### Outside failure
-```ts file="./ProgressOutsideFailure.tsx"
 ```
 
 ### Single line
+
 ```ts file="./ProgressSingleLine.tsx"
+
 ```
 
 ### Without measure
+
 ```ts file="./ProgressWithoutMeasure.tsx"
-```
 
-### Failure without measure
-```ts file="./ProgressFailureWithoutMeasure.tsx"
 ```
 
-
 ### Finite step
+
 ```ts file="./ProgressFiniteStep.tsx"
+
 ```
 
 ### Progress with step instructions
+
 ```ts file="./ProgressStepInstruction.tsx"
+
 ```
 
 ### Truncate title
+
 ```ts file="./ProgressTruncateTitle.tsx"
+
 ```
 
 ### Title outside of progress bar
+
 ```ts file="./ProgressTitleOutsideOfProgressBar.tsx"
+
 ```
 
 ### Helper text
+
 ```ts file="./ProgressHelperText.tsx"
+
+```
+
+## Status examples
+
+When conveying status, you should ensure:
+
+- There is visible helper text that explains the status.
+- The helper text includes the status icon, as seen in our [basic helper text example](/components/helper-text#basic).
+- The helper text is linked to the `<Progress>` component via the `aria-describedby` property, as seen in the [progress helper text example](#helper-text).
+
+### Success
+
+```ts file="./ProgressSuccess.tsx"
+
+```
+
+### Failure
+
+```ts file="./ProgressFailure.tsx"
+
+```
+
+### Warning
+
+```ts file="./ProgressWarning.tsx"
+
+```
+
+### Inside success
+
+```ts file="./ProgressInsideSuccess.tsx"
+
+```
+
+### Outside failure
+
+```ts file="./ProgressOutsideFailure.tsx"
+
+```
+
+### Failure without measure
+
+```ts file="./ProgressFailureWithoutMeasure.tsx"
+
 ```

package/src/components/Progress/examples/ProgressHelperText.tsx

@@ -25,7 +25,7 @@ export const ProgressHelperText: React.FunctionComponent = () => {
   const helperTextVariant = selectedVariant === 'danger' ? 'error' : selectedVariant;
 
   const helperText = (
-    <HelperText>
+    <HelperText id="progress-helper-text-example-help-text">
       <HelperTextItem variant={helperTextVariant}>
         {`${formatVariantName(selectedVariant)} variant is being displayed`}
       </HelperTextItem>
@@ -36,7 +36,13 @@ export const ProgressHelperText: React.FunctionComponent = () => {
     <>
       {variantOptions}
       <br />
-      <Progress value={33} title="Title" helperText={helperText} variant={selectedVariant} />
+      <Progress
+        aria-describedby="progress-helper-text-example-help-text"
+        value={33}
+        title="Title"
+        helperText={helperText}
+        variant={selectedVariant}
+      />
     </>
   );
 };

package/src/components/SearchInput/SearchInput.tsx

@@ -13,6 +13,7 @@ import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Popper } from '../../helpers';
+import { useHasAnimations } from '../../helpers';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 
@@ -180,7 +181,8 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const popperRef = useRef(null);
   const [focusAfterExpandChange, setFocusAfterExpandChange] = useState(false);
 
-  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations } = expandableInput || {};
+  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations: hasAnimationsProp } = expandableInput || {};
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
   useEffect(() => {
     // this effect and the focusAfterExpandChange variable are needed to focus the input/toggle as needed when the

package/src/components/SearchInput/__tests__/SearchInput.test.tsx

@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { SearchInput } from '../SearchInput';
 import { FormGroup } from '../../Form';
 import { Button } from '../../Button';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
@@ -363,3 +364,54 @@ test('Additional props are spread when inputProps prop is passed', () => {
   render(<SearchInput aria-label="Test input" inputProps={{ autofocus: 'true' }} />);
   expect(screen.getByLabelText('Test input')).toHaveAttribute('autofocus', 'true');
 });
+
+// Animation context tests
+test('respects AnimationsProvider context when no local hasAnimations prop for expandable input', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <SearchInput
+        data-testid="test-id"
+        expandableInput={{
+          isExpanded: false,
+          onToggleExpand: () => {},
+          toggleAriaLabel: 'Test label'
+        }}
+      />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('test-id')).toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+});
+
+test('local hasAnimations prop takes precedence over context for expandable input', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <SearchInput
+        data-testid="test-id"
+        expandableInput={{
+          hasAnimations: false,
+          isExpanded: false,
+          onToggleExpand: () => {},
+          toggleAriaLabel: 'Test label'
+        }}
+      />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('test-id')).not.toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+});
+
+test('works without AnimationsProvider for expandable input (backward compatibility)', () => {
+  render(
+    <SearchInput
+      data-testid="test-id"
+      expandableInput={{
+        isExpanded: false,
+        onToggleExpand: () => {},
+        toggleAriaLabel: 'Test label'
+      }}
+    />
+  );
+
+  expect(screen.getByTestId('test-id')).not.toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+});

package/src/components/Select/Select.tsx

@@ -1,33 +1,12 @@
 import { forwardRef, useEffect, useRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
-import { Popper } from '../../helpers/Popper/Popper';
+import { Popper, PopperOptions } from '../../helpers/Popper/Popper';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId, onToggleArrowKeydownDefault } from '../../helpers';
+import type { SelectOptionProps } from './SelectOption';
 
-export interface SelectPopperProps {
-  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
-  direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center' | 'start' | 'end';
-  /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */
-  width?: string | 'trigger';
-  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */
-  minWidth?: string | 'trigger';
-  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the select toggle's width */
-  maxWidth?: string | 'trigger';
-  /** Enable to flip the popper when it reaches the boundary */
-  enableFlip?: boolean;
-  /** The container to append the select to. Defaults to document.body.
-   * If your select is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * appendTo="inline"
-   * appendTo={() => document.body}
-   * appendTo={document.getElementById('target')}
-   */
-  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
-  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
-  preventOverflow?: boolean;
-}
+/** @deprecated Use PopperOptions instead */
+export type SelectPopperProps = PopperOptions;
 
 export interface SelectToggleProps {
   /**  Select toggle node. */
@@ -56,7 +35,7 @@ export interface SelectProps extends MenuProps, OUIAProps {
   /** @beta Flag indicating the first menu item should be focused after opening the menu. */
   shouldFocusFirstItemOnOpen?: boolean;
   /** Function callback when user selects an option. */
-  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: SelectOptionProps['value']) => void;
   /** Callback to allow the select component to change the open state of the menu.
    * Triggered by clicking outside of the menu, or by pressing any keys specified in onOpenChangeKeys. */
   onOpenChange?: (isOpen: boolean) => void;
@@ -75,7 +54,7 @@ export interface SelectProps extends MenuProps, OUIAProps {
   /** Determines the accessible role of the select. For a checkbox select pass in "menu". */
   role?: string;
   /** Additional properties to pass to the popper */
-  popperProps?: SelectPopperProps;
+  popperProps?: PopperOptions;
   /** Height of the select menu */
   menuHeight?: string;
   /** Maximum height of select menu */