@patternfly/react-core 6.5.0-prerelease.2 → 6.5.0-prerelease.21

package/src/components/Compass/__tests__/__snapshots__/CompassNavSearch.test.tsx.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__nav-search"
+  >
+    <button
+      aria-label="Search"
+      class="pf-v6-c-button pf-m-plain pf-m-circle"
+      data-ouia-component-id="OUIA-Generated-Button-plain-9"
+      data-ouia-component-type="PF6/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <span
+        class="pf-v6-c-button__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="none"
+          height="1em"
+          viewBox="0 0 20 20"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14.166 14.166L17.4993 17.4993"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with custom props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__nav-search custom-class"
+  >
+    <button
+      aria-label="Custom search"
+      class="pf-v6-c-button pf-m-plain pf-m-circle"
+      data-ouia-component-id="OUIA-Generated-Button-plain-10"
+      data-ouia-component-type="PF6/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <span
+        class="pf-v6-c-button__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="none"
+          height="1em"
+          viewBox="0 0 20 20"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14.166 14.166L17.4993 17.4993"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/examples/Compass.md

@@ -1,18 +1,29 @@
 ---
 id: Compass
 cssPrefix: pf-v6-c-compass
-section: components
+section: AI
+subsection: Generative UIs
 beta: true
-propComponents: ['Compass', 'CompassHeader', 'CompassContent', 'CompassHero', 'CompassMainHeader', 'CompassPanel']
+propComponents:
+  [
+    'Compass',
+    'CompassHeader',
+    'CompassContent',
+    'CompassHero',
+    'CompassMainHeader',
+    'CompassPanel',
+    'CompassMessageBar'
+  ]
 ---
 
-import './compass.css';
 import { useRef, useState } from 'react';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
 import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
 import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 
+import './compass.css';
+
 ## Examples
 
 ### Basic
@@ -27,12 +38,38 @@ In a basic compass layout, content can be passed to the following props to popul
 
 The background image of the `Compass` and `CompassHero` may be customized by using their respective `backgroundSrcLight` and `backgroundSrcDark` props. The `CompassHero` also allows customization of a color gradient across its container by using the `gradientLight` and `gradientDark` props.
 
-```ts file="CompassBasic.tsx"
+```ts isBeta file="CompassBasic.tsx"
+
+```
+
+### With alternate footer
+
+When `footer` is used, its content will take up the width of the screen. However, if content inside of the footer grows, then the two sidebars' heights and placement will adjust to allow for the change. If this is not the desired behavior, then using a `CompassMainFooter` inside of the of the `main` section provides an alterate way to render footer content without interfering with the sidebars, by rendering content at the bottom of the page between the two sidebars opposed to the whole bottom of the page.
+
+```ts file="CompassMainFooterDemo.tsx"
 
 ```
 
 ### Demo
 
-```ts isFullscreen file="CompassDemo.tsx"
+```ts isFullscreen isBeta file="CompassDemo.tsx"
+
+```
+
+## Composable structure
+
+When building a more custom implementation using Compass components, there are some intended or expected structures that must be present.
+
+### CompassMainHeader structure
+
+When using the `children` property in the `<CompassMainHeader>` component, you should ensure that the expected sub-components are used. The following code block shows a general structure to follow.
 
+```noLive
+<CompassMainHeader>
+  <CompassPanel>
+    <CompassMainHeaderContent>
+      {Your custom content goes here, which can include the CompassMainHeaderTitle and/or CompassMainHeaderToolbar sub-components}
+    </CompassMainHeaderContent>
+  </CompassPanel>
+</CompassMainHeader>
 ```

package/src/components/Compass/examples/CompassBasic.tsx

