npm - @patternfly/react-core - Versions diffs - 5.3.0-prerelease.2 → 5.3.0-prerelease.20 - Mend

@patternfly/react-core 5.3.0-prerelease.2 → 5.3.0-prerelease.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (479) hide show

package/helpers/package.json CHANGED Viewed

	@@ -1 +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.3.0-prerelease.1","private":true}
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.3.0-prerelease.19","private":true}

package/layouts/package.json CHANGED Viewed

	@@ -1 +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.3.0-prerelease.1","private":true}
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.3.0-prerelease.19","private":true}

package/next/package.json CHANGED Viewed

	@@ -1 +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.3.0-prerelease.1","private":true}
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.3.0-prerelease.19","private":true}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.3.0-prerelease.2",
+  "version": "5.3.0-prerelease.20",
   "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",
@@ -46,15 +46,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.3.0-prerelease.0",
-    "@patternfly/react-styles": "^5.3.0-prerelease.0",
-    "@patternfly/react-tokens": "^5.3.0-prerelease.0",
+    "@patternfly/react-icons": "^5.3.0-prerelease.3",
+    "@patternfly/react-styles": "^5.3.0-prerelease.3",
+    "@patternfly/react-tokens": "^5.3.0-prerelease.3",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.2.0",
+    "@patternfly/patternfly": "5.3.0-prerelease.5",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "08a6b1aaaf6769b657ed674f4bb741b530265c7d"
+  "gitHead": "544cbe8e7040e1edfa80fbc2d65fa9802c7183ed"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx CHANGED Viewed

@@ -83,9 +83,6 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   validators?: ((date: Date) => boolean)[];
 }
-// Must be numeric given current header design
-const yearFormat = (date: Date) => date.getFullYear();
 const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
   const defaultDate = new Date(year, month);
