@patternfly/react-core 4.220.1 → 4.221.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.220.1",
+  "version": "4.221.1",
   "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.71.1",
-    "@patternfly/react-styles": "^4.70.1",
-    "@patternfly/react-tokens": "^4.72.1",
+    "@patternfly/react-icons": "^4.72.1",
+    "@patternfly/react-styles": "^4.71.1",
+    "@patternfly/react-tokens": "^4.73.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.194.4",
+    "@patternfly/patternfly": "4.196.6",
     "@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": "5e656c560b00e485a3a5a8d6e97c5677624a13ed"
+  "gitHead": "185f5001db15c2ef7690bb60e9876dfbd758c4d9"
 }

package/src/components/InputGroup/InputGroup.tsx

@@ -10,19 +10,25 @@ export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Content rendered inside the input group. */
   children: React.ReactNode;
+  /** @hide A reference object to attach to the input box */
+  innerRef?: React.RefObject<any>;
 }
 
 export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
   className = '',
   children,
+  innerRef,
   ...props
 }: InputGroupProps) => {
   const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
   const idItem = React.Children.toArray(children).find(
     (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id
   ) as React.ReactElement<{ id: string }>;
+
+  const inputGroupRef = innerRef || React.useRef(null);
+
   return (
-    <div className={css(styles.inputGroup, className)} {...props}>
+    <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>
       {idItem
         ? React.Children.map(children, (child: any) =>
             formCtrls.includes(child.type.displayName)

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/SearchInput/search-input';
 import { Button } from '../Button';
 import { ActionGroup, Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
 import { GenerateId, KEY_CODES } from '../../helpers';
 import { SearchAttribute } from './SearchInput';
+import { Panel, PanelMain, PanelMainBody } from '../Panel';
+import { css } from '@patternfly/react-styles';
 
 export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+  /** Additional classes added to the Advanced search menu */
+  className?: string;
   /** Value of the search input */
   value?: string;
   /** Ref of the div wrapping the whole search input **/
@@ -46,6 +49,7 @@ export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivEle
 }
 
 export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps> = ({
+  className,
   parentRef,
   parentInputRef,
   value = '',
@@ -200,24 +204,26 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
   };
 
   return isSearchMenuOpen ? (
-    <div className={styles.searchInputMenu}>
-      <div className={styles.searchInputMenuBody}>
-        <Form>
-          {buildFormGroups()}
-          {formAdditionalItems ? formAdditionalItems : null}
-          <ActionGroup>
-            <Button variant="primary" type="submit" onClick={onSearchHandler}>
-              {submitSearchButtonLabel}
-            </Button>
-            {!!onClear && (
-              <Button variant="link" type="reset" onClick={onClear}>
-                {resetButtonLabel}
+    <Panel variant="raised" className={css(className)}>
+      <PanelMain>
+        <PanelMainBody>
+          <Form>
+            {buildFormGroups()}
+            {formAdditionalItems ? formAdditionalItems : null}
+            <ActionGroup>
+              <Button variant="primary" type="submit" onClick={onSearchHandler} isDisabled={!value}>
+                {submitSearchButtonLabel}
               </Button>
-            )}
-          </ActionGroup>
-        </Form>
-      </div>
-    </div>
+              {!!onClear && (
+                <Button variant="link" type="reset" onClick={onClear}>
+                  {resetButtonLabel}
+                </Button>
+              )}
+            </ActionGroup>
+          </Form>
+        </PanelMainBody>
+      </PanelMain>
+    </Panel>
   ) : null;
 };
 AdvancedSearchMenu.displayName = 'SearchInput';

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' }));