@patternfly/react-core 6.2.0-prerelease.8 → 6.2.0

package/src/helpers/GenerateId/GenerateId.ts

@@ -10,8 +10,7 @@
  *  </GenerateId>
  *  );
  */
-
-import * as React from 'react';
+import { Component } from 'react';
 import { getUniqueId } from '../util';
 
 let currentId = 0;
@@ -34,7 +33,7 @@ export interface GenerateIdProps {
   isRandom?: boolean;
 }
 
-class GenerateId extends React.Component<GenerateIdProps, {}> {
+class GenerateId extends Component<GenerateIdProps, {}> {
   static displayName = 'GenerateId';
   static defaultProps = {
     prefix: 'pf-random-id-',

package/src/helpers/GenerateId/__mocks__/GenerateId.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { Component } from 'react';
 import { GenerateIdProps } from '../GenerateId';
-class GenerateId extends React.Component<GenerateIdProps, {}> {
+class GenerateId extends Component<GenerateIdProps, {}> {
   static displayName = 'GenerateId';
 
   render() {

package/src/helpers/GenerateId/__tests__/GenerateId.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { GenerateId } from '../GenerateId';
 

package/src/helpers/KeyboardHandler.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component } from 'react';
 import { canUseDOM } from './util';
 
 export interface KeyboardHandlerProps {
@@ -182,7 +182,7 @@ export const setTabIndex = (options: HTMLElement[]) => {
  * @param event Event triggered by the keyboard
  * @param menuRef Menu reference
  */
-export const onToggleArrowKeydownDefault = (event: KeyboardEvent, menuRef: React.RefObject<HTMLDivElement>) => {
+export const onToggleArrowKeydownDefault = (event: KeyboardEvent, menuRef: React.RefObject<HTMLDivElement | null>) => {
   if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
     return;
   }
@@ -203,7 +203,7 @@ export const onToggleArrowKeydownDefault = (event: KeyboardEvent, menuRef: React
   focusableElement && (focusableElement as HTMLElement).focus();
 };
 
-class KeyboardHandler extends React.Component<KeyboardHandlerProps> {
+class KeyboardHandler extends Component<KeyboardHandlerProps> {
   static displayName = 'KeyboardHandler';
   static defaultProps: KeyboardHandlerProps = {
     containerRef: null,
@@ -255,7 +255,7 @@ class KeyboardHandler extends React.Component<KeyboardHandlerProps> {
     // Pass the event off to be handled by any custom handler
     additionalKeyHandler && additionalKeyHandler(event);
 
-    // Initalize navigableElements from the createNavigableElements callback
+    // Initialize navigableElements from the createNavigableElements callback
     const navigableElements = createNavigableElements();
     if (!navigableElements) {
       // eslint-disable-next-line no-console

package/src/helpers/OUIA/OUIA.md

@@ -2,6 +2,7 @@
 id: Open UI Automation
 section: developer-resources
 ---
+import { Fragment } from 'react';
 
 ## About Open UI Automation
 
@@ -40,15 +41,15 @@ component.
 ### Example
 
 ```js
-import React from 'react';
+import { Fragment } from 'react';
 import { Button } from '@patternfly/react-core';
 
-<React.Fragment>
+<Fragment>
   <Button>Button</Button>
   <br />
   <br />
   <Button ouiaId="static_id">Button with ouiaId</Button>
-</React.Fragment>
+</Fragment>
 ```
 
 ## OUIA-compliant PatternFly 5 components

package/src/helpers/Popper/Popper.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { cloneElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import { usePopper } from './thirdparty/react-popper/usePopper';
 import { Placement, Modifier } from './thirdparty/popper-core';
@@ -58,7 +58,7 @@ export interface PopperProps {
    */
   triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** The popper (menu/tooltip/popover) element */
-  popper: React.ReactElement;
+  popper: React.ReactElement<any>;
   /**
    * Reference to the popper (menu/tooltip/popover) element.
    * Passing this prop will remove the wrapper div element from the popper.
@@ -215,17 +215,17 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   onShown = () => {},
   preventOverflow = false
 }) => {
-  const [triggerElement, setTriggerElement] = React.useState(null);
-  const [refElement, setRefElement] = React.useState<HTMLElement>(null);
-  const [popperElement, setPopperElement] = React.useState<HTMLElement>(null);
-  const [popperContent, setPopperContent] = React.useState(null);
-  const [ready, setReady] = React.useState(false);
-  const [opacity, setOpacity] = React.useState(0);
-  const [internalIsVisible, setInternalIsVisible] = React.useState(isVisible);
-  const transitionTimerRef = React.useRef(null);
-  const showTimerRef = React.useRef(null);
-  const hideTimerRef = React.useRef(null);
-  const prevExitDelayRef = React.useRef<number>();
+  const [triggerElement, setTriggerElement] = useState(null);
+  const [refElement, setRefElement] = useState<HTMLElement>(null);
+  const [popperElement, setPopperElement] = useState<HTMLElement>(null);
+  const [popperContent, setPopperContent] = useState(null);
+  const [ready, setReady] = useState(false);
+  const [opacity, setOpacity] = useState(0);
+  const [internalIsVisible, setInternalIsVisible] = useState(isVisible);
+  const transitionTimerRef = useRef(null);
+  const showTimerRef = useRef(null);
+  const hideTimerRef = useRef(null);
+  const prevExitDelayRef = useRef<number>(undefined);
 
   const refOrTrigger = refElement || triggerElement;
   const showPopper = isVisible || internalIsVisible;
@@ -233,7 +233,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   const triggerParent = ((triggerRef as React.RefObject<any>)?.current || triggerElement)?.parentElement;
   const languageDirection = getLanguageDirection(triggerParent);
 
-  const internalPosition = React.useMemo<'left' | 'right' | 'center'>(() => {
+  const internalPosition = useMemo<'left' | 'right' | 'center'>(() => {
     const fixedPositions = { left: 'left', right: 'right', center: 'center' };
 
     const positionMap = {
@@ -252,25 +252,25 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     return positionMap[languageDirection][position] as 'left' | 'right' | 'center';
   }, [position, languageDirection]);
 
-  const onDocumentClickCallback = React.useCallback(
+  const onDocumentClickCallback = useCallback(
     (event: MouseEvent) => onDocumentClick(event, refOrTrigger, popperElement),
     [showPopper, triggerElement, refElement, popperElement, onDocumentClick]
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     setReady(true);
     onMount();
   }, []);
 
   // Cancel all timers on unmount
-  React.useEffect(
+  useEffect(
     () => () => {
       clearTimeouts([transitionTimerRef, hideTimerRef, showTimerRef]);
     },
     []
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (triggerRef) {
       if ((triggerRef as React.RefObject<any>).current) {
         setRefElement((triggerRef as React.RefObject<any>).current);
@@ -279,7 +279,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       }
     }
   }, [triggerRef, trigger]);
-  React.useEffect(() => {
+  useEffect(() => {
     // When the popperRef is defined or the popper visibility changes, ensure the popper element is up to date
     if (popperRef) {
       if ((popperRef as React.RefObject<any>).current) {
@@ -289,7 +289,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       }
     }
   }, [showPopper, popperRef]);
-  React.useEffect(() => {
+  useEffect(() => {
     // Trigger a Popper update when content changes.
     const observer = new MutationObserver(() => {
       update && update();
@@ -312,7 +312,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     addEventListener(onMouseEnter, refOrTrigger, 'mouseenter');
     addEventListener(onMouseLeave, refOrTrigger, 'mouseleave');
     addEventListener(onFocus, refOrTrigger, 'focus');
@@ -364,13 +364,13 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     }
     return convertedPlacement as Placement;
   };
-  const getPlacementMemo = React.useMemo(getPlacement, [direction, internalPosition, placement]);
-  const getOppositePlacementMemo = React.useMemo(
+  const getPlacementMemo = useMemo(getPlacement, [direction, internalPosition, placement]);
+  const getOppositePlacementMemo = useMemo(
     () => getOppositePlacement(getPlacement()),
     [direction, internalPosition, placement]
   );
 
-  const widthMods: Modifier<'widthMods', {}> = React.useMemo(
+  const widthMods: Modifier<'widthMods', {}> = useMemo(
     () => ({
       name: 'widthMods',
       enabled: width !== undefined || minWidth !== undefined || maxWidth !== undefined,
@@ -446,7 +446,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   /** We want to forceUpdate only when a tooltip's content is dynamically updated.
    * TODO: Investigate into 3rd party libraries for a less limited/specific solution
    */
-  React.useEffect(() => {
+  useEffect(() => {
     // currentPopperContent = {tooltip children} || {dropdown children}
     const currentPopperContent =
       popper?.props?.children?.[1]?.props?.children || popper?.props?.children?.props?.children;
@@ -457,7 +457,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     }
   }, [popper]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (prevExitDelayRef.current < exitDelay) {
       clearTimeouts([transitionTimerRef, hideTimerRef]);
       hideTimerRef.current = setTimeout(() => {
@@ -491,7 +491,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     }, exitDelay);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isVisible) {
       show();
     } else {
@@ -522,12 +522,17 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   };
 
   const getMenuWithPopper = () => {
-    const localPopper = React.cloneElement(popper, options);
+    const localPopper = cloneElement(popper, options);
 
     return popperRef ? (
       localPopper
     ) : (
-      <div style={{ display: 'contents' }} ref={(node) => setPopperElement(node?.firstElementChild as HTMLElement)}>
+      <div
+        style={{ display: 'contents' }}
+        ref={(node) => {
+          setPopperElement(node?.firstElementChild as HTMLElement);
+        }}
+      >
         {localPopper}
       </div>
     );
@@ -544,12 +549,17 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
 
   return (
     <>
-      {!triggerRef && trigger && React.isValidElement(trigger) && (
-        <div style={{ display: 'contents' }} ref={(node) => setTriggerElement(node?.firstElementChild as HTMLElement)}>
+      {!triggerRef && trigger && isValidElement(trigger) && (
+        <div
+          style={{ display: 'contents' }}
+          ref={(node) => {
+            setTriggerElement(node?.firstElementChild as HTMLElement);
+          }}
+        >
           {trigger}
         </div>
       )}
-      {triggerRef && trigger && React.isValidElement(trigger) && trigger}
+      {triggerRef && trigger && isValidElement(trigger) && trigger}
       {ready && showPopper && getPopper()}
     </>
   );

package/src/helpers/Popper/__mocks__/Popper.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PopperProps } from '../Popper';
 
 export const Popper = ({

package/src/helpers/Popper/thirdparty/react-popper/usePopper.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
-
-import * as React from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { createPopper as defaultCreatePopper, Options as PopperOptions, VirtualElement } from '../popper-core/popper';
 import { useIsomorphicLayoutEffect } from '../../../../helpers/useIsomorphicLayout';
 
@@ -41,7 +40,7 @@ export const usePopper = (
   popperElement: HTMLElement | null | undefined,
   options: Options = {}
 ) => {
-  const prevOptions = React.useRef<PopperOptions | null | undefined>(null);
+  const prevOptions = useRef<PopperOptions | null | undefined>(null);
 
   const optionsWithDefaults = {
     onFirstUpdate: options.onFirstUpdate,
@@ -50,7 +49,7 @@ export const usePopper = (
     modifiers: options.modifiers || EMPTY_MODIFIERS
   };
 
-  const [state, setState] = React.useState<State>({
+  const [state, setState] = useState<State>({
     styles: {
       popper: {
         position: optionsWithDefaults.strategy,
@@ -61,7 +60,7 @@ export const usePopper = (
     attributes: {}
   });
 
-  const updateStateModifier = React.useMemo(
+  const updateStateModifier = useMemo(
     () => ({
       name: 'updateState',
       enabled: true,
@@ -80,7 +79,7 @@ export const usePopper = (
     []
   );
 
-  const popperOptions = React.useMemo(() => {
+  const popperOptions = useMemo(() => {
     const newOptions = {
       onFirstUpdate: optionsWithDefaults.onFirstUpdate,
       placement: optionsWithDefaults.placement,
@@ -102,7 +101,7 @@ export const usePopper = (
     updateStateModifier
   ]);
 
-  const popperInstanceRef = React.useRef<any>();
+  const popperInstanceRef = useRef<any>(undefined);
 
   useIsomorphicLayoutEffect(() => {
     if (popperInstanceRef && popperInstanceRef.current) {

package/src/helpers/resizeObserver.tsx

@@ -6,7 +6,7 @@ import { canUseDOM, debounce } from './util';
  *
  * Example 1:
  *
- * private containerRef = React.createRef<HTMLDivElement>();
+ * private containerRef = createRef<HTMLDivElement>();
  * private observer: any = () => {};
  *
  * public componentDidMount() {
@@ -33,7 +33,7 @@ import { canUseDOM, debounce } from './util';
  *
  * Example 2:
  *
- * private inputRef = React.createRef<HTMLInputElement>();
+ * private inputRef = createRef<HTMLInputElement>();
  * private observer: any = () => {};
  *
  * public componentDidMount() {

package/src/helpers/useInterval.ts

@@ -1,18 +1,17 @@
-import * as React from 'react';
-
 /** This is a custom React hook in a format suggest by Dan Abramov in a blog post here:
  * https://overreacted.io/making-setinterval-declarative-with-react-hooks/. It allows setInterval to be used
  * declaratively in functional React components.
  */
+import { useEffect, useRef } from 'react';
 
 export function useInterval(callback: () => void, delay: number | null) {
-  const savedCallback = React.useRef(() => {});
+  const savedCallback = useRef(() => {});
 
-  React.useEffect(() => {
+  useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     function tick() {
       savedCallback.current();
     }

package/src/helpers/useIsomorphicLayout.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { useEffect, useLayoutEffect } from 'react';
 import { canUseDOM } from './util';
 
 /**
  * Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
  */
-export const useIsomorphicLayoutEffect = canUseDOM ? React.useLayoutEffect : React.useEffect;
+export const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;

package/src/helpers/util.ts

@@ -1,4 +1,3 @@
-import * as ReactDOM from 'react-dom';
 import { globalWidthBreakpoints, globalHeightBreakpoints, SIDE } from './constants';
 
 /**
@@ -180,8 +179,8 @@ export function keyHandler(
     if (refsCollection[nextIndex].focus) {
       refsCollection[nextIndex].focus();
     }
-    // eslint-disable-next-line react/no-find-dom-node
-    const element = ReactDOM.findDOMNode(refsCollection[nextIndex]) as HTMLElement;
+
+    const element = refsCollection[nextIndex] as HTMLElement;
     element.focus();
   } else if (position !== 'tab') {
     if (isMultiDimensional) {

package/src/layouts/Bullseye/Bullseye.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
+import type { JSX } from 'react';
+
 export interface BullseyeProps extends React.HTMLProps<HTMLDivElement> {
   /** content rendered inside the Bullseye layout */
   children?: React.ReactNode;

package/src/layouts/Bullseye/__tests__/Bullseye.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Bullseye } from '../Bullseye';
 
@@ -23,7 +22,7 @@ describe('Bullseye', () => {
   test('allows passing in a React Component as the component', () => {
     const Component: React.FunctionComponent = () => <div>Some text</div>;
 
-    render(<Bullseye component={Component as unknown as keyof JSX.IntrinsicElements} />);
+    render(<Bullseye component={Component as unknown as keyof React.JSX.IntrinsicElements} />);
     expect(screen.getByText('Some text')).toBeInTheDocument();
   });
 });

package/src/layouts/Bullseye/examples/Bullseye.md

@@ -12,7 +12,6 @@ import './bullseye.css';
 ### Basic
 
 ```js
-import React from 'react';
 import { Bullseye } from '@patternfly/react-core';
 
 <Bullseye>

package/src/layouts/Flex/Flex.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
 import * as flexToken from '@patternfly/react-tokens/dist/esm/l_flex_item_Order';

package/src/layouts/Flex/FlexItem.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
 import * as flexToken from '@patternfly/react-tokens/dist/esm/l_flex_item_Order';

package/src/layouts/Flex/__tests__/Flex.test.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { render, screen } from '@testing-library/react';
 
 import { Flex } from '../Flex';

package/src/layouts/Flex/__tests__/Generated/FlexItem.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { FlexItem } from '../../FlexItem';
 // any missing imports can usually be resolved by adding them here