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

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/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/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>
 `;