diff --git a/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx b/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx index 82055650c84..04c34bfca60 100644 --- a/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx +++ b/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 { 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) { diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx index 630cc325c24..d1dfe13adb4 100644 --- a/packages/react-core/src/components/SearchInput/SearchInput.tsx +++ b/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) => void; + onToggleExpand: (event: React.SyntheticEvent, isExpanded: boolean) => void; /** An accessible label for the expandable search input toggle. */ toggleAriaLabel: string; } @@ -58,11 +58,11 @@ export interface SearchInputProps extends Omit, /** 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 = ({ const onExpandHandler = (event: React.SyntheticEvent) => { setSearchValue(''); - onToggleExpand(isExpanded, event); + onToggleExpand(event, isExpanded); setFocusAfterExpandChange(true); }; diff --git a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx index a1e7d9e94cd..b0d699e366e 100644 --- a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx +++ b/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', () => { diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInput.md b/packages/react-core/src/components/SearchInput/examples/SearchInput.md index 665ca92271f..360dcce5bd7 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInput.md +++ b/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 --- diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx index c164f1718bb..72b4ebac2ac 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx +++ b/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, isExpanded: boolean) => { setIsExpanded(!isExpanded); };