@patternfly/react-core 5.1.1-prerelease.10 → 5.1.1-prerelease.12

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":"5.1.1-prerelease.9","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":"5.1.1-prerelease.11","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":"5.1.1-prerelease.9","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":"5.1.1-prerelease.11","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":"5.1.1-prerelease.9","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":"5.1.1-prerelease.11","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.10",
+  "version": "5.1.1-prerelease.12",
   "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",
@@ -45,15 +45,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.1.1-prerelease.5",
-    "@patternfly/react-styles": "^5.1.1-prerelease.5",
-    "@patternfly/react-tokens": "^5.1.1-prerelease.5",
+    "@patternfly/react-icons": "^5.1.1-prerelease.6",
+    "@patternfly/react-styles": "^5.1.1-prerelease.6",
+    "@patternfly/react-tokens": "^5.1.1-prerelease.6",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.1.0-prerelease.24",
+    "@patternfly/patternfly": "5.1.0-prerelease.28",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "36213096266b43ef0a2dac42f560185f56f96cdf"
+  "gitHead": "f856af105070fec983e76afa262b37aa99737e63"
 }

package/src/components/Icon/Icon.tsx

@@ -24,6 +24,10 @@ export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement
   isInProgress?: boolean;
   /** Aria-label for the default progress icon */
   defaultProgressArialabel?: string;
+  /** @beta Flag indicating whether the icon passed as children should be mirrored for
+   * right to left (RTL) languages. This will not mirror the icon passed to progressIcon.
+   */
+  shouldMirrorRTL?: boolean;
 }
 
 export const Icon: React.FunctionComponent<IconComponentProps> = ({
@@ -37,6 +41,7 @@ export const Icon: React.FunctionComponent<IconComponentProps> = ({
   isInline = false,
   isInProgress = false,
   defaultProgressArialabel = 'Loading...',
+  shouldMirrorRTL = false,
   ...props
 }: IconComponentProps) => {
   const _progressIcon = progressIcon ?? <Spinner diameter="1em" aria-label={defaultProgressArialabel} />;
@@ -52,7 +57,16 @@ export const Icon: React.FunctionComponent<IconComponentProps> = ({
       )}
       {...props}
     >
-      <span className={css(styles.iconContent, styles.modifiers[iconSize], styles.modifiers[status])}>{children}</span>
+      <span
+        className={css(
+          styles.iconContent,
+          styles.modifiers[iconSize],
+          styles.modifiers[status],
+          shouldMirrorRTL && 'pf-v5-m-mirror-inline-rtl'
+        )}
+      >
+        {children}
+      </span>
       {isInProgress && (
         <span className={css(styles.iconProgress, styles.modifiers[progressIconSize], className)}>{_progressIcon}</span>
       )}

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

@@ -194,3 +194,19 @@ test('renders progress icon successfully', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders with class pf-v5-m-mirror-inline-rtl on icon passed as children when shouldMirrorRTL is true', () => {
+  render(<Icon shouldMirrorRTL>Icon content</Icon>);
+
+  expect(screen.getByText('Icon content')).toHaveClass('pf-v5-m-mirror-inline-rtl');
+});
+
+test('Does not render with class pf-v5-m-mirror-inline-rtl on progressIcon when shouldMirrorRTL is true', () => {
+  render(
+    <Icon shouldMirrorRTL isInProgress progressIcon="Progress icon">
+      Icon content
+    </Icon>
+  );
+
+  expect(screen.getByText('Progress icon')).not.toHaveClass('pf-v5-m-mirror-inline-rtl');
+});

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/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/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap

@@ -128,7 +128,7 @@ exports[`ContextSelector Renders ContextSelector open 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"
@@ -139,19 +139,27 @@ exports[`ContextSelector Renders ContextSelector open 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>
@@ -305,7 +313,7 @@ exports[`ContextSelector Renders in strict mode 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"
@@ -316,19 +324,27 @@ exports[`ContextSelector Renders 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>