@patternfly/react-core 4.237.11 → 4.238.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.237.11",
+  "version": "4.238.0",
   "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",
@@ -44,9 +44,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.88.11",
-    "@patternfly/react-styles": "^4.87.11",
-    "@patternfly/react-tokens": "^4.89.11",
+    "@patternfly/react-icons": "^4.89.0",
+    "@patternfly/react-styles": "^4.88.0",
+    "@patternfly/react-tokens": "^4.90.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "d5c28cc90817bb41bf6062071daaa1e435f93b87"
+  "gitHead": "844856ede5d24e9c60242140404ef95c4acc50b1"
 }

package/src/components/SearchInput/SearchInput.tsx

@@ -21,6 +21,15 @@ export interface SearchAttribute {
   display: React.ReactNode;
 }
 
+export interface ExpandableInput {
+  /** Flag to indicate if the search input is expanded */
+  isExpanded: boolean;
+  /** Callback function to toggle the expandable search input */
+  onToggleExpand: (isExpanded: boolean, event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** An accessible label for the expandable search input toggle */
+  toggleAriaLabel: string;
+}
+
 export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'results' | 'ref'> {
   /** Additional classes added to the banner */
   className?: string;
@@ -38,7 +47,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
   /** A suggestion for autocompleting */
   hint?: string;
-
+  /** Object that makes the search input expandable/collapsible */
+  expandableInput?: ExpandableInput;
   /** A callback for when the search button clicked changes */
   onSearch?: (
     value: string,
@@ -72,7 +82,6 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** The number of search results returned. Either a total number of results,
    * or a string representing the current result over the total number of results. i.e. "1 / 5" */
   resultsCount?: number | string;
-
   /** Array of attribute values used for dynamically generated advanced search */
   attributes?: string[] | SearchAttribute[];
   /* Additional elements added after the attributes in the form.
@@ -112,6 +121,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   onNextClick,
   onPreviousClick,
   innerRef,
+  expandableInput,
   'aria-label': ariaLabel = 'Search input',
   resetButtonLabel = 'Reset',
   openMenuButtonAriaLabel = 'Open advanced search',
@@ -130,6 +140,23 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const searchInputRef = React.useRef(null);
   const ref = React.useRef(null);
   const searchInputInputRef = innerRef || ref;
+  const searchInputExpandableToggleRef = React.useRef(null);
+  const [focusAfterExpandChange, setFocusAfterExpandChange] = React.useState(false);
+
+  const { isExpanded, onToggleExpand, toggleAriaLabel } = expandableInput || {};
+
+  React.useEffect(() => {
+    // this effect and the focusAfterExpandChange variable are needed to focus the input/toggle as needed when the
+    // expansion toggle is fired without focusing on mount
+    if (!focusAfterExpandChange) {
+      return;
+    } else if (isExpanded) {
+      searchInputInputRef?.current?.focus();
+    } else {
+      searchInputExpandableToggleRef?.current?.focus();
+    }
+    setFocusAfterExpandChange(false);
+  }, [focusAfterExpandChange, isExpanded, searchInputInputRef, searchInputExpandableToggleRef]);
 
   React.useEffect(() => {
     setSearchValue(value);
@@ -202,7 +229,16 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     }
   };
 
-  const buildSearchTextInputGroup = ({ ...searchInputProps } = {}) => (
+  const onExpandHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
+    setSearchValue('');
+    onToggleExpand(isExpanded, event);
+    setFocusAfterExpandChange(true);
+  };
+
+  const renderUtilities =
+    value && (resultsCount || (!!onNextClick && !!onPreviousClick) || (!!onClear && !expandableInput));
+
+  const buildTextInputGroup = ({ ...searchInputProps } = {}) => (
     <TextInputGroup isDisabled={isDisabled} {...searchInputProps}>
       <TextInputGroupMain
         hint={hint}
@@ -214,7 +250,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onKeyDown={onEnter}
         onChange={onChangeHandler}
       />
-      {value && (
+      {renderUtilities && (
         <TextInputGroupUtilities>
           {resultsCount && <Badge isRead>{resultsCount}</Badge>}
           {!!onNextClick && !!onPreviousClick && (
@@ -237,7 +273,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
               </Button>
             </div>
           )}
-          {!!onClear && (
+          {!!onClear && !expandableInput && (
             <Button
               variant={ButtonVariant.plain}
               isDisabled={isDisabled}
@@ -252,9 +288,35 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     </TextInputGroup>
   );
 
+  const expandableToggle = (
+    <Button
+      variant={ButtonVariant.plain}
+      aria-label={toggleAriaLabel}
+      aria-expanded={isExpanded}
+      icon={isExpanded ? <TimesIcon /> : <SearchIcon />}
+      onClick={onExpandHandler}
+      ref={searchInputExpandableToggleRef}
+    />
+  );
+
+  const buildExpandableSearchInput = ({ ...searchInputProps } = {}) => (
+    <InputGroup {...searchInputProps}>
+      {buildTextInputGroup()}
+      {expandableToggle}
+    </InputGroup>
+  );
+
+  const buildSearchTextInputGroup = ({ ...searchInputProps } = {}) => {
+    if (expandableInput) {
+      return buildExpandableSearchInput({ ...searchInputProps });
+    }
+
+    return buildTextInputGroup({ ...searchInputProps });
+  };
+
   const buildSearchTextInputGroupWithExtraButtons = ({ ...searchInputProps } = {}) => (
     <InputGroup {...searchInputProps}>
-      {buildSearchTextInputGroup()}
+      {buildTextInputGroup()}
       {(attributes.length > 0 || onToggleAdvancedSearch) && (
         <Button
           className={isSearchMenuOpen && 'pf-m-expanded'}
@@ -278,6 +340,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
           <ArrowRightIcon />
         </Button>
       )}
+      {expandableInput && expandableToggle}
     </InputGroup>
   );
 
@@ -287,6 +350,10 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     innerRef: searchInputRef
   };
 
+  if (!!expandableInput && !isExpanded) {
+    return <InputGroup {...searchInputProps}>{expandableToggle}</InputGroup>;
+  }
+
   if (!!onSearch || attributes.length > 0 || !!onToggleAdvancedSearch) {
     if (attributes.length > 0) {
       const AdvancedSearch = (
@@ -333,7 +400,6 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
       return appendTo !== 'inline' ? AdvancedSearchWithPopper : AdvancedSearchInline;
     }
-
     return buildSearchTextInputGroupWithExtraButtons({ ...searchInputProps });
   }
   return buildSearchTextInputGroup(searchInputProps);

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

@@ -167,3 +167,85 @@ describe('SearchInput', () => {
     expect(document.body).toContainElement(screen.getByText('test'));
   });
 });
+
+test('expandable toggle does not render by default', () => {
+  render(<SearchInput />);
+
+  expect(screen.queryByRole('button')).not.toBeInTheDocument();
+});
+
+test('expandable toggle renders when a value is passed for expandableProps', () => {
+  render(
+    <SearchInput expandableInput={{ isExpanded: false, onToggleExpand: () => {}, toggleAriaLabel: 'Test label' }} />
+  );
+
+  expect(screen.getByRole('button')).toBeVisible();
+});
+
+test('expandable toggle is not aria-expanded when isExpanded is not true', () => {
+  render(
+    <SearchInput expandableInput={{ isExpanded: false, onToggleExpand: () => {}, toggleAriaLabel: 'Test label' }} />
+  );
+
+  expect(screen.getByRole('button', { expanded: false })).toBeVisible();
+});
+
+test('expandable toggle is aria-expanded when isExpanded is true', () => {
+  render(
+    <SearchInput expandableInput={{ isExpanded: true, onToggleExpand: () => {}, toggleAriaLabel: 'Test label' }} />
+  );
+
+  expect(screen.getByRole('button', { expanded: true })).toBeVisible();
+});
+
+test('text input is not rendered when isExpanded is not true', () => {
+  render(
+    <SearchInput expandableInput={{ isExpanded: false, onToggleExpand: () => {}, toggleAriaLabel: 'Test label' }} />
+  );
+
+  expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+});
+
+test('text input is rendered when isExpanded is true', () => {
+  render(
+    <SearchInput expandableInput={{ isExpanded: true, onToggleExpand: () => {}, toggleAriaLabel: 'Test label' }} />
+  );
+
+  expect(screen.getByRole('textbox')).toBeVisible();
+});
+
+test('onToggleExpand is not called if the expandable toggle is not clicked', () => {
+  const mockOnToggleExpand = jest.fn();
+
+  render(
+    <SearchInput
+      expandableInput={{ isExpanded: true, onToggleExpand: mockOnToggleExpand, toggleAriaLabel: 'Test label' }}
+    />
+  );
+
+  expect(mockOnToggleExpand).not.toHaveBeenCalled();
+});
+
+test('onToggleExpand is called if the expandable toggle is clicked', async () => {
+  const mockOnToggleExpand = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <SearchInput
+      expandableInput={{ isExpanded: true, onToggleExpand: mockOnToggleExpand, toggleAriaLabel: 'Test label' }}
+    />
+  );
+
+  await user.click(screen.getByRole('button'));
+
+  expect(mockOnToggleExpand).toHaveBeenCalledTimes(1);
+  expect(mockOnToggleExpand).toHaveBeenCalledWith(true, expect.objectContaining({ type: 'click' }));
+});
+
+test('toggleAriaLabel is applied to the expandable toggle', () => {
+  render(
+    <SearchInput expandableInput={{ isExpanded: true, onToggleExpand: () => {}, toggleAriaLabel: 'Test label' }} />
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});

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

@@ -2,7 +2,7 @@
 id: 'Search input'
 section: components
 cssPrefix: 'pf-c-search-input'
-propComponents: ['SearchInput', 'SearchAttribute']
+propComponents: ['SearchInput', 'SearchAttribute', 'ExpandableInput']
 beta: true
 ---
 
@@ -35,6 +35,11 @@ import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 ```ts file='./SearchInputFocusSearch.tsx'
 ```
 
+### With expandable button
+
+```ts file='./SearchInputWithExpandable.tsx'
+```
+
 ### Advanced
 
 The search input component can be used to dynamically build a one to one attribute-value advanced search.

package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputWithExpandable: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onChange = (value: string) => {
+    setValue(value);
+  };
+
+  const onToggleExpand = (isExpanded: boolean) => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={onChange}
+      onClear={() => onChange('')}
+      expandableInput={{ isExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }}
+    />
+  );
+};