@patternfly/react-core 4.201.2 → 4.202.2

package/src/components/Select/SelectToggle.tsx

@@ -18,7 +18,7 @@ export interface SelectToggleProps extends React.HTMLProps<HTMLElement> {
   /** Flag to indicate if select is open */
   isOpen?: boolean;
   /** Callback called when toggle is clicked */
-  onToggle?: (isExpanded: boolean) => void;
+  onToggle?: (isExpanded: boolean, event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => void;
   /** Callback for toggle open on keyboard entry */
   onEnter?: () => void;
   /** Callback for toggle close */
@@ -105,7 +105,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
     const clickedWithinMenu =
       menuRef && menuRef.current && menuRef.current.contains && menuRef.current.contains(event.target as Node);
     if (isOpen && !(clickedOnToggle || clickedWithinMenu)) {
-      onToggle(false);
+      onToggle(false, event);
       onClose();
     }
   };
@@ -140,7 +140,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
 
       // If no tabbable item in footer close select
       if (tabbableItems.length <= 0) {
-        onToggle(false);
+        onToggle(false, event);
         onClose();
         this.toggle.current.focus();
         return;
@@ -151,7 +151,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
           if (event.shiftKey) {
             if (variant !== 'checkbox') {
               // only close non checkbox variation on shift clicked
-              onToggle(false);
+              onToggle(false, event);
               onClose();
               this.toggle.current.focus();
             }
@@ -175,7 +175,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
           tabbableItems[currentElementIndex + 1].focus();
         } else {
           // no more footer items close menu
-          onToggle(false);
+          onToggle(false, event);
           onClose();
           this.toggle.current.focus();
         }
@@ -189,7 +189,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
       (event.key === KeyTypes.Escape || event.key === KeyTypes.Tab) &&
       (escFromToggle || escFromWithinMenu)
     ) {
-      onToggle(false);
+      onToggle(false, event);
       onClose();
       this.toggle.current.focus();
     }
@@ -206,7 +206,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
         if (isOpen) {
           handleTypeaheadKeys('enter');
         } else {
-          onToggle(!isOpen);
+          onToggle(!isOpen, event);
         }
       }
     }
@@ -221,11 +221,11 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
     }
     event.preventDefault();
     if ((event.key === KeyTypes.Tab || event.key === KeyTypes.Enter || event.key === KeyTypes.Space) && isOpen) {
-      onToggle(!isOpen);
+      onToggle(!isOpen, event);
       onClose();
       this.toggle.current.focus();
     } else if ((event.key === KeyTypes.Enter || event.key === KeyTypes.Space) && !isOpen) {
-      onToggle(!isOpen);
+      onToggle(!isOpen, event);
       onEnter();
     }
   };
