@patternfly/react-core 4.213.1 → 4.213.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.213.1",
+  "version": "4.213.4",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.64.1",
-    "@patternfly/react-styles": "^4.63.1",
-    "@patternfly/react-tokens": "^4.65.1",
+    "@patternfly/react-icons": "^4.64.4",
+    "@patternfly/react-styles": "^4.63.4",
+    "@patternfly/react-tokens": "^4.65.4",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "1917ad7a5448232c182db0b349d88e8dd0be9626"
+  "gitHead": "351d36e715f337de045e0652779d01393c1cf812"
 }

package/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -9,9 +9,10 @@ import { ApplicationLauncherGroup } from './ApplicationLauncherGroup';
 import { ApplicationLauncherSeparator } from './ApplicationLauncherSeparator';
 import { ApplicationLauncherItem } from './ApplicationLauncherItem';
 import { ApplicationLauncherContext } from './ApplicationLauncherContext';
+import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites';
 
-export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement> {
+export interface ApplicationLauncherProps extends ToggleMenuBaseProps, React.HTMLProps<HTMLDivElement> {
   /** Additional element css classes */
   className?: string;
   /** Display menu above or below dropdown toggle */
@@ -34,14 +35,6 @@ export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement
   isGrouped?: boolean;
   /** Toggle Icon, optional to override the icon used for the toggle */
   toggleIcon?: React.ReactNode;
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
   /** ID list of favorited ApplicationLauncherItems */
   favorites?: string[];
   /** Enables favorites. Callback called when an ApplicationLauncherItem's favorite button is clicked */

package/src/components/Card/Card.tsx

@@ -36,15 +36,28 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isPlain?: boolean;
   /** Flag indicating if a card is expanded. Modifies the card to be expandable. */
   isExpanded?: boolean;
+  /** Flag indicating that the card should render a hidden input to make it selectable */
+  hasSelectableInput?: boolean;
+  /** Aria label to apply to the selectable input if one is rendered */
+  selectableInputAriaLabel?: string;
+  /** Callback that executes when the selectable input is changed */
+  onSelectableInputChange?: (labelledBy: string, event: React.FormEvent<HTMLInputElement>) => void;
 }
 
 interface CardContextProps {
   cardId: string;
+  registerTitleId: (id: string) => void;
   isExpanded: boolean;
 }
 
+interface AriaProps {
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+
 export const CardContext = React.createContext<Partial<CardContextProps>>({
   cardId: '',
+  registerTitleId: () => {},
   isExpanded: false
 });
 
@@ -67,10 +80,16 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isPlain = false,
   ouiaId,
   ouiaSafe = true,
+  hasSelectableInput = false,
+  selectableInputAriaLabel,
+  onSelectableInputChange = () => {},
   ...props
 }: CardProps) => {
   const Component = component as any;
   const ouiaProps = useOUIAProps(Card.displayName, ouiaId, ouiaSafe);
+  const [titleId, setTitleId] = React.useState('');
+  const [ariaProps, setAriaProps] = React.useState<AriaProps>();
+
   if (isCompact && isLarge) {
     // eslint-disable-next-line no-console
     console.warn('Card: Cannot use isCompact with isLarge. Defaulting to isCompact');
@@ -90,13 +109,47 @@ export const Card: React.FunctionComponent<CardProps> = ({
     return '';
   };
 
+  const containsCardTitleChildRef = React.useRef(false);
+
+  const registerTitleId = (id: string) => {
+    setTitleId(id);
+    containsCardTitleChildRef.current = !!id;
+  };
+
+  React.useEffect(() => {
+    if (selectableInputAriaLabel) {
+      setAriaProps({ 'aria-label': selectableInputAriaLabel });
+    } else if (titleId) {
+      setAriaProps({ 'aria-labelledby': titleId });
+    } else if (hasSelectableInput && !containsCardTitleChildRef.current) {
+      setAriaProps({});
+      // eslint-disable-next-line no-console
+      console.warn(
+        'If no CardTitle component is passed as a child of Card the selectableInputAriaLabel prop must be passed'
+      );
+    }
+  }, [hasSelectableInput, selectableInputAriaLabel, titleId]);
+
   return (
     <CardContext.Provider
       value={{
         cardId: id,
+        registerTitleId,
         isExpanded
       }}
     >
+      {hasSelectableInput && (
+        <input
+          className="pf-screen-reader"
+          id={`${id}-input`}
+          {...ariaProps}
+          type="checkbox"
+          checked={isSelected}
+          onChange={event => onSelectableInputChange(id, event)}
+          disabled={isDisabledRaised}
+          tabIndex={-1}
+        />
+      )}
       <Component
         id={id}
         className={css(

package/src/components/Card/CardTitle.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
+import { CardContext } from './Card';
 
 export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the CardTitle */
@@ -17,9 +18,18 @@ export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
   component = 'div',
   ...props
 }: CardTitleProps) => {
+  const { cardId, registerTitleId } = React.useContext(CardContext);
   const Component = component as any;
+  const titleId = cardId ? `${cardId}-title` : '';
+
+  React.useEffect(() => {
+    registerTitleId(titleId);
+
+    return () => registerTitleId('');
+  }, [registerTitleId, titleId]);
+
   return (
-    <Component className={css(styles.cardTitle, className)} {...props}>
+    <Component className={css(styles.cardTitle, className)} id={titleId || undefined} {...props}>
       {children}
     </Component>
   );

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

@@ -1,6 +1,9 @@
 import React from 'react';
+
 import { render, screen } from '@testing-library/react';
-import { Card } from '../Card';
+import '@testing-library/jest-dom';
+
+import { Card, CardContext } from '../Card';
 
 describe('Card', () => {
   test('renders with PatternFly Core styles', () => {
@@ -118,4 +121,90 @@ describe('Card', () => {
     render(<Card isLarge isCompact />);
     expect(consoleWarnMock).toHaveBeenCalled();
   });
+
+  test('card renders with a hidden input to improve a11y when hasSelectableInput is passed', () => {
+    render(<Card isSelectable hasSelectableInput />);
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toBeInTheDocument();
+  });
+
+  test('card does not render the hidden input when hasSelectableInput is not passed', () => {
+    render(<Card isSelectable />);
+
+    const selectableInput = screen.queryByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).not.toBeInTheDocument();
+  });
+
+  test('card warns when hasSelectableInput is passed without selectableInputAriaLabel or a card title', () => {
+    const consoleWarnMock = jest.fn();
+    global.console = { warn: consoleWarnMock } as any;
+
+    render(<Card isSelectable hasSelectableInput />);
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(consoleWarnMock).toBeCalled();
+    expect(selectableInput).toHaveAccessibleName('');
+  });
+
+  test('card applies selectableInputAriaLabel to the hidden input', () => {
+    render(<Card isSelectable hasSelectableInput selectableInputAriaLabel="Input label test" />);
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Input label test');
+  });
+
+  test('card applies the supplied card title as the aria label of the hidden input', () => {
+
+    // this component is used to mock the CardTitle's title registry behavior to keep this a pure unit test
+    const MockCardTitle = ({ children }) => {
+      const { registerTitleId } = React.useContext(CardContext);
+      const id = 'card-title-id';
+
+      React.useEffect(() => {
+        registerTitleId(id);
+      });
+
+      return <div id={id}>{children}</div>;
+    };
+
+    render(
+      <Card id="card" isSelectable hasSelectableInput>
+        <MockCardTitle>Card title from title component</MockCardTitle>
+      </Card>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Card title from title component');
+  });
+
+  test('card prioritizes selectableInputAriaLabel over card title labelling via card title', () => {
+
+    // this component is used to mock the CardTitle's title registry behavior to keep this a pure unit test
+    const MockCardTitle = ({ children }) => {
+      const { registerTitleId } = React.useContext(CardContext);
+      const id = 'card-title-id';
+
+      React.useEffect(() => {
+        registerTitleId(id);
+      });
+
+      return <div id={id}>{children}</div>;
+    };
+
+    render(
+      <Card id="card" isSelectable hasSelectableInput selectableInputAriaLabel="Input label test">
+        <MockCardTitle>Card title from title component</MockCardTitle>
+      </Card>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Input label test');
+  });
 });

package/src/components/Card/__tests__/CardTitle.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardTitle } from '../CardTitle';
+import { CardContext } from '../Card';
 
 describe('CardTitle', () => {
   test('renders with PatternFly Core styles', () => {
@@ -19,4 +20,16 @@ describe('CardTitle', () => {
     render(<CardTitle data-testid={testId} />);
     expect(screen.getByTestId(testId)).toBeInTheDocument();
   });
+
+  test('calls the registerTitleId function provided by the CardContext with the generated title id', () => {
+    const mockRegisterTitleId = jest.fn();
+
+    render(
+      <CardContext.Provider value={{ cardId: 'card', registerTitleId: mockRegisterTitleId }}>
+        <CardTitle>text</CardTitle>
+      </CardContext.Provider>
+    );
+
+    expect(mockRegisterTitleId).toHaveBeenCalledWith('card-title');
+  });
 });

package/src/components/Card/examples/Card.md

@@ -71,6 +71,23 @@ import pfLogoSmall from './pf-logo-small.svg';
 ```ts file='./CardSelectable.tsx'
 ```
 
+### Selectable accessibility highlight
+
+This example demonstrates how the `hasSelectableInput` and `onSelectableInputChange` props improve accessibility for selectable cards.
+
+The first card sets `hasSelectableInput` to true, which renders a checkbox input that is only visible to, and navigable by, screen readers. This input communicates to assistive technology users that a card is selectable, and if so, it communicates the current selection state as well.
+
+By default this input will have an aria-label that corresponds to the title given to the card if using the card title component. If you don't use the card title component in your selectable card, you must pass a custom aria-label for this input using the `selectableInputAriaLabel` prop.
+
+The first card also (by passing an onchange callback to `onSelectableInputChange`) enables the selection/deselection of the associated card by checking/unchecking the checkbox input.
+
+The second card does not set `hasSelectableInput` to true, so the input is not rendered. It does not communicate to screen reader users that it is selectable or if it is currently selected.
+
+To best understand this example it is encouraged that you navigate both of these cards using a screen reader.
+
+```ts file='./CardSelectableA11yHighlight.tsx'
+```
+
 ### With heading element
 
 ```ts file='./CardWithHeadingElement.tsx'

package/src/components/Card/examples/CardLegacySelectable.tsx

@@ -31,6 +31,11 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     setSelected(newSelected);
   };
 
+  const onChange = (labelledById: string, _event: React.FormEvent<HTMLInputElement>) => {
+    const newSelected = labelledById === selected ? null : labelledById;
+    setSelected(newSelected);
+  };
+
   const onToggle = (isOpen: boolean, event: any) => {
     event.stopPropagation();
     setIsKebabOpen(isOpen);
@@ -65,8 +70,10 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
         id="legacy-first-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        onSelectableInputChange={onChange}
         isSelectable
         isSelected={selected === 'legacy-first-card'}
+        hasSelectableInput
       >
         <CardHeader>
           <CardActions>
@@ -80,7 +87,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
             />
           </CardActions>
         </CardHeader>
-        <CardTitle>First card</CardTitle>
+        <CardTitle>First legacy selectable card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>
       <br />
@@ -88,10 +95,12 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
         id="legacy-second-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        onSelectableInputChange={onChange}
         isSelectable
         isSelected={selected === 'legacy-second-card'}
+        hasSelectableInput
       >
-        <CardTitle>Second card</CardTitle>
+        <CardTitle>Second legacy selectable card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>
     </>

package/src/components/Card/examples/CardSelectable.tsx

@@ -31,6 +31,11 @@ export const CardSelectable: React.FunctionComponent = () => {
     setSelected(newSelected);
   };
 
+  const onChange = (labelledById: string, _event: React.FormEvent<HTMLInputElement>) => {
+    const newSelected = labelledById === selected ? null : labelledById;
+    setSelected(newSelected);
+  };
+
   const onToggle = (
     isOpen: boolean,
     event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>
@@ -68,6 +73,8 @@ export const CardSelectable: React.FunctionComponent = () => {
         id="selectable-first-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        hasSelectableInput
+        onSelectableInputChange={onChange}
         isSelectableRaised
         isSelected={selected === 'selectable-first-card'}
       >
@@ -91,6 +98,8 @@ export const CardSelectable: React.FunctionComponent = () => {
         id="selectable-second-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        hasSelectableInput
+        onSelectableInputChange={onChange}
         isSelectableRaised
         isSelected={selected === 'selectable-second-card'}
       >
@@ -98,7 +107,7 @@ export const CardSelectable: React.FunctionComponent = () => {
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>
       <br />
-      <Card id="selectable-third-card" isSelectableRaised isDisabledRaised>
+      <Card id="selectable-third-card" isSelectableRaised isDisabledRaised hasSelectableInput>
         <CardTitle>Third card</CardTitle>
         <CardBody>This is a raised but disabled card.</CardBody>
       </Card>

package/src/components/Card/examples/CardSelectableA11yHighlight.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
+
+export const CardSelectableA11yHighlight: React.FunctionComponent = () => {
+  const [selected, setSelected] = React.useState<string>('');
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if ([' ', 'Enter'].includes(event.key)) {
+      event.preventDefault();
+      const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+      setSelected(newSelected);
+    }
+  };
+
+  const onClick = (event: React.MouseEvent) => {
+    const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+    setSelected(newSelected);
+  };
+
+  const onChange = (labelledById: string, _event: React.FormEvent<HTMLInputElement>) => {
+    const newSelected = labelledById === selected ? null : labelledById;
+    setSelected(newSelected);
+  };
+
+  return (
+    <React.Fragment>
+      <Card
+        id="selectable-first-card"
+        onKeyDown={onKeyDown}
+        onClick={onClick}
+        hasSelectableInput
+        onSelectableInputChange={onChange}
+        isSelectableRaised
+        isSelected={selected === 'selectable-first-card'}
+      >
+        <CardTitle>Selectable card with proper accessibility considerations</CardTitle>
+        <CardBody>
+          When using a screen reader a checkbox will become navigable that indicates this card is selectable and
+          communicate if it is currently selected.
+        </CardBody>
+      </Card>
+      <br />
+      <Card
+        id="selectable-second-card"
+        onKeyDown={onKeyDown}
+        onClick={onClick}
+        isSelectableRaised
+        isSelected={selected === 'selectable-second-card'}
+      >
+        <CardTitle>Selectable card without proper accessibility considerations</CardTitle>
+        <CardBody>
+          When using a screen reader there are no indications that this card is selectable or if it is currently
+          selected.
+        </CardBody>
+      </Card>
+    </React.Fragment>
+  );
+};

package/src/components/ContextSelector/ContextSelector.tsx

@@ -10,6 +10,7 @@ import { TextInput } from '../TextInput';
 import { InputGroup } from '../InputGroup';
 import { KEY_CODES } from '../../helpers/constants';
 import { FocusTrap } from '../../helpers';
+import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { Popper } from '../../helpers/Popper/Popper';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
@@ -17,7 +18,7 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 let currentId = 0;
 const newId = currentId++;
 
-export interface ContextSelectorProps extends OUIAProps {
+export interface ContextSelectorProps extends ToggleMenuBaseProps, OUIAProps {
   /** content rendered inside the Context Selector */
   children?: React.ReactNode;
   /** Classes applied to root element of Context Selector */
@@ -28,14 +29,6 @@ export interface ContextSelectorProps extends OUIAProps {
   onToggle?: (event: any, value: boolean) => void;
   /** Function callback called when user selects item */
   onSelect?: (event: any, value: React.ReactNode) => void;
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
   /** Flag indicating that the context selector should expand to full height */
   isFullHeight?: boolean;
   /** Labels the Context Selector for Screen Readers */

package/src/components/Dropdown/Dropdown.tsx

@@ -2,9 +2,10 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { DropdownPosition, DropdownDirection, DropdownContext } from './dropdownConstants';
 import { DropdownWithContext } from './DropdownWithContext';
+import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { OUIAProps, useOUIAId } from '../../helpers';
 
-export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+export interface DropdownProps extends ToggleMenuBaseProps, React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Anything which can be rendered in a dropdown */
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown */
@@ -31,14 +32,6 @@ export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, OUIAProp
   };
   /** Display menu above or below dropdown toggle */
   direction?: DropdownDirection | 'up' | 'down';
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
   /** Flag to indicate if dropdown has groups */
   isGrouped?: boolean;
   /** Toggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox> */
@@ -61,7 +54,6 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   ouiaSafe,
   alignments,
   contextProps,
-  menuAppendTo = 'inline',
   ...props
 }: DropdownProps) => (
   <DropdownContext.Provider
@@ -87,7 +79,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
       ...contextProps
     }}
   >
-    <DropdownWithContext menuAppendTo={menuAppendTo} {...props} />
+    <DropdownWithContext {...props} />
   </DropdownContext.Provider>
 );
 Dropdown.displayName = 'Dropdown';

package/src/components/OptionsMenu/OptionsMenu.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-
 import { DropdownContext } from '../Dropdown';
 import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
 import { OUIAProps, useOUIAId } from '../../helpers';
+import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 
 export enum OptionsMenuPosition {
   right = 'right',
@@ -14,7 +15,7 @@ export enum OptionsMenuDirection {
   down = 'down'
 }
 
-export interface OptionsMenuProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+export interface OptionsMenuProps extends ToggleMenuBaseProps, React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Classes applied to root element of the options menu */
   className?: string;
   /** Id of the root element of the options menu */
@@ -35,14 +36,6 @@ export interface OptionsMenuProps extends React.HTMLProps<HTMLDivElement>, OUIAP
   position?: 'right' | 'left';
   /** Menu will open up or open down from the options menu toggle */
   direction?: 'up' | 'down';
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
 }
 
 export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({

package/src/components/Select/Select.tsx

@@ -33,7 +33,7 @@ import {
 } from '../../helpers';
 import { KeyTypes } from '../../helpers/constants';
 import { Divider } from '../Divider';
-import { Popper } from '../../helpers/Popper/Popper';
+import { ToggleMenuBaseProps, Popper } from '../../helpers/Popper/Popper';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites';
 import { ValidatedOptions } from '../../helpers/constants';
 import { findTabbableElements } from '../../helpers/util';
@@ -48,7 +48,8 @@ export interface SelectViewMoreObject {
   onClick: (event: React.MouseEvent | React.ChangeEvent) => void;
 }
 export interface SelectProps
-  extends Omit<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>,
+  extends ToggleMenuBaseProps,
+    Omit<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>,
     OUIAProps {
   /** Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[] */
   children?: React.ReactElement[];
@@ -164,14 +165,6 @@ export interface SelectProps
   shouldResetOnSelect?: boolean;
   /** Content rendered in the footer of the select menu */
   footer?: React.ReactNode;
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
 }
 
 export interface SelectState {