@patternfly/react-core 5.2.0-prerelease.9 → 6.0.0-alpha.2

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

@@ -1,48 +1,92 @@
 import React from 'react';
-
-import { render, screen } from '@testing-library/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';
 
-import { ClipboardCopyToggle, ClipboardCopyToggleProps } from '../ClipboardCopyToggle';
-
-const props: ClipboardCopyToggleProps = {
-  id: 'my-id',
-  textId: 'my-text-id',
-  contentId: 'my-content-id',
-  isExpanded: false,
-  className: 'myclassName',
-  onClick: jest.fn()
+const onClickMock = jest.fn();
+const requiredProps = {
+  id: 'main-id',
+  textId: 'text-id',
+  contentId: 'content-id',
+  onClick: onClickMock
 };
 
-describe('ClipboardCopyToggle', () => {
-  test('toggle button render', () => {
-    const desc = 'toggle content';
-    const { asFragment } = render(<ClipboardCopyToggle {...props} aria-label={desc} />);
+// Must be kept as first test to avoid Button's ouiaId updating in snapshots
+test('Matches snapshot', () => {
+  const { asFragment } = render(<ClipboardCopyToggle {...requiredProps} />);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <ClipboardCopyToggle {...requiredProps} />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders with id prop', () => {
+  render(<ClipboardCopyToggle {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('id', requiredProps.id);
+});
+
+test('Renders with aria-labelledby concatenated from id and textId props', () => {
+  render(
+    <>
+      <ClipboardCopyToggle aria-label="Toggle content" {...requiredProps} />
+      <span id={requiredProps.textId}>Test content</span>
+    </>
+  );
 
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(screen.getByRole('button')).toHaveAccessibleName('Toggle content Test content');
+});
+
+test('Renders with aria-controls with passed in contentId prop', () => {
+  render(<ClipboardCopyToggle {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-controls', requiredProps.contentId);
+});
 
-  test('toggle button onClick', async () => {
-    const onclick = jest.fn();
-    const user = userEvent.setup();
+test('Renders with aria-expanded of false by default', () => {
+  render(<ClipboardCopyToggle {...requiredProps} />);
 
-    render(<ClipboardCopyToggle {...props} onClick={onclick} />);
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+});
 
-    await user.click(screen.getByRole('button'));
-    expect(onclick).toHaveBeenCalled();
-  });
+test('Renders with aria-expanded based on isExpanded prop', () => {
+  render(<ClipboardCopyToggle isExpanded={true} {...requiredProps} />);
 
-  test('has aria-expanded set to true when isExpanded is true', () => {
-    render(<ClipboardCopyToggle {...props} isExpanded />);
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+});
 
-    const toggleButton = screen.getByRole('button');
-    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
-  });
+test('Calls onClick when clipboard toggle is clicked', async () => {
+  const user = userEvent.setup();
+  render(<ClipboardCopyToggle {...requiredProps} />);
+
+  await user.click(screen.getByRole('button'));
+  expect(onClickMock).toHaveBeenCalledTimes(1);
+});
+
+test('Does not call onClick when clipboard toggle is not clicked', async () => {
+  const user = userEvent.setup();
+  render(
+    <>
+      <ClipboardCopyToggle {...requiredProps} />
+      <button>Test clicker</button>
+    </>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test clicker' }));
+  expect(onClickMock).not.toHaveBeenCalled();
+});
 
-  test('has aria-expanded set to false when isExpanded is false', () => {
-    render(<ClipboardCopyToggle {...props} />);
+test('Spreads additional props to container', () => {
+  render(<ClipboardCopyToggle data-prop="test" {...requiredProps} />);
 
-    const toggleButton = screen.getByRole('button');
-    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
-  });
+  expect(screen.getByRole('button')).toHaveAttribute('data-prop', 'test');
 });

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

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-clipboard-copy"
+    data-ouia-component-id="snapshot"
+    data-ouia-component-type="PF5/ClipboardCopy"
+    data-ouia-safe="true"
+    id="snapshot"
+  >
+    <div
+      class="pf-v5-c-clipboard-copy__group"
+    >
+      <span
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Copyable input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-26"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe="true"
+          id="text-input-34"
+          type="text"
+          value="Copyable text"
+        />
+      </span>
+      <div
+        data-testid="clipboardCopyButton-mock"
+      >
+        <p>
+          exitDelay: 1500
+        </p>
+        <p>
+          entryDelay: 300
+        </p>
+        <p>
+          maxWidth: 150px
+        </p>
+        <p>
+          position: top
+        </p>
+        <p>
+          button-ariaLabel: Copy to clipboard
+        </p>
+        <div>
+          children: Copy to clipboard
+        </div>
+        <button>
+          Test CCB clicker
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v5-c-clipboard-copy__actions-item"
+  >
+    Action text
+  </span>
+</DocumentFragment>
+`;

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

@@ -1,31 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`copy button render 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="click this button to copy text"
-    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="PF5/Button"
-    data-ouia-safe="true"
-    id="my-id"
-    type="button"
+  <div
+    data-testid="tooltip-mock"
   >
-    <svg
-      aria-hidden="true"
-      class="pf-v5-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 448 512"
-      width="1em"
+    <div
+      data-testid="tooltip-mock-content"
     >
-      <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"
-      />
-    </svg>
-  </button>
+      <div>
+        Button content
+      </div>
+    </div>
+    <p>
+      exitDelay: 0
+    </p>
+    <p>
+      entryDelay: 300
+    </p>
+    <p>
+      maxWidth: 100px
+    </p>
+    <p>
+      position: top
+    </p>
+    <a>
+      onTooltipHidden clicker
+    </a>
+    <button
+      aria-disabled="false"
+      aria-label="Copyable input"
+      aria-labelledby="button-id text-id"
+      class="pf-v5-c-button pf-m-control"
+      data-ouia-component-id="OUIA-Generated-Button-control-1"
+      data-ouia-component-type="PF5/Button"
+      data-ouia-safe="true"
+      id="button-id"
+      type="button"
+    >
+      <svg
+        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"
+        />
+      </svg>
+    </button>
+  </div>
 </DocumentFragment>
 `;

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

@@ -1,32 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`expanded code content render 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-clipboard-copy__expandable-content class-1"
+    class="pf-v5-c-clipboard-copy__expandable-content"
     contenteditable="true"
-    id="id-1"
   >
-    <pre
-      dir="ltr"
-    >
-      {
-    "name": "@patternfly/react-core",
-    "version": "1.33.2"
-  }
-    </pre>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`expanded content render 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-clipboard-copy__expandable-content class-1"
-    contenteditable="true"
-    id="id-1"
-  >
-    This is my text
+    Expanded content
   </div>
 </DocumentFragment>
 `;

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

@@ -1,18 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ClipboardCopyToggle toggle button render 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <button
-    aria-controls="my-id my-content-id"
+    aria-controls="content-id"
     aria-disabled="false"
     aria-expanded="false"
-    aria-label="toggle content"
-    aria-labelledby="my-id my-text-id"
-    class="pf-v5-c-button pf-m-control myclassName"
+    aria-labelledby="main-id text-id"
+    class="pf-v5-c-button pf-m-control"
     data-ouia-component-id="OUIA-Generated-Button-control-1"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
-    id="my-id"
+    id="main-id"
     type="button"
   >
     <div

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerColorVariant, DrawerContext } from './Drawer';
-import { formatBreakpointMods } from '../../helpers/util';
+import { formatBreakpointMods, getLanguageDirection } from '../../helpers/util';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { FocusTrap } from '../../helpers/FocusTrap/FocusTrap';
 import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis';
@@ -111,7 +111,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const calcValueNow = () => {
     let splitterPos;
     let drawerSize;
-    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+    const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     if (isInline && (position === 'end' || position === 'right')) {
       if (isRTL) {
@@ -198,7 +198,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   };
 
   const handleControlMove = (e: MouseEvent | TouchEvent, controlPosition: number) => {
-    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+    const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     e.stopPropagation();
     if (!isResizing) {
@@ -264,7 +264,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const callbackMouseUp = React.useCallback(handleMouseup, []);
 
   const handleKeys = (e: React.KeyboardEvent) => {
-    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+    const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     const key = e.key;
     if (

package/src/components/Dropdown/Dropdown.tsx

@@ -19,6 +19,8 @@ export interface DropdownPopperProps {
   enableFlip?: boolean;
   /** The container to append the popper to. Defaults to 'inline'. */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 
 export interface DropdownToggleProps {

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -143,7 +143,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   componentDidUpdate(prevProps: ExpandableSectionProps) {
     if (
       this.props.variant === ExpandableSectionVariant.truncate &&
-      prevProps.truncateMaxLines !== this.props.truncateMaxLines
+      (prevProps.truncateMaxLines !== this.props.truncateMaxLines || prevProps.children !== this.props.children)
     ) {
       const expandableContent = this.expandableContentRef.current;
       setLineClamp(this.props.truncateMaxLines, expandableContent);

package/src/components/InputGroup/InputGroup.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 import { css } from '@patternfly/react-styles';
-import { FormSelect } from '../FormSelect';
-import { TextArea } from '../TextArea';
-import { TextInput } from '../TextInput';
 
 export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the input group. */
@@ -20,61 +17,12 @@ export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
   innerRef,
   ...props
 }: InputGroupProps) => {
-  const getIdItem = () => {
-    const getChildId = (_children: any) =>
-      React.Children.toArray(_children).find(
-        (_child: any) => !formCtrls.includes(_child?.type?.displayName) && _child?.props?.id
-      );
-    let childId = getChildId(children);
-    if (childId) {
-      return childId;
-    }
-    React.Children.toArray(children).find((child: any) => {
-      const _childId = getChildId(child.props.children);
-      if (_childId) {
-        childId = _childId;
-        return true;
-      }
-    });
-    return childId;
-  };
-  const formCtrls = [FormSelect, TextArea, TextInput].map((comp) => comp.displayName);
-  const idItem = getIdItem() as React.ReactElement<{ id: string }>;
   const ref = React.useRef(null);
   const inputGroupRef = innerRef || ref;
 
-  const childrenWithId = React.Children.map(children, (child: any) => {
-    if (child?.type.displayName === 'InputGroupItem') {
-      const newChildren = React.Children.map(child.props.children, (_child) => {
-        if (!_child.props) {
-          return _child;
-        }
-        if (_child.props['aria-describedby']) {
-          return _child;
-        }
-        if (!formCtrls.includes(_child.type.displayName)) {
-          return _child;
-        }
-        return React.cloneElement(_child, {
-          'aria-describedby': _child.props['aria-describedby'] === '' ? undefined : idItem?.props?.id
-        });
-      });
-      return React.cloneElement(child, {}, newChildren);
-    }
-
-    if (child?.props['aria-describedby']) {
-      return child;
-    }
-    if (!formCtrls.includes(child?.type.displayName)) {
-      return child;
-    }
-    return React.cloneElement(child, {
-      'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem?.props?.id
-    });
-  });
   return (
     <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>
-      {idItem ? childrenWithId : children}
+      {children}
     </div>
   );
 };

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

@@ -8,59 +8,22 @@ import { Button } from '../../Button';
 import { TextInput } from '../../TextInput';
 
 describe('InputGroup', () => {
-  test('add aria-describedby to form-control if one of the non form-controls has id', () => {
-    // In this test, TextInput is a form-control component and Button is not.
-    // If Button has an id props, this should be used in aria-describedby.
+  // Regression test for https://github.com/patternfly/patternfly-react/issues/9667
+  test('wont add aria-describedby automatically to form-control', () => {
     render(
       <InputGroup>
         <InputGroupItem>
-          <TextInput value="some data" aria-label="some text" />
+          <TextInput aria-label="User password" />
         </InputGroupItem>
         <InputGroupItem>
-          <Button variant="primary" id="button-id">
-            hello
+          <Button variant="control" id="show-password-toggler">
+            Show
           </Button>
         </InputGroupItem>
       </InputGroup>
     );
-    expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id');
-  });
 
-  test('wont add aria-describedby to form-control if describedby is empty string', () => {
-    // In this test, TextInput is a form-control component and Button is not.
-    // If Button has an id props, this should be used in aria-describedby, but this
-    // example has an empty aria-describedby to prevent that from happening.
-    render(
-      <InputGroup>
-        <InputGroupItem>
-          <TextInput value="some data" aria-describedby="" aria-label="some text" />
-        </InputGroupItem>
-        <InputGroupItem>
-          <Button id="button-id">
-            hello
-          </Button>
-        </InputGroupItem>
-      </InputGroup>
-    );
-    expect(screen.getByLabelText('some text')).not.toHaveAttribute('aria-describedby');
-  });
-
-  test('wont override aria-describedby in form-control if describedby has value', () => {
-    // In this test, TextInput is a form-control component and Button is not.
-    // If Button has an id props, this should be used in aria-describedby, but this
-    // example has a predefined aria-describedby to prevent that from happening
-    render(
-      <InputGroup>
-        <InputGroupItem>
-          <TextInput value="some data" aria-describedby="myself" aria-label="some text" />
-        </InputGroupItem>
-        <InputGroupItem>
-          <Button id="button-id">
-            hello
-          </Button>
-        </InputGroupItem>
-      </InputGroup>
-    );
-    expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'myself');
+    const formControl = screen.getByLabelText("User password");
+    expect(formControl).not.toHaveAttribute("aria-describedby");
   });
 });

package/src/components/Masthead/Masthead.tsx

@@ -9,8 +9,6 @@ export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<H
   children?: React.ReactNode;
   /** Additional classes added to the masthead */
   className?: string;
-  /** Background theme color of the masthead */
-  backgroundColor?: 'dark' | 'light' | 'light200';
   /** Display type at various breakpoints */
   display?: {
     default?: 'inline' | 'stack';
@@ -34,7 +32,6 @@ export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<H
 export const Masthead: React.FunctionComponent<MastheadProps> = ({
   children,
   className,
-  backgroundColor = 'dark',
   display = {
     md: 'inline'
   },
@@ -48,8 +45,6 @@ export const Masthead: React.FunctionComponent<MastheadProps> = ({
         styles.masthead,
         formatBreakpointMods(display, styles, 'display-', getBreakpoint(width)),
         formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
-        backgroundColor === 'light' && styles.modifiers.light,
-        backgroundColor === 'light200' && styles.modifiers.light_200,
         className
       )}
       {...props}

package/src/components/Masthead/examples/Masthead.md

@@ -140,50 +140,6 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 </Masthead>;
 ```
 
-### Light variant
-
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="light-masthead" backgroundColor="light">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
-```
-
-### Light 200 variant
-
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="light200-masthead" backgroundColor="light200">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
-```
-
 ### Inset
 
 ```ts

package/src/components/Menu/Menu.tsx

@@ -311,7 +311,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             noHorizontalArrowHandling={
               document.activeElement &&
               (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
-                document.activeElement.classList.contains(dropdownStyles.dropdownToggle))
+                document.activeElement.classList.contains(dropdownStyles.dropdownToggle) ||
+                document.activeElement.tagName === 'INPUT')
             }
             noEnterHandling
             noSpaceHandling

package/src/components/Menu/MenuContainer.tsx

@@ -14,6 +14,8 @@ export interface MenuPopperProps {
   maxWidth?: string | 'trigger';
   /** Enable to flip the popper when it reaches the boundary */
   enableFlip?: boolean;
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 export interface MenuContainerProps {
   /** Menu to be rendered */