feat: extend PopperProps in derivative component types

packages/react-core/src/components/Dropdown/Dropdown.tsx

@@ -1,27 +1,11 @@
 import { forwardRef, useEffect, useRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
-import { Popper } from '../../helpers/Popper/Popper';
+import { Popper, PopperOptions } from '../../helpers/Popper/Popper';
 import { useOUIAProps, OUIAProps, onToggleArrowKeydownDefault } from '../../helpers';
 
-export interface DropdownPopperProps {
-  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
-  direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center' | 'start' | 'end';
-  /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
-  width?: string | 'trigger';
-  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
-  minWidth?: string | 'trigger';
-  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */
-  maxWidth?: string | 'trigger';
-  /** Enable to flip the popper when it reaches the boundary */
-  enableFlip?: boolean;
-  /** The container to append the popper to. Defaults to document.body. */
-  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
-  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
-  preventOverflow?: boolean;
-}
+/** @deprecated Use PopperOptions instead */
+export type DropdownPopperProps = PopperOptions;
 
 export interface DropdownToggleProps {
   /**  Dropdown toggle node. */
@@ -66,7 +50,7 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
-  popperProps?: DropdownPopperProps;
+  popperProps?: PopperOptions;
   /** Height of the dropdown menu */
   menuHeight?: string;
   /** Maximum height of dropdown menu */

packages/react-core/src/components/Dropdown/examples/Dropdown.md

@@ -11,8 +11,8 @@ propComponents:
     'DropdownList',
     'MenuToggle',
     'DropdownToggleProps',
-    'DropdownPopperProps',
-    'TooltipProps'
+    'TooltipProps',
+    'PopperOptions'
   ]
 ---
 

packages/react-core/src/components/Menu/MenuContainer.tsx

@@ -1,22 +1,9 @@
 import { useEffect, useRef } from 'react';
 import { onToggleArrowKeydownDefault, Popper } from '../../helpers';
+import type { PopperOptions } from '../../helpers/Popper/Popper';
 
-export interface MenuPopperProps {
-  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
-  direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center' | 'start' | 'end';
-  /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
-  width?: string | 'trigger';
-  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
-  minWidth?: string | 'trigger';
-  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */
-  maxWidth?: string | 'trigger';
-  /** Enable to flip the popper when it reaches the boundary */
-  enableFlip?: boolean;
-  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
-  preventOverflow?: boolean;
-}
+/** @deprecated Use PopperOptions instead */
+export type MenuPopperProps = PopperOptions;
 
 export interface MenuContainerProps {
   /** Menu to be rendered */
@@ -39,7 +26,7 @@ export interface MenuContainerProps {
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
-  popperProps?: MenuPopperProps;
+  popperProps?: PopperOptions;
   /** @beta Flag indicating the first menu item should be focused after opening the dropdown. */
   shouldFocusFirstItemOnOpen?: boolean;
   /** Flag indicating if scroll on focus of the first menu item should occur. */

packages/react-core/src/components/Menu/examples/Menu.md

@@ -14,8 +14,8 @@ propComponents:
     'MenuSearchInput',
     'MenuGroup',
     'MenuContainer',
-    'MenuPopperProps',
-    'TooltipProps'
+    'TooltipProps',
+    'PopperOptions'
   ]
 ouia: true
 ---
@@ -241,4 +241,4 @@ Router links can be used for in-app linking in React environments to prevent pag
 >
   {...Link Content}
 </MenuItem>
-```
+```

packages/react-core/src/components/Select/Select.tsx

@@ -1,33 +1,11 @@
 import { forwardRef, useEffect, useRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
-import { Popper } from '../../helpers/Popper/Popper';
+import { Popper, PopperOptions } from '../../helpers/Popper/Popper';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId, onToggleArrowKeydownDefault } from '../../helpers';
 
-export interface SelectPopperProps {
-  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
-  direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center' | 'start' | 'end';
-  /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */
-  width?: string | 'trigger';
-  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */
-  minWidth?: string | 'trigger';
-  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the select toggle's width */
-  maxWidth?: string | 'trigger';
-  /** Enable to flip the popper when it reaches the boundary */
-  enableFlip?: boolean;
-  /** The container to append the select to. Defaults to document.body.
-   * If your select is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * appendTo="inline"
-   * appendTo={() => document.body}
-   * appendTo={document.getElementById('target')}
-   */
-  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
-  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
-  preventOverflow?: boolean;
-}
+/** @deprecated Use PopperOptions instead */
+export type SelectPopperProps = PopperOptions;
 
 export interface SelectToggleProps {
   /**  Select toggle node. */
@@ -75,7 +53,7 @@ export interface SelectProps extends MenuProps, OUIAProps {
   /** Determines the accessible role of the select. For a checkbox select pass in "menu". */
   role?: string;
   /** Additional properties to pass to the popper */
-  popperProps?: SelectPopperProps;
+  popperProps?: PopperOptions;
   /** Height of the select menu */
   menuHeight?: string;
   /** Maximum height of select menu */

packages/react-core/src/components/Select/examples/Select.md

@@ -4,7 +4,7 @@ section: components
 subsection: menus
 cssPrefix: pf-v6-c-select
 propComponents:
-  ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'SelectPopperProps']
+  ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'PopperOptions']
 ouia: true
 ---
 

packages/react-core/src/components/Tabs/OverflowTab.tsx

@@ -2,36 +2,14 @@ import { Fragment, useContext, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { Popper } from '../../helpers';
+import { Popper, PopperOptions } from '../../helpers';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
 import { TabsContext } from './TabsContext';
 import { TabProps } from './Tab';
 import { TabTitleText } from './TabTitleText';
 
-export interface HorizontalOverflowPopperProps {
-  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
-  direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center' | 'start' | 'end';
-  /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */
-  width?: string | 'trigger';
-  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */
-  minWidth?: string | 'trigger';
-  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the select toggle's width */
-  maxWidth?: string | 'trigger';
-  /** Enable to flip the popper when it reaches the boundary */
-  enableFlip?: boolean;
-  /** The container to append the select to. Defaults to document.body.
-   * If your select is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * appendTo="inline"
-   * appendTo={() => document.body}
-   * appendTo={document.getElementById('target')}
-   */
-  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
-  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
-  preventOverflow?: boolean;
-}
+/** @deprecated Use PopperOptions instead */
+export type HorizontalOverflowPopperProps = PopperOptions;
 
 export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
   /** Additional classes added to the overflow tab */
@@ -51,7 +29,7 @@ export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
   /** Time in ms to wait before firing the toggles' focus event. Defaults to 0 */
   focusTimeoutDelay?: number;
   /** Additional props to spread to the popper menu. */
-  popperProps?: HorizontalOverflowPopperProps;
+  popperProps?: PopperOptions;
 }
 
 export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({

packages/react-core/src/components/Tabs/examples/Tabs.md

@@ -2,7 +2,7 @@
 id: Tabs
 section: components
 cssPrefix: pf-v6-c-tabs
-propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'HorizontalOverflowObject', 'HorizontalOverflowPopperProps', 'TabAction']
+propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'HorizontalOverflowObject', 'TabAction', 'PopperOptions']
 ouia: true
 ---
 
@@ -22,24 +22,24 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 A `<Tabs>` component contains multiple `<Tab>` components that may be used to navigate between sets of content within a page.
 
-You can adjust a tab in the following ways: 
+You can adjust a tab in the following ways:
 
 - To label a tab with text, pass a `<TabTitleText>` component into the `title` property of a `<Tab>`.
-- To disable a tab, use the `isDisabled` property. Tabs using `isDisabled` are not perceivable or operable by users navigating via assistive technologies. 
+- To disable a tab, use the `isDisabled` property. Tabs using `isDisabled` are not perceivable or operable by users navigating via assistive technologies.
 - To disable a tab, but keep it perceivable to assistive technology users, use the `isAriaDisabled` property. If a disabled tab has a tooltip, use this property instead of `isDisabled`.
-- To add a tooltip to an aria-disabled tab, use the `tooltip` property. 
+- To add a tooltip to an aria-disabled tab, use the `tooltip` property.
 
-Tabs can be styled as 'default' or 'boxed': 
+Tabs can be styled as 'default' or 'boxed':
 
-- Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab. 
+- Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab.
 - Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the 'isBox' checkbox, which sets the `isBox` property to true.
 
 ```ts file="./TabsDefault.tsx"
 ```
 
 ### Boxed secondary tabs
 
-To change the background color of boxed tabs or the tab content, use the `variant` property. 
+To change the background color of boxed tabs or the tab content, use the `variant` property.
 
 Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the following example.
 
@@ -50,14 +50,14 @@ Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the f
 
 Vertical tabs are placed on the left-hand side of a page or container and may appear in both 'default' and 'boxed' tab variations.
 
-To style tabs vertically, use the `isVertical` property. 
+To style tabs vertically, use the `isVertical` property.
 
 ```ts file="./TabsVertical.tsx"
 ```
 
 ### Vertical expandable tabs
 
-Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs. 
+Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs.
 
 Expandable tabs can be enabled at different breakpoints. The following example passes `expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}` into the `<Tabs>` component.
 
@@ -75,14 +75,14 @@ To flag the default expanded state for uncontrolled tabs, use the `defaultIsExpa
 
 ### Default overflow tabs
 
-By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows. 
+By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows.
 
 ```ts file="./TabsDefaultOverflow.tsx"
 ```
 
 ### Horizontal overflow tabs
 
-Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content. 
+Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content.
 
 To enable horizontal overflow, use the `isOverflowHorizontal` property.
 
@@ -102,7 +102,7 @@ The tooltip should also have the `id` property passed in. The value of `id` shou
 
 ### Uncontrolled tabs
 
-To allow the `<Tabs>` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example. 
+To allow the `<Tabs>` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example.
 
 
 ```ts file="./TabsUncontrolled.tsx"
@@ -124,7 +124,7 @@ To adjust the left padding of tabs, use the `usePageInsets` property. This prope
 
 ### With icons and text
 
-You can render different content in the `title` property of a tab to add icons and text. 
+You can render different content in the `title` property of a tab to add icons and text.
 
 To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the icon of your choice into the `title`. To use an icon alongside styled text, keep the text in the `<TabTitleText>` component.
 
@@ -133,53 +133,53 @@ To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the ico
 
 ### Subtabs
 
-Use subtabs within other components, like modals. Subtabs have less visually prominent styling. 
+Use subtabs within other components, like modals. Subtabs have less visually prominent styling.
 
-To apply subtab styling to tabs, use the `isSubtab` property. 
+To apply subtab styling to tabs, use the `isSubtab` property.
 
 ```ts file="./TabsSubtabs.tsx"
 ```
 
 ### Filled tabs with icons
 
-To allow tabs to fill the available width of the page section, use the `isFilled` property. 
+To allow tabs to fill the available width of the page section, use the `isFilled` property.
 
 ```ts file="./TabsFilledWithIcons.tsx"
 ```
 
 ### Tabs linked to nav elements
 
-To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component` property. 
+To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component` property.
 
-Nav tabs should use the `href` property to link the tab to the URL of another page or page section. A tab with an `href` will render as an `<a>` instead of a `<button>`. 
+Nav tabs should use the `href` property to link the tab to the URL of another page or page section. A tab with an `href` will render as an `<a>` instead of a `<button>`.
 
 ```ts file="./TabsNav.tsx"
 ```
 
 ### Subtabs linked to nav elements
 
-Subtabs can also link to nav elements. 
+Subtabs can also link to nav elements.
 
 ```ts file="./TabsNavSubtab.tsx"
 ```
 
 ### With separate content
 
-If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties 
+If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties
 
 ```ts file="./TabsSeparateContent.tsx"
 ```
 
 ### With tab content with body and padding
 
-To add a content body to a `<TabContent>` component, pass a `<TabContentBody>`. To add padding to the body section, use the `hasPadding` property. 
+To add a content body to a `<TabContent>` component, pass a `<TabContentBody>`. To add padding to the body section, use the `hasPadding` property.
 
 ```ts file="./TabsContentWithBodyPadding.tsx"
 ```
 
 ### Children mounting on click
 
-To mount tab children (add to the DOM) when a tab is clicked, use the `mountOnEnter` property. 
+To mount tab children (add to the DOM) when a tab is clicked, use the `mountOnEnter` property.
 
 Note that this property does not create the tab children until the tab is clicked, so they are not preloaded into the DOM.
 
@@ -197,30 +197,30 @@ To unmount tab children (remove from the DOM) when they are no longer visible, u
 
 You may control tabs from outside of the tabs component. For example, select the "Hide tab 2" button below to make "Tab item  2" invisible.
 
-The tab its content should only be mounted when the tab is visible. 
+The tab its content should only be mounted when the tab is visible.
 
 ```ts file="./TabsToggledSeparateContent.tsx"
 ```
 
 ### Dynamic tabs
 
-To enable closeable tabs, pass the `onClose` property to the `<Tabs>` component. To enable a button that adds new tabs, pass the `onAdd` property to `<Tabs>`. 
+To enable closeable tabs, pass the `onClose` property to the `<Tabs>` component. To enable a button that adds new tabs, pass the `onAdd` property to `<Tabs>`.
 
 ```ts file="./TabsDynamic.tsx"
 ```
 
 ### With help action popover
 
-You may add a help action to a tab to provide users with additional context in a popover. 
+You may add a help action to a tab to provide users with additional context in a popover.
 
-To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property. 
+To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property.
 
 ```ts file="./TabsHelp.tsx"
 ```
 
 ### With help and close actions
 
-To add multiple actions to a tab, create a `<TabAction>` component for each action. 
+To add multiple actions to a tab, create a `<TabAction>` component for each action.
 
 The following example passes in both help popover and close actions.