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

package/helpers/package.json

@@ -0,0 +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.0.0-prerelease.20"}

package/layouts/package.json

@@ -0,0 +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.0.0-prerelease.20"}

package/next/package.json

@@ -0,0 +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.0.0-prerelease.20"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-prerelease.2",
+  "version": "5.0.0-prerelease.21",
   "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",
@@ -43,18 +43,18 @@
     "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
     "clean": "rimraf dist components layouts helpers next deprecated node_modules",
     "generate": "node scripts/copyStyles.js",
-    "subpaths": "node scripts/createSubpaths.js"
+    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.0.0-prerelease.2",
-    "@patternfly/react-styles": "^5.0.0-prerelease.2",
-    "@patternfly/react-tokens": "^5.0.0-prerelease.2",
+    "@patternfly/react-icons": "^5.0.0-prerelease.8",
+    "@patternfly/react-styles": "^5.0.0-prerelease.6",
+    "@patternfly/react-tokens": "^5.0.0-prerelease.6",
     "focus-trap": "7.4.3",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-prerelease.3",
+    "@patternfly/patternfly": "5.0.0-prerelease.13",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "6760326224820a4684fc1f7b2e8cf48890085530"
+  "gitHead": "108a4776510842b92a0abf30a3398ba9e90cd7df"
 }

package/single-packages.config.json

@@ -1,14 +1,5 @@
 {
     "packageName": "@patternfly/react-core",
-    "modules": [ 
-        {
-            "name": "dist/esm",
-            "type": "esm"
-        },
-        {
-            "name": "dist/js",
-            "type": "cjs"
-        }
-    ],
-    "exclude": []
+    "moduleGlob": ["/dist/esm/helpers/**/*.js", "/dist/esm/*/*/**/index.js"],
+    "exclude": ["/dist/esm/helpers/Popper/thirdparty"]
 }

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
       aria-label="Close Dialog"
       class="pf-v5-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-1"
-      data-ouia-component-type="PF4/Button"
+      data-ouia-component-type="PF5/Button"
       data-ouia-safe="true"
       type="button"
     >
@@ -18,8 +18,10 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 352 512"
+        width="1em"
       >
         <path
           d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -40,7 +42,7 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
       aria-label="Klose Daylok"
       class="pf-v5-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-3"
-      data-ouia-component-type="PF4/Button"
+      data-ouia-component-type="PF5/Button"
       data-ouia-safe="true"
       type="button"
     >
@@ -48,8 +50,10 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 352 512"
+        width="1em"
       >
         <path
           d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -70,7 +74,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
       aria-label="Close Dialog"
       class="pf-v5-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-2"
-      data-ouia-component-type="PF4/Button"
+      data-ouia-component-type="PF5/Button"
       data-ouia-safe="true"
       type="button"
     >
@@ -78,8 +82,10 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 352 512"
+        width="1em"
       >
         <path
           d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`AboutModalBoxHeader Test 1`] = `
     <h1
       class="pf-v5-c-title pf-m-4xl"
       data-ouia-component-id="OUIA-Generated-Title-1"
-      data-ouia-component-type="PF4/Title"
+      data-ouia-component-type="PF5/Title"
       data-ouia-safe="true"
       id="id"
     >

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
     aria-label="Close some label alert: test title"
     class="pf-v5-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -15,8 +15,10 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
       aria-hidden="true"
       class="pf-v5-svg"
       fill="currentColor"
+      height="1em"
       role="img"
       viewBox="0 0 352 512"
+      width="1em"
     >
       <path
         d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
     aria-disabled="false"
     class="pf-v5-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-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap

@@ -9,8 +9,10 @@ exports[`AlertIcon should match snapshot (auto-generated) 1`] = `
       aria-hidden="true"
       class="pf-v5-svg"
       fill="currentColor"
+      height="1em"
       role="img"
       viewBox="0 0 512 512"
+      width="1em"
     >
       <path
         d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"

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

@@ -8,7 +8,7 @@ exports[`Matches snapshot 1`] = `
     aria-live="polite"
     class="pf-v5-c-alert pf-m-custom"
     data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF4/Alert"
+    data-ouia-component-type="PF5/Alert"
     data-ouia-safe="true"
   >
     <div>

package/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -9,8 +9,10 @@ exports[`Matches the snapshot 1`] = `
       aria-hidden="true"
       class="pf-v5-svg"
       fill="currentColor"
