@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.3

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

@@ -1,22 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Chip closable 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-2"
+    class="pf-v5-c-chip"
+    data-ouia-component-id="snapshot-test"
     data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
-    id="chip_one"
+    id="snapshot-test"
   >
     <span
       class="pf-v5-c-chip__content"
     >
       <span
         class="pf-v5-c-chip__text"
-        id="chip_one"
+        id="snapshot-test"
       >
-        Chip
+        Chip text
       </span>
     </span>
     <span
@@ -25,212 +25,12 @@ exports[`Chip closable 1`] = `
       <button
         aria-disabled="false"
         aria-label="close"
-        aria-labelledby="remove_chip_one chip_one"
+        aria-labelledby="remove_snapshot-test snapshot-test"
         class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="close"
+        data-ouia-component-id="snapshot-test"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
-        id="remove_chip_one"
-        type="button"
-      >
-        <svg
-          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"
-          />
-        </svg>
-      </button>
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip closable with tooltip 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-3"
-    data-ouia-component-type="PF5/Chip"
-    data-ouia-safe="true"
-    id="chip_one"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-        id="chip_one"
-      >
-        1234567890123456789
-      </span>
-    </span>
-    <span
-      class="pf-v5-c-chip__actions"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="close"
-        aria-labelledby="remove_chip_one chip_one"
-        class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="close"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="remove_chip_one"
-        type="button"
-      >
-        <svg
-          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"
-          />
-        </svg>
-      </button>
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip custom max-width text 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-5"
-    data-ouia-component-type="PF5/Chip"
-    data-ouia-safe="true"
-    style="--pf-v5-c-chip__text--MaxWidth: 100px;"
-    textmaxwidth="100px"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-        id="pf-random-id-4"
-      >
-        4 more
-      </span>
-    </span>
-    <span
-      class="pf-v5-c-chip__actions"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="close"
-        aria-labelledby="remove_pf-random-id-4 pf-random-id-4"
-        class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="close"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="remove_pf-random-id-4"
-        type="button"
-      >
-        <svg
-          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"
-          />
-        </svg>
-      </button>
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip overflow 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip pf-m-overflow my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-1"
-    data-ouia-component-type="PF5/OverflowChip"
-    data-ouia-safe="true"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-      >
-        4 more
-      </span>
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip readonly 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-4"
-    data-ouia-component-type="PF5/Chip"
-    data-ouia-safe="true"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-        id="pf-random-id-3"
-      >
-        4 more
-      </span>
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip with role='gridcell' 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-6"
-    data-ouia-component-type="PF5/Chip"
-    data-ouia-safe="true"
-    role="gridcell"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-        id="pf-random-id-5"
-      >
-        I'm a roled chip
-      </span>
-    </span>
-    <span
-      class="pf-v5-c-chip__actions"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="close"
-        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="PF5/Button"
-        data-ouia-safe="true"
-        id="remove_pf-random-id-5"
+        id="remove_snapshot-test"
         type="button"
       >
         <svg

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ChipGroup chip group default 1`] = `
+exports[`chip group renders to match snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Chip group category"
@@ -20,321 +20,10 @@ exports[`ChipGroup chip group default 1`] = `
         <li
           class="pf-v5-c-chip-group__list-item"
         >
-          <div
-            class="pf-v5-c-chip"
-            data-ouia-component-id="OUIA-Generated-Chip-1"
-            data-ouia-component-type="PF5/Chip"
-            data-ouia-safe="true"
-          >
-            <span
-              class="pf-v5-c-chip__content"
-            >
-              <span
-                class="pf-v5-c-chip__text"
-                id="pf-random-id-1"
-              >
-                1.1
-              </span>
-            </span>
-            <span
-              class="pf-v5-c-chip__actions"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="close"
-                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="PF5/Button"
-                data-ouia-safe="true"
-                id="remove_pf-random-id-1"
-                type="button"
-              >
-                <svg
-                  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"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
+          chips
         </li>
       </ul>
     </div>
   </div>
 </DocumentFragment>
 `;
