@patternfly/react-core 4.236.5 → 4.236.8

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

@@ -6,6 +6,21 @@ import userEvent from '@testing-library/user-event';
 import { TimePicker, TimePickerProps } from '../TimePicker';
 
 describe('TimePicker', () => {
+  test('Renders in strict mode', () => {
+    const validateTime = (_time: string) => {
+      return true;
+    };
+
+    const consoleError = jest.spyOn(console, 'error');
+    const { asFragment } = render(
+      <React.StrictMode>
+        <TimePicker removeFindDomNode value={'00:00'} validateTime={validateTime} aria-label="time picker" />
+      </React.StrictMode>
+    );
+    expect(consoleError).not.toHaveBeenCalled();
+    expect(screen.getByLabelText('time picker')).not.toHaveClass('pf-m-error');
+  });
+
   describe('test timepicker onChange method with valid values', () => {
     const testOnChange = async ({
       inputProps,
@@ -20,7 +35,7 @@ describe('TimePicker', () => {
       render(<TimePicker onChange={onChange} {...inputProps} aria-label="time picker" />);
 
       await user.type(screen.getByLabelText('time picker'), String(inputProps.value));
-      expect(onChange).toHaveBeenCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true)
+      expect(onChange).toHaveBeenCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true);
     };
 
     test('should return the correct value using the AM/PM pattern - midnight', async () => {

package/src/components/Tooltip/Tooltip.tsx

@@ -138,6 +138,8 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
   isAppLauncher?: boolean;
   /** @deprecated - no longer used */
   tippyProps?: Partial<TippyProps>;
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
 }
 
 // id for associating trigger with the content aria-describedby or aria-labelledby
@@ -168,6 +170,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   boundary,
   isAppLauncher,
   tippyProps,
+  removeFindDomNode = false,
   ...rest
 }: TooltipProps) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -331,6 +334,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       enableFlip={enableFlip}
       zIndex={zIndex}
       flipBehavior={flipBehavior}
+      removeFindDomNode={removeFindDomNode}
     />
   );
 };

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

@@ -17,3 +17,24 @@ test('tooltip renders', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('tooltip renders in strict mode', () => {
+  const consoleError = jest.spyOn(console, 'error');
+  const { asFragment } = render(
+    <React.StrictMode>
+      <Tooltip
+        removeFindDomNode
+        position="top"
+        content={
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+          </div>
+        }
+      >
+        <div>Toggle tooltip</div>
+      </Tooltip>
+    </React.StrictMode>
+  );
+  expect(consoleError).not.toHaveBeenCalled();
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -7,3 +7,13 @@ exports[`tooltip renders 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`tooltip renders in strict mode 1`] = `
+<DocumentFragment>
+  <div>
+    <div>
+      Toggle tooltip
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/helpers/FocusTrap/FocusTrap.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createFocusTrap, Options as FocusTrapOptions, FocusTrap as IFocusTrap } from 'focus-trap';
 
-interface FocusTrapProps extends React.HTMLProps<HTMLDivElement> {
+interface FocusTrapProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
   children: React.ReactNode;
   className?: string;
   active?: boolean;
@@ -9,13 +9,15 @@ interface FocusTrapProps extends React.HTMLProps<HTMLDivElement> {
   focusTrapOptions?: FocusTrapOptions;
   /** Prevent from scrolling to the previously focused element on deactivation */
   preventScrollOnDeactivate?: boolean;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
-export class FocusTrap extends React.Component<FocusTrapProps> {
+class FocusTrapBase extends React.Component<FocusTrapProps> {
   static displayName = 'FocusTrap';
   previouslyFocusedElement: HTMLElement;
   focusTrap: IFocusTrap;
-  divRef = React.createRef<HTMLDivElement>();
+  divRef = (this.props.innerRef as React.RefObject<HTMLDivElement>) || React.createRef<HTMLDivElement>();
 
   static defaultProps = {
     active: true,
@@ -76,8 +78,18 @@ export class FocusTrap extends React.Component<FocusTrapProps> {
   }
 
   render() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, className, focusTrapOptions, active, paused, preventScrollOnDeactivate, ...rest } = this.props;
+    const {
+      children,
+      className,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      focusTrapOptions,
+      active,
+      paused,
+      preventScrollOnDeactivate,
+      innerRef,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...rest
+    } = this.props;
     return (
       <div ref={this.divRef} className={className} {...rest}>
         {children}
@@ -85,3 +97,7 @@ export class FocusTrap extends React.Component<FocusTrapProps> {
     );
   }
 }
+
+export const FocusTrap = React.forwardRef((props: FocusTrapProps, ref: React.Ref<any>) => (
+  <FocusTrapBase innerRef={ref} {...props} />
+));

package/src/helpers/Popper/Popper.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { FindRefWrapper } from './FindRefWrapper';
 import { usePopper } from './thirdparty/react-popper/usePopper';
 import { Placement, BasePlacement, Modifier } from './thirdparty/popper-core';
 import { css } from '@patternfly/react-styles';
+import { FindRefWrapper } from './FindRefWrapper';
 import '@patternfly/react-styles/css/components/Popper/Popper.css';
 
 const hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
@@ -38,6 +38,7 @@ export interface PopperProps {
   /**
    * The reference element to which the Popover is relatively placed to.
    * Use either trigger or reference, not both.
+   * Passing this property or the removeFindDomNode property, will bypass the use of findDOMNode for the trigger in react strict mode.
    */
   reference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** The popper (menu/tooltip/popover) element */
@@ -122,6 +123,10 @@ export interface PopperProps {
         | 'right-start'
         | 'right-end'
       )[];
+  /** @beta Bypasses the use of findDOMNode for both the popper and trigger in react strict mode. Without this flag, the trigger and popper will require passed references via the reference property (trigger) and popperRef property (popper) for strict mode. */
+  removeFindDomNode?: boolean;
+  /** @beta Reference to the popper (menu/tooltip/popover) element. Passing this property or the removeFindDomNode property, will bypass the use of findDOMNode for the popper in react strict mode. The popper property is still required. */
+  popperRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
 }
 
 export const Popper: React.FunctionComponent<PopperProps> = ({
@@ -149,11 +154,13 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   onDocumentKeyDown,
   enableFlip = true,
   flipBehavior = 'flip',
-  reference
+  reference,
+  removeFindDomNode = false,
+  popperRef
 }) => {
   const [triggerElement, setTriggerElement] = React.useState(null);
   const [refElement, setRefElement] = React.useState<HTMLElement>(null);
-  const [popperElement, setPopperElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState<HTMLElement>(null);
   const [ready, setReady] = React.useState(false);
   const refOrTrigger = refElement || triggerElement;
   const onDocumentClickCallback = React.useCallback(
@@ -173,6 +180,16 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       }
     }
   }, [reference]);
+  React.useEffect(() => {
+    // When the popperRef is defined or the popper visiblity changes, ensure the popper element is up to date
+    if (popperRef) {
+      if ((popperRef as React.RefObject<any>).current) {
+        setPopperElement((popperRef as React.RefObject<any>).current);
+      } else if (typeof popperRef === 'function') {
+        setPopperElement(popperRef());
+      }
+    }
+  }, [isVisible, popperRef]);
   const addEventListener = (listener: any, element: Document | HTMLElement, event: string) => {
     if (listener && element) {
       element.addEventListener(event, listener);
@@ -305,7 +322,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     return positionModifiers.top;
   };
 
-  const menuWithPopper = React.cloneElement(popper, {
+  const options = {
     className: css(popper.props && popper.props.className, positionModifiers && modifierFromPopperPosition()),
     style: {
       ...((popper.props && popper.props.style) || {}),
@@ -313,7 +330,9 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       zIndex
     },
     ...attributes.popper
-  });
+  };
+
+  const menuWithPopper = React.cloneElement(popper, options);
 
   const getTarget: () => HTMLElement = () => {
     if (typeof appendTo === 'function') {
@@ -322,17 +341,40 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     return appendTo;
   };
 
+  /**
+   * To enable strict mode, the popper must either have its reference defined via the popperRef property,
+   * or the removeFindDomNode flag must be present. Even if the reference is passed in, unlike the trigger,
+   * the popper property must still be passed.
+   * The trigger must similarly have either its reference defined via the reference property, or the
+   * removeFindDomNode flag must be present. The trigger property is not required when the reference is passed.
+   *
+   * Strict mode may be enabled by passing both reference properties to Popper, or by passing the
+   * removeFindDomNode flag with either reference property, or by solely passing the removeFindDomNode
+   * flag.
+   */
+  let popperPortal;
+  if (removeFindDomNode) {
+    // If removeFindDomNode is passed, use the removeFindDomNode method of wrapping divs
+    popperPortal = <div ref={node => setPopperElement(node?.firstElementChild as HTMLElement)}>{menuWithPopper}</div>;
+  } else if (popperRef) {
+    // If removeFindDomNode is not passed and popperRef is passed, use the popperRef method
+    popperPortal = menuWithPopper;
+  } else {
+    // If neither removeFindDomNode and popperRef exist, use the old method of FindRefWrapper
+    popperPortal = (
+      <FindRefWrapper onFoundRef={(foundRef: any) => setPopperElement(foundRef)}>{menuWithPopper}</FindRefWrapper>
+    );
+  }
+
   return (
     <>
-      {!reference && trigger && (
+      {!reference && trigger && React.isValidElement(trigger) && !removeFindDomNode && (
         <FindRefWrapper onFoundRef={(foundRef: any) => setTriggerElement(foundRef)}>{trigger}</FindRefWrapper>
       )}
-      {ready &&
-        isVisible &&
-        ReactDOM.createPortal(
-          <FindRefWrapper onFoundRef={(foundRef: any) => setPopperElement(foundRef)}>{menuWithPopper}</FindRefWrapper>,
-          getTarget()
-        )}
+      {!reference && trigger && React.isValidElement(trigger) && removeFindDomNode && (
+        <div ref={node => setTriggerElement(node?.firstElementChild as HTMLElement)}>{trigger}</div>
+      )}
+      {ready && isVisible && ReactDOM.createPortal(popperPortal, getTarget())}
     </>
   );
 };

package/src/helpers/resizeObserver.tsx

@@ -56,11 +56,22 @@ import { canUseDOM } from './util';
  *   );
  * }
  *
+ * Example 3 - With debounced method passed in:
+ *
+ * public componentDidMount() {
+ *   this.observer = getResizeObserver(this.inputRef.current, debounce(this.handleResize, 250), false);
+ * }
+ *
  * @param {Element} containerRefElement The container reference to observe
  * @param {Function} handleResize The function to call for resize events
+ * @param {boolean} useRequestAnimationFrame Whether to pass the handleResize function as a callback to requestAnimationFrame. Pass in false when the function passed in is debounced. Defaults to true.
  * @return {Function} The function used to unobserve resize events
  */
-export const getResizeObserver = (containerRefElement: Element, handleResize: () => void) => {
+export const getResizeObserver = (
+  containerRefElement: Element,
+  handleResize: () => void,
+  useRequestAnimationFrame: boolean = true
+) => {
   let unobserve: any;
 
   if (canUseDOM) {
@@ -69,11 +80,18 @@ export const getResizeObserver = (containerRefElement: Element, handleResize: ()
     if (containerRefElement && ResizeObserver) {
       const resizeObserver = new ResizeObserver((entries: any) => {
         // Wrap resize function in requestAnimationFrame to avoid "ResizeObserver loop limit exceeded" errors
-        window.requestAnimationFrame(() => {
+        if (useRequestAnimationFrame) {
+          window.requestAnimationFrame(() => {
+            if (Array.isArray(entries) && entries.length > 0) {
+              handleResize();
+            }
+          });
+          // Avoid wrapping function in requestAnimationFrame if the function is debounced
+        } else {
           if (Array.isArray(entries) && entries.length > 0) {
             handleResize();
           }
-        });
+        }
       });
       resizeObserver.observe(containerRefElement);
       unobserve = () => resizeObserver.unobserve(containerRefElement);