@patternfly/react-core 4.224.10 → 4.224.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.224.10",
+  "version": "4.224.11",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.75.10",
-    "@patternfly/react-styles": "^4.74.10",
-    "@patternfly/react-tokens": "^4.76.10",
+    "@patternfly/react-icons": "^4.75.11",
+    "@patternfly/react-styles": "^4.74.11",
+    "@patternfly/react-tokens": "^4.76.11",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "5242f54a3eeae9d5ca2958620454a8d67b7926e8"
+  "gitHead": "030baae8a3dd4fe4a5bd0dda43804835cfc453bb"
 }

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

@@ -1,14 +1,49 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { ActionList } from '../ActionList';
 
-describe('action list', () => {
-  test('renders successfully', () => {
-    const { asFragment } = render(<ActionList>test</ActionList>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('isIconList flag adds modifier', () => {
-    const { asFragment } = render(<ActionList isIconList>test</ActionList>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders without children', () => {
+  render(<ActionList data-testid="action-list" />);
+  expect(screen.getByTestId('action-list')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<ActionList>Test</ActionList>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class pf-c-action-list', () => {
+  render(<ActionList>Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-action-list');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<ActionList className="custom-class">Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Does not render with class pf-m-icons by default', () => {
+  render(<ActionList>Test</ActionList>);
+
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-icons');
+});
+
+test('Renders with class pf-m-icons when isIconList is true', () => {
+  render(<ActionList isIconList={true}>Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-m-icons');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<ActionList aria-label="Test label">Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+})
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<ActionList>test</ActionList>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/ActionList/__tests__/ActionListGroup.test.tsx

@@ -1,10 +1,37 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { ActionListGroup } from '../ActionListGroup';
 
-describe('action list group', () => {
-  test('renders successfully', () => {
-    const { asFragment } = render(<ActionListGroup>test</ActionListGroup>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders without children', () => {
+  render(<ActionListGroup data-testid="action-list-group" />);
+  expect(screen.getByTestId('action-list-group')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<ActionListGroup>Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class pf-c-action-list__group', () => {
+  render(<ActionListGroup>Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-action-list__group');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<ActionListGroup className="custom-class">Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<ActionListGroup aria-label="Test label">Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+})
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<ActionListGroup>test</ActionListGroup>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/ActionList/__tests__/ActionListItem.test.tsx

@@ -1,10 +1,37 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { ActionListItem } from '../ActionListItem';
 
-describe('action list item', () => {
-  test('renders successfully', () => {
-    const { asFragment } = render(<ActionListItem>test</ActionListItem>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders without children', () => {
+  render(<ActionListItem data-testid="action-list-item" />);
+  expect(screen.getByTestId('action-list-item')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<ActionListItem>Test</ActionListItem>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class pf-c-action-list__item', () => {
+  render(<ActionListItem>Test</ActionListItem>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-action-list__item');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<ActionListItem className="custom-class">Test</ActionListItem>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<ActionListItem aria-label="Test label">Test</ActionListItem>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+})
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<ActionListItem>test</ActionListItem>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/ActionList/__tests__/__snapshots__/ActionList.test.tsx.snap

@@ -1,16 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`action list isIconList flag adds modifier 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-action-list pf-m-icons"
-  >
-    test
-  </div>
-</DocumentFragment>
-`;
-
-exports[`action list renders successfully 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-action-list"

package/src/components/ActionList/__tests__/__snapshots__/ActionListGroup.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`action list group renders successfully 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-action-list__group"

package/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`action list item renders successfully 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-action-list__item"

package/src/components/SearchInput/SearchInput.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/SearchInput/search-input';
 import { Button, ButtonVariant } from '../Button';
 import { Badge } from '../Badge';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
@@ -12,6 +11,7 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
 import { InputGroup } from '../InputGroup';
+import { Popper } from '../../helpers';
 
 export interface SearchAttribute {
   /** The search attribute's value to be provided in the search input's query string.
@@ -83,6 +83,13 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** Delimiter in the query string for pairing attributes with search values.
    * Required whenever attributes are passed as props */
   advancedSearchDelimiter?: string;
+  /** The container to append the menu to.
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * appendTo={() => document.body}
+   * appendTo={document.getElementById('target')}
+   */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
@@ -112,6 +119,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   nextNavigationButtonAriaLabel = 'Next',
   submitSearchButtonLabel = 'Search',
   isDisabled = false,
+  appendTo,
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -277,11 +285,9 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   if (!!onSearch || attributes.length > 0 || !!onToggleAdvancedSearch) {
     if (attributes.length > 0) {
-      return (
-        <div className={css(className, styles.searchInput)} ref={searchInputRef} {...props}>
-          {buildSearchTextInputGroupWithExtraButtons()}
+      const AdvancedSearch = (
+        <span>
           <AdvancedSearchMenu
-            className={styles.searchInputMenu}
             value={value}
             parentRef={searchInputRef}
             parentInputRef={searchInputInputRef}
@@ -298,8 +304,29 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
             getAttrValueMap={getAttrValueMap}
             isSearchMenuOpen={isSearchMenuOpen}
           />
+        </span>
+      );
+
+      const AdvancedSearchWithPopper = (
+        <div className={css(className)} ref={searchInputRef} {...props}>
+          <Popper
+            trigger={buildSearchTextInputGroupWithExtraButtons()}
+            popper={AdvancedSearch}
+            isVisible={isSearchMenuOpen}
+            enableFlip={true}
+            appendTo={() => appendTo || searchInputRef.current}
+          />
         </div>
       );
+
+      const AdvancedSearchInline = (
+        <div className={css(className)} ref={searchInputRef} {...props}>
+          {buildSearchTextInputGroupWithExtraButtons()}
+          {AdvancedSearch}
+        </div>
+      );
+
+      return appendTo !== 'inline' ? AdvancedSearchWithPopper : AdvancedSearchInline;
     }
 
     return buildSearchTextInputGroupWithExtraButtons({ ...searchInputProps });

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

@@ -81,6 +81,7 @@ describe('SearchInput', () => {
   test('advanced search with custom attributes', () => {
     const { asFragment } = render(
       <SearchInput
+        data-testid="test-id"
         attributes={[
           { attr: 'username', display: 'Username' },
           { attr: 'firstname', display: 'First name' }
@@ -102,7 +103,43 @@ describe('SearchInput', () => {
 
     userEvent.click(screen.getByRole('button', { name: 'Search' }));
 
+    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('First name'))
+
     expect(props.onSearch).toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('advanced search with custom attributes and appendTo="inline', () => {
+    const {container}  = render(
+    <SearchInput
+        data-testid="test-id"
+        attributes={[
+          { attr: 'test', display: 'test' },
+        ]}
+        appendTo='inline'
+      />
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    
+    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('test'))
+  });
+
+  test('advanced search with custom attributes and appendTo external DOM element', () => {
+    const {container}  = render(
+    <SearchInput
+        data-testid="test-id"
+        attributes={[
+          { attr: 'test', display: 'test' },
+        ]}
+        appendTo={document.body}
+      />
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    
+    expect(screen.getByTestId('test-id')).not.toContainElement(screen.getByText('test'))
+    expect(document.body).toContainElement(screen.getByText('test'))
+  });
 });

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

@@ -3,7 +3,7 @@
 exports[`SearchInput advanced search 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-search-input"
+    class=""
   >
     <div
       class="pf-c-input-group"
@@ -125,7 +125,8 @@ exports[`SearchInput advanced search 1`] = `
 exports[`SearchInput advanced search with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-search-input"
+    class=""
+    data-testid="test-id"
   >
     <div
       class="pf-c-input-group"
@@ -194,9 +195,9 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       </div>
       <button
         aria-disabled="false"
-        aria-expanded="false"
+        aria-expanded="true"
         aria-label="Open advanced search"
-        class="pf-c-button pf-m-control"
+        class="pf-c-button pf-m-control pf-m-expanded"
         data-ouia-component-id="OUIA-Generated-Button-control-8"
         data-ouia-component-type="PF4/Button"
         data-ouia-safe="true"
@@ -240,6 +241,194 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
         </svg>
       </button>
     </div>
+    <span
+      class=""
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; width: 0px;"
+    >
+      <div
+        class="pf-c-panel pf-m-raised"
+      >
+        <div
+          class="pf-c-panel__main"
+        >
+          <div
+            class="pf-c-panel__main-body"
+          >
+            <form
+              class="pf-c-form"
+              novalidate=""
+            >
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-label"
+                >
+                  <label
+                    class="pf-c-form__label"
+                    for="username_0"
+                  >
+                    <span
+                      class="pf-c-form__label-text"
+                    >
+                      Username
+                    </span>
+                  </label>
+                   
+                </div>
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="pf-c-form-control"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                    data-ouia-component-type="PF4/TextInput"
+                    data-ouia-safe="true"
+                    id="username_0"
+                    type="text"
+                    value="player"
+                  />
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-label"
+                >
+                  <label
+                    class="pf-c-form__label"
+                    for="firstname_1"
+                  >
+                    <span
+                      class="pf-c-form__label-text"
+                    >
+                      First name
+                    </span>
+                  </label>
+                   
+                </div>
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="pf-c-form-control"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+                    data-ouia-component-type="PF4/TextInput"
+                    data-ouia-safe="true"
+                    id="firstname_1"
+                    type="text"
+                    value="john"
+                  />
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-label"
+                >
+                  <label
+                    class="pf-c-form__label"
+                    for="pf-random-id-2"
+                  >
+                    <span
+                      class="pf-c-form__label-text"
+                    >
+                      Has words
+                    </span>
+                  </label>
+                   
+                </div>
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="pf-c-form-control"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+                    data-ouia-component-type="PF4/TextInput"
+                    data-ouia-safe="true"
+                    id="pf-random-id-2"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <button
+                    aria-disabled="false"
+                    class="pf-c-button pf-m-link pf-m-inline"
+                    data-ouia-component-id="OUIA-Generated-Button-link-1"
+                    data-ouia-component-type="PF4/Button"
+                    data-ouia-safe="true"
+                    type="button"
+                  >
+                    Link
+                    <span
+                      class="pf-c-button__icon pf-m-end"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style="vertical-align: -0.125em;"
+                        viewBox="0 0 448 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group pf-m-action"
+              >
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <div
+                    class="pf-c-form__actions"
+                  >
+                    <button
+                      aria-disabled="false"
+                      class="pf-c-button pf-m-primary"
+                      data-ouia-component-id="OUIA-Generated-Button-primary-1"
+                      data-ouia-component-type="PF4/Button"
+                      data-ouia-safe="true"
+                      type="submit"
+                    >
+                      Search
+                    </button>
+                    <button
+                      aria-disabled="false"
+                      class="pf-c-button pf-m-link"
+                      data-ouia-component-id="OUIA-Generated-Button-link-2"
+                      data-ouia-component-type="PF4/Button"
+                      data-ouia-safe="true"
+                      type="reset"
+                    >
+                      Reset
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </span>
   </div>
 </DocumentFragment>
 `;