@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

package/src/deprecated/components/Dropdown/InternalDropdownItem.tsx

@@ -58,7 +58,7 @@ export interface InternalDropdownItemProps extends React.HTMLProps<HTMLAnchorEle
   inoperableEvents?: string[];
 }
 
-export class InternalDropdownItem extends React.Component<InternalDropdownItemProps> {
+class InternalDropdownItem extends React.Component<InternalDropdownItemProps> {
   static displayName = 'InternalDropdownItem';
   ref = React.createRef<HTMLLIElement>();
   additionalRef = React.createRef<any>();
@@ -288,3 +288,5 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
     );
   }
 }
+
+export { InternalDropdownItem };

package/src/deprecated/components/Dropdown/Toggle.tsx

@@ -51,7 +51,7 @@ const buttonVariantStyles = {
   secondary: styles.modifiers.secondary
 };
 
-export class Toggle extends React.Component<ToggleProps> {
+class Toggle extends React.Component<ToggleProps> {
   static displayName = 'Toggle';
   private buttonRef = React.createRef<HTMLButtonElement>();
 
@@ -179,3 +179,5 @@ export class Toggle extends React.Component<ToggleProps> {
     );
   }
 }
+
+export { Toggle };

package/src/deprecated/components/Dropdown/examples/Dropdown.md

@@ -24,7 +24,7 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import { Link } from '@reach/router';
-import avatarImg from '../../../../components/Avatar/examples/avatarImg.svg';
+import avatarImg from '../../../../components/assets/avatarImg.svg';
 
 ## Examples
 

package/src/deprecated/components/Dropdown/examples/DropdownImageAndText.tsx

@@ -7,7 +7,7 @@ import {
   DropdownItem,
   DropdownSeparator
 } from '@patternfly/react-core/deprecated';
-import avatarImg from '../../../../components/Avatar/examples/avatarImg.svg';
+import avatarImg from '../../../../components/assets/avatarImg.svg';
 
 export const DropdownImageAndText: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);

package/src/deprecated/components/PageHeader/tests/PageHeaderTools.test.tsx

@@ -8,6 +8,10 @@ import { PageHeaderTools } from '../PageHeaderTools';
 import {} from '../..';
 
 it('PageHeaderTools should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<PageHeaderTools className={'string'}><div>ReactNode</div></PageHeaderTools>);
+  const { asFragment } = render(
+    <PageHeaderTools className={'string'}>
+      <div>ReactNode</div>
+    </PageHeaderTools>
+  );
   expect(asFragment()).toMatchSnapshot();
 });

package/src/deprecated/components/PageHeader/tests/PageHeaderToolsGroup.test.tsx

@@ -8,6 +8,10 @@ import { PageHeaderToolsGroup } from '../PageHeaderToolsGroup';
 import {} from '../..';
 
 it('PageHeaderToolsGroup should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<PageHeaderToolsGroup className={'string'}><div>ReactNode</div></PageHeaderToolsGroup>);
+  const { asFragment } = render(
+    <PageHeaderToolsGroup className={'string'}>
+      <div>ReactNode</div>
+    </PageHeaderToolsGroup>
+  );
   expect(asFragment()).toMatchSnapshot();
 });

package/src/deprecated/components/PageHeader/tests/PageHeaderToolsItem.test.tsx

@@ -9,7 +9,9 @@ import {} from '../..';
 
 it('PageHeaderToolsItem should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
-    <PageHeaderToolsItem className={'string'} isSelected={true}>children={<div>ReactNode</div>}</PageHeaderToolsItem>
+    <PageHeaderToolsItem className={'string'} isSelected={true}>
+      children={<div>ReactNode</div>}
+    </PageHeaderToolsItem>
   );
   expect(asFragment()).toMatchSnapshot();
 });

package/src/deprecated/components/Select/Select.tsx

@@ -207,7 +207,7 @@ export interface SelectState {
   viewMoreNextIndex: number;
 }
 
