@patternfly/react-core 5.0.0-prerelease.2 → 5.0.0-prerelease.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-prerelease.2",
+  "version": "5.0.0-prerelease.4",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "6760326224820a4684fc1f7b2e8cf48890085530"
+  "gitHead": "14db577993040ea7eeb32e24e728429661beeb90"
 }

package/src/components/Nav/examples/NavDrilldown.tsx

@@ -49,7 +49,7 @@ export const NavigationDrilldown: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<MenuHeights>({});
-  const [activeMenu, setActiveMenu] = React.useState('rootMenu');
+  const [activeMenu, setActiveMenu] = React.useState('nav-drilldown-rootMenu');
 
   const onDrillIn = (
     _event: React.KeyboardEvent | React.MouseEvent,
@@ -57,20 +57,23 @@ export const NavigationDrilldown: React.FunctionComponent = () => {
     toItemId: string,
     itemId: string
   ) => {
-    setMenuDrilledIn(prevMenuDrilledIn => [...prevMenuDrilledIn, fromItemId]);
-    setDrilldownPath(prevDrilldownPath => [...prevDrilldownPath, itemId]);
+    setMenuDrilledIn((prevMenuDrilledIn) => [...prevMenuDrilledIn, fromItemId]);
+    setDrilldownPath((prevDrilldownPath) => [...prevDrilldownPath, itemId]);
     setActiveMenu(toItemId);
   };
 
   const onDrillOut = (_event: React.KeyboardEvent | React.MouseEvent, toItemId: string, _itemId: string) => {
-    setMenuDrilledIn(prevMenuDrilledIn => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));
-    setDrilldownPath(prevDrilldownPath => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));
+    setMenuDrilledIn((prevMenuDrilledIn) => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));
+    setDrilldownPath((prevDrilldownPath) => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));
     setActiveMenu(toItemId);
   };
 
   const onGetMenuHeight = (menuId: string, height: number) => {
-    if (!menuHeights[menuId] && menuId !== 'rootMenu') {
-      setMenuHeights(prevMenuHeights => ({ ...prevMenuHeights, [menuId]: height }));
+    if (
+      (menuHeights[menuId] !== height && menuId !== 'nav-drilldown-rootMenu') ||
+      (!menuHeights[menuId] && menuId === 'nav-drilldown-rootMenu')
+    ) {
+      setMenuHeights((prevMenuHeights) => ({ ...prevMenuHeights, [menuId]: height }));
     }
   };
 
@@ -86,7 +89,7 @@ export const NavigationDrilldown: React.FunctionComponent = () => {
         onDrillOut={onDrillOut}
         onGetMenuHeight={onGetMenuHeight}
       >
-        <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}>
+        <MenuContent menuHeight={menuHeights[activeMenu] ? `${menuHeights[activeMenu]}px` : undefined}>
           <MenuList>
             <MenuItem itemId="nav-drilldown-item-1" direction="down" description="SubMenu 1" drilldownMenu={subMenuOne}>
               Item 1

package/src/components/Page/examples/Page.md

@@ -16,10 +16,6 @@ propComponents:
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import {
-PageHeader,
-PageHeaderTools
-} from '@patternfly/react-core/deprecated';
 import './page.css';
 
 ## Examples

package/src/components/Pagination/Navigation.tsx

@@ -6,6 +6,7 @@ import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-do
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import { Button, ButtonVariant } from '../Button';
+import { TextInput } from '../TextInput';
 import { OnSetPage } from './Pagination';
 import { pluralize, PickOptional } from '../../helpers';
 import { KeyTypes } from '../../helpers/constants';
@@ -28,7 +29,7 @@ export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Label for the English word "of". */
   ofWord?: string;
   /** The number of the current page. */
-  page: React.ReactText;
+  page: string | number;
   /** The title of a page displayed beside the page number. */
   pagesTitle?: string;
   /** The title of a page displayed beside the page number (the plural form). */
@@ -102,9 +103,9 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
     return inputPage;
   }
 
-  private onChange(event: React.ChangeEvent<HTMLInputElement>, lastPage: number): void {
-    const inputPage = Navigation.parseInteger(event.target.value, lastPage);
-    this.setState({ userInputPage: Number.isNaN(inputPage as number) ? event.target.value : inputPage });
+  private onChange(event: React.FormEvent<HTMLInputElement>, lastPage: number): void {
+    const inputPage = Navigation.parseInteger(event.currentTarget.value, lastPage);
+    this.setState({ userInputPage: Number.isNaN(inputPage as number) ? event.currentTarget.value : inputPage });
   }
 
   private onKeyDown(
@@ -217,11 +218,10 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
         </div>
         {!isCompact && (
           <div className={styles.paginationNavPageSelect}>
-            <input
-              className={css(styles.formControl)}
+            <TextInput
               aria-label={currPageAriaLabel}
               type="number"
-              disabled={
+              isDisabled={
                 isDisabled || (itemCount && page === firstPage && page === lastPage && itemCount >= 0) || page === 0
               }
               min={lastPage <= 0 && firstPage <= 0 ? 0 : 1}

package/src/components/Pagination/__tests__/Generated/__snapshots__/Navigation.test.tsx.snap

@@ -67,14 +67,21 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
     <div
       class="pf-v5-c-pagination__nav-page-select"
     >
-      <input
-        aria-label="Current page"
+      <div
         class="pf-v5-c-form-control"
-        max="0"
-        min="0"
-        type="number"
-        value="42"
-      />
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Current page"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          max="0"
+          min="0"
+          type="number"
+          value="42"
+        />
+      </div>
     </div>
     <div
       class="pf-v5-c-pagination__nav-control"