@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.10

package/src/deprecated/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`OptionsMenuItem should match snapshot 1`] = `
       aria-disabled="true"
       class="string"
       data-ouia-component-id="OUIA-Generated-DropdownItem-1"
-      data-ouia-component-type="PF4/DropdownItem"
+      data-ouia-component-type="PF5/DropdownItem"
       data-ouia-safe="true"
       role="menuitem"
       tabindex="-1"

package/src/deprecated/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuToggle.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`OptionsMenuToggle should match snapshot (auto-generated) 1`] = `
     aria-label="'Options menu'"
     class="pf-v5-c-dropdown__toggle"
     data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-    data-ouia-component-type="PF4/DropdownToggle"
+    data-ouia-component-type="PF5/DropdownToggle"
     data-ouia-safe="true"
     id="''-toggle"
     type="button"
@@ -27,8 +27,10 @@ exports[`OptionsMenuToggle should match snapshot (auto-generated) 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 320 512"
+        width="1em"
       >
         <path
           d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"

package/src/deprecated/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`optionsMenu expanded 1`] = `
   <div
     class="pf-v5-c-options-menu pf-m-expanded"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-7"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="expanded"
   >
@@ -15,7 +15,7 @@ exports[`optionsMenu expanded 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="expanded-toggle"
       type="button"
@@ -30,8 +30,10 @@ exports[`optionsMenu expanded 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
@@ -67,7 +69,7 @@ exports[`optionsMenu expanded 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-13"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -84,7 +86,7 @@ exports[`optionsMenu expanded 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-14"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -101,7 +103,7 @@ exports[`optionsMenu expanded 1`] = `
               aria-disabled="true"
               class="pf-m-disabled pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-15"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -118,7 +120,7 @@ exports[`optionsMenu expanded 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-16"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -157,7 +159,7 @@ exports[`optionsMenu expanded 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-17"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -174,7 +176,7 @@ exports[`optionsMenu expanded 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-18"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -199,7 +201,7 @@ exports[`optionsMenu isDisabled 1`] = `
   <div
     class="pf-v5-c-options-menu"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-10"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="disabled"
   >
@@ -209,7 +211,7 @@ exports[`optionsMenu isDisabled 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       disabled=""
       id="disabled-toggle"
@@ -225,8 +227,10 @@ exports[`optionsMenu isDisabled 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
@@ -243,7 +247,7 @@ exports[`optionsMenu open up 1`] = `
   <div
     class="pf-v5-c-options-menu pf-m-top"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-5"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="openUp"
   >
@@ -253,7 +257,7 @@ exports[`optionsMenu open up 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="openUp-toggle"
       type="button"
@@ -268,8 +272,10 @@ exports[`optionsMenu open up 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
@@ -286,7 +292,7 @@ exports[`optionsMenu plain 1`] = `
   <div
     class="pf-v5-c-options-menu"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-8"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="plain"
   >
@@ -296,7 +302,7 @@ exports[`optionsMenu plain 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle pf-m-plain"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="plain-toggle"
       type="button"
@@ -312,7 +318,7 @@ exports[`optionsMenu regular 1`] = `
   <div
     class="pf-v5-c-options-menu"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-1"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="regular"
   >
@@ -322,7 +328,7 @@ exports[`optionsMenu regular 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="regular-toggle"
       type="button"
@@ -337,8 +343,10 @@ exports[`optionsMenu regular 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
@@ -355,7 +363,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
   <div
     class="pf-v5-c-options-menu pf-m-expanded"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-3"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="regular"
   >
@@ -365,7 +373,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="regular-toggle"
       type="button"
@@ -380,8 +388,10 @@ exports[`optionsMenu renders in strict mode 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
@@ -417,7 +427,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-2"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -434,7 +444,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-4"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -451,7 +461,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
               aria-disabled="true"
               class="pf-m-disabled pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-6"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -468,7 +478,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-8"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -507,7 +517,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-10"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -524,7 +534,7 @@ exports[`optionsMenu renders in strict mode 1`] = `
               aria-disabled="false"
               class="pf-v5-c-options-menu__menu-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-12"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
               tabindex="-1"
@@ -549,7 +559,7 @@ exports[`optionsMenu right aligned + open up 1`] = `
   <div
     class="pf-v5-c-options-menu pf-m-top pf-m-align-right"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-6"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="rightAlignedOpenUp"
   >
@@ -559,7 +569,7 @@ exports[`optionsMenu right aligned + open up 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="rightAlignedOpenUp-toggle"
       type="button"
@@ -574,8 +584,10 @@ exports[`optionsMenu right aligned + open up 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
@@ -592,7 +604,7 @@ exports[`optionsMenu right aligned 1`] = `
   <div
     class="pf-v5-c-options-menu pf-m-align-right"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-4"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="rightAligned"
   >
@@ -602,7 +614,7 @@ exports[`optionsMenu right aligned 1`] = `
       aria-label="Options menu"
       class="pf-v5-c-options-menu__toggle"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
-      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-component-type="PF5/DropdownToggle"
       data-ouia-safe="true"
       id="rightAligned-toggle"
       type="button"
@@ -617,8 +629,10 @@ exports[`optionsMenu right aligned 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
@@ -635,7 +649,7 @@ exports[`optionsMenu text 1`] = `
   <div
     class="pf-v5-c-options-menu"
     data-ouia-component-id="OUIA-Generated-OptionsMenu-9"
-    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-component-type="PF5/OptionsMenu"
     data-ouia-safe="true"
     id="text"
   >

package/src/deprecated/components/OptionsMenu/examples/OptionsMenu.md

@@ -2,9 +2,10 @@
 id: Options menu
 section: components
 subsection: menus
-cssPrefix: pf-c-options-menu
+cssPrefix: pf-v5-c-options-menu
 propComponents: ['OptionsMenu', 'OptionsMenuItem', 'OptionsMenuSeparator', 'OptionsMenuToggle', 'OptionsMenuToggleWithText']
 ouia: true
+deprecated: true
 ---
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';

package/src/deprecated/components/PageHeader/examples/PageHeader.md

@@ -1,8 +1,9 @@
 ---
 id: Page
 section: components
-cssPrefix: pf-c-page
+cssPrefix: pf-v5-c-page
 propComponents: ['PageHeader', 'PageHeaderTools', 'PageHeaderToolsGroup', 'PageHeaderToolsItem']
+deprecated: true
 ---
 
 import { PageHeader as PageHeaderDeprecated, PageHeaderTools } from '@patternfly/react-core/deprecated';

package/src/deprecated/components/Select/Select.tsx

@@ -295,7 +295,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     // Move focus to top of the menu if state.focusFirstOption was updated to true and the menu does not have custom content
     if (!prevState.focusFirstOption && this.state.focusFirstOption && !this.props.customContent) {
       const firstRef = this.refCollection.find(
-        ref =>
+        (ref) =>
           // If a select option is disabled then ref[0] will be undefined, so we want to return
           // the first ref that both a) is not null and b) is not disabled.
           ref !== null && ref[0]
@@ -467,14 +467,14 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           this.getDisplay(child.props.value.toString(), 'text').search(input) === 0;
         typeaheadFilteredChildren =
           typeaheadInputValue.toString() !== ''
-            ? React.Children.map(children, group => {
+            ? React.Children.map(children, (group) => {
                 if (
                   React.isValidElement<React.ComponentProps<typeof SelectGroup>>(group) &&
                   group.type === SelectGroup
                 ) {
-                  const filteredGroupChildren = (React.Children.toArray(group.props.children) as React.ReactElement<
-                    SelectGroupProps
-                  >[]).filter(childFilter);
+                  const filteredGroupChildren = (
+                    React.Children.toArray(group.props.children) as React.ReactElement<SelectGroupProps>[]
+                  ).filter(childFilter);
                   if (filteredGroupChildren.length > 0) {
                     return React.cloneElement(group, {
                       titleId: group.props.label && group.props.label.replace(/\W/g, '-'),
@@ -489,7 +489,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       } else {
         typeaheadFilteredChildren =
           typeaheadInputValue.toString() !== ''
-            ? childrenArray.filter(child => {
+            ? childrenArray.filter((child) => {
                 const valueToCheck = child.props.value;
                 // Dividers don't have value and should not be filtered
                 if (!valueToCheck) {
@@ -540,10 +540,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         const newOptionValue = isCreateSelectOptionObject
           ? ({
               toString: () => newValue,
-              compareTo: value =>
-                this.toString()
-                  .toLowerCase()
-                  .includes(value.toString().toLowerCase())
+              compareTo: (value) => this.toString().toLowerCase().includes(value.toString().toLowerCase())
             } as SelectOptionObject)
           : newValue;
 
@@ -665,8 +662,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     optionContainerRef: React.ReactNode,
     index: number
   ) => {
-    this.refCollection[index] = [(optionRef as unknown) as HTMLElement, (favoriteRef as unknown) as HTMLElement];
-    this.optionContainerRefCollection[index] = (optionContainerRef as unknown) as HTMLElement;
+    this.refCollection[index] = [optionRef as unknown as HTMLElement, favoriteRef as unknown as HTMLElement];
+    this.optionContainerRefCollection[index] = optionContainerRef as unknown as HTMLElement;
   };
 
   handleMenuKeys = (index: number, innerIndex: number, position: string) => {
@@ -698,7 +695,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       // !isLoad prevents the view more button text from appearing the typeahead input
       typeaheadInputValue = optionTextElm.textContent;
     }
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       typeaheadCurrIndex: updateCurrentIndex ? nextIndex : prevState.typeaheadCurrIndex,
       typeaheadStoredIndex: nextIndex,
       typeaheadInputValue
@@ -900,7 +897,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         this.moveFocus(nextIndex);
       } else {
         const nextIndex = this.refCollection.findIndex(
-          ref => ref !== undefined && (ref[0] === document.activeElement || ref[1] === document.activeElement)
+          (ref) => ref !== undefined && (ref[0] === document.activeElement || ref[1] === document.activeElement)
         );
         this.moveFocus(nextIndex);
       }
@@ -920,9 +917,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     const item = this.props.isGrouped
       ? (React.Children.toArray(this.props.children) as React.ReactElement[])
           .reduce((acc, curr) => [...acc, ...React.Children.toArray(curr.props.children)], [])
-          .find(child => child.props.value.toString() === value.toString())
+          .find((child) => child.props.value.toString() === value.toString())
       : React.Children.toArray(this.props.children).find(
-          child =>
+          (child) =>
             (child as React.ReactElement).props.value &&
             (child as React.ReactElement).props.value.toString() === value.toString()
         );
@@ -945,7 +942,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       return '';
     } else {
       const multi: string[] = [];
-      React.Children.toArray(item.props.children).forEach(child => multi.push(this.findText(child)));
+      React.Children.toArray(item.props.children).forEach((child) => multi.push(this.findText(child)));
       return multi.join('');
     }
   };
@@ -1084,7 +1081,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     }
 
     if (isOpen) {
-      if (renderableItems.find(item => (item as any)?.key === 'loading') === undefined) {
+      if (renderableItems.find((item) => (item as any)?.key === 'loading') === undefined) {
         if (loadingVariant === 'spinner') {
           renderableItems.push(
             <SelectOption isLoading key="loading" value="loading">
@@ -1109,7 +1106,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     const clearBtn = (
       <button
         className={css(buttonStyles.button, buttonStyles.modifiers.plain, styles.selectToggleClear)}
-        onClick={e => {
+        onClick={(e) => {
           this.clearSelection(e);
           onClear(e);
           e.stopPropagation();
@@ -1118,7 +1115,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         type="button"
         disabled={isDisabled}
         ref={this.clearRef}
-        onKeyDown={event => {
+        onKeyDown={(event) => {
           if (event.key === KeyTypes.Enter) {
             this.clearRef.current.click();
           }
@@ -1135,7 +1132,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       ) : (
         <ChipGroup {...chipGroupProps}>
           {selections &&
-            (selections as string[]).map(item => (
+            (selections as string[]).map((item) => (
               <Chip
                 key={item}
                 onClick={(e: React.MouseEvent) => onSelect(e, item)}
@@ -1151,14 +1148,13 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     if (hasInlineFilter) {
       const filterBox = (
         <React.Fragment>
-          <div key="inline-filter" className={css(styles.selectMenuSearch)}>
+          <div key="inline-filter" className={css(styles.selectMenuSearch, formStyles.formControl)}>
             <input
               key="inline-filter-input"
               type="search"
-              className={css(formStyles.formControl, formStyles.modifiers.search)}
               onChange={this.onChange}
               placeholder={inlineFilterPlaceholderText}
-              onKeyDown={event => {
+              onKeyDown={(event) => {
                 if (event.key === KeyTypes.ArrowUp) {
                   this.handleMenuKeys(0, 0, 'up');
                   event.preventDefault();
@@ -1385,25 +1381,26 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             <React.Fragment>
               <div className={css(styles.selectToggleWrapper)}>
                 {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-                <input
-                  className={css(formStyles.formControl, styles.selectToggleTypeahead)}
-                  aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
-                  id={`${selectToggleId}-select-typeahead`}
-                  aria-label={typeAheadAriaLabel}
-                  {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
-                  placeholder={placeholderText as string}
-                  value={
-                    typeaheadInputValue !== null
-                      ? typeaheadInputValue
-                      : this.getDisplay(selections[0] as string, 'text') || ''
-                  }
-                  type="text"
-                  onClick={this.onClick}
-                  onChange={this.onChange}
-                  autoComplete={inputAutoComplete}
-                  disabled={isDisabled}
-                  ref={this.inputRef}
-                />
+                <div className={css(formStyles.formControl, styles.selectToggleTypeahead)}>
+                  <input
+                    aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
+                    id={`${selectToggleId}-select-typeahead`}
+                    aria-label={typeAheadAriaLabel}
+                    {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
+                    placeholder={placeholderText as string}
+                    value={
+                      typeaheadInputValue !== null
+                        ? typeaheadInputValue
+                        : this.getDisplay(selections[0] as string, 'text') || ''
+                    }
+                    type="text"
+                    onClick={this.onClick}
+                    onChange={this.onChange}
+                    autoComplete={inputAutoComplete}
+                    disabled={isDisabled}
+                    ref={this.inputRef}
+                  />
+                </div>
               </div>
               {hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn}
             </React.Fragment>
@@ -1413,22 +1410,23 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
               <div className={css(styles.selectToggleWrapper)}>
                 {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
                 {selections && Array.isArray(selections) && selections.length > 0 && selectedChips}
-                <input
-                  className={css(formStyles.formControl, styles.selectToggleTypeahead)}
-                  aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
-                  id={`${selectToggleId}-select-multi-typeahead-typeahead`}
-                  aria-label={typeAheadAriaLabel}
-                  aria-invalid={validated === ValidatedOptions.error}
-                  {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
-                  placeholder={placeholderText as string}
-                  value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
-                  type="text"
-                  onChange={this.onChange}
-                  onClick={this.onClick}
-                  autoComplete={inputAutoComplete}
-                  disabled={isDisabled}
-                  ref={this.inputRef}
-                />
+                <div className={css(formStyles.formControl, styles.selectToggleTypeahead)}>
+                  <input
+                    aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
+                    id={`${selectToggleId}-select-multi-typeahead-typeahead`}
+                    aria-label={typeAheadAriaLabel}
+                    aria-invalid={validated === ValidatedOptions.error}
+                    {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
+                    placeholder={placeholderText as string}
+                    value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
+                    type="text"
+                    onChange={this.onChange}
+                    onClick={this.onClick}
+                    autoComplete={inputAutoComplete}
+                    disabled={isDisabled}
+                    ref={this.inputRef}
+                  />
+                </div>
               </div>
               {hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn}
             </React.Fragment>
@@ -1462,7 +1460,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
 
     return (
       <GenerateId>
-        {randomId => (
+        {(randomId) => (
           <SelectContext.Provider
             value={{
               onSelect,
@@ -1477,6 +1475,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
               mainContainer
             ) : (
               <Popper
+                width="auto"
                 trigger={mainContainer}
                 triggerRef={this.parentRef}
                 popper={popperContainer}

package/src/deprecated/components/Select/SelectMenu.tsx

@@ -214,7 +214,7 @@ class SelectMenuWithRef extends React.Component<SelectMenuProps> {
     const variantProps = {
       ref: innerRef,
       className: css(
-        !footer ? styles.selectMenu : 'pf-c-select__menu-list',
+        !footer ? styles.selectMenu : 'pf-v5-c-select__menu-list',
         position === SelectPosition.right && styles.modifiers.alignRight,
         className
       ),