@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.10

package/src/components/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`ChipGroup chip group default 1`] = `
   <div
     aria-label="Chip group category"
     class="pf-v5-c-chip-group"
-    data-ouia-component-type="PF4/ChipGroup"
+    data-ouia-component-type="PF5/ChipGroup"
     data-ouia-safe="true"
     role="group"
   >
@@ -23,7 +23,7 @@ exports[`ChipGroup chip group default 1`] = `
           <div
             class="pf-v5-c-chip"
             data-ouia-component-id="OUIA-Generated-Chip-1"
-            data-ouia-component-type="PF4/Chip"
+            data-ouia-component-type="PF5/Chip"
             data-ouia-safe="true"
           >
             <span
@@ -45,7 +45,7 @@ exports[`ChipGroup chip group default 1`] = `
                 aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
                 class="pf-v5-c-button pf-m-plain"
                 data-ouia-component-id="close"
-                data-ouia-component-type="PF4/Button"
+                data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
                 id="remove_pf-random-id-1"
                 type="button"
@@ -54,8 +54,10 @@ exports[`ChipGroup chip group default 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"
@@ -76,7 +78,7 @@ exports[`ChipGroup chip group with category 1`] = `
   <div
     aria-labelledby="pf-random-id-2"
     class="pf-v5-c-chip-group pf-m-category"
-    data-ouia-component-type="PF4/ChipGroup"
+    data-ouia-component-type="PF5/ChipGroup"
     data-ouia-safe="true"
     role="group"
   >
@@ -100,7 +102,7 @@ exports[`ChipGroup chip group with category 1`] = `
           <div
             class="pf-v5-c-chip"
             data-ouia-component-id="OUIA-Generated-Chip-2"
-            data-ouia-component-type="PF4/Chip"
+            data-ouia-component-type="PF5/Chip"
             data-ouia-safe="true"
           >
             <span
@@ -122,7 +124,7 @@ exports[`ChipGroup chip group with category 1`] = `
                 aria-labelledby="remove_pf-random-id-3 pf-random-id-3"
                 class="pf-v5-c-button pf-m-plain"
                 data-ouia-component-id="close"
-                data-ouia-component-type="PF4/Button"
+                data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
                 id="remove_pf-random-id-3"
                 type="button"
@@ -131,8 +133,10 @@ exports[`ChipGroup chip group with category 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"
@@ -153,7 +157,7 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
   <div
     aria-labelledby="pf-random-id-12"
     class="pf-v5-c-chip-group pf-m-category"
-    data-ouia-component-type="PF4/ChipGroup"
+    data-ouia-component-type="PF5/ChipGroup"
     data-ouia-safe="true"
     role="group"
   >
@@ -177,7 +181,7 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
           <div
             class="pf-v5-c-chip"
             data-ouia-component-id="OUIA-Generated-Chip-9"
-            data-ouia-component-type="PF4/Chip"
+            data-ouia-component-type="PF5/Chip"
             data-ouia-safe="true"
           >
             <span
@@ -199,7 +203,7 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
                 aria-labelledby="remove_pf-random-id-13 pf-random-id-13"
                 class="pf-v5-c-button pf-m-plain"
                 data-ouia-component-id="close"
-                data-ouia-component-type="PF4/Button"
+                data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
                 id="remove_pf-random-id-13"
                 type="button"
