chore(SearchInput): reordered props in onChange and onSearch

patternfly · Jan 9, 2023 · ebb710b · ebb710b
1 parent de93f0e
commit ebb710b
Show file tree

Hide file tree

Showing 28 changed files with 56 additions and 45 deletions.
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
@@ -93,7 +93,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   const { isTree } = React.useContext(DualListSelectorContext);
 
   // only called when search input is dynamically built
-  const onChange = (newValue: string, e: React.FormEvent<HTMLInputElement>) => {
+  const onChange = (e: React.FormEvent<HTMLInputElement>, newValue: string) => {
     let filtered: React.ReactNode[];
     if (isTree) {
       filtered = options
@@ -165,7 +165,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
                 <SearchInput
                   onChange={isDisabled ? undefined : onChange}
                   onClear={
-                    onSearchInputClear ? onSearchInputClear : e => onChange('', e as React.FormEvent<HTMLInputElement>)
+                    onSearchInputClear ? onSearchInputClear : e => onChange(e as React.FormEvent<HTMLInputElement>, '')
                   }
                   isDisabled={isDisabled}
                   aria-label={searchInputAriaLabel}

diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
@@ -99,7 +99,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     return (
       <SearchInput
         value={isAvailable ? availableFilter : chosenFilter}
-        onChange={onChange}
+        onChange={(_event, value) => onChange(value)}
         onClear={() => onChange('')}
       />
     );

diff --git a/...es/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx b/...es/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
@@ -161,7 +161,11 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     const onChange = value => (isChosen ? setChosenFilter(value) : setAvailableFilter(value));
 
     return (
-      <SearchInput value={isChosen ? chosenFilter : availableFilter} onChange={onChange} onClear={() => onChange('')} />
+      <SearchInput
+        value={isChosen ? chosenFilter : availableFilter}
+        onChange={(_event, value) => onChange(value)}
+        onClear={() => onChange('')}
+      />
     );
   };
 

diff --git a/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx b/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx
@@ -103,7 +103,7 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
                     value={startInput}
                     aria-label="Filter menu items"
                     type="search"
-                    onChange={value => handleStartTextInputChange(value)}
+                    onChange={(_event, value) => handleStartTextInputChange(value)}
                   />
                 </MenuInput>
                 <Divider component="li" />

diff --git a/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx b/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx
@@ -39,7 +39,7 @@ export const MenuFilteringWithSearchInput: React.FunctionComponent = () => {
           value={input}
           aria-label="Filter menu items"
           type="search"
-          onChange={value => handleTextInputChange(value)}
+          onChange={(_event, value) => handleTextInputChange(value)}
         />
       </MenuInput>
       <Divider />

diff --git a/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx b/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx
@@ -26,13 +26,13 @@ export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivEle
   /** Flag for toggling the open/close state of the advanced search menu. */
   isSearchMenuOpen?: boolean;
   /** A callback for when the input value changes. */
-  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** A callback for when the user clicks the clear button. */
   onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** A callback for when the search button is clicked. */
   onSearch?: (
-    value: string,
     event: React.SyntheticEvent<HTMLButtonElement>,
+    value: string,
     attrValueMap: { [key: string]: string }
   ) => void;
   /** A callback for when the open advanced search button is clicked. */
@@ -124,7 +124,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
   const onSearchHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
     if (onSearch) {
-      onSearch(value, event, getAttrValueMap());
+      onSearch(event, value, getAttrValueMap());
     }
     if (isSearchMenuOpen) {
       onToggleAdvancedMenu(event as any);
@@ -150,7 +150,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
     });
 
     if (onChange) {
-      onChange(updatedValue.replace(/^\s+/g, ''), event);
+      onChange(event, updatedValue.replace(/^\s+/g, ''));
     }
   };
 

diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx
@@ -96,7 +96,7 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** Accessible label for the button to navigate to next result. */
   nextNavigationButtonAriaLabel?: string;
   /** A callback for when the input value changes. */
-  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** A callback for when the user clicks the clear button. */
   onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** A callback for when the user clicks to navigate to next result. */
@@ -105,8 +105,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** A callback for when the search button is clicked. */
   onSearch?: (
-    value: string,
     event: React.SyntheticEvent<HTMLButtonElement>,
+    value: string,
     attrValueMap: { [key: string]: string }
   ) => void;
   /** A callback for when the open advanced search button is clicked. */
@@ -208,7 +208,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const onChangeHandler = (value: string, event: React.FormEvent<HTMLInputElement>) => {
     if (onChange) {
-      onChange(value, event);
+      onChange(event, value);
     }
     setSearchValue(value);
   };
@@ -224,7 +224,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const onSearchHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
     if (onSearch) {
-      onSearch(value, event, getAttrValueMap());
+      onSearch(event, value, getAttrValueMap());
     }
     setIsSearchMenuOpen(false);
   };

diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx
@@ -38,8 +38,8 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
         ]}
         advancedSearchDelimiter={useEqualsAsDelimiter ? '=' : ':'}
         value={value}
-        onChange={setValue}
-        onSearch={setValue}
+        onChange={(_event, value) => setValue(value)}
+        onSearch={(_event, value) => setValue(value)}
         onClear={() => setValue('')}
         formAdditionalItems={
           useCustomFooter ? (

diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx
@@ -8,5 +8,12 @@ export const SearchInputBasic: React.FunctionComponent = () => {
     setValue(value);
   };
 
-  return <SearchInput placeholder="Find by name" value={value} onChange={onChange} onClear={() => onChange('')} />;
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={(_event, value) => onChange(value)}
+      onClear={() => onChange('')}
+    />
+  );
 };
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx
@@ -7,7 +7,7 @@ export const SearchInputFocusSearch: React.FunctionComponent = () => {
 
   return (
     <>
-      <SearchInput ref={ref} value={value} onChange={setValue} onClear={() => setValue('')} />
+      <SearchInput ref={ref} value={value} onChange={(_event, value) => setValue(value)} onClear={() => setValue('')} />
       <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
     </>
   );

diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx
@@ -17,7 +17,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onClear={() => onChange('')}
       expandableInput={{ isExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }}
     />

diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx
@@ -31,7 +31,7 @@ export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onClear={onClear}
       isNextNavigationButtonDisabled={currentResult === 3}
       isPreviousNavigationButtonDisabled={currentResult === 1}

diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx
@@ -19,7 +19,7 @@ export const SearchInputWithResultCount: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onClear={onClear}
       resultsCount={resultsCount}
     />

diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx
@@ -8,8 +8,8 @@ export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={setValue}
-      onSearch={setValue}
+      onChange={(_event, value) => setValue(value)}
+      onSearch={(_event, value) => setValue(value)}
       onClear={() => setValue('')}
     />
   );

diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx
@@ -83,7 +83,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
       <ToolbarItem variant="search-filter">
         <SearchInput
           aria-label="Component toggle groups example search input"
