chore(SearchInput): edited ExpandableInput and SearchAttribute

packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -3,7 +3,7 @@ import { Button } from '../Button';
 import { ActionGroup, Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
 import { GenerateId, KeyTypes } from '../../helpers';
-import { SearchAttribute } from './SearchInput';
+import { SearchInputSearchAttribute } from './SearchInput';
 import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
 
@@ -13,7 +13,7 @@ export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivEle
    */
   advancedSearchDelimiter?: string;
   /** Array of attribute values used for dynamically generated advanced search. */
-  attributes?: string[] | SearchAttribute[];
+  attributes?: string[] | SearchInputSearchAttribute[];
   /** Additional classes added to the advanced search menu. */
   className?: string;
   /* Additional elements added after the attributes in the form.
@@ -161,7 +161,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
 
   const buildFormGroups = () => {
     const formGroups = [] as React.ReactNode[];
-    attributes.forEach((attribute: string | SearchAttribute, index: number) => {
+    attributes.forEach((attribute: string | SearchInputSearchAttribute, index: number) => {
       const display = typeof attribute === 'string' ? attribute : attribute.display;
       const queryAttr = typeof attribute === 'string' ? attribute : attribute.attr;
       if (index === 0) {

packages/react-core/src/components/SearchInput/SearchInput.tsx

@@ -17,7 +17,7 @@ import { Popper } from '../../helpers';
  * be passed in as an object within an array to the search input component's attribute properrty.
  */
 
-export interface SearchAttribute {
+export interface SearchInputSearchAttribute {
   /** The search attribute's value to be provided in the search input's query string.
    * It should have no spaces and be unique for every attribute.
    */
@@ -32,11 +32,11 @@ export interface SearchAttribute {
  * the search input component's expandableInput property.
  */
 
-export interface ExpandableInput {
+export interface SearchInputExpandable {
   /** 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;
+  onToggleExpand: (event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => void;
   /** An accessible label for the expandable search input toggle. */
   toggleAriaLabel: string;
 }
@@ -58,11 +58,11 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** An accessible label for the search input. */
   'aria-label'?: string;
   /** Array of attribute values used for dynamically generated advanced search. */
-  attributes?: string[] | SearchAttribute[];
+  attributes?: string[] | SearchInputSearchAttribute[];
   /** Additional classes added to the search input. */
   className?: string;
   /** Object that makes the search input expandable/collapsible. */
-  expandableInput?: ExpandableInput;
+  expandableInput?: SearchInputExpandable;
   /* Additional elements added after the attributes in the form.
    * The new form elements can be wrapped in a form group component for automatic formatting. */
   formAdditionalItems?: React.ReactNode;
@@ -285,7 +285,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const onExpandHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     setSearchValue('');
-    onToggleExpand(isExpanded, event);
+    onToggleExpand(event, isExpanded);
     setFocusAfterExpandChange(true);
   };
 

packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx

@@ -239,7 +239,7 @@ test('onToggleExpand is called if the expandable toggle is clicked', async () =>
   await user.click(screen.getByRole('button'));
 
   expect(mockOnToggleExpand).toHaveBeenCalledTimes(1);
-  expect(mockOnToggleExpand).toHaveBeenCalledWith(true, expect.objectContaining({ type: 'click' }));
+  expect(mockOnToggleExpand).toHaveBeenCalledWith(expect.objectContaining({ type: 'click' }), true);
 });
 
 test('toggleAriaLabel is applied to the expandable toggle', () => {

packages/react-core/src/components/SearchInput/examples/SearchInput.md

@@ -2,7 +2,7 @@
 id: 'Search input'
 section: components
 cssPrefix: 'pf-c-search-input'
-propComponents: ['SearchInput', 'SearchAttribute', 'ExpandableInput']
+propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
 beta: true
 ---
 

packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -9,7 +9,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
     setValue(value);
   };
 
-  const onToggleExpand = (isExpanded: boolean) => {
+  const onToggleExpand = (_event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => {
     setIsExpanded(!isExpanded);
   };