@patternfly/react-core 4.220.2 → 4.221.2

package/src/components/SearchInput/examples/SearchInput.md

@@ -99,7 +99,9 @@ class SearchInputWithNavigableOptions extends React.Component {
     this.state = {
       value: '',
       resultsCount: 0,
-      currentResult: 1
+      currentResult: 1,
+      isPreviousNavigationButtonDisabled: false,
+      isNextNavigationButtonDisabled: false
     };
 
     this.onChange = (value, event) => {
@@ -135,7 +137,6 @@ class SearchInputWithNavigableOptions extends React.Component {
       });
     };
   }
-
   render() {
     return (
       <SearchInput
@@ -143,6 +144,8 @@ class SearchInputWithNavigableOptions extends React.Component {
         value={this.state.value}
         onChange={this.onChange}
         onClear={this.onClear}
+        isNextNavigationButtonDisabled={this.state.currentResult === 3}
+        isPreviousNavigationButtonDisabled={this.state.currentResult === 1}
         resultsCount={`${this.state.currentResult} / ${this.state.resultsCount}`}
         onNextClick={this.onNext}
         onPreviousClick={this.onPrevious}

package/src/components/Select/Select.tsx

@@ -103,6 +103,8 @@ export interface SelectProps
   'aria-invalid'?: boolean;
   /** Label for input field of type ahead select variants */
   typeAheadAriaLabel?: string;
+  /** Id of div for input field of type ahead select variants */
+  typeAheadAriaDescribedby?: string;
   /** Label for clear selection button of type ahead select variants */
   clearSelectionsAriaLabel?: string;
   /** Label for toggle of type ahead select variants */
@@ -222,6 +224,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     'aria-describedby': '',
     'aria-invalid': false,
     typeAheadAriaLabel: '',
+    typeAheadAriaDescribedby: '',
     clearSelectionsAriaLabel: 'Clear all',
     toggleAriaLabel: 'Options menu',
     removeSelectionAriaLabel: 'Remove',
@@ -943,6 +946,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       validated,
       selections: selectionsProp,
       typeAheadAriaLabel,
+      typeAheadAriaDescribedby,
       clearSelectionsAriaLabel,
       toggleAriaLabel,
       removeSelectionAriaLabel,
@@ -1247,7 +1251,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           className
         )}
         {...(width && { style: { width } })}
-        {...(validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby })}
+        {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}
         {...(validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })}
       >
         {isOpen && menuContainer}
@@ -1268,7 +1272,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         ref={this.parentRef}
         {...getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         {...(width && { style: { width } })}
-        {...(validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby })}
+        {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}
         {...(validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })}
       >
         <SelectToggle
@@ -1337,6 +1341,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                   aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
                   id={`${selectToggleId}-select-typeahead`}
                   aria-label={typeAheadAriaLabel}
+                  {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
                   placeholder={placeholderText as string}
                   value={
                     typeaheadInputValue !== null
@@ -1365,6 +1370,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                   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"

package/src/components/TextInputGroup/TextInputGroup.tsx

@@ -9,6 +9,8 @@ export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Adds disabled styling and a disabled context value which text input group main hooks into for the input itself */
   isDisabled?: boolean;
+  /** @hide A reference object to attach to the input box */
+  innerRef?: React.RefObject<any>;
 }
 
 export const TextInputGroupContext = React.createContext<Partial<TextInputGroupProps>>({
@@ -19,13 +21,22 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   children,
   className,
   isDisabled,
+  innerRef,
   ...props
-}: TextInputGroupProps) => (
-  <TextInputGroupContext.Provider value={{ isDisabled }}>
-    <div className={css(styles.textInputGroup, isDisabled && styles.modifiers.disabled, className)} {...props}>
-      {children}
-    </div>
-  </TextInputGroupContext.Provider>
-);
+}: TextInputGroupProps) => {
+  const textInputGroupRef = innerRef || React.useRef(null);
+
+  return (
+    <TextInputGroupContext.Provider value={{ isDisabled }}>
+      <div
+        ref={textInputGroupRef}
+        className={css(styles.textInputGroup, isDisabled && styles.modifiers.disabled, className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </TextInputGroupContext.Provider>
+  );
+};
 
 TextInputGroup.displayName = 'TextInputGroup';

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -37,6 +37,8 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   value?: string | number;
   /** Placeholder value for the input */
   placeholder?: string;
+  /** @hide A reference object to attach to the input box */
+  innerRef?: React.RefObject<any>;
 }
 
 export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps> = ({
@@ -51,9 +53,11 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
   'aria-label': ariaLabel = 'Type to filter',
   value: inputValue,
   placeholder: inputPlaceHolder,
+  innerRef,
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled } = React.useContext(TextInputGroupContext);
+  const textInputGroupInputInputRef = innerRef || React.useRef(null);
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     onChange(event.currentTarget.value, event);
@@ -74,6 +78,7 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
         )}
         {icon && <span className={css(styles.textInputGroupIcon)}>{icon}</span>}
         <input
+          ref={textInputGroupInputInputRef}
           type={type}
           className={css(styles.textInputGroupTextInput)}
           aria-label={ariaLabel}

package/src/demos/PrimaryDetail.md

@@ -1274,7 +1274,7 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     const drawerContent = (
-      <Gallery hasGutter aria-label="Selectable card container">
+      <Gallery hasGutter role='region' aria-label="Selectable card container">
         {filtered.map((product, key) => (
           <React.Fragment>
             <Card