-          onChange={onInputChange}
+          onChange={(_event, value) => onInputChange(value)}
           value={inputValue}
           onClear={() => {
             onInputChange('');

diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx
@@ -88,7 +88,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
       <ToolbarItem variant="search-filter">
         <SearchInput
           aria-label="Consumer toggle groups example search input"
-          onChange={onInputChange}
+          onChange={(_event, value) => onInputChange(value)}
           value={inputValue}
           onClear={() => {
             onInputChange('');

diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
@@ -110,7 +110,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
       <ToolbarItem variant="search-filter">
         <SearchInput
           aria-label="With filters example search input"
-          onChange={onInputChange}
+          onChange={(_event, value) => onInputChange(value)}
           value={inputValue}
           onClear={() => {
             onInputChange('');

diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx
@@ -250,7 +250,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     // eslint-disable-next-line no-console
     <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
       <MenuInput>
-        <SearchInput aria-label="Filter menu items" type="search" onChange={value => onTextChange(value)} />
+        <SearchInput aria-label="Filter menu items" type="search" onChange={(_event, value) => onTextChange(value)} />
       </MenuInput>
       <Divider />
       <MenuContent>

diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx
@@ -164,7 +164,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
             value={searchInputValue}
             type="search"
             placeholder="Search"
-            onChange={onSearchInputChange}
+            onChange={(_event, value) => onSearchInputChange(value)}
             onKeyPress={onEnterPressed}
             aria-labelledby="pf-context-selector-search-button-id-1"
           />

diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
@@ -263,7 +263,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Filter by server name"
       value={searchValue}
-      onChange={onSearchChange}
+      onChange={(_event, value) => onSearchChange(value)}
       onClear={() => onSearchChange('')}
     />
   );

diff --git a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
@@ -246,7 +246,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Filter by server name"
       value={searchValue}
-      onChange={onSearchChange}
+      onChange={(_event, value) => onSearchChange(value)}
       onClear={() => onSearchChange('')}
     />
   );

diff --git a/packages/react-core/src/demos/SearchInput/SearchInput.md b/packages/react-core/src/demos/SearchInput/SearchInput.md
@@ -305,7 +305,7 @@ AdvancedComposableSearchInput = () => {
 
 
   // This demo and its handling of 'date within' and a date picker is modeled after the gmail advanced search form.
-  const onSubmit = (value, event) => {
+  const onSubmit = (event, value) => {
     event.preventDefault();
 
     if (isValidDate(new Date(date)) && dateWithin) {
@@ -364,7 +364,7 @@ AdvancedComposableSearchInput = () => {
   const searchInput = (
     <SearchInput
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onToggleAdvancedSearch={(e, isOpen) => {
         e.stopPropagation();
         setIsAdvancedSearchOpen(isOpen)

diff --git a/packages/react-core/src/demos/Toolbar.md b/packages/react-core/src/demos/Toolbar.md
@@ -207,7 +207,7 @@ class ConsoleLogViewerToolbar extends React.Component {
       window.alert('Clear Logs!');
     };
 
-    this.onSearchChange = (value, event) => {
+    this.onSearchChange = (event, value) => {
       this.setState({
         searchValue: value,
         searchResultsCount: 3

diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx
@@ -262,7 +262,7 @@ export class MenuDemo extends Component {
               value={input}
               aria-label="filterable-example-with-text-input"
               type="search"
-              onChange={value => this.handleTextInputChange(value, 'input')}
+              onChange={(_event, value) => this.handleTextInputChange(value, 'input')}
             />
           </MenuInput>
           <Divider />

diff --git a/...es/react-integration/demo-app-ts/src/components/demos/SearchInputDemo/SearchInputDemo.tsx b/...es/react-integration/demo-app-ts/src/components/demos/SearchInputDemo/SearchInputDemo.tsx
@@ -78,8 +78,8 @@ export class SearchInputDemo extends React.Component<SearchInputProps, SearchInp
           placeholder="Find by name"
           advancedSearchDelimiter=":"
           value={this.state.value}
-          onChange={this.onChange}
-          onSearch={this.onSearch}
+          onChange={(_event, value) => this.onChange(value)}
+          onSearch={(_event, value) => this.onSearch(value)}
           onClear={this.onClear}
           resultsCount={`${this.state.currentResult} / ${this.state.resultsCount}`}
           onNextClick={this.onNext}
@@ -96,8 +96,8 @@ export class SearchInputDemo extends React.Component<SearchInputProps, SearchInp
           ]}
           placeholder="Find by name"
           advancedSearchDelimiter=":"
-          onChange={this.onChange}
-          onSearch={this.onSearch}
+          onChange={(_event, value) => this.onChange(value)}
+          onSearch={(_event, value) => this.onSearch(value)}
           onClear={this.onClear}
           isDisabled
         />

diff --git a/packages/react-log-viewer/src/LogViewer/LogViewerSearch.tsx b/packages/react-log-viewer/src/LogViewer/LogViewerSearch.tsx
@@ -104,8 +104,8 @@ export const LogViewerSearch: React.FunctionComponent<LogViewerSearchProps> = ({
       value={searchedInput}
       resultsCount={`${currentSearchedItemCount + indexAdjuster} / ${hasFoundResults ? searchedWordIndexes.length : 0}`}
       {...props}
-      onChange={(input, event) => {
-        props.onChange && props.onChange(input, event);
+      onChange={(event, input) => {
+        props.onChange && props.onChange(event, input);
         setSearchedInput(input);
       }}
       onNextClick={event => {

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
@@ -1338,7 +1338,7 @@ class FilterTableDemo extends React.Component {
           <SearchInput
             aria-label="name filter"
             placeholder="Filter by name..."
-            onChange={this.onInputChange}
+            onChange={(_event, value) => this.onInputChange(value)}
             value={inputValue}
             onClear={() => {
               this.onInputChange('');

diff --git a/yarn.lock b/yarn.lock
@@ -3616,10 +3616,10 @@
   resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.222.4.tgz#5d988779c50df3dafc989d6e807d16971e34d228"
   integrity sha512-+0fk4dzxEbWn+hgaOnR0BjfeUdEeVVrqfH7+GFeFc+RKjEMjIR/BZbWWN8YQDezmDv6A32gHmEKaY3Uwbt06Lw==
 
-"@patternfly/react-catalog-view-extension@^4.93.16":
-  version "4.95.0"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-4.95.0.tgz#db18dc22f7f33647adcbab98f5e939279c660dcc"
-  integrity sha512-G69nisvARMqXj7SPBrRinEhltbggcETodepxVSziJ56DneI88Lp6IdR6YNXh7jJtJ7LyiMyTvZ1N3CO9Y+2EiA==
+"@patternfly/react-catalog-view-extension@^4.93.24":
+  version "4.95.1"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-4.95.1.tgz#a8ff4b14364a8505ff5156e3be6737032a70e277"
+  integrity sha512-GqWyih2GHagI+Yt9+VDmGRC8pv/989nExrisDLWbMNYaRKeZXEmr/LaWXTGJzD+fmZFYjc4wqd5tuJ0VkAp/jg==
   dependencies:
     "@patternfly/patternfly" "4.222.4"
     "@patternfly/react-core" "^4.267.6"