@patternfly/react-core 6.5.0-prerelease.3 → 6.5.0-prerelease.31

package/src/components/Nav/NavItem.tsx

@@ -1,4 +1,14 @@
-import { cloneElement, Fragment, isValidElement, useContext, useEffect, useRef, useState } from 'react';
+import {
+  cloneElement,
+  Fragment,
+  isValidElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  forwardRef,
+  MutableRefObject
+} from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 import dividerStyles from '@patternfly/react-styles/css/components/Divider/divider';
@@ -42,9 +52,13 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** React ref for the anchor element within the nav item. */
+  anchorRef?: React.Ref<HTMLAnchorElement>;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLLIElement>;
 }
 
-export const NavItem: React.FunctionComponent<NavItemProps> = ({
+const NavItemBase: React.FunctionComponent<NavItemProps> = ({
   children,
   styleChildren = true,
   className,
@@ -61,13 +75,16 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   ouiaSafe,
   zIndex = 9999,
   icon,
+  innerRef,
+  anchorRef,
   ...props
 }: NavItemProps) => {
   const { flyoutRef, setFlyoutRef, navRef } = useContext(NavContext);
   const { isSidebarOpen } = useContext(PageSidebarContext);
   const [flyoutTarget, setFlyoutTarget] = useState(null);
   const [isHovered, setIsHovered] = useState(false);
-  const ref = useRef<HTMLLIElement>(undefined);
+  const _ref = useRef<HTMLLIElement>(undefined);
+  const ref = (innerRef as MutableRefObject<HTMLLIElement>) || _ref;
   const flyoutVisible = ref === flyoutRef;
   const popperRef = useRef<HTMLDivElement>(undefined);
   const hasFlyout = flyout !== undefined;
@@ -180,6 +197,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     const preventLinkDefault = preventDefault || !to;
     return (
       <Component
+        ref={anchorRef}
         href={to}
         onClick={(e: any) => context.onSelect(e, groupId, itemId, to, preventLinkDefault, onClick)}
         className={css(
@@ -208,6 +226,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         className: css(styles.navLink, isActive && styles.modifiers.current, child.props && child.props.className)
       }),
       tabIndex: child.props.tabIndex || tabIndex,
+      ref: anchorRef,
       children: hasFlyout ? (
         <Fragment>
           {child.props.children}
@@ -267,4 +286,9 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
 
   return navItem;
 };
+
+export const NavItem = forwardRef<HTMLLIElement, NavItemProps>((props, ref) => (
+  <NavItemBase {...props} innerRef={ref} />
+));
+
 NavItem.displayName = 'NavItem';

package/src/components/Nav/NavList.tsx

@@ -9,8 +9,10 @@ import { NavContext } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 
-export interface NavListProps
-  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
+export interface NavListProps extends React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLUListElement>,
+  HTMLUListElement
+> {
   /** Children nodes */
   children?: React.ReactNode;
   /** Additional classes added to the list */

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

@@ -259,4 +259,19 @@ describe('Nav', () => {
     );
     expect(screen.getAllByText('this is an icon')[0].parentElement).toHaveClass(styles.navLinkIcon);
   });
+
+  test(`Renders with ${styles.modifiers.docked} class when variant is docked`, () => {
+    renderNav(
+      <Nav variant="docked" data-testid="docked-nav">
+        <NavList>
+          {props.items.map((item) => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    );
+    expect(screen.getByTestId('docked-nav')).toHaveClass(styles.modifiers.docked);
+  });
 });

package/src/components/Page/Page.tsx

@@ -20,6 +20,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the page layout */
   className?: string;
+  /** @beta Indicates the layout variant */
+  variant?: 'default' | 'docked';
   /** Masthead component (e.g. <Masthead />) */
   masthead?: React.ReactNode;
   /** Sidebar component for a side nav, recommended to be a PageSidebar. If set to null, the page grid layout
@@ -229,6 +231,7 @@ class Page extends Component<PageProps, PageState> {
       isBreadcrumbWidthLimited,
       className,
       children,
+      variant,
       masthead,
       sidebar,
       notificationDrawer,
@@ -336,6 +339,7 @@ class Page extends Component<PageProps, PageState> {
           {...rest}
           className={css(
             styles.page,
+            variant === 'docked' && styles.modifiers.dock,
             width !== null && height !== null && 'pf-m-resize-observer',
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
             height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
@@ -344,7 +348,7 @@ class Page extends Component<PageProps, PageState> {
           )}
         >
           {skipToContent}
-          {masthead}
+          {variant === 'docked' ? <div className={css(styles.pageDock)}>{masthead}</div> : masthead}
           {sidebar}
           {notificationDrawer && (
             <div className={css(styles.pageDrawer)}>

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

@@ -389,4 +389,21 @@ describe('Page', () => {
 
     expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
   });
+
+  test(`Renders with ${styles.modifiers.dock} class when variant is docked`, () => {
+    render(<Page {...props} variant="docked" data-testid="page"></Page>);
+
+    expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.dock);
+  });
+
+  test(`Does not render with ${styles.modifiers.dock} class when variant is default`, () => {
+    render(<Page {...props} variant="default" data-testid="page"></Page>);
+
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
+  });
+
+  test(`Does not render with ${styles.modifiers.dock} class when variant is not passed`, () => {
+    render(<Page data-testid="page"></Page>);
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
+  });
 });

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -15,8 +15,10 @@ export enum ProgressStepVariant {
   warning = 'warning'
 }
 
-export interface ProgressStepProps
-  extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
+export interface ProgressStepProps extends React.DetailedHTMLProps<
+  React.LiHTMLAttributes<HTMLLIElement>,
+  HTMLLIElement
+> {
   /** Content rendered inside the progress step. */
   children?: React.ReactNode;
   /** Additional classes applied to the progress step container. */

package/src/components/ProgressStepper/ProgressStepper.tsx

@@ -1,8 +1,10 @@
 import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 import { css } from '@patternfly/react-styles';
 
-export interface ProgressStepperProps
-  extends React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> {
+export interface ProgressStepperProps extends React.DetailedHTMLProps<
+  React.OlHTMLAttributes<HTMLOListElement>,
+  HTMLOListElement
+> {
   /** Content rendered inside the progress stepper. */
   children?: React.ReactNode;
   /** Additional classes applied to the progress stepper container. */

package/src/components/Radio/Radio.tsx

@@ -6,8 +6,7 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 import { getUniqueId } from '../../helpers/util';
 
 export interface RadioProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>, OUIAProps {
   /** Additional classes added to the radio wrapper. This wrapper will be div element by default. It will be a label element if
    * isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
    */

package/src/components/Switch/Switch.tsx

@@ -6,8 +6,7 @@ import { getUniqueId } from '../../helpers/util';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface SwitchProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>, OUIAProps {
   /** id for the label. */
   id?: string;
   /** Additional classes added to the switch */

package/src/components/Tabs/Tab.tsx

@@ -9,8 +9,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { TabAction } from './TabAction';
 
 export interface TabProps
-  extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title' | 'action'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title' | 'action'>, OUIAProps {
   /** content rendered inside the Tab content area. */
   children?: React.ReactNode;
   /** additional classes added to the Tab */

package/src/components/Tabs/Tabs.tsx

@@ -41,8 +41,7 @@ type TabElement = React.ReactElement<TabProps, React.JSXElementConstructor<TabPr
 type TabsChild = TabElement | boolean | null | undefined;
 
 export interface TabsProps
-  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'>, OUIAProps {
   /** Content rendered inside the tabs component. Only `Tab` components or expressions resulting in a falsy value are allowed here. */
   children: TabsChild | TabsChild[];
   /** Additional classes added to the tabs */
@@ -206,7 +205,6 @@ class Tabs extends Component<TabsProps, TabsState> {
     backScrollAriaLabel: 'Scroll back',
     rightScrollAriaLabel: 'Scroll right',
     forwardScrollAriaLabel: 'Scroll forward',
-    component: TabsComponent.div,
     mountOnEnter: false,
     unmountOnExit: false,
     ouiaSafe: true,
@@ -529,7 +527,8 @@ class Tabs extends Component<TabsProps, TabsState> {
     const overflowingTabProps = filteredChildrenOverflowing.map((child: React.ReactElement<TabProps>) => child.props);
 
     const uniqueId = id || getUniqueId();
-    const Component: any = component === TabsComponent.nav ? 'nav' : 'div';
+    const defaultComponent = isNav && !component ? 'nav' : 'div';
+    const Component: any = component !== undefined ? component : defaultComponent;
     const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
 
     const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded;

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

@@ -166,6 +166,66 @@ test(`Does not render with class ${styles.modifiers.initializingAccent} when unc
   expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
 });
 
+test(`Renders with class ${styles.modifiers.nav} when isNav is true`, () => {
+  render(
+    <Tabs isNav role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveClass(styles.modifiers.nav);
+});
+
+test(`Renders with div wrapper by default`, () => {
+  render(
+    <Tabs>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+});
+
+test(`Renders with nav wrapper when component="nav"`, () => {
+  render(
+    <Tabs component="nav">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+});
+
+test(`Renders with nav wrapper when isNav is true`, () => {
+  render(
+    <Tabs isNav>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+});
+
+test(`Overrides isNav nav wrapper when component="div" is passed`, () => {
+  render(
+    <Tabs component="div" isNav>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+});
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">

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

@@ -5,7 +5,7 @@ exports[`should render accessible tabs 1`] = `
   <nav
     aria-label="accessible Tabs example"
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-14"
+    data-ouia-component-id="OUIA-Generated-Tabs-19"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
@@ -122,7 +122,7 @@ exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-13"
+    data-ouia-component-id="OUIA-Generated-Tabs-18"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
@@ -281,7 +281,7 @@ exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-24"
+    data-ouia-component-id="OUIA-Generated-Tabs-29"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
@@ -398,7 +398,7 @@ exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-11"
+    data-ouia-component-id="OUIA-Generated-Tabs-16"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
@@ -605,7 +605,7 @@ exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-15"
+    data-ouia-component-id="OUIA-Generated-Tabs-20"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
@@ -722,7 +722,7 @@ exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-6"
+    data-ouia-component-id="OUIA-Generated-Tabs-11"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
@@ -881,7 +881,7 @@ exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-16"
+    data-ouia-component-id="OUIA-Generated-Tabs-21"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
@@ -967,7 +967,7 @@ exports[`should render subtabs 1`] = `
   >
     <div
       class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
-      data-ouia-component-id="OUIA-Generated-Tabs-17"
+      data-ouia-component-id="OUIA-Generated-Tabs-22"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
@@ -1110,7 +1110,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-18"
+    data-ouia-component-id="OUIA-Generated-Tabs-23"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
@@ -1228,7 +1228,7 @@ exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-25"
+    data-ouia-component-id="OUIA-Generated-Tabs-30"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
@@ -1345,7 +1345,7 @@ exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-19"
+    data-ouia-component-id="OUIA-Generated-Tabs-24"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
@@ -1472,7 +1472,7 @@ exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-9"
+    data-ouia-component-id="OUIA-Generated-Tabs-14"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
@@ -1630,7 +1630,7 @@ exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-10"
+    data-ouia-component-id="OUIA-Generated-Tabs-15"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"

package/src/components/Tabs/examples/Tabs.md

@@ -189,6 +189,14 @@ Subtabs can also link to nav elements.
 
 ```
 
+### Tabs used for site navigation
+
+Site navigation tabs
+
+```ts file="./TabsSiteNav.tsx"
+
+```
+
 ### With separate content
 
 If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties. The `hidden` property is used on `TabContent` to set the initial visible content.

package/src/components/Tabs/examples/TabsSiteNav.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+
+export const TabsSiteNav: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={handleTabClick}
+      isNav={true}
+      aria-label="Site navigation with nav styling example"
+    >
+      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#users" aria-label="Nav element content users">
+        Users
+      </Tab>
+      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href="#containers">
+        Containers
+      </Tab>
+      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} href="#database">
+        Database
+      </Tab>
+      <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href="#disabled">
+        Disabled
+      </Tab>
+      <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href="#aria-disabled">
+        ARIA Disabled
+      </Tab>
+      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>} href="#network">
+        Network
+      </Tab>
+    </Tabs>
+  );
+};

package/src/components/TextInput/TextInput.tsx

@@ -34,8 +34,7 @@ export interface TextInputExpandedObj {
 }
 
 export interface TextInputProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>, OUIAProps {
   /** Additional classes added to the text input. */
   className?: string;
   /** Flag to show if the text input is disabled. */

package/src/components/TimePicker/TimePicker.tsx

@@ -23,8 +23,10 @@ import { HelperText, HelperTextItem } from '../HelperText';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 import cssDatePickerFormControlWidth from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_Width';
 
-export interface TimePickerProps
-  extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
+export interface TimePickerProps extends Omit<
+  React.HTMLProps<HTMLDivElement>,
+  'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'
+> {
   /** Additional classes added to the time picker. */
   className?: string;
   /** Accessible label for the time picker */

package/src/components/Toolbar/Toolbar.tsx

@@ -40,6 +40,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   isStatic?: boolean;
   /** Flag indicating the toolbar should stick to the top of its container */
   isSticky?: boolean;
+  /** @beta Flag indicating the toolbar has a vertical orientation */
+  isVertical?: boolean;
   /** Insets at various breakpoints. */
   inset?: {
     default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
@@ -143,6 +145,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
       isStatic,
       inset,
       isSticky,
+      isVertical,
       ouiaId,
       numberOfFiltersText,
       customLabelGroupContent,
@@ -167,6 +170,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
               isSticky && styles.modifiers.sticky,
+              isVertical && styles.modifiers.vertical,
               formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
               colorVariant === 'primary' && styles.modifiers.primary,
               colorVariant === 'secondary' && styles.modifiers.secondary,

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

@@ -54,7 +54,7 @@ describe('Toolbar', () => {
         </ToolbarContent>
       </Toolbar>
     );
-    expect(screen.getByTestId('toolbar')).not.toHaveClass('pf-m-no-padding');
+    expect(screen.getByTestId('toolbar')).not.toHaveClass(styles.modifiers.noPadding);
   });
 
   it(`should render toolbar with ${styles.modifiers.noPadding} class when hasNoPadding is true`, () => {
@@ -205,4 +205,37 @@ describe('Toolbar', () => {
       });
     });
   });
+
+  it(`Renders toolbar without ${styles.modifiers.vertical} by default`, () => {
+    render(
+      <Toolbar data-testid="Toolbar-test-is-not-vertical">
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+          <ToolbarItem>Test 2</ToolbarItem>
+          <ToolbarItem variant="separator" />
+          <ToolbarItem>Test 3 </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('Toolbar-test-is-not-vertical')).not.toHaveClass(styles.modifiers.vertical);
+  });
+
+  it('Renders with class ${styles.modifiers.vertical} when isVertical is true', () => {
+    const items = (
+      <Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" isVertical data-testid="Toolbar-test-is-vertical">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('Toolbar-test-is-vertical')).toHaveClass(styles.modifiers.vertical);
+  });
 });

package/src/components/TreeView/TreeView.tsx

@@ -35,6 +35,10 @@ export interface TreeViewDataItem {
   name: React.ReactNode;
   /** Title of a tree view item. Only used in compact presentations. */
   title?: React.ReactNode;
+  /** Flag indicating if the tree view item is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating if the tree view item toggle is disabled. */
+  isToggleDisabled?: boolean;
 }
 
 /** The main tree view component. */
@@ -158,6 +162,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
           id={item.id}
           isExpanded={allExpanded}
           isSelectable={hasSelectableNodes}
+          isDisabled={item.isDisabled}
+          isToggleDisabled={item.isToggleDisabled}
           defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
           onSelect={onSelect}
           onCheck={onCheck}