@patternfly/react-core 4.220.2 → 4.221.2

package/src/components/SearchInput/SearchInput.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/SearchInput/search-input';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/SearchInput/search-input';
 import { Button, ButtonVariant } from '../Button';
 import { Badge } from '../Badge';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
@@ -9,8 +9,9 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
-import { InputGroup } from '../InputGroup';
 import { AdvancedSearchMenu } from './AdvancedSearchMenu';
+import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
+import { InputGroup } from '../InputGroup';
 
 export interface SearchAttribute {
   /** The search attribute's value to be provided in the search input's query string.
@@ -56,7 +57,14 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   isAdvancedSearchOpen?: boolean;
   /** Label for the button which opens the advanced search form menu */
   openMenuButtonAriaLabel?: string;
-
+  /** Label for the button to navigate to previous result  */
+  previousNavigationButtonAriaLabel?: string;
+  /** Flag indicating if the previous navigation button is disabled */
+  isPreviousNavigationButtonDisabled?: boolean;
+  /** Label for the button to navigate to next result */
+  nextNavigationButtonAriaLabel?: string;
+  /** Flag indicating if the next navigation button is disabled */
+  isNextNavigationButtonDisabled?: boolean;
   /** Function called when user clicks to navigate to next result */
   onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** Function called when user clicks to navigate to previous result */
@@ -98,6 +106,10 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   'aria-label': ariaLabel = 'Search input',
   resetButtonLabel = 'Reset',
   openMenuButtonAriaLabel = 'Open advanced search',
+  previousNavigationButtonAriaLabel = 'Previous',
+  isPreviousNavigationButtonDisabled = false,
+  isNextNavigationButtonDisabled = false,
+  nextNavigationButtonAriaLabel = 'Next',
   submitSearchButtonLabel = 'Search',
   isDisabled = false,
   ...props
@@ -124,11 +136,11 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     setIsSearchMenuOpen(isAdvancedSearchOpen);
   }, [isAdvancedSearchOpen]);
 
-  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const onChangeHandler = (value: string, event: React.FormEvent<HTMLInputElement>) => {
     if (onChange) {
-      onChange(event.currentTarget.value, event);
+      onChange(value, event);
     }
-    setSearchValue(event.currentTarget.value);
+    setSearchValue(value);
   };
 
   const onToggle = (e: React.SyntheticEvent<HTMLButtonElement>) => {
@@ -178,116 +190,121 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     }
   };
 