-export class Select extends React.Component<SelectProps & OUIAProps, SelectState> {
+class Select extends React.Component<SelectProps & OUIAProps, SelectState> {
   static displayName = 'Select';
   private parentRef = React.createRef<HTMLDivElement>();
   private menuComponentRef = React.createRef<HTMLElement>();
@@ -1149,54 +1149,56 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     if (hasInlineFilter) {
       const filterBox = (
         <React.Fragment>
-          <div key="inline-filter" className={css(styles.selectMenuSearch, formStyles.formControl)}>
-            <input
-              key="inline-filter-input"
-              type="search"
-              onChange={this.onChange}
-              placeholder={inlineFilterPlaceholderText}
-              onKeyDown={(event) => {
-                if (event.key === KeyTypes.ArrowUp) {
-                  this.handleMenuKeys(0, 0, 'up');
-                  event.preventDefault();
-                } else if (event.key === KeyTypes.ArrowDown) {
-                  this.handleMenuKeys(0, 0, 'down');
-                  event.preventDefault();
-                } else if (event.key === KeyTypes.ArrowLeft) {
-                  this.handleMenuKeys(0, 0, 'left');
-                  event.preventDefault();
-                } else if (event.key === KeyTypes.ArrowRight) {
-                  this.handleMenuKeys(0, 0, 'right');
-                  event.preventDefault();
-                } else if (event.key === KeyTypes.Tab && variant !== SelectVariant.checkbox && this.props.footer) {
-                  // tab to footer or close menu if shift key
-                  if (event.shiftKey) {
-                    this.onToggle(event, false);
-                  } else {
-                    const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
-                    if (tabbableItems.length > 0) {
-                      tabbableItems[0].focus();
-                      event.stopPropagation();
-                      event.preventDefault();
-                    } else {
-                      this.onToggle(event, false);
-                    }
-                  }
-                } else if (event.key === KeyTypes.Tab && variant === SelectVariant.checkbox) {
-                  // More modal-like experience for checkboxes
-                  // Let SelectOption handle this
-                  if (event.shiftKey) {
+          <div key="inline-filter" className={css(styles.selectMenuSearch)}>
+            <div key="inline-filter" className={css(formStyles.formControl)}>
+              <input
+                key="inline-filter-input"
+                type="search"
+                onChange={this.onChange}
+                placeholder={inlineFilterPlaceholderText}
+                onKeyDown={(event) => {
+                  if (event.key === KeyTypes.ArrowUp) {
                     this.handleMenuKeys(0, 0, 'up');
-                  } else {
+                    event.preventDefault();
+                  } else if (event.key === KeyTypes.ArrowDown) {
                     this.handleMenuKeys(0, 0, 'down');
+                    event.preventDefault();
+                  } else if (event.key === KeyTypes.ArrowLeft) {
+                    this.handleMenuKeys(0, 0, 'left');
+                    event.preventDefault();
+                  } else if (event.key === KeyTypes.ArrowRight) {
+                    this.handleMenuKeys(0, 0, 'right');
+                    event.preventDefault();
+                  } else if (event.key === KeyTypes.Tab && variant !== SelectVariant.checkbox && this.props.footer) {
+                    // tab to footer or close menu if shift key
+                    if (event.shiftKey) {
+                      this.onToggle(event, false);
+                    } else {
+                      const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
+                      if (tabbableItems.length > 0) {
+                        tabbableItems[0].focus();
+                        event.stopPropagation();
+                        event.preventDefault();
+                      } else {
+                        this.onToggle(event, false);
+                      }
+                    }
+                  } else if (event.key === KeyTypes.Tab && variant === SelectVariant.checkbox) {
+                    // More modal-like experience for checkboxes
+                    // Let SelectOption handle this
+                    if (event.shiftKey) {
+                      this.handleMenuKeys(0, 0, 'up');
+                    } else {
+                      this.handleMenuKeys(0, 0, 'down');
+                    }
+                    event.stopPropagation();
+                    event.preventDefault();
                   }
-                  event.stopPropagation();
-                  event.preventDefault();
-                }
-              }}
-              ref={this.filterRef}
-              autoComplete={inputAutoComplete}
-            />
+                }}
+                ref={this.filterRef}
+                autoComplete={inputAutoComplete}
+              />
+            </div>
           </div>
           <Divider key="inline-filter-divider" />
         </React.Fragment>
@@ -1382,23 +1384,23 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             <React.Fragment>
               <div className={css(styles.selectToggleWrapper)}>
                 {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-                <TextInput 
-                    className={css(styles.selectToggleTypeahead)}
-                    aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
-                    id={`${selectToggleId}-select-typeahead`}
-                    aria-label={typeAheadAriaLabel}
-                    {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
-                    placeholder={placeholderText as string}
-                    value={
-                      typeaheadInputValue !== null
-                        ? typeaheadInputValue
-                        : this.getDisplay(selections[0] as string, 'text') || ''
-                    }
-                    onChange={(event) => this.onChange(event as React.ChangeEvent<HTMLInputElement>)}
-                    onClick={this.onClick}
-                    autoComplete={inputAutoComplete}
-                    isDisabled={isDisabled}
-                    ref={this.inputRef}
+                <TextInput
+                  className={css(styles.selectToggleTypeahead)}
+                  aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
+                  id={`${selectToggleId}-select-typeahead`}
+                  aria-label={typeAheadAriaLabel}
+                  {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
+                  placeholder={placeholderText as string}
+                  value={
+                    typeaheadInputValue !== null
+                      ? typeaheadInputValue
+                      : this.getDisplay(selections[0] as string, 'text') || ''
+                  }
+                  onChange={(event) => this.onChange(event as React.ChangeEvent<HTMLInputElement>)}
+                  onClick={this.onClick}
+                  autoComplete={inputAutoComplete}
+                  isDisabled={isDisabled}
+                  ref={this.inputRef}
                 />
               </div>
               {hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn}
@@ -1409,20 +1411,20 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
               <div className={css(styles.selectToggleWrapper)}>
                 {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
                 {selections && Array.isArray(selections) && selections.length > 0 && selectedChips}
-                <TextInput 
-                    className={css(styles.selectToggleTypeahead)}
-                    aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
-                    id={`${selectToggleId}-select-multi-typeahead-typeahead`}
-                    aria-label={typeAheadAriaLabel}
-                    aria-invalid={validated === ValidatedOptions.error}
-                    {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
-                    placeholder={placeholderText as string}
-                    value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
-                    onChange={(event) => this.onChange(event as React.ChangeEvent<HTMLInputElement>)}
-                    onClick={this.onClick}
-                    autoComplete={inputAutoComplete}
-                    isDisabled={isDisabled}
-                    ref={this.inputRef}
+                <TextInput
+                  className={css(styles.selectToggleTypeahead)}
+                  aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
+                  id={`${selectToggleId}-select-multi-typeahead-typeahead`}
+                  aria-label={typeAheadAriaLabel}
+                  aria-invalid={validated === ValidatedOptions.error}
+                  {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
+                  placeholder={placeholderText as string}
+                  value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
+                  onChange={(event) => this.onChange(event as React.ChangeEvent<HTMLInputElement>)}
+                  onClick={this.onClick}
+                  autoComplete={inputAutoComplete}
+                  isDisabled={isDisabled}
+                  ref={this.inputRef}
                 />
               </div>
               {hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn}
@@ -1489,3 +1491,5 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     );
   }
 }
+
+export { Select };

package/src/deprecated/components/Select/SelectMenu.tsx

@@ -118,7 +118,7 @@ class SelectMenuWithRef extends React.Component<SelectMenuProps> {
 
     if (Array.isArray(options)) {
       if (isSelectOptionObject) {
-        return options.some(option => (option as SelectOptionObject).compareTo(valueToCheck));
+        return options.some((option) => (option as SelectOptionObject).compareTo(valueToCheck));
       } else {
         return options.includes(valueToCheck);
       }
@@ -265,7 +265,7 @@ class SelectMenuWithRef extends React.Component<SelectMenuProps> {
   }
 
   render() {
-    return <SelectConsumer>{context => this.renderSelectMenu(context)}</SelectConsumer>;
+    return <SelectConsumer>{(context) => this.renderSelectMenu(context)}</SelectConsumer>;
   }
 }
 

package/src/deprecated/components/Select/SelectOption.tsx

@@ -74,7 +74,7 @@ export interface SelectOptionProps extends Omit<React.HTMLProps<HTMLElement>, 't
   isGrouped?: boolean;
 }
 
-export class SelectOption extends React.Component<SelectOptionProps> {
+class SelectOption extends React.Component<SelectOptionProps> {
   static displayName = 'SelectOption';
   private ref = React.createRef<any>();
   private liRef = React.createRef<any>();
@@ -208,7 +208,7 @@ export class SelectOption extends React.Component<SelectOptionProps> {
         onClick={() => {
           onFavorite(generatedId.replace('favorite-', ''), isFavorite);
         }}
-        onKeyDown={event => {
+        onKeyDown={(event) => {
           this.onKeyDown(event, 1, () => onFavorite(generatedId.replace('favorite-', ''), isFavorite));
         }}
         ref={this.favoriteRef}
@@ -408,7 +408,7 @@ export class SelectOption extends React.Component<SelectOptionProps> {
               id={inputId || `${inputIdPrefix}-${value.toString()}`}
               className={css(checkStyles.checkInput)}
               type="checkbox"
-              onChange={event => {
+              onChange={(event) => {
                 if (!isDisabled) {
                   onClick(event);
                   onSelect(event, value);
@@ -459,3 +459,5 @@ export class SelectOption extends React.Component<SelectOptionProps> {
     );
   }
 }
+
+export { SelectOption };

package/src/deprecated/components/Select/SelectToggle.tsx

@@ -104,7 +104,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
   }
 
   componentWillUnmount() {
-    document.removeEventListener('click', this.onDocClick);
+    document.removeEventListener('click', this.onDocClick, { capture: true });
     document.removeEventListener('touchstart', this.onDocClick);
     document.removeEventListener('keydown', this.handleGlobalKeys);
   }
@@ -124,17 +124,8 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
   };
 
   handleGlobalKeys = (event: KeyboardEvent) => {
-    const {
-      parentRef,
-      menuRef,
-      hasFooter,
-      footerRef,
-      isOpen,
-      variant,
-      onToggle,
-      onClose,
-      moveFocusToLastMenuItem
-    } = this.props;
+    const { parentRef, menuRef, hasFooter, footerRef, isOpen, variant, onToggle, onClose, moveFocusToLastMenuItem } =
+      this.props;
     const escFromToggle = parentRef && parentRef.current && parentRef.current.contains(event.target as Node);
     const escFromWithinMenu =
       menuRef && menuRef.current && menuRef.current.contains && menuRef.current.contains(event.target as Node);
@@ -307,7 +298,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
             aria-label={ariaLabel}
             onBlur={onBlur}
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onClick={event => {
+            onClick={(event) => {
               onToggle(event, !isOpen);
               if (isOpen) {
                 onClose();
@@ -334,7 +325,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
             )}
             onBlur={onBlur}
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onClick={event => {
+            onClick={(event) => {
               if (!isDisabled) {
                 onToggle(event, !isOpen);
                 if (isOpen) {
@@ -350,7 +341,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
               type={type}
               className={css(buttonStyles.button, styles.selectToggleButton, styles.modifiers.plain)}
               aria-label={ariaLabel}
-              onClick={event => {
+              onClick={(event) => {
                 onToggle(event, !isOpen);
                 if (isOpen) {
                   onClose();

package/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -1220,12 +1220,16 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         class="pf-v5-c-form__fieldset"
       >
         <div
-          class="pf-v5-c-select__menu-search pf-v5-c-form-control"
+          class="pf-v5-c-select__menu-search"
         >
-          <input
-            autocomplete="off"
-            type="search"
-          />
+          <div
+            class="pf-v5-c-form-control"
+          >
+            <input
+              autocomplete="off"
+              type="search"
+            />
+          </div>
         </div>
         <hr
           class="pf-v5-c-divider"

package/src/deprecated/components/Wizard/Wizard.tsx

@@ -125,7 +125,7 @@ interface WizardState {
   isNavOpen: boolean;
 }
 
-export class Wizard extends React.Component<WizardProps, WizardState> {
+class Wizard extends React.Component<WizardProps, WizardState> {
   static displayName = 'Wizard';
   private static currentId = 0;
   static defaultProps: PickOptional<WizardProps> = {
@@ -552,7 +552,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
             isInPage={isOpen === undefined}
             mainAriaLabelledBy={(title || mainAriaLabelledBy) && (mainAriaLabelledBy || this.titleId)}
             isNavOpen={this.state.isNavOpen}
-            onNavToggle={isNavOpen => this.setState({ isNavOpen })}
+            onNavToggle={(isNavOpen) => this.setState({ isNavOpen })}
             nav={nav}
             steps={steps}
             activeStep={activeStep}
@@ -595,3 +595,5 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     return wizard;
   }
 }
+
+export { Wizard };

package/src/deprecated/components/Wizard/WizardHeader.tsx

@@ -42,7 +42,9 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
       </div>
     )}
     <div className={css(styles.wizardTitle)}>
-      <h2 className={css(styles.wizardTitleText)} id={titleId}>{title || <>&nbsp;</>}</h2>
+      <h2 className={css(styles.wizardTitleText)} id={titleId}>
+        {title || <>&nbsp;</>}
+      </h2>
     </div>
     {description && (
       <Component className={css(styles.wizardDescription)} id={descriptionId}>

package/src/deprecated/components/Wizard/examples/WizardAnchorsForNavItems.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@patternfly/react-core';
-import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated'
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 
@@ -39,5 +39,7 @@ export const WizardWithNavAnchors: React.FunctionComponent = () => {
     }
   ];
   const title = 'Anchor link wizard example';
-  return <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
+  return (
+    <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />
+  );
 };

package/src/deprecated/components/Wizard/examples/WizardBasic.tsx

@@ -35,5 +35,7 @@ export const WizardBasic: React.FunctionComponent = () => {
     { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
   ];
   const title = 'Basic wizard example';
-  return <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
+  return (
+    <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />
+  );
 };

package/src/deprecated/components/Wizard/examples/WizardBasicWithDisabledSteps.tsx

@@ -10,5 +10,7 @@ export const WizardBasicWithDisabledSteps: React.FunctionComponent = () => {
     { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
   ];
   const title = 'Basic wizard with disabled steps example';
-  return <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
+  return (
+    <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />
+  );
 };

package/src/helpers/FocusTrap/FocusTrap.tsx

@@ -1,103 +1,63 @@
-import * as React from 'react';
-import { createFocusTrap, Options as FocusTrapOptions, FocusTrap as IFocusTrap } from 'focus-trap';
+import { createFocusTrap, FocusTrap as FocusTrapInstance, Options as FocusTrapOptions } from 'focus-trap';
+import React, { ComponentPropsWithRef, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { useUnmountEffect } from '../useUnmountEffect';
 
-interface FocusTrapProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
-  children: React.ReactNode;
-  className?: string;
+export interface FocusTrapProps extends ComponentPropsWithRef<'div'> {
   active?: boolean;
   paused?: boolean;
   focusTrapOptions?: FocusTrapOptions;
   /** Prevent from scrolling to the previously focused element on deactivation */
   preventScrollOnDeactivate?: boolean;
-  /** @hide Forwarded ref */
-  innerRef?: React.Ref<HTMLDivElement>;
 }
 
-class FocusTrapBase extends React.Component<FocusTrapProps> {
-  static displayName = 'FocusTrap';
-  previouslyFocusedElement: HTMLElement;
-  focusTrap: IFocusTrap;
-  divRef = (this.props.innerRef as React.RefObject<HTMLDivElement>) || React.createRef<HTMLDivElement>();
-
-  static defaultProps = {
-    active: true,
-    paused: false,
-    focusTrapOptions: {},
-    preventScrollOnDeactivate: false
-  };
-
-  constructor(props: FocusTrapProps) {
-    super(props);
-
-    if (typeof document !== 'undefined') {
-      this.previouslyFocusedElement = document.activeElement as HTMLElement;
-    }
-  }
-
-  componentDidMount() {
-    // We need to hijack the returnFocusOnDeactivate option,
-    // because React can move focus into the element before we arrived at
-    // this lifecycle hook (e.g. with autoFocus inputs). So the component
-    // captures the previouslyFocusedElement in componentWillMount,
-    // then (optionally) returns focus to it in componentWillUnmount.
-    this.focusTrap = createFocusTrap(this.divRef.current, {
-      ...this.props.focusTrapOptions,
+export const FocusTrap = forwardRef<HTMLDivElement, FocusTrapProps>(function FocusTrap(
+  { active = true, paused = false, focusTrapOptions = {}, preventScrollOnDeactivate = false, ...props },
+  forwardedRef
+) {
+  // Fall back to internal ref if no forwarded ref is provided.
+  const ref = useRef<HTMLDivElement>(null);
+  useImperativeHandle(forwardedRef, () => ref.current!);
+
+  // Create focus trap instance after rendering DOM.
+  const focusTrapRef = useRef<FocusTrapInstance | null>(null);
+  useEffect(() => {
+    const focusTrap = createFocusTrap(ref.current!, {
+      ...focusTrapOptions,
       returnFocusOnDeactivate: false
     });
-    if (this.props.active) {
-      this.focusTrap.activate();
-    }
-    if (this.props.paused) {
-      this.focusTrap.pause();
+    focusTrapRef.current = focusTrap;
+
+    // Deactivate focus trap on cleanup.
+    return () => {
+      focusTrap.deactivate();
+    };
+  }, []);
+
+  // Handle activation status based on 'active' prop.
+  useEffect(() => {
+    const focusTrap = focusTrapRef.current;
+    active ? focusTrap?.activate() : focusTrap?.deactivate();
+  }, [active]);
+
+  // Handle pause status based on 'pause' prop.
+  useEffect(() => {
+    const focusTrap = focusTrapRef.current;
+    paused ? focusTrap?.pause() : focusTrap?.unpause();
+  }, [paused]);
+
+  // Store the currently active element to restore focus to later.
+  const previousElementRef = useRef(typeof document !== 'undefined' ? document.activeElement : null);
+
+  // Restore focus to the previously active element on unmount.
+  useUnmountEffect(() => {
+    if (focusTrapOptions.returnFocusOnDeactivate !== false && previousElementRef.current instanceof HTMLElement) {
+      previousElementRef.current.focus({
+        preventScroll: preventScrollOnDeactivate
+      });
     }
-  }
+  });
 
-  componentDidUpdate(prevProps: FocusTrapProps) {
-    if (prevProps.active && !this.props.active) {
-      this.focusTrap.deactivate();
-    } else if (!prevProps.active && this.props.active) {
-      this.focusTrap.activate();
-    }
-
-    if (prevProps.paused && !this.props.paused) {
-      this.focusTrap.unpause();
-    } else if (!prevProps.paused && this.props.paused) {
-      this.focusTrap.pause();
-    }
-  }
-
-  componentWillUnmount() {
-    this.focusTrap.deactivate();
-    if (
-      this.props.focusTrapOptions.returnFocusOnDeactivate !== false &&
-      this.previouslyFocusedElement &&
-      this.previouslyFocusedElement.focus
-    ) {
-      this.previouslyFocusedElement.focus({ preventScroll: this.props.preventScrollOnDeactivate });
-    }
-  }
-
-  render() {
-    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}
-      </div>
-    );
-  }
-}
+  return <div ref={ref} {...props} />;
+});
 
-export const FocusTrap = React.forwardRef((props: FocusTrapProps, ref: React.Ref<any>) => (
-  <FocusTrapBase innerRef={ref} {...props} />
-));
+FocusTrap.displayName = 'FocusTrap';