@patternfly/react-core 4.202.10 → 4.202.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.10",
+  "version": "4.202.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.53.10",
-    "@patternfly/react-styles": "^4.52.10",
-    "@patternfly/react-tokens": "^4.54.10",
+    "@patternfly/react-icons": "^4.53.11",
+    "@patternfly/react-styles": "^4.52.11",
+    "@patternfly/react-tokens": "^4.54.11",
     "focus-trap": "6.2.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": "a1d1e3253b278b497301e5c3e967afa54d5cfa7b"
+  "gitHead": "37502dd4919001bb0202e637c4feb61b6ddb81c2"
 }

package/src/components/Drawer/Drawer.tsx

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

package/src/components/Drawer/DrawerContent.tsx

@@ -22,19 +22,23 @@ export const DrawerContent: React.SFC<DrawerContentProps> = ({
   panelContent,
   colorVariant = DrawerColorVariant.default,
   ...props
-}: DrawerContentProps) => (
-  <DrawerMain>
-    <div
-      className={css(
-        styles.drawerContent,
-        colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-    {panelContent}
-  </DrawerMain>
-);
+}: DrawerContentProps) => {
+  const drawerContentRef = React.useRef<HTMLDivElement>();
+  return (
+    <DrawerMain>
+      <div
+        className={css(
+          styles.drawerContent,
+          colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
+          className
+        )}
+        ref={drawerContentRef}
+        {...props}
+      >
+        {children}
+      </div>
+      {React.cloneElement(panelContent as React.ReactElement, { drawerContentRef })}
+    </DrawerMain>
+  );
+};
 DrawerContent.displayName = 'DrawerContent';

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerColorVariant, DrawerContext } from './Drawer';
 import { formatBreakpointMods } from '../../helpers/util';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the drawer. */
@@ -27,8 +28,6 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
   increment?: number;
   /** Aria label for the resizable drawer splitter. */
   resizeAriaLabel?: string;
-  /** Aria described by label for the resizable drawer splitter. */
-  resizeAriaDescribedBy?: string;
   /** Width for drawer panel at various breakpoints. Overriden by resizable drawer minSize and defaultSize. */
   widths?: {
     default?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
@@ -38,6 +37,8 @@ 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;
@@ -54,13 +55,15 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   maxSize,
   increment = 5,
   resizeAriaLabel = 'Resize',
-  resizeAriaDescribedBy = 'Press space to begin resizing, and use the arrow keys to grow or shrink the panel. Press enter or escape to finish resizing.',
   widths,
   colorVariant = DrawerColorVariant.default,
+  drawerContentRef,
   ...props
 }: DrawerPanelContentProps) => {
   const panel = React.useRef<HTMLDivElement>();
-  const { position, isExpanded, isStatic, onExpand, drawerRef } = React.useContext(DrawerContext);
+  const splitterRef = React.useRef<HTMLDivElement>();
+  const [separatorValue, setSeparatorValue] = React.useState(0);
+  const { position, isExpanded, isStatic, onExpand, drawerRef, isInline } = React.useContext(DrawerContext);
   const hidden = isStatic ? false : !isExpanded;
   const [isExpandedInternal, setIsExpandedInternal] = React.useState(!hidden);
   let currWidth: number = 0;
@@ -76,6 +79,37 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     }
   }, [isStatic, isExpanded]);
 
+  const calcValueNow = () => {
+    let splitterPos;
+    let drawerSize;
+
+    if (isInline && position === 'right') {
+      splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+      drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
+    } else if (isInline && position === 'left') {
+      splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left;
+      drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
+    } else if (position === 'right') {
+      splitterPos =
+        drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+      drawerSize =
+        drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
+    } else if (position === 'left') {
+      splitterPos =
+        splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
+      drawerSize =
+        drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
+    } else if (position === 'bottom') {
+      splitterPos =
+        drawerContentRef.current.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
+      drawerSize =
+        drawerContentRef.current.getBoundingClientRect().bottom - drawerContentRef.current.getBoundingClientRect().top;
+    }
+
+    const newSplitterPos = (splitterPos / drawerSize) * 100;
+    return Math.round((newSplitterPos + Number.EPSILON) * 100) / 100;
+  };
+
   const handleTouchStart = (e: React.TouchEvent) => {
     e.stopPropagation();
     document.addEventListener('touchmove', callbackTouchMove, { passive: false });
@@ -133,6 +167,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     }
     panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
     currWidth = newSize;
