@patternfly/react-core 5.1.1-prerelease.9 → 5.2.0-prerelease.1

package/src/components/Nav/NavItem.tsx

@@ -27,7 +27,7 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   /** Callback for item click */
   onClick?: NavSelectClickHandler;
   /** Component used to render NavItems if  React.isValidElement(children) is false */
-  component?: React.ReactNode;
+  component?: React.ElementType<any> | React.ComponentType<any>;
   /** Flyout of a nav item. This should be a Menu component. Should not be used if the to prop is defined. */
   flyout?: React.ReactElement;
   /** Callback when flyout is opened or closed */

package/src/components/Nav/NavList.tsx

@@ -14,10 +14,14 @@ export interface NavListProps
   children?: React.ReactNode;
   /** Additional classes added to the list */
   className?: string;
-  /** Aria-label for the left scroll button */
+  /** @deprecated Please use backScrollAriaLabel. Aria-label for the left scroll button */
   ariaLeftScroll?: string;
-  /** Aria-label for the right scroll button */
+  /** @deprecated Please use forwardScrollAriaLabel. Aria-label for the right scroll button */
   ariaRightScroll?: string;
+  /** Aria-label for the back scroll button */
+  backScrollAriaLabel?: string;
+  /** Aria-label for the forward scroll button */
+  forwardScrollAriaLabel?: string;
 }
 
 class NavList extends React.Component<NavListProps> {
@@ -26,8 +30,11 @@ class NavList extends React.Component<NavListProps> {
   context!: React.ContextType<typeof NavContext>;
   static defaultProps: NavListProps = {
     ariaLeftScroll: 'Scroll left',
-    ariaRightScroll: 'Scroll right'
+    backScrollAriaLabel: 'Scroll back',
+    ariaRightScroll: 'Scroll right',
+    forwardScrollAriaLabel: 'Scroll foward'
   };
+  private direction = 'ltr';
 
   state = {
     scrollViewAtStart: false,
@@ -51,7 +58,7 @@ class NavList extends React.Component<NavListProps> {
     }
   };
 
-  scrollLeft = () => {
+  scrollBack = () => {
     // find first Element that is fully in view on the left, then scroll to the element before it
     const container = this.navList.current;
     if (container) {
@@ -65,13 +72,19 @@ class NavList extends React.Component<NavListProps> {
         }
       }
       if (lastElementOutOfView) {
-        container.scrollLeft -= lastElementOutOfView.scrollWidth;
+        if (this.direction === 'ltr') {
+          // LTR scrolls left to go back
+          container.scrollLeft -= lastElementOutOfView.scrollWidth;
+        } else {
+          // RTL scrolls right to go back
+          container.scrollLeft += lastElementOutOfView.scrollWidth;
+        }
       }
       this.handleScrollButtons();
     }
   };
 
-  scrollRight = () => {
+  scrollForward = () => {
     // find last Element that is fully in view on the right, then scroll to the element after it
     const container = this.navList.current;
     if (container) {
@@ -85,7 +98,13 @@ class NavList extends React.Component<NavListProps> {
         }
       }
       if (firstElementOutOfView) {
-        container.scrollLeft += firstElementOutOfView.scrollWidth;
+        if (this.direction === 'ltr') {
+          // LTR scrolls right to go forward
+          container.scrollLeft += firstElementOutOfView.scrollWidth;
+        } else {
+          // RTL scrolls left to go forward
+          container.scrollLeft -= firstElementOutOfView.scrollWidth;
+        }
       }
       this.handleScrollButtons();
     }
@@ -93,6 +112,7 @@ class NavList extends React.Component<NavListProps> {
 
   componentDidMount() {
     this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true);
+    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
     this.handleScrollButtons();
   }
 
@@ -100,8 +120,20 @@ class NavList extends React.Component<NavListProps> {
     this.observer();
   }
 
+  componentDidUpdate() {
+    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
+  }
+
   render() {
-    const { children, className, ariaLeftScroll, ariaRightScroll, ...props } = this.props;
+    const {
+      children,
+      className,
+      ariaLeftScroll,
+      ariaRightScroll,
+      backScrollAriaLabel,
+      forwardScrollAriaLabel,
+      ...props
+    } = this.props;
     const { scrollViewAtStart, scrollViewAtEnd } = this.state;
 
     return (
@@ -113,8 +145,8 @@ class NavList extends React.Component<NavListProps> {
                 {isHorizontal && (
                   <button
                     className={css(styles.navScrollButton)}
-                    aria-label={ariaLeftScroll}
-                    onClick={this.scrollLeft}
+                    aria-label={backScrollAriaLabel || ariaLeftScroll}
+                    onClick={this.scrollBack}
                     disabled={scrollViewAtStart}
                     tabIndex={isSidebarOpen ? null : -1}
                   >
@@ -133,8 +165,8 @@ class NavList extends React.Component<NavListProps> {
                 {isHorizontal && (
                   <button
                     className={css(styles.navScrollButton)}
-                    aria-label={ariaRightScroll}
-                    onClick={this.scrollRight}
+                    aria-label={forwardScrollAriaLabel || ariaRightScroll}
+                    onClick={this.scrollForward}
                     disabled={scrollViewAtEnd}
                     tabIndex={isSidebarOpen ? null : -1}
                   >

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

@@ -573,7 +573,7 @@ exports[`Nav Horizontal Nav List 1`] = `
     data-ouia-safe="true"
   >
     <button
-      aria-label="Scroll left"
+      aria-label="Scroll back"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -649,7 +649,7 @@ exports[`Nav Horizontal Nav List 1`] = `
       </li>
     </ul>
     <button
-      aria-label="Scroll right"
+      aria-label="Scroll foward"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -681,7 +681,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
     data-ouia-safe="true"
   >
     <button
-      aria-label="Scroll left"
+      aria-label="Scroll back"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -757,7 +757,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
       </li>
     </ul>
     <button
-      aria-label="Scroll right"
+      aria-label="Scroll foward"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -948,7 +948,7 @@ exports[`Nav Nav List with custom item nodes 1`] = `
     data-ouia-safe="true"
   >
     <button
-      aria-label="Scroll left"
+      aria-label="Scroll back"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -984,7 +984,7 @@ exports[`Nav Nav List with custom item nodes 1`] = `
       </li>
     </ul>
     <button
-      aria-label="Scroll right"
+      aria-label="Scroll foward"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -1016,7 +1016,7 @@ exports[`Nav Nav List with flyout 1`] = `
     data-ouia-safe="true"
   >
     <button
-      aria-label="Scroll left"
+      aria-label="Scroll back"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -1073,7 +1073,7 @@ exports[`Nav Nav List with flyout 1`] = `
       </li>
     </ul>
     <button
-      aria-label="Scroll right"
+      aria-label="Scroll foward"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -1186,7 +1186,7 @@ exports[`Nav Tertiary Nav List 1`] = `
     data-ouia-safe="true"
   >
     <button
-      aria-label="Scroll left"
+      aria-label="Scroll back"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -1262,7 +1262,7 @@ exports[`Nav Tertiary Nav List 1`] = `
       </li>
     </ul>
     <button
-      aria-label="Scroll right"
+      aria-label="Scroll foward"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >

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

@@ -602,7 +602,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
             data-ouia-safe="true"
           >
             <button
-              aria-label="Scroll left"
+              aria-label="Scroll back"
               class="pf-v5-c-nav__scroll-button"
               disabled=""
             >
@@ -687,7 +687,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
               </li>
             </ul>
             <button
-              aria-label="Scroll right"
+              aria-label="Scroll foward"
               class="pf-v5-c-nav__scroll-button"
               disabled=""
             >
@@ -785,7 +785,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
             data-ouia-safe="true"
           >
             <button
-              aria-label="Scroll left"
+              aria-label="Scroll back"
               class="pf-v5-c-nav__scroll-button"
               disabled=""
             >
@@ -870,7 +870,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
               </li>
             </ul>
             <button
-              aria-label="Scroll right"
+              aria-label="Scroll foward"
               class="pf-v5-c-nav__scroll-button"
               disabled=""
             >
@@ -1070,7 +1070,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
           data-ouia-safe="true"
         >
           <button
-            aria-label="Scroll left"
+            aria-label="Scroll back"
             class="pf-v5-c-nav__scroll-button"
             disabled=""
           >
@@ -1155,7 +1155,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
             </li>
           </ul>
           <button
-            aria-label="Scroll right"
+            aria-label="Scroll foward"
             class="pf-v5-c-nav__scroll-button"
             disabled=""
           >

package/src/components/SearchInput/SearchInput.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Button, ButtonVariant } from '../Button';
 import { Badge } from '../Badge';
+import { Icon } from '../Icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import AngleUpIcon from '@patternfly/react-icons/dist/esm/icons/angle-up-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -375,7 +376,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         </InputGroupItem>
       )}
       {!!onSearch && (
-        <InputGroupItem isPlain>
+        <InputGroupItem>
           <Button
             type="submit"
             variant={ButtonVariant.control}
@@ -383,7 +384,9 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
             onClick={onSearchHandler}
             isDisabled={isDisabled}
           >
-            <ArrowRightIcon />
+            <Icon shouldMirrorRTL>
+              <ArrowRightIcon />
+            </Icon>
           </Button>
         </InputGroupItem>
       )}

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

@@ -103,7 +103,7 @@ exports[`SearchInput advanced search 1`] = `
         </button>
       </div>
       <div
-        class="pf-v5-c-input-group__item pf-m-plain"
+        class="pf-v5-c-input-group__item"
       >
         <button
           aria-disabled="false"
@@ -114,19 +114,27 @@ exports[`SearchInput advanced search 1`] = `
           data-ouia-safe="true"
           type="submit"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
+          <span
+            class="pf-v5-c-icon"
           >
-            <path
-              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-            />
-          </svg>
+            <span
+              class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                />
+              </svg>
+            </span>
+          </span>
         </button>
       </div>
     </div>
@@ -245,7 +253,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
         </button>
       </div>
       <div
-        class="pf-v5-c-input-group__item pf-m-plain"
+        class="pf-v5-c-input-group__item"
       >
         <button
           aria-disabled="false"
@@ -256,19 +264,27 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           data-ouia-safe="true"
           type="submit"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
+          <span
+            class="pf-v5-c-icon"
           >
-            <path
-              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-            />
-          </svg>
+            <span
+              class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                />
+              </svg>
+            </span>
+          </span>
         </button>
       </div>
     </div>
@@ -579,7 +595,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
         </button>
       </div>
       <div
-        class="pf-v5-c-input-group__item pf-m-plain"
+        class="pf-v5-c-input-group__item"
       >
         <button
           aria-disabled="false"
@@ -590,19 +606,27 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           data-ouia-safe="true"
           type="submit"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
+          <span
+            class="pf-v5-c-icon"
           >
-            <path
-              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-            />
-          </svg>
+            <span
+              class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                />
+              </svg>
+            </span>
+          </span>
         </button>
       </div>
     </div>
@@ -746,7 +770,7 @@ exports[`SearchInput search input with hint 1`] = `
       </div>
     </div>
     <div
-      class="pf-v5-c-input-group__item pf-m-plain"
+      class="pf-v5-c-input-group__item"
     >
       <button
         aria-disabled="false"
@@ -757,19 +781,27 @@ exports[`SearchInput search input with hint 1`] = `
         data-ouia-safe="true"
         type="submit"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 448 512"
-          width="1em"
+        <span
+          class="pf-v5-c-icon"
         >
-          <path
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-          />
-        </svg>
+          <span
+            class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+              />
+            </svg>
+          </span>
+        </span>
       </button>
     </div>
   </div>
@@ -898,7 +930,7 @@ exports[`SearchInput simple search input 1`] = `
       </div>
     </div>
     <div
-      class="pf-v5-c-input-group__item pf-m-plain"
+      class="pf-v5-c-input-group__item"
     >
       <button
         aria-disabled="false"
@@ -909,19 +941,27 @@ exports[`SearchInput simple search input 1`] = `
         data-ouia-safe="true"
         type="submit"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 448 512"
-          width="1em"
+        <span
+          class="pf-v5-c-icon"
         >
-          <path
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-          />
-        </svg>
+          <span
+            class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+              />
+            </svg>
+          </span>
+        </span>
       </button>
     </div>
   </div>

package/src/components/Select/Select.tsx

@@ -8,7 +8,7 @@ export interface SelectPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
   direction?: 'up' | 'down';
   /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center';
+  position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */
   width?: string | 'trigger';
   /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */
@@ -17,6 +17,14 @@ export interface SelectPopperProps {
   maxWidth?: string | 'trigger';
   /** Enable to flip the popper when it reaches the boundary */
   enableFlip?: boolean;
+  /** The container to append the select to. Defaults to 'inline'.
+   * If your select is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * appendTo="inline"
+   * appendTo={() => document.body}
+   * appendTo={document.getElementById('target')}
+   */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 export interface SelectToggleProps {