Merge branch 'patternfly:main' into main

packages/demo-app-ts/package.json

@@ -9,9 +9,9 @@
     "serve:demo-app": "node scripts/serve"
   },
   "dependencies": {
-    "@patternfly/react-core": "^5.0.0",
-    "@patternfly/react-icons": "^5.0.0",
-    "@patternfly/react-styles": "^5.0.0",
+    "@patternfly/react-core": "^5.1.1",
+    "@patternfly/react-icons": "^5.1.1",
+    "@patternfly/react-styles": "^5.1.1",
     "react": "^18",
     "react-dom": "^18",
     "react-router": "^5.3.3",

packages/demo-app-ts/src/utils/useTopologyOptions.tsx

@@ -362,7 +362,7 @@ export const useTopologyOptions = (
   const saveModel = () => {
     setSavedModel(controller.toModel());
     setModelSaved(true);
-    window.setTimeout(() => {
+    setTimeout(() => {
       setModelSaved(false);
     }, 2000);
   };

packages/module/package.json

@@ -33,9 +33,9 @@
     "tag": "prerelease"
   },
   "dependencies": {
-    "@patternfly/react-core": "^5.0.0",
-    "@patternfly/react-icons": "^5.0.0",
-    "@patternfly/react-styles": "^5.0.0",
+    "@patternfly/react-core": "^5.1.1",
+    "@patternfly/react-icons": "^5.1.1",
+    "@patternfly/react-styles": "^5.1.1",
     "@types/d3": "^7.4.0",
     "@types/d3-force": "^1.2.1",
     "@types/dagre": "0.7.42",
@@ -56,11 +56,11 @@
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^5.0.15",
-    "@patternfly/patternfly": "^5.0.0",
+    "@patternfly/documentation-framework": "^5.2.15",
+    "@patternfly/patternfly": "^5.1.0",
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/react-code-editor": "^5.0.0",
-    "@patternfly/react-table": "^5.0.0",
+    "@patternfly/react-code-editor": "^5.1.1",
+    "@patternfly/react-table": "^5.1.1",
     "@types/lodash": "^4.14.191",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

packages/module/src/behavior/useDndDrag.tsx

@@ -118,7 +118,7 @@ export const useDndDrag = <
   React.useEffect(
     () => () => {
       if (canUseDOM) {
-        d3.select(window.document).on(createKeyHandlerId(), null);
+        d3.select(document).on(createKeyHandlerId(), null);
       }
       if (dndManager.isDragging() && dndManager.getSourceId() === monitor.getHandlerId()) {
         dndManager.endDrag();

packages/module/src/components/SVGArrowMarker.tsx

@@ -1,13 +1,6 @@
 import * as React from 'react';
 import SVGDefs from './defs/SVGDefs';
 
-declare const global: any;
-
-// workaround to pass docs building
-if (!global.SVGElement) {
-  global.SVGElement = global.Element;
-}
-
 interface SVGArrowMarkerProps {
   id: string;
   nodeSize: number;

packages/module/src/components/TopologyControlBar/__tests__/__snapshots__/TopologyControlBar.test.tsx.snap

@@ -26,6 +26,7 @@ exports[`TopologyControlBar should accept button options correctly 1`] = `
               style="display: contents;"
             >
               <button
+                aria-describedby="pf-tooltip-11"
                 aria-disabled="false"
                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
                 data-ouia-component-id="OUIA-Generated-Button-tertiary-6"
@@ -119,14 +120,6 @@ exports[`TopologyControlBar should accept button options correctly 1`] = `
           </div>
         </div>
       </div>
-      <div
-        class="pf-v5-c-toolbar__expandable-content"
-        id="pf-topology-control-bar-1-expandable-content-1"
-      >
-        <div
-          class="pf-v5-c-toolbar__group"
-        />
-      </div>
     </div>
     <div
       class="pf-v5-c-toolbar__content pf-m-hidden"
@@ -166,6 +159,7 @@ exports[`TopologyControlBar should display the default controls correctly 1`] =
               style="display: contents;"
             >
               <button
+                aria-describedby="pf-tooltip-5"
                 aria-disabled="false"
                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
                 data-ouia-component-id="OUIA-Generated-Button-tertiary-1"
@@ -320,14 +314,6 @@ exports[`TopologyControlBar should display the default controls correctly 1`] =
           </div>
         </div>
       </div>
-      <div
-        class="pf-v5-c-toolbar__expandable-content"
-        id="pf-topology-control-bar-0-expandable-content-0"
-      >
-        <div
-          class="pf-v5-c-toolbar__group"
-        />
-      </div>
     </div>
     <div
       class="pf-v5-c-toolbar__content pf-m-hidden"

packages/module/src/components/TopologyView/__tests__/__snapshots__/TopologyView.test.tsx.snap

@@ -47,14 +47,6 @@ exports[`TopologyView should display topology correctly 1`] = `
               />
             </div>
           </div>
-          <div
-            class="pf-v5-c-toolbar__expandable-content"
-            id="pf-topology-view-0-expandable-content-0"
-          >
-            <div
-              class="pf-v5-c-toolbar__group"
-            />
-          </div>
         </div>
         <div
           class="pf-v5-c-toolbar__content"
@@ -70,14 +62,6 @@ exports[`TopologyView should display topology correctly 1`] = `
               />
             </div>
           </div>
-          <div
-            class="pf-v5-c-toolbar__expandable-content"
-            id="pf-topology-view-0-expandable-content-1"
-          >
-            <div
-              class="pf-v5-c-toolbar__group"
-            />
-          </div>
         </div>
         <hr
           class="pf-v5-c-divider"

packages/module/src/components/nodes/DefaultNode.tsx

@@ -265,7 +265,7 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
       setNodeScale(1);
       nodeScaled.current = false;
       if (animationRef.current) {
-        window.cancelAnimationFrame(animationRef.current);
+        cancelAnimationFrame(animationRef.current);
         animationRef.current = 0;
       }
     } else {
@@ -278,7 +278,7 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
         const nextScale = Math.min(scale + scaleDelta * scalePercent, scaleGoal.current);
         setNodeScale(nextScale);
         if (nextScale < scaleGoal.current) {
-          animationRef.current = window.requestAnimationFrame(bumpScale);
+          animationRef.current = requestAnimationFrame(bumpScale);
         } else {
           nodeScaled.current = true;
           animationRef.current = 0;
@@ -288,12 +288,12 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
       if (nodeScaled.current) {
         setNodeScale(scaleGoal.current);
       } else if (!animationRef.current) {
-        animationRef.current = window.requestAnimationFrame(bumpScale);
+        animationRef.current = requestAnimationFrame(bumpScale);
       }
     }
     return () => {
       if (animationRef.current) {
-        window.cancelAnimationFrame(animationRef.current);
+        cancelAnimationFrame(animationRef.current);
         animationRef.current = 0;
       }
     };

packages/module/src/components/svg/SvgDropShadowFilter.tsx

@@ -22,7 +22,7 @@ const SvgDropShadowFilter: React.FunctionComponent<SvgDropShadowFilterProps> = (
   floodColor = globalBlack1000.value,
   floodOpacity = 0.2
 }) => {
-  if (window.navigator.userAgent.includes('Edge')) {
+  if (navigator.userAgent.includes('Edge')) {
     // feDropShadow is not supported by Edge
     return (
       <SVGDefs id={id}>

packages/module/src/hooks/useScaleNode.tsx

@@ -11,7 +11,7 @@ const useScaleNode = (scaleNode: boolean, scale: number, scaleUpTime: number = 2
       setNodeScale(1);
       nodeScaled.current = false;
       if (animationRef.current) {
-        window.cancelAnimationFrame(animationRef.current);
+        cancelAnimationFrame(animationRef.current);
         animationRef.current = 0;
       }
     } else {
@@ -24,7 +24,7 @@ const useScaleNode = (scaleNode: boolean, scale: number, scaleUpTime: number = 2
         const nextScale = Math.min(scale + scaleDelta * scalePercent, scaleGoal.current);
         setNodeScale(nextScale);
         if (nextScale < scaleGoal.current) {
-          animationRef.current = window.requestAnimationFrame(bumpScale);
+          animationRef.current = requestAnimationFrame(bumpScale);
         } else {
           nodeScaled.current = true;
           animationRef.current = 0;
@@ -34,12 +34,12 @@ const useScaleNode = (scaleNode: boolean, scale: number, scaleUpTime: number = 2
       if (nodeScaled.current) {
         setNodeScale(scaleGoal.current);
       } else if (!animationRef.current) {
-        animationRef.current = window.requestAnimationFrame(bumpScale);
+        animationRef.current = requestAnimationFrame(bumpScale);
       }
     }
     return () => {
       if (animationRef.current) {
-        window.cancelAnimationFrame(animationRef.current);
+        cancelAnimationFrame(animationRef.current);
         animationRef.current = 0;
       }
     };

packages/module/src/layouts/BaseLayout.ts

@@ -192,7 +192,7 @@ export class BaseLayout implements Layout {
   private stopListening(): void {
     const controller = this.graph.getController();
     if (this.scheduleHandle) {
-      window.cancelAnimationFrame(this.scheduleHandle);
+      cancelAnimationFrame(this.scheduleHandle);
     }
     if (controller) {
       controller.removeEventListener(ADD_CHILD_EVENT, this.handleChildAdded);
@@ -234,7 +234,7 @@ export class BaseLayout implements Layout {
 
   private scheduleLayout = (): void => {
     if (!this.scheduleHandle) {
-      this.scheduleHandle = window.requestAnimationFrame(() => {
+      this.scheduleHandle = requestAnimationFrame(() => {
         delete this.scheduleHandle;
         try {
           this.runLayout(false, this.scheduleRestart);

packages/module/src/utils/svg-utils.ts

@@ -4,7 +4,7 @@ import { PointTuple } from '../types';
  * @param id
  */
 export function createSvgIdUrl(id: string): string {
-  return `url(${`${window.location.pathname}${window.location.search}`}#${id})`;
+  return `url(${`${location.pathname}${location.search}`}#${id})`;
 }
 
 export type HullPaddingGetter = (point: PointTuple) => number;

packages/module/src/utils/useHover.ts

@@ -17,7 +17,7 @@ const useHover = <T extends Element>(
   );
 
   // The unset handle needs to be referred by listeners in different closures.
-  const unsetHandle = React.useRef<number>();
+  const unsetHandle = React.useRef<any>();
 
   const callbackRef = useCallbackRef(
     React.useCallback(
@@ -31,7 +31,7 @@ const useHover = <T extends Element>(
             clearTimeout(delayHandle);
 
             if (delay != null) {
-              delayHandle = window.setTimeout(() => {
+              delayHandle = setTimeout(() => {
                 clearTimeout(unsetHandle.current);
                 setHover(newState);
               }, delay);
@@ -60,7 +60,7 @@ const useHover = <T extends Element>(
               // This can happen with layers. Rendering a node to a new layer will unmount the old node
               // and remount a new node at the same location. This will prevent flickering and getting
               // stuck in a hover state.
-              unsetHandle.current = window.setTimeout(() => {
+              unsetHandle.current = setTimeout(() => {
                 if (mountRef.current) {
                   setHover(false);
                 }