-  return (
-    <div className={css(className, styles.searchInput)} ref={searchInputRef} {...props}>
-      <InputGroup>
-        <div className={css(styles.searchInputBar)}>
-          <span className={css(styles.searchInputText)}>
-            <span className={css(styles.searchInputIcon)}>
-              <SearchIcon />
-            </span>
-            {hint && (
-              <input
-                className={css(styles.searchInputTextInput, styles.modifiers.hint)}
-                type="text"
-                disabled
-                aria-hidden="true"
-                value={hint}
-              />
-            )}
-            <input
-              ref={searchInputInputRef}
-              className={css(styles.searchInputTextInput)}
-              value={searchValue}
-              placeholder={placeholder}
-              aria-label={ariaLabel}
-              onKeyDown={onEnter}
-              onChange={onChangeHandler}
-              disabled={isDisabled}
-            />
-          </span>
-          {value && (
-            <span className={css(styles.searchInputUtilities)}>
-              {resultsCount && (
-                <span className={css(styles.searchInputCount)}>
-                  <Badge isRead>{resultsCount}</Badge>
-                </span>
-              )}
-              {!!onNextClick && !!onPreviousClick && (
-                <span className={css(styles.searchInputNav)}>
-                  <Button
-                    variant={ButtonVariant.plain}
-                    aria-label="Previous"
-                    isDisabled={isDisabled}
-                    onClick={onPreviousClick}
-                  >
-                    <AngleUpIcon />
-                  </Button>
-                  <Button variant={ButtonVariant.plain} aria-label="Next" isDisabled={isDisabled} onClick={onNextClick}>
-                    <AngleDownIcon />
-                  </Button>
-                </span>
-              )}
-              {!!onClear && (
-                <span className="pf-c-search-input__clear">
-                  <Button
-                    variant={ButtonVariant.plain}
-                    isDisabled={isDisabled}
-                    aria-label={resetButtonLabel}
-                    onClick={onClearInput}
-                  >
-                    <TimesIcon />
-                  </Button>
-                </span>
-              )}
-            </span>
+  const buildSearchTextInputGroup = ({ ...searchInputProps } = {}) => (
+    <TextInputGroup isDisabled={isDisabled} {...searchInputProps}>
+      <TextInputGroupMain
+        hint={hint}
+        icon={<SearchIcon />}
+        innerRef={searchInputInputRef}
+        value={searchValue}
+        placeholder={placeholder}
+        aria-label={ariaLabel}
+        onKeyDown={onEnter}
+        onChange={onChangeHandler}
+      />
+      {value && (
+        <TextInputGroupUtilities>
+          {resultsCount && <Badge isRead>{resultsCount}</Badge>}
+          {!!onNextClick && !!onPreviousClick && (
+            <div className="pf-c-text-input-group__group">
+              <Button
+                variant={ButtonVariant.plain}
+                aria-label={previousNavigationButtonAriaLabel}
+                isDisabled={isDisabled || isPreviousNavigationButtonDisabled}
+                onClick={onPreviousClick}
+              >
+                <AngleUpIcon />
+              </Button>
+              <Button
+                variant={ButtonVariant.plain}
+                aria-label={nextNavigationButtonAriaLabel}
+                isDisabled={isDisabled || isNextNavigationButtonDisabled}
+                onClick={onNextClick}
+              >
+                <AngleDownIcon />
+              </Button>
+            </div>
           )}
-        </div>
-        {(attributes.length > 0 || onToggleAdvancedSearch) && (
-          <Button
-            className={isSearchMenuOpen && 'pf-m-expanded'}
-            variant={ButtonVariant.control}
-            aria-label={openMenuButtonAriaLabel}
-            onClick={onToggle}
-            isDisabled={isDisabled}
-            aria-expanded={isSearchMenuOpen}
-          >
-            <CaretDownIcon />
-          </Button>
-        )}
-        {!!onSearch && (
-          <Button
-            type="submit"
-            variant={ButtonVariant.control}
-            aria-label={submitSearchButtonLabel}
-            onClick={onSearchHandler}
-            isDisabled={isDisabled}
-          >
-            <ArrowRightIcon />
-          </Button>
-        )}
-      </InputGroup>
-      {attributes.length > 0 && (
-        <AdvancedSearchMenu
-          value={value}
-          parentRef={searchInputRef}
-          parentInputRef={searchInputInputRef}
-          onSearch={onSearch}
-          onClear={onClear}
-          onChange={onChange}
-          onToggleAdvancedMenu={onToggle}
-          resetButtonLabel={resetButtonLabel}
-          submitSearchButtonLabel={submitSearchButtonLabel}
-          attributes={attributes}
-          formAdditionalItems={formAdditionalItems}
-          hasWordsAttrLabel={hasWordsAttrLabel}
-          advancedSearchDelimiter={advancedSearchDelimiter}
-          getAttrValueMap={getAttrValueMap}
-          isSearchMenuOpen={isSearchMenuOpen}
-        />
+          {!!onClear && (
+            <Button
+              variant={ButtonVariant.plain}
+              isDisabled={isDisabled}
+              aria-label={resetButtonLabel}
+              onClick={onClearInput}
+            >
+              <TimesIcon />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
       )}
-    </div>
+    </TextInputGroup>
   );
+
+  const buildSearchTextInputGroupWithExtraButtons = ({ ...searchInputProps } = {}) => (
+    <InputGroup {...searchInputProps}>
+      {buildSearchTextInputGroup()}
+      {(attributes.length > 0 || onToggleAdvancedSearch) && (
+        <Button
+          className={isSearchMenuOpen && 'pf-m-expanded'}
+          variant={ButtonVariant.control}
+          aria-label={openMenuButtonAriaLabel}
+          onClick={onToggle}
+          isDisabled={isDisabled}
+          aria-expanded={isSearchMenuOpen}
+        >
+          <CaretDownIcon />
+        </Button>
+      )}
+      {!!onSearch && (
+        <Button
+          type="submit"
+          variant={ButtonVariant.control}
+          aria-label={submitSearchButtonLabel}
+          onClick={onSearchHandler}
+          isDisabled={isDisabled || !searchValue}
+        >
+          <ArrowRightIcon />
+        </Button>
+      )}
+    </InputGroup>
+  );
+
+  const searchInputProps = {
+    ...props,
+    className: className && css(className),
+    innerRef: searchInputRef
+  };
+
+  if (!!onSearch || attributes.length > 0 || !!onToggleAdvancedSearch) {
+    if (attributes.length > 0) {
+      return (
+        <div className={css(className, styles.searchInput)} ref={searchInputRef} {...props}>
+          {buildSearchTextInputGroupWithExtraButtons()}
+          <AdvancedSearchMenu
+            className={styles.searchInputMenu}
+            value={value}
+            parentRef={searchInputRef}
+            parentInputRef={searchInputInputRef}
+            onSearch={onSearch}
+            onClear={onClear}
+            onChange={onChange}
+            onToggleAdvancedMenu={onToggle}
+            resetButtonLabel={resetButtonLabel}
+            submitSearchButtonLabel={submitSearchButtonLabel}
+            attributes={attributes}
+            formAdditionalItems={formAdditionalItems}
+            hasWordsAttrLabel={hasWordsAttrLabel}
+            advancedSearchDelimiter={advancedSearchDelimiter}
+            getAttrValueMap={getAttrValueMap}
+            isSearchMenuOpen={isSearchMenuOpen}
+          />
+        </div>
+      );
+    }
+
+    return buildSearchTextInputGroupWithExtraButtons({ ...searchInputProps });
+  }
+  return buildSearchTextInputGroup(searchInputProps);
 };
 SearchInputBase.displayName = 'SearchInputBase';
 

package/src/components/SearchInput/__tests__/SearchInput.test.tsx

@@ -37,7 +37,7 @@ describe('SearchInput', () => {
     render(<SearchInput {...props} resultsCount="3 / 7" aria-label="simple text input" data-testid="test-id" />);
 
     const input = screen.getByTestId('test-id');
-    expect(input.querySelector('.pf-c-search-input__nav')).toBeInTheDocument();
+    expect(input.querySelector('.pf-c-text-input-group__group')).toBeInTheDocument();
     expect(input.querySelector('.pf-c-badge')).toBeInTheDocument();
 
     userEvent.click(screen.getByRole('button', { name: 'Previous' }));