@patternfly/react-core 4.220.2 → 4.221.0

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/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}