@patternfly/react-core 4.224.10 → 4.224.13

package/src/components/Hint/__tests__/HintTitle.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { HintTitle } from "../HintTitle";
+
+test('renders without children', () => {
+  render(<HintTitle data-testid="HintTitle"></HintTitle>);
+  
+  expect(screen.getByTestId('HintTitle')).toBeVisible();
+});
+
+test('renders children', () => {
+  render(<HintTitle>{<button>Test Me</button>}</HintTitle>);
+
+  expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
+});
+
+test('renders with class pf-c-hint__title', () => {
+  render(<HintTitle>Hint Body Test</HintTitle>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('pf-c-hint__title');
+});
+
+test('renders with custom class names provided via prop', () => {
+  render(<HintTitle className="custom-classname">Hint Body Test</HintTitle>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('custom-classname');
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <HintTitle aria-label="labelling-id">Test</HintTitle>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(<HintTitle>{<button>Test</button>}</HintTitle>);
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`simple hint 1`] = `
+exports[`matches hint snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-hint"
@@ -8,21 +8,6 @@ exports[`simple hint 1`] = `
     <div
       class="pf-c-hint__actions"
     />
-    <div
-      class="pf-c-hint__title"
-    >
-      Title
-    </div>
-    <div
-      class="pf-c-hint__body"
-    >
-      Body
-    </div>
-    <div
-      class="pf-c-hint__footer"
-    >
-      Footer
-    </div>
   </div>
 </DocumentFragment>
 `;

package/src/components/Hint/__tests__/__snapshots__/HintBody.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-hint__body"
+  >
+    <button>
+      Test
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Hint/__tests__/__snapshots__/HintFooter.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-hint__footer"
+  >
+    <button>
+      Test
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Hint/__tests__/__snapshots__/HintTitle.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-hint__title"
+  >
+    <button>
+      Test
+    </button>
+  </div>
+</DocumentFragment>
+`;

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>
 `;