@patternfly/react-core 4.265.2 → 4.266.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.265.2",
+  "version": "4.266.1",
   "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",
@@ -77,5 +77,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "16dc61cc8c2e8ee43522c388c638290d34bbb20b"
+  "gitHead": "e8e88bf93618d03c99fd94996f0e7db9de6400cd"
 }

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -65,6 +65,8 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
   /** Maximum width of the tooltip (default 150px). */
   maxWidth?: string;
   /** Delay in ms before the tooltip disappears. */
@@ -125,7 +127,8 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
     textAriaLabel: 'Copyable input',
     toggleAriaLabel: 'Show content',
     additionalActions: null,
-    ouiaSafe: true
+    ouiaSafe: true,
+    removeFindDomNode: false
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -177,6 +180,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       additionalActions,
       ouiaId,
       ouiaSafe,
+      removeFindDomNode,
       ...divProps
     } = this.props;
     const textIdPrefix = 'text-input-';
@@ -269,6 +273,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
                       this.setState({ copied: true });
                     }}
                     onTooltipHidden={() => this.setState({ copied: false })}
+                    removeFindDomNode={removeFindDomNode}
                   >
                     {this.state.copied ? clickTip : hoverTip}
                   </ClipboardCopyButton>

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -39,6 +39,8 @@ export interface ClipboardCopyButtonProps
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
   /** Aria-label for the copy button */
   'aria-label'?: string;
   /** Variant of the copy button */
@@ -59,6 +61,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   children,
   variant = 'control',
   onTooltipHidden = () => {},
