@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.21

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

@@ -115,7 +115,7 @@ test('chip group with closeBtnAriaLabel', () => {
     </ChipGroup>
   );
   expect(screen.getByLabelText('close button aria label')).toBeInTheDocument();
-  expect(screen.getByLabelText('close button aria label')).toHaveAccessibleName("close button aria label category");
+  expect(screen.getByLabelText('close button aria label')).toHaveAccessibleName('close button aria label category');
 });
 
 test('chip group onClick', async () => {
@@ -169,8 +169,6 @@ test('chip group expanded', async () => {
 });
 
 test('overflow chip does not render by default when < 4 children are passed', async () => {
-  const user = userEvent.setup();
-
   render(
     <ChipGroup>
       <Chip>1</Chip>
@@ -183,8 +181,6 @@ test('overflow chip does not render by default when < 4 children are passed', as
 });
 
 test('overflow chip collapsed by default', async () => {
-  const user = userEvent.setup();
-
   render(
     <ChipGroup>
       <Chip>1</Chip>

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

@@ -7,7 +7,6 @@ exports[`Matches snapshot 1`] = `
     data-ouia-component-id="snapshot-test"
     data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
-    id="snapshot-test"
   >
     <span
       class="pf-v5-c-chip__content"

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,12 +71,12 @@ 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;
-  /** Additional actions for inline-compact clipboard copy. Should be wrapped with ClipboardCopyAction. */
+  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.*/
   ouiaId?: number | string;
@@ -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,8 @@ 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 });
+      const newText = this.props.children as string;
+      this.setState({ text: newText, textWhenExpanded: newText });
     }
   };
 
@@ -136,11 +138,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 +236,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 +253,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 +267,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 +280,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>

package/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx

@@ -6,7 +6,6 @@ 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__/ClipboardCopyToggle.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
 import { ClipboardCopyToggle } from '../ClipboardCopyToggle';
-import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import userEvent from '@testing-library/user-event';
 
 const onClickMock = jest.fn();

package/src/components/DataList/DataList.tsx

@@ -73,6 +73,7 @@ class DataList extends React.Component<DataListProps> {
     const {
       className,
       children,
+      'aria-label': ariaLabel,
       onSelectDataListItem,
       selectedDataListItemId,
       isCompact,
@@ -106,6 +107,7 @@ class DataList extends React.Component<DataListProps> {
           )}
           style={props.style}
           role="list"
+          aria-label={ariaLabel}
           {...props}
           ref={this.ref}
         >

package/src/components/DataList/DataListAction.tsx

@@ -35,8 +35,8 @@ export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
   id,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   isPlainButtonAction,
-  /* eslint-enable @typescript-eslint/no-unused-vars */
   ...props
 }: DataListActionProps) => (
   <div className={css(styles.dataListItemAction, formatBreakpointMods(visibility, styles), className)} {...props}>