@patternfly/react-core 6.3.0-prerelease.24 → 6.3.0-prerelease.26

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0-prerelease.23","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0-prerelease.25","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0-prerelease.23","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0-prerelease.25","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0-prerelease.23","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0-prerelease.25","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.0-prerelease.24",
+  "version": "6.3.0-prerelease.26",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.3.0-prerelease.7",
-    "@patternfly/react-styles": "^6.3.0-prerelease.7",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.7",
+    "@patternfly/react-icons": "^6.3.0-prerelease.8",
+    "@patternfly/react-styles": "^6.3.0-prerelease.8",
+    "@patternfly/react-tokens": "^6.3.0-prerelease.8",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.33",
+    "@patternfly/patternfly": "6.3.0-prerelease.35",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "58c9fa470754cc5ed27a6f52cf72d99a589e6ec9"
+  "gitHead": "f7974fbc0bcfaeff92cb05a4604bb48f4df54375"
 }

package/src/components/SearchInput/SearchInput.tsx

@@ -14,6 +14,7 @@ import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Popper } from '../../helpers';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
+import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 
 /** Properties for adding search attributes to an advanced search input. These properties must
  * be passed in as an object within an array to the search input component's attribute property.
@@ -41,6 +42,8 @@ export interface SearchInputExpandable {
   onToggleExpand: (event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => void;
   /** An accessible label for the expandable search input toggle. */
   toggleAriaLabel: string;
+  /** 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. */
+  hasAnimations?: boolean;
 }
 
 /** The main search input component. */
@@ -177,7 +180,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const popperRef = useRef(null);
   const [focusAfterExpandChange, setFocusAfterExpandChange] = useState(false);
 
