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

package/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Button,
+  ButtonVariant,
+  Dropdown,
+  DropdownList
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const OverflowMenuPersistent: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const dropdownItems = [
+    <OverflowMenuDropdownItem itemId={0} key="secondary" isShared>
+      Secondary
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={1} key="tertiary" isShared>
+      Tertiary
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={2} key="action">
+      Action 4
+    </OverflowMenuDropdownItem>
+  ];
+
+  return (
+    <OverflowMenu breakpoint="lg">
+      <OverflowMenuContent isPersistent>
+        <OverflowMenuGroup groupType="button" isPersistent>
+          <OverflowMenuItem isPersistent>
+            <Button variant={ButtonVariant.primary}>Primary</Button>
+          </OverflowMenuItem>
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.secondary}>Secondary</Button>
+          </OverflowMenuItem>
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.tertiary}>Tertiary</Button>
+          </OverflowMenuItem>
+        </OverflowMenuGroup>
+      </OverflowMenuContent>
+      <OverflowMenuControl hasAdditionalOptions>
+        <Dropdown
+          onSelect={onSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              aria-label="Persistent example overflow menu"
+              variant="plain"
+              onClick={onToggle}
+              isExpanded={isOpen}
+            >
+              <EllipsisVIcon />
+            </MenuToggle>
+          )}
+          isOpen={isOpen}
+          onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        >
+          <DropdownList>{dropdownItems}</DropdownList>
+        </Dropdown>
+      </OverflowMenuControl>
+    </OverflowMenu>
+  );
+};

package/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Dropdown,
+  DropdownList
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const dropdownItems = [
+    <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
+      Item 1
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
+      Item 2
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
+      Item 3
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={3} key="item4" isShared>
+      Item 4
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={5} key="item5" isShared>
+      Item 5
+    </OverflowMenuDropdownItem>
+  ];
+
+  return (
+    <OverflowMenu breakpoint="lg">
+      <OverflowMenuContent>
+        <OverflowMenuItem>Item</OverflowMenuItem>
+        <OverflowMenuItem>Item</OverflowMenuItem>
+        <OverflowMenuGroup>
+          <OverflowMenuItem>Item</OverflowMenuItem>
+          <OverflowMenuItem>Item</OverflowMenuItem>
+          <OverflowMenuItem>Item</OverflowMenuItem>
+        </OverflowMenuGroup>
+      </OverflowMenuContent>
+      <OverflowMenuControl>
+        <Dropdown
+          onSelect={onSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              aria-label="Simple example overflow menu"
+              variant="plain"
+              onClick={onToggle}
+              isExpanded={isOpen}
+            >
+              <EllipsisVIcon />
+            </MenuToggle>
+          )}
+          isOpen={isOpen}
+          onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        >
+          <DropdownList>{dropdownItems}</DropdownList>
+        </Dropdown>
+      </OverflowMenuControl>
+    </OverflowMenu>
+  );
+};

package/src/components/Page/Page.tsx

@@ -81,6 +81,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   isBreadcrumbGrouped?: boolean;
   /** Additional content of the group */
   additionalGroupedContent?: React.ReactNode;
+  /** HTML component used as main component of the page. Defaults to 'main', only pass in 'div' if another 'main' element already exists. */
+  mainComponent?: 'main' | 'div';
   /** Additional props of the group */
   groupProps?: PageGroupProps;
   /** Additional props of the breadcrumb */
@@ -95,7 +97,7 @@ export interface PageState {
   height: number;
 }
 
