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

package/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap

@@ -106,7 +106,7 @@ exports[`DualListSelector basic 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -171,7 +171,7 @@ exports[`DualListSelector basic 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -204,7 +204,7 @@ exports[`DualListSelector basic 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-4"
@@ -380,7 +380,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-13"
@@ -413,7 +413,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add all"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-14"
@@ -446,7 +446,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-15"
@@ -479,7 +479,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-16"
@@ -666,7 +666,7 @@ exports[`DualListSelector with actions 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-21"
@@ -763,7 +763,7 @@ exports[`DualListSelector with actions 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-24"
@@ -1004,7 +1004,7 @@ exports[`DualListSelector with custom status 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-9"
@@ -1069,7 +1069,7 @@ exports[`DualListSelector with custom status 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-11"
@@ -1102,7 +1102,7 @@ exports[`DualListSelector with custom status 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-12"
@@ -1320,7 +1320,7 @@ exports[`DualListSelector with search inputs 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-5"
@@ -1385,7 +1385,7 @@ exports[`DualListSelector with search inputs 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-7"
@@ -1418,7 +1418,7 @@ exports[`DualListSelector with search inputs 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-8"
@@ -1713,7 +1713,7 @@ exports[`DualListSelector with tree 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-17"
@@ -1778,7 +1778,7 @@ exports[`DualListSelector with tree 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-19"
@@ -1811,7 +1811,7 @@ exports[`DualListSelector with tree 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-20"

package/src/deprecated/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -20,7 +20,7 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
 
   const onSort = (pane: string) => {
     const toSort = pane === 'available' ? [...availableOptions] : [...chosenOptions];
-    (toSort as React.ReactElement[]).sort((a, b) => {
+    (toSort as React.ReactElement<any>[]).sort((a, b) => {
       if (a.props.children > b.props.children) {
         return 1;
       }
@@ -38,7 +38,7 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
   };
 
   const filterOption = (option: React.ReactNode, input: string) =>
-    (option as React.ReactElement).props.children.includes(input);
+    (option as React.ReactElement<any>).props.children.includes(input);
 
   const availableOptionsActions = [
     <Button

package/src/deprecated/components/Modal/Modal.tsx

@@ -263,7 +263,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         elementToFocus={elementToFocus}
       />,
       this.getElement(appendTo)
-    ) as React.ReactElement;
+    ) as React.ReactElement<any>;
   }
 }
 

package/src/deprecated/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -22,7 +22,6 @@ exports[`Modal Content Test description 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -102,7 +101,6 @@ exports[`Modal Content Test isOpen 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-2"
@@ -177,7 +175,6 @@ exports[`Modal Content Test only body 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -252,7 +249,6 @@ exports[`Modal Content Test with footer 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-4"
@@ -332,7 +328,6 @@ exports[`Modal Content Test with onclose 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-6"
@@ -412,7 +407,6 @@ exports[`Modal Content test without footer 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-5"
@@ -487,7 +481,6 @@ exports[`Modal Test with custom footer 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-8"
@@ -571,7 +564,6 @@ exports[`Modal Test with custom header 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-7"

package/src/deprecated/components/Wizard/WizardDrawerWrapper.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 
+import type { JSX } from 'react';
+
 export interface WizardDrawerWrapperProps {
   /** The wizard content  */
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   /** Flag indicating the wizard has a drawer for at least one of the wizard steps */
   hasDrawer: boolean;
   /** The drawer component which wraps the wizard content */
-  wrapper: (children: React.ReactElement) => JSX.Element;
+  wrapper: (children: React.ReactElement<any>) => JSX.Element;
 }
 
 export const WizardDrawerWrapper: React.FunctionComponent<WizardDrawerWrapperProps> = ({

package/src/deprecated/components/Wizard/WizardToggle.tsx

@@ -8,7 +8,7 @@ import { WizardBody } from './WizardBody';
 
 export interface WizardToggleProps {
   /** Function that returns the WizardNav component */
-  nav: (isWizardNavOpen: boolean) => React.ReactElement;
+  nav: (isWizardNavOpen: boolean) => React.ReactElement<any>;
   /** The wizard steps */
   steps: WizardStep[];
   /** The currently active WizardStep */

package/src/deprecated/components/Wizard/__tests__/Generated/WizardToggle.test.tsx

@@ -10,7 +10,7 @@ import {} from '../..';
 it('WizardToggle should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
     <WizardToggle
-      nav={(_isWizardNavOpen: boolean) => undefined as React.ReactElement}
+      nav={(_isWizardNavOpen: boolean) => undefined as unknown as React.ReactElement<any>}
       steps={[]}
       activeStep={{ name: 'some step' }}
       children={<div>ReactNode</div>}

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap

@@ -15,7 +15,6 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
           class="pf-v6-c-action-list__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-secondary"
             data-ouia-component-id="OUIA-Generated-Button-secondary-1"
             data-ouia-component-type="PF6/Button"
@@ -36,7 +35,6 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
           class="pf-v6-c-action-list__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-primary"
             data-ouia-component-id="OUIA-Generated-Button-primary-1"
             data-ouia-component-type="PF6/Button"
@@ -60,7 +58,6 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
           class="pf-v6-c-action-list__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-link"
             data-ouia-component-id="OUIA-Generated-Button-link-1"
             data-ouia-component-type="PF6/Button"

package/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap

@@ -12,7 +12,6 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         class="pf-v6-c-wizard__close"
       >
         <button
-          aria-disabled="false"
           aria-label="Close"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-2"
@@ -252,7 +251,6 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               class="pf-v6-c-action-list__item"
             >
               <button
-                aria-disabled="false"
                 class="pf-v6-c-button pf-m-secondary"
                 data-ouia-component-id="OUIA-Generated-Button-secondary-2"
                 data-ouia-component-type="PF6/Button"
@@ -271,7 +269,6 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               class="pf-v6-c-action-list__item"
             >
               <button
-                aria-disabled="false"
                 class="pf-v6-c-button pf-m-primary"
                 data-ouia-component-id="OUIA-Generated-Button-primary-2"
                 data-ouia-component-type="PF6/Button"
@@ -293,7 +290,6 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               class="pf-v6-c-action-list__item"
             >
               <button
-                aria-disabled="false"
                 class="pf-v6-c-button pf-m-link"
                 data-ouia-component-id="OUIA-Generated-Button-link-2"
                 data-ouia-component-type="PF6/Button"
@@ -327,7 +323,6 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         class="pf-v6-c-wizard__close"
       >
         <button
-          aria-disabled="false"
           aria-label="Close"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -547,7 +542,6 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               class="pf-v6-c-action-list__item"
             >
               <button
-                aria-disabled="false"
                 class="pf-v6-c-button pf-m-secondary"
                 data-ouia-component-id="OUIA-Generated-Button-secondary-1"
                 data-ouia-component-type="PF6/Button"
@@ -566,7 +560,6 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               class="pf-v6-c-action-list__item"
             >
               <button
-                aria-disabled="false"
                 class="pf-v6-c-button pf-m-primary"
                 data-ouia-component-id="OUIA-Generated-Button-primary-1"
                 data-ouia-component-type="PF6/Button"
@@ -588,7 +581,6 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               class="pf-v6-c-action-list__item"
             >
               <button
-                aria-disabled="false"
                 class="pf-v6-c-button pf-m-link"
                 data-ouia-component-id="OUIA-Generated-Button-link-1"
                 data-ouia-component-type="PF6/Button"
@@ -710,7 +702,6 @@ exports[`Wizard bare wiz 1`] = `
               class="pf-v6-c-action-list__item"
             >
               <button
-                aria-disabled="false"
                 class="pf-v6-c-button pf-m-secondary"
                 data-ouia-component-id="OUIA-Generated-Button-secondary-3"
                 data-ouia-component-type="PF6/Button"
@@ -729,7 +720,6 @@ exports[`Wizard bare wiz 1`] = `
               class="pf-v6-c-action-list__item"
             >
               <button
-                aria-disabled="false"
                 class="pf-v6-c-button pf-m-primary"
                 data-ouia-component-id="OUIA-Generated-Button-primary-3"
                 data-ouia-component-type="PF6/Button"
@@ -751,7 +741,6 @@ exports[`Wizard bare wiz 1`] = `
               class="pf-v6-c-action-list__item"
             >
               <button
-                aria-disabled="false"
                 class="pf-v6-c-button pf-m-link"
                 data-ouia-component-id="OUIA-Generated-Button-link-3"
                 data-ouia-component-type="PF6/Button"

package/src/helpers/KeyboardHandler.tsx

@@ -182,7 +182,7 @@ export const setTabIndex = (options: HTMLElement[]) => {
  * @param event Event triggered by the keyboard
  * @param menuRef Menu reference
  */
-export const onToggleArrowKeydownDefault = (event: KeyboardEvent, menuRef: React.RefObject<HTMLDivElement>) => {
+export const onToggleArrowKeydownDefault = (event: KeyboardEvent, menuRef: React.RefObject<HTMLDivElement | null>) => {
   if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
     return;
   }

package/src/helpers/Popper/Popper.tsx

@@ -58,7 +58,7 @@ export interface PopperProps {
    */
   triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** The popper (menu/tooltip/popover) element */
-  popper: React.ReactElement;
+  popper: React.ReactElement<any>;
   /**
    * Reference to the popper (menu/tooltip/popover) element.
    * Passing this prop will remove the wrapper div element from the popper.
@@ -225,7 +225,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   const transitionTimerRef = React.useRef(null);
   const showTimerRef = React.useRef(null);
   const hideTimerRef = React.useRef(null);
-  const prevExitDelayRef = React.useRef<number>();
+  const prevExitDelayRef = React.useRef<number>(undefined);
 
   const refOrTrigger = refElement || triggerElement;
   const showPopper = isVisible || internalIsVisible;
@@ -527,7 +527,12 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     return popperRef ? (
       localPopper
     ) : (
-      <div style={{ display: 'contents' }} ref={(node) => setPopperElement(node?.firstElementChild as HTMLElement)}>
+      <div
+        style={{ display: 'contents' }}
+        ref={(node) => {
+          setPopperElement(node?.firstElementChild as HTMLElement);
+        }}
+      >
         {localPopper}
       </div>
     );
@@ -545,7 +550,12 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   return (
     <>
       {!triggerRef && trigger && React.isValidElement(trigger) && (
-        <div style={{ display: 'contents' }} ref={(node) => setTriggerElement(node?.firstElementChild as HTMLElement)}>
+        <div
+          style={{ display: 'contents' }}
+          ref={(node) => {
+            setTriggerElement(node?.firstElementChild as HTMLElement);
+          }}
+        >
           {trigger}
         </div>
       )}

package/src/helpers/Popper/thirdparty/react-popper/usePopper.ts

@@ -102,7 +102,7 @@ export const usePopper = (
     updateStateModifier
   ]);
 
-  const popperInstanceRef = React.useRef<any>();
+  const popperInstanceRef = React.useRef<any>(undefined);
 
   useIsomorphicLayoutEffect(() => {
     if (popperInstanceRef && popperInstanceRef.current) {

package/src/helpers/util.ts

@@ -1,4 +1,3 @@
-import * as ReactDOM from 'react-dom';
 import { globalWidthBreakpoints, globalHeightBreakpoints, SIDE } from './constants';
 
 /**
@@ -180,8 +179,8 @@ export function keyHandler(
     if (refsCollection[nextIndex].focus) {
       refsCollection[nextIndex].focus();
     }
-    // eslint-disable-next-line react/no-find-dom-node
-    const element = ReactDOM.findDOMNode(refsCollection[nextIndex]) as HTMLElement;
+
+    const element = refsCollection[nextIndex] as HTMLElement;
     element.focus();
   } else if (position !== 'tab') {
     if (isMultiDimensional) {

package/src/layouts/Bullseye/Bullseye.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
+import type { JSX } from 'react';
+
 export interface BullseyeProps extends React.HTMLProps<HTMLDivElement> {
   /** content rendered inside the Bullseye layout */
   children?: React.ReactNode;

package/src/layouts/Bullseye/__tests__/Bullseye.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { Bullseye } from '../Bullseye';
 

package/src/components/Button/examples/ButtonRouterLink.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-import { Link } from '@reach/router';
-
-export const ButtonRouterLink: React.FunctionComponent = () => (
-  <Button variant="link" component={(props: any) => <Link {...props} to="#" />}>
-    Router link
-  </Button>
-);

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

@@ -1,108 +0,0 @@
-import React from 'react';
-import {
-  DataList,
-  DataListItem,
-  DataListCell,
-  DataListItemRow,
-  DataListCheck,
-  DataListControl,
-  DataListDragButton,
-  DataListItemCells,
-  getUniqueId
-} from '@patternfly/react-core';
-import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
-
-interface ItemType {
-  id: string;
-  content: string;
-}
-
-const getItems = (count: number) =>
-  Array.from({ length: count }, (_, idx) => idx).map((idx) => ({
-    id: `draggable-item-${idx}`,
-    content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
-  }));
-
-const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
-  const result = list;
-  const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
-  return result;
-};
-
-export const DataListDraggable: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState(getItems(10));
-  const [liveText, setLiveText] = React.useState('');
-
-  function onDrag(source) {
-    setLiveText(`Started dragging ${items[source.index].content}`);
-    // Return true to allow drag
-    return true;
-  }
-
-  function onDragMove(source, dest) {
-    const newText = dest ? `Move ${items[source.index].content} to ${items[dest.index].content}` : 'Invalid drop zone';
-    if (newText !== liveText) {
-      setLiveText(newText);
-    }
-  }
-
-  function onDrop(source, dest) {
-    if (dest) {
-      const newItems = reorder(items, source.index, dest.index);
-      setItems(newItems);
-
-      setLiveText('Dragging finished.');
-      return true; // Signal that this is a valid drop and not to animate the item returning home.
-    } else {
-      setLiveText('Dragging cancelled. List unchanged.');
-    }
-  }
-
-  const uniqueId = getUniqueId();
-
-  return (
-    <DragDrop onDrag={onDrag} onDragMove={onDragMove} onDrop={onDrop}>
-      <Droppable hasNoWrapper>
-        <DataList aria-label="draggable data list example" isCompact>
-          {items.map(({ id, content }) => (
-            <Draggable key={id} hasNoWrapper>
-              <DataListItem aria-labelledby={`draggable-${id}`} ref={React.createRef()}>
-                <DataListItemRow>
-                  <DataListControl>
-                    <DataListDragButton
-                      aria-label="Reorder"
-                      aria-labelledby={`draggable-${id}`}
-                      aria-describedby={`description-${uniqueId}`}
-                      aria-pressed="false"
-                    />
-                    <DataListCheck
-                      id={`check-draggable-${id}`}
-                      aria-labelledby={`draggable-${id}`}
-                      name={id}
-                      otherControls
-                    />
-                  </DataListControl>
-                  <DataListItemCells
-                    dataListCells={[
-                      <DataListCell key={id}>
-                        <span id={`draggable-${id}`}>{content}</span>
-                      </DataListCell>
-                    ]}
-                  />
-                </DataListItemRow>
-              </DataListItem>
-            </Draggable>
-          ))}
-        </DataList>
-      </Droppable>
-      <div className="pf-v6-screen-reader" aria-live="assertive">
-        {liveText}
-      </div>
-      <div className="pf-v6-screen-reader" id={`description-${uniqueId}`}>
-        Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm
-        the drag, or any other key to cancel the drag operation.
-      </div>
-    </DragDrop>
-  );
-};