@@ -208,8 +212,10 @@ exports[`ChipGroup chip group with category and tooltip 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"
@@ -230,7 +236,7 @@ exports[`ChipGroup chip group with closable category 1`] = `
   <div
     aria-labelledby="pf-random-id-4"
     class="pf-v5-c-chip-group pf-m-category"
-    data-ouia-component-type="PF4/ChipGroup"
+    data-ouia-component-type="PF5/ChipGroup"
     data-ouia-safe="true"
     role="group"
   >
@@ -254,7 +260,7 @@ exports[`ChipGroup chip group with closable category 1`] = `
           <div
             class="pf-v5-c-chip"
             data-ouia-component-id="OUIA-Generated-Chip-3"
-            data-ouia-component-type="PF4/Chip"
+            data-ouia-component-type="PF5/Chip"
             data-ouia-safe="true"
           >
             <span
@@ -276,7 +282,7 @@ exports[`ChipGroup chip group with closable category 1`] = `
                 aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
                 class="pf-v5-c-button pf-m-plain"
                 data-ouia-component-id="close"
-                data-ouia-component-type="PF4/Button"
+                data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
                 id="remove_pf-random-id-5"
                 type="button"
@@ -285,8 +291,10 @@ exports[`ChipGroup chip group with closable category 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"
@@ -307,7 +315,7 @@ exports[`ChipGroup chip group with closable category 1`] = `
         aria-labelledby="remove_group_pf-random-id-4 pf-random-id-4"
         class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="Close chip group"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         id="remove_group_pf-random-id-4"
         type="button"
@@ -316,8 +324,10 @@ exports[`ChipGroup chip group with closable category 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"

package/src/components/Chip/examples/Chip.md

@@ -1,7 +1,7 @@
 ---
 id: Chip
 section: components
-cssPrefix: pf-c-chip
+cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
 propComponents: ['Chip', 'ChipGroup']
 ouia: true
 ---

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -131,7 +131,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   expandContent = (_event: React.MouseEvent<Element, MouseEvent>) => {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       expanded: !prevState.expanded
     }));
   };
@@ -183,7 +183,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       >
         {variant === 'inline-compact' && (
           <GenerateId prefix="">
-            {id => (
+            {(id) => (
               <React.Fragment>
                 {!isCode && (
                   <span className={css(styles.clipboardCopyText)} id={`${textIdPrefix}${id}`}>
@@ -223,7 +223,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
         )}
         {variant !== 'inline-compact' && (
           <GenerateId prefix="">
-            {id => (
+            {(id) => (
               <React.Fragment>
                 <div className={css(styles.clipboardCopyGroup)}>
                   {variant === 'expansion' && (
@@ -237,7 +237,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
                     />
                   )}
                   <TextInput
-                    isReadOnly={isReadOnly || this.state.expanded}
+                    readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
                     onChange={this.updateText}
                     value={this.state.text as string | number}
                     id={`text-input-${id}`}

package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -4,30 +4,33 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-clipboard-copy string"
-    data-ouia-component-type="PF4/ClipboardCopy"
+    data-ouia-component-type="PF5/ClipboardCopy"
     data-ouia-safe="true"
   >
     <div
       class="pf-v5-c-clipboard-copy__group"
     >
-      <input
-        aria-invalid="false"
-        aria-label="'Copyable input'"
+      <div
         class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        id="text-input-0"
-        type="text"
-        value="[object Object]"
-      />
+      >
+        <input
+          aria-invalid="false"
+          aria-label="'Copyable input'"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe="true"
+          id="text-input-0"
+          type="text"
+          value="[object Object]"
+        />
+      </div>
       <button
         aria-disabled="false"
         aria-label="'Copy to clipboard'"
         aria-labelledby="copy-button-0 text-input-0"
         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"
         id="copy-button-0"
         type="button"
@@ -36,8 +39,10 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 448 512"
+          width="1em"
         >
           <path
             d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`copy button render 1`] = `
     aria-labelledby="my-id my-text-id"
     class="pf-v5-c-button pf-m-control fancy-copy-button"
     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"
     id="my-id"
     type="button"
@@ -17,8 +17,10 @@ exports[`copy button render 1`] = `
       aria-hidden="true"
       class="pf-v5-svg"
       fill="currentColor"
+      height="1em"
       role="img"
       viewBox="0 0 448 512"
+      width="1em"
     >
       <path
         d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`ClipboardCopyToggle toggle button render 1`] = `
     aria-labelledby="my-id my-text-id"
     class="pf-v5-c-button pf-m-control myclassName"
     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"
     id="my-id"
     type="button"
@@ -19,8 +19,10 @@ exports[`ClipboardCopyToggle toggle button render 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"

package/src/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -1,7 +1,7 @@
 ---
 id: Clipboard copy
 section: components
-cssPrefix: pf-c-copyclipboard
+cssPrefix: pf-v5-c-copyclipboard
 propComponents: ['ClipboardCopy', 'ClipboardCopyButton']
 ouia: true
 ---

package/src/components/CodeBlock/CodeBlockAction.tsx

@@ -13,7 +13,7 @@ export const CodeBlockAction: React.FunctionComponent<CodeBlockActionProps> = ({
   className,
   ...props
 }: CodeBlockActionProps) => (
-  <div className={css('pf-c-code-block__actions-item', className)} {...props}>
+  <div className={css('pf-v5-c-code-block__actions-item', className)} {...props}>
     {children}
   </div>
 );

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

@@ -26,7 +26,7 @@ exports[`CodeBlock with components renders successfully 1`] = `
         class="pf-v5-c-code-block__actions"
       >
         <div
-          class="pf-c-code-block__actions-item"
+          class="pf-v5-c-code-block__actions-item"
         >
           button
         </div>
@@ -53,7 +53,7 @@ exports[`CodeBlock with components renders successfully 1`] = `
 exports[`CodeBlockAction renders successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-code-block__actions-item"
+    class="pf-v5-c-code-block__actions-item"
   >
     action
   </div>

package/src/components/CodeBlock/examples/CodeBlock.md

@@ -1,7 +1,7 @@
 ---
 id: Code block
 section: components
-cssPrefix: pf-c-code-block
+cssPrefix: pf-v5-c-code-block
 propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 ---
 

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`DataListToggle should match snapshot (auto-generated) 1`] = `
         aria-label="'Details'"
         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"
         id="string"
         type="button"
@@ -28,8 +28,10 @@ exports[`DataListToggle should match snapshot (auto-generated) 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"

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

@@ -110,7 +110,7 @@ exports[`DataList DataListAction button 1`] = `
       aria-disabled="false"
       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"
       id="delete-item-1"
       type="button"
@@ -147,8 +147,10 @@ exports[`DataList DataListAction dropdown 1`] = `
               aria-hidden="true"
               class="pf-v5-svg"
               fill="currentColor"
+              height="1em"
               role="img"
               viewBox="0 0 320 512"
+              width="1em"
             >
               <path
                 d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
@@ -160,7 +162,7 @@ exports[`DataList DataListAction dropdown 1`] = `
       <div
         class="pf-v5-c-menu"
         data-ouia-component-id="OUIA-Generated-Dropdown-1"
-        data-ouia-component-type="PF4/Dropdown"
+        data-ouia-component-type="PF5/Dropdown"
         data-ouia-safe="true"
         style="position: absolute; left: 0px; top: 0px; z-index: 9999;"
       >
@@ -174,7 +176,7 @@ exports[`DataList DataListAction dropdown 1`] = `
             <li
               class="pf-v5-c-menu__list-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-1"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="none"
             >
@@ -199,7 +201,7 @@ exports[`DataList DataListAction dropdown 1`] = `
             <li
               class="pf-v5-c-menu__list-item"
               data-ouia-component-id="OUIA-Generated-DropdownItem-2"
-              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-component-type="PF5/DropdownItem"
               data-ouia-safe="true"
               role="none"
             >

package/src/components/DataList/examples/DataList.md

@@ -1,7 +1,7 @@
 ---
 id: Data list
 section: components
-cssPrefix: pf-c-data-list
+cssPrefix: pf-v5-c-data-list
 propComponents:
   [
     'DataList',

package/src/components/DatePicker/DatePicker.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/DatePicker/date-pick
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import { TextInput, TextInputProps } from '../TextInput/TextInput';
 import { Popover, PopoverProps } from '../Popover/Popover';
-import { InputGroup } from '../InputGroup/InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import { CalendarMonth, CalendarFormat } from '../CalendarMonth';
 import { useImperativeHandle } from 'react';
@@ -72,7 +72,7 @@ export interface DatePickerRef {
    * If the eventKey parameter is set to 'Escape', that will invoke the date pickers
    * onEscapePress event to toggle the correct control appropriately.
    */
-  toggleCalendar: (isOpen?: boolean, eventKey?: string) => void;
+  toggleCalendar: (isOpen?: boolean) => void;
 }
 
 export const yyyyMMddFormat = (date: Date) =>
@@ -189,10 +189,8 @@ const DatePickerBase = (
     ref,
     () => ({
       setCalendarOpen: (isOpen: boolean) => setPopoverOpen(isOpen),
-      toggleCalendar: (setOpen?: boolean, eventKey?: string) => {
-        if (eventKey === KeyTypes.Escape && popoverOpen && !selectOpen) {
-          setPopoverOpen((prev) => (setOpen !== undefined ? setOpen : !prev));
-        }
+      toggleCalendar: (setOpen?: boolean) => {
+        setPopoverOpen((prev) => (setOpen !== undefined ? setOpen : !prev));
       },
       isCalendarOpen: popoverOpen
     }),
@@ -222,7 +220,7 @@ const DatePickerBase = (
         }
         showClose={false}
         isVisible={popoverOpen}
-        shouldClose={(event, _fn) => {
+        shouldClose={(event, hideFunction) => {
           event = event as KeyboardEvent;
           if (event.key === KeyTypes.Escape && selectOpen) {
             event.stopPropagation();
@@ -233,7 +231,12 @@ const DatePickerBase = (
           if (buttonRef.current && buttonRef.current.contains(event.target as Node)) {
             return false;
           }
-          setPopoverOpen(false);
+
+          if (popoverOpen) {
+            event.stopPropagation();
+            setPopoverOpen(false);
+            hideFunction();
+          }
           if (event.key === KeyTypes.Escape && popoverOpen) {
             event.stopPropagation();
           }
@@ -248,37 +251,44 @@ const DatePickerBase = (
       >
         <div className={styles.datePickerInput} ref={triggerRef}>
           <InputGroup>
-            <TextInput
-              isDisabled={isDisabled}
-              aria-label={ariaLabel}
-              placeholder={placeholder}
-              validated={errorText.trim() ? 'error' : 'default'}
-              value={value}
-              onChange={onTextInput}
-              onBlur={onInputBlur}
-              onKeyPress={onKeyPress}
-              {...inputProps}
-            />
-            <button
-              ref={buttonRef}
-              // TODO: Removed style follow up work with issue #8457
-              className={css(buttonStyles.button, buttonStyles.modifiers.control)}
-              aria-label={buttonAriaLabel}
-              type="button"
-              onClick={() => setPopoverOpen(!popoverOpen)}
-              disabled={isDisabled}
-            >
-              <OutlinedCalendarAltIcon />
-            </button>
+            <InputGroupItem isFill>
+              <TextInput
+                isDisabled={isDisabled}
+                aria-label={ariaLabel}
+                placeholder={placeholder}
+                validated={errorText.trim() ? 'error' : 'default'}
+                value={value}
+                onChange={onTextInput}
+                onBlur={onInputBlur}
+                onKeyPress={onKeyPress}
+                {...inputProps}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <button
+                ref={buttonRef}
+                // TODO: Removed style follow up work with issue #8457
+                className={css(buttonStyles.button, buttonStyles.modifiers.control)}
+                aria-label={buttonAriaLabel}
+                type="button"
+                onClick={() => setPopoverOpen(!popoverOpen)}
+                disabled={isDisabled}
+              >
+                <OutlinedCalendarAltIcon />
+              </button>
+            </InputGroupItem>
           </InputGroup>
         </div>
       </Popover>
-      {helperText && <div className={styles.datePickerHelperText}>{helperText}</div>}
-      {errorText.trim() && (
+      {(errorText || helperText) && (
         <div className={styles.datePickerHelperText}>
-          <HelperText>
-            <HelperTextItem variant="error">{errorText}</HelperTextItem>
-          </HelperText>
+          {errorText ? (
+            <HelperText>
+              <HelperTextItem variant="error">{errorText}</HelperTextItem>
+            </HelperText>
+          ) : (
+            helperText
+          )}
         </div>
       )}
     </div>

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

@@ -1,9 +1,12 @@
-import { screen, render } from '@testing-library/react';
-import { DatePicker } from '../DatePicker';
 import React from 'react';
+
+import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-jest.mock('../../../helpers/util.ts')
+import { HelperText, HelperTextItem } from '../../HelperText';
+import { DatePicker } from '../DatePicker';
+
+jest.mock('../../../helpers/util.ts');
 
 test('disabled date picker', () => {
   const { asFragment } = render(<DatePicker value="2020-11-20" isDisabled aria-label="disabled date picker" />);
@@ -60,4 +63,39 @@ test('With popover opened', async () => {
   await screen.findByRole('button', { name: 'Previous month' });
 
   expect(asFragment()).toMatchSnapshot();
-})
+});
+
+test('Shows helperText instead of "Invalid date" when no error exists', () => {
+  render(
+    <DatePicker
+      helperText={
+        <HelperText>
+          <HelperTextItem>Help me</HelperTextItem>
+        </HelperText>
+      }
+    />
+  );
+
+  expect(screen.queryByText('Invalid date')).not.toBeInTheDocument();
+  expect(screen.getByText('Help me')).toBeVisible();
+});
+
+test('Shows "Invalid date" instead of helperText when an error exists', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <DatePicker
+      helperText={
+        <HelperText>
+          <HelperTextItem>Help me</HelperTextItem>
+        </HelperText>
+      }
+    />
+  );
+
+  await user.type(screen.getByRole('textbox'), 'not a date');
+  await user.click(document.body);
+
+  expect(screen.queryByText('Help me')).not.toBeInTheDocument();
+  expect(screen.getByText('Invalid date')).toBeVisible();
+});