+      height="1em"
       role="img"
       viewBox="0 0 352 512"
+      width="1em"
     >
       <path
         d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"

package/src/components/Alert/examples/Alert.md

@@ -1,7 +1,7 @@
 ---
 id: Alert
 section: components
-cssPrefix: pf-v5-c-alert
+cssPrefix: ['pf-v5-c-alert', 'pf-v5-c-alert-group']
 propComponents: ['Alert', 'AlertGroup', 'AlertActionCloseButton', 'AlertActionLink']
 ouia: true
 ---
@@ -137,7 +137,7 @@ const AlertTimeout: React.FunctionComponent = () => {
 
 An alert can contain additional, hidden information that is made visible when users click a caret icon. This information can be expanded and collapsed each time the icon is clicked.
 
-It is not recommended to use an expandable alert with a `timeout` in a toast [alert group](/components/alert-group) because the alert could timeout before users have time to interact with and view the entire alert. 
+It is not recommended to use an expandable alert with a `timeout` in a [toast alert group](/components/alert#toast-alert-group) because the alert could timeout before users have time to interact with and view the entire alert. 
 
 See the [toast alert considerations](/components/alert/accessibility#toast-alerts) section of the alert accessibility documentation to understand the accessibility risks associated with using toast alerts.
 
@@ -354,7 +354,7 @@ import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
 
 ### Dynamic live region alerts
 
-Alerts that are asynchronously appended into dynamic [alert groups](/components/alert-group) via the `isLiveRegion` property will be announced to assistive technology the moment the change happens, following the strategy used for `aria-atomic`, which defaults to false. This means only changes of type "addition" will be announced.
+Alerts that are asynchronously appended into dynamic [alert groups](/components/alert/#alert-group-examples) via the `isLiveRegion` property will be announced to assistive technology the moment the change happens, following the strategy used for `aria-atomic`, which defaults to false. This means only changes of type "addition" will be announced.
 
 ```ts file="AlertDynamicLiveRegion.tsx"
 ```
@@ -379,7 +379,7 @@ Alert groups can be one of the following variants:
 | Toast | Toast alert groups contain alerts that typically appear in response to an asynchronous event or user action. These groups are positioned on top of other content at the top right of the page.|
 | Dynamic | Dynamic alert groups contain alerts that typically appear in response to a user action, and are seen within the normal page content flow.|  
 
-Dynamic alerts that are generated after the page initially loads must be appended to either a toast or dynamic `AlertGroup`, both of which must use the `isLiveRegion` property. New alerts appended to a toast or dynamic group will be announced by assistive technologies the moment the change happens. For information about customizing this announcement, read the [aria-atomic and aria-relevant](/components/alert-group/accessibility#aria-atomic-and-aria-relevant) section of the alert group accessibility documentation.
+Dynamic alerts that are generated after the page initially loads must be appended to either a toast or dynamic `AlertGroup`, both of which must use the `isLiveRegion` property. New alerts appended to a toast or dynamic group will be announced by assistive technologies the moment the change happens. For information about customizing this announcement, read the [aria-atomic and aria-relevant](/components/alert/accessibility#aria-atomic-and-aria-relevant) section of the alert accessibility documentation.
 
 ### Static inline alert group
 
@@ -414,7 +414,7 @@ Users navigating via keyboard or another assistive technology will need a way to
 
 The following example shows how alerts can be triggered by an asynchronous event in the application. You can customize how an alert will be announced to assistive technology by adjusting the value of the `aria-live` property. Click the "start async" alert button below and then click the buttons in the above toast examples to demonstrate how asynchronous events add alerts to a group. Click the "stop async alerts" button to halt this behavior.
 
-See the [alert group accessibility tab](/components/alert-group/accessibility) for more information on customizing this behavior.
+See the [alert accessibility tab](/components/alert/accessibility) for more information on customizing this behavior.
 
 ```ts file="./AlertGroupAsync.tsx"
 ```

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

@@ -29,8 +29,10 @@ exports[`Matches the snapshot 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 320 512"
+        width="1em"
       >
         <path
           d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"

package/src/components/Brand/Brand.tsx

@@ -43,14 +43,15 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   ...props
 }: BrandProps) => {
   let responsiveStyles;
-  if (children !== undefined && widths !== undefined) {
+  if (widths !== undefined) {
     responsiveStyles = {
       ...setBreakpointCssVars(widths, '--pf-v5-c-brand--Width')
     };
   }
 
-  if (children !== undefined && heights !== undefined) {
+  if (heights !== undefined) {
     responsiveStyles = {
+      ...responsiveStyles,
       ...setBreakpointCssVars(heights, '--pf-v5-c-brand--Height')
     };
   }
@@ -67,7 +68,7 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
         <img src={src} alt={alt} />
       </picture>
     ) : (
-      <img {...props} className={css(styles.brand, className)} style={style} src={src} alt={alt} />
+      <img {...props} className={css(styles.brand, className)} style={{ ...style, ...responsiveStyles }} src={src} alt={alt} />
     )
   );
 };

package/src/components/Brand/examples/Brand.md

@@ -22,7 +22,7 @@ import logoBase from './pf-c-brand--logo-base.jpg';
 
 ### Responsive
 
-Passing `<source>` elements as children to `Brand` will change the component from an `<img>` to a `<picture>` element. In this form, breakpoint modifiers for width and height may be passed to `Brand`. The `src` and `alt` properties should still be passed to populate the fallback `img` of the brand.
+Passing `<source>` elements as children to `Brand` will change the component from an `<img>` to a `<picture>` element. The `src` and `alt` properties should still be passed to populate the fallback `img` of the brand.
 
 ```ts file="./BrandResponsive.tsx"
 ```

package/src/components/Brand/examples/BrandBasic.tsx

@@ -2,4 +2,4 @@ import React from 'react';
 import { Brand } from '@patternfly/react-core';
 import pfLogo from './pfLogo.svg';
 
-export const BrandBasic: React.FunctionComponent = () => <Brand src={pfLogo} alt="Patternfly Logo" />;
+export const BrandBasic: React.FunctionComponent = () => <Brand src={pfLogo} alt="Patternfly Logo" widths={{ default: '200px', md: '400px', xl: '600px' }} />;

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

@@ -6,7 +6,7 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
     aria-label="custom label"
     class="pf-v5-c-breadcrumb"
     data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
-    data-ouia-component-type="PF4/Breadcrumb"
+    data-ouia-component-type="PF5/Breadcrumb"
     data-ouia-safe="true"
   >
     <ol
@@ -23,7 +23,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
     aria-label="Breadcrumb"
     class="pf-v5-c-breadcrumb"
     data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
-    data-ouia-component-type="PF4/Breadcrumb"
+    data-ouia-component-type="PF5/Breadcrumb"
     data-ouia-safe="true"
   >
     <ol
@@ -51,8 +51,10 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
             aria-hidden="true"
             class="pf-v5-svg"
             fill="currentColor"
+            height="1em"
             role="img"
             viewBox="0 0 256 512"
+            width="1em"
           >
             <path
               d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -77,7 +79,7 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
     aria-label="Breadcrumb"
     class="pf-v5-c-breadcrumb className"
     data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
-    data-ouia-component-type="PF4/Breadcrumb"
+    data-ouia-component-type="PF5/Breadcrumb"
     data-ouia-safe="true"
   >
     <ol
@@ -94,7 +96,7 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
     aria-label="Breadcrumb"
     class="pf-v5-c-breadcrumb"
     data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
-    data-ouia-component-type="PF4/Breadcrumb"
+    data-ouia-component-type="PF5/Breadcrumb"
     data-ouia-safe="true"
   >
     <ol

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

@@ -6,7 +6,7 @@ exports[`Button aria-disabled is set to true and tabIndex to -1 if component is
     aria-disabled="true"
     class="pf-v5-c-button pf-m-primary pf-m-disabled"
     data-ouia-component-id="OUIA-Generated-Button-primary-12"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     tabindex="-1"
   >
@@ -22,7 +22,7 @@ exports[`Button control button 1`] = `
     aria-label="control"
     class="pf-v5-c-button pf-m-control"
     data-ouia-component-id="OUIA-Generated-Button-control-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -38,7 +38,7 @@ exports[`Button danger button 1`] = `
     aria-label="danger"
     class="pf-v5-c-button pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Button-danger-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -53,7 +53,7 @@ exports[`Button isAriaDisabled button 1`] = `
     aria-disabled="true"
     class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
     data-ouia-component-id="OUIA-Generated-Button-primary-5"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -68,7 +68,7 @@ exports[`Button isAriaDisabled link button 1`] = `
     aria-disabled="true"
     class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
     data-ouia-component-id="OUIA-Generated-Button-primary-6"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
   >
     Disabled yet focusable button
@@ -82,7 +82,7 @@ exports[`Button isBlock 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-primary pf-m-block"
     data-ouia-component-id="OUIA-Generated-Button-primary-3"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -97,7 +97,7 @@ exports[`Button isDanger link 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-link pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Button-link-3"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -112,7 +112,7 @@ exports[`Button isDanger secondary 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-secondary pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Button-secondary-2"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -127,7 +127,7 @@ exports[`Button isDisabled 1`] = `
     aria-disabled="true"
     class="pf-v5-c-button pf-m-primary pf-m-disabled"
     data-ouia-component-id="OUIA-Generated-Button-primary-4"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     disabled=""
     type="button"
@@ -143,7 +143,7 @@ exports[`Button isInline 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-link pf-m-inline"
     data-ouia-component-id="OUIA-Generated-Button-link-4"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -158,7 +158,7 @@ exports[`Button isLoading 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-primary pf-m-progress pf-m-in-progress"
     data-ouia-component-id="OUIA-Generated-Button-primary-9"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -193,7 +193,7 @@ exports[`Button isLoading icon only 1`] = `
     aria-label="Upload"
     class="pf-v5-c-button pf-m-plain pf-m-in-progress"
     data-ouia-component-id="OUIA-Generated-Button-plain-2"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -230,7 +230,7 @@ exports[`Button isLoading inline link 1`] = `
     aria-label="Loading"
     class="pf-v5-c-button pf-m-link pf-m-inline pf-m-progress pf-m-in-progress"
     data-ouia-component-id="OUIA-Generated-Button-link-5"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -265,7 +265,7 @@ exports[`Button link button 1`] = `
     aria-label="link"
     class="pf-v5-c-button pf-m-link"
     data-ouia-component-id="OUIA-Generated-Button-link-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -280,7 +280,7 @@ exports[`Button link with icon 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-link"
     data-ouia-component-id="OUIA-Generated-Button-link-2"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -291,8 +291,10 @@ exports[`Button link with icon 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 576 512"
+        width="1em"
       >
         <path
           d="M504.717 320H211.572l6.545 32h268.418c15.401 0 26.816 14.301 23.403 29.319l-5.517 24.276C523.112 414.668 536 433.828 536 456c0 31.202-25.519 56.444-56.824 55.994-29.823-.429-54.35-24.631-55.155-54.447-.44-16.287 6.085-31.049 16.803-41.548H231.176C241.553 426.165 248 440.326 248 456c0 31.813-26.528 57.431-58.67 55.938-28.54-1.325-51.751-24.385-53.251-52.917-1.158-22.034 10.436-41.455 28.051-51.586L93.883 64H24C10.745 64 0 53.255 0 40V24C0 10.745 10.745 0 24 0h102.529c11.401 0 21.228 8.021 23.513 19.19L159.208 64H551.99c15.401 0 26.816 14.301 23.403 29.319l-47.273 208C525.637 312.246 515.923 320 504.717 320zM403.029 192H360v-60c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v60h-43.029c-10.691 0-16.045 12.926-8.485 20.485l67.029 67.029c4.686 4.686 12.284 4.686 16.971 0l67.029-67.029c7.559-7.559 2.205-20.485-8.486-20.485z"
@@ -311,7 +313,7 @@ exports[`Button plain button 1`] = `
     aria-label="plain"
     class="pf-v5-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -327,7 +329,7 @@ exports[`Button primary button 1`] = `
     aria-label="primary"
     class="pf-v5-c-button pf-m-primary"
     data-ouia-component-id="OUIA-Generated-Button-primary-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -343,7 +345,7 @@ exports[`Button secondary button 1`] = `
     aria-label="secondary"
     class="pf-v5-c-button pf-m-secondary"
     data-ouia-component-id="OUIA-Generated-Button-secondary-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -358,7 +360,7 @@ exports[`Button size large 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-primary pf-m-display-lg"
     data-ouia-component-id="OUIA-Generated-Button-primary-8"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -373,7 +375,7 @@ exports[`Button size small 1`] = `
     aria-disabled="false"
     class="pf-v5-c-button pf-m-primary pf-m-small"
     data-ouia-component-id="OUIA-Generated-Button-primary-7"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -389,7 +391,7 @@ exports[`Button tertiary button 1`] = `
     aria-label="tertiary"
     class="pf-v5-c-button pf-m-tertiary"
     data-ouia-component-id="OUIA-Generated-Button-tertiary-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
@@ -405,7 +407,7 @@ exports[`Button warning button 1`] = `
     aria-label="warning"
     class="pf-v5-c-button pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Button-warning-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -152,19 +152,17 @@ export const CalendarMonth = ({
     .map((monthNum) => new Date(1990, monthNum))
     .map(monthFormat);
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
-  // eslint-disable-next-line prefer-const
-  const [focusedDate, setFocusedDate] = React.useState(() => {
+
+  const getInitialDate = () => {
     const initDate = new Date(dateProp);
     if (isValidDate(initDate)) {
       return initDate;
     } else {
-      if (isValidDate(rangeStart)) {
-        return rangeStart;
-      } else {
-        return today;
-      }
+      return isValidDate(rangeStart) ? rangeStart : today;
     }
-  });
+  };
+  const initialDate = getInitialDate();
+  const [focusedDate, setFocusedDate] = React.useState(initialDate);
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
@@ -216,12 +214,44 @@ export const CalendarMonth = ({
     }
   };
 
-  const addMonth = (toAdd: -1 | 1) => {
+  const changeMonth = (month: number) => {
     const newDate = new Date(focusedDate);
-    newDate.setMonth(newDate.getMonth() + toAdd);
+    const desiredDay = newDate.getDate();
+    const monthDays = new Date(newDate.getFullYear(), (month + 1) % 12, 0).getDate(); // Setting day 0 of the next month returns the last day of current month
+
+    if (monthDays < desiredDay) {
+      newDate.setDate(monthDays);
+    }
+
+    newDate.setMonth(month);
+
+    if (initialDate.getDate() > desiredDay && monthDays > desiredDay) {
+      newDate.setDate(initialDate.getDate());
+    }
+
     return newDate;
   };
 
+  const addMonth = (toAdd: -1 | 1) => {
+    let newMonth = new Date(focusedDate).getMonth() + toAdd;
+    if (newMonth === -1) {
+      newMonth = 11;
+    } else if (newMonth === 12) {
+      newMonth = 0;
+    }
+    const newDate = changeMonth(newMonth);
+    if (toAdd === 1 && newMonth === 0) {
+      newDate.setFullYear(newDate.getFullYear() + 1);
+    }
+    if (toAdd === -1 && newMonth === 11) {
+      newDate.setFullYear(newDate.getFullYear() - 1);
+    }
+    return newDate;
+  };
+
+  const yearHasFebruary29th = (year: number) => new Date(year, 1, 29).getMonth() === 1;
+  const dateIsFebruary29th = (date: Date) => date.getMonth() === 1 && date.getDate() === 29;
+
   const prevMonth = addMonth(-1);
   const nextMonth = addMonth(1);
   const focusedYear = focusedDate.getFullYear();
@@ -287,8 +317,7 @@ export const CalendarMonth = ({
                   setTimeout(() => {
                     setIsSelectOpen(false);
                     onSelectToggle(false);
-                    const newDate = new Date(focusedDate);
-                    newDate.setMonth(Number(monthNum as string));
+                    const newDate = changeMonth(Number(monthNum as string));
                     setFocusedDate(newDate);
                     setHoveredDate(newDate);
                     setShouldFocus(false);
@@ -315,6 +344,14 @@ export const CalendarMonth = ({
                 value={yearFormatted}
                 onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
                   const newDate = new Date(focusedDate);
+                  if (dateIsFebruary29th(newDate) && !yearHasFebruary29th(+year)) {
+                    newDate.setDate(28);
+                    newDate.setMonth(1);
+                  }
+                  if (dateIsFebruary29th(initialDate) && yearHasFebruary29th(+year)) {
+                    newDate.setFullYear(+year);
+                    newDate.setDate(29);
+                  }
                   newDate.setFullYear(+year);
                   setFocusedDate(newDate);
                   setHoveredDate(newDate);