@patternfly/react-core 6.3.0 → 6.3.1-prerelease.1

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.3.0-prerelease.34","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.3.1-prerelease.0","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.3.0-prerelease.34","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.3.1-prerelease.0","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.3.0-prerelease.34","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.3.1-prerelease.0","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.0",
+  "version": "6.3.1-prerelease.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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "0652301cae338bfef026f04bada414d0a5c2ee79"
+  "gitHead": "bc7a24267c0b8aff6f4ce5fd085aa6f01d5878bb"
 }

package/src/components/Card/Card.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 import { useOUIAProps, OUIAProps } from '../../helpers';
@@ -42,6 +42,8 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
 }
 
 interface CardContextProps {
@@ -64,7 +66,7 @@ export const CardContext = createContext<Partial<CardContextProps>>({
   isDisabled: false
 });
 
-export const Card: React.FunctionComponent<CardProps> = ({
+const CardBase: React.FunctionComponent<CardProps> = ({
   children,
   id = '',
   className,
@@ -82,7 +84,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
   variant = 'default',
   ouiaId,
   ouiaSafe = true,
-
+  innerRef,
   ...props
 }: CardProps) => {
   const Component = component as any;
@@ -127,6 +129,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
       }}
     >
       <Component
+        ref={innerRef}
         id={id}
         className={css(
           styles.card,
@@ -148,4 +151,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
     </CardContext.Provider>
   );
 };
+
+export const Card = forwardRef((props: CardProps, ref: React.Ref<any>) => <CardBase {...props} innerRef={ref} />);
+
 Card.displayName = 'Card';

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

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import { Card } from '../Card';
+import { createRef } from 'react';
 
 describe('Card', () => {
   test('renders with PatternFly Core styles', () => {
@@ -91,4 +92,14 @@ describe('Card', () => {
     const card = screen.getByText('secondary card');
     expect(card).toHaveClass('pf-m-secondary');
   });
+
+  test('ref is added to the root element', () => {
+    const ref = createRef<HTMLTextAreaElement>();
+    render(
+      <Card ref={ref} tabIndex={-1}>
+        card
+      </Card>
+    );
+    expect(ref.current).toBe(screen.getByText('card'));
+  });
 });

package/src/components/Page/PageToggleButton.tsx

@@ -14,6 +14,8 @@ export interface PageToggleButtonProps extends ButtonProps {
   'aria-label'?: string;
   /** Flag indicating whether the hamburger button variation with animations should be used. */
   isHamburgerButton?: boolean;
+  /** IsHamburgerButton must be true for hamburgerVariant to be have an effect. Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button. */
+  hamburgerVariant?: 'expand' | 'collapse';
 }
 
 export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> = ({
@@ -23,6 +25,7 @@ export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> =
   id = 'nav-toggle',
   'aria-label': ariaLabel = 'Side navigation toggle',
   isHamburgerButton,
+  hamburgerVariant,
   ...props
 }: PageToggleButtonProps) => (
   <PageContextConsumer>
@@ -42,6 +45,10 @@ export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> =
           aria-expanded={sidebarOpen ? 'true' : 'false'}
           variant={ButtonVariant.plain}
           isHamburger={isHamburgerButton}
+          hamburgerVariant={hamburgerVariant}
+          {...(isHamburgerButton && {
+            isExpanded: sidebarOpen
+          })}
           {...props}
         >
           {!isHamburgerButton && children}

package/src/components/Page/__tests__/PageToggleButton.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react';
+import { PageToggleButton } from '../PageToggleButton';
+import { PageContextProvider } from '../PageContext';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <PageToggleButton />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<PageToggleButton>Test</PageToggleButton>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Throws console error when isHamburger is true and isSidebarOpen is not passed', () => {
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<PageToggleButton isHamburger aria-label="Test" />);
+
+  expect(consoleError).toHaveBeenCalledWith(
+    'Button: when the isHamburger property is passed in, you must also pass in a boolean value to the isExpanded property. It is expected that a hamburger button controls the expansion of other content.'
+  );
+});
+
+test('Does not throw console error when isHamburger is true and isSidebarOpen is false', () => {
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<PageToggleButton isSidebarOpen={false} isHamburger aria-label="Test" />);
+
+  expect(consoleError).not.toHaveBeenCalledWith(
+    'Button: when the isHamburger property is passed in, you must also pass in a boolean value to the isExpanded property. It is expected that a hamburger button controls the expansion of other content..'
+  );
+});
+
+test('Does not throw console error when isHamburger is true and isSidebarOpen is true', () => {
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<PageToggleButton isSidebarOpen isHamburger aria-label="Test" />);
+
+  expect(consoleError).not.toHaveBeenCalledWith(
+    'Button: when the isHamburger property is passed in, you must also pass in a boolean value to the isExpanded property. It is expected that a hamburger button controls the expansion of other content..'
+  );
+});
+
+// assisted by AI/Cursor
+test('Does not throw console error when isHamburger is true, isSidebarOpen is not passed, but managedIsSidebarOpen is true', () => {
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  const mockPageContext = {
+    isManagedSidebar: true,
+    onSidebarToggle: () => null,
+    isSidebarOpen: true, // managedIsSidebarOpen is true
+    width: 1024,
+    height: 768,
+    getBreakpoint: () => 'lg' as const,
+    getVerticalBreakpoint: () => 'lg' as const
+  };
+
+  render(
+    <PageContextProvider value={mockPageContext}>
+      <PageToggleButton isHamburger aria-label="Test" />
+    </PageContextProvider>
+  );
+
+  expect(consoleError).not.toHaveBeenCalledWith(
+    'Button: when the isHamburger property is passed in, you must also pass in a boolean value to the isExpanded property. It is expected that a hamburger button controls the expansion of other content..'
+  );
+});

package/src/components/TextArea/TextArea.tsx

@@ -62,13 +62,15 @@ class TextAreaBase extends Component<TextAreaProps> {
     const parent = field.parentElement;
     parent.style.setProperty('height', 'inherit');
     const computed = window.getComputedStyle(field);
+    const parentComputed = window.getComputedStyle(parent);
     // Calculate the height
     const height =
       parseInt(computed.getPropertyValue('border-top-width')) +
-      parseInt(computed.getPropertyValue('padding-top')) +
       field.scrollHeight +
-      parseInt(computed.getPropertyValue('padding-bottom')) +
-      parseInt(computed.getPropertyValue('border-bottom-width'));
+      parseInt(computed.getPropertyValue('border-bottom-width')) +
+      parseInt(parentComputed.getPropertyValue('padding-top')) +
+      parseInt(parentComputed.getPropertyValue('padding-bottom'));
+
     parent.style.setProperty('height', `${height}px`);
   };
 

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

@@ -4,7 +4,7 @@ exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <span
     class="pf-v6-c-form-control pf-m-textarea pf-m-resize-both pf-m-disabled custom class"
-    style="height: 6px;"
+    style="height: inherit;"
   >
     <textarea
       aria-invalid="false"