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

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

@@ -10,9 +10,9 @@ exports[`ContextSelector Renders ContextSelector 1`] = `
   >
     <button
       aria-expanded="false"
-      aria-labelledby="pf-context-selector-label-id-render pf-context-selector-toggle-id-render"
+      aria-labelledby="pf-v5-context-selector-label-id-render pf-v5-context-selector-toggle-id-render"
       class="pf-v5-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-render"
+      id="pf-v5-context-selector-toggle-id-render"
       type="button"
     >
       <span
@@ -48,9 +48,9 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
   >
     <button
       aria-expanded="true"
-      aria-labelledby="pf-context-selector-label-id-render-open pf-context-selector-toggle-id-render-open"
+      aria-labelledby="pf-v5-context-selector-label-id-render-open pf-v5-context-selector-toggle-id-render-open"
       class="pf-v5-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-render-open"
+      id="pf-v5-context-selector-toggle-id-render-open"
       type="button"
     >
       <span
@@ -84,60 +84,68 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
             class="pf-v5-c-input-group"
           >
             <div
-              class="pf-v5-c-text-input-group"
+              class="pf-v5-c-input-group__item pf-m-fill"
             >
               <div
-                class="pf-v5-c-text-input-group__main pf-m-icon"
+                class="pf-v5-c-text-input-group"
               >
-                <span
-                  class="pf-v5-c-text-input-group__text"
+                <div
+                  class="pf-v5-c-text-input-group__main pf-m-icon"
                 >
                   <span
-                    class="pf-v5-c-text-input-group__icon"
+                    class="pf-v5-c-text-input-group__text"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      role="img"
-                      viewBox="0 0 512 512"
+                    <span
+                      class="pf-v5-c-text-input-group__icon"
                     >
-                      <path
-                        d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        role="img"
+                        viewBox="0 0 512 512"
+                      >
+                        <path
+                          d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                        />
+                      </svg>
+                    </span>
+                    <input
+                      aria-label="Search input"
+                      class="pf-v5-c-text-input-group__text-input"
+                      placeholder="Search"
+                      type="text"
+                      value=""
+                    />
                   </span>
-                  <input
-                    aria-label="Search input"
-                    class="pf-v5-c-text-input-group__text-input"
-                    placeholder="Search"
-                    type="text"
-                    value=""
-                  />
-                </span>
+                </div>
               </div>
             </div>
-            <button
-              aria-disabled="false"
-              aria-label="Search menu items"
-              class="pf-v5-c-button pf-m-control"
-              data-ouia-component-id="OUIA-Generated-Button-control-1"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe="true"
-              type="submit"
+            <div
+              class="pf-v5-c-input-group__item pf-m-plain"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                role="img"
-                viewBox="0 0 448 512"
+              <button
+                aria-disabled="false"
+                aria-label="Search menu items"
+                class="pf-v5-c-button pf-m-control"
+                data-ouia-component-id="OUIA-Generated-Button-control-1"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe="true"
+                type="submit"
               >
-                <path
-                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 448 512"
+                >
+                  <path
+                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
         <ul
@@ -211,9 +219,9 @@ exports[`ContextSelector Renders in strict mode 1`] = `
   >
     <button
       aria-expanded="true"
-      aria-labelledby="pf-context-selector-label-id-render pf-context-selector-toggle-id-render"
+      aria-labelledby="pf-v5-context-selector-label-id-render pf-v5-context-selector-toggle-id-render"
       class="pf-v5-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-render"
+      id="pf-v5-context-selector-toggle-id-render"
       type="button"
     >
       <span
