@patternfly/react-core 6.5.0-prerelease.13 → 6.5.0-prerelease.15

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.5.0-prerelease.12","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.5.0-prerelease.14","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.5.0-prerelease.12","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.5.0-prerelease.14","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.5.0-prerelease.12","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.5.0-prerelease.14","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.13",
+  "version": "6.5.0-prerelease.15",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "eed37ddb3b4437aceb531bed2616130e6ebcc70b"
+  "gitHead": "754bcb0d0ff58e0b52c02e34ba5c654a703db45e"
 }

package/src/components/Compass/Compass.tsx

@@ -52,7 +52,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   backgroundSrcLight,
   backgroundSrcDark,
   ...props
-}) => {
+}: CompassProps) => {
   const hasDrawer = drawerContent !== undefined;
 
   const backgroundImageStyles: { [key: string]: string } = {};

package/src/components/Compass/CompassContent.tsx

@@ -19,7 +19,7 @@ export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
   drawerProps,
   drawerContent,
   ...props
-}) => {
+}: CompassContentProps) => {
   const hasDrawer = drawerContent !== undefined;
 
   const compassContent = (

package/src/components/Compass/CompassHeader.tsx

@@ -10,7 +10,11 @@ export interface CompassHeaderProps {
   profile?: React.ReactNode;
 }
 
-export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({ logo, nav, profile }) => (
+export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({
+  logo,
+  nav,
+  profile
+}: CompassHeaderProps) => (
   <>
     <div className={css(`${styles.compass}__logo`)}>{logo}</div>
     <div className={css(styles.compassNav)}>{nav}</div>

package/src/components/Compass/CompassHero.tsx

@@ -9,7 +9,11 @@ export interface CompassHeroProps extends Omit<React.HTMLProps<HTMLDivElement>,
   className?: string;
 }
 
-export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({ className, children, ...props }) => (
+export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({
+  className,
+  children,
+  ...props
+}: CompassHeroProps) => (
   <div className={css(`${styles.compass}__hero`, className)} {...props}>
     {children}
   </div>

package/src/components/Compass/CompassMainHeader.tsx

@@ -31,7 +31,7 @@ export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps>
   children,
   compassPanelProps,
   ...props
-}) => {
+}: CompassMainHeaderProps) => {
   const _content =
     title !== undefined || toolbar !== undefined ? (
       <CompassPanel {...compassPanelProps}>

package/src/components/Compass/CompassMainHeaderContent.tsx

@@ -16,7 +16,7 @@ export const CompassMainHeaderContent: React.FunctionComponent<CompassMainHeader
   children,
   className,
   ...props
-}) => (
+}: CompassMainHeaderContentProps) => (
   <div className={css(styles.compassMainHeaderContent, className)} {...props}>
     {children}
   </div>

package/src/components/Compass/CompassMainHeaderTitle.tsx

@@ -16,7 +16,7 @@ export const CompassMainHeaderTitle: React.FunctionComponent<CompassMainHeaderTi
   children,
   className,
   ...props
-}) => (
+}: CompassMainHeaderTitleProps) => (
   <div className={css(`${styles.compass}__main-header-title`, className)} {...props}>
     {children}
   </div>

package/src/components/Compass/CompassMainHeaderToolbar.tsx

@@ -16,7 +16,7 @@ export const CompassMainHeaderToolbar: React.FunctionComponent<CompassMainHeader
   children,
   className,
   ...props
-}) => (
+}: CompassMainHeaderToolbarProps) => (
   <div className={css(`${styles.compass}__main-header-toolbar`, className)} {...props}>
     {children}
   </div>

package/src/components/Compass/CompassMessageBar.tsx

@@ -12,7 +12,7 @@ export const CompassMessageBar: React.FunctionComponent<CompassMessageBarProps>
   children,
   className,
   ...props
-}) => (
+}: CompassMessageBarProps) => (
   <div className={css(styles.compassMessageBar, className)} {...props}>
     {children}
   </div>

package/src/components/Compass/CompassNavContent.tsx

@@ -0,0 +1,20 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+export interface CompassNavContentProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the nav content wrapper. */
+  children: React.ReactNode;
+  /** Additional classes added to the nav content. */
+  className?: string;
+}
+
+export const CompassNavContent: React.FunctionComponent<CompassNavContentProps> = ({
+  children,
+  className,
+  ...props
+}: CompassNavContentProps) => (
+  <div className={css(styles.compassNavContent, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassNavContent.displayName = 'CompassNavContent';

package/src/components/Compass/CompassNavHome.tsx

@@ -0,0 +1,77 @@
+import { useRef } from 'react';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
+
+const CompassHomeIcon = () => (
+  <svg
+    width="1em"
+    height="1em"
+    className="pf-v6-svg"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M8.33268 13.334H11.666"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export interface CompassNavHomeProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+  /** Content to display in the tooltip. Defaults to "Home". */
+  tooltipContent?: React.ReactNode;
+  /** Click handler for the home button. */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** Additional classes added to the nav home wrapper. */
+  className?: string;
+  /** Accessible label for the nav home. */
+  'aria-label'?: string;
+}
+
+export const CompassNavHome: React.FunctionComponent<CompassNavHomeProps> = ({
+  'aria-label': ariaLabel = 'Home',
+  tooltipContent = 'Home',
+  className,
+  onClick,
+  ...props
+}: CompassNavHomeProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <div className={css(styles.compassNav + '-home', className)} {...props}>
+      <Tooltip content={tooltipContent} position="left" aria="none" aria-live="off" triggerRef={buttonRef}>
+        <Button
+          isCircle
+          variant="plain"
+          icon={<CompassHomeIcon />}
+          aria-label={ariaLabel}
+          onClick={onClick}
+          ref={buttonRef}
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+CompassNavHome.displayName = 'CompassNavHome';

package/src/components/Compass/CompassNavMain.tsx

@@ -0,0 +1,21 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+export interface CompassNavMainProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the nav main section (typically tabs). */
+  children: React.ReactNode;
+  /** Additional classes added to the nav main section. */
+  className?: string;
+}
+
+export const CompassNavMain: React.FunctionComponent<CompassNavMainProps> = ({
+  children,
+  className,
+  ...props
+}: CompassNavMainProps) => (
+  <div className={css(styles.compassNavMain, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassNavMain.displayName = 'CompassNavMain';

package/src/components/Compass/CompassNavSearch.tsx

@@ -0,0 +1,70 @@
+import { useRef } from 'react';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
+
+const CompassSearchIcon = () => (
+  <svg
+    width="1em"
+    height="1em"
+    className="pf-v6-svg"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M14.166 14.166L17.4993 17.4993"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export interface CompassNavSearchProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+  /** Content to display in the tooltip. Defaults to "Search". */
+  tooltipContent?: React.ReactNode;
+  /** Click handler for the search button. */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** Additional classes added to the nav search wrapper. */
+  className?: string;
+  /** Accessible label for the nav search. */
+  'aria-label'?: string;
+}
+
+export const CompassNavSearch: React.FunctionComponent<CompassNavSearchProps> = ({
+  'aria-label': ariaLabel = 'Search',
+  tooltipContent = 'Search',
+  className,
+  onClick,
+  ...props
+}: CompassNavSearchProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <div className={css(styles.compassNav + '-search', className)} {...props}>
+      <Tooltip content={tooltipContent} aria="none" aria-live="off" triggerRef={buttonRef}>
+        <Button
+          isCircle
+          variant="plain"
+          icon={<CompassSearchIcon />}
+          aria-label={ariaLabel}
+          onClick={onClick}
+          ref={buttonRef}
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+CompassNavSearch.displayName = 'CompassNavSearch';

package/src/components/Compass/CompassPanel.tsx

@@ -30,7 +30,7 @@ export const CompassPanel: React.FunctionComponent<CompassPanelProps> = ({
   isFullHeight,
   isScrollable,
   ...props
-}) => (
+}: CompassPanelProps) => (
   <div
     className={css(
       styles.compassPanel,

package/src/components/Compass/__tests__/CompassNavContent.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import { CompassNavContent } from '../CompassNavContent';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassNavContent>Test content</CompassNavContent>);
+
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassNavContent className="custom-class">Test</CompassNavContent>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassNavContent} class`, () => {
+  render(<CompassNavContent>Test</CompassNavContent>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.compassNavContent, { exact: true });
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassNavContent aria-label="Test label">Test</CompassNavContent>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassNavContent>
+      <div>Nav content wrapper</div>
+    </CompassNavContent>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassNavHome.test.tsx

@@ -0,0 +1,89 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CompassNavHome } from '../CompassNavHome';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with default aria-label', () => {
+  render(<CompassNavHome />);
+
+  expect(screen.getByRole('button', { name: 'Home' })).toBeVisible();
+});
+
+test('Renders with custom aria-label when provided', () => {
+  render(<CompassNavHome aria-label="Custom home" />);
+
+  expect(screen.getByRole('button', { name: 'Custom home' })).toBeVisible();
+});
+
+test('Renders with default tooltip content', async () => {
+  const user = userEvent.setup();
+
+  render(<CompassNavHome />);
+
+  const button = screen.getByRole('button');
+
+  user.hover(button);
+
+  await screen.findByRole('tooltip');
+
+  expect(screen.getByRole('tooltip')).toHaveTextContent('Home');
+});
+
+test('Renders with custom tooltip content when provided', async () => {
+  const user = userEvent.setup();
+
+  render(<CompassNavHome tooltipContent="Custom tooltip" />);
+
+  const button = screen.getByRole('button');
+
+  user.hover(button);
+
+  await screen.findByRole('tooltip');
+  expect(screen.getByRole('tooltip')).toHaveTextContent('Custom tooltip');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  const { container } = render(<CompassNavHome className="custom-class" />);
+
+  expect(container.firstChild).toHaveClass('custom-class');
+});
+
+test(`Renders with default class`, () => {
+  const { container } = render(<CompassNavHome />);
+
+  expect(container.firstChild).toHaveClass(styles.compassNav + '-home', { exact: true });
+});
+
+test('Calls onClick handler when button is clicked', async () => {
+  const user = userEvent.setup();
+  const onClick = jest.fn();
+
+  render(<CompassNavHome onClick={onClick} />);
+
+  await user.click(screen.getByRole('button', { name: 'Home' }));
+
+  expect(onClick).toHaveBeenCalledTimes(1);
+});
+
+test('Renders button with plain variant and circle shape', () => {
+  render(<CompassNavHome />);
+
+  const button = screen.getByRole('button', { name: 'Home' });
+
+  expect(button).toHaveClass('pf-m-plain');
+  expect(button).toHaveClass('pf-m-circle');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassNavHome />);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with custom props', () => {
+  const { asFragment } = render(
+    <CompassNavHome aria-label="Custom home" tooltipContent="Go home" className="custom-class" />
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassNavMain.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import { CompassNavMain } from '../CompassNavMain';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassNavMain>Test content</CompassNavMain>);
+
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassNavMain className="custom-class">Test</CompassNavMain>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassNavMain} class`, () => {
+  render(<CompassNavMain>Test</CompassNavMain>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.compassNavMain, { exact: true });
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassNavMain aria-label="Test label">Test</CompassNavMain>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassNavMain>
+      <div>Main tabs content</div>
+    </CompassNavMain>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassNavSearch.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CompassNavSearch } from '../CompassNavSearch';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with default aria-label', () => {
+  render(<CompassNavSearch />);
+  expect(screen.getByRole('button', { name: 'Search' })).toBeVisible();
+});
+
+test('Renders with custom aria-label when provided', () => {
+  render(<CompassNavSearch aria-label="Custom search" />);
+  expect(screen.getByRole('button', { name: 'Custom search' })).toBeVisible();
+});
+
+test('Renders with default tooltip content', async () => {
+  const user = userEvent.setup();
+
+  render(<CompassNavSearch />);
+
+  const button = screen.getByRole('button');
+
+  user.hover(button);
+
+  await screen.findByRole('tooltip');
+
+  expect(screen.getByRole('tooltip')).toHaveTextContent('Search');
+});
+
+test('Renders with custom tooltip content when provided', async () => {
+  const user = userEvent.setup();
+
+  render(<CompassNavSearch tooltipContent="Custom tooltip" />);
+
+  const button = screen.getByRole('button');
+
+  user.hover(button);
+
+  await screen.findByRole('tooltip');
+
+  expect(screen.getByRole('tooltip')).toHaveTextContent('Custom tooltip');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  const { container } = render(<CompassNavSearch className="custom-class" />);
+
+  expect(container.firstChild).toHaveClass('custom-class');
+});
+
+test(`Renders with default class`, () => {
+  const { container } = render(<CompassNavSearch />);
+
+  expect(container.firstChild).toHaveClass(styles.compassNav + '-search', { exact: true });
+});
+
+test('Calls onClick handler when button is clicked', async () => {
+  const user = userEvent.setup();
+  const onClick = jest.fn();
+
+  render(<CompassNavSearch onClick={onClick} />);
+
+  await user.click(screen.getByRole('button', { name: 'Search' }));
+
+  expect(onClick).toHaveBeenCalledTimes(1);
+});
+
+test('Renders button with plain variant and circle shape', () => {
+  render(<CompassNavSearch />);
+
+  const button = screen.getByRole('button', { name: 'Search' });
+
+  expect(button).toHaveClass('pf-m-plain');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassNavSearch />);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with custom props', () => {
+  const { asFragment } = render(
+    <CompassNavSearch aria-label="Custom search" tooltipContent="Search content" className="custom-class" />
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/__snapshots__/CompassNavContent.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__nav-content"
+  >
+    <div>
+      Nav content wrapper
+    </div>
+  </div>
+</DocumentFragment>
+`;