-  const { isExpanded, onToggleExpand, toggleAriaLabel } = expandableInput || {};
+  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations } = expandableInput || {};
 
   useEffect(() => {
     // 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> = ({
     } else if (isExpanded) {
       searchInputInputRef?.current?.focus();
     } else {
-      searchInputExpandableToggleRef?.current?.focus();
+      if (!hasAnimations) {
+        searchInputExpandableToggleRef?.current?.focus();
+      }
+    }
+    if (!hasAnimations) {
+      setFocusAfterExpandChange(false);
     }
-    setFocusAfterExpandChange(false);
   }, [focusAfterExpandChange, isExpanded, searchInputInputRef, searchInputExpandableToggleRef]);
 
   useEffect(() => {
@@ -349,7 +356,28 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     </TextInputGroup>
   );
 
-  const expandableToggle = (
+  const expandToggleButton = (
+    <Button
+      variant={ButtonVariant.plain}
+      aria-label={toggleAriaLabel}
+      aria-expanded={isExpanded}
+      icon={<SearchIcon />}
+      onClick={onExpandHandler}
+      ref={searchInputExpandableToggleRef}
+    />
+  );
+
+  const collapseToggleButton = (
+    <Button
+      variant={ButtonVariant.plain}
+      aria-label={toggleAriaLabel}
+      aria-expanded={isExpanded}
+      icon={<TimesIcon />}
+      onClick={onExpandHandler}
+    />
+  );
+
+  const singleButtonToggle = (
     <Button
       variant={ButtonVariant.plain}
       aria-label={toggleAriaLabel}
@@ -360,10 +388,48 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     />
   );
 
-  const buildExpandableSearchInput = ({ ...searchInputProps } = {}) => (
+  const onTransitionEnd = () => {
+    !isExpanded && focusAfterExpandChange && searchInputExpandableToggleRef?.current?.focus();
+    setFocusAfterExpandChange(false);
+  };
+
+  const expandableToggle = (
+    <>
+      {!hasAnimations && <InputGroupItem isPlain>{singleButtonToggle}</InputGroupItem>}
+      {hasAnimations && (
+        <>
+          <InputGroupItem
+            className={inputGroupStyles.modifiers.searchExpand}
+            isPlain
+            onTransitionEnd={onTransitionEnd}
+            {...(isExpanded && { inert: '' })}
+          >
+            {expandToggleButton}
+          </InputGroupItem>
+          <InputGroupItem
+            className={inputGroupStyles.modifiers.searchAction}
+            isPlain
+            {...(!isExpanded && { inert: '' })}
+          >
+            {collapseToggleButton}
+          </InputGroupItem>
+        </>
+      )}
+    </>
+  );
+
+  const buildExpandableSearchInput = ({ ...searchInputProps }: any = {}) => (
     <InputGroup {...searchInputProps}>
-      <InputGroupItem isFill>{buildTextInputGroup()} </InputGroupItem>
-      <InputGroupItem isPlain>{expandableToggle}</InputGroupItem>
+      <InputGroupItem
+        {...(!hasAnimations && { isFill: true })}
+        {...(hasAnimations && { className: inputGroupStyles.modifiers.searchInput })}
+        {...(!isExpanded && {
+          inert: ''
+        })}
+      >
+        {buildTextInputGroup()}
+      </InputGroupItem>
+      {expandableToggle}
     </InputGroup>
   );
 
@@ -377,9 +443,19 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const buildSearchTextInputGroupWithExtraButtons = ({ ...searchInputProps } = {}) => (
     <InputGroup ref={triggerRef} {...searchInputProps}>
-      <InputGroupItem isFill>{buildTextInputGroup()}</InputGroupItem>
+      <InputGroupItem
+        {...(!hasAnimations && { isFill: true })}
+        {...(expandableInput && hasAnimations && { className: inputGroupStyles.modifiers.searchInput })}
+        {...(expandableInput &&
+          hasAnimations &&
+          !isExpanded && {
+            inert: ''
+          })}
+      >
+        {buildTextInputGroup()}
+      </InputGroupItem>
       {(attributes.length > 0 || onToggleAdvancedSearch) && (
-        <InputGroupItem isPlain>
+        <InputGroupItem isPlain {...(hasAnimations && { className: inputGroupStyles.modifiers.searchAction })}>
           <Button
             className={isSearchMenuOpen && 'pf-m-expanded'}
             variant={ButtonVariant.control}
@@ -392,7 +468,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         </InputGroupItem>
       )}
       {!!onSearch && (
-        <InputGroupItem>
+        <InputGroupItem {...(hasAnimations && { className: inputGroupStyles.modifiers.searchAction })}>
           <Button
             type="submit"
             variant={ButtonVariant.control}
@@ -413,11 +489,15 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const searchInputProps = {
     ...props,
-    className: className && css(className),
+    className: css(
+      expandableInput && hasAnimations && inputGroupStyles.modifiers.searchExpandable,
+      expandableInput && hasAnimations && isExpanded && inputGroupStyles.modifiers.expanded,
+      className && css(className)
+    ),
     innerRef: searchInputRef
   };
 
-  if (!!expandableInput && !isExpanded) {
+  if (!!expandableInput && !isExpanded && !hasAnimations) {
     return (
       <InputGroup {...searchInputProps}>
         <InputGroupItem>{expandableToggle}</InputGroupItem>
@@ -449,10 +529,19 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         </div>
       );
 
+      const advancedSearchInputProps = hasAnimations
+        ? {
+            className: css(
+              expandableInput && inputGroupStyles.modifiers.searchExpandable,
+              expandableInput && isExpanded && inputGroupStyles.modifiers.expanded
+            )
+          }
+        : {};
+
       const AdvancedSearchWithPopper = (
         <div className={css(className)} ref={searchInputRef} {...props}>
           <Popper
-            trigger={buildSearchTextInputGroupWithExtraButtons()}
+            trigger={buildSearchTextInputGroupWithExtraButtons(advancedSearchInputProps)}
             triggerRef={triggerRef}
             popper={AdvancedSearch}
             popperRef={popperRef}
@@ -466,7 +555,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
       const AdvancedSearchInline = (
         <div className={css(className)} ref={searchInputRef} {...props}>
-          {buildSearchTextInputGroupWithExtraButtons()}
+          {buildSearchTextInputGroupWithExtraButtons(advancedSearchInputProps)}
           {AdvancedSearch}
         </div>
       );

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

@@ -8,6 +8,7 @@ import { Button } from '../../Button';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
+import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 
 jest.mock('../../../helpers/OUIA/ouia');
 jest.mock('../../../helpers/GenerateId/GenerateId');
@@ -234,6 +235,89 @@ test('text input is rendered when isExpanded is true', () => {
   expect(screen.getByRole('textbox')).toBeVisible();
 });
 
+test('animate classes & inert are not rendered when hasAnimations is false', () => {
+  render(
+    <SearchInput
+      data-testid="test-id"
+      expandableInput={{
+        hasAnimations: false,
+        isExpanded: true,
+        onToggleExpand: () => {},
+        toggleAriaLabel: 'Test label'
+      }}
+    />
+  );
+
+  expect(screen.getByTestId('test-id')).not.toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+  expect(screen.getByTestId('test-id')).not.toHaveClass(`${inputGroupStyles.modifiers.expanded}`);
+
+  expect(screen.getByTestId('test-id').children[0]).not.toHaveClass(`${inputGroupStyles.modifiers.searchInput}`);
+  expect(screen.getByTestId('test-id').children[0].parentElement).not.toHaveAttribute('inert', '');
+
+  expect(screen.getAllByRole('button')).toHaveLength(1);
+  expect(screen.getAllByRole('button')[0].parentElement).not.toHaveClass(`${inputGroupStyles.modifiers.searchExpand}`);
+  expect(screen.getAllByRole('button')[0].parentElement).not.toHaveClass(`${inputGroupStyles.modifiers.searchAction}`);
+  expect(screen.getAllByRole('button')[0].parentElement).not.toHaveAttribute('inert', '');
+});
+
+test('animate classes & inert are properly rendered when hasAnimations is true and isExpanded is false', () => {
+  render(
+    <SearchInput
+      data-testid="test-id"
+      expandableInput={{
+        hasAnimations: true,
+        isExpanded: false,
+        onToggleExpand: () => {},
+        toggleAriaLabel: 'Test label'
+      }}
+    />
+  );
+
+  expect(screen.getByTestId('test-id')).toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+  expect(screen.getByTestId('test-id')).not.toHaveClass(`${inputGroupStyles.modifiers.expanded}`);
+
+  expect(screen.getByTestId('test-id').querySelector(`.${inputGroupStyles.modifiers.searchInput}`)).toBeInTheDocument();
+  expect(screen.getByTestId('test-id').querySelector(`.${inputGroupStyles.modifiers.searchInput}`)).toHaveAttribute(
+    'inert',
+    ''
+  );
+  expect(screen.getAllByRole('button')).toHaveLength(2);
+  expect(screen.getAllByRole('button')[0].parentElement).toHaveClass(`${inputGroupStyles.modifiers.searchExpand}`);
+  expect(screen.getAllByRole('button')[0].parentElement).not.toHaveAttribute('inert', '');
+
+  expect(screen.getAllByRole('button')[1].parentElement).toHaveClass(`${inputGroupStyles.modifiers.searchAction}`);
+  expect(screen.getAllByRole('button')[1].parentElement).toHaveAttribute('inert', '');
+});
+
+test('animate classes and inert are properly rendered when hasAnimations and isExpanded are true', () => {
+  render(
+    <SearchInput
+      data-testid="test-id"
+      expandableInput={{
+        hasAnimations: true,
+        isExpanded: true,
+        onToggleExpand: () => {},
+        toggleAriaLabel: 'Test label'
+      }}
+    />
+  );
+
+  expect(screen.getByTestId('test-id')).toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+  expect(screen.getByTestId('test-id')).toHaveClass(`${inputGroupStyles.modifiers.expanded}`);
+
+  expect(screen.getByTestId('test-id').querySelector(`.${inputGroupStyles.modifiers.searchInput}`)).toBeInTheDocument();
+  expect(screen.getByTestId('test-id').querySelector(`.${inputGroupStyles.modifiers.searchInput}`)).not.toHaveAttribute(
+    'inert',
+    ''
+  );
+  expect(screen.getAllByRole('button')).toHaveLength(2);
+  expect(screen.getAllByRole('button')[0].parentElement).toHaveClass(`${inputGroupStyles.modifiers.searchExpand}`);
+  expect(screen.getAllByRole('button')[0].parentElement).toHaveAttribute('inert', '');
+
+  expect(screen.getAllByRole('button')[1].parentElement).toHaveClass(`${inputGroupStyles.modifiers.searchAction}`);
+  expect(screen.getAllByRole('button')[1].parentElement).not.toHaveAttribute('inert', '');
+});
+
 test('onToggleExpand is not called if the expandable toggle is not clicked', () => {
   const mockOnToggleExpand = jest.fn();
 

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

@@ -13,39 +13,47 @@ import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 ### Basic
 
 ```ts file='./SearchInputBasic.tsx'
+
 ```
 
 ### Match with result count
 
 ```ts file='./SearchInputWithResultCount.tsx'
+
 ```
 
 ### Match with navigable options
 
 ```ts file='./SearchInputWithNavigableOptions.tsx'
+
 ```
 
 ### With submit button
 
 ```ts file='./SearchInputWithSubmitButton.tsx'
+
 ```
 
 ### Focus search input using ref
 
 ```ts file='./SearchInputFocusSearch.tsx'
+
 ```
 
 ### With expandable button
 
+Animations on the expansion and collapse of the search input may be opted into by passing `hasAnimations` to the `expandableInput` object.
+
 ```ts file='./SearchInputWithExpandable.tsx'
+
 ```
 
 ### Advanced
 
 The search input component can be used to dynamically build a one to one attribute-value advanced search.
 Using the `attributes` prop alongside the `advancedSearchDelimiter` will expose this functionality, as demonstrated in
-the following example. The search input component can also be used as a composable component and paired with a Popper 
-or other elements to build a completely custom advanced search form. This feature is demonstrated 
+the following example. The search input component can also be used as a composable component and paired with a Popper
+or other elements to build a completely custom advanced search form. This feature is demonstrated
 in the search input's <a href="/components/search-input/react-demos">react demos</a>.
 
 The values used in the attribute-value form fields may contain spaces. The values containing spaces
@@ -53,4 +61,5 @@ should be wrapped with quotes inside the summary search string in the input fiel
 autogenerated from the individual fields the quotes will be autoplaced.
 
 ```ts file='./SearchInputAdvanced.tsx'
+
 ```

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

@@ -20,7 +20,12 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
       value={value}
       onChange={(_event, value) => onChange(value)}
       onClear={() => onChange('')}
-      expandableInput={{ isExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }}
+      expandableInput={{
+        isExpanded,
+        onToggleExpand,
+        toggleAriaLabel: 'Expandable search input toggle',
+        hasAnimations: true
+      }}
     />
   );
 };

package/src/components/Tabs/TabsContext.ts

@@ -6,7 +6,7 @@ export interface TabsContextProps {
   unmountOnExit: boolean;
   localActiveKey: string | number;
   uniqueId: string;
-  setAccentStyles: (shouldInitializeStyles?: boolean) => void;
+  setAccentStyles?: (shouldInitializeStyles?: boolean) => void;
   handleTabClick: (
     event: React.MouseEvent<HTMLElement, MouseEvent>,
     eventKey: number | string,