@patternfly/react-core 5.0.0-alpha.16 → 5.0.0-alpha.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.16",
+  "version": "5.0.0-alpha.17",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "ff72b0a89309c1b530671eebde61310f0adca298"
+  "gitHead": "74884ce289eed041ecd7f28a0db5c73f5c616d34"
 }

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -17,7 +17,7 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
   /** Flag indicating that the drawer panel should be resizable. */
   isResizable?: boolean;
   /** Callback for resize end. */
-  onResize?: (width: number, id: string) => void;
+  onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
   /** The minimum size of a drawer, in either pixels or percentage. */
   minSize?: string;
   /** The starting size of a resizable drawer, in either pixels or percentage. */
@@ -60,9 +60,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const panel = React.useRef<HTMLDivElement>();
   const splitterRef = React.useRef<HTMLDivElement>();
   const [separatorValue, setSeparatorValue] = React.useState(0);
-  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, 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;
@@ -169,13 +168,13 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     setSeparatorValue(calcValueNow());
   };
 
-  const handleMouseup = () => {
+  const handleMouseup = (e: MouseEvent) => {
     if (!isResizing) {
       return;
     }
     drawerRef.current.classList.remove(css(styles.modifiers.resizing));
     isResizing = false;
-    onResize && onResize(currWidth, id);
+    onResize && onResize(e, currWidth, id);
     setInitialVals = true;
     document.removeEventListener('mousemove', callbackMouseMove);
     document.removeEventListener('mouseup', callbackMouseUp);
@@ -187,7 +186,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
       return;
     }
     isResizing = false;
-    onResize && onResize(currWidth, id);
+    onResize && onResize(e, currWidth, id);
     document.removeEventListener('touchmove', callbackTouchMove);
     document.removeEventListener('touchend', callbackTouchEnd);
   };
@@ -215,7 +214,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     e.preventDefault();
 
     if (key === 'Escape' || key === 'Enter') {
-      onResize && onResize(currWidth, id);
+      onResize && onResize(e, currWidth, id);
     }
     const panelRect = panel.current.getBoundingClientRect();
     newSize = position === 'bottom' ? panelRect.height : panelRect.width;
@@ -249,7 +248,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   }
   return (
     <GenerateId prefix="pf-drawer-panel-">
-      {panelId => (
+      {(panelId) => (
         <div
           id={id || panelId}
           className={css(
@@ -261,7 +260,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
             className
           )}
           ref={panel}
-          onTransitionEnd={ev => {
+          onTransitionEnd={(ev) => {
             if (!hidden && ev.nativeEvent.propertyName === 'transform') {
               onExpand();
             }

package/src/components/Drawer/examples/DrawerResizableOnRight.tsx

@@ -26,7 +26,7 @@ export const DrawerResizableOnRight: React.FunctionComponent = () => {
     setIsExpanded(false);
   };
 
-  const onResize = (newWidth: number, id: string) => {
+  const onResize = (_event: MouseEvent | TouchEvent | React.KeyboardEvent, newWidth: number, id: string) => {
     // eslint-disable-next-line no-console
     console.log(`${id} has new width of: ${newWidth}`);
   };

package/src/components/Menu/MenuContent.tsx

@@ -6,7 +6,7 @@ import { MenuContext } from './MenuContext';
 export interface MenuContentProps extends React.HTMLProps<HTMLElement> {
   /** Items within group */
   children?: React.ReactNode;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Height of the menu content */
   menuHeight?: string;

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

@@ -1225,12 +1225,20 @@ exports[`Page Check page to verify skip to content points to main content region
     data-testid="page-test-id"
     id="PageId"
   >
-    <a
-      class="pf-c-button pf-m-primary pf-c-skip-to-content"
-      href="#main-content-page-layout-test-nav"
+    <div
+      class="pf-c-skip-to-content"
     >
-      Skip to Content
-    </a>
+      <a
+        aria-disabled="false"
+        class="pf-c-button pf-m-primary"
+        data-ouia-component-id="OUIA-Generated-Button-primary-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        href="#main-content-page-layout-test-nav"
+      >
+        Skip to Content
+      </a>
+    </div>
     <header
       class="pf-c-page__header"
     >

package/src/components/SkipToContent/SkipToContent.tsx

@@ -1,45 +1,28 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/SkipToContent/skip-to-content';
-import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
-import { PickOptional } from '../../helpers/typeUtils';
+import { Button, ButtonVariant } from '../Button';
 
-export interface SkipToContentProps extends React.HTMLProps<HTMLAnchorElement> {
+export interface SkipToContentProps extends React.HTMLProps<HTMLDivElement> {
   /** The skip to content link. */
   href: string;
   /** Content to display within the skip to content component, typically a string. */
   children?: React.ReactNode;
   /** Additional styles to apply to the skip to content component. */
   className?: string;
-  /** Forces the skip to content to display. This is primarily for demonstration purposes and would not normally be used. */
-  show?: boolean;
 }
 
-export class SkipToContent extends React.Component<SkipToContentProps> {
-  static displayName = 'SkipToContent';
-  static defaultProps: PickOptional<SkipToContentProps> = {
-    show: false
-  };
-  componentRef = React.createRef<HTMLAnchorElement>();
+export const SkipToContent: React.FunctionComponent<SkipToContentProps> = ({
+  children = null,
+  className = '',
+  href,
+  ...props
+}: SkipToContentProps) => (
+  <div className={css(styles.skipToContent, className)} {...props}>
+    <Button variant={ButtonVariant.primary} component="a" href={href}>
+      {children}
+    </Button>
+  </div>
+);
 
-  componentDidMount() {
-    if (this.props.show && this.componentRef.current) {
-      this.componentRef.current.focus();
-    }
-  }
-
-  render() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, className, href, show, type, ...rest } = this.props;
-    return (
-      <a
-        {...rest}
-        className={css(buttonStyles.button, buttonStyles.modifiers.primary, styles.skipToContent, className)}
-        ref={this.componentRef}
-        href={href}
-      >
-        {children}
-      </a>
-    );
-  }
-}
+SkipToContent.displayName = 'SkipToContent';

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

@@ -10,8 +10,3 @@ test('Verify Skip To Content', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Verify Skip To Content if forced to display', () => {
-  const { asFragment } = render(<SkipToContent href="#main-content" {...props} show />);
-  // Add a useful assertion here.
-  expect(asFragment()).toMatchSnapshot();
-});

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

@@ -2,18 +2,17 @@
 
 exports[`Verify Skip To Content 1`] = `
 <DocumentFragment>
-  <a
-    class="pf-c-button pf-m-primary pf-c-skip-to-content"
-    href="#main-content"
-  />
-</DocumentFragment>
-`;
-
-exports[`Verify Skip To Content if forced to display 1`] = `
-<DocumentFragment>
-  <a
-    class="pf-c-button pf-m-primary pf-c-skip-to-content"
-    href="#main-content"
-  />
+  <div
+    class="pf-c-skip-to-content"
+  >
+    <a
+      aria-disabled="false"
+      class="pf-c-button pf-m-primary"
+      data-ouia-component-id="OUIA-Generated-Button-primary-1"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      href="#main-content"
+    />
+  </div>
 </DocumentFragment>
 `;