-
-exports[`ChipGroup chip group with category 1`] = `
-<DocumentFragment>
-  <div
-    aria-labelledby="pf-random-id-2"
-    class="pf-v5-c-chip-group pf-m-category"
-    data-ouia-component-type="PF5/ChipGroup"
-    data-ouia-safe="true"
-    role="group"
-  >
-    <div
-      class="pf-v5-c-chip-group__main"
-    >
-      <span
-        class="pf-v5-c-chip-group__label"
-        id="pf-random-id-2"
-      >
-        category
-      </span>
-      <ul
-        aria-labelledby="pf-random-id-2"
-        class="pf-v5-c-chip-group__list"
-        role="list"
-      >
-        <li
-          class="pf-v5-c-chip-group__list-item"
-        >
-          <div
-            class="pf-v5-c-chip"
-            data-ouia-component-id="OUIA-Generated-Chip-2"
-            data-ouia-component-type="PF5/Chip"
-            data-ouia-safe="true"
-          >
-            <span
-              class="pf-v5-c-chip__content"
-            >
-              <span
-                class="pf-v5-c-chip__text"
-                id="pf-random-id-3"
-              >
-                1.1
-              </span>
-            </span>
-            <span
-              class="pf-v5-c-chip__actions"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="close"
-                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="PF5/Button"
-                data-ouia-safe="true"
-                id="remove_pf-random-id-3"
-                type="button"
-              >
-                <svg
-                  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"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ChipGroup chip group with category and tooltip 1`] = `
-<DocumentFragment>
-  <div
-    aria-labelledby="pf-random-id-12"
-    class="pf-v5-c-chip-group pf-m-category"
-    data-ouia-component-type="PF5/ChipGroup"
-    data-ouia-safe="true"
-    role="group"
-  >
-    <div
-      class="pf-v5-c-chip-group__main"
-    >
-      <span
-        class="pf-v5-c-chip-group__label"
-        id="pf-random-id-12"
-      >
-        A very long category name
-      </span>
-      <ul
-        aria-labelledby="pf-random-id-12"
-        class="pf-v5-c-chip-group__list"
-        role="list"
-      >
-        <li
-          class="pf-v5-c-chip-group__list-item"
-        >
-          <div
-            class="pf-v5-c-chip"
-            data-ouia-component-id="OUIA-Generated-Chip-9"
-            data-ouia-component-type="PF5/Chip"
-            data-ouia-safe="true"
-          >
-            <span
-              class="pf-v5-c-chip__content"
-            >
-              <span
-                class="pf-v5-c-chip__text"
-                id="pf-random-id-13"
-              >
-                1.1
-              </span>
-            </span>
-            <span
-              class="pf-v5-c-chip__actions"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="close"
-                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="PF5/Button"
-                data-ouia-safe="true"
-                id="remove_pf-random-id-13"
-                type="button"
-              >
-                <svg
-                  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"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ChipGroup chip group with closable category 1`] = `
-<DocumentFragment>
-  <div
-    aria-labelledby="pf-random-id-4"
-    class="pf-v5-c-chip-group pf-m-category"
-    data-ouia-component-type="PF5/ChipGroup"
-    data-ouia-safe="true"
-    role="group"
-  >
-    <div
-      class="pf-v5-c-chip-group__main"
-    >
-      <span
-        class="pf-v5-c-chip-group__label"
-        id="pf-random-id-4"
-      >
-        category
-      </span>
-      <ul
-        aria-labelledby="pf-random-id-4"
-        class="pf-v5-c-chip-group__list"
-        role="list"
-      >
-        <li
-          class="pf-v5-c-chip-group__list-item"
-        >
-          <div
-            class="pf-v5-c-chip"
-            data-ouia-component-id="OUIA-Generated-Chip-3"
-            data-ouia-component-type="PF5/Chip"
-            data-ouia-safe="true"
-          >
-            <span
-              class="pf-v5-c-chip__content"
-            >
-              <span
-                class="pf-v5-c-chip__text"
-                id="pf-random-id-5"
-              >
-                1.1
-              </span>
-            </span>
-            <span
-              class="pf-v5-c-chip__actions"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="close"
-                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="PF5/Button"
-                data-ouia-safe="true"
-                id="remove_pf-random-id-5"
-                type="button"
-              >
-                <svg
-                  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"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <div
-      class="pf-v5-c-chip-group__close"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="Close chip group"
-        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="PF5/Button"
-        data-ouia-safe="true"
-        id="remove_group_pf-random-id-4"
-        type="button"
-      >
-        <svg
-          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"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -10,7 +10,7 @@ import { ClipboardCopyToggle } from './ClipboardCopyToggle';
 import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 
-export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
+export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: string) => {
   navigator.clipboard.writeText(text.toString());
 };
 
@@ -21,12 +21,13 @@ export enum ClipboardCopyVariant {
 }
 
 export interface ClipboardCopyState {
-  text: string | number;
+  text: string;
   expanded: boolean;
   copied: boolean;
+  textWhenExpanded: string;
 }
 
-export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
+export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'children'>, OUIAProps {
   /** Additional classes added to the clipboard copy container. */
   className?: string;
   /** Tooltip message to display when hover the copy button */
@@ -70,11 +71,11 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   /** Delay in ms before the tooltip appears. */
   entryDelay?: number;
   /** A function that is triggered on clicking the copy button. */
-  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
+  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: string) => void;
   /** A function that is triggered on changing the text. */
-  onChange?: (event: React.FormEvent, text?: string | number) => void;
+  onChange?: (event: React.FormEvent, text?: string) => void;
   /** The text which is copied. */
-  children: React.ReactNode;
+  children: string;
   /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -88,12 +89,12 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   timer = null as number;
   constructor(props: ClipboardCopyProps) {
     super(props);
+    const text = Array.isArray(this.props.children) ? this.props.children.join('') : (this.props.children as string);
     this.state = {
-      text: Array.isArray(this.props.children)
-        ? this.props.children.join('')
-        : (this.props.children as string | number),
+      text,
       expanded: this.props.isExpanded,
-      copied: false
+      copied: false,
+      textWhenExpanded: text
     };
   }
 
@@ -119,7 +120,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   componentDidUpdate = (prevProps: ClipboardCopyProps, prevState: ClipboardCopyState) => {
     if (prevProps.children !== this.props.children) {
-      this.setState({ text: this.props.children as string | number });
+      this.setState({ text: this.props.children as string });
     }
   };
 
@@ -136,11 +137,16 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
     }));
   };
 
-  updateText = (event: React.FormEvent, text: string | number) => {
+  updateText = (event: React.FormEvent, text: string) => {
     this.setState({ text });
     this.props.onChange(event, text);
   };
 
+  updateTextWhenExpanded = (event: React.FormEvent, text: string) => {
+    this.setState({ textWhenExpanded: text });
+    this.props.onChange(event, text);
+  };
+
   render = () => {
     const {
       /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -229,7 +235,14 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                   {variant === 'expansion' && (
                     <ClipboardCopyToggle
                       isExpanded={this.state.expanded}
-                      onClick={this.expandContent}
+                      onClick={(_event) => {
+                        this.expandContent(_event);
+                        if (this.state.expanded) {
+                          this.setState({ text: this.state.textWhenExpanded });
+                        } else {
+                          this.setState({ textWhenExpanded: this.state.text });
+                        }
+                      }}
                       id={`${toggleIdPrefix}${id}`}
                       textId={`${textIdPrefix}${id}`}
                       contentId={`${contentIdPrefix}${id}`}
@@ -239,7 +252,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                   <TextInput
                     readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
                     onChange={this.updateText}
-                    value={this.state.text as string | number}
+                    value={this.state.expanded ? this.state.textWhenExpanded : this.state.text}
                     id={`text-input-${id}`}
                     aria-label={textAriaLabel}
                     {...(isCode && { dir: 'ltr' })}
@@ -253,7 +266,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                     textId={`text-input-${id}`}
                     aria-label={hoverTip}
                     onClick={(event: any) => {
-                      onCopy(event, this.state.text);
+                      onCopy(event, this.state.expanded ? this.state.textWhenExpanded : this.state.text);
                       this.setState({ copied: true });
                     }}
                     onTooltipHidden={() => this.setState({ copied: false })}
@@ -266,7 +279,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                     isReadOnly={isReadOnly}
                     isCode={isCode}
                     id={`content-${id}`}
-                    onChange={this.updateText}
+                    onChange={this.updateTextWhenExpanded}
                   >
                     {this.state.text}
                   </ClipboardCopyExpanded>