+    setSeparatorValue(calcValueNow());
   };
 
   const handleMouseup = () => {
@@ -166,7 +201,6 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const handleKeys = (e: React.KeyboardEvent) => {
     const key = e.key;
     if (
-      key !== ' ' &&
       key !== 'Escape' &&
       key !== 'Enter' &&
       key !== 'ArrowUp' &&
@@ -181,35 +215,28 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     }
     e.preventDefault();
 
-    if (key === ' ' || key === 'Escape' || key === 'Enter') {
-      if (key === ' ') {
-        isResizing = true;
-      } else {
-        isResizing = false;
-        onResize && onResize(currWidth, id);
-      }
-      const panelRect = panel.current.getBoundingClientRect();
-      newSize = position === 'bottom' ? panelRect.height : panelRect.width;
+    if (key === 'Escape' || key === 'Enter') {
+      onResize && onResize(currWidth, id);
     }
-
-    if (isResizing) {
-      let delta = 0;
-      if (key === 'ArrowRight') {
-        delta = position === 'left' ? increment : -increment;
-      } else if (key === 'ArrowLeft') {
-        delta = position === 'left' ? -increment : increment;
-      } else if (key === 'ArrowUp') {
-        delta = increment;
-      } else if (key === 'ArrowDown') {
-        delta = -increment;
-      }
-      newSize = newSize + delta;
-      if (position === 'bottom') {
-        panel.current.style.overflowAnchor = 'none';
-      }
-      panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
-      currWidth = newSize;
+    const panelRect = panel.current.getBoundingClientRect();
+    newSize = position === 'bottom' ? panelRect.height : panelRect.width;
+    let delta = 0;
+    if (key === 'ArrowRight') {
+      delta = position === 'left' ? increment : -increment;
+    } else if (key === 'ArrowLeft') {
+      delta = position === 'left' ? -increment : increment;
+    } else if (key === 'ArrowUp') {
+      delta = increment;
+    } else if (key === 'ArrowDown') {
+      delta = -increment;
+    }
+    newSize = newSize + delta;
+    if (position === 'bottom') {
+      panel.current.style.overflowAnchor = 'none';
     }
+    panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
+    currWidth = newSize;
+    setSeparatorValue(calcValueNow());
   };
   const boundaryCssVars: any = {};
   if (defaultSize) {
@@ -222,53 +249,61 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     boundaryCssVars['--pf-c-drawer__panel--md--FlexBasis--max'] = maxSize;
   }
   return (
-    <div
-      id={id}
-      className={css(
-        styles.drawerPanel,
-        isResizable && styles.modifiers.resizable,
-        hasNoBorder && styles.modifiers.noBorder,
-        formatBreakpointMods(widths, styles),
-        colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
-        className
-      )}
-      ref={panel}
-      onTransitionEnd={ev => {
-        if (!hidden && ev.nativeEvent.propertyName === 'transform') {
-          onExpand();
-        }
-        setIsExpandedInternal(!hidden);
-      }}
-      hidden={hidden}
-      {...((defaultSize || minSize || maxSize) && {
-        style: boundaryCssVars as React.CSSProperties
-      })}
-      {...props}
-    >
-      {isExpandedInternal && (
-        <React.Fragment>
-          {isResizable && (
+    <GenerateId prefix="pf-drawer-panel-">
+      {panelId => (
+        <div
+          id={id || panelId}
+          className={css(
+            styles.drawerPanel,
+            isResizable && styles.modifiers.resizable,
+            hasNoBorder && styles.modifiers.noBorder,
+            formatBreakpointMods(widths, styles),
+            colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
+            className
+          )}
+          ref={panel}
+          onTransitionEnd={ev => {
+            if (!hidden && ev.nativeEvent.propertyName === 'transform') {
+              onExpand();
+            }
+            setIsExpandedInternal(!hidden);
+          }}
+          hidden={hidden}
+          {...((defaultSize || minSize || maxSize) && {
+            style: boundaryCssVars as React.CSSProperties
+          })}
+          {...props}
+        >
+          {isExpandedInternal && (
             <React.Fragment>
-              <div
-                className={css(styles.drawerSplitter, position !== 'bottom' && styles.modifiers.vertical)}
-                role="separator"
-                tabIndex={0}
-                aria-orientation={position === 'bottom' ? 'horizontal' : 'vertical'}
-                aria-label={resizeAriaLabel}
-                aria-describedby={resizeAriaDescribedBy}
-                onMouseDown={handleMousedown}
-                onKeyDown={handleKeys}
-                onTouchStart={handleTouchStart}
-              >
-                <div className={css(styles.drawerSplitterHandle)} aria-hidden></div>
-              </div>
-              <div className={css(styles.drawerPanelMain)}>{children}</div>
+              {isResizable && (
+                <React.Fragment>
+                  <div
+                    className={css(styles.drawerSplitter, position !== 'bottom' && styles.modifiers.vertical)}
+                    role="separator"
+                    tabIndex={0}
+                    aria-orientation={position === 'bottom' ? 'horizontal' : 'vertical'}
+                    aria-label={resizeAriaLabel}
+                    aria-valuenow={separatorValue}
+                    aria-valuemin={0}
+                    aria-valuemax={100}
+                    aria-controls={id || panelId}
+                    onMouseDown={handleMousedown}
+                    onKeyDown={handleKeys}
+                    onTouchStart={handleTouchStart}
+                    ref={splitterRef}
+                  >
+                    <div className={css(styles.drawerSplitterHandle)} aria-hidden></div>
+                  </div>
+                  <div className={css(styles.drawerPanelMain)}>{children}</div>
+                </React.Fragment>
+              )}
+              {!isResizable && children}
             </React.Fragment>
           )}
-          {!isResizable && children}
-        </React.Fragment>
+        </div>
       )}
-    </div>
+    </GenerateId>
   );
 };
 DrawerPanelContent.displayName = 'DrawerPanelContent';

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

@@ -8,6 +8,6 @@ import { DrawerContent } from '../../DrawerContent';
 import {} from '../..';
 
 it('DrawerContent should match snapshot (auto-generated)', () => {
-  const view = render(<DrawerContent className={"''"} children={<div>ReactNode</div>} />);
-  expect(view.container).toMatchSnapshot();
+  const view = render(<DrawerContent className={"''"} children={<div>ReactNode</div>} panelContent={<div>test</div>} />);
+  expect(view).toMatchSnapshot();
 });

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

@@ -1,17 +1,96 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DrawerContent should match snapshot (auto-generated) 1`] = `
-<div>
-  <div
-    class="pf-c-drawer__main"
-  >
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="pf-c-drawer__main"
+      >
+        <div
+          class="pf-c-drawer__content ''"
+        >
+          <div>
+            ReactNode
+          </div>
+        </div>
+        <div
+          drawercontentref="[object Object]"
+        >
+          test
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
     <div
-      class="pf-c-drawer__content ''"
+      class="pf-c-drawer__main"
     >
-      <div>
-        ReactNode
+      <div
+        class="pf-c-drawer__content ''"
+      >
+        <div>
+          ReactNode
+        </div>
+      </div>
+      <div
+        drawercontentref="[object Object]"
+      >
+        test
       </div>
     </div>
-  </div>
-</div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;

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

@@ -5,6 +5,7 @@ exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
   <div
     class="pf-c-drawer__panel ''"
     hidden=""
+    id="pf-drawer-panel-0"
   />
 </div>
 `;

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

@@ -19,6 +19,7 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
       <div
         class="pf-c-drawer__panel"
+        id="pf-drawer-panel-5"
       >
         <div
           class="pf-c-drawer__body"
@@ -95,9 +96,12 @@ exports[`Drawer has resizable callback and id 1`] = `
         id="test-id"
       >
         <div
-          aria-describedby="Press space to begin resizing, and use the arrow keys to grow or shrink the panel. Press enter or escape to finish resizing."
+          aria-controls="test-id"
           aria-label="Resize"
           aria-orientation="vertical"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
           class="pf-c-drawer__splitter pf-m-vertical"
           role="separator"
           tabindex="0"
@@ -183,12 +187,16 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
       <div
         class="pf-c-drawer__panel pf-m-resizable pf-m-light-200"
+        id="pf-drawer-panel-6"
         style="--pf-c-drawer__panel--md--FlexBasis: 300px; --pf-c-drawer__panel--md--FlexBasis--min: 200px; --pf-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-describedby="Press space to begin resizing, and use the arrow keys to grow or shrink the panel. Press enter or escape to finish resizing."
+          aria-controls="pf-drawer-panel-6"
           aria-label="Resize"
           aria-orientation="vertical"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
           class="pf-c-drawer__splitter pf-m-vertical"
           role="separator"
           tabindex="0"
@@ -275,6 +283,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       <div
         class="pf-c-drawer__panel"
         hidden=""
+        id="pf-drawer-panel-1"
       />
     </div>
   </div>
@@ -301,6 +310,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       <div
         class="pf-c-drawer__panel"
         hidden=""
+        id="pf-drawer-panel-3"
       />
     </div>
   </div>
@@ -326,6 +336,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
       <div
         class="pf-c-drawer__panel"
+        id="pf-drawer-panel-0"
       >
         <div
           class="pf-c-drawer__body"
@@ -399,6 +410,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
       <div
         class="pf-c-drawer__panel"
+        id="pf-drawer-panel-4"
       >
         <div
           class="pf-c-drawer__body"
@@ -472,6 +484,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
       <div
         class="pf-c-drawer__panel"
+        id="pf-drawer-panel-2"
       >
         <div
           class="pf-c-drawer__body"