@patternfly/react-core 4.221.10 → 4.221.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.221.10",
+  "version": "4.221.11",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.72.10",
-    "@patternfly/react-styles": "^4.71.10",
-    "@patternfly/react-tokens": "^4.73.10",
+    "@patternfly/react-icons": "^4.72.11",
+    "@patternfly/react-styles": "^4.71.11",
+    "@patternfly/react-tokens": "^4.73.11",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "4c074ff2399b6dd544baff5536a61b73cbcb1fb0"
+  "gitHead": "fd4459f338c4b07d600383d7204a240abd58d710"
 }

package/src/components/Drawer/Drawer.tsx

@@ -30,6 +30,7 @@ export interface DrawerContextProps {
   onExpand?: () => void;
   position?: string;
   drawerRef?: React.RefObject<HTMLDivElement>;
+  drawerContentRef?: React.RefObject<HTMLDivElement>;
   isInline: boolean;
 }
 
@@ -39,6 +40,7 @@ export const DrawerContext = React.createContext<Partial<DrawerContextProps>>({
   onExpand: () => {},
   position: 'right',
   drawerRef: null,
+  drawerContentRef: null,
   isInline: false
 });
 
@@ -53,8 +55,10 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   ...props
 }: DrawerProps) => {
   const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerContentRef = React.useRef<HTMLDivElement>();
+
   return (
-    <DrawerContext.Provider value={{ isExpanded, isStatic, onExpand, position, drawerRef, isInline }}>
+    <DrawerContext.Provider value={{ isExpanded, isStatic, onExpand, position, drawerRef, drawerContentRef, isInline }}>
       <div
         className={css(
           styles.drawer,

package/src/components/Drawer/DrawerContent.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 { DrawerMain } from './DrawerMain';
-import { DrawerColorVariant } from './Drawer';
+import { DrawerColorVariant, DrawerContext } from './Drawer';
 
 export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
@@ -23,7 +23,8 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
   colorVariant = DrawerColorVariant.default,
   ...props
 }: DrawerContentProps) => {
-  const drawerContentRef = React.useRef<HTMLDivElement>();
+  const { drawerContentRef } = React.useContext(DrawerContext);
+
   return (
     <DrawerMain>
       <div
@@ -37,7 +38,7 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
       >
         {children}
       </div>
-      {panelContent && React.cloneElement(panelContent as React.ReactElement, { drawerContentRef })}
+      {panelContent}
     </DrawerMain>
   );
 };

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -37,8 +37,6 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
   };
   /** Color variant of the background of the drawer panel */
   colorVariant?: DrawerColorVariant | 'light-200' | 'default';
-  /** @hide Internal ref to drawer content */
-  drawerContentRef?: React.RefObject<HTMLDivElement>;
 }
 let isResizing: boolean = null;
 let newSize: number = 0;
@@ -57,13 +55,14 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   resizeAriaLabel = 'Resize',
   widths,
   colorVariant = DrawerColorVariant.default,
-  drawerContentRef,
   ...props
 }: DrawerPanelContentProps) => {
   const panel = React.useRef<HTMLDivElement>();
   const splitterRef = React.useRef<HTMLDivElement>();
   const [separatorValue, setSeparatorValue] = React.useState(0);
-  const { position, isExpanded, isStatic, onExpand, drawerRef, isInline } = React.useContext(DrawerContext);
+  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline } = React.useContext(
+    DrawerContext
+  );
   const hidden = isStatic ? false : !isExpanded;
   const [isExpandedInternal, setIsExpandedInternal] = React.useState(!hidden);
   let currWidth: number = 0;

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

@@ -10,7 +10,8 @@ import {
   DrawerPanelContent
 } from '../';
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 Object.values([
   { isExpanded: true, isInline: false, isStatic: false },
@@ -124,3 +125,39 @@ test(`Drawer has resizable callback and id`, () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Resizeable DrawerPanelContent can be wrapped in a context without causing an error', () => {
+  const TestContext = React.createContext({});
+
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  const panelContent = (
+    <TestContext.Provider value={{}}>
+      <DrawerPanelContent
+        isResizable
+      >
+        <DrawerHead>
+          <span>
+            drawer-panel
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    </TestContext.Provider>
+  );
+
+  render(
+    <Drawer isExpanded={true} position="left">
+      <DrawerContent panelContent={panelContent}>
+        <DrawerContentBody>Drawer content text</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  userEvent.tab();
+  userEvent.keyboard('{arrowleft}');
+
+  expect(consoleError).not.toHaveBeenCalled();
+})

package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerContent.test.tsx.snap

@@ -12,9 +12,7 @@ exports[`DrawerContent should match snapshot (auto-generated) 1`] = `
         ReactNode
       </div>
     </div>
-    <div
-      drawercontentref="[object Object]"
-    >
+    <div>
       test
     </div>
   </div>