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

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/Dropdown/DropdownWithContext.tsx

@@ -92,6 +92,8 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
       component = 'div';
       renderedContent = React.Children.toArray(children);
     }
+
+    const popperRef = React.createRef<HTMLDivElement>();
     const openedOnEnter = this.openedOnEnter;
     const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
     return (
@@ -122,6 +124,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
                 isOpen && styles.modifiers.expanded,
                 className
               )}
+              ref={popperRef}
             >
               {isOpen && menuContainer}
             </div>
@@ -140,7 +143,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
               ref={this.baseComponentRef}
               {...getOUIAProps(ouiaComponentType, ouiaId, ouiaSafe)}
             >
-              {React.Children.map(toggle, oneToggle =>
+              {React.Children.map(toggle, (oneToggle) =>
                 React.cloneElement(oneToggle, {
                   parentRef: this.baseComponentRef,
                   getMenuRef: this.getMenuComponentRef,
@@ -169,7 +172,9 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
           ) : (
             <Popper
               trigger={mainContainer}
+              triggerRef={this.baseComponentRef}
               popper={popperContainer}
+              popperRef={popperRef}
               direction={direction}
               position={position}
               appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}

package/src/components/DualListSelector/DualListSelectorControl.tsx

@@ -52,7 +52,7 @@ export const DualListSelectorControlBase: React.FunctionComponent<DualListSelect
       >
         {children}
       </Button>
-      {tooltipContent && <Tooltip content={tooltipContent} position="left" reference={ref} {...tooltipProps} />}
+      {tooltipContent && <Tooltip content={tooltipContent} position="left" triggerRef={ref} {...tooltipProps} />}
     </div>
   );
 };

package/src/components/InputGroup/InputGroup.tsx

@@ -11,16 +11,16 @@ export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the input group. */
   children: React.ReactNode;
   /** @hide A reference object to attach to the input box */
-  innerRef?: React.RefObject<any>;
+  innerRef?: React.Ref<any>;
 }
 
-export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
+export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
   className = '',
   children,
   innerRef,
   ...props
 }: InputGroupProps) => {
-  const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
+  const formCtrls = [FormSelect, TextArea, TextInput].map((comp) => comp.displayName);
   const idItem = React.Children.toArray(children).find(
     (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id
   ) as React.ReactElement<{ id: string }>;
@@ -42,4 +42,8 @@ export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
     </div>
   );
 };
+
+export const InputGroup = React.forwardRef((props: InputGroupProps, ref: React.Ref<HTMLDivElement>) => (
+  <InputGroupBase innerRef={ref} {...props} />
+));
 InputGroup.displayName = 'InputGroup';

package/src/components/Label/Label.tsx

