@patternfly/react-core 4.221.10 → 4.221.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.221.10",
+  "version": "4.221.13",
   "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.13",
+    "@patternfly/react-styles": "^4.71.13",
+    "@patternfly/react-tokens": "^4.73.13",
     "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": "c2e4c2796b6768e5f4c816c271593d3b45de219d"
 }

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>

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -11,217 +11,37 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 
 ### Basic
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-class SimpleExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionBasic.tsx"
 ```
 
 ### Uncontrolled
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-<ExpandableSection toggleText="Show more">
-  This content is visible only when the component is expanded.
-</ExpandableSection>;
+```ts file="ExpandableSectionUncontrolled.tsx"
 ```
 
 ### Uncontrolled with dynamic toggle text
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-<ExpandableSection toggleTextExpanded="Show less" toggleTextCollapsed="Show more">
-  This content is visible only when the component is expanded.
-</ExpandableSection>;
+```ts file="ExpandableSectionUncontrolledDynamicToggleText.tsx"
 ```
 
 ### Detached
 
-```js
-import React from 'react';
-import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
-
-class DetachedExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    const contentId = 'detached-toggle-content';
-    return (
-      <Stack hasGutter>
-        <StackItem>
-          <ExpandableSection isExpanded={isExpanded} isDetached contentId={contentId}>
-            This content is visible only when the component is expanded.
-          </ExpandableSection>
-        </StackItem>
-        <StackItem>
-          <ExpandableSectionToggle
-            isExpanded={isExpanded}
-            onToggle={this.onToggle}
-            contentId={contentId}
-            direction="up"
-          >
-            {isExpanded ? 'Show less' : 'Show more'}
-          </ExpandableSectionToggle>
-        </StackItem>
-      </Stack>
-    );
-  }
-}
+```ts file="ExpandableSectionDetached.tsx"
 ```
 
 ### Disclosure variation
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-class DisclosureExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-        displaySize="large"
-        isWidthLimited
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionDisclosure.tsx"
 ```
 
 ### Indented
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-class SimpleExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-        isIndented={true}
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionIndented.tsx"
 ```
 
 ### With custom toggle content
 
 By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.
 
-```js
-import React from "react";
-import { ExpandableSection, Badge } from "@patternfly/react-core";
-import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon";
-
-class CustomExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = (isExpanded) => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleContent={
-          <div>
-            <span>You can also use icons </span>
-            <CheckCircleIcon />
-            <span> or badges </span>
-            <Badge isRead={true}>4</Badge>
-            <span> !</span>
-          </div>
-        }
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionCustomToggle.tsx"
 ```

package/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionBasic: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection toggleText={isExpanded ? 'Show less' : 'Show more'} onToggle={onToggle} isExpanded={isExpanded}>
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ExpandableSection, Badge } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      toggleContent={
+        <div>
+          <span>You can also use icons </span>
+          <CheckCircleIcon />
+          <span> or badges </span>
+          <Badge isRead={true}>4</Badge>
+          <span> !</span>
+        </div>
+      }
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+    >
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
+
+export const ExpandableSectionDetached: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const contentId = 'detached-toggle-content';
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <ExpandableSection isExpanded={isExpanded} isDetached contentId={contentId}>
+          This content is visible only when the component is expanded.
+        </ExpandableSection>
+      </StackItem>
+      <StackItem>
+        <ExpandableSectionToggle isExpanded={isExpanded} onToggle={onToggle} contentId={contentId} direction="up">
+          {isExpanded ? 'Show less' : 'Show more'}
+        </ExpandableSectionToggle>
+      </StackItem>
+    </Stack>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionDisclosure: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+      displaySize="large"
+      isWidthLimited
+    >
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionIndented: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+      isIndented
+    >
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionUncontrolled.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionUncontrolled: React.FunctionComponent = () => (
+  <ExpandableSection toggleText="Show more">
+    This content is visible only when the component is expanded.
+  </ExpandableSection>
+);

package/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleText.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionUncontrolledDynamicToggle: React.FunctionComponent = () => (
+  <ExpandableSection toggleTextExpanded="Show less" toggleTextCollapsed="Show more">
+    This content is visible only when the component is expanded.
+  </ExpandableSection>
+);