npm - @patternfly/react-core - Versions diffs - 6.6.1-prerelease.1 → 6.6.1-prerelease.2 - Mend

@patternfly/react-core 6.6.1-prerelease.1 → 6.6.1-prerelease.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/helpers/package.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.1-prerelease.0","private":true}
1	+ {"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.1-prerelease.1","private":true}

package/layouts/package.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.1-prerelease.0","private":true}
1	+ {"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.1-prerelease.1","private":true}

package/next/package.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.1-prerelease.0","private":true}
1	+ {"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.1-prerelease.1","private":true}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.6.1-prerelease.1",
+  "version": "6.6.1-prerelease.2",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "759a598cc45873e3b57704a57940614e0079d904"
+  "gitHead": "9e6456bf4b493cf8546212e70feb116a798ba79c"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx CHANGED Viewed

@@ -8,7 +8,7 @@ import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-mi
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
-import { useSSRSafeId } from '../../helpers';
+import { useSSRSafeId, useOUIAProps, OUIAProps } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 export enum Weekday {
@@ -63,7 +63,7 @@ export interface CalendarFormat {
   inlineProps?: CalendarMonthInlineProps;
 }
-export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
   /** Additional classes to add to the outer div of the calendar month. */
   className?: string;
   /** Month/year to base other dates around. */
@@ -88,6 +88,10 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
    * monthAppendTo={document.getElementById('target')}
    */
   monthAppendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  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;
 }
 const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