@@ -254,7 +254,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   if (render) {
     labelComponentChild = (
       <React.Fragment>
-        {isTooltipVisible && <Tooltip reference={componentRef} content={children} position={tooltipPosition} />}
+        {isTooltipVisible && <Tooltip triggerRef={componentRef} content={children} position={tooltipPosition} />}
         {render({
           className: styles.labelContent,
           content,

package/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx

@@ -114,7 +114,16 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
         categoryName="Label group 1"
         numLabels={5}
         isEditable
-        addLabelControl={<Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />}
+        addLabelControl={
+          <Popper
+            trigger={toggle}
+            triggerRef={toggleRef}
+            popper={menu}
+            popperRef={menuRef}
+            isVisible={isOpen}
+            popperMatchesTriggerWidth={false}
+          />
+        }
       >
         {labels.map((label, index) => (
           <Label

package/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx

@@ -284,7 +284,9 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
             <div ref={colorContainerRef}>
               <Popper
                 trigger={colorToggle}
+                triggerRef={colorToggleRef}
                 popper={colorMenu}
+                popperRef={colorMenuRef}
                 appendTo={colorContainerRef.current as HTMLElement}
                 isVisible={isColorOpen}
                 popperMatchesTriggerWidth={false}
@@ -295,7 +297,9 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
             <div ref={iconContainerRef}>
               <Popper
                 trigger={iconToggle}
+                triggerRef={iconToggleRef}
                 popper={iconMenu}
+                popperRef={iconMenuRef}
                 appendTo={iconContainerRef.current as HTMLElement}
                 isVisible={isIconOpen}
                 popperMatchesTriggerWidth={false}

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/Nav/NavItem.tsx

@@ -145,7 +145,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       if (flyoutVisible) {
         const flyoutItems = Array.from(
           (popperRef.current as HTMLElement).getElementsByTagName('UL')[0].children
-        ).filter(el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
+        ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
         (flyoutItems[0].firstChild as HTMLElement).focus();
       } else {
         flyoutTarget.focus();
@@ -221,12 +221,13 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
 
   const flyoutPopper = (
     <Popper
-      reference={ref}
+      triggerRef={ref}
       popper={
         <div ref={popperRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
           {flyout}
         </div>
       }
+      popperRef={popperRef}
       placement="right-start"
       isVisible={flyoutVisible}
       onDocumentKeyDown={handleFlyout}
@@ -244,7 +245,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         {...ouiaProps}
       >
         <NavContext.Consumer>
-          {context =>
+          {(context) =>
             React.isValidElement(children)
               ? renderClonedChild(context, children as React.ReactElement)
               : renderDefaultLink(context)

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

@@ -1075,18 +1075,14 @@ exports[`Nav Nav List with flyout 1`] = `
       </svg>
     </button>
     <div
-      style="display: contents;"
+      class=""
+      data-popper-escaped="true"
+      data-popper-placement="right-start"
+      data-popper-reference-hidden="true"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; width: 0px; transform: translate(0px, 0px);"
     >
-      <div
-        class=""
-        data-popper-escaped="true"
-        data-popper-placement="right-start"
-        data-popper-reference-hidden="true"
-        style="position: absolute; left: 0px; top: 0px; z-index: 9999; width: 0px; transform: translate(0px, 0px);"
-      >
-        <div>
-          Flyout test
-        </div>
+      <div>
+        Flyout test
       </div>
     </div>
   </nav>

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/Pagination/PaginationOptionsMenu.tsx

@@ -79,11 +79,11 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   const onToggle = () => {
-    setIsOpen(prevState => !prevState);
+    setIsOpen((prevState) => !prevState);
   };
 
   const onSelect = () => {
-    setIsOpen(prevState => !prevState);
+    setIsOpen((prevState) => !prevState);
     toggleRef.current?.focus();
   };
 
@@ -156,7 +156,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
         key={value}
         data-action={`per-page-${value}`}
         isSelected={perPage === value}
-        onClick={event => handleNewPerPage(event, value)}
+        onClick={(event) => handleNewPerPage(event, value)}
       >
         {title}
         {` ${perPageSuffix}`}
@@ -200,7 +200,9 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
     <div ref={containerRef}>
       <Popper
         trigger={toggle}
+        triggerRef={toggleRef}
         popper={menu}
+        popperRef={menuRef}
         isVisible={isOpen}
         direction={dropDirection}
         appendTo={containerRef.current || undefined}

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -3,51 +3,47 @@
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div>
-    <div
-      style="display: contents;"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-c-menu-toggle pf-m-plain pf-m-text"
+      id="''-toggle"
+      type="button"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-c-menu-toggle pf-m-plain pf-m-text"
-        id="''-toggle"
-        type="button"
+      <span
+        class="pf-c-menu-toggle__text"
+      >
+        <b>
+          0 - 0
+        </b>
+         of 
+        <b>
+          0
+        </b>
+         'items'
+      </span>
+      <span
+        class="pf-c-menu-toggle__controls"
       >
         <span
-          class="pf-c-menu-toggle__text"
-        >
-          <b>
-            0 - 0
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           'items'
-        </span>
-        <span
-          class="pf-c-menu-toggle__controls"
+          class="pf-c-menu-toggle__toggle-icon"
         >
-          <span
-            class="pf-c-menu-toggle__toggle-icon"
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 320 512"
+            width="1em"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
-            >
-              <path
-                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-              />
-            </svg>
-          </span>
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
         </span>
-      </button>
-    </div>
+      </span>
+    </button>
   </div>
 </DocumentFragment>
 `;