-export class Page extends React.Component<PageProps, PageState> {
+class Page extends React.Component<PageProps, PageState> {
   static displayName = 'Page';
   static defaultProps: PageProps = {
     isManagedSidebar: false,
@@ -104,6 +106,7 @@ export class Page extends React.Component<PageProps, PageState> {
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
     onNotificationDrawerExpand: () => null,
+    mainComponent: 'main',
     getBreakpoint,
     getVerticalBreakpoint
   };
@@ -229,6 +232,7 @@ export class Page extends React.Component<PageProps, PageState> {
       getVerticalBreakpoint,
       mainAriaLabel,
       mainTabIndex,
+      mainComponent,
       tertiaryNav,
       isTertiaryNavGrouped,
       isBreadcrumbGrouped,
@@ -288,8 +292,10 @@ export class Page extends React.Component<PageProps, PageState> {
       </PageGroup>
     ) : null;
 
+    const Component: keyof JSX.IntrinsicElements = mainComponent;
+
     const main = (
-      <main
+      <Component
         ref={this.mainRef}
         role={role}
         id={mainContainerId}
@@ -301,7 +307,7 @@ export class Page extends React.Component<PageProps, PageState> {
         {!isTertiaryNavGrouped && nav}
         {!isBreadcrumbGrouped && crumb}
         {children}
-      </main>
+      </Component>
     );
 
     const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;
@@ -337,3 +343,5 @@ export class Page extends React.Component<PageProps, PageState> {
     );
   }
 }
+
+export { Page };

package/src/components/Pagination/Navigation.tsx

@@ -64,7 +64,7 @@ export interface NavigationState {
   userInputPage?: React.ReactText;
 }
 
-export class Navigation extends React.Component<NavigationProps, NavigationState> {
+class Navigation extends React.Component<NavigationProps, NavigationState> {
   static displayName = 'Navigation';
   constructor(props: NavigationProps) {
     super(props);
@@ -190,7 +190,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
               isDisabled={isDisabled || page === firstPage || page === 0}
               aria-label={toFirstPageAriaLabel}
               data-action="first"
-              onClick={event => {
+              onClick={(event) => {
                 onFirstClick(event, 1);
                 this.handleNewPage(event, 1);
                 this.setState({ userInputPage: 1 });
@@ -205,7 +205,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
             variant={ButtonVariant.plain}
             isDisabled={isDisabled || page === firstPage || page === 0}
             data-action="previous"
-            onClick={event => {
+            onClick={(event) => {
               const newPage = (page as number) - 1 >= 1 ? (page as number) - 1 : 1;
               onPreviousClick(event, newPage);
               this.handleNewPage(event, newPage);
@@ -227,8 +227,8 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
               min={lastPage <= 0 && firstPage <= 0 ? 0 : 1}
               max={lastPage}
               value={userInputPage}
-              onKeyDown={event => this.onKeyDown(event, page, lastPage, onPageInput)}
-              onChange={event => this.onChange(event, lastPage)}
+              onKeyDown={(event) => this.onKeyDown(event, page, lastPage, onPageInput)}
+              onChange={(event) => this.onChange(event, lastPage)}
             />
             {(itemCount || itemCount === 0) && (
               <span aria-hidden="true">
@@ -243,7 +243,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
             isDisabled={isDisabled || page === lastPage}
             aria-label={toNextPageAriaLabel}
             data-action="next"
-            onClick={event => {
+            onClick={(event) => {
               const newPage = (page as number) + 1 <= lastPage ? (page as number) + 1 : lastPage;
               onNextClick(event, newPage);
               this.handleNewPage(event, newPage);
@@ -260,7 +260,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
               isDisabled={isDisabled || page === lastPage}
               aria-label={toLastPageAriaLabel}
               data-action="last"
-              onClick={event => {
+              onClick={(event) => {
                 onLastClick(event, lastPage);
                 this.handleNewPage(event, lastPage);
                 this.setState({ userInputPage: lastPage });
@@ -274,3 +274,5 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
     );
   }
 }
+
+export { Navigation };

package/src/components/Pagination/Pagination.tsx

@@ -246,7 +246,9 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
 
   let page = pageProp;
   if (offset !== null) {
-    page = Math.max(Math.ceil(offset / perPage), 1);
+    itemsStart = offset + 1;
+    page = Math.max(Math.ceil(itemsStart / perPage), 1);
+    itemsEnd = offset + perPage;
   }
 
   const lastPage = getLastPage();

package/src/components/Pagination/examples/Pagination.md

@@ -45,6 +45,11 @@ By not passing `itemCount` and passing `toggleTemplate` you can customize the to
 ```ts file="./PaginationCompact.tsx"
 ```
 
+### Offset
+
+```ts file="./PaginationOffset.tsx"
+```
+
 ### Sticky
 
 ```ts isFullscreen file="./PaginationSticky.tsx"

package/src/components/Pagination/examples/PaginationOffset.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationOffset: React.FunctionComponent = () => {
+  const [offset, setOffset] = React.useState(7);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onSetPage = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    _perPage: number | undefined,
+    startIdx: number | undefined
+  ) => {
+    setOffset(startIdx || 0);
+  };
+  const onPerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number) => {
+    setPerPage(newPerPage);
+    setOffset(0);
+  };
+
+  return (
+    <Pagination
+      itemCount={523}
+      perPage={perPage}
+      offset={offset}
+      onSetPage={onSetPage}
+      widgetId="offset-pagination-example"
+      onPerPageSelect={onPerPageSelect}
+      ouiaId="PaginationOffset"
+    />
+  );
+};

package/src/components/Pagination/examples/PaginationSticky.tsx

@@ -8,7 +8,7 @@ export const PaginationSticky: React.FunctionComponent = () => {
   const itemCount = 523;
 
   const onToggleSticky = () => {
-    setIsTopSticky(prev => !prev);
+    setIsTopSticky((prev) => !prev);
   };
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {

package/src/components/Popover/Popover.tsx

@@ -14,7 +14,7 @@ import popoverMaxWidth from '@patternfly/react-tokens/dist/esm/c_popover_MaxWidt
 import popoverMinWidth from '@patternfly/react-tokens/dist/esm/c_popover_MinWidth';
 import { ReactElement } from 'react';
 import { FocusTrap } from '../../helpers';
-import { Popper, getOpacityTransition } from '../../helpers/Popper/Popper';
+import { Popper } from '../../helpers/Popper/Popper';
 import { getUniqueId } from '../../helpers/util';
 
 export enum PopoverPosition {
@@ -78,6 +78,10 @@ export interface PopoverProps {
   closeBtnAriaLabel?: string;
   /** Distance of the popover to its target. Defaults to 25. */
   distance?: number;
+  /** The element to focus when the popover becomes visible. By default the first
+   * focusable element will receive focus.
+   */
+  elementToFocus?: HTMLElement | SVGElement | string;
   /**
    * If true, tries to keep the popover in view by flipping it if necessary.
    * If the position is set to 'auto', this prop is ignored.
@@ -203,6 +207,8 @@ export interface PopoverProps {
   shouldOpen?: (event: MouseEvent | KeyboardEvent, showFunction?: () => void) => void;
   /** Flag indicating whether the close button should be shown. */
   showClose?: boolean;
+  /** Sets an interaction to open popover, defaults to "click" */
+  triggerAction?: 'click' | 'hover';
   /** Whether to trap focus in the popover. */
   withFocusTrap?: boolean;
   /** The z-index of the popover. */
@@ -241,6 +247,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   onShown = (): void => null,
   onMount = (): void => null,
   zIndex = 9999,
+  triggerAction = 'click',
   minWidth = popoverMinWidth && popoverMinWidth.value,
   maxWidth = popoverMaxWidth && popoverMaxWidth.value,
   closeBtnAriaLabel = 'Close',
@@ -266,6 +273,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   triggerRef,
   hasNoPadding = false,
   hasAutoWidth = false,
+  elementToFocus,
   ...rest
 }: PopoverProps) => {
   // could make this a prop in the future (true | false | 'toggle')
@@ -273,11 +281,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   const uniqueId = id || getUniqueId();
   const triggerManually = isVisible !== null;
   const [visible, setVisible] = React.useState(false);
-  const [opacity, setOpacity] = React.useState(0);
   const [focusTrapActive, setFocusTrapActive] = React.useState(Boolean(propWithFocusTrap));
-  const transitionTimerRef = React.useRef(null);
-  const showTimerRef = React.useRef(null);
-  const hideTimerRef = React.useRef(null);
   const popoverRef = React.useRef(null);
 
   React.useEffect(() => {
@@ -286,7 +290,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   React.useEffect(() => {
     if (triggerManually) {
       if (isVisible) {
-        show();
+        show(undefined, true);
       } else {
         hide();
       }
@@ -294,34 +298,15 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   }, [isVisible, triggerManually]);
   const show = (event?: MouseEvent | KeyboardEvent, withFocusTrap?: boolean) => {
     event && onShow(event);
-
-    if (transitionTimerRef.current) {
-      clearTimeout(transitionTimerRef.current);
-    }
-    if (hideTimerRef.current) {
-      clearTimeout(hideTimerRef.current);
-    }
-    showTimerRef.current = setTimeout(() => {
-      setVisible(true);
-      setOpacity(1);
-      propWithFocusTrap !== false && withFocusTrap && setFocusTrapActive(true);
-      onShown();
-    }, 0);
+    setVisible(true);
+    propWithFocusTrap !== false && withFocusTrap && setFocusTrapActive(true);
   };
+
   const hide = (event?: MouseEvent | KeyboardEvent) => {
     event && onHide(event);
-    if (showTimerRef.current) {
-      clearTimeout(showTimerRef.current);
-    }
-    hideTimerRef.current = setTimeout(() => {
-      setVisible(false);
-      setOpacity(0);
-      setFocusTrapActive(false);
-      transitionTimerRef.current = setTimeout(() => {
-        onHidden();
-      }, animationDuration);
-    }, 0);
+    setVisible(false);
   };
+
   const positionModifiers = {
     top: styles.modifiers.top,
     bottom: styles.modifiers.bottom,
@@ -377,11 +362,45 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       }
     }
   };
+
   const onContentMouseDown = () => {
     if (focusTrapActive) {
       setFocusTrapActive(false);
     }
   };
+
+  const onMouseEnter = (event: MouseEvent) => {
+    if (triggerManually) {
+      shouldOpen(event as MouseEvent, show);
+    } else {
+      show(event as MouseEvent, false);
+    }
+  };
+
+  const onMouseLeave = (event: MouseEvent) => {
+    if (triggerManually) {
+      shouldClose(event as MouseEvent, hide);
+    } else {
+      hide(event);
+    }
+  };
+
+  const onFocus = (event: FocusEvent) => {
+    if (triggerManually) {
+      shouldOpen(event as MouseEvent | KeyboardEvent, show);
+    } else {
+      show(event as MouseEvent | KeyboardEvent, false);
+    }
+  };
+
+  const onBlur = (event: FocusEvent) => {
+    if (triggerManually) {
+      shouldClose(event as MouseEvent | KeyboardEvent, hide);
+    } else {
+      hide(event as MouseEvent | KeyboardEvent);
+    }
+  };
+
   const closePopover = (event: MouseEvent) => {
     event.stopPropagation();
     if (triggerManually) {
@@ -390,6 +409,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       hide(event);
     }
   };
+
   const content = (
     <FocusTrap
       ref={popoverRef}
@@ -397,7 +417,20 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       focusTrapOptions={{
         returnFocusOnDeactivate: true,
         clickOutsideDeactivates: true,
+        // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
+        // We want to prevent this in case false is ever passed in.
+        initialFocus: elementToFocus || undefined,
+        checkCanFocusTrap: (containers) =>
+          new Promise((resolve) => {
+            const interval = setInterval(() => {
+              if (containers.every((container) => getComputedStyle(container).visibility !== 'hidden')) {
+                resolve();
+                clearInterval(interval);
+              }
+            }, 10);
+          }),
         tabbableOptions: { displayCheck: 'none' },
+
         fallbackFocus: () => {
           // If the popover's trigger is focused but scrolled out of view,
           // FocusTrap will throw an error when the Enter button is used on the trigger.
@@ -426,15 +459,15 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       onMouseDown={onContentMouseDown}
       style={{
         minWidth: hasCustomMinWidth ? minWidth : null,
-        maxWidth: hasCustomMaxWidth ? maxWidth : null,
-        opacity,
-        transition: getOpacityTransition(animationDuration)
+        maxWidth: hasCustomMaxWidth ? maxWidth : null
       }}
       {...rest}
     >
       <PopoverArrow />
       <PopoverContent>
-        {showClose && <PopoverCloseButton onClose={closePopover} aria-label={closeBtnAriaLabel} />}
+        {showClose && triggerAction === 'click' && (
+          <PopoverCloseButton onClose={closePopover} aria-label={closeBtnAriaLabel} />
+        )}
         {headerContent && (
           <PopoverHeader
             id={`popover-${uniqueId}-header`}
@@ -468,15 +501,25 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
         minWidth={minWidth}
         appendTo={appendTo}
         isVisible={visible}
+        onMouseEnter={triggerAction === 'hover' && onMouseEnter}
+        onMouseLeave={triggerAction === 'hover' && onMouseLeave}
+        onPopperMouseEnter={triggerAction === 'hover' && onMouseEnter}
+        onPopperMouseLeave={triggerAction === 'hover' && onMouseLeave}
+        onFocus={triggerAction === 'hover' && onFocus}
+        onBlur={triggerAction === 'hover' && onBlur}
         positionModifiers={positionModifiers}
         distance={distance}
         placement={position}
-        onTriggerClick={onTriggerClick}
+        onTriggerClick={triggerAction === 'click' && onTriggerClick}
         onDocumentClick={onDocumentClick}
         onDocumentKeyDown={onDocumentKeyDown}
         enableFlip={enableFlip}
         zIndex={zIndex}
         flipBehavior={flipBehavior}
+        animationDuration={animationDuration}
+        onHidden={onHidden}
+        onShown={onShown}
+        onHide={() => setFocusTrapActive(false)}
       />
     </PopoverContext.Provider>
   );

package/src/components/Popover/PopoverHeader.tsx

@@ -36,7 +36,7 @@ export const PopoverHeader: React.FunctionComponent<PopoverHeaderProps> = ({
       {icon && <PopoverHeaderIcon>{icon}</PopoverHeaderIcon>}
       <PopoverHeaderText headingLevel={titleHeadingLevel}>
         {alertSeverityVariant && alertSeverityScreenReaderText && (
-          <span className="pf-v5-u-screen-reader">{alertSeverityScreenReaderText}</span>
+          <span className="pf-v5-screen-reader">{alertSeverityScreenReaderText}</span>
         )}
         {children}
       </PopoverHeaderText>

package/src/components/Popover/PopoverHeaderText.tsx

@@ -20,8 +20,9 @@ export const PopoverHeaderText: React.FunctionComponent<PopoverHeaderTextProps>
   const HeadingLevel = headingLevel;
 
   return (
-  <HeadingLevel className={css(styles.popoverTitleText, className)} {...props}>
-    {children}
-  </HeadingLevel>);
+    <HeadingLevel className={css(styles.popoverTitleText, className)} {...props}>
+      {children}
+    </HeadingLevel>
+  );
 };
 PopoverHeaderText.displayName = 'PopoverHeaderText';

package/src/components/Popover/examples/Popover.md

@@ -19,11 +19,19 @@ By default, the `appendTo` prop of the popover will append to the document body
 ### Basic
 
 ```ts file="./PopoverBasic.tsx"
+
+```
+
+### Hoverable
+
+```ts file="./PopoverHover.tsx"
+
 ```
 
 ### Close popover from content (controlled)
 
 ```ts file="./PopoverCloseControlled.tsx"
+
 ```
 
 ### Close popover from content (uncontrolled)
@@ -31,11 +39,13 @@ By default, the `appendTo` prop of the popover will append to the document body
 Note: If you use the isVisible prop, either refer to the example above or if you want to use the hide callback from the content then be sure to keep isVisible in-sync.
 
 ```ts file="./PopoverCloseUncontrolled.tsx"
+
 ```
 
 ### Without header/footer/close and no padding
 
 ```ts file="./PopoverWithoutHeaderFooterCloseNoPadding.tsx"
+
 ```
 
 ### Width auto
@@ -43,33 +53,47 @@ Note: If you use the isVisible prop, either refer to the example above or if you
 Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
 
 ```ts file="./PopoverWidthAuto.tsx"
+
 ```
 
 ### Popover react ref
 
 ```ts file="./PopoverReactRef.tsx"
+
 ```
 
 ### Popover selector ref
 
 ```ts file="./PopoverSelectorRef.tsx"
+
 ```
 
 ### Advanced
 
 ```ts file="./PopoverAdvanced.tsx"
+
 ```
 
 ### Popover with icon in the title
 
 Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
 
-```ts file="./PopoverWithIconInTheTitle.tsx" 
+```ts file="./PopoverWithIconInTheTitle.tsx"
+
 ```
 
 ### Alert popover
 
 Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
 
-```ts file="./PopoverAlert.tsx" 
+```ts file="./PopoverAlert.tsx"
+
+```
+
+### Custom focus
+
+Use the `elementToFocus` property to customize which element inside the Popover receives focus when opened.
+
+```ts file="./PopoverCustomFocus.tsx"
+
 ```