@@ -151,8 +155,11 @@ export const CalendarMonth = ({
   isDateFocused = false,
   inlineProps,
   monthAppendTo = 'inline',
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: CalendarProps) => {
+  const ouiaProps = useOUIAProps(CalendarMonth.displayName, ouiaId, ouiaSafe);
   const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
     .map((monthNum) => new Date(1990, monthNum))
     .map(monthFormat);
@@ -293,7 +300,7 @@ export const CalendarMonth = ({
   const monthFormatted = monthFormat(focusedDate);
   const calendarToRender = (
-    <div className={css(styles.calendarMonth, className)} {...props}>
+    <div className={css(styles.calendarMonth, className)} {...props} {...ouiaProps}>
       <div className={styles.calendarMonthHeader}>
         <div className={css(styles.calendarMonthHeaderNavControl, 'pf-m-prev-month')}>
           <Button

package/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx CHANGED Viewed

@@ -64,3 +64,23 @@ test('InlineProps render correct wrapper component and attributes', () => {
   const title = screen.getByText('Title');
   expect(title).toBeVisible();
 });
+test('Renders with custom ouiaId', () => {
+  const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+test('Renders with expected ouia component type', () => {
+  const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-type', 'PF6/CalendarMonth');
+});
+test('Renders with ouiaSafe defaulting to true', () => {
+  const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'true');
+});
+test('Renders with ouiaSafe=false when specified', () => {
+  const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" ouiaSafe={false} />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'false');
+});

package/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap CHANGED Viewed

@@ -55,6 +55,9 @@ exports[`Matches the snapshot with drawer 1`] = `
   >
     <div
       class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
+      data-ouia-component-id="OUIA-Generated-Drawer-:r1:"
+      data-ouia-component-type="PF6/Drawer"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-drawer__main"

package/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap CHANGED Viewed

@@ -4,6 +4,9 @@ exports[`Matches the snapshot with drawer 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
+    data-ouia-component-id="OUIA-Generated-Drawer-:r1:"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap CHANGED Viewed

@@ -21,7 +21,7 @@ exports[`With popover opened 1`] = `
             <input
               aria-invalid="false"
               aria-label="Date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-:rq:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r11:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               placeholder="YYYY-MM-DD"
@@ -37,7 +37,7 @@ exports[`With popover opened 1`] = `
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-:rr:"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r12:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -64,10 +64,13 @@ exports[`With popover opened 1`] = `
       </div>
     </div>
     <div
-      aria-describedby="popover-pf-:ro:-body"
+      aria-describedby="popover-pf-:ru:-body"
       aria-label=""
       aria-modal="true"
       class="pf-v6-c-popover pf-m-no-padding pf-m-width-auto pf-m-bottom"
+      data-ouia-component-id="OUIA-Generated-Popover-:rv:"
+      data-ouia-component-type="PF6/Popover"
+      data-ouia-safe="true"
       data-popper-escaped="true"
       data-popper-placement="bottom"
       data-popper-reference-hidden="true"
@@ -82,10 +85,13 @@ exports[`With popover opened 1`] = `
       >
         <div
           class="pf-v6-c-popover__body"
-          id="popover-pf-:ro:-body"
+          id="popover-pf-:ru:-body"
         >
           <div
             class="pf-v6-c-calendar-month"
+            data-ouia-component-id="OUIA-Generated-CalendarMonth-:r13:"
+            data-ouia-component-type="PF6/CalendarMonth"
+            data-ouia-safe="true"
           >
             <div
               class="pf-v6-c-calendar-month__header"
@@ -96,7 +102,7 @@ exports[`With popover opened 1`] = `
                 <button
                   aria-label="Previous month"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:rt:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:r15:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -131,7 +137,7 @@ exports[`With popover opened 1`] = `
                   >
                     <span
                       hidden=""
-                      id="hidden-month-span:rs:"
+                      id="hidden-month-span:r14:"
                     >
                       Month
                     </span>
@@ -139,7 +145,7 @@ exports[`With popover opened 1`] = `
                       aria-expanded="false"
                       aria-haspopup="menu"
                       class="pf-v6-c-menu-toggle"
-                      data-ouia-component-id="OUIA-Generated-MenuToggle-:r10:"
+                      data-ouia-component-id="OUIA-Generated-MenuToggle-:r18:"
                       data-ouia-component-type="PF6/MenuToggle"
                       data-ouia-safe="true"
                       style="width: 140px;"
@@ -186,7 +192,7 @@ exports[`With popover opened 1`] = `
                       <input
                         aria-invalid="false"
                         aria-label="Select year"
-                        data-ouia-component-id="OUIA-Generated-TextInputBase-:r12:"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-:r1a:"
                         data-ouia-component-type="PF6/TextInput"
                         data-ouia-safe="true"
                         type="number"
@@ -202,7 +208,7 @@ exports[`With popover opened 1`] = `
                 <button
                   aria-label="Next month"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:r13:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:r1b:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -813,7 +819,7 @@ exports[`disabled date picker 1`] = `
             <input
               aria-invalid="false"
               aria-label="disabled date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               disabled=""
@@ -830,7 +836,7 @@ exports[`disabled date picker 1`] = `
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r4:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             disabled=""

package/src/components/Drawer/Drawer.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { createContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 export enum DrawerColorVariant {
   default = 'default',
@@ -11,7 +12,7 @@ export enum DrawerColorVariant {
   noBackground = 'no-background'
 }
-export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
+export interface DrawerProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Additional classes added to the Drawer. */
   className?: string;
   /** Content rendered in the drawer panel */
@@ -28,6 +29,10 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   position?: 'start' | 'end' | 'bottom' | 'left' | 'right';
   /** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */
   onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  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;
 }
 export interface DrawerContextProps {
@@ -59,8 +64,11 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   isStatic = false,
   position = 'end',
   onExpand = () => {},
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: DrawerProps) => {
+  const ouiaProps = useOUIAProps(Drawer.displayName, ouiaId, ouiaSafe);
   const drawerRef = useRef<HTMLDivElement>(undefined);
   const drawerContentRef = useRef<HTMLDivElement>(undefined);
@@ -79,6 +87,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
         )}
         ref={drawerRef}
         {...props}
+        {...ouiaProps}
       >
         {children}
       </div>

package/src/components/Drawer/__tests__/Drawer.test.tsx CHANGED Viewed

@@ -39,7 +39,7 @@ Object.values([
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
   test(`Drawer isExpanded = ${isExpanded} and isInline = ${isInline} and isStatic = ${isStatic}`, () => {
     const { asFragment } = render(
-      <Drawer isExpanded={isExpanded}>
+      <Drawer isExpanded={isExpanded} ouiaId="ouia-id">
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>
@@ -187,3 +187,47 @@ test(`Renders with ${styles.modifiers.pill} class when specified`, () => {
   expect(screen.getByTestId('drawer')).toHaveClass(styles.modifiers.pill);
 });
+test('Renders with custom ouiaId', () => {
+  render(
+    <Drawer data-testid="drawer" ouiaId="test-id">
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+test('Renders with expected ouia component type', () => {
+  render(
+    <Drawer data-testid="drawer" ouiaId="test-id">
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-component-type', 'PF6/Drawer');
+});
+test('Renders with ouiaSafe defaulting to true', () => {
+  render(
+    <Drawer data-testid="drawer" ouiaId="test-id">
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'true');
+});
+test('Renders with ouiaSafe=false when specified', () => {
+  render(
+    <Drawer data-testid="drawer" ouiaId="test-id" ouiaSafe={false}>
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'false');
+});

package/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap CHANGED Viewed

@@ -4,6 +4,9 @@ exports[`Drawer expands from bottom 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-bottom"
+    data-ouia-component-id="OUIA-Generated-Drawer-:rd:"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -19,7 +22,7 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r8:"
+        id="pf-drawer-panel-:re:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -36,7 +39,7 @@ exports[`Drawer expands from bottom 1`] = `
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:rf:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -77,6 +80,9 @@ exports[`Drawer has resizable callback and id 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
+    data-ouia-component-id="OUIA-Generated-Drawer-:rj:"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -128,7 +134,7 @@ exports[`Drawer has resizable callback and id 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:rl:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -170,6 +176,9 @@ exports[`Drawer has resizable css and color variants 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
+    data-ouia-component-id="OUIA-Generated-Drawer-:rg:"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -185,11 +194,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel pf-m-resizable pf-m-secondary"
-        id="pf-drawer-panel-:ra:"
+        id="pf-drawer-panel-:rh:"
         style="--pf-v6-c-drawer__panel--md--FlexBasis: 300px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v6-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-controls="pf-drawer-panel-:ra:"
+          aria-controls="pf-drawer-panel-:rh:"
           aria-label="Resize"
           aria-orientation="vertical"
           aria-valuemax="100"
@@ -222,7 +231,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:rb:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:ri:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -264,6 +273,9 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -280,7 +292,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-:r2:"
+        id="pf-drawer-panel-:r4:"
         inert=""
       />
     </div>
@@ -292,6 +304,9 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -308,7 +323,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-:r5:"
+        id="pf-drawer-panel-:r9:"
         inert=""
       />
     </div>
@@ -320,6 +335,9 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -335,7 +353,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r0:"
+        id="pf-drawer-panel-:r1:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -352,7 +370,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -393,6 +411,9 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -408,7 +429,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r6:"
+        id="pf-drawer-panel-:rb:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -425,7 +446,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -466,6 +487,9 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -481,7 +505,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r3:"
+        id="pf-drawer-panel-:r6:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -498,7 +522,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r4:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"

package/src/components/DualListSelector/DualListSelector.tsx CHANGED Viewed

@@ -1,14 +1,13 @@
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { useSSRSafeId } from '../../helpers';
+import { useSSRSafeId, useOUIAProps, OUIAProps, useHasAnimations } from '../../helpers';
 import { DualListSelectorContext } from './DualListSelectorContext';
-import { useHasAnimations } from '../../helpers';
 /** Acts as a container for all other DualListSelector sub-components when using a
  * composable dual list selector.
  */
-export interface DualListSelectorProps {
+export interface DualListSelectorProps extends OUIAProps {
   /** Additional classes applied to the dual list selector. */
   className?: string;
   /** ID of the dual list selector. */
@@ -22,6 +21,10 @@ export interface DualListSelectorProps {
    * the next breaking change release in favor of defaulting to always-rendered items.
    */
   hasAnimations?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  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;
 }
 export const DualListSelector: React.FunctionComponent<DualListSelectorProps> = ({
@@ -30,10 +33,13 @@ export const DualListSelector: React.FunctionComponent<DualListSelectorProps> =
   id,
   isTree = false,
   hasAnimations: hasAnimationsProp,
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: DualListSelectorProps) => {
   const hasAnimations = useHasAnimations(hasAnimationsProp);
   const randomId = useSSRSafeId();
+  const ouiaProps = useOUIAProps(DualListSelector.displayName, ouiaId, ouiaSafe);
   return (
     <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
@@ -41,6 +47,7 @@ export const DualListSelector: React.FunctionComponent<DualListSelectorProps> =
         className={css(styles.dualListSelector, hasAnimations && isTree && styles.modifiers.animateExpand, className)}
         id={id || randomId}
         {...props}
+        {...ouiaProps}
       >
         {children}
       </div>

package/src/components/DualListSelector/__tests__/DualListSelector.test.tsx CHANGED Viewed

@@ -59,6 +59,31 @@ describe('Opt-in animations', () => {
   });
 });
+test('Matches snapshot', () => {
+  const { asFragment } = render(<DualListSelector ouiaId="ouia-id" data-testid="test-id" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+test('Renders with custom ouiaId', () => {
+  render(<DualListSelector data-testid="test-id" ouiaId="test-id" />);
+  expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+test('Renders with expected ouia component type', () => {
+  render(<DualListSelector data-testid="test-id" ouiaId="test-id" />);
+  expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-component-type', 'PF6/DualListSelector');
+});
+test('Renders with ouiaSafe defaulting to true', () => {
+  render(<DualListSelector data-testid="test-id" ouiaId="test-id" />);
+  expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-safe', 'true');
+});
+test('Renders with ouiaSafe=false when specified', () => {
+  render(<DualListSelector data-testid="test-id" ouiaId="test-id" ouiaSafe={false} />);
+  expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-safe', 'false');
+});
 // Following tests should be moved to a separate DualListSelectorPane test file
 describe('DualListSelector', () => {
   test('basic', () => {

package/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap CHANGED Viewed

@@ -120,3 +120,16 @@ exports[`DualListSelector with search inputs 1`] = `
   </div>
 </DocumentFragment>
 `;
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/DualListSelector"
+    data-ouia-safe="true"
+    data-testid="test-id"
+    id="pf-:re:"
+  />
+</DocumentFragment>
+`;