@patternfly/react-core 4.222.12 → 4.222.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.222.12",
+  "version": "4.222.13",
   "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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.73.12",
-    "@patternfly/react-styles": "^4.72.12",
-    "@patternfly/react-tokens": "^4.74.12",
+    "@patternfly/react-icons": "^4.73.13",
+    "@patternfly/react-styles": "^4.72.13",
+    "@patternfly/react-tokens": "^4.74.13",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.197.0",
+    "@patternfly/patternfly": "4.198.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "38768ae0d7afdf586573a16af314bc3e67b0d73f"
+  "gitHead": "12411175163290e8c6dd598cfb5ce53ba58688b3"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -55,6 +55,8 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   className?: string;
   /** @hide Internal prop to allow pressing escape in select menu to not close popover */
   onSelectToggle?: (open: boolean) => void;
+  /** Flag to set browser focus on the passed date **/
+  isDateFocused?: boolean;
 }
 
 // Must be numeric given current header design
@@ -110,19 +112,24 @@ export const CalendarMonth = ({
   nextMonthAriaLabel = 'Next month',
   yearInputAriaLabel = 'Select year',
   cellAriaLabel,
+  isDateFocused = false,
   ...props
 }: CalendarProps) => {
   const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(monthNum => new Date(1990, monthNum)).map(monthFormat);
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
   // eslint-disable-next-line prefer-const
-  let [focusedDate, setFocusedDate] = React.useState(new Date(dateProp));
-  if (!isValidDate(focusedDate)) {
-    if (isValidDate(rangeStart)) {
-      focusedDate = rangeStart;
+  const [focusedDate, setFocusedDate] = React.useState(() => {
+    const initDate = new Date(dateProp);
+    if (isValidDate(initDate)) {
+      return initDate;
     } else {
-      focusedDate = today;
+      if (isValidDate(rangeStart)) {
+        return rangeStart;
+      } else {
+        return today;
+      }
     }
-  }
+  });
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
@@ -131,21 +138,22 @@ export const CalendarMonth = ({
   const isValidated = (date: Date) => validators.every(validator => validator(date));
   const focusedDateValidated = isValidated(focusedDate);
   useEffect(() => {
-    if (!(isValidDate(dateProp) && isSameDate(focusedDate, dateProp))) {
+    if (isValidDate(dateProp) && !isSameDate(focusedDate, dateProp)) {
       setFocusedDate(dateProp);
+    } else if (!dateProp) {
+      setFocusedDate(today);
     }
   }, [dateProp]);
 
   useEffect(() => {
-    // When using header controls don't move focus
-    if (shouldFocus) {
-      if (focusRef.current && focusedDateValidated) {
-        focusRef.current.focus();
-      }
+    // Calendar month should not be focused on page load
+    // Datepicker should place focus in calendar month when opened
+    if ((shouldFocus || isDateFocused) && focusedDateValidated && focusRef.current) {
+      focusRef.current.focus();
     } else {
       setShouldFocus(true);
     }
-  }, [focusedDate]);
+  }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
 
   const onMonthClick = (newDate: Date) => {
     setFocusedDate(newDate);

package/src/components/DatePicker/DatePicker.tsx

@@ -8,6 +8,7 @@ import { InputGroup } from '../InputGroup/InputGroup';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import { CalendarMonth, CalendarFormat, isValidDate } from '../CalendarMonth';
 import { useImperativeHandle } from 'react';
+import { KeyTypes } from '../../helpers';
 
 export interface DatePickerProps
   extends CalendarFormat,
@@ -36,8 +37,13 @@ export interface DatePickerProps
   helperText?: React.ReactNode;
   /** Aria label for the button to open the date picker */
   buttonAriaLabel?: string;
-  /** The element to append the popover to */
-  appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement);
+  /** The container to append the menu to. Defaults to 'parent'.
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * menuAppendTo={() => document.body}
+   * menuAppendTo={document.getElementById('target')}
+   */
+  appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'parent';
   /** Props to pass to the Popover */
   popoverProps?: Omit<PopoverProps, 'appendTo'>;
   /** Functions that returns an error message if a date is invalid */
@@ -49,8 +55,13 @@ export interface DatePickerProps
 export interface DatePickerRef {
   /** Sets the calendar open status */
   setCalendarOpen: (isOpen: boolean) => void;
-  /** Toggles the calendar open status */
-  toggleCalendar: () => void;
+  /** Toggles the calendar open status. If no parameters are passed, the calendar will simply toggle its open status.
+   * If the isOpen parameter is passed, that will set the calendar open status to the value of the isOpen parameter.
+   * If the eventKey parameter is set to 'Escape', that will invoke the date pickers onEscapePress event to toggle the
+   * correct control appropriately. */
+  toggleCalendar: (isOpen?: boolean, eventKey?: string) => void;
+  /** Current calendar open status */
+  isCalendarOpen: boolean;
 }
 
 export const yyyyMMddFormat = (date: Date) =>
@@ -74,7 +85,7 @@ const DatePickerBase = (
     onBlur = (): any => undefined,
     invalidFormatText = 'Invalid date',
     helperText,
-    appendTo,
+    appendTo = 'parent',
     popoverProps,
     monthFormat,
     weekdayFormat,
@@ -98,6 +109,7 @@ const DatePickerBase = (
   const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
   const style = { '--pf-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps };
   const buttonRef = React.useRef<HTMLButtonElement>();
+  const datePickerWrapperRef = React.useRef<HTMLDivElement>();
 
   React.useEffect(() => {
     setValue(valueProp);
@@ -159,13 +171,21 @@ const DatePickerBase = (
     ref,
     () => ({
       setCalendarOpen: (isOpen: boolean) => setPopoverOpen(isOpen),
-      toggleCalendar: () => setPopoverOpen(prev => !prev)
+      toggleCalendar: (setOpen?: boolean, eventKey?: string) => {
+        if (eventKey === KeyTypes.Escape && popoverOpen && !selectOpen) {
+          setPopoverOpen(prev => (setOpen !== undefined ? setOpen : !prev));
+        }
+      },
+      isCalendarOpen: popoverOpen
     }),
-    [setPopoverOpen]
+    [setPopoverOpen, popoverOpen, selectOpen]
   );
 
+  const getParentElement = () =>
+    datePickerWrapperRef && datePickerWrapperRef.current ? datePickerWrapperRef.current : null;
+
   return (
-    <div className={css(styles.datePicker, className)} style={style} {...props}>
+    <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
       <Popover
         position="bottom"
         bodyContent={
@@ -182,14 +202,16 @@ const DatePickerBase = (
             dayFormat={dayFormat}
             weekStart={weekStart}
             rangeStart={rangeStart}
+            isDateFocused
           />
         }
         showClose={false}
         isVisible={popoverOpen}
         shouldClose={(_1, _2, event) => {
           event = event as KeyboardEvent;
-          // Let the select menu close
-          if (event.keyCode && event.keyCode === 27 && selectOpen) {
+          if (event.key === KeyTypes.Escape && selectOpen) {
+            event.stopPropagation();
+            setSelectOpen(false);
             return false;
           }
           // Let our button handle toggling
@@ -197,12 +219,15 @@ const DatePickerBase = (
             return false;
           }
           setPopoverOpen(false);
+          if (event.key === KeyTypes.Escape && popoverOpen) {
+            event.stopPropagation();
+          }
           return true;
         }}
         withFocusTrap
         hasNoPadding
         hasAutoWidth
-        appendTo={appendTo}
+        appendTo={appendTo === 'parent' ? getParentElement() : appendTo}
         {...popoverProps}
       >
         <div className={styles.datePickerInput}>

package/src/components/Modal/examples/Modal.md

@@ -876,3 +876,5 @@ If the content that you're passing to the modal is likely to overflow the modal
 
 ```ts file="ModalWithOverflowingContent.tsx"
 ```
+
+

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -61,6 +61,8 @@ class SimpleOverflowMenu extends React.Component {
             isOpen={isOpen}
             isPlain
             dropdownItems={dropdownItems}
+            isFlipEnabled
+            menuAppendTo="parent"
           />
         </OverflowMenuControl>
       </OverflowMenu>
@@ -153,6 +155,8 @@ class OverflowMenuGroupTypes extends React.Component {
             isOpen={isOpen}
             isPlain
             dropdownItems={dropdownItems}
+            isFlipEnabled
+            menuAppendTo="parent"
           />
         </OverflowMenuControl>
       </OverflowMenu>
@@ -239,6 +243,8 @@ class OverflowMenuAdditionalOptions extends React.Component {
             isOpen={isOpen}
             isPlain
             dropdownItems={dropdownItems}
+            isFlipEnabled
+            menuAppendTo="parent"
           />
         </OverflowMenuControl>
       </OverflowMenu>
@@ -301,6 +307,8 @@ class OverflowMenuPersist extends React.Component {
             isOpen={isOpen}
             isPlain
             dropdownItems={dropdownItems}
+            isFlipEnabled
+            menuAppendTo="parent"
           />
         </OverflowMenuControl>
       </OverflowMenu>

package/src/components/Popover/Popover.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import * as React from 'react';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import styles from '@patternfly/react-styles/css/components/Popover/popover';
 import { css } from '@patternfly/react-styles';
 import { PopoverContext } from './PopoverContext';
@@ -330,7 +330,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   const hasCustomMinWidth = minWidth !== popoverMinWidth.value;
   const hasCustomMaxWidth = maxWidth !== popoverMaxWidth.value;
   const onDocumentKeyDown = (event: KeyboardEvent) => {
-    if (event.keyCode === KEY_CODES.ESCAPE_KEY && visible) {
+    if (event.key === KeyTypes.Escape && visible) {
       if (triggerManually) {
         shouldClose(null, hide, event);
       } else {

package/src/components/TimePicker/TimePicker.tsx

@@ -67,11 +67,15 @@ export interface TimePickerProps
   maxTime?: string | Date;
   /** Includes number of seconds with the chosen time and allows users to manually edit the seconds value. */
   includeSeconds?: boolean;
+  /** Flag to control the opened state of the time picker menu */
+  isOpen?: boolean;
+  /** Handler invoked each time the open state of time picker updates */
+  setIsOpen?: (isOpen?: boolean) => void;
 }
 
 interface TimePickerState {
   isInvalid: boolean;
-  isOpen: boolean;
+  isTimeOptionsOpen: boolean;
   timeState: string;
   focusedIndex: number;
   scrollIndex: number;
@@ -102,12 +106,13 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     stepMinutes: 30,
     inputProps: {},
     minTime: '',
-    maxTime: ''
+    maxTime: '',
+    setIsOpen: () => {}
   };
 
   constructor(props: TimePickerProps) {
     super(props);
-    const { is24Hour, delimiter, time, includeSeconds } = this.props;
+    const { is24Hour, delimiter, time, includeSeconds, isOpen } = this.props;
     let { minTime, maxTime } = this.props;
     if (minTime === '') {
       const minSeconds = includeSeconds ? `${delimiter}00` : '';
@@ -120,7 +125,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     const timeRegex = this.getRegExp();
     this.state = {
       isInvalid: false,
-      isOpen: false,
+      isTimeOptionsOpen: isOpen,
       timeState: parseTime(time, timeRegex, delimiter, !is24Hour, includeSeconds),
       focusedIndex: null,
       scrollIndex: 0,
@@ -145,18 +150,18 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
   onDocClick = (event: MouseEvent | TouchEvent) => {
     const clickedOnToggle = this.toggleRef?.current?.contains(event.target as Node);
     const clickedWithinMenu = this.menuRef?.current?.contains(event.target as Node);
-    if (this.state.isOpen && !(clickedOnToggle || clickedWithinMenu)) {
+    if (this.state.isTimeOptionsOpen && !(clickedOnToggle || clickedWithinMenu)) {
       this.onToggle(false);
     }
   };
 
   handleGlobalKeys = (event: KeyboardEvent) => {
-    const { isOpen, focusedIndex, scrollIndex } = this.state;
+    const { isTimeOptionsOpen, focusedIndex, scrollIndex } = this.state;
     // keyboard pressed while focus on toggle
     if (this.inputRef?.current?.contains(event.target as Node)) {
-      if (!isOpen && event.key !== KeyTypes.Tab) {
+      if (!isTimeOptionsOpen && event.key !== KeyTypes.Tab && event.key !== KeyTypes.Escape) {
         this.onToggle(true);
-      } else if (isOpen) {
+      } else if (isTimeOptionsOpen) {
         if (event.key === KeyTypes.Escape || event.key === KeyTypes.Tab) {
           this.onToggle(false);
         } else if (event.key === KeyTypes.Enter) {
@@ -188,9 +193,13 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
   };
 
   componentDidUpdate(prevProps: TimePickerProps, prevState: TimePickerState) {
-    const { timeState, isOpen, isInvalid, timeRegex } = this.state;
-    const { time, is24Hour, delimiter, includeSeconds } = this.props;
-    if (isOpen && !prevState.isOpen && timeState && !isInvalid) {
+    const { timeState, isTimeOptionsOpen, isInvalid, timeRegex } = this.state;
+    const { time, is24Hour, delimiter, includeSeconds, isOpen } = this.props;
+    if (prevProps.isOpen !== isOpen) {
+      this.onToggle(isOpen);
+    }
+
+    if (isTimeOptionsOpen && !prevState.isTimeOptionsOpen && timeState && !isInvalid) {
       this.scrollToSelection(timeState);
     }
     if (delimiter !== prevProps.delimiter) {
@@ -340,18 +349,21 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       const { timeRegex, isInvalid } = prevState;
       const { delimiter, is24Hour, includeSeconds } = this.props;
       const time = parseTime(prevState.timeState, timeRegex, delimiter, !is24Hour, includeSeconds);
-
       return {
-        isOpen,
+        isTimeOptionsOpen: isOpen,
         timeState: time,
         isInvalid: isOpen ? isInvalid : !this.isValid(time)
       };
     });
+    this.props.setIsOpen(isOpen);
+    if (!isOpen) {
+      this.inputRef.current.focus();
+    }
   };
 
   onSelect = (e: any) => {
     const { timeRegex, timeState } = this.state;
-    const { delimiter, is24Hour, includeSeconds } = this.props;
+    const { delimiter, is24Hour, includeSeconds, setIsOpen } = this.props;
     const time = parseTime(e.target.textContent, timeRegex, delimiter, !is24Hour, includeSeconds);
     if (time !== timeState) {
       this.onInputChange(time);
@@ -359,13 +371,14 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
 
     this.inputRef.current.focus();
     this.setState({
-      isOpen: false,
+      isTimeOptionsOpen: false,
       isInvalid: false
     });
+    setIsOpen(false);
   };
 
   onInputClick = (e: any) => {
-    if (!this.state.isOpen) {
+    if (!this.state.isTimeOptionsOpen) {
       this.onToggle(true);
     }
     e.stopPropagation();
@@ -417,6 +430,10 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       inputProps,
       /* eslint-disable @typescript-eslint/no-unused-vars */
       onChange,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      setIsOpen,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      isOpen,
       time,
       validateTime,
       minTime,
@@ -425,7 +442,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
-    const { timeState, isOpen, isInvalid, minTimeState, maxTimeState } = this.state;
+    const { timeState, isTimeOptionsOpen, isInvalid, minTimeState, maxTimeState } = this.state;
     const style = { '--pf-c-date-picker__input--c-form-control--Width': width } as React.CSSProperties;
     const options = makeTimeOptions(stepMinutes, !is24Hour, delimiter, minTimeState, maxTimeState, includeSeconds);
     const isValidFormat = this.isValidFormat(timeState);
@@ -484,13 +501,13 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
                     appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
                     trigger={textInput}
                     popper={menuContainer}
-                    isVisible={isOpen}
+                    isVisible={isTimeOptionsOpen}
                   />
                 ) : (
                   textInput
                 )}
               </div>
-              {isOpen && menuAppendTo === 'inline' && menuContainer}
+              {isTimeOptionsOpen && menuAppendTo === 'inline' && menuContainer}
             </div>
           </InputGroup>
           {isInvalid && (

package/src/components/Toolbar/examples/Toolbar.md

@@ -811,6 +811,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownSeparator,
+  DropdownPosition,
   KebabToggle,
   SearchInput
 } from '@patternfly/react-core';
@@ -1036,6 +1037,7 @@ class ToolbarWithFilterExample extends React.Component {
             isOpen={kebabIsOpen}
             isPlain
             dropdownItems={dropdownItems}
+            position={DropdownPosition.right}
           />
         </ToolbarItem>
       </React.Fragment>
@@ -1080,6 +1082,7 @@ import {
   DropdownToggle,
   DropdownToggleCheckbox,
   DropdownItem,
+  DropdownPosition,
   Divider,
   OverflowMenu,
   OverflowMenuContent,
@@ -1293,6 +1296,7 @@ class ToolbarStacked extends React.Component {
                     isOpen={kebabIsOpen}
                     isPlain
                     dropdownItems={dropdownItems}
+                    position={DropdownPosition.right}
                   />
                 </OverflowMenuControl>
               </OverflowMenu>

package/src/demos/Card/Card.md

@@ -525,6 +525,8 @@ class CardViewBasic extends React.Component {
                 isOpen={isLowerToolbarKebabDropdownOpen}
                 isPlain
                 dropdownItems={toolbarKebabDropdownItems}
+                isFlipEnabled
+                menuAppendTo="parent"
               />
             </OverflowMenuControl>
           </OverflowMenu>

package/src/demos/{DatePicker.md → DatePicker/DatePicker.md}

@@ -146,3 +146,11 @@ DateTimeRangePicker = () => {
 }
 ```
 
+
+### Date and time pickers in modal
+Modals trap focus and watch a few document level events. In order to place a date picker in a modal:
+- To avoid the modal's escape press event handler from overruling the date picker's escape press handlers, use the `DatePickerRef` to close the calendar when it is open and the escape key is pressed.
+- Append the calendar to the modal to keep it as close to the date picker in the DOM while maintaining correct layouts visually
+  In order to place a time picker in the modal, its menu must be appended to the time picker's parent.
+```ts file="./examples/DateTimePickerInModal.tsx"
+```

package/src/demos/DatePicker/examples/DateTimePickerInModal.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { DatePicker, Modal, ModalVariant, Button, TimePicker, InputGroup } from '@patternfly/react-core';
+
+export const SimpleModal = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isTimePickerOpen, setIsTimePickerOpen] = React.useState(false);
+  const dateRef = React.useRef(null);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const onEscapePress = (event: KeyboardEvent) => {
+    if (dateRef && dateRef.current && dateRef.current.isCalendarOpen) {
+      dateRef.current.toggleCalendar(false, event.key);
+    } else if (isTimePickerOpen) {
+      setIsTimePickerOpen(false);
+    } else {
+      handleModalToggle();
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Launch modal
+      </Button>
+      <Modal
+        id="date-time-picker-modal"
+        variant={ModalVariant.small}
+        title="Generic modal header"
+        isOpen={isModalOpen}
+        onEscapePress={onEscapePress}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        <InputGroup>
+          <DatePicker ref={dateRef} appendTo={() => document.getElementById('date-time-picker-modal')} />
+          <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
+        </InputGroup>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/demos/PrimaryDetail.md

@@ -1246,6 +1246,8 @@ class PrimaryDetailCardView extends React.Component {
                 isOpen={isLowerToolbarKebabDropdownOpen}
                 isPlain
                 dropdownItems={toolbarKebabDropdownItems}
+                isFlipEnabled
+                menuAppendTo="parent"
               />
             </OverflowMenuControl>
           </OverflowMenu>
@@ -1337,14 +1339,14 @@ class PrimaryDetailCardView extends React.Component {
             <Text component="p">This is a demo that showcases Patternfly Cards.</Text>
           </TextContent>
         </PageSection>
+        <PageSection isFilled padding={{ default: 'noPadding' }}>
+          <Toolbar id="card-view-data-toolbar-group-types" usePageInsets clearAllFilters={this.onDelete}>
+            <ToolbarContent>{toolbarItems}</ToolbarContent>
+          </Toolbar>
+          <Divider component="div" />
+        </PageSection>
         <PageSection isFilled padding={{ default: 'noPadding' }}>
           <Drawer isExpanded={isDrawerExpanded} className={'pf-m-inline-on-2xl'}>
-            <DrawerSection>
-              <Toolbar id="card-view-data-toolbar-group-types" usePageInsets clearAllFilters={this.onDelete}>
-                <ToolbarContent>{toolbarItems}</ToolbarContent>
-              </Toolbar>
-              <Divider component="div" />
-            </DrawerSection>
             <DrawerContent panelContent={panelContent} className={'pf-m-no-background'}>
               <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
             </DrawerContent>
@@ -1663,6 +1665,8 @@ class PrimaryDetailDataListInCard extends React.Component {
                 }
                 isOpen={isDropdownOpen}
                 dropdownItems={dropdownItems}
+                isFlipEnabled
+                menuAppendTo="parent"
               />
             </ToolbarItem>
           </ToolbarContent>