@patternfly/react-core 6.3.1-prerelease.9 → 6.4.0-prerelease.1

package/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
 ---
 

package/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> = ({

package/src/components/Tabs/Tabs.tsx

@@ -54,9 +54,9 @@ export interface TabsProps
   /** The index of the default active tab. Set this for uncontrolled Tabs */
   defaultActiveKey?: number | string;
   /** Callback to handle tab selection */
-  onSelect?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
+  onSelect?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: TabProps['eventKey']) => void;
   /** Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property. */
-  onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
+  onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: TabProps['eventKey']) => void;
   /** Callback for the add button. Passing this property inserts the add button */
   onAdd?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   /** Aria-label for the add button */
@@ -576,8 +576,12 @@ class Tabs extends Component<TabsProps, TabsState> {
           )}
           {...getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
           id={id && id}
-          style={{ [linkAccentLength.name]: currentLinkAccentLength, [linkAccentStart.name]: currentLinkAccentStart }}
           {...props}
+          style={{
+            [linkAccentLength.name]: currentLinkAccentLength,
+            [linkAccentStart.name]: currentLinkAccentStart,
+            ...props.style
+          }}
         >
           {expandable && isVertical && (
             <GenerateId>

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

@@ -562,3 +562,15 @@ test('should render an enabled add button', () => {
   const addButton = screen.getByLabelText('add-label');
   expect(addButton).not.toBeDisabled();
 });
+
+test(`should render with custom inline style and accent position inline style`, () => {
+  render(
+    <Tabs role="region" style="background-color: #12345;">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveStyle(`background-color: #12345;--pf-v6-c-tabs--link-accent--start: 0px;`);
+});

package/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,16 +22,16 @@ 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"
@@ -39,7 +39,7 @@ Tabs can be styled as 'default' or 'boxed':
 
 ### 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.
 

package/src/components/TreeView/TreeView.tsx

@@ -1,6 +1,7 @@
 import { TreeViewList } from './TreeViewList';
 import { TreeViewCheckProps, TreeViewListItem } from './TreeViewListItem';
 import { TreeViewRoot } from './TreeViewRoot';
+import { useHasAnimations } from '../../helpers';
 
 /** Properties that make up a tree view data item. These properties should be passed in as an
  * object to one of the various tree view component properties which accept TreeViewDataItem as
@@ -135,9 +136,10 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   useMemo,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
-  hasAnimations,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: TreeViewProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const treeViewList = (
     <TreeViewList
       isNested={isNested}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -5,6 +5,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import { TreeViewDataItem } from './TreeView';
 import { Badge } from '../Badge';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useHasAnimations } from '../../helpers';
 
 export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttributes<HTMLInputElement>>, 'checked'> {
   checked?: boolean | null;
@@ -102,10 +103,11 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   expandedIcon,
   action,
   compareItems,
-  hasAnimations,
+  hasAnimations: hasAnimationsProp,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo
 }: TreeViewListItemProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const [internalIsExpanded, setIsExpanded] = useState(defaultExpanded);
   useEffect(() => {
     if (isExpanded !== undefined && isExpanded !== null) {

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TreeView } from '../TreeView';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 
 jest.mock('../TreeViewList', () => ({
   TreeViewList: ({
@@ -293,6 +294,33 @@ test('Passes hasAnimations to TreeViewListItem', () => {
 
   expect(screen.getByText('TreeViewListItem hasAnimations: true')).toBeVisible();
 });
+
+// Animation context tests
+test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TreeView data={[basicData]} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: true')).toBeVisible();
+});
+
+test('local hasAnimations prop takes precedence over context', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TreeView data={[basicData]} hasAnimations={false} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: false')).toBeVisible();
+});
+
+test('works without AnimationsProvider (backward compatibility)', () => {
+  render(<TreeView data={[basicData]} />);
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: false')).toBeVisible();
+});
 test('Passes data.children to TreeViewListItem', () => {
   render(<TreeView data={[{ ...basicData, children: [{ name: 'Child 1' }] }]} />);
 

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

@@ -105,7 +105,7 @@ exports[`Matches snapshot 1`] = `
               TreeViewListItem useMemo: undefined
             </p>
             <p>
-              TreeViewListItem hasAnimations: undefined
+              TreeViewListItem hasAnimations: false
             </p>
             <button>
               compareItems clicker

package/src/components/Truncate/Truncate.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState, forwardRef } from 'react';
+import { Fragment, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition, TooltipProps } from '../Tooltip';
@@ -75,6 +75,7 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
   maxCharsDisplayed,
   omissionContent = '\u2026',
   content,
+  innerRef,
   ...props
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = useState(true);
@@ -83,6 +84,7 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
   const [shouldRenderByMaxChars, setShouldRenderByMaxChars] = useState(maxCharsDisplayed > 0);
 
   const textRef = useRef<HTMLElement>(null);
+  useImperativeHandle(innerRef, () => textRef.current!);
   const defaultSubParentRef = useRef<any>(null);
   const subParentRef = tooltipProps?.triggerRef || defaultSubParentRef;
   const observer = useRef(null);

package/src/components/Truncate/examples/TruncateExamples.css

@@ -4,6 +4,6 @@
   overflow: auto;
   min-width: 161px;
   max-width: 100%;
-  padding: var(--pf-v6-global--spacer--md);
-  border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--100);
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
 }

package/src/helpers/AnimationsProvider/AnimationsProvider.tsx

@@ -0,0 +1,104 @@
+import { createContext, useContext, FunctionComponent, ReactNode } from 'react';
+
+/** Configuration for animations throughout PatternFly components */
+export interface AnimationsConfig {
+  /** Whether animations are enabled globally */
+  hasAnimations?: boolean;
+}
+
+/** Props for the AnimationsProvider component */
+export interface AnimationsProviderProps {
+  /** Animation configuration settings */
+  config: AnimationsConfig;
+  /** Child components that will have access to the animations context */
+  children: ReactNode;
+}
+
+/** Context to provide animations configuration to child components */
+const AnimationsContext = createContext<AnimationsConfig>({
+  hasAnimations: false
+});
+
+/**
+ * AnimationsProvider is an application-level provider that provides uniform
+ * animation configuration for all PatternFly React components via the React context API.
+ *
+ * **Usage**: Place this provider at the root of your application to enable global
+ * animation control without requiring manual prop drilling throughout your component tree.
+ *
+ * **Benefits**:
+ * - Centralized animation control for the entire application
+ * - Respects user accessibility preferences (reduced motion)
+ * - Components can still override the global setting when needed
+ * - Works with all PatternFly components that support animations
+ *
+ * @example
+ * ```tsx
+ * // App.tsx - Place at your application root
+ * import { AnimationsProvider } from '@patternfly/react-core';
+ *
+ * const App = () => (
+ *   <AnimationsProvider config={{ hasAnimations: true }}>
+ *     <MyApplication />
+ *   </AnimationsProvider>
+ * );
+ * ```
+ */
+export const AnimationsProvider: FunctionComponent<AnimationsProviderProps> = ({ config, children }) => (
+  <AnimationsContext.Provider value={config}>{children}</AnimationsContext.Provider>
+);
+
+/**
+ * Hook to access the animations configuration from the nearest AnimationsProvider.
+ *
+ * This hook allows components to check if animations are enabled and override
+ * their local hasAnimations prop accordingly.
+ *
+ * @returns The animations configuration object
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = ({ hasAnimations: hasAnimationsProp, ...props }) => {
+ *   const { hasAnimations: contextHasAnimations } = useAnimationsConfig();
+ *   const hasAnimations = hasAnimationsProp ?? contextHasAnimations;
+ *
+ *   return <div className={hasAnimations ? 'with-animations' : ''} {...props} />;
+ * };
+ * ```
+ */
+export const useAnimationsConfig = (): AnimationsConfig => {
+  const context = useContext(AnimationsContext);
+
+  if (context === undefined) {
+    // Return default config if no provider is found
+    return { hasAnimations: false };
+  }
+
+  return context;
+};
+
+/**
+ * Utility hook that combines local hasAnimations prop with context configuration.
+ * The local prop takes precedence when explicitly set, otherwise falls back to context.
+ *
+ * @param hasAnimationsProp - The hasAnimations prop passed directly to the component
+ * @returns The resolved hasAnimations value
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = ({ hasAnimations: hasAnimationsProp, ...props }) => {
+ *   const hasAnimations = useHasAnimations(hasAnimationsProp);
+ *
+ *   return <div className={hasAnimations ? 'animated' : 'static'} {...props} />;
+ * };
+ * ```
+ */
+export const useHasAnimations = (hasAnimationsProp?: boolean): boolean => {
+  const { hasAnimations: contextHasAnimations } = useAnimationsConfig();
+
+  // Local prop takes precedence when explicitly set (including false)
+  // If local prop is undefined, fall back to context
+  return hasAnimationsProp ?? contextHasAnimations ?? false;
+};
+
+AnimationsProvider.displayName = 'AnimationsProvider';