@@ -290,8 +290,8 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
             )}
             aria-label={ariaLabel}
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onClick={_event => {
-              onToggle(!isOpen);
+            onClick={event => {
+              onToggle(!isOpen, event);
               if (isOpen) {
                 onClose();
               }
@@ -318,9 +318,9 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
               className
             )}
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onClick={_event => {
+            onClick={event => {
               if (!isDisabled) {
-                onToggle(!isOpen);
+                onToggle(!isOpen, event);
                 if (isOpen) {
                   onClose();
                 }
@@ -334,8 +334,8 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
               type={type}
               className={css(buttonStyles.button, styles.selectToggleButton, styles.modifiers.plain)}
               aria-label={ariaLabel}
-              onClick={_event => {
-                onToggle(!isOpen);
+              onClick={event => {
+                onToggle(!isOpen, event);
                 if (isOpen) {
                   onClose();
                 }

package/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -1184,6 +1184,7 @@ exports[`select custom select filter filters properly 1`] = `
   position="left"
   removeSelectionAriaLabel="Remove"
   selections={Array []}
+  shouldResetOnSelect={true}
   toggleAriaLabel="Options menu"
   toggleIcon={null}
   toggleId="custom-select-filters"
@@ -3123,6 +3124,7 @@ exports[`typeahead select test select existing option on a non-creatable select
   position="left"
   removeSelectionAriaLabel="Remove"
   selections={Array []}
+  shouldResetOnSelect={true}
   toggleAriaLabel="Options menu"
   toggleIcon={null}
   toggleId={null}

package/src/components/Select/examples/Select.md

@@ -299,7 +299,9 @@ class GroupedSingleSelectInput extends React.Component {
   }
 }
 ```
+
 ### Validated
+
 ```js
 import React from 'react';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
@@ -384,12 +386,15 @@ class ValidatedSelect extends React.Component {
         >
           {this.options}
         </Select>
-        <div aria-live="polite" id="validated-helper" hidden>{validated}</div>
+        <div aria-live="polite" id="validated-helper" hidden>
+          {validated}
+        </div>
       </div>
     );
   }
 }
 ```
+
 ### Checkbox input
 
 ```js
@@ -467,6 +472,7 @@ class CheckboxSelectInput extends React.Component {
   }
 }
 ```
+
 ### Checkbox input with counts
 
 ```js
@@ -719,7 +725,7 @@ class FilteringSingleSelectInput extends React.Component {
       selected: '',
       isCreatable: false,
       isInputValuePersisted: false,
-      isInputFilterPersisted: false,
+      isInputFilterPersisted: false
     };
 
     this.options = [
@@ -742,8 +748,7 @@ class FilteringSingleSelectInput extends React.Component {
     };
 
     this.onSelect = (event, selection) => {
-      this.setState({ selected: selection, isOpen: false }),
-      console.log('selected: ', selection);
+      this.setState({ selected: selection, isOpen: false }), console.log('selected: ', selection);
     };
 
     this.onFilter = (_, textInput) => {
@@ -784,7 +789,14 @@ class FilteringSingleSelectInput extends React.Component {
   }
 
   render() {
-    const { isOpen, selected, filteredOptions, isInputValuePersisted, isInputFilterPersisted, isCreatable } = this.state;
+    const {
+      isOpen,
+      selected,
+      filteredOptions,
+      isInputValuePersisted,
+      isInputFilterPersisted,
+      isCreatable
+    } = this.state;
     const titleId = 'single-filtering-select-id';
     return (
       <div>
@@ -1199,7 +1211,8 @@ class TypeaheadSelectInput extends React.Component {
       isCreatable: false,
       isInputValuePersisted: false,
       isInputFilterPersisted: false,
-      hasOnCreateOption: false
+      hasOnCreateOption: false,
+      resetOnSelect: true
     };
 
     this.onToggle = isOpen => {
@@ -1213,7 +1226,7 @@ class TypeaheadSelectInput extends React.Component {
       else {
         this.setState({
           selected: selection,
-          isOpen: false
+          isOpen: this.state.resetOnSelect ? false : this.state.isOpen
         });
         console.log('selected:', selection);
       }
@@ -1262,10 +1275,26 @@ class TypeaheadSelectInput extends React.Component {
         isInputFilterPersisted: checked
       });
     };
+
+    this.toggleResetOnSelect = checked => {
+      this.setState({
+        resetOnSelect: checked
+      });
+    };
   }
 
   render() {
-    const { isOpen, selected, isDisabled, isCreatable, hasOnCreateOption, isInputValuePersisted, isInputFilterPersisted, options } = this.state;
+    const {
+      isOpen,
+      selected,
+      isDisabled,
+      isCreatable,
+      hasOnCreateOption,
+      isInputValuePersisted,
+      isInputFilterPersisted,
+      resetOnSelect,
+      options
+    } = this.state;
     const titleId = 'typeahead-select-id-1';
     return (
       <div>
@@ -1287,6 +1316,7 @@ class TypeaheadSelectInput extends React.Component {
           isDisabled={isDisabled}
           isCreatable={isCreatable}
           onCreateOption={(hasOnCreateOption && this.onCreateOption) || undefined}
+          shouldResetOnSelect={resetOnSelect}
         >
           {options.map((option, index) => (
             <SelectOption
@@ -1337,6 +1367,14 @@ class TypeaheadSelectInput extends React.Component {
           id="toggle-input-filter-persisted"
           name="toggle-input-filter-persisted"
         />
+        <Checkbox
+          label="shouldResetOnSelect"
+          isChecked={this.state.resetOnSelect}
+          onChange={this.toggleResetOnSelect}
+          aria-label="toggle reset checkbox"
+          id="toggle-reset-typeahead"
+          name="toggle-reset-typeahead"
+        />
       </div>
     );
   }
@@ -1580,7 +1618,8 @@ class MultiTypeaheadSelectInput extends React.Component {
       selected: [],
       isCreatable: false,
       hasOnCreateOption: false,
-      hasDisabledOption: false
+      hasDisabledOption: false,
+      resetOnSelect: true
     };
 
     this.onCreateOption = newValue => {
@@ -1629,18 +1668,24 @@ class MultiTypeaheadSelectInput extends React.Component {
       });
     };
 
-    this.toggleOptionDisabled = (toggleIndex) => () => {
+    this.toggleOptionDisabled = toggleIndex => () => {
       this.setState(prevState => ({
         hasDisabledOption: !prevState.hasDisabledOption,
         options: prevState.options.map((option, index) =>
           index === toggleIndex ? { ...option, disabled: !option.disabled } : option
-        ),
+        )
       }));
     };
+
+    this.toggleResetOnSelect = checked => {
+      this.setState({
+        resetOnSelect: checked
+      });
+    };
   }
 
   render() {
-    const { isOpen, selected, isCreatable, hasOnCreateOption, options } = this.state;
+    const { isOpen, selected, isCreatable, hasOnCreateOption, resetOnSelect, options } = this.state;
     const titleId = 'multi-typeahead-select-id-1';
 
     return (
@@ -1660,6 +1705,7 @@ class MultiTypeaheadSelectInput extends React.Component {
           placeholderText="Select a state"
           isCreatable={isCreatable}
           onCreateOption={(hasOnCreateOption && this.onCreateOption) || undefined}
+          shouldResetOnSelect={resetOnSelect}
         >
           {options.map((option, index) => (
             <SelectOption
@@ -1694,6 +1740,14 @@ class MultiTypeaheadSelectInput extends React.Component {
           id="toggle-disable-first-option"
           name="toggle-disable-first-option"
         />
+        <Checkbox
+          label="shouldResetOnSelect"
+          isChecked={this.state.resetOnSelect}
+          onChange={this.toggleResetOnSelect}
+          aria-label="toggle multi reset checkbox"
+          id="toggle-reset-multi-typeahead"
+          name="toggle-reset-multi-typeahead"
+        />
       </div>
     );
   }
@@ -2379,8 +2433,6 @@ class SelectWithFooter extends React.Component {
     };
   }
 
-
-
   render() {
     const { isOpen, selected, isDisabled, direction, isToggleIcon } = this.state;
     const titleId = 'title-id-footer';
@@ -2400,11 +2452,13 @@ class SelectWithFooter extends React.Component {
           aria-labelledby={titleId}
           isDisabled={isDisabled}
           direction={direction}
-          footer={ <>
-            <Button variant="link" isInline>
-              Action
-            </Button>
-            </>}
+          footer={
+            <>
+              <Button variant="link" isInline>
+                Action
+              </Button>
+            </>
+          }
         >
           {this.options}
         </Select>
@@ -2483,7 +2537,11 @@ class SelectWithFooterCheckbox extends React.Component {
           isOpen={isOpen}
           placeholderText="Filter by status"
           aria-labelledby={titleId}
-          footer={<Button variant="link" isInline>Action</Button>}
+          footer={
+            <Button variant="link" isInline>
+              Action
+            </Button>
+          }
         >
           {this.options}
         </Select>
@@ -2497,11 +2555,7 @@ class SelectWithFooterCheckbox extends React.Component {
 
 ```js isBeta
 import React from 'react';
-import {
-  Select,
-  SelectOption,
-  SelectVariant
-} from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 
 class SelectViewMore extends React.Component {
   constructor(props) {
@@ -2578,7 +2632,10 @@ class SelectViewMore extends React.Component {
           selections={selected}
           isOpen={isOpen}
           aria-labelledby={titleId}
-          {...(!isLoading && numOptions < this.options.length && { loadingVariant: { text: 'View more', onClick: this.onViewMoreClick } })}
+          {...(!isLoading &&
+            numOptions < this.options.length && {
+              loadingVariant: { text: 'View more', onClick: this.onViewMoreClick }
+            })}
           {...(isLoading && { loadingVariant: 'spinner' })}
         >
           {this.options.slice(0, numOptions)}
@@ -2593,11 +2650,7 @@ class SelectViewMore extends React.Component {
 
 ```js isBeta
 import React from 'react';
-import {
-  Select,
-  SelectOption,
-  SelectVariant,
-} from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 
 class SelectViewMoreCheckbox extends React.Component {
   constructor(props) {
@@ -2649,7 +2702,6 @@ class SelectViewMoreCheckbox extends React.Component {
       });
     };
 
-
     this.simulateNetworkCall = callback => {
       setTimeout(callback, 2000);
     };
@@ -2682,7 +2734,10 @@ class SelectViewMoreCheckbox extends React.Component {
           isOpen={isOpen}
           placeholderText="Filter by status"
           aria-labelledby={titleId}
-          {...(!isLoading && numOptions < this.options.length && { loadingVariant: { text: 'View more', onClick: this.onViewMoreClick } })}
+          {...(!isLoading &&
+            numOptions < this.options.length && {
+              loadingVariant: { text: 'View more', onClick: this.onViewMoreClick }
+            })}
           {...(isLoading && { loadingVariant: 'spinner' })}
         >
           {this.options.slice(0, numOptions)}
@@ -2690,7 +2745,6 @@ class SelectViewMoreCheckbox extends React.Component {
       </div>
     );
   }
-
 }
 ```
 
@@ -2701,8 +2755,8 @@ import React from 'react';
 import { Select, SelectOption } from '@patternfly/react-core';
 
 function SelectWithPlaceholderStyle() {
-  const [ isOpen, setIsOpen ] = React.useState(false);
-  const [ selected, setSelected ] = React.useState([]);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState([]);
 
   const options = [
     <SelectOption key={0} value="Active" />,
@@ -2748,7 +2802,6 @@ function SelectWithPlaceholderStyle() {
 }
 ```
 
-
 ### With a style applied to the placeholder option
 
 ```js
@@ -2756,11 +2809,11 @@ import React from 'react';
 import { Select, SelectOption } from '@patternfly/react-core';
 
 function SelectWithPlaceholderStyle() {
-  const [ isOpen, setIsOpen ] = React.useState(false);
-  const [ selected, setSelected ] = React.useState([]);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState([]);
 
   const options = [
-    <SelectOption key={0} value="Filter by status" isPlaceholder/>,
+    <SelectOption key={0} value="Filter by status" isPlaceholder />,
     <SelectOption key={1} value="Active" />,
     <SelectOption key={2} value="Cancelled" />,
     <SelectOption key={3} value="Paused" />

package/src/components/Select/selectConstants.tsx

@@ -11,6 +11,7 @@ export interface SelectContextInterface {
   onFavorite: (itemId: string, isFavorite: boolean) => void;
   variant: string;
   inputIdPrefix: string;
+  shouldResetOnSelect: boolean;
 }
 
 export const SelectContext = React.createContext<SelectContextInterface | null>(null);

package/src/components/TimePicker/TimePicker.tsx

@@ -49,13 +49,14 @@ export interface TimePickerProps
   id?: string;
   /** Width of the time picker. */
   width?: string;
-  /** The container to append the menu to. Defaults to 'inline'
+  /** The container to append the menu to. Defaults to 'inline'.
    * If your menu is being cut off you can append it to an element higher up the DOM tree.
    * Some examples:
+   * menuAppendTo="parent"
    * menuAppendTo={() => document.body}
    * menuAppendTo={document.getElementById('target')}
    */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
   /** Size of step between time options in minutes.*/
   stepMinutes?: number;
   /** Additional props for input field */
@@ -81,7 +82,7 @@ interface TimePickerState {
 
 export class TimePicker extends React.Component<TimePickerProps, TimePickerState> {
   static displayName = 'TimePicker';
-  private parentRef = React.createRef<HTMLDivElement>();
+  private baseComponentRef = React.createRef<any>();
   private toggleRef = React.createRef<HTMLDivElement>();
   private inputRef = React.createRef<HTMLInputElement>();
   private menuRef = React.createRef<HTMLDivElement>();
@@ -97,6 +98,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     delimiter: ':',
     'aria-label': 'Time picker',
     width: '150px',
+    menuAppendTo: 'inline',
     stepMinutes: 30,
     inputProps: {},
     minTime: '',
@@ -141,7 +143,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
   }
 
   onDocClick = (event: MouseEvent | TouchEvent) => {
-    const clickedOnToggle = this.parentRef?.current?.contains(event.target as Node);
+    const clickedOnToggle = this.toggleRef?.current?.contains(event.target as Node);
     const clickedWithinMenu = this.menuRef?.current?.contains(event.target as Node);
     if (this.state.isOpen && !(clickedOnToggle || clickedWithinMenu)) {
       this.onToggle(false);
@@ -362,7 +364,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     });
   };
 
-  onInputFocus = (e: any) => {
+  onInputClick = (e: any) => {
     if (!this.state.isOpen) {
       this.onToggle(true);
     }
@@ -429,10 +431,17 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     const isValidFormat = this.isValidFormat(timeState);
     const randomId = id || getUniqueId('time-picker');
 
+    const getParentElement = () => {
+      if (this.baseComponentRef && this.baseComponentRef.current) {
+        return this.baseComponentRef.current.parentElement;
+      }
+      return null;
+    };
+
     const menuContainer = (
       <Menu ref={this.menuRef} isScrollable>
         <MenuContent maxMenuHeight="200px">
-          <MenuList aria-labelledby={`${randomId}-input`}>
+          <MenuList aria-label={ariaLabel}>
             {options.map((option, index) => (
               <MenuItem onClick={this.onSelect} key={option} id={`${randomId}-option-${index}`}>
                 {option}
@@ -445,6 +454,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
 
     const textInput = (
       <TextInput
+        aria-haspopup="menu"
         className={css(formStyles.formControl)}
         id={`${randomId}-input`}
         aria-label={ariaLabel}
@@ -453,8 +463,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
         value={timeState || ''}
         type="text"
         iconVariant="clock"
-        onClick={this.onInputFocus}
-        onFocus={this.onInputFocus}
+        onClick={this.onInputClick}
         onChange={this.onInputChange}
         onBlur={this.onBlur}
         autoComplete="off"
@@ -465,14 +474,14 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     );
 
     return (
-      <div className={css(datePickerStyles.datePicker, className)}>
+      <div ref={this.baseComponentRef} className={css(datePickerStyles.datePicker, className)}>
         <div className={css(datePickerStyles.datePickerInput)} style={style} {...props}>
           <InputGroup>
-            <div id={randomId} ref={this.parentRef}>
+            <div id={randomId}>
               <div ref={this.toggleRef} style={{ paddingLeft: '0' }}>
                 {menuAppendTo !== 'inline' ? (
                   <Popper
-                    appendTo={this.parentRef.current}
+                    appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
                     trigger={textInput}
                     popper={menuContainer}
                     isVisible={isOpen}

package/src/components/TimePicker/examples/TimePicker.md

@@ -10,6 +10,8 @@ import { TimePicker } from '@patternfly/react-core';
 
 ## Examples
 
+Appending the TimePicker to the `document.body` may cause accessibility issues, including being unable to navigate into the menu via keyboard or other assistive technologies. Instead, appending to the `"parent"` is recommended.
+
 ### Basic 12 hour
 
 ```js