feat(Popover): update default flip behavior and width (#8191)

* feat(Popover): update default flip behavior and width

* fix flip positions for diagonals

* revert default for autoWidth for now

* remove old comment

Author: kmcfaul

packages/react-core/src/components/Popover/Popover.tsx

@@ -260,8 +260,20 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   closeBtnAriaLabel = 'Close',
   showClose = true,
   distance = 25,
-  // For every initial starting position, there are 3 escape positions
-  flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'],
+  flipBehavior = [
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'top-start',
+    'top-end',
+    'bottom-start',
+    'bottom-end',
+    'left-start',
+    'left-end',
+    'right-start',
+    'right-end'
+  ],
   animationDuration = 300,
   id,
   withFocusTrap: propWithFocusTrap,

packages/react-core/src/helpers/Popper/Popper.tsx

@@ -1,17 +1,45 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { usePopper } from './thirdparty/react-popper/usePopper';
-import { Placement, BasePlacement, Modifier } from './thirdparty/popper-core';
+import { Placement, Modifier } from './thirdparty/popper-core';
 import { css } from '@patternfly/react-styles';
 import { FindRefWrapper } from './FindRefWrapper';
 import '@patternfly/react-styles/css/components/Popper/Popper.css';
 
-const hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
+const hash = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom',
+  'top-start': 'bottom-end',
+  'top-end': 'bottom-start',
+  'bottom-start': 'top-end',
+  'bottom-end': 'top-start',
+  'left-start': 'right-end',
+  'left-end': 'right-start',
+  'right-start': 'left-end',
+  'right-end': 'left-start'
+};
 
 const getOppositePlacement = (placement: Placement): any =>
   placement.replace(
-    /left|right|bottom|top/g,
-    (matched: string) => hash[matched as 'left' | 'right' | 'bottom' | 'top'] as BasePlacement
+    /left|right|bottom|top|top-start|top-end|bottom-start|bottom-end|right-start|right-end|left-start|left-end/g,
+    (matched: string) =>
+      hash[
+        matched as
+          | 'left'
+          | 'right'
+          | 'bottom'
+          | 'top'
+          | 'top-start'
+          | 'top-end'
+          | 'bottom-start'
+          | 'bottom-end'
+          | 'right-start'
+          | 'right-end'
+          | 'left-start'
+          | 'left-end'
+      ] as Placement
   );
 
 /** @deprecated Please use the menuAppendTo prop directly from within the PF component which uses it. */