@@ -247,60 +255,68 @@ exports[`ContextSelector Renders in strict mode 1`] = `
             class="pf-v5-c-input-group"
           >
             <div
-              class="pf-v5-c-text-input-group"
+              class="pf-v5-c-input-group__item pf-m-fill"
             >
               <div
-                class="pf-v5-c-text-input-group__main pf-m-icon"
+                class="pf-v5-c-text-input-group"
               >
-                <span
-                  class="pf-v5-c-text-input-group__text"
+                <div
+                  class="pf-v5-c-text-input-group__main pf-m-icon"
                 >
                   <span
-                    class="pf-v5-c-text-input-group__icon"
+                    class="pf-v5-c-text-input-group__text"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      role="img"
-                      viewBox="0 0 512 512"
+                    <span
+                      class="pf-v5-c-text-input-group__icon"
                     >
-                      <path
-                        d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        role="img"
+                        viewBox="0 0 512 512"
+                      >
+                        <path
+                          d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                        />
+                      </svg>
+                    </span>
+                    <input
+                      aria-label="Search input"
+                      class="pf-v5-c-text-input-group__text-input"
+                      placeholder="Search"
+                      type="text"
+                      value=""
+                    />
                   </span>
-                  <input
-                    aria-label="Search input"
-                    class="pf-v5-c-text-input-group__text-input"
-                    placeholder="Search"
-                    type="text"
-                    value=""
-                  />
-                </span>
+                </div>
               </div>
             </div>
-            <button
-              aria-disabled="false"
-              aria-label="Search menu items"
-              class="pf-v5-c-button pf-m-control"
-              data-ouia-component-id="OUIA-Generated-Button-control-3"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe="true"
-              type="submit"
+            <div
+              class="pf-v5-c-input-group__item pf-m-plain"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                role="img"
-                viewBox="0 0 448 512"
+              <button
+                aria-disabled="false"
+                aria-label="Search menu items"
+                class="pf-v5-c-button pf-m-control"
+                data-ouia-component-id="OUIA-Generated-Button-control-3"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe="true"
+                type="submit"
               >
-                <path
-                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 448 512"
+                >
+                  <path
+                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
         <ul

package/src/deprecated/components/Dropdown/DropdownToggleCheckbox.tsx

@@ -16,7 +16,7 @@ export interface DropdownToggleCheckboxProps
   isDisabled?: boolean;
   /** Flag to show if the checkbox is checked */
   isChecked?: boolean | null;
-  /** @beta Flag to show if the checkbox is in progress */
+  /** Flag to show if the checkbox is in progress */
   isInProgress?: boolean | null;
   /** Alternate Flag to show if the checkbox is checked */
   checked?: boolean | null;
@@ -28,9 +28,9 @@ export interface DropdownToggleCheckboxProps
   id: string;
   /** Aria-label of the checkbox */
   'aria-label': string;
-  /** @beta Text describing current loading status or progress */
+  /** Text describing current loading status or progress */
   defaultProgressAriaValueText?: string;
-  /** @beta Aria-label for the default progress icon to describe what is loading */
+  /** Aria-label for the default progress icon to describe what is loading */
   defaultProgressAriaLabel?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;

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

@@ -2,7 +2,7 @@
 id: Dropdown
 section: components
 subsection: menus
-cssPrefix: pf-c-dropdown
+cssPrefix: pf-v5-c-dropdown
 propComponents:
   [
     'Dropdown',
@@ -161,7 +161,7 @@ Text labels may optionally be used alongside actions within split buttons.
 
 The `isInProgress` property can be used to indicate a progress state by rendering a spinner in place of a checkbox.
 
-```ts isBeta file="./DropdownSplitButtonProgressCheckbox.tsx"
+```ts file="./DropdownSplitButtonProgressCheckbox.tsx"
 
 ```
 

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

@@ -2,7 +2,7 @@
 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
 ---

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

@@ -1,7 +1,7 @@
 ---
 id: Page
 section: components
-cssPrefix: pf-c-page
+cssPrefix: pf-v5-c-page
 propComponents: ['PageHeader', 'PageHeaderTools', 'PageHeaderToolsGroup', 'PageHeaderToolsItem']
 ---
 

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
       ),