+  removeFindDomNode = false,
   ...props
 }: ClipboardCopyButtonProps) => (
   <Tooltip
@@ -71,6 +74,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
     aria="none"
     content={<div>{children}</div>}
     onTooltipHidden={onTooltipHidden}
+    removeFindDomNode={removeFindDomNode}
   >
     <Button
       type="button"

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

@@ -1,62 +1,100 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
 import { Panel } from '../Panel';
 import { PanelMain } from '../PanelMain';
 import { PanelMainBody } from '../PanelMainBody';
-import { PanelHeader } from '../PanelHeader';
-import { PanelFooter } from '../PanelFooter';
-
-describe('Panel', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<Panel>Foo</Panel>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders content with raised styling', () => {
-    const { asFragment } = render(<Panel variant="raised">Foo</Panel>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders content with bordered styling', () => {
-    const { asFragment } = render(<Panel variant="bordered">Foo</Panel>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders content with scrollable styling', () => {
-    const { asFragment } = render(<Panel isScrollable>Foo</Panel>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('PanelMain', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<PanelMain>Foo</PanelMain>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders content with the set maximum height', () => {
-    const { asFragment } = render(<PanelMain maxHeight={'80px'}>Foo</PanelMain>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('PanelMainBody', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<PanelMainBody>Foo</PanelMainBody>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('PanelHeader', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<PanelHeader>Foo</PanelHeader>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('PanelFooter', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<PanelFooter>Foo</PanelFooter>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+import userEvent from '@testing-library/user-event';
+import { useEffect } from 'react';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panel">
+      <Panel />
+    </div>
+  );
+  expect(screen.getByTestId('panel').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the class pf-c-panel', () => {
+  render(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel');
+});
+
+test('Renders with only the class pf-c-panel by default', () => {
+  render(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<Panel className="test-class">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with class name pf-m-raised when variant is raised', () => {
+  render(<Panel variant="raised">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-raised');
+});
+
+test('Renders with class name pf-m-bordered when variant is bordered', () => {
+  render(<Panel variant="bordered">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-bordered');
+});
+
+test('Renders with class name pf-m-scrollable when isScrollable is true', () => {
+  render(<Panel isScrollable>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-scrollable');
+});
+
+test('Renders with ref', async () => {
+  const user = userEvent.setup();
+  const panelRef: React.RefObject<HTMLDivElement> = React.createRef();
+
+  const BasicPanel = () => {
+    const [lastClickWasInPanel, setLastClickWasInPanel] = React.useState(false);
+
+    const handleClick = event => {
+      if (panelRef.current && panelRef.current.contains(event.target)) {
+        setLastClickWasInPanel(true);
+      } else {
+        setLastClickWasInPanel(false);
+      }
+    };
+
+    useEffect(() => {
+      document.addEventListener('click', handleClick);
+    }, []);
+
+    return (
+      <div>
+        <Panel ref={panelRef}>
+          <PanelMain>
+            <PanelMainBody>Main content</PanelMainBody>
+          </PanelMain>
+        </Panel>
+        <p>Last click was in panel: {lastClickWasInPanel ? 'true' : 'false'}</p>
+      </div>
+    );
+  };
+
+  render(<BasicPanel />);
+
+  await user.click(document.body);
+  expect(screen.getByText('Last click was in panel: false')).toBeVisible;
+  await user.click(screen.getByText('Main content'));
+  expect(screen.getByText('Last click was in panel: true')).toBeVisible;
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<Panel aria-label="this is a simple panel">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Panel>Test</Panel>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Panel/__tests__/PanelFooter.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PanelFooter } from '../PanelFooter';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panelFooter">
+      <PanelFooter />
+    </div>
+  );
+  expect(screen.getByTestId('panelFooter').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<PanelFooter>Test</PanelFooter>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the class pf-c-panel__footer', () => {
+  render(<PanelFooter>Test</PanelFooter>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__footer');
+});
+
+test('Renders with only the class pf-c-panel__footer by default', () => {
+  render(<PanelFooter>Test</PanelFooter>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__footer', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<PanelFooter className="test-class">Test</PanelFooter>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<PanelFooter aria-label="this is a simple panel footer">Test</PanelFooter>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel footer');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<PanelFooter>Test</PanelFooter>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Panel/__tests__/PanelHeader.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PanelHeader } from '../PanelHeader';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panelHeader">
+      <PanelHeader />
+    </div>
+  );
+  expect(screen.getByTestId('panelHeader').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<PanelHeader>Test</PanelHeader>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the class pf-c-panel__header', () => {
+  render(<PanelHeader>Test</PanelHeader>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__header');
+});
+
+test('Renders with only the class pf-c-panel__header by default', () => {
+  render(<PanelHeader>Test</PanelHeader>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__header', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<PanelHeader className="test-class">Test</PanelHeader>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<PanelHeader aria-label="this is a simple panel header">Test</PanelHeader>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel header');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<PanelHeader>Test</PanelHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Panel/__tests__/PanelMain.test.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PanelMain } from '../PanelMain';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panelMain">
+      <PanelMain />
+    </div>
+  );
+  expect(screen.getByTestId('panelMain').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<PanelMain>Test</PanelMain>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the class pf-c-panel__main', () => {
+  render(<PanelMain>Test</PanelMain>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__main');
+});
+
+test('Renders with only the class pf-c-panel__main by default', () => {
+  render(<PanelMain>Test</PanelMain>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__main', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<PanelMain className="test-class">Test</PanelMain>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with custom max height name when maxHeight prop is passed', () => {
+  render(<PanelMain maxHeight="100px">Test</PanelMain>);
+  const styles = getComputedStyle(screen.getByText('Test'));
+  expect(styles.getPropertyValue('--pf-c-panel__main--MaxHeight')).toBe('100px');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<PanelMain aria-label="this is a simple panel main">Test</PanelMain>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel main');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<PanelMain>Test</PanelMain>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Panel/__tests__/PanelMainBody.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PanelMainBody } from '../PanelMainBody';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panelMainBody">
+      <PanelMainBody />
+    </div>
+  );
+  expect(screen.getByTestId('panelMainBody').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<PanelMainBody>Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the class pf-c-panel__main-body', () => {
+  render(<PanelMainBody>Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__main-body');
+});
+
+test('Renders with only the class pf-c-panel__main-body by default', () => {
+  render(<PanelMainBody>Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__main-body', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<PanelMainBody className="test-class">Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<PanelMainBody aria-label="this is a simple panel main body">Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel main body');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<PanelMainBody>Test</PanelMainBody>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -1,92 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Panel renders content 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-panel"
   >
-    Foo
+    Test
   </div>
 </DocumentFragment>
 `;
 
-exports[`Panel renders content with bordered styling 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel pf-m-bordered"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Panel renders content with raised styling 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel pf-m-raised"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Panel renders content with scrollable styling 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel pf-m-scrollable"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelFooter renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__footer"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelHeader renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__header"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelMain renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__main"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelMain renders content with the set maximum height 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__main"
-    style="--pf-c-panel__main--MaxHeight: 80px;"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelMainBody renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__main-body"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;

package/src/components/Panel/__tests__/__snapshots__/PanelFooter.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-panel__footer"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Panel/__tests__/__snapshots__/PanelHeader.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-panel__header"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Panel/__tests__/__snapshots__/PanelMain.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-panel__main"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Panel/__tests__/__snapshots__/PanelMainBody.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-panel__main-body"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Sidebar/SidebarPanel.tsx

@@ -3,6 +3,16 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Sidebar/sidebar';
 import { formatBreakpointMods } from '../../helpers/util';
 
+export enum SidebarPanelWidthType {
+  default = 'default',
+  width25 = 'width_25',
+  width33 = 'width_33',
+  width50 = 'width_50',
+  width66 = 'width_66',
+  width75 = 'width_75',
+  width100 = 'width_100'
+}
+
 export interface SidebarPanelProps extends Omit<React.HTMLProps<HTMLDivElement>, 'width'> {
   children: React.ReactNode;
   /** Indicates whether the panel is positioned statically or sticky to the top. Default is sticky on small screens when the orientation is stack, and static on medium and above screens when the orientation is split. */

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

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Sidebar } from '../Sidebar';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="sidebar">
+      <Sidebar />
+    </div>
+  );
+  expect(screen.getByTestId('sidebar').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Sidebar>Test</Sidebar>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with only class name pf-c-sidebar by default', () => {
+  render(<Sidebar>Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-c-sidebar', { exact: true });
+});
+
+test('Renders with class name pf-c-sidebar', () => {
+  render(<Sidebar>Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-c-sidebar');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<Sidebar className="custom-class">Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
+});
+
+test('Renders with class name pf-m-no-background when hasNoBackground prop is passed', () => {
+  render(<Sidebar hasNoBackground>Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-no-background');
+});
+
+test('Renders with class name pf-m-stack when "stack" is passed to orientation prop', () => {
+  render(<Sidebar orientation="stack">Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-stack');
+});
+
+test('Renders with class name pf-m-split when "split" is passed to orientation prop', () => {
+  render(<Sidebar orientation="split">Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-split');
+});
+
+test('Renders with class name pf-m-panel-right when isPanelRight prop is passed', () => {
+  render(<Sidebar isPanelRight>Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-panel-right');
+});
+
+test('Renders with class name pf-m-gutter when hasGutter prop is passed', () => {
+  render(<Sidebar hasGutter>Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-gutter');
+});
+
+test('Renders with class name pf-m-sidebar__main by default for child component', () => {
+  render(<Sidebar>Test</Sidebar>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__main');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<Sidebar aria-label="Test label">Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Sidebar>Test</Sidebar>);
+  expect(asFragment()).toMatchSnapshot();
+});