@@ -1,4 +1,12 @@
-import { Compass, CompassHeader, CompassHero, CompassContent, CompassMainHeader } from '@patternfly/react-core';
+import {
+  Compass,
+  CompassHeader,
+  CompassHero,
+  CompassContent,
+  CompassMainHeader,
+  CompassPanel,
+  CompassMainHeaderContent
+} from '@patternfly/react-core';
 import './compass.css';
 
 export const CompassBasic: React.FunctionComponent = () => {
@@ -12,7 +20,11 @@ export const CompassBasic: React.FunctionComponent = () => {
       </CompassHero>
       <CompassContent>
         <CompassMainHeader>
-          <div>Content title</div>
+          <CompassPanel>
+            <CompassMainHeaderContent>
+              <div>Content title</div>
+            </CompassMainHeaderContent>
+          </CompassPanel>
         </CompassMainHeader>
         <div>Content</div>
       </CompassContent>
@@ -28,6 +40,7 @@ export const CompassBasic: React.FunctionComponent = () => {
       main={mainContent}
       sidebarEnd={sidebarEndContent}
       footer={footerContent}
+      style={{ height: '600px' }}
     />
   );
 };

package/src/components/Compass/examples/CompassDemo.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+
 import { useRef, useState } from 'react';
 import {
   Compass,
@@ -7,6 +9,11 @@ import {
   CompassMainHeader,
   CompassPanel,
   CompassMessageBar,
+  CompassNavContent,
+  CompassNavHome,
+  CompassNavMain,
+  CompassNavSearch,
+  Hero,
   Tabs,
   TabsComponent,
   Tab,
@@ -31,49 +38,57 @@ export const CompassBasic: React.FunctionComponent = () => {
 
   const navContent = (
     <>
-      <CompassPanel isPill hasNoPadding>
-        <Tabs
-          activeKey={activeTab}
-          isNav
-          onSelect={(_event, tabIndex) => setActiveTab(tabIndex as number)}
-          component={TabsComponent.nav}
-          aria-label="Compass navigation tabs"
-          inset={{ default: 'insetXl' }}
-        >
-          <Tab
-            tabContentId="subtabs"
-            tabContentRef={subTabsRef}
-            eventKey={0}
-            title={<TabTitleText>Tab 1</TabTitleText>}
-            aria-label="Compass tab with subtabs"
-          />
-          <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />
-          <Tab eventKey={2} title={<TabTitleText>Tab 3</TabTitleText>} />
-          <Tab eventKey={3} title={<TabTitleText>Disabled Tab 4</TabTitleText>} isDisabled />
-        </Tabs>
+      <CompassPanel isPill>
+        <CompassNavContent>
+          <CompassNavHome onClick={() => console.log('Home')} />
+          <CompassNavMain>
+            <Tabs
+              activeKey={activeTab}
+              isNav
+              onSelect={(_event, tabIndex) => setActiveTab(tabIndex as number)}
+              component={TabsComponent.nav}
+              aria-label="Compass navigation tabs"
+            >
+              <Tab
+                tabContentId="subtabs"
+                tabContentRef={subTabsRef}
+                eventKey={0}
+                title={<TabTitleText>Tab 1</TabTitleText>}
+                aria-label="Compass tab with subtabs"
+              />
+              <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />
+              <Tab eventKey={2} title={<TabTitleText>Tab 3</TabTitleText>} />
+              <Tab eventKey={3} title={<TabTitleText>Disabled Tab 4</TabTitleText>} isDisabled />
+            </Tabs>
+          </CompassNavMain>
+          <CompassNavSearch onClick={() => console.log('Search')} />
+        </CompassNavContent>
       </CompassPanel>
       <CompassPanel isPill hasNoPadding>
         <TabContent id="subtabs" ref={subTabsRef}>
-          <Tabs
-            activeKey={activeSubtab}
-            isSubtab
-            isNav
-            onSelect={(_event, tabIndex) => setActiveSubtab(tabIndex as number)}
-            aria-label="Compass navigation subtabs"
-            inset={{ default: 'insetXl' }}
-          >
-            <Tab
-              tabContentId="subtab-1"
-              eventKey={0}
-              title={
-                <TabTitleText>
-                  <div id="subtab-1">Subtab 1</div>
-                </TabTitleText>
-              }
-            />
-            <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
-            <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
-          </Tabs>
+          <CompassNavContent>
+            <CompassNavMain>
+              <Tabs
+                activeKey={activeSubtab}
+                isSubtab
+                isNav
+                onSelect={(_event, tabIndex) => setActiveSubtab(tabIndex as number)}
+                aria-label="Compass navigation subtabs"
+              >
+                <Tab
+                  tabContentId="subtab-1"
+                  eventKey={0}
+                  title={
+                    <TabTitleText>
+                      <div id="subtab-1">Subtab 1</div>
+                    </TabTitleText>
+                  }
+                />
+                <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
+                <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
+              </Tabs>
+            </CompassNavMain>
+          </CompassNavContent>
         </TabContent>
       </CompassPanel>
     </>
@@ -81,33 +96,33 @@ export const CompassBasic: React.FunctionComponent = () => {
 
   const sidebarContent = (
     <CompassPanel isPill>
-      <ActionList isIconList className="pf-m-vertical" /* isVertical */>
+      <ActionList isIconList isVertical>
         <ActionListGroup>
           <ActionListItem>
             <Tooltip content="Play">
-              <Button variant="plain" icon={<PlayIcon />} aria-label="Play" />
+              <Button isCircle variant="plain" icon={<PlayIcon />} aria-label="Play" />
             </Tooltip>
           </ActionListItem>
           <ActionListItem>
             <Tooltip content="Add">
-              <Button variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
+              <Button isCircle variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
             </Tooltip>
           </ActionListItem>
         </ActionListGroup>
         <ActionListItem>
           <Tooltip content="Copy">
-            <Button variant="plain" icon={<OutlinedCopy />} aria-label="Copy" />
+            <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy" />
           </Tooltip>
         </ActionListItem>
         <ActionListGroup>
           <ActionListItem>
             <Tooltip content="Help">
-              <Button variant="plain" icon={<OutlinedQuestionCircleIcon />} aria-label="Help" />
+              <Button isCircle variant="plain" icon={<OutlinedQuestionCircleIcon />} aria-label="Help" />
             </Tooltip>
           </ActionListItem>
           <ActionListItem>
             <Tooltip content="Second copy">
-              <Button variant="plain" icon={<OutlinedCopy />} aria-label="Copy2" />
+              <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy2" />
             </Tooltip>
           </ActionListItem>
         </ActionListGroup>
@@ -119,8 +134,8 @@ export const CompassBasic: React.FunctionComponent = () => {
   const sidebarStartContent = sidebarContent;
   const mainContent = (
     <>
-      <CompassHero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>
-        <div>Hero</div>
+      <CompassHero>
+        <Hero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>Hero</Hero>
       </CompassHero>
       <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
       <CompassContent>

package/src/components/Compass/examples/CompassMainFooterDemo.tsx

@@ -0,0 +1,43 @@
+import {
+  Compass,
+  CompassHeader,
+  CompassHero,
+  CompassContent,
+  CompassMainHeader,
+  CompassMainFooter
+} from '@patternfly/react-core';
+import './compass.css';
+
+export const CompassMainFooterDemo: React.FunctionComponent = () => {
+  const headerContent = <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />;
+  const sidebarStartContent = <div>Sidebar start</div>;
+  // TODO: simplify mainContent to only a div string
+  const mainContent = (
+    <>
+      <CompassHero>
+        <div>Hero</div>
+      </CompassHero>
+      <CompassContent>
+        <CompassMainHeader>
+          <div>Content title</div>
+        </CompassMainHeader>
+        <div>Content</div>
+      </CompassContent>
+      <CompassMainFooter>
+        <div>Footer</div>
+      </CompassMainFooter>
+    </>
+  );
+  const sidebarEndContent = <div>Sidebar end</div>;
+
+  return (
+    <Compass
+      header={headerContent}
+      sidebarStart={sidebarStartContent}
+      main={mainContent}
+      sidebarEnd={sidebarEndContent}
+      isFooterExpanded={false}
+      style={{ height: '600px' }}
+    />
+  );
+};

package/src/components/Compass/examples/compass.css

@@ -1,8 +1,20 @@
-#ws-react-c-compass-basic [class*="pf-v6-c-compass"] {
+#ws-react-p-compass-basic [class*="pf-v6-c-compass"] {
   position: relative;
 }
 
-#ws-react-c-compass-basic [class*="pf-v6-c-compass"]::after {
+#ws-react-p-compass-basic [class*="pf-v6-c-compass"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
+  pointer-events: none;
+}
+
+#ws-react-p-compass-with-alternate-footer [class*="pf-v6-c-compass"] {
+  position: relative;
+}
+
+#ws-react-p-compass-with-alternate-footer [class*="pf-v6-c-compass"]:not([class*="footer"])::after {
   content: "";
   position: absolute;
   inset: 0;

package/src/components/Compass/index.ts

@@ -3,5 +3,13 @@ export * from './CompassContent';
 export * from './CompassHeader';
 export * from './CompassHero';
 export * from './CompassMainHeader';
+export * from './CompassMainHeaderContent';
+export * from './CompassMainHeaderTitle';
+export * from './CompassMainHeaderToolbar';
+export * from './CompassMainFooter';
 export * from './CompassMessageBar';
+export * from './CompassNavContent';
+export * from './CompassNavHome';
+export * from './CompassNavMain';
+export * from './CompassNavSearch';
 export * from './CompassPanel';

package/src/components/DataList/DataList.tsx

@@ -31,6 +31,8 @@ export interface DataListProps extends React.HTMLProps<HTMLUListElement> {
   selectedDataListItemId?: string;
   /** Flag indicating if DataList should have compact styling */
   isCompact?: boolean;
+  /** @beta Flag indicating if DataList should have plain styling with a transparent background */
+  isPlain?: boolean;
   /** Specifies the grid breakpoints  */
   gridBreakpoint?: 'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Determines which wrapping modifier to apply to the DataList */
@@ -59,6 +61,7 @@ export const DataListBase: React.FunctionComponent<DataListProps> = ({
   onSelectDataListItem,
   selectedDataListItemId = '',
   isCompact = false,
+  isPlain = false,
   gridBreakpoint = 'md',
   wrapModifier = null,
   onSelectableRowChange,
@@ -84,6 +87,7 @@ export const DataListBase: React.FunctionComponent<DataListProps> = ({
         className={css(
           styles.dataList,
           isCompact && styles.modifiers.compact,
+          isPlain && styles.modifiers.plain,
           gridBreakpointClasses[gridBreakpoint],
           wrapModifier && styles.modifiers[wrapModifier],
           className

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

@@ -71,6 +71,12 @@ test('Renders custom class when passed', () => {
   expect(screen.getByLabelText('list')).toHaveClass('data-list-custom');
 });
 
+test(`Renders with class ${styles.modifiers.plain} when isPlain is true`, () => {
+  render(<DataList key="list-id-1" isPlain aria-label="list" />);
+
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.plain);
+});
+
 test('Renders with a hidden input to improve a11y when onSelectableRowChange is passed', () => {
   render(
     <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>

package/src/components/DataList/examples/DataList.md

@@ -40,6 +40,12 @@ import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@pat
 
 ```
 
+### Plain
+
+```ts file="./DataListPlain.tsx"
+
+```
+
 ### Checkboxes, actions and additional cells
 
 ```ts file="./DataListCheckboxes.tsx"

package/src/components/DataList/examples/DataListPlain.tsx

@@ -0,0 +1,32 @@
+import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
+
+export const DataListPlain: React.FunctionComponent = () => (
+  <DataList aria-label="Plain data list example" isPlain>
+    <DataListItem aria-labelledby="plain-item1">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="primary content">
+              <span id="plain-item1">Primary content</span>
+            </DataListCell>,
+            <DataListCell key="secondary content">Secondary content</DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+    <DataListItem aria-labelledby="plain-item2">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell isFilled={false} key="secondary content fill">
+              <span id="plain-item2">Secondary content (pf-m-no-fill)</span>
+            </DataListCell>,
+            <DataListCell isFilled={false} alignRight key="secondary content align">
+              Secondary content (pf-m-align-right pf-m-no-fill)
+            </DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  </DataList>
+);

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -35,6 +35,8 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
   hasNoBorder?: boolean;
   /** Flag indicating that the drawer panel should be resizable. */
   isResizable?: boolean;
+  /** @beta Flag indicating that the drawer panel should disable glass styles. This prop is intended to work with isPill drawers. */
+  hasNoGlass?: boolean;
   /** Callback for resize end. */
   onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
   /** The minimum size of a drawer. */
@@ -68,6 +70,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   children,
   hasNoBorder = false,
   isResizable = false,
+  hasNoGlass = false,
   onResize,
   minSize,
   defaultSize,
@@ -364,6 +367,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
             className={css(
               styles.drawerPanel,
               isResizable && styles.modifiers.resizable,
+              hasNoGlass && styles.modifiers.noGlass,
               hasNoBorder && styles.modifiers.noBorder,
               formatBreakpointMods(widths, styles),
               colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -158,3 +158,13 @@ test('Style prop overrides boundaryCssVars', () => {
     '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
   });
 });
+
+test(`Renders with class ${styles.modifiers.noGlass} when hasNoGlass is true`, () => {
+  render(
+    <Drawer isExpanded isPill>
+      <DrawerPanelContent hasNoGlass>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.noGlass);
+});

package/src/components/Dropdown/Dropdown.tsx

@@ -48,6 +48,12 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   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;
+  /** When applied, wraps dropdown in a container with a data-ouia-component-id.*/
+  containerOuiaId?: number | string;
+  /** Set the value of data-ouia-safe for the container when containerOuiaId is applied. 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. */
+  containerOuiaSafe?: boolean;
+  /** Sets the base component to render for the container. Defaults to <span> */
+  containerComponent?: React.ReactNode;
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
@@ -86,11 +92,16 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   shouldFocusFirstItemOnOpen = false,
   shouldPreventScrollOnItemFocus = true,
   focusTimeoutDelay = 0,
+  containerOuiaId,
+  containerOuiaSafe = true,
+  containerComponent = 'span',
   ...props
 }: DropdownProps) => {
   const localMenuRef = useRef<HTMLDivElement>(undefined);
   const localToggleRef = useRef<HTMLButtonElement>(undefined);
   const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
+  const ContainerComponent = containerComponent as any;
+  const containerOuiaProps = useOUIAProps('Dropdown container', containerOuiaId, containerOuiaSafe);
 
   const menuRef = (innerRef as React.RefObject<HTMLDivElement | null>) || localMenuRef;
   const toggleRef =
@@ -185,7 +196,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       </MenuContent>
     </Menu>
   );
-  return (
+
+  const popper = (
     <Popper
       trigger={typeof toggle === 'function' ? toggle(toggleRef) : toggle.toggleNode}
       triggerRef={toggleRef}
@@ -196,6 +208,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       {...popperProps}
     />
   );
+
+  return containerOuiaId ? <ContainerComponent {...containerOuiaProps}>{popper}</ContainerComponent> : popper;
 };
 
 export const Dropdown = forwardRef((props: DropdownProps, ref: React.Ref<any>) => (

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

@@ -201,6 +201,32 @@ test('onOpenChange is called when passed and user presses esc key', async () =>
   expect(onOpenChange).toBeCalledTimes(1);
 });
 
+test('applies containerOuiaId to parent element', () => {
+  render(
+    <Dropdown containerOuiaId="test-dropdown" toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  const dropdownToggle = screen.getByRole('button', { name: 'Dropdown' });
+  const dropdownParent = dropdownToggle?.parentNode?.parentNode;
+  expect(dropdownParent).toHaveAttribute('data-ouia-component-id', 'test-dropdown');
+  expect(dropdownParent).toHaveAttribute('data-ouia-component-type', 'PF6/Dropdown container');
+  expect(dropdownParent?.tagName).toBe('SPAN');
+});
+
+test('Renders with custom container element when containerComponent is passed', () => {
+  render(
+    <Dropdown containerOuiaId="test-dropdown" containerComponent="div" toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  const dropdownToggle = screen.getByRole('button', { name: 'Dropdown' });
+  const dropdownParent = dropdownToggle?.parentNode?.parentNode;
+  expect(dropdownParent?.tagName).toBe('DIV');
+});
+
 test('match snapshot', () => {
   const { asFragment } = render(
     <Dropdown