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

package/helpers/package.json

@@ -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":"6.0.0-alpha.1","private":true}
+{"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":"6.0.0-alpha.2","private":true}

package/layouts/package.json

@@ -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":"6.0.0-alpha.1","private":true}
+{"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":"6.0.0-alpha.2","private":true}

package/next/package.json

@@ -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":"6.0.0-alpha.1","private":true}
+{"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":"6.0.0-alpha.2","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.2",
+  "version": "6.0.0-alpha.3",
   "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 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.2",
-    "@patternfly/react-styles": "^6.0.0-alpha.2",
-    "@patternfly/react-tokens": "^6.0.0-alpha.2",
+    "@patternfly/react-icons": "^6.0.0-alpha.3",
+    "@patternfly/react-styles": "^6.0.0-alpha.3",
+    "@patternfly/react-tokens": "^6.0.0-alpha.3",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.12",
+    "@patternfly/patternfly": "6.0.0-alpha.28",
     "@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": "e097336a87fa3cd2ab41654bec28d120beed10bc"
+  "gitHead": "da36134a3effa82a166c47f5b1c2689869a0f52a"
 }

package/src/components/AboutModal/__tests__/AboutModalBox.test.tsx

@@ -3,10 +3,6 @@ import { render } from '@testing-library/react';
 import { AboutModalBox } from '../AboutModalBox';
 
 test('AboutModalBox Test', () => {
-  const { asFragment } = render(
-    <AboutModalBox aria-labelledby="id">
-      This is a AboutModalBox
-    </AboutModalBox>
-  );
+  const { asFragment } = render(<AboutModalBox aria-labelledby="id">This is a AboutModalBox</AboutModalBox>);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Accordion/__tests__/AccordionItem.test.tsx

@@ -11,8 +11,6 @@ test('Renders children', () => {
 });
 
 test('Matches the snapshot', () => {
-  const { asFragment } = render(
-    <AccordionItem>Test</AccordionItem>
-  );
+  const { asFragment } = render(<AccordionItem>Test</AccordionItem>);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Alert/__tests__/AlertGroup.test.tsx

@@ -19,7 +19,7 @@ test('Alert Group renders without children', () => {
 });
 
 test('Alert Group works with n children', () => {
-  const { asFragment } = render(
+  render(
     <AlertGroup data-testid="container">
       <Alert variant="success" title="alert title" />
       <Alert variant="warning" title="another alert title" />

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

@@ -115,10 +115,11 @@ test('Clicking backToTop scrolls back to top of the element passed via scrollabl
   const user = userEvent.setup();
   const wrapper = document.getElementById('backToTopWrapper');
   fireEvent.scroll(wrapper as HTMLElement, { target: { scrollY: 401 } });
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   wrapper!.scrollTo = jest.fn();
   await user.click(screen.getByRole(`button`).parentElement as Element);
 
-  expect(wrapper?.scrollTo).toBeCalledTimes(1);
+  expect(wrapper?.scrollTo).toHaveBeenCalledTimes(1);
 });
 
 test('Passes correct text content to button child component', () => {

package/src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
 import { Spinner, spinnerSize } from '../Spinner';
-import { useOUIAProps, OUIAProps } from '../../helpers';
+import { useOUIAProps, OUIAProps } from '../../helpers/OUIA/ouia';
 import { Badge } from '../Badge';
 
 export enum ButtonVariant {

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import CartArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/cart-arrow-down-icon';
 import { Button, ButtonVariant } from '../Button';
 
 Object.values(ButtonVariant).forEach((variant) => {

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

@@ -57,7 +57,9 @@ test('Next year dates have correct year in aria label', () => {
 });
 
 test('InlineProps render correct wrapper component and attributes', () => {
-  render(<CalendarMonth inlineProps={{component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: "hi"}} />);
+  render(
+    <CalendarMonth inlineProps={{ component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: 'hi' }} />
+  );
 
   const article = screen.getByRole('article');
   expect(article).toHaveAttribute('aria-labelledby', 'hi');

package/src/components/Card/__tests__/CardBody.test.tsx

@@ -30,7 +30,7 @@ describe('CardBody', () => {
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
 
-    render(<CardBody component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<CardBody component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 

package/src/components/Card/__tests__/CardFooter.test.tsx

@@ -27,7 +27,7 @@ describe('CardFooter', () => {
 
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
-    render(<CardFooter component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<CardFooter component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 });

package/src/components/Chip/Chip.tsx

@@ -81,6 +81,17 @@ class Chip extends React.Component<ChipProps, ChipState> {
     });
   }
 
+  componentDidUpdate(_prevProps: ChipProps, prevState: ChipState) {
+    const nextIsTooltipVisible = Boolean(
+      this.span.current && this.span.current.offsetWidth < this.span.current.scrollWidth
+    );
+    if (prevState.isTooltipVisible !== nextIsTooltipVisible) {
+      this.setState({
+        isTooltipVisible: nextIsTooltipVisible
+      });
+    }
+  }
+
   setChipStyle = () => ({
     [cssChipTextMaxWidth.name]: this.props.textMaxWidth
   });

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/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,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>

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}>