@@ -164,6 +161,13 @@ export const CalendarMonth = ({
   };
   const initialDate = getInitialDate();
   const [focusedDate, setFocusedDate] = React.useState(initialDate);
+  // Must be numeric given current header design
+  const yearFormat = (date: Date) => date.getFullYear();
+  //
+  const yearFormatted = yearFormat(focusedDate);
+  const [yearInput, setYearInput] = React.useState(yearFormatted.toString());
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
@@ -191,6 +195,7 @@ export const CalendarMonth = ({
     setHoveredDate(newDate);
     setShouldFocus(false);
     onMonthChange(ev, newDate);
+    setYearInput(yearFormat(newDate).toString());
   };
   const onKeyDown = (ev: React.KeyboardEvent<HTMLTableSectionElement>) => {
@@ -217,6 +222,34 @@ export const CalendarMonth = ({
   const changeMonth = (newMonth: number, newYear?: number) =>
     new Date(newYear ?? focusedDate.getFullYear(), newMonth, 1);
+  const MIN_YEAR = 1900;
+  const MAX_YEAR = 2100;
+  const handleYearInputChange = (event: React.FormEvent<HTMLInputElement>, yearStr: string) => {
+    if (!/^\d{0,4}$/.test(yearStr)) {
+      return;
+    }
+    setYearInput(yearStr);
+    if (yearStr.length === 4) {
+      const yearNum = Number(yearStr);
+      if (yearNum >= MIN_YEAR && yearNum <= MAX_YEAR) {
+        const newDate = changeYear(yearNum);
+        setFocusedDate(newDate);
+        setHoveredDate(newDate);
+        setShouldFocus(false);
+        // We need to manually focus the year input in FireFox when the scroll buttons are clicked, as FireFox doesn't place focus automatically
+        (event.target as HTMLElement).focus();
+        onMonthChange(event, newDate);
+      } else {
+        setYearInput(yearFormatted.toString());
+      }
+    }
+  };
   const addMonth = (toAdd: -1 | 1) => {
     let newMonth = focusedDate.getMonth() + toAdd;
     let newYear = focusedDate.getFullYear();
@@ -254,7 +287,6 @@ export const CalendarMonth = ({
   }
   const isHoveredDateValid = isValidated(hoveredDate);
   const monthFormatted = monthFormat(focusedDate);
-  const yearFormatted = yearFormat(focusedDate);
   const calendarToRender = (
     <div className={css(styles.calendarMonth, className)} {...props}>
@@ -321,15 +353,8 @@ export const CalendarMonth = ({
               <TextInput
                 aria-label={yearInputAriaLabel}
                 type="number"
-                value={yearFormatted}
-                onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
-                  const newDate = changeYear(Number(year));
-                  setFocusedDate(newDate);
-                  setHoveredDate(newDate);
-                  setShouldFocus(false);
-                  focusRef.current?.blur(); // will unfocus a date when changing year via up/down arrows
-                  onMonthChange(ev, newDate);
-                }}
+                value={yearInput}
+                onChange={handleYearInputChange}
               />
             </div>
           </InputGroupItem>

package/src/components/Card/Card.tsx CHANGED Viewed

@@ -14,15 +14,21 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   component?: keyof JSX.IntrinsicElements;
   /** Modifies the card to include compact styling. Should not be used with isLarge. */
   isCompact?: boolean;
-  /** Modifies the card to include selectable styling */
+  /** Flag indicating that the card is selectable. */
   isSelectable?: boolean;
   /** @deprecated Specifies the card is selectable, and applies raised styling on hover and select */
   isSelectableRaised?: boolean;
-  /** Modifies the card to include selected styling */
-  isSelected?: boolean;
-  /** Modifies the card to include clickable styling */
+  /** Flag indicating that the card is clickable and contains some action that triggers on click. */
   isClickable?: boolean;
-  /** Modifies a clickable or selectable card to have disabled styling. */
+  /** Flag indicating whether a card that is either selectable only or both clickable and selectable is
+   * currently selected and has selected styling.
+   */
+  isSelected?: boolean;
+  /** Flag indicating whether a card that is either only clickable or that is both clickable and selectable
+   * is currently clicked and has clicked styling.
+   */
+  isClicked?: boolean;
+  /** Flag indicating that a clickable or selectable card is disabled. */
   isDisabled?: boolean;
   /** @deprecated Modifies a raised selectable card to have disabled styling */
   isDisabledRaised?: boolean;
@@ -56,6 +62,8 @@ interface CardContextProps {
   isExpanded: boolean;
   isClickable: boolean;
   isSelectable: boolean;
+  isSelected: boolean;
+  isClicked: boolean;
   isDisabled: boolean;
   // TODO: Remove hasSelectableInput when deprecated prop is removed
   hasSelectableInput: boolean;
@@ -72,6 +80,8 @@ export const CardContext = React.createContext<Partial<CardContextProps>>({
   isExpanded: false,
   isClickable: false,
   isSelectable: false,
+  isSelected: false,
+  isClicked: false,
   isDisabled: false
 });
@@ -86,6 +96,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isDisabled = false,
   isSelectableRaised = false,
   isSelected = false,
+  isClicked = false,
   isDisabledRaised = false,
   isFlat = false,
   isExpanded = false,
@@ -119,7 +130,11 @@ export const Card: React.FunctionComponent<CardProps> = ({
       return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
     }
     if (isSelectable && isClickable) {
-      return css(styles.modifiers.selectable, styles.modifiers.clickable, isSelected && styles.modifiers.current);
+      return css(
+        styles.modifiers.selectable,
+        styles.modifiers.clickable,
+        (isSelected || isClicked) && styles.modifiers.current
+      );
     }
     if (isSelectable) {
@@ -127,7 +142,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
     }
     if (isClickable) {
-      return css(styles.modifiers.clickable, isSelected && styles.modifiers.selected);
+      return css(styles.modifiers.clickable, isClicked && styles.modifiers.current);
     }
     return '';
@@ -162,6 +177,8 @@ export const Card: React.FunctionComponent<CardProps> = ({
         isExpanded,
         isClickable,
         isSelectable,
+        isSelected,
+        isClicked,
         isDisabled,
         // TODO: Remove hasSelectableInput when deprecated prop is removed
         hasSelectableInput

package/src/components/Card/CardHeader.tsx CHANGED Viewed

@@ -44,7 +44,9 @@ export interface CardHeaderSelectableActionsObject {
   isExternalLink?: boolean;
   /** Name for the input element of a clickable or selectable card. */
   name?: string;
-  /** Flag indicating whether the selectable card input is checked */
+  /** @deprecated Flag indicating whether the selectable card input is checked. We recommend using
+   * the isSelected prop on the card component instead.
+   */
   isChecked?: boolean;
 }
@@ -80,7 +82,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
 }: CardHeaderProps) => (
   <CardContext.Consumer>
     {/* TODO: Remove hasSelectableInput when deprecated props are removed */}
-    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled, hasSelectableInput }) => {
+    {({ cardId, isClickable, isSelectable, isSelected, isClicked, isDisabled: isCardDisabled, hasSelectableInput }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -112,12 +114,10 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
       }
       const handleActionClick = (event: React.FormEvent<HTMLInputElement> | React.MouseEvent) => {
-        if (isClickable) {
-          if (selectableActions?.onClickAction) {
-            selectableActions.onClickAction(event);
-          } else if (selectableActions?.to) {
-            window.open(selectableActions.to, selectableActions.isExternalLink ? '_blank' : '_self');
-          }
+        if (selectableActions?.onClickAction) {
+          selectableActions.onClickAction(event);
+        } else if (selectableActions?.to) {
+          window.open(selectableActions.to, selectableActions.isExternalLink ? '_blank' : '_self');
         }
       };
@@ -132,12 +132,13 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           name: selectableActions.name,
           isDisabled: isCardDisabled
         };
+        const isSelectableInputChecked = selectableActions.isChecked ?? isSelected;
         if (isClickable && !isSelectable) {
-          return { ...baseProps, onClick: handleActionClick };
+          return { ...baseProps, onClick: handleActionClick, isChecked: isClicked };
         }
         if (isSelectable) {
-          return { ...baseProps, onChange: selectableActions.onChange, isChecked: selectableActions.isChecked };
+          return { ...baseProps, onChange: selectableActions.onChange, isChecked: isSelectableInputChecked };
         }
         return baseProps;

package/src/components/Card/examples/Card.md CHANGED Viewed

@@ -109,9 +109,9 @@ A common use case of this is to set all but one body section to `isFilled={false
 ### Selectable
-A card can be selected by clicking anywhere within the card.
+A selectable card can be selected by clicking anywhere within the card.
-You must avoid rendering any other interactive content within the `<Card>` when it is meant to be selectable only. Refer to our [clickable and selectable example](#clickable-and-selectable-cards) if you need a card that is both selectable and has other interactive content.
+You must avoid rendering any other interactive content within the `<Card>` when it is meant to be selectable only. Refer to our [actionable and selectable example](#clickable-and-selectable-cards) if you need a card that is both selectable and has other interactive, actionable content.
 ```ts file='./CardSelectable.tsx'
@@ -119,27 +119,29 @@ You must avoid rendering any other interactive content within the `<Card>` when
 ### Single selectable
-When a group of single selectable cards are related, you should pass the same `name` property to each card's `selectableActions` property.
+When a group of single selectable cards are related, you must pass the same `name` property to each card's `selectableActions` property.
 ```ts file='./CardSingleSelectable.tsx'
 ```
-### Clickable
+### Actionable
-A card can perform an action or navigate to a link by clicking anywhere within the card. You can also pass in the `isExternalLink` property to `selectableActions` if you want a clickable card's link to open in a new tab or window.
+An actionable card can perform an action or navigate to a link by clicking anywhere within the card. To open a link in a new tab or window, pass the `isExternalLink` property to `selectableActions`.
-When a card is meant to be clickable only, you must avoid rendering any other interactive content within the `<Card>`, similar to selectable cards.
+You can pass the `isClicked` property to `<Card>` to convey that a card is the currently clicked one, such as when clicking a card would open a [primary-detail view](/patterns/primary-detail). This must not be used simply for "selection" of a card, and you should instead use our [selectable card](#selectable) or [single selectable card](#single-selectable).
+When a card is meant to be actionable only, you must avoid rendering any other interactive content within the `<Card>`, similar to selectable cards.
 ```ts file='./CardClickable.tsx'
 ```
-### Clickable and selectable
+### Actionable and selectable
-A card can be selectable and have additional interactive content by passing both the `isClickable` and `isSelectable` properties to `<Card>`. The following example shows how the "clickable" functionality can be rendered anywhere within a selectable card.
+A card can be selectable and have additional interactive content by passing both the `isClickable` and `isSelectable` properties to `<Card>`. The following example shows how the actionable functionality can be rendered anywhere within a selectable card.
-When passing interactive content to a clickable and selectable card that is disabled, you should also ensure the interactive content is disabled as well, if applicable.
+When passing interactive content to an actionable and selectable card that is disabled, you should also ensure the interactive content is disabled as well, if applicable.
 ```ts file='./CardClickableSelectable.tsx'

package/src/components/Card/examples/CardClickableSelectable.tsx CHANGED Viewed

@@ -5,14 +5,14 @@ export const CardClickable: React.FunctionComponent = () => {
   const [isChecked1, setIsChecked1] = React.useState(false);
   const [isChecked2, setIsChecked2] = React.useState(false);
   const [isChecked3, setIsChecked3] = React.useState(false);
-  const [isSelected1, setIsSelected1] = React.useState(false);
+  const [isClicked, setIsClicked] = React.useState(false);
   const id1 = 'clickable-selectable-card-input-1';
   const id2 = 'clickable-selectable-card-input-2';
   const id3 = 'clickable-selectable-card-input-3';
   const onClick = () => {
-    setIsSelected1((prevState) => !prevState);
+    setIsClicked((prevState) => !prevState);
   };
   const onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
@@ -33,13 +33,18 @@ export const CardClickable: React.FunctionComponent = () => {
   return (
     <React.Fragment>
-      <Card id="clickable-selectable-card-example-1" isClickable isSelectable isSelected={isSelected1}>
+      <Card
+        id="clickable-selectable-card-example-1"
+        isClickable
+        isClicked={isClicked}
+        isSelectable
+        isSelected={isChecked1}
+      >
         <CardHeader
           selectableActions={{
             selectableActionId: id1,
             selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
             name: id1,
-            isChecked: isChecked1,
             onChange
           }}
         >
@@ -51,13 +56,12 @@ export const CardClickable: React.FunctionComponent = () => {
         </CardHeader>
         <CardBody>This card performs an action upon clicking the card title and is selectable.</CardBody>
       </Card>
-      <Card id="clickable-selectable-card-example-2" isClickable isSelectable>
+      <Card id="clickable-selectable-card-example-2" isClickable isSelectable isSelected={isChecked2}>
         <CardHeader
           selectableActions={{
             selectableActionId: id2,
             selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',
             name: id2,
-            isChecked: isChecked2,
             onChange
           }}
         >
@@ -71,13 +75,12 @@ export const CardClickable: React.FunctionComponent = () => {
           .
         </CardBody>
       </Card>
-      <Card id="clickable-selectable-card-example-3" isClickable isSelectable isDisabled>
+      <Card id="clickable-selectable-card-example-3" isClickable isSelectable isDisabled isSelected={isChecked3}>
         <CardHeader
           selectableActions={{
             selectableActionId: id3,
             selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',
             name: id3,
-            isChecked: isChecked3,
             onChange
           }}
         >

package/src/components/Card/examples/CardSelectable.tsx CHANGED Viewed

@@ -28,13 +28,12 @@ export const SelectableCard: React.FunctionComponent = () => {
   return (
     <React.Fragment>
-      <Card id="selectable-card-example-1" isSelectable>
+      <Card id="selectable-card-example-1" isSelectable isSelected={isChecked1}>
         <CardHeader
           selectableActions={{
             selectableActionId: id1,
             selectableActionAriaLabelledby: 'selectable-card-example-1',
             name: id1,
-            isChecked: isChecked1,
             onChange
           }}
         >
@@ -42,13 +41,12 @@ export const SelectableCard: React.FunctionComponent = () => {
         </CardHeader>
         <CardBody>This card is selectable.</CardBody>
       </Card>
-      <Card id="selectable-card-example-2" isSelectable>
+      <Card id="selectable-card-example-2" isSelectable isSelected={isChecked2}>
         <CardHeader
           selectableActions={{
             selectableActionId: id2,
             selectableActionAriaLabelledby: 'selectable-card-example-2',
             name: id2,
-            isChecked: isChecked2,
             onChange
           }}
         >
@@ -56,13 +54,12 @@ export const SelectableCard: React.FunctionComponent = () => {
         </CardHeader>
         <CardBody>This card is selectable.</CardBody>
       </Card>
-      <Card id="selectable-card-example-3" isSelectable isDisabled>
+      <Card id="selectable-card-example-3" isSelectable isDisabled isSelected={isChecked3}>
         <CardHeader
           selectableActions={{
             selectableActionId: id3,
             selectableActionAriaLabelledby: 'selectable-card-example-3',
             name: id3,
-            isChecked: isChecked3,
             onChange
           }}
         >

package/src/components/Card/examples/CardSingleSelectable.tsx CHANGED Viewed

@@ -2,45 +2,53 @@ import React from 'react';
 import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 export const SingleSelectableCard: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState('');
   const id1 = 'single-selectable-card-input-1';
   const id2 = 'single-selectable-card-input-2';
   const id3 = 'single-selectable-card-input-3';
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(event.currentTarget.id);
+  };
   return (
     <React.Fragment>
-      <Card id="single-selectable-card-example-1" isSelectable>
+      <Card id="single-selectable-card-example-1" isSelectable isSelected={isChecked === id1}>
         <CardHeader
           selectableActions={{
             selectableActionId: id1,
             selectableActionAriaLabelledby: 'single-selectable-card-example-1',
             name: 'single-selectable-card-example',
-            variant: 'single'
+            variant: 'single',
+            onChange
           }}
         >
           <CardTitle>First card</CardTitle>
         </CardHeader>
         <CardBody>This card is single selectable.</CardBody>
       </Card>
-      <Card id="single-selectable-card-example-2" isSelectable>
+      <Card id="single-selectable-card-example-2" isSelectable isSelected={isChecked === id2}>
         <CardHeader
           selectableActions={{
             selectableActionId: id2,
             selectableActionAriaLabelledby: 'single-selectable-card-example-2',
             name: 'single-selectable-card-example',
-            variant: 'single'
+            variant: 'single',
+            onChange
           }}
         >
           <CardTitle>Second card</CardTitle>
         </CardHeader>
         <CardBody>This card is single selectable.</CardBody>
       </Card>
-      <Card id="single-selectable-card-example-3" isSelectable isDisabled>
+      <Card id="single-selectable-card-example-3" isSelectable isDisabled isSelected={isChecked === id3}>
         <CardHeader
           selectableActions={{
             selectableActionId: id3,
             selectableActionAriaLabelledby: 'single-selectable-card-example-3',
             name: 'single-selectable-card-example',
-            variant: 'single'
+            variant: 'single',
+            onChange
           }}
         >
           <CardTitle>Third card</CardTitle>

package/src/components/Chip/__tests__/ChipGroup.test.tsx CHANGED Viewed

@@ -7,6 +7,8 @@ import { ChipGroup } from '../index';
 import { Chip } from '../../Chip';
 import styles from '@patternfly/react-styles/css/components/Chip/chip-group';
+jest.mock('../../../helpers/GenerateId/GenerateId');
 test('chip group default', () => {
   render(
     <ChipGroup>
@@ -71,7 +73,7 @@ test('chip group has aria-labelledby attribute', () => {
       <Chip>1.1</Chip>
     </ChipGroup>
   );
-  expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby', expect.stringContaining(`pf-random-id`));
+  expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby', expect.stringContaining(`generated-id`));
 });
 test('chip group has aria-labelledby attribute set to ID value', () => {

package/src/components/ClipboardCopy/ClipboardCopy.tsx CHANGED Viewed

@@ -10,8 +10,22 @@ import { ClipboardCopyToggle } from './ClipboardCopyToggle';
 import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';
 import { getOUIAProps, OUIAProps } from '../../helpers';
-export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: string) => {
-  navigator.clipboard.writeText(text.toString());
+export const clipboardCopyFunc = (_event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
+  try {
+    navigator.clipboard.writeText(text.toString());
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "Clipboard API not found, this copy function will not work. This is likely because you're using an",
+      "unsupported browser or you're not using HTTPS. \n\nIf you're a developer building an application which needs",
+      "to support copying to the clipboard without the clipboard API, you'll have to create your own copy",
+      'function and pass it to the ClipboardCopy component as the onCopy prop. For more information see',
+      'https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard'
+    );
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
 };
 export enum ClipboardCopyVariant {
@@ -27,7 +41,7 @@ export interface ClipboardCopyState {
   textWhenExpanded: string;
 }
-export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'children'>, OUIAProps {
+export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
   /** Additional classes added to the clipboard copy container. */
   className?: string;
   /** Tooltip message to display when hover the copy button */
@@ -70,13 +84,13 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   exitDelay?: number;
   /** 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?: string) => void;
+  /** A function that is triggered on clicking the copy button. This will replace the existing clipboard copy functionality entirely. */
+  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;
   /** The text which is copied. */
-  children: string;
-  /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
+  children: React.ReactNode;
+  /** Additional actions for inline-compact clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;

package/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx CHANGED Viewed

@@ -6,6 +6,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 export interface ClipboardCopyExpandedProps extends Omit<ClipboardCopyProps, 'onChange'> {
   className?: string;
+  children: React.ReactNode;
   onChange?: (e: React.FormEvent<HTMLDivElement>, text: string) => void;
   isReadOnly?: boolean;
   isCode?: boolean;

package/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx CHANGED Viewed

@@ -4,6 +4,8 @@ import { ClipboardCopy } from '../ClipboardCopy';
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import userEvent from '@testing-library/user-event';
+jest.mock('../../../helpers/GenerateId/GenerateId');
 jest.mock('../ClipboardCopyButton', () => ({
   ClipboardCopyButton: ({ 'aria-label': ariaLabel, children, entryDelay, exitDelay, maxWidth, position, onClick }) => (
     <div data-testid="clipboardCopyButton-mock">

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap CHANGED Viewed

@@ -21,7 +21,7 @@ exports[`Matches snapshot 1`] = `
           data-ouia-component-id="OUIA-Generated-TextInputBase-26"
           data-ouia-component-type="PF5/TextInput"
           data-ouia-safe="true"
-          id="text-input-34"
+          id="text-input-generated-id"
           type="text"
           value="Copyable text"
         />

package/src/components/DragDrop/examples/DragDrop.md CHANGED Viewed

@@ -3,6 +3,7 @@ id: Drag and drop
 section: components
 propComponents: [DragDrop, Draggable, Droppable, DraggableItemPosition]
 title: Drag and drop
+deprecated: true
 ---
 You can use the `<DragDrop>` component to move items in or between lists. The `<DragDrop>` component should contain `<Droppable>` components which contain `<Draggable>` components.

package/src/components/Drawer/__tests__/Drawer.test.tsx CHANGED Viewed

@@ -14,6 +14,8 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { KeyTypes } from '../../../helpers';
+jest.mock('../../../helpers/GenerateId/GenerateId');
 Object.values([
   { isExpanded: true, isInline: false, isStatic: false },
   { isExpanded: false, isInline: false, isStatic: false },

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx CHANGED Viewed

@@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/react';
 import { DrawerPanelContent } from '../DrawerPanelContent';
 import { Drawer } from '../Drawer';
+jest.mock('../../../helpers/GenerateId/GenerateId');
 test('Does not render with aria-labelledby by default', () => {
   render(
     <Drawer isExpanded>

package/src/components/Drawer/__tests__/Generated/DrawerPanelContent.test.tsx CHANGED Viewed

@@ -7,6 +7,8 @@ import { DrawerPanelContent } from '../../DrawerPanelContent';
 // any missing imports can usually be resolved by adding them here
 import {} from '../..';
+jest.mock('../../../../helpers/GenerateId/GenerateId');
 it('DrawerPanelContent should match snapshot (auto-generated)', () => {
   const { asFragment } = render(<DrawerPanelContent className={"''"} children={<div>ReactNode</div>} />);
   expect(asFragment()).toMatchSnapshot();

package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap CHANGED Viewed

@@ -5,7 +5,7 @@ exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
   <div
     class="pf-v5-c-drawer__panel ''"
     hidden=""
-    id="pf-drawer-panel-0"
+    id="generated-id"
   />
 </DocumentFragment>
 `;