chore(docs): Update docs to suggest using preventOverflow

Alternatively, we can also set preventOverflow to true by default if left or right are used, but it sounds like the team wants to avoid setting defaults like that.

Author: rebeccaalpert

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

@@ -7,7 +7,7 @@ import { useOUIAProps, OUIAProps, onToggleArrowKeydownDefault } from '../../help
 export interface DropdownPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
   direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
+  /** Horizontal position of the popper. If "left" or "right" are used on a dropdown near the edge of a page/container, you likely also want to enable the prop preventOverflow to prevent clipping. */
   position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
   width?: string | 'trigger';

packages/react-core/src/components/Menu/MenuContainer.tsx

@@ -4,7 +4,7 @@ import { onToggleArrowKeydownDefault, Popper } from '../../helpers';
 export interface MenuPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
   direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
+  /** Horizontal position of the popper. If "left" or "right" are used on a menu near the edge of a page/container, you likely also want to enable the prop preventOverflow to prevent clipping. */
   position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
   width?: string | 'trigger';

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

@@ -7,7 +7,7 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId, onToggleArrowKeydownDefault
 export interface SelectPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
   direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
+  /** Horizontal position of the popper. If "left" or "right" are used on a select near the edge of a page/container, you likely also want to enable the prop preventOverflow to prevent clipping. */
   position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */
   width?: string | 'trigger';

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

@@ -67,7 +67,7 @@ export interface PopperProps {
   popperRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** popper direction */
   direction?: 'up' | 'down';
-  /** popper position */
+  /** Horizontal position of the popper. Use the additional prop preventOverflow if seeing clipping. */
   position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Instead of direction and position can set the placement of the popper */
   placement?: Placement;
@@ -217,7 +217,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   onMount = () => {},
   onShow = () => {},
   onShown = () => {},
-  preventOverflow = false
+  preventOverflow
 }) => {
   const [triggerElement, setTriggerElement] = useState(null);
   const [refElement, setRefElement] = useState<HTMLElement>(null);