@patternfly/react-core 4.201.2 → 4.202.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.201.2",
+  "version": "4.202.2",
   "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,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.52.2",
-    "@patternfly/react-styles": "^4.51.2",
-    "@patternfly/react-tokens": "^4.53.2",
+    "@patternfly/react-icons": "^4.53.2",
+    "@patternfly/react-styles": "^4.52.2",
+    "@patternfly/react-tokens": "^4.54.2",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.183.2",
+    "@patternfly/patternfly": "4.184.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "c7164830706215f812e1982fdad6c9903229e71f"
+  "gitHead": "91da841142369098e1ef2936b69fd90e4379a1e6"
 }

package/src/components/DescriptionList/DescriptionList.tsx

@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 import { formatBreakpointMods } from '../../helpers';
 
-export interface AutoFitModifiers {
+export interface BreakpointModifiers {
   default?: string;
   md?: string;
   lg?: string;
@@ -30,7 +30,7 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
   isFluid?: boolean;
   /** Sets the the default placement of description list groups to fill from top to bottom. */
   isFillColumns?: boolean;
-  /** Sets the number of columns on the description list */
+  /** Sets the number of columns on the description list at various breakpoints */
   columnModifier?: {
     default?: '1Col' | '2Col' | '3Col';
     sm?: '1Col' | '2Col' | '3Col';
@@ -39,7 +39,7 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
     xl?: '1Col' | '2Col' | '3Col';
     '2xl'?: '1Col' | '2Col' | '3Col';
   };
-  /** Indicates how the menu will align at screen size breakpoints. Default alignment is set via the position property. */
+  /** Indicates how the menu will align at various breakpoints. */
   orientation?: {
     sm?: 'vertical' | 'horizontal';
     md?: 'vertical' | 'horizontal';
@@ -47,6 +47,7 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
     xl?: 'vertical' | 'horizontal';
     '2xl'?: 'vertical' | 'horizontal';
   };
+  /** Sets the minimum column size for the auto-fit (isAutoFit) layout at various breakpoints. */
   autoFitMinModifier?: {
     default?: string;
     sm?: string;
@@ -55,11 +56,19 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
     xl?: string;
     '2xl'?: string;
   };
+  /** Sets the horizontal description list's term column width at various breakpoints. */
+  horizontalTermWidthModifier?: {
+    default?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    '2xl'?: string;
+  };
 }
 
-const setAutoFitMinModifiers = (autoFitMinModifier: AutoFitModifiers) => {
-  const prefix = '--pf-c-description-list--GridTemplateColumns--min';
-  const mods = autoFitMinModifier as Partial<{ [k: string]: string }>;
+const setBreakpointModifiers = (prefix: string, modifiers: BreakpointModifiers) => {
+  const mods = modifiers as Partial<{ [k: string]: string }>;
   return Object.keys(mods || {}).reduce(
     (acc, curr) =>
       curr === 'default' ? { ...acc, [prefix]: mods[curr] } : { ...acc, [`${prefix}-on-${curr}`]: mods[curr] },
@@ -79,33 +88,45 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   isFillColumns,
   columnModifier,
   autoFitMinModifier,
+  horizontalTermWidthModifier,
   orientation,
   style,
   ...props
-}: DescriptionListProps) => (
-  <dl
-    className={css(
-      styles.descriptionList,
-      (isHorizontal || isFluid) && styles.modifiers.horizontal,
-      isAutoColumnWidths && styles.modifiers.autoColumnWidths,
-      isAutoFit && styles.modifiers.autoFit,
-      formatBreakpointMods(columnModifier, styles),
-      formatBreakpointMods(orientation, styles),
-      isInlineGrid && styles.modifiers.inlineGrid,
-      isCompact && styles.modifiers.compact,
-      isFluid && styles.modifiers.fluid,
-      isFillColumns && styles.modifiers.fillColumns,
-      className
-    )}
-    style={
-      autoFitMinModifier || style
-        ? { ...(isAutoFit ? setAutoFitMinModifiers(autoFitMinModifier) : {}), ...style }
-        : undefined
-    }
-    {...props}
-  >
-    {children}
-  </dl>
-);
+}: DescriptionListProps) => {
+  if (isAutoFit && autoFitMinModifier) {
+    style = {
+      ...style,
+      ...setBreakpointModifiers('--pf-c-description-list--GridTemplateColumns--min', autoFitMinModifier)
+    };
+  }
+  if (isHorizontal && horizontalTermWidthModifier) {
+    style = {
+      ...style,
+      ...setBreakpointModifiers('--pf-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier)
+    };
+  }
+
+  return (
+    <dl
+      className={css(
+        styles.descriptionList,
+        (isHorizontal || isFluid) && styles.modifiers.horizontal,
+        isAutoColumnWidths && styles.modifiers.autoColumnWidths,
+        isAutoFit && styles.modifiers.autoFit,
+        formatBreakpointMods(columnModifier, styles),
+        formatBreakpointMods(orientation, styles),
+        isInlineGrid && styles.modifiers.inlineGrid,
+        isCompact && styles.modifiers.compact,
+        isFluid && styles.modifiers.fluid,
+        isFillColumns && styles.modifiers.fillColumns,
+        className
+      )}
+      style={style}
+      {...props}
+    >
+      {children}
+    </dl>
+  );
+};
 
 DescriptionList.displayName = 'DescriptionList';

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -239,34 +239,93 @@ import {
 } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
-<DescriptionList isHorizontal>
-  <DescriptionListGroup>
-    <DescriptionListTerm>Name</DescriptionListTerm>
-    <DescriptionListDescription>Example</DescriptionListDescription>
-  </DescriptionListGroup>
-  <DescriptionListGroup>
-    <DescriptionListTerm>Namespace</DescriptionListTerm>
-    <DescriptionListDescription>
-      <a href="#">mary-test</a>
-    </DescriptionListDescription>
-  </DescriptionListGroup>
-  <DescriptionListGroup>
-    <DescriptionListTerm>Labels</DescriptionListTerm>
-    <DescriptionListDescription>example</DescriptionListDescription>
-  </DescriptionListGroup>
-  <DescriptionListGroup>
-    <DescriptionListTerm>Pod selector</DescriptionListTerm>
-    <DescriptionListDescription>
-      <Button variant="link" isInline icon={<PlusCircleIcon />}>
-        app=MyApp
-      </Button>
-    </DescriptionListDescription>
-  </DescriptionListGroup>
-  <DescriptionListGroup>
-    <DescriptionListTerm>Annotation</DescriptionListTerm>
-    <DescriptionListDescription>2 Annotations</DescriptionListDescription>
-  </DescriptionListGroup>
-</DescriptionList>;
+const DescriptionListHorizontal = () => {
+  return (
+    <DescriptionList isHorizontal>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Name</DescriptionListTerm>
+        <DescriptionListDescription>Example</DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Namespace</DescriptionListTerm>
+        <DescriptionListDescription>
+          <a href="#">mary-test</a>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Labels</DescriptionListTerm>
+        <DescriptionListDescription>example</DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Pod selector</DescriptionListTerm>
+        <DescriptionListDescription>
+          <Button variant="link" isInline icon={<PlusCircleIcon />}>
+            app=MyApp
+          </Button>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Annotation</DescriptionListTerm>
+        <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+      </DescriptionListGroup>
+    </DescriptionList>
+  )
+}
+```
+
+### Horizontal using custom term width modifier
+
+```js
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListText,
+  DescriptionListGroup,
+  DescriptionListDescription,
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+const DescriptionListHorizontalTermWidthModifier = () => {
+  return (
+    <DescriptionList isHorizontal horizontalTermWidthModifier={{
+      default: '12ch',
+      sm: '15ch',
+      md: '20ch',
+      lg: '28ch',
+      xl: '30ch',
+      '2xl': '35ch'
+      }}>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Name longer than the default term width</DescriptionListTerm>
+        <DescriptionListDescription>Example</DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Namespace</DescriptionListTerm>
+        <DescriptionListDescription>
+          <a href="#">mary-test</a>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Labels</DescriptionListTerm>
+        <DescriptionListDescription>example</DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Pod selector</DescriptionListTerm>
+        <DescriptionListDescription>
+          <Button variant="link" isInline icon={<PlusCircleIcon />}>
+            app=MyApp
+          </Button>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Annotation</DescriptionListTerm>
+        <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+      </DescriptionListGroup>
+    </DescriptionList>
+  )
+}
 ```
 
 ### Horizontal 2 col

package/src/components/Menu/MenuContent.tsx

@@ -21,8 +21,33 @@ export const MenuContent = React.forwardRef((props: MenuContentProps, ref: React
   const menuContentRef = React.createRef<HTMLDivElement>();
   const refCallback = (el: HTMLElement, menuId: string, onGetMenuHeight: (menuId: string, height: number) => void) => {
     if (el) {
-      onGetMenuHeight && onGetMenuHeight(menuId, el.clientHeight);
-      getHeight && getHeight(el.clientHeight.toString());
+      let clientHeight = el.clientHeight;
+
+      // if this menu is a submenu, we need to account for the root menu list's padding and root menu content's border.
+      let rootMenuList = null;
+      let parentEl = el.closest(`.${styles.menuList}`);
+      while (parentEl !== null && parentEl.nodeType === 1) {
+        if (parentEl.classList.contains(styles.menuList)) {
+          rootMenuList = parentEl;
+        }
+        parentEl = parentEl.parentElement;
+      }
+
+      if (rootMenuList) {
+        const rootMenuListStyles = getComputedStyle(rootMenuList);
+        const rootMenuListPaddingOffset =
+          parseFloat(rootMenuListStyles.getPropertyValue('padding-top').replace(/px/g, '')) +
+          parseFloat(rootMenuListStyles.getPropertyValue('padding-bottom').replace(/px/g, '')) +
+          parseFloat(
+            getComputedStyle(rootMenuList.parentElement)
+              .getPropertyValue('border-bottom-width')
+              .replace(/px/g, '')
+          );
+        clientHeight = clientHeight + rootMenuListPaddingOffset;
+      }
+
+      onGetMenuHeight && onGetMenuHeight(menuId, clientHeight);
+      getHeight && getHeight(clientHeight.toString());
     }
     return ref || menuContentRef;
   };

package/src/components/MenuToggle/MenuToggle.tsx

@@ -17,7 +17,7 @@ export interface MenuToggleProps
   /** Flag indicating the toggle is full height */
   isFullHeight?: boolean;
   /** Variant styles of the menu toggle */
-  variant?: 'default' | 'plain' | 'primary' | 'plainText';
+  variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary';
   /** Optional icon rendered inside the toggle, before the children content */
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
@@ -71,6 +71,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
           styles.menuToggle,
           isExpanded && styles.modifiers.expanded,
           variant === 'primary' && styles.modifiers.primary,
+          variant === 'secondary' && styles.modifiers.secondary,
           (isPlain || isPlainText) && styles.modifiers.plain,
           isPlainText && styles.modifiers.text,
           isFullHeight && styles.modifiers.fullHeight,

package/src/components/MenuToggle/examples/MenuToggle.css

@@ -0,0 +1,3 @@
+#ws-react-c-menu-toggle-primary .pf-c-menu-toggle, #ws-react-c-menu-toggle-secondary .pf-c-menu-toggle {
+    vertical-align: bottom;
+}

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -6,8 +6,11 @@ propComponents: ['MenuToggle']
 beta: true
 ---
 
+import './MenuToggle.css'
+
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
 ## Examples
 
@@ -41,17 +44,6 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ```
 
-### Icon
-
-```ts
-import React from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-
-<MenuToggle icon={<CogIcon />}>Icon</MenuToggle>;
-
-```
-
 ### Count
 
 ```ts
@@ -84,6 +76,28 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 ```
 
+### Secondary
+
+```ts
+import React from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+
+<React.Fragment>
+  <MenuToggle variant="secondary">Collapsed</MenuToggle>{' '}
+    <MenuToggle variant="secondary" icon={<CogIcon />}>
+    Icon
+  </MenuToggle>{' '}
+  <MenuToggle variant="secondary" isExpanded>
+    Expanded
+  </MenuToggle>{' '}
+  <MenuToggle variant="secondary" isDisabled>
+    Disabled
+  </MenuToggle>
+</React.Fragment>
+
+```
+
 ### Plain
 
 ```ts
@@ -123,6 +137,34 @@ import { MenuToggle } from '@patternfly/react-core';
 </React.Fragment>
 ```
 
+
+### With icon/image and text
+
+```ts
+import React from 'react';
+import { MenuToggle, Avatar } from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+
+<React.Fragment>
+  <MenuToggle icon={<CogIcon />} variant="secondary">Icon</MenuToggle>{' '}
+  <MenuToggle icon={<CogIcon />} variant="secondary" isDisabled>Icon</MenuToggle>
+</React.Fragment>
+```
+
+### With avatar and text
+
+```ts
+import React from 'react';
+import { MenuToggle, Avatar } from '@patternfly/react-core';
+import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+
+<React.Fragment>
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
+</React.Fragment>
+```
+
 ### Full height
 
 ```ts

package/src/components/Popover/Popover.tsx

@@ -67,7 +67,7 @@ export interface PopoverProps {
   /** Distance of the popover to its target, defaults to 25 */
   distance?: number;
   /**
-   * If true, tries to keep the popover in view by flipping it if necessary
+   * If true, tries to keep the popover in view by flipping it if necessary.
    * If the position is set to 'auto', this prop is ignored
    */
   enableFlip?: boolean;

package/src/components/Select/Select.tsx

@@ -122,7 +122,7 @@ export interface SelectProps
     isPlaceholder?: boolean
   ) => void;
   /** Callback for toggle button behavior */
-  onToggle: (isExpanded: boolean) => void;
+  onToggle: (isExpanded: boolean, event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => void;
   /** Callback for typeahead clear button */
   onClear?: (event: React.MouseEvent) => void;
   /** Optional callback for custom filtering */
@@ -159,6 +159,8 @@ export interface SelectProps
   isInputValuePersisted?: boolean;
   /** @beta Flag for retaining filter results on blur from keyboard-entered typeahead text */
   isInputFilterPersisted?: boolean;
+  /** Flag indicating the typeahead input value should reset upon selection */
+  shouldResetOnSelect?: boolean;
   /** Content rendered in the footer of the select menu */
   footer?: React.ReactNode;
 }
@@ -232,7 +234,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     chipGroupComponent: null,
     isInputValuePersisted: false,
     isInputFilterPersisted: false,
-    isCreateSelectOptionObject: false
+    isCreateSelectOptionObject: false,
+    shouldResetOnSelect: true
   };
 
   state: SelectState = {
@@ -328,7 +331,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     this.setState({ focusFirstOption: true });
   };
 
-  onToggle = (isExpanded: boolean) => {
+  onToggle = (isExpanded: boolean, e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => {
     const { isInputValuePersisted, onSelect, onToggle, hasInlineFilter } = this.props;
     if (!isExpanded && isInputValuePersisted && onSelect) {
       onSelect(undefined, this.inputRef.current ? this.inputRef.current.value : '');
@@ -338,7 +341,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         focusFirstOption: true
       });
     }
-    onToggle(isExpanded);
+    onToggle(isExpanded, e);
   };
 
   onClose = () => {
@@ -358,7 +361,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
 
   onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value.toString() !== '' && !this.props.isOpen) {
-      this.onToggle(true);
+      this.onToggle(true, e);
     }
 
     if (this.props.onTypeaheadInputChanged) {
@@ -503,9 +506,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     });
   };
 
-  onClick = (_e: React.MouseEvent) => {
+  onClick = (e: React.MouseEvent) => {
     if (!this.props.isOpen) {
-      this.onToggle(true);
+      this.onToggle(true, e);
     }
   };
 
@@ -678,10 +681,20 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           typeaheadCurrIndex !== -1 && // do not allow selection without moving to an initial option
           (typeaheadActiveChild || (this.refCollection[0] && this.refCollection[0][0]))
         ) {
-          this.setState({
-            typeaheadInputValue:
-              (typeaheadActiveChild && typeaheadActiveChild.innerText) || this.refCollection[0][0].innerText
-          });
+          if (typeaheadActiveChild) {
+            const hasDescriptionElm = typeaheadActiveChild.childElementCount > 1;
+            const typeaheadActiveChildText = hasDescriptionElm
+              ? (typeaheadActiveChild.firstChild as HTMLElement).innerText
+              : typeaheadActiveChild.innerText;
+            this.setState({
+              typeaheadInputValue: typeaheadActiveChildText
+            });
+          } else {
+            this.setState({
+              typeaheadInputValue: this.refCollection[0][0].innerText
+            });
+          }
+
           if (typeaheadActiveChild) {
             typeaheadActiveChild.click();
           } else {
@@ -755,7 +768,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         } else {
           // Close if there is no footer
           if (!this.props.footer) {
-            this.onToggle(false);
+            this.onToggle(false, null);
             this.onClose();
           } else {
             // has footer
@@ -764,14 +777,14 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             if (this.inputRef.current === document.activeElement) {
               if (shiftKey) {
                 // close toggle if shift key and tab on input
-                this.onToggle(false);
+                this.onToggle(false, null);
                 this.onClose();
               } else {
                 // tab to first tabbable item in footer
                 if (tabbableItems[0]) {
                   tabbableItems[0].focus();
                 } else {
-                  this.onToggle(false);
+                  this.onToggle(false, null);
                   this.onClose();
                 }
               }
@@ -791,7 +804,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                   tabbableItems[currentElementIndex + 1].focus();
                 } else {
                   // no next item, close toggle
-                  this.onToggle(false);
+                  this.onToggle(false, null);
                   this.inputRef.current.focus();
                   this.onClose();
                 }
@@ -947,6 +960,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       footer,
       loadingVariant,
       isCreateSelectOptionObject,
+      shouldResetOnSelect,
       ...props
     } = this.props;
     const {
@@ -1085,7 +1099,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                 } else if (event.key === KeyTypes.Tab && variant !== SelectVariant.checkbox && this.props.footer) {
                   // tab to footer or close menu if shift key
                   if (event.shiftKey) {
-                    this.onToggle(false);
+                    this.onToggle(false, event);
                   } else {
                     const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
                     if (tabbableItems.length > 0) {
@@ -1093,7 +1107,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                       event.stopPropagation();
                       event.preventDefault();
                     } else {
-                      this.onToggle(false);
+                      this.onToggle(false, event);
                     }
                   }
                 } else if (event.key === KeyTypes.Tab && variant === SelectVariant.checkbox) {
@@ -1367,7 +1381,14 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       <GenerateId>
         {randomId => (
           <SelectContext.Provider
-            value={{ onSelect, onFavorite, onClose: this.onClose, variant, inputIdPrefix: inputIdPrefix || randomId }}
+            value={{
+              onSelect,
+              onFavorite,
+              onClose: this.onClose,
+              variant,
+              inputIdPrefix: inputIdPrefix || randomId,
+              shouldResetOnSelect
+            }}
           >
             {menuAppendTo === 'inline' ? (
               mainContainer

package/src/components/Select/SelectOption.tsx

@@ -245,7 +245,8 @@ export class SelectOption extends React.Component<SelectOptionProps> {
       onClose: () => void,
       variant: string,
       inputIdPrefix: string,
-      onFavorite: (itemId: string, isFavorite: boolean) => void
+      onFavorite: (itemId: string, isFavorite: boolean) => void,
+      shouldResetOnSelect: boolean
     ) => {
       if (variant !== SelectVariant.checkbox && isLoading && isGrouped) {
         return (
@@ -323,7 +324,7 @@ export class SelectOption extends React.Component<SelectOptionProps> {
                     if (!isDisabled) {
                       onClick(event);
                       onSelect(event, value, isPlaceholder);
-                      onClose();
+                      shouldResetOnSelect && onClose();
                     }
                   }}
                   role="option"
@@ -449,8 +450,10 @@ export class SelectOption extends React.Component<SelectOptionProps> {
 
     return (
       <SelectConsumer>
-        {({ onSelect, onClose, variant, inputIdPrefix, onFavorite }) => (
-          <React.Fragment>{renderOption(onSelect, onClose, variant, inputIdPrefix, onFavorite)}</React.Fragment>
+        {({ onSelect, onClose, variant, inputIdPrefix, onFavorite, shouldResetOnSelect }) => (
+          <React.Fragment>
+            {renderOption(onSelect, onClose, variant, inputIdPrefix, onFavorite, shouldResetOnSelect)}
+          </React.Fragment>
         )}
       </SelectConsumer>
     );