@patternfly/react-templates 6.0.0-alpha.20 → 6.0.0-alpha.22

package/src/components/Dropdown/__tests__/{DropdownSimple.test.tsx → SimpleDropdown.test.tsx}

@@ -1,30 +1,42 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { DropdownSimple } from '../DropdownSimple';
+import { SimpleDropdown } from '../SimpleDropdown';
 import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
 
 describe('Dropdown toggle', () => {
   test('Renders dropdown toggle as not disabled when isDisabled is not true', () => {
-    render(<DropdownSimple toggleContent="Dropdown" />);
+    render(<SimpleDropdown toggleContent="Dropdown" />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).not.toBeDisabled();
   });
 
   test('Renders dropdown toggle as disabled when isDisabled is true', () => {
-    render(<DropdownSimple toggleContent="Dropdown" isDisabled />);
+    render(<SimpleDropdown toggleContent="Dropdown" isDisabled />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).toBeDisabled();
   });
 
   test('Passes toggleVariant', () => {
-    render(<DropdownSimple toggleContent="Dropdown" toggleVariant="plain" />);
+    render(<SimpleDropdown toggleContent="Dropdown" toggleVariant="plain" />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).toHaveClass(styles.modifiers.plain);
   });
 
+  test('Passes toggleWidth', () => {
+    render(<SimpleDropdown toggleContent="Dropdown" toggleWidth="500px" />);
+
+    expect(screen.getByRole('button', { name: 'Dropdown' })).toHaveAttribute('style', 'width: 500px;');
+  });
+
+  test('Passes additional toggleProps', () => {
+    render(<SimpleDropdown toggleContent="Dropdown" toggleProps={{ id: 'toggle' }} />);
+
+    expect(screen.getByRole('button', { name: 'Dropdown' })).toHaveAttribute('id', 'toggle');
+  });
+
   test('Passes toggleAriaLabel', () => {
-    render(<DropdownSimple toggleContent="Dropdown" toggleAriaLabel="Aria label content" />);
+    render(<SimpleDropdown toggleContent="Dropdown" toggleAriaLabel="Aria label content" />);
 
     expect(screen.getByRole('button')).toHaveAccessibleName('Aria label content');
   });
@@ -32,7 +44,7 @@ describe('Dropdown toggle', () => {
   test('Calls onToggle with next isOpen state when dropdown toggle is clicked', async () => {
     const onToggle = jest.fn();
     const user = userEvent.setup();
-    render(<DropdownSimple onToggle={onToggle} toggleContent="Dropdown" />);
+    render(<SimpleDropdown onToggle={onToggle} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -46,7 +58,7 @@ describe('Dropdown toggle', () => {
     render(
       <div>
         <button>Actual</button>
-        <DropdownSimple initialItems={items} onToggle={onToggle} toggleContent="Dropdown" />
+        <SimpleDropdown initialItems={items} onToggle={onToggle} toggleContent="Dropdown" />
       </div>
     );
 
@@ -59,7 +71,7 @@ describe('Dropdown toggle', () => {
     const onSelect = jest.fn();
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -73,7 +85,7 @@ describe('Dropdown toggle', () => {
     const onSelect = jest.fn();
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -82,13 +94,13 @@ describe('Dropdown toggle', () => {
   });
 
   test('Does not pass isToggleFullWidth to menu toggle by default', () => {
-    render(<DropdownSimple toggleContent="Dropdown" />);
+    render(<SimpleDropdown toggleContent="Dropdown" />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).not.toHaveClass(styles.modifiers.fullWidth);
   });
 
   test('Passes isToggleFullWidth to menu toggle when passed in', () => {
-    render(<DropdownSimple isToggleFullWidth toggleContent="Dropdown" />);
+    render(<SimpleDropdown isToggleFullWidth toggleContent="Dropdown" />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).toHaveClass(styles.modifiers.fullWidth);
   });
@@ -96,7 +108,7 @@ describe('Dropdown toggle', () => {
   test('Does not focus toggle on item select by default', async () => {
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -109,7 +121,7 @@ describe('Dropdown toggle', () => {
   test('Focuses toggle on item select when shouldFocusToggleOnSelect is true', async () => {
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple shouldFocusToggleOnSelect initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown shouldFocusToggleOnSelect initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -120,7 +132,7 @@ describe('Dropdown toggle', () => {
   });
 
   test('Matches snapshot', () => {
-    const { asFragment } = render(<DropdownSimple toggleContent="Dropdown" />);
+    const { asFragment } = render(<SimpleDropdown toggleContent="Dropdown" />);
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -133,7 +145,7 @@ describe('Dropdown items', () => {
       { value: 'separator', isDivider: true }
     ];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -147,7 +159,7 @@ describe('Dropdown items', () => {
   test('Renders with a link item', async () => {
     const items = [{ content: 'Link', value: 1, to: '#' }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -159,7 +171,7 @@ describe('Dropdown items', () => {
   test('Renders with items not disabled by default', async () => {
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -171,7 +183,7 @@ describe('Dropdown items', () => {
   test('Renders with a disabled item', async () => {
     const items = [{ content: 'Action', value: 1, isDisabled: true }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -183,7 +195,7 @@ describe('Dropdown items', () => {
   test('Spreads props on item', async () => {
     const items = [{ content: 'Action', value: 1, id: 'Test' }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -196,7 +208,7 @@ describe('Dropdown items', () => {
     const onClick = jest.fn();
     const items = [{ content: 'Action', value: 1, onClick }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -213,7 +225,7 @@ describe('Dropdown items', () => {
       { content: 'Action 2', value: 2 }
     ];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -227,7 +239,7 @@ describe('Dropdown items', () => {
     const onClick = jest.fn();
     const items = [{ content: 'Action', value: 1, onClick, isDisabled: true }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -244,7 +256,7 @@ describe('Dropdown items', () => {
       { content: 'Link', value: 'separator', to: '#', ouiaId: '3' }
     ];
     const user = userEvent.setup();
-    const { asFragment } = render(<DropdownSimple ouiaId={4} initialItems={items} toggleContent="Dropdown" />);
+    const { asFragment } = render(<SimpleDropdown ouiaId={4} initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);

package/src/components/Dropdown/__tests__/__snapshots__/{DropdownSimple.test.tsx.snap → SimpleDropdown.test.tsx.snap}

@@ -5,6 +5,9 @@ exports[`Dropdown items Matches snapshot 1`] = `
   <button
     aria-expanded="true"
     class="pf-v6-c-menu-toggle pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-default-23"
+    data-ouia-component-type="PF6/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -114,6 +117,9 @@ exports[`Dropdown toggle Matches snapshot 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-menu-toggle"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-default-14"
+    data-ouia-component-type="PF6/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span

package/src/components/Dropdown/examples/DropdownTemplates.md

@@ -4,33 +4,21 @@ section: components
 subsection: menus
 template: true
 beta: true
-propComponents: ['DropdownSimple', 'DropdownSimpleItem']
+propComponents: ['SimpleDropdown', 'SimpleDropdownItem']
 ---
 
 Note: Templates live in their own package at [@patternfly/react-templates](https://www.npmjs.com/package/@patternfly/react-templates)!
 
 For custom use cases, please see the dropdown component suite from [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core).
 
-import {
-Checkbox,
-Divider,
-Dropdown,
-DropdownItem,
-DropdownList,
-DropdownItemProps,
-Flex,
-FlexItem,
-MenuToggle,
-MenuToggleElement,
-OUIAProps
-} from '@patternfly/react-core';
-import { DropdownSimple, DropdownSimpleItem } from '@patternfly/react-templates';
+import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
+import { SimpleDropdown } from '@patternfly/react-templates';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
 
 ### Simple
 
-```ts file="./DropdownSimpleExample.tsx"
+```ts file="./SimpleDropdownExample.tsx"
 
 ```

package/src/components/Dropdown/examples/{DropdownSimpleExample.tsx → SimpleDropdownExample.tsx}

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
-import { DropdownSimple, DropdownSimpleItem } from '@patternfly/react-templates';
+import { SimpleDropdown, SimpleDropdownItem } from '@patternfly/react-templates';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
-export const DropdownSimpleExample: React.FunctionComponent = () => {
+export const SimpleDropdownExample: React.FunctionComponent = () => {
   const [isDisabled, setIsDisabled] = React.useState(false);
 
-  const items: DropdownSimpleItem[] = [
+  const items: SimpleDropdownItem[] = [
     // eslint-disable-next-line no-console
     { content: 'Action', value: 1, onClick: () => console.log('Action clicked') },
     // Prevent default click behavior on link for example purposes
@@ -21,17 +21,17 @@ export const DropdownSimpleExample: React.FunctionComponent = () => {
     <React.Fragment>
       <Checkbox
         id="simple-example-disabled-toggle"
-        label="Disable dropdown simple toggles"
+        label="Disable simple dropdown toggles"
         isChecked={isDisabled}
         onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) => setIsDisabled(checked)}
         style={{ marginBottom: 20 }}
       />
       <Flex gap={{ default: 'gapLg' }}>
         <FlexItem>
-          <DropdownSimple initialItems={items} isDisabled={isDisabled} toggleContent="Dropdown" />
+          <SimpleDropdown initialItems={items} isDisabled={isDisabled} toggleContent="Dropdown" />
         </FlexItem>
         <FlexItem>
-          <DropdownSimple
+          <SimpleDropdown
             toggleVariant="plainText"
             initialItems={items}
             isDisabled={isDisabled}
@@ -39,7 +39,7 @@ export const DropdownSimpleExample: React.FunctionComponent = () => {
           />
         </FlexItem>
         <FlexItem>
-          <DropdownSimple
+          <SimpleDropdown
             toggleVariant="plain"
             initialItems={items}
             isDisabled={isDisabled}

package/src/components/Dropdown/index.ts

@@ -1 +1 @@
-export * from './DropdownSimple';
+export * from './SimpleDropdown';

package/src/components/Select/CheckboxSelect.tsx

@@ -3,10 +3,12 @@ import {
   Badge,
   MenuToggle,
   MenuToggleElement,
+  MenuToggleProps,
   Select,
   SelectList,
   SelectOption,
-  SelectOptionProps
+  SelectOptionProps,
+  SelectProps
 } from '@patternfly/react-core';
 
 export interface CheckboxSelectOption extends Omit<SelectOptionProps, 'content'> {
@@ -16,7 +18,7 @@ export interface CheckboxSelectOption extends Omit<SelectOptionProps, 'content'>
   value: string | number;
 }
 
-export interface CheckboxSelectProps {
+export interface CheckboxSelectProps extends Omit<SelectProps, 'toggle'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
@@ -27,8 +29,12 @@ export interface CheckboxSelectProps {
   onToggle?: (nextIsOpen: boolean) => void;
   /** Flag indicating the select should be disabled. */
   isDisabled?: boolean;
-  /** Content of the toggle. Defaults to the selected option. */
+  /** Content of the toggle. Defaults to a string with badge count of selected options. */
   toggleContent?: React.ReactNode;
+  /** Width of the toggle. */
+  toggleWidth?: string;
+  /** Additional props passed to the toggle. */
+  toggleProps?: MenuToggleProps;
 }
 
 const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
@@ -38,6 +44,8 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
   onSelect: passedOnSelect,
   onToggle,
   toggleContent,
+  toggleWidth = '200px',
+  toggleProps,
   ...props
 }: CheckboxSelectProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -47,7 +55,7 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
     const { content, value, ...props } = option;
     const isSelected = selected.includes(`${value}`);
     return (
-      <SelectOption {...props} value={value} key={value} hasCheckbox isSelected={isSelected}>
+      <SelectOption value={value} key={value} hasCheckbox isSelected={isSelected} {...props}>
         {content}
       </SelectOption>
     );
@@ -83,9 +91,10 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
       isDisabled={isDisabled}
       style={
         {
-          width: '200px'
+          width: toggleWidth
         } as React.CSSProperties
       }
+      {...toggleProps}
     >
       {toggleContent || defaultToggleContent}
     </MenuToggle>
@@ -93,11 +102,13 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
 
   return (
     <Select
-      id="checkbox-select"
       isOpen={isOpen}
       selected={selected}
       onSelect={onSelect}
-      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChange={(isOpen) => {
+        onToggle && onToggle(isOpen);
+        setIsOpen(isOpen);
+      }}
       toggle={toggle}
       ref={innerRef}
       role="menu"

package/src/components/Select/{SelectSimple.tsx → SimpleSelect.tsx}

@@ -1,19 +1,25 @@
 import React from 'react';
-import { Select, SelectList, SelectOption, SelectOptionProps } from '@patternfly/react-core/dist/esm/components/Select';
-import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/esm/components/MenuToggle';
+import {
+  Select,
+  SelectList,
+  SelectOption,
+  SelectOptionProps,
+  SelectProps
+} from '@patternfly/react-core/dist/esm/components/Select';
+import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 
-export interface SelectSimpleOption extends Omit<SelectOptionProps, 'content'> {
+export interface SimpleSelectOption extends Omit<SelectOptionProps, 'content'> {
   /** Content of the select option. */
   content: React.ReactNode;
   /** Value of the select option. */
   value: string | number;
 }
 
-export interface SelectSimpleProps {
+export interface SimpleSelectProps extends Omit<SelectProps, 'toggle'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
-  initialOptions?: SelectSimpleOption[];
+  initialOptions?: SimpleSelectOption[];
   /** Callback triggered on selection. */
   onSelect?: (_event: React.MouseEvent<Element, MouseEvent>, selection: string | number) => void;
   /** Callback triggered when the select opens or closes. */
@@ -22,11 +28,13 @@ export interface SelectSimpleProps {
   isDisabled?: boolean;
   /** Content of the toggle. Defaults to the selected option. */
   toggleContent?: React.ReactNode;
-  /** Width of the toggle */
+  /** Width of the toggle. */
   toggleWidth?: string;
+  /** Additional props passed to the toggle. */
+  toggleProps?: MenuToggleProps;
 }
 
-const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
+const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
   innerRef,
   initialOptions,
   isDisabled,
@@ -34,8 +42,9 @@ const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
   onToggle,
   toggleContent,
   toggleWidth = '200px',
+  toggleProps,
   ...props
-}: SelectSimpleProps) => {
+}: SimpleSelectProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string>('Select a value');
 
@@ -43,7 +52,7 @@ const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
     const { content, value, ...props } = option;
     const isSelected = selected.includes(`${value}`);
     return (
-      <SelectOption {...props} value={value} key={value} isSelected={isSelected}>
+      <SelectOption value={value} key={value} isSelected={isSelected} {...props}>
         {content}
       </SelectOption>
     );
@@ -57,6 +66,7 @@ const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
   const _onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     onSelect && onSelect(_event, value);
     setSelected(value as string);
+    onToggle && onToggle(!false);
     setIsOpen(false);
   };
 
@@ -71,6 +81,7 @@ const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
           width: toggleWidth
         } as React.CSSProperties
       }
+      {...toggleProps}
     >
       {toggleContent ? toggleContent : selected}
     </MenuToggle>
@@ -78,11 +89,13 @@ const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
 
   return (
     <Select
-      id="single-select"
       isOpen={isOpen}
       selected={selected}
       onSelect={_onSelect}
-      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChange={(isOpen) => {
+        onToggle && onToggle(isOpen);
+        setIsOpen(isOpen);
+      }}
       toggle={toggle}
       shouldFocusToggleOnSelect
       ref={innerRef}
@@ -93,8 +106,8 @@ const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
   );
 };
 
-export const SelectSimple = React.forwardRef((props: SelectSimpleProps, ref: React.Ref<any>) => (
-  <SelectSimpleBase {...props} innerRef={ref} />
+export const SimpleSelect = React.forwardRef((props: SimpleSelectProps, ref: React.Ref<any>) => (
+  <SimpleSelectBase {...props} innerRef={ref} />
 ));
 
-SelectSimple.displayName = 'SelectSimple';
+SimpleSelect.displayName = 'SimpleSelect';

package/src/components/Select/{SelectTypeahead.tsx → TypeaheadSelect.tsx}

@@ -9,22 +9,24 @@ import {
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
-  Button
+  Button,
+  MenuToggleProps,
+  SelectProps
 } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-export interface SelectTypeaheadOption extends Omit<SelectOptionProps, 'content'> {
+export interface TypeaheadSelectOption extends Omit<SelectOptionProps, 'content'> {
   /** Content of the select option. */
   content: string | number;
   /** Value of the select option. */
   value: string | number;
 }
 
-export interface SelectTypeaheadProps {
+export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
-  initialOptions: SelectTypeaheadOption[];
+  initialOptions: TypeaheadSelectOption[];
   /** Callback triggered on selection. */
   onSelect?: (
     _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement>,
@@ -40,9 +42,13 @@ export interface SelectTypeaheadProps {
   noOptionsFoundMessage?: string | ((filter: string) => string);
   /** Flag indicating the select should be disabled. */
   isDisabled?: boolean;
+  /** Width of the toggle. */
+  toggleWidth?: string;
+  /** Additional props passed to the toggle. */
+  toggleProps?: MenuToggleProps;
 }
 
-export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps> = ({
+export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps> = ({
   innerRef,
   initialOptions,
   onSelect,
@@ -51,13 +57,15 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
   placeholder = 'Select an option',
   noOptionsFoundMessage = (filter) => `No results found for "${filter}"`,
   isDisabled,
+  toggleWidth,
+  toggleProps,
   ...props
-}: SelectTypeaheadProps) => {
+}: TypeaheadSelectProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string>('');
   const [inputValue, setInputValue] = React.useState<string>('');
   const [filterValue, setFilterValue] = React.useState<string>('');
-  const [selectOptions, setSelectOptions] = React.useState<SelectTypeaheadOption[]>(initialOptions);
+  const [selectOptions, setSelectOptions] = React.useState<TypeaheadSelectOption[]>(initialOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
   const textInputRef = React.useRef<HTMLInputElement>();
@@ -65,7 +73,7 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
   const NO_RESULTS = 'no results';
 
   React.useEffect(() => {
-    let newSelectOptions: SelectTypeaheadOption[] = initialOptions;
+    let newSelectOptions: TypeaheadSelectOption[] = initialOptions;
 
     // Filter menu items based on the text input value when one exists
     if (filterValue) {
@@ -92,14 +100,12 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
     }
 
     setSelectOptions(newSelectOptions);
-  }, [filterValue]);
-
-  const createItemId = (value: string | number) => `select-typeahead-${String(value).replace(' ', '-')}`;
+  }, [filterValue, initialOptions]);
 
   const setActiveAndFocusedItem = (itemIndex: number) => {
     setFocusedItemIndex(itemIndex);
     const focusedItem = selectOptions[itemIndex];
-    setActiveItemId(createItemId(focusedItem.value));
+    setActiveItemId(focusedItem.value as string);
   };
 
   const resetActiveAndFocusedItem = () => {
@@ -128,7 +134,7 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
 
   const selectOption = (
     _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,
-    option: SelectTypeaheadOption
+    option: TypeaheadSelectOption
   ) => {
     onSelect && onSelect(_event, option.value);
 
@@ -216,6 +222,7 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
         }
 
         if (!isOpen) {
+          onToggle && onToggle(true);
           setIsOpen(true);
         }
 
@@ -252,6 +259,12 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
       isExpanded={isOpen}
       isDisabled={isDisabled}
       isFullWidth
+      style={
+        {
+          width: toggleWidth
+        } as React.CSSProperties
+      }
+      {...toggleProps}
     >
       <TextInputGroup isPlain>
         <TextInputGroupMain
@@ -259,7 +272,6 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
           onClick={onInputClick}
           onChange={onTextInputChange}
           onKeyDown={onInputKeyDown}
-          id="typeahead-select-input"
           autoComplete="off"
           innerRef={textInputRef}
           placeholder={placeholder}
@@ -280,7 +292,6 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
 
   return (
     <Select
-      id="typeahead-select"
       isOpen={isOpen}
       selected={selected}
       onSelect={_onSelect}
@@ -292,18 +303,12 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
       ref={innerRef}
       {...props}
     >
-      <SelectList id="select-typeahead-listbox">
+      <SelectList>
         {selectOptions.map((option, index) => {
           const { content, value, ...props } = option;
 
           return (
-            <SelectOption
-              {...props}
-              key={value}
-              value={value}
-              isFocused={focusedItemIndex === index}
-              id={createItemId(value)}
-            >
+            <SelectOption key={value} value={value} isFocused={focusedItemIndex === index} {...props}>
               {content}
             </SelectOption>
           );
@@ -312,10 +317,10 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
     </Select>
   );
 };
-SelectTypeaheadBase.displayName = 'SelectTypeaheadBase';
+TypeaheadSelectBase.displayName = 'TypeaheadSelectBase';
 
-export const SelectTypeahead = React.forwardRef((props: SelectTypeaheadProps, ref: React.Ref<any>) => (
-  <SelectTypeaheadBase {...props} innerRef={ref} />
+export const TypeaheadSelect = React.forwardRef((props: TypeaheadSelectProps, ref: React.Ref<any>) => (
+  <TypeaheadSelectBase {...props} innerRef={ref} />
 ));
 
-SelectTypeahead.displayName = 'SelectTypeahead';
+TypeaheadSelect.displayName = 'TypeaheadSelect';