@@ -14,6 +14,7 @@ import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../
1414import { InputGroup , InputGroupItem } from '../InputGroup' ;
1515import { Popper } from '../../helpers' ;
1616import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group' ;
17+ import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group' ;
1718
1819/** Properties for adding search attributes to an advanced search input. These properties must
1920 * be passed in as an object within an array to the search input component's attribute property.
@@ -41,6 +42,8 @@ export interface SearchInputExpandable {
4142 onToggleExpand : ( event : React . SyntheticEvent < HTMLButtonElement > , isExpanded : boolean ) => void ;
4243 /** An accessible label for the expandable search input toggle. */
4344 toggleAriaLabel : string ;
45+ /** Flag indicating animations should be enabled when the search input expands and collapses. Note: this will change the component's DOM structure. In a future breaking change release, this will become the default behavior and will no longer be needed. */
46+ hasAnimations ?: boolean ;
4447}
4548
4649/** The main search input component. */
@@ -177,7 +180,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
177180 const popperRef = useRef ( null ) ;
178181 const [ focusAfterExpandChange , setFocusAfterExpandChange ] = useState ( false ) ;
179182
180- const { isExpanded, onToggleExpand, toggleAriaLabel } = expandableInput || { } ;
183+ const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations } = expandableInput || { } ;
181184
182185 useEffect ( ( ) => {
183186 // this effect and the focusAfterExpandChange variable are needed to focus the input/toggle as needed when the
@@ -187,9 +190,13 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
187190 } else if ( isExpanded ) {
188191 searchInputInputRef ?. current ?. focus ( ) ;
189192 } else {
190- searchInputExpandableToggleRef ?. current ?. focus ( ) ;
193+ if ( ! hasAnimations ) {
194+ searchInputExpandableToggleRef ?. current ?. focus ( ) ;
195+ }
196+ }
197+ if ( ! hasAnimations ) {
198+ setFocusAfterExpandChange ( false ) ;
191199 }
192- setFocusAfterExpandChange ( false ) ;
193200 } , [ focusAfterExpandChange , isExpanded , searchInputInputRef , searchInputExpandableToggleRef ] ) ;
194201
195202 useEffect ( ( ) => {
@@ -349,7 +356,28 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
349356 </ TextInputGroup >
350357 ) ;
351358
352- const expandableToggle = (
359+ const expandToggleButton = (
360+ < Button
361+ variant = { ButtonVariant . plain }
362+ aria-label = { toggleAriaLabel }
363+ aria-expanded = { isExpanded }
364+ icon = { < SearchIcon /> }
365+ onClick = { onExpandHandler }
366+ ref = { searchInputExpandableToggleRef }
367+ />
368+ ) ;
369+
370+ const collapseToggleButton = (
371+ < Button
372+ variant = { ButtonVariant . plain }
373+ aria-label = { toggleAriaLabel }
374+ aria-expanded = { isExpanded }
375+ icon = { < TimesIcon /> }
376+ onClick = { onExpandHandler }
377+ />
378+ ) ;
379+
380+ const singleButtonToggle = (
353381 < Button
354382 variant = { ButtonVariant . plain }
355383 aria-label = { toggleAriaLabel }
@@ -360,10 +388,48 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
360388 />
361389 ) ;
362390
363- const buildExpandableSearchInput = ( { ...searchInputProps } = { } ) => (
391+ const onTransitionEnd = ( ) => {
392+ ! isExpanded && focusAfterExpandChange && searchInputExpandableToggleRef ?. current ?. focus ( ) ;
393+ setFocusAfterExpandChange ( false ) ;
394+ } ;
395+
396+ const expandableToggle = (
397+ < >
398+ { ! hasAnimations && < InputGroupItem isPlain > { singleButtonToggle } </ InputGroupItem > }
399+ { hasAnimations && (
400+ < >
401+ < InputGroupItem
402+ className = { inputGroupStyles . modifiers . searchExpand }
403+ isPlain
404+ onTransitionEnd = { onTransitionEnd }
405+ { ...( isExpanded && { inert : '' } ) }
406+ >
407+ { expandToggleButton }
408+ </ InputGroupItem >
409+ < InputGroupItem
410+ className = { inputGroupStyles . modifiers . searchAction }
411+ isPlain
412+ { ...( ! isExpanded && { inert : '' } ) }
413+ >
414+ { collapseToggleButton }
415+ </ InputGroupItem >
416+ </ >
417+ ) }
418+ </ >
419+ ) ;
420+
421+ const buildExpandableSearchInput = ( { ...searchInputProps } : any = { } ) => (
364422 < InputGroup { ...searchInputProps } >
365- < InputGroupItem isFill > { buildTextInputGroup ( ) } </ InputGroupItem >
366- < InputGroupItem isPlain > { expandableToggle } </ InputGroupItem >
423+ < InputGroupItem
424+ { ...( ! hasAnimations && { isFill : true } ) }
425+ { ...( hasAnimations && { className : inputGroupStyles . modifiers . searchInput } ) }
426+ { ...( ! isExpanded && {
427+ inert : ''
428+ } ) }
429+ >
430+ { buildTextInputGroup ( ) }
431+ </ InputGroupItem >
432+ { expandableToggle }
367433 </ InputGroup >
368434 ) ;
369435
@@ -377,9 +443,19 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
377443
378444 const buildSearchTextInputGroupWithExtraButtons = ( { ...searchInputProps } = { } ) => (
379445 < InputGroup ref = { triggerRef } { ...searchInputProps } >
380- < InputGroupItem isFill > { buildTextInputGroup ( ) } </ InputGroupItem >
446+ < InputGroupItem
447+ { ...( ! hasAnimations && { isFill : true } ) }
448+ { ...( expandableInput && hasAnimations && { className : inputGroupStyles . modifiers . searchInput } ) }
449+ { ...( expandableInput &&
450+ hasAnimations &&
451+ ! isExpanded && {
452+ inert : ''
453+ } ) }
454+ >
455+ { buildTextInputGroup ( ) }
456+ </ InputGroupItem >
381457 { ( attributes . length > 0 || onToggleAdvancedSearch ) && (
382- < InputGroupItem isPlain >
458+ < InputGroupItem isPlain { ... ( hasAnimations && { className : inputGroupStyles . modifiers . searchAction } ) } >
383459 < Button
384460 className = { isSearchMenuOpen && 'pf-m-expanded' }
385461 variant = { ButtonVariant . control }
@@ -392,7 +468,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
392468 </ InputGroupItem >
393469 ) }
394470 { ! ! onSearch && (
395- < InputGroupItem >
471+ < InputGroupItem { ... ( hasAnimations && { className : inputGroupStyles . modifiers . searchAction } ) } >
396472 < Button
397473 type = "submit"
398474 variant = { ButtonVariant . control }
@@ -413,11 +489,15 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
413489
414490 const searchInputProps = {
415491 ...props ,
416- className : className && css ( className ) ,
492+ className : css (
493+ expandableInput && hasAnimations && inputGroupStyles . modifiers . searchExpandable ,
494+ expandableInput && hasAnimations && isExpanded && inputGroupStyles . modifiers . expanded ,
495+ className && css ( className )
496+ ) ,
417497 innerRef : searchInputRef
418498 } ;
419499
420- if ( ! ! expandableInput && ! isExpanded ) {
500+ if ( ! ! expandableInput && ! isExpanded && ! hasAnimations ) {
421501 return (
422502 < InputGroup { ...searchInputProps } >
423503 < InputGroupItem > { expandableToggle } </ InputGroupItem >
@@ -449,10 +529,19 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
449529 </ div >
450530 ) ;
451531
532+ const advancedSearchInputProps = hasAnimations
533+ ? {
534+ className : css (
535+ expandableInput && inputGroupStyles . modifiers . searchExpandable ,
536+ expandableInput && isExpanded && inputGroupStyles . modifiers . expanded
537+ )
538+ }
539+ : { } ;
540+
452541 const AdvancedSearchWithPopper = (
453542 < div className = { css ( className ) } ref = { searchInputRef } { ...props } >
454543 < Popper
455- trigger = { buildSearchTextInputGroupWithExtraButtons ( ) }
544+ trigger = { buildSearchTextInputGroupWithExtraButtons ( advancedSearchInputProps ) }
456545 triggerRef = { triggerRef }
457546 popper = { AdvancedSearch }
458547 popperRef = { popperRef }
@@ -466,7 +555,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
466555
467556 const AdvancedSearchInline = (
468557 < div className = { css ( className ) } ref = { searchInputRef } { ...props } >
469- { buildSearchTextInputGroupWithExtraButtons ( ) }
558+ { buildSearchTextInputGroupWithExtraButtons ( advancedSearchInputProps ) }
470559 { AdvancedSearch }
471560 </ div >
472561 ) ;
0 commit comments